@v-c/image 1.0.11 → 1.1.0

package/dist/Image.js

@@ -166,7 +166,7 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 		}), null)]);
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		prefixCls: {
 			type: String,
 			required: false,
@@ -198,16 +198,9 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 			default: void 0
 		},
 		placeholder: {
-			type: [
-				Boolean,
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Array
-			],
+			type: Boolean,
 			required: false,
+			skipCheck: true,
 			default: void 0
 		},
 		fallback: {

package/dist/Preview/CloseBtn.js

@@ -18,15 +18,6 @@ var CloseBtn = /* @__PURE__ */ defineComponent((props) => {
 			required: true
 		},
 		icon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
 			required: false,
 			default: void 0
 		},

package/dist/Preview/index.d.ts

@@ -56,6 +56,8 @@ export interface InternalPreviewConfig {
     scaleStep?: number;
     minScale?: number;
     maxScale?: number;
+    /** Whether to enable mouse wheel zoom. Default is true. */
+    wheel?: boolean;
     motionName?: string;
     open?: boolean;
     getContainer?: PortalProps['getContainer'];

package/dist/Preview/index.js

@@ -30,8 +30,24 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 		}
 	});
 	const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(imgEl, computed(() => props.minScale ?? 1), computed(() => props.maxScale ?? 50), (info) => props.onTransform?.(info));
-	const { isMoving, onMouseDown, onWheel } = useMouseEvent(imgEl, computed(() => props.movable ?? true), computed(() => !!props.open), computed(() => props.scaleStep ?? .5), transform, updateTransform, dispatchZoomChange);
+	const { isMoving, onMouseDown, onWheel } = useMouseEvent(imgEl, computed(() => props.movable ?? true), computed(() => !!props.open), computed(() => props.scaleStep ?? .5), transform, updateTransform, dispatchZoomChange, computed(() => props.wheel ?? true));
 	const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(imgEl, computed(() => props.movable ?? true), computed(() => !!props.open), computed(() => props.minScale ?? 1), transform, updateTransform, dispatchZoomChange);
+	watch(imgEl, (el, _old, onCleanup) => {
+		if (!el) return;
+		const opts = { passive: true };
+		el.addEventListener("wheel", onWheel, opts);
+		el.addEventListener("touchstart", onTouchStart, opts);
+		el.addEventListener("touchmove", onTouchMove, opts);
+		el.addEventListener("touchend", onTouchEnd, opts);
+		el.addEventListener("touchcancel", onTouchEnd, opts);
+		onCleanup(() => {
+			el.removeEventListener("wheel", onWheel);
+			el.removeEventListener("touchstart", onTouchStart);
+			el.removeEventListener("touchmove", onTouchMove);
+			el.removeEventListener("touchend", onTouchEnd);
+			el.removeEventListener("touchcancel", onTouchEnd);
+		});
+	});
 	watch(() => props.open, (open) => {
 		if (!open) resetTransform("close");
 	});
@@ -144,13 +160,8 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 				transform: `translate3d(${transform.value.x}px, ${transform.value.y}px, 0) scale3d(${transform.value.flipX ? "-" : ""}${transform.value.scale}, ${transform.value.flipY ? "-" : ""}${transform.value.scale}, 1) rotate(${transform.value.rotate}deg)`,
 				transitionDuration: !enableTransition.value || isTouching.value ? "0s" : void 0
 			},
-			"onWheel": onWheel,
 			"onMousedown": onMouseDown,
-			"onDblclick": onDoubleClick,
-			"onTouchstart": onTouchStart,
-			"onTouchmove": onTouchMove,
-			"onTouchend": onTouchEnd,
-			"onTouchcancel": onTouchEnd
+			"onDblclick": onDoubleClick
 		}), null);
 		const mergedRootStyle = {
 			...styles.root ?? {},
@@ -240,7 +251,7 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 		} })] });
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		prefixCls: {
 			type: String,
 			required: true
@@ -334,6 +345,11 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 			required: false,
 			default: void 0
 		},
+		wheel: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		motionName: {
 			type: String,
 			required: false,
@@ -379,16 +395,9 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 			default: void 0
 		},
 		closeIcon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
+			type: [Boolean, null],
 			required: false,
+			skipCheck: true,
 			default: void 0
 		},
 		onTransform: {

package/dist/PreviewGroup.js

@@ -75,7 +75,7 @@ var PreviewGroup = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
 		}), slots)]);
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		previewPrefixCls: {
 			type: String,
 			required: false,
@@ -111,15 +111,6 @@ var PreviewGroup = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
 			default: void 0
 		},
 		children: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
 			required: false,
 			default: void 0
 		}

package/dist/hooks/useMouseEvent.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform.ts';
-export default function useMouseEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, open: Ref<boolean>, scaleStep: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+export default function useMouseEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, open: Ref<boolean>, scaleStep: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc, wheel?: Ref<boolean>): {
     isMoving: import('vue').ShallowRef<boolean, boolean>;
     onMouseDown: (event: MouseEvent) => void;
     onMouseMove: (event: MouseEvent) => void;

package/dist/hooks/useMouseEvent.js

@@ -4,7 +4,7 @@ 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) {
+function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange, wheel) {
 	const isMoving = shallowRef(false);
 	const startPositionInfo = shallowRef({
 		diffX: 0,
@@ -48,7 +48,7 @@ function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransf
 		}
 	};
 	const onWheel = (event) => {
-		if (!open.value || event.deltaY === 0) return;
+		if (!open.value || !(wheel?.value ?? true) || event.deltaY === 0) return;
 		const scaleRatio = Math.abs(event.deltaY / 100);
 		let ratio = 1 + Math.min(scaleRatio, 1) * scaleStep.value;
 		if (event.deltaY > 0) ratio = 1 / ratio;

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "image component",
   "author": "",
   "license": "MIT",
+  "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/image",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antdv-next/vue-components.git"
+  },
   "keywords": [
     "image",
     "vue-image",
@@ -33,7 +38,7 @@
   },
   "dependencies": {
     "@v-c/portal": "^1.0.8",
-    "@v-c/util": "^1.0.19"
+    "@v-c/util": "^1.1.0"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"