index.mjs 2.1 KB

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