index.js 2.5 KB

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