8 lines
1.0 KiB
Vue
8 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import type { KbxSummaryItem } from '@kbx/contracts'
|
|
defineProps<{items:KbxSummaryItem[];align?:'start'|'end'}>()
|
|
function display(v:string|number){return typeof v==='number'?v.toLocaleString('ko-KR'):v}
|
|
</script>
|
|
<template><footer class="kbx-summary-bar" :data-align="align??'start'"><span v-for="item in items" :key="item.key"><small>{{item.label}}</small><strong :class="{emphasis:item.emphasis}">{{display(item.value)}}</strong></span></footer></template>
|
|
<style scoped>.kbx-summary-bar{min-height:var(--kbx-control-height);display:flex;align-items:center;gap:var(--kbx-space-5);padding:0 var(--kbx-space-2);border-top:var(--kbx-border-width) solid var(--kbx-color-border);font-size:var(--kbx-font-sm)}.kbx-summary-bar[data-align="end"]{justify-content:flex-end}.kbx-summary-bar span{display:flex;align-items:center;gap:var(--kbx-space-1)}.kbx-summary-bar small{color:var(--kbx-color-text-muted)}.kbx-summary-bar strong{font-weight:500}.kbx-summary-bar strong.emphasis{font-weight:700;color:var(--kbx-color-primary)}</style>
|