mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-02-18 05:58:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: modal animation

Browse Source
This commit is contained in:
Zack Spear
2023-06-07 11:06:41 -07:00
parent 2042d8962b
commit 59cda3a865
1 changed files with 40 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/Modal.vue
View File

@@ -39,21 +39,47 @@ onBeforeUnmount(() => {
</script>
<template>
<div v-if="open" @keyup.esc="closeModal" ref="trapRef" class="fixed inset-0 z-10 overflow-y-auto" role="dialog" aria-dialog="true" :aria-labelledby="ariaLablledById" tabindex="-1">
<div @click="closeModal" class="fixed inset-0 z-0 bg-black bg-opacity-50 transition-opacity" />
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div :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">
<div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
<button @click="closeModal" 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">
<span class="sr-only">Close</span>
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<TransitionRoot appear :show="open" as="template">
<div @keyup.esc="closeModal" ref="trapRef" class="fixed inset-0 z-10 overflow-y-auto" role="dialog" aria-dialog="true" :aria-labelledby="ariaLablledById" tabindex="-1">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0"
enter-to="opacity-100"
leave="duration-200 ease-in"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div
@click="closeModal"
class="fixed inset-0 z-0 bg-black bg-opacity-50 transition-opacity"
title="Click to close modal"
/>
</TransitionChild>
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100"
leave="duration-200 ease-in"
leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95"
>
<div :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">
<div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
<button @click="closeModal" 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">
<span class="sr-only">Close</span>
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<h1 v-if="title" :id="ariaLablledById">{{ title }}</h1>
<h2 v-if="description">{{ description }}</h2>
<slot />
<h1 v-if="title" :id="ariaLablledById">{{ title }}</h1>
<h2 v-if="description">{{ description }}</h2>
<slot />
</div>
</TransitionChild>
</div>
</div>
</div>
</TransitionRoot>
</template>