feat: Ajout des composants modal, accordeon, datetime avec selecteur d'heure à la molette (#56)
Release / release (push) Successful in 2m38s
Release / release (push) Successful in 2m38s
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié --------- Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: matthieu <matthieu@yuno.malio.fr> Reviewed-on: #56 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #56.
This commit is contained in:
@@ -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,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="sticky bottom-0 flex justify-between gap-4 bg-white px-5 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>
|
||||
@@ -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>
|
||||
@@ -34,6 +34,7 @@ export const navSections: SidebarSection[] = [
|
||||
{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'},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -52,7 +53,9 @@ export const navSections: SidebarSection[] = [
|
||||
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'},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -69,6 +72,7 @@ export const navSections: SidebarSection[] = [
|
||||
{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'},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user