index.mjs 2.6 KB

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