docs(radio) : story + page playground MalioRadioGroup

.playground/pages/composant/radio/radioGroup.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="space-y-8 p-8">
+    <section>
+      <h2 class="mb-4 text-xl font-bold">Aligné avec un select (en ligne, erreur)</h2>
+      <div class="grid grid-cols-3 gap-x-[80px] gap-y-5">
+        <MalioRadioGroup v-model="prestation" :options="yesNo" inline error="Sélection requise" />
+        <MalioSelect
+          v-model="fournisseur"
+          label="Fournisseur"
+          error="Sélection requise"
+          :options="[
+            {label: 'Fournisseur 1', value: 'Fournisseur 1'},
+            {label: 'Fournisseur 2', value: 'Fournisseur 2'},
+          ]"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2 class="mb-4 text-xl font-bold">Empilé avec label</h2>
+      <MalioRadioGroup v-model="categorie" :options="categories" label="Catégorie" />
+    </section>
+
+    <section>
+      <h2 class="mb-4 text-xl font-bold">Slot custom + requis</h2>
+      <MalioRadioGroup v-model="civilite" inline required label="Civilité">
+        <MalioRadioButton value="M" label="Monsieur" />
+        <MalioRadioButton value="Mme" label="Madame" />
+      </MalioRadioGroup>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const yesNo = [
+  {label: 'Oui', value: 'oui'},
+  {label: 'Non', value: 'non'},
+]
+const categories = [
+  {label: 'Catégorie 1', value: 'cat1'},
+  {label: 'Catégorie 2', value: 'cat2'},
+]
+
+const prestation = ref<string | null>(null)
+const fournisseur = ref<string>('')
+const categorie = ref<string | null>(null)
+const civilite = ref<string | null>(null)
+</script>

.playground/playground.nav.ts

@@ -45,6 +45,7 @@ export const navSections: SidebarSection[] = [
       {label: 'Select Checkbox', to: '/composant/select/selectCheckbox'},
       {label: 'Checkbox', to: '/composant/checkbox/checkbox'},
       {label: 'Radio', to: '/composant/radio/radioButton'},
+      {label: 'Radio (groupe)', to: '/composant/radio/radioGroup'},
     ],
   },
   {

app/story/radio/RadioGroup.story.vue

@@ -0,0 +1,59 @@
+<template>
+  <Story title="Input/RadioGroup">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Empilé</h2>
+        <MalioRadioGroup v-model="stacked" :options="options" label="Catégorie" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">En ligne</h2>
+        <MalioRadioGroup v-model="inline" :options="yesNo" inline label="Prestation" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioRadioGroup v-model="errored" :options="yesNo" inline error="Sélection requise" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioRadioGroup v-model="ok" :options="yesNo" inline success="Enregistré" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioRadioGroup v-model="disabled" :options="options" disabled label="Catégorie" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Requis + slot</h2>
+        <MalioRadioGroup v-model="slotted" required label="Civilité" inline>
+          <MalioRadioButton value="M" label="Monsieur" />
+          <MalioRadioButton value="Mme" label="Madame" />
+        </MalioRadioGroup>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {label: 'Catégorie 1', value: 'cat1'},
+  {label: 'Catégorie 2', value: 'cat2'},
+  {label: 'Catégorie 3', value: 'cat3'},
+]
+const yesNo = [
+  {label: 'Oui', value: 'oui'},
+  {label: 'Non', value: 'non'},
+]
+
+const stacked = ref<string | null>(null)
+const inline = ref<string | null>('oui')
+const errored = ref<string | null>(null)
+const ok = ref<string | null>('oui')
+const disabled = ref<string | null>('cat2')
+const slotted = ref<string | null>(null)
+</script>