From e6d99d02c36eaff3db56fa8d2d23fc2f241768c3 Mon Sep 17 00:00:00 2001 From: tristan Date: Thu, 4 Jun 2026 08:39:43 +0200 Subject: [PATCH] =?UTF-8?q?docs=20:=20COMPONENTS.md=20=E2=80=94=20reserveM?= =?UTF-8?q?essageSpace,=20readonly=20Select/SelectCheckbox/Upload,=20props?= =?UTF-8?q?=20TabList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.8 (1M context) --- COMPONENTS.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index 494db1e..38a1efd 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -21,6 +21,7 @@ Champ texte avec label, icône optionnelle et support de masque de saisie. | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `iconName` | `string` | `''` | Icône Iconify (ex: `mdi:magnify`) | | `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône | | `iconSize` | `string \| number` | `24` | Taille icône | @@ -59,6 +60,7 @@ Champ mot de passe avec toggle visibilité. | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | **Events :** `update:modelValue(value: string)` @@ -87,6 +89,7 @@ Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outlin | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `iconName` | `string` | `'mdi:email-outline'` | Icône Iconify (chaîne vide pour masquer) | | `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône | | `iconSize` | `string \| number` | `24` | Taille icône | @@ -125,6 +128,7 @@ Champ téléphone (`type="tel"` + `inputmode="tel"`) avec icône `mdi:phone-outl | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `iconName` | `string` | `'mdi:phone-outline'` | Icône Iconify (chaîne vide pour masquer) | | `iconPosition` | `'left' \| 'right'` | `'left'` | Position de l'icône | | `iconSize` | `string \| number` | `24` | Taille icône | @@ -179,6 +183,7 @@ Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtr | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur (prioritaire) | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `inputClass` | `string` | `''` | Classes CSS input | | `labelClass` | `string` | `''` | Classes CSS label | | `groupClass` | `string` | `''` | Classes CSS conteneur | @@ -239,6 +244,7 @@ Champ montant avec icône devise (euro par défaut). | `disabled` | `boolean` | `false` | Désactivé | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | **Events :** `update:modelValue(value: string)` @@ -262,6 +268,7 @@ Champ numérique avec boutons +/-. | `disabled` | `boolean` | `false` | Désactivé | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | **Events :** `update:modelValue(value: string)` @@ -286,6 +293,7 @@ Zone de texte multiligne avec compteur et redimensionnement. | `disabled` | `boolean` | `false` | Désactivé | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `groupClass` | `string` | `''` | Classes CSS sur la div conteneur (utile pour `row-span-*`, `col-span-*`, etc.) | **Events :** `update:modelValue(value: string)` @@ -317,6 +325,7 @@ Zone de texte multiligne avec compteur et redimensionnement. | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `outputFormat` | `'markdown' \| 'html'` | `'html'` | Format émis dans `update:modelValue` | | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) | | `labelClass` | `string` | `''` | Classes CSS label (twMerge) | @@ -344,8 +353,10 @@ Champ d'upload de fichier. | `accept` | `string` | `''` | Types de fichiers acceptés | | `displayIcon` | `boolean` | `true` | Afficher l'icône | | `disabled` | `boolean` | `false` | Désactivé | +| `readonly` | `boolean` | `false` | Champ en lecture seule (bordure noire, pas de focus bleu/grossissement, label/icône gris→noir selon rempli). | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | **Events :** `update:modelValue(value: string)`, `file-selected(file: File)` @@ -368,7 +379,9 @@ Liste déroulante. | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `disabled` | `boolean` | `false` | Désactivé | +| `readonly` | `boolean` | `false` | Champ en lecture seule (bordure noire, pas de focus bleu/grossissement, label/icône gris→noir selon rempli). | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) | | `rounded` | `string` | `'rounded-md'` | Classe border-radius | @@ -394,14 +407,16 @@ Liste déroulante multi-sélection avec checkboxes. | Prop | Type | Défaut | Description | |------|------|--------|-------------| -| `modelValue` | `(string \| number)[]` | **requis** | Valeurs sélectionnées (v-model) | +| `modelValue` | `(string \| number)[]` | `[]` | Valeurs sélectionnées (v-model) | | `options` | `{ value: string \| number, text: string }[]` | `[]` | Options | | `displayTag` | `boolean` | `false` | Afficher les tags sélectionnés | | `displaySelectAll` | `boolean` | `false` | Afficher "Tout sélectionner" | | `selectAllLabel` | `string` | `'Tout sélectionner'` | Texte du sélecteur global | | `label` | `string` | `''` | Label | | `disabled` | `boolean` | `false` | Désactivé | +| `readonly` | `boolean` | `false` | Champ en lecture seule (bordure noire, pas de focus bleu/grossissement, label/icône gris→noir selon rempli). | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide | **Events :** `update:modelValue(value: (string | number)[])` @@ -425,6 +440,7 @@ Case à cocher. | `readonly` | `boolean` | `false` | Lecture seule | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | **Events :** `update:modelValue(value: boolean)` @@ -480,6 +496,7 @@ La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et f | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` (jours antérieurs désactivés) | | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` (jours postérieurs désactivés) | | `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | **Events :** `update:modelValue(value: string | null)` @@ -514,6 +531,7 @@ La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD" | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` | | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` | | `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | **Events :** `update:modelValue(value: { start: string; end: string } | null)` @@ -547,6 +565,7 @@ La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2 | `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` | | `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` | | `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | **Events :** `update:modelValue(value: string | null)` @@ -570,6 +589,7 @@ Sélecteur d'heure. | `readonly` | `boolean` | `false` | Lecture seule | | `required` | `boolean` | `false` | Champ requis (astérisque rouge dans le label) | | `error` | `string` | `''` | Message d'erreur | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | **Events :** `update:modelValue(value: string)` @@ -598,6 +618,7 @@ Sélecteur d'heure à **molettes style iOS** (champ + popover). Deux colonnes in | `hint` | `string` | `''` | Message d'aide | | `error` | `string` | `''` | Message d'erreur | | `success` | `string` | `''` | Message de succès | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | **Events :** `update:modelValue(value: string | null)` @@ -633,6 +654,7 @@ La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:M | `min` | `string` | `undefined` | Borne min (datetime ou date ; borne la grille sur la partie date) | | `max` | `string` | `undefined` | Borne max (idem) | | `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `reserveMessageSpace` | `boolean` | `true` | Réserve l'espace de la ligne message sous le champ (min-h) même sans message. `false` = la ligne ne prend de place que s'il y a un hint/error/success. | | `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | **Events :** `update:modelValue(value: string | null)` @@ -706,6 +728,10 @@ Navigation par onglets avec contenu dynamique. |------|------|--------|-------------| | `modelValue` | `string` | `undefined` | Onglet actif (v-model) | | `tabs` | `Tab[]` | **requis** | Liste des onglets (voir type ci-dessous) | +| `maxVisibleTabs` | `number` | `undefined` | Nombre max d'onglets affichés à la fois. Au-delà, un carrousel avec flèches gauche/droite apparaît (décalage 1 par 1). Non défini = tous les onglets. | +| `maxWidth` | `number` | `1100` | Largeur max (px) du bloc d'onglets en mode fenêtré. | + +Quand `maxVisibleTabs` est défini et que le nombre d'onglets le dépasse, la barre passe en mode fenêtré : seuls `maxVisibleTabs` onglets sont visibles à la fois, encadrés par des flèches gauche/droite qui font défiler la fenêtre un onglet à la fois (largeur du bloc bornée par `maxWidth`). Type `Tab` :