@will-ui/vue 1.0.0

package/dist/use/useGlobalZIndex.js

@@ -0,0 +1,28 @@
+import { getCurrentInstance, onMounted, ref } from "vue";
+//#region use/useGlobalZIndex.ts
+/**
+* 功能：全局自增(onMounted时自增)z-index，用以所有弹窗类型的东西
+*/
+var __will_ui_global_z_index = 100;
+function useGlobalZIndex() {
+	const zIndex = ref(__will_ui_global_z_index);
+	function add(delta) {
+		__will_ui_global_z_index += delta ?? 1;
+		zIndex.value = __will_ui_global_z_index;
+		return zIndex.value;
+	}
+	if (getCurrentInstance()) onMounted(add);
+	else add();
+	return {
+		zIndex,
+		add,
+		get: () => zIndex.value,
+		set(i) {
+			zIndex.value = i;
+		}
+	};
+}
+//#endregion
+export { useGlobalZIndex as default };
+
+//# sourceMappingURL=useGlobalZIndex.js.map

package/dist/use/useGlobalZIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalZIndex.js","names":[],"sources":["../../use/useGlobalZIndex.ts"],"sourcesContent":["/**\r\n * 功能：全局自增(onMounted时自增)z-index，用以所有弹窗类型的东西\r\n */\r\nimport { getCurrentInstance, onMounted, ref } from \"vue\"\r\nlet __will_ui_global_z_index = 100\r\n\r\nexport default function useGlobalZIndex() {\r\n  const zIndex = ref(__will_ui_global_z_index)\r\n  function add(delta?: number) {\r\n    __will_ui_global_z_index += delta ?? 1\r\n    zIndex.value = __will_ui_global_z_index\r\n    return zIndex.value\r\n  }\r\n  if (getCurrentInstance()) {\r\n    onMounted(add)\r\n  } else {\r\n    add()\r\n  }\r\n  return {\r\n    zIndex,\r\n    add,\r\n    get: () => zIndex.value,\r\n    set(i: number) {\r\n      zIndex.value = i\r\n    },\r\n  }\r\n}\r\n"],"mappings":";;;;;AAIA,IAAI,2BAA2B;AAE/B,SAAwB,kBAAkB;CACxC,MAAM,SAAS,IAAI,wBAAwB;CAC3C,SAAS,IAAI,OAAgB;EAC3B,4BAA4B,SAAS;EACrC,OAAO,QAAQ;EACf,OAAO,OAAO;CAChB;CACA,IAAI,mBAAmB,GACrB,UAAU,GAAG;MAEb,IAAI;CAEN,OAAO;EACL;EACA;EACA,WAAW,OAAO;EAClB,IAAI,GAAW;GACb,OAAO,QAAQ;EACjB;CACF;AACF"}

package/dist/use/useMouse.d.ts

@@ -0,0 +1,15 @@
+export default function useMouse(callbackHandler?: {
+    mousemove?: Function;
+    mousedown?: Function;
+    mouseup?: Function;
+    mouseover?: Function;
+}): {
+    client: {
+        x: number;
+        y: number;
+    };
+    page: {
+        x: number;
+        y: number;
+    };
+};

package/dist/use/useMouse.js

@@ -0,0 +1,36 @@
+import useEvent from "./useEvent.js";
+import { reactive } from "vue";
+//#region use/useMouse.ts
+function useMouse(callbackHandler) {
+	const doc = document;
+	const client = reactive({
+		x: 0,
+		y: 0
+	});
+	const page = reactive({
+		x: 0,
+		y: 0
+	});
+	function handler(e) {
+		({clientX: client.x, clientY: client.y, pageX: page.x, pageY: page.y} = e);
+		if (callbackHandler) {
+			const { mousemove: mm, mousedown: md, mouseup: mu, mouseover: mo } = callbackHandler;
+			if (e.type === "mousemove") mm?.(e);
+			if (e.type === "mousedown") md?.(e);
+			if (e.type === "mouseover") mo?.(e);
+			if (e.type === "mouseup") mu?.(e);
+		}
+	}
+	useEvent(doc, "mousemove", handler);
+	useEvent(doc, "mousedown", handler);
+	useEvent(doc, "mouseup", handler);
+	useEvent(doc, "mouseover", handler);
+	return {
+		client,
+		page
+	};
+}
+//#endregion
+export { useMouse as default };
+
+//# sourceMappingURL=useMouse.js.map

package/dist/use/useMouse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouse.js","names":[],"sources":["../../use/useMouse.ts"],"sourcesContent":["import { reactive } from \"vue\"\r\nimport useEvent from \"./useEvent\"\r\nexport default function useMouse(callbackHandler?: {\r\n  mousemove?: Function\r\n  mousedown?: Function\r\n  mouseup?: Function\r\n  mouseover?: Function\r\n}) {\r\n  const doc = document\r\n  const client = reactive({ x: 0, y: 0 })\r\n  const page = reactive({ x: 0, y: 0 })\r\n  function handler(e: MouseEvent) {\r\n    ;({\r\n      clientX: client.x,\r\n      clientY: client.y,\r\n      pageX: page.x,\r\n      pageY: page.y,\r\n    } = e)\r\n\r\n    if (callbackHandler) {\r\n      const {\r\n        mousemove: mm,\r\n        mousedown: md,\r\n        mouseup: mu,\r\n        mouseover: mo,\r\n      } = callbackHandler\r\n      if (e.type === \"mousemove\") {\r\n        mm?.(e)\r\n      }\r\n      if (e.type === \"mousedown\") {\r\n        md?.(e)\r\n      }\r\n      if (e.type === \"mouseover\") {\r\n        mo?.(e)\r\n      }\r\n      if (e.type === \"mouseup\") {\r\n        mu?.(e)\r\n      }\r\n    }\r\n  }\r\n  useEvent(doc, \"mousemove\", handler)\r\n  useEvent(doc, \"mousedown\", handler)\r\n  useEvent(doc, \"mouseup\", handler)\r\n  useEvent(doc, \"mouseover\", handler)\r\n  return {\r\n    client,\r\n    page,\r\n  }\r\n}\r\n"],"mappings":";;;AAEA,SAAwB,SAAS,iBAK9B;CACD,MAAM,MAAM;CACZ,MAAM,SAAS,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CACtC,MAAM,OAAO,SAAS;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CACpC,SAAS,QAAQ,GAAe;EAC7B,CAAC,CACA,SAAS,OAAO,GAChB,SAAS,OAAO,GAChB,OAAO,KAAK,GACZ,OAAO,KAAK,KACV;EAEJ,IAAI,iBAAiB;GACnB,MAAM,EACJ,WAAW,IACX,WAAW,IACX,SAAS,IACT,WAAW,OACT;GACJ,IAAI,EAAE,SAAS,aACb,KAAK,CAAC;GAER,IAAI,EAAE,SAAS,aACb,KAAK,CAAC;GAER,IAAI,EAAE,SAAS,aACb,KAAK,CAAC;GAER,IAAI,EAAE,SAAS,WACb,KAAK,CAAC;EAEV;CACF;CACA,SAAS,KAAK,aAAa,OAAO;CAClC,SAAS,KAAK,aAAa,OAAO;CAClC,SAAS,KAAK,WAAW,OAAO;CAChC,SAAS,KAAK,aAAa,OAAO;CAClC,OAAO;EACL;EACA;CACF;AACF"}

package/dist/use/useMousePositionInElement.d.ts

@@ -0,0 +1,6 @@
+type PositionType = number | "left" | "center" | "right" | "bottom" | "top";
+export default function useMousePositionInElement(elem: any, triggerEvent?: keyof GlobalEventHandlersEventMap): {
+    x: import('vue').Ref<PositionType, PositionType>;
+    y: import('vue').Ref<PositionType, PositionType>;
+};
+export {};

package/dist/use/useMousePositionInElement.js

@@ -0,0 +1,27 @@
+import { getBoundingClientRect } from "../util/dom.js";
+import useEvent from "./useEvent.js";
+import { ref } from "vue";
+//#region use/useMousePositionInElement.ts
+function useMousePositionInElement(elem, triggerEvent = "click") {
+	const x = ref();
+	const y = ref();
+	function handleEvent(e) {
+		const elemRect = getBoundingClientRect(elem);
+		x.value = e.clientX - elemRect.x;
+		y.value = e.clientY - elemRect.y;
+	}
+	function reset() {
+		x.value = void 0;
+		y.value = void 0;
+	}
+	useEvent(elem, triggerEvent, handleEvent);
+	useEvent(elem, "mouseleave", reset);
+	return {
+		x,
+		y
+	};
+}
+//#endregion
+export { useMousePositionInElement as default };
+
+//# sourceMappingURL=useMousePositionInElement.js.map

package/dist/use/useMousePositionInElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMousePositionInElement.js","names":[],"sources":["../../use/useMousePositionInElement.ts"],"sourcesContent":["import { ref } from \"vue\"\r\nimport { getBoundingClientRect } from \"../util\"\r\nimport useEvent from \"./useEvent\"\r\ntype PositionType = number | \"left\" | \"center\" | \"right\" | \"bottom\" | \"top\"\r\nexport default function useMousePositionInElement(\r\n  elem: any,\r\n  triggerEvent: keyof GlobalEventHandlersEventMap = \"click\"\r\n) {\r\n  const x = ref<PositionType>()\r\n  const y = ref<PositionType>()\r\n  function handleEvent(e: MouseEvent) {\r\n    const elemRect = getBoundingClientRect(elem)\r\n    x.value = e.clientX - elemRect.x\r\n    y.value = e.clientY - elemRect.y\r\n  }\r\n  function reset() {\r\n    x.value = undefined\r\n    y.value = undefined\r\n  }\r\n  useEvent(elem, triggerEvent, handleEvent)\r\n  useEvent(elem, \"mouseleave\", reset)\r\n  return { x, y }\r\n}\r\n"],"mappings":";;;;AAIA,SAAwB,0BACtB,MACA,eAAkD,SAClD;CACA,MAAM,IAAI,IAAkB;CAC5B,MAAM,IAAI,IAAkB;CAC5B,SAAS,YAAY,GAAe;EAClC,MAAM,WAAW,sBAAsB,IAAI;EAC3C,EAAE,QAAQ,EAAE,UAAU,SAAS;EAC/B,EAAE,QAAQ,EAAE,UAAU,SAAS;CACjC;CACA,SAAS,QAAQ;EACf,EAAE,QAAQ,KAAA;EACV,EAAE,QAAQ,KAAA;CACZ;CACA,SAAS,MAAM,cAAc,WAAW;CACxC,SAAS,MAAM,cAAc,KAAK;CAClC,OAAO;EAAE;EAAG;CAAE;AAChB"}

package/dist/use/useParentNode.d.ts

@@ -0,0 +1,3 @@
+export default function useParentNode(elem: any): {
+    parentNode: import('vue').Ref<HTMLElement, HTMLElement>;
+};

package/dist/use/useParentNode.js

@@ -0,0 +1,25 @@
+import { getStyle } from "../util/dom.js";
+import useElement from "./useElement.js";
+import { onMounted, onUpdated, ref } from "vue";
+//#region use/useParentNode.ts
+function useParentNode(elem) {
+	const parentNode = ref();
+	const { el } = useElement(elem);
+	function getPNode() {
+		let _node;
+		const _el = el.value;
+		if (_el === void 0) console.warn("获取的节点为undefined");
+		else {
+			_node = _el.parentNode;
+			if (getStyle(_node, "position") === "static") _node.style.position = "relative";
+			parentNode.value = _node;
+		}
+	}
+	onMounted(getPNode);
+	onUpdated(getPNode);
+	return { parentNode };
+}
+//#endregion
+export { useParentNode as default };
+
+//# sourceMappingURL=useParentNode.js.map

package/dist/use/useParentNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParentNode.js","names":[],"sources":["../../use/useParentNode.ts"],"sourcesContent":["import { onMounted, ref, onUpdated } from \"vue\"\r\nimport { getStyle } from \"../util\"\r\nimport useElement from \"./useElement\"\r\n\r\nexport default function useParentNode(elem: any) {\r\n  const parentNode = ref<HTMLElement>()\r\n  const { el } = useElement(elem)\r\n  function getPNode() {\r\n    let _node: HTMLElement\r\n    const _el = el.value\r\n    if (_el === undefined) {\r\n      console.warn(\"获取的节点为undefined\")\r\n    } else {\r\n      _node = _el.parentNode\r\n      const position = getStyle(_node, \"position\")\r\n      if (position === \"static\") {\r\n        _node.style.position = \"relative\"\r\n      }\r\n      parentNode.value = _node\r\n    }\r\n  }\r\n  onMounted(getPNode)\r\n  onUpdated(getPNode)\r\n  return {\r\n    parentNode,\r\n  }\r\n}\r\n"],"mappings":";;;;AAIA,SAAwB,cAAc,MAAW;CAC/C,MAAM,aAAa,IAAiB;CACpC,MAAM,EAAE,OAAO,WAAW,IAAI;CAC9B,SAAS,WAAW;EAClB,IAAI;EACJ,MAAM,MAAM,GAAG;EACf,IAAI,QAAQ,KAAA,GACV,QAAQ,KAAK,iBAAiB;OACzB;GACL,QAAQ,IAAI;GAEZ,IADiB,SAAS,OAAO,UAC7B,MAAa,UACf,MAAM,MAAM,WAAW;GAEzB,WAAW,QAAQ;EACrB;CACF;CACA,UAAU,QAAQ;CAClB,UAAU,QAAQ;CAClB,OAAO,EACL,WACF;AACF"}

package/dist/use/usePercentDrag.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'vue';
+export interface UsePercentDragOptions {
+    /** 取值范围元素；拖拽过程中以该元素宽度换算百分比 */
+    target: Ref<HTMLElement | undefined | null>;
+    disabled?: () => boolean;
+    onStart?: (percent: number) => void;
+    onMove?: (percent: number) => void;
+    onEnd?: (percent: number) => void;
+}
+declare function clampPercent(value: number): number;
+declare function percentFromClientX(el: HTMLElement, clientX: number): number;
+/**
+ * 在元素上按下并拖拽，按水平位置换算 0–100 百分比。
+ * 适用于进度条、音量条等。
+ */
+export default function usePercentDrag(options: UsePercentDragOptions): {
+    dragging: Ref<boolean, boolean>;
+    onMouseDown: (e: MouseEvent) => void;
+};
+export { clampPercent, percentFromClientX };

package/dist/use/usePercentDrag.js

@@ -0,0 +1,59 @@
+import { onUnmounted, ref } from "vue";
+//#region use/usePercentDrag.ts
+function clampPercent(value) {
+	return Math.max(0, Math.min(100, value));
+}
+function percentFromClientX(el, clientX) {
+	const rect = el.getBoundingClientRect();
+	if (!rect.width) return 0;
+	return clampPercent((clientX - rect.left) / rect.width * 100);
+}
+/**
+* 在元素上按下并拖拽，按水平位置换算 0–100 百分比。
+* 适用于进度条、音量条等。
+*/
+function usePercentDrag(options) {
+	const dragging = ref(false);
+	let lastPercent = 0;
+	function readPercent(clientX) {
+		const el = options.target.value;
+		if (!el) return lastPercent;
+		lastPercent = percentFromClientX(el, clientX);
+		return lastPercent;
+	}
+	function onWindowMove(e) {
+		if (!dragging.value) return;
+		const percent = readPercent(e.clientX);
+		options.onMove?.(percent);
+	}
+	function onWindowUp(e) {
+		if (!dragging.value) return;
+		const percent = readPercent(e.clientX);
+		dragging.value = false;
+		window.removeEventListener("mousemove", onWindowMove);
+		window.removeEventListener("mouseup", onWindowUp);
+		options.onEnd?.(percent);
+	}
+	function onMouseDown(e) {
+		if (options.disabled?.()) return;
+		e.preventDefault();
+		const percent = readPercent(e.clientX);
+		dragging.value = true;
+		options.onStart?.(percent);
+		options.onMove?.(percent);
+		window.addEventListener("mousemove", onWindowMove);
+		window.addEventListener("mouseup", onWindowUp);
+	}
+	onUnmounted(() => {
+		window.removeEventListener("mousemove", onWindowMove);
+		window.removeEventListener("mouseup", onWindowUp);
+	});
+	return {
+		dragging,
+		onMouseDown
+	};
+}
+//#endregion
+export { clampPercent, usePercentDrag as default, percentFromClientX };
+
+//# sourceMappingURL=usePercentDrag.js.map

package/dist/use/usePercentDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePercentDrag.js","names":[],"sources":["../../use/usePercentDrag.ts"],"sourcesContent":["import type { Ref } from 'vue'\r\nimport { onUnmounted, ref } from 'vue'\r\n\r\nexport interface UsePercentDragOptions {\r\n  /** 取值范围元素；拖拽过程中以该元素宽度换算百分比 */\r\n  target: Ref<HTMLElement | undefined | null>\r\n  disabled?: () => boolean\r\n  onStart?: (percent: number) => void\r\n  onMove?: (percent: number) => void\r\n  onEnd?: (percent: number) => void\r\n}\r\n\r\nfunction clampPercent(value: number) {\r\n  return Math.max(0, Math.min(100, value))\r\n}\r\n\r\nfunction percentFromClientX(el: HTMLElement, clientX: number) {\r\n  const rect = el.getBoundingClientRect()\r\n  if (!rect.width) return 0\r\n  return clampPercent(((clientX - rect.left) / rect.width) * 100)\r\n}\r\n\r\n/**\r\n * 在元素上按下并拖拽，按水平位置换算 0–100 百分比。\r\n * 适用于进度条、音量条等。\r\n */\r\nexport default function usePercentDrag(options: UsePercentDragOptions) {\r\n  const dragging = ref(false)\r\n  let lastPercent = 0\r\n\r\n  function readPercent(clientX: number) {\r\n    const el = options.target.value\r\n    if (!el) return lastPercent\r\n    lastPercent = percentFromClientX(el, clientX)\r\n    return lastPercent\r\n  }\r\n\r\n  function onWindowMove(e: MouseEvent) {\r\n    if (!dragging.value) return\r\n    const percent = readPercent(e.clientX)\r\n    options.onMove?.(percent)\r\n  }\r\n\r\n  function onWindowUp(e: MouseEvent) {\r\n    if (!dragging.value) return\r\n    const percent = readPercent(e.clientX)\r\n    dragging.value = false\r\n    window.removeEventListener('mousemove', onWindowMove)\r\n    window.removeEventListener('mouseup', onWindowUp)\r\n    options.onEnd?.(percent)\r\n  }\r\n\r\n  function onMouseDown(e: MouseEvent) {\r\n    if (options.disabled?.()) return\r\n    e.preventDefault()\r\n    const percent = readPercent(e.clientX)\r\n    dragging.value = true\r\n    options.onStart?.(percent)\r\n    options.onMove?.(percent)\r\n    window.addEventListener('mousemove', onWindowMove)\r\n    window.addEventListener('mouseup', onWindowUp)\r\n  }\r\n\r\n  onUnmounted(() => {\r\n    window.removeEventListener('mousemove', onWindowMove)\r\n    window.removeEventListener('mouseup', onWindowUp)\r\n  })\r\n\r\n  return {\r\n    dragging,\r\n    onMouseDown,\r\n  }\r\n}\r\n\r\nexport { clampPercent, percentFromClientX }\r\n"],"mappings":";;AAYA,SAAS,aAAa,OAAe;CACnC,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACzC;AAEA,SAAS,mBAAmB,IAAiB,SAAiB;CAC5D,MAAM,OAAO,GAAG,sBAAsB;CACtC,IAAI,CAAC,KAAK,OAAO,OAAO;CACxB,OAAO,cAAe,UAAU,KAAK,QAAQ,KAAK,QAAS,GAAG;AAChE;;;;;AAMA,SAAwB,eAAe,SAAgC;CACrE,MAAM,WAAW,IAAI,KAAK;CAC1B,IAAI,cAAc;CAElB,SAAS,YAAY,SAAiB;EACpC,MAAM,KAAK,QAAQ,OAAO;EAC1B,IAAI,CAAC,IAAI,OAAO;EAChB,cAAc,mBAAmB,IAAI,OAAO;EAC5C,OAAO;CACT;CAEA,SAAS,aAAa,GAAe;EACnC,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,UAAU,YAAY,EAAE,OAAO;EACrC,QAAQ,SAAS,OAAO;CAC1B;CAEA,SAAS,WAAW,GAAe;EACjC,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,UAAU,YAAY,EAAE,OAAO;EACrC,SAAS,QAAQ;EACjB,OAAO,oBAAoB,aAAa,YAAY;EACpD,OAAO,oBAAoB,WAAW,UAAU;EAChD,QAAQ,QAAQ,OAAO;CACzB;CAEA,SAAS,YAAY,GAAe;EAClC,IAAI,QAAQ,WAAW,GAAG;EAC1B,EAAE,eAAe;EACjB,MAAM,UAAU,YAAY,EAAE,OAAO;EACrC,SAAS,QAAQ;EACjB,QAAQ,UAAU,OAAO;EACzB,QAAQ,SAAS,OAAO;EACxB,OAAO,iBAAiB,aAAa,YAAY;EACjD,OAAO,iBAAiB,WAAW,UAAU;CAC/C;CAEA,kBAAkB;EAChB,OAAO,oBAAoB,aAAa,YAAY;EACpD,OAAO,oBAAoB,WAAW,UAAU;CAClD,CAAC;CAED,OAAO;EACL;EACA;CACF;AACF"}

package/dist/use/usePictureViewport.d.ts

@@ -0,0 +1,57 @@
+/** Picture 全屏预览视口变换（适应 / 1:1 / 指针缩放 / 平移 / 旋转 / 翻转） */
+export type PictureViewportMode = 'fit' | 'one' | 'free';
+export type PictureViewportSnapshot = {
+    /** 相对自然像素的绝对缩放 */
+    scale: number;
+    tx: number;
+    ty: number;
+    /** 0 | 90 | 180 | 270 */
+    rotate: number;
+    flipX: boolean;
+    flipY: boolean;
+    mode: PictureViewportMode;
+};
+export type PictureViewportOptions = {
+    zoomMin?: number;
+    zoomMax?: number;
+    zoomStep?: number;
+};
+export declare function normalizeRotate(deg: number): number;
+/** 旋转后包围盒相对视口的适应缩放 */
+export declare function computeFitScale(naturalW: number, naturalH: number, viewportW: number, viewportH: number, rotate: number): number;
+export declare function clampScale(scale: number, min: number, max: number): number;
+/** 指针缩放：保持指针下图像点不动（视口中心为原点） */
+export declare function zoomAtPoint(tx: number, ty: number, scale: number, nextScale: number, pointerXFromCenter: number, pointerYFromCenter: number): {
+    tx: number;
+    ty: number;
+    scale: number;
+};
+export declare function toTransformCss(s: PictureViewportSnapshot): string;
+export type UsePictureViewport = {
+    getSnapshot: () => PictureViewportSnapshot;
+    /** 供渲染：当前变换 CSS */
+    getTransform: () => string;
+    setNaturalSize: (w: number, h: number) => void;
+    setViewportSize: (w: number, h: number) => void;
+    fit: (withTransition?: boolean) => void;
+    oneToOne: (withTransition?: boolean) => void;
+    zoomAt: (clientX: number, clientY: number, factor: number) => void;
+    zoomBy: (factor: number) => void;
+    panBy: (dx: number, dy: number) => void;
+    rotateBy: (delta: number) => void;
+    flip: (axis: 'x' | 'y') => void;
+    reset: () => void;
+    /** 是否已放大到可拖拽（相对 fit） */
+    canPan: () => boolean;
+    subscribe: (listener: () => void) => () => void;
+    /** 最近一次按钮操作是否应带 transition（拖拽/滚轮后清 false） */
+    consumeTransition: () => boolean;
+    /**
+     * 切图前调用：记下相对「适应」的缩放比，清空平移；
+     * 随后 setNaturalSize 会按该比例落到新图（fit/one 模式仍各自重算）。
+     */
+    prepareImageChange: () => void;
+};
+export declare function createPictureViewport(options?: PictureViewportOptions): UsePictureViewport;
+export declare const PICTURE_VIEWPORT_ZOOM_STEP = 1.15;
+export default createPictureViewport;

package/dist/use/usePictureViewport.js

@@ -0,0 +1,229 @@
+//#region use/usePictureViewport.ts
+var DEFAULT_ZOOM_MIN = .1;
+var DEFAULT_ZOOM_MAX = 8;
+var DEFAULT_ZOOM_STEP = 1.15;
+function normalizeRotate(deg) {
+	return (Math.round(deg / 90) * 90 % 360 + 360) % 360;
+}
+/** 旋转后包围盒相对视口的适应缩放 */
+function computeFitScale(naturalW, naturalH, viewportW, viewportH, rotate) {
+	if (naturalW <= 0 || naturalH <= 0 || viewportW <= 0 || viewportH <= 0) return 1;
+	const swapped = normalizeRotate(rotate) % 180 === 90;
+	const iw = swapped ? naturalH : naturalW;
+	const ih = swapped ? naturalW : naturalH;
+	return Math.min(viewportW / iw, viewportH / ih);
+}
+function clampScale(scale, min, max) {
+	return Math.min(max, Math.max(min, scale));
+}
+/** 指针缩放：保持指针下图像点不动（视口中心为原点） */
+function zoomAtPoint(tx, ty, scale, nextScale, pointerXFromCenter, pointerYFromCenter) {
+	if (scale <= 0 || nextScale <= 0 || scale === nextScale) return {
+		tx,
+		ty,
+		scale: nextScale
+	};
+	const ratio = nextScale / scale;
+	return {
+		scale: nextScale,
+		tx: pointerXFromCenter - (pointerXFromCenter - tx) * ratio,
+		ty: pointerYFromCenter - (pointerYFromCenter - ty) * ratio
+	};
+}
+function toTransformCss(s) {
+	const sx = s.scale * (s.flipX ? -1 : 1);
+	const sy = s.scale * (s.flipY ? -1 : 1);
+	return `translate(${s.tx}px, ${s.ty}px) rotate(${s.rotate}deg) scale(${sx}, ${sy})`;
+}
+function createPictureViewport(options = {}) {
+	const zoomMin = options.zoomMin ?? DEFAULT_ZOOM_MIN;
+	const zoomMax = options.zoomMax ?? DEFAULT_ZOOM_MAX;
+	let naturalW = 0;
+	let naturalH = 0;
+	let viewportW = 0;
+	let viewportH = 0;
+	let withTransition = false;
+	/** 切图时携带的相对适应缩放比；null 表示不按比例携带 */
+	let pendingZoomRatio = null;
+	let state = {
+		scale: 1,
+		tx: 0,
+		ty: 0,
+		rotate: 0,
+		flipX: false,
+		flipY: false,
+		mode: "fit"
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	function notify() {
+		listeners.forEach((l) => l());
+	}
+	function setState(next, transition) {
+		state = next;
+		withTransition = transition;
+		notify();
+	}
+	function fitScaleOf(rotate) {
+		return computeFitScale(naturalW, naturalH, viewportW, viewportH, rotate);
+	}
+	function fit(withTrans = true) {
+		const scale = clampScale(fitScaleOf(state.rotate), zoomMin, zoomMax);
+		setState({
+			...state,
+			scale,
+			tx: 0,
+			ty: 0,
+			mode: "fit"
+		}, withTrans);
+	}
+	function oneToOne(withTrans = true) {
+		const scale = clampScale(1, zoomMin, zoomMax);
+		setState({
+			...state,
+			scale,
+			tx: 0,
+			ty: 0,
+			mode: "one"
+		}, withTrans);
+	}
+	function reset() {
+		setState({
+			scale: clampScale(fitScaleOf(0), zoomMin, zoomMax),
+			tx: 0,
+			ty: 0,
+			rotate: 0,
+			flipX: false,
+			flipY: false,
+			mode: "fit"
+		}, true);
+	}
+	function zoomAt(clientX, clientY, factor) {
+		const next = clampScale(state.scale * factor, zoomMin, zoomMax);
+		const moved = zoomAtPoint(state.tx, state.ty, state.scale, next, clientX, clientY);
+		setState({
+			...state,
+			...moved,
+			mode: "free"
+		}, false);
+	}
+	function zoomBy(factor) {
+		const next = clampScale(state.scale * factor, zoomMin, zoomMax);
+		setState({
+			...state,
+			scale: next,
+			mode: "free"
+		}, true);
+	}
+	function panBy(dx, dy) {
+		if (!canPan()) return;
+		setState({
+			...state,
+			tx: state.tx + dx,
+			ty: state.ty + dy,
+			mode: "free"
+		}, false);
+	}
+	function rotateBy(delta) {
+		const rotate = normalizeRotate(state.rotate + delta);
+		const scale = state.mode === "one" ? clampScale(1, zoomMin, zoomMax) : clampScale(fitScaleOf(rotate), zoomMin, zoomMax);
+		setState({
+			...state,
+			rotate,
+			scale,
+			tx: 0,
+			ty: 0,
+			mode: state.mode === "one" ? "one" : "fit"
+		}, true);
+	}
+	function flip(axis) {
+		setState({
+			...state,
+			flipX: axis === "x" ? !state.flipX : state.flipX,
+			flipY: axis === "y" ? !state.flipY : state.flipY
+		}, true);
+	}
+	function canPan() {
+		const fit = fitScaleOf(state.rotate);
+		return state.scale > fit * 1.001;
+	}
+	function prepareImageChange() {
+		if (state.mode === "free") {
+			const fit = fitScaleOf(state.rotate);
+			pendingZoomRatio = fit > 0 ? state.scale / fit : 1;
+		} else pendingZoomRatio = null;
+		setState({
+			...state,
+			tx: 0,
+			ty: 0
+		}, false);
+	}
+	return {
+		getSnapshot: () => state,
+		getTransform: () => toTransformCss(state),
+		setNaturalSize: (w, h) => {
+			naturalW = w;
+			naturalH = h;
+			if (state.mode === "fit") {
+				pendingZoomRatio = null;
+				fit(false);
+				return;
+			}
+			if (state.mode === "one") {
+				pendingZoomRatio = null;
+				oneToOne(false);
+				return;
+			}
+			if (pendingZoomRatio != null) {
+				const next = clampScale(fitScaleOf(state.rotate) * pendingZoomRatio, zoomMin, zoomMax);
+				pendingZoomRatio = null;
+				setState({
+					...state,
+					scale: next,
+					tx: 0,
+					ty: 0,
+					mode: "free"
+				}, false);
+				return;
+			}
+			setState({
+				...state,
+				scale: clampScale(state.scale, zoomMin, zoomMax),
+				tx: 0,
+				ty: 0
+			}, false);
+		},
+		setViewportSize: (w, h) => {
+			if (w === viewportW && h === viewportH) return;
+			viewportW = w;
+			viewportH = h;
+			if (state.mode === "fit") fit(false);
+			else if (state.mode === "one") oneToOne(false);
+		},
+		fit,
+		oneToOne,
+		zoomAt,
+		zoomBy,
+		panBy,
+		rotateBy,
+		flip,
+		reset,
+		canPan,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		consumeTransition: () => {
+			const v = withTransition;
+			withTransition = false;
+			return v;
+		},
+		prepareImageChange
+	};
+}
+var PICTURE_VIEWPORT_ZOOM_STEP = DEFAULT_ZOOM_STEP;
+//#endregion
+export { PICTURE_VIEWPORT_ZOOM_STEP, clampScale, computeFitScale, createPictureViewport, createPictureViewport as default, normalizeRotate, toTransformCss, zoomAtPoint };
+
+//# sourceMappingURL=usePictureViewport.js.map

package/dist/use/usePictureViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePictureViewport.js","names":[],"sources":["../../use/usePictureViewport.ts"],"sourcesContent":["/** Picture 全屏预览视口变换（适应 / 1:1 / 指针缩放 / 平移 / 旋转 / 翻转） */\r\n\r\nexport type PictureViewportMode = 'fit' | 'one' | 'free'\r\n\r\nexport type PictureViewportSnapshot = {\r\n  /** 相对自然像素的绝对缩放 */\r\n  scale: number\r\n  tx: number\r\n  ty: number\r\n  /** 0 | 90 | 180 | 270 */\r\n  rotate: number\r\n  flipX: boolean\r\n  flipY: boolean\r\n  mode: PictureViewportMode\r\n}\r\n\r\nexport type PictureViewportOptions = {\r\n  zoomMin?: number\r\n  zoomMax?: number\r\n  zoomStep?: number\r\n}\r\n\r\nconst DEFAULT_ZOOM_MIN = 0.1\r\nconst DEFAULT_ZOOM_MAX = 8\r\nconst DEFAULT_ZOOM_STEP = 1.15\r\n\r\nexport function normalizeRotate(deg: number): number {\r\n  const n = ((Math.round(deg / 90) * 90) % 360 + 360) % 360\r\n  return n\r\n}\r\n\r\n/** 旋转后包围盒相对视口的适应缩放 */\r\nexport function computeFitScale(\r\n  naturalW: number,\r\n  naturalH: number,\r\n  viewportW: number,\r\n  viewportH: number,\r\n  rotate: number,\r\n): number {\r\n  if (naturalW <= 0 || naturalH <= 0 || viewportW <= 0 || viewportH <= 0) {\r\n    return 1\r\n  }\r\n  const swapped = normalizeRotate(rotate) % 180 === 90\r\n  const iw = swapped ? naturalH : naturalW\r\n  const ih = swapped ? naturalW : naturalH\r\n  return Math.min(viewportW / iw, viewportH / ih)\r\n}\r\n\r\nexport function clampScale(\r\n  scale: number,\r\n  min: number,\r\n  max: number,\r\n): number {\r\n  return Math.min(max, Math.max(min, scale))\r\n}\r\n\r\n/** 指针缩放：保持指针下图像点不动（视口中心为原点） */\r\nexport function zoomAtPoint(\r\n  tx: number,\r\n  ty: number,\r\n  scale: number,\r\n  nextScale: number,\r\n  pointerXFromCenter: number,\r\n  pointerYFromCenter: number,\r\n): { tx: number; ty: number; scale: number } {\r\n  if (scale <= 0 || nextScale <= 0 || scale === nextScale) {\r\n    return { tx, ty, scale: nextScale }\r\n  }\r\n  const ratio = nextScale / scale\r\n  return {\r\n    scale: nextScale,\r\n    tx: pointerXFromCenter - (pointerXFromCenter - tx) * ratio,\r\n    ty: pointerYFromCenter - (pointerYFromCenter - ty) * ratio,\r\n  }\r\n}\r\n\r\nexport function toTransformCss(s: PictureViewportSnapshot): string {\r\n  const sx = s.scale * (s.flipX ? -1 : 1)\r\n  const sy = s.scale * (s.flipY ? -1 : 1)\r\n  return `translate(${s.tx}px, ${s.ty}px) rotate(${s.rotate}deg) scale(${sx}, ${sy})`\r\n}\r\n\r\nexport type UsePictureViewport = {\r\n  getSnapshot: () => PictureViewportSnapshot\r\n  /** 供渲染：当前变换 CSS */\r\n  getTransform: () => string\r\n  setNaturalSize: (w: number, h: number) => void\r\n  setViewportSize: (w: number, h: number) => void\r\n  fit: (withTransition?: boolean) => void\r\n  oneToOne: (withTransition?: boolean) => void\r\n  zoomAt: (clientX: number, clientY: number, factor: number) => void\r\n  zoomBy: (factor: number) => void\r\n  panBy: (dx: number, dy: number) => void\r\n  rotateBy: (delta: number) => void\r\n  flip: (axis: 'x' | 'y') => void\r\n  reset: () => void\r\n  /** 是否已放大到可拖拽（相对 fit） */\r\n  canPan: () => boolean\r\n  subscribe: (listener: () => void) => () => void\r\n  /** 最近一次按钮操作是否应带 transition（拖拽/滚轮后清 false） */\r\n  consumeTransition: () => boolean\r\n  /**\r\n   * 切图前调用：记下相对「适应」的缩放比，清空平移；\r\n   * 随后 setNaturalSize 会按该比例落到新图（fit/one 模式仍各自重算）。\r\n   */\r\n  prepareImageChange: () => void\r\n}\r\n\r\nexport function createPictureViewport(\r\n  options: PictureViewportOptions = {},\r\n): UsePictureViewport {\r\n  const zoomMin = options.zoomMin ?? DEFAULT_ZOOM_MIN\r\n  const zoomMax = options.zoomMax ?? DEFAULT_ZOOM_MAX\r\n\r\n  let naturalW = 0\r\n  let naturalH = 0\r\n  let viewportW = 0\r\n  let viewportH = 0\r\n  let withTransition = false\r\n  /** 切图时携带的相对适应缩放比；null 表示不按比例携带 */\r\n  let pendingZoomRatio: number | null = null\r\n\r\n  let state: PictureViewportSnapshot = {\r\n    scale: 1,\r\n    tx: 0,\r\n    ty: 0,\r\n    rotate: 0,\r\n    flipX: false,\r\n    flipY: false,\r\n    mode: 'fit',\r\n  }\r\n\r\n  const listeners = new Set<() => void>()\r\n\r\n  function notify() {\r\n    listeners.forEach((l) => l())\r\n  }\r\n\r\n  function setState(next: PictureViewportSnapshot, transition: boolean) {\r\n    state = next\r\n    withTransition = transition\r\n    notify()\r\n  }\r\n\r\n  function fitScaleOf(rotate: number) {\r\n    return computeFitScale(naturalW, naturalH, viewportW, viewportH, rotate)\r\n  }\r\n\r\n  function fit(withTrans = true) {\r\n    const scale = clampScale(fitScaleOf(state.rotate), zoomMin, zoomMax)\r\n    setState(\r\n      {\r\n        ...state,\r\n        scale,\r\n        tx: 0,\r\n        ty: 0,\r\n        mode: 'fit',\r\n      },\r\n      withTrans,\r\n    )\r\n  }\r\n\r\n  function oneToOne(withTrans = true) {\r\n    const scale = clampScale(1, zoomMin, zoomMax)\r\n    setState(\r\n      {\r\n        ...state,\r\n        scale,\r\n        tx: 0,\r\n        ty: 0,\r\n        mode: 'one',\r\n      },\r\n      withTrans,\r\n    )\r\n  }\r\n\r\n  function reset() {\r\n    setState(\r\n      {\r\n        scale: clampScale(fitScaleOf(0), zoomMin, zoomMax),\r\n        tx: 0,\r\n        ty: 0,\r\n        rotate: 0,\r\n        flipX: false,\r\n        flipY: false,\r\n        mode: 'fit',\r\n      },\r\n      true,\r\n    )\r\n  }\r\n\r\n  function zoomAt(clientX: number, clientY: number, factor: number) {\r\n    // 调用方传入相对视口中心的坐标更稳；此处约定 client 为视口本地：中心原点\r\n    const next = clampScale(state.scale * factor, zoomMin, zoomMax)\r\n    const moved = zoomAtPoint(\r\n      state.tx,\r\n      state.ty,\r\n      state.scale,\r\n      next,\r\n      clientX,\r\n      clientY,\r\n    )\r\n    setState(\r\n      {\r\n        ...state,\r\n        ...moved,\r\n        mode: 'free',\r\n      },\r\n      false,\r\n    )\r\n  }\r\n\r\n  function zoomBy(factor: number) {\r\n    const next = clampScale(state.scale * factor, zoomMin, zoomMax)\r\n    setState(\r\n      {\r\n        ...state,\r\n        scale: next,\r\n        mode: 'free',\r\n      },\r\n      true,\r\n    )\r\n  }\r\n\r\n  function panBy(dx: number, dy: number) {\r\n    if (!canPan()) return\r\n    setState(\r\n      {\r\n        ...state,\r\n        tx: state.tx + dx,\r\n        ty: state.ty + dy,\r\n        mode: 'free',\r\n      },\r\n      false,\r\n    )\r\n  }\r\n\r\n  function rotateBy(delta: number) {\r\n    const rotate = normalizeRotate(state.rotate + delta)\r\n    const scale =\r\n      state.mode === 'one'\r\n        ? clampScale(1, zoomMin, zoomMax)\r\n        : clampScale(fitScaleOf(rotate), zoomMin, zoomMax)\r\n    setState(\r\n      {\r\n        ...state,\r\n        rotate,\r\n        scale,\r\n        tx: 0,\r\n        ty: 0,\r\n        mode: state.mode === 'one' ? 'one' : 'fit',\r\n      },\r\n      true,\r\n    )\r\n  }\r\n\r\n  function flip(axis: 'x' | 'y') {\r\n    setState(\r\n      {\r\n        ...state,\r\n        flipX: axis === 'x' ? !state.flipX : state.flipX,\r\n        flipY: axis === 'y' ? !state.flipY : state.flipY,\r\n      },\r\n      true,\r\n    )\r\n  }\r\n\r\n  function canPan() {\r\n    const fit = fitScaleOf(state.rotate)\r\n    return state.scale > fit * 1.001\r\n  }\r\n\r\n  function prepareImageChange() {\r\n    if (state.mode === 'free') {\r\n      const fit = fitScaleOf(state.rotate)\r\n      pendingZoomRatio = fit > 0 ? state.scale / fit : 1\r\n    } else {\r\n      pendingZoomRatio = null\r\n    }\r\n    setState(\r\n      {\r\n        ...state,\r\n        tx: 0,\r\n        ty: 0,\r\n      },\r\n      false,\r\n    )\r\n  }\r\n\r\n  return {\r\n    getSnapshot: () => state,\r\n    getTransform: () => toTransformCss(state),\r\n    setNaturalSize: (w, h) => {\r\n      naturalW = w\r\n      naturalH = h\r\n      if (state.mode === 'fit') {\r\n        pendingZoomRatio = null\r\n        fit(false)\r\n        return\r\n      }\r\n      if (state.mode === 'one') {\r\n        pendingZoomRatio = null\r\n        oneToOne(false)\r\n        return\r\n      }\r\n      // free：按切图前相对适应比例落到新图；无 pending 则保留绝对 scale\r\n      if (pendingZoomRatio != null) {\r\n        const next = clampScale(\r\n          fitScaleOf(state.rotate) * pendingZoomRatio,\r\n          zoomMin,\r\n          zoomMax,\r\n        )\r\n        pendingZoomRatio = null\r\n        setState(\r\n          {\r\n            ...state,\r\n            scale: next,\r\n            tx: 0,\r\n            ty: 0,\r\n            mode: 'free',\r\n          },\r\n          false,\r\n        )\r\n        return\r\n      }\r\n      setState(\r\n        {\r\n          ...state,\r\n          scale: clampScale(state.scale, zoomMin, zoomMax),\r\n          tx: 0,\r\n          ty: 0,\r\n        },\r\n        false,\r\n      )\r\n    },\r\n    setViewportSize: (w, h) => {\r\n      if (w === viewportW && h === viewportH) return\r\n      viewportW = w\r\n      viewportH = h\r\n      if (state.mode === 'fit') fit(false)\r\n      else if (state.mode === 'one') oneToOne(false)\r\n    },\r\n    fit,\r\n    oneToOne,\r\n    zoomAt,\r\n    zoomBy,\r\n    panBy,\r\n    rotateBy,\r\n    flip,\r\n    reset,\r\n    canPan,\r\n    subscribe: (listener) => {\r\n      listeners.add(listener)\r\n      return () => {\r\n        listeners.delete(listener)\r\n      }\r\n    },\r\n    consumeTransition: () => {\r\n      const v = withTransition\r\n      withTransition = false\r\n      return v\r\n    },\r\n    prepareImageChange,\r\n  }\r\n}\r\n\r\nexport const PICTURE_VIEWPORT_ZOOM_STEP = DEFAULT_ZOOM_STEP\r\n\r\nexport default createPictureViewport\r\n"],"mappings":"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"}

package/dist/use/useRequest.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export default function useRequest<T>(requestFn: undefined | ((para?: Ref<any>) => Promise<T>), para?: Ref<any>, manual?: boolean): {
+    loading: Ref<boolean, boolean>;
+    empty: Ref<boolean, boolean>;
+    data: Ref<T | T[], T | T[]>;
+    get: () => Promise<void>;
+};

package/dist/use/useRequest.js

@@ -0,0 +1,31 @@
+import { isArray } from "../util/tools.js";
+import { ref } from "vue";
+//#region use/useRequest.ts
+function useRequest(requestFn, para, manual = false) {
+	const loading = ref(false);
+	const empty = ref(false);
+	const data = ref();
+	async function get() {
+		try {
+			if (loading.value) return;
+			loading.value = true;
+			data.value = await requestFn?.(para?.value);
+			if (isArray(data.value)) empty.value = data.value.length === 0;
+			else empty.value = !data.value;
+			loading.value = false;
+		} catch (err) {
+			loading.value = false;
+		}
+	}
+	!manual && get();
+	return {
+		loading,
+		empty,
+		data,
+		get
+	};
+}
+//#endregion
+export { useRequest as default };
+
+//# sourceMappingURL=useRequest.js.map

package/dist/use/useRequest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequest.js","names":[],"sources":["../../use/useRequest.ts"],"sourcesContent":["import type { Ref } from \"vue\"\r\nimport { ref } from \"vue\"\r\nimport { isArray } from \"../util\"\r\nexport default function useRequest<T>(\r\n  requestFn: undefined | ((para?: Ref<any>) => Promise<T>),\r\n  para?: Ref<any>,\r\n  manual = false\r\n) {\r\n  const loading = ref(false)\r\n  const empty = ref(false)\r\n  const data: Ref<T | T[] | undefined | null> = ref()\r\n\r\n  async function get() {\r\n    try {\r\n      if (loading.value) {\r\n        return\r\n      }\r\n      loading.value = true\r\n      data.value = await requestFn?.(para?.value)\r\n      if (isArray(data.value)) {\r\n        empty.value = data.value.length === 0\r\n      } else {\r\n        empty.value = !data.value\r\n      }\r\n      loading.value = false\r\n    } catch (err) {\r\n      loading.value = false\r\n    } finally {\r\n    }\r\n  }\r\n\r\n  !manual && get()\r\n\r\n  return {\r\n    loading,\r\n    empty,\r\n    data,\r\n    get,\r\n  }\r\n}\r\n"],"mappings":";;;AAGA,SAAwB,WACtB,WACA,MACA,SAAS,OACT;CACA,MAAM,UAAU,IAAI,KAAK;CACzB,MAAM,QAAQ,IAAI,KAAK;CACvB,MAAM,OAAwC,IAAI;CAElD,eAAe,MAAM;EACnB,IAAI;GACF,IAAI,QAAQ,OACV;GAEF,QAAQ,QAAQ;GAChB,KAAK,QAAQ,MAAM,YAAY,MAAM,KAAK;GAC1C,IAAI,QAAQ,KAAK,KAAK,GACpB,MAAM,QAAQ,KAAK,MAAM,WAAW;QAEpC,MAAM,QAAQ,CAAC,KAAK;GAEtB,QAAQ,QAAQ;EAClB,SAAS,KAAK;GACZ,QAAQ,QAAQ;EAClB;CAEF;CAEA,CAAC,UAAU,IAAI;CAEf,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}