index.mjs 1.1 KB

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