| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- import { computed, unref, shallowRef, ref, watch, onBeforeUnmount } from 'vue';
- import { createPopper } from '@popperjs/core';
- import { fromPairs } from 'lodash-unified';
- const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
- const stateUpdater = {
- name: "updateState",
- enabled: true,
- phase: "write",
- fn: ({ state }) => {
- const derivedState = deriveState(state);
- Object.assign(states.value, derivedState);
- },
- requires: ["computeStyles"]
- };
- const options = computed(() => {
- const { onFirstUpdate, placement, strategy, modifiers } = unref(opts);
- return {
- onFirstUpdate,
- placement: placement || "bottom",
- strategy: strategy || "absolute",
- modifiers: [
- ...modifiers || [],
- stateUpdater,
- { name: "applyStyles", enabled: false }
- ]
- };
- });
- const instanceRef = shallowRef();
- const states = ref({
- styles: {
- popper: {
- position: unref(options).strategy,
- left: "0",
- top: "0"
- },
- arrow: {
- position: "absolute"
- }
- },
- attributes: {}
- });
- const destroy = () => {
- if (!instanceRef.value)
- return;
- instanceRef.value.destroy();
- instanceRef.value = void 0;
- };
- watch(
- options,
- (newOptions) => {
- const instance = unref(instanceRef);
- if (instance) {
- instance.setOptions(newOptions);
- }
- },
- {
- deep: true
- }
- );
- watch(
- [referenceElementRef, popperElementRef],
- ([referenceElement, popperElement]) => {
- destroy();
- if (!referenceElement || !popperElement)
- return;
- instanceRef.value = createPopper(
- referenceElement,
- popperElement,
- unref(options)
- );
- }
- );
- onBeforeUnmount(() => {
- destroy();
- });
- return {
- state: computed(() => {
- var _a;
- return { ...((_a = unref(instanceRef)) == null ? void 0 : _a.state) || {} };
- }),
- styles: computed(() => unref(states).styles),
- attributes: computed(() => unref(states).attributes),
- update: () => {
- var _a;
- return (_a = unref(instanceRef)) == null ? void 0 : _a.update();
- },
- forceUpdate: () => {
- var _a;
- return (_a = unref(instanceRef)) == null ? void 0 : _a.forceUpdate();
- },
- instanceRef: computed(() => unref(instanceRef))
- };
- };
- function deriveState(state) {
- const elements = Object.keys(state.elements);
- const styles = fromPairs(
- elements.map(
- (element) => [element, state.styles[element] || {}]
- )
- );
- const attributes = fromPairs(
- elements.map(
- (element) => [element, state.attributes[element]]
- )
- );
- return {
- styles,
- attributes
- };
- }
- export { usePopper };
- //# sourceMappingURL=index.mjs.map
|