arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Modal): migrate by using DialogPanel

Browse Source
This commit is contained in:
Benjamin Canac
2022-04-28 12:44:33 +02:00
parent 5de5c07203
commit cde6b5037d
1 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/runtime/components/overlays/Modal.vue
View File

@@ -13,41 +13,44 @@
leave-from="opacity-100"
leave-to="opacity-0"
>
<DialogOverlay class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
<div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
</TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<TransitionChild
as="template"
:appear="appear"
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"
>
<Card
:base-class="baseClass"
:background-class="backgroundClass"
:shadow-class="shadowClass"
:ring-class="ringClass"
:rounded-class="roundedClass"
:class="modalClass"
padded
v-bind="$attrs"
>
<template v-if="$slots.header" #header>
<slot name="header" />
</template>
<slot />
<template v-if="$slots.footer" #footer>
<slot name="footer" />
</template>
</Card>
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto">
<div class="flex min-h-full items-center justify-center p-4 text-center">
<TransitionChild
as="template"
:appear="appear"
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>
<Card
:base-class="baseClass"
:background-class="backgroundClass"
:shadow-class="shadowClass"
:ring-class="ringClass"
:rounded-class="roundedClass"
:class="modalClass"
padded
v-bind="$attrs"
>
<template v-if="$slots.header" #header>
<slot name="header" />
</template>
<slot />
<template v-if="$slots.footer" #footer>
<slot name="footer" />
</template>
</Card>
</DialogPanel>
</TransitionChild>
</div>
</div>
</div>
</div>
</Dialog>
@@ -56,7 +59,7 @@
<script>
import { computed } from 'vue'
import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { classNames } from '../../utils/'
import Card from '../layout/Card'
import $ui from '#build/ui'
@@ -64,7 +67,7 @@ import $ui from '#build/ui'
export default {
components: {
Dialog,
DialogOverlay,
DialogPanel,
TransitionRoot,
TransitionChild,
Card