tristan
7ca5c5f4c5
All checks were successful
Release / release (push) Successful in 1m25s
| 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: matthieu <matthieu@yuno.malio.fr> Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Reviewed-on: #51 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
91 lines
2.6 KiB
Vue
91 lines
2.6 KiB
Vue
<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="Droite (défaut)">
|
|
<div class="p-4">
|
|
<button
|
|
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
|
@click="showRight = true"
|
|
>
|
|
Ouvrir à droite
|
|
</button>
|
|
<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="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 collant">
|
|
<div class="p-4">
|
|
<button
|
|
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
|
@click="showForm = true"
|
|
>
|
|
Ouvrir le formulaire
|
|
</button>
|
|
<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>
|
|
<div class="sticky bottom-0 flex gap-3 bg-white py-4">
|
|
<MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
|
|
</div>
|
|
</template>
|
|
</MalioDrawer>
|
|
</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>
|
|
<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>
|