tristan
b55050b2ad
Release / release (push) Successful in 1m36s
## Description Deux changements regroupés : ### 1. Nouveau token Tailwind partagé `w-m-btn-action` (150px) Exposé via `tailwind.config.ts` du layer + CSS var `--m-btn-action-width` dans `malio.css`. Utilisable côté projet consommateur pour les boutons d'action (`<MalioButton button-class="w-m-btn-action" />`), et themable en redéfinissant la CSS var dans son propre `:root`. Convention alignée sur les couleurs `m-btn-primary` / `m-btn-secondary` / `m-btn-danger` (préfixe `m-btn-`). ### 2. Fix alignement pagination DataTable Régression visuelle après l'introduction du `min-h-[1rem]` sur la zone message du MalioSelect (qui ajoute ~20px sous le field). La barre pagination du DataTable embarquait un MalioSelect pour le `perPage` à côté d'éléments centrés (span « Lignes : » + nav boutons Prev/Page/Next), faisant dériver l'alignement vertical. **Fix** : - La barre pagination passe en `items-center` - Le MalioSelect du sélecteur perPage est encapsulé dans un wrapper `h-12` qui borne sa taille flex à la hauteur du field — le slot vide déborde invisiblement en dessous - Tous les centres alignés exactement sur le field (y=24) ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée (34/34 tests DataTable OK) - [x] TU/TI/TF OK - [x] CHANGELOG modifié 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: matthieu <matthieu@yuno.malio.fr> Reviewed-on: #59 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
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-m-btn-action"
|
|
@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>
|