elk/components/modal/ModalDialog.vue

212 lines
4.9 KiB
Vue
Raw Normal View History

2022-12-02 10:02:44 +03:00
<script lang="ts" setup>
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
2022-12-02 10:02:44 +03:00
import { useDeactivated } from '~/composables/lifecycle'
2022-11-27 04:52:46 +03:00
2022-12-02 10:02:44 +03:00
export interface Props {
/** v-model dislog visibility */
modelValue: boolean
2022-11-27 04:52:46 +03:00
2022-12-02 10:02:44 +03:00
/**
* 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 10:27:44 +03:00
*/
2022-12-02 10:02:44 +03:00
keepAlive?: boolean
/**
* The aria-labelledby id for the dialog.
*/
dialogLabelledBy?: string
2022-12-02 10:02:44 +03:00
}
2022-12-02 10:27:44 +03:00
2022-12-02 10:02:44 +03:00
const props = withDefaults(defineProps<Props>(), {
zIndex: 100,
closeByMask: true,
useVIf: true,
keepAlive: false,
})
2022-11-27 04:52:46 +03:00
2022-12-02 10:02:44 +03:00
const emits = defineEmits<{
/** v-model dialog visibility */
2022-12-02 10:02:44 +03:00
(event: 'update:modelValue', value: boolean): void
2022-11-23 06:48:01 +03:00
}>()
2022-11-24 11:04:53 +03:00
2022-12-02 10:02:44 +03:00
const visible = useVModel(props, 'modelValue', emits, { passive: true })
2022-11-27 04:52:46 +03:00
2022-12-02 10:02:44 +03:00
const deactivated = useDeactivated()
const route = useRoute()
2022-11-27 04:52:46 +03:00
2022-12-02 10:02:44 +03:00
/** scrollable HTML element */
const elDialogMain = ref<HTMLDivElement>()
const elDialogRoot = ref<HTMLDivElement>()
2022-11-27 04:52:46 +03:00
const { activate } = useFocusTrap(elDialogRoot, {
immediate: true,
allowOutsideClick: true,
clickOutsideDeactivates: true,
escapeDeactivates: true,
})
2022-12-02 10:02:44 +03:00
defineExpose({
elDialogRoot,
elDialogMain,
})
/** close the dialog */
2022-11-27 06:13:39 +03:00
function close() {
2022-12-02 10:02:44 +03:00
visible.value = false
}
function clickMask() {
if (props.closeByMask)
close()
2022-11-27 06:13:39 +03:00
}
2022-12-02 10:02:44 +03: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 06:13:39 +03:00
useEventListener('keydown', (e: KeyboardEvent) => {
2022-12-02 10:02:44 +03:00
if (!visible.value)
2022-11-27 06:13:39 +03:00
return
if (e.key === 'Escape') {
close()
e.preventDefault()
}
2022-11-24 11:04:53 +03:00
})
2022-12-02 10:02:44 +03:00
</script>
2022-11-27 06:13:39 +03:00
2022-12-02 10:02:44 +03:00
<script lang="ts">
export default {
inheritAttrs: false,
2022-11-27 06:13:39 +03:00
}
2022-11-23 06:48:01 +03:00
</script>
<template>
<Teleport to="body" @transitionend="trapFocusDialog">
2022-12-02 10:02:44 +03:00
<!-- Dialog component -->
<Transition name="dialog-visible">
<div
2022-12-02 10:02:44 +03:00
v-if="isVIf"
v-show="isVShow"
ref="elDialogRoot"
aria-modal="true"
:aria-labelledby="dialogLabelledBy"
2022-12-02 10:02:44 +03:00
:style="{
'z-index': zIndex,
}"
fixed inset-0 of-y-auto scrollbar-hide overscroll-none
>
2022-12-02 10:02:44 +03: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 11:06:52 +03:00
<!-- We use `class` here to make v-bind being able to be override them -->
2022-12-02 10:02:44 +03: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 10:02:44 +03:00
v-bind="bindTypeToAny($attrs)"
>
<slot />
2022-12-02 10:02:44 +03:00
</div>
</div>
</div>
</div>
2022-12-02 10:02:44 +03:00
</Transition>
</Teleport>
2022-11-23 06:48:01 +03:00
</template>
2022-11-27 11:02:09 +03:00
2022-12-02 10:02:44 +03: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 11:02:09 +03:00
</style>