tristan
280b650e49
Le slot #footer était rendu à l'intérieur du body overflow-y-auto, ce qui faisait courir la scrollbar sur toute la hauteur, derrière le footer. Il est désormais frère du body (comme MalioModal) : seul le body défile et le footer reste fixé en bas. Tests, story, pages playground et doc alignés. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<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>
|