mirror of
https://github.com/Drop-OSS/drop-base.git
synced 2025-11-10 04:22:15 +10:00
65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<template>
|
|
<TransitionRoot as="template" :show="open">
|
|
<Dialog class="relative z-50" @close="open = false">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="ease-out duration-300"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<div
|
|
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
|
|
/>
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
|
|
<div
|
|
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
|
|
>
|
|
<TransitionChild
|
|
as="template"
|
|
enter="ease-out duration-300"
|
|
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
|
leave="ease-in duration-200"
|
|
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
|
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
>
|
|
<div
|
|
:class="['relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full', props.sizeClass ?? 'sm:max-w-lg']"
|
|
>
|
|
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
|
|
<slot />
|
|
</div>
|
|
<div
|
|
class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
|
|
>
|
|
<slot name="buttons" :close="close" />
|
|
</div>
|
|
</div>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
TransitionChild,
|
|
TransitionRoot,
|
|
} from "@headlessui/vue";
|
|
|
|
const open = defineModel<boolean>();
|
|
const props = defineProps<{sizeClass?: string}>();
|
|
|
|
function close() {
|
|
open.value = false;
|
|
}
|
|
</script>
|