mirror of
https://github.com/unraid/api.git
synced 2026-01-07 17:19:52 -06:00
52 lines
2.3 KiB
Vue
52 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @fix Modal closes when clicking inside the modal
|
|
*/
|
|
import { Dialog, DialogPanel, DialogTitle, DialogDescription, TransitionChild, TransitionRoot } from '@headlessui/vue';
|
|
import { CheckIcon, XMarkIcon } from '@heroicons/vue/24/outline';
|
|
|
|
export interface Props {
|
|
description?: string;
|
|
maxWidth?: string;
|
|
open?: boolean;
|
|
showCloseX?: boolean;
|
|
title?: string;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
maxWidth: 'sm:max-w-lg',
|
|
open: false,
|
|
showCloseX: false,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<TransitionRoot as="template" :show="open">
|
|
<Dialog as="div" class="relative z-[99999]">
|
|
<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 z-0 bg-black bg-opacity-50 transition-opacity" />
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 z-10 overflow-y-auto">
|
|
<div class="flex min-h-full items-end 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">
|
|
<DialogPanel :class="maxWidth" class="text-beta bg-alpha relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6">
|
|
<DialogTitle v-if="title">{{ title }}</DialogTitle>
|
|
<DialogDescription v-if="description">{{ description }}</DialogDescription>
|
|
|
|
<div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
|
|
<button type="button" class="rounded-md bg-alpha text-gray-400 p-2 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="$emit('close')">
|
|
<span class="sr-only">Close</span>
|
|
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<slot />
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
</template>
|