vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.72 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../components/modal/index.ts"],"sourcesContent":["import { createApp, createVNode, getCurrentInstance, h, nextTick, ref, render, unref } from 'vue'\n\nimport Component from './modal.vue'\nimport { isClient, noop } from '@vexip-ui/utils'\n\nimport type { App, AppContext, ComponentPublicInstance, MaybeRef } from 'vue'\nimport type { ModalProps } from './props'\nimport type { ModalCommonSlot } from './symbol'\n\nexport type ModalOptions = Omit<ModalProps, 'active' | 'transfer' | 'loading' | 'autoRemove'> & {\n /**\n * Specify the app context, ensue the modal using same context\n */\n appContext: AppContext,\n /**\n * Specify whether the modal is loading\n */\n loading: MaybeRef<boolean>,\n /**\n * Another way to use default slot\n */\n renderer: ModalCommonSlot,\n /**\n * Another way to use header slot\n */\n headerRenderer: ModalCommonSlot,\n /**\n * Another way to use title slot\n */\n titleRenderer: ModalCommonSlot,\n /**\n * Another way to use close slot\n */\n closeRenderer: ModalCommonSlot,\n /**\n * Another way to use footer slot\n */\n footerRenderer: ModalCommonSlot,\n}\n\nexport function useModal(options: Partial<ModalOptions> = {}): () => Promise<void> {\n if (!isClient) return noop\n\n const {\n appContext,\n loading,\n renderer,\n headerRenderer,\n titleRenderer,\n closeRenderer,\n footerRenderer,\n onHide,\n ...props\n } = options\n\n const active = ref(false)\n\n let instance = getCurrentInstance()\n\n let container: HTMLElement | undefined = document.createElement('div')\n let app: App | undefined\n\n if (appContext || instance) {\n const vnode = createVNode(createModal, null, null)\n\n vnode.appContext = appContext || instance!.appContext\n render(vnode, container)\n } else {\n app = createApp(createModal)\n app.mount(container)\n }\n\n document.body.appendChild(container)\n\n // Ensure Modal show transition is effective\n nextTick(() => {\n active.value = true\n })\n\n function createModal() {\n return h(\n Component,\n {\n ...props,\n active: active.value,\n transfer: false,\n autoRemove: false,\n loading: unref(loading),\n onHide: Array.isArray(onHide) ? [...onHide, destroy] : onHide ? [onHide, destroy] : destroy,\n },\n {\n header: headerRenderer,\n title: titleRenderer,\n close: closeRenderer,\n default: renderer,\n footer: footerRenderer,\n },\n )\n }\n\n function destroy() {\n if (instance) {\n container && render(null, container)\n instance = null\n }\n\n if (app) {\n app.unmount()\n app = undefined\n }\n\n if (container) {\n document.body.removeChild(container)\n container = undefined\n }\n }\n\n return () =>\n nextTick(() => {\n active.value = false\n })\n}\n\nComponent.open = useModal\n\nconst Modal = Component as typeof Component & { open: typeof useModal }\n\nexport { Modal }\nexport { modalProps } from './props'\n\nexport type ModalExposed = ComponentPublicInstance & InstanceType<typeof Component>\n\nexport type { ModalProps, ModalCProps } from './props'\nexport type { ModalSlotParams } from './symbol'\n"],"names":["useModal","options","isClient","noop","appContext","loading","renderer","headerRenderer","titleRenderer","closeRenderer","footerRenderer","onHide","props","active","ref","instance","getCurrentInstance","container","app","vnode","createVNode","createModal","render","createApp","nextTick","h","Component","unref","destroy","Modal"],"mappings":"4NAwCgB,SAAAA,EAASC,EAAiC,GAAyB,CAC7E,GAAA,CAACC,WAAiB,OAAAC,EAAA,KAEhB,KAAA,CACJ,WAAAC,EACA,QAAAC,EACA,SAAAC,EACA,eAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EACDX,EAEEY,EAASC,MAAI,EAAK,EAExB,IAAIC,EAAWC,EAAAA,mBAAmB,EAE9BC,EAAqC,SAAS,cAAc,KAAK,EACjEC,EAEJ,GAAId,GAAcW,EAAU,CAC1B,MAAMI,EAAQC,EAAA,YAAYC,EAAa,KAAM,IAAI,EAE3CF,EAAA,WAAaf,GAAcW,EAAU,WAC3CO,EAAA,OAAOH,EAAOF,CAAS,CAAA,MAEvBC,EAAMK,YAAUF,CAAW,EAC3BH,EAAI,MAAMD,CAAS,EAGZ,SAAA,KAAK,YAAYA,CAAS,EAGnCO,EAAAA,SAAS,IAAM,CACbX,EAAO,MAAQ,EAAA,CAChB,EAED,SAASQ,GAAc,CACd,OAAAI,EAAA,EACLC,EACA,CACE,GAAGd,EACH,OAAQC,EAAO,MACf,SAAU,GACV,WAAY,GACZ,QAASc,QAAMtB,CAAO,EACtB,OAAQ,MAAM,QAAQM,CAAM,EAAI,CAAC,GAAGA,EAAQiB,CAAO,EAAIjB,EAAS,CAACA,EAAQiB,CAAO,EAAIA,CACtF,EACA,CACE,OAAQrB,EACR,MAAOC,EACP,MAAOC,EACP,QAASH,EACT,OAAQI,CAAA,CAEZ,CAAA,CAGF,SAASkB,GAAU,CACbb,IACWE,GAAAK,EAAAA,OAAO,KAAML,CAAS,EACxBF,EAAA,MAGTG,IACFA,EAAI,QAAQ,EACNA,EAAA,QAGJD,IACO,SAAA,KAAK,YAAYA,CAAS,EACvBA,EAAA,OACd,CAGK,MAAA,IACLO,WAAS,IAAM,CACbX,EAAO,MAAQ,EAAA,CAChB,CACL,CAEAa,EAAU,KAAO1B,EAEjB,MAAM6B,EAAQH"}