index.mjs 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import { isClient } from "../../utils/browser.mjs";
  2. import { createGlobalNode, removeGlobalNode } from "../../utils/vue/global-node.mjs";
  3. import { NOOP } from "../../utils/functions.mjs";
  4. import { Teleport, h, onUnmounted, ref } from "vue";
  5. //#region ../../packages/hooks/use-teleport/index.ts
  6. const useTeleport = (contentRenderer, appendToBody) => {
  7. const isTeleportVisible = ref(false);
  8. if (!isClient) return {
  9. isTeleportVisible,
  10. showTeleport: NOOP,
  11. hideTeleport: NOOP,
  12. renderTeleport: NOOP
  13. };
  14. let $el = null;
  15. const showTeleport = () => {
  16. isTeleportVisible.value = true;
  17. if ($el !== null) return;
  18. $el = createGlobalNode();
  19. };
  20. const hideTeleport = () => {
  21. isTeleportVisible.value = false;
  22. if ($el !== null) {
  23. removeGlobalNode($el);
  24. $el = null;
  25. }
  26. };
  27. const renderTeleport = () => {
  28. return appendToBody.value !== true ? contentRenderer() : isTeleportVisible.value ? [h(Teleport, { to: $el }, contentRenderer())] : void 0;
  29. };
  30. onUnmounted(hideTeleport);
  31. return {
  32. isTeleportVisible,
  33. showTeleport,
  34. hideTeleport,
  35. renderTeleport
  36. };
  37. };
  38. //#endregion
  39. export { useTeleport };
  40. //# sourceMappingURL=index.mjs.map