V13-FE-011: finalize search list layout slice

2026-08-09 02:57:26 +09:00
parent 9efd202e76
commit 6422cb2b13
984 changed files with 120811 additions and 1498 deletions
@@ -0,0 +1,24 @@
+<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>