Compare commits
1 Commits
develop
...
a8e5f2e05a
| Author | SHA1 | Date | |
|---|---|---|---|
| a8e5f2e05a |
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(npm run:*)",
|
||||
"Bash(npx vitest:*)",
|
||||
"Bash(sed -i \"s|from ''../../../app/components/malio/Checkbox.vue''|from ''../../../app/components/malio/checkbox/Checkbox.vue''|\" .playground/pages/composant/checkbox.vue)",
|
||||
"Bash(sed -i \"s|from ''../../../app/components/malio/RadioButton.vue''|from ''../../../app/components/malio/radio/RadioButton.vue''|\" .playground/pages/composant/radioButton.vue)",
|
||||
"Bash(sed -i \"s|from ''../../../app/components/malio/Time.vue''|from ''../../../app/components/malio/time/Time.vue''|\" .playground/pages/composant/time.vue)",
|
||||
"Bash(sed -i \"s|from ''../../../app/components/malio/InputTextArea.vue''|from ''../../../app/components/malio/input/InputTextArea.vue''|\" .playground/pages/composant/inputTextArea.vue)",
|
||||
"Bash(npx nuxi:*)",
|
||||
"Bash(mkdir -p button input select checkbox radio time)",
|
||||
"Bash(mv buttonIcon.story.vue button/)",
|
||||
"Bash(mv inputText.story.vue inputAmount.story.vue inputNumber.story.vue inputPassword.story.vue inputTextArea.story.vue inputUpload.story.vue input/)",
|
||||
"Bash(mv InputSelect.story.vue selectCheckbox.story.vue select/)",
|
||||
"Bash(mv inputCheckbox.story.vue checkbox/)"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,223 +0,0 @@
|
||||
---
|
||||
name: creating-malio-component
|
||||
description: Use when creating a new UI component in the @malio/layer-ui Nuxt layer — covers component, tests, playground page, and Histoire story
|
||||
---
|
||||
|
||||
# Creating a Malio Component
|
||||
|
||||
## Overview
|
||||
|
||||
Step-by-step process for creating a component in `@malio/layer-ui`. Each component requires 6 deliverables : le `.vue`, les tests, la page playground, la story Histoire, la mise à jour du CHANGELOG, et la mise à jour du `COMPONENTS.md`.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Création d'un nouveau composant dans `app/components/malio/`
|
||||
- Ajout d'une variante d'un composant existant (ex: InputPassword basé sur InputText)
|
||||
|
||||
## Workflow
|
||||
|
||||
```dot
|
||||
digraph create_component {
|
||||
rankdir=TB;
|
||||
"1. Lire les fichiers de référence" -> "2. Créer le composant .vue";
|
||||
"2. Créer le composant .vue" -> "3. Créer les tests .test.ts";
|
||||
"3. Créer les tests .test.ts" -> "4. npm run test + npm run lint";
|
||||
"4. npm run test + npm run lint" -> "Tests OK?" [shape=diamond];
|
||||
"Tests OK?" -> "5. Créer la page playground" [label="oui"];
|
||||
"Tests OK?" -> "3. Créer les tests .test.ts" [label="non, corriger"];
|
||||
"5. Créer la page playground" -> "6. Créer la story Histoire";
|
||||
"6. Créer la story Histoire" -> "7. Mettre à jour CHANGELOG.md";
|
||||
"7. Mettre à jour CHANGELOG.md" -> "8. Mettre à jour COMPONENTS.md";
|
||||
}
|
||||
```
|
||||
|
||||
## Étapes
|
||||
|
||||
### 1. Lire les fichiers de référence
|
||||
|
||||
Identifier le composant le plus proche comme base (ex: `InputText.vue` pour `InputPassword.vue`). Lire :
|
||||
- Le composant de référence : `app/components/malio/<Ref>.vue`
|
||||
- Ses tests : `app/components/malio/<Ref>.test.ts`
|
||||
|
||||
### 2. Créer le composant `.vue`
|
||||
|
||||
**Fichier :** `app/components/malio/<NomComposant>.vue`
|
||||
|
||||
**Checklist obligatoire :**
|
||||
|
||||
| Élément | Pattern |
|
||||
|---------|---------|
|
||||
| `defineOptions` | `{ name: 'Malio<Nom>', inheritAttrs: false }` |
|
||||
| Props | `defineProps<T>()` + `withDefaults()` — props communes : `id`, `label`, `modelValue`, `inputClass`, `labelClass`, `groupClass`, `disabled`, `readonly`, `hint`, `error`, `success` |
|
||||
| Contrôlé / non-contrôlé | `isControlled = computed(() => props.modelValue !== undefined)` + `localValue` en fallback |
|
||||
| Classes CSS | Fusionnées via `twMerge()` pour permettre l'override consommateur |
|
||||
| Accessibilité | `aria-invalid`, `aria-describedby`, `label[for]` lié à `input[id]` |
|
||||
| Icônes | `Icon as IconifyIcon` depuis `@iconify/vue` (pas `@nuxt/icon`) |
|
||||
| ID généré | `useId()` + prefix unique (ex: `malio-input-password-${generatedId}`) |
|
||||
|
||||
### 3. Créer les tests `.test.ts`
|
||||
|
||||
**Fichier :** `app/components/malio/<NomComposant>.test.ts` (colocalisé)
|
||||
|
||||
**Pattern de montage :**
|
||||
|
||||
```ts
|
||||
import { mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import MonComposant from './MonComposant.vue'
|
||||
|
||||
const ComposantForTest = MonComposant as DefineComponent<MonComposantProps>
|
||||
|
||||
const mountComponent = (props: MonComposantProps = {}) =>
|
||||
mount(ComposantForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
**Tests minimum à couvrir :**
|
||||
- Rendu initial avec valeur
|
||||
- Rendu du label
|
||||
- Emit `update:modelValue`
|
||||
- Props `disabled`, `readonly`
|
||||
- États `error`, `success`, `hint` (messages + classes CSS)
|
||||
- Accessibilité (`aria-invalid`, `label[for]` / `input[id]`)
|
||||
- Comportements spécifiques au composant
|
||||
|
||||
**Attention stub IconifyIcon :** Le stub basé sur le nom `IconifyIcon` ne remplace pas toujours le vrai composant `@iconify/vue`. Pour tester les props du composant Icon (ex: `icon`), utiliser `findComponent` avec l'import réel :
|
||||
|
||||
```ts
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
// ...
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:eye-outline')
|
||||
```
|
||||
|
||||
### 4. Vérification
|
||||
|
||||
```bash
|
||||
npm run test # Tous les tests passent
|
||||
npm run lint # Pas d'erreurs
|
||||
```
|
||||
|
||||
### 5. Créer la page playground
|
||||
|
||||
**Fichier :** `.playground/pages/composant/<nomComposant>.vue` (camelCase)
|
||||
|
||||
La page est auto-détectée par `index.vue` via `import.meta.glob`. Inclure des variantes représentatives dans une grille :
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Titre variante</h2>
|
||||
<MalioMonComposant ... />
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Variantes typiques :** simple, avec label, désactivé, readonly, hint, erreur, succès, validation dynamique.
|
||||
|
||||
### 6. Créer la story Histoire
|
||||
|
||||
**Fichier :** `app/story/<nomComposant>.story.vue` (camelCase)
|
||||
|
||||
**Structure :**
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Story title="Category/Name">
|
||||
<!-- Variantes avec v-model et valeurs initiales -->
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioNomComposant
|
||||
Description courte.
|
||||
## Props détaillées
|
||||
<!-- Documenter chaque prop : type, description, défaut, comportement -->
|
||||
## Comportement
|
||||
## Accessibilité
|
||||
## Events
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioMonComposant from '../components/malio/MonComposant.vue'
|
||||
// refs pour chaque variante avec valeurs initiales
|
||||
</script>
|
||||
```
|
||||
|
||||
**Important : initial state avec variantes.** La story doit contenir des exemples visuels directement visibles (pas un composant vide). Chaque variante a un `v-model` avec une `ref` initialisée. Variantes typiques à inclure :
|
||||
- Simple (avec label)
|
||||
- Sans icône (`display-icon="false"`) si applicable
|
||||
- Avec hint
|
||||
- Désactivé (avec valeur pré-remplie)
|
||||
- Readonly (avec valeur pré-remplie)
|
||||
- Erreur (avec valeur + message d'erreur)
|
||||
- Succès (avec valeur + message de succès)
|
||||
|
||||
### 7. Mettre à jour le CHANGELOG
|
||||
|
||||
**Fichier :** `CHANGELOG.md` à la racine du projet.
|
||||
|
||||
Ajouter une ligne dans la section `### Added` de la version courante. Le numéro de ticket se trouve dans le nom de la branche Git (ex: branche `feat/MUI-8-composant-password` → ticket `MUI-8`).
|
||||
|
||||
**Format :**
|
||||
- Avec numéro de ticket : `* [#MUI-8] Création d'un composant mot de passe`
|
||||
- Sans numéro de ticket : `* Création d'un composant textarea`
|
||||
|
||||
Pour extraire le numéro de ticket depuis la branche courante :
|
||||
```bash
|
||||
git branch --show-current | grep -oP '(MUI-\d+|\d{3,})' | head -1
|
||||
```
|
||||
|
||||
### 8. Mettre à jour COMPONENTS.md
|
||||
|
||||
**Fichier :** `COMPONENTS.md` à la racine du projet.
|
||||
|
||||
Ce fichier sert de documentation de référence pour les projets qui consomment `@malio/layer-ui`. Il est lu par Claude dans les projets consommateurs pour connaître les composants disponibles et leurs props.
|
||||
|
||||
**Ajouter une section pour le nouveau composant** en suivant le format existant :
|
||||
|
||||
```markdown
|
||||
## MalioNomComposant
|
||||
|
||||
Description courte du composant.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| ... | ... | ... | ... |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
\`\`\`vue
|
||||
<MalioNomComposant v-model="val" label="Exemple" />
|
||||
\`\`\`
|
||||
```
|
||||
|
||||
**Checklist :**
|
||||
- Toutes les props documentées avec type, défaut et description
|
||||
- Events listés
|
||||
- Slots listés si applicable
|
||||
- 2-5 exemples d'utilisation couvrant les cas courants (simple, avec options, disabled, erreur)
|
||||
- Section placée par ordre logique (inputs ensemble, boutons ensemble, etc.)
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
Cette section est alimentée au fur et à mesure des retours utilisateur et des problèmes rencontrés. **Si un retour ou un bug est identifié lors de la création d'un composant, ajouter une ligne dans ce tableau.**
|
||||
|
||||
| Erreur | Solution |
|
||||
|--------|----------|
|
||||
| Stub IconifyIcon ne fonctionne pas dans les tests | Utiliser `findComponent(IconifyIcon)` avec l'import réel pour tester les props |
|
||||
| Oubli de `inheritAttrs: false` | Toujours dans `defineOptions` — sinon les attrs se dupliquent |
|
||||
| Page playground non détectée | Vérifier le nom du fichier en camelCase dans `.playground/pages/composant/` |
|
||||
| Padding input pas ajusté avec icône | Ajouter `!pr-10` (ou équivalent) quand une icône est présente à droite |
|
||||
| Story sans initial state | Toujours initialiser les `ref` avec des valeurs pour que les variantes soient visibles dès le chargement |
|
||||
| CHANGELOG oublié | Toujours ajouter la ligne dans `### Added` avant de commit |
|
||||
| COMPONENTS.md pas mis à jour | Ajouter la doc du composant dans `COMPONENTS.md` — c'est la référence pour les projets consommateurs |
|
||||
@@ -1,112 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Primary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Valider" />
|
||||
<MalioButton label="Enregistrer" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Valider" disabled />
|
||||
<MalioButton label="Valider" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Secondary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" disabled />
|
||||
<MalioButton label="Modifier" variant="secondary" disabled icon-name="mdi:pencil" icon-position="left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Tertiary</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" />
|
||||
<MalioButton label="Afficher" variant="tertiary" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
||||
<MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
||||
<MalioButton label="Afficher" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" disabled />
|
||||
<MalioButton label="Afficher" variant="tertiary" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Danger</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:cancel-bold" icon-position="left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec icône</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<MalioButton label="Valider" icon-name="mdi:check" />
|
||||
<MalioButton label="Icône à gauche" icon-name="mdi:arrow-left" icon-position="left" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil-outline" />
|
||||
<MalioButton label="Annuler" variant="tertiary" icon-name="mdi:close" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
|
||||
<div class="grid grid-cols-2 items-start gap-3">
|
||||
<MalioButton label="Pleine largeur" button-class="w-full" />
|
||||
<MalioButton label="Compact" button-class="w-auto px-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:bell-outline"
|
||||
aria-label="Notifications"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:cog-outline"
|
||||
aria-label="Paramètres"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:view-grid-outline"
|
||||
aria-label="Grille"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:format-list-bulleted"
|
||||
aria-label="Liste"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:folder-outline"
|
||||
aria-label="Dossier"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Petit"
|
||||
:icon-size="16"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Normal"
|
||||
:icon-size="24"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Grand"
|
||||
:icon-size="32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:cancel-bold"
|
||||
aria-label="Fermer"
|
||||
variant="ghost"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec événement click</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:plus"
|
||||
aria-label="Incrémenter"
|
||||
@click="counter++"
|
||||
/>
|
||||
<span class="text-lg font-semibold">{{ counter }}</span>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:minus"
|
||||
aria-label="Décrémenter"
|
||||
@click="counter--"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const counter = ref(0)
|
||||
</script>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioCheckbox
|
||||
v-model="simpleValue"
|
||||
label="Accepter les conditions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Coche par default</h2>
|
||||
<MalioCheckbox
|
||||
v-model="checkedValue"
|
||||
label="Recevoir la newsletter"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Hint</h2>
|
||||
<MalioCheckbox
|
||||
v-model="hintValue"
|
||||
label="J'accepte le traitement des donnees"
|
||||
hint="Vous pouvez retirer votre consentement a tout moment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioCheckbox
|
||||
:model-value="false"
|
||||
label="Accepter les CGU"
|
||||
error="Ce champ est obligatoire."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioCheckbox
|
||||
:model-value="true"
|
||||
label="Adresse vérifiée"
|
||||
success="Choix valide."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
|
||||
<div class="space-y-4">
|
||||
<MalioCheckbox
|
||||
:model-value="true"
|
||||
label="Option désactivée"
|
||||
disabled
|
||||
/>
|
||||
<MalioCheckbox
|
||||
:model-value="true"
|
||||
label="Option readonly"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
|
||||
<div class="space-y-4">
|
||||
<MalioCheckbox
|
||||
label="Option 1"
|
||||
/>
|
||||
<MalioCheckbox
|
||||
label="Option 2"
|
||||
/>
|
||||
<MalioCheckbox
|
||||
label="Option 3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
|
||||
<div class="space-y-4">
|
||||
<MalioCheckbox
|
||||
v-for="option in options"
|
||||
:key="option"
|
||||
:label="option"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioCheckbox from '../../../../app/components/malio/checkbox/Checkbox.vue'
|
||||
const simpleValue = ref(false)
|
||||
const checkedValue = ref(true)
|
||||
const hintValue = ref(false)
|
||||
const options = [
|
||||
'Option A',
|
||||
'Option B',
|
||||
'Option C',
|
||||
'Option D',
|
||||
|
||||
]
|
||||
</script>
|
||||
@@ -1,92 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
const filtreNom = ref('')
|
||||
const filtreVille = ref<string | number | null>(null)
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
{ key: 'montant', label: 'Montant' },
|
||||
]
|
||||
|
||||
const allItems = [
|
||||
{ id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
|
||||
{ id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
|
||||
{ id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
|
||||
{ id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
|
||||
{ id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
|
||||
{ id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
|
||||
{ id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
|
||||
{ id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
|
||||
{ id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
|
||||
{ id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
|
||||
{ id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
|
||||
{ id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
|
||||
{ id: 13, nom: 'Roux', prenom: 'Hugo', ville: 'Paris', montant: 2800 },
|
||||
{ id: 14, nom: 'David', prenom: 'Léa', ville: 'Lyon', montant: 670 },
|
||||
{ id: 15, nom: 'Bertrand', prenom: 'Lucas', ville: 'Marseille', montant: 1950 },
|
||||
]
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
return allItems.filter((item) => {
|
||||
if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
|
||||
if (filtreVille.value && item.ville !== filtreVille.value) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
const paginatedItems = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return filteredItems.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
function onRowClick(item: Record<string, unknown>) {
|
||||
alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">DataTable avec filtres et pagination</h2>
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="paginatedItems"
|
||||
:total-items="filteredItems.length"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #header-nom>
|
||||
<input
|
||||
v-model="filtreNom"
|
||||
type="text"
|
||||
placeholder="Nom"
|
||||
class="w-full border-0 border-b border-black bg-transparent px-0 py-1 outline-none text-[20px]"
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #header-ville>
|
||||
<select
|
||||
:value="filtreVille ?? ''"
|
||||
class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-[20px] outline-none"
|
||||
@change="filtreVille = ($event.target as HTMLSelectElement).value || null"
|
||||
>
|
||||
<option value="">Ville</option>
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<template #cell-montant="{ item }">
|
||||
<strong>{{ item.montant }} €</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,49 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const drawerDefault = ref(false)
|
||||
const drawerNoClose = ref(false)
|
||||
const drawerCustomWidth = ref(false)
|
||||
const drawerWithForm = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Drawer simple</h2>
|
||||
<MalioButton label="Ouvrir le drawer" @click="drawerDefault = true" />
|
||||
<MalioDrawer v-model="drawerDefault" title="Titre du drawer">
|
||||
<p class="text-m-text">Contenu du drawer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Sans bouton fermer</h2>
|
||||
<MalioButton label="Ouvrir le drawer" variant="secondary" @click="drawerNoClose = true" />
|
||||
<MalioDrawer v-model="drawerNoClose" title="Sans croix" :show-close="false">
|
||||
<p class="text-m-text">Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
|
||||
<MalioButton label="Ouvrir le drawer large" variant="tertiary" @click="drawerCustomWidth = true" />
|
||||
<MalioDrawer v-model="drawerCustomWidth" title="Drawer large" drawer-class="max-w-2xl">
|
||||
<p class="text-m-text">Ce drawer utilise une largeur personnalisée via drawerClass.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec formulaire</h2>
|
||||
<MalioButton label="Ouvrir le formulaire" variant="danger" @click="drawerWithForm = true" />
|
||||
<MalioDrawer v-model="drawerWithForm" title="Formulaire">
|
||||
<div class="flex flex-col gap-4">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
<MalioInputText label="Email" />
|
||||
<MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
|
||||
</div>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,317 +0,0 @@
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<div class="w-[1348px]">
|
||||
<div class="flex gap-3 mt-[46px]">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left-bold"
|
||||
icon-size="24"
|
||||
aria-label="Précédent"
|
||||
variant="ghost"
|
||||
/>
|
||||
<h1 class="text-[32px] text-m-primary font-bold">Ajouter un client</h1>
|
||||
</div>
|
||||
<div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-8">
|
||||
<MalioInputText
|
||||
label="Nom du client (Entreprise)"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Nom du contact principal"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
v-model="multiselectValue"
|
||||
label="Catégorie"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputPhone
|
||||
v-for="(_, index) in phones"
|
||||
:key="index"
|
||||
v-model="phones[index]"
|
||||
label="Téléphone"
|
||||
add-icon-name="mdi:plus"
|
||||
:addable="phones.length === 1"
|
||||
@add="addPhoneInput"
|
||||
/>
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="distributeur"
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomCourtier"
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomDistributeur"
|
||||
value=""
|
||||
label="Nom du distributeur"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
</div>
|
||||
<div class="mt-[60px]">
|
||||
<MalioTabList :tabs="tabs" v-model="tabsValue">
|
||||
<template #information>
|
||||
<div class="grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
|
||||
<MalioInputTextArea label="Descritpion" resize="none" groupClass="row-span-2" textInput="h-full"/>
|
||||
<MalioInputText v-model="concurrent" label="Concurrent"/>
|
||||
<MalioInputText label="Date création"/>
|
||||
<MalioInputText label="Nombre de salariés" />
|
||||
<MalioInputAmount label="CA"/>
|
||||
<MalioInputText label="Dirigeant" />
|
||||
<MalioInputText label="Résultat" />
|
||||
</div>
|
||||
<div class="mt-12 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
</div>
|
||||
</template>
|
||||
<template #adresses>
|
||||
<div class="relative grid grid-cols-3 gap-x-[80px] gap-y-8 mt-12 bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] py-4 pl-[28px] pr-[60px]">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:delete-outline"
|
||||
aria-label="Supprimer l'adresse"
|
||||
variant="ghost"
|
||||
button-class="absolute top-3 right-3"
|
||||
@click="onDeleteAdresse"
|
||||
/>
|
||||
<MalioCheckbox label="Prospect" groupClass="self-center"/>
|
||||
<MalioCheckbox label="Adresse de livraison" groupClass="self-center"/>
|
||||
<MalioCheckbox label="Facturation" groupClass="self-center"/>
|
||||
<MalioSelectCheckbox
|
||||
v-model="multiselectValue"
|
||||
label="Catégorie"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
label="Pays"
|
||||
v-model="pays"
|
||||
:options="[
|
||||
{label: 'France', value: 'France'},
|
||||
{label: 'Espagne', value: 'Espagne'}
|
||||
]"/>
|
||||
<MalioInputText v-model="codePostal" label="Code postal" />
|
||||
<MalioSelect
|
||||
v-model="ville"
|
||||
label="Ville"
|
||||
:options="villeOptions"
|
||||
:no-options-text="villeNoOptionsText"
|
||||
/>
|
||||
<MalioInputAutocomplete
|
||||
v-model="adresse"
|
||||
label="Adresse"
|
||||
:options="adresseOptions"
|
||||
:loading="adresseLoading"
|
||||
:min-search-length="2"
|
||||
:no-results-text="adresseNoResultsText"
|
||||
:min-search-text="adresseMinSearchText"
|
||||
@search="onSearchAdresse"
|
||||
/>
|
||||
<MalioInputText label="Adresse complémentaire"/>
|
||||
<div class="flex justify-between">
|
||||
<MalioCheckbox
|
||||
v-for="dep in departements"
|
||||
:key="dep"
|
||||
v-model="departementsSelected[dep]"
|
||||
:label="dep"
|
||||
group-class="w-auto self-center"
|
||||
/>
|
||||
</div>
|
||||
<MalioSelect label="Contact" :options="[]"/>
|
||||
<MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
|
||||
</div>
|
||||
<div class="mt-12 flex justify-center gap-6">
|
||||
<MalioButton label="Nouvelle Adresse" variant="secondary" icon-name="mdi:add-bold" icon-position="left"/>
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
</div>
|
||||
</template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, watch} from 'vue'
|
||||
|
||||
type Commune = {
|
||||
nom: string
|
||||
code: string
|
||||
codesPostaux: string[]
|
||||
}
|
||||
|
||||
type BanFeature = {
|
||||
properties: {
|
||||
label: string
|
||||
id: string
|
||||
name: string
|
||||
housenumber?: string
|
||||
street?: string
|
||||
postcode: string
|
||||
citycode: string
|
||||
city: string
|
||||
}
|
||||
}
|
||||
|
||||
const multiselectValue = ref<Array<string | number>>([])
|
||||
const distributeur = ref<string>('')
|
||||
const phones = ref<string[]>([''])
|
||||
const nomDistributeur = ref<string>('')
|
||||
const nomCourtier = ref<string>('')
|
||||
|
||||
function addPhoneInput() {
|
||||
phones.value.push('')
|
||||
}
|
||||
|
||||
function onDeleteAdresse() {
|
||||
console.log('Supprimer cette adresse')
|
||||
}
|
||||
|
||||
const departements = ['86', '17', '82']
|
||||
const departementsSelected = ref<Record<string, boolean>>({86: false, 17: false, 82: false})
|
||||
|
||||
const pays = ref<string>('France')
|
||||
const codePostal = ref<string>('')
|
||||
const ville = ref<string | number | null>(null)
|
||||
const villeOptions = ref<Array<{label: string; value: string}>>([])
|
||||
const villeLoading = ref(false)
|
||||
|
||||
const villeNoOptionsText = computed(() => {
|
||||
if (villeLoading.value) return 'Chargement…'
|
||||
if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir un code postal (5 chiffres)'
|
||||
return 'Aucune ville pour ce code postal'
|
||||
})
|
||||
|
||||
let villeFetchId = 0
|
||||
watch(codePostal, async (cp) => {
|
||||
ville.value = null
|
||||
villeOptions.value = []
|
||||
adresse.value = null
|
||||
adresseOptions.value = []
|
||||
if (!/^\d{5}$/.test(cp)) {
|
||||
villeLoading.value = false
|
||||
return
|
||||
}
|
||||
const requestId = ++villeFetchId
|
||||
villeLoading.value = true
|
||||
try {
|
||||
const response = await fetch(`https://geo.api.gouv.fr/communes?codePostal=${cp}`)
|
||||
const data = await response.json() as Commune[]
|
||||
if (requestId !== villeFetchId) return
|
||||
villeOptions.value = data.map(c => ({label: c.nom, value: c.code}))
|
||||
} catch (err) {
|
||||
if (requestId !== villeFetchId) return
|
||||
villeOptions.value = []
|
||||
console.error('Erreur lors du chargement des villes', err)
|
||||
} finally {
|
||||
if (requestId === villeFetchId) villeLoading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const adresse = ref<string | number | null>(null)
|
||||
const adresseOptions = ref<Array<{label: string; value: string}>>([])
|
||||
const adresseLoading = ref(false)
|
||||
|
||||
const adresseMinSearchText = computed(() => {
|
||||
if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
|
||||
return 'Tapez au moins 3 caractères'
|
||||
})
|
||||
const adresseNoResultsText = computed(() => {
|
||||
if (!/^\d{5}$/.test(codePostal.value)) return 'Saisir d\'abord un code postal'
|
||||
return 'Aucune adresse trouvée'
|
||||
})
|
||||
|
||||
let adresseFetchId = 0
|
||||
const onSearchAdresse = async (query: string) => {
|
||||
if (!/^\d{5}$/.test(codePostal.value) || query.length < 3) {
|
||||
adresseOptions.value = []
|
||||
adresseLoading.value = false
|
||||
return
|
||||
}
|
||||
const requestId = ++adresseFetchId
|
||||
adresseLoading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
q: query,
|
||||
postcode: codePostal.value,
|
||||
type: 'housenumber',
|
||||
})
|
||||
const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
|
||||
const data = await response.json() as {features: BanFeature[]}
|
||||
if (requestId !== adresseFetchId) return
|
||||
adresseOptions.value = data.features.map(f => ({
|
||||
label: f.properties.name,
|
||||
value: f.properties.name,
|
||||
}))
|
||||
} catch (err) {
|
||||
if (requestId !== adresseFetchId) return
|
||||
adresseOptions.value = []
|
||||
console.error('Erreur lors du chargement des adresses', err)
|
||||
} finally {
|
||||
if (requestId === adresseFetchId) adresseLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tabsValue = ref('information')
|
||||
const concurrent = ref('')
|
||||
|
||||
const informationValid = computed(() => concurrent.value.trim().length > 0)
|
||||
const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
|
||||
|
||||
const tabs = computed(() => [
|
||||
{
|
||||
key: 'information',
|
||||
label: 'Information',
|
||||
icon: 'mdi:account-outline',
|
||||
},
|
||||
{
|
||||
key: 'contacts',
|
||||
label: 'Contacts',
|
||||
icon: 'mdi:account-box-plus-outline',
|
||||
disabled: !informationValid.value,
|
||||
},
|
||||
{
|
||||
key: 'adresses',
|
||||
label: 'Adresses',
|
||||
icon: 'mdi:map-marker-outline',
|
||||
disabled: !informationValid.value,
|
||||
},
|
||||
{
|
||||
key: 'transport',
|
||||
label: 'Transport',
|
||||
icon: 'mdi:truck-delivery-outline',
|
||||
disabled: !informationValid.value || !adressesValid.value,
|
||||
},
|
||||
{
|
||||
key: 'comptabilité',
|
||||
label: 'Comptabilité',
|
||||
icon: 'mdi:bank-circle-outline',
|
||||
disabled: !informationValid.value || !adressesValid.value,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputAmount />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioInputAmount
|
||||
label="Montant"
|
||||
name="amount"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputAmount
|
||||
model-value="125.00"
|
||||
disabled
|
||||
label="Montant désactivé"
|
||||
/>
|
||||
<MalioInputAmount
|
||||
disabled
|
||||
label="Montant désactivé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputAmount
|
||||
model-value="42.50"
|
||||
readonly
|
||||
label="Montant readonly"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur et succès</h2>
|
||||
<div class="mt-4">
|
||||
<MalioInputAmount
|
||||
model-value="12.3"
|
||||
label="Montant"
|
||||
error="Le montant est incorrect"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<MalioInputAmount
|
||||
model-value="89.90"
|
||||
label="Montant"
|
||||
success="Montant valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple (statique)</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="simpleValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
/>
|
||||
<p class="mt-2 text-sm text-m-muted">
|
||||
Valeur sélectionnée : <code>{{ simpleValue ?? 'null' }}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="leftIconValue"
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
icon-position="left"
|
||||
:options="staticOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4 md:col-span-2">
|
||||
<h2 class="mb-4 text-xl font-bold">Branché sur une API (simulé)</h2>
|
||||
<p class="mb-3 text-sm text-m-muted">
|
||||
Le parent écoute l'event <code>search</code> et alimente <code>options</code> + <code>loading</code>.
|
||||
Tapez au moins 2 caractères.
|
||||
</p>
|
||||
<MalioInputAutocomplete
|
||||
v-model="apiValue"
|
||||
label="Client"
|
||||
:options="apiOptions"
|
||||
:loading="apiLoading"
|
||||
:min-search-length="2"
|
||||
icon-name="mdi:magnify"
|
||||
icon-position="left"
|
||||
@search="onSearchApi"
|
||||
@select="onSelectApi"
|
||||
/>
|
||||
<p v-if="apiSelected" class="mt-2 text-sm text-m-muted">
|
||||
Sélection : <code>{{ apiSelected.label }} (id={{ apiSelected.value }})</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec création (allowCreate)</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="createValue"
|
||||
label="Catégorie"
|
||||
:options="staticOptions"
|
||||
allow-create
|
||||
hint="Taper Entrée pour créer une nouvelle valeur"
|
||||
@create="onCreate"
|
||||
/>
|
||||
<p v-if="createdItems.length > 0" class="mt-2 text-sm text-m-muted">
|
||||
Créés : {{ createdItems.join(', ') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputAutocomplete
|
||||
model-value="fr"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputAutocomplete
|
||||
model-value="fr"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="hintValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
hint="Sélectionne un pays dans la liste"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputAutocomplete
|
||||
model-value="fr"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
error="Sélection invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputAutocomplete
|
||||
model-value="fr"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
success="Sélection valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Liste vide</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="emptyValue"
|
||||
label="Recherche"
|
||||
:options="[]"
|
||||
no-results-text="Aucun élément disponible"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
type Option = {label: string; value: string | number}
|
||||
|
||||
const staticOptions: Option[] = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
{label: 'Suisse', value: 'ch'},
|
||||
{label: 'Luxembourg', value: 'lu'},
|
||||
{label: 'Allemagne', value: 'de'},
|
||||
{label: 'Espagne', value: 'es'},
|
||||
{label: 'Italie', value: 'it'},
|
||||
]
|
||||
|
||||
const simpleValue = ref<string | number | null>(null)
|
||||
const leftIconValue = ref<string | number | null>(null)
|
||||
const createValue = ref<string | number | null>(null)
|
||||
const hintValue = ref<string | number | null>(null)
|
||||
const emptyValue = ref<string | number | null>(null)
|
||||
|
||||
const createdItems = ref<string[]>([])
|
||||
const onCreate = (value: string) => {
|
||||
createdItems.value.push(value)
|
||||
}
|
||||
|
||||
const apiValue = ref<string | number | null>(null)
|
||||
const apiOptions = ref<Option[]>([])
|
||||
const apiLoading = ref(false)
|
||||
const apiSelected = ref<Option | null>(null)
|
||||
|
||||
const fakeClients: Option[] = [
|
||||
{label: 'Yuno Malio', value: 1},
|
||||
{label: 'Yuna Corp', value: 2},
|
||||
{label: 'Yum Foods', value: 3},
|
||||
{label: 'Yumi Studio', value: 4},
|
||||
{label: 'Acme Inc.', value: 5},
|
||||
{label: 'Globex Corp', value: 6},
|
||||
{label: 'Initech', value: 7},
|
||||
{label: 'Soylent Corp', value: 8},
|
||||
]
|
||||
|
||||
const onSearchApi = async (query: string) => {
|
||||
apiLoading.value = true
|
||||
await new Promise(resolve => setTimeout(resolve, 400))
|
||||
apiOptions.value = fakeClients.filter(c =>
|
||||
c.label.toLowerCase().includes(query.toLowerCase()),
|
||||
)
|
||||
apiLoading.value = false
|
||||
}
|
||||
|
||||
const onSelectApi = (option: Option | null) => {
|
||||
apiSelected.value = option
|
||||
}
|
||||
</script>
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputEmail />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioInputEmail
|
||||
v-model="emailValue"
|
||||
label="Adresse email"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Icône à gauche</h2>
|
||||
<MalioInputEmail
|
||||
label="Adresse email"
|
||||
icon-position="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputEmail
|
||||
label="Adresse email"
|
||||
:icon-name="''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputEmail
|
||||
model-value="contact@malio.fr"
|
||||
disabled
|
||||
label="Adresse email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputEmail
|
||||
model-value="readonly@malio.fr"
|
||||
readonly
|
||||
label="Adresse email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputEmail
|
||||
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">Erreur</h2>
|
||||
<MalioInputEmail
|
||||
model-value="pas-un-email"
|
||||
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
|
||||
model-value="contact@malio.fr"
|
||||
label="Adresse email"
|
||||
success="Adresse email valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
|
||||
<MalioInputEmail
|
||||
v-model="dynamicEmail"
|
||||
label="Adresse email"
|
||||
hint="Saisir une adresse au format prenom@domaine.tld"
|
||||
:error="dynamicError"
|
||||
:success="dynamicSuccess"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const emailValue = ref('')
|
||||
const dynamicEmail = ref('')
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
const isDynamicValid = computed(() => emailRegex.test(dynamicEmail.value))
|
||||
const dynamicError = computed(() => {
|
||||
if (!dynamicEmail.value) return ''
|
||||
return isDynamicValid.value ? '' : 'Adresse email invalide'
|
||||
})
|
||||
const dynamicSuccess = computed(() => {
|
||||
if (!dynamicEmail.value) return ''
|
||||
return isDynamicValid.value ? 'Adresse email valide' : ''
|
||||
})
|
||||
</script>
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputNumber
|
||||
v-model="simpleValue"
|
||||
label="Quantite"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioInputNumber
|
||||
v-model="initialValue"
|
||||
label="Participants"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
|
||||
<MalioInputNumber
|
||||
v-model="boundedValue"
|
||||
label="Places"
|
||||
:min="1"
|
||||
:max="5"
|
||||
hint="Minimum 1, maximum 5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioInputNumber
|
||||
v-model="disabledValue"
|
||||
label="Articles"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputNumber
|
||||
v-model="readonlyValue"
|
||||
label="Tickets"
|
||||
readonly
|
||||
hint="Valeur verrouillee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputNumber
|
||||
v-model="errorValue"
|
||||
label="Quantite"
|
||||
:min="1"
|
||||
error="La quantite minimale est 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioInputNumber
|
||||
v-model="successValue"
|
||||
label="Quantite"
|
||||
success="Quantite validee"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const initialValue = ref('3')
|
||||
const boundedValue = ref('2')
|
||||
const disabledValue = ref('4')
|
||||
const readonlyValue = ref('7')
|
||||
const errorValue = ref('0')
|
||||
const successValue = ref('2')
|
||||
</script>
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputPassword />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioInputPassword
|
||||
v-model="passwordValue"
|
||||
label="Mot de passe"
|
||||
name="password"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputPassword
|
||||
label="Mot de passe"
|
||||
:display-icon="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputPassword
|
||||
model-value="motdepasse123"
|
||||
disabled
|
||||
label="Mot de passe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputPassword
|
||||
model-value="lectureseule"
|
||||
readonly
|
||||
label="Mot de passe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputPassword
|
||||
label="Mot de passe"
|
||||
hint="8 caractères minimum"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputPassword
|
||||
model-value="abc"
|
||||
label="Mot de passe"
|
||||
error="Le mot de passe est trop court"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputPassword
|
||||
model-value="motdepasse123"
|
||||
label="Mot de passe"
|
||||
success="Mot de passe valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
|
||||
<MalioInputPassword
|
||||
v-model="dynamicPassword"
|
||||
label="Mot de passe"
|
||||
hint="8 caractères minimum, 1 majuscule, 1 chiffre"
|
||||
:error="dynamicError"
|
||||
:success="dynamicSuccess"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const passwordValue = ref('')
|
||||
const dynamicPassword = ref('')
|
||||
|
||||
const passwordRegex = /^(?=.*[A-Z])(?=.*\d).{8,}$/
|
||||
const isDynamicValid = computed(() => passwordRegex.test(dynamicPassword.value))
|
||||
const dynamicError = computed(() => {
|
||||
if (!dynamicPassword.value) return ''
|
||||
return isDynamicValid.value ? '' : 'Mot de passe invalide'
|
||||
})
|
||||
const dynamicSuccess = computed(() => {
|
||||
if (!dynamicPassword.value) return ''
|
||||
return isDynamicValid.value ? 'Mot de passe valide' : ''
|
||||
})
|
||||
</script>
|
||||
@@ -1,141 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputPhone />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioInputPhone
|
||||
v-model="phoneValue"
|
||||
label="Téléphone"
|
||||
name="phone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
|
||||
<MalioInputPhone
|
||||
v-model="phoneAddable"
|
||||
label="Téléphone"
|
||||
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">Icône à droite (sans bouton +)</h2>
|
||||
<MalioInputPhone
|
||||
label="Téléphone"
|
||||
icon-position="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputPhone
|
||||
label="Téléphone"
|
||||
:icon-name="''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec masque français</h2>
|
||||
<MalioInputPhone
|
||||
v-model="phoneFrench"
|
||||
label="Téléphone (FR)"
|
||||
mask="+33 # ## ## ## ##"
|
||||
hint="Saisir uniquement les chiffres"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé (avec addable)</h2>
|
||||
<MalioInputPhone
|
||||
model-value="+33 6 12 34 56 78"
|
||||
addable
|
||||
disabled
|
||||
label="Téléphone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly (avec addable)</h2>
|
||||
<MalioInputPhone
|
||||
model-value="+33 6 12 34 56 78"
|
||||
addable
|
||||
readonly
|
||||
label="Téléphone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputPhone
|
||||
label="Téléphone"
|
||||
hint="Format international recommandé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputPhone
|
||||
model-value="abc"
|
||||
label="Téléphone"
|
||||
error="Numéro de téléphone invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputPhone
|
||||
model-value="+33 6 12 34 56 78"
|
||||
label="Téléphone"
|
||||
success="Numéro valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4 md:col-span-2">
|
||||
<h2 class="mb-4 text-xl font-bold">Cas ERP — liste de téléphones (max 2)</h2>
|
||||
<p class="mb-3 text-sm text-m-muted">
|
||||
Le bouton + s'affiche sur le dernier champ tant que la liste contient moins de {{ MAX_PHONES }} numéros.
|
||||
</p>
|
||||
<div class="flex flex-col gap-4">
|
||||
<MalioInputPhone
|
||||
v-for="(phone, index) in phones"
|
||||
:key="index"
|
||||
v-model="phones[index]"
|
||||
:label="`Téléphone ${index + 1}`"
|
||||
:addable="index === phones.length - 1 && phones.length < MAX_PHONES"
|
||||
@add="addPhone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const phoneValue = ref('')
|
||||
const phoneAddable = ref('')
|
||||
const phoneFrench = ref('')
|
||||
const addClicks = ref(0)
|
||||
|
||||
const onAdd = () => {
|
||||
addClicks.value++
|
||||
}
|
||||
|
||||
const MAX_PHONES = 2
|
||||
const phones = ref<string[]>([''])
|
||||
|
||||
const addPhone = () => {
|
||||
if (phones.value.length < MAX_PHONES) {
|
||||
phones.value.push('')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 p-4 lg:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputRichText
|
||||
v-model="simpleValue"
|
||||
label="Note"
|
||||
placeholder="Écrire ici…"
|
||||
/>
|
||||
<pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ simpleValue }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
|
||||
<MalioInputRichText
|
||||
v-model="hintValue"
|
||||
label="Description"
|
||||
hint="Tu peux mettre en forme avec la barre d'outils"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputRichText
|
||||
v-model="errorValue"
|
||||
label="Compte-rendu"
|
||||
error="Le compte-rendu doit faire au moins 20 caractères"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputRichText
|
||||
v-model="successValue"
|
||||
label="Compte-rendu"
|
||||
success="Compte-rendu validé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputRichText
|
||||
v-model="readonlyValue"
|
||||
label="Note (lecture seule)"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Disabled</h2>
|
||||
<MalioInputRichText
|
||||
v-model="disabledValue"
|
||||
label="Note (désactivée)"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
|
||||
<MalioInputRichText
|
||||
:model-value="readonlyValue"
|
||||
:editable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
|
||||
<MalioInputRichText
|
||||
v-model="htmlValue"
|
||||
label="Article"
|
||||
output-format="html"
|
||||
min-height="200px"
|
||||
placeholder="Tape ici, la sortie sera en HTML…"
|
||||
/>
|
||||
<pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ htmlValue }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputRichText from '../../../../app/components/malio/input/InputRichText.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
|
||||
const errorValue = ref('Trop court')
|
||||
const successValue = ref('Tout est bon de mon côté.')
|
||||
const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
|
||||
const disabledValue = ref('Contenu indisponible.')
|
||||
const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
|
||||
</script>
|
||||
@@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputText
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioInputText
|
||||
v-model="nameValue"
|
||||
label="Nom d'utilisateur"
|
||||
name="username"
|
||||
autocomplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône à droite</h2>
|
||||
<MalioInputText
|
||||
v-model="searchValue"
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
|
||||
<MalioInputText
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
icon-size="20"
|
||||
icon-position="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputText
|
||||
model-value="Valeur verrouillée"
|
||||
disabled
|
||||
label="Champ désactivé"
|
||||
/>
|
||||
<MalioInputText
|
||||
disabled
|
||||
label="Champ désactivé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputText
|
||||
model-value="Lecture seule"
|
||||
readonly
|
||||
label="Champ readonly"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
|
||||
<MalioInputText
|
||||
v-model="cityValue"
|
||||
label="Ville"
|
||||
icon-name="mdi:map-marker-outline"
|
||||
icon-size="20"
|
||||
hint="Commencez à taper le nom de la ville"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
|
||||
<MalioInputText
|
||||
model-value="ab"
|
||||
label="Code promo"
|
||||
icon-name="mdi:alert-circle-outline"
|
||||
icon-size="20"
|
||||
error="Le code est invalide"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
|
||||
<MalioInputText
|
||||
label="Code"
|
||||
success="Code valide"
|
||||
icon-name="mdi:alert-circle-outline"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly + icône</h2>
|
||||
<MalioInputText
|
||||
model-value="Commande #A-2048"
|
||||
label="Référence"
|
||||
readonly
|
||||
icon-name="mdi:lock-outline"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé + icône</h2>
|
||||
<MalioInputText
|
||||
model-value="Compte indisponible"
|
||||
label="Compte"
|
||||
disabled
|
||||
icon-name="mdi:account-off-outline"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec masque</h2>
|
||||
<MalioInputText
|
||||
label="Plaque d'immatriculation"
|
||||
:mask="maskOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Code dynamique</h2>
|
||||
<MalioInputText
|
||||
v-model="dynamicCodeValue"
|
||||
label="Code d'accès"
|
||||
hint="Format attendu: 6 à 10 caractères alphanumériques"
|
||||
:error="dynamicCodeError"
|
||||
:success="dynamicCodeSuccess"
|
||||
icon-name="mdi:key-outline"
|
||||
icon-size="20"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Hint,erreur et succès</h2>
|
||||
<MalioInputText
|
||||
v-model="codeValue"
|
||||
label="Code"
|
||||
hint="Format attendu: 6 à 10 caractères alphanumériques"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<MalioInputText
|
||||
model-value="invalide"
|
||||
label="Code"
|
||||
error="Le code doit contenir au moins 6 caractères"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<MalioInputText
|
||||
model-value="valide"
|
||||
label="Code"
|
||||
success="Le code est valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
const nameValue = ref('')
|
||||
const searchValue = ref('')
|
||||
const codeValue = ref('')
|
||||
const cityValue = ref('')
|
||||
const dynamicCodeValue = ref('')
|
||||
|
||||
const codeRegex = /^[A-Z0-9]{6,10}$/
|
||||
const normalizedDynamicCode = computed(() => dynamicCodeValue.value.toUpperCase())
|
||||
const isDynamicCodeValid = computed(() => codeRegex.test(normalizedDynamicCode.value))
|
||||
const dynamicCodeError = computed(() => {
|
||||
if (!dynamicCodeValue.value) return ''
|
||||
return isDynamicCodeValid.value ? '' : 'Code invalide (6 à 10 caractères alphanumériques)'
|
||||
})
|
||||
const dynamicCodeSuccess = computed(() => {
|
||||
if (!dynamicCodeValue.value) return ''
|
||||
return isDynamicCodeValid.value ? 'Code valide' : ''
|
||||
})
|
||||
|
||||
const maskOptions = {
|
||||
mask: '@@-###-@@',
|
||||
tokens: {
|
||||
'@': {
|
||||
pattern: /[A-Za-z]/,
|
||||
transform: (char: string) => char.toUpperCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 p-4 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputTextArea/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label + hint</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="hintValue"
|
||||
label="Description"
|
||||
hint="Ajoutez un contexte clair"
|
||||
:size="4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="iconValue"
|
||||
label="Commentaire"
|
||||
icon-name="mdi:comment-text-outline"
|
||||
:size="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur / Succès</h2>
|
||||
<div class="space-y-4">
|
||||
<MalioInputTextArea
|
||||
v-model="errorValue"
|
||||
label="Message"
|
||||
error="Le message est trop court"
|
||||
:size="3"
|
||||
/>
|
||||
<MalioInputTextArea
|
||||
v-model="successValue"
|
||||
label="Message"
|
||||
success="Message valide"
|
||||
:size="3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly / Disabled</h2>
|
||||
<div class="space-y-4">
|
||||
<MalioInputTextArea
|
||||
model-value="Contenu en lecture seule"
|
||||
label="Readonly"
|
||||
readonly
|
||||
:size="3"
|
||||
/>
|
||||
<MalioInputTextArea
|
||||
model-value="Champ indisponible"
|
||||
label="Disabled"
|
||||
disabled
|
||||
:size="3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="resizeValue"
|
||||
label="Notes"
|
||||
resize="both"
|
||||
:size="4"
|
||||
:min-resize-width="300"
|
||||
:max-resize-width="700"
|
||||
:min-resize-height="120"
|
||||
:max-resize-height="280"
|
||||
hint="Resize limite en largeur et hauteur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Compteur (interne au composant)</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="counterValue"
|
||||
label="Message"
|
||||
:size="5"
|
||||
:max-length="120"
|
||||
:show-counter="true"
|
||||
hint="Le compteur est en bas a gauche"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputTextArea from '../../../../app/components/malio/input/InputTextArea.vue'
|
||||
|
||||
const hintValue = ref('')
|
||||
const iconValue = ref('')
|
||||
const errorValue = ref('abc')
|
||||
const successValue = ref('Contenu ok')
|
||||
const resizeValue = ref('Vous pouvez redimensionner ce champ.')
|
||||
const counterValue = ref('')
|
||||
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputUpload label="Fichier" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label et v-model</h2>
|
||||
<MalioInputUpload
|
||||
v-model="uploadValue"
|
||||
label="Téléverser un document"
|
||||
/>
|
||||
<p class="mt-2 text-sm text-gray-500">Valeur : {{ uploadValue || '(aucun)' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
|
||||
<MalioInputUpload
|
||||
label="Document PDF"
|
||||
accept=".pdf"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputUpload
|
||||
model-value="document.pdf"
|
||||
disabled
|
||||
label="Fichier"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputUpload
|
||||
label="Fichier"
|
||||
hint="Formats acceptés : PDF, DOC, DOCX"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputUpload
|
||||
model-value="image.bmp"
|
||||
label="Fichier"
|
||||
error="Format non supporté"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputUpload
|
||||
model-value="rapport.pdf"
|
||||
label="Fichier"
|
||||
success="Fichier valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
|
||||
<MalioInputUpload
|
||||
v-model="dynamicUpload"
|
||||
label="Document PDF"
|
||||
accept=".pdf"
|
||||
hint="Seuls les fichiers PDF sont acceptés"
|
||||
:error="dynamicError"
|
||||
:success="dynamicSuccess"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const uploadValue = ref('')
|
||||
const dynamicUpload = ref('')
|
||||
|
||||
const dynamicError = computed(() => {
|
||||
if (!dynamicUpload.value) return ''
|
||||
return dynamicUpload.value.endsWith('.pdf') ? '' : 'Seuls les fichiers PDF sont acceptés'
|
||||
})
|
||||
const dynamicSuccess = computed(() => {
|
||||
if (!dynamicUpload.value) return ''
|
||||
return dynamicUpload.value.endsWith('.pdf') ? 'Fichier PDF valide' : ''
|
||||
})
|
||||
</script>
|
||||
@@ -1,111 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-2 gap-6 md:grid-cols-3">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`simple-${option.value}`"
|
||||
v-model="primaryChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="primary-choice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Preselected</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`preselected-${option.value}`"
|
||||
v-model="preselectedChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="preselected-choice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Error</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`error-${option.value}`"
|
||||
v-model="errorChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="error-choice"
|
||||
error="Selection required"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Success</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`success-${option.value}`"
|
||||
v-model="successChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="success-choice"
|
||||
success="Selection saved"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Disabled</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`disabled-${option.value}`"
|
||||
v-model="disabledChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="disabled-choice"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`readonly-${option.value}`"
|
||||
v-model="readonlyChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="readonly-choice"
|
||||
readonly
|
||||
hint="Readonly group"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioRadioButton from '../../../../app/components/malio/radio/RadioButton.vue'
|
||||
|
||||
const options = [
|
||||
{label: 'Option 1', value: 'option1'},
|
||||
{label: 'Option 2', value: 'option2'},
|
||||
{label: 'Option 3', value: 'option3'},
|
||||
{label: 'Option 4', value: 'option4'},
|
||||
]
|
||||
|
||||
const primaryChoice = ref<string | null>(null)
|
||||
const preselectedChoice = ref<string | null>('option2')
|
||||
const errorChoice = ref<string | null>(null)
|
||||
const successChoice = ref<string | null>('option3')
|
||||
const disabledChoice = ref<string | null>('option2')
|
||||
const readonlyChoice = ref<string | null>('option4')
|
||||
</script>
|
||||
@@ -1,165 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start 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="basicValue"
|
||||
:options="options"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioSelect
|
||||
v-model="labelValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur preselectionnee</h2>
|
||||
<MalioSelect
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Hint</h2>
|
||||
<MalioSelect
|
||||
v-model="hintValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
hint="Choisissez votre pays"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</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 selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioSelect
|
||||
v-model="successValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
success="Selection validee"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioSelect
|
||||
v-model="disabledValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
disabled
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans options</h2>
|
||||
<MalioSelect
|
||||
v-model="emptyValue"
|
||||
label="Pays"
|
||||
empty-option-label="Aucun pays disponible"
|
||||
/>
|
||||
</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
|
||||
v-model="longListValue"
|
||||
:options="longOptions"
|
||||
label="Pays"
|
||||
hint="Permet de verifier la scrollbar"
|
||||
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">Ouverture en bas de page</h2>
|
||||
<div class="h-64" />
|
||||
<MalioSelect
|
||||
v-model="bottomValue"
|
||||
:options="longOptions"
|
||||
label="Ouverture adaptative"
|
||||
hint="A ouvrir pres du bas de la page"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
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'},
|
||||
]
|
||||
|
||||
const shortOptions = [
|
||||
{label: 'Monsieur', value: 'M'},
|
||||
{label: 'Madame', value: 'Mme'},
|
||||
]
|
||||
|
||||
const longOptions = [
|
||||
...options,
|
||||
{label: 'Pays-Bas', value: 'nl'},
|
||||
{label: 'Suede', value: 'se'},
|
||||
{label: 'Norvege', value: 'no'},
|
||||
{label: 'Danemark', value: 'dk'},
|
||||
{label: 'Finlande', value: 'fi'},
|
||||
{label: 'Autriche', value: 'at'},
|
||||
{label: 'Irlande', value: 'ie'},
|
||||
{label: 'Grece', value: 'gr'},
|
||||
{label: 'Pologne', value: 'pl'},
|
||||
{label: 'Hongrie', value: 'hu'},
|
||||
{label: 'Republique tcheque', value: 'cz'},
|
||||
]
|
||||
|
||||
const basicValue = ref<string | number | null>(null)
|
||||
const labelValue = ref<string | number | null>(null)
|
||||
const selectedValue = ref<string | number | null>('fr')
|
||||
const hintValue = ref<string | number | null>(null)
|
||||
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>
|
||||
@@ -1,193 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="basicValue"
|
||||
:options="options"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec tag</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="labelValue"
|
||||
:options="options"
|
||||
displayTag="true"
|
||||
empty-option-label=" "
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec tag + label</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="labelValue1"
|
||||
:options="options"
|
||||
displayTag="true"
|
||||
label="Pays"
|
||||
empty-option-label=" "
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="labelValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur preselectionnee</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectedValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Hint</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="hintValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
hint="Choisissez votre pays"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="errorValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
error="Ce champ est obligatoire"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="successValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
success="Selection validee"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="disabledValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
disabled
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans options</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="emptyValue"
|
||||
label="Pays"
|
||||
empty-option-label="Aucun pays disponible"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectAllValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-select-all="true"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectAllCustomValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-select-all="true"
|
||||
select-all-label="Cocher tout"
|
||||
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>
|
||||
<MalioSelectCheckbox
|
||||
v-model="longListValue"
|
||||
:options="longOptions"
|
||||
label="Pays"
|
||||
hint="Permet de verifier la scrollbar"
|
||||
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">Ouverture en bas de page</h2>
|
||||
<div class="h-64" />
|
||||
<MalioSelectCheckbox
|
||||
v-model="bottomValue"
|
||||
:options="longOptions"
|
||||
label="Ouverture adaptative"
|
||||
hint="A ouvrir pres du bas de la page"
|
||||
empty-option-label="Aucune selection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
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'},
|
||||
]
|
||||
|
||||
const longOptions = [
|
||||
...options,
|
||||
{label: 'Pays-Bas', value: 'nl'},
|
||||
{label: 'Suede', value: 'se'},
|
||||
{label: 'Norvege', value: 'no'},
|
||||
{label: 'Danemark', value: 'dk'},
|
||||
{label: 'Finlande', value: 'fi'},
|
||||
{label: 'Autriche', value: 'at'},
|
||||
{label: 'Irlande', value: 'ie'},
|
||||
{label: 'Grece', value: 'gr'},
|
||||
{label: 'Pologne', value: 'pl'},
|
||||
{label: 'Hongrie', value: 'hu'},
|
||||
{label: 'Republique tcheque', value: 'cz'},
|
||||
]
|
||||
|
||||
const basicValue = ref<Array<string | number>>([])
|
||||
const labelValue = ref<Array<string | number>>([])
|
||||
const labelValue1 = ref<Array<string | number>>([])
|
||||
const selectedValue = ref<Array<string | number>>(['fr'])
|
||||
const hintValue = ref<Array<string | number>>([])
|
||||
const errorValue = ref<Array<string | number>>([])
|
||||
const successValue = ref<Array<string | number>>(['be'])
|
||||
const disabledValue = ref<Array<string | number>>(['ca'])
|
||||
const emptyValue = ref<Array<string | number>>([])
|
||||
const selectAllValue = ref<Array<string | number>>([])
|
||||
const selectAllCustomValue = ref<Array<string | number>>([])
|
||||
const longListValue = ref<Array<string | number>>([])
|
||||
const bottomValue = ref<Array<string | number>>([])
|
||||
</script>
|
||||
@@ -1,131 +0,0 @@
|
||||
<template>
|
||||
<div class="flex gap-8" style="height: calc(100vh - 100px)">
|
||||
<MalioSidebar
|
||||
v-model="collapsed1"
|
||||
:sections="sectionsShort"
|
||||
>
|
||||
<template #logo>
|
||||
<img src="/LOGO_MALIO.png" alt="Malio" />
|
||||
</template>
|
||||
<template #logo-collapsed>
|
||||
<img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
|
||||
</template>
|
||||
</MalioSidebar>
|
||||
|
||||
<MalioSidebar
|
||||
v-model="collapsed2"
|
||||
:sections="sectionsLong"
|
||||
>
|
||||
<template #logo>
|
||||
<img src="/LOGO_MALIO.png" alt="Malio" />
|
||||
</template>
|
||||
<template #logo-collapsed>
|
||||
<img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
|
||||
</template>
|
||||
</MalioSidebar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const collapsed1 = ref(false)
|
||||
const collapsed2 = ref(false)
|
||||
|
||||
const sectionsShort = [
|
||||
{
|
||||
label: 'LOGISTIQUE / TRANSPORT',
|
||||
icon: 'mdi:truck-delivery',
|
||||
items: [
|
||||
{label: 'Réception / Expédition', to: '/reception'},
|
||||
{label: 'Validation expédition', to: '/validation'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'COMMERCIAL',
|
||||
icon: 'mdi:handshake',
|
||||
items: [
|
||||
{label: 'Répertoire fournisseurs', to: '/fournisseurs'},
|
||||
{label: 'Répertoire clients', to: '/clients'},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const sectionsLong = [
|
||||
{
|
||||
label: 'LOGISTIQUE / TRANSPORT',
|
||||
icon: 'mdi:truck-delivery',
|
||||
items: [
|
||||
{label: 'Réception / Expédition', to: '/reception'},
|
||||
{label: 'Validation expédition', to: '/validation'},
|
||||
{label: 'Voyage', to: '/voyage'},
|
||||
{label: 'Ticket de pesée', to: '/pesee'},
|
||||
{label: 'Bon de réception', to: '/bon-reception'},
|
||||
{label: "Bon d'expédition", to: '/bon-expedition'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'USINE / PRODUCTION',
|
||||
icon: 'mdi:factory',
|
||||
items: [
|
||||
{label: 'Fabrication en cours', to: '/fabrication'},
|
||||
{label: 'Liste des fabrications', to: '/fabrications'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'COMMERCIAL',
|
||||
icon: 'mdi:handshake',
|
||||
items: [
|
||||
{label: 'Répertoire fournisseurs', to: '/fournisseurs'},
|
||||
{label: 'Compagnie fournisseurs', to: '/compagnie-fournisseurs'},
|
||||
{label: 'Répertoire clients', to: '/clients'},
|
||||
{label: 'Contrats en cours', to: '/contrats'},
|
||||
{label: 'Commissions Clients', to: '/commissions'},
|
||||
{label: 'Attribution expédition', to: '/attribution'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'PRIX',
|
||||
icon: 'mdi:tag',
|
||||
items: [
|
||||
{label: "Prix d'achat/vente", to: '/prix-achat'},
|
||||
{label: "Prix d'achat spécifiques", to: '/prix-specifiques'},
|
||||
{label: 'Prix de ventes clients', to: '/prix-vente'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'FACTURATION',
|
||||
icon: 'mdi:receipt',
|
||||
items: [
|
||||
{label: 'Expéditions à facturer', to: '/expeditions-facturer'},
|
||||
{label: 'Factures', to: '/factures'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'TECHNIQUE',
|
||||
icon: 'mdi:cog',
|
||||
items: [
|
||||
{label: 'Répertoire prestataires', to: '/prestataires'},
|
||||
{label: 'Répertoire transporteurs', to: '/transporteurs'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'SUIVI HEURES',
|
||||
icon: 'mdi:clock-outline',
|
||||
items: [
|
||||
{label: 'Heure Usine', to: '/heure-usine'},
|
||||
{label: 'Heure Extras', to: '/heure-extras'},
|
||||
{label: 'Heure Ferme', to: '/heure-ferme'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'ADMINISTRATION',
|
||||
icon: 'mdi:shield-account',
|
||||
items: [
|
||||
{label: 'Catalogue produits', to: '/catalogue'},
|
||||
{label: 'Éditer étiquettes', to: '/etiquettes'},
|
||||
{label: 'Organisation catégorie', to: '/organisation'},
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple (3 sites) + event change</h2>
|
||||
<MalioSiteSelector v-model="simpleValue" :sites="sites" @change="onSiteChange" />
|
||||
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ simpleValue }}</code></p>
|
||||
<p class="mt-1 text-sm text-gray-600">Dernier event <code>change</code> : <code>{{ lastChange }}</code></p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Deux sites</h2>
|
||||
<MalioSiteSelector v-model="twoValue" :sites="sitesTwo" />
|
||||
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ twoValue }}</code></p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Cinq sites (largeur proportionnelle)</h2>
|
||||
<MalioSiteSelector v-model="fiveValue" :sites="sitesFive" />
|
||||
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ fiveValue }}</code></p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
|
||||
<MalioSiteSelector :sites="sites" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Largeur contrainte</h2>
|
||||
<div class="w-[480px]">
|
||||
<MalioSiteSelector v-model="constrainedValue" :sites="sites" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const sites = [
|
||||
{ id: 'chatellerault', name: 'Châtellerault', color: '#0055ff' },
|
||||
{ id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a' },
|
||||
{ id: 'pommevic', name: 'Pommevic', color: '#dc2626' },
|
||||
]
|
||||
|
||||
const sitesTwo = [
|
||||
{ id: 'nord', name: 'Usine Nord', color: '#7c3aed' },
|
||||
{ id: 'sud', name: 'Usine Sud', color: '#ea580c' },
|
||||
]
|
||||
|
||||
const sitesFive = [
|
||||
{ id: 's1', name: 'Site 1', color: '#0ea5e9' },
|
||||
{ id: 's2', name: 'Site 2', color: '#14b8a6' },
|
||||
{ id: 's3', name: 'Site 3', color: '#f59e0b' },
|
||||
{ id: 's4', name: 'Site 4', color: '#ec4899' },
|
||||
{ id: 's5', name: 'Site 5', color: '#6366f1' },
|
||||
]
|
||||
|
||||
const simpleValue = ref('chatellerault')
|
||||
const twoValue = ref('nord')
|
||||
const fiveValue = ref('s3')
|
||||
const constrainedValue = ref('saint-jean')
|
||||
const lastChange = ref<string>('—')
|
||||
|
||||
function onSiteChange(site: { id: string; name: string; color: string }) {
|
||||
lastChange.value = JSON.stringify(site)
|
||||
}
|
||||
</script>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioTabList v-model="simpleValue" :tabs="tabs">
|
||||
<template #qualimat><p class="p-4">Contenu Qualimat</p></template>
|
||||
<template #adresses><p class="p-4">Contenu Adresses</p></template>
|
||||
<template #contacts><p class="p-4">Contenu Contacts</p></template>
|
||||
<template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
|
||||
<MalioTabList v-model="noIconValue" :tabs="tabsNoIcon">
|
||||
<template #tab1><p class="p-4">Contenu onglet 1</p></template>
|
||||
<template #tab2><p class="p-4">Contenu onglet 2</p></template>
|
||||
<template #tab3><p class="p-4">Contenu onglet 3</p></template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
|
||||
<MalioTabList :tabs="tabs">
|
||||
<template #qualimat><p class="p-4">Contenu Qualimat</p></template>
|
||||
<template #adresses><p class="p-4">Contenu Adresses</p></template>
|
||||
<template #contacts><p class="p-4">Contenu Contacts</p></template>
|
||||
<template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Deux onglets</h2>
|
||||
<MalioTabList v-model="twoTabValue" :tabs="tabsTwo">
|
||||
<template #general><p class="p-4">Informations générales</p></template>
|
||||
<template #details><p class="p-4">Détails avancés</p></template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const tabs = [
|
||||
{ key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },
|
||||
{ key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
|
||||
{ key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
|
||||
{ key: 'comptabilite', label: 'Comptabilité', icon: 'mdi:web' },
|
||||
]
|
||||
|
||||
const tabsNoIcon = [
|
||||
{ key: 'tab1', label: 'Onglet 1' },
|
||||
{ key: 'tab2', label: 'Onglet 2' },
|
||||
{ key: 'tab3', label: 'Onglet 3' },
|
||||
]
|
||||
|
||||
const tabsTwo = [
|
||||
{ key: 'general', label: 'Général', icon: 'mdi:information-outline' },
|
||||
{ key: 'details', label: 'Détails', icon: 'mdi:cog-outline' },
|
||||
]
|
||||
|
||||
const simpleValue = ref('qualimat')
|
||||
const noIconValue = ref('tab1')
|
||||
const twoTabValue = ref('general')
|
||||
</script>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioTime v-model="simpleValue" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioTime
|
||||
v-model="labeledValue"
|
||||
label="Heure de depart"
|
||||
name="departure-time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioTime
|
||||
v-model="initialValue"
|
||||
label="Heure d'arrivee"
|
||||
hint="Format HH:MM"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Required</h2>
|
||||
<MalioTime
|
||||
v-model="requiredValue"
|
||||
label="Heure limite"
|
||||
required
|
||||
hint="Champ obligatoire"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioTime
|
||||
v-model="disabledValue"
|
||||
label="Heure verrouillee"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioTime
|
||||
v-model="readonlyValue"
|
||||
label="Heure en lecture seule"
|
||||
readonly
|
||||
hint="Visible mais non modifiable"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioTime
|
||||
v-model="errorValue"
|
||||
label="Heure de fermeture"
|
||||
error="L'heure saisie n'est pas valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioTime
|
||||
v-model="successValue"
|
||||
label="Heure confirmee"
|
||||
success="Horaire enregistre"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioTime from '../../../../app/components/malio/time/Time.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const labeledValue = ref('')
|
||||
const initialValue = ref('08:30')
|
||||
const requiredValue = ref('')
|
||||
const disabledValue = ref('14:15')
|
||||
const readonlyValue = ref('18:45')
|
||||
const errorValue = ref('25:90')
|
||||
const successValue = ref('09:00')
|
||||
</script>
|
||||
@@ -1,189 +1,11 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen">
|
||||
<aside class="w-72 bg-m-bg p-6 text-white">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xl text-black font-semibold"
|
||||
@click="clearSelection"
|
||||
>
|
||||
Liste des composants
|
||||
</button>
|
||||
|
||||
<nav class="mt-6 flex flex-col gap-1">
|
||||
<div
|
||||
v-for="group in groups"
|
||||
:key="group.category"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary/10"
|
||||
@click="toggleCategory(group.category)"
|
||||
>
|
||||
{{ group.category }}
|
||||
<span
|
||||
class="text-xs transition-transform duration-200"
|
||||
:class="openCategories.has(group.category) ? 'rotate-90' : ''"
|
||||
>
|
||||
▶
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="openCategories.has(group.category)"
|
||||
class="ml-3 flex flex-col gap-1 border-l border-gray-300 pl-2"
|
||||
>
|
||||
<button
|
||||
v-for="item in group.items"
|
||||
:key="item.name"
|
||||
type="button"
|
||||
class="rounded px-3 py-1.5 text-left text-sm text-black hover:bg-m-primary hover:text-white"
|
||||
:class="selectedName === item.name ? 'bg-m-primary/50 text-white' : ''"
|
||||
@click="selectItem(item.name)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="flex-1 p-6">
|
||||
<component
|
||||
:is="selectedDemoComponent"
|
||||
v-if="selectedDemoComponent"
|
||||
/>
|
||||
<p
|
||||
v-else-if="selectedName"
|
||||
class="text-gray-700"
|
||||
>
|
||||
Page de demo introuvable:
|
||||
<code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
|
||||
</p>
|
||||
<div v-else>
|
||||
<h1 class="text-2xl font-semibold text-gray-900">
|
||||
Playground composants
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-600">
|
||||
Selectionne un composant dans la liste pour afficher sa page de demo.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<div class="p-6 space-y-4">
|
||||
<MalioInput v-model="v" label="Email" placeholder="you@example.com" />
|
||||
<pre class="text-xs">{{ v }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, reactive, ref, watch, shallowRef} from 'vue'
|
||||
|
||||
type LoadedModule = {
|
||||
default: unknown
|
||||
}
|
||||
|
||||
type Item = {
|
||||
name: string
|
||||
label: string
|
||||
}
|
||||
|
||||
type Group = {
|
||||
category: string
|
||||
items: Item[]
|
||||
}
|
||||
|
||||
const componentModules = import.meta.glob('../../app/components/malio/**/*.vue')
|
||||
const demoModules = import.meta.glob('./composant/**/*.vue')
|
||||
|
||||
const demoByName: Record<string, () => Promise<LoadedModule>> =
|
||||
Object.fromEntries(
|
||||
Object.entries(demoModules).map(([file, loader]) => {
|
||||
const name = file.split('/').pop()?.replace('.vue', '') ?? ''
|
||||
return [name.toLowerCase(), loader as () => Promise<LoadedModule>]
|
||||
}),
|
||||
)
|
||||
|
||||
const groups = computed<Group[]>(() => {
|
||||
const categoryMap = new Map<string, Item[]>()
|
||||
|
||||
Object.keys(componentModules).forEach((file) => {
|
||||
const parts = file.split('/')
|
||||
const name = parts.pop()?.replace('.vue', '') ?? ''
|
||||
const category = parts.pop() ?? ''
|
||||
|
||||
if (!categoryMap.has(category)) {
|
||||
categoryMap.set(category, [])
|
||||
}
|
||||
categoryMap.get(category)!.push({name, label: name})
|
||||
})
|
||||
|
||||
const componentGroups = Array.from(categoryMap.entries())
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([category, items]) => ({
|
||||
category: category.charAt(0).toUpperCase() + category.slice(1),
|
||||
items: items.sort((a, b) => a.label.localeCompare(b.label)),
|
||||
}))
|
||||
|
||||
return [
|
||||
...componentGroups,
|
||||
{
|
||||
category: 'Form',
|
||||
items: [{name: 'client', label: 'Client'}],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const openCategories = reactive(new Set<string>())
|
||||
const selectedName = ref('')
|
||||
const hasInitializedSelection = ref(false)
|
||||
|
||||
watch(
|
||||
groups,
|
||||
(val) => {
|
||||
if (!hasInitializedSelection.value && val.length > 0) {
|
||||
openCategories.add(val[0].category)
|
||||
if (val[0].items.length > 0) {
|
||||
selectedName.value = val[0].items[0].name
|
||||
}
|
||||
hasInitializedSelection.value = true
|
||||
}
|
||||
},
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
function toggleCategory(category: string) {
|
||||
if (openCategories.has(category)) {
|
||||
openCategories.delete(category)
|
||||
} else {
|
||||
openCategories.add(category)
|
||||
}
|
||||
}
|
||||
|
||||
function selectItem(name: string) {
|
||||
selectedName.value = selectedName.value === name ? '' : name
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedName.value = ''
|
||||
}
|
||||
|
||||
const selectedDemoComponent = shallowRef<unknown>(null)
|
||||
|
||||
watch(selectedName, async (name) => {
|
||||
if (!name) {
|
||||
selectedDemoComponent.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const loader = demoByName[name.toLowerCase()]
|
||||
if (!loader) {
|
||||
selectedDemoComponent.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const mod = await loader()
|
||||
selectedDemoComponent.value = mod.default
|
||||
})
|
||||
|
||||
const selectedDemoFileName = computed(() => {
|
||||
const name = selectedName.value
|
||||
if (!name) return ''
|
||||
return name.charAt(0).toLowerCase() + name.slice(1)
|
||||
})
|
||||
const v = ref('')
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,26 +2,8 @@
|
||||
"branches": ["main", "master"],
|
||||
"repositoryUrl": "https://gitea.malio.fr/MALIO-DEV/malio-layer-ui.git",
|
||||
"plugins": [
|
||||
[
|
||||
"@semantic-release/commit-analyzer",
|
||||
{
|
||||
"preset": "angular",
|
||||
"parserOpts": {
|
||||
"headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
|
||||
"headerCorrespondence": ["type", "scope", "subject"]
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
"@semantic-release/release-notes-generator",
|
||||
{
|
||||
"preset": "angular",
|
||||
"parserOpts": {
|
||||
"headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
|
||||
"headerCorrespondence": ["type", "scope", "subject"]
|
||||
}
|
||||
}
|
||||
],
|
||||
"@semantic-release/commit-analyzer",
|
||||
"@semantic-release/release-notes-generator",
|
||||
"@semantic-release/npm"
|
||||
]
|
||||
}
|
||||
|
||||
26
CHANGELOG.md
26
CHANGELOG.md
@@ -6,33 +6,7 @@ Liste des évolutions de la librairie Malio layer UI
|
||||
### Parameters
|
||||
|
||||
### Added
|
||||
* [#333] Création d'un composant text
|
||||
* [#337] Création d'un composant select
|
||||
* [#362] Création d'un composant checkbox
|
||||
* [#363] Création d'un composant amount
|
||||
* [#364] Création d'un composant button radio
|
||||
* [#365] Création d'un composant number
|
||||
* [#366] Création d'un composant select checkbox
|
||||
* [#407] Création d'un composant time
|
||||
* Création d'un composant textarea
|
||||
* [#MUI-8] Création d'un composant mot de passe
|
||||
* [#MUI-9] Création d'un composant upload
|
||||
* [#MUI-14] Création d'un composant bouton icône
|
||||
* [#MUI-11] Création d'un composant navigation par onglets
|
||||
* [#MUI-20] Création d'un composant sidebar
|
||||
* [#MUI-23] Revoir la config couleur tailwind
|
||||
* [#MUI-10] Création d'un composant bouton
|
||||
* [#MUI-2] Faire un MCP pour la librairie de composant
|
||||
* [#MUI-15] Création d'un composant drawer
|
||||
* [#MUI-22] Création d'un composant datatable
|
||||
* [#MUI-27] Création d'un composant sélection de site
|
||||
* Création d'un composant rich text (TipTap) avec sortie markdown / HTML
|
||||
* [#MUI-30] Création d'un composant email
|
||||
* [#MUI-31] Création d'un composant téléphone
|
||||
* [#MUI-32] Création d'un composant saisie assistée (autocomplete)
|
||||
|
||||
### Changed
|
||||
|
||||
### Fixed
|
||||
* Hauteur des boutons de pagination du datatable alignée sur le select (40px)
|
||||
* Distribution de `tailwind.config.ts` aux projets consommateurs avec paths `content` absolus
|
||||
|
||||
64
CLAUDE.md
64
CLAUDE.md
@@ -1,64 +0,0 @@
|
||||
# CLAUDE.md — @malio/layer-ui
|
||||
|
||||
## Projet
|
||||
|
||||
Bibliothèque de composants UI sous forme de **Nuxt 4 Layer**. Le package `@malio/layer-ui` est consommé par les autres applications Malio via `extends` dans leur `nuxt.config.ts`.
|
||||
|
||||
## Commandes
|
||||
|
||||
```bash
|
||||
npm run dev # Lance le playground (.playground/)
|
||||
npm run dev:prepare # Génère les types Nuxt (à lancer après un clone)
|
||||
npm run test # Vitest (run mode)
|
||||
npm run lint # ESLint
|
||||
npm run story:dev # Histoire (documentation composants)
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
app/
|
||||
components/malio/ # Composants (auto-importés comme <MalioXxx>)
|
||||
story/ # Fichiers .story.vue (Histoire)
|
||||
assets/css/malio.css # Design tokens (CSS custom properties)
|
||||
.playground/ # App Nuxt pour tester les composants en dev
|
||||
```
|
||||
|
||||
## Conventions composants
|
||||
|
||||
- **Nommage fichier** : PascalCase (`InputText.vue`). Le préfixe `Malio` est ajouté automatiquement par le dossier `malio/`.
|
||||
- **`defineOptions({ name: 'MalioXxx', inheritAttrs: false })`** en tête de chaque composant.
|
||||
- **Props communes** : `id`, `label`, `modelValue`, `inputClass`, `labelClass`, `groupClass`, `disabled`, `readonly`, `hint`, `error`, `success`.
|
||||
- **Pattern contrôlé/non-contrôlé** : `isControlled = computed(() => props.modelValue !== undefined)` avec `localValue` en fallback.
|
||||
- **Classes CSS** : fusionnées avec `twMerge()` pour permettre l'override par le consommateur via les props `*Class`.
|
||||
- **Accessibilité** : `aria-invalid`, `aria-describedby`, labels liés par `for/id`.
|
||||
- **Icônes** : via `@iconify/vue` (Icon component), pas `@nuxt/icon` dans les composants.
|
||||
|
||||
## Stack technique
|
||||
|
||||
- **Nuxt 4** (layer), **Vue 3** Composition API (`<script setup lang="ts">`)
|
||||
- **TypeScript** strict (`defineProps<T>()` + `withDefaults`)
|
||||
- **Tailwind CSS** avec palette custom `m-*` (primary, secondary, error, etc.) basée sur des CSS variables RGB
|
||||
- **tailwind-merge** pour la fusion intelligente des classes
|
||||
- **maska** pour le masquage d'input (InputText)
|
||||
- **Vitest** + `@vue/test-utils` pour les tests unitaires (pattern `*.test.ts` colocalisé)
|
||||
- **Histoire** pour la documentation visuelle des composants
|
||||
|
||||
## Design tokens
|
||||
|
||||
Définis dans `app/assets/css/malio.css` comme CSS custom properties RGB :
|
||||
- `--m-primary`, `--m-secondary`, `--m-tertiary`, `--m-border`, `--m-text`, `--m-muted`, `--m-bg`, `--m-error`, `--m-success`, `--m-radius`
|
||||
- Utilisés via Tailwind : `text-m-primary`, `border-m-error`, `bg-m-bg`, `rounded-malio`, etc.
|
||||
|
||||
## Tests
|
||||
|
||||
- Fichiers colocalisés : `ComponentName.test.ts` à côté du `.vue`
|
||||
- Pattern : `mountComponent(props)` helper, tests de rendu, props, emits, états, accessibilité
|
||||
- Environnement : jsdom
|
||||
|
||||
## Git & CI
|
||||
|
||||
- **Conventional Commits** obligatoires (hooks pre-commit + commit-msg)
|
||||
- Branches : `develop` → `main`
|
||||
- **semantic-release** sur push main (Gitea Actions)
|
||||
- Registry privé Gitea (`@malio` scope)
|
||||
666
COMPONENTS.md
666
COMPONENTS.md
@@ -1,666 +0,0 @@
|
||||
# @malio/layer-ui — Composants
|
||||
|
||||
Tous les composants sont auto-importés avec le préfixe `Malio`. Utiliser `v-model` pour le binding bidirectionnel sur les composants de formulaire.
|
||||
|
||||
---
|
||||
|
||||
## MalioInputText
|
||||
|
||||
Champ texte avec label, icône optionnelle et support de masque de saisie.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `label` | `string` | `''` | Label du champ |
|
||||
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
|
||||
| `disabled` | `boolean` | `false` | Désactive le champ |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `required` | `boolean` | `false` | Champ requis |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `iconName` | `string` | `''` | Icône Iconify (ex: `mdi:magnify`) |
|
||||
| `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône |
|
||||
| `iconSize` | `string \| number` | `24` | Taille icône |
|
||||
| `iconColor` | `string` | `'text-m-muted'` | Classe couleur icône |
|
||||
| `mask` | `string \| MaskInputOptions` | — | Masque de saisie (maska) |
|
||||
| `maxLength` | `number \| string` | — | Longueur max |
|
||||
| `minLength` | `number \| string` | — | Longueur min |
|
||||
| `inputClass` | `string` | `''` | Classes CSS input |
|
||||
| `labelClass` | `string` | `''` | Classes CSS label |
|
||||
| `groupClass` | `string` | `''` | Classes CSS conteneur |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioInputText v-model="nom" label="Nom" />
|
||||
<MalioInputText v-model="search" label="Recherche" icon-name="mdi:magnify" />
|
||||
<MalioInputText v-model="tel" label="Téléphone" mask="## ## ## ## ##" />
|
||||
<MalioInputText v-model="email" label="Email" error="Email invalide" />
|
||||
<MalioInputText v-model="info" label="Info" disabled hint="Champ désactivé" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputPassword
|
||||
|
||||
Champ mot de passe avec toggle visibilité.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `displayIcon` | `boolean` | `true` | Afficher l'icône toggle |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioInputPassword v-model="password" label="Mot de passe" />
|
||||
<MalioInputPassword v-model="password" label="Sans icône" :display-icon="false" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputEmail
|
||||
|
||||
Champ email (`type="email"` + `inputmode="email"`) avec icône `mdi:email-outline` à droite par défaut.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `label` | `string` | `''` | Label du champ |
|
||||
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'email'` pour suggérer l'email utilisateur) |
|
||||
| `disabled` | `boolean` | `false` | Désactive le champ |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `required` | `boolean` | `false` | Champ requis |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `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 |
|
||||
| `iconColor` | `string` | `'text-m-muted'` | Classe couleur icône |
|
||||
| `inputClass` | `string` | `''` | Classes CSS input |
|
||||
| `labelClass` | `string` | `''` | Classes CSS label |
|
||||
| `groupClass` | `string` | `''` | Classes CSS conteneur |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioInputEmail v-model="email" label="Adresse email" />
|
||||
<MalioInputEmail v-model="email" label="Email" autocomplete="email" />
|
||||
<MalioInputEmail v-model="email" label="Email" :icon-name="''" />
|
||||
<MalioInputEmail v-model="email" label="Email" error="Adresse email invalide" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputPhone
|
||||
|
||||
Champ téléphone (`type="tel"` + `inputmode="tel"`) avec icône `mdi:phone-outline` à gauche par défaut et bouton `+` optionnel à droite pour gérer une liste de numéros côté parent.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `label` | `string` | `''` | Label du champ |
|
||||
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `autocomplete` | `string` | `'off'` | Autocomplétion (passer `'tel'` pour suggérer un numéro enregistré) |
|
||||
| `disabled` | `boolean` | `false` | Désactive le champ et le bouton + |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule (désactive aussi le bouton +) |
|
||||
| `required` | `boolean` | `false` | Champ requis |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `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 |
|
||||
| `iconColor` | `string` | `'text-m-muted'` | Classe couleur icône |
|
||||
| `mask` | `string \| MaskInputOptions` | `undefined` | Masque maska (aucun par défaut, utile pour mono-pays) |
|
||||
| `addable` | `boolean` | `false` | Affiche un bouton à droite qui émet l'event `add` |
|
||||
| `addIconName` | `string` | `'mdi:plus'` | Icône Iconify du bouton d'ajout |
|
||||
| `addButtonLabel` | `string` | `'Ajouter un numéro'` | aria-label du bouton d'ajout |
|
||||
| `inputClass` | `string` | `''` | Classes CSS input |
|
||||
| `labelClass` | `string` | `''` | Classes CSS label |
|
||||
| `groupClass` | `string` | `''` | Classes CSS conteneur |
|
||||
|
||||
**Events :**
|
||||
- `update:modelValue(value: string)`
|
||||
- `add()` — émis au clic du bouton `+` (uniquement si `addable`, non `disabled`, non `readonly`)
|
||||
|
||||
```vue
|
||||
<MalioInputPhone v-model="phone" label="Téléphone" />
|
||||
<MalioInputPhone v-model="phone" label="Téléphone (FR)" mask="+33 # ## ## ## ##" />
|
||||
<MalioInputPhone v-model="phone" label="Téléphone" addable @add="addPhoneField" />
|
||||
<MalioInputPhone v-model="phone" label="Téléphone" error="Numéro invalide" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputAutocomplete
|
||||
|
||||
Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtrer une liste d'options, ou pour déclencher une recherche côté parent (API). Le parent alimente `options` et `loading` en réponse à l'event `search` — c'est lui qui gère l'appel API, l'auth, la transformation et le cache.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `modelValue` | `string \| number \| null` | `undefined` | Valeur sélectionnée (v-model) |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `options` | `{label: string; value: string\|number}[]` | `[]` | Liste affichée dans le dropdown |
|
||||
| `loading` | `boolean` | `false` | Affiche un spinner + un message de chargement |
|
||||
| `debounce` | `number` | `300` | Délai (ms) avant émission de `search` |
|
||||
| `minSearchLength` | `number` | `0` | Caractères mini avant d'émettre `search` |
|
||||
| `allowCreate` | `boolean` | `false` | Autorise la saisie libre validée par Entrée (émet `create`) |
|
||||
| `iconName` | `string` | `''` | Icône Iconify décorative |
|
||||
| `iconPosition` | `'left' \| 'right'` | `'left'` | Position de l'icône décorative |
|
||||
| `iconSize` | `string \| number` | `24` | Taille de l'icône |
|
||||
| `iconColor` | `string` | `'text-m-muted'` | Classe couleur de l'icône |
|
||||
| `noResultsText` | `string` | `'Aucun résultat'` | Texte affiché quand `options` est vide |
|
||||
| `loadingText` | `string` | `'Chargement…'` | Texte affiché pendant le chargement |
|
||||
| `minSearchText` | `string` | `'Tapez pour rechercher'` | Texte affiché tant que `minSearchLength` n'est pas atteint |
|
||||
| `disabled` | `boolean` | `false` | Désactive le champ et empêche l'ouverture |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule (n'ouvre pas le dropdown) |
|
||||
| `required` | `boolean` | `false` | Champ requis |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur (prioritaire) |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `inputClass` | `string` | `''` | Classes CSS input |
|
||||
| `labelClass` | `string` | `''` | Classes CSS label |
|
||||
| `groupClass` | `string` | `''` | Classes CSS conteneur |
|
||||
|
||||
**Events :**
|
||||
- `update:modelValue(value: string \| number \| null)` — valeur sélectionnée (v-model)
|
||||
- `search(query: string)` — émis (après debounce + minSearchLength) avec le texte tapé ; le parent l'écoute pour lancer son fetch API
|
||||
- `select(option: Option \| null)` — émis avec l'objet `Option` complet (utile pour récupérer aussi le `label`)
|
||||
- `create(value: string)` — émis quand `allowCreate=true` et que l'utilisateur valide une valeur libre
|
||||
|
||||
**Clavier :** `↓` / `↑` navigation, `Entrée` sélection (ou création), `Échap` ferme le dropdown.
|
||||
|
||||
```vue
|
||||
<!-- Usage statique -->
|
||||
<MalioInputAutocomplete v-model="country" label="Pays" :options="countries" />
|
||||
|
||||
<!-- Usage API (parent gère le fetch) -->
|
||||
<MalioInputAutocomplete
|
||||
v-model="clientId"
|
||||
label="Client"
|
||||
:options="clientOptions"
|
||||
:loading="isFetching"
|
||||
:min-search-length="2"
|
||||
@search="onSearchClients"
|
||||
@select="onSelectClient"
|
||||
/>
|
||||
|
||||
<!-- Avec création libre -->
|
||||
<MalioInputAutocomplete
|
||||
v-model="category"
|
||||
label="Catégorie"
|
||||
:options="categories"
|
||||
allow-create
|
||||
@create="onCreateCategory"
|
||||
/>
|
||||
```
|
||||
|
||||
```ts
|
||||
async function onSearchClients(query: string) {
|
||||
isFetching.value = true
|
||||
const res = await $fetch('/api/clients', {params: {q: query}})
|
||||
clientOptions.value = res.map(c => ({label: c.name, value: c.id}))
|
||||
isFetching.value = false
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputAmount
|
||||
|
||||
Champ montant avec icône devise (euro par défaut).
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `iconName` | `string` | `'mdi:currency-eur'` | Icône devise |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioInputAmount v-model="montant" label="Montant TTC" />
|
||||
<MalioInputAmount v-model="prix" label="Prix" error="Montant invalide" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputNumber
|
||||
|
||||
Champ numérique avec boutons +/-.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `min` | `number \| string` | — | Valeur minimum |
|
||||
| `max` | `number \| string` | — | Valeur maximum |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioInputNumber v-model="quantite" label="Quantité" min="0" max="100" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputTextArea
|
||||
|
||||
Zone de texte multiligne avec compteur et redimensionnement.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Valeur (v-model) |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `size` | `number \| string` | `2` | Nombre de lignes |
|
||||
| `resize` | `'none' \| 'both' \| 'horizontal' \| 'vertical'` | `'both'` | Mode redimensionnement |
|
||||
| `maxLength` | `number` | `800` | Longueur max |
|
||||
| `showCounter` | `boolean` | `false` | Afficher le compteur |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `groupClass` | `string` | `''` | Classes CSS sur la div conteneur (utile pour `row-span-*`, `col-span-*`, etc.) |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioInputTextArea v-model="commentaire" label="Commentaire" :show-counter="true" />
|
||||
<MalioInputTextArea v-model="note" label="Note" resize="vertical" :size="4" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputRichText
|
||||
|
||||
Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown** + **TextStyle/Color/Highlight**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, **couleur du texte**, **surlignage**, undo/redo. Sortie en HTML (par défaut) ou markdown.
|
||||
|
||||
> Couleurs et surlignages ne sont **pas persistés en markdown**. Pour les conserver au save/reload, utiliser `output-format="html"`.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `label` | `string` | `''` | Label affiché au-dessus de l'éditeur |
|
||||
| `modelValue` | `string \| null` | `undefined` | Contenu (v-model) |
|
||||
| `placeholder` | `string` | `''` | Texte affiché quand vide |
|
||||
| `minHeight` | `string` | `'160px'` | Hauteur min de la zone d'édition |
|
||||
| `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) |
|
||||
| `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `outputFormat` | `'markdown' \| 'html'` | `'html'` | Format émis dans `update:modelValue` |
|
||||
| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
|
||||
| `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
|
||||
| `editorClass` | `string` | `''` | Classes CSS wrapper éditeur (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioInputRichText v-model="note" label="Note" placeholder="Écrire ici…" />
|
||||
<MalioInputRichText v-model="cr" label="Compte-rendu" error="Trop court" />
|
||||
<MalioInputRichText v-model="article" label="Article" min-height="240px" />
|
||||
<MalioInputRichText :model-value="content" :editable="false" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioInputUpload
|
||||
|
||||
Champ d'upload de fichier.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Nom du fichier (v-model) |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `accept` | `string` | `''` | Types de fichiers acceptés |
|
||||
| `displayIcon` | `boolean` | `true` | Afficher l'icône |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`, `file-selected(file: File)`
|
||||
|
||||
```vue
|
||||
<MalioInputUpload v-model="fileName" label="Document" accept=".pdf,.doc" @file-selected="onFile" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSelect
|
||||
|
||||
Liste déroulante.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| number \| null` | **requis** | Valeur sélectionnée (v-model) |
|
||||
| `options` | `{ value: string \| number, text: string }[]` | `[]` | Options disponibles |
|
||||
| `emptyOptionLabel` | `string` | `''` | Placeholder option vide |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `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) |
|
||||
| `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 |
|
||||
| `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
|
||||
|
||||
**Events :** `update:modelValue(value: string | number | null)`
|
||||
**Slots :** `icon` (icône dropdown custom)
|
||||
|
||||
```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" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSelectCheckbox
|
||||
|
||||
Liste déroulante multi-sélection avec checkboxes.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `(string \| number)[]` | **requis** | 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é |
|
||||
| `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
|
||||
|
||||
**Events :** `update:modelValue(value: (string | number)[])`
|
||||
|
||||
```vue
|
||||
<MalioSelectCheckbox v-model="competences" label="Compétences" :options="skills" :display-tag="true" />
|
||||
<MalioSelectCheckbox v-model="sites" label="Sites" :options="sitesList" :display-select-all="true" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioCheckbox
|
||||
|
||||
Case à cocher.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `boolean \| null` | `undefined` | Valeur (v-model) |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`
|
||||
|
||||
```vue
|
||||
<MalioCheckbox v-model="accepte" label="J'accepte les conditions" />
|
||||
<MalioCheckbox v-model="newsletter" label="Newsletter" disabled />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioRadioButton
|
||||
|
||||
Bouton radio (à utiliser en groupe avec le même `name`).
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| number \| boolean \| null` | `undefined` | Valeur du groupe (v-model) |
|
||||
| `value` | `string \| number \| boolean \| null` | `undefined` | Valeur de cette option |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `name` | `string` | `''` | Nom du groupe radio |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
|
||||
**Events :** `update:modelValue(value: string | number | boolean | null)`
|
||||
|
||||
```vue
|
||||
<MalioRadioButton v-model="civilite" name="civilite" value="M" label="Monsieur" />
|
||||
<MalioRadioButton v-model="civilite" name="civilite" value="Mme" label="Madame" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioTime
|
||||
|
||||
Sélecteur d'heure.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Heure au format HH:mm (v-model) |
|
||||
| `label` | `string` | `''` | Label |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
|
||||
```vue
|
||||
<MalioTime v-model="heure" label="Heure de début" />
|
||||
<MalioTime v-model="fin" label="Heure de fin" readonly />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioButton
|
||||
|
||||
Bouton d'action avec 4 variantes visuelles et icône optionnelle.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `label` | `string` | `''` | Texte du bouton (ou slot par défaut) |
|
||||
| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `buttonClass` | `string` | `''` | Classes CSS additionnelles (twMerge) |
|
||||
| `iconName` | `string` | `''` | Icône Iconify |
|
||||
| `iconPosition` | `'left' \| 'right'` | `'right'` | Position icône |
|
||||
| `iconSize` | `string \| number` | `16` | Taille icône |
|
||||
|
||||
**Events :** `click(e: MouseEvent)`
|
||||
**Slots :** `default` (contenu du bouton, remplace `label`)
|
||||
|
||||
```vue
|
||||
<MalioButton label="Valider" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
|
||||
<MalioButton label="Voir plus" variant="tertiary" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash" icon-position="left" />
|
||||
<MalioButton label="Pleine largeur" button-class="w-full" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioButtonIcon
|
||||
|
||||
Bouton icône seul (sans texte).
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `icon` | `string` | **requis** | Icône Iconify |
|
||||
| `ariaLabel` | `string` | **requis** | Label accessible |
|
||||
| `variant` | `'filled' \| 'ghost'` | `'filled'` | Variante visuelle |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `buttonClass` | `string` | `''` | Classes CSS additionnelles |
|
||||
| `iconSize` | `string \| number` | `24` | Taille icône |
|
||||
|
||||
**Events :** `click(e: MouseEvent)`
|
||||
|
||||
```vue
|
||||
<MalioButtonIcon icon="mdi:pencil" aria-label="Modifier" />
|
||||
<MalioButtonIcon icon="mdi:trash" aria-label="Supprimer" variant="ghost" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioTabList
|
||||
|
||||
Navigation par onglets avec contenu dynamique.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string` | `undefined` | Onglet actif (v-model) |
|
||||
| `tabs` | `Tab[]` | **requis** | Liste des onglets (voir type ci-dessous) |
|
||||
|
||||
Type `Tab` :
|
||||
|
||||
| Propriété | Type | Défaut | Description |
|
||||
|-----------|------|--------|-------------|
|
||||
| `key` | `string` | — | Identifiant unique (utilisé pour le slot et le v-model) |
|
||||
| `label` | `string` | — | Texte de l'onglet |
|
||||
| `icon` | `string` | — | Nom Iconify (optionnel) |
|
||||
| `iconSize` | `string` | `24` | Taille de l'icône |
|
||||
| `disabled` | `boolean` | `false` | Onglet désactivé : grisé et non cliquable. Le parent calcule cet état selon sa logique de validation |
|
||||
|
||||
**Events :** `update:modelValue(value: string)` — émis uniquement quand l'onglet cible n'est pas `disabled`
|
||||
**Slots :** Un slot nommé par `tab.key` pour le contenu de chaque onglet
|
||||
|
||||
```vue
|
||||
<MalioTabList v-model="activeTab" :tabs="tabs">
|
||||
<template #infos>Contenu infos</template>
|
||||
<template #docs>Contenu docs</template>
|
||||
</MalioTabList>
|
||||
```
|
||||
|
||||
**Pattern de gating progressif** (déverrouille les onglets quand les précédents sont valides) :
|
||||
|
||||
```ts
|
||||
const informationValid = computed(() => name.value && email.value)
|
||||
const adressesValid = computed(() => /^\d{5}$/.test(codePostal.value))
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ key: 'information', label: 'Information' },
|
||||
{ key: 'contacts', label: 'Contacts', disabled: !informationValid.value },
|
||||
{ key: 'adresses', label: 'Adresses', disabled: !informationValid.value },
|
||||
{ key: 'transport', label: 'Transport', disabled: !informationValid.value || !adressesValid.value },
|
||||
])
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSidebar
|
||||
|
||||
Barre latérale de navigation rétractable.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `sections` | `SidebarSection[]` | **requis** | Sections de navigation |
|
||||
| `sidebarClass` | `string` | `''` | Classes CSS sidebar |
|
||||
| `toggleClass` | `string` | `''` | Classes CSS bouton toggle |
|
||||
|
||||
**Type SidebarSection :** `{ title?: string, items: { label: string, icon?: string, to?: string, href?: string, active?: boolean }[] }`
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`
|
||||
**Slots :** `logo` (sidebar ouverte), `logo-collapsed` (sidebar fermée)
|
||||
|
||||
```vue
|
||||
<MalioSidebar v-model="isOpen" :sections="menuSections">
|
||||
<template #logo><img src="/logo.png" /></template>
|
||||
<template #logo-collapsed><img src="/logo-small.png" /></template>
|
||||
</MalioSidebar>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDrawer
|
||||
|
||||
Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `title` | `string` | `''` | Titre affiché dans le header |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `drawerClass` | `string` | `''` | Classes CSS panneau (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`
|
||||
**Slots :** `default` (contenu du drawer)
|
||||
|
||||
```vue
|
||||
<MalioDrawer v-model="isOpen" title="Détails">
|
||||
<p>Contenu du drawer</p>
|
||||
</MalioDrawer>
|
||||
<MalioDrawer v-model="isOpen" title="Sans croix" :show-close="false">
|
||||
<p>Fermeture uniquement via backdrop</p>
|
||||
</MalioDrawer>
|
||||
<MalioDrawer v-model="isOpen" title="Large" drawer-class="max-w-2xl">
|
||||
<p>Drawer plus large</p>
|
||||
</MalioDrawer>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDataTable
|
||||
|
||||
Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `columns` | `{ key: string, label: string }[]` | **requis** | Définition des colonnes |
|
||||
| `items` | `Record<string, unknown>[]` | **requis** | Données à afficher |
|
||||
| `totalItems` | `number` | **requis** | Total pour la pagination |
|
||||
| `page` | `number` | `1` | Page courante (v-model) |
|
||||
| `perPage` | `number` | `10` | Lignes par page (v-model) |
|
||||
| `perPageOptions` | `number[]` | `[10, 25, 50]` | Options du sélecteur de lignes |
|
||||
| `rowClickable` | `boolean` | `true` | Lignes cliquables (cursor pointer + hover) |
|
||||
| `tableClass` | `string` | `''` | Classes CSS sur `<table>` (twMerge) |
|
||||
| `emptyMessage` | `string` | `'Aucune donnée'` | Message si items vide |
|
||||
|
||||
**Events :** `update:page(value: number)`, `update:per-page(value: number)`, `row-click(item: Record<string, unknown>)`
|
||||
**Slots :** `#header-{key}` (filtre dans le `<th>`, placeholder = label), `#cell-{key}` (contenu du `<td>`), `#empty` (état vide)
|
||||
|
||||
```vue
|
||||
<!-- Avec filtres et pagination -->
|
||||
<MalioDataTable
|
||||
:columns="[{ key: 'nom', label: 'Nom' }, { key: 'ville', label: 'Ville' }]"
|
||||
:items="data"
|
||||
:total-items="total"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="router.push(`/contact/${$event.id}`)"
|
||||
>
|
||||
<template #header-nom>
|
||||
<input v-model="filtreNom" placeholder="Nom" class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none">
|
||||
</template>
|
||||
<template #header-ville>
|
||||
<select v-model="filtreVille" class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none">
|
||||
<option value="">Ville</option>
|
||||
<option v-for="v in villes" :key="v" :value="v">{{ v }}</option>
|
||||
</select>
|
||||
</template>
|
||||
<template #cell-nom="{ item }">
|
||||
<strong>{{ item.nom }}</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
|
||||
<!-- Simple sans filtres -->
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="data"
|
||||
:total-items="total"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
/>
|
||||
```
|
||||
@@ -1,40 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* ── Globales ── */
|
||||
--m-primary: 34 39 131; /* #222783 - Bleu Malio */
|
||||
--m-bg: 243 244 248; /* #F3F4F8 - Fond de page */
|
||||
--m-surface: 243 244 248; /* #F3F4F8 - Fond hover/cartes */
|
||||
--m-text: 15 23 42; /* #0F172A */
|
||||
--m-muted: 100 116 139; /* #64748B */
|
||||
--m-border: 203 213 225; /* #CBD5E1 */
|
||||
--m-disabled: 204 204 223; /* #CCCCDF - Partagé entre toutes les familles bouton */
|
||||
--m-danger: 242 105 107; /* #F2696B - Erreurs et boutons danger */
|
||||
--m-success: 15 149 70; /* #0F9546 */
|
||||
|
||||
/* ── Boutons Primary ── */
|
||||
--m-btn-primary: 34 39 131; /* #222783 */
|
||||
--m-btn-primary-hover: 18 28 219; /* #121CDB */
|
||||
--m-btn-primary-active: 33 37 103; /* #212567 */
|
||||
|
||||
/* ── Boutons Secondary ── */
|
||||
--m-btn-secondary: 75 77 237; /* #4B4DED */
|
||||
--m-btn-secondary-hover: 137 123 241; /* #897BF1 */
|
||||
--m-btn-secondary-active: 18 28 219; /* #121CDB */
|
||||
|
||||
/* ── Boutons Danger ── */
|
||||
--m-btn-danger: 242 105 107; /* #F2696B */
|
||||
--m-btn-danger-hover: 234 151 151; /* #EA9797 */
|
||||
--m-btn-danger-active: 255 83 86; /* #FF5356 */
|
||||
|
||||
/* ── Couleurs de site (usage ponctuel) ── */
|
||||
--m-site-blue: 5 108 242; /* #056CF2 - Bleu Châtellerault */
|
||||
--m-site-yellow: 243 203 0; /* #F3CB00 - Jaune Saint-Jean */
|
||||
--m-site-green: 116 191 4; /* #74BF04 - Vert Pommevic */
|
||||
|
||||
--m-radius: 6px;
|
||||
}
|
||||
}
|
||||
23
app/components/malio/Input.test.ts
Normal file
23
app/components/malio/Input.test.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Input from './Input.vue'
|
||||
|
||||
describe('MalioInput', () => {
|
||||
it('affiche la valeur initiale', () => {
|
||||
const wrapper = mount(Input, {
|
||||
props: { modelValue: 'hello' },
|
||||
})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('hello')
|
||||
})
|
||||
|
||||
it('emet update:modelValue au changement', async () => {
|
||||
const wrapper = mount(Input, {
|
||||
props: { modelValue: '' },
|
||||
})
|
||||
|
||||
await wrapper.get('input').setValue('new value')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
|
||||
})
|
||||
})
|
||||
38
app/components/malio/Input.vue
Normal file
38
app/components/malio/Input.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="space-y-1">
|
||||
<label v-if="label" :for="id" class="text-sm font-medium text-gray-700">{{ label }}</label>
|
||||
<input
|
||||
:id="id"
|
||||
:value="props.modelValue"
|
||||
:type="props.type"
|
||||
:placeholder="props.placeholder"
|
||||
class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue?: string
|
||||
type?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
id?: string
|
||||
}>(), {
|
||||
modelValue: '',
|
||||
type: 'text',
|
||||
label: '',
|
||||
placeholder: '',
|
||||
id: undefined,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
function onInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
</script>
|
||||
@@ -1,218 +0,0 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import Button from './Button.vue'
|
||||
|
||||
type ButtonProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
buttonClass?: string
|
||||
variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
}
|
||||
|
||||
const ButtonForTest = Button as DefineComponent<ButtonProps>
|
||||
|
||||
const mountComponent = (props: ButtonProps = {}, slots?: Record<string, string>) =>
|
||||
mount(ButtonForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioButton', () => {
|
||||
it('renders a button with label', () => {
|
||||
const wrapper = mountComponent({ label: 'Valider' })
|
||||
|
||||
expect(wrapper.find('button').exists()).toBe(true)
|
||||
expect(wrapper.text()).toContain('Valider')
|
||||
})
|
||||
|
||||
it('renders slot content over label prop', () => {
|
||||
const wrapper = mountComponent({ label: 'Prop' }, { default: 'Slot content' })
|
||||
|
||||
expect(wrapper.text()).toContain('Slot content')
|
||||
expect(wrapper.text()).not.toContain('Prop')
|
||||
})
|
||||
|
||||
it('uses provided id on button', () => {
|
||||
const wrapper = mountComponent({ id: 'custom-id' })
|
||||
|
||||
expect(wrapper.get('button').attributes('id')).toBe('custom-id')
|
||||
})
|
||||
|
||||
it('generates an id when missing', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const buttonId = wrapper.get('button').attributes('id')
|
||||
expect(buttonId?.startsWith('malio-button-')).toBe(true)
|
||||
})
|
||||
|
||||
it('sets type="button" on the button', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').attributes('type')).toBe('button')
|
||||
})
|
||||
|
||||
it('emits click event when clicked', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('click')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not emit click when disabled', async () => {
|
||||
const wrapper = mountComponent({ disabled: true })
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('click')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets disabled attribute when disabled', () => {
|
||||
const wrapper = mountComponent({ disabled: true })
|
||||
|
||||
expect(wrapper.get('button').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
// --- Variant: Primary (default) ---
|
||||
|
||||
it('applies primary variant by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
|
||||
expect(wrapper.get('button').classes()).toContain('text-white')
|
||||
expect(wrapper.get('button').classes()).toContain('cursor-pointer')
|
||||
})
|
||||
|
||||
it('applies primary disabled styles', () => {
|
||||
const wrapper = mountComponent({ disabled: true })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
|
||||
expect(wrapper.get('button').classes()).toContain('text-white')
|
||||
expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
// --- Variant: Secondary ---
|
||||
|
||||
it('applies secondary variant', () => {
|
||||
const wrapper = mountComponent({ variant: 'secondary' })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-btn-secondary')
|
||||
expect(wrapper.get('button').classes()).toContain('text-white')
|
||||
})
|
||||
|
||||
it('applies secondary disabled styles', () => {
|
||||
const wrapper = mountComponent({ variant: 'secondary', disabled: true })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
|
||||
expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
// --- Variant: Tertiary ---
|
||||
|
||||
it('applies tertiary variant with border and no background', () => {
|
||||
const wrapper = mountComponent({ variant: 'tertiary' })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('border')
|
||||
expect(wrapper.get('button').classes()).toContain('border-m-btn-primary')
|
||||
expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
|
||||
expect(wrapper.get('button').classes()).toContain('bg-transparent')
|
||||
expect(wrapper.get('button').classes()).not.toContain('text-white')
|
||||
})
|
||||
|
||||
it('applies tertiary disabled styles with border', () => {
|
||||
const wrapper = mountComponent({ variant: 'tertiary', disabled: true })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('border')
|
||||
expect(wrapper.get('button').classes()).toContain('border-m-disabled')
|
||||
expect(wrapper.get('button').classes()).toContain('text-m-disabled')
|
||||
expect(wrapper.get('button').classes()).toContain('bg-transparent')
|
||||
})
|
||||
|
||||
// --- Variant: Danger ---
|
||||
|
||||
it('applies danger variant', () => {
|
||||
const wrapper = mountComponent({ variant: 'danger' })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-btn-danger')
|
||||
expect(wrapper.get('button').classes()).toContain('text-white')
|
||||
})
|
||||
|
||||
it('applies danger disabled styles', () => {
|
||||
const wrapper = mountComponent({ variant: 'danger', disabled: true })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
|
||||
expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
// --- Sizing ---
|
||||
|
||||
it('applies correct dimensions', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('w-[240px]')
|
||||
expect(wrapper.get('button').classes()).toContain('h-[40px]')
|
||||
})
|
||||
|
||||
it('applies font styles', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('text-base')
|
||||
expect(wrapper.get('button').classes()).toContain('font-bold')
|
||||
})
|
||||
|
||||
// --- buttonClass override ---
|
||||
|
||||
it('applies buttonClass', () => {
|
||||
const wrapper = mountComponent({ buttonClass: 'w-full rounded-full' })
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('w-full')
|
||||
expect(wrapper.get('button').classes()).toContain('rounded-full')
|
||||
})
|
||||
|
||||
// --- Icon ---
|
||||
|
||||
it('renders icon on the right by default', () => {
|
||||
const wrapper = mountComponent({ iconName: 'mdi:arrow-right' })
|
||||
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders icon on the left when specified', () => {
|
||||
const wrapper = mountComponent({ iconName: 'mdi:arrow-left', iconPosition: 'left' })
|
||||
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not render icon when iconName is empty', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('passes icon name and size to icon component', () => {
|
||||
const wrapper = mount(ButtonForTest, {
|
||||
props: { iconName: 'mdi:check', iconSize: 18 },
|
||||
})
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:check')
|
||||
expect(iconComponent.props('width')).toBe(18)
|
||||
expect(iconComponent.props('height')).toBe(18)
|
||||
})
|
||||
})
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
:id="buttonId"
|
||||
:class="mergedButtonClass"
|
||||
:disabled="disabled"
|
||||
type="button"
|
||||
v-bind="attrs"
|
||||
@click="onClick"
|
||||
>
|
||||
<IconifyIcon
|
||||
v-if="iconName && iconPosition === 'left'"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon-left"
|
||||
/>
|
||||
|
||||
<span><slot>{{ label }}</slot></span>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName && iconPosition === 'right'"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon-right"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, useAttrs, useId } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
defineOptions({ name: 'MalioButton', inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
buttonClass?: string
|
||||
variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
label: '',
|
||||
disabled: false,
|
||||
buttonClass: '',
|
||||
variant: 'primary',
|
||||
iconName: '',
|
||||
iconPosition: 'right',
|
||||
iconSize: 16,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const buttonId = computed(() => props.id || `malio-button-${generatedId}`)
|
||||
|
||||
const variantClasses = computed(() => {
|
||||
if (props.disabled) {
|
||||
if (props.variant === 'tertiary') {
|
||||
return 'border border-m-disabled text-m-disabled bg-transparent cursor-not-allowed'
|
||||
}
|
||||
return 'bg-m-disabled text-white cursor-not-allowed'
|
||||
}
|
||||
|
||||
switch (props.variant) {
|
||||
case 'secondary':
|
||||
return 'bg-m-btn-secondary hover:bg-m-btn-secondary-hover active:bg-m-btn-secondary-active text-white cursor-pointer'
|
||||
case 'tertiary':
|
||||
return 'border border-m-btn-primary bg-transparent text-m-btn-primary hover:border-m-btn-primary-hover hover:text-m-btn-primary-hover active:border-m-btn-primary-active active:text-m-btn-primary-active cursor-pointer'
|
||||
case 'danger':
|
||||
return 'bg-m-btn-danger hover:bg-m-btn-danger-hover active:bg-m-btn-danger-active text-white cursor-pointer'
|
||||
default:
|
||||
return 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
|
||||
}
|
||||
})
|
||||
|
||||
const mergedButtonClass = computed(() =>
|
||||
twMerge(
|
||||
'inline-flex w-[240px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
|
||||
variantClasses.value,
|
||||
props.buttonClass,
|
||||
),
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'click', e: MouseEvent): void
|
||||
}>()
|
||||
|
||||
function onClick(e: MouseEvent) {
|
||||
if (!props.disabled) {
|
||||
emit('click', e)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,151 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import ButtonIcon from './ButtonIcon.vue'
|
||||
|
||||
type ButtonIconProps = {
|
||||
id?: string
|
||||
icon: string
|
||||
ariaLabel: string
|
||||
disabled?: boolean
|
||||
buttonClass?: string
|
||||
iconSize?: string | number
|
||||
variant?: 'filled' | 'ghost'
|
||||
}
|
||||
|
||||
const ButtonIconForTest = ButtonIcon as DefineComponent<ButtonIconProps>
|
||||
|
||||
const mountComponent = (props: ButtonIconProps = {icon: 'mdi:arrow-left', ariaLabel: 'Retour'}) =>
|
||||
mount(ButtonIconForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioButtonIcon', () => {
|
||||
it('renders a button with the icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('button').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('uses provided id on button', () => {
|
||||
const wrapper = mountComponent({id: 'custom-id', icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
|
||||
|
||||
expect(wrapper.get('button').attributes('id')).toBe('custom-id')
|
||||
})
|
||||
|
||||
it('generates an id when missing', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const buttonId = wrapper.get('button').attributes('id')
|
||||
expect(buttonId?.startsWith('malio-button-icon-')).toBe(true)
|
||||
})
|
||||
|
||||
it('sets aria-label on button', () => {
|
||||
const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour'})
|
||||
|
||||
expect(wrapper.get('button').attributes('aria-label')).toBe('Retour')
|
||||
})
|
||||
|
||||
it('sets type="button" on the button', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').attributes('type')).toBe('button')
|
||||
})
|
||||
|
||||
it('passes icon name to icon component', () => {
|
||||
const wrapper = mount(ButtonIconForTest, {
|
||||
props: {icon: 'mdi:pencil-outline', ariaLabel: 'Modifier'},
|
||||
})
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:pencil-outline')
|
||||
})
|
||||
|
||||
it('passes icon size to icon component', () => {
|
||||
const wrapper = mount(ButtonIconForTest, {
|
||||
props: {icon: 'mdi:arrow-left', ariaLabel: 'Retour', iconSize: 32},
|
||||
})
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('width')).toBe(32)
|
||||
expect(iconComponent.props('height')).toBe(32)
|
||||
})
|
||||
|
||||
it('emits click event when clicked', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('click')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not emit click when disabled', async () => {
|
||||
const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('click')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets disabled attribute when disabled', () => {
|
||||
const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
|
||||
|
||||
expect(wrapper.get('button').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('applies disabled styles when disabled', () => {
|
||||
const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
|
||||
})
|
||||
|
||||
it('applies cursor-pointer when not disabled', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('cursor-pointer')
|
||||
})
|
||||
|
||||
it('applies white text color for icon visibility', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('text-white')
|
||||
})
|
||||
|
||||
it('applies default background color', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
|
||||
})
|
||||
|
||||
it('applies buttonClass', () => {
|
||||
const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', buttonClass: 'rounded-full'})
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('rounded-full')
|
||||
})
|
||||
|
||||
it('applies ghost variant with no background and colored icon', () => {
|
||||
const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost'})
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
|
||||
expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-primary')
|
||||
expect(wrapper.get('button').classes()).not.toContain('text-white')
|
||||
})
|
||||
|
||||
it('applies ghost disabled styles with no background', () => {
|
||||
const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost', disabled: true})
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('text-m-disabled')
|
||||
expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
|
||||
expect(wrapper.get('button').classes()).not.toContain('bg-m-disabled')
|
||||
})
|
||||
})
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
:id="buttonId"
|
||||
:class="mergedButtonClass"
|
||||
:disabled="disabled"
|
||||
:aria-label="ariaLabel"
|
||||
type="button"
|
||||
v-bind="attrs"
|
||||
@click="onClick"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="icon"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, useAttrs, useId} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioButtonIcon', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
icon: string
|
||||
ariaLabel: string
|
||||
disabled?: boolean
|
||||
buttonClass?: string
|
||||
iconSize?: string | number
|
||||
variant?: 'filled' | 'ghost'
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
disabled: false,
|
||||
buttonClass: '',
|
||||
iconSize: 24,
|
||||
variant: 'filled',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const buttonId = computed(() => props.id || `malio-button-icon-${generatedId}`)
|
||||
|
||||
const isFilled = computed(() => props.variant === 'filled')
|
||||
|
||||
const mergedButtonClass = computed(() =>
|
||||
twMerge(
|
||||
'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
|
||||
isFilled.value
|
||||
? props.disabled
|
||||
? 'bg-m-disabled text-white cursor-not-allowed'
|
||||
: 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
|
||||
: props.disabled
|
||||
? 'text-m-disabled cursor-not-allowed'
|
||||
: 'text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active cursor-pointer',
|
||||
props.buttonClass,
|
||||
),
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'click', e: MouseEvent): void
|
||||
}>()
|
||||
|
||||
function onClick(e: MouseEvent) {
|
||||
if (!props.disabled) {
|
||||
emit('click', e)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,164 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Checkbox from './Checkbox.vue'
|
||||
|
||||
type CheckboxProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: boolean | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}
|
||||
|
||||
const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
|
||||
|
||||
const mountCheckbox = (props: CheckboxProps = {}) =>
|
||||
mount(CheckboxForTest, {props})
|
||||
|
||||
describe('MalioCheckbox', () => {
|
||||
it('renders a checkbox input', () => {
|
||||
const wrapper = mountCheckbox()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('checkbox')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms'})
|
||||
|
||||
expect(wrapper.get('label').text()).toContain('Accept terms')
|
||||
})
|
||||
|
||||
it('uses a provided id on input and label', () => {
|
||||
const wrapper = mountCheckbox({
|
||||
id: 'checkbox-id',
|
||||
label: 'Accept terms',
|
||||
})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('checkbox-id')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('checkbox-id')
|
||||
})
|
||||
|
||||
it('generates an id when none is provided', () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms'})
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-checkbox-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('applies the name attribute', () => {
|
||||
const wrapper = mountCheckbox({name: 'terms'})
|
||||
|
||||
expect(wrapper.get('input').attributes('name')).toBe('terms')
|
||||
})
|
||||
|
||||
it('reflects the checked state from modelValue', () => {
|
||||
const wrapper = mountCheckbox({modelValue: true})
|
||||
|
||||
expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
|
||||
})
|
||||
|
||||
it('emits update:modelValue when toggled', async () => {
|
||||
const wrapper = mountCheckbox({modelValue: false})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue(true)
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
|
||||
})
|
||||
|
||||
it('does not emit when readonly', async () => {
|
||||
const wrapper = mountCheckbox({
|
||||
modelValue: true,
|
||||
readonly: true,
|
||||
})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue(false)
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
expect((input.element as HTMLInputElement).checked).toBe(true)
|
||||
})
|
||||
|
||||
it('sets disabled and required attributes', () => {
|
||||
const wrapper = mountCheckbox({
|
||||
disabled: true,
|
||||
required: true,
|
||||
})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').attributes('required')).toBeDefined()
|
||||
})
|
||||
|
||||
it('shows a hint message and links it with aria-describedby', () => {
|
||||
const wrapper = mountCheckbox({hint: 'Required field'})
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(wrapper.get('p').text()).toBe('Required field')
|
||||
expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
|
||||
})
|
||||
|
||||
it('shows an error state and message', () => {
|
||||
const wrapper = mountCheckbox({
|
||||
label: 'Accept terms',
|
||||
error: 'You must accept',
|
||||
})
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p').text()).toBe('You must accept')
|
||||
})
|
||||
|
||||
it('shows success only when there is no error', () => {
|
||||
const wrapper = mountCheckbox({
|
||||
success: 'Valid',
|
||||
error: 'Invalid',
|
||||
})
|
||||
|
||||
expect(wrapper.get('p').text()).toBe('Invalid')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success styles and message when there is no error', () => {
|
||||
const wrapper = mountCheckbox({
|
||||
label: 'Accept terms',
|
||||
success: 'Valid',
|
||||
modelValue: true,
|
||||
})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('p').text()).toBe('Valid')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('uses muted label color when unchecked', () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms', modelValue: false})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('uses black label color when checked', () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms', modelValue: true})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('updates label color when toggled without v-model (uncontrolled)', async () => {
|
||||
const wrapper = mountCheckbox({label: 'Accept terms'})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-muted')
|
||||
|
||||
await wrapper.get('input').setValue(true)
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
@@ -1,238 +0,0 @@
|
||||
<template>
|
||||
<div :class="mergedGroupClass">
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:checked="isChecked"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:class="mergedInputClass"
|
||||
v-bind="attrs"
|
||||
type="checkbox"
|
||||
@change="onChange"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
<span>
|
||||
<svg width="12" height="10" viewBox="0 0 12 10" aria-hidden="true">
|
||||
<polyline points="1.5 6 4.5 9 10.5 1"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
{{ label }}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="mergedMessageClass"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: boolean | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
label: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localChecked = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const isChecked = computed(() => (isControlled.value ? !!props.modelValue : localChecked.value))
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
|
||||
return `${inputId.value}-describedby`
|
||||
})
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'checkbox-wrapper-4 w-full',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'inp-cbx peer ',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'cbx text-lg',
|
||||
isChecked.value ? 'text-black' : 'text-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60' : '',
|
||||
hasError.value ? 'text-m-danger' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedMessageClass = computed(() =>
|
||||
twMerge(
|
||||
'text-xs',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
),
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const onChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
|
||||
if (props.readonly) {
|
||||
target.checked = isChecked.value
|
||||
return
|
||||
}
|
||||
|
||||
if (!isControlled.value) {
|
||||
localChecked.value = target.checked
|
||||
}
|
||||
|
||||
emit('update:modelValue', target.checked)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cbx {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cbx span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cbx span:first-child {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 18px;
|
||||
transform: scale(1);
|
||||
border: 2px solid rgb(var(--m-muted) / 1);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.inp-cbx:checked + .cbx span:first-child {
|
||||
border-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.cbx span:first-child svg {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 1px;
|
||||
fill: none;
|
||||
stroke: #000000;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-dasharray: 16px;
|
||||
stroke-dashoffset: 16px;
|
||||
transition: all 0.125s ease;
|
||||
}
|
||||
|
||||
.cbx span:last-child {
|
||||
padding-left: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.inp-cbx {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.inp-cbx:checked + .cbx span:first-child svg {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
.inp-cbx + .cbx.text-m-danger span:first-child {
|
||||
border-color: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
.cbx.text-m-danger span:first-child svg {
|
||||
stroke: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
.inp-cbx:checked + .cbx.text-m-danger span:first-child {
|
||||
border-color: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
|
||||
.inp-cbx + .cbx.text-m-success span:first-child {
|
||||
border-color: rgb(var(--m-success) / 1);
|
||||
}
|
||||
.cbx.text-m-success span:first-child svg {
|
||||
stroke: rgb(var(--m-success) / 1);
|
||||
}
|
||||
.inp-cbx:checked + .cbx.text-m-success span:first-child {
|
||||
border-color: rgb(var(--m-success) / 1);
|
||||
}
|
||||
|
||||
.inp-cbx:disabled + .cbx {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
@@ -1,278 +0,0 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { h } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import DataTable from './DataTable.vue'
|
||||
|
||||
type DataTableProps = {
|
||||
id?: string
|
||||
columns?: { key: string; label: string }[]
|
||||
items?: Record<string, unknown>[]
|
||||
totalItems?: number
|
||||
page?: number
|
||||
perPage?: number
|
||||
perPageOptions?: number[]
|
||||
rowClickable?: boolean
|
||||
tableClass?: string
|
||||
emptyMessage?: string
|
||||
}
|
||||
|
||||
const DataTableForTest = DataTable as DefineComponent<DataTableProps>
|
||||
|
||||
const defaultColumns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
]
|
||||
|
||||
const defaultItems = [
|
||||
{ nom: 'Dupont', ville: 'Paris' },
|
||||
{ nom: 'Martin', ville: 'Lyon' },
|
||||
{ nom: 'Bernard', ville: 'Marseille' },
|
||||
]
|
||||
|
||||
function mountComponent(props: DataTableProps = {}, slots?: Record<string, unknown>) {
|
||||
return mount(DataTableForTest, {
|
||||
props: {
|
||||
columns: defaultColumns,
|
||||
items: defaultItems,
|
||||
totalItems: 3,
|
||||
...props,
|
||||
},
|
||||
slots,
|
||||
global: {
|
||||
stubs: {
|
||||
MalioSelect: {
|
||||
name: 'MalioSelect',
|
||||
template: '<div data-test="malio-select"><slot /></div>',
|
||||
props: ['modelValue', 'options'],
|
||||
emits: ['update:modelValue'],
|
||||
},
|
||||
MalioButton: {
|
||||
template: '<button v-bind="$attrs" :disabled="disabled" @click="$emit(\'click\', $event)"><slot>{{ label }}</slot></button>',
|
||||
props: ['label', 'disabled', 'variant', 'buttonClass'],
|
||||
emits: ['click'],
|
||||
inheritAttrs: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioDataTable', () => {
|
||||
describe('Table rendering', () => {
|
||||
it('renders column headers as text when no header slot', () => {
|
||||
const wrapper = mountComponent()
|
||||
const headers = wrapper.findAll('th')
|
||||
expect(headers).toHaveLength(2)
|
||||
expect(headers[0].text()).toBe('Nom')
|
||||
expect(headers[1].text()).toBe('Ville')
|
||||
})
|
||||
|
||||
it('renders header slot when provided', () => {
|
||||
const wrapper = mountComponent({}, {
|
||||
'header-nom': '<input data-test="filter-nom" placeholder="Nom" />',
|
||||
})
|
||||
expect(wrapper.find('[data-test="filter-nom"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders items as rows', () => {
|
||||
const wrapper = mountComponent()
|
||||
const rows = wrapper.findAll('[data-test="row"]')
|
||||
expect(rows).toHaveLength(3)
|
||||
expect(rows[0].text()).toContain('Dupont')
|
||||
expect(rows[0].text()).toContain('Paris')
|
||||
})
|
||||
|
||||
it('renders cell slot when provided', () => {
|
||||
const wrapper = mountComponent({}, {
|
||||
'cell-nom': ({ item }: { item: Record<string, unknown> }) => h('strong', String(item.nom)),
|
||||
})
|
||||
const firstRow = wrapper.findAll('[data-test="row"]')[0]
|
||||
expect(firstRow.find('strong').text()).toBe('Dupont')
|
||||
})
|
||||
|
||||
it('renders empty message when items is empty', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0 })
|
||||
expect(wrapper.find('[data-test="empty-row"]').text()).toBe('Aucune donnée')
|
||||
})
|
||||
|
||||
it('renders custom empty message', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0, emptyMessage: 'Rien ici' })
|
||||
expect(wrapper.find('[data-test="empty-row"]').text()).toBe('Rien ici')
|
||||
})
|
||||
|
||||
it('renders empty slot when provided', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ items: [], totalItems: 0 },
|
||||
{ empty: '<p data-test="custom-empty">Vide</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="custom-empty"]').text()).toBe('Vide')
|
||||
})
|
||||
|
||||
it('empty row has colspan equal to columns length', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0 })
|
||||
const td = wrapper.find('[data-test="empty-row"] td')
|
||||
expect(td.attributes('colspan')).toBe('2')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Row click', () => {
|
||||
it('emits row-click with item on row click', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('click')
|
||||
expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
|
||||
})
|
||||
|
||||
it('emits row-click on Enter key', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('keydown.enter')
|
||||
expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
|
||||
})
|
||||
|
||||
it('emits row-click on Space key', async () => {
|
||||
const wrapper = mountComponent()
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('keydown.space')
|
||||
expect(wrapper.emitted('row-click')?.[0]).toEqual([{ nom: 'Dupont', ville: 'Paris' }])
|
||||
})
|
||||
|
||||
it('rows have tabindex when clickable', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.findAll('[data-test="row"]')[0].attributes('tabindex')).toBe('0')
|
||||
})
|
||||
|
||||
it('rows have cursor-pointer when clickable', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.findAll('[data-test="row"]')[0].classes()).toContain('cursor-pointer')
|
||||
})
|
||||
|
||||
it('rows are not clickable when rowClickable is false', async () => {
|
||||
const wrapper = mountComponent({ rowClickable: false })
|
||||
await wrapper.findAll('[data-test="row"]')[0].trigger('click')
|
||||
expect(wrapper.emitted('row-click')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('rows have no tabindex when not clickable', () => {
|
||||
const wrapper = mountComponent({ rowClickable: false })
|
||||
expect(wrapper.findAll('[data-test="row"]')[0].attributes('tabindex')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('th elements have scope="col"', () => {
|
||||
const wrapper = mountComponent()
|
||||
const ths = wrapper.findAll('th')
|
||||
ths.forEach(th => {
|
||||
expect(th.attributes('scope')).toBe('col')
|
||||
})
|
||||
})
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent()
|
||||
const id = wrapper.find('div').attributes('id')
|
||||
expect(id).toMatch(/^malio-datatable-/)
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
const wrapper = mountComponent({ id: 'my-table' })
|
||||
expect(wrapper.find('div').attributes('id')).toBe('my-table')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Pagination', () => {
|
||||
it('hides pagination when totalItems is 0', () => {
|
||||
const wrapper = mountComponent({ items: [], totalItems: 0 })
|
||||
expect(wrapper.find('[data-test="pagination"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows pagination when totalItems > 0', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="pagination"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders all pages when totalPages <= 5', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10 })
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
expect(wrapper.find(`[data-test="page-${i}"]`).exists()).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('highlights current page', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
|
||||
expect(wrapper.find('[data-test="page-3"]').attributes('aria-current')).toBe('page')
|
||||
})
|
||||
|
||||
it('emits update:page on page button click', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
|
||||
await wrapper.find('[data-test="page-3"]').trigger('click')
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([3])
|
||||
})
|
||||
|
||||
it('Prev button is disabled on page 1', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 1 })
|
||||
expect(wrapper.find('[data-test="prev-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('Next button is disabled on last page', () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 5 })
|
||||
expect(wrapper.find('[data-test="next-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('Prev button emits update:page with page - 1', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
|
||||
await wrapper.find('[data-test="prev-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([2])
|
||||
})
|
||||
|
||||
it('Next button emits update:page with page + 1', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 50, perPage: 10, page: 3 })
|
||||
await wrapper.find('[data-test="next-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([4])
|
||||
})
|
||||
|
||||
it('shows ellipsis for truncated pages (> 5 pages)', () => {
|
||||
const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
|
||||
const ellipsis = wrapper.findAll('[aria-hidden="true"]')
|
||||
expect(ellipsis.length).toBeGreaterThan(0)
|
||||
expect(ellipsis[0].text()).toBe('…')
|
||||
})
|
||||
|
||||
it('always shows first and last page when > 5 pages', () => {
|
||||
const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
|
||||
expect(wrapper.find('[data-test="page-1"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="page-20"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('shows 1 neighbor on each side of current page', () => {
|
||||
const wrapper = mountComponent({ totalItems: 200, perPage: 10, page: 10 })
|
||||
expect(wrapper.find('[data-test="page-9"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="page-10"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="page-11"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('pagination nav has aria-label', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="pagination-nav"]').attributes('aria-label')).toBe('Pagination')
|
||||
})
|
||||
|
||||
it('Prev button has aria-label "Page précédente"', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="prev-button"]').attributes('aria-label')).toBe('Page précédente')
|
||||
})
|
||||
|
||||
it('Next button has aria-label "Page suivante"', () => {
|
||||
const wrapper = mountComponent({ totalItems: 30 })
|
||||
expect(wrapper.find('[data-test="next-button"]').attributes('aria-label')).toBe('Page suivante')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Per-page selector', () => {
|
||||
it('emits update:per-page and reset page to 1 on change', async () => {
|
||||
const wrapper = mountComponent({ totalItems: 100, perPage: 10, page: 5 })
|
||||
const select = wrapper.findComponent({ name: 'MalioSelect' })
|
||||
select.vm.$emit('update:modelValue', 25)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:per-page')?.[0]).toEqual([25])
|
||||
expect(wrapper.emitted('update:page')?.[0]).toEqual([1])
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,222 +0,0 @@
|
||||
<template>
|
||||
<div :id="componentId" class="w-full" v-bind="attrs">
|
||||
<table :class="twMerge('w-full border-separate border-spacing-0 border border-black rounded-malio overflow-hidden', tableClass)">
|
||||
<thead>
|
||||
<tr class="bg-m-surface">
|
||||
<th
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
scope="col"
|
||||
class="border-b border-black px-3 py-3 text-left align-middle text-[20px]"
|
||||
>
|
||||
<slot
|
||||
v-if="$slots[`header-${col.key}`]"
|
||||
:name="`header-${col.key}`"
|
||||
:column="col"
|
||||
/>
|
||||
<span v-else class="font-semibold text-m-primary">{{ col.label }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:class="rowClickable ? 'cursor-pointer hover:bg-m-bg' : ''"
|
||||
:tabindex="rowClickable ? 0 : undefined"
|
||||
data-test="row"
|
||||
@click="rowClickable ? emit('row-click', item) : undefined"
|
||||
@keydown.enter="rowClickable ? emit('row-click', item) : undefined"
|
||||
@keydown.space.prevent="rowClickable ? emit('row-click', item) : undefined"
|
||||
>
|
||||
<td
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
class="px-3 py-4 text-[18px] text-m-primary"
|
||||
:class="index < items.length - 1 ? 'border-b border-black' : ''"
|
||||
>
|
||||
<slot
|
||||
v-if="$slots[`cell-${col.key}`]"
|
||||
:name="`cell-${col.key}`"
|
||||
:item="item"
|
||||
:column="col"
|
||||
/>
|
||||
<template v-else>{{ item[col.key] }}</template>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!items.length" data-test="empty-row">
|
||||
<td
|
||||
:colspan="columns.length"
|
||||
class="px-3 py-4 text-center text-m-muted"
|
||||
>
|
||||
<slot name="empty">{{ emptyMessage }}</slot>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div
|
||||
v-if="totalItems > 0"
|
||||
class="flex justify-between pt-2"
|
||||
data-test="pagination"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<span class="whitespace-nowrap text-[16px] text-black self-center">Lignes :</span>
|
||||
<MalioSelect
|
||||
:model-value="perPage"
|
||||
:options="perPageSelectOptions"
|
||||
min-width="w-20 !mt-0"
|
||||
rounded="rounded"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
text-label="text-xs"
|
||||
data-test="per-page-select"
|
||||
@update:model-value="onPerPageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Pagination" class="flex gap-1" data-test="pagination-nav">
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
label="Prev"
|
||||
:disabled="page <= 1"
|
||||
button-class="h-10 w-auto min-w-0 px-3 text-sm"
|
||||
aria-label="Page précédente"
|
||||
data-test="prev-button"
|
||||
@click="goToPage(page - 1)"
|
||||
/>
|
||||
|
||||
<template v-for="(p, idx) in visiblePages" :key="idx">
|
||||
<span
|
||||
v-if="p === '...'"
|
||||
class="px-1 text-sm text-m-muted"
|
||||
aria-hidden="true"
|
||||
>…</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="h-10 min-w-[2.5rem] rounded px-2 text-sm transition-colors"
|
||||
:class="p === page
|
||||
? 'bg-m-btn-primary text-white font-semibold'
|
||||
: 'text-m-text hover:bg-m-bg'"
|
||||
:aria-current="p === page ? 'page' : undefined"
|
||||
:data-test="`page-${p}`"
|
||||
@click="goToPage(p)"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<MalioButton
|
||||
variant="tertiary"
|
||||
label="Next"
|
||||
:disabled="page >= totalPages"
|
||||
button-class="h-10 w-auto min-w-0 px-3 text-sm"
|
||||
aria-label="Page suivante"
|
||||
data-test="next-button"
|
||||
@click="goToPage(page + 1)"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, useAttrs, useId } from 'vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import MalioSelect from '../select/Select.vue'
|
||||
import MalioButton from '../button/Button.vue'
|
||||
|
||||
defineOptions({ name: 'MalioDataTable', inheritAttrs: false })
|
||||
|
||||
type DataTableColumn = {
|
||||
key: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
columns: DataTableColumn[]
|
||||
items: Record<string, unknown>[]
|
||||
totalItems: number
|
||||
page?: number
|
||||
perPage?: number
|
||||
perPageOptions?: number[]
|
||||
rowClickable?: boolean
|
||||
tableClass?: string
|
||||
emptyMessage?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
page: 1,
|
||||
perPage: 10,
|
||||
perPageOptions: () => [10, 25, 50],
|
||||
rowClickable: true,
|
||||
tableClass: '',
|
||||
emptyMessage: 'Aucune donnée',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:page' | 'update:per-page', value: number): void
|
||||
(e: 'row-click', item: Record<string, unknown>): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const componentId = computed(() => props.id || `malio-datatable-${generatedId}`)
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(props.totalItems / props.perPage)))
|
||||
|
||||
const perPageSelectOptions = computed(() =>
|
||||
props.perPageOptions.map(n => ({ label: String(n), value: n }))
|
||||
)
|
||||
|
||||
function onPerPageChange(value: string | number | null) {
|
||||
if (value !== null) {
|
||||
emit('update:per-page', Number(value))
|
||||
emit('update:page', 1)
|
||||
}
|
||||
}
|
||||
|
||||
function goToPage(page: number) {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
emit('update:page', page)
|
||||
}
|
||||
}
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const total = totalPages.value
|
||||
const current = props.page
|
||||
|
||||
if (total <= 5) {
|
||||
return Array.from({ length: total }, (_, i) => i + 1)
|
||||
}
|
||||
|
||||
const pages: (number | '...')[] = []
|
||||
pages.push(1)
|
||||
|
||||
if (current > 3) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
const start = Math.max(2, current - 1)
|
||||
const end = Math.min(total - 1, current + 1)
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
if (current < total - 2) {
|
||||
pages.push('...')
|
||||
}
|
||||
|
||||
if (total > 1) {
|
||||
pages.push(total)
|
||||
}
|
||||
|
||||
return pages
|
||||
})
|
||||
</script>
|
||||
@@ -1,122 +0,0 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import Drawer from './Drawer.vue'
|
||||
|
||||
type DrawerProps = {
|
||||
modelValue?: boolean
|
||||
title?: string
|
||||
showClose?: boolean
|
||||
id?: string
|
||||
drawerClass?: string
|
||||
}
|
||||
|
||||
const DrawerForTest = Drawer as DefineComponent<DrawerProps>
|
||||
|
||||
function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>) {
|
||||
return mount(DrawerForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: {
|
||||
stubs: {
|
||||
Teleport: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioDrawer', () => {
|
||||
it('does not render when modelValue is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders when modelValue is true', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders the title', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, title: 'Mon tiroir' })
|
||||
expect(wrapper.find('h2').text()).toBe('Mon tiroir')
|
||||
})
|
||||
|
||||
it('renders slot content', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ default: '<p data-test="content">Contenu du drawer</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false on backdrop click', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
})
|
||||
|
||||
it('emits update:modelValue false on close button click', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="close-button"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
})
|
||||
|
||||
it('shows close button by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides close button when showClose is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, showClose: false })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button renders mdi:close icon', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const icon = wrapper.findComponent(IconifyIcon)
|
||||
expect(icon.props('icon')).toBe('mdi:close')
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, id: 'my-drawer' })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toBe('my-drawer')
|
||||
})
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const id = wrapper.find('.fixed').attributes('id')
|
||||
expect(id).toMatch(/^malio-drawer-/)
|
||||
})
|
||||
|
||||
it('has role="dialog" and aria-modal on panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('role')).toBe('dialog')
|
||||
expect(panel.attributes('aria-modal')).toBe('true')
|
||||
})
|
||||
|
||||
it('aria-labelledby links to title id', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, id: 'test-drawer' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-labelledby')).toBe('test-drawer-title')
|
||||
expect(wrapper.find('h2').attributes('id')).toBe('test-drawer-title')
|
||||
})
|
||||
|
||||
it('applies drawerClass to the panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-lg' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.classes()).toContain('max-w-lg')
|
||||
})
|
||||
|
||||
it('works in uncontrolled mode', () => {
|
||||
const wrapper = mountComponent()
|
||||
// Without modelValue, defaults to closed
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button has aria-label "Fermer"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
|
||||
})
|
||||
})
|
||||
@@ -1,139 +0,0 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
name="drawer"
|
||||
appear
|
||||
@after-leave="isRendered = false"
|
||||
>
|
||||
<div
|
||||
v-if="isRendered && isOpen"
|
||||
:id="componentId"
|
||||
class="fixed inset-0 z-50 flex justify-end"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-black/40"
|
||||
data-test="backdrop"
|
||||
@click="close"
|
||||
/>
|
||||
|
||||
<div
|
||||
:class="twMerge(
|
||||
'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
|
||||
drawerClass,
|
||||
)"
|
||||
role="dialog"
|
||||
:aria-modal="true"
|
||||
:aria-labelledby="titleId"
|
||||
data-test="panel"
|
||||
>
|
||||
<div class="flex items-center justify-between px-5 pb-8 pt-8">
|
||||
<h2
|
||||
:id="titleId"
|
||||
class="text-[32px] font-semibold text-m-primary"
|
||||
>
|
||||
{{ title }}
|
||||
</h2>
|
||||
<button
|
||||
v-if="showClose"
|
||||
type="button"
|
||||
aria-label="Fermer"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
|
||||
data-test="close-button"
|
||||
@click="close"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:close"
|
||||
:width="24"
|
||||
:height="24"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-1 overflow-y-auto px-5"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useAttrs, useId, watch } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
defineOptions({ name: 'MalioDrawer', inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
title?: string
|
||||
showClose?: boolean
|
||||
drawerClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
title: '',
|
||||
showClose: true,
|
||||
drawerClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
|
||||
const titleId = computed(() => `${componentId.value}-title`)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(false)
|
||||
|
||||
const isOpen = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
|
||||
const isRendered = ref(isOpen.value)
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) isRendered.value = true
|
||||
})
|
||||
|
||||
function close() {
|
||||
if (!isControlled.value) {
|
||||
localValue.value = false
|
||||
}
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.drawer-enter-active > div:last-child,
|
||||
.drawer-leave-active > div:last-child {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drawer-enter-from > div:last-child,
|
||||
.drawer-leave-to > div:last-child {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,311 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Input from './InputText.vue'
|
||||
|
||||
type InputProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
const InputForTest = Input as DefineComponent<InputProps>
|
||||
|
||||
const mountInput = (props: InputProps = {}) =>
|
||||
mount(InputForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputText', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountInput({modelValue: 'initialValueTest'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('initialValueTest')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountInput({label: 'labelTest'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('labelTest')
|
||||
})
|
||||
|
||||
it('applies the name attribute', () => {
|
||||
const wrapper = mountInput({name: 'nameTest'})
|
||||
|
||||
expect(wrapper.get('input').attributes('name')).toBe('nameTest')
|
||||
})
|
||||
|
||||
it('uses provided id on input and label', () => {
|
||||
const wrapper = mountInput({id: 'custom-id', label: 'Label'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('custom-id')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('custom-id')
|
||||
})
|
||||
|
||||
it('keeps the default rounded class on input', () => {
|
||||
const wrapper = mountInput()
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('rounded-md')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountInput({label: 'Label'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-text-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('applies the autocomplete attribute', () => {
|
||||
const wrapper = mountInput({autocomplete: 'autocompleteTest'})
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest')
|
||||
})
|
||||
|
||||
it('does not set required when false', () => {
|
||||
const wrapper = mountInput({required: false})
|
||||
|
||||
expect(wrapper.get('input').attributes('required')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets required when true', () => {
|
||||
const wrapper = mountInput({required: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('required')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not set readonly when false', () => {
|
||||
const wrapper = mountInput({readonly: false})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mountInput({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not set disabled and keeps text cursor when false', () => {
|
||||
const wrapper = mountInput({disabled: false})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeUndefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-text')
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountInput({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
expect(wrapper.get('input').classes()).toContain('text-black/60')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountInput({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('new value')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
|
||||
})
|
||||
|
||||
it('applies maxLength to input', () => {
|
||||
const wrapper = mountInput({maxLength: 25})
|
||||
|
||||
expect(wrapper.get('input').attributes('maxlength')).toBe('25')
|
||||
})
|
||||
|
||||
it('applies minLength to input', () => {
|
||||
const wrapper = mountInput({minLength: 25})
|
||||
|
||||
expect(wrapper.get('input').attributes('minlength')).toBe('25')
|
||||
})
|
||||
|
||||
it('applies labelClass on label', () => {
|
||||
const wrapper = mountInput({label: 'Label', labelClass: 'text-red-500'})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-red-500')
|
||||
})
|
||||
|
||||
it('applies inputClass on input', () => {
|
||||
const wrapper = mountInput({inputClass: 'text-sm'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('text-sm')
|
||||
})
|
||||
|
||||
it('shows error message without label and icon', () => {
|
||||
const wrapper = mountInput({error: 'Error message test'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows error message with label and without icon', () => {
|
||||
const wrapper = mountInput({error: 'Error message test', label: 'Error message'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows error message with label and icon', () => {
|
||||
const wrapper = mountInput({
|
||||
error: 'Error message test',
|
||||
label: 'Error message',
|
||||
iconName: 'mdi:key-outline',
|
||||
})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows error message with icon and without label', () => {
|
||||
const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success message without label and icon', () => {
|
||||
const wrapper = mountInput({success: 'Success message test'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with label and without icon', () => {
|
||||
const wrapper = mountInput({success: 'Success message test', label: 'Success message'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with label and icon', () => {
|
||||
const wrapper = mountInput({
|
||||
success: 'Success message test',
|
||||
label: 'Success message',
|
||||
iconName: 'mdi:key-outline',
|
||||
})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows success message with icon and without label', () => {
|
||||
const wrapper = mountInput({success: 'Success message test', iconName: 'mdi:key-outline'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success when both are provided', () => {
|
||||
const wrapper = mountInput({
|
||||
error: 'Error message test',
|
||||
success: 'Success message test',
|
||||
})
|
||||
|
||||
expect(wrapper.find('p.text-m-danger').exists()).toBe(true)
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
|
||||
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').classes()).not.toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountInput({hint: 'Hint message test'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
|
||||
})
|
||||
|
||||
it('does not render label when label prop is missing', () => {
|
||||
const wrapper = mountInput({labelClass: 'text-red-500'})
|
||||
|
||||
expect(wrapper.find('label').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders icon with default positioning and muted color', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
|
||||
})
|
||||
|
||||
it('renders icon on the left when requested', () => {
|
||||
const wrapper = mountInput({
|
||||
iconName: 'mdi:key-outline',
|
||||
iconPosition: 'left',
|
||||
label: 'Password',
|
||||
})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
expect(wrapper.get('input').classes()).toContain('!pl-11')
|
||||
expect(wrapper.get('label').classes()).toContain('left-11')
|
||||
})
|
||||
|
||||
it('passes icon size props to icon component', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline', iconSize: '24'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').attributes('width')).toBe('24')
|
||||
expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
|
||||
})
|
||||
|
||||
it('applies icon color class', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline', iconColor: 'text-m-primary'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountInput({iconName: 'mdi:key-outline', modelValue: 'hello'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
@@ -1,177 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import InputAmount from './InputAmount.vue'
|
||||
|
||||
type InputAmountProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
const InputAmountForTest = InputAmount as DefineComponent<InputAmountProps>
|
||||
|
||||
const mountInputAmount = (props: InputAmountProps = {}) =>
|
||||
mount(InputAmountForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputAmount', () => {
|
||||
it('renders as a text input with decimal input mode', () => {
|
||||
const wrapper = mountInputAmount()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('text')
|
||||
expect(wrapper.get('input').attributes('inputmode')).toBe('decimal')
|
||||
})
|
||||
|
||||
it('renders the default icon with muted styling', () => {
|
||||
const wrapper = mountInputAmount()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').exists()).toBe(true)
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
})
|
||||
|
||||
it('generates an amount-specific id', () => {
|
||||
const wrapper = mountInputAmount({label: 'Montant'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-amount-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('applies the provided input classes', () => {
|
||||
const wrapper = mountInputAmount({inputClass: 'text-right'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('text-right')
|
||||
})
|
||||
|
||||
it('links hint text through aria-describedby', () => {
|
||||
const wrapper = mountInputAmount({hint: 'Saisissez un montant'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
|
||||
expect(wrapper.get('p').attributes('id')).toBe(`${inputId}-describedby`)
|
||||
})
|
||||
|
||||
it('sets aria-invalid and describedby when showing an error', () => {
|
||||
const wrapper = mountInputAmount({error: 'Montant invalide'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Montant invalide')
|
||||
})
|
||||
|
||||
it('keeps dots as the decimal separator on input', async () => {
|
||||
const wrapper = mountInputAmount({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('12.5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
|
||||
expect(wrapper.get('input').element.value).toBe('12.5')
|
||||
})
|
||||
|
||||
it('accepts commas but normalizes them to dots', async () => {
|
||||
const wrapper = mountInputAmount({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('0012,345abc')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.34'])
|
||||
expect(wrapper.get('input').element.value).toBe('12.34')
|
||||
})
|
||||
|
||||
it('normalizes a leading decimal separator', async () => {
|
||||
const wrapper = mountInputAmount({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue(',5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
|
||||
expect(wrapper.get('input').element.value).toBe('0.5')
|
||||
})
|
||||
|
||||
it('keeps the normalized decimal value on blur', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12.5')
|
||||
await input.trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([['12.5']])
|
||||
expect(input.element.value).toBe('12.5')
|
||||
})
|
||||
|
||||
it('keeps integer values unchanged on blur', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12')
|
||||
await input.trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([['12']])
|
||||
expect(input.element.value).toBe('12')
|
||||
})
|
||||
|
||||
it('keeps an empty value empty on blur', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('')
|
||||
await input.trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toEqual([['']])
|
||||
expect(input.element.value).toBe('')
|
||||
})
|
||||
|
||||
it('supports icon positioning on the left', () => {
|
||||
const wrapper = mountInputAmount({
|
||||
label: 'Montant',
|
||||
iconPosition: 'left',
|
||||
})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
expect(wrapper.get('input').classes()).toContain('!pl-11')
|
||||
expect(wrapper.get('label').classes()).toContain('left-11')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountInputAmount()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountInputAmount({modelValue: '12,50'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
@@ -1,260 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:minlength="minLength"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
placeholder="_"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="onBlur"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: 'mdi:currency-eur',
|
||||
iconPosition: 'right',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
maxLength: undefined,
|
||||
minLength: undefined,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-amount-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.inputClass,
|
||||
iconInputPaddingClass.value,
|
||||
focusPaddingClass.value,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
labelPositionClass.value,
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
|
||||
return `${inputId.value}-describedby`
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const normalizeAmount = (value: string) => {
|
||||
const sanitizedValue = value
|
||||
.replace(/\s+/g, '')
|
||||
.replace(/,/g, '.')
|
||||
.replace(/[^\d.]/g, '')
|
||||
const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
|
||||
const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
|
||||
const decimalPart = decimalParts.join('').slice(0, 2)
|
||||
|
||||
if (sanitizedValue.includes('.')) {
|
||||
return `${integerPart || '0'}.${decimalPart}`
|
||||
}
|
||||
|
||||
return integerPart
|
||||
}
|
||||
|
||||
// Keep the DOM input value, local state, and v-model emission in sync.
|
||||
const updateValue = (target: HTMLInputElement, value: string) => {
|
||||
target.value = value
|
||||
if (!isControlled.value) {
|
||||
localValue.value = value
|
||||
}
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Normalize while typing so the field never keeps invalid amount characters.
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
updateValue(target, normalizeAmount(target.value))
|
||||
}
|
||||
|
||||
// Keep the blur handler only for focus-driven UI state.
|
||||
const onBlur = () => {
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
if (!props.iconName) return ''
|
||||
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : ''
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height { transition: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,430 +0,0 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import InputAutocomplete from './InputAutocomplete.vue'
|
||||
|
||||
type Option = {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
type InputAutocompleteProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | number | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
options?: Option[]
|
||||
loading?: boolean
|
||||
debounce?: number
|
||||
minSearchLength?: number
|
||||
allowCreate?: boolean
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
noResultsText?: string
|
||||
loadingText?: string
|
||||
minSearchText?: string
|
||||
}
|
||||
|
||||
const InputAutocompleteForTest = InputAutocomplete as DefineComponent<InputAutocompleteProps>
|
||||
|
||||
const options: Option[] = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
]
|
||||
|
||||
const mountComponent = (props: InputAutocompleteProps = {}) =>
|
||||
mount(InputAutocompleteForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputAutocomplete', () => {
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Pays'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Pays')
|
||||
})
|
||||
|
||||
it('renders with type combobox role', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('role')).toBe('combobox')
|
||||
})
|
||||
|
||||
it('renders input with provided modelValue label when option matches', () => {
|
||||
const wrapper = mountComponent({modelValue: 'fr', options})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
})
|
||||
|
||||
it('opens dropdown on focus', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)
|
||||
expect(wrapper.get('input').attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('does not open dropdown on focus when disabled', async () => {
|
||||
const wrapper = mountComponent({options, disabled: true})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open dropdown on focus when readonly', async () => {
|
||||
const wrapper = mountComponent({options, readonly: true})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders all options in dropdown', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
const items = wrapper.findAll('[data-test="option"]')
|
||||
expect(items).toHaveLength(3)
|
||||
expect(items[0].text()).toBe('France')
|
||||
expect(items[1].text()).toBe('Belgique')
|
||||
expect(items[2].text()).toBe('Canada')
|
||||
})
|
||||
|
||||
it('emits update:modelValue with option value when option is selected', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
|
||||
})
|
||||
|
||||
it('emits select with full option object', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[0].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('select')?.[0]).toEqual([options[0]])
|
||||
})
|
||||
|
||||
it('closes dropdown after selecting an option', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[0].trigger('click')
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('fills input with selected option label after selection', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: null})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.findAll('[data-test="option"]')[1].trigger('click')
|
||||
|
||||
await wrapper.setProps({modelValue: 'be'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('Belgique')
|
||||
})
|
||||
|
||||
it('emits search after debounce when user types', async () => {
|
||||
vi.useFakeTimers()
|
||||
const wrapper = mountComponent({options, debounce: 300})
|
||||
|
||||
await wrapper.get('input').setValue('fra')
|
||||
|
||||
expect(wrapper.emitted('search')).toBeUndefined()
|
||||
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('does not emit search until minSearchLength is reached', async () => {
|
||||
vi.useFakeTimers()
|
||||
const wrapper = mountComponent({minSearchLength: 3, debounce: 300})
|
||||
|
||||
await wrapper.get('input').setValue('fr')
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(wrapper.emitted('search')).toBeUndefined()
|
||||
|
||||
await wrapper.get('input').setValue('fra')
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(wrapper.emitted('search')?.[0]).toEqual(['fra'])
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('shows minSearch text in dropdown when minSearchLength not reached', async () => {
|
||||
const wrapper = mountComponent({minSearchLength: 3, minSearchText: 'Tapez 3 caractères'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="min-search-text"]').text()).toBe('Tapez 3 caractères')
|
||||
})
|
||||
|
||||
it('shows loading text in dropdown when loading', async () => {
|
||||
const wrapper = mountComponent({loading: true, loadingText: 'En cours…'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="loading-text"]').text()).toBe('En cours…')
|
||||
})
|
||||
|
||||
it('shows loading icon when loading', async () => {
|
||||
const wrapper = mountComponent({loading: true})
|
||||
|
||||
expect(wrapper.find('[data-test="loading-icon"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="chevron"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows no results text when options is empty', async () => {
|
||||
const wrapper = mountComponent({options: [], noResultsText: 'Rien trouvé'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.find('[data-test="no-results-text"]').text()).toBe('Rien trouvé')
|
||||
})
|
||||
|
||||
it('clears selection when typing different value', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('belg')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
|
||||
expect(wrapper.emitted('select')?.[0]).toEqual([null])
|
||||
})
|
||||
|
||||
it('emits create event with typed value when allowCreate and Enter pressed', async () => {
|
||||
const wrapper = mountComponent({options, allowCreate: true})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('Custom')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Enter'})
|
||||
|
||||
expect(wrapper.emitted('create')?.[0]).toEqual(['Custom'])
|
||||
expect(wrapper.emitted('update:modelValue')?.some(e => e[0] === 'Custom')).toBe(true)
|
||||
})
|
||||
|
||||
it('does not emit create when allowCreate is false', async () => {
|
||||
const wrapper = mountComponent({options, allowCreate: false})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('Custom')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Enter'})
|
||||
|
||||
expect(wrapper.emitted('create')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('selects option on Enter with active index', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Enter'})
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['fr'])
|
||||
})
|
||||
|
||||
it('navigates options with ArrowDown', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
|
||||
await wrapper.get('input').trigger('keydown', {key: 'ArrowDown'})
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-activedescendant')).toContain('-option-1')
|
||||
})
|
||||
|
||||
it('closes dropdown on Escape', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(true)
|
||||
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Escape'})
|
||||
|
||||
expect(wrapper.find('[data-test="dropdown"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('reverts input value on Escape', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
await wrapper.get('input').setValue('xyz')
|
||||
await wrapper.get('input').trigger('keydown', {key: 'Escape'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Champ invalide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Champ invalide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Champ valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Champ valide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'Tapez pour rechercher'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Tapez pour rechercher')
|
||||
})
|
||||
|
||||
it('renders left icon when iconName provided with left position', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})
|
||||
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders right icon when iconName provided with right position', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})
|
||||
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not render icon when iconName is empty', () => {
|
||||
const wrapper = mountComponent({iconName: ''})
|
||||
|
||||
expect(wrapper.find('[data-test="icon-left"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-test="icon-right"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('uses left padding when icon is left', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'left'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('!pl-11')
|
||||
})
|
||||
|
||||
it('uses extra right padding when icon is right', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:magnify', iconPosition: 'right'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('!pr-16')
|
||||
})
|
||||
|
||||
it('renders the chevron with default icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
const chevron = icons[icons.length - 1]
|
||||
expect(chevron.props('icon')).toBe('mdi:chevron-down')
|
||||
})
|
||||
|
||||
it('rotates the chevron when dropdown is open', async () => {
|
||||
const wrapper = mountComponent({options})
|
||||
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-0')
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="chevron"]').classes()).toContain('rotate-180')
|
||||
})
|
||||
|
||||
it('sets disabled attribute', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('sets readonly attribute', () => {
|
||||
const wrapper = mountComponent({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'country', label: 'Pays'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('country')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('country')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Pays'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-autocomplete-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('aria-invalid is false when no error', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('marks the option matching modelValue as aria-selected', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'be'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
const items = wrapper.findAll('[data-test="option"]')
|
||||
expect(items[0].attributes('aria-selected')).toBe('false')
|
||||
expect(items[1].attributes('aria-selected')).toBe('true')
|
||||
expect(items[2].attributes('aria-selected')).toBe('false')
|
||||
})
|
||||
|
||||
it('updates inputValue when modelValue changes externally', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
|
||||
await wrapper.setProps({modelValue: 'ca'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('Canada')
|
||||
})
|
||||
|
||||
it('clears inputValue when modelValue is cleared externally', async () => {
|
||||
const wrapper = mountComponent({options, modelValue: 'fr'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('France')
|
||||
|
||||
await wrapper.setProps({modelValue: null})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('')
|
||||
})
|
||||
|
||||
it('uses allowCreate modelValue as inputValue when no match in options', async () => {
|
||||
const wrapper = mountComponent({options, allowCreate: true, modelValue: 'Custom'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('Custom')
|
||||
})
|
||||
})
|
||||
@@ -1,513 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="root"
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:value="inputValue"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-controls="listboxId"
|
||||
:aria-activedescendant="activeOptionId"
|
||||
role="combobox"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@click="onInputClick"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName && iconPosition === 'left'"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon-left"
|
||||
:class="[iconStateClass, 'pointer-events-none absolute left-[10px] top-1/2 -translate-y-1/2']"
|
||||
/>
|
||||
|
||||
<div class="pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<IconifyIcon
|
||||
v-if="iconName && iconPosition === 'right'"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon-right"
|
||||
:class="[iconStateClass]"
|
||||
/>
|
||||
<IconifyIcon
|
||||
v-if="loading"
|
||||
icon="mdi:loading"
|
||||
:width="20"
|
||||
:height="20"
|
||||
data-test="loading-icon"
|
||||
class="animate-spin text-m-primary"
|
||||
/>
|
||||
<IconifyIcon
|
||||
v-else
|
||||
icon="mdi:chevron-down"
|
||||
:width="20"
|
||||
:height="20"
|
||||
data-test="chevron"
|
||||
class="transition-transform duration-300"
|
||||
:class="[
|
||||
isOpen ? 'rotate-180' : 'rotate-0',
|
||||
chevronColorClass,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="isOpen"
|
||||
:id="listboxId"
|
||||
ref="listRef"
|
||||
data-test="dropdown"
|
||||
role="listbox"
|
||||
:aria-labelledby="inputId"
|
||||
class="absolute left-0 right-0 top-[calc(100%-4px)] z-20 max-h-60 w-full overflow-auto rounded-b-md border border-t-0 bg-white"
|
||||
:class="[
|
||||
hasError
|
||||
? 'border-m-danger select-scrollbar-error'
|
||||
: hasSuccess
|
||||
? 'border-m-success select-scrollbar-success'
|
||||
: 'border-m-primary select-scrollbar-primary',
|
||||
]"
|
||||
>
|
||||
<li
|
||||
v-if="loading"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="loading-text"
|
||||
>
|
||||
{{ loadingText }}
|
||||
</li>
|
||||
<li
|
||||
v-else-if="showMinSearch"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="min-search-text"
|
||||
>
|
||||
{{ minSearchText }}
|
||||
</li>
|
||||
<li
|
||||
v-else-if="options.length === 0"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="no-results-text"
|
||||
>
|
||||
{{ noResultsText }}
|
||||
</li>
|
||||
<template v-else>
|
||||
<li
|
||||
v-for="(opt, index) in options"
|
||||
:id="optionId(index)"
|
||||
:key="String(opt.value)"
|
||||
data-test="option"
|
||||
role="option"
|
||||
:aria-selected="opt.value === modelValue"
|
||||
class="cursor-pointer px-3 py-2 text-black"
|
||||
:class="[
|
||||
index === activeIndex ? 'bg-m-muted/10' : '',
|
||||
opt.value === modelValue ? 'bg-m-muted/10 font-semibold' : '',
|
||||
]"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mousedown.prevent
|
||||
@click="onSelect(opt)"
|
||||
>
|
||||
{{ opt.label || '\u00A0' }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputAutocomplete', inheritAttrs: false})
|
||||
|
||||
type Option = {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | number | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
options?: Option[]
|
||||
loading?: boolean
|
||||
debounce?: number
|
||||
minSearchLength?: number
|
||||
allowCreate?: boolean
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
noResultsText?: string
|
||||
loadingText?: string
|
||||
minSearchText?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
label: '',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
options: () => [],
|
||||
loading: false,
|
||||
debounce: 300,
|
||||
minSearchLength: 0,
|
||||
allowCreate: false,
|
||||
iconName: '',
|
||||
iconPosition: 'left',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
noResultsText: 'Aucun résultat',
|
||||
loadingText: 'Chargement…',
|
||||
minSearchText: 'Tapez pour rechercher',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string | number | null): void
|
||||
(e: 'search' | 'create', value: string): void
|
||||
(e: 'select', option: Option | null): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const listRef = ref<HTMLElement | null>(null)
|
||||
const inputValue = ref<string>('')
|
||||
const isFocused = ref(false)
|
||||
const isOpen = ref(false)
|
||||
const activeIndex = ref(-1)
|
||||
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-autocomplete-${generatedId}`)
|
||||
const listboxId = computed(() => `${inputId.value}-listbox`)
|
||||
|
||||
const selectedOption = computed(() =>
|
||||
props.options.find(o => o.value === props.modelValue) ?? null,
|
||||
)
|
||||
|
||||
const hasSelection = computed(() =>
|
||||
props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '',
|
||||
)
|
||||
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isFilled = computed(() => inputValue.value.trim().length > 0 || hasSelection.value)
|
||||
const shouldFloatLabel = computed(() => isFocused.value || inputValue.value.length > 0)
|
||||
|
||||
const showMinSearch = computed(() =>
|
||||
props.minSearchLength > 0 && inputValue.value.length < props.minSearchLength,
|
||||
)
|
||||
|
||||
const optionId = (index: number) => `${inputId.value}-option-${index}`
|
||||
const activeOptionId = computed(() =>
|
||||
activeIndex.value >= 0 && props.options[activeIndex.value]
|
||||
? optionId(activeIndex.value)
|
||||
: undefined,
|
||||
)
|
||||
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
watch(
|
||||
[() => props.modelValue, () => props.options],
|
||||
() => {
|
||||
if (isFocused.value) return
|
||||
if (selectedOption.value) {
|
||||
inputValue.value = selectedOption.value.label
|
||||
} else if (props.allowCreate && typeof props.modelValue === 'string' && props.modelValue !== '') {
|
||||
inputValue.value = props.modelValue
|
||||
} else if (!hasSelection.value) {
|
||||
inputValue.value = ''
|
||||
}
|
||||
},
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative flex h-12 w-full items-center', props.groupClass),
|
||||
)
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
const parts: string[] = []
|
||||
if (props.iconName && props.iconPosition === 'left') parts.push('!pl-11')
|
||||
|
||||
const hasCustomRight = !!props.iconName && props.iconPosition === 'right'
|
||||
if (hasCustomRight) parts.push('!pr-16')
|
||||
else parts.push('!pr-10')
|
||||
|
||||
return parts.join(' ')
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const labelPositionClass = computed(() =>
|
||||
props.iconName && props.iconPosition === 'left' ? 'left-11' : 'left-3',
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
props.disabled
|
||||
? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted'
|
||||
: 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
isOpen.value ? '!rounded-b-none !border-b-0' : '',
|
||||
props.inputClass,
|
||||
iconInputPaddingClass.value,
|
||||
focusPaddingClass.value,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
labelPositionClass.value,
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
props.disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (props.disabled) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
|
||||
const chevronColorClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (isOpen.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
|
||||
const scheduleSearch = () => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
if (showMinSearch.value) return
|
||||
debounceTimer = setTimeout(() => {
|
||||
emit('search', inputValue.value)
|
||||
}, props.debounce)
|
||||
}
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
inputValue.value = target.value
|
||||
if (!isOpen.value) isOpen.value = true
|
||||
activeIndex.value = -1
|
||||
|
||||
if (hasSelection.value && target.value !== selectedOption.value?.label) {
|
||||
emit('update:modelValue', null)
|
||||
emit('select', null)
|
||||
}
|
||||
|
||||
scheduleSearch()
|
||||
}
|
||||
|
||||
const onFocus = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
isFocused.value = true
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
const onInputClick = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
const onSelect = (option: Option) => {
|
||||
inputValue.value = option.label
|
||||
activeIndex.value = -1
|
||||
emit('update:modelValue', option.value)
|
||||
emit('select', option)
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const closeAndCommit = () => {
|
||||
if (
|
||||
props.allowCreate
|
||||
&& inputValue.value !== ''
|
||||
&& inputValue.value !== selectedOption.value?.label
|
||||
) {
|
||||
emit('update:modelValue', inputValue.value)
|
||||
emit('create', inputValue.value)
|
||||
} else if (selectedOption.value) {
|
||||
inputValue.value = selectedOption.value.label
|
||||
} else if (!props.allowCreate) {
|
||||
inputValue.value = ''
|
||||
}
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const closeAndRevert = () => {
|
||||
if (selectedOption.value) {
|
||||
inputValue.value = selectedOption.value.label
|
||||
} else {
|
||||
inputValue.value = ''
|
||||
}
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
|
||||
const onKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault()
|
||||
closeAndRevert()
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
if (activeIndex.value >= 0 && props.options[activeIndex.value]) {
|
||||
onSelect(props.options[activeIndex.value])
|
||||
return
|
||||
}
|
||||
if (props.allowCreate && inputValue.value !== '') {
|
||||
emit('update:modelValue', inputValue.value)
|
||||
emit('create', inputValue.value)
|
||||
isOpen.value = false
|
||||
isFocused.value = false
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
if (!isOpen.value) {
|
||||
isOpen.value = true
|
||||
}
|
||||
activeIndex.value = Math.min(activeIndex.value + 1, props.options.length - 1)
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
activeIndex.value = Math.max(activeIndex.value - 1, 0)
|
||||
}
|
||||
}
|
||||
|
||||
const onClickOutside = (event: MouseEvent) => {
|
||||
if (!root.value) return
|
||||
if (!root.value.contains(event.target as Node)) {
|
||||
closeAndCommit()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onClickOutside))
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousedown', onClickOutside)
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(ul[role="listbox"]) {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-primary) {
|
||||
scrollbar-color: rgb(var(--m-primary)) transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-error) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-success) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -1,228 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import InputEmail from './InputEmail.vue'
|
||||
|
||||
type InputEmailProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}
|
||||
|
||||
const InputEmailForTest = InputEmail as DefineComponent<InputEmailProps>
|
||||
|
||||
const mountComponent = (props: InputEmailProps = {}) =>
|
||||
mount(InputEmailForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputEmail', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('user@example.com')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Adresse email'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Adresse email')
|
||||
})
|
||||
|
||||
it('has type email', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('email')
|
||||
})
|
||||
|
||||
it('has inputmode email', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('inputmode')).toBe('email')
|
||||
})
|
||||
|
||||
it('renders the default email icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:email-outline')
|
||||
})
|
||||
|
||||
it('allows overriding the icon', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:at'})
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:at')
|
||||
})
|
||||
|
||||
it('does not render icon when iconName is empty', () => {
|
||||
const wrapper = mountComponent({iconName: ''})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('places icon on the right by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
})
|
||||
|
||||
it('places icon on the left when iconPosition is left', () => {
|
||||
const wrapper = mountComponent({iconPosition: 'left'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('new@example.com')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new@example.com'])
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mountComponent({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Email invalide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Email invalide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows error style on icon', () => {
|
||||
const wrapper = mountComponent({error: 'Error'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Email valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Email valide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success style on icon', () => {
|
||||
const wrapper = mountComponent({success: 'Success'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows default icon color when empty and unfocused', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('keeps primary icon color when filled and focused', async () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('keeps default icon color when disabled, even if filled', () => {
|
||||
const wrapper = mountComponent({modelValue: 'user@example.com', disabled: true})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('error overrides focus color on icon', async () => {
|
||||
const wrapper = mountComponent({error: 'Email invalide'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'ex: prenom.nom@malio.fr'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('ex: prenom.nom@malio.fr')
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'email-field', label: 'Email'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('email-field')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('email-field')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Email'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-email-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('aria-invalid is false when no error', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('uses autocomplete off by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('off')
|
||||
})
|
||||
|
||||
it('allows overriding autocomplete', () => {
|
||||
const wrapper = mountComponent({autocomplete: 'email'})
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('email')
|
||||
})
|
||||
})
|
||||
@@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="email"
|
||||
inputmode="email"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: 'mdi:email-outline',
|
||||
iconPosition: 'right',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-email-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.inputClass,
|
||||
iconInputPaddingClass.value,
|
||||
focusPaddingClass.value,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
labelPositionClass.value,
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
if (!props.iconName) return ''
|
||||
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3 !pr-10'
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height { transition: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,165 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import InputNumber from './InputNumber.vue'
|
||||
|
||||
type InputNumberProps = {
|
||||
modelValue?: string | null
|
||||
label?: string
|
||||
readonly?: boolean
|
||||
min?: number | string
|
||||
max?: number | string
|
||||
}
|
||||
|
||||
const InputNumberForTest = InputNumber as DefineComponent<InputNumberProps>
|
||||
|
||||
const mountInputNumber = (props: InputNumberProps = {}) =>
|
||||
mount(InputNumberForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputNumber', () => {
|
||||
it('renders the input with a fixed 22px height', () => {
|
||||
const wrapper = mountInputNumber()
|
||||
const input = wrapper.get('input')
|
||||
|
||||
expect(input.classes()).toContain('h-[22px]')
|
||||
})
|
||||
|
||||
it('renders the increment and decrement buttons with a fixed 20px height', () => {
|
||||
const wrapper = mountInputNumber()
|
||||
const buttons = wrapper.findAll('button')
|
||||
|
||||
expect(buttons).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('still emits update:modelValue on input', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('99')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['99'])
|
||||
})
|
||||
|
||||
it('filters letters from the input value', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('a1b2c3')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['123'])
|
||||
expect(input.element.value).toBe('123')
|
||||
})
|
||||
|
||||
it('formats large numbers with spaces in the input display', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('1000000')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1000000'])
|
||||
expect(input.element.value).toBe('1 000 000')
|
||||
})
|
||||
|
||||
it('accepts decimal values with commas', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12,5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
|
||||
expect(input.element.value).toBe('12.5')
|
||||
})
|
||||
|
||||
it('keeps a trailing decimal separator while typing', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12,')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.'])
|
||||
expect(input.element.value).toBe('12.')
|
||||
})
|
||||
|
||||
it('accepts a decimal starting with a comma', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: ''})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue(',5')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
|
||||
expect(input.element.value).toBe('0.5')
|
||||
})
|
||||
|
||||
it('increments the current value when clicking plus', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2'})
|
||||
|
||||
await wrapper.findAll('button')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3'])
|
||||
})
|
||||
|
||||
it('increments decimal values with a step of 1', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '1.5'})
|
||||
|
||||
await wrapper.findAll('button')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2.5'])
|
||||
})
|
||||
|
||||
it('decrements the current value when clicking minus', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2'})
|
||||
|
||||
await wrapper.findAll('button')[0].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1'])
|
||||
})
|
||||
|
||||
it('does not change the value from buttons when readonly', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2', readonly: true})
|
||||
|
||||
await wrapper.findAll('button')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disables minus and prevents decrement at min', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2', min: 2})
|
||||
const minusButton = wrapper.findAll('button')[0]
|
||||
|
||||
expect(minusButton.attributes('disabled')).toBeDefined()
|
||||
|
||||
await minusButton.trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disables plus and prevents increment at max', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '2', max: 2})
|
||||
const plusButton = wrapper.findAll('button')[1]
|
||||
|
||||
expect(plusButton.attributes('disabled')).toBeDefined()
|
||||
|
||||
await plusButton.trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('clamps manual input to max', async () => {
|
||||
const wrapper = mountInputNumber({modelValue: '', max: 5})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('12')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['5'])
|
||||
expect(input.element.value).toBe('5')
|
||||
})
|
||||
})
|
||||
@@ -1,305 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :class="mergedGroupClass" >
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="isMinusDisabled"
|
||||
@click="decrement"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:minus"
|
||||
:class="mergedButtonMinusClass"
|
||||
/>
|
||||
</button>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:style="inputWidthStyle"
|
||||
:value="displayedValue"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="_"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="isPlusDisabled"
|
||||
@click="increment"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:plus"
|
||||
:class="mergedButtonPlusClass"
|
||||
/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputNumber', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
min?: number | string
|
||||
max?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
|
||||
// Ajoute un separateur de milliers pour l'affichage dans le champ.
|
||||
const formatDisplayValue = (value: string) => {
|
||||
if (!value) return ''
|
||||
const [integerPart = '', decimalPart] = value.split('.')
|
||||
const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
|
||||
|
||||
if (decimalPart !== undefined) {
|
||||
return `${formattedIntegerPart}.${decimalPart}`
|
||||
}
|
||||
|
||||
return formattedIntegerPart
|
||||
}
|
||||
|
||||
// Valeur visible dans l'input, avec formatage des milliers.
|
||||
const displayedValue = computed(() => formatDisplayValue(currentValue.value))
|
||||
const inputCharacterWidth = computed(() => Math.max(displayedValue.value.length, 1))
|
||||
|
||||
// Transforme min/max en nombres utilisables.
|
||||
const parseBound = (value: number | string | undefined) => {
|
||||
if (value === undefined || value === '') return undefined
|
||||
const parsedValue = Number.parseFloat(String(value).replace(',', '.'))
|
||||
return Number.isNaN(parsedValue) ? undefined : parsedValue
|
||||
}
|
||||
|
||||
const minValue = computed(() => parseBound(props.min))
|
||||
const maxValue = computed(() => parseBound(props.max))
|
||||
|
||||
// Recupere la valeur numerique brute actuellement saisie.
|
||||
const currentNumericValue = computed(() => {
|
||||
if (currentValue.value === '') return undefined
|
||||
const parsedValue = Number.parseFloat(currentValue.value)
|
||||
return Number.isNaN(parsedValue) ? undefined : parsedValue
|
||||
})
|
||||
|
||||
const inputWidthStyle = computed(() => ({
|
||||
width: `calc(${inputCharacterWidth.value}ch + 30px)`,
|
||||
maxWidth: '100%',
|
||||
}))
|
||||
|
||||
const isMinusDisabled = computed(() =>
|
||||
props.disabled || currentNumericValue.value <= minValue.value,
|
||||
)
|
||||
|
||||
const isPlusDisabled = computed(() =>
|
||||
props.disabled || currentNumericValue.value >= maxValue.value,
|
||||
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
' peer h-[22px] min-w-0 border bg-white text-center outline-none placeholder:text-transparent text-lg border-x-0 border-black',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: '',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'cursor-pointer text-black mr-4 text-[18px]',
|
||||
hasError.value ? 'text-m-danger' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60' : '',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedButtonMinusClass = computed(() =>
|
||||
twMerge(
|
||||
'h-[22px] w-[40px] border border-black rounded-s-[3px]',
|
||||
isMinusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
|
||||
hasError.value
|
||||
? 'border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: '',
|
||||
),
|
||||
)
|
||||
|
||||
const mergedButtonPlusClass = computed(() =>
|
||||
twMerge(
|
||||
'h-[22px] w-[40px] border border-black rounded-e-[3px]',
|
||||
isPlusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
|
||||
hasError.value
|
||||
? 'border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: '',
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
// Met a jour l'etat local si besoin puis emet la valeur brute.
|
||||
const updateValue = (value: string) => {
|
||||
if (!isControlled.value) {
|
||||
localValue.value = value
|
||||
}
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Force la valeur a rester entre les bornes min et max.
|
||||
const clampValue = (value: number) => {
|
||||
if (minValue.value !== undefined && value < minValue.value) return minValue.value
|
||||
if (maxValue.value !== undefined && value > maxValue.value) return maxValue.value
|
||||
return value
|
||||
}
|
||||
|
||||
// Garde uniquement les chiffres et la virgule puis applique les bornes.
|
||||
const normalizeValue = (value: string) => {
|
||||
const sanitizedValue = value
|
||||
.replace(/[^\d,.]/g, '')
|
||||
.replace(/,/g, '.')
|
||||
|
||||
const [integerPart = '', ...decimalParts] = sanitizedValue.split('.')
|
||||
const decimalPart = decimalParts.join('')
|
||||
const hasDecimalSeparator = sanitizedValue.includes('.')
|
||||
|
||||
if (hasDecimalSeparator) {
|
||||
const normalizedValue = `${integerPart || '0'}.${decimalPart}`
|
||||
const parsedValue = Number.parseFloat(normalizedValue)
|
||||
|
||||
if (Number.isNaN(parsedValue)) return ''
|
||||
|
||||
const clampedValue = clampValue(parsedValue)
|
||||
if (clampedValue !== parsedValue) return String(clampedValue)
|
||||
|
||||
return decimalPart === '' ? `${integerPart || '0'}.` : normalizedValue
|
||||
}
|
||||
|
||||
return integerPart === '' ? '' : String(clampValue(Number.parseFloat(integerPart)))
|
||||
}
|
||||
|
||||
// Reformate l'affichage dans le champ tout en conservant une valeur brute pour le v-model.
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const normalizedValue = normalizeValue(target.value)
|
||||
|
||||
target.value = formatDisplayValue(normalizedValue)
|
||||
updateValue(normalizedValue)
|
||||
}
|
||||
|
||||
// Retourne la valeur numerique courante, ou 0 si le champ est vide.
|
||||
const getNumericValue = () => {
|
||||
const parsedValue = Number.parseFloat(currentValue.value || '0')
|
||||
return Number.isNaN(parsedValue) ? 0 : parsedValue
|
||||
}
|
||||
|
||||
// Retire 1 a la valeur si l'action est autorisee.
|
||||
const decrement = () => {
|
||||
if (props.disabled || props.readonly || isMinusDisabled.value) return
|
||||
updateValue(String(clampValue(getNumericValue() - 1)))
|
||||
}
|
||||
|
||||
// Ajoute 1 a la valeur si l'action est autorisee.
|
||||
const increment = () => {
|
||||
if (props.disabled || props.readonly || isPlusDisabled.value) return
|
||||
updateValue(String(clampValue(getNumericValue() + 1)))
|
||||
}
|
||||
</script>
|
||||
@@ -1,188 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import InputPassword from './InputPassword.vue'
|
||||
|
||||
type InputPasswordProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
}
|
||||
|
||||
const InputPasswordForTest = InputPassword as DefineComponent<InputPasswordProps>
|
||||
|
||||
const mountComponent = (props: InputPasswordProps = {}) =>
|
||||
mount(InputPasswordForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputPassword', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountComponent({modelValue: 'secret123'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('secret123')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Mot de passe'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Mot de passe')
|
||||
})
|
||||
|
||||
it('has type password by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('password')
|
||||
})
|
||||
|
||||
it('toggles to type text when icon is clicked', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('text')
|
||||
})
|
||||
|
||||
it('toggles back to password on second click', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('password')
|
||||
})
|
||||
|
||||
it('does not render icon when displayIcon is false', () => {
|
||||
const wrapper = mountComponent({displayIcon: false})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders icon by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('shows eye-off-outline icon when password is hidden', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:eye-off-outline')
|
||||
})
|
||||
|
||||
it('shows eye-outline icon when password is visible', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('[data-test="icon"]').trigger('click')
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:eye-outline')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('new password')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new password'])
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mountComponent({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Mot de passe requis'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Mot de passe requis')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows error style on icon', () => {
|
||||
const wrapper = mountComponent({error: 'Error'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Mot de passe valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Mot de passe valide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success style on icon', () => {
|
||||
const wrapper = mountComponent({success: 'Success'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'pwd', label: 'Password'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('pwd')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('pwd')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Password'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-password-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('aria-invalid is false when no error', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: 'secret'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
@@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:minlength="minLength"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="displayIcon"
|
||||
:icon="isPasswordVisible ? 'mdi:eye-outline' : 'mdi:eye-off-outline'"
|
||||
:width="24"
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
iconStateClass,
|
||||
'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
@click="toggleVisibility"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputPassword', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
maxLength: undefined,
|
||||
minLength: undefined,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
displayIcon: true,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
const isPasswordVisible = ref(false)
|
||||
|
||||
const toggleVisibility = () => {
|
||||
isPasswordVisible.value = !isPasswordVisible.value
|
||||
}
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-password-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.displayIcon ? '!pr-10' : '',
|
||||
'focus:pl-[11px]',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
'left-3',
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return 'text-m-muted'
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height { transition: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,308 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import InputPhone from './InputPhone.vue'
|
||||
|
||||
type InputPhoneProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
mask?: string
|
||||
addable?: boolean
|
||||
addIconName?: string
|
||||
addButtonLabel?: string
|
||||
}
|
||||
|
||||
const InputPhoneForTest = InputPhone as DefineComponent<InputPhoneProps>
|
||||
|
||||
const mountComponent = (props: InputPhoneProps = {}) =>
|
||||
mount(InputPhoneForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputPhone', () => {
|
||||
it('renders the initial input value', () => {
|
||||
const wrapper = mountComponent({modelValue: '+33 6 12 34 56 78'})
|
||||
|
||||
expect(wrapper.get('input').element.value).toBe('+33 6 12 34 56 78')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Téléphone'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Téléphone')
|
||||
})
|
||||
|
||||
it('has type tel', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('type')).toBe('tel')
|
||||
})
|
||||
|
||||
it('has inputmode tel', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('inputmode')).toBe('tel')
|
||||
})
|
||||
|
||||
it('renders the default phone icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:phone-outline')
|
||||
})
|
||||
|
||||
it('allows overriding the icon', () => {
|
||||
const wrapper = mountComponent({iconName: 'mdi:cellphone'})
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:cellphone')
|
||||
})
|
||||
|
||||
it('does not render icon when iconName is empty', () => {
|
||||
const wrapper = mountComponent({iconName: ''})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('places icon on the left by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-[10px]')
|
||||
})
|
||||
|
||||
it('places icon on the right when iconPosition is right', () => {
|
||||
const wrapper = mountComponent({iconPosition: 'right'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-[10px]')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
|
||||
await wrapper.get('input').setValue('+33612345678')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['+33612345678'])
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('sets readonly when true', () => {
|
||||
const wrapper = mountComponent({readonly: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Numéro invalide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Numéro invalide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows error style on icon', () => {
|
||||
const wrapper = mountComponent({error: 'Error'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Numéro valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Numéro valide')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success style on icon', () => {
|
||||
const wrapper = mountComponent({success: 'Success'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows default icon color when empty and unfocused', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: '+33612345678'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('keeps default icon color when disabled, even if filled', () => {
|
||||
const wrapper = mountComponent({modelValue: '+33612345678', disabled: true})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
|
||||
})
|
||||
|
||||
it('error overrides focus color on icon', async () => {
|
||||
const wrapper = mountComponent({error: 'Numéro invalide'})
|
||||
|
||||
await wrapper.get('input').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'Format international recommandé'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Format international recommandé')
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'phone-field', label: 'Téléphone'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('phone-field')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('phone-field')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Téléphone'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-phone-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('aria-invalid is false when no error', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('uses autocomplete off by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('off')
|
||||
})
|
||||
|
||||
it('allows overriding autocomplete', () => {
|
||||
const wrapper = mountComponent({autocomplete: 'tel'})
|
||||
|
||||
expect(wrapper.get('input').attributes('autocomplete')).toBe('tel')
|
||||
})
|
||||
|
||||
it('does not render add button by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('[data-test="add-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders add button when addable is true', () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
expect(wrapper.find('[data-test="add-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('emits add event when add button is clicked', async () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
await wrapper.get('[data-test="add-button"]').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('add')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not emit add when disabled', async () => {
|
||||
const wrapper = mountComponent({addable: true, disabled: true})
|
||||
|
||||
await wrapper.get('[data-test="add-button"]').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('add')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('does not emit add when readonly', async () => {
|
||||
const wrapper = mountComponent({addable: true, readonly: true})
|
||||
|
||||
await wrapper.get('[data-test="add-button"]').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('add')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('disables add button when disabled', () => {
|
||||
const wrapper = mountComponent({addable: true, disabled: true})
|
||||
|
||||
expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('disables add button when readonly', () => {
|
||||
const wrapper = mountComponent({addable: true, readonly: true})
|
||||
|
||||
expect(wrapper.get('[data-test="add-button"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('renders the default add icon (mdi:plus)', () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
const addIcon = icons[icons.length - 1]
|
||||
expect(addIcon.props('icon')).toBe('mdi:plus')
|
||||
})
|
||||
|
||||
it('allows overriding the add icon', () => {
|
||||
const wrapper = mountComponent({addable: true, addIconName: 'mdi:phone-plus'})
|
||||
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
const addIcon = icons[icons.length - 1]
|
||||
expect(addIcon.props('icon')).toBe('mdi:phone-plus')
|
||||
})
|
||||
|
||||
it('exposes aria-label on add button', () => {
|
||||
const wrapper = mountComponent({addable: true, addButtonLabel: 'Ajouter un autre numéro'})
|
||||
|
||||
expect(wrapper.get('[data-test="add-button"]').attributes('aria-label')).toBe('Ajouter un autre numéro')
|
||||
})
|
||||
|
||||
it('adds right padding to input when addable', () => {
|
||||
const wrapper = mountComponent({addable: true})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('!pr-10')
|
||||
})
|
||||
|
||||
it('applies mask via maska directive', async () => {
|
||||
const wrapper = mountComponent({mask: '+## # ## ## ## ##'})
|
||||
|
||||
await wrapper.get('input').setValue('33612345678')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeDefined()
|
||||
})
|
||||
})
|
||||
@@ -1,274 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
v-maska="mask"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="tel"
|
||||
inputmode="tel"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
<button
|
||||
v-if="addable"
|
||||
type="button"
|
||||
:disabled="disabled || readonly"
|
||||
:aria-label="addButtonLabel"
|
||||
data-test="add-button"
|
||||
:class="mergedAddButtonClass"
|
||||
@click="onAdd"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="addIconName"
|
||||
:width="24"
|
||||
:height="24"
|
||||
data-test="add-icon"
|
||||
/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import type {MaskInputOptions} from 'maska'
|
||||
import {vMaska} from 'maska/vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputPhone', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
mask?: string | MaskInputOptions
|
||||
addable?: boolean
|
||||
addIconName?: string
|
||||
addButtonLabel?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: 'mdi:phone-outline',
|
||||
iconPosition: 'left',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
mask: undefined,
|
||||
addable: false,
|
||||
addIconName: 'mdi:plus',
|
||||
addButtonLabel: 'Ajouter un numéro',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-phone-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.inputClass,
|
||||
iconInputPaddingClass.value,
|
||||
focusPaddingClass.value,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
labelPositionClass.value,
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedAddButtonClass = computed(() =>
|
||||
twMerge(
|
||||
'absolute right-[10px] top-1/2 -translate-y-1/2 cursor-pointer text-m-primary transition-opacity hover:opacity-70',
|
||||
(props.disabled || props.readonly) ? 'cursor-not-allowed opacity-40 hover:opacity-40' : '',
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
(event: 'add'): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
|
||||
const onAdd = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
emit('add')
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
const leftIcon = props.iconName && props.iconPosition === 'left'
|
||||
const rightIcon = props.iconName && props.iconPosition === 'right'
|
||||
const parts: string[] = []
|
||||
if (leftIcon) parts.push('!pl-11')
|
||||
if (rightIcon || props.addable) parts.push('!pr-10')
|
||||
return parts.join(' ')
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height { transition: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,165 +0,0 @@
|
||||
import {afterEach, describe, expect, it} from 'vitest'
|
||||
import {flushPromises, mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import InputRichText from './InputRichText.vue'
|
||||
|
||||
type InputRichTextProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
minHeight?: string
|
||||
editable?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
outputFormat?: 'markdown' | 'html'
|
||||
groupClass?: string
|
||||
labelClass?: string
|
||||
editorClass?: string
|
||||
}
|
||||
|
||||
const InputRichTextForTest = InputRichText as DefineComponent<InputRichTextProps>
|
||||
|
||||
const mountComponent = async (props: InputRichTextProps = {}) => {
|
||||
const wrapper = mount(InputRichTextForTest, {
|
||||
props,
|
||||
attachTo: document.body,
|
||||
})
|
||||
await flushPromises()
|
||||
return wrapper
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
document.body.replaceChildren()
|
||||
})
|
||||
|
||||
describe('MalioInputRichText', () => {
|
||||
it('renders the label and reuses a provided id', async () => {
|
||||
const wrapper = await mountComponent({id: 'custom-rt-id', label: 'Description'})
|
||||
|
||||
const label = wrapper.get('label')
|
||||
expect(label.text()).toBe('Description')
|
||||
expect(label.attributes('for')).toBe('custom-rt-id')
|
||||
expect(wrapper.get('#custom-rt-id').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('generates an id when missing', async () => {
|
||||
const wrapper = await mountComponent({label: 'Description'})
|
||||
|
||||
const labelFor = wrapper.get('label').attributes('for')
|
||||
expect(labelFor?.startsWith('malio-input-rich-text-')).toBe(true)
|
||||
})
|
||||
|
||||
it('renders the toolbar buttons in editable mode', async () => {
|
||||
const wrapper = await mountComponent({modelValue: ''})
|
||||
|
||||
const buttons = wrapper.findAll('button[type="button"]')
|
||||
expect(buttons.length).toBeGreaterThanOrEqual(13)
|
||||
expect(wrapper.find('button[title="Gras"]').exists()).toBe(true)
|
||||
expect(wrapper.find('button[title="Italique"]').exists()).toBe(true)
|
||||
expect(wrapper.find('button[title="Lien"]').exists()).toBe(true)
|
||||
expect(wrapper.find('button[title="Couleur du texte"]').exists()).toBe(true)
|
||||
expect(wrapper.find('button[title="Surlignage"]').exists()).toBe(true)
|
||||
expect(wrapper.find('button[title="Annuler"]').exists()).toBe(true)
|
||||
expect(wrapper.find('button[title="Rétablir"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('opens and closes the text color palette', async () => {
|
||||
const wrapper = await mountComponent({modelValue: ''})
|
||||
|
||||
expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
|
||||
|
||||
await wrapper.get('button[title="Couleur du texte"]').trigger('click')
|
||||
expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
|
||||
|
||||
await wrapper.get('button[title="Couleur du texte"]').trigger('click')
|
||||
expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('opens the highlight palette and closes the color palette', async () => {
|
||||
const wrapper = await mountComponent({modelValue: ''})
|
||||
|
||||
await wrapper.get('button[title="Couleur du texte"]').trigger('click')
|
||||
expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
|
||||
|
||||
await wrapper.get('button[title="Surlignage"]').trigger('click')
|
||||
expect(wrapper.find('[aria-label="Palette de surlignage"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('disables color and highlight buttons when readonly', async () => {
|
||||
const wrapper = await mountComponent({readonly: true, modelValue: ''})
|
||||
|
||||
expect(wrapper.get('button[title="Couleur du texte"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('button[title="Surlignage"]').attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not render the toolbar in readonly display mode (editable=false)', async () => {
|
||||
const wrapper = await mountComponent({editable: false, modelValue: '**hi**'})
|
||||
|
||||
expect(wrapper.find('button[title="Gras"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('disables toolbar buttons when disabled', async () => {
|
||||
const wrapper = await mountComponent({disabled: true, modelValue: ''})
|
||||
|
||||
const boldBtn = wrapper.get('button[title="Gras"]')
|
||||
expect(boldBtn.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('disables toolbar buttons when readonly', async () => {
|
||||
const wrapper = await mountComponent({readonly: true, modelValue: ''})
|
||||
|
||||
const boldBtn = wrapper.get('button[title="Gras"]')
|
||||
expect(boldBtn.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('shows hint message in muted color', async () => {
|
||||
const wrapper = await mountComponent({hint: 'Helpful hint'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
|
||||
})
|
||||
|
||||
it('shows error state on wrapper, label and message', async () => {
|
||||
const wrapper = await mountComponent({label: 'Description', error: 'Editor error'})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
|
||||
expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
|
||||
})
|
||||
|
||||
it('shows success state on wrapper, label and message', async () => {
|
||||
const wrapper = await mountComponent({label: 'Description', success: 'Editor success'})
|
||||
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Editor success')
|
||||
expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success', async () => {
|
||||
const wrapper = await mountComponent({error: 'Editor error', success: 'Editor success'})
|
||||
|
||||
expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
|
||||
})
|
||||
|
||||
it('sets aria-invalid and aria-describedby on the editor content when error', async () => {
|
||||
const wrapper = await mountComponent({id: 'rt-aria', error: 'Boom'})
|
||||
|
||||
const editorContent = wrapper.find('[aria-invalid="true"]')
|
||||
expect(editorContent.exists()).toBe(true)
|
||||
expect(editorContent.attributes('aria-describedby')).toBe('rt-aria-describedby')
|
||||
})
|
||||
|
||||
it('renders initial markdown content visually', async () => {
|
||||
const wrapper = await mountComponent({modelValue: '## Mon titre\n\nUn paragraphe.'})
|
||||
|
||||
const html = wrapper.html()
|
||||
expect(html).toContain('Mon titre')
|
||||
expect(html).toContain('Un paragraphe.')
|
||||
})
|
||||
})
|
||||
@@ -1,574 +0,0 @@
|
||||
<template>
|
||||
<div :class="mergedGroupClass">
|
||||
<label
|
||||
v-if="label"
|
||||
:for="editorId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<!-- Mode lecture seule (rendu uniquement) -->
|
||||
<div
|
||||
v-if="!editable"
|
||||
:id="editorId"
|
||||
:class="mergedReadonlyClass"
|
||||
>
|
||||
<EditorContent :editor="editor" />
|
||||
</div>
|
||||
|
||||
<!-- Mode éditable -->
|
||||
<div
|
||||
v-else
|
||||
:id="editorId"
|
||||
:class="mergedEditorWrapperClass"
|
||||
@click="focusEditor"
|
||||
>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-0.5 border-b border-m-border bg-m-bg p-1"
|
||||
@click.stop
|
||||
>
|
||||
<button
|
||||
v-for="btn in toolbarButtons"
|
||||
:key="btn.key"
|
||||
type="button"
|
||||
class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:class="btn.isActive() ? 'bg-m-primary/15 text-m-primary' : ''"
|
||||
:title="btn.title"
|
||||
:disabled="disabled || readonly"
|
||||
:aria-label="btn.title"
|
||||
:aria-pressed="btn.isActive()"
|
||||
@mousedown.prevent
|
||||
@click="btn.action()"
|
||||
>
|
||||
<IconifyIcon :icon="btn.icon" :width="18" :height="18" />
|
||||
</button>
|
||||
|
||||
<span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
|
||||
|
||||
<div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:class="colorPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
|
||||
title="Couleur du texte"
|
||||
aria-label="Couleur du texte"
|
||||
:aria-expanded="colorPickerOpen"
|
||||
:disabled="disabled || readonly"
|
||||
@mousedown.prevent
|
||||
@click="toggleColorPicker"
|
||||
>
|
||||
<IconifyIcon icon="mdi:format-color-text" :width="18" :height="18" />
|
||||
<span
|
||||
class="-mt-0.5 block h-1 w-4 rounded-sm"
|
||||
:style="{ backgroundColor: currentTextColor ?? 'transparent' }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
v-if="colorPickerOpen"
|
||||
class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
|
||||
role="dialog"
|
||||
aria-label="Palette couleur du texte"
|
||||
>
|
||||
<div class="grid grid-cols-4 gap-1">
|
||||
<button
|
||||
v-for="swatch in textColorSwatches"
|
||||
:key="swatch.value"
|
||||
type="button"
|
||||
class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
|
||||
:class="currentTextColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
|
||||
:style="{ backgroundColor: swatch.value }"
|
||||
:title="swatch.label"
|
||||
:aria-label="swatch.label"
|
||||
@mousedown.prevent
|
||||
@click="applyTextColor(swatch.value)"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
|
||||
@mousedown.prevent
|
||||
@click="applyTextColor(null)"
|
||||
>
|
||||
<IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
|
||||
Aucune couleur
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:class="highlightPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
|
||||
title="Surlignage"
|
||||
aria-label="Surlignage"
|
||||
:aria-expanded="highlightPickerOpen"
|
||||
:disabled="disabled || readonly"
|
||||
@mousedown.prevent
|
||||
@click="toggleHighlightPicker"
|
||||
>
|
||||
<IconifyIcon icon="mdi:marker" :width="18" :height="18" />
|
||||
<span
|
||||
class="-mt-0.5 block h-1 w-4 rounded-sm"
|
||||
:style="{ backgroundColor: currentHighlightColor ?? 'transparent' }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
v-if="highlightPickerOpen"
|
||||
class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
|
||||
role="dialog"
|
||||
aria-label="Palette de surlignage"
|
||||
>
|
||||
<div class="grid grid-cols-4 gap-1">
|
||||
<button
|
||||
v-for="swatch in highlightSwatches"
|
||||
:key="swatch.value"
|
||||
type="button"
|
||||
class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
|
||||
:class="currentHighlightColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
|
||||
:style="{ backgroundColor: swatch.value }"
|
||||
:title="swatch.label"
|
||||
:aria-label="swatch.label"
|
||||
@mousedown.prevent
|
||||
@click="applyHighlight(swatch.value)"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
|
||||
@mousedown.prevent
|
||||
@click="applyHighlight(null)"
|
||||
>
|
||||
<IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
|
||||
Aucun surlignage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
title="Annuler"
|
||||
aria-label="Annuler"
|
||||
:disabled="disabled || readonly || !editor?.can().undo()"
|
||||
@mousedown.prevent
|
||||
@click="editor?.chain().focus().undo().run()"
|
||||
>
|
||||
<IconifyIcon icon="mdi:undo" :width="18" :height="18" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
title="Rétablir"
|
||||
aria-label="Rétablir"
|
||||
:disabled="disabled || readonly || !editor?.can().redo()"
|
||||
@mousedown.prevent
|
||||
@click="editor?.chain().focus().redo().run()"
|
||||
>
|
||||
<IconifyIcon icon="mdi:redo" :width="18" :height="18" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<EditorContent
|
||||
:editor="editor"
|
||||
class="malio-rich-text flex flex-1 cursor-text"
|
||||
:style="{ minHeight }"
|
||||
:aria-invalid="hasError || undefined"
|
||||
:aria-describedby="describedBy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${editorId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px]',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import Placeholder from '@tiptap/extension-placeholder'
|
||||
import { TextStyle } from '@tiptap/extension-text-style'
|
||||
import Color from '@tiptap/extension-color'
|
||||
import Highlight from '@tiptap/extension-highlight'
|
||||
import { Markdown } from 'tiptap-markdown'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
defineOptions({ name: 'MalioInputRichText', inheritAttrs: false })
|
||||
|
||||
type OutputFormat = 'markdown' | 'html'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
modelValue?: string | null | undefined
|
||||
placeholder?: string
|
||||
minHeight?: string
|
||||
editable?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
outputFormat?: OutputFormat
|
||||
groupClass?: string
|
||||
labelClass?: string
|
||||
editorClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: '',
|
||||
minHeight: '160px',
|
||||
editable: true,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
outputFormat: 'html',
|
||||
groupClass: '',
|
||||
labelClass: '',
|
||||
editorClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const editor = shallowRef<Editor>()
|
||||
const isFocused = shallowRef(false)
|
||||
|
||||
const editorId = computed(() => props.id?.toString() || `malio-input-rich-text-${generatedId}`)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isInteractionLocked = computed(() => props.disabled || props.readonly)
|
||||
|
||||
const describedBy = computed(() =>
|
||||
hasError.value || hasSuccess.value || props.hint ? `${editorId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'mb-1 block text-sm font-medium',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: isFocused.value
|
||||
? 'text-m-primary'
|
||||
: 'text-m-text',
|
||||
props.disabled ? 'text-black/60' : '',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedEditorWrapperClass = computed(() =>
|
||||
twMerge(
|
||||
'rich-text-wrapper flex flex-col overflow-hidden rounded-md border bg-white transition-colors',
|
||||
hasError.value
|
||||
? 'border-m-danger focus-within:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus-within:border-m-success'
|
||||
: isFocused.value
|
||||
? 'border-m-primary'
|
||||
: 'border-m-muted hover:border-m-text/60',
|
||||
props.disabled ? 'cursor-not-allowed bg-m-bg/50 opacity-70' : '',
|
||||
props.editorClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedReadonlyClass = computed(() =>
|
||||
twMerge(
|
||||
'malio-rich-text prose prose-sm max-w-none rounded-md border border-m-border bg-white p-3',
|
||||
'prose-headings:font-semibold prose-a:text-m-primary',
|
||||
'prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none',
|
||||
'prose-pre:bg-m-text prose-pre:text-white',
|
||||
props.editorClass,
|
||||
),
|
||||
)
|
||||
|
||||
const focusEditor = () => {
|
||||
if (isInteractionLocked.value) return
|
||||
closePickers()
|
||||
editor.value?.commands.focus()
|
||||
}
|
||||
|
||||
const htmlPattern = /<\/?[a-z][\s\S]*>/i
|
||||
|
||||
const normalizeEditorInput = (value: string | null | undefined): string => {
|
||||
const content = (value ?? '').replace(/\r\n?/g, '\n')
|
||||
if (htmlPattern.test(content)) return content
|
||||
return content.split('\n').join('\n\n').replace(/\n{3,}/g, '\n\n')
|
||||
}
|
||||
|
||||
const promptForLink = () => {
|
||||
if (!editor.value) return
|
||||
const previous = editor.value.getAttributes('link').href as string | undefined
|
||||
const url = window.prompt('URL du lien (vide pour retirer)', previous ?? '')
|
||||
if (url === null) return
|
||||
if (url === '') {
|
||||
editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
|
||||
return
|
||||
}
|
||||
editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
|
||||
}
|
||||
|
||||
type ColorSwatch = { label: string; value: string }
|
||||
|
||||
const textColorSwatches: ColorSwatch[] = [
|
||||
{ label: 'Rouge', value: '#bf2600' },
|
||||
{ label: 'Orange', value: '#ff8b00' },
|
||||
{ label: 'Jaune', value: '#ffc400' },
|
||||
{ label: 'Vert', value: '#00875a' },
|
||||
{ label: 'Turquoise', value: '#00a3bf' },
|
||||
{ label: 'Bleu', value: '#0747a6' },
|
||||
{ label: 'Violet', value: '#5243aa' },
|
||||
{ label: 'Gris', value: '#42526e' },
|
||||
]
|
||||
|
||||
const highlightSwatches: ColorSwatch[] = [
|
||||
{ label: 'Rouge', value: '#fdd0c8' },
|
||||
{ label: 'Orange', value: '#ffe2c2' },
|
||||
{ label: 'Jaune', value: '#fff0b3' },
|
||||
{ label: 'Vert', value: '#c6edd0' },
|
||||
{ label: 'Turquoise', value: '#c1ecf0' },
|
||||
{ label: 'Bleu', value: '#cce0ff' },
|
||||
{ label: 'Violet', value: '#dfd8fa' },
|
||||
{ label: 'Gris', value: '#dfe1e6' },
|
||||
]
|
||||
|
||||
const colorPickerOpen = ref(false)
|
||||
const highlightPickerOpen = ref(false)
|
||||
|
||||
const closePickers = () => {
|
||||
colorPickerOpen.value = false
|
||||
highlightPickerOpen.value = false
|
||||
}
|
||||
|
||||
const toggleColorPicker = () => {
|
||||
highlightPickerOpen.value = false
|
||||
colorPickerOpen.value = !colorPickerOpen.value
|
||||
}
|
||||
|
||||
const toggleHighlightPicker = () => {
|
||||
colorPickerOpen.value = false
|
||||
highlightPickerOpen.value = !highlightPickerOpen.value
|
||||
}
|
||||
|
||||
const applyTextColor = (value: string | null) => {
|
||||
if (!editor.value) return
|
||||
if (value === null) {
|
||||
editor.value.chain().focus().unsetColor().run()
|
||||
} else {
|
||||
editor.value.chain().focus().setColor(value).run()
|
||||
}
|
||||
colorPickerOpen.value = false
|
||||
}
|
||||
|
||||
const applyHighlight = (value: string | null) => {
|
||||
if (!editor.value) return
|
||||
if (value === null) {
|
||||
editor.value.chain().focus().unsetHighlight().run()
|
||||
} else {
|
||||
editor.value.chain().focus().setHighlight({ color: value }).run()
|
||||
}
|
||||
highlightPickerOpen.value = false
|
||||
}
|
||||
|
||||
const currentTextColor = computed(() => {
|
||||
const attrs = editor.value?.getAttributes('textStyle') as { color?: string } | undefined
|
||||
return attrs?.color ?? null
|
||||
})
|
||||
|
||||
const currentHighlightColor = computed(() => {
|
||||
const attrs = editor.value?.getAttributes('highlight') as { color?: string } | undefined
|
||||
return attrs?.color ?? null
|
||||
})
|
||||
|
||||
const toolbarButtons = computed(() => {
|
||||
const e = editor.value
|
||||
return [
|
||||
{ key: 'bold', icon: 'mdi:format-bold', title: 'Gras', isActive: () => !!e?.isActive('bold'), action: () => e?.chain().focus().toggleBold().run() },
|
||||
{ key: 'italic', icon: 'mdi:format-italic', title: 'Italique', isActive: () => !!e?.isActive('italic'), action: () => e?.chain().focus().toggleItalic().run() },
|
||||
{ key: 'strike', icon: 'mdi:format-strikethrough', title: 'Barré', isActive: () => !!e?.isActive('strike'), action: () => e?.chain().focus().toggleStrike().run() },
|
||||
{ key: 'h2', icon: 'mdi:format-header-2', title: 'Titre H2', isActive: () => !!e?.isActive('heading', { level: 2 }), action: () => e?.chain().focus().toggleHeading({ level: 2 }).run() },
|
||||
{ key: 'h3', icon: 'mdi:format-header-3', title: 'Titre H3', isActive: () => !!e?.isActive('heading', { level: 3 }), action: () => e?.chain().focus().toggleHeading({ level: 3 }).run() },
|
||||
{ key: 'bulletList', icon: 'mdi:format-list-bulleted', title: 'Liste à puces', isActive: () => !!e?.isActive('bulletList'), action: () => e?.chain().focus().toggleBulletList().run() },
|
||||
{ key: 'orderedList', icon: 'mdi:format-list-numbered', title: 'Liste numérotée', isActive: () => !!e?.isActive('orderedList'), action: () => e?.chain().focus().toggleOrderedList().run() },
|
||||
{ key: 'blockquote', icon: 'mdi:format-quote-close', title: 'Citation', isActive: () => !!e?.isActive('blockquote'), action: () => e?.chain().focus().toggleBlockquote().run() },
|
||||
{ key: 'code', icon: 'mdi:code-tags', title: 'Code inline', isActive: () => !!e?.isActive('code'), action: () => e?.chain().focus().toggleCode().run() },
|
||||
{ key: 'codeBlock', icon: 'mdi:code-braces-box', title: 'Bloc de code', isActive: () => !!e?.isActive('codeBlock'), action: () => e?.chain().focus().toggleCodeBlock().run() },
|
||||
{ key: 'link', icon: 'mdi:link-variant', title: 'Lien', isActive: () => !!e?.isActive('link'), action: promptForLink },
|
||||
]
|
||||
})
|
||||
|
||||
const getCurrentValue = (): string => {
|
||||
if (!editor.value) return ''
|
||||
if (props.outputFormat === 'html') return editor.value.getHTML()
|
||||
const storage = (editor.value.storage as unknown as Record<string, { getMarkdown?: () => string } | undefined>).markdown
|
||||
return storage?.getMarkdown ? storage.getMarkdown() : editor.value.getHTML()
|
||||
}
|
||||
|
||||
const handleDocumentMousedown = (event: MouseEvent) => {
|
||||
if (!colorPickerOpen.value && !highlightPickerOpen.value) return
|
||||
const target = event.target as Node | null
|
||||
if (!target) return
|
||||
const popovers = document.querySelectorAll(`#${editorId.value} [role="dialog"]`)
|
||||
const triggers = document.querySelectorAll(`#${editorId.value} [aria-expanded]`)
|
||||
for (const node of [...popovers, ...triggers]) {
|
||||
if (node.contains(target)) return
|
||||
}
|
||||
closePickers()
|
||||
}
|
||||
|
||||
const handleDocumentKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && (colorPickerOpen.value || highlightPickerOpen.value)) {
|
||||
closePickers()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousedown', handleDocumentMousedown)
|
||||
document.addEventListener('keydown', handleDocumentKeydown)
|
||||
|
||||
editor.value = new Editor({
|
||||
content: normalizeEditorInput(props.modelValue),
|
||||
editable: props.editable && !props.disabled && !props.readonly,
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
heading: { levels: [2, 3] },
|
||||
link: {
|
||||
openOnClick: false,
|
||||
autolink: true,
|
||||
HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
|
||||
},
|
||||
}),
|
||||
TextStyle,
|
||||
Color.configure({ types: ['textStyle'] }),
|
||||
Highlight.configure({ multicolor: true }),
|
||||
Placeholder.configure({
|
||||
placeholder: props.placeholder,
|
||||
}),
|
||||
Markdown.configure({
|
||||
html: true,
|
||||
tightLists: true,
|
||||
bulletListMarker: '-',
|
||||
linkify: true,
|
||||
breaks: false,
|
||||
transformPastedText: true,
|
||||
transformCopiedText: true,
|
||||
}),
|
||||
],
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: 'prose prose-sm max-w-none w-full p-3 focus:outline-none prose-headings:font-semibold prose-a:text-m-primary prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-m-text prose-pre:text-white',
|
||||
},
|
||||
},
|
||||
onUpdate: () => {
|
||||
emit('update:modelValue', getCurrentValue())
|
||||
},
|
||||
onFocus: () => {
|
||||
isFocused.value = true
|
||||
},
|
||||
onBlur: () => {
|
||||
isFocused.value = false
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousedown', handleDocumentMousedown)
|
||||
document.removeEventListener('keydown', handleDocumentKeydown)
|
||||
editor.value?.destroy()
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (incoming) => {
|
||||
if (!editor.value) return
|
||||
if ((incoming ?? '') === getCurrentValue()) return
|
||||
editor.value.commands.setContent(normalizeEditorInput(incoming), { emitUpdate: false })
|
||||
})
|
||||
|
||||
watch(() => [props.editable, props.disabled, props.readonly], () => {
|
||||
editor.value?.setEditable(props.editable && !props.disabled && !props.readonly)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.malio-rich-text :deep(.ProseMirror) {
|
||||
outline: none;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.malio-rich-text :deep(.ProseMirror > *:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.malio-rich-text :deep(.ProseMirror > *:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.malio-rich-text :deep(.ProseMirror p.is-editor-empty:first-child::before) {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: rgb(var(--m-muted));
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
.malio-rich-text :deep(h2) {
|
||||
margin: 0.75rem 0 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
.malio-rich-text :deep(h3) {
|
||||
margin: 0.65rem 0 0.4rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
.malio-rich-text :deep(p) {
|
||||
margin: 0.45rem 0;
|
||||
}
|
||||
.malio-rich-text :deep(ul),
|
||||
.malio-rich-text :deep(ol) {
|
||||
margin: 0.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.malio-rich-text :deep(ul) {
|
||||
list-style: disc;
|
||||
}
|
||||
.malio-rich-text :deep(ol) {
|
||||
list-style: decimal;
|
||||
}
|
||||
.malio-rich-text :deep(blockquote) {
|
||||
margin: 0.75rem 0;
|
||||
border-left: 3px solid rgb(var(--m-border));
|
||||
padding-left: 0.75rem;
|
||||
color: rgb(var(--m-muted));
|
||||
}
|
||||
</style>
|
||||
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
v-maska="mask"
|
||||
:name="name"
|
||||
:autocomplete="autocomplete"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:minlength="minLength"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="iconName"
|
||||
:icon="iconName"
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import type {MaskInputOptions} from 'maska'
|
||||
import {vMaska} from 'maska/vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputText', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
maxLength?: number | string
|
||||
minLength?: number | string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
iconName?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
|
||||
iconSize?: string | number
|
||||
iconColor?: string
|
||||
mask?: string | MaskInputOptions
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
iconName: '',
|
||||
iconPosition: 'right',
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
maxLength: undefined,
|
||||
minLength: undefined,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
iconSize: 24,
|
||||
iconColor: 'text-m-muted',
|
||||
mask: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.inputClass,
|
||||
iconInputPaddingClass.value,
|
||||
focusPaddingClass.value,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
labelPositionClass.value,
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
|
||||
const iconInputPaddingClass = computed(() => {
|
||||
if (!props.iconName) return ''
|
||||
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3'
|
||||
})
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
const focusPaddingClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
||||
return 'focus:pl-[11px]'
|
||||
})
|
||||
|
||||
const iconPositionClass = computed(() => {
|
||||
const sideClass = props.iconPosition === 'left' ? 'left-[10px]' : 'right-[10px]'
|
||||
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
||||
})
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return props.iconColor
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return props.iconColor
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height { transition: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,152 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import InputTextArea from './InputTextArea.vue'
|
||||
|
||||
type InputTextAreaProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null
|
||||
size?: number | string
|
||||
textInput?: string
|
||||
textLabel?: string
|
||||
required?: boolean
|
||||
maxLength?: number
|
||||
showCounter?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
rounded?: string
|
||||
}
|
||||
|
||||
const InputTextAreaForTest = InputTextArea as DefineComponent<InputTextAreaProps>
|
||||
|
||||
describe('MalioInputTextArea', () => {
|
||||
it('renders the initial textarea value', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {modelValue: 'initial textarea value'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').element.value).toBe('initial textarea value')
|
||||
})
|
||||
|
||||
it('renders the label text and reuses a provided id', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {id: 'custom-textarea-id', label: 'Description'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').attributes('id')).toBe('custom-textarea-id')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('custom-textarea-id')
|
||||
expect(wrapper.get('label').text()).toBe('Description')
|
||||
})
|
||||
|
||||
it('generates an id when missing', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {label: 'Description'},
|
||||
})
|
||||
|
||||
const textareaId = wrapper.get('textarea').attributes('id')
|
||||
expect(textareaId?.startsWith('malio-input-textarea-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(textareaId)
|
||||
})
|
||||
|
||||
it('applies name, autocomplete and rows attributes', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {name: 'bio', autocomplete: 'on', size: 4},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').attributes('name')).toBe('bio')
|
||||
expect(wrapper.get('textarea').attributes('autocomplete')).toBe('on')
|
||||
expect(wrapper.get('textarea').attributes('rows')).toBe('4')
|
||||
})
|
||||
|
||||
it('sets required, readonly and disabled attributes', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
required: true,
|
||||
readonly: true,
|
||||
disabled: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').attributes('required')).toBeDefined()
|
||||
expect(wrapper.get('textarea').attributes('readonly')).toBeDefined()
|
||||
expect(wrapper.get('textarea').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('textarea').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on input change', async () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {modelValue: ''},
|
||||
})
|
||||
|
||||
await wrapper.get('textarea').setValue('new textarea value')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new textarea value'])
|
||||
})
|
||||
|
||||
it('shows the character counter when enabled', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
modelValue: 'hello',
|
||||
showCounter: true,
|
||||
maxLength: 20,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('span.text-xs').text()).toBe('5/20')
|
||||
expect(wrapper.get('textarea').classes()).toContain('pb-6')
|
||||
})
|
||||
|
||||
it('shows hint message in muted color', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {hint: 'Helpful hint'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
|
||||
})
|
||||
|
||||
it('shows error state on textarea and label', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
label: 'Description',
|
||||
error: 'Textarea error',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
|
||||
expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows success state on textarea and label', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
label: 'Description',
|
||||
success: 'Textarea success',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Textarea success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success', () => {
|
||||
const wrapper = mount(InputTextAreaForTest, {
|
||||
props: {
|
||||
error: 'Textarea error',
|
||||
success: 'Textarea success',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
|
||||
})
|
||||
})
|
||||
@@ -1,191 +0,0 @@
|
||||
<template>
|
||||
<div :class="mergedGroupClass">
|
||||
<textarea
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
|
||||
:autocomplete="autocomplete"
|
||||
class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
|
||||
:class="[
|
||||
isFilled ? 'border-black' : 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
|
||||
hasError
|
||||
? 'border-m-danger focus:border-m-danger'
|
||||
: hasSuccess
|
||||
? 'border-m-success focus:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
textInput,
|
||||
showCounterComputed ? 'pb-6' : '',
|
||||
rounded,
|
||||
]"
|
||||
:required="required"
|
||||
:maxlength="maxLength"
|
||||
:rows="rowsCount"
|
||||
:disabled="disabled"
|
||||
:value="currentValue"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="hasError"
|
||||
:aria-describedby="describedBy"
|
||||
:style="textareaStyle"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
@input="onInput"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
/>
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
|
||||
:class="[
|
||||
shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
|
||||
disabled ? 'text-black/60' : '',
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
|
||||
textLabel,
|
||||
]"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<span
|
||||
v-if="showCounterComputed"
|
||||
class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
|
||||
>
|
||||
{{ currentLength }}/{{ maxLength }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasError || hasSuccess || hint"
|
||||
class="mt-1 flex items-center justify-between gap-2 text-xs"
|
||||
>
|
||||
<p
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'ml-[2px]',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
autocomplete?: string
|
||||
modelValue?: string | null | undefined
|
||||
size?: number | string
|
||||
textInput?: string
|
||||
textLabel?: string
|
||||
resize?: 'none' | 'both' | 'horizontal' | 'vertical'
|
||||
minResizeWidth?: number
|
||||
maxResizeWidth?: number
|
||||
minResizeHeight?: number
|
||||
maxResizeHeight?: number
|
||||
required?: boolean
|
||||
maxLength?: number
|
||||
showCounter?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
rounded?: string
|
||||
groupClass?: string
|
||||
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
autocomplete: 'off',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
size: 2,
|
||||
textInput: 'text-lg',
|
||||
required: false,
|
||||
maxLength: 800,
|
||||
showCounter: false,
|
||||
readonly: false,
|
||||
textLabel: 'text-sm',
|
||||
disabled: false,
|
||||
rounded: 'rounded-md',
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
resize: 'both',
|
||||
minResizeWidth: 280,
|
||||
maxResizeWidth: 640,
|
||||
minResizeHeight: 40,
|
||||
maxResizeHeight: 320,
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative w-full', props.groupClass),
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-textarea-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
|
||||
const currentLength = computed(() => (currentValue.value ?? '').length)
|
||||
const showCounterComputed = computed(() =>
|
||||
props.showCounter && Number(props.maxLength) > 0
|
||||
)
|
||||
const toCssSize = (value: number | string) => (typeof value === 'number' ? `${value}px` : value)
|
||||
const textareaStyle = computed(() => ({
|
||||
resize: props.resize,
|
||||
minWidth: toCssSize(props.minResizeWidth),
|
||||
maxWidth: toCssSize(props.maxResizeWidth),
|
||||
minHeight: toCssSize(props.minResizeHeight),
|
||||
maxHeight: toCssSize(props.maxResizeHeight),
|
||||
}))
|
||||
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
||||
const describedBy = computed(() =>
|
||||
(hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const target = event.target as HTMLTextAreaElement
|
||||
if (!isControlled.value) {
|
||||
localValue.value = target.value
|
||||
}
|
||||
emit('update:modelValue', target.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,189 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import InputUpload from './InputUpload.vue'
|
||||
|
||||
type InputUploadProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
disabled?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
accept?: string
|
||||
}
|
||||
|
||||
const InputUploadForTest = InputUpload as DefineComponent<InputUploadProps>
|
||||
|
||||
const mountComponent = (props: InputUploadProps = {}) =>
|
||||
mount(InputUploadForTest, {
|
||||
props,
|
||||
global: {
|
||||
stubs: {
|
||||
IconifyIcon: {
|
||||
template: '<span data-test="icon" v-bind="$attrs" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('MalioInputUpload', () => {
|
||||
it('renders the initial display value', () => {
|
||||
const wrapper = mountComponent({modelValue: 'document.pdf'})
|
||||
|
||||
expect(wrapper.get('input[type="text"]').element.value).toBe('document.pdf')
|
||||
})
|
||||
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountComponent({label: 'Téléverser un fichier'})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Téléverser un fichier')
|
||||
})
|
||||
|
||||
it('has a hidden file input', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('input[type="file"]').exists()).toBe(true)
|
||||
expect(wrapper.find('input[type="file"]').classes()).toContain('hidden')
|
||||
})
|
||||
|
||||
it('text input is readonly', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input[type="text"]').attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('renders icon by default', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render icon when displayIcon is false', () => {
|
||||
const wrapper = mountComponent({displayIcon: false})
|
||||
|
||||
expect(wrapper.find('[data-test="icon"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows the correct upload icon', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
const iconComponent = wrapper.findComponent(IconifyIcon)
|
||||
expect(iconComponent.props('icon')).toBe('mdi:cloud-arrow-up-outline')
|
||||
})
|
||||
|
||||
it('emits update:modelValue when a file is selected', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
const fileInput = wrapper.find('input[type="file"]')
|
||||
const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
|
||||
|
||||
Object.defineProperty(fileInput.element, 'files', {
|
||||
value: [file],
|
||||
})
|
||||
await fileInput.trigger('change')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test.pdf'])
|
||||
})
|
||||
|
||||
it('emits file-selected with the File object when a file is selected', async () => {
|
||||
const wrapper = mountComponent({modelValue: ''})
|
||||
const fileInput = wrapper.find('input[type="file"]')
|
||||
const file = new File(['content'], 'test.pdf', {type: 'application/pdf'})
|
||||
|
||||
Object.defineProperty(fileInput.element, 'files', {
|
||||
value: [file],
|
||||
})
|
||||
await fileInput.trigger('change')
|
||||
|
||||
expect(wrapper.emitted('file-selected')?.[0]).toEqual([file])
|
||||
})
|
||||
|
||||
it('sets disabled on both inputs when disabled is true', () => {
|
||||
const wrapper = mountComponent({disabled: true})
|
||||
|
||||
expect(wrapper.get('input[type="text"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input[type="file"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('input[type="text"]').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('shows error message and styles', () => {
|
||||
const wrapper = mountComponent({error: 'Fichier requis'})
|
||||
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Fichier requis')
|
||||
expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('input[type="text"]').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows error style on icon', () => {
|
||||
const wrapper = mountComponent({error: 'Error'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success message and styles', () => {
|
||||
const wrapper = mountComponent({success: 'Fichier valide'})
|
||||
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Fichier valide')
|
||||
expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-success')
|
||||
})
|
||||
|
||||
it('shows success style on icon', () => {
|
||||
const wrapper = mountComponent({success: 'Success'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('shows hint message', () => {
|
||||
const wrapper = mountComponent({hint: 'PDF uniquement'})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('PDF uniquement')
|
||||
})
|
||||
|
||||
it('links label to input via for/id', () => {
|
||||
const wrapper = mountComponent({id: 'upload', label: 'Fichier'})
|
||||
|
||||
expect(wrapper.get('input[type="text"]').attributes('id')).toBe('upload')
|
||||
expect(wrapper.get('label').attributes('for')).toBe('upload')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountComponent({label: 'Fichier'})
|
||||
|
||||
const inputId = wrapper.get('input[type="text"]').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-input-upload-')).toBe(true)
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('aria-invalid is false when no error', () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
expect(wrapper.get('input[type="text"]').attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('passes accept attribute to file input', () => {
|
||||
const wrapper = mountComponent({accept: '.pdf,.doc'})
|
||||
|
||||
expect(wrapper.get('input[type="file"]').attributes('accept')).toBe('.pdf,.doc')
|
||||
})
|
||||
|
||||
it('shows primary icon color on focus', async () => {
|
||||
const wrapper = mountComponent()
|
||||
|
||||
await wrapper.get('input[type="text"]').trigger('focus')
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
|
||||
})
|
||||
|
||||
it('shows black icon color when filled and unfocused', () => {
|
||||
const wrapper = mountComponent({modelValue: 'document.pdf'})
|
||||
|
||||
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
@@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
:accept="accept"
|
||||
class="hidden"
|
||||
:disabled="disabled"
|
||||
@change="onFileChange"
|
||||
>
|
||||
|
||||
<input
|
||||
:id="inputId"
|
||||
:class="mergedInputClass"
|
||||
:disabled="disabled"
|
||||
:value="currentDisplayValue"
|
||||
:readonly="true"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@click="openFilePicker"
|
||||
@focus="isFocused = true"
|
||||
@blur="isFocused = false"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<IconifyIcon
|
||||
v-if="displayIcon"
|
||||
icon="mdi:cloud-arrow-up-outline"
|
||||
:width="24"
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
iconStateClass,
|
||||
'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 text-xs ml-[2px] ',
|
||||
]"
|
||||
>
|
||||
{{ hint || error || success }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputUpload', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
disabled?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
displayIcon?: boolean
|
||||
accept?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
displayIcon: true,
|
||||
accept: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref('')
|
||||
const isFocused = ref(false)
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-input-upload-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentDisplayValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
||||
const shouldFloatLabel = computed(() => isFocused.value || currentDisplayValue.value.length > 0)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success)
|
||||
const isFilled = computed(() => currentDisplayValue.value.trim().length > 0)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative flex h-12 w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-pointer',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
props.displayIcon ? '!pr-10' : '',
|
||||
'focus:pl-[11px]',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
||||
'left-3',
|
||||
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
||||
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const describedBy = computed(() => {
|
||||
const ids: string[] = []
|
||||
if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
|
||||
if (hasError.value) ids.push(`${inputId.value}-error`)
|
||||
if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
|
||||
return ids.length ? ids.join(' ') : undefined
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
(event: 'file-selected', file: File): void
|
||||
}>()
|
||||
|
||||
const openFilePicker = () => {
|
||||
if (props.disabled) return
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
const onFileChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const file = target.files?.[0]
|
||||
if (file) {
|
||||
const fileName = file.name
|
||||
if (!isControlled.value) {
|
||||
localValue.value = fileName
|
||||
}
|
||||
emit('update:modelValue', fileName)
|
||||
emit('file-selected', file)
|
||||
}
|
||||
}
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (disabled.value) return 'text-m-muted'
|
||||
if (isFocused.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height { transition: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,185 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import RadioButton from './RadioButton.vue'
|
||||
|
||||
type RadioButtonProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | number | boolean | null | undefined
|
||||
value?: string | number | boolean | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}
|
||||
|
||||
const RadioButtonForTest = RadioButton as DefineComponent<RadioButtonProps>
|
||||
|
||||
const mountRadioButton = (props: RadioButtonProps = {}) =>
|
||||
mount(RadioButtonForTest, {
|
||||
props,
|
||||
})
|
||||
|
||||
describe('MalioRadioButton', () => {
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1'})
|
||||
|
||||
expect(wrapper.get('.radio-text').text()).toBe('Option 1')
|
||||
})
|
||||
|
||||
it('applies provided id to input and label', () => {
|
||||
const wrapper = mountRadioButton({id: 'radio-id', label: 'Option 1'})
|
||||
|
||||
expect(wrapper.get('input').attributes('id')).toBe('radio-id')
|
||||
expect(wrapper.get('.radio-text').attributes('for')).toBe('radio-id')
|
||||
})
|
||||
|
||||
it('generates an id when missing and reuses it on label', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1'})
|
||||
|
||||
const inputId = wrapper.get('input').attributes('id')
|
||||
|
||||
expect(inputId?.startsWith('malio-radio-')).toBe(true)
|
||||
expect(wrapper.get('.radio-text').attributes('for')).toBe(inputId)
|
||||
})
|
||||
|
||||
it('applies the name attribute', () => {
|
||||
const wrapper = mountRadioButton({name: 'choice-group'})
|
||||
|
||||
expect(wrapper.get('input').attributes('name')).toBe('choice-group')
|
||||
})
|
||||
|
||||
it('sets required when true', () => {
|
||||
const wrapper = mountRadioButton({required: true})
|
||||
|
||||
expect(wrapper.get('input').attributes('required')).toBeDefined()
|
||||
})
|
||||
|
||||
it('sets disabled styles when true', () => {
|
||||
const wrapper = mountRadioButton({disabled: true, label: 'Option 1'})
|
||||
|
||||
expect(wrapper.get('input').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('.radio-control').classes()).toContain('is-disabled')
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('cursor-not-allowed')
|
||||
})
|
||||
|
||||
it('checks the input when modelValue matches value', () => {
|
||||
const wrapper = mountRadioButton({modelValue: 'a', value: 'a'})
|
||||
|
||||
expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
|
||||
})
|
||||
|
||||
it('emits update:modelValue on change', async () => {
|
||||
const wrapper = mountRadioButton({modelValue: 'a', value: 'b'})
|
||||
|
||||
await wrapper.get('input').trigger('change')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['b'])
|
||||
})
|
||||
|
||||
it('prevents updates when readonly', async () => {
|
||||
const wrapper = mountRadioButton({modelValue: 'a', value: 'b', readonly: true})
|
||||
const input = wrapper.get('input')
|
||||
|
||||
;(input.element as HTMLInputElement).checked = true
|
||||
await input.trigger('change')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
expect((input.element as HTMLInputElement).checked).toBe(false)
|
||||
})
|
||||
|
||||
it('shows hint message and wires aria-describedby', () => {
|
||||
const wrapper = mountRadioButton({hint: 'Helpful hint'})
|
||||
const input = wrapper.get('input')
|
||||
const message = wrapper.get('.radio-message')
|
||||
|
||||
expect(message.text()).toBe('Helpful hint')
|
||||
expect(input.attributes('aria-describedby')).toBe(message.attributes('id'))
|
||||
expect(input.attributes('aria-invalid')).toBe('false')
|
||||
})
|
||||
|
||||
it('shows error state on control, label and helper text', () => {
|
||||
const wrapper = mountRadioButton({
|
||||
label: 'Option 1',
|
||||
error: 'Selection required',
|
||||
})
|
||||
|
||||
expect(wrapper.get('.radio-control').classes()).toContain('is-error')
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows success state when no error is present', () => {
|
||||
const wrapper = mountRadioButton({
|
||||
label: 'Option 1',
|
||||
success: 'Selection saved',
|
||||
})
|
||||
|
||||
expect(wrapper.get('.radio-control').classes()).toContain('is-success')
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('.radio-message').classes()).toContain('text-m-success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success', () => {
|
||||
const wrapper = mountRadioButton({
|
||||
error: 'Selection required',
|
||||
success: 'Selection saved',
|
||||
})
|
||||
|
||||
expect(wrapper.get('.radio-control').classes()).toContain('is-error')
|
||||
expect(wrapper.get('.radio-control').classes()).not.toContain('is-success')
|
||||
expect(wrapper.get('.radio-message').text()).toBe('Selection required')
|
||||
expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('merges custom classes on group, input and label', () => {
|
||||
const wrapper = mountRadioButton({
|
||||
label: 'Option 1',
|
||||
groupClass: 'mt-0 custom-group',
|
||||
inputClass: 'border-red-500',
|
||||
labelClass: 'font-bold',
|
||||
})
|
||||
|
||||
expect(wrapper.get('.radio-item').classes()).toContain('custom-group')
|
||||
expect(wrapper.get('.radio-item').classes()).toContain('mt-0')
|
||||
expect(wrapper.get('input').classes()).toContain('border-red-500')
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('font-bold')
|
||||
})
|
||||
|
||||
it('uses muted label color and muted border when unchecked', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'b'})
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
|
||||
expect(wrapper.get('input').classes()).toContain('border-m-muted')
|
||||
})
|
||||
|
||||
it('uses black label color when checked', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-black')
|
||||
})
|
||||
|
||||
it('has checked:border-black on input', () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a', modelValue: 'a'})
|
||||
|
||||
expect(wrapper.get('input').classes()).toContain('checked:border-black')
|
||||
})
|
||||
|
||||
it('updates label color when toggled without v-model (uncontrolled)', async () => {
|
||||
const wrapper = mountRadioButton({label: 'Option 1', value: 'a'})
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-m-muted')
|
||||
|
||||
await wrapper.get('input').trigger('change')
|
||||
|
||||
expect(wrapper.get('.radio-text').classes()).toContain('text-black')
|
||||
})
|
||||
})
|
||||
@@ -1,206 +0,0 @@
|
||||
<template>
|
||||
<div :class="mergedGroupClass">
|
||||
<div :class="mergedControlClass">
|
||||
<label :for="inputId" class="radio-indicator relative flex cursor-pointer items-center p-3">
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:class="mergedInputClass"
|
||||
v-bind="attrs"
|
||||
type="radio"
|
||||
@click="onClick"
|
||||
@change="onChange"
|
||||
>
|
||||
<span class="radio-dot pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-black opacity-0">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" class="h-[10px]">
|
||||
<circle cx="8" cy="8" r="8" />
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="shouldShowMessage"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="mergedMessageClass"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | number | boolean | null | undefined
|
||||
value?: string | number | boolean | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
label: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
value: undefined,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localValue = ref<string | number | boolean | null | undefined>(undefined)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-radio-${generatedId}`)
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const isChecked = computed(() =>
|
||||
isControlled.value ? props.modelValue === props.value : localValue.value === props.value,
|
||||
)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const disabled = computed(() => props.disabled)
|
||||
const shouldShowMessage = computed(() => !!(props.hint || hasError.value || hasSuccess.value))
|
||||
|
||||
const describedBy = computed(() => {
|
||||
if (!shouldShowMessage.value) return undefined
|
||||
return `${inputId.value}-describedby`
|
||||
})
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'radio-item mt-4 w-full',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedControlClass = computed(() =>
|
||||
twMerge(
|
||||
'radio-control flex items-center',
|
||||
hasError.value ? 'is-error' : '',
|
||||
hasSuccess.value ? 'is-success' : '',
|
||||
disabled.value ? 'is-disabled' : '',
|
||||
),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-m-muted checked:border-black',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'radio-text mt-px cursor-pointer',
|
||||
isChecked.value ? 'text-black' : 'text-m-muted',
|
||||
hasError.value ? 'text-m-danger' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60' : '',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedMessageClass = computed(() =>
|
||||
twMerge(
|
||||
'radio-message ml-3 -mt-1 text-xs',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
),
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string | number | boolean | null | undefined): void
|
||||
}>()
|
||||
|
||||
const onClick = (event: MouseEvent) => {
|
||||
if (!props.readonly) return
|
||||
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const onChange = (event: Event) => {
|
||||
if (props.readonly) {
|
||||
const target = event.target as HTMLInputElement
|
||||
target.checked = isChecked.value
|
||||
return
|
||||
}
|
||||
|
||||
if (!isControlled.value) {
|
||||
localValue.value = props.value
|
||||
}
|
||||
|
||||
emit('update:modelValue', props.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.radio-control input[type='radio']:checked + .radio-dot {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.radio-control.is-error input[type='radio'] {
|
||||
border-color: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
|
||||
.radio-control.is-error .radio-dot {
|
||||
color: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
|
||||
.radio-control.is-success input[type='radio'] {
|
||||
border-color: rgb(var(--m-success) / 1);
|
||||
}
|
||||
|
||||
.radio-control.is-success .radio-dot {
|
||||
color: rgb(var(--m-success) / 1);
|
||||
}
|
||||
|
||||
.radio-control.is-disabled .radio-indicator,
|
||||
.radio-control.is-disabled .radio-text {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.radio-item:has(+ .radio-item) .radio-message {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,210 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Select from './Select.vue'
|
||||
|
||||
type Option = {
|
||||
label: string
|
||||
value: string | number | null
|
||||
}
|
||||
|
||||
type SelectProps = {
|
||||
modelValue?: string | number | null
|
||||
options?: Option[]
|
||||
emptyOptionLabel?: string
|
||||
label?: string
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
textField?: string
|
||||
textValue?: string
|
||||
textLabel?: string
|
||||
rounded?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const SelectForTest = Select as DefineComponent<SelectProps>
|
||||
|
||||
const options: Option[] = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
]
|
||||
|
||||
describe('MalioSelect', () => {
|
||||
it('renders the label text', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, label: 'Country'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('label').text()).toBe('Country')
|
||||
})
|
||||
|
||||
it('generates button and listbox ids and links them together', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, options},
|
||||
})
|
||||
|
||||
const button = wrapper.get('button')
|
||||
expect(button.attributes('id')?.startsWith('custom-select-btn-')).toBe(true)
|
||||
expect(button.attributes('aria-controls')?.startsWith('custom-select-listbox-')).toBe(true)
|
||||
|
||||
await button.trigger('click')
|
||||
|
||||
expect(wrapper.get('ul').attributes('id')).toBe(button.attributes('aria-controls'))
|
||||
})
|
||||
|
||||
it('uses disabled styles and prevents opening when disabled', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, disabled: true, options},
|
||||
})
|
||||
|
||||
const button = wrapper.get('button')
|
||||
expect(button.attributes('disabled')).toBeDefined()
|
||||
expect(button.classes()).toContain('cursor-not-allowed')
|
||||
|
||||
await button.trigger('click')
|
||||
|
||||
expect(wrapper.find('ul').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('opens the list and rotates the icon on click', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, options},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
expect(wrapper.get('ul').exists()).toBe(true)
|
||||
expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
|
||||
expect(wrapper.get('svg').classes()).toContain('rotate-180')
|
||||
})
|
||||
|
||||
it('emits update:modelValue when selecting an option', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, options},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
await wrapper.findAll('li')[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
|
||||
})
|
||||
|
||||
it('does not render empty option when emptyOptionLabel is empty', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {
|
||||
modelValue: null,
|
||||
options: [
|
||||
{label: 'AM', value: 'am'},
|
||||
{label: 'PM', value: 'pm'},
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const items = wrapper.findAll('li[role="option"]')
|
||||
expect(items).toHaveLength(2)
|
||||
expect(items[0].text()).toBe('AM')
|
||||
expect(items[1].text()).toBe('PM')
|
||||
})
|
||||
|
||||
it('renders empty option when emptyOptionLabel is provided', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {
|
||||
modelValue: null,
|
||||
options: [{label: 'AM', value: 'am'}],
|
||||
emptyOptionLabel: 'Choisir...',
|
||||
},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const items = wrapper.findAll('li[role="option"]')
|
||||
expect(items).toHaveLength(2)
|
||||
expect(items[0].text()).toBe('Choisir...')
|
||||
})
|
||||
|
||||
it('renders the empty option with muted text style', async () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {
|
||||
modelValue: null,
|
||||
options,
|
||||
emptyOptionLabel: 'Aucune selection',
|
||||
},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const firstOption = wrapper.findAll('li')[0]
|
||||
expect(firstOption.text()).toBe('Aucune selection')
|
||||
expect(firstOption.classes()).toContain('text-black/40')
|
||||
})
|
||||
|
||||
it('shows the selected value text when an option is selected', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {
|
||||
options,
|
||||
modelValue: 'fr',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('France')
|
||||
expect(wrapper.get('button').classes()).toContain('border-black')
|
||||
})
|
||||
|
||||
it('shows hint message in muted color', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {modelValue: null, hint: 'Select a country'},
|
||||
})
|
||||
|
||||
expect(wrapper.get('p.text-m-muted').text()).toBe('Select a country')
|
||||
})
|
||||
|
||||
it('shows error state on button, label and helper text', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {
|
||||
modelValue: null,
|
||||
options,
|
||||
label: 'Country',
|
||||
error: 'Selection error',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
|
||||
expect(wrapper.get('button').attributes('aria-invalid')).toBe('true')
|
||||
})
|
||||
|
||||
it('shows success state on button, label and helper text', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {
|
||||
modelValue: null,
|
||||
options,
|
||||
label: 'Country',
|
||||
success: 'Selection success',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('border-m-success')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-success')
|
||||
expect(wrapper.get('p.text-m-success').text()).toBe('Selection success')
|
||||
})
|
||||
|
||||
it('prioritizes error over success', () => {
|
||||
const wrapper = mount(SelectForTest, {
|
||||
props: {
|
||||
modelValue: null,
|
||||
options,
|
||||
error: 'Selection error',
|
||||
success: 'Selection success',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('button').classes()).toContain('border-m-danger')
|
||||
expect(wrapper.find('p.text-m-success').exists()).toBe(false)
|
||||
expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
|
||||
})
|
||||
})
|
||||
@@ -1,363 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="root"
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<button
|
||||
:id="buttonId"
|
||||
ref="buttonRef"
|
||||
type="button"
|
||||
class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
|
||||
:class="[
|
||||
hasError
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-danger !border-t-0'
|
||||
: 'border-m-danger'
|
||||
: hasSuccess
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-success !border-t-0'
|
||||
: 'border-m-success'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-0'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
|
||||
label ? 'min-h-[40px]' : 'h-[40px] py-0',
|
||||
rounded,
|
||||
textField,
|
||||
]"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-controls="listboxId"
|
||||
:aria-invalid="hasError"
|
||||
:aria-describedby="describedBy"
|
||||
:disabled="disabled"
|
||||
@click="toggle"
|
||||
>
|
||||
<label
|
||||
v-if="label"
|
||||
class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
|
||||
:class="[
|
||||
isOpen ? 'top-2 z-30' : 'top-2',
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted',
|
||||
textLabel,
|
||||
]"
|
||||
:style="labelTransformStyle"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<span
|
||||
class="block truncate"
|
||||
:class="[
|
||||
textValue,
|
||||
isOptionSelected ? 'text-black' : 'select-none text-transparent'
|
||||
]"
|
||||
>
|
||||
{{ selectedLabel || '\u00A0' }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-current'
|
||||
]"
|
||||
>
|
||||
<slot name="icon">
|
||||
<IconifyIcon
|
||||
icon="mdi:chevron-down"
|
||||
width="20"
|
||||
class="transition-transform duration-300"
|
||||
:class="isOpen ? 'rotate-180' : 'rotate-0'"
|
||||
/>
|
||||
</slot>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<ul
|
||||
v-if="isOpen"
|
||||
:id="listboxId"
|
||||
ref="listRef"
|
||||
role="listbox"
|
||||
:aria-labelledby="buttonId"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
|
||||
:class="[
|
||||
openDirection === 'down'
|
||||
? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
|
||||
: 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
|
||||
hasError
|
||||
? 'select-scrollbar-error'
|
||||
: hasSuccess
|
||||
? 'select-scrollbar-success'
|
||||
: 'select-scrollbar-primary',
|
||||
hasError
|
||||
? 'border-m-danger'
|
||||
: hasSuccess
|
||||
? 'border-m-success'
|
||||
: 'border-m-primary'
|
||||
]"
|
||||
>
|
||||
<li
|
||||
v-if="normalizedOptions.length === 0"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="no-options-text"
|
||||
>
|
||||
{{ noOptionsText }}
|
||||
</li>
|
||||
<li
|
||||
v-for="(opt, index) in normalizedOptions"
|
||||
v-else
|
||||
:id="optionId(index)"
|
||||
:key="String(opt.value)"
|
||||
role="option"
|
||||
:aria-selected="opt.value === modelValue"
|
||||
class="cursor-pointer px-3 py-2"
|
||||
:class="[
|
||||
index === activeIndex ? 'bg-m-muted/10' : '',
|
||||
opt.value === modelValue ? 'bg-m-muted/10 font-semibold' : '',
|
||||
opt.value === null ? 'text-black/40' : 'text-black'
|
||||
]"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mousedown.prevent
|
||||
@click="select(opt.value)"
|
||||
>
|
||||
{{ opt.label || '\u00A0' }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${buttonId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioSelect', inheritAttrs: false})
|
||||
|
||||
type Option = {
|
||||
label: string;
|
||||
value: string | number | null
|
||||
}
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: string | number | null
|
||||
options?: Option[]
|
||||
emptyOptionLabel?: string
|
||||
label?: string
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
textField?: string
|
||||
textValue?: string
|
||||
textLabel?: string
|
||||
rounded?: string
|
||||
disabled?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
}>(), {
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
label: '',
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
textField: 'text-lg',
|
||||
textValue: 'text-lg',
|
||||
textLabel: 'text-sm',
|
||||
rounded: 'rounded-md',
|
||||
disabled: false,
|
||||
groupClass: '',
|
||||
noOptionsText: 'Aucune option disponible',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: string | number | null): void
|
||||
}>()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const buttonRef = ref<HTMLButtonElement | null>(null)
|
||||
const isOpen = ref(false)
|
||||
const activeIndex = ref(-1)
|
||||
const openDirection = ref<'down' | 'up'>('down')
|
||||
const uid = useId()
|
||||
const buttonId = `custom-select-btn-${uid}`
|
||||
const listboxId = `custom-select-listbox-${uid}`
|
||||
const listRef = ref<HTMLElement | null>(null)
|
||||
const listHeight = ref(0)
|
||||
const normalizedOptions = computed<Option[]>(() => {
|
||||
if (!props.emptyOptionLabel) return props.options
|
||||
return [{label: props.emptyOptionLabel, value: null}, ...props.options]
|
||||
})
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative w-full h-12 flex items-center', props.groupClass),
|
||||
)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isOptionSelected = computed(() =>
|
||||
props.options.some(o => o.value === props.modelValue)
|
||||
)
|
||||
const shouldFloatLabel = computed(() =>
|
||||
isOpen.value || isOptionSelected.value
|
||||
)
|
||||
const selectedLabel = computed(() =>
|
||||
props.options.find(o => o.value === props.modelValue)?.label ?? ''
|
||||
)
|
||||
const describedBy = computed(() =>
|
||||
(hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
|
||||
)
|
||||
|
||||
function optionId(index: number) {
|
||||
return `custom-select-opt-${uid}-${index}`
|
||||
}
|
||||
|
||||
function updateOpenDirection() {
|
||||
if (!root.value) return
|
||||
|
||||
const rect = root.value.getBoundingClientRect()
|
||||
const estimatedListHeight = Math.min(normalizedOptions.value.length * 40, 240)
|
||||
const spaceBelow = window.innerHeight - rect.bottom
|
||||
const spaceAbove = rect.top
|
||||
|
||||
openDirection.value =
|
||||
spaceBelow >= estimatedListHeight || spaceBelow >= spaceAbove
|
||||
? 'down'
|
||||
: 'up'
|
||||
}
|
||||
|
||||
function open() {
|
||||
updateOpenDirection()
|
||||
isOpen.value = true
|
||||
|
||||
const selectedIndex = normalizedOptions.value.findIndex(o => o.value === props.modelValue)
|
||||
activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0
|
||||
|
||||
nextTick(() => {
|
||||
if (openDirection.value === 'up' && listRef.value) {
|
||||
listHeight.value = listRef.value.offsetHeight
|
||||
} else {
|
||||
listHeight.value = 0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const labelTransformStyle = computed(() => {
|
||||
// label non flottant
|
||||
if (!shouldFloatLabel.value) {
|
||||
return {}
|
||||
}
|
||||
|
||||
// fermé ou ouverture vers le bas : comportement classique
|
||||
if (!isOpen.value || openDirection.value === 'down') {
|
||||
return {
|
||||
transform: 'translateY(-1.15rem) scale(0.9)',
|
||||
}
|
||||
}
|
||||
|
||||
// ouverture vers le haut : on remonte en fonction de la hauteur de la liste
|
||||
const extraOffset = 8 // marge visuelle au-dessus de la liste en px
|
||||
const total = 4 +listHeight.value + extraOffset
|
||||
// 18 ≈ 1.15rem pour garder la même base que votre flottant actuel
|
||||
|
||||
return {
|
||||
transform: `translateY(-${total}px) scale(0.9)`,
|
||||
}
|
||||
})
|
||||
|
||||
function close() {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (props.disabled) return
|
||||
if (isOpen.value) {
|
||||
close()
|
||||
return
|
||||
}
|
||||
open()
|
||||
}
|
||||
|
||||
function select(value: string | number | null) {
|
||||
emit('update:modelValue', value)
|
||||
close()
|
||||
buttonRef.value?.blur()
|
||||
}
|
||||
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
if (!root.value) return
|
||||
if (!root.value.contains(e.target as Node)) close()
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onClickOutside))
|
||||
onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(ul[role="listbox"]) {
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-primary) {
|
||||
scrollbar-color: rgb(var(--m-primary)) transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-error) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-success) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,185 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import SelectCheckbox from './SelectCheckbox.vue'
|
||||
|
||||
type Option = {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
type SelectCheckboxProps = {
|
||||
modelValue: Array<string | number>
|
||||
options?: Option[]
|
||||
emptyOptionLabel?: string
|
||||
label?: string
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
textField?: string
|
||||
textValue?: string
|
||||
textLabel?: string
|
||||
rounded?: string
|
||||
displayTag?: boolean
|
||||
displaySelectAll?: boolean
|
||||
selectAllLabel?: string
|
||||
disabled?: boolean
|
||||
groupClass?: string
|
||||
}
|
||||
|
||||
const SelectCheckboxForTest = SelectCheckbox as DefineComponent<SelectCheckboxProps>
|
||||
|
||||
const options: Option[] = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
]
|
||||
|
||||
describe('MalioSelectCheckbox', () => {
|
||||
it('renders checkbox inputs for options', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAll('input[type="checkbox"]')
|
||||
expect(checkboxes).toHaveLength(options.length)
|
||||
})
|
||||
|
||||
it('emits an array with the toggled option value', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: ['fr'], options},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
const checkboxInputs = wrapper.findAll('input[type="checkbox"]')
|
||||
await checkboxInputs[1].setValue(true)
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be']])
|
||||
})
|
||||
|
||||
it('shows the selected count over the total count in the trigger', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: ['fr', 'ca'], options},
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('2/3')
|
||||
})
|
||||
|
||||
it('shows 0 over the total count when nothing is selected', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options},
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('0/3')
|
||||
})
|
||||
|
||||
it('hides the summary when displayTag is enabled and options are selected', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: ['fr', 'ca'], options, displayTag: true},
|
||||
})
|
||||
|
||||
expect(wrapper.text()).not.toContain('2/3')
|
||||
expect(wrapper.text()).toContain('France')
|
||||
expect(wrapper.text()).toContain('Canada')
|
||||
})
|
||||
|
||||
it('hides the summary when displayTag is enabled and nothing is selected', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options, displayTag: true, emptyOptionLabel: 'Aucune selection'},
|
||||
})
|
||||
|
||||
expect(wrapper.text()).not.toContain('0/3')
|
||||
expect(wrapper.text()).toContain('Aucune selection')
|
||||
})
|
||||
|
||||
it('does not show select all checkbox by default', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAll('input[type="checkbox"]')
|
||||
expect(checkboxes).toHaveLength(options.length)
|
||||
})
|
||||
|
||||
it('shows select all checkbox when displaySelectAll is true', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options, displaySelectAll: true},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAll('input[type="checkbox"]')
|
||||
expect(checkboxes).toHaveLength(options.length + 1)
|
||||
expect(wrapper.text()).toContain('Tout sélectionner')
|
||||
})
|
||||
|
||||
it('shows custom select all label', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options, displaySelectAll: true, selectAllLabel: 'Sélectionner tout'},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
expect(wrapper.text()).toContain('Sélectionner tout')
|
||||
})
|
||||
|
||||
it('emits all values when select all is clicked and none selected', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options, displaySelectAll: true},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAll('input[type="checkbox"]')
|
||||
await checkboxes[0].setValue(true)
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['fr', 'be', 'ca']])
|
||||
})
|
||||
|
||||
it('emits empty array when select all is clicked and all selected', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAll('input[type="checkbox"]')
|
||||
await checkboxes[0].setValue(false)
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
|
||||
})
|
||||
|
||||
it('select all checkbox is checked when all options are selected', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: ['fr', 'be', 'ca'], options, displaySelectAll: true},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAll('input[type="checkbox"]')
|
||||
expect((checkboxes[0].element as HTMLInputElement).checked).toBe(true)
|
||||
})
|
||||
|
||||
it('select all checkbox is unchecked when not all options are selected', async () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: ['fr'], options, displaySelectAll: true},
|
||||
})
|
||||
|
||||
await wrapper.get('button').trigger('click')
|
||||
|
||||
const checkboxes = wrapper.findAll('input[type="checkbox"]')
|
||||
expect((checkboxes[0].element as HTMLInputElement).checked).toBe(false)
|
||||
})
|
||||
|
||||
it('applies groupClass via twMerge', () => {
|
||||
const wrapper = mount(SelectCheckboxForTest, {
|
||||
props: {modelValue: [], options: [], groupClass: 'mt-4'},
|
||||
})
|
||||
const root = wrapper.find('button').element.parentElement
|
||||
expect(root?.className).toContain('mt-4')
|
||||
})
|
||||
})
|
||||
@@ -1,443 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="root"
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<button
|
||||
:id="buttonId"
|
||||
ref="buttonRef"
|
||||
type="button"
|
||||
class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-m-primary"
|
||||
:class="[
|
||||
hasError
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-danger !border-t-0'
|
||||
: 'border-m-danger'
|
||||
: hasSuccess
|
||||
? isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-success !border-t-0'
|
||||
: 'border-m-success'
|
||||
: isOpen
|
||||
? openDirection === 'down'
|
||||
? 'rounded-b-none !border !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border !border-m-primary !border-t-0'
|
||||
: isOptionSelected
|
||||
? 'border-black'
|
||||
: 'border-m-muted',
|
||||
disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
|
||||
label ? 'min-h-[40px]' : 'h-[40px] py-0',
|
||||
rounded,
|
||||
textField,
|
||||
]"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-controls="listboxId"
|
||||
:aria-invalid="hasError"
|
||||
:aria-describedby="describedBy"
|
||||
:disabled="disabled"
|
||||
@click="toggle"
|
||||
>
|
||||
<label
|
||||
v-if="label"
|
||||
class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
|
||||
:class="[
|
||||
isOpen ? 'top-2 z-30' : 'top-2',
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: isOpen
|
||||
? 'text-m-primary'
|
||||
: isOptionSelected
|
||||
? 'text-black'
|
||||
: 'text-m-muted',
|
||||
textLabel,
|
||||
]"
|
||||
:style="labelTransformStyle"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div
|
||||
v-if="displayTags && selectedOptions.length > 0"
|
||||
class="flex flex-wrap items-center justify-start gap-1"
|
||||
:class="[label ? 'pt-1' : '']"
|
||||
>
|
||||
<span
|
||||
v-for="option in selectedOptions"
|
||||
:key="String(option.value)"
|
||||
class="inline-flex max-w-full items-center rounded-md border border-black px-2 text-sm leading-none text-black"
|
||||
>
|
||||
<span class="truncate pb-[2px]">{{ option.label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-else-if="displayTag && emptyOptionLabel"
|
||||
class="block truncate text-right"
|
||||
:class="[
|
||||
textValue,
|
||||
label ? 'pl-24' : '',
|
||||
'text-m-muted'
|
||||
]"
|
||||
>
|
||||
{{ emptyOptionLabel }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="!displayTag"
|
||||
class="block truncate text-right"
|
||||
:class="[
|
||||
textValue,
|
||||
label ? 'pl-24' : '',
|
||||
isOptionSelected ? 'text-black' : 'text-m-muted'
|
||||
]"
|
||||
>
|
||||
{{ selectionSummary }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-current'
|
||||
]"
|
||||
>
|
||||
<slot name="icon">
|
||||
<IconifyIcon
|
||||
icon="mdi:chevron-down"
|
||||
width="20"
|
||||
class="transition-transform duration-300"
|
||||
:class="isOpen ? 'rotate-180' : 'rotate-0'"
|
||||
/>
|
||||
</slot>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<ul
|
||||
v-if="isOpen"
|
||||
:id="listboxId"
|
||||
ref="listRef"
|
||||
role="listbox"
|
||||
:aria-labelledby="buttonId"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border bg-white"
|
||||
:class="[
|
||||
openDirection === 'down'
|
||||
? 'top-[calc(100%-4px)] rounded-b-md border-t-0'
|
||||
: 'bottom-[calc(100%-4px)] rounded-t-md border-b-0',
|
||||
hasError
|
||||
? 'select-scrollbar-error'
|
||||
: hasSuccess
|
||||
? 'select-scrollbar-success'
|
||||
: 'select-scrollbar-primary',
|
||||
hasError
|
||||
? 'border-m-danger'
|
||||
: hasSuccess
|
||||
? 'border-m-success'
|
||||
: 'border-m-primary'
|
||||
]"
|
||||
>
|
||||
<li
|
||||
v-if="normalizedOptions.length === 0"
|
||||
class="px-3 py-2 text-m-muted"
|
||||
data-test="no-options-text"
|
||||
>
|
||||
{{ noOptionsText }}
|
||||
</li>
|
||||
<li
|
||||
v-if="displaySelectAll && normalizedOptions.length > 0"
|
||||
class="border-b border-m-muted/30 px-3 py-2"
|
||||
@mousedown.prevent
|
||||
>
|
||||
<Checkbox
|
||||
:model-value="allSelected"
|
||||
:label="selectAllLabel"
|
||||
:disabled="disabled"
|
||||
group-class="!mt-0"
|
||||
label-class="option-checkbox w-full cursor-pointer font-semibold"
|
||||
tabindex="-1"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
v-for="(opt, index) in normalizedOptions"
|
||||
:id="optionId(index)"
|
||||
:key="String(opt.value)"
|
||||
role="option"
|
||||
:aria-selected="isChecked(opt.value)"
|
||||
class="px-3 py-2"
|
||||
:class="[
|
||||
index === activeIndex ? 'bg-m-muted/10' : '',
|
||||
isChecked(opt.value) ? 'bg-m-muted/10 font-semibold' : '',
|
||||
'text-black'
|
||||
]"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mousedown.prevent
|
||||
>
|
||||
<Checkbox
|
||||
:model-value="isChecked(opt.value)"
|
||||
:label="opt.label || '\u00A0'"
|
||||
:disabled="disabled"
|
||||
group-class="!mt-0"
|
||||
label-class="option-checkbox w-full cursor-pointer"
|
||||
tabindex="-1"
|
||||
@update:model-value="toggleOption(opt.value)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${buttonId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import Checkbox from '../checkbox/Checkbox.vue'
|
||||
|
||||
defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
|
||||
|
||||
type Option = {
|
||||
label: string;
|
||||
value: string | number
|
||||
}
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: Array<string | number>
|
||||
options?: Option[]
|
||||
emptyOptionLabel?: string
|
||||
label?: string
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
textField?: string
|
||||
textValue?: string
|
||||
textLabel?: string
|
||||
rounded?: string
|
||||
displayTag?: boolean
|
||||
displaySelectAll?: boolean
|
||||
selectAllLabel?: string
|
||||
disabled?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
}>(), {
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
label: '',
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
textField: 'text-lg',
|
||||
textValue: 'text-lg',
|
||||
textLabel: 'text-sm',
|
||||
rounded: 'rounded-md',
|
||||
displayTag: false,
|
||||
displaySelectAll: false,
|
||||
selectAllLabel: 'Tout sélectionner',
|
||||
disabled: false,
|
||||
groupClass: '',
|
||||
noOptionsText: 'Aucune option disponible',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Array<string | number>): void
|
||||
}>()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const buttonRef = ref<HTMLButtonElement | null>(null)
|
||||
const isOpen = ref(false)
|
||||
const activeIndex = ref(-1)
|
||||
const openDirection = ref<'down' | 'up'>('down')
|
||||
const uid = useId()
|
||||
const buttonId = `custom-select-btn-${uid}`
|
||||
const listboxId = `custom-select-listbox-${uid}`
|
||||
const listRef = ref<HTMLElement | null>(null)
|
||||
const listHeight = ref(0)
|
||||
const normalizedOptions = computed<Option[]>(() => props.options)
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative w-full h-12 flex items-center', props.groupClass),
|
||||
)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isOptionSelected = computed(() =>
|
||||
props.modelValue.length > 0
|
||||
)
|
||||
const selectedOptions = computed(() =>
|
||||
normalizedOptions.value.filter(option => props.modelValue.includes(option.value)),
|
||||
)
|
||||
const displayTags = computed(() =>
|
||||
props.displayTag && selectedOptions.value.length > 0,
|
||||
)
|
||||
const shouldFloatLabel = computed(() =>
|
||||
isOpen.value || displayTags.value
|
||||
)
|
||||
const selectionSummary = computed(() =>
|
||||
`${props.modelValue.length}/${normalizedOptions.value.length}`
|
||||
)
|
||||
const allSelected = computed(() =>
|
||||
normalizedOptions.value.length > 0
|
||||
&& normalizedOptions.value.every(opt => props.modelValue.includes(opt.value)),
|
||||
)
|
||||
const describedBy = computed(() =>
|
||||
(hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
|
||||
)
|
||||
|
||||
function optionId(index: number) {
|
||||
return `custom-select-opt-${uid}-${index}`
|
||||
}
|
||||
|
||||
function updateOpenDirection() {
|
||||
if (!root.value) return
|
||||
|
||||
const rect = root.value.getBoundingClientRect()
|
||||
const estimatedListHeight = Math.min(normalizedOptions.value.length * 40, 240)
|
||||
const spaceBelow = window.innerHeight - rect.bottom
|
||||
const spaceAbove = rect.top
|
||||
|
||||
openDirection.value =
|
||||
spaceBelow >= estimatedListHeight || spaceBelow >= spaceAbove
|
||||
? 'down'
|
||||
: 'up'
|
||||
}
|
||||
|
||||
function open() {
|
||||
updateOpenDirection()
|
||||
isOpen.value = true
|
||||
|
||||
const selectedIndex = normalizedOptions.value.findIndex(o => props.modelValue.includes(o.value))
|
||||
activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0
|
||||
|
||||
nextTick(() => {
|
||||
if (openDirection.value === 'up' && listRef.value) {
|
||||
listHeight.value = listRef.value.offsetHeight
|
||||
} else {
|
||||
listHeight.value = 0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const labelTransformStyle = computed(() => {
|
||||
// label non flottant
|
||||
if (!shouldFloatLabel.value) {
|
||||
return {}
|
||||
}
|
||||
|
||||
// fermé ou ouverture vers le bas : comportement classique
|
||||
if (!isOpen.value || openDirection.value === 'down') {
|
||||
return {
|
||||
transform: 'translateY(-1.15rem) scale(0.9)',
|
||||
}
|
||||
}
|
||||
|
||||
// ouverture vers le haut : on remonte en fonction de la hauteur de la liste
|
||||
const extraOffset = 8 // marge visuelle au-dessus de la liste en px
|
||||
const total = 4 +listHeight.value + extraOffset
|
||||
// 18 ≈ 1.15rem pour garder la même base que votre flottant actuel
|
||||
|
||||
return {
|
||||
transform: `translateY(-${total}px) scale(0.9)`,
|
||||
}
|
||||
})
|
||||
|
||||
function close() {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (props.disabled) return
|
||||
if (isOpen.value) {
|
||||
close()
|
||||
return
|
||||
}
|
||||
open()
|
||||
}
|
||||
|
||||
function isChecked(value: string | number) {
|
||||
return props.modelValue.includes(value)
|
||||
}
|
||||
|
||||
function toggleOption(value: string | number) {
|
||||
if (isChecked(value)) {
|
||||
emit('update:modelValue', props.modelValue.filter(item => item !== value))
|
||||
} else {
|
||||
emit('update:modelValue', [...props.modelValue, value])
|
||||
}
|
||||
nextTick(() => buttonRef.value?.focus())
|
||||
}
|
||||
|
||||
function toggleAll() {
|
||||
if (allSelected.value) {
|
||||
emit('update:modelValue', [])
|
||||
} else {
|
||||
emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
|
||||
}
|
||||
nextTick(() => buttonRef.value?.focus())
|
||||
}
|
||||
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
if (!root.value) return
|
||||
if (!root.value.contains(e.target as Node)) close()
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onClickOutside))
|
||||
onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.grow-height {
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
||||
}
|
||||
|
||||
.grow-height:focus {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grow-height {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(ul[role="listbox"]) {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-primary) {
|
||||
scrollbar-color: rgb(var(--m-primary)) transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-error) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
|
||||
:deep(.select-scrollbar-success) {
|
||||
scrollbar-color: #000000 transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,205 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
|
||||
type SidebarItem = {
|
||||
label: string
|
||||
to: string
|
||||
}
|
||||
|
||||
type SidebarSection = {
|
||||
label?: string
|
||||
icon?: string
|
||||
items: SidebarItem[]
|
||||
}
|
||||
|
||||
type SidebarProps = {
|
||||
sections: SidebarSection[]
|
||||
modelValue?: boolean
|
||||
id?: string
|
||||
sidebarClass?: string
|
||||
toggleClass?: string
|
||||
}
|
||||
|
||||
const SidebarForTest = Sidebar as DefineComponent<SidebarProps>
|
||||
|
||||
const sections: SidebarSection[] = [
|
||||
{
|
||||
label: 'LOGISTIQUE / TRANSPORT',
|
||||
icon: 'mdi:truck-delivery',
|
||||
items: [
|
||||
{label: 'Réception / Expédition', to: '/reception'},
|
||||
{label: 'Validation expédition', to: '/validation'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'COMMERCIAL',
|
||||
icon: 'mdi:handshake',
|
||||
items: [
|
||||
{label: 'Répertoire Fournisseurs', to: '/fournisseurs'},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const stubs = {
|
||||
NuxtLink: {
|
||||
template: '<a :href="to" v-bind="$attrs"><slot /></a>',
|
||||
props: ['to'],
|
||||
},
|
||||
}
|
||||
|
||||
function mountComponent(props: SidebarProps, slots?: Record<string, string>) {
|
||||
return mount(SidebarForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: {stubs},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioSidebar', () => {
|
||||
it('renders expanded by default', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const aside = wrapper.find('aside')
|
||||
expect(aside.classes()).toContain('w-[280px]')
|
||||
})
|
||||
|
||||
it('renders section labels with icons when expanded', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const sectionHeaders = wrapper.findAll('nav > div > div')
|
||||
expect(sectionHeaders).toHaveLength(2)
|
||||
expect(sectionHeaders[0].text()).toContain('LOGISTIQUE / TRANSPORT')
|
||||
expect(sectionHeaders[1].text()).toContain('COMMERCIAL')
|
||||
})
|
||||
|
||||
it('renders all menu items with icons and labels', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const links = wrapper.findAll('a')
|
||||
expect(links).toHaveLength(3)
|
||||
expect(links[0].text()).toContain('Réception / Expédition')
|
||||
expect(links[1].text()).toContain('Validation expédition')
|
||||
expect(links[2].text()).toContain('Répertoire Fournisseurs')
|
||||
})
|
||||
|
||||
it('renders NuxtLink with correct to prop', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const links = wrapper.findAll('a')
|
||||
expect(links[0].attributes('href')).toBe('/reception')
|
||||
expect(links[2].attributes('href')).toBe('/fournisseurs')
|
||||
})
|
||||
|
||||
it('renders section icons via IconifyIcon', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
// 2 section icons + 1 toggle chevron = 3
|
||||
expect(icons).toHaveLength(3)
|
||||
expect(icons[0].props('icon')).toBe('mdi:truck-delivery')
|
||||
expect(icons[1].props('icon')).toBe('mdi:handshake')
|
||||
})
|
||||
|
||||
it('toggle button shows chevron-left when expanded', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const toggleIcon = wrapper.findAllComponents(IconifyIcon).at(-1)!
|
||||
expect(toggleIcon.props('icon')).toBe('mdi:chevron-left')
|
||||
})
|
||||
|
||||
it('collapses on toggle click in uncontrolled mode', async () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const toggleBtn = wrapper.find('button')
|
||||
|
||||
await toggleBtn.trigger('click')
|
||||
|
||||
const aside = wrapper.find('aside')
|
||||
expect(aside.classes()).toContain('w-[72px]')
|
||||
})
|
||||
|
||||
it('hides section label text when collapsed but keeps section icon', async () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
await wrapper.find('button').trigger('click')
|
||||
|
||||
const sectionHeaders = wrapper.findAll('nav > div > div')
|
||||
expect(sectionHeaders).toHaveLength(2)
|
||||
// Label text spans are hidden
|
||||
sectionHeaders.forEach((header) => {
|
||||
expect(header.findAll('span').filter(s => s.classes().includes('text-[11px]'))).toHaveLength(0)
|
||||
})
|
||||
})
|
||||
|
||||
it('hides item text when collapsed', async () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
await wrapper.find('button').trigger('click')
|
||||
|
||||
const itemSpans = wrapper.findAll('a span')
|
||||
expect(itemSpans).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('toggle button shows chevron-right when collapsed', async () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
await wrapper.find('button').trigger('click')
|
||||
|
||||
const toggleIcon = wrapper.findAllComponents(IconifyIcon).at(-1)!
|
||||
expect(toggleIcon.props('icon')).toBe('mdi:chevron-right')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on toggle click', async () => {
|
||||
const wrapper = mountComponent({sections, modelValue: false})
|
||||
await wrapper.find('button').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
|
||||
})
|
||||
|
||||
it('respects modelValue in controlled mode', () => {
|
||||
const wrapper = mountComponent({sections, modelValue: true})
|
||||
const aside = wrapper.find('aside')
|
||||
expect(aside.classes()).toContain('w-[72px]')
|
||||
})
|
||||
|
||||
it('renders logo slot when expanded', () => {
|
||||
const wrapper = mountComponent({sections}, {
|
||||
logo: '<img alt="Malio" src="/logo.svg" />',
|
||||
})
|
||||
expect(wrapper.find('img[alt="Malio"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders logo-collapsed slot when collapsed', async () => {
|
||||
const wrapper = mountComponent({sections}, {
|
||||
'logo-collapsed': '<img alt="M" src="/logo-m.svg" />',
|
||||
})
|
||||
await wrapper.find('button').trigger('click')
|
||||
|
||||
expect(wrapper.find('img[alt="M"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
const wrapper = mountComponent({sections, id: 'my-sidebar'})
|
||||
expect(wrapper.find('aside').attributes('id')).toBe('my-sidebar')
|
||||
})
|
||||
|
||||
it('toggle button has correct aria-label', async () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const btn = wrapper.find('button')
|
||||
expect(btn.attributes('aria-label')).toBe('Plier le menu')
|
||||
|
||||
await btn.trigger('click')
|
||||
expect(btn.attributes('aria-label')).toBe('Déplier le menu')
|
||||
})
|
||||
|
||||
it('section without label does not render a section header', () => {
|
||||
const noLabelSections: SidebarSection[] = [
|
||||
{items: [{label: 'Item', to: '/'}]},
|
||||
]
|
||||
const wrapper = mountComponent({sections: noLabelSections})
|
||||
expect(wrapper.findAll('nav > div > div')).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('renders section icon in collapsed mode', async () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
await wrapper.find('button').trigger('click')
|
||||
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
// 2 section icons + 1 toggle = 3
|
||||
expect(icons[0].props('icon')).toBe('mdi:truck-delivery')
|
||||
expect(icons[1].props('icon')).toBe('mdi:handshake')
|
||||
})
|
||||
})
|
||||
@@ -1,139 +0,0 @@
|
||||
<template>
|
||||
<aside
|
||||
:id="componentId"
|
||||
:class="twMerge(
|
||||
'relative flex h-full flex-col bg-m-bg',
|
||||
collapsed ? 'w-[72px]' : 'w-[280px]',
|
||||
sidebarClass,
|
||||
)"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<div :class="['px-[20px] py-[14px]', collapsed ? '' : 'mx-[10px] border-b-2 border-m-primary']">
|
||||
<slot
|
||||
v-if="collapsed"
|
||||
name="logo-collapsed"
|
||||
/>
|
||||
<slot
|
||||
v-else
|
||||
name="logo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 overflow-y-auto mb-4">
|
||||
<div
|
||||
v-for="(section, sectionIndex) in sections"
|
||||
:key="sectionIndex"
|
||||
:class="collapsed ? 'first:border-t-2 first:border-m-primary' : 'mx-[10px] border-t-2 border-m-primary first:border-t-0'"
|
||||
>
|
||||
<div
|
||||
v-if="section.label"
|
||||
:class="[
|
||||
'flex items-center gap-2 px-[10px] pt-2 pb-3',
|
||||
collapsed ? 'justify-center pt-[40px]' : '',
|
||||
]"
|
||||
>
|
||||
<IconifyIcon
|
||||
v-if="section.icon"
|
||||
:icon="section.icon"
|
||||
:width="24"
|
||||
class="shrink-0 text-m-primary"
|
||||
/>
|
||||
<span
|
||||
v-if="!collapsed"
|
||||
class="text-[15px] font-bold uppercase text-m-primary"
|
||||
>
|
||||
{{ section.label }}
|
||||
</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="item in section.items"
|
||||
:key="item.to"
|
||||
:class="collapsed ? '' : 'pb-2 last:pb-1'"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="item.to"
|
||||
:class="twMerge(
|
||||
'block truncate rounded-md text-[15px] text-m-text text-black transition-colors hover:bg-m-surface leading-[150%]',
|
||||
collapsed ? 'px-3 text-center' : 'pl-[42px] pr-3',
|
||||
)"
|
||||
>
|
||||
<span v-if="!collapsed">{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:aria-label="collapsed ? 'Déplier le menu' : 'Plier le menu'"
|
||||
:class="twMerge(
|
||||
'absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2 z-10',
|
||||
'flex h-8 w-8 items-center justify-center rounded-full border border-m-border bg-white shadow-sm',
|
||||
'cursor-pointer transition-colors hover:bg-m-surface',
|
||||
toggleClass,
|
||||
)"
|
||||
@click="toggleCollapse"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="collapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
|
||||
:width="18"
|
||||
/>
|
||||
</button>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useId} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioSidebar', inheritAttrs: false})
|
||||
|
||||
export type SidebarItem = {
|
||||
label: string
|
||||
to: string
|
||||
}
|
||||
|
||||
export type SidebarSection = {
|
||||
label?: string
|
||||
icon?: string
|
||||
items: SidebarItem[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
sections: SidebarSection[]
|
||||
modelValue?: boolean
|
||||
id?: string
|
||||
sidebarClass?: string
|
||||
toggleClass?: string
|
||||
}>(), {
|
||||
modelValue: undefined,
|
||||
id: '',
|
||||
sidebarClass: '',
|
||||
toggleClass: '',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const componentId = computed(() => props.id || `malio-sidebar-${generatedId}`)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(false)
|
||||
|
||||
const collapsed = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
|
||||
function toggleCollapse() {
|
||||
const newValue = !collapsed.value
|
||||
if (!isControlled.value) {
|
||||
localValue.value = newValue
|
||||
}
|
||||
emit('update:modelValue', newValue)
|
||||
}
|
||||
</script>
|
||||
@@ -1,154 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import SiteSelector from './SiteSelector.vue'
|
||||
|
||||
type Site = {
|
||||
id: string
|
||||
name: string
|
||||
color: string
|
||||
}
|
||||
|
||||
type SiteSelectorProps = {
|
||||
sites: Site[]
|
||||
modelValue?: string
|
||||
id?: string
|
||||
groupClass?: string
|
||||
tileClass?: string
|
||||
labelClass?: string
|
||||
}
|
||||
|
||||
const SiteSelectorForTest = SiteSelector as DefineComponent<SiteSelectorProps>
|
||||
|
||||
const sites: Site[] = [
|
||||
{id: 'chatellerault', name: 'Châtellerault', color: '#2563eb'},
|
||||
{id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a'},
|
||||
{id: 'pommevic', name: 'Pommevic', color: '#dc2626'},
|
||||
]
|
||||
|
||||
function mountComponent(props: SiteSelectorProps) {
|
||||
return mount(SiteSelectorForTest, {props})
|
||||
}
|
||||
|
||||
describe('MalioSiteSelector', () => {
|
||||
it('renders one tile per site with the site name', () => {
|
||||
const wrapper = mountComponent({sites})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
expect(tiles).toHaveLength(3)
|
||||
expect(tiles[0]!.text()).toBe('Châtellerault')
|
||||
expect(tiles[1]!.text()).toBe('Saint-Jean')
|
||||
expect(tiles[2]!.text()).toBe('Pommevic')
|
||||
})
|
||||
|
||||
it('has role="radiogroup" on the wrapper', () => {
|
||||
const wrapper = mountComponent({sites})
|
||||
expect(wrapper.find('[role="radiogroup"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('selects the first site by default in uncontrolled mode', () => {
|
||||
const wrapper = mountComponent({sites})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
expect(tiles[0]!.attributes('aria-checked')).toBe('true')
|
||||
expect(tiles[1]!.attributes('aria-checked')).toBe('false')
|
||||
expect(tiles[2]!.attributes('aria-checked')).toBe('false')
|
||||
})
|
||||
|
||||
it('paints all tiles with the selected site color', () => {
|
||||
const wrapper = mountComponent({sites, modelValue: 'saint-jean'})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
for (const tile of tiles) {
|
||||
expect(tile.attributes('style')).toContain('background-color: rgb(22, 163, 74)')
|
||||
}
|
||||
})
|
||||
|
||||
it('applies opacity 1 on the selected tile and 0.4 on the others', () => {
|
||||
const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
expect(tiles[0]!.attributes('style')).toContain('opacity: 1')
|
||||
expect(tiles[1]!.attributes('style')).toContain('opacity: 0.4')
|
||||
expect(tiles[2]!.attributes('style')).toContain('opacity: 0.4')
|
||||
})
|
||||
|
||||
it('updates the shared color when the selection changes', async () => {
|
||||
const wrapper = mountComponent({sites})
|
||||
let tiles = wrapper.findAll('[role="radio"]')
|
||||
expect(tiles[0]!.attributes('style')).toContain('background-color: rgb(37, 99, 235)')
|
||||
|
||||
await tiles[2]!.trigger('click')
|
||||
tiles = wrapper.findAll('[role="radio"]')
|
||||
for (const tile of tiles) {
|
||||
expect(tile.attributes('style')).toContain('background-color: rgb(220, 38, 38)')
|
||||
}
|
||||
})
|
||||
|
||||
it('emits update:modelValue with the clicked site id', async () => {
|
||||
const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
|
||||
await tiles[1]!.trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['saint-jean'])
|
||||
})
|
||||
|
||||
it('emits change with the full selected site object', async () => {
|
||||
const wrapper = mountComponent({sites, modelValue: 'chatellerault'})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
|
||||
await tiles[2]!.trigger('click')
|
||||
|
||||
expect(wrapper.emitted('change')?.[0]).toEqual([
|
||||
{id: 'pommevic', name: 'Pommevic', color: '#dc2626'},
|
||||
])
|
||||
})
|
||||
|
||||
it('respects modelValue in controlled mode', () => {
|
||||
const wrapper = mountComponent({sites, modelValue: 'pommevic'})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
expect(tiles[0]!.attributes('aria-checked')).toBe('false')
|
||||
expect(tiles[1]!.attributes('aria-checked')).toBe('false')
|
||||
expect(tiles[2]!.attributes('aria-checked')).toBe('true')
|
||||
})
|
||||
|
||||
it('switches selection on click in uncontrolled mode', async () => {
|
||||
const wrapper = mountComponent({sites})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
|
||||
await tiles[1]!.trigger('click')
|
||||
|
||||
expect(tiles[0]!.attributes('aria-checked')).toBe('false')
|
||||
expect(tiles[1]!.attributes('aria-checked')).toBe('true')
|
||||
expect(tiles[2]!.attributes('aria-checked')).toBe('false')
|
||||
})
|
||||
|
||||
it('sets roving tabindex (active = 0, others = -1)', () => {
|
||||
const wrapper = mountComponent({sites, modelValue: 'saint-jean'})
|
||||
const tiles = wrapper.findAll('[role="radio"]')
|
||||
expect(tiles[0]!.attributes('tabindex')).toBe('-1')
|
||||
expect(tiles[1]!.attributes('tabindex')).toBe('0')
|
||||
expect(tiles[2]!.attributes('tabindex')).toBe('-1')
|
||||
})
|
||||
|
||||
it('merges groupClass, tileClass and labelClass via twMerge', () => {
|
||||
const wrapper = mountComponent({
|
||||
sites,
|
||||
groupClass: 'rounded-none bg-black',
|
||||
tileClass: 'py-10',
|
||||
labelClass: 'text-xs',
|
||||
})
|
||||
const group = wrapper.find('[role="radiogroup"]')
|
||||
expect(group.classes()).toContain('rounded-none')
|
||||
expect(group.classes()).toContain('bg-black')
|
||||
|
||||
const tile = wrapper.find('[role="radio"]')
|
||||
expect(tile.classes()).toContain('py-10')
|
||||
expect(tile.classes()).not.toContain('py-4')
|
||||
|
||||
const label = tile.find('span')
|
||||
expect(label.classes()).toContain('text-xs')
|
||||
})
|
||||
|
||||
it('uses a custom id when provided', () => {
|
||||
const wrapper = mountComponent({sites, id: 'my-selector'})
|
||||
expect(wrapper.find('[role="radiogroup"]').attributes('id')).toBe('my-selector')
|
||||
})
|
||||
})
|
||||
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-bind="$attrs"
|
||||
:id="componentId"
|
||||
role="radiogroup"
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<button
|
||||
v-for="site in sites"
|
||||
:key="site.id"
|
||||
type="button"
|
||||
role="radio"
|
||||
:aria-checked="activeId === site.id"
|
||||
:tabindex="activeId === site.id ? 0 : -1"
|
||||
:style="{
|
||||
backgroundColor: activeColor,
|
||||
opacity: activeId === site.id ? 1 : 0.4,
|
||||
}"
|
||||
:class="mergedTileClass"
|
||||
@click="select(site.id)"
|
||||
>
|
||||
<span :class="mergedLabelClass">{{ site.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioSiteSelector', inheritAttrs: false})
|
||||
|
||||
type Site = {
|
||||
id: string
|
||||
name: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
sites: Site[]
|
||||
modelValue?: string
|
||||
id?: string
|
||||
groupClass?: string
|
||||
tileClass?: string
|
||||
labelClass?: string
|
||||
}>(), {
|
||||
modelValue: undefined,
|
||||
id: '',
|
||||
groupClass: '',
|
||||
tileClass: '',
|
||||
labelClass: '',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', site: Site): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const componentId = computed(() => props.id || `malio-site-selector-${generatedId}`)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(props.sites.length > 0 ? props.sites[0]!.id : '')
|
||||
|
||||
const activeId = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
|
||||
const activeColor = computed(() =>
|
||||
props.sites.find((s) => s.id === activeId.value)?.color ?? '',
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'flex w-full',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedTileClass = computed(() =>
|
||||
twMerge(
|
||||
'flex-1 cursor-pointer px-6 py-4 text-center transition-opacity focus:outline-none',
|
||||
props.tileClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'text-white font-bold uppercase tracking-wide',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
function select(id: string) {
|
||||
const site = props.sites.find((s) => s.id === id)
|
||||
if (!site) return
|
||||
|
||||
if (!isControlled.value) {
|
||||
localValue.value = id
|
||||
}
|
||||
emit('update:modelValue', id)
|
||||
emit('change', site)
|
||||
}
|
||||
</script>
|
||||
@@ -1,187 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import TabList from './TabList.vue'
|
||||
|
||||
type Tab = {
|
||||
key: string
|
||||
label: string
|
||||
icon?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
type TabListProps = {
|
||||
tabs: Tab[]
|
||||
modelValue?: string
|
||||
id?: string
|
||||
}
|
||||
|
||||
const TabListForTest = TabList as DefineComponent<TabListProps>
|
||||
|
||||
const tabs: Tab[] = [
|
||||
{key: 'home', label: 'Accueil', icon: 'mdi:home'},
|
||||
{key: 'settings', label: 'Paramètres'},
|
||||
{key: 'profile', label: 'Profil', icon: 'mdi:account'},
|
||||
]
|
||||
|
||||
function mountComponent(props: TabListProps, slots?: Record<string, string>) {
|
||||
return mount(TabListForTest, {
|
||||
props,
|
||||
slots,
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioTabList', () => {
|
||||
it('renders all tab buttons with correct labels', () => {
|
||||
const wrapper = mountComponent({tabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons).toHaveLength(3)
|
||||
expect(buttons[0].text()).toContain('Accueil')
|
||||
expect(buttons[1].text()).toContain('Paramètres')
|
||||
expect(buttons[2].text()).toContain('Profil')
|
||||
})
|
||||
|
||||
it('renders icons for tabs that have one', () => {
|
||||
const wrapper = mountComponent({tabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[0].find('svg').exists()).toBe(true)
|
||||
expect(buttons[2].find('svg').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render icon when tab has no icon', () => {
|
||||
const wrapper = mountComponent({tabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[1].find('svg').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('first tab is active by default in uncontrolled mode', () => {
|
||||
const wrapper = mountComponent({tabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[0].attributes('aria-selected')).toBe('true')
|
||||
expect(buttons[1].attributes('aria-selected')).toBe('false')
|
||||
expect(buttons[2].attributes('aria-selected')).toBe('false')
|
||||
})
|
||||
|
||||
it('shows the panel content for the active tab (v-show)', () => {
|
||||
const wrapper = mountComponent({tabs}, {
|
||||
home: '<p>Home content</p>',
|
||||
settings: '<p>Settings content</p>',
|
||||
profile: '<p>Profile content</p>',
|
||||
})
|
||||
const panels = wrapper.findAll('[role="tabpanel"]')
|
||||
expect(panels[0].attributes('style')).toBeUndefined()
|
||||
expect(panels[1].attributes('style')).toContain('display: none')
|
||||
expect(panels[2].attributes('style')).toContain('display: none')
|
||||
})
|
||||
|
||||
it('switches tab on click in uncontrolled mode', async () => {
|
||||
const wrapper = mountComponent({tabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
|
||||
await buttons[1].trigger('click')
|
||||
|
||||
expect(buttons[1].attributes('aria-selected')).toBe('true')
|
||||
expect(buttons[0].attributes('aria-selected')).toBe('false')
|
||||
})
|
||||
|
||||
it('emits update:modelValue on click in controlled mode', async () => {
|
||||
const wrapper = mountComponent({tabs, modelValue: 'home'})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
|
||||
await buttons[2].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['profile'])
|
||||
})
|
||||
|
||||
it('respects modelValue for active tab in controlled mode', () => {
|
||||
const wrapper = mountComponent({tabs, modelValue: 'settings'})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[0].attributes('aria-selected')).toBe('false')
|
||||
expect(buttons[1].attributes('aria-selected')).toBe('true')
|
||||
expect(buttons[2].attributes('aria-selected')).toBe('false')
|
||||
})
|
||||
|
||||
it('sets correct aria-controls and aria-labelledby', () => {
|
||||
const wrapper = mountComponent({tabs, id: 'test'})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
const panels = wrapper.findAll('[role="tabpanel"]')
|
||||
|
||||
expect(buttons[0].attributes('aria-controls')).toBe('test-panel-home')
|
||||
expect(buttons[1].attributes('aria-controls')).toBe('test-panel-settings')
|
||||
expect(panels[0].attributes('aria-labelledby')).toBe('test-tab-home')
|
||||
expect(panels[1].attributes('aria-labelledby')).toBe('test-tab-settings')
|
||||
})
|
||||
|
||||
it('has role="tablist" on the tab container', () => {
|
||||
const wrapper = mountComponent({tabs})
|
||||
expect(wrapper.find('[role="tablist"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('active tab has tabindex 0, others have -1', () => {
|
||||
const wrapper = mountComponent({tabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[0].attributes('tabindex')).toBe('0')
|
||||
expect(buttons[1].attributes('tabindex')).toBe('-1')
|
||||
expect(buttons[2].attributes('tabindex')).toBe('-1')
|
||||
})
|
||||
|
||||
it('renders icon props correctly via findComponent', () => {
|
||||
const wrapper = mount(TabListForTest, {
|
||||
props: {tabs},
|
||||
})
|
||||
const icons = wrapper.findAllComponents(IconifyIcon)
|
||||
expect(icons).toHaveLength(2)
|
||||
expect(icons[0].props('icon')).toBe('mdi:home')
|
||||
expect(icons[1].props('icon')).toBe('mdi:account')
|
||||
})
|
||||
|
||||
it('sets disabled attribute and aria-disabled on disabled tabs', () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[1].attributes('disabled')).toBeDefined()
|
||||
expect(buttons[1].attributes('aria-disabled')).toBe('true')
|
||||
})
|
||||
|
||||
it('applies cursor-not-allowed on disabled tabs', () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
expect(buttons[1].classes()).toContain('cursor-not-allowed')
|
||||
expect(buttons[1].classes()).not.toContain('hover:text-m-primary/70')
|
||||
})
|
||||
|
||||
it('does not emit update:modelValue when clicking a disabled tab', async () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs, modelValue: 'a'})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
|
||||
await buttons[1].trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('does not change active tab in uncontrolled mode when clicking disabled tab', async () => {
|
||||
const disabledTabs: Tab[] = [
|
||||
{key: 'a', label: 'A'},
|
||||
{key: 'b', label: 'B', disabled: true},
|
||||
]
|
||||
const wrapper = mountComponent({tabs: disabledTabs})
|
||||
const buttons = wrapper.findAll('[role="tab"]')
|
||||
|
||||
await buttons[1].trigger('click')
|
||||
|
||||
expect(buttons[0].attributes('aria-selected')).toBe('true')
|
||||
expect(buttons[1].attributes('aria-selected')).toBe('false')
|
||||
})
|
||||
})
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div v-bind="$attrs">
|
||||
<div
|
||||
role="tablist"
|
||||
class="flex justify-center gap-[60px] border-b border-m-primary"
|
||||
>
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:id="`${componentId}-tab-${tab.key}`"
|
||||
:key="tab.key"
|
||||
role="tab"
|
||||
type="button"
|
||||
:aria-selected="activeTab === tab.key"
|
||||
:aria-controls="`${componentId}-panel-${tab.key}`"
|
||||
:aria-disabled="!!tab.disabled"
|
||||
:tabindex="activeTab === tab.key ? 0 : -1"
|
||||
:disabled="tab.disabled"
|
||||
:class="[
|
||||
'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
|
||||
activeTab === tab.key
|
||||
? 'cursor-pointer text-m-primary after:content-[\'\'] after:absolute after:-bottom-[3px] after:left-0 after:right-0 after:h-[3px] after:bg-m-primary'
|
||||
: tab.disabled
|
||||
? 'cursor-not-allowed text-m-primary/50'
|
||||
: 'cursor-pointer text-m-primary/50 hover:text-m-primary/70',
|
||||
]"
|
||||
@click="selectTab(tab.key)"
|
||||
>
|
||||
<IconifyIcon
|
||||
v-if="tab.icon"
|
||||
:icon="tab.icon"
|
||||
:width="tab.iconSize ?? 24"
|
||||
/>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
v-show="activeTab === tab.key"
|
||||
:id="`${componentId}-panel-${tab.key}`"
|
||||
:key="tab.key"
|
||||
role="tabpanel"
|
||||
:aria-labelledby="`${componentId}-tab-${tab.key}`"
|
||||
>
|
||||
<slot :name="tab.key" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useId} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
|
||||
defineOptions({name: 'MalioTabList', inheritAttrs: false})
|
||||
|
||||
type Tab = {
|
||||
key: string
|
||||
label: string
|
||||
icon?: string
|
||||
iconSize?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
tabs: Tab[]
|
||||
modelValue?: string
|
||||
id?: string
|
||||
}>(), {
|
||||
modelValue: undefined,
|
||||
id: '',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const componentId = computed(() => props.id || `malio-tab-list-${generatedId}`)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(props.tabs.length > 0 ? props.tabs[0].key : '')
|
||||
|
||||
const activeTab = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
|
||||
function selectTab(key: string) {
|
||||
const tab = props.tabs.find(t => t.key === key)
|
||||
if (tab?.disabled) return
|
||||
if (!isControlled.value) {
|
||||
localValue.value = key
|
||||
}
|
||||
emit('update:modelValue', key)
|
||||
}
|
||||
</script>
|
||||
@@ -1,79 +0,0 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Time from './Time.vue'
|
||||
|
||||
type TimeProps = {
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | null
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}
|
||||
|
||||
const TimeForTest = Time as DefineComponent<TimeProps>
|
||||
|
||||
const mountTime = (props: TimeProps = {}) =>
|
||||
mount(TimeForTest, {props})
|
||||
|
||||
describe('MalioTime', () => {
|
||||
it('renders two text inputs and a separator', () => {
|
||||
const wrapper = mountTime()
|
||||
|
||||
expect(wrapper.findAll('input')).toHaveLength(2)
|
||||
expect(wrapper.text()).toContain(':')
|
||||
})
|
||||
|
||||
it('uses separate ids for hours and minutes inputs', () => {
|
||||
const wrapper = mountTime({label: 'Horaire'})
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
expect(inputs[0].attributes('id')).toContain('-hours')
|
||||
expect(inputs[1].attributes('id')).toContain('-minutes')
|
||||
expect(wrapper.get('label').attributes('for')).toBe(inputs[0].attributes('id'))
|
||||
})
|
||||
|
||||
it('clamps values to 24 hours and 59 minutes', async () => {
|
||||
const wrapper = mountTime({modelValue: ''})
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
await inputs[0].setValue('99')
|
||||
await inputs[1].setValue('88')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['23:59'])
|
||||
expect((inputs[0].element as HTMLInputElement).value).toBe('23')
|
||||
expect((inputs[1].element as HTMLInputElement).value).toBe('59')
|
||||
})
|
||||
|
||||
it('pads single digits on blur', async () => {
|
||||
const wrapper = mountTime({modelValue: ''})
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
await inputs[0].setValue('7')
|
||||
await inputs[0].trigger('blur')
|
||||
await inputs[1].setValue('5')
|
||||
await inputs[1].trigger('blur')
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['07:05'])
|
||||
expect((inputs[0].element as HTMLInputElement).value).toBe('07')
|
||||
expect((inputs[1].element as HTMLInputElement).value).toBe('05')
|
||||
})
|
||||
|
||||
it('applies the primary border to the focused field', async () => {
|
||||
const wrapper = mountTime()
|
||||
const inputs = wrapper.findAll('input')
|
||||
|
||||
await inputs[0].trigger('focus')
|
||||
|
||||
expect(inputs[0].classes()).toContain('border-m-primary')
|
||||
expect(inputs[1].classes()).not.toContain('border-m-primary')
|
||||
})
|
||||
})
|
||||
@@ -1,264 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :class="mergedGroupClass">
|
||||
<label
|
||||
v-if="label"
|
||||
:for="hoursInputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
:id="hoursInputId"
|
||||
:name="hoursName"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass('hours')"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:value="hoursValue"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="00"
|
||||
maxlength="2"
|
||||
@input="onHoursInput"
|
||||
@focus="activeField = 'hours'"
|
||||
@blur="onHoursBlur"
|
||||
>
|
||||
|
||||
<span class="text-[18px] text-black">:</span>
|
||||
|
||||
<input
|
||||
ref="minutesInputRef"
|
||||
:id="minutesInputId"
|
||||
:name="minutesName"
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass('minutes')"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:value="minutesValue"
|
||||
v-bind="attrs"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="00"
|
||||
maxlength="2"
|
||||
@input="onMinutesInput"
|
||||
@focus="activeField = 'minutes'"
|
||||
@blur="onMinutesBlur"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="hint || hasError || hasSuccess"
|
||||
:id="`${inputId}-describedby`"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, nextTick, ref, useAttrs, useId, watch} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioTime', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
label?: string
|
||||
name?: string
|
||||
modelValue?: string | null | undefined
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
modelValue: undefined,
|
||||
label: '',
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
required: false,
|
||||
readonly: false,
|
||||
disabled: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
},
|
||||
)
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const hoursValue = ref('')
|
||||
const minutesValue = ref('')
|
||||
const activeField = ref<'hours' | 'minutes' | null>(null)
|
||||
const minutesInputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-time-${generatedId}`)
|
||||
const hoursInputId = computed(() => `${inputId.value}-hours`)
|
||||
const minutesInputId = computed(() => `${inputId.value}-minutes`)
|
||||
const hoursName = computed(() => (props.name ? `${props.name}-hours` : ''))
|
||||
const minutesName = computed(() => (props.name ? `${props.name}-minutes` : ''))
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const padSegment = (value: string) => (value === '' ? '' : value.padStart(2, '0'))
|
||||
|
||||
const sanitizeDigits = (value: string) =>
|
||||
value.replace(/\D/g, '').slice(0, 2)
|
||||
|
||||
const normalizeHours = (value: string) => {
|
||||
const digits = sanitizeDigits(value)
|
||||
if (digits === '') return ''
|
||||
if (Number.parseInt(digits, 10) > 23) return '23'
|
||||
return digits
|
||||
}
|
||||
|
||||
const normalizeMinutes = (value: string) => {
|
||||
const digits = sanitizeDigits(value)
|
||||
if (digits === '') return ''
|
||||
if (Number.parseInt(digits, 10) > 59) return '59'
|
||||
return digits
|
||||
}
|
||||
|
||||
const parseTimeValue = (value: string | null | undefined) => {
|
||||
if (!value) return {hours: '', minutes: ''}
|
||||
|
||||
const [rawHours = '', rawMinutes = ''] = value.split(':')
|
||||
|
||||
return {
|
||||
hours: normalizeHours(rawHours),
|
||||
minutes: normalizeMinutes(rawMinutes),
|
||||
}
|
||||
}
|
||||
|
||||
const syncFromModelValue = (value: string | null | undefined) => {
|
||||
if (activeField.value) return
|
||||
const parsedValue = parseTimeValue(value)
|
||||
hoursValue.value = parsedValue.hours
|
||||
minutesValue.value = parsedValue.minutes
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, syncFromModelValue, {immediate: true})
|
||||
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge(
|
||||
'relative mt-4 flex w-full items-center',
|
||||
props.groupClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'mt-px mr-4 cursor-pointer text-black text-[18px]',
|
||||
hasError.value ? 'text-m-danger' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60' : '',
|
||||
props.labelClass
|
||||
),
|
||||
)
|
||||
|
||||
const mergedInputClass = (field: 'hours' | 'minutes') =>
|
||||
twMerge(
|
||||
'h-[30px] w-10 border bg-white text-center text-[18px] outline-none rounded-md placeholder:text-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
|
||||
hasError.value
|
||||
? 'border-m-danger focus:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success focus:border-m-success'
|
||||
: activeField.value === field
|
||||
? 'border-m-primary text-m-primary'
|
||||
: 'border-black text-black',
|
||||
props.inputClass,
|
||||
)
|
||||
|
||||
const emitCurrentValue = (pad = false) => {
|
||||
if (!hoursValue.value && !minutesValue.value) {
|
||||
emit('update:modelValue', '')
|
||||
return
|
||||
}
|
||||
|
||||
const h = pad ? padSegment(hoursValue.value || '0') : (hoursValue.value || '00')
|
||||
const m = pad ? padSegment(minutesValue.value || '0') : (minutesValue.value || '00')
|
||||
|
||||
emit('update:modelValue', `${h}:${m}`)
|
||||
}
|
||||
|
||||
const onHoursInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const normalizedValue = normalizeHours(target.value)
|
||||
|
||||
hoursValue.value = normalizedValue
|
||||
target.value = normalizedValue
|
||||
emitCurrentValue()
|
||||
|
||||
if (normalizedValue.length === 2) {
|
||||
nextTick(() => minutesInputRef.value?.focus())
|
||||
}
|
||||
}
|
||||
|
||||
const onMinutesInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const normalizedValue = normalizeMinutes(target.value)
|
||||
|
||||
minutesValue.value = normalizedValue
|
||||
target.value = normalizedValue
|
||||
emitCurrentValue()
|
||||
}
|
||||
|
||||
const formatFieldOnBlur = (field: 'hours' | 'minutes') => {
|
||||
if (field === 'hours' && hoursValue.value) {
|
||||
hoursValue.value = padSegment(hoursValue.value)
|
||||
}
|
||||
|
||||
if (field === 'minutes' && minutesValue.value) {
|
||||
minutesValue.value = padSegment(minutesValue.value)
|
||||
}
|
||||
|
||||
emitCurrentValue(true)
|
||||
}
|
||||
|
||||
const onHoursBlur = () => {
|
||||
formatFieldOnBlur('hours')
|
||||
activeField.value = null
|
||||
}
|
||||
|
||||
const onMinutesBlur = () => {
|
||||
formatFieldOnBlur('minutes')
|
||||
activeField.value = null
|
||||
}
|
||||
</script>
|
||||
@@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<Story title="Button/Button">
|
||||
<Variant title="Primary">
|
||||
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
||||
<MalioButton label="Valider" />
|
||||
<MalioButton label="Valider" icon-name="mdi:check" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-hover" icon-name="mdi:check" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
|
||||
<MalioButton label="Valider" button-class="bg-m-btn-primary-active" icon-name="mdi:check" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
||||
<MalioButton label="Valider" disabled />
|
||||
<MalioButton label="Valider" disabled icon-name="mdi:check" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Secondary">
|
||||
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" />
|
||||
<MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
|
||||
<MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" icon-name="mdi:pencil" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
||||
<MalioButton label="Modifier" variant="secondary" disabled />
|
||||
<MalioButton label="Modifier" variant="secondary" disabled icon-name="mdi:pencil" icon-position="left" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Tertiary">
|
||||
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" />
|
||||
<MalioButton label="Voir plus" variant="tertiary" icon-name="mdi:arrow-right" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" icon-name="mdi:arrow-right" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
|
||||
<MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" icon-name="mdi:arrow-right" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
||||
<MalioButton label="Voir plus" variant="tertiary" disabled />
|
||||
<MalioButton label="Voir plus" variant="tertiary" disabled icon-name="mdi:arrow-right" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Danger">
|
||||
<div class="grid grid-cols-2 items-start gap-3 p-4">
|
||||
<p class="text-xs font-semibold text-m-muted">Default</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Default + icon</p>
|
||||
<MalioButton label="Supprimer" variant="danger" />
|
||||
<MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Hover</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Hover + icon</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash-can-outline" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Active</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Active + icon</p>
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" />
|
||||
<MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash-can-outline" icon-position="left" />
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled</p>
|
||||
<p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
|
||||
<MalioButton label="Supprimer" variant="danger" disabled />
|
||||
<MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash-can-outline" icon-position="left" />
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Largeur personnalisée">
|
||||
<div class="flex flex-col items-start gap-3 p-4">
|
||||
<MalioButton label="Pleine largeur" button-class="w-full" />
|
||||
<MalioButton label="Compact" button-class="w-auto px-6" />
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioButton
|
||||
|
||||
Bouton d'action avec 4 variantes visuelles et support d'icône optionnelle.
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML du bouton |
|
||||
| `label` | `string` | `''` | Texte du bouton (peut aussi être fourni via le slot par défaut) |
|
||||
| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle |
|
||||
| `disabled` | `boolean` | `false` | Désactive le bouton |
|
||||
| `buttonClass` | `string` | `''` | Classes CSS additionnelles (fusionnées via `twMerge`) |
|
||||
| `iconName` | `string` | `''` | Nom de l'icône Iconify (ex: `mdi:check`) |
|
||||
| `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône par rapport au texte |
|
||||
| `iconSize` | `string \| number` | `20` | Taille de l'icône en pixels |
|
||||
|
||||
## Variantes
|
||||
|
||||
- **Primary** : Fond `m-btn-primary`, texte blanc — action principale
|
||||
- **Secondary** : Fond `m-btn-secondary`, texte blanc — action secondaire
|
||||
- **Tertiary** : Bordure et texte `m-btn-primary`, fond transparent — action tertiaire
|
||||
- **Danger** : Fond `m-btn-danger`, texte blanc — action destructrice
|
||||
|
||||
## États
|
||||
|
||||
Chaque variante a 4 états visuels : Default, Hover, Active, Disabled.
|
||||
|
||||
## Dimensions par défaut
|
||||
|
||||
- Largeur : 240px (`w-[240px]`), personnalisable via `buttonClass`
|
||||
- Hauteur : 40px (`h-[40px]`)
|
||||
- Police : 16px bold, line-height 150%
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `type="button"` évite la soumission de formulaire involontaire
|
||||
- Support `disabled` natif
|
||||
- Focus visible avec `focus-visible:ring-2`
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `click` | `MouseEvent` | Émis au clic (pas émis si `disabled`) |
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MalioButton from '../../components/malio/button/Button.vue'
|
||||
|
||||
defineOptions({ name: 'ButtonStory' })
|
||||
</script>
|
||||
@@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<Story title="Button/Icon">
|
||||
<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>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:bell-outline"
|
||||
aria-label="Notifications"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:cog-outline"
|
||||
aria-label="Paramètres"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:format-list-bulleted"
|
||||
aria-label="Liste"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:view-grid-outline"
|
||||
aria-label="Grille"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:folder-outline"
|
||||
aria-label="Dossier"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:delete-outline"
|
||||
aria-label="Supprimer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:close"
|
||||
aria-label="Fermer"
|
||||
variant="ghost"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:download"
|
||||
aria-label="Télécharger"
|
||||
variant="ghost"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
|
||||
<div class="flex gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Retour"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:pencil-outline"
|
||||
aria-label="Modifier"
|
||||
variant="ghost"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
|
||||
<div class="flex items-center gap-4">
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Petit"
|
||||
:icon-size="16"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Normal"
|
||||
:icon-size="24"
|
||||
/>
|
||||
<MalioButtonIcon
|
||||
icon="mdi:arrow-left"
|
||||
aria-label="Grand"
|
||||
:icon-size="32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioButtonIcon
|
||||
|
||||
Bouton contenant uniquement une icône, sans texte. Utilisé pour des actions
|
||||
rapides et compactes (retour, modifier, supprimer, etc.).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
|
||||
- Type: string
|
||||
- Description: Identifiant HTML du bouton.
|
||||
- Comportement: Si non fourni, un id unique est généré automatiquement.
|
||||
|
||||
### icon
|
||||
|
||||
- Type: string
|
||||
- **Requis**
|
||||
- Description: Nom de l'icône Iconify (ex: `mdi:arrow-left`).
|
||||
|
||||
### ariaLabel
|
||||
|
||||
- Type: string
|
||||
- **Requis**
|
||||
- Description: Label d'accessibilité du bouton. Obligatoire car le bouton
|
||||
n'a pas de texte visible.
|
||||
|
||||
### iconSize
|
||||
|
||||
- Type: string | number
|
||||
- Défaut: 24
|
||||
- Description: Taille de l'icône en pixels.
|
||||
|
||||
### buttonClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS additionnelles appliquées au bouton.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive le bouton.
|
||||
|
||||
### variant
|
||||
|
||||
- Type: `'filled' | 'ghost'`
|
||||
- Défaut: `filled`
|
||||
- Description: Variante visuelle du bouton.
|
||||
- `filled` : fond coloré, icône blanche.
|
||||
- `ghost` : sans fond, icône colorée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement visuel
|
||||
|
||||
### Variante `filled` (défaut)
|
||||
|
||||
- **Default** : fond `#222783`, icône blanche
|
||||
- **Hover** : fond `#121CDB`
|
||||
- **Active** : fond `#212567`
|
||||
- **Disabled** : fond `#CCCCDF`
|
||||
|
||||
### Variante `ghost`
|
||||
|
||||
- **Default** : icône `#222783`, sans fond
|
||||
- **Hover** : icône `#121CDB`
|
||||
- **Active** : icône `#212567`
|
||||
- **Disabled** : icône `#CCCCDF`
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-label` est requis pour décrire l'action du bouton.
|
||||
- `type="button"` pour éviter les soumissions de formulaire accidentelles.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### click
|
||||
|
||||
- Émis au clic sur le bouton.
|
||||
- Non émis si le bouton est `disabled`.
|
||||
- Retourne l'événement `MouseEvent` natif.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MalioButtonIcon from '../../components/malio/button/ButtonIcon.vue'
|
||||
</script>
|
||||
@@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Checkbox">
|
||||
<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>
|
||||
<MalioCheckbox
|
||||
v-model="simpleValue"
|
||||
label="Accepter les conditions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Coché</h2>
|
||||
<MalioCheckbox
|
||||
v-model="checkedValue"
|
||||
label="Newsletter activée"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioCheckbox
|
||||
v-model="hintValue"
|
||||
label="Recevoir les notifications"
|
||||
hint="Vous pouvez désactiver à tout moment"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioCheckbox
|
||||
v-model="disabledValue"
|
||||
label="Option verrouillée"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioCheckbox
|
||||
v-model="readonlyValue"
|
||||
label="Accepté par l'utilisateur"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioCheckbox
|
||||
v-model="errorValue"
|
||||
label="Accepter les conditions"
|
||||
error="Vous devez accepter les conditions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioCheckbox
|
||||
v-model="successValue"
|
||||
label="Conditions acceptées"
|
||||
success="Merci"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioCheckbox
|
||||
|
||||
Composant checkbox custom avec `v-model`, message d'aide, et états visuels
|
||||
`error` / `success`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props
|
||||
|
||||
### id
|
||||
|
||||
- Type: `string`
|
||||
- Description: Identifiant HTML du checkbox.
|
||||
- Comportement: si absent, un id unique est généré automatiquement.
|
||||
|
||||
### label
|
||||
|
||||
- Type: `string`
|
||||
- Description: Texte affiche a cote de la case.
|
||||
|
||||
### name
|
||||
|
||||
- Type: `string`
|
||||
- Description: Attribut `name` du champ.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: `boolean | null | undefined`
|
||||
- Description: État coche du composant.
|
||||
|
||||
### inputClass
|
||||
|
||||
- Type: `string`
|
||||
- Description: Classes supplémentaires appliquées a l'input natif.
|
||||
|
||||
### labelClass
|
||||
|
||||
- Type: `string`
|
||||
- Description: Classes supplémentaires appliquées au label.
|
||||
|
||||
### groupClass
|
||||
|
||||
- Type: `string`
|
||||
- Description: Classes supplémentaires appliquées au conteneur.
|
||||
|
||||
### required
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Ajoute l'attribut HTML `required`.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Désactive le composant.
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Empêche la mise a jour du `v-model` tout en gardant
|
||||
l'affichage courant.
|
||||
|
||||
### hint
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message d'aide affiche sous le checkbox.
|
||||
|
||||
### error
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message d'erreur.
|
||||
- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
|
||||
d'erreur au texte et a la case.
|
||||
|
||||
### success
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message de succès.
|
||||
- Effet: applique la couleur de succès au texte et a la case si `error`
|
||||
est absent.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-invalid` est active si `error` existe.
|
||||
- `aria-describedby` pointe vers le message affiche.
|
||||
- L'input natif reste present pour conserver le comportement formulaire.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Event
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis a chaque changement de l'état coche.
|
||||
- Retourne un booléen `true` ou `false`.
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioCheckbox from '../../components/malio/checkbox/Checkbox.vue'
|
||||
|
||||
const simpleValue = ref(false)
|
||||
const checkedValue = ref(true)
|
||||
const hintValue = ref(false)
|
||||
const disabledValue = ref(true)
|
||||
const readonlyValue = ref(true)
|
||||
const errorValue = ref(false)
|
||||
const successValue = ref(true)
|
||||
</script>
|
||||
@@ -1,195 +0,0 @@
|
||||
<template>
|
||||
<Story title="Data/DataTable">
|
||||
<Variant title="Avec filtres et pagination">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="paginatedItems"
|
||||
:total-items="filteredItems.length"
|
||||
v-model:page="page"
|
||||
v-model:per-page="perPage"
|
||||
@row-click="onRowClick"
|
||||
>
|
||||
<template #header-nom>
|
||||
<input
|
||||
v-model="filtreNom"
|
||||
type="text"
|
||||
placeholder="Nom"
|
||||
class="w-full border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none"
|
||||
>
|
||||
</template>
|
||||
<template #header-ville>
|
||||
<select
|
||||
:value="filtreVille ?? ''"
|
||||
class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-sm outline-none"
|
||||
@change="filtreVille = ($event.target as HTMLSelectElement).value || null"
|
||||
>
|
||||
<option value="">Ville</option>
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</select>
|
||||
</template>
|
||||
<template #cell-montant="{ item }">
|
||||
<strong>{{ item.montant }} €</strong>
|
||||
</template>
|
||||
</MalioDataTable>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Sans filtres">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems"
|
||||
:total-items="simpleItems.length"
|
||||
v-model:page="pageSimple"
|
||||
v-model:per-page="perPageSimple"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="État vide">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columns"
|
||||
:items="[]"
|
||||
:total-items="0"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Lignes non cliquables">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems.slice(0, 3)"
|
||||
:total-items="3"
|
||||
:row-clickable="false"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Sans filtre ni pagination">
|
||||
<div class="p-4">
|
||||
<MalioDataTable
|
||||
:columns="columnsSimple"
|
||||
:items="simpleItems.slice(0, 5)"
|
||||
:total-items="0"
|
||||
:row-clickable="false"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioDataTable
|
||||
|
||||
Tableau de données presentational avec pagination, filtres par slots et lignes cliquables.
|
||||
|
||||
## Props détaillées
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML |
|
||||
| `columns` | `{ key: string, label: string }[]` | **requis** | Définition des colonnes |
|
||||
| `items` | `Record<string, any>[]` | **requis** | Données à afficher |
|
||||
| `totalItems` | `number` | **requis** | Total pour la pagination |
|
||||
| `page` | `number` | `1` | Page courante (v-model) |
|
||||
| `perPage` | `number` | `10` | Lignes par page (v-model) |
|
||||
| `perPageOptions` | `number[]` | `[10, 25, 50]` | Options du sélecteur de lignes |
|
||||
| `rowClickable` | `boolean` | `true` | Lignes cliquables |
|
||||
| `tableClass` | `string` | `''` | Classes CSS sur le wrapper (twMerge) |
|
||||
| `emptyMessage` | `string` | `'Aucune donnée'` | Message si items vide |
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Scope | Description |
|
||||
|------|-------|-------------|
|
||||
| `#header-{key}` | `{ column }` | Filtre dans le `<th>` (placeholder = label). Fallback : texte du label |
|
||||
| `#cell-{key}` | `{ item, column }` | Contenu du `<td>`. Fallback : `item[key]` |
|
||||
| `#empty` | — | Contenu état vide. Fallback : `emptyMessage` |
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:page` | `number` | Changement de page |
|
||||
| `update:per-page` | `number` | Changement du nb de lignes (reset page à 1) |
|
||||
| `row-click` | `Record<string, any>` | Clic sur une ligne |
|
||||
|
||||
## Pagination
|
||||
|
||||
- ≤ 5 pages : toutes affichées
|
||||
- \> 5 pages : page 1 … [voisin] **[courante]** [voisin] … dernière
|
||||
- Boutons Prev/Next toujours visibles, désactivés aux extrêmes
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `<th scope="col">` sur chaque en-tête
|
||||
- `<nav aria-label="Pagination">` autour de la pagination
|
||||
- Page courante avec `aria-current="page"`
|
||||
- Lignes cliquables : `tabindex="0"` + Enter/Space
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import MalioDataTable from '../../components/malio/datatable/DataTable.vue'
|
||||
|
||||
defineOptions({ name: 'DataTableStory' })
|
||||
|
||||
const columns = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'prenom', label: 'Prénom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
{ key: 'montant', label: 'Montant' },
|
||||
]
|
||||
|
||||
const columnsSimple = [
|
||||
{ key: 'nom', label: 'Nom' },
|
||||
{ key: 'ville', label: 'Ville' },
|
||||
]
|
||||
|
||||
const allItems = [
|
||||
{ id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
|
||||
{ id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
|
||||
{ id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
|
||||
{ id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
|
||||
{ id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
|
||||
{ id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
|
||||
{ id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
|
||||
{ id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
|
||||
{ id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
|
||||
{ id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
|
||||
{ id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
|
||||
{ id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
|
||||
]
|
||||
|
||||
const simpleItems = allItems.map(i => ({ nom: i.nom, ville: i.ville }))
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(5)
|
||||
const filtreNom = ref('')
|
||||
const filtreVille = ref<string | number | null>(null)
|
||||
|
||||
const pageSimple = ref(1)
|
||||
const perPageSimple = ref(10)
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
return allItems.filter((item) => {
|
||||
if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
|
||||
if (filtreVille.value && item.ville !== filtreVille.value) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
const paginatedItems = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return filteredItems.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
function onRowClick(item: Record<string, unknown>) {
|
||||
alert(`Clic sur ${item.nom} ${item.prenom}`)
|
||||
}
|
||||
</script>
|
||||
@@ -1,123 +0,0 @@
|
||||
<template>
|
||||
<Story title="Overlay/Drawer">
|
||||
<Variant title="Simple">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showSimple = true"
|
||||
>
|
||||
Ouvrir le drawer
|
||||
</button>
|
||||
<MalioDrawer v-model="showSimple" title="Détails">
|
||||
<p>Contenu simple du drawer.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Avec formulaire">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showForm = true"
|
||||
>
|
||||
Ouvrir le formulaire
|
||||
</button>
|
||||
<MalioDrawer v-model="showForm" title="Nouveau contact">
|
||||
<div class="flex flex-col gap-4">
|
||||
<MalioInputText v-model="formNom" label="Nom" />
|
||||
<MalioInputText v-model="formPrenom" label="Prénom" />
|
||||
<MalioButton label="Enregistrer" button-class="w-full" @click="showForm = false" />
|
||||
</div>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Sans bouton fermer">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showNoClose = true"
|
||||
>
|
||||
Ouvrir (sans croix)
|
||||
</button>
|
||||
<MalioDrawer v-model="showNoClose" title="Information" :show-close="false">
|
||||
<p>Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Largeur personnalisée">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showWide = true"
|
||||
>
|
||||
Ouvrir (large)
|
||||
</button>
|
||||
<MalioDrawer v-model="showWide" title="Drawer large" drawer-class="max-w-2xl">
|
||||
<p>Ce drawer utilise une largeur personnalisée via la prop drawerClass.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioDrawer
|
||||
|
||||
Panneau latéral (drawer) qui s'ouvre depuis la droite avec un fond semi-transparent.
|
||||
|
||||
## Props détaillées
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto-généré | Identifiant HTML du drawer |
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `title` | `string` | `''` | Titre affiché dans le header |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `drawerClass` | `string` | `''` | Classes CSS additionnelles sur le panneau (fusionnées via `twMerge`) |
|
||||
|
||||
## Comportement
|
||||
|
||||
- Le drawer s'ouvre en glissant depuis la droite avec une transition
|
||||
- Un backdrop semi-transparent couvre le reste de la page
|
||||
- Clic sur le backdrop ferme le drawer
|
||||
- Bouton de fermeture (croix) en haut à droite, masquable via `showClose`
|
||||
- Contenu scrollable si plus haut que la fenêtre
|
||||
- Teleport vers `<body>` pour éviter les problèmes de z-index
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `role="dialog"` et `aria-modal="true"` sur le panneau
|
||||
- `aria-labelledby` lié au titre
|
||||
- Bouton fermer avec `aria-label="Fermer"`
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
|-------|---------|-------------|
|
||||
| `update:modelValue` | `boolean` | Émis à la fermeture (backdrop ou bouton) |
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
|------|-------------|
|
||||
| `default` | Contenu du drawer |
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioDrawer from '../../components/malio/drawer/Drawer.vue'
|
||||
import MalioInputText from '../../components/malio/input/InputText.vue'
|
||||
import MalioButton from '../../components/malio/button/Button.vue'
|
||||
|
||||
defineOptions({ name: 'DrawerStory' })
|
||||
|
||||
const showSimple = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showNoClose = ref(false)
|
||||
const showWide = ref(false)
|
||||
|
||||
const formNom = ref('Dupont')
|
||||
const formPrenom = ref('Jean')
|
||||
</script>
|
||||
@@ -1,259 +0,0 @@
|
||||
<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">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 hintValue = ref('')
|
||||
const disabledValue = ref('1500.00')
|
||||
const readonlyValue = ref('2450.75')
|
||||
const errorValue = ref('0.00')
|
||||
const successValue = ref('350.50')
|
||||
</script>
|
||||
@@ -1,294 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Autocomplete">
|
||||
<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 (statique)</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="simpleValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="leftIconValue"
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
icon-position="left"
|
||||
:options="staticOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4 md:col-span-2">
|
||||
<h2 class="mb-4 text-xl font-bold">Branché sur une API (simulé)</h2>
|
||||
<p class="mb-3 text-sm text-m-muted">
|
||||
Tapez au moins 2 caractères. Le parent écoute <code>@search</code> et alimente <code>options</code> + <code>loading</code>.
|
||||
</p>
|
||||
<MalioInputAutocomplete
|
||||
v-model="apiValue"
|
||||
label="Client"
|
||||
:options="apiOptions"
|
||||
:loading="apiLoading"
|
||||
:min-search-length="2"
|
||||
icon-name="mdi:magnify"
|
||||
icon-position="left"
|
||||
@search="onSearchApi"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Création libre (allowCreate)</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="createValue"
|
||||
label="Catégorie"
|
||||
:options="staticOptions"
|
||||
allow-create
|
||||
hint="Taper Entrée pour créer une nouvelle valeur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="disabledValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="readonlyValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="hintValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
hint="Sélectionne un pays dans la liste"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="errorValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
error="Sélection invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputAutocomplete
|
||||
v-model="successValue"
|
||||
label="Pays"
|
||||
:options="staticOptions"
|
||||
success="Sélection valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputAutocomplete
|
||||
|
||||
Champ de saisie assistée (typeahead / combobox) : l'utilisateur tape pour filtrer une liste d'options, ou pour déclencher une recherche côté parent (API). Combine le pattern floating-label des autres inputs avec un dropdown inspiré de `MalioSelect`. Conçu pour les cas ERP où la liste vient d'un appel API (auth, transformation, cache gérés par le parent).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
- Type: string
|
||||
- Description: Identifiant HTML de l'input. Auto-généré si non fourni (préfixe `malio-input-autocomplete-`).
|
||||
|
||||
### label
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
|
||||
### name
|
||||
- Type: string
|
||||
- Description: Attribut name de l'input (formulaires).
|
||||
|
||||
### modelValue
|
||||
- Type: `string | number | null | undefined`
|
||||
- Description: Valeur sélectionnée. Doit correspondre à un `option.value` (ou être un texte libre si `allowCreate`).
|
||||
|
||||
### options
|
||||
- Type: `{ label: string; value: string | number }[]`
|
||||
- Défaut: `[]`
|
||||
- Description: Liste affichée dans le dropdown. Le parent alimente cette liste (statique ou via API en réponse à l'event `search`).
|
||||
|
||||
### loading
|
||||
- Type: boolean
|
||||
- Défaut: `false`
|
||||
- Description: Affiche un spinner à la place du chevron et un message dans le dropdown.
|
||||
|
||||
### debounce
|
||||
- Type: number
|
||||
- Défaut: `300`
|
||||
- Description: Délai (ms) avant émission de l'event `search` après une frappe. Évite de spammer l'API.
|
||||
|
||||
### minSearchLength
|
||||
- Type: number
|
||||
- Défaut: `0`
|
||||
- Description: Nombre minimum de caractères avant d'émettre `search`. Pratique pour API : ne pas appeler avec query vide.
|
||||
|
||||
### allowCreate
|
||||
- Type: boolean
|
||||
- Défaut: `false`
|
||||
- Description: Si vrai, l'utilisateur peut valider (Entrée ou clic ailleurs) une valeur libre non présente dans `options` ; émet l'event `create`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Icône
|
||||
|
||||
### iconName
|
||||
- Type: string
|
||||
- Défaut: `''` (aucune)
|
||||
- Description: Nom Iconify de l'icône décorative.
|
||||
|
||||
### iconPosition
|
||||
- Type: `'left' | 'right'`
|
||||
- Défaut: `left`
|
||||
- Description: Côté d'affichage de l'icône. À droite, l'icône s'aligne avec le chevron.
|
||||
|
||||
### iconSize / iconColor
|
||||
- Type: number / string
|
||||
- Défaut: `24` / `text-m-muted`
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Textes du dropdown
|
||||
|
||||
### noResultsText
|
||||
- Type: string
|
||||
- Défaut: `Aucun résultat`
|
||||
- Description: Affiché quand `options` est vide.
|
||||
|
||||
### loadingText
|
||||
- Type: string
|
||||
- Défaut: `Chargement…`
|
||||
- Description: Affiché pendant que `loading=true`.
|
||||
|
||||
### minSearchText
|
||||
- Type: string
|
||||
- Défaut: `Tapez pour rechercher`
|
||||
- Description: Affiché quand l'utilisateur n'a pas atteint `minSearchLength`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### inputClass / labelClass / groupClass
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées respectivement à l'input, au label et au conteneur (fusionnées via `twMerge`).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & Contraintes
|
||||
|
||||
### required / disabled / readonly
|
||||
- Type: boolean
|
||||
- Description: Attributs HTML standards. `disabled` et `readonly` empêchent l'ouverture du dropdown.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États & Messages
|
||||
|
||||
### hint / error / success
|
||||
- Type: string
|
||||
- Description: Messages affichés sous le champ. `error` est prioritaire et active `aria-invalid`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Clavier
|
||||
|
||||
- `↓` / `↑` : naviguer dans les options
|
||||
- `Entrée` : sélectionner l'option active (ou créer si `allowCreate`)
|
||||
- `Échap` : fermer le dropdown et revenir à la dernière sélection
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `role="combobox"` sur l'input avec `aria-expanded`, `aria-controls`, `aria-activedescendant`.
|
||||
- `role="listbox"` sur le dropdown, `role="option"` sur chaque entrée, `aria-selected` reflète `modelValue`.
|
||||
- `aria-invalid` activé si `error` existe.
|
||||
- `aria-describedby` référence dynamiquement le message affiché.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
- Émis quand l'utilisateur sélectionne une option. Permet l'utilisation avec v-model.
|
||||
|
||||
### search
|
||||
- Émis (après debounce + minSearchLength) avec la query texte tapée. C'est ce que le parent écoute pour lancer l'appel API.
|
||||
|
||||
### select
|
||||
- Émis avec l'objet `Option` complet (ou `null` à la réinitialisation). Utile pour récupérer le `label` côté parent en plus du `value`.
|
||||
|
||||
### create
|
||||
- Émis avec la chaîne saisie quand `allowCreate` est vrai et que l'utilisateur valide une valeur libre.
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputAutocomplete from '../../components/malio/input/InputAutocomplete.vue'
|
||||
|
||||
type Option = {label: string; value: string | number}
|
||||
|
||||
const staticOptions: Option[] = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
{label: 'Suisse', value: 'ch'},
|
||||
{label: 'Luxembourg', value: 'lu'},
|
||||
{label: 'Allemagne', value: 'de'},
|
||||
]
|
||||
|
||||
const simpleValue = ref<string | number | null>('fr')
|
||||
const leftIconValue = ref<string | number | null>(null)
|
||||
const createValue = ref<string | number | null>(null)
|
||||
const disabledValue = ref<string | number | null>('fr')
|
||||
const readonlyValue = ref<string | number | null>('be')
|
||||
const hintValue = ref<string | number | null>(null)
|
||||
const errorValue = ref<string | number | null>('fr')
|
||||
const successValue = ref<string | number | null>('fr')
|
||||
|
||||
const apiValue = ref<string | number | null>(null)
|
||||
const apiOptions = ref<Option[]>([])
|
||||
const apiLoading = ref(false)
|
||||
|
||||
const fakeClients: Option[] = [
|
||||
{label: 'Yuno Malio', value: 1},
|
||||
{label: 'Yuna Corp', value: 2},
|
||||
{label: 'Yum Foods', value: 3},
|
||||
{label: 'Acme Inc.', value: 4},
|
||||
{label: 'Globex Corp', value: 5},
|
||||
]
|
||||
|
||||
const onSearchApi = async (query: string) => {
|
||||
apiLoading.value = true
|
||||
await new Promise(resolve => setTimeout(resolve, 400))
|
||||
apiOptions.value = fakeClients.filter(c =>
|
||||
c.label.toLowerCase().includes(query.toLowerCase()),
|
||||
)
|
||||
apiLoading.value = false
|
||||
}
|
||||
</script>
|
||||
@@ -1,261 +0,0 @@
|
||||
<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">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 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>
|
||||
@@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Number">
|
||||
<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>
|
||||
<MalioInputNumber
|
||||
v-model="simpleValue"
|
||||
label="Quantite"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioInputNumber
|
||||
v-model="initialValue"
|
||||
label="Participants"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
|
||||
<MalioInputNumber
|
||||
v-model="boundedValue"
|
||||
label="Places"
|
||||
:min="1"
|
||||
:max="5"
|
||||
hint="Minimum 1, maximum 5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioInputNumber
|
||||
v-model="disabledValue"
|
||||
label="Articles"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputNumber
|
||||
v-model="readonlyValue"
|
||||
label="Tickets"
|
||||
readonly
|
||||
hint="Valeur verrouillee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputNumber
|
||||
v-model="errorValue"
|
||||
label="Quantite"
|
||||
:min="1"
|
||||
error="La quantite minimale est 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioInputNumber
|
||||
v-model="successValue"
|
||||
label="Quantite"
|
||||
success="Quantite validee"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputNumber from '../../components/malio/input/InputNumber.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const initialValue = ref('3')
|
||||
const boundedValue = ref('2')
|
||||
const disabledValue = ref('4')
|
||||
const readonlyValue = ref('7')
|
||||
const errorValue = ref('0')
|
||||
const successValue = ref('2')
|
||||
</script>
|
||||
@@ -1,252 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Password">
|
||||
<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>
|
||||
<MalioInputPassword
|
||||
v-model="simpleValue"
|
||||
label="Mot de passe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputPassword
|
||||
v-model="noIconValue"
|
||||
label="Mot de passe"
|
||||
:display-icon="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputPassword
|
||||
v-model="hintValue"
|
||||
label="Mot de passe"
|
||||
hint="8 caractères minimum"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputPassword
|
||||
v-model="disabledValue"
|
||||
label="Mot de passe"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputPassword
|
||||
v-model="readonlyValue"
|
||||
label="Mot de passe"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputPassword
|
||||
v-model="errorValue"
|
||||
label="Mot de passe"
|
||||
error="Le mot de passe est trop court"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputPassword
|
||||
v-model="successValue"
|
||||
label="Mot de passe"
|
||||
success="Mot de passe valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputPassword
|
||||
|
||||
Composant input mot de passe avec label flottant, toggle de visibilité
|
||||
(icône oeil), états visuels (erreur / succès) et accessibilité.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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 pour les formulaires).
|
||||
|
||||
### autocomplete
|
||||
|
||||
- Type: string
|
||||
- Description: Active ou configure l'autocomplétion navigateur.
|
||||
- Défaut: off
|
||||
|
||||
### 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.
|
||||
|
||||
### 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.
|
||||
- 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 de visibilité
|
||||
|
||||
### displayIcon
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: true
|
||||
- Description: Affiche ou masque l'icône toggle de visibilité.
|
||||
- Comportement:
|
||||
- `true` : affiche une icône oeil cliquable à droite de l'input.
|
||||
- `false` : pas d'icône, le type reste `password`.
|
||||
|
||||
### Icônes utilisées
|
||||
|
||||
- `mdi:eye-off-outline` : mot de passe masqué (état par défaut).
|
||||
- `mdi:eye-outline` : mot de passe visible (après clic).
|
||||
|
||||
### Couleur de l'icône
|
||||
|
||||
- `text-m-muted` par défaut.
|
||||
- `text-m-danger` si la prop `error` est renseignée.
|
||||
- `text-m-success` si la prop `success` est renseignée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement
|
||||
|
||||
- Au clic sur l'icône, le type de l'input alterne entre `password` et `text`.
|
||||
- Aucune validation interne.
|
||||
- Les états sont pilotés uniquement par les props.
|
||||
|
||||
## 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 MalioInputPassword from '../../components/malio/input/InputPassword.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const noIconValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('motdepasse123')
|
||||
const readonlyValue = ref('lectureseule')
|
||||
const errorValue = ref('abc')
|
||||
const successValue = ref('Str0ngP@ss!')
|
||||
</script>
|
||||
@@ -1,285 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Phone">
|
||||
<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>
|
||||
<MalioInputPhone
|
||||
v-model="simpleValue"
|
||||
label="Téléphone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec bouton « ajouter »</h2>
|
||||
<MalioInputPhone
|
||||
v-model="addableValue"
|
||||
label="Téléphone"
|
||||
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">Icône à droite</h2>
|
||||
<MalioInputPhone
|
||||
v-model="rightIconValue"
|
||||
label="Téléphone"
|
||||
icon-position="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputPhone
|
||||
v-model="noIconValue"
|
||||
label="Téléphone"
|
||||
:icon-name="''"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec masque français</h2>
|
||||
<MalioInputPhone
|
||||
v-model="maskedValue"
|
||||
label="Téléphone (FR)"
|
||||
mask="+33 # ## ## ## ##"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputPhone
|
||||
v-model="hintValue"
|
||||
label="Téléphone"
|
||||
hint="Format international recommandé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé (avec addable)</h2>
|
||||
<MalioInputPhone
|
||||
v-model="disabledValue"
|
||||
label="Téléphone"
|
||||
addable
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputPhone
|
||||
v-model="readonlyValue"
|
||||
label="Téléphone"
|
||||
addable
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputPhone
|
||||
v-model="errorValue"
|
||||
label="Téléphone"
|
||||
error="Numéro de téléphone invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputPhone
|
||||
v-model="successValue"
|
||||
label="Téléphone"
|
||||
success="Numéro valide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputPhone
|
||||
|
||||
Champ téléphone avec label flottant, icône phone par défaut (à gauche),
|
||||
états visuels (erreur / succès), accessibilité et bouton « + » optionnel
|
||||
pour gérer une liste de numéros côté parent (`type="tel"` +
|
||||
`inputmode="tel"`).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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-phone-`).
|
||||
|
||||
### label
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
|
||||
### 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 `tel` pour permettre au navigateur de suggérer un numéro
|
||||
enregistré.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | null | undefined
|
||||
- Description: Valeur contrôlée du composant.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### inputClass / labelClass / groupClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées respectivement à l'input, au
|
||||
label et au conteneur.
|
||||
|
||||
### mask
|
||||
|
||||
- Type: string | MaskInputOptions
|
||||
- Description: Masque maska à appliquer. Aucun masque par défaut —
|
||||
les formats téléphoniques varient trop selon les pays. À activer
|
||||
pour un usage mono-pays.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & Contraintes
|
||||
|
||||
### required / disabled / readonly
|
||||
|
||||
- Type: boolean
|
||||
- Description: Attributs HTML standards.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États & Messages
|
||||
|
||||
### hint / error / success
|
||||
|
||||
- Type: string
|
||||
- Description: Messages affichés sous le champ.
|
||||
- `error` est prioritaire sur `success` et active `aria-invalid`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Icône
|
||||
|
||||
### iconName
|
||||
|
||||
- Type: string
|
||||
- Défaut: `mdi:phone-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: `left` (laisse la droite libre pour le bouton +).
|
||||
|
||||
### iconSize / iconColor
|
||||
|
||||
- Type: number / string
|
||||
- Défaut: `24` / `text-m-muted`
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Bouton « ajouter »
|
||||
|
||||
### addable
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: `false`
|
||||
- Description: Affiche un bouton à droite du champ. Au clic, le
|
||||
composant émet l'event `add` — c'est au parent de gérer l'ajout
|
||||
d'un nouveau champ téléphone.
|
||||
|
||||
### addIconName
|
||||
|
||||
- Type: string
|
||||
- Défaut: `mdi:plus`
|
||||
- Description: Nom Iconify de l'icône du bouton d'ajout.
|
||||
|
||||
### addButtonLabel
|
||||
|
||||
- Type: string
|
||||
- Défaut: `Ajouter un numéro`
|
||||
- Description: Attribut `aria-label` du bouton (accessibilité).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement
|
||||
|
||||
- Aucune validation interne — le composant ne vérifie pas le format
|
||||
du numéro. Piloter `error` / `success` depuis le parent.
|
||||
- `inputmode="tel"` adapte le clavier mobile.
|
||||
- Le bouton `+` est désactivé quand `disabled` ou `readonly` est
|
||||
actif et n'émet pas l'event dans ce cas.
|
||||
|
||||
## Priorité visuelle
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. neutre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-invalid` activé si `error` existe.
|
||||
- `aria-describedby` référence dynamiquement le message affiché.
|
||||
- Le bouton `+` expose un `aria-label` configurable.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque modification de l'input. Permet l'utilisation avec
|
||||
v-model.
|
||||
|
||||
### add
|
||||
|
||||
- Émis au clic du bouton `+` (uniquement si `addable` est vrai et
|
||||
que le champ n'est ni `disabled` ni `readonly`).
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputPhone from '../../components/malio/input/InputPhone.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const addableValue = ref('')
|
||||
const rightIconValue = ref('')
|
||||
const noIconValue = ref('')
|
||||
const maskedValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('+33 6 12 34 56 78')
|
||||
const readonlyValue = ref('+33 6 12 34 56 78')
|
||||
const errorValue = ref('abc')
|
||||
const successValue = ref('+33 6 12 34 56 78')
|
||||
|
||||
const addClicks = ref(0)
|
||||
const onAdd = () => {
|
||||
addClicks.value++
|
||||
}
|
||||
</script>
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/RichText">
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioInputRichText
|
||||
v-model="simpleValue"
|
||||
label="Note"
|
||||
placeholder="Écrire ici…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
|
||||
<MalioInputRichText
|
||||
v-model="hintValue"
|
||||
label="Description"
|
||||
hint="Mise en forme via la barre d'outils"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputRichText
|
||||
v-model="errorValue"
|
||||
label="Compte-rendu"
|
||||
error="Le compte-rendu doit faire au moins 20 caractères"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputRichText
|
||||
v-model="successValue"
|
||||
label="Compte-rendu"
|
||||
success="Compte-rendu validé"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputRichText
|
||||
v-model="disabledValue"
|
||||
label="Note"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputRichText
|
||||
v-model="readonlyValue"
|
||||
label="Note"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4 lg:col-span-2">
|
||||
<h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
|
||||
<MalioInputRichText
|
||||
:model-value="readonlyValue"
|
||||
:editable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4 lg:col-span-2">
|
||||
<h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
|
||||
<MalioInputRichText
|
||||
v-model="htmlValue"
|
||||
label="Article"
|
||||
output-format="html"
|
||||
min-height="200px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4 lg:col-span-2">
|
||||
<h2 class="mb-4 text-xl font-bold">Couleurs & surlignage</h2>
|
||||
<MalioInputRichText
|
||||
v-model="colorValue"
|
||||
label="Note colorée"
|
||||
output-format="html"
|
||||
min-height="180px"
|
||||
hint="Tester les boutons couleur du texte et surlignage (palettes Jira-like)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputRichText
|
||||
|
||||
Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**.
|
||||
Sortie en **HTML** (par défaut) ou en **markdown**. Aligné sur le thème Malio
|
||||
(couleurs `m-*`, icônes `mdi:*`, états error / success / hint).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
|
||||
- Type: `string`
|
||||
- Description: Identifiant HTML.
|
||||
- Comportement: Généré automatiquement si non fourni (`malio-input-rich-text-…`).
|
||||
|
||||
### label
|
||||
|
||||
- Type: `string`
|
||||
- Description: Label affiché au-dessus de l'éditeur.
|
||||
- Comportement: Change de couleur selon l'état (focus → `m-primary`, error → `m-danger`, success → `m-success`).
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: `string | null | undefined`
|
||||
- Description: Contenu de l'éditeur (markdown ou HTML selon `outputFormat`).
|
||||
- Comportement: `v-model` ; sync bidirectionnelle.
|
||||
|
||||
### placeholder
|
||||
|
||||
- Type: `string`
|
||||
- Défaut: `''`
|
||||
- Description: Texte affiché quand l'éditeur est vide.
|
||||
|
||||
### minHeight
|
||||
|
||||
- Type: `string`
|
||||
- Défaut: `160px`
|
||||
- Description: Hauteur minimale de la zone d'édition (CSS valid value).
|
||||
|
||||
### editable
|
||||
|
||||
- Type: `boolean`
|
||||
- Défaut: `true`
|
||||
- Description: `false` → mode affichage seul, **toolbar masquée**, contenu rendu en `prose`.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: `boolean`
|
||||
- Défaut: `false`
|
||||
- Description: Désactive l'édition et la toolbar (opacité réduite).
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: `boolean`
|
||||
- Défaut: `false`
|
||||
- Description: Lecture seule (toolbar visible mais désactivée, pas de saisie).
|
||||
|
||||
### hint / error / success
|
||||
|
||||
- Type: `string`
|
||||
- Description: Messages contextuels affichés sous l'éditeur.
|
||||
- Priorité: `error` > `success` > `hint`.
|
||||
|
||||
### outputFormat
|
||||
|
||||
- Type: `'markdown' | 'html'`
|
||||
- Défaut: `'html'`
|
||||
- Description: Format émis dans `update:modelValue`.
|
||||
- `html` : utilise `editor.getHTML()`.
|
||||
- `markdown` : utilise `tiptap-markdown` (`getMarkdown()`).
|
||||
|
||||
### groupClass / labelClass / editorClass
|
||||
|
||||
- Type: `string`
|
||||
- Description: Classes Tailwind additionnelles fusionnées via `twMerge` pour override.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Toolbar
|
||||
|
||||
Boutons (icônes `mdi:*`) :
|
||||
|
||||
- Gras, Italique, Barré
|
||||
- Titre H2, Titre H3
|
||||
- Liste à puces, Liste numérotée
|
||||
- Citation
|
||||
- Code inline, Bloc de code
|
||||
- Lien (prompt URL ; vide pour retirer)
|
||||
- Couleur du texte (palette de 8 swatches + reset)
|
||||
- Surlignage (palette de 8 swatches + reset)
|
||||
- Annuler / Rétablir
|
||||
|
||||
Les palettes couleur/surlignage s'ouvrent en popover sous leur bouton.
|
||||
Fermeture : clic sur un swatch, clic en dehors, ou touche **Échap**.
|
||||
|
||||
> Les couleurs et surlignages ne sont **pas persistés en markdown** (spec Markdown ne couvre pas la couleur). Pour préserver les couleurs au save/reload, utiliser `output-format="html"`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- Le label est lié à la zone d'édition via `for` / `id`.
|
||||
- `aria-invalid="true"` sur la zone d'édition en cas d'erreur.
|
||||
- `aria-describedby` référence le message d'erreur / succès / hint.
|
||||
- Boutons toolbar : `aria-pressed` reflète l'état actif, `aria-label` pour l'usage screen-reader.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque modification du contenu.
|
||||
- Payload : `string` (markdown ou HTML selon `outputFormat`).
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputRichText from '../../components/malio/input/InputRichText.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
|
||||
const errorValue = ref('Trop court')
|
||||
const successValue = ref('Tout est bon de mon côté.')
|
||||
const disabledValue = ref('Contenu indisponible.')
|
||||
const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
|
||||
const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
|
||||
const colorValue = ref('<p>Sélectionner du texte puis utiliser les boutons <span style="color: #bf2600">couleur</span> ou <mark data-color="#fff0b3" style="background-color: #fff0b3">surlignage</mark>.</p>')
|
||||
</script>
|
||||
@@ -1,279 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Text">
|
||||
<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>
|
||||
<MalioInputText
|
||||
v-model="simpleValue"
|
||||
label="Nom"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputText
|
||||
v-model="hintValue"
|
||||
label="Email"
|
||||
hint="Votre adresse email professionnelle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputText
|
||||
v-model="disabledValue"
|
||||
label="Nom"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputText
|
||||
v-model="readonlyValue"
|
||||
label="Nom"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputText
|
||||
v-model="errorValue"
|
||||
label="Email"
|
||||
error="Adresse email invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputText
|
||||
v-model="successValue"
|
||||
label="Email"
|
||||
success="Email valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec masque (téléphone)</h2>
|
||||
<MalioInputText
|
||||
v-model="maskValue"
|
||||
label="Téléphone"
|
||||
mask="## ## ## ## ##"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icône</h2>
|
||||
<MalioInputText
|
||||
v-model="iconValue"
|
||||
label="Recherche"
|
||||
icon-name="mdi:magnify"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputText
|
||||
|
||||
Composant input texte avec masque optionnel (maska), 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 pour les formulaires).
|
||||
|
||||
### autocomplete
|
||||
|
||||
- Type: string
|
||||
- Description: Active ou configure l’autocomplétion navigateur.
|
||||
- Défaut: vide
|
||||
|
||||
### 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.
|
||||
|
||||
### mask
|
||||
|
||||
- Type: string | undefined
|
||||
- Description: Masque appliqué via la directive maska.
|
||||
- Comportement: Formate la saisie selon les tokens définis.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### textInput
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées à l’input (taille de texte,
|
||||
etc.).
|
||||
|
||||
### textLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
|
||||
### 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.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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.
|
||||
- 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
|
||||
- Description: Nom de l’icône (ex: mdi:magnify).
|
||||
|
||||
### iconSize
|
||||
|
||||
- Type: string | number
|
||||
- Description: Taille de l’icône.
|
||||
|
||||
### iconColor
|
||||
|
||||
- Type: string
|
||||
- Description: Couleur de l’icône.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement de validation
|
||||
|
||||
- Aucune validation interne.
|
||||
- Les états sont pilotés uniquement par les props.
|
||||
|
||||
## Priorité visuelle
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. neutre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Tokens de masque
|
||||
|
||||
- \# : chiffre
|
||||
- A : lettre majuscule
|
||||
- a : lettre minuscule
|
||||
- \* : chiffre ou lettre
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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 MalioInputText from '../../components/malio/input/InputText.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('Jean Dupont')
|
||||
const readonlyValue = ref('Marie Martin')
|
||||
const errorValue = ref('jean@')
|
||||
const successValue = ref('jean@example.com')
|
||||
const maskValue = ref('06 12 34 56 78')
|
||||
const iconValue = ref('')
|
||||
</script>
|
||||
@@ -1,262 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/TextArea">
|
||||
<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>
|
||||
<MalioInputTextArea
|
||||
v-model="simpleValue"
|
||||
label="Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="hintValue"
|
||||
label="Commentaire"
|
||||
hint="255 caractères maximum"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="disabledValue"
|
||||
label="Description"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="readonlyValue"
|
||||
label="Description"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="errorValue"
|
||||
label="Description"
|
||||
error="Ce champ est obligatoire"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="successValue"
|
||||
label="Description"
|
||||
success="Description valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec compteur</h2>
|
||||
<MalioInputTextArea
|
||||
v-model="counterValue"
|
||||
label="Bio"
|
||||
:max-length="100"
|
||||
:show-counter="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputTextArea
|
||||
|
||||
Composant textarea avec label flottant, états visuels (erreur / succès),
|
||||
gestion du redimensionnement et compteur optionnel.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### id
|
||||
|
||||
- Type: string
|
||||
- Description: Identifiant HTML du textarea.
|
||||
- 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 du textarea (utile pour les formulaires).
|
||||
|
||||
### autocomplete
|
||||
|
||||
- Type: string
|
||||
- Description: Active ou configure l’autocomplétion navigateur.
|
||||
|
||||
### 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
|
||||
|
||||
### textInput
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au textarea (taille de texte,
|
||||
etc.).
|
||||
- Défaut: text-lg
|
||||
|
||||
### textLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
- Défaut: text-sm
|
||||
|
||||
### rounded
|
||||
|
||||
- Type: string
|
||||
- Description: Classe Tailwind pour le border-radius.
|
||||
- Défaut: rounded-md
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Dimensions
|
||||
|
||||
### size
|
||||
|
||||
- Type: number | string
|
||||
- Description: Nombre de lignes initiales (rows).
|
||||
- Défaut: 2
|
||||
|
||||
### minResizeWidth / maxResizeWidth
|
||||
|
||||
- Type: number | string
|
||||
- Description: Largeur minimale / maximale autorisée lors du
|
||||
redimensionnement.
|
||||
|
||||
### minResizeHeight / maxResizeHeight
|
||||
|
||||
- Type: number | string
|
||||
- Description: Hauteur minimale / maximale autorisée lors du
|
||||
redimensionnement.
|
||||
|
||||
### resize
|
||||
- Type: 'none' | 'both' | 'horizontal' | 'vertical'
|
||||
- Description: Définit le comportement de redimensionnement CSS.
|
||||
- Défaut: both
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & États
|
||||
|
||||
### required
|
||||
|
||||
- Type: boolean
|
||||
- Description: Ajoute l’attribut HTML required.
|
||||
|
||||
### maxLength
|
||||
|
||||
- Type: number | string
|
||||
- Description: Longueur maximale autorisée.
|
||||
- Effet: Limite la saisie et alimente le compteur.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le champ.
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: boolean
|
||||
- Description: Rend le champ non modifiable mais focusable.
|
||||
|
||||
### 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.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Compteur
|
||||
|
||||
### showCounter
|
||||
|
||||
- Type: boolean
|
||||
- Description: Affiche le compteur x / maxLength.
|
||||
- Condition:
|
||||
- showCounter = true
|
||||
- maxLength défini et > 0
|
||||
- Position: Bas gauche du textarea.
|
||||
- Mise à jour: Dynamique à chaque saisie.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Priorité d’affichage
|
||||
|
||||
### Messages
|
||||
|
||||
1. error
|
||||
2. success
|
||||
3. hint
|
||||
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- aria-invalid est activé si error existe.
|
||||
- aria-describedby référence le message affiché.
|
||||
- Fonctionne avec ou sans v-model.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque modification du textarea.
|
||||
- Permet l’utilisation avec v-model.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputTextArea from '../../components/malio/input/InputTextArea.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('Texte non modifiable')
|
||||
const readonlyValue = ref('Texte en lecture seule')
|
||||
const errorValue = ref('')
|
||||
const successValue = ref('Description complète et détaillée du projet.')
|
||||
const counterValue = ref('Un texte de démonstration')
|
||||
</script>
|
||||
@@ -1,236 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Upload">
|
||||
<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>
|
||||
<MalioInputUpload
|
||||
v-model="simpleValue"
|
||||
label="Fichier"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icône</h2>
|
||||
<MalioInputUpload
|
||||
v-model="noIconValue"
|
||||
label="Fichier"
|
||||
:display-icon="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioInputUpload
|
||||
v-model="hintValue"
|
||||
label="Fichier"
|
||||
hint="Formats acceptés : PDF, DOC, DOCX"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioInputUpload
|
||||
v-model="disabledValue"
|
||||
label="Fichier"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly (avec fichier)</h2>
|
||||
<MalioInputUpload
|
||||
v-model="readonlyValue"
|
||||
label="Fichier"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioInputUpload
|
||||
v-model="errorValue"
|
||||
label="Fichier"
|
||||
error="Format non supporté"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioInputUpload
|
||||
v-model="successValue"
|
||||
label="Fichier"
|
||||
success="Fichier valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
|
||||
<MalioInputUpload
|
||||
v-model="acceptValue"
|
||||
label="Document PDF"
|
||||
accept=".pdf"
|
||||
hint="Seuls les fichiers PDF sont acceptés"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioInputUpload
|
||||
|
||||
Composant input d'upload de fichier avec label flottant, icône cloud,
|
||||
affichage du nom du fichier sélectionné, états visuels (erreur / succès)
|
||||
et accessibilité.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## 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.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: string | null | undefined
|
||||
- Description: Nom du fichier sélectionné (valeur contrôlée).
|
||||
- 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 texte.
|
||||
|
||||
### labelClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au label.
|
||||
|
||||
### groupClass
|
||||
|
||||
- Type: string
|
||||
- Description: Classes CSS appliquées au conteneur.
|
||||
|
||||
### displayIcon
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: true
|
||||
- Description: Affiche ou masque l'icône d'upload.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Validation & Contraintes
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le champ.
|
||||
|
||||
### accept
|
||||
|
||||
- Type: string
|
||||
- Description: Types de fichiers acceptés (ex: `.pdf,.doc`).
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## É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
|
||||
|
||||
- `mdi:cloud-arrow-up-outline` : icône d'upload affichée à droite.
|
||||
|
||||
### Couleur de l'icône
|
||||
|
||||
- `text-m-muted` par défaut.
|
||||
- `text-m-danger` si la prop `error` est renseignée.
|
||||
- `text-m-success` si la prop `success` est renseignée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement
|
||||
|
||||
- Au clic sur l'input texte, le sélecteur de fichier natif s'ouvre.
|
||||
- Le nom du fichier sélectionné est affiché dans l'input.
|
||||
- L'input texte est en readonly — la saisie manuelle n'est pas autorisée.
|
||||
|
||||
## 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 quand un fichier est sélectionné (valeur = nom du fichier).
|
||||
- Permet l'utilisation avec v-model.
|
||||
|
||||
### file-selected
|
||||
|
||||
- Émis quand un fichier est sélectionné (valeur = objet File).
|
||||
- Permet d'accéder au fichier pour l'upload.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioInputUpload from '../../components/malio/input/InputUpload.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const noIconValue = ref('')
|
||||
const hintValue = ref('')
|
||||
const disabledValue = ref('document.pdf')
|
||||
const readonlyValue = ref('rapport.pdf')
|
||||
const errorValue = ref('image.bmp')
|
||||
const successValue = ref('rapport.pdf')
|
||||
const acceptValue = ref('')
|
||||
</script>
|
||||
56
app/story/inputText.story.vue
Normal file
56
app/story/inputText.story.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<Story title="Input/Text">
|
||||
<MalioInputText/>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# Input Text
|
||||
|
||||
## Liste des props
|
||||
|
||||
Le composant Input Text permet de saisir du texte. Il peut afficher des messages d'erreur, de succès ou d'information.
|
||||
On peut lui passer plusieurs props pour personnaliser son comportement et son apparence.
|
||||
- id: Identifiant HTML du champ. Si non fourni, un id est généré automatiquement.
|
||||
- label: Texte du label affiché au-dessus du champ (floating label).
|
||||
- name: Attribut name de l’input.
|
||||
- autocomplete: Attribut autocomplete de l’input.
|
||||
- modelValue: Valeur du champ (utilisée avec v-model) ou si valeur brut mettre des " ".
|
||||
- minWidth: Classe utilitaire pour la largeur minimale du conteneur. Classe Tailwind de largeur (ex: w-64, w-full).
|
||||
- maxWidth: Classe utilitaire pour la largeur maximale du conteneur. Classe Tailwind de largeur maximale.
|
||||
- textInput: Classe(s) de style du texte de l’input. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
|
||||
- textLabel: Classe(s) de style du texte du label. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
|
||||
- required: Rend le champ obligatoire (required).
|
||||
- maxLength: Nombre de caractère maximal autorisé.
|
||||
- minLength: Nombre de caractère minimal autorisé.
|
||||
- disabled: Désactive le champ et applique le style désactivé.
|
||||
- readonly: Met le champ en lecture seule.
|
||||
- hint: Message informatif affiché sous le champ.
|
||||
- error: Message d’erreur affiché sous le champ. Active le style erreur.
|
||||
- success: Message de succès affiché sous le champ. Active le style succès.
|
||||
- iconName: Nom de l’icône affichée à droite dans le champ.
|
||||
- rounded: Classe utilitaire pour le rayon des coins ( rounded- ).
|
||||
- iconSize: Taille de l’icône. (ex : 24, 26, 85 ,99, ... ).
|
||||
- iconColor: Classe(s) personnalisée(s) de couleur pour l’icône ( text- ).
|
||||
- mask: Masque de saisie pour formater la valeur :
|
||||
- \# : chiffre
|
||||
- A : lettre majuscule
|
||||
- a : lettre minuscule
|
||||
- \* : chiffre ou lettre
|
||||
|
||||
Événement émis :
|
||||
|
||||
- update:modelValue: Émis à chaque saisie pour mettre à jour v-model.
|
||||
|
||||
Règles d’affichage des messages :
|
||||
|
||||
Priorité d’affichage :
|
||||
1) error
|
||||
2) success
|
||||
3) hint
|
||||
|
||||
|
||||
</docs>
|
||||
<script setup lang="ts">
|
||||
import MalioInputText from '../components/malio/InputText.vue'
|
||||
</script>
|
||||
@@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Radio">
|
||||
<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>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`simple-${option.value}`"
|
||||
v-model="primaryChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="primary-choice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Preselected</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`preselected-${option.value}`"
|
||||
v-model="preselectedChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="preselected-choice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Error</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`error-${option.value}`"
|
||||
v-model="errorChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="error-choice"
|
||||
error="Selection required"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Success</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`success-${option.value}`"
|
||||
v-model="successChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="success-choice"
|
||||
success="Selection saved"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Disabled</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`disabled-${option.value}`"
|
||||
v-model="disabledChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="disabled-choice"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<div class="space-y-1">
|
||||
<MalioRadioButton
|
||||
v-for="option in options"
|
||||
:key="`readonly-${option.value}`"
|
||||
v-model="readonlyChoice"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
name="readonly-choice"
|
||||
readonly
|
||||
hint="Readonly group"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioRadioButton
|
||||
|
||||
Composant radio personnalisé compatible avec `v-model`, les groupes via `name`,
|
||||
et les états visuels de validation.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: `string | number | boolean | null | undefined`
|
||||
- Description: Valeur actuellement sélectionnée dans le groupe.
|
||||
- Comportement:
|
||||
- Compatible avec `v-model`.
|
||||
- Le radio est coché quand `modelValue === value`.
|
||||
|
||||
### value
|
||||
|
||||
- Type: `string | number | boolean | null | undefined`
|
||||
- Description: Valeur portée par le radio courant.
|
||||
|
||||
### label
|
||||
|
||||
- Type: `string`
|
||||
- Description: Texte affiché à droite du radio.
|
||||
|
||||
### name
|
||||
|
||||
- Type: `string`
|
||||
- Description: Nom HTML partagé par les radios d’un même groupe.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États
|
||||
|
||||
### error
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message et style d’erreur.
|
||||
|
||||
### success
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message et style de succès.
|
||||
- Comportement: ignoré si `error` est présent.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Désactive le radio.
|
||||
|
||||
### readonly
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Empêche le changement de valeur tout en gardant le rendu affiché.
|
||||
|
||||
### hint
|
||||
|
||||
- Type: `string`
|
||||
- Description: Message d’aide sous le groupe.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à la sélection d’un radio.
|
||||
- Retourne la `value` du radio sélectionné.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioRadioButton from '../../components/malio/radio/RadioButton.vue'
|
||||
|
||||
const options = [
|
||||
{label: 'Option 1', value: 'option1'},
|
||||
{label: 'Option 2', value: 'option2'},
|
||||
{label: 'Option 3', value: 'option3'},
|
||||
{label: 'Option 4', value: 'option4'},
|
||||
]
|
||||
|
||||
const primaryChoice = ref<string | null>(null)
|
||||
const preselectedChoice = ref<string | null>('option2')
|
||||
const errorChoice = ref<string | null>(null)
|
||||
const successChoice = ref<string | null>('option3')
|
||||
const disabledChoice = ref<string | null>('option2')
|
||||
const readonlyChoice = ref<string | null>('option4')
|
||||
</script>
|
||||
@@ -1,210 +0,0 @@
|
||||
<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>
|
||||
@@ -1,213 +0,0 @@
|
||||
<template>
|
||||
<Story title="Select/Checkbox">
|
||||
<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>
|
||||
<MalioSelectCheckbox
|
||||
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">Avec tags</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="tagValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-tag="true"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec hint</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="hintValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
hint="Sélectionnez un ou plusieurs pays"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="disabledValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="errorValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
error="Sélectionnez au moins un pays"
|
||||
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>
|
||||
<MalioSelectCheckbox
|
||||
v-model="successValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
success="Sélection validée"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectAllValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-select-all="true"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
|
||||
<MalioSelectCheckbox
|
||||
v-model="selectAllCustomValue"
|
||||
:options="options"
|
||||
label="Pays"
|
||||
:display-select-all="true"
|
||||
select-all-label="Cocher tout"
|
||||
empty-option-label="Aucune sélection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioSelectCheckbox
|
||||
|
||||
Composant select avec checkboxes multiples, label flottant, tags optionnels,
|
||||
états visuels (erreur / succès) et option "tout sélectionner".
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: Array<string | number>
|
||||
- Description: Tableau des valeurs sélectionnées.
|
||||
|
||||
### options
|
||||
|
||||
- Type: Array<{ label: string; value: string | number }>
|
||||
- Description: Liste des options disponibles.
|
||||
|
||||
### emptyOptionLabel
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché quand aucune option n'est sélectionnée (mode tag).
|
||||
|
||||
### label
|
||||
|
||||
- Type: string
|
||||
- Description: Texte affiché comme label flottant.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Apparence & Style
|
||||
|
||||
### displayTag
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: false
|
||||
- Description: Affiche les sélections sous forme de tags au lieu du compteur.
|
||||
|
||||
### displaySelectAll
|
||||
|
||||
- Type: boolean
|
||||
- Défaut: false
|
||||
- Description: Affiche une checkbox "Tout sélectionner / Tout désélectionner" en haut de la liste.
|
||||
|
||||
### selectAllLabel
|
||||
|
||||
- Type: string
|
||||
- Défaut: "Tout sélectionner"
|
||||
- Description: Label de la checkbox de sélection globale.
|
||||
|
||||
### minWidth / maxWidth
|
||||
|
||||
- Type: string
|
||||
- Description: Classes Tailwind pour contraindre la largeur.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## États & Messages
|
||||
|
||||
### hint
|
||||
|
||||
- Type: string
|
||||
- Description: Message d'aide affiché sous le champ.
|
||||
|
||||
### error
|
||||
|
||||
- Type: string
|
||||
- Description: Message d'erreur. Prioritaire sur success et hint.
|
||||
|
||||
### success
|
||||
|
||||
- Type: string
|
||||
- Description: Message de succès. Actif si error est absent.
|
||||
|
||||
### disabled
|
||||
|
||||
- Type: boolean
|
||||
- Description: Désactive complètement le composant.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-expanded` et `aria-controls` sur le bouton.
|
||||
- `role="listbox"` sur la liste, `role="option"` et `aria-selected` sur chaque option.
|
||||
- `aria-invalid` activé si error existe.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque changement de sélection.
|
||||
- Retourne un tableau de valeurs.
|
||||
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioSelectCheckbox from '../../components/malio/select/SelectCheckbox.vue'
|
||||
|
||||
const options = [
|
||||
{label: 'France', value: 'fr'},
|
||||
{label: 'Belgique', value: 'be'},
|
||||
{label: 'Suisse', value: 'ch'},
|
||||
{label: 'Canada', value: 'ca'},
|
||||
{label: 'Allemagne', value: 'de'},
|
||||
]
|
||||
|
||||
const simpleValue = ref<Array<string | number>>([])
|
||||
const tagValue = ref<Array<string | number>>(['fr', 'be'])
|
||||
const hintValue = ref<Array<string | number>>([])
|
||||
const disabledValue = ref<Array<string | number>>(['fr', 'ch'])
|
||||
const errorValue = ref<Array<string | number>>([])
|
||||
const successValue = ref<Array<string | number>>(['be', 'ca'])
|
||||
const selectAllValue = ref<Array<string | number>>([])
|
||||
const selectAllCustomValue = ref<Array<string | number>>([])
|
||||
</script>
|
||||
@@ -1,227 +0,0 @@
|
||||
<template>
|
||||
<Story title="Navigation/Sidebar">
|
||||
<Variant title="Peu de liens">
|
||||
<div class="flex h-[600px] border rounded-lg overflow-hidden">
|
||||
<MalioSidebar
|
||||
v-model="collapsed1"
|
||||
:sections="sectionsShort"
|
||||
>
|
||||
<template #logo>
|
||||
<span class="text-2xl font-bold text-m-primary">Malio</span>
|
||||
</template>
|
||||
<template #logo-collapsed>
|
||||
<span class="text-2xl font-bold text-m-primary">M</span>
|
||||
</template>
|
||||
</MalioSidebar>
|
||||
|
||||
<div class="flex-1 p-6 bg-white">
|
||||
<p class="text-m-muted">
|
||||
Sidebar avec peu de liens, pas de scroll.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Beaucoup de liens (scroll)">
|
||||
<div class="flex h-[600px] border rounded-lg overflow-hidden">
|
||||
<MalioSidebar
|
||||
v-model="collapsed2"
|
||||
:sections="sectionsLong"
|
||||
>
|
||||
<template #logo>
|
||||
<span class="text-2xl font-bold text-m-primary">Malio</span>
|
||||
</template>
|
||||
<template #logo-collapsed>
|
||||
<span class="text-2xl font-bold text-m-primary">M</span>
|
||||
</template>
|
||||
</MalioSidebar>
|
||||
|
||||
<div class="flex-1 p-6 bg-white">
|
||||
<p class="text-m-muted">
|
||||
Sidebar avec beaucoup de liens, scroll visible.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioSidebar
|
||||
|
||||
Composant de navigation latérale avec support déplié/plié, sections groupées,
|
||||
icônes et liens NuxtLink. Un bouton circulaire avec chevron permet de toggle
|
||||
entre les deux états.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### sections
|
||||
|
||||
- Type: `Array<{ label?: string; items: Array<{ label: string; icon: string; to: string }> }>`
|
||||
- Description: Liste des sections du menu. Chaque section a un label optionnel et une liste d'items.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: `boolean`
|
||||
- Description: Contrôle l'état plié/déplié (`true` = plié). Supporte `v-model`.
|
||||
|
||||
### id
|
||||
|
||||
- Type: `string`
|
||||
- Description: ID custom pour le composant.
|
||||
|
||||
### sidebarClass
|
||||
|
||||
- Type: `string`
|
||||
- Description: Classes Tailwind additionnelles pour le conteneur sidebar.
|
||||
|
||||
### toggleClass
|
||||
|
||||
- Type: `string`
|
||||
- Description: Classes Tailwind additionnelles pour le bouton toggle.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Slots
|
||||
|
||||
### logo
|
||||
|
||||
- Contenu affiché en haut quand la sidebar est dépliée.
|
||||
|
||||
### logo-collapsed
|
||||
|
||||
- Contenu affiché en haut quand la sidebar est pliée.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Comportement
|
||||
|
||||
- **Déplié** : affiche le logo, les labels de section et les items avec texte + icône.
|
||||
- **Plié** : affiche le logo réduit et les icônes seules.
|
||||
- **Toggle** : bouton circulaire positionné au centre du bord droit, chevron gauche/droite.
|
||||
- **Contrôlé / non-contrôlé** : fonctionne avec ou sans `v-model`.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `aria-label` sur le bouton toggle ("Plier le menu" / "Déplier le menu").
|
||||
- Navigation sémantique avec `<nav>` et `<ul>/<li>`.
|
||||
- Liens via `NuxtLink` pour le routing côté client.
|
||||
|
||||
------------------------------------------------------------------------
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis à chaque toggle.
|
||||
- Retourne `true` (plié) ou `false` (déplié).
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioSidebar from '../../components/malio/sidebar/Sidebar.vue'
|
||||
|
||||
const collapsed1 = ref(false)
|
||||
const collapsed2 = ref(false)
|
||||
|
||||
const sectionsShort = [
|
||||
{
|
||||
label: 'LOGISTIQUE / TRANSPORT',
|
||||
icon: 'mdi:truck-delivery',
|
||||
items: [
|
||||
{label: 'Réception / Expédition', to: '/reception'},
|
||||
{label: 'Validation expédition', to: '/validation'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'COMMERCIAL',
|
||||
icon: 'mdi:handshake',
|
||||
items: [
|
||||
{label: 'Répertoire fournisseurs', to: '/fournisseurs'},
|
||||
{label: 'Répertoire clients', to: '/clients'},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const sectionsLong = [
|
||||
{
|
||||
label: 'LOGISTIQUE / TRANSPORT',
|
||||
icon: 'mdi:truck-delivery',
|
||||
items: [
|
||||
{label: 'Réception / Expédition', to: '/reception'},
|
||||
{label: 'Validation expédition', to: '/validation'},
|
||||
{label: 'Voyage', to: '/voyage'},
|
||||
{label: 'Ticket de pesée', to: '/pesee'},
|
||||
{label: 'Bon de réception', to: '/bon-reception'},
|
||||
{label: "Bon d'expédition", to: '/bon-expedition'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'USINE / PRODUCTION',
|
||||
icon: 'mdi:factory',
|
||||
items: [
|
||||
{label: 'Fabrication en cours', to: '/fabrication'},
|
||||
{label: 'Liste des fabrications', to: '/fabrications'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'COMMERCIAL',
|
||||
icon: 'mdi:handshake',
|
||||
items: [
|
||||
{label: 'Répertoire fournisseurs', to: '/fournisseurs'},
|
||||
{label: 'Compagnie fournisseurs', to: '/compagnie-fournisseurs'},
|
||||
{label: 'Répertoire clients', to: '/clients'},
|
||||
{label: 'Contrats en cours', to: '/contrats'},
|
||||
{label: 'Commissions Clients', to: '/commissions'},
|
||||
{label: 'Attribution expédition', to: '/attribution'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'PRIX',
|
||||
icon: 'mdi:tag',
|
||||
items: [
|
||||
{label: "Prix d'achat/vente", to: '/prix-achat'},
|
||||
{label: "Prix d'achat spécifiques", to: '/prix-specifiques'},
|
||||
{label: 'Prix de ventes clients', to: '/prix-vente'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'FACTURATION',
|
||||
icon: 'mdi:receipt',
|
||||
items: [
|
||||
{label: 'Expéditions à facturer', to: '/expeditions-facturer'},
|
||||
{label: 'Factures', to: '/factures'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'TECHNIQUE',
|
||||
icon: 'mdi:cog',
|
||||
items: [
|
||||
{label: 'Répertoire prestataires', to: '/prestataires'},
|
||||
{label: 'Répertoire transporteurs', to: '/transporteurs'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'SUIVI HEURES',
|
||||
icon: 'mdi:clock-outline',
|
||||
items: [
|
||||
{label: 'Heure Usine', to: '/heure-usine'},
|
||||
{label: 'Heure Extras', to: '/heure-extras'},
|
||||
{label: 'Heure Ferme', to: '/heure-ferme'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'ADMINISTRATION',
|
||||
icon: 'mdi:shield-account',
|
||||
items: [
|
||||
{label: 'Catalogue produits', to: '/catalogue'},
|
||||
{label: 'Éditer étiquettes', to: '/etiquettes'},
|
||||
{label: 'Organisation catégorie', to: '/organisation'},
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<Story title="Site/Selector">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Trois sites</h2>
|
||||
<MalioSiteSelector v-model="threeValue" :sites="sites" />
|
||||
<p class="mt-3 text-sm text-gray-600">Site sélectionné : <code>{{ threeValue }}</code></p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Deux sites</h2>
|
||||
<MalioSiteSelector v-model="twoValue" :sites="sitesTwo" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Cinq sites</h2>
|
||||
<MalioSiteSelector v-model="fiveValue" :sites="sitesFive" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non contrôlé</h2>
|
||||
<MalioSiteSelector :sites="sites" />
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioSiteSelector
|
||||
|
||||
Sélecteur horizontal pour choisir **un site** (usine ou lieu) parmi une liste. Les tuiles occupent une largeur proportionnelle du conteneur. La couleur du site sélectionné est appliquée à toutes les tuiles ; la tuile active est opaque (opacité 1), les autres sont atténuées (opacité 0.4).
|
||||
|
||||
---
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### sites
|
||||
|
||||
- Type : `Array<{ id: string; name: string; color: string }>`
|
||||
- Requis : oui
|
||||
- Description : Liste des sites à afficher. `color` est un hex (ex : `'#0055ff'`). La couleur du site actuellement sélectionné est appliquée à toutes les tuiles.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type : `string`
|
||||
- Description : `id` du site sélectionné (v-model). Sans `v-model`, le premier site est sélectionné par défaut (mode non contrôlé).
|
||||
|
||||
### id
|
||||
|
||||
- Type : `string`
|
||||
- Description : Identifiant HTML du conteneur. Auto-généré si absent.
|
||||
|
||||
### groupClass / tileClass / labelClass
|
||||
|
||||
- Type : `string`
|
||||
- Description : Classes Tailwind additionnelles fusionnées via `twMerge` sur, respectivement, le conteneur `<div role="radiogroup">`, chaque tuile et le libellé.
|
||||
|
||||
---
|
||||
|
||||
## Comportement
|
||||
|
||||
- **Toujours un site sélectionné.** Re-cliquer sur la tuile active ne la désélectionne pas.
|
||||
- **Couleur partagée.** Le `background-color` de toutes les tuiles suit la couleur du site sélectionné. Changer de site met à jour instantanément la couleur de la bande.
|
||||
- **Pas de gestion d'overflow** : les tuiles se répartissent proportionnellement sur toute la largeur disponible.
|
||||
|
||||
---
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `role="radiogroup"` sur le conteneur.
|
||||
- `role="radio"` avec `aria-checked` sur chaque tuile.
|
||||
- Roving `tabindex` : la tuile active est focusable (`tabindex="0"`), les autres sont exclues du tab order (`tabindex="-1"`).
|
||||
- Activation par Enter/Space via l'élément `<button>`.
|
||||
|
||||
---
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis au clic sur une tuile.
|
||||
- Retourne l'`id` (`string`) du site sélectionné.
|
||||
|
||||
### change
|
||||
|
||||
- Émis au clic sur une tuile, en complément de `update:modelValue`.
|
||||
- Retourne l'objet `Site` complet (`{ id, name, color }`) — utile pour déclencher des actions (appel API, filtrage…) sans avoir à relire le tableau `sites` côté consommateur.
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioSiteSelector from '../../components/malio/site/SiteSelector.vue'
|
||||
|
||||
const sites = [
|
||||
{ id: 'chatellerault', name: 'Châtellerault', color: '#0055ff' },
|
||||
{ id: 'saint-jean', name: 'Saint-Jean', color: '#16a34a' },
|
||||
{ id: 'pommevic', name: 'Pommevic', color: '#dc2626' },
|
||||
]
|
||||
|
||||
const sitesTwo = [
|
||||
{ id: 'nord', name: 'Usine Nord', color: '#7c3aed' },
|
||||
{ id: 'sud', name: 'Usine Sud', color: '#ea580c' },
|
||||
]
|
||||
|
||||
const sitesFive = [
|
||||
{ id: 's1', name: 'Site 1', color: '#0ea5e9' },
|
||||
{ id: 's2', name: 'Site 2', color: '#14b8a6' },
|
||||
{ id: 's3', name: 'Site 3', color: '#f59e0b' },
|
||||
{ id: 's4', name: 'Site 4', color: '#ec4899' },
|
||||
{ id: 's5', name: 'Site 5', color: '#6366f1' },
|
||||
]
|
||||
|
||||
const threeValue = ref('chatellerault')
|
||||
const twoValue = ref('nord')
|
||||
const fiveValue = ref('s3')
|
||||
</script>
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<Story title="Tab/List">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec icônes</h2>
|
||||
<MalioTabList v-model="withIcons" :tabs="tabs">
|
||||
<template #qualimat><p class="p-4">Contenu onglet Qualimat</p></template>
|
||||
<template #adresses><p class="p-4">Contenu onglet Adresses</p></template>
|
||||
<template #contacts><p class="p-4">Contenu onglet Contacts</p></template>
|
||||
<template #comptabilite><p class="p-4">Contenu onglet Comptabilité</p></template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
|
||||
<MalioTabList v-model="withoutIcons" :tabs="tabsNoIcon">
|
||||
<template #tab1><p class="p-4">Contenu onglet 1</p></template>
|
||||
<template #tab2><p class="p-4">Contenu onglet 2</p></template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Deuxième onglet actif par défaut</h2>
|
||||
<MalioTabList v-model="secondActive" :tabs="tabs">
|
||||
<template #qualimat><p class="p-4">Contenu Qualimat</p></template>
|
||||
<template #adresses><p class="p-4">Contenu Adresses (actif par défaut)</p></template>
|
||||
<template #contacts><p class="p-4">Contenu Contacts</p></template>
|
||||
<template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
|
||||
</MalioTabList>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioTabList
|
||||
|
||||
Navigation par onglets avec icônes optionnelles et gestion show/hide des panneaux via slots nommés.
|
||||
|
||||
---
|
||||
|
||||
## Props détaillées
|
||||
|
||||
### tabs
|
||||
|
||||
- Type: `Array<{ key: string; label: string; icon?: string }>`
|
||||
- Requis: oui
|
||||
- Description: Définit les onglets. Chaque entrée correspond à un slot nommé par `key`.
|
||||
|
||||
### modelValue
|
||||
|
||||
- Type: `string`
|
||||
- Description: Clé de l'onglet actif. Sans v-model, le premier onglet est actif par défaut (mode non contrôlé).
|
||||
|
||||
### id
|
||||
|
||||
- Type: `string`
|
||||
- Description: Préfixe pour les IDs d'accessibilité. Auto-généré si absent.
|
||||
|
||||
---
|
||||
|
||||
## Slots
|
||||
|
||||
Un slot nommé par `tab.key` pour chaque onglet. Le contenu du slot est affiché/masqué automatiquement.
|
||||
|
||||
```html
|
||||
<MalioTabList :tabs="[{ key: 'foo', label: 'Foo' }]">
|
||||
<template #foo>Contenu de Foo</template>
|
||||
</MalioTabList>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- `role="tablist"` sur le conteneur
|
||||
- `role="tab"` avec `aria-selected`, `aria-controls`, `tabindex` sur chaque bouton
|
||||
- `role="tabpanel"` avec `aria-labelledby` sur chaque panneau
|
||||
|
||||
---
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
|
||||
- Émis au clic sur un onglet
|
||||
- Retourne la clé (`string`) de l'onglet sélectionné
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioTabList from '../../components/malio/tab/TabList.vue'
|
||||
|
||||
const tabs = [
|
||||
{ key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },
|
||||
{ key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
|
||||
{ key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
|
||||
{ key: 'comptabilite', label: 'Comptabilité', icon: 'mdi:web' },
|
||||
]
|
||||
|
||||
const tabsNoIcon = [
|
||||
{ key: 'tab1', label: 'Onglet 1' },
|
||||
{ key: 'tab2', label: 'Onglet 2' },
|
||||
]
|
||||
|
||||
const withIcons = ref('qualimat')
|
||||
const withoutIcons = ref('tab1')
|
||||
const secondActive = ref('adresses')
|
||||
</script>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<Story title="Input/Time">
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
||||
<MalioTime v-model="simpleValue" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec label</h2>
|
||||
<MalioTime
|
||||
v-model="labeledValue"
|
||||
label="Heure de depart"
|
||||
name="departure-time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioTime
|
||||
v-model="initialValue"
|
||||
label="Heure d'arrivee"
|
||||
hint="Format HH:MM"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Required</h2>
|
||||
<MalioTime
|
||||
v-model="requiredValue"
|
||||
label="Heure limite"
|
||||
required
|
||||
hint="Champ obligatoire"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Desactive</h2>
|
||||
<MalioTime
|
||||
v-model="disabledValue"
|
||||
label="Heure verrouillee"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Readonly</h2>
|
||||
<MalioTime
|
||||
v-model="readonlyValue"
|
||||
label="Heure en lecture seule"
|
||||
readonly
|
||||
hint="Visible mais non modifiable"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioTime
|
||||
v-model="errorValue"
|
||||
label="Heure de fermeture"
|
||||
error="L'heure saisie n'est pas valide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succes</h2>
|
||||
<MalioTime
|
||||
v-model="successValue"
|
||||
label="Heure confirmee"
|
||||
success="Horaire enregistre"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioTime from '../../components/malio/time/Time.vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const labeledValue = ref('')
|
||||
const initialValue = ref('08:30')
|
||||
const requiredValue = ref('')
|
||||
const disabledValue = ref('14:15')
|
||||
const readonlyValue = ref('18:45')
|
||||
const errorValue = ref('25:90')
|
||||
const successValue = ref('09:00')
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user