index.js 2.3 KB

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