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

chore(Modal): add appear to transition child

Browse Source
This commit is contained in:
Benjamin Canac
2022-03-11 15:28:13 +01:00
parent fc2d17cbc3
commit c71fc69b4b
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,11 @@
<template> <template>
<TransitionRoot :appear="appear" :show="isOpen" as="template"> <TransitionRoot :appear="appear" :show="isOpen" as="template">
<Dialog @close="setIsOpen"> <Dialog @close="close">
<div class="fixed z-20 inset-0 overflow-y-auto"> <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"
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"
@@ -20,6 +21,7 @@
<TransitionChild <TransitionChild
as="template" as="template"
: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"
@@ -72,7 +74,7 @@ export default {
default: false default: false
} }
}, },
emits: ['update:modelValue'], emits: ['update:modelValue', 'close'],
setup (props, { emit }) { setup (props, { emit }) {
const isOpen = computed({ const isOpen = computed({
get () { get () {
@@ -85,11 +87,9 @@ export default {
return { return {
isOpen, isOpen,
setIsOpen (value) { close (value) {
isOpen.value = value isOpen.value = value
}, emit('close')
toggleIsOpen () {
isOpen.value = !isOpen.value
} }
} }
} }