From b90baec5714dda630a60ab1d3eb0da3ce7d6914f Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 26 Mar 2026 08:54:49 +0100
Subject: [PATCH] fix : livraison + COMPONENTS.md

---
 .playground/pages/composant/select/select.vue | 16 ++++++++++++++++
 COMPONENTS.md                                 | 12 +++++++++++-
 package.json                                  |  3 ++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/.playground/pages/composant/select/select.vue b/.playground/pages/composant/select/select.vue
index 8b4cc0c..af406fb 100644
--- a/.playground/pages/composant/select/select.vue
+++ b/.playground/pages/composant/select/select.vue
@@ -82,6 +82,16 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Peu d'elements (2)</h2>
+      <MalioSelect
+        v-model="shortListValue"
+        :options="shortOptions"
+        label="Civilite"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
     <div class="rounded-lg border p-4 md:col-span-2">
       <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
       <MalioSelect
@@ -121,6 +131,11 @@ const options = [
   {label: 'Portugal', value: 'pt'},
 ]
 
+const shortOptions = [
+  {label: 'Monsieur', value: 'M'},
+  {label: 'Madame', value: 'Mme'},
+]
+
 const longOptions = [
   ...options,
   {label: 'Pays-Bas', value: 'nl'},
@@ -144,6 +159,7 @@ const errorValue = ref<string | number | null>(null)
 const successValue = ref<string | number | null>('be')
 const disabledValue = ref<string | number | null>('ca')
 const emptyValue = ref<string | number | null>(null)
+const shortListValue = ref<string | number | null>(null)
 const longListValue = ref<string | number | null>(null)
 const bottomValue = ref<string | number | null>(null)
 </script>
diff --git a/COMPONENTS.md b/COMPONENTS.md
index 770d20a..fdd307a 100644
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -163,8 +163,17 @@ Liste déroulante.
 | `options` | `{ value: string \| number, text: string }[]` | `[]` | Options disponibles |
 | `emptyOptionLabel` | `string` | `''` | Placeholder option vide |
 | `label` | `string` | `''` | Label |
-| `disabled` | `boolean` | `false` | Désactivé |
+| `hint` | `string` | `''` | Message d'aide |
 | `error` | `string` | `''` | Message d'erreur |
+| `success` | `string` | `''` | Message de succès |
+| `disabled` | `boolean` | `false` | Désactivé |
+| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
+| `minWidth` | `string` | `'w-96'` | Classe largeur minimum |
+| `maxWidth` | `string` | `''` | Classe largeur maximum |
+| `rounded` | `string` | `'rounded-md'` | Classe border-radius |
+| `textField` | `string` | `'text-lg'` | Classe taille texte bouton |
+| `textValue` | `string` | `'text-lg'` | Classe taille texte valeur |
+| `textLabel` | `string` | `'text-sm'` | Classe taille texte label |
 
 **Events :** `update:modelValue(value: string | number | null)`
 **Slots :** `icon` (icône dropdown custom)
@@ -172,6 +181,7 @@ Liste déroulante.
 ```vue
 <MalioSelect v-model="pays" label="Pays" :options="[{ value: 'FR', text: 'France' }, { value: 'BE', text: 'Belgique' }]" />
 <MalioSelect v-model="ville" label="Ville" :options="villes" empty-option-label="Choisir..." />
+<MalioSelect v-model="civilite" label="Civilité" :options="civilites" group-class="mt-0" />
 ```
 
 ---
diff --git a/package.json b/package.json
index 0fa4b2d..19c80d4 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "files": [
     "app/**",
     "nuxt.config.ts",
-    "README.md"
+    "README.md",
+    "COMPONENTS.md"
   ],
   "scripts": {
     "dev": "nuxi dev .playground",