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

chore(Modal): handle transition disable

Browse Source
This commit is contained in:
Benjamin Canac
2022-09-16 17:43:43 +02:00
parent 74de5b106b
commit 38f248c24d
2 changed files with 70 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,53 +1,41 @@
<template>
<TransitionRoot :appear="appear" :show="isOpen" as="template">
<Dialog class="relative z-50" @close="close">
<div :class="wrapperClass">
<TransitionChild
v-if="overlay"
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 transition-opacity" :class="overlayClass" />
</TransitionChild>
<TransitionChild
v-if="overlay"
as="template"
:appear="appear"
v-bind="overlayTransition"
>
<div class="fixed inset-0 transition-opacity" :class="overlayClass" />
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto">
<div :class="containerClass">
<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 :class="wrapperClass">
<div :class="containerClass">
<TransitionChild
as="template"
:appear="appear"
v-bind="modalTransition"
>
<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>
</Dialog>
@@ -109,6 +97,10 @@ const props = defineProps({
widthClass: {
type: String,
default: () => $ui.modal.width
},
transition: {
type: Boolean,
default: true
}
})
@@ -134,6 +126,36 @@ const modalClass = computed(() => {
)
})
const overlayTransition = computed(() => {
if (!props.transition) {
return {}
}
return {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0',
enterTo: 'opacity-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100',
leaveTo: 'opacity-0'
}
})
const modalTransition = computed(() => {
if (!props.transition) {
return {}
}
return {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
enterTo: 'opacity-100 translate-y-0 sm:scale-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
}
})
function close (value: boolean) {
isOpen.value = value
emit('close')

4
src/runtime/presets/default.ts
View File

@@ -244,8 +244,8 @@ export default (variantColors: string[]) => {
}
const modal = {
wrapper: 'flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0',
container: 'flex min-h-full items-end sm:items-center justify-center p-4 text-center',
wrapper: 'fixed inset-0 overflow-y-auto',
container: 'flex min-h-full items-end sm:items-center justify-center p-4 sm:p-0 text-center',
base: 'relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle w-full',
background: 'u-bg-white',
overlay: 'bg-gray-500/75 dark:bg-gray-600/75',