element-plus
Version:
A Component Library for Vue 3
1 lines • 1.94 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-teleport/index.ts"],"sourcesContent":["import { Teleport, h, onUnmounted, ref } from 'vue'\nimport {\n NOOP,\n createGlobalNode,\n isClient,\n removeGlobalNode,\n} from '@element-plus/utils'\n\nimport type { Ref, VNode } from 'vue'\n\nexport const useTeleport = (\n contentRenderer: () => VNode,\n appendToBody: Ref<boolean>\n) => {\n const isTeleportVisible = ref(false)\n\n if (!isClient) {\n return {\n isTeleportVisible,\n showTeleport: NOOP,\n hideTeleport: NOOP,\n renderTeleport: NOOP,\n }\n }\n\n let $el: HTMLElement | null = null\n\n const showTeleport = () => {\n isTeleportVisible.value = true\n // this allows the delayed showing strategy since the the content itself could be enterable\n // e.g. el-popper\n if ($el !== null) return\n\n $el = createGlobalNode()\n }\n\n const hideTeleport = () => {\n isTeleportVisible.value = false\n if ($el !== null) {\n removeGlobalNode($el)\n $el = null\n }\n }\n\n const renderTeleport = () => {\n return appendToBody.value !== true\n ? contentRenderer()\n : isTeleportVisible.value\n ? [h(Teleport, { to: $el }, contentRenderer())]\n : undefined\n }\n\n onUnmounted(hideTeleport)\n\n return {\n isTeleportVisible,\n showTeleport,\n hideTeleport,\n renderTeleport,\n }\n}\n"],"mappings":";;;;;;AAUA,MAAa,eACX,iBACA,iBACG;CACH,MAAM,oBAAoB,IAAI,MAAM;AAEpC,KAAI,CAAC,SACH,QAAO;EACL;EACA,cAAc;EACd,cAAc;EACd,gBAAgB;EACjB;CAGH,IAAI,MAA0B;CAE9B,MAAM,qBAAqB;AACzB,oBAAkB,QAAQ;AAG1B,MAAI,QAAQ,KAAM;AAElB,QAAM,kBAAkB;;CAG1B,MAAM,qBAAqB;AACzB,oBAAkB,QAAQ;AAC1B,MAAI,QAAQ,MAAM;AAChB,oBAAiB,IAAI;AACrB,SAAM;;;CAIV,MAAM,uBAAuB;AAC3B,SAAO,aAAa,UAAU,OAC1B,iBAAiB,GACjB,kBAAkB,QAChB,CAAC,EAAE,UAAU,EAAE,IAAI,KAAK,EAAE,iBAAiB,CAAC,CAAC,GAC7C;;AAGR,aAAY,aAAa;AAEzB,QAAO;EACL;EACA;EACA;EACA;EACD"}