25 lines
2.3 KiB
Vue
25 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { KbxAsyncState, KbxScreenDefinition, KbxTemplateContext } from '@kbx/contracts'
|
|
import KbxScreenFrame from './KbxScreenFrame.vue'
|
|
import KbxTemplateContextBar from './KbxTemplateContextBar.vue'
|
|
import KbxTemplateStateBoundary from './KbxTemplateStateBoundary.vue'
|
|
|
|
withDefaults(defineProps<{ screen:KbxScreenDefinition; can?:(permission:string)=>boolean; breadcrumb?:string; context?:KbxTemplateContext|null; contentState?:KbxAsyncState; refreshing?:boolean }>(), { contentState:'ready', refreshing:false })
|
|
const emit=defineEmits<{ command:[string] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<KbxScreenFrame expected-type="import" template-code="T08" :screen="screen" :can="can" :breadcrumb="breadcrumb" :command-bar="Boolean(screen.commands?.length || $slots.commands)" :suppress-default-utility="Boolean($slots.utility)" @command="emit('command',$event)">
|
|
<template #utility><slot name="utility" /></template><template #notice><slot name="notice" /></template>
|
|
<nav v-if="$slots.steps" class="kbx-import-page__steps" aria-label="가져오기 단계" data-kbx-surface="progress-steps"><slot name="steps" /></nav>
|
|
<div v-if="$slots.context || context" data-kbx-surface="context"><slot name="context"><KbxTemplateContextBar :context="context" /></slot></div>
|
|
<main class="kbx-import-page__content" data-kbx-surface="import-content"><KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" @retry="emit('command','retry')"><slot /></KbxTemplateStateBoundary></main>
|
|
<section v-if="$slots.result" class="kbx-import-page__result" data-kbx-surface="result"><slot name="result" /></section>
|
|
<footer v-if="$slots.footer" class="kbx-import-page__footer" data-kbx-surface="footer"><slot name="footer" /></footer>
|
|
</KbxScreenFrame>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-import-page__steps{min-height:var(--kbx-control-lg);display:flex;align-items:center;border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface-muted);padding:0 var(--kbx-space-3)}.kbx-import-page__content{min-height:0;flex:1}.kbx-import-page__result{border-top:var(--kbx-border-width) solid var(--kbx-color-border);padding-top:var(--kbx-space-2)}.kbx-import-page__footer{border-top:var(--kbx-border-width) solid var(--kbx-color-border);padding-top:var(--kbx-space-2)}
|
|
</style>
|