71 lines
2.0 KiB
Vue
71 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
defineOptions({ name: 'ModalStory' })
|
|
|
|
const showBase = ref(false)
|
|
const showForm = ref(false)
|
|
const showNoDismiss = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<Story title="Overlay/Modal">
|
|
<Variant title="Simple">
|
|
<div class="p-4">
|
|
<button
|
|
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
|
@click="showBase = true"
|
|
>
|
|
Ouvrir
|
|
</button>
|
|
<MalioModal v-model="showBase">
|
|
<template #header>
|
|
<h2 class="text-xl font-bold">Détails</h2>
|
|
</template>
|
|
<p>Contenu simple de la modal.</p>
|
|
</MalioModal>
|
|
</div>
|
|
</Variant>
|
|
|
|
<Variant title="Avec footer d'actions">
|
|
<div class="p-4">
|
|
<button
|
|
class="rounded bg-m-btn-primary px-4 py-2 text-white"
|
|
@click="showForm = true"
|
|
>
|
|
Ouvrir le formulaire
|
|
</button>
|
|
<MalioModal v-model="showForm" modal-class="max-w-lg">
|
|
<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>
|
|
<MalioButton label="Enregistrer" button-class="flex-1" @click="showForm = false" />
|
|
</template>
|
|
</MalioModal>
|
|
</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>
|
|
<MalioModal 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 cette modal. Utilisez la croix.</p>
|
|
</MalioModal>
|
|
</div>
|
|
</Variant>
|
|
</Story>
|
|
</template>
|