malio-layer-ui/app/story/input/inputEmail.story.vue

<template>
  <Story title="Input/Email">
    <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>
        <MalioInputEmail
          v-model="simpleValue"
          label="Adresse email"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
        <MalioInputEmail
          v-model="leftIconValue"
          label="Adresse email"
          icon-position="left"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
        <MalioInputEmail
          v-model="addableValue"
          label="Adresse email"
          addable
          @add="onAdd"
        />
        <p v-if="addClicks > 0" class="mt-2 text-sm text-m-muted">
          Bouton cliqué {{ addClicks }} fois
        </p>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
        <MalioInputEmail
          v-model="noIconValue"
          label="Adresse email"
          :icon-name="''"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
        <MalioInputEmail
          v-model="hintValue"
          label="Adresse email"
          hint="ex: prenom.nom@malio.fr"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
        <MalioInputEmail
          v-model="disabledValue"
          label="Adresse email"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
        <MalioInputEmail
          v-model="readonlyValue"
          label="Adresse email"
          readonly
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioInputEmail
          v-model="errorValue"
          label="Adresse email"
          error="Adresse email invalide"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succès</h2>
        <MalioInputEmail
          v-model="successValue"
          label="Adresse email"
          success="Adresse email valide"
        />
      </div>
    </div>
  </Story>
</template>

<docs lang="md">
# MalioInputEmail

Champ email avec label flottant, icône email par défaut, états visuels
(erreur / succès) et accessibilité. Basé sur InputText mais ciblé sur la
saisie d'une adresse email (`type="email"` + `inputmode="email"`).

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

## Props détaillées

### id

-   Type: string
-   Description: Identifiant HTML de l'input.
-   Comportement: Si non fourni, un id unique est généré automatiquement
    (préfixe `malio-input-email-`).

### label

-   Type: string
-   Description: Texte affiché comme label flottant.
-   Comportement: Si absent, aucun label n'est rendu.

### name

-   Type: string
-   Description: Attribut name de l'input (utile pour les formulaires).

### autocomplete

-   Type: string
-   Défaut: `off`
-   Description: Active ou configure l'autocomplétion navigateur. La
    valeur par défaut est `off` pour les formulaires de création d'ERP.
    Passer `email` pour permettre au navigateur de suggérer l'adresse
    de l'utilisateur (formulaires de connexion / inscription).

### modelValue

-   Type: string | null | undefined
-   Description: Valeur contrôlée du composant.
-   Comportement:
-   Si défini → composant contrôlé (v-model).
-   Sinon → gestion interne de l'état.

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

## Apparence & Style

### inputClass

-   Type: string
-   Description: Classes CSS appliquées à l'input.

### labelClass

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

### groupClass

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

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

## Validation & Contraintes

### required

-   Type: boolean
-   Description: Ajoute l'attribut HTML required.

### disabled

-   Type: boolean
-   Description: Désactive complètement le champ.

### readonly

-   Type: boolean
-   Description: Rend le champ non modifiable mais focusable.

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

## États & Messages

### hint

-   Type: string
-   Description: Message d'aide affiché sous le champ.

### error

-   Type: string
-   Description: Message d'erreur.
-   Effet:
-   Active l'état visuel erreur.
-   aria-invalid=true
-   Prioritaire sur success et hint.

### success

-   Type: string
-   Description: Message de succès.
-   Effet:
-   Actif uniquement si error est absent.

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

## Icône

### iconName

-   Type: string
-   Défaut: `mdi:email-outline`
-   Description: Nom Iconify de l'icône affichée. Passer une chaîne
    vide pour ne pas afficher d'icône.

### iconPosition

-   Type: `'left' | 'right'`
-   Défaut: `right`

### iconSize

-   Type: string | number
-   Défaut: `24`

### iconColor

-   Type: string
-   Défaut: `text-m-muted`
-   Description: Classe Tailwind de couleur. Surchargée automatiquement
    par les états erreur / succès.

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

## Comportement

-   Aucune validation interne — le composant ne vérifie pas le format
    de l'email. Utiliser la validation HTML native (`type="email"`) ou
    piloter `error` / `success` depuis le parent.
-   `inputmode="email"` est appliqué pour adapter le clavier mobile.

## Priorité visuelle

1.  error
2.  success
3.  neutre

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

## Accessibilité

-   aria-invalid est activé si error existe.
-   aria-describedby référence dynamiquement le message affiché.
-   Fonctionne avec ou sans v-model.

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

## Events

### update:modelValue

-   Émis à chaque modification de l'input.
-   Permet l'utilisation avec v-model.

</docs>

<script setup lang="ts">
import {ref} from 'vue'
import MalioInputEmail from '../../components/malio/input/InputEmail.vue'

const simpleValue = ref('')
const addableValue = ref('')
const addClicks = ref(0)
const onAdd = () => { addClicks.value += 1 }
const leftIconValue = ref('')
const noIconValue = ref('')
const hintValue = ref('')
const disabledValue = ref('contact@malio.fr')
const readonlyValue = ref('readonly@malio.fr')
const errorValue = ref('pas-un-email')
const successValue = ref('contact@malio.fr')
</script>