elk/components/modal/ModalDialog.vue

214 lines
4.9 KiB
Vue
Raw Normal View History

2022-12-02 07:02:44 +00:00
<script lang="ts" setup>
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
2022-11-27 01:52:46 +00:00
2022-12-02 07:02:44 +00:00
export interface Props {
/**
* level of depth
*
* @default 100
*/
zIndex?: number
/**
* whether to allow close dialog by clicking mask layer
*
* @default true
*/
closeByMask?: boolean
/**
* use v-if, destroy all the internal elements after closed
*
* @default true
*/
useVIf?: boolean
/**
* keep the dialog opened even when in other views
*
* @default false
2022-12-02 07:27:44 +00:00
*/
2022-12-02 07:02:44 +00:00
keepAlive?: boolean
/**
* The aria-labelledby id for the dialog.
*/
dialogLabelledBy?: string
2022-12-02 07:02:44 +00:00
}
2022-12-02 07:27:44 +00:00
2022-12-02 07:02:44 +00:00
const props = withDefaults(defineProps<Props>(), {
zIndex: 100,
closeByMask: true,
useVIf: true,
keepAlive: false,
})
2022-11-27 01:52:46 +00:00
const emit = defineEmits<{
/** v-model dialog visibility */
(event: 'close',): void
2022-11-23 03:48:01 +00:00
}>()
2022-11-24 08:04:53 +00:00
2023-01-06 15:46:36 +00:00
const { modelValue: visible } = defineModel<{
/** v-model dislog visibility */
modelValue: boolean
}>()
2022-11-27 01:52:46 +00:00
2022-12-02 07:02:44 +00:00
const deactivated = useDeactivated()
const route = useRoute()
2022-11-27 01:52:46 +00:00
2022-12-02 07:02:44 +00:00
/** scrollable HTML element */
const elDialogMain = ref<HTMLDivElement>()
const elDialogRoot = ref<HTMLDivElement>()
2022-11-27 01:52:46 +00:00
const { activate } = useFocusTrap(elDialogRoot, {
immediate: false,
allowOutsideClick: true,
clickOutsideDeactivates: true,
escapeDeactivates: true,
2023-01-03 13:02:54 +00:00
preventScroll: true,
returnFocusOnDeactivate: true,
})
2022-12-02 07:02:44 +00:00
defineExpose({
elDialogRoot,
elDialogMain,
})
/** close the dialog */
2022-11-27 03:13:39 +00:00
function close() {
2022-12-02 07:02:44 +00:00
visible.value = false
emit('close')
2022-12-02 07:02:44 +00:00
}
function clickMask() {
if (props.closeByMask)
close()
2022-11-27 03:13:39 +00:00
}
2022-12-02 07:02:44 +00:00
const routePath = ref(route.path)
watch(visible, (value) => {
if (value)
routePath.value = route.path
})
const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path)
watch(notInCurrentPage, (value) => {
if (props.keepAlive)
return
if (value)
close()
})
// controls the state of v-if.
// when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true
const isVIf = computed(() => {
return props.useVIf
? visible.value
: true
})
// controls the state of v-show.
// when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue
const isVShow = computed(() => {
return !props.useVIf
? visible.value
: true
})
const bindTypeToAny = ($attrs: any) => $attrs as any
const trapFocusDialog = () => {
if (isVShow.value)
nextTick().then(() => activate())
}
2022-11-27 03:13:39 +00:00
useEventListener('keydown', (e: KeyboardEvent) => {
2022-12-02 07:02:44 +00:00
if (!visible.value)
2022-11-27 03:13:39 +00:00
return
if (e.key === 'Escape') {
close()
e.preventDefault()
}
2022-11-24 08:04:53 +00:00
})
2022-12-02 07:02:44 +00:00
</script>
2022-11-27 03:13:39 +00:00
2022-12-02 07:02:44 +00:00
<script lang="ts">
export default {
inheritAttrs: false,
2022-11-27 03:13:39 +00:00
}
2022-11-23 03:48:01 +00:00
</script>
<template>
<Teleport to="body">
2022-12-02 07:02:44 +00:00
<!-- Dialog component -->
<Transition name="dialog-visible" @transitionend="trapFocusDialog">
<div
2022-12-02 07:02:44 +00:00
v-if="isVIf"
v-show="isVShow"
ref="elDialogRoot"
aria-modal="true"
:aria-labelledby="dialogLabelledBy"
2022-12-02 07:02:44 +00:00
:style="{
'z-index': zIndex,
}"
fixed inset-0 of-y-auto scrollbar-hide overscroll-none
>
2022-12-02 07:02:44 +00:00
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
<!-- corresponding to issue: #106, so please don't remove it. -->
<!-- Mask layer: blur -->
<div class="dialog-mask" absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter backdrop-blur-sm touch-none />
<!-- Mask layer: dimming -->
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
<!-- Dialog container -->
<div class="p-safe-area" absolute inset-0 z-1 pointer-events-none opacity-100 flex>
<div flex-1 flex items-center justify-center p-4>
2022-12-02 08:06:52 +00:00
<!-- We use `class` here to make v-bind being able to be override them -->
2022-12-02 07:02:44 +00:00
<div
ref="elDialogMain"
class="dialog-main rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
2022-12-02 07:02:44 +00:00
v-bind="bindTypeToAny($attrs)"
>
<slot />
2022-12-02 07:02:44 +00:00
</div>
</div>
</div>
</div>
2022-12-02 07:02:44 +00:00
</Transition>
</Teleport>
2022-11-23 03:48:01 +00:00
</template>
2022-11-27 08:02:09 +00:00
2022-12-02 07:02:44 +00:00
<style lang="postcss" scoped>
.dialog-visible-enter-active,
.dialog-visible-leave-active {
transition-duration: 0.25s;
.dialog-mask {
transition: opacity 0.25s ease;
}
.dialog-main {
transition: opacity 0.25s ease, transform 0.25s ease;
}
}
.dialog-visible-enter-from,
.dialog-visible-leave-to {
.dialog-mask {
opacity: 0;
}
.dialog-main {
transform: translateY(50px);
opacity: 0;
}
}
.p-safe-area {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
2022-11-27 08:02:09 +00:00
</style>