@v-c/image 1.0.0 → 1.0.2

package/dist/Preview/index.js

@@ -95,7 +95,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	watch(() => props.open, (open) => {
 		if (open) lockScroll.value = true;
 	});
-	const portalRender = shallowRef(false);
+	const portalRender = shallowRef(props?.open ?? false);
 	watch(() => props.open, (open) => {
 		if (open) portalRender.value = true;
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "image component",
   "author": "",
   "license": "MIT",
@@ -14,7 +14,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -32,8 +32,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.8",
-    "@v-c/portal": "^1.0.5"
+    "@v-c/util": "^1.0.9",
+    "@v-c/portal": "^1.0.6"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"

package/dist/Image.cjs

@@ -1,231 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_index = require("./util/dist/props-util/index.cjs");
-const require_classnames = require("./util/dist/classnames.cjs");
-const require_useMergedState = require("./util/dist/hooks/useMergedState.cjs");
-require("./util/dist/index.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/Preview/CloseBtn.cjs

@@ -1,44 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-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/Footer.cjs

@@ -1,234 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_classnames = require("../util/dist/classnames.cjs");
-require("../util/dist/index.cjs");
-let vue = require("vue");
-var Footer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const renderOperation = ({ type, disabled, onClick, icon }) => {
-		const actionCls = `${props.prefixCls}-actions-action`;
-		return (0, vue.createVNode)("div", {
-			"key": type,
-			"class": require_classnames.clsx(actionCls, `${actionCls}-${type}`, { [`${actionCls}-disabled`]: !!disabled }),
-			"onClick": () => {
-				if (!disabled) onClick();
-			}
-		}, [icon]);
-	};
-	return () => {
-		const { prefixCls, showProgress, current, count, showSwitch, classNames, styles, icons, image, transform, countRender, actionsRender, scale, minScale, maxScale, onActive, onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onClose, onReset } = props;
-		const progressNode = showProgress && (0, vue.createVNode)("div", { "class": `${prefixCls}-progress` }, [countRender ? countRender(current + 1, count) : (0, vue.createVNode)("bdi", null, [`${current + 1} / ${count}`])]);
-		const switchPrevNode = showSwitch ? renderOperation({
-			icon: icons?.prev ?? icons?.left,
-			onClick: () => onActive(-1),
-			type: "prev",
-			disabled: current === 0
-		}) : void 0;
-		const switchNextNode = showSwitch ? renderOperation({
-			icon: icons?.next ?? icons?.right,
-			onClick: () => onActive(1),
-			type: "next",
-			disabled: current === count - 1
-		}) : void 0;
-		const flipYNode = renderOperation({
-			icon: icons?.flipY,
-			onClick: onFlipY,
-			type: "flipY"
-		});
-		const flipXNode = renderOperation({
-			icon: icons?.flipX,
-			onClick: onFlipX,
-			type: "flipX"
-		});
-		const rotateLeftNode = renderOperation({
-			icon: icons?.rotateLeft,
-			onClick: onRotateLeft,
-			type: "rotateLeft"
-		});
-		const rotateRightNode = renderOperation({
-			icon: icons?.rotateRight,
-			onClick: onRotateRight,
-			type: "rotateRight"
-		});
-		const zoomOutNode = renderOperation({
-			icon: icons?.zoomOut,
-			onClick: onZoomOut,
-			type: "zoomOut",
-			disabled: scale <= minScale
-		});
-		const zoomInNode = renderOperation({
-			icon: icons?.zoomIn,
-			onClick: onZoomIn,
-			type: "zoomIn",
-			disabled: scale === maxScale
-		});
-		const actionsNode = (0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(`${prefixCls}-actions`, classNames.actions),
-			"style": styles.actions
-		}, [
-			flipYNode,
-			flipXNode,
-			rotateLeftNode,
-			rotateRightNode,
-			zoomOutNode,
-			zoomInNode
-		]);
-		const renderNode = actionsRender ? actionsRender(actionsNode, {
-			icons: {
-				prevIcon: switchPrevNode,
-				nextIcon: switchNextNode,
-				flipYIcon: flipYNode,
-				flipXIcon: flipXNode,
-				rotateLeftIcon: rotateLeftNode,
-				rotateRightIcon: rotateRightNode,
-				zoomOutIcon: zoomOutNode,
-				zoomInIcon: zoomInNode
-			},
-			actions: {
-				onActive,
-				onFlipY,
-				onFlipX,
-				onRotateLeft,
-				onRotateRight,
-				onZoomOut,
-				onZoomIn,
-				onReset,
-				onClose
-			},
-			transform,
-			current,
-			total: count,
-			image
-		}) : actionsNode;
-		return (0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(`${prefixCls}-footer`, classNames.footer),
-			"style": styles.footer
-		}, [progressNode, renderNode]);
-	};
-}, {
-	props: {
-		prefixCls: {
-			type: String,
-			required: true,
-			default: void 0
-		},
-		showProgress: {
-			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		countRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		actionsRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		current: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		count: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		showSwitch: {
-			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		icons: {
-			required: true,
-			default: void 0
-		},
-		scale: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		minScale: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		maxScale: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		image: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		transform: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		classNames: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		styles: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		onActive: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onFlipY: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onFlipX: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onRotateLeft: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onRotateRight: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onZoomOut: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onZoomIn: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onClose: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onReset: {
-			type: Function,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "ImagePreviewFooter"
-});
-var Footer_default = Footer;
-exports.default = Footer_default;

package/dist/Preview/PrevNext.cjs

@@ -1,59 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_classnames = require("../util/dist/classnames.cjs");
-require("../util/dist/index.cjs");
-let vue = require("vue");
-var PrevNext = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	return () => {
-		const { prefixCls, onActive, current, count, icons } = props;
-		const switchCls = `${prefixCls}-switch`;
-		const prevIcon = icons.prev ?? icons.left;
-		const nextIcon = icons.next ?? icons.right;
-		const isPrevDisabled = current === 0;
-		const isNextDisabled = current === count - 1;
-		return (0, vue.createVNode)(vue.Fragment, null, [(0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(switchCls, `${switchCls}-prev`, { [`${switchCls}-disabled`]: isPrevDisabled }),
-			"onClick": () => {
-				if (!isPrevDisabled) onActive(-1);
-			}
-		}, [prevIcon]), (0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(switchCls, `${switchCls}-next`, { [`${switchCls}-disabled`]: isNextDisabled }),
-			"onClick": () => {
-				if (!isNextDisabled) onActive(1);
-			}
-		}, [nextIcon])]);
-	};
-}, {
-	props: {
-		prefixCls: {
-			type: String,
-			required: true,
-			default: void 0
-		},
-		onActive: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		current: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		count: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		icons: {
-			type: Object,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "ImagePreviewPrevNext"
-});
-var PrevNext_default = PrevNext;
-exports.default = PrevNext_default;