index.mjs 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { computed, onBeforeMount } from 'vue';
  2. import { isClient } from '@vueuse/core';
  3. import { useGlobalConfig } from '../use-global-config/index.mjs';
  4. import { defaultNamespace } from '../use-namespace/index.mjs';
  5. import { useIdInjection } from '../use-id/index.mjs';
  6. let cachedContainer;
  7. const usePopperContainerId = () => {
  8. const namespace = useGlobalConfig("namespace", defaultNamespace);
  9. const idInjection = useIdInjection();
  10. const id = computed(() => {
  11. return `${namespace.value}-popper-container-${idInjection.prefix}`;
  12. });
  13. const selector = computed(() => `#${id.value}`);
  14. return {
  15. id,
  16. selector
  17. };
  18. };
  19. const createContainer = (id) => {
  20. const container = document.createElement("div");
  21. container.id = id;
  22. document.body.appendChild(container);
  23. return container;
  24. };
  25. const usePopperContainer = () => {
  26. onBeforeMount(() => {
  27. if (!isClient)
  28. return;
  29. const { id, selector } = usePopperContainerId();
  30. if (process.env.NODE_ENV === "test" || !cachedContainer && !document.body.querySelector(selector.value)) {
  31. cachedContainer = createContainer(id.value);
  32. }
  33. });
  34. };
  35. export { usePopperContainer, usePopperContainerId };
  36. //# sourceMappingURL=index.mjs.map