@v-c/image 1.0.8 → 1.0.10

package/dist/{image/src/Image.js → Image.js}

@@ -1,14 +1,15 @@
 import { COMMON_PROPS } from "./common.js";
 import { usePreviewGroupContext } from "./context.js";
-import { useMergedState } from "../../util/dist/hooks/useMergedState.js";
-import { pickAttrs } from "../../util/dist/pickAttrs.js";
-import { getAttrStyleAndClass, getStylePxValue } from "../../util/dist/props-util/index.js";
 import useRegisterImage from "./hooks/useRegisterImage.js";
 import useStatus from "./hooks/useStatus.js";
-import Preview_default from "./Preview/index.js";
+import Preview from "./Preview/index.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
-var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+import useMergedState from "@v-c/util/dist/hooks/useMergedState";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+import { getAttrStyleAndClass, getStylePxValue } from "@v-c/util/dist/props-util";
+//#region src/Image.tsx
+var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const groupContext = usePreviewGroupContext();
 	const prefixCls = computed(() => props.prefixCls ?? "vc-image");
 	const previewPrefixCls = computed(() => props.previewPrefixCls ?? `${prefixCls.value}-preview`);
@@ -71,7 +72,7 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 	};
 	const onPreviewKeyDown = (event) => {
 		props.onKeydown?.(event);
-		if (!canPreview) return;
+		if (!canPreview.value) return;
 		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
 			const rect = event.target.getBoundingClientRect();
@@ -114,9 +115,9 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 		return createVNode(Fragment, null, [createVNode("div", mergeProps(pickAttrs(restAttrs, false), {
 			"class": rootCls,
 			"onClick": canPreview.value ? onPreview : onInternalClick,
-			"role": canPreview ? "button" : restAttrs.role,
-			"tabindex": canPreview && restAttrs.tabIndex == null ? 0 : restAttrs.tabIndex,
-			"aria-label": canPreview ? restAttrs["aria-label"] ?? restAttrs.alt : restAttrs["aria-label"],
+			"role": canPreview.value ? "button" : restAttrs.role,
+			"tabindex": canPreview.value && restAttrs.tabIndex == null ? 0 : restAttrs.tabIndex,
+			"aria-label": canPreview.value ? restAttrs["aria-label"] ?? restAttrs.alt : restAttrs["aria-label"],
 			"onKeydown": onPreviewKeyDown,
 			"style": rootStyle
 		}), [
@@ -138,7 +139,7 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 				"class": clsx(`${prefixCls.value}-cover`, props.classNames?.cover, `${prefixCls.value}-cover-${coverPlacement}`),
 				"style": props.styles?.cover
 			}, [coverNode])
-		]), !groupContext && canPreview.value && createVNode(Preview_default, mergeProps({
+		]), !groupContext && canPreview.value && createVNode(Preview, mergeProps({
 			"aria-hidden": !isShowPreview.value,
 			"open": isShowPreview.value,
 			"prefixCls": previewPrefixCls.value,
@@ -253,4 +254,5 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 	name: "Image",
 	inheritAttrs: false
 });
-export { Image_default as default };
+//#endregion
+export { Image as default };

package/dist/Preview/CloseBtn.d.ts

@@ -1,8 +1,11 @@
 import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
 export interface CloseBtnProps {
     prefixCls: string;
     icon?: VueNode;
     onClick: (e: MouseEvent) => void;
+    className?: string;
+    style?: CSSProperties;
 }
 declare const CloseBtn: import('vue').DefineSetupFnComponent<CloseBtnProps, {}, {}, CloseBtnProps & {}, import('vue').PublicProps>;
 export default CloseBtn;

package/dist/{image/src/Preview → Preview}/CloseBtn.js

@@ -1,9 +1,12 @@
 import { createVNode, defineComponent } from "vue";
-var CloseBtn_default = /* @__PURE__ */ defineComponent((props) => {
+import { clsx } from "@v-c/util";
+//#region src/Preview/CloseBtn.tsx
+var CloseBtn = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
-		const { prefixCls, icon, onClick } = props;
+		const { prefixCls, icon, onClick, className, style } = props;
 		return createVNode("button", {
-			"class": `${prefixCls}-close`,
+			"class": clsx(`${prefixCls}-close`, className),
+			"style": style,
 			"type": "button",
 			"onClick": onClick
 		}, [icon]);
@@ -12,8 +15,7 @@ var CloseBtn_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		icon: {
 			type: [
@@ -30,10 +32,20 @@ var CloseBtn_default = /* @__PURE__ */ defineComponent((props) => {
 		},
 		onClick: {
 			type: Function,
-			required: true,
+			required: true
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
 			default: void 0
 		}
 	},
 	name: "ImagePreviewCloseBtn"
 });
-export { CloseBtn_default as default };
+//#endregion
+export { CloseBtn as default };

package/dist/{image/src/Preview → Preview}/Footer.js

@@ -1,6 +1,7 @@
 import { createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
-var Footer_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/Preview/Footer.tsx
+var Footer = /* @__PURE__ */ defineComponent((props) => {
 	const renderOperation = ({ type, disabled, onClick, icon }) => {
 		const actionCls = `${props.prefixCls}-actions-action`;
 		return createVNode("button", {
@@ -108,13 +109,11 @@ var Footer_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		showProgress: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		countRender: {
 			type: Function,
@@ -128,104 +127,83 @@ var Footer_default = /* @__PURE__ */ defineComponent((props) => {
 		},
 		current: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		count: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		showSwitch: {
 			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		icons: {
-			required: true,
-			default: void 0
+			required: true
 		},
+		icons: { required: true },
 		scale: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		minScale: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		maxScale: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		image: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		transform: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		classNames: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		styles: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onActive: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onFlipY: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onFlipX: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onRotateLeft: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onRotateRight: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onZoomOut: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onZoomIn: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onClose: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onReset: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "ImagePreviewFooter"
 });
-export { Footer_default as default };
+//#endregion
+export { Footer as default };

package/dist/{image/src/Preview → Preview}/PrevNext.js

@@ -1,6 +1,7 @@
 import { Fragment, createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
-var PrevNext_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/Preview/PrevNext.tsx
+var PrevNext = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
 		const { prefixCls, onActive, current, count, icons } = props;
 		const switchCls = `${prefixCls}-switch`;
@@ -26,30 +27,26 @@ var PrevNext_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onActive: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		current: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		count: {
 			type: Number,
-			required: true,
-			default: void 0
+			required: true
 		},
 		icons: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "ImagePreviewPrevNext"
 });
-export { PrevNext_default as default };
+//#endregion
+export { PrevNext as default };

package/dist/Preview/index.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties } from 'vue';
 import { TransformAction, TransformType } from '../hooks/useImageTransform';
 import { ImgInfo } from '../Image';
 import { FooterSemanticName } from './Footer';
-export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
+export type PreviewSemanticName = 'root' | 'mask' | 'body' | 'close' | FooterSemanticName;
 export interface OperationIcons {
     rotateLeft?: VueNode;
     rotateRight?: VueNode;
@@ -60,7 +60,9 @@ export interface InternalPreviewConfig {
     open?: boolean;
     getContainer?: PortalProps['getContainer'];
     zIndex?: number;
+    maskClosable?: boolean;
     afterOpenChange?: (open: boolean) => void;
+    focusTrap?: boolean;
     movable?: boolean;
     icons?: OperationIcons;
     closeIcon?: VueNode | boolean | null;

package/dist/{image/src/Preview → Preview}/index.js

@@ -1,22 +1,24 @@
 import { usePreviewGroupContext } from "../context.js";
 import useStatus from "../hooks/useStatus.js";
-import { canUseDom } from "../../../util/dist/Dom/canUseDom.js";
-import { useLockFocus } from "../../../util/dist/Dom/focus.js";
-import { KeyCodeStr } from "../../../util/dist/KeyCode.js";
-import { getTransitionProps } from "../../../util/dist/utils/transition.js";
 import useImageTransform from "../hooks/useImageTransform.js";
-import { BASE_SCALE_RATIO } from "../previewConfig.js";
+import "../previewConfig.js";
 import useMouseEvent from "../hooks/useMouseEvent.js";
 import useTouchEvent from "../hooks/useTouchEvent.js";
-import CloseBtn_default from "./CloseBtn.js";
-import Footer_default from "./Footer.js";
-import PrevNext_default from "./PrevNext.js";
+import CloseBtn from "./CloseBtn.js";
+import Footer from "./Footer.js";
+import PrevNext from "./PrevNext.js";
 import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, watch, watchEffect } from "vue";
 import { clsx } from "@v-c/util";
 import Portal from "@v-c/portal";
-var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+import canUseDom from "@v-c/util/dist/Dom/canUseDom";
+import { useLockFocus } from "@v-c/util/dist/Dom/focus";
+import { KeyCodeStr } from "@v-c/util/dist/KeyCode";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+//#region src/Preview/index.tsx
+var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const imgEl = shallowRef();
 	const wrapperRef = shallowRef(null);
+	const triggerRef = shallowRef(null);
 	const groupContext = usePreviewGroupContext();
 	const showLeftOrRightSwitches = computed(() => !!groupContext && (props.count ?? 1) > 1);
 	const showOperationsProgress = computed(() => !!groupContext && (props.count ?? 1) >= 1);
@@ -33,6 +35,9 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	watch(() => props.open, (open) => {
 		if (!open) resetTransform("close");
 	});
+	watch(() => props.open, (open) => {
+		if (open && canUseDom()) triggerRef.value = document.activeElement;
+	});
 	const onDoubleClick = (event) => {
 		if (!props.open) return;
 		if (transform.value.scale !== 1) updateTransform({
@@ -76,10 +81,6 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	const onKeyDown = (event) => {
 		if (!props.open) return;
 		const { key } = event;
-		if (key === KeyCodeStr.Escape) {
-			props.onClose?.();
-			return;
-		}
 		if (showLeftOrRightSwitches.value) {
 			if (key === KeyCodeStr.ArrowLeft) onActive(-1);
 			else if (key === KeyCodeStr.ArrowRight) onActive(1);
@@ -104,6 +105,8 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		if (!nextVisible) {
 			animatedVisible.value = false;
 			portalRender.value = false;
+			triggerRef.value?.focus?.();
+			triggerRef.value = null;
 		}
 		props.afterOpenChange?.(nextVisible);
 	};
@@ -114,9 +117,10 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		src: computed(() => props.src),
 		fallback: computed(() => props.fallback)
 	});
-	useLockFocus(portalRender, () => wrapperRef.value);
+	const focusTrap = computed(() => props.focusTrap ?? true);
+	useLockFocus(computed(() => !!(focusTrap.value && props.open && portalRender.value)), () => wrapperRef.value);
 	return () => {
-		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender = slots?.actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {}, movable = true } = props;
+		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender = slots?.actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {}, movable = true, maskClosable = true } = props;
 		const bodyStyle = { ...styles.body ?? {} };
 		if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
 		const image = {
@@ -160,7 +164,10 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		return createVNode(Portal, {
 			"open": open || animatedVisible.value || portalRender.value,
 			"getContainer": getContainer,
-			"autoLock": open || animatedVisible.value
+			"autoLock": open || animatedVisible.value,
+			"onEsc": ({ top }) => {
+				if (top) props.onClose?.();
+			}
 		}, { default: () => [createVNode(Transition, mergeProps(transitionProps, {
 			"onAfterEnter": () => onVisibleChanged(true),
 			"onAfterLeave": () => onVisibleChanged(false)
@@ -178,7 +185,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 				createVNode("div", {
 					"class": clsx(`${prefixCls}-mask`, classNames.mask),
 					"style": styles.mask,
-					"onClick": () => props.onClose?.()
+					"onClick": maskClosable ? () => props.onClose?.() : void 0
 				}, null),
 				createVNode("div", {
 					"class": clsx(`${prefixCls}-body`, classNames.body),
@@ -188,19 +195,21 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 					image,
 					...groupContext ? { current } : {}
 				}) : imgNode]),
-				closeIcon !== false && closeIcon !== null && createVNode(CloseBtn_default, {
+				closeIcon !== false && closeIcon !== null && createVNode(CloseBtn, {
 					"prefixCls": prefixCls,
 					"icon": closeIcon === true ? icons.close : closeIcon || icons.close,
-					"onClick": () => props.onClose?.()
+					"onClick": () => props.onClose?.(),
+					"className": classNames.close,
+					"style": styles.close
 				}, null),
-				showLeftOrRightSwitches.value && createVNode(PrevNext_default, {
+				showLeftOrRightSwitches.value && createVNode(PrevNext, {
 					"prefixCls": prefixCls,
 					"current": current,
 					"count": count,
 					"icons": icons,
 					"onActive": onActive
 				}, null),
-				createVNode(Footer_default, {
+				createVNode(Footer, {
 					"prefixCls": prefixCls,
 					"showProgress": showOperationsProgress.value,
 					"current": current,
@@ -233,8 +242,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	props: /* @__PURE__ */ mergeDefaults({
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		classNames: {
 			type: Object,
@@ -293,8 +301,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		},
 		mousePosition: {
 			type: [null, Object],
-			required: true,
-			default: void 0
+			required: true
 		},
 		rootClassName: {
 			type: String,
@@ -345,11 +352,21 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 			required: false,
 			default: void 0
 		},
+		maskClosable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		afterOpenChange: {
 			type: Function,
 			required: false,
 			default: void 0
 		},
+		focusTrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		movable: {
 			type: Boolean,
 			required: false,
@@ -406,4 +423,5 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	name: "ImagePreview",
 	inheritAttrs: false
 });
-export { Preview_default as default };
+//#endregion
+export { Preview as default };

package/dist/{image/src/PreviewGroup.js → PreviewGroup.js}

@@ -1,9 +1,10 @@
 import { usePreviewGroupProvider } from "./context.js";
-import { useMergedState } from "../../util/dist/hooks/useMergedState.js";
-import Preview_default from "./Preview/index.js";
+import Preview from "./Preview/index.js";
 import usePreviewItems from "./hooks/usePreviewItems.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, toRef, watch } from "vue";
-var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+import useMergedState from "@v-c/util/dist/hooks/useMergedState";
+//#region src/PreviewGroup.tsx
+var PreviewGroup = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
 	const mergedPreviewConfig = computed(() => {
 		if (props.preview && typeof props.preview === "object") return props.preview;
 		return {};
@@ -54,7 +55,7 @@ var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit
 		const { src, ...imgCommonProps } = itemsList[current.value]?.data || {};
 		const countRender = slots.countRender ? (currentNum, total) => slots.countRender?.(currentNum, total) : mergedPreviewConfig.value.countRender;
 		const { open: _open, current: _current, onOpenChange: _onOpenChange, onChange: _onChange, ...restPreviewConfig } = mergedPreviewConfig.value;
-		return createVNode(Fragment, null, [slots.default?.(), createVNode(Preview_default, mergeProps({
+		return createVNode(Fragment, null, [slots.default?.(), createVNode(Preview, mergeProps({
 			"aria-hidden": !isShowPreview.value,
 			"open": isShowPreview.value,
 			"prefixCls": props.previewPrefixCls,
@@ -130,4 +131,5 @@ var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit
 	inheritAttrs: false,
 	emits: ["change"]
 });
-export { PreviewGroup_default as default };
+//#endregion
+export { PreviewGroup as default };

package/dist/{image/src/common.js → common.js}

@@ -1,4 +1,5 @@
-const COMMON_PROPS = [
+//#region src/common.ts
+var COMMON_PROPS = [
 	"crossOrigin",
 	"decoding",
 	"draggable",
@@ -10,4 +11,5 @@ const COMMON_PROPS = [
 	"alt",
 	"fetchPriority"
 ];
+//#endregion
 export { COMMON_PROPS };

package/dist/{image/src/context.js → context.js}

@@ -1,4 +1,5 @@
 import { inject, provide } from "vue";
+//#region src/context.ts
 var PreviewGroupContextKey = Symbol("PreviewGroupContext");
 function usePreviewGroupContext() {
 	return inject(PreviewGroupContextKey, null);
@@ -6,4 +7,5 @@ function usePreviewGroupContext() {
 function usePreviewGroupProvider(value) {
 	provide(PreviewGroupContextKey, value);
 }
+//#endregion
 export { usePreviewGroupContext, usePreviewGroupProvider };

package/dist/{image/src/getFixScaleEleTransPosition.js → getFixScaleEleTransPosition.js}

@@ -1,4 +1,5 @@
 import { getClientSize } from "./util.js";
+//#region src/getFixScaleEleTransPosition.ts
 function fixPoint(key, start, width, clientWidth) {
 	const startAddWidth = start + width;
 	const offsetStart = (width - clientWidth) / 2;
@@ -8,6 +9,18 @@ function fixPoint(key, start, width, clientWidth) {
 	} else if (start < 0 || startAddWidth > clientWidth) return { [key]: start < 0 ? offsetStart : -offsetStart };
 	return {};
 }
+/**
+* Fix positon x,y point when
+*
+* Ele width && height < client
+* - Back origin
+*
+* - Ele width | height > clientWidth | clientHeight
+* - left | top > 0 -> Back 0
+* - left | top + width | height < clientWidth | clientHeight -> Back left | top + width | height === clientWidth | clientHeight
+*
+* Regardless of other
+*/
 function getFixScaleEleTransPosition(width, height, left, top) {
 	const { width: clientWidth, height: clientHeight } = getClientSize();
 	let fixPos = null;
@@ -21,4 +34,5 @@ function getFixScaleEleTransPosition(width, height, left, top) {
 	};
 	return fixPos;
 }
+//#endregion
 export { getFixScaleEleTransPosition as default };

package/dist/{image/src/hooks → hooks}/useImageTransform.js

@@ -1,7 +1,8 @@
 import { getClientSize } from "../util.js";
-import { isEqual_default } from "../../../util/dist/isEqual.js";
-import { raf_default } from "../../../util/dist/raf.js";
 import { ref, shallowRef } from "vue";
+import isEqual from "@v-c/util/dist/isEqual";
+import raf from "@v-c/util/dist/raf";
+//#region src/hooks/useImageTransform.ts
 var initialTransform = {
 	x: 0,
 	y: 0,
@@ -17,15 +18,16 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 	const resetTransform = (action) => {
 		const oldTransform = transform.value;
 		transform.value = initialTransform;
-		if (!isEqual_default(initialTransform, oldTransform)) onTransform?.({
+		if (!isEqual(initialTransform, oldTransform)) onTransform?.({
 			transform: initialTransform,
 			action
 		});
 	};
+	/** Direct update transform */
 	const updateTransform = (newTransform, action) => {
 		if (frame.value === null) {
 			queue.value = [];
-			frame.value = raf_default(() => {
+			frame.value = raf(() => {
 				let memoState = transform.value;
 				queue.value.forEach((queueState) => {
 					memoState = {
@@ -46,6 +48,7 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 			...newTransform
 		});
 	};
+	/** Scale according to the position of centerX and centerY */
 	const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
 		if (!imgRef.value) return;
 		const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.value;
@@ -61,15 +64,23 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 			newScale = isTouch ? newScale : _minScale;
 			newRatio = newScale / _transform.scale;
 		}
+		/** Default center point scaling */
 		const mergedCenterX = centerX ?? innerWidth / 2;
 		const mergedCenterY = centerY ?? innerHeight / 2;
 		const diffRatio = newRatio - 1;
+		/** Deviation calculated from image size */
 		const diffImgX = diffRatio * width * .5;
 		const diffImgY = diffRatio * height * .5;
+		/** The difference between the click position and the edge of the document */
 		const diffOffsetLeft = diffRatio * (mergedCenterX - _transform.x - offsetLeft);
 		const diffOffsetTop = diffRatio * (mergedCenterY - _transform.y - offsetTop);
+		/** Final positioning */
 		let newX = _transform.x - (diffOffsetLeft - diffImgX);
 		let newY = _transform.y - (diffOffsetTop - diffImgY);
+		/**
+		* When zooming the image
+		* When the image size is smaller than the width and height of the window, the position is initialized
+		*/
 		if (ratio < 1 && newScale === 1) {
 			const mergedWidth = offsetWidth * newScale;
 			const mergedHeight = offsetHeight * newScale;
@@ -92,4 +103,5 @@ function useImageTransform(imgRef, minScale, maxScale, onTransform) {
 		dispatchZoomChange
 	};
 }
+//#endregion
 export { useImageTransform as default };

package/dist/{image/src/hooks → hooks}/useMouseEvent.js

@@ -1,8 +1,9 @@
 import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
-import { canUseDom } from "../../../util/dist/Dom/canUseDom.js";
-import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../previewConfig.js";
+import "../previewConfig.js";
 import { shallowRef, watch } from "vue";
 import { warning } from "@v-c/util";
+import canUseDom from "@v-c/util/dist/Dom/canUseDom";
+//#region src/hooks/useMouseEvent.ts
 function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange) {
 	const isMoving = shallowRef(false);
 	const startPositionInfo = shallowRef({
@@ -34,6 +35,7 @@ function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransf
 		if (open.value && isMoving.value) {
 			const { x, y, scale, rotate } = transform.value;
 			isMoving.value = false;
+			/** No need to restore the position when the picture is not moved, So as not to interfere with the click */
 			const { transformX, transformY } = startPositionInfo.value;
 			if (!(x !== transformX && y !== transformY)) return;
 			if (!imgRef.value) return;
@@ -88,4 +90,5 @@ function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransf
 		onWheel
 	};
 }
+//#endregion
 export { useMouseEvent as default };

package/dist/{image/src/hooks → hooks}/usePreviewItems.js

@@ -1,5 +1,9 @@
 import { COMMON_PROPS } from "../common.js";
 import { computed, shallowRef, watchEffect } from "vue";
+//#region src/hooks/usePreviewItems.ts
+/**
+* Merge props provided `items` or context collected images
+*/
 function usePreviewItems(items) {
 	const images = shallowRef({});
 	const registerImage = (id, data) => {
@@ -41,4 +45,5 @@ function usePreviewItems(items) {
 		computed(() => !!items?.value)
 	];
 }
+//#endregion
 export { usePreviewItems as default };

package/dist/{image/src/hooks → hooks}/useRegisterImage.js

@@ -1,5 +1,6 @@
 import { usePreviewGroupContext } from "../context.js";
 import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+//#region src/hooks/useRegisterImage.ts
 var uid = 0;
 function useRegisterImage(canPreview, data) {
 	uid += 1;
@@ -21,4 +22,5 @@ function useRegisterImage(canPreview, data) {
 	});
 	return id.value;
 }
+//#endregion
 export { useRegisterImage as default };

package/dist/{image/src/hooks → hooks}/useStatus.js

@@ -1,5 +1,6 @@
 import { isImageValid } from "../util.js";
 import { computed, shallowRef, watch, watchEffect } from "vue";
+//#region src/hooks/useStatus.ts
 function useStatus(options) {
 	const { src, isCustomPlaceholder, fallback } = options;
 	const status = shallowRef(isCustomPlaceholder?.value ? "loading" : "normal");
@@ -42,4 +43,5 @@ function useStatus(options) {
 		status
 	];
 }
+//#endregion
 export { useStatus as default };

package/dist/{image/src/hooks → hooks}/useTouchEvent.js

@@ -1,6 +1,7 @@
 import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
-import { canUseDom } from "../../../util/dist/Dom/canUseDom.js";
 import { shallowRef, watchEffect } from "vue";
+import canUseDom from "@v-c/util/dist/Dom/canUseDom";
+//#region src/hooks/useTouchEvent.ts
 function getDistance(a, b) {
 	const x = a.x - b.x;
 	const y = a.y - b.y;
@@ -89,7 +90,9 @@ function useTouchEvent(imgRef, movable, open, minScale, transform, updateTransfo
 		if (isTouching.value) isTouching.value = false;
 		updateTouchPointInfo({ eventType: "none" });
 		const { rotate, scale } = transform.value;
-		if (minScale.value > scale) return updateTransform({
+		if (minScale.value > scale)
+ /** When the scaling ratio is less than the minimum scaling ratio, reset the scaling ratio */
+		return updateTransform({
 			x: 0,
 			y: 0,
 			scale: minScale.value
@@ -118,4 +121,5 @@ function useTouchEvent(imgRef, movable, open, minScale, transform, updateTransfo
 		onTouchEnd
 	};
 }
+//#endregion
 export { useTouchEvent as default };

package/dist/index.js

@@ -0,0 +1,7 @@
+import Image from "./Image.js";
+import PreviewGroup from "./PreviewGroup.js";
+//#region src/index.ts
+var ExportImage = Image;
+ExportImage.PreviewGroup = PreviewGroup;
+//#endregion
+export { PreviewGroup, ExportImage as default };

package/dist/previewConfig.js

@@ -0,0 +1,7 @@
+//#region src/previewConfig.ts
+/** Scale the ratio base */
+var BASE_SCALE_RATIO = 1;
+/** The maximum zoom ratio when the mouse zooms in, adjustable */
+var WHEEL_MAX_SCALE_RATIO = 1;
+//#endregion
+export { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO };

package/dist/{image/src/util.js → util.js}

@@ -1,3 +1,4 @@
+//#region src/util.ts
 function isImageValid(src) {
 	return new Promise((resolve) => {
 		if (!src) {
@@ -26,4 +27,5 @@ function getClientSize() {
 		height: window.innerHeight || document.documentElement.clientHeight
 	};
 }
+//#endregion
 export { getClientSize, isImageValid };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "image component",
   "author": "",
   "license": "MIT",

package/dist/image/src/index.js

@@ -1,6 +0,0 @@
-import Image_default from "./Image.js";
-import PreviewGroup_default from "./PreviewGroup.js";
-var ExportImage = Image_default;
-ExportImage.PreviewGroup = PreviewGroup_default;
-var src_default = ExportImage;
-export { PreviewGroup_default as PreviewGroup, src_default as default };

package/dist/image/src/previewConfig.js

@@ -1,3 +0,0 @@
-const BASE_SCALE_RATIO = 1;
-const WHEEL_MAX_SCALE_RATIO = 1;
-export { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO };

package/dist/util/dist/Dom/canUseDom.js

@@ -1,4 +0,0 @@
-function canUseDom() {
-	return !!(typeof window !== "undefined" && window.document && window.document.createElement);
-}
-export { canUseDom };

package/dist/util/dist/Dom/focus.js

@@ -1,80 +0,0 @@
-import { isVisible_default } from "./isVisible.js";
-import { watch } from "vue";
-function focusable(node, includePositive = false) {
-	if (isVisible_default(node)) {
-		const nodeName = node.nodeName.toLowerCase();
-		const isFocusableElement = [
-			"input",
-			"select",
-			"textarea",
-			"button"
-		].includes(nodeName) || node.isContentEditable || nodeName === "a" && !!node.getAttribute("href");
-		const tabIndexAttr = node.getAttribute("tabindex");
-		const tabIndexNum = Number(tabIndexAttr);
-		let tabIndex = null;
-		if (tabIndexAttr && !Number.isNaN(tabIndexNum)) tabIndex = tabIndexNum;
-		else if (isFocusableElement && tabIndex === null) tabIndex = 0;
-		if (isFocusableElement && node.disabled) tabIndex = null;
-		return tabIndex !== null && (tabIndex >= 0 || includePositive && tabIndex < 0);
-	}
-	return false;
-}
-function getFocusNodeList(node, includePositive = false) {
-	const res = [...node.querySelectorAll("*")].filter((child) => {
-		return focusable(child, includePositive);
-	});
-	if (focusable(node, includePositive)) res.unshift(node);
-	return res;
-}
-var lastFocusElement = null;
-var focusElements = [];
-function getLastElement() {
-	return focusElements[focusElements.length - 1];
-}
-function hasFocus(element) {
-	const { activeElement } = document;
-	return element === activeElement || element.contains(activeElement);
-}
-function syncFocus() {
-	const lastElement = getLastElement();
-	const { activeElement } = document;
-	if (lastElement && !hasFocus(lastElement)) {
-		const focusableList = getFocusNodeList(lastElement);
-		(focusableList.includes(lastFocusElement) ? lastFocusElement : focusableList[0])?.focus();
-	} else lastFocusElement = activeElement;
-}
-function onWindowKeyDown(e) {
-	if (e.key === "Tab") {
-		const { activeElement } = document;
-		const focusableList = getFocusNodeList(getLastElement());
-		const last = focusableList[focusableList.length - 1];
-		if (e.shiftKey && activeElement === focusableList[0]) lastFocusElement = last;
-		else if (!e.shiftKey && activeElement === last) lastFocusElement = focusableList[0];
-	}
-}
-function lockFocus(element) {
-	if (element) {
-		focusElements = focusElements.filter((ele) => ele !== element);
-		focusElements.push(element);
-		window.addEventListener("focusin", syncFocus);
-		window.addEventListener("keydown", onWindowKeyDown, true);
-		syncFocus();
-	}
-	return () => {
-		lastFocusElement = null;
-		focusElements = focusElements.filter((ele) => ele !== element);
-		if (focusElements.length === 0) {
-			window.removeEventListener("focusin", syncFocus);
-			window.removeEventListener("keydown", onWindowKeyDown, true);
-		}
-	};
-}
-function useLockFocus(lock, getElement) {
-	watch(lock, (_, _o, onCleanup) => {
-		if (lock.value) {
-			const element = getElement();
-			if (element) onCleanup(lockFocus(element));
-		}
-	});
-}
-export { useLockFocus };

package/dist/util/dist/Dom/isVisible.js

@@ -1,16 +0,0 @@
-var isVisible_default = (element) => {
-	if (!element) return false;
-	if (element instanceof Element) {
-		if (element.offsetParent) return true;
-		if (element.getBBox) {
-			const { width, height } = element.getBBox();
-			if (width || height) return true;
-		}
-		if (element.getBoundingClientRect) {
-			const { width, height } = element.getBoundingClientRect();
-			if (width || height) return true;
-		}
-	}
-	return false;
-};
-export { isVisible_default };

package/dist/util/dist/KeyCode.js

@@ -1,81 +0,0 @@
-var KeyCodeStr = {
-	Enter: "Enter",
-	Backspace: "Backspace",
-	Tab: "Tab",
-	Space: " ",
-	Escape: "Escape",
-	Shift: "Shift",
-	Control: "Control",
-	Alt: "Alt",
-	Meta: "Meta",
-	ArrowLeft: "ArrowLeft",
-	ArrowUp: "ArrowUp",
-	ArrowRight: "ArrowRight",
-	ArrowDown: "ArrowDown",
-	Home: "Home",
-	End: "End",
-	PageUp: "PageUp",
-	PageDown: "PageDown",
-	Insert: "Insert",
-	Delete: "Delete",
-	F1: "F1",
-	F2: "F2",
-	F3: "F3",
-	F4: "F4",
-	F5: "F5",
-	F6: "F6",
-	F7: "F7",
-	F8: "F8",
-	F9: "F9",
-	F10: "F10",
-	F11: "F11",
-	F12: "F12",
-	Digit0: "0",
-	Digit1: "1",
-	Digit2: "2",
-	Digit3: "3",
-	Digit4: "4",
-	Digit5: "5",
-	Digit6: "6",
-	Digit7: "7",
-	Digit8: "8",
-	Digit9: "9",
-	KeyA: "a",
-	KeyB: "b",
-	KeyC: "c",
-	KeyD: "d",
-	KeyE: "e",
-	KeyF: "f",
-	KeyG: "g",
-	KeyH: "h",
-	KeyI: "i",
-	KeyJ: "j",
-	KeyK: "k",
-	KeyL: "l",
-	KeyM: "m",
-	KeyN: "n",
-	KeyO: "o",
-	KeyP: "p",
-	KeyQ: "q",
-	KeyR: "r",
-	KeyS: "s",
-	KeyT: "t",
-	KeyU: "u",
-	KeyV: "v",
-	KeyW: "w",
-	KeyX: "x",
-	KeyY: "y",
-	KeyZ: "z",
-	Semicolon: ";",
-	Equal: "=",
-	Comma: ",",
-	Minus: "-",
-	Period: ".",
-	Slash: "/",
-	Backquote: "`",
-	BracketLeft: "[",
-	Backslash: "\\",
-	BracketRight: "]",
-	Quote: "'"
-};
-export { KeyCodeStr };

package/dist/util/dist/hooks/useMergedState.js

@@ -1,24 +0,0 @@
-import { ref, toRaw, unref, watch, watchEffect } from "vue";
-function useMergedState(defaultStateValue, option) {
-	const { defaultValue, value = ref() } = option || {};
-	let initValue = typeof defaultStateValue === "function" ? defaultStateValue() : defaultStateValue;
-	if (value.value !== void 0) initValue = unref(value);
-	if (defaultValue !== void 0) initValue = typeof defaultValue === "function" ? defaultValue() : defaultValue;
-	const innerValue = ref(initValue);
-	const mergedValue = ref(initValue);
-	watchEffect(() => {
-		let val = value.value !== void 0 ? value.value : innerValue.value;
-		if (option?.postState) val = option.postState(val);
-		mergedValue.value = val;
-	});
-	function triggerChange(newValue) {
-		const preVal = mergedValue.value;
-		innerValue.value = newValue;
-		if (toRaw(mergedValue.value) !== newValue && option?.onChange) option.onChange(newValue, preVal);
-	}
-	watch(value, () => {
-		innerValue.value = value.value;
-	});
-	return [mergedValue, triggerChange];
-}
-export { useMergedState };

package/dist/util/dist/isEqual.js

@@ -1,27 +0,0 @@
-import { warning_default } from "./warning.js";
-function isEqual(obj1, obj2, shallow = false) {
-	const refSet = /* @__PURE__ */ new Set();
-	function deepEqual(a, b, level = 1) {
-		const circular = refSet.has(a);
-		warning_default(!circular, "Warning: There may be circular references");
-		if (circular) return false;
-		if (a === b) return true;
-		if (shallow && level > 1) return false;
-		refSet.add(a);
-		const newLevel = level + 1;
-		if (Array.isArray(a)) {
-			if (!Array.isArray(b) || a.length !== b.length) return false;
-			for (let i = 0; i < a.length; i++) if (!deepEqual(a[i], b[i], newLevel)) return false;
-			return true;
-		}
-		if (a && b && typeof a === "object" && typeof b === "object") {
-			const keys = Object.keys(a);
-			if (keys.length !== Object.keys(b).length) return false;
-			return keys.every((key) => deepEqual(a[key], b[key], newLevel));
-		}
-		return false;
-	}
-	return deepEqual(obj1, obj2);
-}
-var isEqual_default = isEqual;
-export { isEqual_default };

package/dist/util/dist/omit.js

@@ -1,8 +0,0 @@
-function omit(obj, fields) {
-	const clone = { ...obj };
-	if (Array.isArray(fields)) fields.forEach((key) => {
-		delete clone[key];
-	});
-	return clone;
-}
-export { omit };

package/dist/util/dist/pickAttrs.js

@@ -1,39 +0,0 @@
-var propList = `accept acceptCharset accessKey action allowFullScreen allowTransparency
-    alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
-    charSet checked classID className colSpan cols content contentEditable contextMenu
-    controls coords crossOrigin data dateTime default defer dir disabled download draggable
-    encType form formAction formEncType formMethod formNoValidate formTarget frameBorder
-    headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity
-    is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media
-    mediaGroup method min minLength multiple muted name noValidate nonce open
-    optimum pattern placeholder poster preload radioGroup readOnly rel required
-    reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
-    shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
-    summary tabIndex target title type useMap value width wmode wrap onCopy onCut onPaste onCompositionEnd onCompositionStart onCompositionUpdate onKeyDown
-    onKeyPress onKeyUp onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick
-    onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown
-    onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel
-    onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough
-    onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata
-    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError`.split(/\s+/);
-var ariaPrefix = "aria-";
-var dataPrefix = "data-";
-function match(key, prefix) {
-	return key.indexOf(prefix) === 0;
-}
-function pickAttrs(props, ariaOnly = false) {
-	let mergedConfig;
-	if (ariaOnly === false) mergedConfig = {
-		aria: true,
-		data: true,
-		attr: true
-	};
-	else if (ariaOnly === true) mergedConfig = { aria: true };
-	else mergedConfig = { ...ariaOnly };
-	const attrs = {};
-	Object.keys(props).forEach((key) => {
-		if (mergedConfig.aria && (key === "role" || match(key, ariaPrefix)) || mergedConfig.data && match(key, dataPrefix) || mergedConfig.attr && propList.includes(key)) attrs[key] = props[key];
-	});
-	return attrs;
-}
-export { pickAttrs };

package/dist/util/dist/props-util/index.js

@@ -1,32 +0,0 @@
-import { omit } from "../omit.js";
-import { Fragment, toRef } from "vue";
-var defaultOptions = {
-	class: true,
-	style: true
-};
-function pureAttrs(attrs, options = defaultOptions) {
-	const enableClass = options.class ?? defaultOptions.class;
-	const enableStyle = options.style ?? defaultOptions.style;
-	const newAttrs = { ...attrs };
-	if (enableClass) delete newAttrs.class;
-	if (enableStyle) delete newAttrs.style;
-	if (options.omits && options.omits.length > 0) return omit(newAttrs, options.omits);
-	return newAttrs;
-}
-function getAttrStyleAndClass(attrs, options) {
-	return {
-		className: attrs.class,
-		style: attrs.style,
-		restAttrs: pureAttrs(attrs, options)
-	};
-}
-function getStylePxValue(value) {
-	if (typeof value === "number") return `${value}px`;
-	else if (typeof value === "string") {
-		const trimed = value.trim();
-		if (Number.isNaN(Number(trimed))) return trimed;
-		else return `${Number(trimed)}px`;
-	}
-	return value;
-}
-export { getAttrStyleAndClass, getStylePxValue };

package/dist/util/dist/raf.js

@@ -1,36 +0,0 @@
-var raf = (callback) => +setTimeout(callback, 16);
-var caf = (num) => clearTimeout(num);
-if (typeof window !== "undefined" && "requestAnimationFrame" in window) {
-	raf = (callback) => window.requestAnimationFrame(callback);
-	caf = (handle) => window.cancelAnimationFrame(handle);
-}
-var rafUUID = 0;
-var rafIds = /* @__PURE__ */ new Map();
-function cleanup(id) {
-	rafIds.delete(id);
-}
-function wrapperRaf(callback, times = 1) {
-	rafUUID += 1;
-	const id = rafUUID;
-	function callRef(leftTimes) {
-		if (leftTimes === 0) {
-			cleanup(id);
-			callback();
-		} else {
-			const realId = raf(() => {
-				callRef(leftTimes - 1);
-			});
-			rafIds.set(id, realId);
-		}
-	}
-	callRef(times);
-	return id;
-}
-wrapperRaf.cancel = (id) => {
-	const realId = rafIds.get(id);
-	cleanup(id);
-	return caf(realId);
-};
-if (process.env.NODE_ENV !== "production") wrapperRaf.ids = () => rafIds;
-var raf_default = wrapperRaf;
-export { raf_default };

package/dist/util/dist/type.js

@@ -1,2 +0,0 @@
-var tuple = (...args) => args;
-export { tuple };

package/dist/util/dist/utils/transition.js

@@ -1,21 +0,0 @@
-import { tuple } from "../type.js";
-import { nextTick } from "vue";
-tuple("bottomLeft", "bottomRight", "topLeft", "topRight");
-function getTransitionProps(transitionName, opt = {}) {
-	if (!transitionName) return {};
-	return transitionName ? {
-		name: transitionName,
-		appear: true,
-		enterFromClass: `${transitionName} ${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-prepare ${transitionName}-enter-prepare ${transitionName}-enter-start`,
-		enterActiveClass: `${transitionName} ${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-prepare ${transitionName}-enter-prepare `,
-		enterToClass: `${transitionName} ${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
-		leaveFromClass: `${transitionName} ${transitionName}-leave`,
-		leaveActiveClass: `${transitionName} ${transitionName}-leave ${transitionName}-leave-active`,
-		leaveToClass: `${transitionName} ${transitionName}-leave ${transitionName}-leave-active`,
-		...opt
-	} : {
-		css: false,
-		...opt
-	};
-}
-export { getTransitionProps };

package/dist/util/dist/warning.js

@@ -1,37 +0,0 @@
-var warned = {};
-var preWarningFns = [];
-function preMessage(fn) {
-	preWarningFns.push(fn);
-}
-function warning(valid, message) {
-	if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
-		const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "warning"), message);
-		if (finalMessage) console.error(`Warning: ${finalMessage}`);
-	}
-}
-function note(valid, message) {
-	if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
-		const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "note"), message);
-		if (finalMessage) console.warn(`Note: ${finalMessage}`);
-	}
-}
-function resetWarned() {
-	warned = {};
-}
-function call(method, valid, message) {
-	if (!valid && !warned[message]) {
-		method(false, message);
-		warned[message] = true;
-	}
-}
-function warningOnce(valid, message) {
-	call(warning, valid, message);
-}
-function noteOnce(valid, message) {
-	call(note, valid, message);
-}
-warningOnce.preMessage = preMessage;
-warningOnce.resetWarned = resetWarned;
-warningOnce.noteOnce = noteOnce;
-var warning_default = warningOnce;
-export { warning_default };