1 line
16 KiB
Plaintext
1 line
16 KiB
Plaintext
|
{"version":3,"file":"use-dialog.mjs","sources":["../../../../../../packages/components/dialog/src/use-dialog.ts"],"sourcesContent":["import {\n computed,\n getCurrentInstance,\n nextTick,\n onMounted,\n ref,\n watch,\n} from 'vue'\nimport { useTimeoutFn } from '@vueuse/core'\nimport {\n defaultNamespace,\n useId,\n useLockscreen,\n useZIndex,\n} from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport {\n addUnit,\n debugWarn,\n isArray,\n isClient,\n isFunction,\n isObject,\n} from '@element-plus/utils'\nimport { useGlobalConfig } from '@element-plus/components/config-provider'\nimport { DEFAULT_DIALOG_TRANSITION } from './constants'\n\nimport type { CSSProperties, Ref, SetupContext, TransitionProps } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { DialogEmits, DialogProps } from './dialog'\n\nconst COMPONENT_NAME = 'ElDialog'\n\nexport const useDialog = (\n props: DialogProps,\n targetRef: Ref<HTMLElement | undefined>\n) => {\n const instance = getCurrentInstance()!\n const emit = instance.emit as SetupContext<DialogEmits>['emit']\n const { nextZIndex } = useZIndex()\n\n let lastPosition = ''\n const titleId = useId()\n const bodyId = useId()\n const visible = ref(false)\n const closed = ref(false)\n const rendered = ref(false) // when destroyOnClose is true, we initialize it as false vise versa\n const zIndex = ref(props.zIndex ?? nextZIndex())\n\n let openTimer: (() => void) | undefined = undefined\n let closeTimer: (() => void) | undefined = undefined\n\n const config = useGlobalConfig()\n\n const namespace = computed(() => config.value?.namespace ?? defaultNamespace)\n const globalConfig = computed(() => config.value?.dialog)\n\n const style = computed<CSSProperties>(() => {\n const style: CSSProperties = {}\n const varPrefix = `--${namespace.value}-dialog` as const\n if (!props.fullscreen) {\n if (props.top) {\n style[`${varPrefix}-margin-top`] = props.top\n }\n if (props.width) {\n style[`${varPrefix}-width`] = addUnit(props.width)\n }\n }\n return style\n })\n\n const _draggable = computed(\n () =>\n (props.draggable ?? globalConfig.value?.draggable ?? false) &&\n !props.fullscreen\n )\n\n const _alignCenter = computed(\n () => props.alignCenter ?? globalConfig.value?.alignCenter ?? false\n )\n\n const _overflow = computed(\n () => props.overflow ?? globalConfig.value?.overflow ?? false\n )\n\n const overlayDialogStyle = computed<CSSProperties>(() => {\n if (_alignCenter.value) {\n return { display: 'flex' }\n }\n return {}\n })\n\n const transitionConfig = computed(() => {\n const transition =\n props.transition ??\n globalConfig.value?.transition ??\n DEFAULT_DIALOG_TRANSITION\n const baseConfig = {\n name: transition,\n onAfterEnter: afterEnter,\n onBeforeLeave: beforeLeave,\n onAfterLeave: afterLeave,\n }\n if (isObject(transition)) {\n const config = { ...transition } as TransitionProps\n const _mergeHook = (\n userHook: Arrayable<(el: Element) => void> | undefined,\n defaultHook: () => void\n ) => {\n return (el: Element) => {\n if (isArray(userHook)) {\n userHook.forEach((fn) => {\n if (isFunction(fn)) fn(el)\n })\n } else if (isFunction(userHook)) {\n userHook(el)\n }\n defaultHook()\n }\n }\n config.onAfterEnter = _mergeHook(config.onAfterEnter, afterEnter)\n config.onBeforeLeave = _mergeHook(config.onBeforeLeave, beforeLeave)\n config.onAfterLeave = _mergeHook(config.onAfterLeave, afterLeave)\n if (!config.name) {\n config.name = DEFAULT_DIALOG_TRANSITION\n debugWarn(\n COMPONENT_NAME,\n `transition.name is missing when using object syntax, fallback to '${DEFAULT_DIALOG_TRANSITION}'`\n )\n }\n return config\n }\n\n return baseConfig\n })\n\n function afterEn
|