You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

96 lines
2.6 KiB

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