tristan
642ee43c53
- Nouvelle page /bovine/[id] avec tabs Mouvement / Passeport bovin / Santé - Composant UiTabs partagé, réutilisé sur réception et expédition - Champs père/mère (numéro national + type de race) sur Bovine, alimentés via la sync EDNOTIF - Inventaire : ligne cliquable vers le passeport Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
36 lines
939 B
Vue
36 lines
939 B
Vue
<template>
|
|
<div class="flex justify-evenly gap-y-8 gap-x-41 mb-10 border-b border-primary-500/60">
|
|
<h1
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="font-bold text-3xl uppercase px-12 cursor-pointer"
|
|
:class="[
|
|
modelValue === tab.key
|
|
? 'border-b-[6px] border-primary-500 text-primary-500'
|
|
: 'text-primary-500/50',
|
|
tab.error ? '!text-red-500 !border-red-500' : ''
|
|
]"
|
|
@click="emit('update:modelValue', tab.key)"
|
|
>
|
|
{{ tab.label }}
|
|
</h1>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" generic="T extends string">
|
|
export interface UiTab<K extends string = string> {
|
|
key: K
|
|
label: string
|
|
error?: boolean
|
|
}
|
|
|
|
defineProps<{
|
|
modelValue: T
|
|
tabs: UiTab<T>[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: T): void
|
|
}>()
|
|
</script>
|