arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-03 13:47:55 +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

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

@@ -1,7 +1,6 @@
<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"
@@ -28,15 +27,13 @@
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"
padded
v-bind="$attrs" v-bind="$attrs"
> >
<template v-if="$slots.header" #header> <template v-if="$slots.header" #header>
@@ -52,7 +49,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</Dialog> </Dialog>
</TransitionRoot> </TransitionRoot>
</template> </template>
@@ -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
) )
}) })