@v-c/image 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Image.cjs

@@ -0,0 +1,228 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_index = require("./util/dist/props-util/index.cjs");
+const require_classnames = require("./util/dist/classnames.cjs");
+require("./util/dist/index.cjs");
+const require_useMergedState = require("./util/dist/hooks/useMergedState.cjs");
+const require_pickAttrs = require("./util/dist/pickAttrs.cjs");
+const require_common = require("./common.cjs");
+const require_context = require("./context.cjs");
+const require_useRegisterImage = require("./hooks/useRegisterImage.cjs");
+const require_useStatus = require("./hooks/useStatus.cjs");
+const require_index$2 = require("./Preview/index.cjs");
+let vue = require("vue");
+var Image = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots }) => {
+	const groupContext = require_context.usePreviewGroupContext();
+	const prefixCls = (0, vue.computed)(() => props.prefixCls ?? "vc-image");
+	const previewPrefixCls = (0, vue.computed)(() => props.previewPrefixCls ?? `${prefixCls.value}-preview`);
+	const canPreview = (0, vue.computed)(() => !!props.preview);
+	const mergedPreviewConfig = (0, vue.computed)(() => {
+		if (props.preview && typeof props.preview === "object") return props.preview;
+		return {};
+	});
+	const previewSrc = (0, vue.computed)(() => mergedPreviewConfig.value.src);
+	const previewOpen = (0, vue.computed)(() => mergedPreviewConfig.value.open);
+	const cover = (0, vue.computed)(() => mergedPreviewConfig.value.cover);
+	const previewRootClassName = (0, vue.computed)(() => mergedPreviewConfig.value.rootClassName);
+	const [isShowPreview, setShowPreview] = require_useMergedState.useMergedState(!!previewOpen.value, { value: previewOpen });
+	const mousePosition = (0, vue.shallowRef)(null);
+	const triggerPreviewOpen = (nextOpen) => {
+		setShowPreview(nextOpen);
+		mergedPreviewConfig.value.onOpenChange?.(nextOpen);
+	};
+	const onPreviewClose = () => {
+		triggerPreviewOpen(false);
+		mousePosition.value = null;
+	};
+	const isCustomPlaceholder = (0, vue.computed)(() => !!slots.placeholder || !!(props.placeholder && props.placeholder !== true));
+	const src = (0, vue.computed)(() => previewSrc.value ?? props.src);
+	const [getImgRef, srcAndOnload, status] = require_useStatus.default({
+		src: (0, vue.computed)(() => props.src),
+		isCustomPlaceholder,
+		fallback: (0, vue.computed)(() => props.fallback)
+	});
+	const imgCommonProps = (0, vue.computed)(() => {
+		const obj = {};
+		require_common.COMMON_PROPS.forEach((prop) => {
+			if (props[prop] !== void 0) obj[prop] = props[prop];
+		});
+		return obj;
+	});
+	const imageId = require_useRegisterImage.default(canPreview, (0, vue.computed)(() => ({
+		...imgCommonProps.value,
+		src: src.value
+	})));
+	const onPreview = (e) => {
+		const rect = (e.currentTarget || e.target).getBoundingClientRect();
+		const left = rect.x + rect.width / 2;
+		const top = rect.y + rect.height / 2;
+		if (groupContext) groupContext.onPreview(imageId, src.value || "", left, top);
+		else {
+			mousePosition.value = {
+				x: left,
+				y: top
+			};
+			triggerPreviewOpen(true);
+		}
+		props.onClick?.(e);
+	};
+	const onInternalClick = (e) => {
+		props.onClick?.(e);
+	};
+	const onImgError = (e) => {
+		props.onError?.(e);
+	};
+	return () => {
+		const { width, height } = props;
+		const { className, style: attrStyle, restAttrs } = require_index.getAttrStyleAndClass(attrs);
+		const coverPlacement = typeof cover.value === "object" && cover.value && cover.value.placement ? cover.value.placement || "center" : "center";
+		const coverNode = typeof cover.value === "object" && cover.value && cover.value.coverNode ? cover.value.coverNode : cover.value;
+		const imgStyle = [
+			height ? { height: require_index.getStylePxValue(height) } : null,
+			props.styles?.image,
+			attrStyle
+		];
+		const rootStyle = {
+			width: require_index.getStylePxValue(width),
+			height: require_index.getStylePxValue(height),
+			...props.styles?.root ?? {}
+		};
+		const rootCls = require_classnames.clsx(prefixCls.value, props.rootClassName, props.classNames?.root, { [`${prefixCls.value}-error`]: status.value === "error" });
+		const imgCls = require_classnames.clsx(`${prefixCls.value}-img`, { [`${prefixCls.value}-img-placeholder`]: props.placeholder === true }, props.classNames?.image, className);
+		const imageRender = slots.imageRender ? (originNode, info) => slots.imageRender?.(originNode, info) : mergedPreviewConfig.value.imageRender;
+		const placeholderNode = slots.placeholder?.() ?? (props.placeholder === true ? null : props.placeholder);
+		const actionsRender = slots.actionsRender ? (originNode, info) => slots.actionsRender?.({
+			actionsNode: originNode,
+			...info
+		}) : mergedPreviewConfig.value.actionsRender;
+		const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls,...restPreviewProps } = mergedPreviewConfig.value;
+		return (0, vue.createVNode)(vue.Fragment, null, [(0, vue.createVNode)("div", (0, vue.mergeProps)(require_pickAttrs.pickAttrs(restAttrs, false), {
+			"class": rootCls,
+			"onClick": canPreview.value ? onPreview : onInternalClick,
+			"style": rootStyle
+		}), [
+			(0, vue.createVNode)("img", (0, vue.mergeProps)(imgCommonProps.value, {
+				"src": srcAndOnload.value.src,
+				"class": imgCls,
+				"style": imgStyle,
+				"ref": getImgRef,
+				"width": width,
+				"height": height,
+				"onLoad": srcAndOnload.value.onLoad,
+				"onError": onImgError
+			}), null),
+			status.value === "loading" && (0, vue.createVNode)("div", {
+				"aria-hidden": "true",
+				"class": `${prefixCls.value}-placeholder`
+			}, [placeholderNode]),
+			cover.value !== false && canPreview.value && (0, vue.createVNode)("div", {
+				"class": require_classnames.clsx(`${prefixCls.value}-cover`, props.classNames?.cover, `${prefixCls.value}-cover-${coverPlacement}`),
+				"style": props.styles?.cover
+			}, [coverNode])
+		]), !groupContext && canPreview.value && (0, vue.createVNode)(require_index$2.default, (0, vue.mergeProps)({
+			"aria-hidden": !isShowPreview.value,
+			"open": isShowPreview.value,
+			"prefixCls": previewPrefixCls.value,
+			"onClose": onPreviewClose,
+			"mousePosition": mousePosition.value,
+			"src": src.value,
+			"alt": props.alt,
+			"imageInfo": {
+				width: props.width,
+				height: props.height
+			},
+			"fallback": props.fallback,
+			"imgCommonProps": imgCommonProps.value,
+			"imageRender": imageRender,
+			"actionsRender": actionsRender
+		}, restPreviewProps, {
+			"classNames": props.classNames?.popup,
+			"styles": props.styles?.popup,
+			"rootClassName": require_classnames.clsx(previewRootClassName.value, props.rootClassName)
+		}), null)]);
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		previewPrefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		rootClassName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		src: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: [
+				Boolean,
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		fallback: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		preview: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		onClick: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onError: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		width: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		height: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		}
+	}, {
+		prefixCls: "vc-image",
+		preview: true,
+		classNames: {},
+		styles: {}
+	}),
+	name: "Image",
+	inheritAttrs: false
+});
+var Image_default = Image;
+exports.default = Image_default;

package/dist/Image.d.ts

@@ -0,0 +1,46 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+import { TransformType } from './hooks/useImageTransform';
+import { ImageElementProps } from './interface';
+import { InternalPreviewConfig, PreviewSemanticName, ToolbarRenderInfoType } from './Preview';
+export interface ImgInfo {
+    url: string;
+    alt: string;
+    width: string | number;
+    height: string | number;
+}
+export interface CoverConfig {
+    coverNode?: VueNode;
+    placement?: 'top' | 'bottom' | 'center';
+}
+export interface PreviewConfig extends Omit<InternalPreviewConfig, 'countRender'> {
+    cover?: VueNode | CoverConfig | false;
+    imageRender?: (originalNode: VueNode, info: {
+        transform: TransformType;
+        image: ImgInfo;
+    }) => VueNode;
+    actionsRender?: (originalNode: VueNode, info: Omit<ToolbarRenderInfoType, 'current' | 'total'>) => VueNode;
+    onOpenChange?: (open: boolean) => void;
+}
+export type SemanticName = 'root' | 'image' | 'cover';
+export interface ImageProps extends Partial<Omit<ImageElementProps, 'src'>> {
+    prefixCls?: string;
+    previewPrefixCls?: string;
+    rootClassName?: string;
+    classNames?: Partial<Record<SemanticName, string> & {
+        popup?: Partial<Record<PreviewSemanticName, string>>;
+    }>;
+    styles?: Partial<Record<SemanticName, CSSProperties> & {
+        popup?: Partial<Record<PreviewSemanticName, CSSProperties>>;
+    }>;
+    src?: string;
+    placeholder?: boolean | VueNode;
+    fallback?: string;
+    preview?: boolean | PreviewConfig;
+    onClick?: (e: MouseEvent) => void;
+    onError?: (e: Event) => void;
+    width?: string | number;
+    height?: string | number;
+}
+declare const Image: import('vue').DefineSetupFnComponent<ImageProps, {}, {}, ImageProps & {}, import('vue').PublicProps>;
+export default Image;

package/dist/Image.js

@@ -0,0 +1,226 @@
+import { getAttrStyleAndClass, getStylePxValue } from "./util/dist/props-util/index.js";
+import { clsx } from "./util/dist/classnames.js";
+import "./util/dist/index.js";
+import { useMergedState } from "./util/dist/hooks/useMergedState.js";
+import { pickAttrs } from "./util/dist/pickAttrs.js";
+import { COMMON_PROPS } from "./common.js";
+import { usePreviewGroupContext } from "./context.js";
+import useRegisterImage from "./hooks/useRegisterImage.js";
+import useStatus from "./hooks/useStatus.js";
+import Preview_default from "./Preview/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
+var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const groupContext = usePreviewGroupContext();
+	const prefixCls = computed(() => props.prefixCls ?? "vc-image");
+	const previewPrefixCls = computed(() => props.previewPrefixCls ?? `${prefixCls.value}-preview`);
+	const canPreview = computed(() => !!props.preview);
+	const mergedPreviewConfig = computed(() => {
+		if (props.preview && typeof props.preview === "object") return props.preview;
+		return {};
+	});
+	const previewSrc = computed(() => mergedPreviewConfig.value.src);
+	const previewOpen = computed(() => mergedPreviewConfig.value.open);
+	const cover = computed(() => mergedPreviewConfig.value.cover);
+	const previewRootClassName = computed(() => mergedPreviewConfig.value.rootClassName);
+	const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen.value, { value: previewOpen });
+	const mousePosition = shallowRef(null);
+	const triggerPreviewOpen = (nextOpen) => {
+		setShowPreview(nextOpen);
+		mergedPreviewConfig.value.onOpenChange?.(nextOpen);
+	};
+	const onPreviewClose = () => {
+		triggerPreviewOpen(false);
+		mousePosition.value = null;
+	};
+	const isCustomPlaceholder = computed(() => !!slots.placeholder || !!(props.placeholder && props.placeholder !== true));
+	const src = computed(() => previewSrc.value ?? props.src);
+	const [getImgRef, srcAndOnload, status] = useStatus({
+		src: computed(() => props.src),
+		isCustomPlaceholder,
+		fallback: computed(() => props.fallback)
+	});
+	const imgCommonProps = computed(() => {
+		const obj = {};
+		COMMON_PROPS.forEach((prop) => {
+			if (props[prop] !== void 0) obj[prop] = props[prop];
+		});
+		return obj;
+	});
+	const imageId = useRegisterImage(canPreview, computed(() => ({
+		...imgCommonProps.value,
+		src: src.value
+	})));
+	const onPreview = (e) => {
+		const rect = (e.currentTarget || e.target).getBoundingClientRect();
+		const left = rect.x + rect.width / 2;
+		const top = rect.y + rect.height / 2;
+		if (groupContext) groupContext.onPreview(imageId, src.value || "", left, top);
+		else {
+			mousePosition.value = {
+				x: left,
+				y: top
+			};
+			triggerPreviewOpen(true);
+		}
+		props.onClick?.(e);
+	};
+	const onInternalClick = (e) => {
+		props.onClick?.(e);
+	};
+	const onImgError = (e) => {
+		props.onError?.(e);
+	};
+	return () => {
+		const { width, height } = props;
+		const { className, style: attrStyle, restAttrs } = getAttrStyleAndClass(attrs);
+		const coverPlacement = typeof cover.value === "object" && cover.value && cover.value.placement ? cover.value.placement || "center" : "center";
+		const coverNode = typeof cover.value === "object" && cover.value && cover.value.coverNode ? cover.value.coverNode : cover.value;
+		const imgStyle = [
+			height ? { height: getStylePxValue(height) } : null,
+			props.styles?.image,
+			attrStyle
+		];
+		const rootStyle = {
+			width: getStylePxValue(width),
+			height: getStylePxValue(height),
+			...props.styles?.root ?? {}
+		};
+		const rootCls = clsx(prefixCls.value, props.rootClassName, props.classNames?.root, { [`${prefixCls.value}-error`]: status.value === "error" });
+		const imgCls = clsx(`${prefixCls.value}-img`, { [`${prefixCls.value}-img-placeholder`]: props.placeholder === true }, props.classNames?.image, className);
+		const imageRender = slots.imageRender ? (originNode, info) => slots.imageRender?.(originNode, info) : mergedPreviewConfig.value.imageRender;
+		const placeholderNode = slots.placeholder?.() ?? (props.placeholder === true ? null : props.placeholder);
+		const actionsRender = slots.actionsRender ? (originNode, info) => slots.actionsRender?.({
+			actionsNode: originNode,
+			...info
+		}) : mergedPreviewConfig.value.actionsRender;
+		const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls,...restPreviewProps } = mergedPreviewConfig.value;
+		return createVNode(Fragment, null, [createVNode("div", mergeProps(pickAttrs(restAttrs, false), {
+			"class": rootCls,
+			"onClick": canPreview.value ? onPreview : onInternalClick,
+			"style": rootStyle
+		}), [
+			createVNode("img", mergeProps(imgCommonProps.value, {
+				"src": srcAndOnload.value.src,
+				"class": imgCls,
+				"style": imgStyle,
+				"ref": getImgRef,
+				"width": width,
+				"height": height,
+				"onLoad": srcAndOnload.value.onLoad,
+				"onError": onImgError
+			}), null),
+			status.value === "loading" && createVNode("div", {
+				"aria-hidden": "true",
+				"class": `${prefixCls.value}-placeholder`
+			}, [placeholderNode]),
+			cover.value !== false && canPreview.value && createVNode("div", {
+				"class": clsx(`${prefixCls.value}-cover`, props.classNames?.cover, `${prefixCls.value}-cover-${coverPlacement}`),
+				"style": props.styles?.cover
+			}, [coverNode])
+		]), !groupContext && canPreview.value && createVNode(Preview_default, mergeProps({
+			"aria-hidden": !isShowPreview.value,
+			"open": isShowPreview.value,
+			"prefixCls": previewPrefixCls.value,
+			"onClose": onPreviewClose,
+			"mousePosition": mousePosition.value,
+			"src": src.value,
+			"alt": props.alt,
+			"imageInfo": {
+				width: props.width,
+				height: props.height
+			},
+			"fallback": props.fallback,
+			"imgCommonProps": imgCommonProps.value,
+			"imageRender": imageRender,
+			"actionsRender": actionsRender
+		}, restPreviewProps, {
+			"classNames": props.classNames?.popup,
+			"styles": props.styles?.popup,
+			"rootClassName": clsx(previewRootClassName.value, props.rootClassName)
+		}), null)]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		previewPrefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		rootClassName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		src: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: [
+				Boolean,
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		fallback: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		preview: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		onClick: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onError: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		width: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		height: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		}
+	}, {
+		prefixCls: "vc-image",
+		preview: true,
+		classNames: {},
+		styles: {}
+	}),
+	name: "Image",
+	inheritAttrs: false
+});
+export { Image_default as default };

package/dist/Preview/CloseBtn.cjs

@@ -0,0 +1,41 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+let vue = require("vue");
+var CloseBtn = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	return () => {
+		const { prefixCls, icon, onClick } = props;
+		return (0, vue.createVNode)("button", {
+			"class": `${prefixCls}-close`,
+			"type": "button",
+			"onClick": onClick
+		}, [icon]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		onClick: {
+			type: Function,
+			required: true,
+			default: void 0
+		}
+	},
+	name: "ImagePreviewCloseBtn"
+});
+var CloseBtn_default = CloseBtn;
+exports.default = CloseBtn_default;

package/dist/Preview/CloseBtn.d.ts

@@ -0,0 +1,8 @@
+import { VueNode } from '@v-c/util/dist/type';
+export interface CloseBtnProps {
+    prefixCls: string;
+    icon?: VueNode;
+    onClick: (e: MouseEvent) => void;
+}
+declare const CloseBtn: import('vue').DefineSetupFnComponent<CloseBtnProps, {}, {}, CloseBtnProps & {}, import('vue').PublicProps>;
+export default CloseBtn;

package/dist/Preview/CloseBtn.js

@@ -0,0 +1,39 @@
+import { createVNode, defineComponent } from "vue";
+var CloseBtn_default = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { prefixCls, icon, onClick } = props;
+		return createVNode("button", {
+			"class": `${prefixCls}-close`,
+			"type": "button",
+			"onClick": onClick
+		}, [icon]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		onClick: {
+			type: Function,
+			required: true,
+			default: void 0
+		}
+	},
+	name: "ImagePreviewCloseBtn"
+});
+export { CloseBtn_default as default };