index.js 2.4 KB

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