@v-c/image 1.0.12 → 1.1.1

package/dist/Image.js

@@ -4,7 +4,7 @@ import useRegisterImage from "./hooks/useRegisterImage.js";
 import useStatus from "./hooks/useStatus.js";
 import Preview from "./Preview/index.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
-import { clsx, omit } from "@v-c/util";
+import { clsx, isVueRenderable, omit } from "@v-c/util";
 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";
@@ -32,7 +32,7 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 		triggerPreviewOpen(false);
 		mousePosition.value = null;
 	};
-	const isCustomPlaceholder = computed(() => !!slots.placeholder || !!(props.placeholder && props.placeholder !== true));
+	const isCustomPlaceholder = computed(() => !!slots.placeholder || isVueRenderable(props.placeholder) && props.placeholder !== true);
 	const src = computed(() => previewSrc.value ?? props.src);
 	const [getImgRef, srcAndOnload, status] = useStatus({
 		src: computed(() => props.src),
@@ -135,7 +135,7 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 				"onLoad": srcAndOnload.value.onLoad,
 				"onError": onImgError
 			}), null),
-			status.value === "loading" && createVNode("div", {
+			status.value === "loading" && isCustomPlaceholder.value && createVNode("div", {
 				"aria-hidden": "true",
 				"class": `${prefixCls.value}-placeholder`
 			}, [placeholderNode]),
@@ -166,7 +166,7 @@ var Image = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 		}), null)]);
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		prefixCls: {
 			type: String,
 			required: false,

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,7 +30,7 @@ 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;
@@ -251,7 +251,7 @@ var Preview = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 		} })] });
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		prefixCls: {
 			type: String,
 			required: true
@@ -345,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,

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,

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.12",
+  "version": "1.1.1",
   "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.2.0"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"