kjh2064
c41e5063b7
Removed entire kbx-foundation-v36 directory as it's been replaced by the new KBX Foundation v4 patterns implemented in this session: - Registry-driven screen definitions - Density-aware UI adapter components - Feature module templates (ShadowRun, Models) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
26 lines
1.3 KiB
Vue
26 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { KbxStatusSemantic } from '@kbx/contracts'
|
|
|
|
defineProps<{
|
|
label: string
|
|
semantic: KbxStatusSemantic
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<span class="kbx-status" :data-semantic="semantic">
|
|
<span class="kbx-status__dot" aria-hidden="true" />
|
|
{{ label }}
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-status { display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 8px; border:1px solid var(--kbx-color-border); border-radius:999px; background:var(--kbx-color-surface); font-size:12px; font-weight:600; white-space:nowrap; }
|
|
.kbx-status__dot { width:6px; height:6px; border-radius:50%; background:var(--kbx-status-color, var(--kbx-color-text-muted)); }
|
|
.kbx-status[data-semantic="completed"] { --kbx-status-color:var(--kbx-color-success); }
|
|
.kbx-status[data-semantic="processing"], .kbx-status[data-semantic="pending"] { --kbx-status-color:var(--kbx-color-primary); }
|
|
.kbx-status[data-semantic="warning"], .kbx-status[data-semantic="hold"] { --kbx-status-color:var(--kbx-color-warning); }
|
|
.kbx-status[data-semantic="error"] { --kbx-status-color:var(--kbx-color-danger); }
|
|
.kbx-status[data-semantic="cancelled"], .kbx-status[data-semantic="disabled"] { --kbx-status-color:var(--kbx-color-text-muted); color:var(--kbx-color-text-muted); }
|
|
</style>
|