- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
20 lines
702 B
Vue
20 lines
702 B
Vue
<script setup lang="ts">
|
|
const props = defineProps<{ status: string; kind: "order" | "shipment" | "invoice" }>();
|
|
|
|
const tone = computed<"green" | "blue" | "red" | "orange">(() => {
|
|
if (["completed", "delivered", "issued"].includes(props.status)) return "green";
|
|
if (["paid", "fulfilling", "shipped"].includes(props.status)) return "blue";
|
|
if (["cancelled"].includes(props.status)) return "red";
|
|
return "orange";
|
|
});
|
|
|
|
const label = computed(() => {
|
|
const root = props.kind === "order" ? "order.status" : props.kind === "shipment" ? "shipment.status" : "invoice.status";
|
|
return `${root}.${props.status}`;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<VBadge :tone="tone">{{ $t(label) }}</VBadge>
|
|
</template>
|