tristan
f3e298e03b
| 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é Reviewed-on: #49 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
90 lines
3.9 KiB
Vue
90 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
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 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">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">Avec footer collant</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" />
|
|
</div>
|
|
<template #footer>
|
|
<div class="sticky bottom-0 flex gap-3 bg-white py-4">
|
|
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
|
|
<MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
|
|
</div>
|
|
</template>
|
|
</MalioDrawer>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-6">
|
|
<h2 class="mb-6 text-xl font-bold">Avec footer fixed bottom</h2>
|
|
<MalioButton label="Ouvrir (footer fixe)" variant="tertiary" @click="drawerFixedFooter = true" />
|
|
<MalioDrawer v-model="drawerFixedFooter">
|
|
<template #header>
|
|
<h2 class="text-[24px] font-bold text-black">Conditions</h2>
|
|
</template>
|
|
<!-- pb-24 : laisse la place au footer fixe qui sort du flux et recouvrirait le bas du contenu -->
|
|
<div class="flex flex-col gap-4 pb-24">
|
|
<p v-for="n in 12" :key="n" class="text-m-text">
|
|
Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que le footer reste fixé en bas du viewport.
|
|
</p>
|
|
</div>
|
|
<template #footer>
|
|
<!-- fixed : positionné par rapport au viewport ; w-full max-w-md cale la largeur sur le drawer droite par défaut -->
|
|
<div class="fixed bottom-0 right-0 w-full max-w-md border-t border-m-border bg-white px-5 py-4">
|
|
<MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
|
|
</div>
|
|
</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>
|
|
</template>
|