55 lines
1.8 KiB
Vue
55 lines
1.8 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
status: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const config = computed(() => {
|
|
switch (props.status) {
|
|
case 'draft':
|
|
return {
|
|
label: 'Brouillon',
|
|
classes: 'bg-slate-100 text-slate-800 border-slate-200 dark:bg-slate-900/50 dark:text-slate-300 dark:border-slate-800',
|
|
};
|
|
case 'validated':
|
|
return {
|
|
label: 'Validée',
|
|
classes: 'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-950/50 dark:text-sky-300 dark:border-sky-900',
|
|
};
|
|
case 'ordered':
|
|
return {
|
|
label: 'Commandée',
|
|
classes: 'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-900',
|
|
};
|
|
case 'delivered':
|
|
return {
|
|
label: 'Livrée',
|
|
classes: 'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-900',
|
|
};
|
|
case 'closed':
|
|
return {
|
|
label: 'Clôturée',
|
|
classes: 'bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950/50 dark:text-purple-300 dark:border-purple-900',
|
|
};
|
|
default:
|
|
return {
|
|
label: props.status,
|
|
classes: 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-750',
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${config.classes}`"
|
|
>
|
|
<span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
|
|
{{ config.label }}
|
|
</span>
|
|
</template>
|