index.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@popperjs/core');
  5. var lodashUnified = require('lodash-unified');
  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 = vue.computed(() => {
  18. const { onFirstUpdate, placement, strategy, modifiers } = vue.unref(opts);
  19. return {
  20. onFirstUpdate,
  21. placement: placement || "bottom",
  22. strategy: strategy || "absolute",
  23. modifiers: [
  24. ...modifiers || [],
  25. stateUpdater,
  26. { name: "applyStyles", enabled: false }
  27. ]
  28. };
  29. });
  30. const instanceRef = vue.shallowRef();
  31. const states = vue.ref({
  32. styles: {
  33. popper: {
  34. position: vue.unref(options).strategy,
  35. left: "0",
  36. top: "0"
  37. },
  38. arrow: {
  39. position: "absolute"
  40. }
  41. },
  42. attributes: {}
  43. });
  44. const destroy = () => {
  45. if (!instanceRef.value)
  46. return;
  47. instanceRef.value.destroy();
  48. instanceRef.value = void 0;
  49. };
  50. vue.watch(
  51. options,
  52. (newOptions) => {
  53. const instance = vue.unref(instanceRef);
  54. if (instance) {
  55. instance.setOptions(newOptions);
  56. }
  57. },
  58. {
  59. deep: true
  60. }
  61. );
  62. vue.watch(
  63. [referenceElementRef, popperElementRef],
  64. ([referenceElement, popperElement]) => {
  65. destroy();
  66. if (!referenceElement || !popperElement)
  67. return;
  68. instanceRef.value = core.createPopper(
  69. referenceElement,
  70. popperElement,
  71. vue.unref(options)
  72. );
  73. }
  74. );
  75. vue.onBeforeUnmount(() => {
  76. destroy();
  77. });
  78. return {
  79. state: vue.computed(() => {
  80. var _a;
  81. return { ...((_a = vue.unref(instanceRef)) == null ? void 0 : _a.state) || {} };
  82. }),
  83. styles: vue.computed(() => vue.unref(states).styles),
  84. attributes: vue.computed(() => vue.unref(states).attributes),
  85. update: () => {
  86. var _a;
  87. return (_a = vue.unref(instanceRef)) == null ? void 0 : _a.update();
  88. },
  89. forceUpdate: () => {
  90. var _a;
  91. return (_a = vue.unref(instanceRef)) == null ? void 0 : _a.forceUpdate();
  92. },
  93. instanceRef: vue.computed(() => vue.unref(instanceRef))
  94. };
  95. };
  96. function deriveState(state) {
  97. const elements = Object.keys(state.elements);
  98. const styles = lodashUnified.fromPairs(
  99. elements.map(
  100. (element) => [element, state.styles[element] || {}]
  101. )
  102. );
  103. const attributes = lodashUnified.fromPairs(
  104. elements.map(
  105. (element) => [element, state.attributes[element]]
  106. )
  107. );
  108. return {
  109. styles,
  110. attributes
  111. };
  112. }
  113. exports.usePopper = usePopper;
  114. //# sourceMappingURL=index.js.map