arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +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>
<TransitionRoot :appear="appear" :show="isOpen" as="template">
<Dialog @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">
<TransitionChild
as="template"
:appear="appear"
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-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
</TransitionChild>
<Dialog class="relative z-20" @close="close">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<TransitionChild
as="template"
:appear="appear"
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-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
</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 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 :class="modalClass">
<Card
base-class
background-class
shadow-class
ring-class
rounded-class
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>
@@ -123,7 +119,12 @@ export default {
const modalClass = computed(() => {
return classNames(
`sm:${props.widthClass}`
props.baseClass,
`sm:${props.widthClass}`,
props.backgroundClass,
props.shadowClass,
props.ringClass,
props.roundedClass
)
})