diff --git a/.changeset/eleven-dots-try.md b/.changeset/eleven-dots-try.md new file mode 100644 index 00000000..f3ad4add --- /dev/null +++ b/.changeset/eleven-dots-try.md @@ -0,0 +1,5 @@ +--- +"@zoom-image/core": minor +--- + +feat: add className option to zoom image move ✨ diff --git a/packages/core/src/createZoomImageMove.ts b/packages/core/src/createZoomImageMove.ts index dc0dda21..50fcea89 100644 --- a/packages/core/src/createZoomImageMove.ts +++ b/packages/core/src/createZoomImageMove.ts @@ -11,6 +11,7 @@ export type ZoomImageMoveOptions = { disabledContextMenu?: boolean zoomImageProps?: { alt?: string + className?: string } } @@ -34,7 +35,8 @@ export function createZoomImageMove(container: HTMLElement, options: ZoomImageMo }) const zoomedImg = document.createElement("img") - zoomedImg.alt = options.zoomImageProps?.alt || "" + options.zoomImageProps?.alt && (zoomedImg.alt = options.zoomImageProps.alt) + options.zoomImageProps?.className && (zoomedImg.className = options.zoomImageProps.className) zoomedImg.style.maxWidth = "none" zoomedImg.style.position = "absolute" zoomedImg.style.top = "0" diff --git a/packages/docs/src/api/createZoomImageMove.md b/packages/docs/src/api/createZoomImageMove.md index 34a4fd38..53e28cc9 100644 --- a/packages/docs/src/api/createZoomImageMove.md +++ b/packages/docs/src/api/createZoomImageMove.md @@ -28,6 +28,7 @@ type ZoomImageMoveOptions = { // Props for the zoomed image zoomImageProps?: { alt?: string + className?: string } // Zoom scale, default is 4 diff --git a/size.json b/size.json index 18d5fd4c..e75a874a 100644 --- a/size.json +++ b/size.json @@ -2,7 +2,7 @@ "@zoom-image/core": { "createZoomImageWheel": "2.17 KB", "createZoomImageHover": "1.28 KB", - "createZoomImageMove": "1 KB", + "createZoomImageMove": "1.02 KB", "createZoomImageClick": "943 B", "cropImage": "386 B", "makeCalculateZoom": "171 B", @@ -11,43 +11,43 @@ "@zoom-image/react": { "useZoomImageWheel": "2.46 KB", "useZoomImageHover": "1.56 KB", - "useZoomImageMove": "1.26 KB", + "useZoomImageMove": "1.28 KB", "useZoomImageClick": "1.18 KB" }, "@zoom-image/preact": { "useZoomImageWheel": "3.33 KB", "useZoomImageHover": "2.46 KB", - "useZoomImageMove": "2.19 KB", + "useZoomImageMove": "2.21 KB", "useZoomImageClick": "2.11 KB" }, "@zoom-image/qwik": { "useZoomImageWheel": "2.58 KB", "useZoomImageHover": "1.67 KB", - "useZoomImageMove": "1.37 KB", + "useZoomImageMove": "1.38 KB", "useZoomImageClick": "1.29 KB" }, "@zoom-image/solid": { "useZoomImageWheel": "3.62 KB", "useZoomImageHover": "2.75 KB", - "useZoomImageMove": "2.48 KB", + "useZoomImageMove": "2.49 KB", "useZoomImageClick": "2.4 KB" }, "@zoom-image/svelte": { "useZoomImageWheel": "2.64 KB", "useZoomImageHover": "1.75 KB", - "useZoomImageMove": "1.48 KB", + "useZoomImageMove": "1.49 KB", "useZoomImageClick": "1.39 KB" }, "@zoom-image/vue": { "useZoomImageWheel": "2.42 KB", "useZoomImageHover": "1.54 KB", - "useZoomImageMove": "1.25 KB", + "useZoomImageMove": "1.27 KB", "useZoomImageClick": "1.17 KB" }, "@zoom-image/angular": { - "ZoomImageClickService": "4.04 KB", - "ZoomImageHoverService": "4.04 KB", - "ZoomImageMoveService": "4.04 KB", - "ZoomImageWheelService": "4.04 KB" + "ZoomImageHoverService": "4.07 KB", + "ZoomImageClickService": "4.06 KB", + "ZoomImageMoveService": "4.06 KB", + "ZoomImageWheelService": "4.06 KB" } }