40 lines
3.6 KiB
Vue
40 lines
3.6 KiB
Vue
<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>
|