index.mjs 1.1 KB

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