37 lines
5.9 KiB
Vue
37 lines
5.9 KiB
Vue
<script setup lang="ts">
|
|
import type { KbxAsyncState, KbxAuditEntry, KbxConflictSnapshot, KbxProblem, KbxScreenDefinition, KbxSummaryItem, KbxTemplateContext, KbxValidationError, KbxWorkflowDefinition } from '@kbx/contracts'
|
|
import KbxScreenFrame from './KbxScreenFrame.vue'
|
|
import KbxValidationSummary from './KbxValidationSummary.vue'
|
|
import KbxRecordLifecycle from './KbxRecordLifecycle.vue'
|
|
import KbxTemplateContextBar from './KbxTemplateContextBar.vue'
|
|
import KbxTemplateStateBoundary from './KbxTemplateStateBoundary.vue'
|
|
import KbxSummaryBar from './KbxSummaryBar.vue'
|
|
import KbxProblemFeedback from './KbxProblemFeedback.vue'
|
|
import KbxSectionHeader from './KbxSectionHeader.vue'
|
|
|
|
withDefaults(defineProps<{ screen:KbxScreenDefinition; status?:string; dirty?:boolean; version?:number; errors?:KbxValidationError[]; workflow?:KbxWorkflowDefinition; conflict?:KbxConflictSnapshot|null; problem?:KbxProblem|null; problemActionAllowlist?:readonly string[]; auditEntries?:KbxAuditEntry[]; can?:(permission:string)=>boolean; breadcrumb?:string; context?:KbxTemplateContext|null; contentState?:KbxAsyncState; refreshing?:boolean; errorRetryable?:boolean; summaryItems?:KbxSummaryItem[]; headerTitle?:string; headerDescription?:string; detailTitle?:string; detailDescription?:string; detailCount?:number; detailCountUnit?:string }>(), { errors:()=>[], status:'', dirty:false, conflict:null, problem:null, problemActionAllowlist:()=>[], auditEntries:()=>[], context:null, contentState:'ready', refreshing:false, errorRetryable:true, summaryItems:()=>[], headerTitle:'업무정보', headerDescription:'', detailTitle:'상세내역', detailDescription:'', detailCountUnit:'건' })
|
|
const emit = defineEmits<{ command:[string]; transition:[string]; reloadConflict:[]; dismissConflict:[]; problemAction:[string]; retryProblem:[]; dismissProblem:[] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<KbxScreenFrame expected-type="transaction" template-code="T03" :screen="screen" :status="status" :dirty="dirty" :can="can" :breadcrumb="breadcrumb" :suppress-default-utility="Boolean($slots.utility)" @command="emit('command',$event)">
|
|
<template #utility><slot name="utility" /></template>
|
|
<template #notice><KbxProblemFeedback v-if="problem" :problem="problem" :allowed-action-ids="problemActionAllowlist" @action="emit('problemAction',$event)" @retry="emit('retryProblem')" @dismiss="emit('dismissProblem')" /><slot name="notice" /></template>
|
|
<div v-if="errors.length" data-kbx-surface="validation"><KbxValidationSummary :errors="errors" /></div>
|
|
<KbxRecordLifecycle v-if="workflow || conflict || auditEntries.length || version!=null" data-kbx-surface="record-lifecycle" :status="status" :version="version" :workflow="workflow" :conflict="conflict" :audit-entries="auditEntries" :can="can" @transition="emit('transition',$event)" @reload-conflict="emit('reloadConflict')" @dismiss-conflict="emit('dismissConflict')" />
|
|
<div v-if="$slots.context || context" data-kbx-surface="context"><slot name="context"><KbxTemplateContextBar :context="context" /></slot></div>
|
|
<KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" :error-retryable="errorRetryable" @retry="emit('command','reload')">
|
|
<section class="kbx-transaction-page__header" :aria-label="headerTitle" data-kbx-surface="header-form"><slot name="header-heading"><KbxSectionHeader :title="headerTitle" :description="headerDescription"><template #actions><slot name="header-actions" /></template></KbxSectionHeader></slot><div class="kbx-transaction-page__header-body"><slot name="header" /></div></section>
|
|
<section class="kbx-transaction-page__detail" :aria-label="detailTitle" data-kbx-surface="detail-grid"><slot name="detail-heading"><KbxSectionHeader :title="detailTitle" :count="detailCount" :count-unit="detailCountUnit" :description="detailDescription"><template #actions><slot name="detail-actions" /></template></KbxSectionHeader></slot><div class="kbx-transaction-page__detail-body"><slot name="detail" /></div></section>
|
|
<section v-if="$slots.workflow" class="kbx-transaction-page__workflow" data-kbx-surface="workflow"><slot name="workflow" /></section>
|
|
<section v-if="$slots.summary || summaryItems.length" class="kbx-transaction-page__summary" data-kbx-surface="summary"><slot name="summary"><KbxSummaryBar :items="summaryItems" align="end" /></slot></section>
|
|
<section v-if="$slots.audit" class="kbx-transaction-page__audit" data-kbx-surface="audit"><slot name="audit" /></section>
|
|
</KbxTemplateStateBoundary>
|
|
<div v-if="$slots.drawer" data-kbx-surface="drawer"><slot name="drawer" /></div>
|
|
</KbxScreenFrame>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-transaction-page__header,.kbx-transaction-page__detail{display:flex;flex-direction:column;border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface);box-shadow:var(--kbx-shadow-shell)}.kbx-transaction-page__header{border-top:calc(var(--kbx-border-width) * 2) solid var(--kbx-color-module-accent)}.kbx-transaction-page__header :deep(.kbx-section-header),.kbx-transaction-page__detail :deep(.kbx-section-header){padding:0 var(--kbx-space-3);background:var(--kbx-color-section-heading)}.kbx-transaction-page__header-body{display:flex;flex-direction:column;gap:var(--kbx-space-3);padding:var(--kbx-space-3)}.kbx-transaction-page__detail{min-height:var(--kbx-master-list-compact-width)}.kbx-transaction-page__detail-body{min-height:0;flex:1;padding:var(--kbx-space-2)}.kbx-transaction-page__workflow{border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-section-heading);padding:var(--kbx-space-2)}.kbx-transaction-page__summary{position:sticky;bottom:0;z-index:5;background:var(--kbx-color-surface);border-top:var(--kbx-border-width) solid var(--kbx-color-border)}.kbx-transaction-page__summary :deep(.kbx-summary-bar){border-top:0}.kbx-transaction-page__audit{border-top:var(--kbx-border-width) solid var(--kbx-color-border);padding-top:var(--kbx-space-2)}
|
|
</style>
|