index.mjs 2.3 KB

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