@aifuxi/semi-ui-vue 0.1.0-alpha.0

package/dist/image-C-ifCh_9.js

@@ -0,0 +1,1615 @@
+import { r as e } from "./src-DNBBthjO.js";
+import { E as t, P as n, g as r, t as i, v as a } from "./foundation-Cawx37mp.js";
+import { r as o } from "./keyCode-DMNg63wX.js";
+import { o as s, t as c } from "./Tooltip-Bq7HZwnS.js";
+import { t as l } from "./Slider-w9sbxzBw.js";
+import { t as u } from "./config-context-CyynTtDb.js";
+import { t as d } from "./Divider-BQmwhGfH.js";
+import { Comment as f, Fragment as p, Teleport as m, Text as h, cloneVNode as g, computed as _, createBlock as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, createSlots as S, createStaticVNode as C, createVNode as w, defineComponent as T, getCurrentInstance as E, guardReactiveProps as D, h as O, inject as k, isVNode as A, markRaw as j, mergeProps as M, nextTick as ee, normalizeClass as N, normalizeProps as P, normalizeStyle as F, onBeforeUnmount as I, onMounted as te, onUpdated as L, openBlock as R, provide as ne, renderSlot as z, shallowReactive as B, shallowRef as re, unref as V, useAttrs as H, useSlots as U, useTemplateRef as W, watch as G, withCtx as K, withModifiers as q } from "vue";
+import { IconArrowLeft as ie, IconArrowRight as ae, IconChevronLeft as oe, IconChevronRight as J, IconClose as se, IconDownload as Y, IconMinus as ce, IconPlus as le, IconRealSizeStroked as X, IconRotate as ue, IconUploadError as de, IconWindowAdaptionStroked as fe } from "@aifuxi/semi-icons-vue";
+//#region bundled-foundation
+var pe = class extends i {
+	constructor(e) {
+		super({ ...e }), this.handleClick = (e) => {
+			let { imageID: t, preview: n } = this.getProps();
+			if (n) {
+				if (this._adapter.getIsInGroup()) {
+					let { setCurrentIndex: e, handleVisibleChange: n } = this._adapter.getContexts();
+					e(t), n(!0);
+				} else this.handlePreviewVisibleChange(!0);
+			}
+		}, this.handleLoaded = (e) => {
+			let { onLoad: t } = this.getProps();
+			t && t(e), this.setState({ loadStatus: "success" });
+		}, this.handleError = (e) => {
+			let { onError: t } = this.getProps();
+			t && t(e), this.setState({ loadStatus: "error" });
+		}, this.handlePreviewVisibleChange = (e) => {
+			let { preview: t } = this.getProps();
+			if ((0, r.default)(t)) {
+				let { onVisibleChange: n } = t;
+				n && n(e), "visible" in t || this.setState({ previewVisible: e });
+			} else this.setState({ previewVisible: e });
+		};
+	}
+}, me = class extends i {
+	constructor(...e) {
+		super(...e), this.handleVisibleChange = (e) => {
+			let { visible: t, onVisibleChange: n } = this.getProps();
+			t in this.getProps() || this.setState({ visible: e }), n && n(e);
+		}, this.handleCurrentIndexChange = (e) => {
+			let { currentIndex: t, onChange: n } = this.getProps();
+			t in this.getProps() || this.setState({ currentIndex: e }), n && n(e);
+		};
+	}
+}, he = class extends i {
+	constructor(...e) {
+		super(...e), this.changeSliderValue = (e) => {
+			let { zoom: t, step: n, min: r, max: i } = this.getProps(), a = e === "plus" ? t + n : t - n;
+			a > i ? a = i : a < r && (a = r), this.handleValueChange(a);
+		}, this.handleValueChange = (e) => {
+			let { onZoomIn: t, onZoomOut: n, zoom: r } = this.getProps();
+			e > r ? t(Number((e / 100).toFixed(2))) : n(Number((e / 100).toFixed(2)));
+		}, this.handleRatioClick = () => {
+			let { ratio: e, onAdjustRatio: t } = this.getProps();
+			t(e === "adaptation" ? "realSize" : "adaptation");
+		}, this.handleRotate = (e) => {
+			let { onRotate: t } = this.getProps();
+			t && t(e);
+		};
+	}
+}, Z = (e, t) => {
+	let n = e?.composedPath();
+	return n?.slice(0, n.length - 4).some((e) => e.className && typeof e.className == "string" ? t.some((t) => e.className.includes(t)) : !1);
+}, ge = async (e, t, n) => {
+	try {
+		let r = await fetch(e);
+		if (r.ok) {
+			let e = await r.blob(), n = URL.createObjectURL(e), i = document.createElement("a");
+			i.href = n, i.download = t, i.click(), URL.revokeObjectURL(n), i.remove();
+		} else n(e);
+	} catch {
+		n(e);
+	}
+}, _e = (e = [], t = []) => {
+	let n = [], r = e.length, i = t.length;
+	return Array(r <= i ? r : i).fill(0).forEach((r, i) => {
+		n.push(t[i]), n.push(e[i]);
+	}), r > i ? n = n.concat(e.slice(i, r)) : r < i && (n = n.concat(t.slice(r, i))), n;
+}, ve = (e, t, n, r) => {
+	let i = t - n, a = t + n, o = e.length, s = [], c = [];
+	n >= Math.floor(o / 2) ? r ? (s = e.concat(e).slice(i + o < 0 ? 0 : i + o, t + o), c = e.concat(e).slice(t + 1, a + 1 < 2 * o ? a + 1 : 2 * o)) : (s = e.slice(0, t), c = e.slice(t + 1, o)) : r ? (s = e.concat(e).slice(i + o, t + o), c = e.concat(e).slice(t + 1, a + 1)) : i >= 0 && a < o ? (s = e.slice(i, t), c = e.slice(t + 1, a + 1)) : i < 0 ? (s = e.slice(0, t), c = e.slice(t + 1, 2 * n + 1)) : (c = e.slice(t + 1, o), s = e.slice(o - 2 * n - 1, t));
+	let l = _e(s.reverse(), c);
+	return Array.from(new Set(l));
+}, ye = ["icon", "footer"], be = class extends i {
+	constructor(e) {
+		super({ ...e }), this._timer = null, this._startMouseDown = {
+			x: 0,
+			y: 0
+		}, this.handleViewVisibleChange = () => {
+			let { viewerVisible: e } = this.getStates();
+			e && (this.setState({ viewerVisible: !1 }), this.clearTimer());
+		}, this.handleMouseMove = (e) => {
+			this._persistEvent(e), this.mouseMoveHandler(e);
+		}, this.mouseMoveHandler = (0, t.default)((e) => {
+			let { viewerVisible: t } = this.getStates();
+			this._adapter.isValidTarget(e) ? (t || this.setState({ viewerVisible: !0 }), this.updateTimer()) : this.clearTimer();
+		}, 50), this.updateTimer = () => {
+			let { viewerVisibleDelay: e } = this.getProps();
+			this.clearTimer(), this._timer = setTimeout(this.handleViewVisibleChange, e);
+		}, this.clearTimer = () => {
+			this._timer &&= (clearTimeout(this._timer), null);
+		}, this.handleWheel = (e) => {
+			this.onWheel(e), s(e);
+		}, this.onWheel = (e) => {
+			let { zoomStep: t, maxZoom: n, minZoom: r } = this.getProps(), { zoom: i } = this.getStates(), o;
+			e.deltaY < 0 ? i + t <= n && (o = Number((i + t).toFixed(2))) : e.deltaY > 0 && i - t >= r && (o = Number((i - t).toFixed(2))), (0, a.default)(o) || this.handleZoomImage(o, !0, e);
+		}, this.handleMouseUp = (e) => {
+			let { maskClosable: t } = this.getProps(), n = !Z(e, ye), { clientX: r, clientY: i } = e, { x: a, y: o } = this._startMouseDown;
+			(Math.abs(r - a) > 5 || Math.abs(o - i) > 5) && (n = !1), n && t && this._adapter.notifyVisibleChange(!1);
+		}, this.handleMouseDown = (e) => {
+			let { clientX: t, clientY: n } = e;
+			this._startMouseDown = {
+				x: t,
+				y: n
+			};
+		}, this.handleKeyDown = (e) => {
+			let { closeOnEsc: t } = this.getProps();
+			if (t && e.keyCode === o.ESC) {
+				e.stopPropagation(), this._adapter.notifyVisibleChange(!1), this._adapter.notifyClose();
+				return;
+			}
+		}, this.handleSwitchImage = (e) => {
+			let t = e === "prev" ? -1 : 1, { imgSrc: n, currentIndex: r } = this.getStates(), i = n.length, a = (r + t + i) % i;
+			"currentIndex" in this.getProps() ? this._adapter.getIsInGroup() && this._adapter.getContext("setCurrentIndex")(a) : this.setState({ currentIndex: a }), this._adapter.notifyChange(a, e), this.setState({
+				direction: e,
+				rotation: 0
+			});
+		}, this.handleDownload = () => {
+			let { currentIndex: e, imgSrc: t } = this.getStates(), n = this._adapter.getSetDownloadFunc(), r = t[e];
+			ge(r, n ? n(r) : r.slice(r.lastIndexOf("/") + 1).split("?")[0], this._adapter.notifyDownloadError), this._adapter.notifyDownload(r, e);
+		}, this.handlePreviewClose = (e) => {
+			this._adapter.notifyVisibleChange(!1), this._adapter.notifyClose(), s(e);
+		}, this.handleAdjustRatio = (e) => {
+			this.setState({ ratio: e }), this._adapter.notifyRatioChange(e);
+		}, this.handleRotateImage = (e) => {
+			let { rotation: t } = this.getStates(), n = t + (e === "left" ? -90 : 90);
+			this.setState({ rotation: n }), this._adapter.notifyRotateChange(n);
+		}, this.handleZoomImage = (e, t = !0, n) => {
+			let { zoom: r } = this.getStates(), i = this._clampZoom(e);
+			r !== i && (t && this._adapter.notifyZoom(i, i > r), this._adapter.changeImageZoom(i, n), this.setState({ zoom: i }));
+		}, this.preloadGapImage = () => {
+			let { preLoad: e, preLoadGap: t, infinite: n, currentIndex: r } = this.getProps(), { imgSrc: i } = this.getStates();
+			if (!e || typeof t != "number" || t < 1) return;
+			let a = ve(i, r, t, n);
+			if (a.length === 0) return;
+			let o = new Image(), s = 0;
+			function c(e) {
+				s++, s < a.length && (o.src = a[s]);
+			}
+			o.onload = (e) => {
+				this.setLoadSuccessStatus(o.src), c(e);
+			}, o.onerror = c, o.src = a[0];
+		}, this.preloadSingleImage = () => {
+			let { preLoad: e, preLoadGap: t, infinite: n } = this.getProps(), { imgSrc: r, currentIndex: i, direction: a, imgLoadStatus: o } = this.getStates();
+			if (!e || typeof t != "number" || t < 1) return;
+			let s = i + (a === "prev" ? -1 : 1) * t;
+			if (s < 0 || s >= r.length) {
+				if (n) s = (s + r.length) % r.length;
+				else return;
+			}
+			if (!o[s]) {
+				let e = new Image();
+				e.onload = (e) => {
+					this.setLoadSuccessStatus(r[s]);
+				}, e.src = r[s];
+			}
+		}, this.setLoadSuccessStatus = (e) => {
+			let { imgLoadStatus: t } = this.getStates(), n = { ...t };
+			n[e] = !0, this.setState({ imgLoadStatus: n });
+		}, this.onImageLoad = (e) => {
+			let { preloadAfterVisibleChange: t } = this.getStates();
+			this.setLoadSuccessStatus(e), t ? (this.preloadGapImage(), this.setState({ preloadAfterVisibleChange: !1 })) : this.preloadSingleImage();
+		}, this._clampZoom = (e) => {
+			let { maxZoom: t, minZoom: n } = this.getProps(), r = typeof t == "number" ? t : 5, i = typeof n == "number" ? n : .1;
+			return typeof e != "number" || !Number.isFinite(e) ? i : Math.min(r, Math.max(i, e));
+		};
+	}
+	beforeShow() {
+		this._adapter.registerKeyDownListener(), this._adapter.disabledBodyScroll(), this.updateTimer();
+	}
+	afterHide() {
+		this._adapter.unregisterKeyDownListener(), this._adapter.enabledBodyScroll(), this.clearTimer();
+	}
+}, xe = class extends i {
+	constructor(e) {
+		super({ ...e }), this.startMouseClientPosition = {
+			x: 0,
+			y: 0
+		}, this.originImageWidth = null, this.originImageHeight = null, this.containerWidth = 0, this.containerHeight = 0, this._initialZoomApplied = !1, this._initialZoomAppliedSrc = void 0, this._syncInitialZoomFlagWithSrc = () => {
+			let e = this.getProp("src");
+			e !== this._initialZoomAppliedSrc && (this._initialZoomAppliedSrc = e, this._initialZoomApplied = !1);
+		}, this._clampZoom = (e) => {
+			let { maxZoom: t, minZoom: n } = this.getProps(), r = typeof t == "number" ? t : 5, i = typeof n == "number" ? n : .1;
+			return typeof e != "number" || !Number.isFinite(e) ? i : Math.min(r, Math.max(i, e));
+		}, this._isImageVertical = () => this.getProp("rotation") % 180 != 0, this._getContainerBoundingRectSize = () => {
+			let e = this._adapter.getContainer();
+			e && (this.containerWidth = e.clientWidth, this.containerHeight = e.clientHeight);
+		}, this._getAdaptationZoom = () => {
+			let e = 1;
+			if (this._adapter.getContainer() && this.originImageWidth && this.originImageHeight) {
+				let { rotation: t } = this.getProps(), { width: n, height: r } = this.calcBoundingRectSize(this.originImageWidth, this.originImageHeight, t), i = this.containerWidth - 80, a = this.containerHeight - 80;
+				e = Number(Math.min(i / n, a / r).toFixed(2));
+			}
+			return e;
+		}, this._getInitialZoom = () => {
+			let { ratio: e, initialZoom: t } = this.getProps(), n = 1;
+			return this._syncInitialZoomFlagWithSrc(), !this._initialZoomApplied && typeof t == "number" && Number.isFinite(t) && t > 0 ? (this._initialZoomApplied = !0, this._clampZoom(t)) : (e === "adaptation" && (n = this._getAdaptationZoom()), this._clampZoom(n));
+		}, this.setLoading = (e) => {
+			this._adapter.setLoading(e);
+		}, this.handleWindowResize = () => {
+			this._getContainerBoundingRectSize(), this.initializeImage();
+		}, this.handleLoad = (e) => {
+			if (e.target) {
+				let { naturalWidth: t, naturalHeight: n } = e.target;
+				this.originImageHeight = n, this.originImageWidth = t, this._syncInitialZoomFlagWithSrc(), this.setState({ loading: !1 }), this.initializeImage(!1);
+			}
+			let { src: t, onLoad: n } = this.getProps();
+			n && n(t);
+		}, this.handleError = (e) => {
+			let { onError: t, src: n } = this.getProps();
+			this.setState({ loading: !1 }), t && t(n);
+		}, this.handleRatioChange = () => {
+			this.initializeImage();
+		}, this.initializeImageZoom = (e = !0) => {
+			let { currZoom: t } = this.getStates(), { onZoom: n } = this.getProps(), r = this._getInitialZoom();
+			t === r ? this.changeZoom(r) : n(r, e);
+		}, this.initializeTranslate = () => {
+			this.setState({ translate: {
+				x: 0,
+				y: 0
+			} });
+		}, this.initializeImage = (e = !0) => {
+			this.initializeImageZoom(e), this.initializeTranslate();
+		}, this.handleRightClickImage = (e) => {
+			let { disableDownload: t } = this.getProps();
+			return !t || (e.preventDefault(), e.stopPropagation(), !1);
+		}, this.getCanDragDirection = (e, t) => {
+			let n = e > this.containerWidth;
+			return {
+				canDragVertical: t > this.containerHeight,
+				canDragHorizontal: n
+			};
+		}, this.changeZoom = (e, t) => {
+			let n = this._adapter.getImage(), { currZoom: r, translate: i, width: a, height: o } = this.getStates(), { rotation: s } = this.getProps(), c = e / (r || 1), l = Math.floor(this.originImageWidth * e), u = Math.floor(this.originImageHeight * e), d = Math.floor(i.x * c), f = Math.floor(i.y * c), p = this.calcBoundingRectSize(a, o, s), m = {
+				width: p.width * c,
+				height: p.height * c
+			};
+			if (t && n && t.target === n) {
+				let n = s % 360;
+				switch (n < 0 && (n = 360 + n), n) {
+					case 0:
+						d = (t.offsetX - .5 * a) * (1 - e / r) + i.x, f = (t.offsetY - .5 * o) * (1 - e / r) + i.y;
+						break;
+					case 90:
+						d = (.5 * o - t.offsetY) * (1 - e / r) + i.x, f = (t.offsetX - .5 * a) * (1 - e / r) + i.y;
+						break;
+					case 180:
+						d = (.5 * a - t.offsetX) * (1 - e / r) + i.x, f = (.5 * o - t.offsetY) * (1 - e / r) + i.y;
+						break;
+					case 270: d = (t.offsetY - .5 * o) * (1 - e / r) + i.x, f = (.5 * a - t.offsetX) * (1 - e / r) + i.y;
+				}
+			}
+			let h = this.getSafeTranslate(m.width, m.height, d, f);
+			if (this.setState({
+				translate: h,
+				width: l,
+				height: u,
+				currZoom: e
+			}), n) {
+				let { canDragVertical: e, canDragHorizontal: t } = this.getCanDragDirection(m.width, m.height), n = e || t;
+				this._adapter.setImageCursor(n);
+			}
+		}, this.getExtremeTranslate = (e, t) => ({
+			x: (e - this.containerWidth) / 2,
+			y: (t - this.containerHeight) / 2
+		}), this.getSafeTranslate = (e, t, n, r) => {
+			let { x: i, y: a } = this.getExtremeTranslate(e, t), { canDragVertical: o, canDragHorizontal: s } = this.getCanDragDirection(e, t), c = 0, l = 0;
+			return s && (c = n > 0 ? Math.min(n, i) : Math.max(n, -i)), o && (l = r > 0 ? Math.min(r, a) : Math.max(r, -a)), {
+				x: c,
+				y: l
+			};
+		}, this.handleImageMove = (e) => {
+			e.buttons === 1 && this.moveImage(e);
+		}, this.moveImage = (e) => {
+			let { clientX: t, clientY: n } = e, { width: r, height: i, translate: a } = this.getStates(), { rotation: o } = this.getProps(), s = this.calcBoundingRectSize(r, i, o), { canDragVertical: c, canDragHorizontal: l } = this.getCanDragDirection(s.width, s.height);
+			if (c || l) {
+				let e = l ? a.x + t - this.startMouseClientPosition.x : a.x, r = c ? a.y + n - this.startMouseClientPosition.y : a.y, i = this.getSafeTranslate(s.width, s.height, e, r);
+				this.setState({ translate: i }), this.startMouseClientPosition = {
+					x: t,
+					y: n
+				};
+			}
+		}, this.handleImageMouseDown = (e) => {
+			this.startMouseClientPosition = {
+				x: e.clientX,
+				y: e.clientY
+			};
+		}, this.calcBoundingRectMouseOffset = (e) => {
+			let { width: t, height: n, offset: r, rotation: i = 0 } = e, a = i % 360;
+			a = a >= 0 ? a : 360 + a;
+			let o = 0, s = 0;
+			switch (a) {
+				case 0:
+					o = r.x, s = r.y;
+					break;
+				case 90:
+					o = n - r.y, s = r.x;
+					break;
+				case 180:
+					o = t - r.x, s = n - r.y;
+					break;
+				case 270: o = r.y, s = t - r.x;
+			}
+			return {
+				x: o,
+				y: s
+			};
+		};
+	}
+	init() {
+		this._getContainerBoundingRectSize();
+	}
+	calcBoundingRectSize(e = 0, t = 0, n = 0) {
+		let r = n * Math.PI / 180, i = Math.abs(Math.sin(r)), a = Math.abs(Math.cos(r));
+		return {
+			width: e * a + t * i,
+			height: e * i + t * a
+		};
+	}
+}, Q = T({
+	name: "ImageNodeRenderer",
+	props: { content: {
+		type: null,
+		default: void 0
+	} },
+	setup: (e) => () => e.content
+}), Se = /* @__PURE__ */ e(n(), 1), Ce = /* @__PURE__ */ T({
+	__name: "ImagePreviewFooter",
+	props: {
+		adaptiveTip: {},
+		className: {},
+		curPage: {},
+		disableDownload: { type: Boolean },
+		disabledNext: { type: Boolean },
+		disabledPrev: { type: Boolean },
+		downloadTip: {},
+		locale: {},
+		max: {},
+		min: {},
+		nextTip: {},
+		onAdjustRatio: { type: Function },
+		onDownload: { type: Function },
+		onNext: { type: Function },
+		onPrev: { type: Function },
+		onRotate: { type: Function },
+		onZoom: { type: Function },
+		originTip: {},
+		prevTip: {},
+		ratio: {},
+		renderPreviewMenu: { type: Function },
+		rotateTip: {},
+		showTooltip: { type: Boolean },
+		step: {},
+		totalNum: {},
+		zIndex: {},
+		zoom: {},
+		zoomInTip: {},
+		zoomOutTip: {}
+	},
+	setup(e, { expose: t }) {
+		let n = e, r = U(), i = W("root"), a = /* @__PURE__ */ new Map(), o = () => ({
+			...n,
+			onAdjustRatio: n.onAdjustRatio,
+			onRotate: n.onRotate,
+			onZoomIn: n.onZoom,
+			onZoomOut: n.onZoom
+		}), s = j(new he({
+			getContext: () => void 0,
+			getContexts: () => ({}),
+			getProp: (e) => o()[e],
+			getProps: o,
+			getState: () => void 0,
+			getStates: () => ({}),
+			setState: (e, t) => t?.(),
+			getCache: (e) => a.get(e),
+			getCaches: () => a,
+			setCache: (e, t) => a.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0
+		})), u = (0, Se.default)((e) => {
+			s.handleValueChange(e);
+		}, 50);
+		function f(e, t) {
+			let r = O(e, {
+				class: [
+					t.className,
+					t.disabled ? "semi-image-preview-footer-disabled" : void 0,
+					t.gap && !n.showTooltip ? "semi-image-preview-footer-gap" : void 0
+				],
+				key: t.key,
+				onClick: t.disabled ? void 0 : t.onClick,
+				size: "large"
+			});
+			return n.showTooltip ? O(c, {
+				content: t.tip,
+				key: `tooltip-${t.key}`,
+				zIndex: n.zIndex + 1
+			}, { default: () => O("span", { class: ["semi-image-tooltip-children-wrapper", t.gap ? "semi-image-preview-footer-gap" : void 0] }, [r]) }) : r;
+		}
+		let p = _(() => {
+			let e = n.zoom === n.max, t = n.zoom === n.min;
+			return [
+				f(oe, {
+					disabled: n.disabledPrev,
+					key: "chevron-left",
+					onClick: n.onPrev,
+					tip: n.prevTip ?? n.locale.prevTip
+				}),
+				O("div", {
+					class: "semi-image-preview-footer-page",
+					key: "info"
+				}, [`${n.curPage}/${n.totalNum}`]),
+				f(J, {
+					disabled: n.disabledNext,
+					key: "chevron-right",
+					onClick: n.onNext,
+					tip: n.nextTip ?? n.locale.nextTip
+				}),
+				f(ce, {
+					disabled: t,
+					key: "minus",
+					onClick: () => s.changeSliderValue("minus"),
+					tip: n.zoomOutTip ?? n.locale.zoomOutTip
+				}),
+				O(l, {
+					key: "slider",
+					max: n.max,
+					min: n.min,
+					onChange: (e) => {
+						typeof e == "number" && u(e);
+					},
+					step: n.step,
+					tipFormatter: (e) => `${String(e)}%`,
+					tooltipVisible: n.showTooltip ? void 0 : !1,
+					value: n.zoom
+				}),
+				f(le, {
+					disabled: e,
+					key: "plus",
+					onClick: () => s.changeSliderValue("plus"),
+					tip: n.zoomInTip ?? n.locale.zoomInTip
+				}),
+				f(n.ratio === "adaptation" ? X : fe, {
+					gap: !0,
+					key: "ratio",
+					onClick: () => s.handleRatioClick(),
+					tip: n.ratio === "adaptation" ? n.originTip ?? n.locale.originTip : n.adaptiveTip ?? n.locale.adaptiveTip
+				}),
+				f(ue, {
+					key: "rotate",
+					onClick: () => s.handleRotate("left"),
+					tip: n.rotateTip ?? n.locale.rotateTip
+				}),
+				f(Y, {
+					disabled: n.disableDownload,
+					gap: !0,
+					key: "download",
+					onClick: n.onDownload,
+					tip: n.downloadTip ?? n.locale.downloadTip
+				})
+			];
+		}), m = _(() => {
+			let e = [...p.value];
+			return e.splice(3, 0, O(d, {
+				key: "divider-first",
+				layout: "vertical"
+			})), e.splice(8, 0, O(d, {
+				key: "divider-second",
+				layout: "vertical"
+			})), e;
+		}), h = _(() => ({
+			curPage: n.curPage,
+			disableDownload: n.disableDownload,
+			disabledNext: n.disabledNext,
+			disabledPrev: n.disabledPrev,
+			disabledZoomIn: n.zoom === n.max,
+			disabledZoomOut: n.zoom === n.min,
+			max: n.max,
+			menuItems: p.value,
+			min: n.min,
+			onDownload: n.onDownload,
+			onNext: n.onNext,
+			onPrev: n.onPrev,
+			onRatioClick: () => s.handleRatioClick(),
+			onRotateLeft: () => s.handleRotate("left"),
+			onRotateRight: () => s.handleRotate("right"),
+			onZoomIn: () => s.changeSliderValue("plus"),
+			onZoomOut: () => s.changeSliderValue("minus"),
+			ratio: n.ratio,
+			step: n.step,
+			totalNum: n.totalNum,
+			zoom: n.zoom
+		})), g = _(() => r.previewMenu?.(h.value) ?? n.renderPreviewMenu?.(h.value));
+		return I(() => {
+			u.cancel(), s.destroy();
+		}), t({ element: i }), (e, t) => (R(), b("section", {
+			ref_key: "root",
+			ref: i,
+			class: N([
+				"semi-image-preview-footer",
+				"semi-image-preview-footer-wrapper",
+				n.className,
+				g.value ? void 0 : "semi-image-preview-footer-content"
+			])
+		}, [w(V(Q), { content: g.value || m.value }, null, 8, ["content"])], 2));
+	}
+}), we = { class: "semi-image-preview-header-title" }, Te = /* @__PURE__ */ T({
+	__name: "ImagePreviewHeader",
+	props: {
+		className: {},
+		closable: { type: Boolean },
+		renderCloseIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		renderHeader: { type: Function },
+		title: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] }
+	},
+	emits: ["close"],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, a = U(), o = W("root"), s = _(() => a.header?.({ title: r.title }) ?? r.renderHeader?.(r.title) ?? r.title), c = _(() => a.closeIcon?.() ?? (typeof r.renderCloseIcon == "function" ? r.renderCloseIcon() : r.renderCloseIcon));
+		return t({ element: o }), (e, t) => (R(), b("section", {
+			ref_key: "root",
+			ref: o,
+			class: N(["semi-image-preview-header", r.className])
+		}, [x("section", we, [w(V(Q), { content: s.value }, null, 8, ["content"])]), r.closable ? (R(), b("section", {
+			key: 0,
+			class: "semi-image-preview-header-close",
+			onMouseup: t[0] ||= (e) => i("close", e)
+		}, [c.value ? (R(), v(V(Q), {
+			key: 0,
+			content: c.value
+		}, null, 8, ["content"])) : (R(), v(V(se), { key: 1 }))], 32)) : y("", !0)], 2));
+	}
+}), Ee = ["crossorigin", "src"], De = {
+	key: 0,
+	class: "semi-spin semi-spin-large semi-image-preview-image-spin"
+}, Oe = /* @__PURE__ */ T({
+	__name: "ImagePreviewImage",
+	props: {
+		crossOrigin: {},
+		disableDownload: { type: Boolean },
+		initialZoom: {},
+		maxZoom: {},
+		minZoom: {},
+		ratio: {},
+		rotation: {},
+		src: {},
+		zoom: {}
+	},
+	emits: [
+		"error",
+		"load",
+		"ratio",
+		"zoom"
+	],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, a = W("container"), o = W("image"), s = B({
+			currZoom: r.zoom,
+			height: 0,
+			loading: !0,
+			translate: {
+				x: 0,
+				y: 0
+			},
+			width: 0
+		}), c = /* @__PURE__ */ new Map();
+		function l() {
+			return {
+				...r,
+				onError: (e) => i("error", e),
+				onLoad: (e) => i("load", e),
+				onZoom: (e, t) => i("zoom", e, t),
+				setRatio: (e) => i("ratio", e)
+			};
+		}
+		let u = j(new xe({
+			getContext: () => void 0,
+			getContexts: () => ({}),
+			getProp: (e) => l()[e],
+			getProps: l,
+			getState: (e) => s[e],
+			getStates: () => s,
+			setState: (e, t) => {
+				Object.assign(s, e), t?.();
+			},
+			getCache: (e) => c.get(e),
+			getCaches: () => c,
+			setCache: (e, t) => c.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0,
+			getContainer: () => a.value,
+			getImage: () => o.value,
+			setLoading: (e) => {
+				s.loading = e;
+			},
+			setImageCursor: (e) => {
+				o.value && (o.value.style.cursor = e ? "grab" : "default");
+			}
+		})), d = _(() => ({
+			height: `${s.height}px`,
+			position: "absolute",
+			transform: `translate(${s.translate.x}px, ${s.translate.y}px) rotate(${r.rotation}deg)`,
+			visibility: s.loading ? "hidden" : "visible",
+			width: `${s.width}px`
+		}));
+		function f(e) {
+			u.handleLoad(e);
+		}
+		return G(() => r.src, (e, t) => {
+			e && e !== t && u.setLoading(!0);
+		}), G(() => r.ratio, (e, t) => {
+			e !== t && u.handleRatioChange();
+		}), G(() => r.rotation, (e, t) => {
+			e !== t && u.handleWindowResize();
+		}), te(() => {
+			u.init(), window.addEventListener("resize", u.handleWindowResize);
+		}), I(() => {
+			window.removeEventListener("resize", u.handleWindowResize), u.destroy();
+		}), t({ changeZoom: u.changeZoom.bind(u) }), (e, t) => (R(), b("div", {
+			ref_key: "container",
+			ref: a,
+			class: "semi-image-preview-image"
+		}, [x("img", {
+			ref_key: "image",
+			ref: o,
+			alt: "previewImag",
+			class: "semi-image-preview-image-img",
+			crossorigin: r.crossOrigin,
+			src: r.src,
+			style: F(d.value),
+			onContextmenu: t[0] ||= (...e) => V(u).handleRightClickImage && V(u).handleRightClickImage(...e),
+			onDragstart: t[1] ||= q(() => {}, ["prevent"]),
+			onError: t[2] ||= (...e) => V(u).handleError && V(u).handleError(...e),
+			onLoad: f,
+			onMousedown: t[3] ||= (...e) => V(u).handleImageMouseDown && V(u).handleImageMouseDown(...e),
+			onMousemove: t[4] ||= (...e) => V(u).handleImageMove && V(u).handleImageMove(...e)
+		}, null, 44, Ee), V(s).loading ? (R(), b("div", De, [...t[5] ||= [C("<div class=\"semi-spin-wrapper\"><svg aria-hidden=\"true\" data-icon=\"spin\" height=\"48\" version=\"1.1\" viewBox=\"0 0 36 36\" width=\"48\" xmlns=\"http://www.w3.org/2000/svg\"><defs><linearGradient id=\"linearGradient-semi-image-preview-spin\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"currentColor\" stop-opacity=\"0\"></stop><stop offset=\"39.9430698%\" stop-color=\"currentColor\" stop-opacity=\"0.50\"></stop><stop offset=\"100%\" stop-color=\"currentColor\"></stop></linearGradient></defs><g fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\"><rect fill=\"none\" fill-opacity=\"0.01\" height=\"36\" width=\"36\" x=\"0\" y=\"0\"></rect><path d=\"M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951\" stroke=\"url(#linearGradient-semi-image-preview-spin)\" stroke-linecap=\"round\" stroke-width=\"4\"></path></g></svg></div>", 1), x("div", {
+			class: "semi-spin-children",
+			"x-semi-prop": "children"
+		}, null, -1)]])) : y("", !0)], 512));
+	}
+}), $ = Symbol("semi-image-preview-context"), ke = /* @__PURE__ */ T({
+	name: "ImagePreviewInner",
+	inheritAttrs: !1,
+	__name: "ImagePreviewInner",
+	props: {
+		adaptiveTip: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		closable: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: !0
+		},
+		crossOrigin: {},
+		currentIndex: {},
+		defaultCurrentIndex: {},
+		defaultVisible: { type: Boolean },
+		disableDownload: {
+			type: Boolean,
+			default: !1
+		},
+		downloadTip: {},
+		getPopupContainer: {},
+		infinite: {
+			type: Boolean,
+			default: !1
+		},
+		initialZoom: {},
+		lazyLoad: {
+			type: Boolean,
+			default: !1
+		},
+		lazyLoadMargin: {},
+		maskClosable: {
+			type: Boolean,
+			default: !0
+		},
+		maxZoom: { default: 5 },
+		minZoom: { default: .1 },
+		nextTip: {},
+		originTip: {},
+		preLoad: {
+			type: Boolean,
+			default: !0
+		},
+		preLoadGap: { default: 2 },
+		prevTip: {},
+		previewCls: {},
+		previewStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		previewTitle: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		renderCloseIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		renderHeader: {},
+		renderLeftIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		renderPreviewMenu: {},
+		renderRightIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		rotateTip: {},
+		setDownloadName: {},
+		showTooltip: {
+			type: Boolean,
+			default: !1
+		},
+		src: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		viewerVisibleDelay: { default: 1e4 },
+		visible: { type: Boolean },
+		zIndex: { default: 1070 },
+		zoomInTip: {},
+		zoomOutTip: {},
+		zoomStep: { default: .1 }
+	},
+	emits: [
+		"change",
+		"close",
+		"download",
+		"downloadError",
+		"next",
+		"prev",
+		"ratioChange",
+		"rotateLeft",
+		"update:currentIndex",
+		"update:visible",
+		"visibleChange",
+		"zoomIn",
+		"zoomOut"
+	],
+	setup(e, { emit: t }) {
+		let n = Object.freeze({
+			adaptiveTip: "适应页面",
+			downloadTip: "下载",
+			loadError: "加载失败",
+			loading: "加载中",
+			nextTip: "下一张",
+			originTip: "原始尺寸",
+			prevTip: "上一张",
+			preview: "预览",
+			rotateTip: "旋转",
+			zoomInTip: "放大",
+			zoomOutTip: "缩小"
+		}), r = Object.freeze({
+			adaptiveTip: "Adapt to the page",
+			downloadTip: "Download",
+			loadError: "Failed to load",
+			loading: "Loading",
+			nextTip: "Next",
+			originTip: "Original size",
+			prevTip: "Previous",
+			preview: "Preview",
+			rotateTip: "Rotate",
+			zoomInTip: "Zoom in",
+			zoomOutTip: "Zoom out"
+		}), i = e, a = t, o = U(), s = k($, void 0), c = k(u, void 0), l = _(() => c ? c.value : {
+			direction: "ltr",
+			locale: { code: "zh-CN" }
+		}), d = _(() => ({
+			...l.value.locale.code === "en-US" ? r : n,
+			...l.value.locale.Image ?? {}
+		})), f = B({
+			currentIndex: i.currentIndex ?? 0,
+			direction: "",
+			imgLoadStatus: {},
+			imgSrc: [],
+			preloadAfterVisibleChange: !0,
+			ratio: "adaptation",
+			rotation: 0,
+			viewerVisible: !0,
+			visible: i.visible ?? !1,
+			zoom: .1
+		}), p = /* @__PURE__ */ new Map(), h = re(null), g = W("imageWrap"), C = W("header"), T = W("footer"), E = W("leftIcon"), O = W("rightIcon"), A = W("previewImage"), M = "", L = "", ne = 0, H = !1;
+		function q() {
+			let e = { ...i };
+			return i.currentIndex === void 0 && delete e.currentIndex, e;
+		}
+		function oe(e) {
+			return e?.element ?? null;
+		}
+		let J = j(new be({
+			getContext: (e) => e === "setCurrentIndex" ? s?.setCurrentIndex : void 0,
+			getContexts: () => ({ setCurrentIndex: s?.setCurrentIndex }),
+			getProp: (e) => q()[e],
+			getProps: q,
+			getState: (e) => f[e],
+			getStates: () => f,
+			setState: (e, t) => {
+				Object.assign(f, e), t?.();
+			},
+			getCache: (e) => p.get(e),
+			getCaches: () => p,
+			setCache: (e, t) => p.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0,
+			getIsInGroup: () => !!s?.isGroup,
+			disabledBodyScroll: () => {
+				if (typeof document > "u") return;
+				let e = i.getPopupContainer ?? l.value.getPopupContainer;
+				M = document.body.style.overflow || "", !e && M !== "hidden" && (document.body.style.overflow = "hidden", document.body.style.width = `calc(${L || "100%"} - ${ne}px)`);
+			},
+			enabledBodyScroll: () => {
+				typeof document > "u" || !(i.getPopupContainer ?? l.value.getPopupContainer) && M !== "hidden" && (document.body.style.overflow = M, document.body.style.width = L);
+			},
+			notifyChange: (e, t) => {
+				a("change", e), a("update:currentIndex", e), a(t === "prev" ? "prev" : "next", e);
+			},
+			notifyZoom: (e, t) => {
+				a(t ? "zoomIn" : "zoomOut", e);
+			},
+			notifyClose: () => a("close"),
+			notifyVisibleChange: (e) => {
+				a("visibleChange", e), a("update:visible", e);
+			},
+			notifyRatioChange: (e) => a("ratioChange", e),
+			notifyRotateChange: (e) => a("rotateLeft", e),
+			notifyDownload: (e, t) => a("download", e, t),
+			notifyDownloadError: (e) => a("downloadError", e),
+			registerKeyDownListener: () => window.addEventListener("keydown", J.handleKeyDown),
+			unregisterKeyDownListener: () => window.removeEventListener("keydown", J.handleKeyDown),
+			getSetDownloadFunc: () => s?.setDownloadName.value ?? i.setDownloadName,
+			isValidTarget: (e) => {
+				let t = e.target;
+				return t instanceof Node ? ![
+					oe(C.value),
+					oe(T.value),
+					E.value,
+					O.value
+				].some((e) => e?.contains(t)) : !0;
+			},
+			changeImageZoom: (e, t) => A.value?.changeZoom(e, t)
+		})), se = _(() => f.visible ? Array.isArray(i.src) ? i.src : i.src ? [i.src] : [] : []), Y = _(() => f.imgSrc.length), ce = _(() => Y.value !== 1 && (i.infinite || f.currentIndex !== 0)), le = _(() => Y.value !== 1 && (i.infinite || f.currentIndex !== Y.value - 1)), X = _(() => f.viewerVisible ? void 0 : "semi-image-preview-hide"), ue = _(() => [
+			"semi-image-preview",
+			f.visible ? void 0 : "semi-image-hide",
+			i.getPopupContainer || l.value.getPopupContainer ? "semi-image-preview-popup" : void 0,
+			i.class,
+			i.className
+		]), de = _(() => ({
+			position: i.getPopupContainer || l.value.getPopupContainer ? "static" : void 0,
+			zIndex: i.zIndex
+		})), fe = _(() => s && typeof f.currentIndex == "number" ? s.titles.value[f.currentIndex] : i.previewTitle), pe = _(() => o.leftIcon?.({ index: f.currentIndex }) ?? (typeof i.renderLeftIcon == "function" ? i.renderLeftIcon(f.currentIndex) : i.renderLeftIcon)), me = _(() => o.rightIcon?.({ index: f.currentIndex }) ?? (typeof i.renderRightIcon == "function" ? i.renderRightIcon(f.currentIndex) : i.renderRightIcon));
+		function he() {
+			let e = i.getPopupContainer ?? l.value.getPopupContainer;
+			h.value = e?.() ?? document.body;
+		}
+		function Z(e) {
+			J.handleWheel(e);
+		}
+		return G(se, (e) => {
+			f.imgSrc = e;
+		}, { immediate: !0 }), G(() => i.currentIndex, (e) => {
+			e !== void 0 && e !== f.currentIndex && (f.currentIndex = e, f.ratio = "adaptation");
+		}), G(() => i.visible, async (e, t) => {
+			f.visible = !!e, e && (f.preloadAfterVisibleChange = !0, f.viewerVisible = !0, f.rotation = 0, f.ratio = "adaptation", typeof document < "u" && he()), H && (await ee(), !t && e && J.beforeShow(), t && !e && J.afterHide());
+		}), G(g, (e, t) => {
+			t?.removeEventListener("wheel", Z), e?.addEventListener("wheel", Z, { passive: !1 });
+		}), te(() => {
+			H = !0;
+			let e = document.documentElement.clientWidth;
+			ne = Math.max(0, window.innerWidth - e), L = document.body.style.width, i.visible && (he(), J.beforeShow());
+		}), I(() => {
+			g.value?.removeEventListener("wheel", Z), f.visible && J.afterHide(), J.clearTimer(), J.destroy();
+		}), (e, t) => V(f).visible && h.value ? (R(), v(m, {
+			key: 0,
+			to: h.value
+		}, [x("div", {
+			class: N(["semi-portal", l.value.direction === "rtl" ? "semi-portal-rtl" : void 0]),
+			style: F(de.value)
+		}, [x("div", {
+			ref_key: "imageWrap",
+			ref: g,
+			class: N(ue.value),
+			style: F(i.previewStyle ?? i.style),
+			onMousedown: t[2] ||= (...e) => V(J).handleMouseDown && V(J).handleMouseDown(...e),
+			onMousemove: t[3] ||= (...e) => V(J).handleMouseMove && V(J).handleMouseMove(...e),
+			onMouseup: t[4] ||= (...e) => V(J).handleMouseUp && V(J).handleMouseUp(...e)
+		}, [
+			w(Te, {
+				ref_key: "header",
+				ref: C,
+				"class-name": X.value,
+				closable: i.closable,
+				"render-close-icon": i.renderCloseIcon,
+				"render-header": i.renderHeader,
+				title: fe.value,
+				onClose: V(J).handlePreviewClose
+			}, S({ _: 2 }, [V(o).header ? {
+				name: "header",
+				fn: K((t) => [z(e.$slots, "header", P(D(t)))]),
+				key: "0"
+			} : void 0, V(o).closeIcon ? {
+				name: "closeIcon",
+				fn: K(() => [z(e.$slots, "closeIcon")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"class-name",
+				"closable",
+				"render-close-icon",
+				"render-header",
+				"title",
+				"onClose"
+			]),
+			w(Oe, {
+				ref_key: "previewImage",
+				ref: A,
+				"cross-origin": i.crossOrigin,
+				"disable-download": i.disableDownload,
+				"initial-zoom": i.initialZoom,
+				"max-zoom": i.maxZoom,
+				"min-zoom": i.minZoom,
+				ratio: V(f).ratio,
+				rotation: V(f).rotation,
+				src: V(f).imgSrc[V(f).currentIndex],
+				zoom: V(f).zoom,
+				onError: V(J).preloadSingleImage,
+				onLoad: V(J).onImageLoad,
+				onRatio: V(J).handleAdjustRatio,
+				onZoom: V(J).handleZoomImage
+			}, null, 8, [
+				"cross-origin",
+				"disable-download",
+				"initial-zoom",
+				"max-zoom",
+				"min-zoom",
+				"ratio",
+				"rotation",
+				"src",
+				"zoom",
+				"onError",
+				"onLoad",
+				"onRatio",
+				"onZoom"
+			]),
+			ce.value ? (R(), b("div", {
+				key: 0,
+				ref_key: "leftIcon",
+				ref: E,
+				class: N([
+					"semi-image-preview-icon",
+					"semi-image-preview-prev",
+					X.value
+				]),
+				onClick: t[0] ||= (e) => V(J).handleSwitchImage("prev")
+			}, [pe.value ? (R(), v(V(Q), {
+				key: 0,
+				content: pe.value
+			}, null, 8, ["content"])) : (R(), v(V(ie), {
+				key: 1,
+				size: "large"
+			}))], 2)) : y("", !0),
+			le.value ? (R(), b("div", {
+				key: 1,
+				ref_key: "rightIcon",
+				ref: O,
+				class: N([
+					"semi-image-preview-icon",
+					"semi-image-preview-next",
+					X.value
+				]),
+				onClick: t[1] ||= (e) => V(J).handleSwitchImage("next")
+			}, [me.value ? (R(), v(V(Q), {
+				key: 0,
+				content: me.value
+			}, null, 8, ["content"])) : (R(), v(V(ae), {
+				key: 1,
+				size: "large"
+			}))], 2)) : y("", !0),
+			w(Ce, {
+				ref_key: "footer",
+				ref: T,
+				"adaptive-tip": i.adaptiveTip,
+				"class-name": X.value,
+				"cur-page": V(f).currentIndex + 1,
+				"disable-download": i.disableDownload,
+				"disabled-next": !le.value,
+				"disabled-prev": !ce.value,
+				"download-tip": i.downloadTip,
+				locale: d.value,
+				max: i.maxZoom * 100,
+				min: i.minZoom * 100,
+				"next-tip": i.nextTip,
+				"on-adjust-ratio": V(J).handleAdjustRatio,
+				"on-download": V(J).handleDownload,
+				"on-next": () => V(J).handleSwitchImage("next"),
+				"on-prev": () => V(J).handleSwitchImage("prev"),
+				"on-rotate": V(J).handleRotateImage,
+				"on-zoom": V(J).handleZoomImage,
+				"origin-tip": i.originTip,
+				"prev-tip": i.prevTip,
+				ratio: V(f).ratio,
+				"render-preview-menu": i.renderPreviewMenu,
+				"rotate-tip": i.rotateTip,
+				"show-tooltip": i.showTooltip,
+				step: i.zoomStep * 100,
+				"total-num": Y.value,
+				"z-index": i.zIndex,
+				zoom: V(f).zoom * 100,
+				"zoom-in-tip": i.zoomInTip,
+				"zoom-out-tip": i.zoomOutTip
+			}, S({ _: 2 }, [V(o).previewMenu ? {
+				name: "previewMenu",
+				fn: K((t) => [z(e.$slots, "previewMenu", P(D(t)))]),
+				key: "0"
+			} : void 0]), 1032, /* @__PURE__ */ "adaptive-tip.class-name.cur-page.disable-download.disabled-next.disabled-prev.download-tip.locale.max.min.next-tip.on-adjust-ratio.on-download.on-next.on-prev.on-rotate.on-zoom.origin-tip.prev-tip.ratio.render-preview-menu.rotate-tip.show-tooltip.step.total-num.z-index.zoom.zoom-in-tip.zoom-out-tip".split("."))
+		], 38)], 6)], 8, ["to"])) : y("", !0);
+	}
+}), Ae = [
+	"alt",
+	"crossorigin",
+	"data-src",
+	"height",
+	"src",
+	"width"
+], je = {
+	key: 0,
+	class: "semi-image-overlay"
+}, Me = {
+	key: 0,
+	class: "semi-image-status"
+}, Ne = {
+	key: 1,
+	class: "semi-image-status"
+}, Pe = ["src"], Fe = /* @__PURE__ */ T({
+	name: "Image",
+	inheritAttrs: !1,
+	__name: "Image",
+	props: {
+		alt: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		crossOrigin: {},
+		fallback: { type: [
+			String,
+			Object,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		height: {},
+		imageID: {},
+		imgCls: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		imgStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		placeholder: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		preview: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		setDownloadName: {},
+		src: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		width: {}
+	},
+	emits: [
+		"click",
+		"error",
+		"load"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = H(), a = U(), o = k($, void 0), s = B({
+			loadStatus: "loading",
+			previewVisible: typeof n.preview == "object" ? n.preview.visible ?? n.preview.defaultVisible ?? !1 : !1,
+			src: n.src ?? ""
+		}), c = /* @__PURE__ */ new Map();
+		function l() {
+			return {
+				...n,
+				onError: (e) => r("error", e),
+				onLoad: (e) => r("load", e)
+			};
+		}
+		let u = j(new pe({
+			getContext: (e) => {
+				if (o) {
+					if (e === "setCurrentIndex") return o.setCurrentIndex;
+					if (e === "handleVisibleChange") return o.handleVisibleChange;
+				}
+			},
+			getContexts: () => ({
+				setCurrentIndex: o?.setCurrentIndex,
+				handleVisibleChange: o?.handleVisibleChange
+			}),
+			getProp: (e) => l()[e],
+			getProps: l,
+			getState: (e) => s[e],
+			getStates: () => s,
+			setState: (e, t) => {
+				Object.assign(s, e), t?.();
+			},
+			getCache: (e) => c.get(e),
+			getCaches: () => c,
+			setCache: (e, t) => c.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0,
+			getIsInGroup: () => !!o?.isGroup
+		}));
+		G(() => n.src, (e) => {
+			(e ?? "") !== s.src && (s.src = e ?? "", s.loadStatus = "loading");
+		}), G(() => typeof n.preview == "object" ? n.preview.visible : void 0, (e) => {
+			typeof e == "boolean" && (s.previewVisible = e);
+		});
+		let d = _(() => !!o?.lazyLoad.value), f = _(() => s.loadStatus === "success" && !!n.preview && !o?.isGroup), m = _(() => s.loadStatus === "success" && !!n.preview), h = _(() => typeof n.preview == "object" ? n.preview : {}), g = _(() => Object.fromEntries(Object.entries(h.value).filter(([, e]) => e !== void 0))), S = _(() => h.value.src ?? s.src), C = _(() => Object.fromEntries(Object.entries(i).filter(([e]) => !["class", "style"].includes(e)))), T = _(() => {
+			let e = {
+				height: typeof n.height == "number" ? `${n.height}px` : n.height,
+				width: typeof n.width == "number" ? `${n.width}px` : n.width
+			}, t = F([i.style, n.style]);
+			if (!t || typeof t != "object") return [e, t];
+			let r = Object.fromEntries(Object.entries(t).filter(([, e]) => e != null));
+			return {
+				...e,
+				...r
+			};
+		}), E = _(() => a.placeholder?.() ?? n.placeholder), D = _(() => a.fallback?.() ?? n.fallback);
+		function O(e) {
+			r("click", e), u.handleClick(e);
+		}
+		function A(e) {
+			u.handlePreviewVisibleChange(e);
+		}
+		return (e, t) => (R(), b("div", {
+			class: N(["semi-image", [
+				V(i).class,
+				n.class,
+				n.className
+			]]),
+			style: F(T.value),
+			onClick: O
+		}, [
+			x("img", M(C.value, {
+				alt: n.alt,
+				class: [
+					"semi-image-img",
+					m.value ? "semi-image-img-preview" : void 0,
+					V(s).loadStatus === "error" ? "semi-image-img-error" : void 0,
+					n.imgCls
+				],
+				crossorigin: n.crossOrigin,
+				"data-src": V(s).src,
+				height: n.height,
+				src: d.value ? void 0 : V(s).src,
+				style: n.imgStyle,
+				width: n.width,
+				onError: t[0] ||= (...e) => V(u).handleError && V(u).handleError(...e),
+				onLoad: t[1] ||= (...e) => V(u).handleLoaded && V(u).handleLoaded(...e)
+			}), null, 16, Ae),
+			V(s).loadStatus === "success" ? y("", !0) : (R(), b("div", je, [V(s).loadStatus === "loading" ? (R(), b(p, { key: 0 }, [E.value ? (R(), b("div", Me, [w(V(Q), { content: E.value }, null, 8, ["content"])])) : (R(), b("div", {
+				key: 1,
+				class: "semi-skeleton-image",
+				style: F({
+					width: n.width,
+					height: n.height
+				})
+			}, null, 4))], 64)) : (R(), b("div", Ne, [typeof D.value == "string" ? (R(), b("img", {
+				key: 0,
+				alt: "fallback",
+				src: D.value,
+				style: {
+					width: "100%",
+					height: "100%"
+				}
+			}, null, 8, Pe)) : D.value ? (R(), v(V(Q), {
+				key: 1,
+				content: D.value
+			}, null, 8, ["content"])) : (R(), v(V(de), {
+				key: 2,
+				size: "extra-large"
+			}))]))])),
+			y("", !0),
+			f.value ? (R(), v(ke, M({ key: 2 }, g.value, {
+				"class-name": h.value.previewCls,
+				"cross-origin": n.crossOrigin ?? h.value.crossOrigin,
+				"set-download-name": n.setDownloadName,
+				src: S.value,
+				style: h.value.previewStyle,
+				visible: V(s).previewVisible,
+				onVisibleChange: A
+			}), null, 16, [
+				"class-name",
+				"cross-origin",
+				"set-download-name",
+				"src",
+				"style",
+				"visible"
+			])) : y("", !0)
+		], 6));
+	}
+}), Ie = /* @__PURE__ */ T({
+	name: "ImagePreview",
+	inheritAttrs: !1,
+	__name: "ImagePreview",
+	props: {
+		adaptiveTip: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		closable: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: !0
+		},
+		crossOrigin: {},
+		currentIndex: {},
+		defaultCurrentIndex: {},
+		defaultVisible: { type: Boolean },
+		disableDownload: {
+			type: Boolean,
+			default: !1
+		},
+		downloadTip: {},
+		getPopupContainer: {},
+		infinite: {
+			type: Boolean,
+			default: !1
+		},
+		initialZoom: {},
+		lazyLoad: {
+			type: Boolean,
+			default: !0
+		},
+		lazyLoadMargin: { default: "0px 100px 100px 0px" },
+		maskClosable: {
+			type: Boolean,
+			default: !0
+		},
+		maxZoom: { default: 5 },
+		minZoom: { default: .1 },
+		nextTip: {},
+		originTip: {},
+		preLoad: {
+			type: Boolean,
+			default: !0
+		},
+		preLoadGap: { default: 2 },
+		prevTip: {},
+		previewCls: {},
+		previewStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		previewTitle: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		renderCloseIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		renderHeader: {},
+		renderLeftIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		renderPreviewMenu: {},
+		renderRightIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		rotateTip: {},
+		setDownloadName: {},
+		showTooltip: {
+			type: Boolean,
+			default: !1
+		},
+		src: { default: () => [] },
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		viewerVisibleDelay: { default: 1e4 },
+		visible: { type: Boolean },
+		zIndex: { default: 1070 },
+		zoomInTip: {},
+		zoomOutTip: {},
+		zoomStep: { default: .1 }
+	},
+	emits: [
+		"change",
+		"close",
+		"download",
+		"downloadError",
+		"next",
+		"prev",
+		"ratioChange",
+		"rotateLeft",
+		"update:currentIndex",
+		"update:visible",
+		"visibleChange",
+		"zoomIn",
+		"zoomOut"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = H(), a = U(), o = E();
+		function s(e) {
+			let t = o?.vnode.props, n = e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+			return !!(t && (Object.prototype.hasOwnProperty.call(t, e) || Object.prototype.hasOwnProperty.call(t, n)));
+		}
+		let c = B({
+			currentIndex: n.currentIndex ?? n.defaultCurrentIndex ?? 0,
+			visible: s("visible") ? !!n.visible : !!n.defaultVisible
+		}), l = /* @__PURE__ */ new Map();
+		function u() {
+			let e = { ...n };
+			return s("currentIndex") || delete e.currentIndex, s("visible") || delete e.visible, Object.assign(e, {
+				onChange: (e) => {
+					r("change", e), r("update:currentIndex", e);
+				},
+				onVisibleChange: (e) => {
+					r("visibleChange", e), r("update:visible", e);
+				}
+			});
+		}
+		let d = j(new me({
+			getContext: () => void 0,
+			getContexts: () => ({}),
+			getProp: (e) => u()[e],
+			getProps: u,
+			getState: (e) => c[e],
+			getStates: () => c,
+			setState: (e, t) => {
+				let n = { ...e };
+				s("visible") && delete n.visible, s("currentIndex") && delete n.currentIndex, Object.assign(c, n), t?.();
+			},
+			getCache: (e) => l.get(e),
+			getCaches: () => l,
+			setCache: (e, t) => l.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0
+		}));
+		function m(e) {
+			return !A(e) || e.type === f ? !1 : e.type !== h || String(e.children ?? "").trim() !== "";
+		}
+		function v(e) {
+			return !e.props || !Object.prototype.hasOwnProperty.call(e.props, "preview") || e.props.preview !== !1;
+		}
+		function y(e, t) {
+			let n = [];
+			for (let r of e) {
+				if (Array.isArray(r)) {
+					n.push(...y(r, t));
+					continue;
+				}
+				if (m(r)) {
+					if (r.type === p && Array.isArray(r.children)) {
+						n.push(...y(r.children, t));
+						continue;
+					}
+					if (r.type === Fe) {
+						if (!v(r)) {
+							n.push(r);
+							continue;
+						}
+						let e = r.props?.preview, i = e && typeof e == "object" && "src" in e ? String(e.src ?? r.props?.src ?? "") : String(r.props?.src ?? ""), a = e && typeof e == "object" && "previewTitle" in e ? e.previewTitle : void 0, o = t.sources.length;
+						t.sources.push(i), t.titles.push(a), n.push(g(r, { imageID: o }));
+						continue;
+					}
+					if (Array.isArray(r.children)) {
+						let e = g(r);
+						e.children = y(r.children, t), n.push(e);
+						continue;
+					}
+					n.push(r);
+				}
+			}
+			return n;
+		}
+		let C = _(() => {
+			let e = {
+				nodes: [],
+				sources: [],
+				titles: []
+			};
+			return e.nodes = y(a.default?.() ?? [], e), e;
+		}), T = _(() => Array.isArray(n.src) ? n.src : typeof n.src == "string" ? [n.src] : []), O = _(() => [...T.value, ...C.value.sources]), k = { value: null }, N;
+		function F(e) {
+			k.value = e instanceof HTMLDivElement ? e : null;
+		}
+		function re() {
+			N?.disconnect(), N = void 0;
+		}
+		function W() {
+			if (re(), !n.lazyLoad || !k.value) return;
+			let e = k.value.querySelectorAll(".semi-image-img[data-src]");
+			if (typeof IntersectionObserver > "u") {
+				e.forEach((e) => {
+					e.src = e.dataset.src ?? "", e.removeAttribute("data-src");
+				});
+				return;
+			}
+			N = new IntersectionObserver((e) => {
+				for (let t of e) {
+					let e = t.target;
+					if (!(e instanceof HTMLImageElement) || !t.isIntersecting) continue;
+					let n = e.dataset.src;
+					n && (e.src = n), e.removeAttribute("data-src"), N?.unobserve(e);
+				}
+			}, {
+				root: k.value,
+				rootMargin: n.lazyLoadMargin
+			}), e.forEach((e) => N?.observe(e));
+		}
+		return ne($, {
+			currentIndex: _(() => c.currentIndex),
+			handleVisibleChange: (e) => d.handleVisibleChange(e),
+			isGroup: !0,
+			lazyLoad: _(() => n.lazyLoad),
+			previewSrc: O,
+			setCurrentIndex: (e) => d.handleCurrentIndexChange(e),
+			setDownloadName: _(() => n.setDownloadName),
+			titles: _(() => C.value.titles),
+			visible: _(() => c.visible)
+		}), G(() => n.currentIndex, (e) => {
+			s("currentIndex") && e !== void 0 && (c.currentIndex = e);
+		}), G(() => n.visible, (e) => {
+			s("visible") && e !== void 0 && (c.visible = e);
+		}), te(() => void ee(W)), L(() => void ee(W)), I(() => {
+			re(), d.destroy();
+		}), (e, t) => (R(), b(p, null, [x("div", M({ ref: F }, V(i), {
+			class: [
+				"semi-image-preview-group",
+				n.class,
+				n.className,
+				V(i).class
+			],
+			style: [n.style, V(i).style]
+		}), [w(V(Q), { content: C.value.nodes }, null, 8, ["content"])], 16), w(ke, M(n, {
+			class: n.previewCls,
+			"current-index": V(c).currentIndex,
+			src: O.value,
+			style: n.previewStyle,
+			visible: V(c).visible,
+			onChange: V(d).handleCurrentIndexChange,
+			onClose: t[0] ||= (e) => r("close"),
+			onDownload: t[1] ||= (e, t) => r("download", e, t),
+			onDownloadError: t[2] ||= (e) => r("downloadError", e),
+			onNext: t[3] ||= (e) => r("next", e),
+			onPrev: t[4] ||= (e) => r("prev", e),
+			onRatioChange: t[5] ||= (e) => r("ratioChange", e),
+			onRotateLeft: t[6] ||= (e) => r("rotateLeft", e),
+			onVisibleChange: V(d).handleVisibleChange,
+			onZoomIn: t[7] ||= (e) => r("zoomIn", e),
+			onZoomOut: t[8] ||= (e) => r("zoomOut", e)
+		}), S({ _: 2 }, [
+			V(a).header ? {
+				name: "header",
+				fn: K((t) => [z(e.$slots, "header", P(D(t)))]),
+				key: "0"
+			} : void 0,
+			V(a).previewMenu ? {
+				name: "previewMenu",
+				fn: K((t) => [z(e.$slots, "previewMenu", P(D(t)))]),
+				key: "1"
+			} : void 0,
+			V(a).leftIcon ? {
+				name: "leftIcon",
+				fn: K((t) => [z(e.$slots, "leftIcon", P(D(t)))]),
+				key: "2"
+			} : void 0,
+			V(a).rightIcon ? {
+				name: "rightIcon",
+				fn: K((t) => [z(e.$slots, "rightIcon", P(D(t)))]),
+				key: "3"
+			} : void 0,
+			V(a).closeIcon ? {
+				name: "closeIcon",
+				fn: K(() => [z(e.$slots, "closeIcon")]),
+				key: "4"
+			} : void 0
+		]), 1040, [
+			"class",
+			"current-index",
+			"src",
+			"style",
+			"visible",
+			"onChange",
+			"onVisibleChange"
+		])], 64));
+	}
+}), Le = Fe;
+//#endregion
+export { $ as i, Ie as n, Fe as r, Le as t };