index.mjs 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import { isClient as isClient$1 } from "../../utils/browser.mjs";
  2. import { keysOf } from "../../utils/objects.mjs";
  3. import { buildProps } from "../../utils/vue/props/runtime.mjs";
  4. import { unrefElement } from "@vueuse/core";
  5. import { isNil } from "lodash-unified";
  6. import { isRef, onMounted, ref, unref, watchEffect } from "vue";
  7. import { arrow, computePosition } from "@floating-ui/dom";
  8. //#region ../../packages/hooks/use-floating/index.ts
  9. const useFloatingProps = buildProps({});
  10. const unrefReference = (elRef) => {
  11. if (!isClient$1) return;
  12. if (!elRef) return elRef;
  13. const unrefEl = unrefElement(elRef);
  14. if (unrefEl) return unrefEl;
  15. return isRef(elRef) ? unrefEl : elRef;
  16. };
  17. const getPositionDataWithUnit = (record, key) => {
  18. const value = record?.[key];
  19. return isNil(value) ? "" : `${value}px`;
  20. };
  21. const useFloating = ({ middleware, placement, strategy }) => {
  22. const referenceRef = ref();
  23. const contentRef = ref();
  24. const states = {
  25. x: ref(),
  26. y: ref(),
  27. placement,
  28. strategy,
  29. middlewareData: ref({})
  30. };
  31. const update = async () => {
  32. if (!isClient$1) return;
  33. const referenceEl = unrefReference(referenceRef);
  34. const contentEl = unrefElement(contentRef);
  35. if (!referenceEl || !contentEl) return;
  36. const data = await computePosition(referenceEl, contentEl, {
  37. placement: unref(placement),
  38. strategy: unref(strategy),
  39. middleware: unref(middleware)
  40. });
  41. keysOf(states).forEach((key) => {
  42. states[key].value = data[key];
  43. });
  44. };
  45. onMounted(() => {
  46. watchEffect(() => {
  47. update();
  48. });
  49. });
  50. return {
  51. ...states,
  52. update,
  53. referenceRef,
  54. contentRef
  55. };
  56. };
  57. const arrowMiddleware = ({ arrowRef, padding }) => {
  58. return {
  59. name: "arrow",
  60. options: {
  61. element: arrowRef,
  62. padding
  63. },
  64. fn(args) {
  65. const arrowEl = unref(arrowRef);
  66. if (!arrowEl) return {};
  67. return arrow({
  68. element: arrowEl,
  69. padding
  70. }).fn(args);
  71. }
  72. };
  73. };
  74. //#endregion
  75. export { arrowMiddleware, getPositionDataWithUnit, useFloating, useFloatingProps };
  76. //# sourceMappingURL=index.mjs.map