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

<template>
  <Story title="Input/Amount">
    <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>
        <MalioInputAmount
          v-model="simpleValue"
          label="Montant"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Grand montant (séparateurs)</h2>
        <MalioInputAmount
          v-model="bigValue"
          label="Budget"
        />
        <p class="mt-2 text-sm text-m-muted">
          modelValue émis : <code>{{ bigValue || 'vide' }}</code>
        </p>
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
        <MalioInputAmount
          v-model="hintValue"
          label="Montant HT"
          hint="Montant hors taxes en euros"
        />
      </div>

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

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

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioInputAmount
          v-model="errorValue"
          label="Montant"
          error="Le montant doit être supérieur à 0"
        />
      </div>

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

<docs lang="md">
# MalioInputAmount

Composant input dédié à la saisie d’un montant décimal avec label flottant,
états visuels (erreur / succès) et icône configurable.

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

## 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.

### 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 dans les formulaires.

### autocomplete

-   Type: string
-   Description: Valeur de l’attribut `autocomplete`.
-   Défaut: `off`

### modelValue

-   Type: string | null | undefined
-   Description: Valeur contrôlée du composant.
-   Comportement:
-   Si défini, le composant fonctionne via `v-model`.
-   Sinon, il conserve une valeur locale interne.

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

## Apparence & Style

### inputClass

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

### labelClass

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

### groupClass

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

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

## Validation & Contraintes

### required

-   Type: boolean
-   Description: Ajoute l’attribut HTML `required`.

### maxLength

-   Type: number | string
-   Description: Longueur maximale autorisée.

### minLength

-   Type: number | string
-   Description: Longueur minimale autorisée.

### 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.
-   Positionne `aria-invalid="true"`.
-   Est 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
-   Description: Nom de l’icône affichée dans le champ.
-   Défaut: `mdi:currency-eur`

### iconPosition

-   Type: `'left' | 'right'`
-   Description: Position de l’icône dans le champ.
-   Défaut: `right`

### iconSize

-   Type: string | number
-   Description: Taille de l’icône.

### iconColor

-   Type: string
-   Description: Classe de couleur de l’icône en état neutre.

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

## Comportement montant

-   Le champ est rendu en `type="text"` avec `inputmode="decimal"`.
-   Le séparateur décimal affiché par défaut est `.`.
-   Les virgules saisies par l’utilisateur sont converties en points.
-   Tous les caractères non numériques, sauf le séparateur décimal, sont supprimés.
-   La partie décimale est limitée à 2 chiffres.

### Exemples de normalisation

-   `12,5` devient `12.5`
-   `0012,345abc` devient `12.34`
-   `,5` devient `0.5`

### Formatage au blur

-   `12` devient `12.00`
-   `12.5` devient `12.50`

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

## Priorité visuelle

1.  `error`
2.  `success`
3.  état neutre

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

## Accessibilité

-   `aria-invalid` est activé si `error` existe.
-   `aria-describedby` référence le message affiché sous le champ.
-   Le composant fonctionne avec ou sans `v-model`.

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

## Events

### update:modelValue

-   Émis à chaque modification de l’input.
-   Émis aussi au `blur` si la valeur est reformatée.
-   Permet l’utilisation avec `v-model`.

</docs>

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

const simpleValue = ref('')
const bigValue = ref('1234567.89')
const hintValue = ref('')
const disabledValue = ref('1500.00')
const readonlyValue = ref('2450.75')
const errorValue = ref('0.00')
const successValue = ref('350.50')
</script>