malio-layer-ui/app/story/select/InputSelect.story.vue

<template>
  <Story title="Select/Select">
    <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">Simple</h2>
        <MalioSelect
          v-model="simpleValue"
          :options="options"
          label="Pays"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur présélectionnée</h2>
        <MalioSelect
          v-model="preselectedValue"
          :options="options"
          label="Pays"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioSelect
          v-model="disabledValue"
          :options="options"
          label="Pays"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
        <MalioSelect
          v-model="hintValue"
          :options="options"
          label="Pays"
          hint="Sélectionnez votre pays de résidence"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioSelect
          v-model="errorValue"
          :options="options"
          label="Pays"
          error="Ce champ est obligatoire"
          empty-option-label="Aucune sélection"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioSelect
          v-model="successValue"
          :options="options"
          label="Pays"
          success="Sélection validée"
        />
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioSelect

Composant select personnalisé avec label flottant, option vide,
états visuels selon la sélection et ouverture/fermeture contrôlée.

------------------------------------------------------------------------

## Props détaillées

### modelValue

-   Type: string | number | null
-   Description: Valeur actuellement sélectionnée.
-   Comportement:
-   Compatible avec `v-model`.
-   Peut valoir `null` pour représenter l’option vide.

### options

-   Type: Array<{ label: string; value: string | number | null }>
-   Description: Liste des options affichées dans le menu.
-   Défaut: tableau vide.

### emptyOptionLabel

-   Type: string
-   Description: Texte de l’option vide injectée automatiquement.
-   Comportement:
-   Cette option porte toujours la valeur `null`.
-   Si la prop est vide, l’option reste visuellement discrète.

### label

-   Type: string
-   Description: Texte affiché comme label flottant au-dessus du champ.
-   Comportement: Si absent, aucun label n’est rendu.

------------------------------------------------------------------------

## Apparence & Style

### textField

-   Type: string
-   Description: Classes CSS appliquées au bouton du select.

### textValue

-   Type: string
-   Description: Classes CSS appliquées à la valeur affichée.

### textLabel

-   Type: string
-   Description: Classes CSS appliquées au label flottant.

### rounded

-   Type: string
-   Description: Classe Tailwind pour le border-radius.
-   Défaut: rounded-md

### minWidth / maxWidth

-   Type: string
-   Description: Classes utilitaires Tailwind pour contraindre la
largeur.

------------------------------------------------------------------------

## Interaction

### disabled

-   Type: boolean
-   Description: Désactive complètement le composant.
-   Effet:
-   Empêche l’ouverture du menu.
-   Applique un style visuel désactivé.

------------------------------------------------------------------------

## Comportement visuel

-   Au repos sans sélection: bordure grise.
-   Ouvert: bordure et label en couleur primaire.
-   Fermé avec valeur sélectionnée: bordure et texte en noir.
-   L’option vide dans la liste peut être stylée différemment pour être
    distinguée des autres.

------------------------------------------------------------------------

## Accessibilité

-   Le bouton porte `aria-expanded` et `aria-controls`.
-   La liste utilise `role="listbox"`.
-   Chaque option utilise `role="option"` et `aria-selected`.

------------------------------------------------------------------------

## Events

### update:modelValue

-   Émis à chaque sélection dans la liste.
-   Permet l’utilisation avec v-model.
-   Peut émettre `null` si l’option vide est sélectionnée.

</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioSelect from '../../components/malio/select/Select.vue'

const simpleValue = ref<string | number | null>(null)
const preselectedValue = ref<string | number | null>('fr')
const disabledValue = ref<string | number | null>('be')
const hintValue = ref<string | number | null>(null)
const errorValue = ref<string | number | null>(null)
const successValue = ref<string | number | null>('ch')
const options = [
  { label: 'France', value: 'fr' },
  { label: 'Belgique', value: 'be' },
  { label: 'Suisse', value: 'ch' },
  { label: 'Canada', value: 'ca' },
  { label: 'Allemagne', value: 'de' },
  { label: 'Espagne', value: 'es' },
  { label: 'Italie', value: 'it' },
  { label: 'Portugal', value: 'pt' },
  { label: 'Pays-Bas', value: 'nl' },
  { label: 'Suède', value: 'se' },
  { label: 'Norvège', value: 'no' },
  { label: 'Danemark', value: 'dk' },
  { label: 'Finlande', value: 'fi' },
  { label: 'Autriche', value: 'at' },
  { label: 'Irlande', value: 'ie' },
  { label: 'Grèce', value: 'gr' },
  { label: 'Pologne', value: 'pl' },
  { label: 'Hongrie', value: 'hu' },
  { label: 'République tchèque', value: 'cz' },
]
</script>