sroy
92a5c48e5e
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | #332 | Refonte écran réception terminée | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: tristan <tristan@yuno.malio.fr> Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/31 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: sroy <sebastien@yuno.malio.fr> Co-committed-by: sroy <sebastien@yuno.malio.fr>
94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<template>
|
|
<div :class="['flex flex-col', wrapperClass]">
|
|
<label
|
|
v-if="label"
|
|
class="font-bold uppercase text-xl text-primary-700"
|
|
:class="labelClass"
|
|
>
|
|
{{ label }}
|
|
</label>
|
|
<div
|
|
role="radiogroup"
|
|
:aria-label="label || id || 'radio-group'"
|
|
:class="['flex items-center gap-6 mt-1', groupClass]"
|
|
>
|
|
<label
|
|
v-for="option in options"
|
|
:key="String(option.value)"
|
|
:for="`${id || 'radio'}-${option.value}`"
|
|
class="flex items-center gap-2 text-primary-700"
|
|
:class="itemClass"
|
|
>
|
|
<input
|
|
:id="`${id || 'radio'}-${option.value}`"
|
|
type="radio"
|
|
:name="name || id || 'radio-group'"
|
|
:value="String(option.value)"
|
|
:checked="String(modelValue ?? '') === String(option.value)"
|
|
:disabled="disabled"
|
|
v-bind="attrs"
|
|
class="h-4 w-4 border-primary-700/50 text-primary-700 focus:ring-primary-700"
|
|
:class="[
|
|
disabled ? 'cursor-not-allowed' : 'cursor-pointer',
|
|
inputClass
|
|
]"
|
|
@change="onChange"
|
|
>
|
|
<span class="text-xl" :class="optionLabelClass">
|
|
{{ option.label }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAttrs } from 'vue'
|
|
|
|
type RadioOption = {
|
|
value: string | number
|
|
label: string
|
|
}
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
id?: string
|
|
name?: string
|
|
label?: string
|
|
modelValue: string | number | null | undefined
|
|
options: RadioOption[]
|
|
disabled?: boolean
|
|
wrapperClass?: string
|
|
labelClass?: string
|
|
groupClass?: string
|
|
itemClass?: string
|
|
inputClass?: string
|
|
optionLabelClass?: string
|
|
}>(),
|
|
{
|
|
name: '',
|
|
label: '',
|
|
disabled: false,
|
|
wrapperClass: '',
|
|
labelClass: '',
|
|
groupClass: '',
|
|
itemClass: '',
|
|
inputClass: '',
|
|
optionLabelClass: ''
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
const attrs = useAttrs()
|
|
|
|
const onChange = (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
emit('update:modelValue', target.value)
|
|
}
|
|
</script>
|