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

package/dist/Image.d.ts

@@ -0,0 +1,6 @@
+import { ForwardGImageType } from "./interface.js";
+
+//#region src/Image.d.ts
+declare const _default: ForwardGImageType;
+//#endregion
+export { _default as default };

package/dist/Image.js

@@ -0,0 +1,322 @@
+import useImagePreview from "./hooks/useImagePreview.js";
+import ForwardImagePreview from "./ImagePreview.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, onMounted, ref, watch } from "vue";
+import { EyeOutlined } from "@antdv-next/icons";
+import { unit } from "@gx-design-vue/pro-provider";
+import { classNames, getScrollContainer, getSlotsProps, isNumber, isString } from "@gx-design-vue/pro-utils";
+import { isClient, useEventListener, useThrottleFn } from "@vueuse/core";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+//#region src/Image.tsx
+const defaults = {
+	src: "",
+	alt: "",
+	fit: "contain",
+	preview: true,
+	loading: "eager"
+};
+function isElement(value) {
+	return value && value.nodeType === 1;
+}
+const Image = /* @__PURE__ */ defineComponent((props, { emit, slots, expose, attrs }) => {
+	const supportNativeLazy = isClient && "loading" in HTMLImageElement.prototype;
+	const { prefixCls } = useBaseConfig("pro-image", props);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const imageSrc = ref();
+	const hasLoadError = ref(false);
+	const isLoading = ref(true);
+	const containerRef = ref();
+	const scrollContainerRef = ref();
+	let stopScrollListener;
+	const isManualLazy = computed(() => {
+		if (props.loading === "eager") return false;
+		return !supportNativeLazy && props.loading === "lazy" || props.lazy;
+	});
+	const imageStyle = computed(() => {
+		if (isClient && props.fit) return {
+			...props.imageStyle,
+			objectFit: props.fit
+		};
+		return { ...props.imageStyle };
+	});
+	const previewConfig = computed(() => typeof props.preview === "object" ? props.preview : {});
+	const canPreview = computed(() => !!props.preview);
+	const currentPreviewIndex = computed(() => {
+		const { urls = [], current = 0 } = previewConfig.value;
+		if (isNumber(current)) return urls.length >= current ? current : 0;
+		const srcIndex = urls.indexOf(props.src ?? "");
+		return srcIndex >= 0 ? srcIndex : 0;
+	});
+	const containerWidth = computed(() => unit(props.width));
+	const containerHeight = computed(() => unit(props.height));
+	const { showViewer, mousePosition, openPreview, closePreview } = useImagePreview({ canPreview });
+	const loadImage = () => {
+		if (!isClient) return;
+		isLoading.value = true;
+		hasLoadError.value = false;
+		imageSrc.value = props.src;
+	};
+	const handleLoad = (event) => {
+		if (hasLoadError.value) return;
+		isLoading.value = false;
+		hasLoadError.value = false;
+		props.onLoad?.(event);
+		emit("load", event);
+	};
+	const handleError = (event) => {
+		isLoading.value = false;
+		hasLoadError.value = true;
+		props.onError?.(event);
+		emit("error", event);
+	};
+	const checkInViewport = () => {
+		if (!containerRef.value || !scrollContainerRef.value) return false;
+		const rect = containerRef.value.getBoundingClientRect();
+		const containerRect = scrollContainerRef.value.getBoundingClientRect ? scrollContainerRef.value.getBoundingClientRect() : {
+			top: 0,
+			bottom: scrollContainerRef.value.innerHeight ?? 0,
+			left: 0,
+			right: scrollContainerRef.value.innerWidth ?? 0
+		};
+		return rect.top < containerRect.bottom && rect.bottom > containerRect.top && rect.left < containerRect.right && rect.right > containerRect.left;
+	};
+	const handleLazyCheck = useThrottleFn(() => {
+		if (checkInViewport()) {
+			loadImage();
+			stopScrollListener?.();
+			stopScrollListener = void 0;
+		}
+	}, 200, true);
+	const setupLazyLoad = async () => {
+		if (!isClient) return;
+		await nextTick();
+		const { scrollContainer } = props;
+		if (isElement(scrollContainer)) scrollContainerRef.value = scrollContainer;
+		else if (isString(scrollContainer) && scrollContainer !== "") scrollContainerRef.value = document.querySelector(scrollContainer) ?? void 0;
+		else if (containerRef.value) scrollContainerRef.value = getScrollContainer(containerRef.value);
+		if (scrollContainerRef.value) {
+			stopScrollListener = useEventListener(scrollContainerRef.value, "scroll", handleLazyCheck);
+			setTimeout(handleLazyCheck, 100);
+		}
+	};
+	const handleClick = (clickEvent) => {
+		const clickType = isLoading.value ? "loaded" : hasLoadError.value ? "error" : "success";
+		props.onClick?.(clickType);
+		emit("click", clickType);
+		if (isLoading.value || hasLoadError.value) return;
+		if (canPreview.value) {
+			const rect = clickEvent.currentTarget?.getBoundingClientRect();
+			if (rect) openPreview({
+				...clickEvent,
+				clientX: rect.x + rect.width / 2,
+				clientY: rect.y + rect.height / 2
+			});
+			else openPreview(clickEvent);
+		}
+	};
+	watch(() => props.src, () => {
+		if (isManualLazy.value) {
+			isLoading.value = true;
+			hasLoadError.value = false;
+			stopScrollListener?.();
+			setupLazyLoad();
+		} else loadImage();
+	});
+	onMounted(() => {
+		if (isManualLazy.value) setupLazyLoad();
+		else loadImage();
+	});
+	expose({ setOpen: (open) => {
+		if (open) openPreview();
+		else closePreview();
+	} });
+	return () => {
+		const containerAttrs = {};
+		const imgAttrs = {};
+		for (const [key, value] of Object.entries(attrs)) if (/^(?:data-|on[A-Z])/i.test(key) || [
+			"id",
+			"style",
+			"class"
+		].includes(key)) containerAttrs[key] = value;
+		else imgAttrs[key] = value;
+		const slotProps = getSlotsProps({
+			slots,
+			props,
+			keys: [
+				"fallback",
+				"mask",
+				"placeholder"
+			],
+			render: true
+		});
+		return createVNode("div", mergeProps({
+			"class": classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value, props.class),
+			"ref": containerRef
+		}, containerAttrs, {
+			"style": {
+				width: unit(props.size) || containerWidth.value,
+				height: unit(props.size) || containerHeight.value,
+				...containerAttrs.style || {}
+			},
+			"onClick": (event) => {
+				if (hasLoadError.value) handleClick(event);
+			}
+		}), [
+			hasLoadError.value ? createVNode("div", { "class": classNames(`${prefixCls.value}-error`) }, [slotProps.fallback]) : createVNode(Fragment, null, [createVNode("img", mergeProps(imgAttrs, {
+				"src": imageSrc.value,
+				"loading": props.loading,
+				"style": imageStyle.value,
+				"class": classNames(props.imageClass, `${prefixCls.value}-img`, {
+					[`${prefixCls.value}-img-placeholder`]: props.placeholder === true,
+					[`${prefixCls.value}-img-preview`]: canPreview.value
+				}),
+				"crossorigin": props.crossOrigin,
+				"width": containerWidth.value,
+				"height": containerHeight.value,
+				"onClick": handleClick,
+				"onLoad": handleLoad,
+				"onError": handleError
+			}), null), isLoading.value && createVNode("div", {
+				"class": classNames(`${prefixCls.value}-placeholder`),
+				"onClick": handleClick
+			}, [slotProps.placeholder])]),
+			previewConfig.value.mask && canPreview.value && createVNode("div", {
+				"class": classNames(`${prefixCls.value}-mask`, previewConfig.value.maskClass),
+				"style": { display: containerAttrs.style?.display === "none" ? "none" : void 0 }
+			}, [slotProps.mask || createVNode("div", { "class": classNames(`${prefixCls.value}-mask-info`) }, [createVNode(EyeOutlined, null, null)])]),
+			canPreview.value && createVNode(ForwardImagePreview, mergeProps(previewConfig.value, {
+				"urls": previewConfig.value.urls || (props.src ? [props.src] : []),
+				"current": currentPreviewIndex.value,
+				"zIndex": props.zIndex ?? previewConfig.value.zIndex,
+				"open": showViewer.value,
+				"mousePosition": mousePosition.value,
+				"onClose": () => closePreview()
+			}), slots)
+		]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		src: {
+			type: String,
+			required: false
+		},
+		alt: {
+			type: String,
+			required: false
+		},
+		width: {
+			type: Number,
+			required: false
+		},
+		height: {
+			type: Number,
+			required: false
+		},
+		size: {
+			type: Number,
+			required: false
+		},
+		fit: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: String,
+			required: false
+		},
+		crossOrigin: {
+			type: String,
+			required: false
+		},
+		imageStyle: {
+			type: Object,
+			required: false
+		},
+		imageClass: {
+			type: String,
+			required: false
+		},
+		preview: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		scrollContainer: { required: false },
+		placeholder: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		fallback: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		onLoad: {
+			type: Function,
+			required: false
+		},
+		onError: {
+			type: Function,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:open": {
+			type: Function,
+			required: false
+		}
+	}, defaults),
+	emits: [
+		"click",
+		"load",
+		"error"
+	],
+	name: "GImage",
+	inheritAttrs: false
+});
+Image.isGImage = true;
+Image.install = (app) => {
+	app.component(Image.name, Image);
+	return app;
+};
+const GImage = Image;
+//#endregion
+export { GImage as default };

package/dist/ImagePreview.d.ts

@@ -0,0 +1,6 @@
+import { ForwardImagePreviewType } from "./interface.js";
+
+//#region src/ImagePreview.d.ts
+declare const _default: ForwardImagePreviewType;
+//#endregion
+export { _default as default };