@v-c/image 0.0.1 → 0.0.3

package/dist/Image.cjs

@@ -1,8 +1,11 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_index = require("./util/dist/props-util/index.cjs");
 const require_classnames = require("./util/dist/classnames.cjs");
-require("./util/dist/index.cjs");
 const require_useMergedState = require("./util/dist/hooks/useMergedState.cjs");
+require("./util/dist/index.cjs");
 const require_pickAttrs = require("./util/dist/pickAttrs.cjs");
 const require_common = require("./common.cjs");
 const require_context = require("./context.cjs");
@@ -94,7 +97,7 @@ var Image = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots }) =
 			actionsNode: originNode,
 			...info
 		}) : mergedPreviewConfig.value.actionsRender;
-		const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls,...restPreviewProps } = mergedPreviewConfig.value;
+		const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls, ...restPreviewProps } = mergedPreviewConfig.value;
 		return (0, vue.createVNode)(vue.Fragment, null, [(0, vue.createVNode)("div", (0, vue.mergeProps)(require_pickAttrs.pickAttrs(restAttrs, false), {
 			"class": rootCls,
 			"onClick": canPreview.value ? onPreview : onInternalClick,

package/dist/Image.js

@@ -1,7 +1,7 @@
 import { getAttrStyleAndClass, getStylePxValue } from "./util/dist/props-util/index.js";
 import { clsx } from "./util/dist/classnames.js";
-import "./util/dist/index.js";
 import { useMergedState } from "./util/dist/hooks/useMergedState.js";
+import "./util/dist/index.js";
 import { pickAttrs } from "./util/dist/pickAttrs.js";
 import { COMMON_PROPS } from "./common.js";
 import { usePreviewGroupContext } from "./context.js";
@@ -93,7 +93,7 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 			actionsNode: originNode,
 			...info
 		}) : mergedPreviewConfig.value.actionsRender;
-		const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls,...restPreviewProps } = mergedPreviewConfig.value;
+		const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls, ...restPreviewProps } = mergedPreviewConfig.value;
 		return createVNode(Fragment, null, [createVNode("div", mergeProps(pickAttrs(restAttrs, false), {
 			"class": rootCls,
 			"onClick": canPreview.value ? onPreview : onInternalClick,

package/dist/Preview/CloseBtn.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 let vue = require("vue");
 var CloseBtn = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 	return () => {

package/dist/Preview/Footer.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_classnames = require("../util/dist/classnames.cjs");
 require("../util/dist/index.cjs");
 let vue = require("vue");

package/dist/Preview/PrevNext.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_classnames = require("../util/dist/classnames.cjs");
 require("../util/dist/index.cjs");
 let vue = require("vue");

package/dist/Preview/index.cjs

@@ -1,10 +1,13 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_KeyCode = require("../util/dist/KeyCode.cjs");
 const require_classnames = require("../util/dist/classnames.cjs");
 require("../util/dist/index.cjs");
 const require_context = require("../context.cjs");
 const require_useStatus = require("../hooks/useStatus.cjs");
 const require_index$1 = require("../portal/dist/index.cjs");
-const require_KeyCode = require("../util/dist/KeyCode.cjs");
 const require_transition = require("../util/dist/utils/transition.cjs");
 const require_useImageTransform = require("../hooks/useImageTransform.cjs");
 const require_previewConfig = require("../previewConfig.cjs");
@@ -14,7 +17,7 @@ const require_CloseBtn = require("./CloseBtn.cjs");
 const require_Footer = require("./Footer.cjs");
 const require_PrevNext = require("./PrevNext.cjs");
 let vue = require("vue");
-var Preview = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
+var Preview = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots }) => {
 	const imgEl = (0, vue.shallowRef)();
 	const groupContext = require_context.usePreviewGroupContext();
 	const showLeftOrRightSwitches = (0, vue.computed)(() => !!groupContext && (props.count ?? 1) > 1);
@@ -113,7 +116,7 @@ var Preview = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 		fallback: (0, vue.computed)(() => props.fallback)
 	});
 	return () => {
-		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {} } = 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 = {} } = props;
 		const bodyStyle = { ...styles.body ?? {} };
 		if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
 		const image = {

package/dist/Preview/index.js

@@ -1,9 +1,9 @@
+import { KeyCodeStr } from "../util/dist/KeyCode.js";
 import { clsx } from "../util/dist/classnames.js";
 import "../util/dist/index.js";
 import { usePreviewGroupContext } from "../context.js";
 import useStatus from "../hooks/useStatus.js";
 import { src_default } from "../portal/dist/index.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";
@@ -13,7 +13,7 @@ import CloseBtn_default from "./CloseBtn.js";
 import Footer_default from "./Footer.js";
 import PrevNext_default from "./PrevNext.js";
 import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, watch, watchEffect } from "vue";
-var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const imgEl = shallowRef();
 	const groupContext = usePreviewGroupContext();
 	const showLeftOrRightSwitches = computed(() => !!groupContext && (props.count ?? 1) > 1);
@@ -112,7 +112,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		fallback: computed(() => props.fallback)
 	});
 	return () => {
-		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {} } = 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 = {} } = props;
 		const bodyStyle = { ...styles.body ?? {} };
 		if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
 		const image = {

package/dist/PreviewGroup.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_useMergedState = require("./util/dist/hooks/useMergedState.cjs");
 const require_context = require("./context.cjs");
 const require_index = require("./Preview/index.cjs");
@@ -52,9 +55,9 @@ var PreviewGroup = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, emi
 	});
 	return () => {
 		const itemsList = mergedItems.value;
-		const { src,...imgCommonProps } = itemsList[current.value]?.data || {};
+		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;
+		const { open: _open, current: _current, onOpenChange: _onOpenChange, onChange: _onChange, ...restPreviewConfig } = mergedPreviewConfig.value;
 		return (0, vue.createVNode)(vue.Fragment, null, [slots.default?.(), (0, vue.createVNode)(require_index.default, (0, vue.mergeProps)({
 			"aria-hidden": !isShowPreview.value,
 			"open": isShowPreview.value,
@@ -72,7 +75,7 @@ var PreviewGroup = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, emi
 			"countRender": countRender,
 			"classNames": props.classNames?.popup,
 			"styles": props.styles?.popup
-		}), null)]);
+		}), slots)]);
 	};
 }, {
 	props: /* @__PURE__ */ (0, vue.mergeDefaults)({

package/dist/PreviewGroup.js

@@ -51,9 +51,9 @@ var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit
 	});
 	return () => {
 		const itemsList = mergedItems.value;
-		const { src,...imgCommonProps } = itemsList[current.value]?.data || {};
+		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;
+		const { open: _open, current: _current, onOpenChange: _onOpenChange, onChange: _onChange, ...restPreviewConfig } = mergedPreviewConfig.value;
 		return createVNode(Fragment, null, [slots.default?.(), createVNode(Preview_default, mergeProps({
 			"aria-hidden": !isShowPreview.value,
 			"open": isShowPreview.value,
@@ -71,7 +71,7 @@ var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit
 			"countRender": countRender,
 			"classNames": props.classNames?.popup,
 			"styles": props.styles?.popup
-		}), null)]);
+		}), slots)]);
 	};
 }, {
 	props: /* @__PURE__ */ mergeDefaults({

package/dist/common.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const COMMON_PROPS = [
 	"crossOrigin",
 	"decoding",

package/dist/context.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let vue = require("vue");
 var PreviewGroupContextKey = Symbol("PreviewGroupContext");
 function usePreviewGroupContext() {

package/dist/getFixScaleEleTransPosition.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_util = require("./util.cjs");
 function fixPoint(key, start, width, clientWidth) {
 	const startAddWidth = start + width;

package/dist/hooks/useImageTransform.cjs

@@ -1,7 +1,10 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_raf = require("../util/dist/raf.cjs");
 const require_util = require("../util.cjs");
 const require_isEqual = require("../util/dist/isEqual.cjs");
-const require_raf = require("../util/dist/raf.cjs");
 let vue = require("vue");
 var initialTransform = {
 	x: 0,

package/dist/hooks/useImageTransform.js

@@ -1,6 +1,6 @@
+import { raf_default } from "../util/dist/raf.js";
 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";
 var initialTransform = {
 	x: 0,

package/dist/hooks/useMouseEvent.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_warning = require("../util/dist/warning.cjs");
 require("../util/dist/index.cjs");
 const require_getFixScaleEleTransPosition = require("../getFixScaleEleTransPosition.cjs");

package/dist/hooks/usePreviewItems.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_common = require("../common.cjs");
 let vue = require("vue");
 function usePreviewItems(items) {

package/dist/hooks/useRegisterImage.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_context = require("../context.cjs");
 let vue = require("vue");
 var uid = 0;

package/dist/hooks/useStatus.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_util = require("../util.cjs");
 let vue = require("vue");
 function useStatus(options) {

package/dist/hooks/useTouchEvent.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_getFixScaleEleTransPosition = require("../getFixScaleEleTransPosition.cjs");
 let vue = require("vue");
 function getDistance(a, b) {

package/dist/index.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_Image = require("./Image.cjs");
 const require_PreviewGroup = require("./PreviewGroup.cjs");
 var ExportImage = require_Image.default;

package/dist/interface.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

package/dist/portal/dist/Portal.cjs

@@ -4,6 +4,7 @@ require("../../util/dist/index.cjs");
 const require_Context = require("./Context.cjs");
 const require_canUseDom = require("../../util/dist/Dom/canUseDom.cjs");
 const require_useDom = require("./useDom.cjs");
+const require_useEscKeyDown = require("./useEscKeyDown.cjs");
 const require_useScrollLocker = require("./useScrollLocker.cjs");
 let vue = require("vue");
 function _isSlot(s) {
@@ -34,6 +35,9 @@ var Portal_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, e
 	require_Context.useContextProvider(queueCreate);
 	const mergedContainer = (0, vue.computed)(() => innerContainer.value ?? defaultContainer);
 	require_useScrollLocker.useScrollLocker((0, vue.computed)(() => !!(props.autoLock && props.open && require_canUseDom.canUseDom() && (mergedContainer.value === defaultContainer || mergedContainer.value === document.body))));
+	require_useEscKeyDown.useEscKeyDown((0, vue.computed)(() => !!props.open), (...args) => {
+		props.onEsc?.(...args);
+	});
 	const elementEl = (0, vue.shallowRef)();
 	const setRef = (el) => {
 		elementEl.value = el;
@@ -76,6 +80,11 @@ var Portal_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, e
 			required: false,
 			default: void 0
 		},
+		onEsc: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		debug: {
 			type: String,
 			required: false,

package/dist/portal/dist/Portal.js

@@ -4,6 +4,7 @@ import "../../util/dist/index.js";
 import { useContextProvider } from "./Context.js";
 import { canUseDom } from "../../util/dist/Dom/canUseDom.js";
 import { useDom } from "./useDom.js";
+import { useEscKeyDown } from "./useEscKeyDown.js";
 import { useScrollLocker } from "./useScrollLocker.js";
 import { Teleport, computed, createVNode, defineComponent, isVNode, mergeDefaults, onMounted, shallowRef, watch } from "vue";
 function _isSlot(s) {
@@ -34,6 +35,9 @@ var Portal_default = /* @__PURE__ */ defineComponent((props, { slots, expose })
 	useContextProvider(queueCreate);
 	const mergedContainer = computed(() => innerContainer.value ?? defaultContainer);
 	useScrollLocker(computed(() => !!(props.autoLock && props.open && canUseDom() && (mergedContainer.value === defaultContainer || mergedContainer.value === document.body))));
+	useEscKeyDown(computed(() => !!props.open), (...args) => {
+		props.onEsc?.(...args);
+	});
 	const elementEl = shallowRef();
 	const setRef = (el) => {
 		elementEl.value = el;
@@ -76,6 +80,11 @@ var Portal_default = /* @__PURE__ */ defineComponent((props, { slots, expose })
 			required: false,
 			default: void 0
 		},
+		onEsc: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		debug: {
 			type: String,
 			required: false,

package/dist/portal/dist/useEscKeyDown.cjs

@@ -0,0 +1,57 @@
+let vue = require("vue");
+var stack = [];
+var IME_LOCK_DURATION = 200;
+var lastCompositionEndTime = 0;
+var _test = process.env.NODE_ENV === "test" ? () => ({
+	stack,
+	reset: () => {
+		lastCompositionEndTime = 0;
+	}
+}) : null;
+function onGlobalKeyDown(event) {
+	if (event.key === "Escape" && !event.isComposing) {
+		if (Date.now() - lastCompositionEndTime < IME_LOCK_DURATION) return;
+		const len = stack.length;
+		for (let i = len - 1; i >= 0; i -= 1) stack?.[i]?.onEsc?.({
+			top: i === len - 1,
+			event
+		});
+	}
+}
+function onGlobalCompositionEnd() {
+	lastCompositionEndTime = Date.now();
+}
+function attachGlobalEventListeners() {
+	window.addEventListener("keydown", onGlobalKeyDown);
+	window.addEventListener("compositionend", onGlobalCompositionEnd);
+}
+function detachGlobalEventListeners() {
+	if (stack.length === 0) {
+		window.removeEventListener("keydown", onGlobalKeyDown);
+		window.removeEventListener("compositionend", onGlobalCompositionEnd);
+	}
+}
+function useEscKeyDown(open, onEsc = () => {}) {
+	const id = (0, vue.useId)();
+	const onEventEsc = onEsc;
+	const ensure = () => {
+		if (!stack.find((item) => item.id === id)) stack.push({
+			id,
+			onEsc: onEventEsc
+		});
+	};
+	const clear = () => {
+		stack = stack.filter((item) => item.id !== id);
+	};
+	(0, vue.watch)(open, (_, _o, onCleanup) => {
+		if (open.value) {
+			ensure();
+			attachGlobalEventListeners();
+			onCleanup(() => {
+				clear();
+				detachGlobalEventListeners();
+			});
+		} else if (!open.value) clear();
+	}, { immediate: true });
+}
+exports.useEscKeyDown = useEscKeyDown;

package/dist/portal/dist/useEscKeyDown.js

@@ -0,0 +1,52 @@
+import { useId, watch } from "vue";
+var stack = [];
+var IME_LOCK_DURATION = 200;
+var lastCompositionEndTime = 0;
+process.env.NODE_ENV;
+function onGlobalKeyDown(event) {
+	if (event.key === "Escape" && !event.isComposing) {
+		if (Date.now() - lastCompositionEndTime < IME_LOCK_DURATION) return;
+		const len = stack.length;
+		for (let i = len - 1; i >= 0; i -= 1) stack?.[i]?.onEsc?.({
+			top: i === len - 1,
+			event
+		});
+	}
+}
+function onGlobalCompositionEnd() {
+	lastCompositionEndTime = Date.now();
+}
+function attachGlobalEventListeners() {
+	window.addEventListener("keydown", onGlobalKeyDown);
+	window.addEventListener("compositionend", onGlobalCompositionEnd);
+}
+function detachGlobalEventListeners() {
+	if (stack.length === 0) {
+		window.removeEventListener("keydown", onGlobalKeyDown);
+		window.removeEventListener("compositionend", onGlobalCompositionEnd);
+	}
+}
+function useEscKeyDown(open, onEsc = () => {}) {
+	const id = useId();
+	const onEventEsc = onEsc;
+	const ensure = () => {
+		if (!stack.find((item) => item.id === id)) stack.push({
+			id,
+			onEsc: onEventEsc
+		});
+	};
+	const clear = () => {
+		stack = stack.filter((item) => item.id !== id);
+	};
+	watch(open, (_, _o, onCleanup) => {
+		if (open.value) {
+			ensure();
+			attachGlobalEventListeners();
+			onCleanup(() => {
+				clear();
+				detachGlobalEventListeners();
+			});
+		} else if (!open.value) clear();
+	}, { immediate: true });
+}
+export { useEscKeyDown };

package/dist/portal/dist/useScrollLocker.cjs

@@ -8,8 +8,7 @@ function useScrollLocker(lock) {
 	const mergedLock = (0, vue.computed)(() => (0, vue.unref)(lock));
 	uuid += 1;
 	const id = (0, vue.shallowRef)(`${UNIQUE_ID}_${uuid}`);
-	(0, vue.watch)([id, mergedLock], async () => {
-		await (0, vue.nextTick)();
+	(0, vue.watch)([id, mergedLock], async (_, _o, onCleanup) => {
 		if (mergedLock.value) {
 			const scrollbarSize = require_getScrollBarSize.getTargetScrollBarSize(document.body).width;
 			require_dynamicCSS.updateCSS(`
@@ -17,6 +16,9 @@ html body {
   overflow-y: hidden;
   ${require_util.isBodyOverflowing() ? `width: calc(100% - ${scrollbarSize}px);` : ""}
 }`, id.value);
+			onCleanup(() => {
+				require_dynamicCSS.removeCSS(id.value);
+			});
 		} else require_dynamicCSS.removeCSS(id.value);
 	}, {
 		flush: "post",

package/dist/portal/dist/useScrollLocker.js

@@ -1,15 +1,14 @@
 import { isBodyOverflowing } from "./util.js";
 import { removeCSS, updateCSS } from "../../util/dist/Dom/dynamicCSS.js";
 import { getTargetScrollBarSize } from "../../util/dist/getScrollBarSize.js";
-import { computed, nextTick, shallowRef, unref, watch } from "vue";
+import { computed, shallowRef, unref, watch } from "vue";
 var UNIQUE_ID = `vc-util-locker-${Date.now()}`;
 var uuid = 0;
 function useScrollLocker(lock) {
 	const mergedLock = computed(() => unref(lock));
 	uuid += 1;
 	const id = shallowRef(`${UNIQUE_ID}_${uuid}`);
-	watch([id, mergedLock], async () => {
-		await nextTick();
+	watch([id, mergedLock], async (_, _o, onCleanup) => {
 		if (mergedLock.value) {
 			const scrollbarSize = getTargetScrollBarSize(document.body).width;
 			updateCSS(`
@@ -17,6 +16,9 @@ html body {
   overflow-y: hidden;
   ${isBodyOverflowing() ? `width: calc(100% - ${scrollbarSize}px);` : ""}
 }`, id.value);
+			onCleanup(() => {
+				removeCSS(id.value);
+			});
 		} else removeCSS(id.value);
 	}, {
 		flush: "post",

package/dist/previewConfig.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const BASE_SCALE_RATIO = 1;
 const WHEEL_MAX_SCALE_RATIO = 1;
 exports.BASE_SCALE_RATIO = BASE_SCALE_RATIO;

package/dist/util/dist/Dom/dynamicCSS.cjs

@@ -50,6 +50,7 @@ function findExistNode(key, option = {}) {
 	return findStyles(getContainer(option)).find((node) => node.getAttribute(getMark(option)) === key);
 }
 function removeCSS(key, option = {}) {
+	if (!require_canUseDom.canUseDom()) return null;
 	const existNode = findExistNode(key, option);
 	if (existNode) getContainer(option).removeChild(existNode);
 }
@@ -63,6 +64,7 @@ function syncRealContainer(container, option) {
 	}
 }
 function updateCSS(css, key, option = {}) {
+	if (!require_canUseDom.canUseDom()) return null;
 	syncRealContainer(getContainer(option), option);
 	const existNode = findExistNode(key, option);
 	if (existNode) {

package/dist/util/dist/Dom/dynamicCSS.js

@@ -50,6 +50,7 @@ function findExistNode(key, option = {}) {
 	return findStyles(getContainer(option)).find((node) => node.getAttribute(getMark(option)) === key);
 }
 function removeCSS(key, option = {}) {
+	if (!canUseDom()) return null;
 	const existNode = findExistNode(key, option);
 	if (existNode) getContainer(option).removeChild(existNode);
 }
@@ -63,6 +64,7 @@ function syncRealContainer(container, option) {
 	}
 }
 function updateCSS(css, key, option = {}) {
+	if (!canUseDom()) return null;
 	syncRealContainer(getContainer(option), option);
 	const existNode = findExistNode(key, option);
 	if (existNode) {

package/dist/util/dist/getScrollBarSize.cjs

@@ -36,7 +36,15 @@ function getTargetScrollBarSize(target) {
 		width: 0,
 		height: 0
 	};
-	const { width, height } = getComputedStyle(target, "::-webkit-scrollbar");
+	if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) return {
+		width: 0,
+		height: 0
+	};
+	let width = "0px";
+	let height = "0px";
+	try {
+		({width, height} = getComputedStyle(target, "::-webkit-scrollbar"));
+	} catch {}
 	return {
 		width: ensureSize(width),
 		height: ensureSize(height)

package/dist/util/dist/getScrollBarSize.js

@@ -36,7 +36,15 @@ function getTargetScrollBarSize(target) {
 		width: 0,
 		height: 0
 	};
-	const { width, height } = getComputedStyle(target, "::-webkit-scrollbar");
+	if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) return {
+		width: 0,
+		height: 0
+	};
+	let width = "0px";
+	let height = "0px";
+	try {
+		({width, height} = getComputedStyle(target, "::-webkit-scrollbar"));
+	} catch {}
 	return {
 		width: ensureSize(width),
 		height: ensureSize(height)

package/dist/util/dist/hooks/useId.cjs

@@ -0,0 +1,5 @@
+let vue = require("vue");
+function getUseId() {
+	return vue.useId;
+}
+var useOriginalId = getUseId();

package/dist/util/dist/hooks/useId.js

@@ -0,0 +1,5 @@
+import { useId } from "vue";
+function getUseId() {
+	return useId;
+}
+getUseId();

package/dist/util/dist/index.cjs

@@ -1,3 +1,7 @@
+const require_raf = require("./raf.cjs");
+const require_omit = require("./omit.cjs");
 require("./RenderComponent.cjs");
 const require_classnames = require("./classnames.cjs");
+require("./hooks/useId.cjs");
+const require_useMergedState = require("./hooks/useMergedState.cjs");
 const require_warning = require("./warning.cjs");

package/dist/util/dist/index.js

@@ -1,3 +1,7 @@
+import { raf_default } from "./raf.js";
+import { omit } from "./omit.js";
 import "./RenderComponent.js";
 import { classNames, clsx } from "./classnames.js";
+import "./hooks/useId.js";
+import { useMergedState } from "./hooks/useMergedState.js";
 import { warning_default } from "./warning.js";

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

@@ -4,6 +4,7 @@ function isEmptyElement(c) {
 	return c && (c.type === vue.Comment || c.type === vue.Fragment && c.children.length === 0 || c.type === vue.Text && c.children.trim() === "");
 }
 function filterEmpty(children = []) {
+	if (!Array.isArray(children)) children = [children];
 	const res = [];
 	children.forEach((child) => {
 		if (Array.isArray(child)) res.push(...child);
@@ -12,7 +13,6 @@ function filterEmpty(children = []) {
 	});
 	return res.filter((c) => !isEmptyElement(c));
 }
-var skipFlattenKey = Symbol("skipFlatten");
 var defaultOptions = {
 	class: true,
 	style: true

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

@@ -4,6 +4,7 @@ function isEmptyElement(c) {
 	return c && (c.type === Comment || c.type === Fragment && c.children.length === 0 || c.type === Text && c.children.trim() === "");
 }
 function filterEmpty(children = []) {
+	if (!Array.isArray(children)) children = [children];
 	const res = [];
 	children.forEach((child) => {
 		if (Array.isArray(child)) res.push(...child);

package/dist/util.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function isImageValid(src) {
 	return new Promise((resolve) => {
 		if (!src) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "image component",
   "author": "",
   "license": "MIT",
@@ -32,8 +32,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.3",
-    "@v-c/portal": "^1.0.1"
+    "@v-c/util": "^1.0.8",
+    "@v-c/portal": "^1.0.4"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"