first commit
This commit is contained in:
root
+83
@@ -0,0 +1,83 @@
|
||||
import * as vue from "vue";
|
||||
import { Ref } from "vue";
|
||||
import * as _popperjs_core0 from "@popperjs/core";
|
||||
import { Instance, Modifier, Options, State, VirtualElement } from "@popperjs/core";
|
||||
|
||||
//#region ../../packages/hooks/use-popper/index.d.ts
|
||||
type ElementType = HTMLElement | undefined;
|
||||
type ReferenceElement = ElementType | VirtualElement;
|
||||
type PartialOptions = Partial<Options>;
|
||||
declare const usePopper: (referenceElementRef: Ref<ReferenceElement>, popperElementRef: Ref<ElementType>, opts?: Ref<PartialOptions> | PartialOptions) => {
|
||||
state: vue.ComputedRef<{
|
||||
elements?: {
|
||||
reference: Element | VirtualElement;
|
||||
popper: HTMLElement;
|
||||
arrow?: HTMLElement;
|
||||
} | undefined;
|
||||
options?: _popperjs_core0.OptionsGeneric<any> | undefined;
|
||||
placement?: _popperjs_core0.Placement | undefined;
|
||||
strategy?: _popperjs_core0.PositioningStrategy | undefined;
|
||||
orderedModifiers?: Modifier<any, any>[] | undefined;
|
||||
rects?: _popperjs_core0.StateRects | undefined;
|
||||
scrollParents?: {
|
||||
reference: Array<Element | _popperjs_core0.Window | _popperjs_core0.VisualViewport>;
|
||||
popper: Array<Element | _popperjs_core0.Window | _popperjs_core0.VisualViewport>;
|
||||
} | undefined;
|
||||
styles?: {
|
||||
[key: string]: Partial<CSSStyleDeclaration>;
|
||||
} | undefined;
|
||||
attributes?: {
|
||||
[key: string]: {
|
||||
[key: string]: string | boolean;
|
||||
};
|
||||
} | undefined;
|
||||
modifiersData?: {
|
||||
[key: string]: any;
|
||||
arrow?: {
|
||||
x?: number;
|
||||
y?: number;
|
||||
centerOffset: number;
|
||||
};
|
||||
hide?: {
|
||||
isReferenceHidden: boolean;
|
||||
hasPopperEscaped: boolean;
|
||||
referenceClippingOffsets: _popperjs_core0.SideObject;
|
||||
popperEscapeOffsets: _popperjs_core0.SideObject;
|
||||
};
|
||||
offset?: {
|
||||
"bottom-start"?: _popperjs_core0.Offsets | undefined;
|
||||
bottom?: _popperjs_core0.Offsets | undefined;
|
||||
auto?: _popperjs_core0.Offsets | undefined;
|
||||
"auto-start"?: _popperjs_core0.Offsets | undefined;
|
||||
"auto-end"?: _popperjs_core0.Offsets | undefined;
|
||||
top?: _popperjs_core0.Offsets | undefined;
|
||||
right?: _popperjs_core0.Offsets | undefined;
|
||||
left?: _popperjs_core0.Offsets | undefined;
|
||||
"top-start"?: _popperjs_core0.Offsets | undefined;
|
||||
"top-end"?: _popperjs_core0.Offsets | undefined;
|
||||
"bottom-end"?: _popperjs_core0.Offsets | undefined;
|
||||
"right-start"?: _popperjs_core0.Offsets | undefined;
|
||||
"right-end"?: _popperjs_core0.Offsets | undefined;
|
||||
"left-start"?: _popperjs_core0.Offsets | undefined;
|
||||
"left-end"?: _popperjs_core0.Offsets | undefined;
|
||||
};
|
||||
preventOverflow?: _popperjs_core0.Offsets;
|
||||
popperOffsets?: _popperjs_core0.Offsets;
|
||||
} | undefined;
|
||||
reset?: boolean | undefined;
|
||||
}>;
|
||||
styles: vue.ComputedRef<{
|
||||
[key: string]: Partial<CSSStyleDeclaration>;
|
||||
}>;
|
||||
attributes: vue.ComputedRef<{
|
||||
[key: string]: {
|
||||
[key: string]: string | boolean;
|
||||
};
|
||||
}>;
|
||||
update: () => Promise<Partial<State>> | undefined;
|
||||
forceUpdate: () => void | undefined;
|
||||
instanceRef: vue.ComputedRef<Instance | undefined>;
|
||||
};
|
||||
type UsePopperReturn = ReturnType<typeof usePopper>;
|
||||
//#endregion
|
||||
export { PartialOptions, UsePopperReturn, usePopper };
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
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
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":[],"sources":["../../../../../packages/hooks/use-popper/index.ts"],"sourcesContent":["import { computed, onBeforeUnmount, ref, shallowRef, unref, watch } from 'vue'\nimport { createPopper } from '@popperjs/core'\nimport { fromPairs } from 'lodash-unified'\n\nimport type { Ref } from 'vue'\nimport type {\n Instance,\n Modifier,\n Options,\n State,\n VirtualElement,\n} from '@popperjs/core'\n\ntype ElementType = HTMLElement | undefined\ntype ReferenceElement = ElementType | VirtualElement\nexport type PartialOptions = Partial<Options>\n\nexport const usePopper = (\n referenceElementRef: Ref<ReferenceElement>,\n popperElementRef: Ref<ElementType>,\n opts: Ref<PartialOptions> | PartialOptions = {} as PartialOptions\n) => {\n const stateUpdater = {\n name: 'updateState',\n enabled: true,\n phase: 'write',\n fn: ({ state }) => {\n const derivedState = deriveState(state)\n\n Object.assign(states.value, derivedState)\n },\n requires: ['computeStyles'],\n } as Modifier<'updateState', any>\n\n const options = computed<Options>(() => {\n const { onFirstUpdate, placement, strategy, modifiers } = unref(opts)\n\n return {\n onFirstUpdate,\n placement: placement || 'bottom',\n strategy: strategy || 'absolute',\n modifiers: [\n ...(modifiers || []),\n stateUpdater,\n { name: 'applyStyles', enabled: false },\n ],\n }\n })\n\n const instanceRef = shallowRef<Instance | undefined>()\n const states = ref<Pick<State, 'styles' | 'attributes'>>({\n styles: {\n popper: {\n position: unref(options).strategy,\n left: '0',\n top: '0',\n },\n arrow: {\n position: 'absolute',\n },\n },\n attributes: {},\n })\n\n const destroy = () => {\n if (!instanceRef.value) return\n\n instanceRef.value.destroy()\n instanceRef.value = undefined\n }\n\n watch(\n options,\n (newOptions) => {\n const instance = unref(instanceRef)\n if (instance) {\n instance.setOptions(newOptions)\n }\n },\n {\n deep: true,\n }\n )\n\n watch(\n [referenceElementRef, popperElementRef],\n ([referenceElement, popperElement]) => {\n destroy()\n if (!referenceElement || !popperElement) return\n\n instanceRef.value = createPopper(\n referenceElement,\n popperElement,\n unref(options)\n )\n }\n )\n\n onBeforeUnmount(() => {\n destroy()\n })\n\n return {\n state: computed(() => ({ ...(unref(instanceRef)?.state || {}) })),\n styles: computed(() => unref(states).styles),\n attributes: computed(() => unref(states).attributes),\n update: () => unref(instanceRef)?.update(),\n forceUpdate: () => unref(instanceRef)?.forceUpdate(),\n // Preventing end users from modifying the instance.\n instanceRef: computed(() => unref(instanceRef)),\n }\n}\n\nfunction deriveState(state: State) {\n const elements = Object.keys(state.elements) as unknown as Array<\n keyof State['elements']\n >\n\n const styles = fromPairs(\n elements.map(\n (element) =>\n [element, state.styles[element] || {}] as [\n string,\n State['styles'][keyof State['styles']],\n ]\n )\n )\n\n const attributes = fromPairs(\n elements.map(\n (element) =>\n [element, state.attributes[element]] as [\n string,\n State['attributes'][keyof State['attributes']],\n ]\n )\n )\n\n return {\n styles,\n attributes,\n }\n}\n\nexport type UsePopperReturn = ReturnType<typeof usePopper>\n"],"mappings":";;;;;;;AAiBA,MAAa,aACX,qBACA,kBACA,OAA6C,EAAE,KAC5C;CACH,MAAM,eAAe;EACnB,MAAM;EACN,SAAS;EACT,OAAO;EACP,KAAK,EAAE,YAAY;GACjB,MAAM,eAAe,YAAY,MAAM;AAEvC,UAAO,OAAO,OAAO,OAAO,aAAa;;EAE3C,UAAU,CAAC,gBAAgB;EAC5B;CAED,MAAM,kCAAkC;EACtC,MAAM,EAAE,eAAe,WAAW,UAAU,6BAAoB,KAAK;AAErE,SAAO;GACL;GACA,WAAW,aAAa;GACxB,UAAU,YAAY;GACtB,WAAW;IACT,GAAI,aAAa,EAAE;IACnB;IACA;KAAE,MAAM;KAAe,SAAS;KAAO;IACxC;GACF;GACD;CAEF,MAAM,mCAAgD;CACtD,MAAM,sBAAmD;EACvD,QAAQ;GACN,QAAQ;IACN,yBAAgB,QAAQ,CAAC;IACzB,MAAM;IACN,KAAK;IACN;GACD,OAAO,EACL,UAAU,YACX;GACF;EACD,YAAY,EAAE;EACf,CAAC;CAEF,MAAM,gBAAgB;AACpB,MAAI,CAAC,YAAY,MAAO;AAExB,cAAY,MAAM,SAAS;AAC3B,cAAY,QAAQ;;AAGtB,gBACE,UACC,eAAe;EACd,MAAM,0BAAiB,YAAY;AACnC,MAAI,SACF,UAAS,WAAW,WAAW;IAGnC,EACE,MAAM,MACP,CACF;AAED,gBACE,CAAC,qBAAqB,iBAAiB,GACtC,CAAC,kBAAkB,mBAAmB;AACrC,WAAS;AACT,MAAI,CAAC,oBAAoB,CAAC,cAAe;AAEzC,cAAY,yCACV,kBACA,8BACM,QAAQ,CACf;GAEJ;AAED,gCAAsB;AACpB,WAAS;GACT;AAEF,QAAO;EACL,gCAAuB,EAAE,kBAAU,YAAY,EAAE,SAAS,EAAE,EAAG,EAAE;EACjE,+CAA6B,OAAO,CAAC,OAAO;EAC5C,mDAAiC,OAAO,CAAC,WAAW;EACpD,6BAAoB,YAAY,EAAE,QAAQ;EAC1C,kCAAyB,YAAY,EAAE,aAAa;EAEpD,oDAAkC,YAAY,CAAC;EAChD;;AAGH,SAAS,YAAY,OAAc;CACjC,MAAM,WAAW,OAAO,KAAK,MAAM,SAAS;AAwB5C,QAAO;EACL,sCApBA,SAAS,KACN,YACC,CAAC,SAAS,MAAM,OAAO,YAAY,EAAE,CAAC,CAIzC,CACF;EAcC,0CAXA,SAAS,KACN,YACC,CAAC,SAAS,MAAM,WAAW,SAAS,CAIvC,CACF;EAKA"}
|
||||
Reference in New Issue
Block a user