You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
8.1 KiB
1 line
8.1 KiB
11 months ago
|
{"version":3,"file":"use-dialog.mjs","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import { computed, ref, watch, nextTick, onMounted } from 'vue'\nimport { useTimeoutFn, isClient } from '@vueuse/core'\n\nimport { useLockscreen, useRestoreActive, useModal } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { isNumber } from '@element-plus/utils/util'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nexport const useDialog = (\n props: DialogProps,\n { emit }: SetupContext<DialogEmits>,\n targetRef: Ref<HTMLElement | undefined>\n) => {\n const visible = ref(false)\n const closed = ref(false)\n const rendered = ref(false) // when desctroyOnClose is true, we initialize it as false vise versa\n const zIndex = ref(props.zIndex || PopupManager.nextZIndex())\n\n let openTimer: (() => void) | undefined = undefined\n let closeTimer: (() => void) | undefined = undefined\n\n const normalizeWidth = computed(() =>\n isNumber(props.width) ? `${props.width}px` : props.width\n )\n\n const style = computed<CSSProperties>(() => {\n const style: CSSProperties = {}\n const varPrefix = `--el-dialog`\n if (!props.fullscreen) {\n if (props.top) {\n style[`${varPrefix}-margin-top`] = props.top\n }\n if (props.width) {\n style[`${varPrefix}-width`] = normalizeWidth.value\n }\n }\n return style\n })\n\n function afterEnter() {\n emit('opened')\n }\n\n function afterLeave() {\n emit('closed')\n emit(UPDATE_MODEL_EVENT, false)\n if (props.destroyOnClose) {\n rendered.value = false\n }\n }\n\n function beforeLeave() {\n emit('close')\n }\n\n function open() {\n closeTimer?.()\n openTimer?.()\n\n if (props.openDelay && props.openDelay > 0) {\n ;({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay))\n } else {\n doOpen()\n }\n }\n\n function close() {\n // if (this.willClose && !this.willClose()) return;\n openTimer?.()\n closeTimer?.()\n\n if (props.closeDelay && props.closeDelay > 0) {\n ;({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay))\n } else {\n doClose()\n }\n }\n\n function hide(shouldCancel: boolean) {\n if (shouldCancel) return\n closed.value = true\n visible.value = false\n }\n\n function handleClose() {\n if (props.beforeClose) {\n props.beforeClose(hide)\n } else {\n close()\n }\n }\n\n function onModalClick() {\n if (props.closeOnClickModal) {\n handleClose()\n }\n }\n\n function doOpen() {\n if (!isClient) {\n return\n }\n\n // if (props.willOpen?.()) {\n // return\n // }\n visible.value = true\n }\n\n function doClose() {\n visible.value = false\n }\n\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n if (props.closeOnPressEscape) {\n useModal(\n {\n handleClose,\n },\n visible\n )\n }\n\n useRestoreActive(visible)\n\n watch(\n () => props.modelValue,\n (val) => {\n if (val) {\n closed.value = false\n open()\n rendered.value = true // enables lazy rendering\n emit('open')\n zIndex.value = props.zIndex ? zIndex.value++ : PopupManager.nextZIndex()\n // this.$el.addEventListener('scroll', this.updatePopper)\n nextTick(() => {\n if (targetRef.value) {\n targetRef.value.scrollTop = 0\n }\n })\n } else {\n // this.$el.removeEventListener('scroll', this.updatePopper\n if (visible.value) {\n close()\n }\n }\n }\n )\n\n onMounted(() => {\n if (props.modelValue) {\n visible.value = true\n rendered.value = true // enables lazy rendering\n open()\n }\n })\n\n return {\n afterEnter,\n afterLeave,\n beforeLeave,\n handleClose,\n
|