kevin
88dd76a0e4
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | #364 | Création d'un composant de type radio | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #6 Co-authored-by: kevin <kevin@yuno.malio.fr> Co-committed-by: kevin <kevin@yuno.malio.fr>
112 lines
3.2 KiB
Vue
112 lines
3.2 KiB
Vue
<template>
|
|
<div class="grid grid-cols-2 gap-6 md:grid-cols-3">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
|
<div class="space-y-1">
|
|
<MalioRadioButton
|
|
v-for="option in options"
|
|
:key="`simple-${option.value}`"
|
|
v-model="primaryChoice"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
name="primary-choice"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Preselected</h2>
|
|
<div class="space-y-1">
|
|
<MalioRadioButton
|
|
v-for="option in options"
|
|
:key="`preselected-${option.value}`"
|
|
v-model="preselectedChoice"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
name="preselected-choice"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Error</h2>
|
|
<div class="space-y-1">
|
|
<MalioRadioButton
|
|
v-for="option in options"
|
|
:key="`error-${option.value}`"
|
|
v-model="errorChoice"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
name="error-choice"
|
|
error="Selection required"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Success</h2>
|
|
<div class="space-y-1">
|
|
<MalioRadioButton
|
|
v-for="option in options"
|
|
:key="`success-${option.value}`"
|
|
v-model="successChoice"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
name="success-choice"
|
|
success="Selection saved"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Disabled</h2>
|
|
<div class="space-y-1">
|
|
<MalioRadioButton
|
|
v-for="option in options"
|
|
:key="`disabled-${option.value}`"
|
|
v-model="disabledChoice"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
name="disabled-choice"
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
|
<div class="space-y-1">
|
|
<MalioRadioButton
|
|
v-for="option in options"
|
|
:key="`readonly-${option.value}`"
|
|
v-model="readonlyChoice"
|
|
:label="option.label"
|
|
:value="option.value"
|
|
name="readonly-choice"
|
|
readonly
|
|
hint="Readonly group"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import MalioRadioButton from '../../../app/components/malio/RadioButton.vue'
|
|
|
|
const options = [
|
|
{label: 'Option 1', value: 'option1'},
|
|
{label: 'Option 2', value: 'option2'},
|
|
{label: 'Option 3', value: 'option3'},
|
|
{label: 'Option 4', value: 'option4'},
|
|
]
|
|
|
|
const primaryChoice = ref<string | null>(null)
|
|
const preselectedChoice = ref<string | null>('option2')
|
|
const errorChoice = ref<string | null>(null)
|
|
const successChoice = ref<string | null>('option3')
|
|
const disabledChoice = ref<string | null>('option2')
|
|
const readonlyChoice = ref<string | null>('option4')
|
|
</script>
|