Compare commits
5 Commits
a2ba08e347
...
v1.7.1
| Author | SHA1 | Date | |
|---|---|---|---|
 tristan
|
c0c39705c7 | ||
|
tristan
|
acd531f69e | ||
|
tristan
|
7d7b2fb720 | ||
|
tristan
|
7ca5c5f4c5 | ||
|
tristan
|
f3a18ace1d |
@@ -12,7 +12,14 @@
|
||||
"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/)"
|
||||
"Bash(mv inputCheckbox.story.vue checkbox/)",
|
||||
"Bash(npx eslint *)",
|
||||
"Bash(echo \"LINT EXIT: $?\")",
|
||||
"Bash(git commit *)",
|
||||
"mcp__chrome__navigate_page",
|
||||
"mcp__chrome__take_snapshot",
|
||||
"mcp__chrome__click",
|
||||
"mcp__chrome__evaluate_script"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,9 +108,9 @@ npm run lint # Pas d'erreurs
|
||||
|
||||
### 5. Créer la page playground
|
||||
|
||||
**Fichier :** `.playground/pages/composant/<nomComposant>.vue` (camelCase)
|
||||
**Fichier :** `.playground/pages/composant/<categorie>/<nomComposant>.vue` (camelCase, dans le sous-dossier de catégorie)
|
||||
|
||||
La page est auto-détectée par `index.vue` via `import.meta.glob`. Inclure des variantes représentatives dans une grille :
|
||||
La page devient automatiquement une route Nuxt (`/composant/<categorie>/<nomComposant>`) et hérite du layout `default` (qui affiche la `MalioSidebar`). **Ajouter ensuite le lien dans la nav centralisée** `.playground/playground.nav.ts` : insérer un `{label, to}` dans la section appropriée (ou créer une nouvelle section), où `to` = `/composant/<categorie>/<nomComposant>`. Inclure des variantes représentatives dans une grille :
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
||||
@@ -216,7 +216,7 @@ Cette section est alimentée au fur et à mesure des retours utilisateur et des
|
||||
|--------|----------|
|
||||
| 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/` |
|
||||
| Composant absent de la sidebar du playground | Ajouter son entrée `{label, to}` dans `.playground/playground.nav.ts` (la page n'est plus auto-découverte) |
|
||||
| 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 |
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="flex h-screen">
|
||||
<MalioSidebar :sections="navSections">
|
||||
<template #logo>
|
||||
<NuxtLink to="/">
|
||||
<img src="/LOGO_MALIO.png" alt="Malio">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template #logo-collapsed>
|
||||
<NuxtLink to="/">
|
||||
<img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio">
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</MalioSidebar>
|
||||
|
||||
<main class="flex-1 overflow-y-auto p-6">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {navSections} from '../playground.nav'
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<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">Multiple (filtres) — défaut</h2>
|
||||
<MalioAccordion v-model="multiple">
|
||||
<MalioAccordionItem title="Prix" value="prix">
|
||||
<p>Slider de prix ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat">
|
||||
<p>Liste de checkboxes ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Marque" value="marque">
|
||||
<p>Recherche + liste ici…</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
<p class="mt-2 text-sm text-gray-500">Ouverts : {{ multiple }}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
|
||||
<MalioAccordion v-model="single" mode="single">
|
||||
<MalioAccordionItem title="Question 1" value="q1">
|
||||
<p>Réponse 1</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Question 2" value="q2">
|
||||
<p>Réponse 2</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
<p class="mt-2 text-sm text-gray-500">Ouvert : {{ single }}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non contrôlé + defaultOpen</h2>
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Section A" value="a" :default-open="true">
|
||||
<p>Ouverte au montage</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Section B" value="b">
|
||||
<p>Fermée au montage</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Active" value="ok">
|
||||
<p>Contenu accessible</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
|
||||
<p>Inaccessible</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const multiple = ref<string[]>(['prix'])
|
||||
const single = ref('q1')
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDate</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDate
|
||||
v-model="value"
|
||||
label="Date de naissance"
|
||||
hint="Clique pour ouvrir le calendrier"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = '2026-12-25'"
|
||||
>
|
||||
Forcer le 25/12/2026
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDate
|
||||
v-model="erpValue"
|
||||
label="Date du rendez-vous"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO) : <code>{{ erpValue ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDate
|
||||
v-model="bounded"
|
||||
label="Date bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const erpValue = ref<string | null>(null)
|
||||
const bounded = ref<string | null>(null)
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateRange</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDateRange
|
||||
v-model="value"
|
||||
label="Période"
|
||||
hint="Clique deux fois pour définir une plage"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
|
||||
<p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = {start: '2026-12-20', end: '2026-12-31'}"
|
||||
>
|
||||
Forcer 20→31/12/2026
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDateRange
|
||||
v-model="erpValue"
|
||||
label="Période"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Début : <code>{{ erpValue?.start ?? 'null' }}</code></p>
|
||||
<p>Fin : <code>{{ erpValue?.end ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDateRange
|
||||
v-model="bounded"
|
||||
label="Plage bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
type RangeValue = {start: string; end: string}
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const value = ref<RangeValue | null>(null)
|
||||
const erpValue = ref<RangeValue | null>(null)
|
||||
const bounded = ref<RangeValue | null>(null)
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateWeek</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="value"
|
||||
label="Semaine"
|
||||
hint="Clique un jour ou un n° de semaine"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = '2026-W52'"
|
||||
>
|
||||
Forcer 2026-W52
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDateWeek
|
||||
v-model="erpValue"
|
||||
label="Semaine"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur : <code>{{ erpValue ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDateWeek
|
||||
v-model="bounded"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const erpValue = ref<string | null>(null)
|
||||
const bounded = ref<string | null>(null)
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="space-y-6 p-4">
|
||||
<h1 class="text-2xl font-bold">MalioDateTime</h1>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-10">
|
||||
<div class="w-[480px] space-y-3">
|
||||
<h2 class="font-semibold">Large (480px)</h2>
|
||||
<MalioDateTime
|
||||
v-model="value"
|
||||
label="Date et heure du rendez-vous"
|
||||
hint="Choisis un jour puis une heure"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded bg-m-primary px-3 py-1.5 text-white"
|
||||
@click="value = '2026-12-25T09:30:00'"
|
||||
>
|
||||
Forcer le 25/12/2026 09:30
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border px-3 py-1.5"
|
||||
@click="value = null"
|
||||
>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-[396px] space-y-3">
|
||||
<h2 class="font-semibold">ERP (396px)</h2>
|
||||
<MalioDateTime
|
||||
v-model="erpValue"
|
||||
label="Date et heure du rendez-vous"
|
||||
hint="Largeur cible ERP"
|
||||
/>
|
||||
<div class="rounded border p-3 text-sm">
|
||||
<p>Valeur (ISO naïf) : <code>{{ erpValue ?? 'null' }}</code></p>
|
||||
</div>
|
||||
<MalioDateTime
|
||||
v-model="bounded"
|
||||
label="Créneau borné"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const value = ref<string | null>(null)
|
||||
const erpValue = ref<string | null>(null)
|
||||
const bounded = ref<string | null>('2026-05-20T14:30:00')
|
||||
</script>
|
||||
@@ -1,48 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const drawerDefault = ref(false)
|
||||
const drawerNoClose = ref(false)
|
||||
const drawerCustomWidth = ref(false)
|
||||
const drawerWithForm = ref(false)
|
||||
const drawerRight = ref(false)
|
||||
const drawerLeft = ref(false)
|
||||
const drawerForm = ref(false)
|
||||
const drawerFixedFooter = ref(false)
|
||||
const drawerNoDismiss = 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>
|
||||
<h2 class="mb-6 text-xl font-bold">Drawer droite (défaut)</h2>
|
||||
<MalioButton label="Ouvrir à droite" @click="drawerRight = true" />
|
||||
<MalioDrawer v-model="drawerRight">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Détails</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Contenu du drawer. Échap, clic backdrop et croix le ferment.</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>
|
||||
<h2 class="mb-6 text-xl font-bold">Drawer gauche</h2>
|
||||
<MalioButton label="Ouvrir à gauche" variant="secondary" @click="drawerLeft = true" />
|
||||
<MalioDrawer v-model="drawerLeft" side="left">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Navigation</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Ce drawer glisse depuis la gauche.</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">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
|
||||
<MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
|
||||
<MalioDrawer v-model="drawerForm" drawer-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
<MalioInputText label="Email" />
|
||||
<MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Footer fixe avec contenu long</h2>
|
||||
<MalioButton label="Ouvrir (contenu long)" variant="tertiary" @click="drawerFixedFooter = true" />
|
||||
<MalioDrawer v-model="drawerFixedFooter">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Conditions</h2>
|
||||
</template>
|
||||
<!-- Pas de hack : le footer est hors zone scrollable, seul le body défile -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<p v-for="n in 12" :key="n" class="text-m-text">
|
||||
Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que seul le body défile, le footer restant fixé en bas.
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
|
||||
<MalioButton label="Ouvrir" variant="danger" @click="drawerNoDismiss = true" />
|
||||
<MalioDrawer v-model="drawerNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Action requise</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<div class="w-[1348px]">
|
||||
<div class="flex items-center justify-between mt-[46px]">
|
||||
<div class="flex items-center gap-3">
|
||||
<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">Filtres</h1>
|
||||
</div>
|
||||
<MalioButton
|
||||
label="Filtres"
|
||||
variant="tertiary"
|
||||
icon-name="mdi:tune"
|
||||
icon-position="left"
|
||||
button-class="w-[184px] px-2 py-2 justify-start text-black gap-4"
|
||||
@click="drawerOpen = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MalioDrawer
|
||||
v-model="drawerOpen"
|
||||
side="right"
|
||||
drawer-class="max-w-[450px]"
|
||||
body-class="p-0"
|
||||
footer-class="justify-between gap-4 py-7"
|
||||
>
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold uppercase">Filtres</h2>
|
||||
</template>
|
||||
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Type de camion" value="camion">
|
||||
<div class="flex flex-col gap-6">
|
||||
<MalioCheckbox v-model="semiBenne" label="Semi Benne" />
|
||||
<MalioCheckbox v-model="benne" label="Benne" />
|
||||
</div>
|
||||
</MalioAccordionItem>
|
||||
|
||||
<MalioAccordionItem title="Date à Date" value="date">
|
||||
<div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
|
||||
<span>Du</span>
|
||||
<MalioDate v-model="dateDebut"/>
|
||||
<span>Au</span>
|
||||
<MalioDate v-model="dateFin"/>
|
||||
</div>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
|
||||
<template #footer>
|
||||
<MalioButton
|
||||
label="Réinitialiser"
|
||||
variant="tertiary"
|
||||
button-class="w-[150px]"
|
||||
@click="resetFiltres"
|
||||
/>
|
||||
<MalioButton
|
||||
label="Voir les résultats"
|
||||
variant="primary"
|
||||
button-class="w-[170px]"
|
||||
/>
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const drawerOpen = ref(false)
|
||||
|
||||
const semiBenne = ref(false)
|
||||
const benne = ref(false)
|
||||
|
||||
const dateDebut = ref<string | null>(null)
|
||||
const dateFin = ref<string | null>(null)
|
||||
|
||||
function resetFiltres() {
|
||||
semiBenne.value = false
|
||||
benne.value = false
|
||||
dateDebut.value = null
|
||||
dateFin.value = null
|
||||
}
|
||||
</script>
|
||||
@@ -1,8 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-center mt-8">
|
||||
<div>
|
||||
<div class="w-[1348px] grid grid-cols-3 gap-x-[160px] gap-y-8">
|
||||
<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)"
|
||||
/>
|
||||
@@ -13,20 +21,27 @@
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
label="Catégorie"
|
||||
v-model="multiselectValue"
|
||||
label="Catégorie"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputText
|
||||
<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"
|
||||
/>
|
||||
<MalioInputText
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="distributeur"
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
@@ -36,6 +51,7 @@
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomCourtier"
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
@@ -43,83 +59,264 @@
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomDistributeur"
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
label="Nom du distributeur"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage"/>
|
||||
<MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
|
||||
<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"/>
|
||||
<MalioDate
|
||||
v-model="dateCreation"
|
||||
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>
|
||||
<div class="flex justify-center mt-16">
|
||||
<div>
|
||||
<div class="w-[1348px] 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"
|
||||
</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
|
||||
label="Catégorie"
|
||||
v-model="multiselectValue"
|
||||
label="Catégorie"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Téléphone"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
label="Pays"
|
||||
v-model="pays"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
{label: 'France', value: 'France'},
|
||||
{label: 'Espagne', value: 'Espagne'}
|
||||
]"/>
|
||||
<MalioInputText v-model="codePostal" label="Code postal" />
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
v-model="ville"
|
||||
label="Ville"
|
||||
:options="villeOptions"
|
||||
:no-options-text="villeNoOptionsText"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
<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"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<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} from "vue";
|
||||
import MalioSelect from "../../../../app/components/malio/select/Select.vue";
|
||||
import MalioCheckbox from "../../../../app/components/malio/checkbox/Checkbox.vue";
|
||||
import MalioButton from "../../../../app/components/malio/button/Button.vue";
|
||||
import {ref, computed, watch} from 'vue'
|
||||
import MalioDate from "../../../../app/components/malio/date/Date.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 dateCreation = ref<string | null>(null)
|
||||
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,180 @@
|
||||
<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>
|
||||
@@ -0,0 +1,106 @@
|
||||
<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>
|
||||
@@ -0,0 +1,141 @@
|
||||
<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>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MalioButton from "../../../../app/components/malio/button/Button.vue";
|
||||
|
||||
const modalBase = ref(false)
|
||||
const modalForm = ref(false)
|
||||
const modalLong = ref(false)
|
||||
const modalNoDismiss = 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">Modal simple</h2>
|
||||
<MalioButton label="Ouvrir" @click="modalBase = true" />
|
||||
<MalioModal v-model="modalBase" headerClass="py-7 px-[25px]" footerClass="flex justify-center pt-8">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Marquer comme vu ?</h2>
|
||||
</template>
|
||||
<template #footer>
|
||||
<MalioButton label="Valider"/>
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
|
||||
<MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="modalForm = true" />
|
||||
<MalioModal v-model="modalForm" modal-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
<MalioInputText label="Email" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="modalForm = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="modalForm = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Contenu long (body scrollable)</h2>
|
||||
<MalioButton label="Ouvrir" variant="tertiary" @click="modalLong = true" />
|
||||
<MalioModal v-model="modalLong">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Conditions</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<p v-for="n in 20" :key="n" class="text-m-text">
|
||||
Paragraphe {{ n }} — contenu long pour forcer le scroll interne ; le header et le footer restent fixes.
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Accepter" button-class="w-full" @click="modalLong = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-6">
|
||||
<h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
|
||||
<MalioButton label="Ouvrir" variant="danger" @click="modalNoDismiss = true" />
|
||||
<MalioModal v-model="modalNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold text-black">Action requise</h2>
|
||||
</template>
|
||||
<p class="text-m-text">Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<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>
|
||||
<MalioTimePicker v-model="simpleValue" label="Heure" />
|
||||
<p class="mt-2 text-sm text-m-muted">Valeur : {{ simpleValue || '—' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioTimePicker v-model="initialValue" label="Heure de départ" hint="Format HH:MM" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioTimePicker v-model="disabledValue" label="Heure verrouillée" disabled />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioTimePicker v-model="errorValue" label="Heure de fermeture" error="Heure invalide" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioTimePicker v-model="successValue" label="Heure confirmée" success="Horaire enregistré" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioTimePicker v-model="noClearValue" label="Heure" :clearable="false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
|
||||
const simpleValue = ref('')
|
||||
const initialValue = ref('08:30')
|
||||
const disabledValue = ref('14:15')
|
||||
const errorValue = ref('25:90')
|
||||
const successValue = ref('09:00')
|
||||
const noClearValue = ref('10:00')
|
||||
</script>
|
||||
+5
-184
@@ -1,189 +1,10 @@
|
||||
<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
|
||||
<div class="mx-auto max-w-2xl py-16 text-center">
|
||||
<h1 class="text-3xl font-bold text-m-text">
|
||||
Playground @malio/layer-ui
|
||||
</h1>
|
||||
<p class="mt-2 text-gray-600">
|
||||
Selectionne un composant dans la liste pour afficher sa page de demo.
|
||||
<p class="mt-4 text-m-muted">
|
||||
Sélectionne un composant dans la barre latérale pour afficher sa page de démonstration.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</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)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import type {SidebarSection} from '../app/components/malio/sidebar/Sidebar.vue'
|
||||
|
||||
export const navSections: SidebarSection[] = [
|
||||
{
|
||||
label: 'BOUTONS',
|
||||
icon: 'mdi:gesture-tap-button',
|
||||
items: [
|
||||
{label: 'Button', to: '/composant/button/button'},
|
||||
{label: 'Button Icon', to: '/composant/button/buttonIcon'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'CHAMPS',
|
||||
icon: 'mdi:form-textbox',
|
||||
items: [
|
||||
{label: 'Texte', to: '/composant/input/inputText'},
|
||||
{label: 'Nombre', to: '/composant/input/inputNumber'},
|
||||
{label: 'Montant', to: '/composant/input/inputAmount'},
|
||||
{label: 'Email', to: '/composant/input/inputEmail'},
|
||||
{label: 'Mot de passe', to: '/composant/input/inputPassword'},
|
||||
{label: 'Téléphone', to: '/composant/input/inputPhone'},
|
||||
{label: 'Zone de texte', to: '/composant/input/inputTextArea'},
|
||||
{label: 'Saisie assistée', to: '/composant/input/inputAutocomplete'},
|
||||
{label: 'Upload', to: '/composant/input/inputUpload'},
|
||||
{label: 'Éditeur riche', to: '/composant/input/inputRichText'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DATES & HEURES',
|
||||
icon: 'mdi:calendar-clock',
|
||||
items: [
|
||||
{label: 'Date', to: '/composant/date/date'},
|
||||
{label: 'Plage de dates', to: '/composant/date/dateRange'},
|
||||
{label: 'Semaine', to: '/composant/date/dateWeek'},
|
||||
{label: 'Date & heure', to: '/composant/date/datetime'},
|
||||
{label: 'Heure', to: '/composant/time/time'},
|
||||
{label: 'Sélecteur d\'heure', to: '/composant/time/timePicker'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'SÉLECTIONS',
|
||||
icon: 'mdi:form-dropdown',
|
||||
items: [
|
||||
{label: 'Select', to: '/composant/select/select'},
|
||||
{label: 'Select Checkbox', to: '/composant/select/selectCheckbox'},
|
||||
{label: 'Checkbox', to: '/composant/checkbox/checkbox'},
|
||||
{label: 'Radio', to: '/composant/radio/radioButton'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'NAVIGATION',
|
||||
icon: 'mdi:navigation-variant',
|
||||
items: [
|
||||
{label: 'Sidebar', to: '/composant/sidebar/sidebar'},
|
||||
{label: 'Drawer', to: '/composant/drawer/drawer'},
|
||||
{label: 'Modal', to: '/composant/modal/modal'},
|
||||
{label: 'Onglets', to: '/composant/tab/tabList'},
|
||||
{label: 'Accordéon', to: '/composant/accordion/accordion'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DONNÉES',
|
||||
icon: 'mdi:table',
|
||||
items: [
|
||||
{label: 'DataTable', to: '/composant/datatable/datatable'},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'DIVERS',
|
||||
icon: 'mdi:dots-horizontal',
|
||||
items: [
|
||||
{label: 'Heure', to: '/composant/time/time'},
|
||||
{label: 'Sélecteur de site', to: '/composant/site/siteSelector'},
|
||||
{label: 'Formulaire client', to: '/composant/form/client'},
|
||||
{label: 'Filtres', to: '/composant/filtre/filtres'},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -27,9 +27,20 @@ Liste des évolutions de la librairie Malio layer UI
|
||||
* [#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)
|
||||
* [#MUI-34] Revoir le système de playground
|
||||
* [#MUI-33] Développer le composant Datepicker
|
||||
* [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
|
||||
* [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
|
||||
* [#MUI-37] Création d'un composant accordéon
|
||||
* [#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire)
|
||||
|
||||
### Changed
|
||||
* [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`.
|
||||
|
||||
### Fixed
|
||||
* Drawer : le slot `#footer` est désormais rendu hors de la zone scrollable (épinglé en bas, comme la modal) ; seul le body défile et la scrollbar ne s'étend plus derrière le footer
|
||||
* 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
|
||||
|
||||
+519
-13
@@ -66,6 +66,160 @@ Champ mot de passe avec toggle visibilité.
|
||||
|
||||
---
|
||||
|
||||
## 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).
|
||||
@@ -122,6 +276,7 @@ Zone de texte multiligne avec compteur et redimensionnement.
|
||||
| `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)`
|
||||
|
||||
@@ -207,6 +362,7 @@ Liste déroulante.
|
||||
| `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)
|
||||
@@ -232,6 +388,7 @@ Liste déroulante multi-sélection avec checkboxes.
|
||||
| `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)[])`
|
||||
|
||||
@@ -285,6 +442,106 @@ Bouton radio (à utiliser en groupe avec le même `name`).
|
||||
|
||||
---
|
||||
|
||||
## MalioDate
|
||||
|
||||
Sélecteur de date unique avec popover (grille de calendrier + vue mois/année).
|
||||
|
||||
La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et ferme le popover.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Date ISO `"YYYY-MM-DD"` (v-model) |
|
||||
| `id` | `string` | `''` | Id du champ |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
|
||||
| `required` | `boolean` | `false` | Requis |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `hint` | `string` | `''` | Texte d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` (jours antérieurs désactivés) |
|
||||
| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` (jours postérieurs désactivés) |
|
||||
| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
|
||||
| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
|
||||
|
||||
**Events :** `update:modelValue(value: string | null)`
|
||||
|
||||
```vue
|
||||
<MalioDate v-model="date" label="Date de naissance" />
|
||||
<!-- date === "2026-05-20" -->
|
||||
<MalioDate v-model="rdv" label="Rendez-vous" :min="todayIso" :max="maxIso" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDateRange
|
||||
|
||||
Sélecteur de **plage de dates** (date de début → date de fin) dans un seul champ. Cliquer un premier jour démarre la plage, le second la termine ; un survol prévisualise la plage.
|
||||
|
||||
La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD"`), ou `null`.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `{ start: string; end: string } \| null` | `undefined` | Plage de dates ISO (v-model) |
|
||||
| `id` | `string` | `''` | Id du champ |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
|
||||
| `required` | `boolean` | `false` | Requis |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `hint` | `string` | `''` | Texte d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
|
||||
| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
|
||||
| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
|
||||
| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
|
||||
|
||||
**Events :** `update:modelValue(value: { start: string; end: string } | null)`
|
||||
|
||||
```vue
|
||||
<MalioDateRange v-model="periode" label="Période de séjour" />
|
||||
<!-- periode === { start: "2026-05-20", end: "2026-05-27" } -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDateWeek
|
||||
|
||||
Sélecteur de **semaine ISO** : cliquer un jour (ou un numéro de semaine) sélectionne la semaine entière.
|
||||
|
||||
La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2026-W21"`), ou `null`. Le champ affiche `Semaine W (JJ/MM → JJ/MM/AAAA)`.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Semaine ISO `"YYYY-Www"` (v-model) |
|
||||
| `id` | `string` | `''` | Id du champ |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder |
|
||||
| `required` | `boolean` | `false` | Requis |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `hint` | `string` | `''` | Texte d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` |
|
||||
| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` |
|
||||
| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
|
||||
| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
|
||||
|
||||
**Events :** `update:modelValue(value: string | null)`
|
||||
|
||||
```vue
|
||||
<MalioDateWeek v-model="semaine" label="Semaine de livraison" />
|
||||
<!-- semaine === "2026-W21" -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioTime
|
||||
|
||||
Sélecteur d'heure.
|
||||
@@ -306,6 +563,72 @@ Sélecteur d'heure.
|
||||
|
||||
---
|
||||
|
||||
## MalioTimePicker
|
||||
|
||||
Sélecteur d'heure à **molettes style iOS** (champ + popover). Deux colonnes infinies (heures `00–23`, minutes `00–59`, pas de 1) avec une bande de sélection centrale ; la valeur centrée est sélectionnée. Défilement, clic sur une valeur (recentrage) ou flèches clavier (`role="spinbutton"`). Pour une saisie clavier directe au format texte, voir plutôt `MalioTime`.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `modelValue` | `string \| null` | `undefined` | Heure au format `"HH:MM"` (v-model) |
|
||||
| `placeholder` | `string` | `'HH:MM'` | Placeholder |
|
||||
| `required` | `boolean` | `false` | Champ requis |
|
||||
| `disabled` | `boolean` | `false` | Désactive le champ |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
|
||||
| `hint` | `string` | `''` | Message d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
|
||||
|
||||
**Events :** `update:modelValue(value: string | null)`
|
||||
|
||||
```vue
|
||||
<MalioTimePicker v-model="heure" label="Heure" />
|
||||
<MalioTimePicker v-model="heure" label="Départ" hint="Format HH:MM" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioDateTime
|
||||
|
||||
Champ unique combinant **date et heure** dans un popover (grille de calendrier + sélecteur d'heure sous la grille).
|
||||
|
||||
> Depuis MUI-39, le réglage de l'heure utilise le sélecteur à molettes (cf. `MalioTimePicker`), qui remplace l'ancien `<input type="time">` natif intérimaire.
|
||||
|
||||
La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:MM:00"` (heure murale locale). Symfony (`DateTimeNormalizer`) parse ce format et applique son fuseau configuré côté back — pas de gestion de fuseau côté front.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string \| null` | `undefined` | Date + heure ISO naïve `"YYYY-MM-DDTHH:MM:00"` (v-model) |
|
||||
| `id` | `string` | `''` | Id du champ |
|
||||
| `name` | `string` | `''` | Attribut name |
|
||||
| `label` | `string` | `''` | Label flottant |
|
||||
| `placeholder` | `string` | `'JJ/MM/AAAA HH:MM'` | Placeholder |
|
||||
| `required` | `boolean` | `false` | Requis |
|
||||
| `disabled` | `boolean` | `false` | Désactivé |
|
||||
| `readonly` | `boolean` | `false` | Lecture seule |
|
||||
| `hint` | `string` | `''` | Texte d'aide |
|
||||
| `error` | `string` | `''` | Message d'erreur |
|
||||
| `success` | `string` | `''` | Message de succès |
|
||||
| `min` | `string` | `undefined` | Borne min (datetime ou date ; borne la grille sur la partie date) |
|
||||
| `max` | `string` | `undefined` | Borne max (idem) |
|
||||
| `clearable` | `boolean` | `true` | Affiche la croix d'effacement |
|
||||
| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes |
|
||||
|
||||
**Events :** `update:modelValue(value: string | null)`
|
||||
|
||||
Flux : cliquer un jour fixe la date (heure par défaut `00:00`), régler l'heure met à jour l'heure ; le popover se ferme au clic extérieur. La valeur est émise en direct à chaque interaction.
|
||||
|
||||
```vue
|
||||
<MalioDateTime v-model="rdv" label="Date et heure du rendez-vous" />
|
||||
<!-- rdv === "2026-05-20T14:30:00" -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioButton
|
||||
|
||||
Bouton d'action avec 4 variantes visuelles et icône optionnelle.
|
||||
@@ -362,18 +685,90 @@ Navigation par onglets avec contenu dynamique.
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `modelValue` | `string` | `undefined` | Onglet actif (v-model) |
|
||||
| `tabs` | `{ key: string, label: string, icon?: string }[]` | **requis** | Liste des onglets |
|
||||
| `tabs` | `Tab[]` | **requis** | Liste des onglets (voir type ci-dessous) |
|
||||
|
||||
**Events :** `update:modelValue(value: string)`
|
||||
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="[{ key: 'infos', label: 'Informations' }, { key: 'docs', label: 'Documents', icon: 'mdi:file' }]">
|
||||
<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 },
|
||||
])
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioAccordion
|
||||
|
||||
Accordéon compositionnel : `<MalioAccordion>` enveloppe des `<MalioAccordionItem>`. Plusieurs panneaux ouverts (`multiple`, défaut) ou un seul (`single`). Pensé pour les filtres en drawer et les FAQ.
|
||||
|
||||
### MalioAccordion
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `mode` | `'single' \| 'multiple'` | `'multiple'` | Un seul ou plusieurs panneaux ouverts |
|
||||
| `modelValue` | `string \| string[]` | `undefined` | Clés ouvertes (v-model). `string[]` en `multiple`, `string` en `single` |
|
||||
| `id` | `string` | auto | Préfixe des IDs d'accessibilité |
|
||||
| `groupClass` | `string` | `''` | Classes du conteneur (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: string | string[])`
|
||||
|
||||
### MalioAccordionItem
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `title` | `string` | — | Texte de l'en-tête |
|
||||
| `value` | `string` | auto | Clé unique de la section |
|
||||
| `defaultOpen` | `boolean` | `false` | Ouvert au montage (mode non contrôlé) |
|
||||
| `disabled` | `boolean` | `false` | En-tête non cliquable |
|
||||
| `headerClass` | `string` | `''` | Override classes en-tête (twMerge) |
|
||||
| `panelClass` | `string` | `''` | Override classes panneau (twMerge) |
|
||||
|
||||
**Slot :** par défaut = contenu du panneau.
|
||||
|
||||
```vue
|
||||
<!-- Filtres : plusieurs sections ouvertes -->
|
||||
<MalioAccordion v-model="ouverts">
|
||||
<MalioAccordionItem title="Prix" value="prix">
|
||||
<MalioInputAmount v-model="prix" />
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat">
|
||||
<MalioCheckbox v-model="cats" />
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
|
||||
<!-- FAQ : une seule section ouverte -->
|
||||
<MalioAccordion mode="single">
|
||||
<MalioAccordionItem title="Question 1" value="q1">Réponse 1</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Question 2" value="q2">Réponse 2</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSidebar
|
||||
@@ -403,29 +798,110 @@ Barre latérale de navigation rétractable.
|
||||
|
||||
## MalioDrawer
|
||||
|
||||
Panneau latéral (drawer) qui s'ouvre depuis la droite avec backdrop semi-transparent.
|
||||
Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs drawers.
|
||||
|
||||
| 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 |
|
||||
| `side` | `'right' \| 'left'` | `'right'` | Côté d'apparition |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `drawerClass` | `string` | `''` | Classes CSS panneau (twMerge) |
|
||||
| `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
|
||||
| `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
|
||||
| `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
|
||||
| `drawerClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-2xl` (twMerge) |
|
||||
| `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
|
||||
| `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
|
||||
| `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
|
||||
| `footerClass` | `string` | `''` | Classes CSS du footer fixe (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`
|
||||
**Slots :** `default` (contenu du drawer)
|
||||
**Events :** `update:modelValue(value: boolean)`, `close()`
|
||||
|
||||
**Slots :**
|
||||
- `header` — en-tête (titre, etc.), fixe en haut. S'il est absent et que `showClose` est `true`, seule la croix est affichée.
|
||||
- `default` — contenu (zone scrollable : seul le body défile).
|
||||
- `footer` — actions (boutons). Rendu en bas du panneau, fixe, hors de la zone scrollable. N'apparaît que si le slot est fourni.
|
||||
|
||||
```vue
|
||||
<MalioDrawer v-model="isOpen" title="Détails">
|
||||
<MalioDrawer v-model="isOpen">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu du drawer</p>
|
||||
</MalioDrawer>
|
||||
<MalioDrawer v-model="isOpen" title="Sans croix" :show-close="false">
|
||||
<p>Fermeture uniquement via backdrop</p>
|
||||
|
||||
<!-- Côté gauche, largeur custom -->
|
||||
<MalioDrawer v-model="isOpen" side="left" drawer-class="max-w-2xl">
|
||||
<template #header><h2>Navigation</h2></template>
|
||||
<p>Drawer large depuis la gauche</p>
|
||||
</MalioDrawer>
|
||||
<MalioDrawer v-model="isOpen" title="Large" drawer-class="max-w-2xl">
|
||||
<p>Drawer plus large</p>
|
||||
|
||||
<!-- Footer d'actions (fixe en bas, hors zone scrollable) -->
|
||||
<MalioDrawer v-model="isOpen">
|
||||
<template #header><h2>Formulaire</h2></template>
|
||||
<MalioInputText label="Nom" />
|
||||
<template #footer>
|
||||
<MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
|
||||
<!-- Non fermable au backdrop / Échap (croix uniquement) -->
|
||||
<MalioDrawer v-model="isOpen" :dismissable="false" :close-on-escape="false">
|
||||
<template #header><h2>Action requise</h2></template>
|
||||
<p>Fermeture via la croix uniquement</p>
|
||||
</MalioDrawer>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioModal
|
||||
|
||||
Boîte de dialogue modale centrée avec backdrop semi-transparent. Gère l'accessibilité (focus-trap, restitution du focus, `Échap`), le verrouillage du scroll de la page et un empilement correct de plusieurs modals. Structure : header fixe, body scrollable (`max-h-[85vh]`), footer fixe.
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `id` | `string` | auto | Identifiant HTML |
|
||||
| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
|
||||
| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
|
||||
| `dismissable` | `boolean` | `true` | Fermer au clic sur le backdrop |
|
||||
| `closeOnEscape` | `boolean` | `true` | Fermer avec la touche `Échap` |
|
||||
| `ariaLabel` | `string` | `''` | Nom accessible de secours quand le slot `#header` est absent |
|
||||
| `modalClass` | `string` | `''` | Classes CSS panneau, ex. largeur `max-w-lg` (twMerge) |
|
||||
| `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
|
||||
| `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
|
||||
| `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
|
||||
| `footerClass` | `string` | `''` | Classes CSS footer fixe (twMerge) |
|
||||
|
||||
**Events :** `update:modelValue(value: boolean)`, `close()`
|
||||
|
||||
**Slots :**
|
||||
- `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
|
||||
- `default` — contenu (zone scrollable).
|
||||
- `footer` — actions (boutons). Rendu en bas, fixe, séparé par une bordure. N'apparaît que si le slot est fourni.
|
||||
|
||||
```vue
|
||||
<MalioModal v-model="isOpen">
|
||||
<template #header>
|
||||
<h2 class="text-[24px] font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu de la modal</p>
|
||||
</MalioModal>
|
||||
|
||||
<!-- Largeur custom + footer d'actions -->
|
||||
<MalioModal v-model="isOpen" modal-class="max-w-lg">
|
||||
<template #header><h2>Nouveau contact</h2></template>
|
||||
<MalioInputText label="Nom" />
|
||||
<template #footer>
|
||||
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="isOpen = false" />
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="isOpen = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
|
||||
<!-- Non fermable au backdrop / Échap (croix uniquement) -->
|
||||
<MalioModal v-model="isOpen" :dismissable="false" :close-on-escape="false">
|
||||
<template #header><h2>Action requise</h2></template>
|
||||
<p>Fermeture via la croix uniquement</p>
|
||||
</MalioModal>
|
||||
```
|
||||
|
||||
---
|
||||
@@ -483,3 +959,33 @@ Tableau de données presentational avec pagination, filtres par slots et lignes
|
||||
v-model:per-page="perPage"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MalioSiteSelector
|
||||
|
||||
Sélecteur de site sous forme de tuiles segmentées (`role="radiogroup"`). Chaque site occupe une tuile de largeur égale ; la tuile active s'affiche pleine opacité dans sa couleur (`site.color`), les autres sont atténuées. Pattern contrôlé (`v-model`) ou non contrôlé (premier site sélectionné par défaut).
|
||||
|
||||
| Prop | Type | Défaut | Description |
|
||||
|------|------|--------|-------------|
|
||||
| `sites` | `{ id: string, name: string, color: string }[]` | **requis** | Liste des sites (la `color` colore la tuile active) |
|
||||
| `modelValue` | `string` | `undefined` | `id` du site sélectionné (v-model) |
|
||||
| `id` | `string` | auto | Identifiant HTML du conteneur |
|
||||
| `groupClass` | `string` | `''` | Classes CSS du conteneur (twMerge) |
|
||||
| `tileClass` | `string` | `''` | Classes CSS de chaque tuile (twMerge) |
|
||||
| `labelClass` | `string` | `''` | Classes CSS du label de tuile (twMerge) |
|
||||
|
||||
**Events :**
|
||||
- `update:modelValue(value: string)` — `id` du site sélectionné (v-model)
|
||||
- `change(site: Site)` — émis avec l'objet site complet sélectionné
|
||||
|
||||
```vue
|
||||
<MalioSiteSelector
|
||||
v-model="siteId"
|
||||
:sites="[
|
||||
{ id: 'paris', name: 'Paris', color: '#2563eb' },
|
||||
{ id: 'lyon', name: 'Lyon', color: '#16a34a' },
|
||||
]"
|
||||
@change="onSiteChange"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
:root {
|
||||
/* ── Globales ── */
|
||||
--m-primary: 34 39 131; /* #222783 - Bleu Malio */
|
||||
--m-primary-light: 239 239 253; /* #EFEFFD - Teinte claire du primary (fonds doux) */
|
||||
--m-bg: 243 244 248; /* #F3F4F8 - Fond de page */
|
||||
--m-surface: 243 244 248; /* #F3F4F8 - Fond hover/cartes */
|
||||
--m-text: 15 23 42; /* #0F172A */
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {nextTick} from 'vue'
|
||||
import Accordion from './Accordion.vue'
|
||||
import AccordionItem from './AccordionItem.vue'
|
||||
|
||||
const TWO_ITEMS = `
|
||||
<MalioAccordionItem title="Prix" value="prix"><p>Contenu prix</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat"><p>Contenu catégorie</p></MalioAccordionItem>
|
||||
`
|
||||
|
||||
function mountAccordion(props: Record<string, unknown> = {}, slot: string = TWO_ITEMS, attachTo?: HTMLElement) {
|
||||
return mount(Accordion, {
|
||||
props,
|
||||
slots: {default: slot},
|
||||
attachTo,
|
||||
global: {components: {MalioAccordionItem: AccordionItem}},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioAccordion — rendu & mode multiple', () => {
|
||||
it('renders each item header with its title', () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers).toHaveLength(2)
|
||||
expect(headers[0].text()).toContain('Prix')
|
||||
expect(headers[1].text()).toContain('Catégorie')
|
||||
})
|
||||
|
||||
it('renders the slot content of each panel', () => {
|
||||
const wrapper = mountAccordion()
|
||||
expect(wrapper.html()).toContain('Contenu prix')
|
||||
expect(wrapper.html()).toContain('Contenu catégorie')
|
||||
})
|
||||
|
||||
it('all panels are collapsed by default', () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('false')
|
||||
const regions = wrapper.findAll('[role="region"]')
|
||||
expect(regions[0].classes()).toContain('grid-rows-[0fr]')
|
||||
})
|
||||
|
||||
it('opens a panel on header click (multiple mode is default)', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('true')
|
||||
const regions = wrapper.findAll('[role="region"]')
|
||||
expect(regions[0].classes()).toContain('grid-rows-[1fr]')
|
||||
})
|
||||
|
||||
it('keeps multiple panels open simultaneously in multiple mode', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
await headers[1].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('true')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('closes an open panel when its header is clicked again', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
await headers[0].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
})
|
||||
|
||||
it('wires aria-controls / aria-labelledby / role=region correctly', () => {
|
||||
const wrapper = mountAccordion({id: 'acc'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
const regions = wrapper.findAll('[role="region"]')
|
||||
expect(headers[0].attributes('id')).toBe('acc-header-prix')
|
||||
expect(headers[0].attributes('aria-controls')).toBe('acc-panel-prix')
|
||||
expect(regions[0].attributes('id')).toBe('acc-panel-prix')
|
||||
expect(regions[0].attributes('aria-labelledby')).toBe('acc-header-prix')
|
||||
})
|
||||
|
||||
it('emits update:modelValue with an array in multiple mode', async () => {
|
||||
const wrapper = mountAccordion()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['prix']])
|
||||
await nextTick()
|
||||
})
|
||||
})
|
||||
|
||||
describe('MalioAccordion — mode single & contrôlé', () => {
|
||||
it('opening a panel closes the others in single mode', async () => {
|
||||
const wrapper = mountAccordion({mode: 'single'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
await headers[1].trigger('click')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('emits a string in single mode', async () => {
|
||||
const wrapper = mountAccordion({mode: 'single'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[1].trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['cat'])
|
||||
})
|
||||
|
||||
it('emits empty string when closing the open panel in single mode', async () => {
|
||||
const wrapper = mountAccordion({mode: 'single', modelValue: 'prix'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
|
||||
})
|
||||
|
||||
it('respects modelValue array in controlled multiple mode', () => {
|
||||
const wrapper = mountAccordion({modelValue: ['cat']})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('respects modelValue string in controlled single mode', () => {
|
||||
const wrapper = mountAccordion({mode: 'single', modelValue: 'prix'})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('true')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('false')
|
||||
})
|
||||
|
||||
it('does not mutate local state in controlled mode (emits only)', async () => {
|
||||
const wrapper = mountAccordion({modelValue: []})
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[0].trigger('click')
|
||||
// état piloté par le parent : sans mise à jour de la prop, reste fermé
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['prix']])
|
||||
})
|
||||
})
|
||||
|
||||
describe('MalioAccordion — defaultOpen, disabled & clavier', () => {
|
||||
const WITH_DEFAULT_OPEN = `
|
||||
<MalioAccordionItem title="Prix" value="prix"><p>P</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat" :default-open="true"><p>C</p></MalioAccordionItem>
|
||||
`
|
||||
const WITH_DISABLED = `
|
||||
<MalioAccordionItem title="Prix" value="prix"><p>P</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat" :disabled="true"><p>C</p></MalioAccordionItem>
|
||||
`
|
||||
|
||||
it('opens defaultOpen items initially in uncontrolled mode', async () => {
|
||||
const wrapper = mountAccordion({}, WITH_DEFAULT_OPEN)
|
||||
await nextTick()
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[0].attributes('aria-expanded')).toBe('false')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('sets disabled and aria-disabled on a disabled item', () => {
|
||||
const wrapper = mountAccordion({}, WITH_DISABLED)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
expect(headers[1].attributes('disabled')).toBeDefined()
|
||||
expect(headers[1].attributes('aria-disabled')).toBe('true')
|
||||
})
|
||||
|
||||
it('does not toggle a disabled item on click', async () => {
|
||||
const wrapper = mountAccordion({}, WITH_DISABLED)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
await headers[1].trigger('click')
|
||||
expect(headers[1].attributes('aria-expanded')).toBe('false')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('moves focus to the next header on ArrowDown', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const wrapper = mountAccordion({}, TWO_ITEMS, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[0].element as HTMLElement).focus()
|
||||
await headers[0].trigger('keydown', {key: 'ArrowDown'})
|
||||
expect(document.activeElement).toBe(headers[1].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('wraps focus to the first header on ArrowDown from the last', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const wrapper = mountAccordion({}, TWO_ITEMS, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[1].element as HTMLElement).focus()
|
||||
await headers[1].trigger('keydown', {key: 'ArrowDown'})
|
||||
expect(document.activeElement).toBe(headers[0].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('moves focus to the previous header on ArrowUp', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const wrapper = mountAccordion({}, TWO_ITEMS, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[1].element as HTMLElement).focus()
|
||||
await headers[1].trigger('keydown', {key: 'ArrowUp'})
|
||||
expect(document.activeElement).toBe(headers[0].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('skips disabled headers during keyboard navigation', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
const slot = `
|
||||
<MalioAccordionItem title="A" value="a"><p>A</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="B" value="b" :disabled="true"><p>B</p></MalioAccordionItem>
|
||||
<MalioAccordionItem title="C" value="c"><p>C</p></MalioAccordionItem>
|
||||
`
|
||||
const wrapper = mountAccordion({}, slot, root)
|
||||
const headers = wrapper.findAll('button[aria-expanded]')
|
||||
;(headers[0].element as HTMLElement).focus()
|
||||
await headers[0].trigger('keydown', {key: 'ArrowDown'})
|
||||
// saute le header désactivé (B) pour aller directement à C
|
||||
expect(document.activeElement).toBe(headers[2].element)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
})
|
||||
|
||||
describe('MalioAccordion — overflow du panneau (popovers enfants)', () => {
|
||||
const ONE = `<MalioAccordionItem title="A" value="a"><p>contenu</p></MalioAccordionItem>`
|
||||
const ONE_OPEN = `<MalioAccordionItem title="A" value="a" :default-open="true"><p>contenu</p></MalioAccordionItem>`
|
||||
|
||||
it('clips the panel (overflow-hidden) while collapsed', () => {
|
||||
const wrapper = mountAccordion({}, ONE)
|
||||
const inner = wrapper.find('[role="region"] > div')
|
||||
expect(inner.classes()).toContain('overflow-hidden')
|
||||
expect(inner.classes()).not.toContain('overflow-visible')
|
||||
})
|
||||
|
||||
it('lets the panel overflow once open at mount (defaultOpen)', async () => {
|
||||
const wrapper = mountAccordion({}, ONE_OPEN)
|
||||
await nextTick()
|
||||
expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-visible')
|
||||
})
|
||||
|
||||
it('switches to overflow-visible after the open transition ends', async () => {
|
||||
const wrapper = mountAccordion({}, ONE)
|
||||
await wrapper.find('button[aria-expanded]').trigger('click')
|
||||
await wrapper.find('[role="region"]').trigger('transitionend', {propertyName: 'grid-template-rows'})
|
||||
expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-visible')
|
||||
})
|
||||
|
||||
it('re-clips (overflow-hidden) as soon as it closes', async () => {
|
||||
const wrapper = mountAccordion({}, ONE_OPEN)
|
||||
await nextTick()
|
||||
await wrapper.find('button[aria-expanded]').trigger('click')
|
||||
expect(wrapper.find('[role="region"] > div').classes()).toContain('overflow-hidden')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div v-bind="$attrs" :class="rootClass">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, provide, ref, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import {accordionContextKey, type AccordionItemRegistration} from './context'
|
||||
|
||||
defineOptions({name: 'MalioAccordion', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
mode?: 'single' | 'multiple'
|
||||
modelValue?: string | string[]
|
||||
id?: string
|
||||
groupClass?: string
|
||||
}>(), {
|
||||
mode: 'multiple',
|
||||
modelValue: undefined,
|
||||
id: '',
|
||||
groupClass: '',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string | string[]): void
|
||||
}>()
|
||||
|
||||
const generatedId = useId()
|
||||
const baseId = computed(() => props.id || `malio-accordion-${generatedId}`)
|
||||
const mode = computed(() => props.mode)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localOpen = ref<string[]>([])
|
||||
|
||||
const items = ref<AccordionItemRegistration[]>([])
|
||||
|
||||
const openKeys = computed<string[]>(() => {
|
||||
if (isControlled.value) {
|
||||
const v = props.modelValue
|
||||
if (props.mode === 'single') return v ? [v as string] : []
|
||||
if (Array.isArray(v)) return v
|
||||
return v ? [v as string] : []
|
||||
}
|
||||
return localOpen.value
|
||||
})
|
||||
|
||||
function isOpen(value: string) {
|
||||
return openKeys.value.includes(value)
|
||||
}
|
||||
|
||||
function toggle(value: string) {
|
||||
const current = openKeys.value
|
||||
let next: string[]
|
||||
if (props.mode === 'single') {
|
||||
next = current.includes(value) ? [] : [value]
|
||||
} else {
|
||||
next = current.includes(value)
|
||||
? current.filter(v => v !== value)
|
||||
: [...current, value]
|
||||
}
|
||||
if (!isControlled.value) {
|
||||
localOpen.value = next
|
||||
}
|
||||
emit('update:modelValue', props.mode === 'single' ? (next[0] ?? '') : next)
|
||||
}
|
||||
|
||||
function register(item: AccordionItemRegistration, defaultOpen: boolean) {
|
||||
items.value.push(item)
|
||||
if (defaultOpen && !isControlled.value) {
|
||||
if (props.mode === 'single') {
|
||||
if (localOpen.value.length === 0) localOpen.value = [item.value]
|
||||
} else if (!localOpen.value.includes(item.value)) {
|
||||
localOpen.value.push(item.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function unregister(value: string) {
|
||||
items.value = items.value.filter(i => i.value !== value)
|
||||
}
|
||||
|
||||
// `items` est ordonné par ordre de montage (= ordre du DOM pour des sections
|
||||
// statiques/ajoutées en fin). Si un consommateur réordonne dynamiquement les
|
||||
// items, cet ordre peut diverger de l'ordre visuel ; trier par position DOM
|
||||
// serait alors nécessaire (hors périmètre v1).
|
||||
function focusSibling(value: string, offset: 1 | -1) {
|
||||
const enabled = items.value.filter(i => !i.isDisabled())
|
||||
const idx = enabled.findIndex(i => i.value === value)
|
||||
if (idx === -1) return
|
||||
const next = enabled[(idx + offset + enabled.length) % enabled.length]
|
||||
next?.getHeaderEl()?.focus()
|
||||
}
|
||||
|
||||
const rootClass = computed(() =>
|
||||
twMerge('divide-y divide-black border-y border-black', props.groupClass),
|
||||
)
|
||||
|
||||
provide(accordionContextKey, {
|
||||
mode,
|
||||
baseId,
|
||||
isOpen,
|
||||
toggle,
|
||||
register,
|
||||
unregister,
|
||||
focusSibling,
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import Accordion from './Accordion.vue'
|
||||
import AccordionItem from './AccordionItem.vue'
|
||||
|
||||
function mountInAccordion(slot: string, accordionProps: Record<string, unknown> = {}) {
|
||||
return mount(Accordion, {
|
||||
props: accordionProps,
|
||||
slots: {default: slot},
|
||||
global: {components: {MalioAccordionItem: AccordionItem}},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioAccordionItem', () => {
|
||||
it('throws when used outside MalioAccordion', () => {
|
||||
const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
||||
expect(() => mount(AccordionItem, {props: {title: 'Solo'}})).toThrow(
|
||||
/à l'intérieur de MalioAccordion/,
|
||||
)
|
||||
spy.mockRestore()
|
||||
})
|
||||
|
||||
it('generates an auto id-based value and still toggles when value prop is omitted', async () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="Sans value"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
const header = wrapper.find('button[aria-expanded]')
|
||||
expect(header.attributes('aria-controls')).toMatch(/-panel-malio-accordion-item-/)
|
||||
await header.trigger('click')
|
||||
expect(header.attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('applies headerClass and panelClass overrides via twMerge', () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="T" value="t" header-class="bg-red-500" panel-class="text-lg"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
const header = wrapper.find('button[aria-expanded]')
|
||||
expect(header.classes()).toContain('bg-red-500')
|
||||
expect(wrapper.find('[role="region"]').html()).toContain('text-lg')
|
||||
})
|
||||
|
||||
it('renders a rotating chevron icon', () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="T" value="t"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
expect(wrapper.find('button[aria-expanded] svg').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<button
|
||||
:id="headerId"
|
||||
ref="headerRef"
|
||||
type="button"
|
||||
:class="headerClasses"
|
||||
:aria-expanded="open"
|
||||
:aria-controls="panelId"
|
||||
:disabled="disabled"
|
||||
:aria-disabled="disabled || undefined"
|
||||
@click="onToggle"
|
||||
@keydown.down.prevent="ctx.focusSibling(value, 1)"
|
||||
@keydown.up.prevent="ctx.focusSibling(value, -1)"
|
||||
>
|
||||
<span>{{ title }}</span>
|
||||
<IconifyIcon
|
||||
icon="mdi:chevron-down"
|
||||
:width="24"
|
||||
class="shrink-0 transition-transform duration-200"
|
||||
:class="open ? 'rotate-180' : ''"
|
||||
/>
|
||||
</button>
|
||||
</h3>
|
||||
<div
|
||||
:id="panelId"
|
||||
role="region"
|
||||
:aria-labelledby="headerId"
|
||||
class="grid transition-[grid-template-rows] duration-200 ease-out"
|
||||
:class="open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
|
||||
@transitionend="onPanelTransitionEnd"
|
||||
>
|
||||
<div
|
||||
:class="overflowVisible ? 'overflow-visible' : 'overflow-hidden'"
|
||||
:inert="!open || undefined"
|
||||
>
|
||||
<div :class="panelInnerClass">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, inject, onBeforeUnmount, onMounted, ref, useId, watch} from 'vue'
|
||||
import {Icon as IconifyIcon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import {accordionContextKey} from './context'
|
||||
|
||||
defineOptions({name: 'MalioAccordionItem', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
title: string
|
||||
value?: string
|
||||
defaultOpen?: boolean
|
||||
disabled?: boolean
|
||||
headerClass?: string
|
||||
panelClass?: string
|
||||
}>(), {
|
||||
value: '',
|
||||
defaultOpen: false,
|
||||
disabled: false,
|
||||
headerClass: '',
|
||||
panelClass: '',
|
||||
})
|
||||
|
||||
const ctx = inject(accordionContextKey)
|
||||
if (!ctx) {
|
||||
throw new Error('MalioAccordionItem doit être utilisé à l\'intérieur de MalioAccordion')
|
||||
}
|
||||
|
||||
const generatedId = useId()
|
||||
const value = computed(() => props.value || `malio-accordion-item-${generatedId}`)
|
||||
const headerRef = ref<HTMLButtonElement | null>(null)
|
||||
const headerId = computed(() => `${ctx.baseId.value}-header-${value.value}`)
|
||||
const panelId = computed(() => `${ctx.baseId.value}-panel-${value.value}`)
|
||||
const open = computed(() => ctx.isOpen(value.value))
|
||||
|
||||
// Le panneau garde `overflow-hidden` pendant l'animation (clipping requis par
|
||||
// la transition grid-template-rows), puis passe en `overflow-visible` une fois
|
||||
// complètement ouvert pour qu'un popover enfant (datepicker, select…) ne soit
|
||||
// pas rogné. On re-clippe dès le début de la fermeture.
|
||||
const overflowVisible = ref(false)
|
||||
|
||||
watch(open, (isOpen) => {
|
||||
if (!isOpen) overflowVisible.value = false
|
||||
})
|
||||
|
||||
function onPanelTransitionEnd(e: TransitionEvent) {
|
||||
if (e.propertyName === 'grid-template-rows' && open.value) {
|
||||
overflowVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function onToggle() {
|
||||
if (props.disabled) return
|
||||
ctx.toggle(value.value)
|
||||
}
|
||||
|
||||
const headerClasses = computed(() =>
|
||||
twMerge(
|
||||
'flex w-full items-center justify-between gap-4 px-7 pt-[28px] pb-[20px] text-left font-[600] text-[20px] transition-colors',
|
||||
props.disabled ? 'cursor-not-allowed text-m-muted' : 'cursor-pointer hover:bg-m-surface',
|
||||
props.headerClass,
|
||||
),
|
||||
)
|
||||
|
||||
const panelInnerClass = computed(() => twMerge('px-7 pt-[10px] pb-[20px]', props.panelClass))
|
||||
|
||||
onMounted(() => {
|
||||
ctx.register(
|
||||
{
|
||||
value: value.value,
|
||||
getHeaderEl: () => headerRef.value,
|
||||
isDisabled: () => props.disabled,
|
||||
},
|
||||
props.defaultOpen,
|
||||
)
|
||||
// Ouvert au montage (defaultOpen / contrôlé) : pas d'animation, overflow visible direct.
|
||||
if (open.value) overflowVisible.value = true
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => ctx.unregister(value.value))
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
import type {ComputedRef, InjectionKey} from 'vue'
|
||||
|
||||
export interface AccordionItemRegistration {
|
||||
value: string
|
||||
getHeaderEl: () => HTMLElement | null
|
||||
isDisabled: () => boolean
|
||||
}
|
||||
|
||||
export interface AccordionContext {
|
||||
mode: ComputedRef<'single' | 'multiple'>
|
||||
baseId: ComputedRef<string>
|
||||
isOpen: (value: string) => boolean
|
||||
toggle: (value: string) => void
|
||||
register: (item: AccordionItemRegistration, defaultOpen: boolean) => void
|
||||
unregister: (value: string) => void
|
||||
focusSibling: (value: string, offset: 1 | -1) => void
|
||||
}
|
||||
|
||||
export const accordionContextKey: InjectionKey<AccordionContext> = Symbol('MalioAccordion')
|
||||
@@ -114,7 +114,7 @@ describe('MalioCheckbox', () => {
|
||||
})
|
||||
|
||||
expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('label').classes()).toContain('text-m-danger')
|
||||
expect(wrapper.get('p').text()).toBe('You must accept')
|
||||
})
|
||||
|
||||
@@ -125,7 +125,7 @@ describe('MalioCheckbox', () => {
|
||||
})
|
||||
|
||||
expect(wrapper.get('p').text()).toBe('Invalid')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-error')
|
||||
expect(wrapper.get('p').classes()).toContain('text-m-danger')
|
||||
})
|
||||
|
||||
it('shows success styles and message when there is no error', () => {
|
||||
@@ -139,4 +139,26 @@ describe('MalioCheckbox', () => {
|
||||
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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, useAttrs, useId} from 'vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
|
||||
@@ -80,9 +80,11 @@ const props = withDefaults(
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const localChecked = ref(false)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
|
||||
const isChecked = computed(() => !!props.modelValue)
|
||||
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)
|
||||
@@ -108,9 +110,10 @@ const mergedInputClass = computed(() =>
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'cbx text-black text-lg',
|
||||
'cbx text-lg',
|
||||
isChecked.value ? 'text-black' : 'text-m-muted',
|
||||
disabled.value ? 'cursor-not-allowed text-black/60' : '',
|
||||
hasError.value ? 'text-m-error' : '',
|
||||
hasError.value ? 'text-m-danger' : '',
|
||||
hasSuccess.value ? 'text-m-success' : '',
|
||||
props.labelClass,
|
||||
),
|
||||
@@ -120,7 +123,7 @@ const mergedMessageClass = computed(() =>
|
||||
twMerge(
|
||||
'text-xs',
|
||||
hasError.value
|
||||
? 'text-m-error'
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: 'text-m-muted',
|
||||
@@ -139,6 +142,10 @@ const onChange = (event: Event) => {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isControlled.value) {
|
||||
localChecked.value = target.checked
|
||||
}
|
||||
|
||||
emit('update:modelValue', target.checked)
|
||||
}
|
||||
</script>
|
||||
@@ -161,10 +168,14 @@ const onChange = (event: Event) => {
|
||||
height: 18px;
|
||||
flex: 0 0 18px;
|
||||
transform: scale(1);
|
||||
border: 2px solid rgb(0, 0, 0);
|
||||
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;
|
||||
@@ -200,14 +211,14 @@ const onChange = (event: Event) => {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
.inp-cbx + .cbx.text-m-error span:first-child {
|
||||
border-color: rgb(var(--m-error) / 1);
|
||||
.inp-cbx + .cbx.text-m-danger span:first-child {
|
||||
border-color: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
.cbx.text-m-error span:first-child svg {
|
||||
stroke: rgb(var(--m-error) / 1);
|
||||
.cbx.text-m-danger span:first-child svg {
|
||||
stroke: rgb(var(--m-danger) / 1);
|
||||
}
|
||||
.inp-cbx:checked + .cbx.text-m-error span:first-child {
|
||||
border-color: rgb(var(--m-error) / 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 {
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import Date_ from './Date.vue'
|
||||
|
||||
type DateProps = {
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}
|
||||
|
||||
const DateForTest = Date_ as DefineComponent<DateProps>
|
||||
const mountDate = (props: DateProps = {}) => mount(DateForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDate', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
describe('rendu', () => {
|
||||
it('renders the label and the calendar icon', () => {
|
||||
const wrapper = mountDate({label: 'Date de naissance'})
|
||||
expect(wrapper.get('label').text()).toBe('Date de naissance')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted value in the field', () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('19/05/2026')
|
||||
})
|
||||
|
||||
it('does not show the popover initially', () => {
|
||||
const wrapper = mountDate()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('popover', () => {
|
||||
it('opens on field click', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('opens on the current month when there is no value', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Mai 2026')
|
||||
})
|
||||
|
||||
it('opens on the value month when a value is set', async () => {
|
||||
const wrapper = mountDate({modelValue: '2025-12-25'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('closes on outside mousedown', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('navigation jours', () => {
|
||||
it('goes to the next month on the right chevron', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-next"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Juin 2026')
|
||||
})
|
||||
|
||||
it('rolls December to January and bumps the year', async () => {
|
||||
const wrapper = mountDate({modelValue: '2026-12-15'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-next"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2027')
|
||||
})
|
||||
})
|
||||
|
||||
describe('sélection', () => {
|
||||
it('emits the ISO date and closes on day click', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('bornes min/max', () => {
|
||||
it('disables days outside the range', async () => {
|
||||
const wrapper = mountDate({min: '2026-05-10', max: '2026-05-20'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
|
||||
expect((outside.element as HTMLButtonElement).disabled).toBe(true)
|
||||
await outside.trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('vue mois', () => {
|
||||
it('switches to month view on header toggle', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-toggle"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('navigates the year with chevrons in month view', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-toggle"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-next"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2027')
|
||||
})
|
||||
|
||||
it('returns to day view on month click', async () => {
|
||||
const wrapper = mountDate()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="header-toggle"]').trigger('click')
|
||||
await wrapper.get('[data-test="month"][data-month="0"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(false)
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2026')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('effacement', () => {
|
||||
it('shows the clear button when there is a value', () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
expect(wrapper.find('[data-test="clear"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides the clear button when empty', () => {
|
||||
const wrapper = mountDate()
|
||||
expect(wrapper.find('[data-test="clear"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('emits null and does not open the popover on clear', async () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('états', () => {
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountDate({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when readonly', async () => {
|
||||
const wrapper = mountDate({readonly: true, modelValue: '2026-05-19'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('accessibilité', () => {
|
||||
it('sets aria-invalid and describedby on error', () => {
|
||||
const wrapper = mountDate({error: 'Date requise'})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
expect(input.attributes('aria-invalid')).toBe('true')
|
||||
expect(input.attributes('aria-describedby')).toBeTruthy()
|
||||
expect(wrapper.text()).toContain('Date requise')
|
||||
})
|
||||
})
|
||||
|
||||
describe('synchronisation externe', () => {
|
||||
it('updates the displayed value when modelValue changes', async () => {
|
||||
const wrapper = mountDate({modelValue: '2026-05-19'})
|
||||
await wrapper.setProps({modelValue: '2026-12-25'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('25/12/2026')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="modelValue ?? null"
|
||||
:name="name"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:hint="hint"
|
||||
:error="error"
|
||||
:success="success"
|
||||
:clearable="clearable"
|
||||
:input-class="inputClass"
|
||||
:label-class="labelClass"
|
||||
:group-class="groupClass"
|
||||
v-bind="$attrs"
|
||||
@clear="emit('update:modelValue', null)"
|
||||
>
|
||||
<template #default="{ currentMonth, currentYear, close }">
|
||||
<MonthGrid
|
||||
:month="currentMonth"
|
||||
:year="currentYear"
|
||||
:selected-date="modelValue ?? null"
|
||||
:min="min"
|
||||
:max="max"
|
||||
@select="(iso) => { emit('update:modelValue', iso); close() }"
|
||||
/>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, watch} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
|
||||
|
||||
defineOptions({name: 'MalioDate', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'JJ/MM/AAAA',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val && !isValidIso(val) && import.meta.dev) {
|
||||
console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,155 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateRange from './DateRange.vue'
|
||||
|
||||
type RangeValue = {start: string; end: string}
|
||||
type DateRangeProps = {
|
||||
modelValue?: RangeValue | null
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
}
|
||||
|
||||
const DateRangeForTest = DateRange as DefineComponent<DateRangeProps>
|
||||
const mountRange = (props: DateRangeProps = {}) =>
|
||||
mount(DateRangeForTest, {props, attachTo: document.body})
|
||||
|
||||
const openAndClickDays = async (wrapper: ReturnType<typeof mountRange>, isos: string[]) => {
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
for (const iso of isos) {
|
||||
await wrapper.get(`[data-test="day"][data-iso="${iso}"]`).trigger('click')
|
||||
}
|
||||
}
|
||||
|
||||
describe('MalioDateRange', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('renders the label and calendar icon', () => {
|
||||
const wrapper = mountRange({label: 'Période'})
|
||||
expect(wrapper.get('label').text()).toBe('Période')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted range when modelValue is set', () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('19/05/2026 - 25/05/2026')
|
||||
})
|
||||
|
||||
it('shows an empty field without a value', () => {
|
||||
const wrapper = mountRange()
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('')
|
||||
})
|
||||
|
||||
it('opens on the start month when a range is set', async () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2025-12-10', end: '2025-12-20'}})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('does not emit on the first click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19'])
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('emits the range and closes on the second click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('auto-inverts when the second click is before the first', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-25', '2026-05-19'])
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-25'}])
|
||||
})
|
||||
|
||||
it('allows a single-day range', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19', '2026-05-19'])
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-19', end: '2026-05-19'}])
|
||||
})
|
||||
|
||||
it('restarts a new range on the third click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19', '2026-05-25'])
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-10"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-12"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{start: '2026-05-10', end: '2026-05-12'}])
|
||||
})
|
||||
|
||||
it('previews the range on hover while selecting', async () => {
|
||||
const wrapper = mountRange()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('does not preview before selecting', async () => {
|
||||
const wrapper = mountRange()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-22"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('none')
|
||||
})
|
||||
|
||||
it('marks start, end and in-range roles for a committed range', async () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('start')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-25"]').attributes('data-range-role')).toBe('end')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('cancels an in-progress selection on outside click', async () => {
|
||||
const wrapper = mountRange()
|
||||
await openAndClickDays(wrapper, ['2026-05-19'])
|
||||
document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-19"]').attributes('data-range-role')).toBe('none')
|
||||
})
|
||||
|
||||
it('emits null on clear', async () => {
|
||||
const wrapper = mountRange({modelValue: {start: '2026-05-19', end: '2026-05-25'}})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('disables days outside min/max', async () => {
|
||||
const wrapper = mountRange({min: '2026-05-10', max: '2026-05-20'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
|
||||
expect((outside.element as HTMLButtonElement).disabled).toBe(true)
|
||||
await outside.trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('sets aria-invalid on error', () => {
|
||||
const wrapper = mountRange({error: 'Période requise'})
|
||||
expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.text()).toContain('Période requise')
|
||||
})
|
||||
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountRange({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="validRange?.start ?? null"
|
||||
:name="name"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:hint="hint"
|
||||
:error="error"
|
||||
:success="success"
|
||||
:clearable="clearable"
|
||||
:input-class="inputClass"
|
||||
:label-class="labelClass"
|
||||
:group-class="groupClass"
|
||||
v-bind="$attrs"
|
||||
@clear="onClear"
|
||||
@close="onClose"
|
||||
>
|
||||
<template #default="{ currentMonth, currentYear, close }">
|
||||
<MonthGrid
|
||||
:month="currentMonth"
|
||||
:year="currentYear"
|
||||
:range-start="rangeStart"
|
||||
:range-end="rangeEnd"
|
||||
:preview-date="previewDate"
|
||||
:min="min"
|
||||
:max="max"
|
||||
@select="(iso) => onSelectDay(iso, close)"
|
||||
@hover="onHover"
|
||||
/>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
|
||||
import {normalizeRange, type DateRangeValue} from './composables/dateRange'
|
||||
|
||||
defineOptions({name: 'MalioDateRange', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: DateRangeValue | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'JJ/MM/AAAA',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: DateRangeValue | null): void}>()
|
||||
|
||||
const pendingStart = ref<string | null>(null)
|
||||
const hoverDate = ref<string | null>(null)
|
||||
const isSelecting = computed(() => pendingStart.value !== null)
|
||||
|
||||
const validRange = computed<DateRangeValue | null>(() => {
|
||||
const v = props.modelValue
|
||||
if (v && isValidIso(v.start) && isValidIso(v.end)) return v
|
||||
return null
|
||||
})
|
||||
|
||||
const rangeStart = computed(() =>
|
||||
isSelecting.value ? pendingStart.value : (validRange.value?.start ?? null),
|
||||
)
|
||||
const rangeEnd = computed(() =>
|
||||
isSelecting.value ? null : (validRange.value?.end ?? null),
|
||||
)
|
||||
const previewDate = computed(() => (isSelecting.value ? hoverDate.value : null))
|
||||
|
||||
const displayValue = computed(() => {
|
||||
if (isSelecting.value || !validRange.value) return ''
|
||||
return `${formatIsoToDisplay(validRange.value.start)} - ${formatIsoToDisplay(validRange.value.end)}`
|
||||
})
|
||||
|
||||
const onSelectDay = (iso: string, close: () => void) => {
|
||||
if (pendingStart.value === null) {
|
||||
pendingStart.value = iso
|
||||
hoverDate.value = null
|
||||
return
|
||||
}
|
||||
emit('update:modelValue', normalizeRange(pendingStart.value, iso))
|
||||
pendingStart.value = null
|
||||
hoverDate.value = null
|
||||
close()
|
||||
}
|
||||
|
||||
const onHover = (iso: string | null) => {
|
||||
if (isSelecting.value) hoverDate.value = iso
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
pendingStart.value = null
|
||||
hoverDate.value = null
|
||||
}
|
||||
|
||||
const onClear = () => {
|
||||
emit('update:modelValue', null)
|
||||
pendingStart.value = null
|
||||
hoverDate.value = null
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateTime_ from './DateTime.vue'
|
||||
import MalioTimePicker from '../time/TimePicker.vue'
|
||||
|
||||
type DateTimeProps = {
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}
|
||||
|
||||
const DateTimeForTest = DateTime_ as DefineComponent<DateTimeProps>
|
||||
const mountDateTime = (props: DateTimeProps = {}) =>
|
||||
mount(DateTimeForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDateTime', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19, 9, 5, 0)) // 19 mai 2026, 09:05
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
describe('rendu', () => {
|
||||
it('affiche le label et l\'icône calendrier', () => {
|
||||
const wrapper = mountDateTime({label: 'Rendez-vous'})
|
||||
expect(wrapper.get('label').text()).toBe('Rendez-vous')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('affiche la valeur formatée date + heure dans le champ', () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('20/05/2026 14:30')
|
||||
})
|
||||
})
|
||||
|
||||
describe('popover', () => {
|
||||
it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
|
||||
expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('sélection', () => {
|
||||
it('émet le jour à l\'heure actuelle (si aucune heure choisie) et garde le popover ouvert', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
// heure système figée à 09:05
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:05:00'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('applique l\'heure réglée avant le clic du jour', async () => {
|
||||
const wrapper = mountDateTime()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
|
||||
})
|
||||
|
||||
it('met à jour l\'heure quand une date est déjà choisie', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
|
||||
})
|
||||
|
||||
it('initialise le champ heure depuis la valeur', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
|
||||
})
|
||||
})
|
||||
|
||||
describe('bornes min/max', () => {
|
||||
it('désactive les jours hors bornes (datetime borné sur la date)', async () => {
|
||||
const wrapper = mountDateTime({min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
|
||||
expect((outside.element as HTMLButtonElement).disabled).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('effacement', () => {
|
||||
it('émet null au clic sur la croix', async () => {
|
||||
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
})
|
||||
|
||||
describe('accessibilité', () => {
|
||||
it('positionne aria-invalid et describedby sur erreur', () => {
|
||||
const wrapper = mountDateTime({error: 'Date requise'})
|
||||
const input = wrapper.get('[data-test="date-input"]')
|
||||
expect(input.attributes('aria-invalid')).toBe('true')
|
||||
expect(input.attributes('aria-describedby')).toBeTruthy()
|
||||
expect(wrapper.text()).toContain('Date requise')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="datePart"
|
||||
:name="name"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:hint="hint"
|
||||
:error="error"
|
||||
:success="success"
|
||||
:clearable="clearable"
|
||||
:input-class="inputClass"
|
||||
:label-class="labelClass"
|
||||
:group-class="groupClass"
|
||||
v-bind="$attrs"
|
||||
@clear="onClear"
|
||||
>
|
||||
<template #default="{ currentMonth, currentYear }">
|
||||
<MonthGrid
|
||||
:month="currentMonth"
|
||||
:year="currentYear"
|
||||
:selected-date="datePart"
|
||||
:min="min?.slice(0, 10)"
|
||||
:max="max?.slice(0, 10)"
|
||||
@select="onSelectDay"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<MalioTimePicker
|
||||
:model-value="timeValue || null"
|
||||
label="Heure"
|
||||
:clearable="false"
|
||||
static-popover
|
||||
@update:model-value="onTimeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import MalioTimePicker from '../time/TimePicker.vue'
|
||||
import {formatTime} from '../time/composables/timeFormat'
|
||||
import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
|
||||
|
||||
defineOptions({name: 'MalioDateTime', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'JJ/MM/AAAA HH:MM',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
// pendingTime : heure réglée avant qu'un jour ne soit choisi (sinon on ne peut pas émettre).
|
||||
const pendingTime = ref('')
|
||||
|
||||
const parts = computed(() => splitDateTime(props.modelValue ?? null))
|
||||
const datePart = computed(() => parts.value.date)
|
||||
const displayValue = computed(() => formatIsoDateTimeToDisplay(props.modelValue ?? null))
|
||||
const timeValue = computed(() => parts.value.time || pendingTime.value)
|
||||
|
||||
function onSelectDay(iso: string) {
|
||||
// Si aucune heure n'a été choisie, on prend l'heure actuelle (pas 00:00).
|
||||
// (heure courante au moment du clic)
|
||||
const now = new Date()
|
||||
const time = parts.value.time || pendingTime.value || formatTime(now.getHours(), now.getMinutes())
|
||||
emit('update:modelValue', composeDateTime(iso, time))
|
||||
}
|
||||
|
||||
function onTimeChange(value: string | null) {
|
||||
if (!value) return
|
||||
if (datePart.value) {
|
||||
emit('update:modelValue', composeDateTime(datePart.value, value))
|
||||
}
|
||||
else {
|
||||
pendingTime.value = value
|
||||
}
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
pendingTime.value = ''
|
||||
emit('update:modelValue', null)
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val && !isValidIsoDateTime(val) && import.meta.dev) {
|
||||
console.warn(`[MalioDateTime] modelValue invalide ignoré : "${val}"`)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,122 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import DateWeek from './DateWeek.vue'
|
||||
|
||||
type DateWeekProps = {
|
||||
modelValue?: string | null
|
||||
label?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
min?: string
|
||||
max?: string
|
||||
}
|
||||
|
||||
const DateWeekForTest = DateWeek as DefineComponent<DateWeekProps>
|
||||
const mountWeek = (props: DateWeekProps = {}) =>
|
||||
mount(DateWeekForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioDateWeek', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('renders the label and calendar icon', () => {
|
||||
const wrapper = mountWeek({label: 'Semaine'})
|
||||
expect(wrapper.get('label').text()).toBe('Semaine')
|
||||
expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('displays the formatted week when modelValue is set', () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
|
||||
it('shows an empty field without a value', () => {
|
||||
const wrapper = mountWeek()
|
||||
const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('')
|
||||
})
|
||||
|
||||
it('opens on the month of the selected week', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W01'}) // lundi 2025-12-29
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
|
||||
})
|
||||
|
||||
it('selects the week when a day is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('selects the week when the week number is clicked', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-W21'])
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('previews the whole week on day hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="day"][data-iso="2026-05-20"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-24"]').attributes('data-range-role')).toBe('end')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-20"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('previews the whole week on week-number hover', async () => {
|
||||
const wrapper = mountWeek()
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
await wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').trigger('mouseenter')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-22"]').attributes('data-range-role')).toBe('in-range')
|
||||
})
|
||||
|
||||
it('marks the committed week number', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]').attributes('data-marked')).toBe('true')
|
||||
expect(wrapper.get('[data-test="day"][data-iso="2026-05-18"]').attributes('data-range-role')).toBe('start')
|
||||
})
|
||||
|
||||
it('emits null on clear', async () => {
|
||||
const wrapper = mountWeek({modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('disables a week fully outside min/max', async () => {
|
||||
const wrapper = mountWeek({min: '2026-05-18', max: '2026-05-31'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
const earlyWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-11"]')
|
||||
expect((earlyWeek.element as HTMLButtonElement).disabled).toBe(true)
|
||||
const selectableWeek = wrapper.get('[data-test="week-number"][data-week-start="2026-05-18"]')
|
||||
expect((selectableWeek.element as HTMLButtonElement).disabled).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when disabled', async () => {
|
||||
const wrapper = mountWeek({disabled: true})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('does not open when readonly', async () => {
|
||||
const wrapper = mountWeek({readonly: true, modelValue: '2026-W21'})
|
||||
await wrapper.get('[data-test="date-input"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('sets aria-invalid on error', () => {
|
||||
const wrapper = mountWeek({error: 'Semaine requise'})
|
||||
expect(wrapper.get('[data-test="date-input"]').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.text()).toContain('Semaine requise')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<CalendarField
|
||||
:id="id"
|
||||
:display-value="displayValue"
|
||||
:sync-to="validWeek?.monday ?? null"
|
||||
:name="name"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:hint="hint"
|
||||
:error="error"
|
||||
:success="success"
|
||||
:clearable="clearable"
|
||||
:input-class="inputClass"
|
||||
:label-class="labelClass"
|
||||
:group-class="groupClass"
|
||||
v-bind="$attrs"
|
||||
@clear="onClear"
|
||||
@close="onClose"
|
||||
>
|
||||
<template #default="{ currentMonth, currentYear, close }">
|
||||
<MonthGrid
|
||||
:month="currentMonth"
|
||||
:year="currentYear"
|
||||
:range-start="activeMonday"
|
||||
:range-end="activeSunday"
|
||||
:marked-week-start="validWeek?.monday ?? null"
|
||||
interactive-week-number
|
||||
:min="min"
|
||||
:max="max"
|
||||
@select="(iso) => onSelect(iso, close)"
|
||||
@hover="onHover"
|
||||
/>
|
||||
</template>
|
||||
</CalendarField>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref} from 'vue'
|
||||
import CalendarField from './internal/CalendarField.vue'
|
||||
import MonthGrid from './internal/MonthGrid.vue'
|
||||
import {formatWeekDisplay, isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek} from './composables/dateWeek'
|
||||
|
||||
defineOptions({name: 'MalioDateWeek', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
min?: string
|
||||
max?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'JJ/MM/AAAA',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const hoverWeekStart = ref<string | null>(null)
|
||||
|
||||
const validWeek = computed(() => {
|
||||
if (props.modelValue && isValidIsoWeek(props.modelValue)) {
|
||||
return {monday: isoWeekToMonday(props.modelValue) as string}
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
|
||||
const activeSunday = computed(() => (activeMonday.value ? sundayOf(activeMonday.value) : null))
|
||||
|
||||
const displayValue = computed(() => (validWeek.value ? formatWeekDisplay(props.modelValue as string) : ''))
|
||||
|
||||
const onSelect = (iso: string, close: () => void) => {
|
||||
emit('update:modelValue', toIsoWeek(iso))
|
||||
hoverWeekStart.value = null
|
||||
close()
|
||||
}
|
||||
|
||||
const onHover = (iso: string | null) => {
|
||||
hoverWeekStart.value = iso ? mondayOf(iso) : null
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
hoverWeekStart.value = null
|
||||
}
|
||||
|
||||
const onClear = () => {
|
||||
emit('update:modelValue', null)
|
||||
hoverWeekStart.value = null
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,62 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {formatIsoToDisplay, isDateInRange, isValidIso, parseDisplayToIso} from './dateFormat'
|
||||
|
||||
describe('dateFormat', () => {
|
||||
describe('isValidIso', () => {
|
||||
it('accepts a real ISO date', () => {
|
||||
expect(isValidIso('2026-05-19')).toBe(true)
|
||||
})
|
||||
it('rejects a malformed string', () => {
|
||||
expect(isValidIso('19/05/2026')).toBe(false)
|
||||
expect(isValidIso('2026-5-9')).toBe(false)
|
||||
expect(isValidIso('')).toBe(false)
|
||||
})
|
||||
it('rejects an impossible date', () => {
|
||||
expect(isValidIso('2026-02-30')).toBe(false)
|
||||
expect(isValidIso('2026-13-01')).toBe(false)
|
||||
})
|
||||
it('accepts Feb 29 on a leap year and rejects it otherwise', () => {
|
||||
expect(isValidIso('2024-02-29')).toBe(true)
|
||||
expect(isValidIso('2026-02-29')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatIsoToDisplay', () => {
|
||||
it('formats ISO to DD/MM/YYYY', () => {
|
||||
expect(formatIsoToDisplay('2026-05-19')).toBe('19/05/2026')
|
||||
})
|
||||
it('returns empty string for null or invalid input', () => {
|
||||
expect(formatIsoToDisplay(null)).toBe('')
|
||||
expect(formatIsoToDisplay('nope')).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
describe('parseDisplayToIso', () => {
|
||||
it('parses DD/MM/YYYY to ISO', () => {
|
||||
expect(parseDisplayToIso('19/05/2026')).toBe('2026-05-19')
|
||||
})
|
||||
it('returns null for malformed or impossible input', () => {
|
||||
expect(parseDisplayToIso('2026-05-19')).toBeNull()
|
||||
expect(parseDisplayToIso('31/02/2026')).toBeNull()
|
||||
expect(parseDisplayToIso('')).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('isDateInRange', () => {
|
||||
it('returns true when no bounds are given', () => {
|
||||
expect(isDateInRange('2026-05-19')).toBe(true)
|
||||
})
|
||||
it('respects the min bound (inclusive)', () => {
|
||||
expect(isDateInRange('2026-05-19', '2026-05-19')).toBe(true)
|
||||
expect(isDateInRange('2026-05-18', '2026-05-19')).toBe(false)
|
||||
})
|
||||
it('respects the max bound (inclusive)', () => {
|
||||
expect(isDateInRange('2026-05-19', undefined, '2026-05-19')).toBe(true)
|
||||
expect(isDateInRange('2026-05-20', undefined, '2026-05-19')).toBe(false)
|
||||
})
|
||||
it('respects both bounds', () => {
|
||||
expect(isDateInRange('2026-05-15', '2026-05-10', '2026-05-20')).toBe(true)
|
||||
expect(isDateInRange('2026-05-25', '2026-05-10', '2026-05-20')).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,26 @@
|
||||
export function isValidIso(iso: string): boolean {
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return false
|
||||
const [y, m, d] = iso.split('-').map(Number)
|
||||
const date = new Date(y, m - 1, d)
|
||||
return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d
|
||||
}
|
||||
|
||||
export function formatIsoToDisplay(iso: string | null): string {
|
||||
if (!iso || !isValidIso(iso)) return ''
|
||||
const [y, m, d] = iso.split('-')
|
||||
return `${d}/${m}/${y}`
|
||||
}
|
||||
|
||||
export function parseDisplayToIso(display: string): string | null {
|
||||
const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(display.trim())
|
||||
if (!match) return null
|
||||
const [, dd, mm, yyyy] = match
|
||||
const iso = `${yyyy}-${mm}-${dd}`
|
||||
return isValidIso(iso) ? iso : null
|
||||
}
|
||||
|
||||
export function isDateInRange(iso: string, min?: string, max?: string): boolean {
|
||||
if (min && iso < min) return false
|
||||
if (max && iso > max) return false
|
||||
return true
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {dayRangeRole, normalizeRange, resolveRangeBounds} from './dateRange'
|
||||
|
||||
describe('dateRange', () => {
|
||||
describe('normalizeRange', () => {
|
||||
it('keeps an already ordered pair', () => {
|
||||
expect(normalizeRange('2026-05-19', '2026-05-25')).toEqual({start: '2026-05-19', end: '2026-05-25'})
|
||||
})
|
||||
it('swaps a reversed pair', () => {
|
||||
expect(normalizeRange('2026-05-25', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-25'})
|
||||
})
|
||||
it('handles an equal pair', () => {
|
||||
expect(normalizeRange('2026-05-19', '2026-05-19')).toEqual({start: '2026-05-19', end: '2026-05-19'})
|
||||
})
|
||||
})
|
||||
|
||||
describe('resolveRangeBounds', () => {
|
||||
it('returns null without a start', () => {
|
||||
expect(resolveRangeBounds(null, null, null)).toBeNull()
|
||||
})
|
||||
it('returns a single-point range when only start is set', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', null, null)).toEqual({lo: '2026-05-19', hi: '2026-05-19'})
|
||||
})
|
||||
it('orders start and committed end', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', '2026-05-25', null)).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
|
||||
})
|
||||
it('uses preview when end is not set', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', null, '2026-05-22')).toEqual({lo: '2026-05-19', hi: '2026-05-22'})
|
||||
})
|
||||
it('inverts when preview is before start', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', null, '2026-05-10')).toEqual({lo: '2026-05-10', hi: '2026-05-19'})
|
||||
})
|
||||
it('prioritises committed end over preview', () => {
|
||||
expect(resolveRangeBounds('2026-05-19', '2026-05-25', '2026-05-30')).toEqual({lo: '2026-05-19', hi: '2026-05-25'})
|
||||
})
|
||||
})
|
||||
|
||||
describe('dayRangeRole', () => {
|
||||
const bounds = {lo: '2026-05-19', hi: '2026-05-25'}
|
||||
it('returns none without bounds', () => {
|
||||
expect(dayRangeRole('2026-05-20', null)).toBe('none')
|
||||
})
|
||||
it('returns single when lo === hi and matches', () => {
|
||||
expect(dayRangeRole('2026-05-19', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('single')
|
||||
expect(dayRangeRole('2026-05-20', {lo: '2026-05-19', hi: '2026-05-19'})).toBe('none')
|
||||
})
|
||||
it('returns start, end and in-range', () => {
|
||||
expect(dayRangeRole('2026-05-19', bounds)).toBe('start')
|
||||
expect(dayRangeRole('2026-05-25', bounds)).toBe('end')
|
||||
expect(dayRangeRole('2026-05-22', bounds)).toBe('in-range')
|
||||
})
|
||||
it('returns none outside the bounds', () => {
|
||||
expect(dayRangeRole('2026-05-10', bounds)).toBe('none')
|
||||
expect(dayRangeRole('2026-05-30', bounds)).toBe('none')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,31 @@
|
||||
export type DateRangeValue = {start: string; end: string}
|
||||
|
||||
export function normalizeRange(a: string, b: string): DateRangeValue {
|
||||
return a <= b ? {start: a, end: b} : {start: b, end: a}
|
||||
}
|
||||
|
||||
export function resolveRangeBounds(
|
||||
start: string | null,
|
||||
end: string | null,
|
||||
preview: string | null,
|
||||
): {lo: string; hi: string} | null {
|
||||
if (!start) return null
|
||||
const other = end ?? preview
|
||||
if (!other) return {lo: start, hi: start}
|
||||
return start <= other ? {lo: start, hi: other} : {lo: other, hi: start}
|
||||
}
|
||||
|
||||
export type DayRangeRole = 'none' | 'single' | 'start' | 'end' | 'in-range'
|
||||
|
||||
export function dayRangeRole(
|
||||
iso: string,
|
||||
bounds: {lo: string; hi: string} | null,
|
||||
): DayRangeRole {
|
||||
if (!bounds) return 'none'
|
||||
const {lo, hi} = bounds
|
||||
if (lo === hi) return iso === lo ? 'single' : 'none'
|
||||
if (iso === lo) return 'start'
|
||||
if (iso === hi) return 'end'
|
||||
if (iso > lo && iso < hi) return 'in-range'
|
||||
return 'none'
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {
|
||||
formatWeekDisplay,
|
||||
isValidIsoWeek,
|
||||
isoWeekToMonday,
|
||||
mondayOf,
|
||||
sundayOf,
|
||||
toIsoWeek,
|
||||
} from './dateWeek'
|
||||
|
||||
describe('dateWeek', () => {
|
||||
describe('mondayOf / sundayOf', () => {
|
||||
it('returns Monday and Sunday of a midweek date', () => {
|
||||
expect(mondayOf('2026-05-20')).toBe('2026-05-18') // mercredi
|
||||
expect(sundayOf('2026-05-20')).toBe('2026-05-24')
|
||||
})
|
||||
it('keeps Monday on a Monday', () => {
|
||||
expect(mondayOf('2026-05-18')).toBe('2026-05-18')
|
||||
})
|
||||
it('returns the preceding Monday for a Sunday', () => {
|
||||
expect(mondayOf('2026-05-24')).toBe('2026-05-18')
|
||||
})
|
||||
})
|
||||
|
||||
describe('toIsoWeek', () => {
|
||||
it('returns the ISO week of a date', () => {
|
||||
expect(toIsoWeek('2026-05-20')).toBe('2026-W21')
|
||||
})
|
||||
it('handles year boundaries', () => {
|
||||
expect(toIsoWeek('2026-01-01')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2025-12-31')).toBe('2026-W01')
|
||||
expect(toIsoWeek('2027-01-01')).toBe('2026-W53')
|
||||
})
|
||||
})
|
||||
|
||||
describe('isoWeekToMonday', () => {
|
||||
it('returns the Monday of a week string', () => {
|
||||
expect(isoWeekToMonday('2026-W21')).toBe('2026-05-18')
|
||||
})
|
||||
it('round-trips with toIsoWeek', () => {
|
||||
for (const w of ['2026-W01', '2026-W21', '2026-W53', '2024-W09']) {
|
||||
const monday = isoWeekToMonday(w)
|
||||
expect(monday).not.toBeNull()
|
||||
expect(toIsoWeek(monday as string)).toBe(w)
|
||||
}
|
||||
})
|
||||
it('returns null for invalid input', () => {
|
||||
expect(isoWeekToMonday('2026-21')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W00')).toBeNull()
|
||||
expect(isoWeekToMonday('2026-W54')).toBeNull()
|
||||
expect(isoWeekToMonday('2025-W53')).toBeNull() // 2025 n'a que 52 semaines ISO
|
||||
})
|
||||
})
|
||||
|
||||
describe('isValidIsoWeek', () => {
|
||||
it('accepts a real ISO week', () => {
|
||||
expect(isValidIsoWeek('2026-W21')).toBe(true)
|
||||
})
|
||||
it('rejects malformed or impossible weeks', () => {
|
||||
expect(isValidIsoWeek('2026-21')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W00')).toBe(false)
|
||||
expect(isValidIsoWeek('2026-W54')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatWeekDisplay', () => {
|
||||
it('formats a week as a human label', () => {
|
||||
expect(formatWeekDisplay('2026-W21')).toBe('Semaine 21 (18/05 → 24/05/2026)')
|
||||
})
|
||||
it('returns empty string for invalid input', () => {
|
||||
expect(formatWeekDisplay('2026-W54')).toBe('')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,67 @@
|
||||
import {formatIsoToDisplay} from './dateFormat'
|
||||
|
||||
const parseUtc = (iso: string): Date => {
|
||||
const [y, m, d] = iso.split('-').map(Number)
|
||||
return new Date(Date.UTC(y, m - 1, d))
|
||||
}
|
||||
|
||||
const toIso = (d: Date): string => {
|
||||
const y = d.getUTCFullYear()
|
||||
const m = String(d.getUTCMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getUTCDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
}
|
||||
|
||||
export function mondayOf(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7 // dimanche = 7
|
||||
d.setUTCDate(d.getUTCDate() - (dayNum - 1))
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function sundayOf(iso: string): string {
|
||||
const d = parseUtc(mondayOf(iso))
|
||||
d.setUTCDate(d.getUTCDate() + 6)
|
||||
return toIso(d)
|
||||
}
|
||||
|
||||
export function toIsoWeek(iso: string): string {
|
||||
const d = parseUtc(iso)
|
||||
const dayNum = d.getUTCDay() || 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - dayNum) // jeudi de la semaine
|
||||
const isoYear = d.getUTCFullYear()
|
||||
const yearStart = new Date(Date.UTC(isoYear, 0, 1))
|
||||
const week = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
|
||||
return `${isoYear}-W${String(week).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function isoWeekToMonday(week: string): string | null {
|
||||
const m = /^(\d{4})-W(\d{2})$/.exec(week)
|
||||
if (!m) return null
|
||||
const year = Number(m[1])
|
||||
const w = Number(m[2])
|
||||
if (w < 1 || w > 53) return null
|
||||
// Lundi de la semaine 1 = lundi de la semaine contenant le 4 janvier
|
||||
const jan4 = new Date(Date.UTC(year, 0, 4))
|
||||
const jan4Day = jan4.getUTCDay() || 7
|
||||
const monday = new Date(jan4)
|
||||
monday.setUTCDate(jan4.getUTCDate() - (jan4Day - 1) + (w - 1) * 7)
|
||||
const iso = toIso(monday)
|
||||
// Garde-fou : la semaine 53 n'existe pas pour toutes les années
|
||||
if (toIsoWeek(iso) !== week) return null
|
||||
return iso
|
||||
}
|
||||
|
||||
export function isValidIsoWeek(week: string): boolean {
|
||||
return isoWeekToMonday(week) !== null
|
||||
}
|
||||
|
||||
export function formatWeekDisplay(week: string): string {
|
||||
const monday = isoWeekToMonday(week)
|
||||
if (!monday) return ''
|
||||
const sunday = sundayOf(monday)
|
||||
const w = Number(week.slice(6))
|
||||
const startDdMm = formatIsoToDisplay(monday).slice(0, 5) // "18/05"
|
||||
const endFull = formatIsoToDisplay(sunday) // "24/05/2026"
|
||||
return `Semaine ${w} (${startDdMm} → ${endFull})`
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {
|
||||
composeDateTime,
|
||||
formatIsoDateTimeToDisplay,
|
||||
isValidIsoDateTime,
|
||||
splitDateTime,
|
||||
} from './datetimeFormat'
|
||||
|
||||
describe('datetimeFormat', () => {
|
||||
describe('isValidIsoDateTime', () => {
|
||||
it('accepte un datetime ISO complet valide', () => {
|
||||
expect(isValidIsoDateTime('2026-05-20T14:30:00')).toBe(true)
|
||||
expect(isValidIsoDateTime('2026-01-01T00:00:00')).toBe(true)
|
||||
expect(isValidIsoDateTime('2026-12-31T23:59:59')).toBe(true)
|
||||
})
|
||||
|
||||
it('rejette une date seule, des composants invalides ou une chaîne vide', () => {
|
||||
expect(isValidIsoDateTime('2026-05-20')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-13-01T00:00:00')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T24:00:00')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T14:60:00')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T14:30:60')).toBe(false)
|
||||
expect(isValidIsoDateTime('2026-05-20T14:30')).toBe(false)
|
||||
expect(isValidIsoDateTime('')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatIsoDateTimeToDisplay', () => {
|
||||
it('formate un datetime valide en JJ/MM/AAAA HH:MM', () => {
|
||||
expect(formatIsoDateTimeToDisplay('2026-05-20T14:30:00')).toBe('20/05/2026 14:30')
|
||||
})
|
||||
|
||||
it('renvoie une chaîne vide pour nul ou invalide', () => {
|
||||
expect(formatIsoDateTimeToDisplay(null)).toBe('')
|
||||
expect(formatIsoDateTimeToDisplay('2026-05-20')).toBe('')
|
||||
expect(formatIsoDateTimeToDisplay('nope')).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
describe('splitDateTime', () => {
|
||||
it('découpe un datetime valide', () => {
|
||||
expect(splitDateTime('2026-05-20T14:30:00')).toEqual({date: '2026-05-20', time: '14:30'})
|
||||
})
|
||||
|
||||
it('renvoie date null et time vide pour nul, date seule ou invalide', () => {
|
||||
expect(splitDateTime(null)).toEqual({date: null, time: ''})
|
||||
expect(splitDateTime('2026-05-20')).toEqual({date: null, time: ''})
|
||||
expect(splitDateTime('nope')).toEqual({date: null, time: ''})
|
||||
})
|
||||
})
|
||||
|
||||
describe('composeDateTime', () => {
|
||||
it('recompose un datetime ISO avec secondes à 00', () => {
|
||||
expect(composeDateTime('2026-05-20', '14:30')).toBe('2026-05-20T14:30:00')
|
||||
})
|
||||
|
||||
it('utilise 00:00 quand l\'heure est vide', () => {
|
||||
expect(composeDateTime('2026-05-20', '')).toBe('2026-05-20T00:00:00')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,33 @@
|
||||
import {isValidIso} from './dateFormat'
|
||||
|
||||
const DATETIME_RE = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2}):(\d{2})$/
|
||||
|
||||
export function isValidIsoDateTime(s: string): boolean {
|
||||
const m = DATETIME_RE.exec(s)
|
||||
if (!m) return false
|
||||
const [, date, hh, mm, ss] = m
|
||||
if (!isValidIso(date)) return false
|
||||
const h = Number(hh)
|
||||
const min = Number(mm)
|
||||
const sec = Number(ss)
|
||||
return h >= 0 && h <= 23 && min >= 0 && min <= 59 && sec >= 0 && sec <= 59
|
||||
}
|
||||
|
||||
export function formatIsoDateTimeToDisplay(s: string | null): string {
|
||||
if (!s || !isValidIsoDateTime(s)) return ''
|
||||
const [date, time] = s.split('T')
|
||||
const [y, mo, d] = date.split('-')
|
||||
const [hh, mm] = time.split(':')
|
||||
return `${d}/${mo}/${y} ${hh}:${mm}`
|
||||
}
|
||||
|
||||
export function splitDateTime(s: string | null): {date: string | null; time: string} {
|
||||
if (!s || !isValidIsoDateTime(s)) return {date: null, time: ''}
|
||||
const [date, time] = s.split('T')
|
||||
return {date, time: time.slice(0, 5)}
|
||||
}
|
||||
|
||||
export function composeDateTime(date: string, time: string): string {
|
||||
const t = time || '00:00'
|
||||
return `${date}T${t}:00`
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {defineComponent, h, ref} from 'vue'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {useCalendarPopover} from './useCalendarPopover'
|
||||
|
||||
const mountHost = () => {
|
||||
const api: ReturnType<typeof useCalendarPopover> = {} as never
|
||||
const Host = defineComponent({
|
||||
setup() {
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
Object.assign(api, useCalendarPopover(root))
|
||||
return () => h('div', {ref: root}, 'host')
|
||||
},
|
||||
})
|
||||
const wrapper = mount(Host, {attachTo: document.body})
|
||||
return {wrapper, api}
|
||||
}
|
||||
|
||||
describe('useCalendarPopover', () => {
|
||||
it('starts closed in days view', () => {
|
||||
const {api} = mountHost()
|
||||
expect(api.isOpen.value).toBe(false)
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('open() opens in days view', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
expect(api.isOpen.value).toBe(true)
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('toggleView() switches between days and months', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
api.toggleView()
|
||||
expect(api.viewMode.value).toBe('months')
|
||||
api.toggleView()
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('close() resets isOpen and viewMode', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
api.toggleView()
|
||||
api.close()
|
||||
expect(api.isOpen.value).toBe(false)
|
||||
expect(api.viewMode.value).toBe('days')
|
||||
})
|
||||
|
||||
it('closes on outside mousedown', () => {
|
||||
const {api} = mountHost()
|
||||
api.open()
|
||||
document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
expect(api.isOpen.value).toBe(false)
|
||||
})
|
||||
|
||||
it('stays open on inside mousedown', () => {
|
||||
const {wrapper, api} = mountHost()
|
||||
api.open()
|
||||
wrapper.element.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
|
||||
expect(api.isOpen.value).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,28 @@
|
||||
import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
|
||||
|
||||
export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
|
||||
const isOpen = ref(false)
|
||||
const viewMode = ref<'days' | 'months'>('days')
|
||||
|
||||
const open = () => {
|
||||
isOpen.value = true
|
||||
viewMode.value = 'days'
|
||||
}
|
||||
const close = () => {
|
||||
isOpen.value = false
|
||||
viewMode.value = 'days'
|
||||
}
|
||||
const toggleView = () => {
|
||||
viewMode.value = viewMode.value === 'days' ? 'months' : 'days'
|
||||
}
|
||||
|
||||
const onMouseDown = (event: MouseEvent) => {
|
||||
if (!isOpen.value || !rootRef.value) return
|
||||
if (!rootRef.value.contains(event.target as Node)) close()
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onMouseDown))
|
||||
onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
|
||||
|
||||
return {isOpen, viewMode, open, close, toggleView}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {ref} from 'vue'
|
||||
import {useCalendarView} from './useCalendarView'
|
||||
|
||||
describe('useCalendarView', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('initialises to the current month and year', () => {
|
||||
const {currentMonth, currentYear} = useCalendarView(ref('days'))
|
||||
expect(currentMonth.value).toBe(4)
|
||||
expect(currentYear.value).toBe(2026)
|
||||
})
|
||||
|
||||
it('goToNext advances the month in days view', () => {
|
||||
const {currentMonth, goToNext} = useCalendarView(ref('days'))
|
||||
goToNext()
|
||||
expect(currentMonth.value).toBe(5)
|
||||
})
|
||||
|
||||
it('rolls December to January and bumps the year', () => {
|
||||
const {currentMonth, currentYear, goToNext} = useCalendarView(ref('days'))
|
||||
currentMonth.value = 11
|
||||
goToNext()
|
||||
expect(currentMonth.value).toBe(0)
|
||||
expect(currentYear.value).toBe(2027)
|
||||
})
|
||||
|
||||
it('rolls January to December backwards', () => {
|
||||
const {currentMonth, currentYear, goToPrev} = useCalendarView(ref('days'))
|
||||
currentMonth.value = 0
|
||||
goToPrev()
|
||||
expect(currentMonth.value).toBe(11)
|
||||
expect(currentYear.value).toBe(2025)
|
||||
})
|
||||
|
||||
it('navigates the year in months view', () => {
|
||||
const {currentYear, goToNext, goToPrev} = useCalendarView(ref('months'))
|
||||
goToNext()
|
||||
expect(currentYear.value).toBe(2027)
|
||||
goToPrev()
|
||||
expect(currentYear.value).toBe(2026)
|
||||
})
|
||||
|
||||
it('selectMonth sets the current month', () => {
|
||||
const {currentMonth, selectMonth} = useCalendarView(ref('days'))
|
||||
selectMonth(0)
|
||||
expect(currentMonth.value).toBe(0)
|
||||
})
|
||||
|
||||
it('syncToIso sets month/year from a valid ISO', () => {
|
||||
const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
|
||||
syncToIso('2025-12-25')
|
||||
expect(currentMonth.value).toBe(11)
|
||||
expect(currentYear.value).toBe(2025)
|
||||
})
|
||||
|
||||
it('syncToIso falls back to today for null/invalid', () => {
|
||||
const {currentMonth, currentYear, syncToIso} = useCalendarView(ref('days'))
|
||||
syncToIso('2025-12-25')
|
||||
syncToIso(null)
|
||||
expect(currentMonth.value).toBe(4)
|
||||
expect(currentYear.value).toBe(2026)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,51 @@
|
||||
import {ref, type Ref} from 'vue'
|
||||
import {isValidIso} from './dateFormat'
|
||||
|
||||
export function useCalendarView(viewMode: Ref<'days' | 'months'>) {
|
||||
const today = new Date()
|
||||
const currentMonth = ref(today.getMonth())
|
||||
const currentYear = ref(today.getFullYear())
|
||||
|
||||
const goToPrev = () => {
|
||||
if (viewMode.value === 'months') {
|
||||
currentYear.value -= 1
|
||||
return
|
||||
}
|
||||
if (currentMonth.value === 0) {
|
||||
currentMonth.value = 11
|
||||
currentYear.value -= 1
|
||||
} else {
|
||||
currentMonth.value -= 1
|
||||
}
|
||||
}
|
||||
|
||||
const goToNext = () => {
|
||||
if (viewMode.value === 'months') {
|
||||
currentYear.value += 1
|
||||
return
|
||||
}
|
||||
if (currentMonth.value === 11) {
|
||||
currentMonth.value = 0
|
||||
currentYear.value += 1
|
||||
} else {
|
||||
currentMonth.value += 1
|
||||
}
|
||||
}
|
||||
|
||||
const selectMonth = (m: number) => {
|
||||
currentMonth.value = m
|
||||
}
|
||||
|
||||
const syncToIso = (iso: string | null) => {
|
||||
if (iso && isValidIso(iso)) {
|
||||
currentMonth.value = Number(iso.slice(5, 7)) - 1
|
||||
currentYear.value = Number(iso.slice(0, 4))
|
||||
} else {
|
||||
const now = new Date()
|
||||
currentMonth.value = now.getMonth()
|
||||
currentYear.value = now.getFullYear()
|
||||
}
|
||||
}
|
||||
|
||||
return {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
||||
import {ref} from 'vue'
|
||||
import {useMonthMatrix} from './useMonthMatrix'
|
||||
|
||||
describe('useMonthMatrix', () => {
|
||||
it('always produces 6 weeks of 7 days', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai 2026
|
||||
expect(weeks.value).toHaveLength(6)
|
||||
weeks.value.forEach(week => expect(week.days).toHaveLength(7))
|
||||
})
|
||||
|
||||
it('starts every week on a Monday', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026))
|
||||
weeks.value.forEach(week => {
|
||||
const first = new Date(`${week.days[0].isoDate}T00:00:00`)
|
||||
expect(first.getDay()).toBe(1) // 1 = lundi
|
||||
})
|
||||
})
|
||||
|
||||
it('flags exactly the days of the current month', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026)) // mai = 31 jours
|
||||
const currentMonthDays = weeks.value
|
||||
.flatMap(w => w.days)
|
||||
.filter(d => d.isCurrentMonth)
|
||||
expect(currentMonthDays).toHaveLength(31)
|
||||
expect(currentMonthDays.every(d => d.isoDate.startsWith('2026-05'))).toBe(true)
|
||||
})
|
||||
|
||||
it('handles leap year February (29 days)', () => {
|
||||
const {weeks} = useMonthMatrix(ref(1), ref(2024)) // février 2024
|
||||
const days = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth)
|
||||
expect(days).toHaveLength(29)
|
||||
})
|
||||
|
||||
it('assigns ISO week 1 to the week containing Jan 4th', () => {
|
||||
const {weeks} = useMonthMatrix(ref(0), ref(2026)) // janvier 2026
|
||||
const weekWithJan4 = weeks.value.find(w =>
|
||||
w.days.some(d => d.isoDate === '2026-01-04'),
|
||||
)
|
||||
expect(weekWithJan4?.weekNumber).toBe(1)
|
||||
})
|
||||
|
||||
it('reacts to month/year changes', () => {
|
||||
const month = ref(4)
|
||||
const year = ref(2026)
|
||||
const {weeks} = useMonthMatrix(month, year)
|
||||
const mayCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
|
||||
month.value = 1 // février
|
||||
year.value = 2024
|
||||
const febCount = weeks.value.flatMap(w => w.days).filter(d => d.isCurrentMonth).length
|
||||
expect(mayCount).toBe(31)
|
||||
expect(febCount).toBe(29)
|
||||
})
|
||||
|
||||
describe('isToday', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers()
|
||||
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
|
||||
})
|
||||
afterEach(() => vi.useRealTimers())
|
||||
|
||||
it('flags only today', () => {
|
||||
const {weeks} = useMonthMatrix(ref(4), ref(2026))
|
||||
const todays = weeks.value.flatMap(w => w.days).filter(d => d.isToday)
|
||||
expect(todays).toHaveLength(1)
|
||||
expect(todays[0].isoDate).toBe('2026-05-19')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,60 @@
|
||||
import {computed, type ComputedRef, type Ref} from 'vue'
|
||||
|
||||
export type DayCell = {
|
||||
isoDate: string
|
||||
day: number
|
||||
isCurrentMonth: boolean
|
||||
isToday: boolean
|
||||
}
|
||||
export type WeekRow = {
|
||||
weekNumber: number
|
||||
days: DayCell[]
|
||||
}
|
||||
|
||||
const toIso = (d: Date): string => {
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${day}`
|
||||
}
|
||||
|
||||
const isoWeek = (d: Date): number => {
|
||||
const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
|
||||
const dayNum = target.getUTCDay() || 7 // dimanche = 7
|
||||
target.setUTCDate(target.getUTCDate() + 4 - dayNum) // jeudi de la semaine
|
||||
const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
|
||||
return Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
|
||||
}
|
||||
|
||||
export function useMonthMatrix(
|
||||
month: Ref<number>,
|
||||
year: Ref<number>,
|
||||
): {weeks: ComputedRef<WeekRow[]>} {
|
||||
const weeks = computed<WeekRow[]>(() => {
|
||||
const todayIso = toIso(new Date())
|
||||
const first = new Date(year.value, month.value, 1)
|
||||
// recule jusqu'au lundi (getDay : 0 = dimanche)
|
||||
const offset = (first.getDay() + 6) % 7
|
||||
const start = new Date(year.value, month.value, 1 - offset)
|
||||
|
||||
const rows: WeekRow[] = []
|
||||
const cursor = new Date(start)
|
||||
for (let w = 0; w < 6; w++) {
|
||||
const days: DayCell[] = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const iso = toIso(cursor)
|
||||
days.push({
|
||||
isoDate: iso,
|
||||
day: cursor.getDate(),
|
||||
isCurrentMonth: cursor.getMonth() === month.value,
|
||||
isToday: iso === todayIso,
|
||||
})
|
||||
cursor.setDate(cursor.getDate() + 1)
|
||||
}
|
||||
rows.push({weekNumber: isoWeek(new Date(`${days[0].isoDate}T00:00:00`)), days})
|
||||
}
|
||||
return rows
|
||||
})
|
||||
|
||||
return {weeks}
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="root"
|
||||
:class="mergedGroupClass"
|
||||
>
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
data-test="date-input"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="displayValue"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="dialog"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@click="onFieldClick"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<button
|
||||
v-if="showClear"
|
||||
type="button"
|
||||
data-test="clear"
|
||||
class="text-m-muted hover:text-m-primary"
|
||||
aria-label="Effacer la date"
|
||||
@click.stop="emit('clear')"
|
||||
>
|
||||
<Icon
|
||||
icon="mdi:close"
|
||||
:width="16"
|
||||
:height="16"
|
||||
/>
|
||||
</button>
|
||||
<Icon
|
||||
data-test="calendar-icon"
|
||||
icon="mdi:calendar-blank"
|
||||
:width="24"
|
||||
:height="24"
|
||||
:class="iconStateClass"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isOpen"
|
||||
data-test="popover"
|
||||
role="dialog"
|
||||
class="absolute left-0 right-0 top-full z-20 box-border w-full rounded-b-md bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<CalendarHeader
|
||||
:view-mode="viewMode"
|
||||
:current-month="currentMonth"
|
||||
:current-year="currentYear"
|
||||
@prev="goToPrev"
|
||||
@next="goToNext"
|
||||
@toggle-view="toggleView"
|
||||
/>
|
||||
<slot
|
||||
v-if="viewMode === 'days'"
|
||||
:current-month="currentMonth"
|
||||
:current-year="currentYear"
|
||||
:close="closePopover"
|
||||
/>
|
||||
<MonthPicker
|
||||
v-else
|
||||
:selected-month="currentMonth"
|
||||
@select="onSelectMonth"
|
||||
/>
|
||||
</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, ref, useAttrs, useId, watch} from 'vue'
|
||||
import {Icon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import CalendarHeader from './CalendarHeader.vue'
|
||||
import MonthPicker from './MonthPicker.vue'
|
||||
import {useCalendarPopover} from '../composables/useCalendarPopover'
|
||||
import {useCalendarView} from '../composables/useCalendarView'
|
||||
|
||||
defineOptions({name: 'MalioCalendarField', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
displayValue: string
|
||||
syncTo: string | null
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
placeholder: 'JJ/MM/AAAA',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
clearable: true,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'clear' | 'close'): void}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
|
||||
const {isOpen, viewMode, open, close: closePopover, toggleView} = useCalendarPopover(root)
|
||||
const {currentMonth, currentYear, goToPrev, goToNext, selectMonth, syncToIso} = useCalendarView(viewMode)
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-date-${generatedId}`)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const isFilled = computed(() => props.displayValue.length > 0)
|
||||
const showClear = computed(() =>
|
||||
props.clearable && isFilled.value && !props.disabled && !props.readonly,
|
||||
)
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
watch(isOpen, (value) => {
|
||||
if (!value) emit('close')
|
||||
})
|
||||
|
||||
const onFieldClick = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
if (isOpen.value) {
|
||||
closePopover()
|
||||
return
|
||||
}
|
||||
syncToIso(props.syncTo)
|
||||
open()
|
||||
}
|
||||
|
||||
watch(() => props.syncTo, (value) => {
|
||||
if (isOpen.value) syncToIso(value)
|
||||
})
|
||||
|
||||
const onSelectMonth = (m: number) => {
|
||||
selectMonth(m)
|
||||
toggleView()
|
||||
}
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative flex h-12 w-full items-center', props.groupClass),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
|
||||
hasError.value
|
||||
? 'border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
isOpen.value ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left font-medium text-sm transition-transform duration-150',
|
||||
(isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: isOpen.value
|
||||
? 'text-m-primary'
|
||||
: 'peer-placeholder-shown:text-m-muted text-black',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const iconStateClass = 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'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
|
||||
<button
|
||||
type="button"
|
||||
data-test="header-prev"
|
||||
class="ml-2 flex self-start rounded"
|
||||
:aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
|
||||
@click="emit('prev')"
|
||||
>
|
||||
<Icon
|
||||
icon="mdi:chevron-left"
|
||||
:width="25"
|
||||
:height="25"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-test="header-toggle"
|
||||
class="flex gap-1 rounded text-base font-medium"
|
||||
@click="emit('toggle-view')"
|
||||
>
|
||||
<span class="mt-[2px]">{{ label }}</span>
|
||||
<Icon
|
||||
icon="mdi:chevron-down"
|
||||
:width="25"
|
||||
:height="25"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-test="header-next"
|
||||
class="mr-2 flex self-start rounded"
|
||||
:aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
|
||||
@click="emit('next')"
|
||||
>
|
||||
<Icon
|
||||
icon="mdi:chevron-right"
|
||||
:width="25"
|
||||
:height="25"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed} from 'vue'
|
||||
import {Icon} from '@iconify/vue'
|
||||
|
||||
defineOptions({name: 'MalioDateCalendarHeader'})
|
||||
|
||||
const props = defineProps<{
|
||||
viewMode: 'days' | 'months'
|
||||
currentMonth: number
|
||||
currentYear: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'prev' | 'next' | 'toggle-view'): void
|
||||
}>()
|
||||
|
||||
const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
|
||||
|
||||
const label = computed(() => {
|
||||
const name = monthsLong[props.currentMonth]
|
||||
return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div
|
||||
data-test="month-grid"
|
||||
@mouseleave="emit('hover', null)"
|
||||
>
|
||||
<div class="grid grid-cols-[auto_repeat(7,minmax(0,1fr))]">
|
||||
<div class="mr-[12px] flex h-8 w-[35px] items-center justify-center text-[14px] font-medium opacity-[60%]">
|
||||
S
|
||||
</div>
|
||||
<div
|
||||
v-for="d in dayLabels"
|
||||
:key="d"
|
||||
class="flex h-8 items-center justify-center text-[14px] font-medium opacity-[60%]"
|
||||
>
|
||||
{{ d }}
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-for="(week, wIndex) in weeks"
|
||||
:key="week.days[0].isoDate"
|
||||
>
|
||||
<component
|
||||
:is="interactiveWeekNumber ? 'button' : 'div'"
|
||||
data-test="week-number"
|
||||
:data-week-start="week.days[0].isoDate"
|
||||
:data-marked="markedWeekStart === week.days[0].isoDate"
|
||||
:type="interactiveWeekNumber ? 'button' : undefined"
|
||||
:disabled="interactiveWeekNumber ? !weekSelectable(week) : undefined"
|
||||
class="mr-[12px] flex h-[45px] w-[35px] shrink-0 items-center justify-center p-[10px] text-sm"
|
||||
:class="[
|
||||
weekNumberClass(week),
|
||||
wIndex === 0 ? 'rounded-t-md' : '',
|
||||
wIndex === weeks.length - 1 ? 'rounded-b-md' : '',
|
||||
]"
|
||||
@click="onWeekNumberClick(week)"
|
||||
@mouseenter="onWeekNumberHover(week)"
|
||||
>
|
||||
{{ week.weekNumber }}
|
||||
</component>
|
||||
<button
|
||||
v-for="cell in week.days"
|
||||
:key="cell.isoDate"
|
||||
type="button"
|
||||
data-test="day"
|
||||
:data-iso="cell.isoDate"
|
||||
:data-range-role="roleOf(cell)"
|
||||
:disabled="!inRange(cell.isoDate)"
|
||||
:aria-label="ariaLabel(cell)"
|
||||
:aria-disabled="!inRange(cell.isoDate)"
|
||||
class="relative flex h-[45px] w-full items-center justify-center"
|
||||
:class="inRange(cell.isoDate) ? 'cursor-pointer' : 'cursor-not-allowed'"
|
||||
@click="onSelect(cell.isoDate)"
|
||||
@mouseenter="emit('hover', cell.isoDate)"
|
||||
>
|
||||
<span
|
||||
v-if="roleOf(cell) === 'in-range'"
|
||||
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 bg-m-primary-light"
|
||||
/>
|
||||
<span
|
||||
v-else-if="roleOf(cell) === 'start'"
|
||||
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-l-full bg-m-primary-light"
|
||||
/>
|
||||
<span
|
||||
v-else-if="roleOf(cell) === 'end'"
|
||||
class="absolute inset-x-0 top-1/2 h-10 -translate-y-1/2 rounded-r-full bg-m-primary-light"
|
||||
/>
|
||||
<span
|
||||
class="relative flex h-10 w-10 items-center justify-center rounded-full text-sm font-medium transition-colors duration-100"
|
||||
:class="cellClass(cell)"
|
||||
>
|
||||
{{ cell.day }}
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, toRef} from 'vue'
|
||||
import {useMonthMatrix, type DayCell, type WeekRow} from '../composables/useMonthMatrix'
|
||||
import {isDateInRange} from '../composables/dateFormat'
|
||||
import {dayRangeRole, resolveRangeBounds, type DayRangeRole} from '../composables/dateRange'
|
||||
|
||||
defineOptions({name: 'MalioDateMonthGrid'})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
month: number
|
||||
year: number
|
||||
selectedDate?: string | null
|
||||
rangeStart?: string | null
|
||||
rangeEnd?: string | null
|
||||
previewDate?: string | null
|
||||
interactiveWeekNumber?: boolean
|
||||
markedWeekStart?: string | null
|
||||
min?: string
|
||||
max?: string
|
||||
}>(),
|
||||
{
|
||||
selectedDate: null,
|
||||
rangeStart: undefined,
|
||||
rangeEnd: undefined,
|
||||
previewDate: undefined,
|
||||
interactiveWeekNumber: false,
|
||||
markedWeekStart: null,
|
||||
min: undefined,
|
||||
max: undefined,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'select', iso: string): void
|
||||
(e: 'hover', iso: string | null): void
|
||||
}>()
|
||||
|
||||
const dayLabels = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
|
||||
const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
|
||||
|
||||
const {weeks} = useMonthMatrix(toRef(props, 'month'), toRef(props, 'year'))
|
||||
|
||||
const inRange = (iso: string) => isDateInRange(iso, props.min, props.max)
|
||||
|
||||
const weekSelectable = (week: WeekRow) => week.days.some(d => inRange(d.isoDate))
|
||||
|
||||
const weekNumberClass = (week: WeekRow) => {
|
||||
if (props.markedWeekStart === week.days[0].isoDate) return 'bg-m-primary text-white'
|
||||
const parts = ['bg-m-primary-light']
|
||||
parts.push(week.days.some(d => d.isToday) ? 'text-black' : 'text-black/60')
|
||||
if (props.interactiveWeekNumber && weekSelectable(week)) parts.push('cursor-pointer')
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
const onWeekNumberClick = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('select', week.days[0].isoDate)
|
||||
}
|
||||
|
||||
const onWeekNumberHover = (week: WeekRow) => {
|
||||
if (!props.interactiveWeekNumber || !weekSelectable(week)) return
|
||||
emit('hover', week.days[0].isoDate)
|
||||
}
|
||||
|
||||
const isRangeMode = computed(() => props.rangeStart !== undefined)
|
||||
const bounds = computed(() =>
|
||||
isRangeMode.value
|
||||
? resolveRangeBounds(props.rangeStart ?? null, props.rangeEnd ?? null, props.previewDate ?? null)
|
||||
: null,
|
||||
)
|
||||
|
||||
const roleOf = (cell: DayCell): DayRangeRole => {
|
||||
if (isRangeMode.value) return dayRangeRole(cell.isoDate, bounds.value)
|
||||
return props.selectedDate === cell.isoDate ? 'single' : 'none'
|
||||
}
|
||||
|
||||
const ariaLabel = (cell: DayCell) => {
|
||||
const [, m, d] = cell.isoDate.split('-')
|
||||
return `${Number(d)} ${monthsLong[Number(m) - 1]} ${cell.isoDate.slice(0, 4)}`
|
||||
}
|
||||
|
||||
const cellClass = (cell: DayCell) => {
|
||||
if (!inRange(cell.isoDate)) return 'text-m-muted/30'
|
||||
const role = roleOf(cell)
|
||||
if (role === 'start' || role === 'end' || role === 'single') return 'bg-m-primary text-white'
|
||||
if (role === 'in-range') return 'text-black'
|
||||
const parts = ['hover:bg-m-primary/10']
|
||||
if (cell.isToday) parts.push('border border-m-primary text-m-primary')
|
||||
else if (cell.isCurrentMonth) parts.push('text-black')
|
||||
else parts.push('opacity-[60%]')
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
const onSelect = (iso: string) => {
|
||||
if (!inRange(iso)) return
|
||||
emit('select', iso)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div
|
||||
data-test="month-picker"
|
||||
class="grid grid-cols-3 gap-3"
|
||||
>
|
||||
<button
|
||||
v-for="(name, index) in months"
|
||||
:key="name"
|
||||
type="button"
|
||||
data-test="month"
|
||||
:data-month="index"
|
||||
class="flex h-[45px] w-full items-center justify-center"
|
||||
@click="emit('select', index)"
|
||||
>
|
||||
<span
|
||||
class="flex h-[30px] w-full items-center justify-center rounded text-sm transition-colors duration-100"
|
||||
:class="index === selectedMonth
|
||||
? 'bg-m-primary text-white'
|
||||
: 'text-black hover:bg-m-primary/10'"
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({name: 'MalioDateMonthPicker'})
|
||||
|
||||
defineProps<{selectedMonth?: number}>()
|
||||
|
||||
const emit = defineEmits<{(e: 'select', month: number): void}>()
|
||||
|
||||
const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
|
||||
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
|
||||
</script>
|
||||
@@ -1,15 +1,22 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
import { enableAutoUnmount, 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
|
||||
modelValue?: boolean
|
||||
side?: 'right' | 'left'
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
drawerClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}
|
||||
|
||||
const DrawerForTest = Drawer as DefineComponent<DrawerProps>
|
||||
@@ -18,64 +25,38 @@ function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>)
|
||||
return mount(DrawerForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: {
|
||||
stubs: {
|
||||
Teleport: true,
|
||||
},
|
||||
},
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioDrawer', () => {
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
afterEach(() => {
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
|
||||
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', () => {
|
||||
it('renders the panel 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', () => {
|
||||
it('renders default slot in the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ default: '<p data-test="content">Contenu du drawer</p>' },
|
||||
{ default: '<p data-test="content">Contenu</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="content"]').text()).toBe('Contenu du drawer')
|
||||
expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
|
||||
})
|
||||
|
||||
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('works in uncontrolled mode (defaults closed)', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
@@ -85,38 +66,275 @@ describe('MalioDrawer', () => {
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const id = wrapper.find('.fixed').attributes('id')
|
||||
expect(id).toMatch(/^malio-drawer-/)
|
||||
expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-drawer-/)
|
||||
})
|
||||
|
||||
it('has role="dialog" and aria-modal on panel', () => {
|
||||
it('has role="dialog" and aria-modal on the 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')
|
||||
const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-2xl' })
|
||||
expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
|
||||
})
|
||||
|
||||
it('works in uncontrolled mode', () => {
|
||||
const wrapper = mountComponent()
|
||||
// Without modelValue, defaults to closed
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
it('renders the #header slot inside the header bar', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ header: '<h2 data-test="title">Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
|
||||
})
|
||||
|
||||
it('renders the header bar when showClose is true even without #header', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the header bar when no #header and showClose is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, showClose: false })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows the close button by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides the close button when showClose is false', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, showClose: false },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button renders mdi:cancel-bold icon', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const icon = wrapper.findComponent(IconifyIcon)
|
||||
expect(icon.props('icon')).toBe('mdi:cancel-bold')
|
||||
})
|
||||
|
||||
it('close button has aria-label "Fermer"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close 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])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('sets aria-labelledby to the header id when #header is provided', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, id: 'test-drawer' },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-labelledby')).toBe('test-drawer-header')
|
||||
expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-drawer-header')
|
||||
})
|
||||
|
||||
it('sets aria-label from ariaLabel when no #header is provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Panneau latéral' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-label')).toBe('Panneau latéral')
|
||||
expect(panel.attributes('aria-labelledby')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies headerClass to the header bar', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
|
||||
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
|
||||
})
|
||||
|
||||
it('renders the #footer slot in a footer pinned below the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ footer: '<button data-test="save">Enregistrer</button>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the footer wrapper when no #footer slot', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('applies bodyClass to the body', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
|
||||
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
|
||||
})
|
||||
|
||||
it('applies footerClass to the footer', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, footerClass: 'justify-end' },
|
||||
{ footer: '<span>pied</span>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
|
||||
})
|
||||
|
||||
it('aligns to the right by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('.fixed').classes()).toContain('justify-end')
|
||||
})
|
||||
|
||||
it('aligns to the left when side is "left"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, side: 'left' })
|
||||
expect(wrapper.find('.fixed').classes()).toContain('justify-start')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on backdrop click when dismissable is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, dismissable: false })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies overlayClass to the backdrop', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
|
||||
expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
|
||||
})
|
||||
|
||||
it('closes on Escape key when closeOnEscape is true', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on Escape when closeOnEscape is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('locks body scroll when opened and restores it when closed', async () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
|
||||
it('moves focus into the panel when opened', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: false, showClose: false },
|
||||
slots: { default: '<button data-test="first">OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="first"]').element
|
||||
expect(document.activeElement).toBe(first)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('restores focus to the trigger when closed', async () => {
|
||||
const trigger = document.createElement('button')
|
||||
document.body.appendChild(trigger)
|
||||
trigger.focus()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: false },
|
||||
slots: { default: '<button>OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
wrapper.unmount()
|
||||
trigger.remove()
|
||||
})
|
||||
|
||||
it('moves focus to the close button on open (default showClose)', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: false, showClose: true },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="close-button"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps focus to the first element when Tab is pressed on the last element', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
|
||||
last.focus()
|
||||
expect(document.activeElement).toBe(last)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
|
||||
const wrapper = mount(DrawerForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
|
||||
first.focus()
|
||||
expect(document.activeElement).toBe(first)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('does not release body scroll-lock when one stacked drawer closes while another is still open', async () => {
|
||||
const wrapperA = mount(DrawerForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
const wrapperB = mount(DrawerForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
|
||||
// Open drawer A → scroll locked
|
||||
await wrapperA.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
// Open drawer B → still locked
|
||||
await wrapperB.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
// Close drawer B → A is still open, scroll must remain locked
|
||||
await wrapperB.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
// Close drawer A → both closed, scroll-lock released
|
||||
await wrapperA.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,60 +1,77 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
name="drawer"
|
||||
:name="`drawer-${side}`"
|
||||
appear
|
||||
@after-leave="isRendered = false"
|
||||
>
|
||||
<div
|
||||
v-if="isRendered && isOpen"
|
||||
:id="componentId"
|
||||
class="fixed inset-0 z-50 flex justify-end"
|
||||
class="fixed inset-0 z-50 flex"
|
||||
:class="side === 'right' ? 'justify-end' : 'justify-start'"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-black/40"
|
||||
:class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
|
||||
data-test="backdrop"
|
||||
@click="close"
|
||||
@click="onBackdropClick"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref="panelRef"
|
||||
:class="twMerge(
|
||||
'relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl',
|
||||
'relative z-50 flex h-full w-full max-w-md flex-col bg-white',
|
||||
drawerClass,
|
||||
)"
|
||||
role="dialog"
|
||||
:aria-modal="true"
|
||||
:aria-labelledby="titleId"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="hasHeader ? headerId : undefined"
|
||||
:aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
|
||||
tabindex="-1"
|
||||
data-test="panel"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<div class="flex items-center justify-between px-5 pb-8 pt-8">
|
||||
<h2
|
||||
:id="titleId"
|
||||
class="text-[32px] font-semibold text-m-primary"
|
||||
<div
|
||||
v-if="hasHeader || showClose"
|
||||
:class="twMerge('flex items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
|
||||
data-test="header"
|
||||
>
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div
|
||||
:id="headerId"
|
||||
class="min-w-0 flex-1"
|
||||
data-test="header-content"
|
||||
>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<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"
|
||||
class="flex h-8 w-8 shrink-0 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"
|
||||
icon="mdi:cancel-bold"
|
||||
:width="16"
|
||||
:height="16"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-1 overflow-y-auto px-5"
|
||||
:class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
|
||||
data-test="body"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="$slots.footer"
|
||||
:class="twMerge('flex shrink-0 items-center gap-3 px-5 py-4', footerClass)"
|
||||
data-test="footer"
|
||||
>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
@@ -62,7 +79,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useAttrs, useId, watch } from 'vue'
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
useAttrs,
|
||||
useId,
|
||||
useSlots,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
@@ -72,68 +99,195 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
title?: string
|
||||
side?: 'right' | 'left'
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
drawerClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
title: '',
|
||||
side: 'right',
|
||||
showClose: true,
|
||||
dismissable: true,
|
||||
closeOnEscape: true,
|
||||
ariaLabel: '',
|
||||
drawerClass: '',
|
||||
overlayClass: '',
|
||||
headerClass: '',
|
||||
bodyClass: '',
|
||||
footerClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const componentId = computed(() => props.id || `malio-drawer-${generatedId}`)
|
||||
const titleId = computed(() => `${componentId.value}-title`)
|
||||
|
||||
const slots = useSlots()
|
||||
const headerId = computed(() => `${componentId.value}-header`)
|
||||
const hasHeader = computed(() => !!slots.header)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(false)
|
||||
|
||||
const isOpen = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
|
||||
const isRendered = ref(isOpen.value)
|
||||
|
||||
const panelRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let previouslyFocused: HTMLElement | null = null
|
||||
// Per-instance flag: true while this drawer holds a scroll-lock count slot.
|
||||
let lockedByThisInstance = false
|
||||
|
||||
function getFocusable(container: HTMLElement): HTMLElement[] {
|
||||
return Array.from(
|
||||
container.querySelectorAll<HTMLElement>(
|
||||
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
|
||||
),
|
||||
).filter((el) => el.tabIndex !== -1)
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
|
||||
if (!lockedByThisInstance) {
|
||||
lockedByThisInstance = true
|
||||
openDrawerCount++
|
||||
if (openDrawerCount === 1) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
;(focusable[0] ?? panel).focus()
|
||||
})
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openDrawerCount = Math.max(0, openDrawerCount - 1)
|
||||
if (openDrawerCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
previouslyFocused?.focus?.()
|
||||
previouslyFocused = null
|
||||
}
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) isRendered.value = true
|
||||
if (val) {
|
||||
isRendered.value = true
|
||||
onOpen()
|
||||
}
|
||||
else {
|
||||
onClose()
|
||||
}
|
||||
})
|
||||
|
||||
function close() {
|
||||
if (!isControlled.value) {
|
||||
localValue.value = false
|
||||
onMounted(() => {
|
||||
if (isOpen.value) onOpen()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// If this instance is still holding a scroll-lock slot, release it.
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openDrawerCount = Math.max(0, openDrawerCount - 1)
|
||||
if (openDrawerCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function onBackdropClick() {
|
||||
if (props.dismissable) close()
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && props.closeOnEscape) {
|
||||
e.stopPropagation()
|
||||
close()
|
||||
return
|
||||
}
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
if (focusable.length === 0) {
|
||||
e.preventDefault()
|
||||
panel.focus()
|
||||
return
|
||||
}
|
||||
const first = focusable[0]!
|
||||
const last = focusable[focusable.length - 1]!
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault()
|
||||
last.focus()
|
||||
}
|
||||
else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault()
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!isControlled.value) localValue.value = false
|
||||
emit('update:modelValue', false)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// Shared across all MalioDrawer instances: only the last open drawer releases the body scroll-lock.
|
||||
let openDrawerCount = 0
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-enter-active,
|
||||
.drawer-leave-active {
|
||||
.drawer-right-enter-active,
|
||||
.drawer-right-leave-active,
|
||||
.drawer-left-enter-active,
|
||||
.drawer-left-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.drawer-enter-active > div:last-child,
|
||||
.drawer-leave-active > div:last-child {
|
||||
.drawer-right-enter-active > div:last-child,
|
||||
.drawer-right-leave-active > div:last-child,
|
||||
.drawer-left-enter-active > div:last-child,
|
||||
.drawer-left-leave-active > div:last-child {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.drawer-enter-from,
|
||||
.drawer-leave-to {
|
||||
.drawer-right-enter-from,
|
||||
.drawer-right-leave-to,
|
||||
.drawer-left-enter-from,
|
||||
.drawer-left-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.drawer-enter-from > div:last-child,
|
||||
.drawer-leave-to > div:last-child {
|
||||
.drawer-right-enter-from > div:last-child,
|
||||
.drawer-right-leave-to > div:last-child {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.drawer-left-enter-from > div:last-child,
|
||||
.drawer-left-leave-to > div:last-child {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -279,7 +279,7 @@ describe('MalioInputText', () => {
|
||||
|
||||
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-8')
|
||||
expect(wrapper.get('label').classes()).toContain('left-11')
|
||||
})
|
||||
|
||||
it('passes icon size props to icon component', () => {
|
||||
@@ -294,4 +294,18 @@ describe('MalioInputText', () => {
|
||||
|
||||
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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -158,6 +158,20 @@ describe('MalioInputAmount', () => {
|
||||
|
||||
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-8')
|
||||
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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -39,13 +39,7 @@
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : iconColor,
|
||||
iconPositionClass,
|
||||
]"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@@ -141,7 +135,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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
|
||||
@@ -222,7 +216,7 @@ const iconInputPaddingClass = computed(() => {
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
@@ -235,6 +229,15 @@ 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>
|
||||
|
||||
@@ -0,0 +1,430 @@
|
||||
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')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,513 @@
|
||||
<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>
|
||||
@@ -0,0 +1,228 @@
|
||||
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')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,229 @@
|
||||
<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>
|
||||
@@ -171,4 +171,18 @@ describe('MalioInputPassword', () => {
|
||||
|
||||
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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -39,10 +39,7 @@
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : 'text-m-muted',
|
||||
iconStateClass,
|
||||
'cursor-pointer absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
@click="toggleVisibility"
|
||||
@@ -140,7 +137,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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
|
||||
@@ -189,6 +186,15 @@ const onInput = (event: Event) => {
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,308 @@
|
||||
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()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,274 @@
|
||||
<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>
|
||||
@@ -39,13 +39,7 @@
|
||||
:width="iconSize"
|
||||
:height="iconSize"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : iconColor,
|
||||
iconPositionClass,
|
||||
]"
|
||||
:class="[iconStateClass, iconPositionClass]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@@ -146,7 +140,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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
|
||||
@@ -202,7 +196,7 @@ const iconInputPaddingClass = computed(() => {
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const labelPositionClass = computed(() => {
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
||||
if (props.iconName && props.iconPosition === 'left') return 'left-11'
|
||||
return 'left-3'
|
||||
})
|
||||
|
||||
@@ -215,6 +209,15 @@ 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>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative w-full"
|
||||
>
|
||||
<div :class="mergedGroupClass">
|
||||
<textarea
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
|
||||
:autocomplete="autocomplete"
|
||||
class="floating-input peer w-full border-2 bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
|
||||
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',
|
||||
@@ -81,6 +79,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
|
||||
|
||||
@@ -108,6 +107,7 @@ const props = withDefaults(
|
||||
error?: string
|
||||
success?: string
|
||||
rounded?: string
|
||||
groupClass?: string
|
||||
|
||||
}>(),
|
||||
{
|
||||
@@ -133,9 +133,14 @@ const props = withDefaults(
|
||||
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('')
|
||||
|
||||
@@ -172,4 +172,18 @@ describe('MalioInputUpload', () => {
|
||||
|
||||
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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -43,10 +43,7 @@
|
||||
:height="24"
|
||||
data-test="icon"
|
||||
:class="[
|
||||
hasError
|
||||
? 'text-m-danger'
|
||||
: hasSuccess
|
||||
? 'text-m-success' : 'text-m-muted',
|
||||
iconStateClass,
|
||||
'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
|
||||
]"
|
||||
/>
|
||||
@@ -129,7 +126,7 @@ const mergedGroupClass = computed(() =>
|
||||
)
|
||||
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 focus:border-2 text-lg rounded-md',
|
||||
'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
|
||||
@@ -189,6 +186,15 @@ const onFileChange = (event: Event) => {
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,320 @@
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
import { enableAutoUnmount, mount } from '@vue/test-utils'
|
||||
import type { DefineComponent } from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import Modal from './Modal.vue'
|
||||
|
||||
type ModalProps = {
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
modalClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}
|
||||
|
||||
const ModalForTest = Modal as DefineComponent<ModalProps>
|
||||
|
||||
function mountComponent(props: ModalProps = {}, slots?: Record<string, string>) {
|
||||
return mount(ModalForTest, {
|
||||
props,
|
||||
slots,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioModal', () => {
|
||||
enableAutoUnmount(afterEach)
|
||||
|
||||
afterEach(() => {
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
|
||||
it('does not render when modelValue is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders the panel when modelValue is true', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('centers the modal (items-center justify-center)', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const root = wrapper.find('.fixed')
|
||||
expect(root.classes()).toContain('items-center')
|
||||
expect(root.classes()).toContain('justify-center')
|
||||
})
|
||||
|
||||
it('renders default slot in the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ default: '<p data-test="content">Contenu</p>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
|
||||
})
|
||||
|
||||
it('works in uncontrolled mode (defaults closed)', () => {
|
||||
const wrapper = mountComponent()
|
||||
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('uses custom id when provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, id: 'my-modal' })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toBe('my-modal')
|
||||
})
|
||||
|
||||
it('generates an id when not provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-modal-/)
|
||||
})
|
||||
|
||||
it('has role="dialog" and aria-modal on the 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('applies modalClass to the panel', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, modalClass: 'max-w-2xl' })
|
||||
expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
|
||||
})
|
||||
|
||||
it('renders the #header slot inside the header bar', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ header: '<h2 data-test="title">Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
|
||||
})
|
||||
|
||||
it('renders the header bar when showClose is true even without #header', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the header bar when no #header and showClose is false', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, showClose: false })
|
||||
expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows the close button by default', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('hides the close button when showClose is false', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, showClose: false },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('close button renders mdi:cancel-bold icon', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
const icon = wrapper.findComponent(IconifyIcon)
|
||||
expect(icon.props('icon')).toBe('mdi:cancel-bold')
|
||||
})
|
||||
|
||||
it('close button has aria-label "Fermer"', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close 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])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('sets aria-labelledby to the header id when #header is provided', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, id: 'test-modal' },
|
||||
{ header: '<h2>Titre</h2>' },
|
||||
)
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-labelledby')).toBe('test-modal-header')
|
||||
expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-modal-header')
|
||||
})
|
||||
|
||||
it('sets aria-label from ariaLabel when no #header is provided', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Boîte de dialogue' })
|
||||
const panel = wrapper.find('[data-test="panel"]')
|
||||
expect(panel.attributes('aria-label')).toBe('Boîte de dialogue')
|
||||
expect(panel.attributes('aria-labelledby')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies headerClass to the header bar', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
|
||||
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
|
||||
})
|
||||
|
||||
it('renders the #footer slot in a footer pinned below the body', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true },
|
||||
{ footer: '<button data-test="save">Enregistrer</button>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('does not render the footer when no #footer slot', () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('applies bodyClass to the body', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
|
||||
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
|
||||
})
|
||||
|
||||
it('applies footerClass to the footer', () => {
|
||||
const wrapper = mountComponent(
|
||||
{ modelValue: true, footerClass: 'justify-end' },
|
||||
{ footer: '<span>pied</span>' },
|
||||
)
|
||||
expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
|
||||
})
|
||||
|
||||
it('emits update:modelValue false and close on backdrop click (dismissable)', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on backdrop click when dismissable is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, dismissable: false })
|
||||
await wrapper.find('[data-test="backdrop"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applies overlayClass to the backdrop', () => {
|
||||
const wrapper = mountComponent({ modelValue: true, overlayClass: 'bg-black/70' })
|
||||
expect(wrapper.find('[data-test="backdrop"]').classes()).toContain('bg-black/70')
|
||||
})
|
||||
|
||||
it('closes on Escape key when closeOnEscape is true', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
||||
expect(wrapper.emitted('close')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('does not close on Escape when closeOnEscape is false', async () => {
|
||||
const wrapper = mountComponent({ modelValue: true, closeOnEscape: false })
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Escape' })
|
||||
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('locks body scroll when opened and restores it when closed', async () => {
|
||||
const wrapper = mountComponent({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
|
||||
it('moves focus into the panel when opened', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: false, showClose: false },
|
||||
slots: { default: '<button data-test="first">OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="first"]').element
|
||||
expect(document.activeElement).toBe(first)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('restores focus to the trigger when closed', async () => {
|
||||
const trigger = document.createElement('button')
|
||||
document.body.appendChild(trigger)
|
||||
trigger.focus()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
slots: { default: '<button>OK</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.setProps({ modelValue: true })
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.setProps({ modelValue: false })
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(document.activeElement).toBe(trigger)
|
||||
|
||||
wrapper.unmount()
|
||||
trigger.remove()
|
||||
})
|
||||
|
||||
it('wraps focus to the first element when Tab is pressed on the last element', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const last = wrapper.find('[data-test="btn2"]').element as HTMLElement
|
||||
last.focus()
|
||||
expect(document.activeElement).toBe(last)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab' })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn1"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('wraps focus to the last element when Shift+Tab is pressed on the first element', async () => {
|
||||
const wrapper = mount(ModalForTest, {
|
||||
props: { modelValue: true, showClose: false },
|
||||
slots: { default: '<button data-test="btn1">First</button><button data-test="btn2">Last</button>' },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
await wrapper.vm.$nextTick()
|
||||
const first = wrapper.find('[data-test="btn1"]').element as HTMLElement
|
||||
first.focus()
|
||||
expect(document.activeElement).toBe(first)
|
||||
await wrapper.find('[data-test="panel"]').trigger('keydown', { key: 'Tab', shiftKey: true })
|
||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('does not release body scroll-lock when one stacked modal closes while another is still open', async () => {
|
||||
const wrapperA = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
const wrapperB = mount(ModalForTest, {
|
||||
props: { modelValue: false },
|
||||
attachTo: document.body,
|
||||
global: { stubs: { Teleport: true } },
|
||||
})
|
||||
|
||||
await wrapperA.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperB.setProps({ modelValue: true })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperB.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('hidden')
|
||||
|
||||
await wrapperA.setProps({ modelValue: false })
|
||||
expect(document.body.style.overflow).toBe('')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
name="modal"
|
||||
appear
|
||||
@after-leave="isRendered = false"
|
||||
>
|
||||
<div
|
||||
v-if="isRendered && isOpen"
|
||||
:id="componentId"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
:class="twMerge('absolute inset-0 bg-black/40', overlayClass)"
|
||||
data-test="backdrop"
|
||||
@click="onBackdropClick"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref="panelRef"
|
||||
:class="twMerge(
|
||||
'relative z-50 flex max-h-[85vh] w-full max-w-md flex-col rounded-malio bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]',
|
||||
modalClass,
|
||||
)"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="hasHeader ? headerId : undefined"
|
||||
:aria-label="hasHeader ? undefined : (ariaLabel || undefined)"
|
||||
tabindex="-1"
|
||||
data-test="panel"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<div
|
||||
v-if="hasHeader || showClose"
|
||||
:class="twMerge('flex shrink-0 items-center justify-between gap-4 px-5 py-[25px]', headerClass)"
|
||||
data-test="header"
|
||||
>
|
||||
<div
|
||||
:id="headerId"
|
||||
class="min-w-0 flex-1"
|
||||
data-test="header-content"
|
||||
>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<button
|
||||
v-if="showClose"
|
||||
type="button"
|
||||
aria-label="Fermer"
|
||||
class="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-m-surface"
|
||||
data-test="close-button"
|
||||
@click="close"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:cancel-bold"
|
||||
:width="16"
|
||||
:height="16"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
:class="twMerge('flex-1 overflow-y-auto px-5', bodyClass)"
|
||||
data-test="body"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="$slots.footer"
|
||||
:class="twMerge('flex shrink-0 items-center gap-3 px-5 py-4', footerClass)"
|
||||
data-test="footer"
|
||||
>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
useAttrs,
|
||||
useId,
|
||||
useSlots,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
defineOptions({ name: 'MalioModal', inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
modelValue?: boolean
|
||||
showClose?: boolean
|
||||
dismissable?: boolean
|
||||
closeOnEscape?: boolean
|
||||
ariaLabel?: string
|
||||
modalClass?: string
|
||||
overlayClass?: string
|
||||
headerClass?: string
|
||||
bodyClass?: string
|
||||
footerClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
modelValue: undefined,
|
||||
showClose: true,
|
||||
dismissable: true,
|
||||
closeOnEscape: true,
|
||||
ariaLabel: '',
|
||||
modalClass: '',
|
||||
overlayClass: '',
|
||||
headerClass: '',
|
||||
bodyClass: '',
|
||||
footerClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
|
||||
const componentId = computed(() => props.id || `malio-modal-${generatedId}`)
|
||||
|
||||
const slots = useSlots()
|
||||
const headerId = computed(() => `${componentId.value}-header`)
|
||||
const hasHeader = computed(() => !!slots.header)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const localValue = ref(false)
|
||||
const isOpen = computed(() =>
|
||||
isControlled.value ? props.modelValue! : localValue.value,
|
||||
)
|
||||
const isRendered = ref(isOpen.value)
|
||||
|
||||
const panelRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let previouslyFocused: HTMLElement | null = null
|
||||
// Per-instance flag: true while this modal holds a scroll-lock count slot.
|
||||
let lockedByThisInstance = false
|
||||
|
||||
function getFocusable(container: HTMLElement): HTMLElement[] {
|
||||
return Array.from(
|
||||
container.querySelectorAll<HTMLElement>(
|
||||
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',
|
||||
),
|
||||
).filter((el) => el.tabIndex !== -1)
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
previouslyFocused = (document.activeElement as HTMLElement | null) ?? null
|
||||
if (!lockedByThisInstance) {
|
||||
lockedByThisInstance = true
|
||||
openModalCount++
|
||||
if (openModalCount === 1) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
;(focusable[0] ?? panel).focus()
|
||||
})
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openModalCount = Math.max(0, openModalCount - 1)
|
||||
if (openModalCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
previouslyFocused?.focus?.()
|
||||
previouslyFocused = null
|
||||
}
|
||||
|
||||
watch(isOpen, (val) => {
|
||||
if (val) {
|
||||
isRendered.value = true
|
||||
onOpen()
|
||||
}
|
||||
else {
|
||||
onClose()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (isOpen.value) onOpen()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// If this instance is still holding a scroll-lock slot, release it.
|
||||
if (lockedByThisInstance) {
|
||||
lockedByThisInstance = false
|
||||
openModalCount = Math.max(0, openModalCount - 1)
|
||||
if (openModalCount === 0) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function onBackdropClick() {
|
||||
if (props.dismissable) close()
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && props.closeOnEscape) {
|
||||
e.stopPropagation()
|
||||
close()
|
||||
return
|
||||
}
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
const panel = panelRef.value
|
||||
if (!panel) return
|
||||
const focusable = getFocusable(panel)
|
||||
if (focusable.length === 0) {
|
||||
e.preventDefault()
|
||||
panel.focus()
|
||||
return
|
||||
}
|
||||
const first = focusable[0]!
|
||||
const last = focusable[focusable.length - 1]!
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault()
|
||||
last.focus()
|
||||
}
|
||||
else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault()
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!isControlled.value) localValue.value = false
|
||||
emit('update:modelValue', false)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// Shared across all MalioModal instances: only the last open modal releases the body scroll-lock.
|
||||
let openModalCount = 0
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-enter-active,
|
||||
.modal-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-active > div:last-child,
|
||||
.modal-leave-active > div:last-child {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-enter-from,
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from > div:last-child,
|
||||
.modal-leave-to > div:last-child {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
@@ -153,4 +153,33 @@ describe('MalioRadioButton', () => {
|
||||
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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, useAttrs, useId} from 'vue'
|
||||
import {computed, ref, useAttrs, useId} from 'vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
|
||||
defineOptions({name: 'MalioRadioButton', inheritAttrs: false})
|
||||
@@ -86,9 +86,13 @@ const props = withDefaults(
|
||||
|
||||
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 isChecked = computed(() => props.modelValue === props.value)
|
||||
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)
|
||||
@@ -117,14 +121,15 @@ const mergedControlClass = computed(() =>
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-black',
|
||||
'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 text-black',
|
||||
'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' : '',
|
||||
@@ -160,6 +165,10 @@ const onChange = (event: Event) => {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isControlled.value) {
|
||||
localValue.value = props.value
|
||||
}
|
||||
|
||||
emit('update:modelValue', props.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -6,25 +6,26 @@
|
||||
>
|
||||
<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-2 focus-visible:border-m-primary"
|
||||
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-2 !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-danger !border-t-0'
|
||||
? '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-2 !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-success !border-t-0'
|
||||
? '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-2 !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-primary !border-t-0'
|
||||
? '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',
|
||||
@@ -98,7 +99,7 @@
|
||||
ref="listRef"
|
||||
role="listbox"
|
||||
:aria-labelledby="buttonId"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
|
||||
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'
|
||||
@@ -115,8 +116,16 @@
|
||||
: '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"
|
||||
@@ -177,6 +186,7 @@ const props = withDefaults(defineProps<{
|
||||
rounded?: string
|
||||
disabled?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
}>(), {
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
@@ -190,12 +200,14 @@ const props = withDefaults(defineProps<{
|
||||
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')
|
||||
@@ -299,6 +311,7 @@ function toggle() {
|
||||
function select(value: string | number | null) {
|
||||
emit('update:modelValue', value)
|
||||
close()
|
||||
buttonRef.value?.blur()
|
||||
}
|
||||
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
@@ -316,6 +329,21 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -6,25 +6,26 @@
|
||||
>
|
||||
<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-2 focus-visible:border-m-primary"
|
||||
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-2 !border-m-danger !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-danger !border-t-0'
|
||||
? '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-2 !border-m-success !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-success !border-t-0'
|
||||
? '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-2 !border-m-primary !border-b-0'
|
||||
: 'rounded-t-none !border-2 !border-m-primary !border-t-0'
|
||||
? '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',
|
||||
@@ -126,7 +127,7 @@
|
||||
ref="listRef"
|
||||
role="listbox"
|
||||
:aria-labelledby="buttonId"
|
||||
class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
|
||||
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'
|
||||
@@ -144,7 +145,14 @@
|
||||
]"
|
||||
>
|
||||
<li
|
||||
v-if="displaySelectAll"
|
||||
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
|
||||
>
|
||||
@@ -231,6 +239,7 @@ const props = withDefaults(defineProps<{
|
||||
selectAllLabel?: string
|
||||
disabled?: boolean
|
||||
groupClass?: string
|
||||
noOptionsText?: string
|
||||
}>(), {
|
||||
options: () => [],
|
||||
emptyOptionLabel: '',
|
||||
@@ -247,12 +256,14 @@ const props = withDefaults(defineProps<{
|
||||
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')
|
||||
@@ -367,9 +378,10 @@ function isChecked(value: string | number) {
|
||||
function toggleOption(value: string | number) {
|
||||
if (isChecked(value)) {
|
||||
emit('update:modelValue', props.modelValue.filter(item => item !== value))
|
||||
return
|
||||
}
|
||||
} else {
|
||||
emit('update:modelValue', [...props.modelValue, value])
|
||||
}
|
||||
nextTick(() => buttonRef.value?.focus())
|
||||
}
|
||||
|
||||
function toggleAll() {
|
||||
@@ -378,6 +390,7 @@ function toggleAll() {
|
||||
} else {
|
||||
emit('update:modelValue', normalizedOptions.value.map(opt => opt.value))
|
||||
}
|
||||
nextTick(() => buttonRef.value?.focus())
|
||||
}
|
||||
|
||||
function onClickOutside(e: MouseEvent) {
|
||||
@@ -395,6 +408,21 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
|
||||
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;
|
||||
|
||||
@@ -8,6 +8,7 @@ type Tab = {
|
||||
key: string
|
||||
label: string
|
||||
icon?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
type TabListProps = {
|
||||
@@ -134,4 +135,53 @@ describe('MalioTabList', () => {
|
||||
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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -12,19 +12,23 @@
|
||||
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="[
|
||||
'flex items-center gap-[18px] text-[24px] font-medium transition-colors cursor-pointer',
|
||||
'relative flex items-center gap-[18px] text-[24px] font-[600] transition-colors',
|
||||
activeTab === tab.key
|
||||
? 'border-b-2 border-m-primary text-m-primary font-bold outline-b'
|
||||
: 'border-transparent text-m-primary/50 hover:text-m-primary/70',
|
||||
? '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="20"
|
||||
:width="tab.iconSize ?? 24"
|
||||
/>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
@@ -53,6 +57,8 @@ type Tab = {
|
||||
key: string
|
||||
label: string
|
||||
icon?: string
|
||||
iconSize?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
@@ -79,6 +85,8 @@ const activeTab = computed(() =>
|
||||
)
|
||||
|
||||
function selectTab(key: string) {
|
||||
const tab = props.tabs.find(t => t.key === key)
|
||||
if (tab?.disabled) return
|
||||
if (!isControlled.value) {
|
||||
localValue.value = key
|
||||
}
|
||||
|
||||
@@ -197,11 +197,11 @@ const mergedInputClass = (field: 'hours' | 'minutes') =>
|
||||
'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
|
||||
? 'focus:border-2 border-m-danger focus:border-m-danger'
|
||||
? 'border-m-danger focus:border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'focus:border-2 border-m-success focus:border-m-success'
|
||||
? 'border-m-success focus:border-m-success'
|
||||
: activeField.value === field
|
||||
? 'border-2 border-m-primary text-m-primary'
|
||||
? 'border-m-primary text-m-primary'
|
||||
: 'border-black text-black',
|
||||
props.inputClass,
|
||||
)
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import TimePicker from './TimePicker.vue'
|
||||
|
||||
type TimePickerProps = {
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}
|
||||
|
||||
const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
|
||||
const mountPicker = (props: TimePickerProps = {}) =>
|
||||
mount(TimePickerForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioTimePicker', () => {
|
||||
it('affiche le label et l\'icône horloge', () => {
|
||||
const wrapper = mountPicker({label: 'Heure'})
|
||||
expect(wrapper.get('label').text()).toBe('Heure')
|
||||
expect(wrapper.find('[data-test="clock-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('affiche la valeur HH:MM dans le champ', () => {
|
||||
const wrapper = mountPicker({modelValue: '14:30'})
|
||||
const input = wrapper.get('[data-test="time-field"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('14:30')
|
||||
})
|
||||
|
||||
it('ouvre le popover à molettes au clic', async () => {
|
||||
const wrapper = mountPicker()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n\'ouvre pas le popover si disabled', async () => {
|
||||
const wrapper = mountPicker({disabled: true})
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('émet la valeur réglée depuis les molettes', async () => {
|
||||
const wrapper = mountPicker({modelValue: '09:30'})
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
wrapper.findComponent({name: 'MalioTimeWheels'}).vm.$emit('update:modelValue', '10:30')
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10:30'])
|
||||
})
|
||||
|
||||
it('émet null au clic sur la croix', async () => {
|
||||
const wrapper = mountPicker({modelValue: '14:30'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('positionne aria-invalid et describedby sur erreur', () => {
|
||||
const wrapper = mountPicker({error: 'Heure requise'})
|
||||
const input = wrapper.get('[data-test="time-field"]')
|
||||
expect(input.attributes('aria-invalid')).toBe('true')
|
||||
expect(input.attributes('aria-describedby')).toBeTruthy()
|
||||
expect(wrapper.text()).toContain('Heure requise')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div ref="root">
|
||||
<div :class="mergedGroupClass">
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
data-test="time-field"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="displayValue"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="dialog"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@click="onFieldClick"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<button
|
||||
v-if="showClear"
|
||||
type="button"
|
||||
data-test="clear"
|
||||
class="text-m-muted hover:text-m-primary"
|
||||
aria-label="Effacer l'heure"
|
||||
@click.stop="onClear"
|
||||
>
|
||||
<Icon icon="mdi:close" :width="16" :height="16" />
|
||||
</button>
|
||||
<Icon
|
||||
data-test="clock-icon"
|
||||
icon="mdi:clock-outline"
|
||||
:width="24"
|
||||
:height="24"
|
||||
:class="iconStateClass"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mode overlay (par défaut) : popover absolu au-dessus du contenu suivant. -->
|
||||
<div
|
||||
v-if="isOpen && !staticPopover"
|
||||
data-test="popover"
|
||||
role="dialog"
|
||||
class="absolute left-0 right-0 top-full z-20 box-border w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<TimeWheels
|
||||
:model-value="wheelsValue"
|
||||
@update:model-value="onWheelChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode statique : molette en flux (hors du groupe à hauteur fixe) → le
|
||||
conteneur parent (ex. popover du DateTime) grandit pour l'englober. -->
|
||||
<div
|
||||
v-if="isOpen && staticPopover"
|
||||
data-test="popover"
|
||||
role="dialog"
|
||||
class="relative mt-4 w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<TimeWheels
|
||||
:model-value="wheelsValue"
|
||||
@update:model-value="onWheelChange"
|
||||
/>
|
||||
</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, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
|
||||
import {Icon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import TimeWheels from './internal/TimeWheels.vue'
|
||||
|
||||
defineOptions({name: 'MalioTimePicker', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
staticPopover?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'HH:MM',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
clearable: true,
|
||||
staticPopover: false,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const isOpen = ref(false)
|
||||
const localValue = ref<string | null>(null)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? props.modelValue : localValue.value))
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-time-picker-${generatedId}`)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const displayValue = computed(() => currentValue.value ?? '')
|
||||
const isFilled = computed(() => displayValue.value.length > 0)
|
||||
const wheelsValue = computed(() => currentValue.value || '00:00')
|
||||
const showClear = computed(() =>
|
||||
props.clearable && isFilled.value && !props.disabled && !props.readonly,
|
||||
)
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const commit = (value: string | null) => {
|
||||
if (!isControlled.value) localValue.value = value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
const onWheelChange = (value: string) => commit(value)
|
||||
|
||||
const onClear = () => {
|
||||
commit(null)
|
||||
}
|
||||
|
||||
const onFieldClick = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const onMouseDown = (event: MouseEvent) => {
|
||||
if (!isOpen.value || !root.value) return
|
||||
if (!root.value.contains(event.target as Node)) isOpen.value = false
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onMouseDown))
|
||||
onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative flex h-12 w-full items-center', props.groupClass),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed border-m-muted text-black/60' : '',
|
||||
hasError.value
|
||||
? 'border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
isOpen.value ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left text-sm font-medium transition-transform duration-150',
|
||||
(isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: isOpen.value
|
||||
? 'text-m-primary'
|
||||
: 'text-black peer-placeholder-shown:text-m-muted',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const iconStateClass = 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'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {clampHours, clampMinutes, formatTime, padSegment, parseTime} from './timeFormat'
|
||||
|
||||
describe('timeFormat', () => {
|
||||
it('parse une chaîne HH:MM valide', () => {
|
||||
expect(parseTime('09:05')).toEqual({hours: 9, minutes: 5})
|
||||
})
|
||||
|
||||
it('renvoie null pour vide ou invalide', () => {
|
||||
expect(parseTime('')).toBeNull()
|
||||
expect(parseTime(null)).toBeNull()
|
||||
expect(parseTime('abc')).toBeNull()
|
||||
expect(parseTime('12')).toBeNull()
|
||||
})
|
||||
|
||||
it('clamp les valeurs hors bornes au parsing', () => {
|
||||
expect(parseTime('99:88')).toEqual({hours: 23, minutes: 59})
|
||||
})
|
||||
|
||||
it('formate avec zéro-padding', () => {
|
||||
expect(formatTime(9, 5)).toBe('09:05')
|
||||
expect(formatTime(0, 0)).toBe('00:00')
|
||||
})
|
||||
|
||||
it('clamp et pad les helpers', () => {
|
||||
expect(clampHours(30)).toBe(23)
|
||||
expect(clampHours(-2)).toBe(0)
|
||||
expect(clampMinutes(75)).toBe(59)
|
||||
expect(padSegment(7)).toBe('07')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
export interface TimeParts {
|
||||
hours: number
|
||||
minutes: number
|
||||
}
|
||||
|
||||
export function clampHours(value: number): number {
|
||||
if (Number.isNaN(value)) return 0
|
||||
return Math.min(23, Math.max(0, Math.trunc(value)))
|
||||
}
|
||||
|
||||
export function clampMinutes(value: number): number {
|
||||
if (Number.isNaN(value)) return 0
|
||||
return Math.min(59, Math.max(0, Math.trunc(value)))
|
||||
}
|
||||
|
||||
export function padSegment(value: number): string {
|
||||
return value.toString().padStart(2, '0')
|
||||
}
|
||||
|
||||
export function parseTime(value: string | null | undefined): TimeParts | null {
|
||||
if (!value) return null
|
||||
const match = /^(\d{1,2}):(\d{1,2})$/.exec(value.trim())
|
||||
if (!match) return null
|
||||
return {
|
||||
hours: clampHours(Number.parseInt(match[1], 10)),
|
||||
minutes: clampMinutes(Number.parseInt(match[2], 10)),
|
||||
}
|
||||
}
|
||||
|
||||
export function formatTime(hours: number, minutes: number): string {
|
||||
return `${padSegment(clampHours(hours))}:${padSegment(clampMinutes(minutes))}`
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {defineComponent, nextTick, ref} from 'vue'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {
|
||||
CENTER_OFFSET,
|
||||
VISIBLE_ROWS,
|
||||
loopCorrection,
|
||||
scrollTopForValueIndex,
|
||||
useInfiniteWheel,
|
||||
valueIndexFromScroll,
|
||||
} from './useInfiniteWheel'
|
||||
|
||||
const H = 40 // itemHeight
|
||||
const LEN = 24 // ex. heures
|
||||
|
||||
describe('useInfiniteWheel — math pure', () => {
|
||||
it('expose 5 lignes visibles et un offset central de 2', () => {
|
||||
expect(VISIBLE_ROWS).toBe(5)
|
||||
expect(CENTER_OFFSET).toBe(2)
|
||||
})
|
||||
|
||||
it('scrollTopForValueIndex et valueIndexFromScroll font un aller-retour', () => {
|
||||
for (const index of [0, 1, 9, 23]) {
|
||||
const top = scrollTopForValueIndex(index, H, LEN)
|
||||
expect(valueIndexFromScroll(top, H, LEN)).toBe(index)
|
||||
}
|
||||
})
|
||||
|
||||
it('valueIndexFromScroll boucle en modulo', () => {
|
||||
const top = scrollTopForValueIndex(0, H, LEN)
|
||||
expect(valueIndexFromScroll(top + LEN * H, H, LEN)).toBe(0)
|
||||
})
|
||||
|
||||
it('loopCorrection laisse le scroll de la copie du milieu inchangé', () => {
|
||||
const top = scrollTopForValueIndex(12, H, LEN)
|
||||
expect(loopCorrection(top, H, LEN)).toBe(top)
|
||||
})
|
||||
|
||||
it('loopCorrection ramène vers le milieu quand on dérive vers le haut', () => {
|
||||
const drifted = scrollTopForValueIndex(0, H, LEN) - LEN * H
|
||||
expect(loopCorrection(drifted, H, LEN)).toBe(drifted + LEN * H)
|
||||
})
|
||||
|
||||
it('loopCorrection ramène vers le milieu quand on dérive vers le bas', () => {
|
||||
const drifted = scrollTopForValueIndex(0, H, LEN) + LEN * H
|
||||
expect(loopCorrection(drifted, H, LEN)).toBe(drifted - LEN * H)
|
||||
})
|
||||
})
|
||||
|
||||
function mountWheelHarness(initialIndex: number, onChange: (i: number) => void) {
|
||||
let api!: ReturnType<typeof useInfiniteWheel>
|
||||
const Harness = defineComponent({
|
||||
setup() {
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
api = useInfiniteWheel(container, {
|
||||
length: 24,
|
||||
itemHeight: 40,
|
||||
initialIndex: () => initialIndex,
|
||||
onChange,
|
||||
})
|
||||
return {container}
|
||||
},
|
||||
template: '<div ref="container" style="height:200px;overflow:auto"><div style="height:2880px" /></div>',
|
||||
})
|
||||
const wrapper = mount(Harness, {attachTo: document.body})
|
||||
return {wrapper, api: () => api}
|
||||
}
|
||||
|
||||
describe('useInfiniteWheel — composable', () => {
|
||||
it('step(+1) émet l\'index suivant', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(9, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().step(1)
|
||||
expect(changes.at(-1)).toBe(10)
|
||||
})
|
||||
|
||||
it('step boucle de 23 à 0', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(23, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().step(1)
|
||||
expect(changes.at(-1)).toBe(0)
|
||||
})
|
||||
|
||||
it('onKeydown ArrowUp décrémente (avec wrap)', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(0, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().onKeydown(new KeyboardEvent('keydown', {key: 'ArrowUp'}))
|
||||
expect(changes.at(-1)).toBe(23)
|
||||
})
|
||||
|
||||
// Anti-boucle navigateur : un scroll programmatique déclenche une rafale d'évènements
|
||||
// scroll (animation/snap). Ils ne doivent PAS être pris pour du scroll utilisateur,
|
||||
// sinon settle() ré-émet en boucle et corrompt le patch DOM de Vue.
|
||||
it('n\'émet pas en double quand un scroll programmatique déclenche une rafale de scroll', async () => {
|
||||
vi.useFakeTimers()
|
||||
try {
|
||||
const changes: number[] = []
|
||||
const {wrapper, api} = mountWheelHarness(9, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
const el = wrapper.element as HTMLElement
|
||||
changes.length = 0
|
||||
|
||||
api().scrollToIndex(12)
|
||||
|
||||
el.dispatchEvent(new Event('scroll'))
|
||||
el.dispatchEvent(new Event('scroll'))
|
||||
el.dispatchEvent(new Event('scroll'))
|
||||
|
||||
vi.advanceTimersByTime(300)
|
||||
|
||||
expect(changes).toEqual([12])
|
||||
}
|
||||
finally {
|
||||
vi.useRealTimers()
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,117 @@
|
||||
import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
|
||||
|
||||
export const VISIBLE_ROWS = 5
|
||||
export const CENTER_OFFSET = (VISIBLE_ROWS - 1) / 2 // 2
|
||||
|
||||
/** Index de valeur logique (0..length-1) centré pour un scrollTop donné. */
|
||||
export function valueIndexFromScroll(scrollTop: number, itemHeight: number, length: number): number {
|
||||
const flat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
||||
return ((flat % length) + length) % length
|
||||
}
|
||||
|
||||
/** scrollTop qui centre l'index donné dans la copie du milieu (buffer à 3 copies). */
|
||||
export function scrollTopForValueIndex(valueIndex: number, itemHeight: number, length: number): number {
|
||||
const flat = length + valueIndex - CENTER_OFFSET
|
||||
return flat * itemHeight
|
||||
}
|
||||
|
||||
/** Recentre le scrollTop dans la copie du milieu [length, 2*length) si on a dérivé. */
|
||||
export function loopCorrection(scrollTop: number, itemHeight: number, length: number): number {
|
||||
const block = length * itemHeight
|
||||
const centeredFlat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
||||
if (centeredFlat < length) return scrollTop + block
|
||||
if (centeredFlat >= 2 * length) return scrollTop - block
|
||||
return scrollTop
|
||||
}
|
||||
|
||||
export interface UseInfiniteWheelOptions {
|
||||
length: number
|
||||
itemHeight: number
|
||||
initialIndex: () => number
|
||||
onChange: (index: number) => void
|
||||
}
|
||||
|
||||
export function useInfiniteWheel(
|
||||
containerRef: Ref<HTMLElement | null>,
|
||||
options: UseInfiniteWheelOptions,
|
||||
) {
|
||||
const centeredIndex = ref(options.initialIndex())
|
||||
let scrollEndTimer: ReturnType<typeof setTimeout> | null = null
|
||||
// Fenêtre de suppression : ignore les évènements scroll provoqués par NOS
|
||||
// repositionnements programmatiques (et les réajustements de scroll-snap), qui
|
||||
// arrivent en rafale. Un booléen one-shot n'en absorberait qu'un seul : les
|
||||
// suivants seraient pris pour du scroll utilisateur → settle() → onChange en
|
||||
// boucle (re-render ré-entrant qui corrompt le patch DOM dans le navigateur).
|
||||
let suppressed = false
|
||||
let suppressTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
// Scroll programmatique INSTANTANÉ : pas de 'smooth', dont l'animation multi-frames
|
||||
// émettrait justement la rafale d'évènements scroll problématique.
|
||||
function applyScroll(top: number) {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
suppressed = true
|
||||
if (suppressTimer) clearTimeout(suppressTimer)
|
||||
suppressTimer = setTimeout(() => { suppressed = false }, 100)
|
||||
el.scrollTop = top
|
||||
}
|
||||
|
||||
function readCentered() {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
centeredIndex.value = valueIndexFromScroll(el.scrollTop, options.itemHeight, options.length)
|
||||
}
|
||||
|
||||
function settle() {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
readCentered()
|
||||
options.onChange(centeredIndex.value)
|
||||
const corrected = loopCorrection(el.scrollTop, options.itemHeight, options.length)
|
||||
if (corrected !== el.scrollTop) applyScroll(corrected)
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if (suppressed) return
|
||||
readCentered()
|
||||
if (scrollEndTimer) clearTimeout(scrollEndTimer)
|
||||
scrollEndTimer = setTimeout(settle, 120)
|
||||
}
|
||||
|
||||
function scrollToIndex(index: number) {
|
||||
centeredIndex.value = index
|
||||
applyScroll(scrollTopForValueIndex(index, options.itemHeight, options.length))
|
||||
options.onChange(index)
|
||||
}
|
||||
|
||||
function step(delta: number) {
|
||||
const next = (((centeredIndex.value + delta) % options.length) + options.length) % options.length
|
||||
scrollToIndex(next)
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
step(-1)
|
||||
}
|
||||
else if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
step(1)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
el.addEventListener('scroll', onScroll, {passive: true})
|
||||
applyScroll(scrollTopForValueIndex(options.initialIndex(), options.itemHeight, options.length))
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
containerRef.value?.removeEventListener('scroll', onScroll)
|
||||
if (scrollEndTimer) clearTimeout(scrollEndTimer)
|
||||
if (suppressTimer) clearTimeout(suppressTimer)
|
||||
})
|
||||
|
||||
return {centeredIndex, scrollToIndex, step, onKeydown}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import TimeWheel from './TimeWheel.vue'
|
||||
|
||||
const HOURS = Array.from({length: 24}, (_, i) => i)
|
||||
|
||||
const mountWheel = (modelValue = 9) =>
|
||||
mount(TimeWheel, {
|
||||
props: {modelValue, values: HOURS, ariaLabel: 'Heures'},
|
||||
attachTo: document.body,
|
||||
})
|
||||
|
||||
describe('MalioTimeWheel', () => {
|
||||
it('expose le rôle spinbutton et les attributs aria', () => {
|
||||
const wrapper = mountWheel(9)
|
||||
const el = wrapper.get('[role="spinbutton"]')
|
||||
expect(el.attributes('aria-label')).toBe('Heures')
|
||||
expect(el.attributes('aria-valuenow')).toBe('9')
|
||||
expect(el.attributes('aria-valuemin')).toBe('0')
|
||||
expect(el.attributes('aria-valuemax')).toBe('23')
|
||||
expect(el.attributes('aria-valuetext')).toBe('09')
|
||||
})
|
||||
|
||||
it('rend 3 copies des valeurs (buffer infini)', () => {
|
||||
const wrapper = mountWheel()
|
||||
expect(wrapper.findAll('[data-test="wheel-item"]')).toHaveLength(24 * 3)
|
||||
})
|
||||
|
||||
it('émet la nouvelle valeur au clavier ArrowDown', async () => {
|
||||
const wrapper = mountWheel(9)
|
||||
await wrapper.get('[role="spinbutton"]').trigger('keydown', {key: 'ArrowDown'})
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([10])
|
||||
})
|
||||
|
||||
it('émet la valeur cliquée', async () => {
|
||||
const wrapper = mountWheel(9)
|
||||
const item = wrapper.findAll('[data-test="wheel-item"]').find((w) => w.text() === '11')!
|
||||
await item.trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([11])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div
|
||||
ref="container"
|
||||
class="malio-wheel relative h-[160px] w-14 snap-y snap-mandatory overflow-y-scroll"
|
||||
role="spinbutton"
|
||||
:tabindex="0"
|
||||
:aria-label="ariaLabel"
|
||||
:aria-valuenow="modelValue"
|
||||
:aria-valuemin="values[0]"
|
||||
:aria-valuemax="values[values.length - 1]"
|
||||
:aria-valuetext="pad(modelValue)"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<button
|
||||
v-for="item in buffer"
|
||||
:key="item.key"
|
||||
type="button"
|
||||
data-test="wheel-item"
|
||||
class="flex h-8 w-full snap-center items-center justify-center leading-none outline-none transition-all"
|
||||
:class="itemClass(item.flat)"
|
||||
tabindex="-1"
|
||||
@click="onItemClick(item.value)"
|
||||
>
|
||||
{{ pad(item.value) }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {useInfiniteWheel} from '../composables/useInfiniteWheel'
|
||||
import {padSegment} from '../composables/timeFormat'
|
||||
|
||||
defineOptions({name: 'MalioTimeWheel', inheritAttrs: false})
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number
|
||||
values: number[]
|
||||
ariaLabel: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: number): void}>()
|
||||
|
||||
const ITEM_HEIGHT = 32
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
|
||||
const pad = (value: number) => padSegment(value)
|
||||
const indexOfValue = (value: number) => Math.max(0, props.values.indexOf(value))
|
||||
|
||||
const {centeredIndex, scrollToIndex, onKeydown} = useInfiniteWheel(container, {
|
||||
length: props.values.length,
|
||||
itemHeight: ITEM_HEIGHT,
|
||||
initialIndex: () => indexOfValue(props.modelValue),
|
||||
onChange: (index) => emit('update:modelValue', props.values[index]),
|
||||
})
|
||||
|
||||
const buffer = computed(() =>
|
||||
[0, 1, 2].flatMap((copy) =>
|
||||
props.values.map((value, i) => {
|
||||
const flat = copy * props.values.length + i
|
||||
return {value, flat, key: flat}
|
||||
}),
|
||||
),
|
||||
)
|
||||
|
||||
// Taille décroissante avec la distance au centre (effet molette iOS).
|
||||
const itemClass = (flat: number) => {
|
||||
const distance = Math.abs(flat - (props.values.length + centeredIndex.value))
|
||||
if (distance === 0) return 'text-[16px] font-medium text-black'
|
||||
if (distance === 1) return 'text-[14px] text-m-muted'
|
||||
return 'text-[12px] text-m-muted'
|
||||
}
|
||||
|
||||
const onItemClick = (value: number) => scrollToIndex(indexOfValue(value))
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
if (props.values[centeredIndex.value] !== value) scrollToIndex(indexOfValue(value))
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.malio-wheel {
|
||||
scrollbar-width: none;
|
||||
/* Estompe les valeurs en haut et en bas (effet molette iOS) pour qu'elles ne
|
||||
débordent pas visuellement du cadre. */
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
|
||||
}
|
||||
.malio-wheel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import TimeWheels from './TimeWheels.vue'
|
||||
import TimeWheel from './TimeWheel.vue'
|
||||
|
||||
const mountWheels = (modelValue = '09:30') =>
|
||||
mount(TimeWheels, {props: {modelValue}, attachTo: document.body})
|
||||
|
||||
describe('MalioTimeWheels', () => {
|
||||
it('rend deux molettes (heures + minutes) et un séparateur', () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels).toHaveLength(2)
|
||||
expect(wheels[0].props('ariaLabel')).toBe('Heures')
|
||||
expect(wheels[1].props('ariaLabel')).toBe('Minutes')
|
||||
expect(wrapper.text()).toContain(':')
|
||||
})
|
||||
|
||||
it('splitte modelValue vers les bonnes molettes', () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels[0].props('modelValue')).toBe(9)
|
||||
expect(wheels[1].props('modelValue')).toBe(30)
|
||||
})
|
||||
|
||||
it('recompose et émet HH:MM quand l\'heure change', async () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
wheels[0].vm.$emit('update:modelValue', 14)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['14:30'])
|
||||
})
|
||||
|
||||
it('recompose et émet HH:MM quand la minute change', async () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
wheels[1].vm.$emit('update:modelValue', 5)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['09:05'])
|
||||
})
|
||||
|
||||
it('par défaut 00:00 quand modelValue est vide', () => {
|
||||
const wrapper = mountWheels('')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels[0].props('modelValue')).toBe(0)
|
||||
expect(wheels[1].props('modelValue')).toBe(0)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div
|
||||
data-test="time-wheels"
|
||||
class="relative flex items-center justify-center gap-3 py-2"
|
||||
>
|
||||
<!-- bande centrale (overlay, traverse les 2 colonnes) -->
|
||||
<div
|
||||
class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-8 mx-3 -translate-y-1/2 rounded-lg bg-m-primary-light"
|
||||
/>
|
||||
|
||||
<MalioTimeWheel
|
||||
:model-value="hours"
|
||||
:values="HOURS"
|
||||
aria-label="Heures"
|
||||
class="relative z-10"
|
||||
@update:model-value="onHours"
|
||||
/>
|
||||
|
||||
<span class="relative z-10 text-[14px] font-bold text-black">:</span>
|
||||
|
||||
<MalioTimeWheel
|
||||
:model-value="minutes"
|
||||
:values="MINUTES"
|
||||
aria-label="Minutes"
|
||||
class="relative z-10"
|
||||
@update:model-value="onMinutes"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed} from 'vue'
|
||||
import MalioTimeWheel from './TimeWheel.vue'
|
||||
import {formatTime, parseTime} from '../composables/timeFormat'
|
||||
|
||||
defineOptions({name: 'MalioTimeWheels', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{modelValue?: string | null}>(),
|
||||
{modelValue: ''},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>()
|
||||
|
||||
const HOURS = Array.from({length: 24}, (_, i) => i)
|
||||
const MINUTES = Array.from({length: 60}, (_, i) => i)
|
||||
|
||||
const parts = computed(() => parseTime(props.modelValue) ?? {hours: 0, minutes: 0})
|
||||
const hours = computed(() => parts.value.hours)
|
||||
const minutes = computed(() => parts.value.minutes)
|
||||
|
||||
const onHours = (value: number) => emit('update:modelValue', formatTime(value, minutes.value))
|
||||
const onMinutes = (value: number) => emit('update:modelValue', formatTime(hours.value, value))
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<Story title="Disclosure/Accordion">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Multiple (filtres) — défaut</h2>
|
||||
<MalioAccordion v-model="multiple">
|
||||
<MalioAccordionItem title="Prix" value="prix">
|
||||
<p>Slider de prix ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Catégorie" value="cat">
|
||||
<p>Liste de checkboxes ici…</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Marque" value="marque">
|
||||
<p>Recherche + liste ici…</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
|
||||
<MalioAccordion v-model="single" mode="single">
|
||||
<MalioAccordionItem title="Question 1" value="q1">
|
||||
<p>Réponse 1</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Question 2" value="q2">
|
||||
<p>Réponse 2</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
|
||||
<MalioAccordion>
|
||||
<MalioAccordionItem title="Active" value="ok">
|
||||
<p>Contenu accessible</p>
|
||||
</MalioAccordionItem>
|
||||
<MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
|
||||
<p>Inaccessible</p>
|
||||
</MalioAccordionItem>
|
||||
</MalioAccordion>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<docs lang="md">
|
||||
# MalioAccordion
|
||||
|
||||
Accordéon compositionnel : un parent `MalioAccordion` qui enveloppe des
|
||||
`MalioAccordionItem`. Conçu pour des systèmes de filtres (plusieurs sections
|
||||
dépliées simultanément) comme pour des FAQ (une seule section ouverte).
|
||||
|
||||
---
|
||||
|
||||
## Props — MalioAccordion
|
||||
|
||||
### mode
|
||||
- Type: `'single' | 'multiple'`
|
||||
- Défaut: `'multiple'`
|
||||
- Description: `multiple` autorise plusieurs panneaux ouverts ; `single` ferme les autres à l'ouverture.
|
||||
|
||||
### modelValue
|
||||
- Type: `string | string[]`
|
||||
- Description: clés ouvertes. `string[]` en mode `multiple`, `string` en mode `single`. Sans v-model, état interne (non contrôlé).
|
||||
|
||||
### id
|
||||
- Type: `string`
|
||||
- Description: préfixe des IDs d'accessibilité. Auto-généré si absent.
|
||||
|
||||
### groupClass
|
||||
- Type: `string`
|
||||
- Description: classes du conteneur, fusionnées via `twMerge`.
|
||||
|
||||
---
|
||||
|
||||
## Props — MalioAccordionItem
|
||||
|
||||
### title
|
||||
- Type: `string` (requis) — texte de l'en-tête.
|
||||
|
||||
### value
|
||||
- Type: `string` — clé unique de la section (recommandée pour piloter le v-model). Auto-générée si absente.
|
||||
|
||||
### defaultOpen
|
||||
- Type: `boolean` — défaut `false`. Ouvre la section au montage (mode non contrôlé uniquement).
|
||||
|
||||
### disabled
|
||||
- Type: `boolean` — défaut `false`. En-tête non cliquable.
|
||||
|
||||
### headerClass / panelClass
|
||||
- Type: `string` — override des classes de l'en-tête / du panneau (`twMerge`).
|
||||
|
||||
---
|
||||
|
||||
## Slots
|
||||
|
||||
Slot par défaut de `MalioAccordionItem` = contenu du panneau.
|
||||
|
||||
---
|
||||
|
||||
## Accessibilité
|
||||
|
||||
- En-tête = `<button>` natif, `aria-expanded`, `aria-controls`.
|
||||
- Panneau `role="region"` + `aria-labelledby`.
|
||||
- Sections désactivées : `disabled` + `aria-disabled`.
|
||||
- Navigation clavier ↑/↓ entre les en-têtes.
|
||||
|
||||
---
|
||||
|
||||
## Events
|
||||
|
||||
### update:modelValue
|
||||
- Émis à chaque bascule. Retourne `string[]` (mode `multiple`) ou `string` (mode `single`, `''` si tout fermé).
|
||||
</docs>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioAccordion from '../../components/malio/accordion/Accordion.vue'
|
||||
import MalioAccordionItem from '../../components/malio/accordion/AccordionItem.vue'
|
||||
|
||||
defineOptions({ name: 'AccordionStory' })
|
||||
|
||||
const multiple = ref<string[]>(['prix'])
|
||||
const single = ref('q1')
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<Story title="Date/Date">
|
||||
<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>
|
||||
<MalioDate
|
||||
v-model="simpleValue"
|
||||
label="Date de naissance"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Date du jour"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDate
|
||||
v-model="boundedValue"
|
||||
label="Date du rendez-vous"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Date verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Lecture seule"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDate
|
||||
v-model="errorValue"
|
||||
label="Date limite"
|
||||
error="Date invalide"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
||||
<MalioDate
|
||||
v-model="initialValue"
|
||||
label="Date confirmée"
|
||||
success="Enregistrée"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDate from '../../components/malio/date/Date.vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>(todayIso)
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<Story title="Date/DateRange">
|
||||
<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>
|
||||
<MalioDateRange
|
||||
v-model="simpleValue"
|
||||
label="Période"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateRange
|
||||
v-model="initialValue"
|
||||
label="Séjour"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateRange
|
||||
v-model="boundedValue"
|
||||
label="Plage bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDateRange
|
||||
v-model="initialValue"
|
||||
label="Période verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateRange
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateRange
|
||||
v-model="errorValue"
|
||||
label="Période"
|
||||
error="Période invalide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateRange from '../../components/malio/date/DateRange.vue'
|
||||
|
||||
type RangeValue = {start: string; end: string}
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const simpleValue = ref<RangeValue | null>(null)
|
||||
const initialValue = ref<RangeValue | null>({start: todayIso, end: maxIso})
|
||||
const boundedValue = ref<RangeValue | null>(null)
|
||||
const errorValue = ref<RangeValue | null>(null)
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<Story title="Date/DateTime">
|
||||
<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>
|
||||
<MalioDateTime
|
||||
v-model="simpleValue"
|
||||
label="Date et heure"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateTime
|
||||
v-model="initialValue"
|
||||
label="Rendez-vous"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateTime
|
||||
v-model="boundedValue"
|
||||
label="Créneau"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +30 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateTime
|
||||
v-model="errorValue"
|
||||
label="Date limite"
|
||||
error="Date et heure requises"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateTime
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
|
||||
<MalioDateTime
|
||||
v-model="initialValue"
|
||||
label="Lecture seule"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateTime from '../../components/malio/date/DateTime.vue'
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T00:00:00`
|
||||
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>('2026-05-20T14:30:00')
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<Story title="Date/DateWeek">
|
||||
<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>
|
||||
<MalioDateWeek
|
||||
v-model="simpleValue"
|
||||
label="Semaine"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine de livraison"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
|
||||
<MalioDateWeek
|
||||
v-model="boundedValue"
|
||||
label="Semaine bornée"
|
||||
:min="todayIso"
|
||||
:max="maxIso"
|
||||
hint="Entre aujourd'hui et +60 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Semaine verrouillée"
|
||||
:clearable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Désactivé</h2>
|
||||
<MalioDateWeek
|
||||
v-model="initialValue"
|
||||
label="Désactivé"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border p-4">
|
||||
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
||||
<MalioDateWeek
|
||||
v-model="errorValue"
|
||||
label="Semaine"
|
||||
error="Semaine invalide"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import MalioDateWeek from '../../components/malio/date/DateWeek.vue'
|
||||
|
||||
const simpleValue = ref<string | null>(null)
|
||||
const initialValue = ref<string | null>('2026-W21')
|
||||
const boundedValue = ref<string | null>(null)
|
||||
const errorValue = ref<string | null>(null)
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
||||
const now = new Date()
|
||||
const todayIso = toIso(now)
|
||||
const maxIso = toIso(new Date(now.getTime() + 60 * 86400000))
|
||||
</script>
|
||||
@@ -1,20 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineOptions({ name: 'DrawerStory' })
|
||||
|
||||
const showRight = ref(false)
|
||||
const showLeft = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showNoDismiss = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Overlay/Drawer">
|
||||
<Variant title="Simple">
|
||||
<Variant title="Droite (défaut)">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showSimple = true"
|
||||
@click="showRight = true"
|
||||
>
|
||||
Ouvrir le drawer
|
||||
Ouvrir à droite
|
||||
</button>
|
||||
<MalioDrawer v-model="showSimple" title="Détails">
|
||||
<MalioDrawer v-model="showRight">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu simple du drawer.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Avec formulaire">
|
||||
<Variant title="Gauche">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showLeft = true"
|
||||
>
|
||||
Ouvrir à gauche
|
||||
</button>
|
||||
<MalioDrawer v-model="showLeft" side="left">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Navigation</h2>
|
||||
</template>
|
||||
<p>Ce drawer glisse depuis la gauche.</p>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Avec footer d'actions">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@@ -22,102 +53,36 @@
|
||||
>
|
||||
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" />
|
||||
<MalioDrawer v-model="showForm">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
|
||||
</template>
|
||||
</MalioDrawer>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Sans bouton fermer">
|
||||
<Variant title="Non dismissable">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showNoClose = true"
|
||||
@click="showNoDismiss = true"
|
||||
>
|
||||
Ouvrir (sans croix)
|
||||
Ouvrir
|
||||
</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 v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Action requise</h2>
|
||||
</template>
|
||||
<p>Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</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>
|
||||
|
||||
@@ -0,0 +1,294 @@
|
||||
<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>
|
||||
@@ -0,0 +1,261 @@
|
||||
<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>
|
||||
@@ -0,0 +1,285 @@
|
||||
<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>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineOptions({ name: 'ModalStory' })
|
||||
|
||||
const showBase = ref(false)
|
||||
const showForm = ref(false)
|
||||
const showNoDismiss = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story title="Overlay/Modal">
|
||||
<Variant title="Simple">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showBase = true"
|
||||
>
|
||||
Ouvrir
|
||||
</button>
|
||||
<MalioModal v-model="showBase">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Détails</h2>
|
||||
</template>
|
||||
<p>Contenu simple de la modal.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Avec footer d'actions">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showForm = true"
|
||||
>
|
||||
Ouvrir le formulaire
|
||||
</button>
|
||||
<MalioModal v-model="showForm" modal-class="max-w-lg">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Nouveau contact</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<MalioInputText label="Nom" />
|
||||
<MalioInputText label="Prénom" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
|
||||
</template>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Non dismissable">
|
||||
<div class="p-4">
|
||||
<button
|
||||
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
||||
@click="showNoDismiss = true"
|
||||
>
|
||||
Ouvrir
|
||||
</button>
|
||||
<MalioModal v-model="showNoDismiss" :dismissable="false" :close-on-escape="false">
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Action requise</h2>
|
||||
</template>
|
||||
<p>Ni le backdrop ni Échap ne ferment cette modal. Utilisez la croix.</p>
|
||||
</MalioModal>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user