@v-c/image 0.0.1

package/dist/Preview/Footer.cjs

@@ -0,0 +1,231 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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/Footer.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties } from 'vue';
+import { TransformType } from '../hooks/useImageTransform.ts';
+import { ImgInfo } from '../Image.tsx';
+import { Actions, PreviewProps } from './index.tsx';
+export type FooterSemanticName = 'footer' | 'actions';
+export interface FooterProps extends Actions {
+    prefixCls: string;
+    showProgress: boolean;
+    countRender?: PreviewProps['countRender'];
+    actionsRender?: PreviewProps['actionsRender'];
+    current: number;
+    count: number;
+    showSwitch: boolean;
+    icons: PreviewProps['icons'];
+    scale: number;
+    minScale: number;
+    maxScale: number;
+    image: ImgInfo;
+    transform: TransformType;
+    classNames: Record<string, string | undefined>;
+    styles: Record<string, CSSProperties | undefined>;
+}
+declare const Footer: import('vue').DefineSetupFnComponent<FooterProps, {}, {}, FooterProps & {}, import('vue').PublicProps>;
+export default Footer;

package/dist/Preview/Footer.js

@@ -0,0 +1,229 @@
+import { clsx } from "../util/dist/classnames.js";
+import "../util/dist/index.js";
+import { createVNode, defineComponent } from "vue";
+var Footer_default = /* @__PURE__ */ defineComponent((props) => {
+	const renderOperation = ({ type, disabled, onClick, icon }) => {
+		const actionCls = `${props.prefixCls}-actions-action`;
+		return createVNode("div", {
+			"key": type,
+			"class": 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 && createVNode("div", { "class": `${prefixCls}-progress` }, [countRender ? countRender(current + 1, count) : 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 = createVNode("div", {
+			"class": 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 createVNode("div", {
+			"class": 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"
+});
+export { Footer_default as default };

package/dist/Preview/PrevNext.cjs

@@ -0,0 +1,56 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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;

package/dist/Preview/PrevNext.d.ts

@@ -0,0 +1,10 @@
+import { OperationIcons } from './index';
+export interface PrevNextProps {
+    prefixCls: string;
+    onActive: (offset: number) => void;
+    current: number;
+    count: number;
+    icons: OperationIcons;
+}
+declare const PrevNext: import('vue').DefineSetupFnComponent<PrevNextProps, {}, {}, PrevNextProps & {}, import('vue').PublicProps>;
+export default PrevNext;

package/dist/Preview/PrevNext.js

@@ -0,0 +1,54 @@
+import { clsx } from "../util/dist/classnames.js";
+import "../util/dist/index.js";
+import { Fragment, createVNode, defineComponent } from "vue";
+var PrevNext_default = /* @__PURE__ */ 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 createVNode(Fragment, null, [createVNode("div", {
+			"class": clsx(switchCls, `${switchCls}-prev`, { [`${switchCls}-disabled`]: isPrevDisabled }),
+			"onClick": () => {
+				if (!isPrevDisabled) onActive(-1);
+			}
+		}, [prevIcon]), createVNode("div", {
+			"class": 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"
+});
+export { PrevNext_default as default };