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
12 KiB
1 line
12 KiB
11 months ago
|
{"version":3,"file":"popup-manager.mjs","sources":["../../../../packages/utils/popup-manager.ts"],"sourcesContent":["import { getCurrentInstance } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { useGlobalConfig } from '@element-plus/hooks'\nimport { addClass, removeClass, on } from './dom'\nimport { EVENT_CODE } from './aria'\nimport type { Ref } from 'vue'\n\ninterface Instance {\n closeOnClickModal: Ref<boolean>\n closeOnPressEscape: Ref<boolean>\n close: () => void\n handleClose?: () => void\n handleAction?: (action: string) => void\n}\n\ntype StackFrame = { id: string; zIndex: number; modalClass: string }\n\ninterface PopupManager {\n getInstance: (id: string) => Instance\n zIndex: number\n globalInitialZIndex: number\n getInitialZIndex: () => number\n modalDom?: HTMLElement\n modalFade: boolean\n modalStack: StackFrame[]\n nextZIndex: () => number\n register: (id: string, instance: Instance) => void\n deregister: (id: string) => void\n doOnModalClick: () => void\n openModal: (\n id: string,\n zIndex: number,\n dom: HTMLElement,\n modalClass: string,\n modalFade: boolean\n ) => void\n closeModal: (id: string) => void\n}\n\nconst onTouchMove = (e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n}\n\nconst onModalClick = () => {\n PopupManager?.doOnModalClick()\n}\n\nlet hasModal = false\n\nconst getModal = function (): HTMLElement {\n if (!isClient) return undefined as any\n let modalDom = PopupManager.modalDom\n if (modalDom) {\n hasModal = true\n } else {\n hasModal = false\n modalDom = document.createElement('div')\n PopupManager.modalDom = modalDom\n\n on(modalDom, 'touchmove', onTouchMove)\n on(modalDom, 'click', onModalClick)\n }\n\n return modalDom\n}\n\nconst instances = {}\n\nexport const PopupManager: PopupManager = {\n modalFade: true,\n modalDom: undefined,\n globalInitialZIndex: 2000,\n zIndex: 0,\n\n getInitialZIndex() {\n if (!getCurrentInstance()) return this.globalInitialZIndex\n return useGlobalConfig('zIndex').value ?? this.globalInitialZIndex\n },\n\n getInstance(id) {\n return instances[id]\n },\n\n register(id, instance) {\n if (id && instance) {\n instances[id] = instance\n }\n },\n\n deregister(id) {\n if (id) {\n instances[id] = null\n delete instances[id]\n }\n },\n\n nextZIndex() {\n return this.getInitialZIndex() + ++this.zIndex\n },\n\n modalStack: [],\n\n doOnModalClick() {\n const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1]\n if (!topItem) return\n\n const instance = PopupManager.getInstance(topItem.id)\n if (instance && instance.closeOnClickModal.value) {\n instance.close()\n }\n },\n\n openModal(id, zIndex, dom, modalClass, modalFade) {\n if (!isClient) return\n if (!id || zIndex === undefined) return\n this.modalFade = modalFade\n\n const modalStack = this.modalStack\n\n for (let i = 0, j = modalStack.length; i < j; i++) {\n const item = modalStack[i]\n if (item.id === id) {\n return\n }\n }\n\n const modalDom = getModal()\n\n addClass(modalDom, 'v-modal')\n if (this.modalFade && !hasModal) {\n addClass(modalDom, 'v-modal-enter')\n }\n if (modalClass) {\n const classArr = modalClass.trim().split(/\\s+/)\n classArr.forEach((item) => addClass(modalDom, item))\n }\n setTimeout(() => {\n removeClass(modalDom, 'v-modal-enter')\n }, 200)\n\n if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {\n dom.parentNode.appendChild(modalDom)\n } else {\n document.body.appendChild(modalDom)\n }\n\n if (zIndex) {\n modalDom.style.zIndex = String(zIndex)\n }\n modalDom.tabIndex = 0\n modalDom.style.display = ''\n\n this.modalStack.push({ id, zIndex, modalClass })\n },\n\n closeModal(id) {\n const modalStack = this.modalStack\n const modalDom = getModal()\n\n if (modalStack.length > 0) {\n const topItem = modalStack[modalStack.length - 1]\n if (topItem.id === id) {\n
|