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

fix(Modal/Slideover): bind transition class to TransitionChild for Vue 3.5 (#2227)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
anthonyfranc
2024-09-20 10:03:46 -04:00
committed by GitHub
parent 0a054a52b6
commit 803c20ad92
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
<template> <template>
<TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave"> <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
<HDialog :class="ui.wrapper" v-bind="attrs" @close="close"> <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition"> <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
<div :class="[ui.overlay.base, ui.overlay.background]" /> <div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild> </TransitionChild>
<div :class="ui.inner"> <div :class="ui.inner">
<div :class="[ui.container, !fullscreen && ui.padding]"> <div :class="[ui.container, !fullscreen && ui.padding]">
<TransitionChild as="template" :appear="appear" v-bind="transitionClass"> <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
<HDialogPanel <HDialogPanel
:class="[ :class="[
ui.base, ui.base,
@@ -97,7 +97,7 @@ export default defineComponent({
const transitionClass = computed(() => { const transitionClass = computed(() => {
if (!props.transition) { if (!props.transition) {
return {} return {} as typeof ui.value.transition
} }
return { return {

12
src/runtime/components/overlays/Slideover.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave"> <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
<HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" v-bind="attrs" @close="close"> <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" v-bind="attrs" @close="close">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition"> <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
<div :class="[ui.overlay.base, ui.overlay.background]" /> <div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild> </TransitionChild>
<TransitionChild as="template" :appear="appear" v-bind="transitionClass"> <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
<HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.rounded, ui.padding, ui.shadow]"> <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.rounded, ui.padding, ui.shadow]">
<slot /> <slot />
</HDialogPanel> </HDialogPanel>
@@ -86,7 +86,12 @@ export default defineComponent({
const transitionClass = computed(() => { const transitionClass = computed(() => {
if (!props.transition) { if (!props.transition) {
return {} return {} as typeof ui.value.transition & {
enterFrom: string
enterTo: string
leaveFrom: string
leaveTo: string
}
} }
let enterFrom, leaveTo let enterFrom, leaveTo
@@ -120,6 +125,7 @@ export default defineComponent({
leaveTo leaveTo
} }
}) })
const sideType = computed(() => { const sideType = computed(() => {
switch (props.side) { switch (props.side) {
case 'left': case 'left':