index.mjs 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { isClient } from "../../utils/browser.mjs";
  2. import { useGetDerivedNamespace } from "../use-namespace/index.mjs";
  3. import { useIdInjection } from "../use-id/index.mjs";
  4. import { computed, onBeforeMount } from "vue";
  5. //#region ../../packages/hooks/use-popper-container/index.ts
  6. const usePopperContainerId = () => {
  7. const namespace = useGetDerivedNamespace();
  8. const idInjection = useIdInjection();
  9. const id = computed(() => {
  10. return `${namespace.value}-popper-container-${idInjection.prefix}`;
  11. });
  12. return {
  13. id,
  14. selector: computed(() => `#${id.value}`)
  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) return;
  27. if (!document.body.querySelector(selector.value)) createContainer(id.value);
  28. });
  29. return {
  30. id,
  31. selector
  32. };
  33. };
  34. //#endregion
  35. export { usePopperContainer, usePopperContainerId };
  36. //# sourceMappingURL=index.mjs.map