index.mjs 2.1 KB

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