elk/components/modal/ModalDialog.vue

119 lines
2.4 KiB
Vue
Raw Normal View History

2022-11-23 03:48:01 +00:00
<script setup lang='ts'>
2022-11-27 01:52:46 +00:00
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
type DialogType = 'top' | 'right' | 'bottom' | 'left' | 'dialog'
const {
type = 'dialog',
} = defineProps<{
type?: DialogType
}>()
2022-11-23 03:48:01 +00:00
const { modelValue } = defineModel<{
modelValue: boolean
2022-11-27 03:13:39 +00:00
closeButton?: boolean
2022-11-23 03:48:01 +00:00
}>()
2022-11-24 08:04:53 +00:00
2022-11-27 03:13:39 +00:00
let isVisible = $ref(modelValue.value)
let isOut = $ref(!modelValue.value)
2022-11-27 01:52:46 +00:00
const positionClass = computed(() => {
switch (type) {
case 'dialog':
return 'border rounded top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2'
case 'bottom':
return 'bottom-0 left-0 right-0 border-t'
case 'top':
return 'top-0 left-0 right-0 border-b'
case 'left':
return 'bottom-0 left-0 top-0 border-r'
case 'right':
return 'bottom-0 top-0 right-0 border-l'
default:
return ''
}
})
2022-11-27 03:13:39 +00:00
const transformClass = computed(() => {
if (isOut) {
switch (type) {
case 'dialog':
return 'op0'
case 'bottom':
return 'translate-y-[100%]'
case 'top':
return 'translate-y-[100%]'
case 'left':
return 'translate-x-[-100%]'
case 'right':
return 'translate-x-[100%]'
default:
return ''
}
2022-11-27 01:52:46 +00:00
}
})
const target = ref<HTMLElement | null>(null)
const { activate, deactivate } = useFocusTrap(target)
2022-11-27 03:13:39 +00:00
function close() {
modelValue.value = false
}
2022-11-27 01:52:46 +00:00
watchEffect(() => {
if (modelValue)
activate()
else
deactivate()
})
2022-11-27 03:13:39 +00:00
useEventListener('keydown', (e: KeyboardEvent) => {
if (!modelValue.value)
return
if (e.key === 'Escape') {
close()
e.preventDefault()
}
2022-11-24 08:04:53 +00:00
})
2022-11-27 03:13:39 +00:00
watch(modelValue, async (v) => {
if (v) {
isOut = true
isVisible = true
setTimeout(() => {
isOut = false
}, 10)
}
else {
isOut = true
}
})
function onTransitionEnd() {
if (!modelValue.value)
isVisible = false
}
2022-11-23 03:48:01 +00:00
</script>
<template>
<div
2022-11-27 03:13:39 +00:00
v-if="isVisible"
2022-11-27 01:52:46 +00:00
fixed top-0 bottom-0 left-0 right-0 z-40
2022-11-23 03:48:01 +00:00
:class="modelValue ? '' : 'pointer-events-none'"
>
<div
2022-11-27 01:52:46 +00:00
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
2022-11-27 03:13:39 +00:00
:class="isOut ? 'opacity-0' : 'opacity-85'"
@click="close"
2022-11-23 03:48:01 +00:00
/>
<div
2022-11-27 03:13:39 +00:00
ref="target"
bg-base border-base absolute transition-all duration-200 ease-out transform
:class="`${positionClass} ${transformClass}`"
@transitionend="onTransitionEnd"
2022-11-23 03:48:01 +00:00
>
2022-11-27 03:13:39 +00:00
<slot />
2022-11-23 03:48:01 +00:00
</div>
</div>
</template>