Files
KArtSell.Aegis/docs/Design/kbx-foundation-v60-status-canonical-contract-hardening/packages/kbx-ui/src/components/KbxExceptionCenter.vue
T
kjh2064 3f293d8aa8
deploy / deploy (push) Successful in 1m52s
deploy / notify (push) Successful in 1s
V13-FE-006: consolidate approved UI and contract hardening
2026-08-13 02:41:00 +09:00

31 lines
1.1 KiB
Vue

<script setup lang="ts">
import type { KbxWorkItem, KbxWorkItemAction, KbxWorkQueueCounter } from '@kbx/contracts'
import KbxExceptionSummary from './KbxExceptionSummary.vue'
import KbxExceptionDetailDrawer from './KbxExceptionDetailDrawer.vue'
defineProps<{
counters: KbxWorkQueueCounter[]
activeKey?: string | null
selectedItem?: KbxWorkItem | null
can?: (permission: string) => boolean
}>()
const emit = defineEmits<{
filter: [string | null]
closeDetail: []
action: [KbxWorkItemAction]
}>()
</script>
<template>
<section class="kbx-exception-center">
<KbxExceptionSummary :counters="counters" :active-key="activeKey" @select="emit('filter', $event)" />
<div class="kbx-exception-center__queue"><slot /></div>
<KbxExceptionDetailDrawer :item="selectedItem ?? null" :can="can" @close="emit('closeDetail')" @action="emit('action', $event)" />
</section>
</template>
<style scoped>
.kbx-exception-center { display:flex; flex-direction:column; gap:8px; min-height:0; height:100%; }
.kbx-exception-center__queue { min-height:0; flex:1; }
</style>