@gx-design-vue/image 0.2.0-alpha.0 → 0.2.0-alpha.2

package/dist/GImage.js

@@ -1,221 +0,0 @@
-import { imageProps } from "./props.js";
-import ImagePreview_default from "./ImagePreview/index.js";
-import { genImageStyle } from "./style.js";
-import { isElement } from "./utils/util.js";
-import { Fragment, computed, createVNode, defineComponent, mergeProps, nextTick, onMounted, ref, watch, watchEffect } from "vue";
-import { EyeOutlined } from "@ant-design/icons-vue";
-import { unit, useProStyle } from "@gx-design-vue/pro-provider";
-import { classNames, getPrefixCls, getScrollContainer, getSlotsProps, isInContainer, isNumber, isString } from "@gx-design-vue/pro-utils";
-import { isClient, useEventListener, useThrottleFn } from "@vueuse/core";
-import { omit } from "es-toolkit";
-
-//#region src/GImage.tsx
-let prevOverflow = "";
-function fromPairs(pairs) {
-	const result = {};
-	for (let i = 0; i < pairs.length; i++) {
-		const pair = pairs[i];
-		result[pair[0]] = pair[1];
-	}
-	return result;
-}
-const GImage = /* @__PURE__ */ defineComponent({
-	props: imageProps,
-	name: "GImage",
-	inheritAttrs: false,
-	emits: {
-		click: (_type) => true,
-		load: (_event) => true,
-		error: (_event) => true
-	},
-	slots: Object,
-	setup(props, { slots, emit, attrs }) {
-		const supportLoading = isClient && "loading" in HTMLImageElement.prototype;
-		const baseClassName = getPrefixCls({ suffixCls: "image" });
-		const { wrapSSR, hashId } = useProStyle("Image", [genImageStyle], baseClassName);
-		const imageViewer = ref();
-		const imageSrc = ref();
-		const hasLoadError = ref(false);
-		const isLoading = ref(true);
-		const showViewer = ref(false);
-		const container = ref();
-		const _scrollContainer = ref();
-		let stopScrollListener;
-		let stopWheelListener;
-		const isManual = computed(() => {
-			if (props.loading === "eager") return false;
-			return !supportLoading && props.loading === "lazy" || props.lazy;
-		});
-		const imageStyle = computed(() => {
-			if (isClient && props.fit) return {
-				...props.imageStyle,
-				objectFit: props.fit
-			};
-			return props.imageStyle;
-		});
-		const previewProps = computed(() => typeof props.preview === "object" ? props.preview : {});
-		const canPreview = computed(() => !!props.preview);
-		const currentImage = computed(() => {
-			const { urls = [], current = 0 } = previewProps.value;
-			if (isNumber(current)) return urls.length >= current ? current : 0;
-			const srcIndex = urls.indexOf(props.src);
-			if (srcIndex >= 0) return srcIndex;
-			return 0;
-		});
-		const width = computed(() => unit(props.width));
-		const height = computed(() => unit(props.height));
-		const loadImage = () => {
-			if (!isClient) return;
-			isLoading.value = true;
-			hasLoadError.value = false;
-			imageSrc.value = props.src;
-		};
-		function handleLoad(event) {
-			if (hasLoadError.value) return;
-			isLoading.value = false;
-			hasLoadError.value = false;
-			emit("load", event);
-		}
-		function handleError(event) {
-			isLoading.value = false;
-			hasLoadError.value = true;
-			emit("error", event);
-		}
-		function handleLazyLoad() {
-			if (isInContainer(container.value, _scrollContainer.value)) {
-				loadImage();
-				removeLazyLoadListener();
-			}
-		}
-		const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true);
-		async function addLazyLoadListener() {
-			if (!isClient) return;
-			await nextTick();
-			const { scrollContainer } = props;
-			if (isElement(scrollContainer)) _scrollContainer.value = scrollContainer;
-			else if (isString(scrollContainer) && scrollContainer !== "") _scrollContainer.value = document.querySelector(scrollContainer) ?? void 0;
-			else if (container.value) _scrollContainer.value = getScrollContainer(container.value);
-			if (_scrollContainer.value) {
-				stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
-				setTimeout(() => handleLazyLoad(), 100);
-			}
-		}
-		function removeLazyLoadListener() {
-			if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return;
-			stopScrollListener?.();
-			_scrollContainer.value = void 0;
-		}
-		function wheelHandler(e) {
-			if (!e.ctrlKey) return;
-			if (e.deltaY < 0) {
-				e.preventDefault();
-				return false;
-			} else if (e.deltaY > 0) {
-				e.preventDefault();
-				return false;
-			}
-		}
-		const clickHandler = () => {
-			emit("click", isLoading.value ? "loaded" : hasLoadError.value ? "error" : "success");
-			if (isLoading.value || hasLoadError.value) return;
-			if (canPreview.value) {
-				stopWheelListener = useEventListener("wheel", wheelHandler, { passive: false });
-				prevOverflow = document.body.style.overflow;
-				document.body.style.overflow = "hidden";
-				showViewer.value = true;
-			}
-		};
-		const closeViewer = () => {
-			stopWheelListener?.();
-			document.body.style.overflow = prevOverflow;
-			showViewer.value = false;
-		};
-		watch(() => props.src, () => {
-			if (isManual.value) {
-				isLoading.value = true;
-				hasLoadError.value = false;
-				removeLazyLoadListener();
-				addLazyLoadListener();
-			} else loadImage();
-		});
-		watchEffect(() => {
-			if (canPreview.value && showViewer.value) imageViewer.value?.setOpen(true);
-			else imageViewer.value?.setOpen(false);
-		});
-		onMounted(() => {
-			if (isManual.value) addLazyLoadListener();
-			else loadImage();
-		});
-		return () => {
-			const containerAttrs = fromPairs(Object.entries(attrs).filter(([key]) => /^(?:data-|on[A-Z])/i.test(key) || [
-				"id",
-				"style",
-				"class"
-			].includes(key)));
-			const imgAttrs = omit(attrs, Object.keys(containerAttrs));
-			const slotsProps = getSlotsProps({
-				slots,
-				props,
-				keys: [
-					"fallback",
-					"mask",
-					"placeholder"
-				],
-				render: true
-			});
-			return wrapSSR(createVNode("div", mergeProps({
-				"class": {
-					[`${hashId.value}`]: true,
-					[`${baseClassName}`]: true
-				},
-				"ref": container
-			}, containerAttrs, {
-				"style": {
-					width: unit(props.size) || width.value,
-					height: unit(props.size) || height.value,
-					...containerAttrs.style || {}
-				},
-				"onClick": () => {
-					if (hasLoadError.value) clickHandler();
-				}
-			}), [
-				hasLoadError.value ? createVNode("div", { "class": classNames(hashId.value, `${baseClassName}-error`) }, [slotsProps.fallback]) : createVNode(Fragment, null, [createVNode("img", mergeProps(imgAttrs, {
-					"src": imageSrc.value,
-					"loading": props.loading,
-					"style": imageStyle.value,
-					"class": classNames(hashId.value, props.imageClass, `${baseClassName}-img`, {
-						[`${baseClassName}-img-placeholder`]: props.placeholder === true,
-						[`${baseClassName}-img-preview`]: canPreview.value
-					}),
-					"crossorigin": props.crossOrigin,
-					"width": width.value,
-					"height": height.value,
-					"onClick": clickHandler,
-					"onLoad": handleLoad,
-					"onError": handleError
-				}), null), isLoading.value && createVNode("div", {
-					"class": classNames(`${baseClassName}-placeholder`, hashId.value),
-					"onClick": clickHandler
-				}, [slotsProps.placeholder])]),
-				previewProps.value.mask && canPreview.value && createVNode("div", {
-					"class": classNames(`${baseClassName}-mask`, previewProps.value.maskClass, hashId.value),
-					"style": { display: containerAttrs.style?.display === "none" ? "none" : void 0 }
-				}, [slotsProps.mask || createVNode("div", { "class": classNames(`${baseClassName}-mask-info`, hashId.value) }, [createVNode(EyeOutlined, null, null)])]),
-				canPreview.value && createVNode(ImagePreview_default, mergeProps({ "ref": imageViewer }, previewProps.value, {
-					"urls": previewProps.value.urls || [props.src],
-					"current": currentImage.value,
-					"onClose": () => closeViewer()
-				}), slots)
-			]));
-		};
-	}
-});
-GImage.isGImage = true;
-GImage.install = (app) => {
-	app.component(GImage.name, GImage);
-	return app;
-};
-var GImage_default = GImage;
-
-//#endregion
-export { GImage_default as default };

package/dist/ImagePreview/Operations.d.ts

@@ -1,83 +0,0 @@
-import { PreviewPropsIcons } from "./props.js";
-import { ImagePreviewTools } from "./typings.js";
-import * as vue84 from "vue";
-import { PropType } from "vue";
-import * as _gx_design_vue_pro_utils13 from "@gx-design-vue/pro-utils";
-import * as vue_jsx_runtime0 from "vue/jsx-runtime";
-
-//#region src/ImagePreview/Operations.d.ts
-declare const _default: vue84.DefineComponent<vue84.ExtractPropTypes<{
-  open: PropType<boolean>;
-  count: {
-    type: PropType<number>;
-    default: number;
-  };
-  current: {
-    type: PropType<number>;
-    default: number;
-  };
-  showSwitch: PropType<boolean>;
-  showProgress: PropType<boolean>;
-  prefixCls: PropType<string>;
-  hashId: PropType<string>;
-  zIndex: {
-    type: PropType<number>;
-    default: number;
-  };
-  icons: {
-    type: PropType<PreviewPropsIcons>;
-    default: () => PreviewPropsIcons;
-  };
-  infinite: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  getContainer: {
-    type: PropType<string>;
-  };
-  countRender: PropType<_gx_design_vue_pro_utils13.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils13.CustomRender>>;
-  tools: PropType<ImagePreviewTools[]>;
-  onClose: PropType<() => void>;
-  onActive: PropType<(offset: number) => void>;
-}>, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue84.ComponentOptionsMixin, vue84.ComponentOptionsMixin, {}, string, vue84.PublicProps, Readonly<vue84.ExtractPropTypes<{
-  open: PropType<boolean>;
-  count: {
-    type: PropType<number>;
-    default: number;
-  };
-  current: {
-    type: PropType<number>;
-    default: number;
-  };
-  showSwitch: PropType<boolean>;
-  showProgress: PropType<boolean>;
-  prefixCls: PropType<string>;
-  hashId: PropType<string>;
-  zIndex: {
-    type: PropType<number>;
-    default: number;
-  };
-  icons: {
-    type: PropType<PreviewPropsIcons>;
-    default: () => PreviewPropsIcons;
-  };
-  infinite: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  getContainer: {
-    type: PropType<string>;
-  };
-  countRender: PropType<_gx_design_vue_pro_utils13.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils13.CustomRender>>;
-  tools: PropType<ImagePreviewTools[]>;
-  onClose: PropType<() => void>;
-  onActive: PropType<(offset: number) => void>;
-}>> & Readonly<{}>, {
-  zIndex: number;
-  current: number;
-  infinite: boolean;
-  icons: PreviewPropsIcons;
-  count: number;
-}, {}, {}, {}, string, vue84.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { _default as default };

package/dist/ImagePreview/Operations.js

@@ -1,71 +0,0 @@
-import props_default from "./props.js";
-import { Fragment, Teleport, Transition, cloneVNode, createVNode, defineComponent, vShow, withDirectives } from "vue";
-import { CloseOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
-import { getTransitionProps } from "@gx-design-vue/pro-provider";
-import { classNames } from "@gx-design-vue/pro-utils";
-
-//#region src/ImagePreview/Operations.tsx
-var Operations_default = /* @__PURE__ */ defineComponent({
-	name: "Operations",
-	inheritAttrs: false,
-	props: {
-		open: Boolean,
-		count: {
-			type: Number,
-			default: 0
-		},
-		current: {
-			type: Number,
-			default: 0
-		},
-		showSwitch: Boolean,
-		showProgress: Boolean,
-		prefixCls: String,
-		hashId: String,
-		zIndex: props_default.zIndex,
-		icons: props_default.icons,
-		infinite: props_default.infinite,
-		getContainer: props_default.getContainer,
-		countRender: props_default.countRender,
-		tools: Array,
-		onClose: Function,
-		onActive: Function
-	},
-	setup(props) {
-		const handleActive = (e, offset) => {
-			e.preventDefault();
-			e.stopPropagation();
-			props.onActive?.(offset);
-		};
-		return () => {
-			const { prefixCls, hashId, tools } = props;
-			const transitionProps = getTransitionProps(`${props.prefixCls}-fade`);
-			const toolClassName = `${prefixCls}-operations-operation`;
-			const iconClassName = `${prefixCls}-operations-icon`;
-			return createVNode(Teleport, { "to": props.getContainer || "body" }, { default: () => [createVNode(Transition, transitionProps, { default: () => [withDirectives(createVNode("div", {
-				"class": classNames(`${prefixCls}-operations-wrapper`, hashId),
-				"style": { zIndex: props.zIndex }
-			}, [
-				props.icons?.close === null ? null : createVNode("button", {
-					"class": `${prefixCls}-close ${hashId}`,
-					"onClick": props.onClose
-				}, [props.icons?.close || createVNode(CloseOutlined, null, null)]),
-				props.showSwitch && createVNode(Fragment, null, [createVNode("div", {
-					"class": classNames(`${prefixCls}-switch-left ${hashId}`, { [`${prefixCls}-switch-left-disabled`]: props.infinite ? false : props.current === 0 }),
-					"onClick": (e) => handleActive(e, -1)
-				}, [props.icons?.left || createVNode(LeftOutlined, null, null)]), createVNode("div", {
-					"class": classNames(`${prefixCls}-switch-right ${hashId}`, { [`${prefixCls}-switch-right-disabled`]: props.infinite ? false : props.current === props.count - 1 }),
-					"onClick": (e) => handleActive(e, 1)
-				}, [props.icons?.right || createVNode(RightOutlined, null, null)])]),
-				createVNode("div", { "class": `${prefixCls}-footer ${hashId}` }, [props.showProgress && createVNode("div", { "class": `${prefixCls}-progress` }, [props.countRender ? props.countRender(props.current + 1, props.count) : `${props.current + 1} / ${props.count}`]), createVNode("div", { "class": `${props.prefixCls}-operations` }, [tools?.map(({ icon: IconType, onClick, type, disabled }) => createVNode("div", {
-					"class": classNames(toolClassName, { [`${props.prefixCls}-operations-operation-disabled`]: disabled && disabled?.value }),
-					"onClick": onClick,
-					"key": type
-				}, [cloneVNode(IconType, { class: iconClassName })]))])])
-			]), [[vShow, props.open]])] })] });
-		};
-	}
-});
-
-//#endregion
-export { Operations_default as default };

package/dist/ImagePreview/hooks/getFixScaleEleTransPosition.d.ts

@@ -1,19 +0,0 @@
-//#region src/ImagePreview/hooks/getFixScaleEleTransPosition.d.ts
-/**
- * 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
- */
-declare function getFixScaleEleTransPosition(width: number, height: number, left: number, top: number): null | {
-  x: number;
-  y: number;
-};
-//#endregion
-export { getFixScaleEleTransPosition as default };

package/dist/ImagePreview/hooks/getFixScaleEleTransPosition.js

@@ -1,40 +0,0 @@
-import { useWindowSize } from "@vueuse/core";
-
-//#region src/ImagePreview/hooks/getFixScaleEleTransPosition.ts
-function fixPoint(key, start, width, clientWidth) {
-	const startAddWidth = start + width;
-	const offsetStart = (width - clientWidth) / 2;
-	if (width > clientWidth) {
-		if (start > 0) return { [key]: offsetStart };
-		if (start < 0 && startAddWidth < clientWidth) return { [key]: -offsetStart };
-	} 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 } = useWindowSize();
-	let fixPos = null;
-	if (width <= clientWidth.value && height <= clientHeight.value) fixPos = {
-		x: 0,
-		y: 0
-	};
-	else if (width > clientWidth.value || height > clientHeight.value) fixPos = {
-		...fixPoint("x", left, width, clientWidth.value),
-		...fixPoint("y", top, height, clientHeight.value)
-	};
-	return fixPos;
-}
-
-//#endregion
-export { getFixScaleEleTransPosition as default };

package/dist/ImagePreview/hooks/useImageTransform.d.ts

@@ -1,39 +0,0 @@
-import { Ref } from "vue";
-
-//#region src/ImagePreview/hooks/useImageTransform.d.ts
-interface TransformType {
-  x: number;
-  y: number;
-  rotate: number;
-  scale: number;
-  flipX: boolean;
-  flipY: boolean;
-}
-type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
-type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
-type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
-declare function useImageTransform(imgRef: Ref<HTMLImageElement>, minScale: Ref<number>, maxScale: Ref<number>, onTransform?: (info: {
-  transform: TransformType;
-  action: TransformAction;
-}) => void): {
-  transform: Ref<{
-    x: number;
-    y: number;
-    rotate: number;
-    scale: number;
-    flipX: boolean;
-    flipY: boolean;
-  }, {
-    x: number;
-    y: number;
-    rotate: number;
-    scale: number;
-    flipX: boolean;
-    flipY: boolean;
-  }>;
-  resetTransform: (action: TransformAction) => void;
-  updateTransform: UpdateTransformFunc;
-  dispatchZoomChange: DispatchZoomChangeFunc;
-};
-//#endregion
-export { DispatchZoomChangeFunc, TransformAction, TransformType, UpdateTransformFunc, useImageTransform as default };

package/dist/ImagePreview/hooks/useImageTransform.js

@@ -1,105 +0,0 @@
-import { ref } from "vue";
-import { raf } from "@gx-design-vue/pro-utils";
-import { useWindowSize } from "@vueuse/core";
-import { cloneDeep, isEqual } from "es-toolkit";
-import { useState } from "@gx-design-vue/pro-hooks";
-
-//#region src/ImagePreview/hooks/useImageTransform.ts
-const initialTransform = {
-	x: 0,
-	y: 0,
-	rotate: 0,
-	scale: 1,
-	flipX: false,
-	flipY: false
-};
-function useImageTransform(imgRef, minScale, maxScale, onTransform) {
-	const frame = ref(null);
-	const queue = ref([]);
-	const [transform, setTransform] = useState(initialTransform);
-	const resetTransform = (action) => {
-		setTransform(initialTransform);
-		if (!isEqual(initialTransform, transform.value)) onTransform?.({
-			transform: initialTransform,
-			action
-		});
-	};
-	/** Direct update transform */
-	const updateTransform = (newTransform, action) => {
-		if (frame.value === null) {
-			queue.value = [];
-			frame.value = raf(() => {
-				let memoState = cloneDeep(transform.value);
-				queue.value.forEach((queueState) => {
-					memoState = {
-						...memoState,
-						...queueState
-					};
-				});
-				frame.value = null;
-				onTransform?.({
-					transform: memoState,
-					action
-				});
-				setTransform(memoState);
-			});
-		}
-		queue.value.push({
-			...transform.value,
-			...newTransform
-		});
-	};
-	/** Scale according to the position of centerX and centerY */
-	const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
-		const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.value;
-		let newRatio = ratio;
-		let newScale = transform.value.scale * ratio;
-		if (newScale > maxScale.value) {
-			newScale = maxScale.value;
-			newRatio = maxScale.value / transform.value.scale;
-		} else if (newScale < minScale.value) {
-			newScale = isTouch ? newScale : minScale.value;
-			newRatio = newScale / transform.value.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.value.x - offsetLeft);
-		const diffOffsetTop = diffRatio * (mergedCenterY - transform.value.y - offsetTop);
-		/** Final positioning */
-		let newX = transform.value.x - (diffOffsetLeft - diffImgX);
-		let newY = transform.value.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;
-			const { width: clientWidth, height: clientHeight } = useWindowSize();
-			if (mergedWidth <= clientWidth.value && mergedHeight <= clientHeight.value) {
-				newX = 0;
-				newY = 0;
-			}
-		}
-		updateTransform({
-			x: newX,
-			y: newY,
-			scale: newScale
-		}, action);
-	};
-	return {
-		transform,
-		resetTransform,
-		updateTransform,
-		dispatchZoomChange
-	};
-}
-
-//#endregion
-export { useImageTransform as default };

package/dist/ImagePreview/hooks/useMouseEvent.d.ts

@@ -1,14 +0,0 @@
-import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from "./useImageTransform.js";
-import { MouseEventHandler } from "../typings.js";
-import { Ref } from "vue";
-
-//#region src/ImagePreview/hooks/useMouseEvent.d.ts
-declare function useMouseEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, scaleStep: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
-  isMoving: Ref<boolean, boolean>;
-  onMouseDown: MouseEventHandler;
-  onMouseMove: MouseEventHandler;
-  onMouseUp: MouseEventHandler;
-  onWheel: (event: WheelEvent) => void;
-};
-//#endregion
-export { useMouseEvent as default };