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

package/dist/Cropper-Dy1LPBDN.js

@@ -0,0 +1,587 @@
+import "./src-DNBBthjO.js";
+import { t as e } from "./foundation-Cawx37mp.js";
+import { t } from "./env-BeIzjQx7.js";
+import { Fragment as n, computed as r, createElementBlock as i, createElementVNode as a, defineComponent as o, markRaw as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, renderList as m, shallowReactive as h, unref as g, useAttrs as _, useTemplateRef as v, watch as y, watchEffect as b } from "vue";
+//#region bundled-foundation
+function x(e, [t, n]) {
+	return Math.min(Math.max(e, t), n);
+}
+function S(e, t, n) {
+	return e / t > n ? e = t * n : t = e / n, [e, t];
+}
+//#endregion
+//#region bundled-foundation
+var C = class extends e {
+	constructor(e) {
+		super({ ...e }), this.getImgDataWhenResize = (e) => {
+			let { imgData: t } = this.getStates(), n = {
+				width: t.width * e,
+				height: t.height * e,
+				centerPoint: {
+					x: t.centerPoint.x * e,
+					y: t.centerPoint.y * e
+				}
+			};
+			return this.imgData.scale *= e, n;
+		}, this.getCropperBoxWhenResize = (e, t) => {
+			let { cropperBox: n } = this.getStates(), { aspectRatio: r } = this.getProps(), i = {
+				width: n.width * e,
+				height: n.height * e,
+				centerPoint: {
+					x: n.centerPoint.x * e,
+					y: n.centerPoint.y * e
+				}
+			}, a = i.centerPoint.x - i.width / 2, o = i.centerPoint.x + i.width / 2, s = i.centerPoint.y - i.height / 2, c = i.centerPoint.y + i.height / 2;
+			return r ? (o > t.width && (o = t.width, a = i.width > t.width ? 0 : t.width - i.width, i.width = o - a, i.height = i.width / r, c = s + i.height), c > t.height && (c = t.height, s = i.height > t.height ? 0 : t.height - i.height, i.height = c - s, i.width = i.height * r, o = a + i.width)) : (o > t.width && (o = t.width, a = i.width > t.width ? 0 : t.width - i.width), c > t.height && (c = t.height, s = i.height > t.height ? 0 : t.height - i.height)), {
+				width: o - a,
+				height: c - s,
+				centerPoint: {
+					x: (o + a) / 2,
+					y: (c + s) / 2
+				}
+			};
+		}, this.handleResize = () => {
+			let { loaded: e } = this.getStates();
+			if (!this.initial) {
+				this.initial = !0;
+				return;
+			}
+			if (!e) return;
+			let t = this._adapter.getContainer(), n = {
+				width: t.clientWidth,
+				height: t.clientHeight
+			}, r = n.width / this.containerData.width, i = this.getImgDataWhenResize(r), a = this.getCropperBoxWhenResize(r, n);
+			this.containerData = n, this.setState({
+				imgData: i,
+				cropperBox: a
+			});
+		}, this.handleImageLoad = (e) => {
+			let { naturalWidth: t, naturalHeight: n } = e.target, { width: r, height: i } = this.containerData;
+			this.imgData.originalWidth = t, this.imgData.originalHeight = n;
+			let a = 1, o = {};
+			t / r > n / i ? (a = r / t, o.width = r, o.height = n * a) : (a = i / n, o.width = t * a, o.height = i), this.imgData.scale = a, o.centerPoint = {}, o.centerPoint.x = r / 2, o.centerPoint.y = i / 2;
+			let s = {}, { defaultAspectRatio: c, aspectRatio: l } = this.getProps(), u = l || c;
+			r / i > u ? (s.width = i * u, s.height = i) : (s.width = r, s.height = r / u), s.centerPoint = {}, s.centerPoint.x = r / 2, s.centerPoint.y = i / 2, this.setState({
+				imgData: o,
+				cropperBox: s,
+				loaded: !0
+			}), this.renderPreview();
+		}, this.renderPreview = () => {
+			let { preview: e, src: t } = this.getProps(), n = e?.();
+			if (!n) return;
+			let r = document.createElement("img");
+			this.previewImg = r, this.previewContainer = n, r.src = t, n.appendChild(r), this.previewContainer.style.overflow = "hidden";
+			let { width: i, height: a } = n.getBoundingClientRect();
+			this.previewContainerInitSize = {
+				width: i,
+				height: a
+			};
+		}, this.updatePreview = (e) => {
+			if (!this.previewImg) return;
+			let { cropperBox: t } = this.getStates(), n = 1, { width: r, height: i } = this.previewContainerInitSize, a = r, o = i;
+			if (a < o) {
+				n = r / t.width;
+				let e = n * t.height;
+				e > i ? (n = i / t.height, a = n * t.width) : o = e;
+			} else {
+				n = i / t.height;
+				let e = n * t.width;
+				e > r ? (n = r / t.width, o = n * t.height) : a = e;
+			}
+			let { width: s, height: c, translateX: l, translateY: u, rotate: d } = e;
+			this.previewImg.style.width = `${s * n}px`, this.previewImg.style.height = `${c * n}px`, this.previewImg.style.transform = `translate(${l * n}px, ${u * n}px) rotate(${d}deg)`, this.previewImg.style.transformOrigin = "center", this.previewContainer.style.width = `${a}px`, this.previewContainer.style.height = `${o}px`;
+		}, this.removePreview = () => {
+			this.previewImg && this.previewContainer && (this.previewContainer.removeChild(this.previewImg), this.previewImg = null);
+		}, this.handleWheel = (e) => {
+			e.preventDefault();
+			let { imgData: t, zoom: n } = this.getStates(), { maxZoom: r, minZoom: i, zoomStep: a } = this.getProps(), o;
+			if (e.deltaY < 0 ? n + a <= r && (o = Number((n + a).toFixed(2))) : e.deltaY > 0 && n - a >= i && (o = Number((n - a).toFixed(2))), o === void 0) return;
+			let s = e.currentTarget.getBoundingClientRect(), c = {
+				x: e.clientX - s.left,
+				y: -(e.clientY - s.top)
+			}, l = { ...t.centerPoint };
+			l.y = -l.y;
+			let u = {
+				x: (l.x - c.x) / n * o + c.x,
+				y: -[(l.y - c.y) / n * o + c.y]
+			}, d = {
+				width: t.width / n * o,
+				height: t.height / n * o,
+				centerPoint: u
+			};
+			this.setState({
+				imgData: d,
+				zoom: o
+			}), this._adapter.notifyZoomChange(o);
+		}, this.getRangeForAspectChange = () => {
+			let { cropperBox: e } = this.getStates(), { aspectRatio: t } = this.getProps(), { width: n, height: r } = this.containerData, i, a, o = e.centerPoint.x - e.width / 2, s = e.centerPoint.x + e.width / 2, c = e.centerPoint.y - e.height / 2, l = e.centerPoint.y + e.height / 2;
+			switch (this.boxMoveDir) {
+				case "tl":
+					i = l, a = s, [a, i] = S(a, i, t), this.rangeX = [s - a, s], this.rangeY = [l - i, l];
+					break;
+				case "tm":
+					i = l;
+					let u = e.centerPoint.x, d = n - e.centerPoint.x;
+					a = 2 * (u < d ? u : d), [a, i] = S(a, i, t), this.rangeX = [e.centerPoint.x - a / 2, e.centerPoint.x + a / 2], this.rangeY = [l - i, l];
+					break;
+				case "tr":
+					i = l, a = n - o, [a, i] = S(a, i, t), this.rangeX = [o, o + a], this.rangeY = [l - i, l];
+					break;
+				case "ml":
+					a = s;
+					let f = e.centerPoint.y, p = r - e.centerPoint.y;
+					i = 2 * (f < p ? f : p), [a, i] = S(a, i, t), this.rangeX = [s - a, s], this.rangeY = [e.centerPoint.y - i / 2, e.centerPoint.y + i / 2];
+					break;
+				case "mr":
+					a = n - o;
+					let m = e.centerPoint.y, h = r - e.centerPoint.y;
+					i = 2 * (m < h ? m : h), [a, i] = S(a, i, t), this.rangeX = [o, o + a], this.rangeY = [e.centerPoint.y - i / 2, e.centerPoint.y + i / 2];
+					break;
+				case "bl":
+					i = r - c, a = s, [a, i] = S(a, i, t), this.rangeX = [s - a, s], this.rangeY = [c, c + i];
+					break;
+				case "bm":
+					i = r - c;
+					let g = e.centerPoint.x, _ = n - e.centerPoint.x;
+					a = 2 * (g < _ ? g : _), [a, i] = S(a, i, t), this.rangeX = [e.centerPoint.x - a / 2, e.centerPoint.x + a / 2], this.rangeY = [c, c + i];
+					break;
+				case "br": i = r - c, a = n - o, [a, i] = S(a, i, t), this.rangeX = [o, o + a], this.rangeY = [c, c + i];
+			}
+		}, this.handleCornerMouseDown = (e) => {
+			let t = e.currentTarget;
+			if (!t) return;
+			e.preventDefault();
+			let n = t.dataset.dir;
+			this.boxMoveDir = n, this.boxMoveParam = this.getMoveParamByDir(n), this.bindResizeEvent();
+			let { aspectRatio: r } = this.getProps();
+			r ? this.getRangeForAspectChange() : (this.rangeX = [0, this.containerData.width], this.rangeY = [0, this.containerData.height]);
+		}, this.bindResizeEvent = () => {
+			let { aspectRatio: e } = this.getProps();
+			document.addEventListener("mousemove", e ? this.handleCornerAspectMouseMove : this.handleCornerMouseMove), document.addEventListener("mouseup", this.handleCornerMouseUp);
+		}, this.unBindResizeEvent = () => {
+			let { aspectRatio: e } = this.getProps();
+			document.removeEventListener("mousemove", e ? this.handleCornerAspectMouseMove : this.handleCornerMouseMove), document.removeEventListener("mouseup", this.handleCornerMouseUp);
+		}, this.viewIMGDragStart = (e) => {
+			e.preventDefault();
+		}, this.handleCornerAspectMouseMove = (e) => {
+			e.preventDefault();
+			let { clientX: t, clientY: n } = e, { cropperBox: r } = this.getStates(), { aspectRatio: i } = this.getProps(), a = this._adapter.getContainer().getBoundingClientRect(), o = {
+				width: r.width,
+				height: r.height,
+				centerPoint: { ...r.centerPoint }
+			}, s, c;
+			switch (["ml", "mr"].includes(this.boxMoveDir) ? s = x(t - a.left, this.rangeX) : c = x(n - a.top, this.rangeY), this.boxMoveDir) {
+				case "tl":
+					o.height = this.rangeY[1] - c, o.width = o.height * i, o.centerPoint = {
+						x: this.rangeX[1] - o.width / 2,
+						y: this.rangeY[1] - o.height / 2
+					};
+					break;
+				case "tm":
+					o.height = this.rangeY[1] - c, o.width = o.height * i, o.centerPoint = {
+						x: r.centerPoint.x,
+						y: this.rangeY[1] - o.height / 2
+					};
+					break;
+				case "tr":
+					o.height = this.rangeY[1] - c, o.width = o.height * i, o.centerPoint = {
+						x: this.rangeX[0] + o.width / 2,
+						y: this.rangeY[1] - o.height / 2
+					};
+					break;
+				case "ml":
+					o.width = this.rangeX[1] - s, o.height = o.width / i, o.centerPoint = {
+						x: this.rangeX[1] - o.width / 2,
+						y: r.centerPoint.y
+					};
+					break;
+				case "mr":
+					o.width = s - this.rangeX[0], o.height = o.width / i, o.centerPoint = {
+						x: this.rangeX[0] + o.width / 2,
+						y: r.centerPoint.y
+					};
+					break;
+				case "bl":
+					o.height = c - this.rangeY[0], o.width = o.height * i, o.centerPoint = {
+						x: this.rangeX[1] - o.width / 2,
+						y: this.rangeY[0] + o.height / 2
+					};
+					break;
+				case "bm":
+					o.height = c - this.rangeY[0], o.width = o.height * i, o.centerPoint = {
+						x: r.centerPoint.x,
+						y: this.rangeY[0] + o.height / 2
+					};
+					break;
+				case "br": o.height = c - this.rangeY[0], o.width = o.height * i, o.centerPoint = {
+					x: this.rangeX[0] + o.width / 2,
+					y: this.rangeY[0] + o.height / 2
+				};
+			}
+			o.height === 0 && o.width === 0 && (this.changeDir(), this.getRangeForAspectChange()), this.setState({ cropperBox: o });
+		}, this.changeDir = () => {
+			this.boxMoveDir.includes("t") ? this.boxMoveDir = this.boxMoveDir.replace("t", "b") : this.boxMoveDir.includes("b") && (this.boxMoveDir = this.boxMoveDir.replace("b", "t")), this.boxMoveDir.includes("l") ? this.boxMoveDir = this.boxMoveDir.replace("l", "r") : this.boxMoveDir.includes("r") && (this.boxMoveDir = this.boxMoveDir.replace("r", "l"));
+		}, this.handleCornerMouseMove = (e) => {
+			e.preventDefault();
+			let { clientX: t, clientY: n } = e, { cropperBox: r } = this.getStates(), i = this._adapter.getContainer().getBoundingClientRect(), a = x(t - i.left, this.rangeX), o = x(n - i.top, this.rangeY), s = {
+				width: r.width,
+				height: r.height,
+				centerPoint: {
+					x: r.centerPoint.x,
+					y: r.centerPoint.y
+				}
+			}, { paramX: c, paramY: l } = this.boxMoveParam, u, d;
+			c && (u = r.centerPoint.x + c * r.width / 2, s.width = r.width + c * (a - u), s.width < 0 && (s.width = -s.width, this.boxMoveParam.paramX = -c), s.centerPoint.x = a - c * s.width / 2), l && (d = r.centerPoint.y + l * r.height / 2, s.height = r.height + l * (o - d), s.height < 0 && (s.height = -s.height, this.boxMoveParam.paramY = -l), s.centerPoint.y = o - l * s.height / 2), this.setState({ cropperBox: s });
+		}, this.handleCornerMouseUp = (e) => {
+			this.boxMoveParam = {
+				paramX: 0,
+				paramY: 0
+			}, this.unBindResizeEvent();
+		}, this.handleCropperBoxMouseDown = (e) => {
+			let t = e.target, { cropperBox: n } = this.getStates(), r = this._adapter.getContainer().getBoundingClientRect();
+			t.dataset.dir || (this.cropperBoxMoveStart = {
+				x: e.clientX,
+				y: e.clientY
+			}, this.bindMoveEvent(), this.moveRange = {
+				xMin: n.width / 2,
+				xMax: r.width - n.width / 2,
+				yMin: n.height / 2,
+				yMax: r.height - n.height / 2
+			});
+		}, this.bindMoveEvent = () => {
+			document.addEventListener("mousemove", this.handleCropperBoxMouseMove), document.addEventListener("mouseup", this.handleCropperBoxMouseUp);
+		}, this.unBindMoveEvent = () => {
+			document.removeEventListener("mousemove", this.handleCropperBoxMouseMove), document.removeEventListener("mouseup", this.handleCropperBoxMouseUp);
+		}, this.handleCropperBoxMouseMove = (e) => {
+			if (!this.cropperBoxMoveStart) return;
+			let { clientX: t, clientY: n } = e, { cropperBox: r } = this.getStates(), i = t - this.cropperBoxMoveStart.x, a = n - this.cropperBoxMoveStart.y, o = x(r.centerPoint.x + i, [this.moveRange.xMin, this.moveRange.xMax]), s = x(r.centerPoint.y + a, [this.moveRange.yMin, this.moveRange.yMax]), c = {
+				width: r.width,
+				height: r.height,
+				centerPoint: {
+					x: o,
+					y: s
+				}
+			};
+			this.cropperBoxMoveStart = {
+				x: t,
+				y: n
+			}, this.setState({ cropperBox: c });
+		}, this.handleCropperBoxMouseUp = (e) => {
+			this.cropperBoxMoveStart && (this.cropperBoxMoveStart = null, this.unBindMoveEvent());
+		}, this.handleMaskMouseDown = (e) => {
+			e.currentTarget === e.target && (this.bindImgMoveEvent(), this.imgMoveStart = {
+				x: e.clientX,
+				y: e.clientY
+			});
+		}, this.bindImgMoveEvent = () => {
+			document.addEventListener("mousemove", this.handleImgMove), document.addEventListener("mouseup", this.handleImgMoveUp);
+		}, this.unBindImgMoveEvent = () => {
+			document.removeEventListener("mousemove", this.handleImgMove), document.removeEventListener("mouseup", this.handleImgMoveUp);
+		}, this.handleImgMove = (e) => {
+			if (!this.imgMoveStart) return;
+			let { clientX: t, clientY: n } = e, { imgData: r } = this.getStates(), i = t - this.imgMoveStart.x, a = n - this.imgMoveStart.y, o = r.centerPoint.x + i, s = r.centerPoint.y + a, c = {
+				width: r.width,
+				height: r.height,
+				centerPoint: {
+					x: o,
+					y: s
+				}
+			};
+			this.imgMoveStart = {
+				x: t,
+				y: n
+			}, this.setState({ imgData: c });
+		}, this.handleImgMoveUp = (e) => {
+			this.imgMoveStart && (this.imgMoveStart = null, this.unBindImgMoveEvent());
+		}, this.getCropperCanvas = () => {
+			let { cropperBox: e, imgData: t, rotate: n, zoom: r } = this.getStates(), { fill: i } = this.getProps(), a = document.createElement("canvas"), o = a.getContext("2d"), s = this._adapter.getImg(), c = n * Math.PI / 180, l = Math.abs(Math.sin(c)), u = Math.abs(Math.cos(c)), d = this.imgData.originalWidth, f = this.imgData.originalHeight, p = d * u + f * l, m = f * u + d * l, h = p * r * this.imgData.scale, g = m * r * this.imgData.scale, _ = t.centerPoint.y - g / 2, v = t.centerPoint.x - h / 2, y = e.centerPoint.x - e.width / 2, b = e.centerPoint.y - e.height / 2, x = r * this.imgData.scale, S = (y - v) / x, C = (b - _) / x, w = e.width / x, T = e.height / x, E = S + w, D = C + T;
+			if (E < 0 || D < 0 || S > p || C > m) {
+				let e = document.createElement("canvas"), t = e.getContext("2d");
+				return e.width = w, e.height = T, t.fillStyle = i, t.fillRect(0, 0, w, T), e;
+			}
+			a.width = p, a.height = m, o.fillStyle = i, o.fillRect(0, 0, p, m);
+			let O = p / 2, k = m / 2;
+			o.translate(O, k), o.rotate(n * Math.PI / 180), o.translate(-O, -k);
+			let A = (p - d) / 2, j = (m - f) / 2;
+			o.drawImage(s, 0, 0, d, f, A, j, d, f);
+			let M = document.createElement("canvas"), N = M.getContext("2d"), P = S, F = C, I = w, L = T;
+			S < 0 && (P = 0), C < 0 && (F = 0), E > p ? I = p - P : S < 0 && (I = E), D > m ? L = m - F : C < 0 && (L = D);
+			let R = o.getImageData(P, F, I, L);
+			return M.width = w, M.height = T, N.fillStyle = i, N.fillRect(0, 0, w, T), N.putImageData(R, S < 0 ? -S : 0, C < 0 ? -C : 0), M;
+		}, this.containerData = {}, this.imgData = {}, this.boxMoveDir = "", this.boxMoveParam = {
+			paramX: 0,
+			paramY: 0
+		}, this.rangeX = null, this.rangeY = null, this.initial = !1, this.previewImg = null, this.previewContainer = null;
+	}
+	init() {
+		let e = this._adapter.getContainer();
+		this.containerData.width = e.clientWidth, this.containerData.height = e.clientHeight, this.cropperBoxMoveStart = null;
+	}
+	destroy() {
+		this.unBindMoveEvent(), this.unBindResizeEvent(), this.removePreview();
+	}
+	getMoveParamByDir(e) {
+		let t = 0, n = 0;
+		switch (e) {
+			case "tl":
+				t = -1, n = -1;
+				break;
+			case "tm":
+				n = -1;
+				break;
+			case "tr":
+				t = 1, n = -1;
+				break;
+			case "ml":
+				t = -1;
+				break;
+			case "mr":
+				t = 1;
+				break;
+			case "bl":
+				t = -1, n = 1;
+				break;
+			case "bm":
+				n = 1;
+				break;
+			case "br": t = 1, n = 1;
+		}
+		return {
+			paramX: t,
+			paramY: n
+		};
+	}
+}, w = `${t}-cropper`;
+`${w}`, `${w}`, `${w}`, `${w}`, `${w}`, `${w}`, `${w}`, `${w}`, `${w}`;
+var T = {
+	shape: [
+		"rect",
+		"round",
+		"roundRect"
+	],
+	corner: [
+		"tl",
+		"tm",
+		"tr",
+		"ml",
+		"mr",
+		"bl",
+		"bm",
+		"br"
+	],
+	roundCorner: [
+		"tm",
+		"ml",
+		"mr",
+		"bm"
+	]
+};
+//#endregion
+//#region src/cropper/use-cropper-foundation.ts
+function E(e, t, n, r) {
+	let i = h({
+		imgData: {
+			width: 0,
+			height: 0,
+			centerPoint: {
+				x: 0,
+				y: 0
+			}
+		},
+		cropperBox: {
+			width: 0,
+			height: 0,
+			centerPoint: {
+				x: 0,
+				y: 0
+			}
+		},
+		zoom: 1,
+		rotate: 0,
+		loaded: !1
+	}), a = /* @__PURE__ */ new Map(), o = () => e, c = s(new C({
+		getContext: () => void 0,
+		getContexts: () => ({}),
+		getProp: (e) => o()[e],
+		getProps: o,
+		getState: (e) => i[e],
+		getStates: () => i,
+		setState: (t, n) => {
+			let r = i.loaded;
+			Object.assign(i, t), !r && i.loaded && u(e.rotate, e.zoom), n?.();
+		},
+		getCache: (e) => a.get(e),
+		getCaches: () => a,
+		setCache: (e, t) => a.set(e, t),
+		stopPropagation: (e) => e?.stopPropagation?.(),
+		persistEvent: () => void 0,
+		getContainer: () => t.value,
+		getImg: () => n.value,
+		notifyZoomChange: (e) => {
+			r("zoomChange", e), r("update:zoom", e);
+		}
+	})), l;
+	function u(e, t) {
+		if (!i.loaded) return;
+		let { rotate: n, zoom: r, imgData: a, cropperBox: o } = i, s = a.width, c = a.height, l = { ...a.centerPoint }, u = {};
+		if (e !== void 0 && e !== n) {
+			u.rotate = e;
+			let t = {
+				x: o.centerPoint.x,
+				y: -o.centerPoint.y
+			}, r = {
+				x: a.centerPoint.x,
+				y: -a.centerPoint.y
+			}, i = (e - n) * Math.PI / 180;
+			l = {
+				x: (r.x - t.x) * Math.cos(i) + (r.y - t.y) * Math.sin(i) + t.x,
+				y: -(-(r.x - t.x) * Math.sin(i) + (r.y - t.y) * Math.cos(i) + t.y)
+			};
+		}
+		if (e !== void 0 && t !== r) {
+			u.zoom = t;
+			let e = t, n = {
+				x: o.centerPoint.x,
+				y: -o.centerPoint.y
+			}, i = {
+				x: l.x,
+				y: -l.y
+			};
+			s = a.width / r * e, c = a.height / r * e, l = {
+				x: (i.x - n.x) / r * e + n.x,
+				y: -((i.y - n.y) / r * e + n.y)
+			};
+		}
+		(e !== n || t !== r) && (u.imgData = {
+			width: s,
+			height: c,
+			centerPoint: l
+		}), Object.assign(i, u);
+	}
+	return y(() => [e.rotate, e.zoom], ([e, t]) => u(e, t)), f(() => {
+		c.init(), t.value?.addEventListener("wheel", c.handleWheel, { passive: !1 }), typeof ResizeObserver < "u" && t.value && (l = new ResizeObserver(() => c.handleResize()), l.observe(t.value));
+	}), d(() => {
+		l?.disconnect(), l = void 0, t.value?.removeEventListener("wheel", c.handleWheel), c.destroy();
+	}), {
+		foundation: c,
+		state: i
+	};
+}
+//#endregion
+//#region src/cropper/Cropper.vue?vue&type=script&setup=true&lang.ts
+var D = { class: "semi-cropper-img-wrapper" }, O = ["src"], k = ["src"], A = ["data-dir"], j = /* @__PURE__ */ o({
+	name: "Cropper",
+	inheritAttrs: !1,
+	__name: "Cropper",
+	props: {
+		aspectRatio: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		cropperBoxClassName: {},
+		cropperBoxCls: {},
+		cropperBoxStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		defaultAspectRatio: { default: 1 },
+		fill: { default: "rgba(0, 0, 0, 0)" },
+		imgProps: {},
+		maxZoom: { default: 3 },
+		minZoom: { default: .1 },
+		preview: {},
+		rotate: {},
+		shape: { default: "rect" },
+		showResizeBox: {
+			type: Boolean,
+			default: !0
+		},
+		src: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		zoom: {},
+		zoomStep: { default: .1 }
+	},
+	emits: ["update:zoom", "zoomChange"],
+	setup(e, { expose: t, emit: o }) {
+		let s = e, d = o, f = _(), { foundation: h, state: y } = E(s, v("container"), v("image"), d), x = r(() => Object.fromEntries(Object.entries(f).filter(([e]) => !["class", "style"].includes(e)))), S = r(() => y.imgData.centerPoint.x - y.imgData.width / 2), C = r(() => y.imgData.centerPoint.y - y.imgData.height / 2), w = r(() => y.cropperBox.centerPoint.x - y.cropperBox.width / 2), j = r(() => y.cropperBox.centerPoint.y - y.cropperBox.height / 2), M = r(() => S.value - w.value), N = r(() => C.value - j.value), P = r(() => ({
+			width: `${y.imgData.width}px`,
+			height: `${y.imgData.height}px`,
+			transformOrigin: "center",
+			transform: `translate(${S.value}px, ${C.value}px) rotate(${y.rotate}deg)`
+		})), F = r(() => ({
+			width: `${y.imgData.width}px`,
+			height: `${y.imgData.height}px`,
+			transformOrigin: "center",
+			transform: `translate(${M.value}px, ${N.value}px) rotate(${y.rotate}deg)`
+		})), I = r(() => [s.cropperBoxStyle, {
+			width: `${y.cropperBox.width}px`,
+			height: `${y.cropperBox.height}px`,
+			transform: `translate(${w.value}px, ${j.value}px)`
+		}]), L = r(() => s.shape === "round" ? T.roundCorner : T.corner);
+		b(() => {
+			h.updatePreview({
+				width: y.imgData.width,
+				height: y.imgData.height,
+				translateX: M.value,
+				translateY: N.value,
+				rotate: y.rotate
+			});
+		});
+		function R() {
+			return h.getCropperCanvas();
+		}
+		return t({ getCropperCanvas: R }), (e, t) => (p(), i("div", c(x.value, {
+			ref: "container",
+			class: ["semi-cropper", [
+				g(f).class,
+				s.class,
+				s.className
+			]],
+			style: [g(f).style, s.style]
+		}), [
+			a("div", D, [a("img", {
+				ref: "image",
+				class: "semi-cropper-img",
+				crossorigin: "anonymous",
+				src: s.src,
+				style: u(P.value),
+				onLoad: t[0] ||= (...e) => g(h).handleImageLoad && g(h).handleImageLoad(...e)
+			}, null, 44, O)]),
+			a("div", {
+				class: "semi-cropper-mask",
+				onMousedown: t[1] ||= (...e) => g(h).handleMaskMouseDown && g(h).handleMaskMouseDown(...e)
+			}, null, 32),
+			a("div", {
+				class: l(["semi-cropper-box", [s.cropperBoxCls ?? s.cropperBoxClassName, s.shape === "round" ? "semi-cropper-view-box-round" : void 0]]),
+				style: u(I.value),
+				onMousedown: t[4] ||= (...e) => g(h).handleCropperBoxMouseDown && g(h).handleCropperBoxMouseDown(...e)
+			}, [a("div", { class: l(["semi-cropper-view-box", s.shape.includes("round") ? "semi-cropper-view-box-round" : void 0]) }, [a("img", {
+				class: "semi-cropper-view-img",
+				src: s.src,
+				style: u(F.value),
+				onDragstart: t[2] ||= (...e) => g(h).viewIMGDragStart && g(h).viewIMGDragStart(...e)
+			}, null, 44, k)], 2), (p(!0), i(n, null, m(g(y).loaded && s.showResizeBox ? L.value : [], (e) => (p(), i("div", {
+				key: e,
+				class: l(["semi-cropper-box-corner", `semi-cropper-box-corner-${e}`]),
+				"data-dir": e,
+				onMousedown: t[3] ||= (...e) => g(h).handleCornerMouseDown && g(h).handleCornerMouseDown(...e)
+			}, null, 42, A))), 128))], 38)
+		], 16));
+	}
+});
+//#endregion
+export { j as t };

package/dist/Divider-BQmwhGfH.js

@@ -0,0 +1,57 @@
+import { Comment as e, Text as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, h as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useSlots as f } from "vue";
+//#region src/divider/DividerContentRenderer.ts
+var p = o({
+	name: "DividerContentRenderer",
+	props: { nodes: {
+		type: Array,
+		required: !0
+	} },
+	setup(e) {
+		return () => e.nodes.length === 1 && e.nodes[0]?.type === t ? s("span", {
+			class: "semi-divider_inner-text",
+			"x-semi-prop": "children"
+		}, e.nodes) : e.nodes;
+	}
+}), m = /* @__PURE__ */ o({
+	name: "Divider",
+	inheritAttrs: !1,
+	__name: "Divider",
+	props: {
+		align: { default: "center" },
+		dashed: {
+			type: Boolean,
+			default: !1
+		},
+		layout: { default: "horizontal" },
+		margin: {}
+	},
+	setup(o) {
+		let s = o, m = d(), h = f(), g = n(() => h.default?.() ?? []), _ = n(() => g.value.some((n) => n.type !== e && (n.type !== t || n.children !== ""))), v = n(() => s.layout === "horizontal" && _.value), y = n(() => [
+			"semi-divider",
+			`semi-divider-${s.layout}`,
+			s.dashed ? "semi-divider-dashed" : null,
+			v.value ? "semi-divider-with-text" : null,
+			v.value ? `semi-divider-with-text-${s.align}` : null,
+			m.class
+		]), b = n(() => Object.fromEntries(Object.entries(m).filter(([e]) => !["class", "style"].includes(e)))), x = n(() => {
+			if (s.margin === void 0) return {};
+			let e = typeof s.margin == "number" ? `${s.margin}px` : s.margin;
+			return s.layout === "vertical" ? {
+				marginLeft: e,
+				marginRight: e
+			} : {
+				marginTop: e,
+				marginBottom: e
+			};
+		}), S = n(() => [x.value, m.style]);
+		return (e, t) => (l(), a("div", c(b.value, {
+			class: y.value,
+			style: S.value
+		}), [v.value ? (l(), r(u(p), {
+			key: 0,
+			nodes: g.value
+		}, null, 8, ["nodes"])) : i("", !0)], 16));
+	}
+});
+//#endregion
+export { m as t };