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

fix(Modal): move classes to DialogPanel

Browse Source
This commit is contained in:
Benjamin Canac
2022-04-28 15:05:51 +02:00
parent 6532b4bfdd
commit dfe86f0baf
1 changed files with 51 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,55 +1,51 @@
<template> <template>
<TransitionRoot :appear="appear" :show="isOpen" as="template"> <TransitionRoot :appear="appear" :show="isOpen" as="template">
<Dialog @close="close"> <Dialog class="relative z-20" @close="close">
<div class="fixed z-20 inset-0 overflow-y-auto"> <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <TransitionChild
<TransitionChild as="template"
as="template" :appear="appear"
:appear="appear" enter="ease-out duration-300"
enter="ease-out duration-300" enter-from="opacity-0"
enter-from="opacity-0" enter-to="opacity-100"
enter-to="opacity-100" leave="ease-in duration-200"
leave="ease-in duration-200" leave-from="opacity-100"
leave-from="opacity-100" leave-to="opacity-0"
leave-to="opacity-0" >
> <div 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>
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto"> <div class="fixed inset-0 overflow-y-auto">
<div class="flex min-h-full items-center justify-center p-4 text-center"> <div class="flex min-h-full items-center justify-center p-4 text-center">
<TransitionChild <TransitionChild
as="template" as="template"
:appear="appear" :appear="appear"
enter="ease-out duration-300" enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100" enter-to="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100" leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<DialogPanel> <DialogPanel :class="modalClass">
<Card <Card
:base-class="baseClass" base-class
:background-class="backgroundClass" background-class
:shadow-class="shadowClass" shadow-class
:ring-class="ringClass" ring-class
:rounded-class="roundedClass" rounded-class
:class="modalClass" v-bind="$attrs"
padded >
v-bind="$attrs" <template v-if="$slots.header" #header>
> <slot name="header" />
<template v-if="$slots.header" #header> </template>
<slot name="header" /> <slot />
</template> <template v-if="$slots.footer" #footer>
<slot /> <slot name="footer" />
<template v-if="$slots.footer" #footer> </template>
<slot name="footer" /> </Card>
</template> </DialogPanel>
</Card> </TransitionChild>
</DialogPanel>
</TransitionChild>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -123,7 +119,12 @@ export default {
const modalClass = computed(() => { const modalClass = computed(() => {
return classNames( return classNames(
`sm:${props.widthClass}` props.baseClass,
`sm:${props.widthClass}`,
props.backgroundClass,
props.shadowClass,
props.ringClass,
props.roundedClass
) )
}) })