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,39 @@
+<script setup lang="ts">
+import type { KbxAsyncState, KbxScreenDefinition, KbxSummaryItem, KbxTemplateContext, KbxValidationError } from '@kbx/contracts'
+import KbxScreenFrame from './KbxScreenFrame.vue'
+import KbxSummaryBar from './KbxSummaryBar.vue'
+import KbxTemplateContextBar from './KbxTemplateContextBar.vue'
+import KbxTemplateStateBoundary from './KbxTemplateStateBoundary.vue'
+import KbxValidationSummary from './KbxValidationSummary.vue'
+
+const props=withDefaults(defineProps<{
+  screen:KbxScreenDefinition
+  selectionCount?:number
+  can?:(permission:string)=>boolean
+  breadcrumb?:string
+  dirty?:boolean
+  showKeyboardGuide?:boolean
+  context?:KbxTemplateContext|null
+  contentState?:KbxAsyncState
+  refreshing?:boolean
+  errors?:KbxValidationError[]
+  summaryItems?:KbxSummaryItem[]
+}>(), { showKeyboardGuide:true, context:null, contentState:'ready', refreshing:false, errors:()=>[], summaryItems:()=>[] })
+const emit=defineEmits<{ command:[string] }>()
+</script>
+
+<template>
+  <KbxScreenFrame expected-type="fast-entry" template-code="T04" :screen="screen" :selection-count="selectionCount" :can="can" :breadcrumb="breadcrumb" :dirty="dirty" :suppress-default-utility="Boolean($slots.utility)" @command="emit('command',$event)">
+    <template #utility><slot name="utility" /></template><template #notice><slot name="notice" /></template>
+    <section v-if="showKeyboardGuide" class="kbx-fast-entry__guide" aria-label="빠른 입력 키보드 안내" data-kbx-surface="keyboard-guide"><slot name="guide"><span><kbd>Enter</kbd> 입력 확정/다음</span><span><kbd>F2</kbd> 코드 조회</span><span><kbd>Ctrl+V</kbd> Excel 붙여넣기</span><span><kbd>Ctrl+D</kbd> Fill Down</span><span>오류는 Grid에서 바로 이동</span></slot></section>
+    <div v-if="$slots.context || context" data-kbx-surface="context"><slot name="context"><KbxTemplateContextBar :context="context" /></slot></div>
+    <div v-if="$slots.contextual" class="kbx-fast-entry__contextual" data-kbx-surface="bulk-action"><slot name="contextual" /></div>
+    <main class="kbx-fast-entry__content" data-kbx-surface="editable-grid"><KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" @retry="emit('command','reload')"><slot name="content" /></KbxTemplateStateBoundary></main>
+    <section v-if="$slots.validation || errors.length" class="kbx-fast-entry__validation" data-kbx-surface="validation"><slot name="validation"><KbxValidationSummary :errors="errors" /></slot></section>
+    <footer v-if="$slots.summary || summaryItems.length" class="kbx-fast-entry__summary" data-kbx-surface="summary"><slot name="summary"><KbxSummaryBar :items="summaryItems" align="end" /></slot></footer>
+  </KbxScreenFrame>
+</template>
+
+<style scoped>
+.kbx-fast-entry__guide{min-height:var(--kbx-control-sm);display:flex;align-items:center;gap:var(--kbx-space-3);padding:0 var(--kbx-space-2);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface-muted);font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted);flex-wrap:wrap}.kbx-fast-entry__guide kbd{font:inherit;font-weight:600;color:var(--kbx-color-text)}.kbx-fast-entry__contextual{position:sticky;top:var(--kbx-command-bar-height);z-index:6}.kbx-fast-entry__content{min-height:var(--kbx-content-min-height);flex:1}.kbx-fast-entry__validation{border-top:var(--kbx-border-width) solid var(--kbx-color-border);padding-top:var(--kbx-space-2)}.kbx-fast-entry__summary{min-height:var(--kbx-control-sm);border-top:var(--kbx-border-width) solid var(--kbx-color-border);display:flex;align-items:center}.kbx-fast-entry__summary :deep(.kbx-summary-bar){width:100%;border-top:0}
+</style>