index.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  2. const require_runtime = require('../../_virtual/_rolldown/runtime.js');
  3. let lodash_unified = require("lodash-unified");
  4. let vue = require("vue");
  5. let _popperjs_core = require("@popperjs/core");
  6. //#region ../../packages/hooks/use-popper/index.ts
  7. const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
  8. const stateUpdater = {
  9. name: "updateState",
  10. enabled: true,
  11. phase: "write",
  12. fn: ({ state }) => {
  13. const derivedState = deriveState(state);
  14. Object.assign(states.value, derivedState);
  15. },
  16. requires: ["computeStyles"]
  17. };
  18. const options = (0, vue.computed)(() => {
  19. const { onFirstUpdate, placement, strategy, modifiers } = (0, vue.unref)(opts);
  20. return {
  21. onFirstUpdate,
  22. placement: placement || "bottom",
  23. strategy: strategy || "absolute",
  24. modifiers: [
  25. ...modifiers || [],
  26. stateUpdater,
  27. {
  28. name: "applyStyles",
  29. enabled: false
  30. }
  31. ]
  32. };
  33. });
  34. const instanceRef = (0, vue.shallowRef)();
  35. const states = (0, vue.ref)({
  36. styles: {
  37. popper: {
  38. position: (0, vue.unref)(options).strategy,
  39. left: "0",
  40. top: "0"
  41. },
  42. arrow: { position: "absolute" }
  43. },
  44. attributes: {}
  45. });
  46. const destroy = () => {
  47. if (!instanceRef.value) return;
  48. instanceRef.value.destroy();
  49. instanceRef.value = void 0;
  50. };
  51. (0, vue.watch)(options, (newOptions) => {
  52. const instance = (0, vue.unref)(instanceRef);
  53. if (instance) instance.setOptions(newOptions);
  54. }, { deep: true });
  55. (0, vue.watch)([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
  56. destroy();
  57. if (!referenceElement || !popperElement) return;
  58. instanceRef.value = (0, _popperjs_core.createPopper)(referenceElement, popperElement, (0, vue.unref)(options));
  59. });
  60. (0, vue.onBeforeUnmount)(() => {
  61. destroy();
  62. });
  63. return {
  64. state: (0, vue.computed)(() => ({ ...(0, vue.unref)(instanceRef)?.state || {} })),
  65. styles: (0, vue.computed)(() => (0, vue.unref)(states).styles),
  66. attributes: (0, vue.computed)(() => (0, vue.unref)(states).attributes),
  67. update: () => (0, vue.unref)(instanceRef)?.update(),
  68. forceUpdate: () => (0, vue.unref)(instanceRef)?.forceUpdate(),
  69. instanceRef: (0, vue.computed)(() => (0, vue.unref)(instanceRef))
  70. };
  71. };
  72. function deriveState(state) {
  73. const elements = Object.keys(state.elements);
  74. return {
  75. styles: (0, lodash_unified.fromPairs)(elements.map((element) => [element, state.styles[element] || {}])),
  76. attributes: (0, lodash_unified.fromPairs)(elements.map((element) => [element, state.attributes[element]]))
  77. };
  78. }
  79. //#endregion
  80. exports.usePopper = usePopper;
  81. //# sourceMappingURL=index.js.map