41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup>
|
|
import { usePage } from '@inertiajs/vue3'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
statut: { type: String, required: true },
|
|
size: { type: String, default: 'md' },
|
|
})
|
|
|
|
const page = usePage()
|
|
|
|
const label = computed(() => page.props.config?.statuts?.[props.statut] ?? props.statut)
|
|
|
|
const colorClasses = {
|
|
brouillon: 'bg-gray-100 text-gray-700',
|
|
en_attente_validation: 'bg-yellow-100 text-yellow-700',
|
|
validee: 'bg-blue-100 text-blue-700',
|
|
commandee: 'bg-indigo-100 text-indigo-700',
|
|
partiellement_recue: 'bg-orange-100 text-orange-700',
|
|
recue_complete: 'bg-green-100 text-green-700',
|
|
cloturee: 'bg-slate-100 text-slate-600',
|
|
annulee: 'bg-red-100 text-red-700',
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-2 py-0.5 text-xs',
|
|
md: 'px-2.5 py-1 text-xs',
|
|
lg: 'px-3 py-1.5 text-sm',
|
|
}
|
|
|
|
const classes = computed(() => [
|
|
'inline-flex items-center rounded-full font-medium whitespace-nowrap',
|
|
colorClasses[props.statut] ?? 'bg-gray-100 text-gray-700',
|
|
sizeClasses[props.size] ?? sizeClasses.md,
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<span :class="classes">{{ label }}</span>
|
|
</template>
|