| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
- const require_runtime = require('../../_virtual/_rolldown/runtime.js');
- let lodash_unified = require("lodash-unified");
- let vue = require("vue");
- let _popperjs_core = require("@popperjs/core");
- //#region ../../packages/hooks/use-popper/index.ts
- 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 = (0, vue.computed)(() => {
- const { onFirstUpdate, placement, strategy, modifiers } = (0, vue.unref)(opts);
- return {
- onFirstUpdate,
- placement: placement || "bottom",
- strategy: strategy || "absolute",
- modifiers: [
- ...modifiers || [],
- stateUpdater,
- {
- name: "applyStyles",
- enabled: false
- }
- ]
- };
- });
- const instanceRef = (0, vue.shallowRef)();
- const states = (0, vue.ref)({
- styles: {
- popper: {
- position: (0, vue.unref)(options).strategy,
- left: "0",
- top: "0"
- },
- arrow: { position: "absolute" }
- },
- attributes: {}
- });
- const destroy = () => {
- if (!instanceRef.value) return;
- instanceRef.value.destroy();
- instanceRef.value = void 0;
- };
- (0, vue.watch)(options, (newOptions) => {
- const instance = (0, vue.unref)(instanceRef);
- if (instance) instance.setOptions(newOptions);
- }, { deep: true });
- (0, vue.watch)([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
- destroy();
- if (!referenceElement || !popperElement) return;
- instanceRef.value = (0, _popperjs_core.createPopper)(referenceElement, popperElement, (0, vue.unref)(options));
- });
- (0, vue.onBeforeUnmount)(() => {
- destroy();
- });
- return {
- state: (0, vue.computed)(() => ({ ...(0, vue.unref)(instanceRef)?.state || {} })),
- styles: (0, vue.computed)(() => (0, vue.unref)(states).styles),
- attributes: (0, vue.computed)(() => (0, vue.unref)(states).attributes),
- update: () => (0, vue.unref)(instanceRef)?.update(),
- forceUpdate: () => (0, vue.unref)(instanceRef)?.forceUpdate(),
- instanceRef: (0, vue.computed)(() => (0, vue.unref)(instanceRef))
- };
- };
- function deriveState(state) {
- const elements = Object.keys(state.elements);
- return {
- styles: (0, lodash_unified.fromPairs)(elements.map((element) => [element, state.styles[element] || {}])),
- attributes: (0, lodash_unified.fromPairs)(elements.map((element) => [element, state.attributes[element]]))
- };
- }
- //#endregion
- exports.usePopper = usePopper;
- //# sourceMappingURL=index.js.map
|