75 lines
3.0 KiB
Vue
75 lines
3.0 KiB
Vue
<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>
|