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

package/dist/resizable-CEB0ZdGT.js

@@ -0,0 +1,814 @@
+import "./src-DNBBthjO.js";
+import { r as e, t } from "./foundation-Cawx37mp.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, defineComponent as c, inject as l, markRaw as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeProps as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, provide as y, renderList as b, renderSlot as x, shallowReactive as S, unref as C, useAttrs as w, useTemplateRef as T, watch as E, withCtx as D } from "vue";
+import { IconHandle as O } from "@aifuxi/semi-icons-vue";
+//#region bundled-foundation
+var k = {
+	width: "auto",
+	height: "auto"
+}, A = (e, t, n) => Math.max(Math.min(e, n), t), j = (e, t) => Math.round(e / t) * t, M = (e, t) => new RegExp(e, "i").test(t), N = (e, t, n = 0) => {
+	let r = t.reduce((n, r, i) => Math.abs(r - e) < Math.abs(t[n] - e) ? i : n, 0), i = Math.abs(t[r] - e);
+	return n === 0 || i < n ? t[r] : e;
+}, P = (e) => (e = e.toString(), e === "auto" || e.endsWith("px") || e.endsWith("%") || e.endsWith("vh") || e.endsWith("vw") || e.endsWith("vmax") || e.endsWith("vmin") ? e : `${e}px`), F = (e, t, n, r) => {
+	if (e && typeof e == "string") {
+		if (e.endsWith("px")) return Number(e.replace("px", ""));
+		if (e.endsWith("%")) return t * (Number(e.replace("%", "")) / 100);
+		if (e.endsWith("vw")) return n * (Number(e.replace("vw", "")) / 100);
+		if (e.endsWith("vh")) return r * (Number(e.replace("vh", "")) / 100);
+	}
+	return e === void 0 ? e : Number(e);
+}, I = (e, t, n, r, i, a, o) => (r = F(r, e.width, t, n), i = F(i, e.height, t, n), a = F(a, e.width, t, n), o = F(o, e.height, t, n), {
+	maxWidth: r,
+	maxHeight: i,
+	minWidth: a,
+	minHeight: o
+}), L = (e) => e === "vertical" ? ["bottom", "top"] : ["right", "left"], R = (e, t) => e.endsWith("px") ? Number(e.replace("px", "")) : e.endsWith("%") ? Number(e.replace("%", "")) / 100 * t : e === void 0 ? e : Number(e), z = (e, t, n, r, i = 0) => {
+	t ??= "0%", n ??= "100%";
+	let a = R(t, r), o = R(n, r);
+	return e < a + i || e > o;
+}, B = (e, t, n, r, i) => {
+	t ??= "0%", n ??= "100%";
+	let a = R(t, r), o = R(n, r);
+	return e < a + i ? a + i : e > o ? o : e;
+}, V = (e, t) => {
+	if (t === "horizontal") {
+		let t = parseFloat(e.paddingLeft), n = parseFloat(e.paddingRight), r = parseFloat(e.borderLeftWidth), i = parseFloat(e.borderRightWidth);
+		return t + n + r + i;
+	}
+	{
+		let t = parseFloat(e.paddingTop), n = parseFloat(e.paddingBottom), r = parseFloat(e.borderTopWidth), i = parseFloat(e.borderBottomWidth);
+		return t + n + r + i;
+	}
+}, H = class extends t {
+	constructor(e) {
+		super({ ...e }), this.lockAspectRatio = 1, this.resizable = null, this.parentLeft = 0, this.parentTop = 0, this.boundaryLeft = 0, this.boundaryRight = 0, this.boundaryTop = 0, this.boundaryBottom = 0, this.targetLeft = 0, this.targetTop = 0, this.onResizeStart = (e, t, n) => {
+			if (this.type = n, this.resizable = this._adapter.getResizable(), !this.resizable || !this.window) return;
+			let { clientX: r, clientY: i } = e, a = this.getProps(), o = this.getStates();
+			if (a.onResizeStart && a.onResizeStart(e, t) === !1) return;
+			let { size: s } = a;
+			if (s) {
+				let { height: e, width: t } = s, { height: n, width: r } = o;
+				e !== void 0 && e !== n && this.setState({ height: e }), t !== void 0 && t !== r && this.setState({ width: t });
+			}
+			this.lockAspectRatio = typeof a.lockAspectRatio == "number" ? a.lockAspectRatio : this.size.width / this.size.height;
+			let c, l = this.window.getComputedStyle(this.resizable);
+			if (l.flexBasis !== "auto") {
+				let e = this.parent;
+				if (e) {
+					let t = this.window.getComputedStyle(e);
+					this.flexDirection = t.flexDirection.startsWith("row") ? "row" : "column", c = l.flexBasis;
+				}
+			}
+			this.setBoundary(), this.registerEvents();
+			let u = {
+				original: {
+					x: r,
+					y: i,
+					width: this.size.width,
+					height: this.size.height
+				},
+				isResizing: !0,
+				backgroundStyle: {
+					...o.backgroundStyle,
+					cursor: this.window.getComputedStyle(e.target).cursor || "auto"
+				},
+				direction: t,
+				flexBasis: c
+			};
+			this.setState(u);
+		}, this.onMouseMove = (e) => {
+			this.changePosition(e);
+		}, this.onTouchMove = (e) => {
+			e.preventDefault();
+			let t = e.targetTouches[0];
+			this.changePosition(t);
+		}, this.changePosition = (e) => {
+			let t = this.getStates(), n = this.getProps();
+			if (!t.isResizing || !this.resizable || !this.window) return;
+			let { clientX: r, clientY: i } = e, { direction: a, original: o, width: s, height: c } = t, l = this.getParentSize(), { maxWidth: u, maxHeight: d, minWidth: f, minHeight: p } = n, m = I(l, this.window.innerWidth, this.window.innerHeight, u, d, f, p);
+			u = m.maxWidth, d = m.maxHeight, f = m.minWidth, p = m.minHeight;
+			let { newWidth: h, newHeight: g } = this.calDirectionSize(r, i), _ = this.calBoundaryMax(u, d);
+			h = F(h, l.width, this.window.innerWidth, this.window.innerHeight), g = F(g, l.height, this.window.innerWidth, this.window.innerHeight), n.snap && (n.snap.x && (h = N(h, n.snap.x, n.snapGap)), n.snap.y && (g = N(g, n.snap.y, n.snapGap)));
+			let v = this.calAspectRatioSize(h, g, {
+				width: _.maxWidth,
+				height: _.maxHeight
+			}, {
+				width: f,
+				height: p
+			});
+			if (h = v.newWidth, g = v.newHeight, n.grid) {
+				let [e, t] = Array.isArray(n.grid) ? n.grid : [n.grid, n.grid], r = n.snapGap || 0, i = j(h, e), a = j(g, t);
+				h = r === 0 || Math.abs(i - h) <= r ? i : h, g = r === 0 || Math.abs(a - g) <= r ? a : g;
+			}
+			let y = (e, t, n) => n.endsWith("%") ? `${e / t * 100}%` : n.endsWith("vw") ? `${e / this.window.innerWidth * 100}vw` : n.endsWith("vh") ? `${e / this.window.innerHeight * 100}vh` : e;
+			typeof s == "string" && (h = y(h, l.width, s || "")), typeof c == "string" && (g = y(g, l.height, c || ""));
+			let b = {
+				width: this.getCssPropertySize(h, "width"),
+				height: this.getCssPropertySize(g, "height")
+			};
+			this.flexDirection === "row" ? b.flexBasis = b.width : this.flexDirection === "column" && (b.flexBasis = b.height);
+			let x = t.width !== b.width, S = t.height !== b.height, C = t.flexBasis !== b.flexBasis;
+			if (x || S || C) {
+				if (this.setState(b), n.onChange) {
+					let t = {
+						width: b.width,
+						height: b.height
+					};
+					n.onChange(t, e, a);
+				}
+				let t = n.size;
+				t && this.setState({
+					width: t.width ?? "auto",
+					height: t.height ?? "auto"
+				});
+			}
+		}, this.onMouseUp = (e) => {
+			let { isResizing: t, direction: n, original: r } = this.getStates();
+			if (!t || !this.resizable) return;
+			let { width: i, height: a } = this.size;
+			i - r.width, a - r.height;
+			let { onResizeEnd: o, size: s } = this.getProps();
+			o && o(this.size, e, n), s && this.setState({
+				width: s.width ?? "auto",
+				height: s.height ?? "auto"
+			}), this.unregisterEvents(), this.setState({
+				isResizing: !1,
+				backgroundStyle: {
+					...this.getStates().backgroundStyle,
+					cursor: "auto"
+				}
+			});
+		};
+	}
+	init() {
+		if (!this.resizable || !this.window) return;
+		let e = this.window.getComputedStyle(this.resizable).flexBasis;
+		this.setState({
+			width: this.propSize.width,
+			height: this.propSize.height,
+			flexBasis: e === "auto" ? void 0 : e
+		}), this.onResizeStart = this.onResizeStart.bind(this), this.onMouseMove = this.onMouseMove.bind(this), this.onMouseUp = this.onMouseUp.bind(this);
+	}
+	get parent() {
+		return this.resizable ? this.resizable.parentNode : null;
+	}
+	get window() {
+		return !this.resizable || !this.resizable.ownerDocument ? null : this.resizable.ownerDocument.defaultView;
+	}
+	get propSize() {
+		let e = this.getProps();
+		return e.size || e.defaultSize || k;
+	}
+	get size() {
+		let e = 0, t = 0;
+		return this.resizable && this.window && (e = this.resizable.offsetWidth, t = this.resizable.offsetHeight), {
+			width: e,
+			height: t
+		};
+	}
+	get sizeStyle() {
+		let e = this.getProp("size"), t = (e) => {
+			let t = this.getStates()[e];
+			if (t === void 0 || t === "auto") return "auto";
+			if ((this.propSize?.[e])?.toString().endsWith("%")) {
+				if (t.toString().endsWith("%")) return t.toString();
+				let n = this.getParentSize();
+				return `${Number(t.toString().replace("px", "")) / n[e] * 100}%`;
+			}
+			return P(t);
+		}, n = this.getStates().isResizing;
+		return {
+			width: e && e.width !== void 0 && !n ? P(e.width) : t("width"),
+			height: e && e.height !== void 0 && !n ? P(e.height) : t("height")
+		};
+	}
+	getParentSize() {
+		let e = () => {
+			if (!this.resizable || !this.window) return null;
+			let e = this.parent;
+			if (!e) return null;
+			let t = this.window.document.createElement("div");
+			return t.style.width = "100%", t.style.height = "100%", t.style.position = "absolute", t.style.transform = "scale(0, 0)", t.style.left = "0", t.style.flex = "0 0 100%", e.appendChild(t), t;
+		}, t = (e) => {
+			let t = this.parent;
+			t && t.removeChild(e);
+		};
+		if (!this.parent) return this.window ? {
+			width: this.window.innerWidth,
+			height: this.window.innerHeight
+		} : {
+			width: 0,
+			height: 0
+		};
+		let n = e();
+		if (!n) return {
+			width: 0,
+			height: 0
+		};
+		let r = !1, i = this.parent.style.flexWrap;
+		i !== "wrap" && (r = !0, this.parent.style.flexWrap = "wrap"), n.style.position = "relative", n.style.minWidth = "100%", n.style.minHeight = "100%";
+		let a = {
+			width: n.offsetWidth,
+			height: n.offsetHeight
+		};
+		return r && (this.parent.style.flexWrap = i), t(n), a;
+	}
+	registerEvents() {
+		this._adapter.registerEvent(this.type);
+	}
+	unregisterEvents() {
+		this._adapter.unregisterEvent(this.type);
+	}
+	getCssPropertySize(e, t) {
+		let n = this.propSize?.[t], r = this.getStates();
+		return r[t] === "auto" && r.original[t] === e && (n === void 0 || n === "auto") ? "auto" : e;
+	}
+	calBoundaryMax(e, t) {
+		let { boundsByDirection: n } = this.getProps(), { direction: r } = this.getStates(), i = n && M("left", r), a = n && M("top", r), o, s, c = this.getProps();
+		if (c.boundElement === "parent") {
+			let e = this.parent;
+			e && (o = i ? this.boundaryRight - this.parentLeft : e.offsetWidth + (this.parentLeft - this.boundaryLeft), s = a ? this.boundaryBottom - this.parentTop : e.offsetHeight + (this.parentTop - this.boundaryTop));
+		} else if (c.boundElement === "window" && this.window) o = i ? this.boundaryRight : this.window.innerWidth - this.boundaryLeft, s = a ? this.boundaryBottom : this.window.innerHeight - this.boundaryTop;
+		else if (c.boundElement) {
+			let e = c.boundElement;
+			o = i ? this.boundaryRight - this.targetLeft : e.offsetWidth + (this.targetLeft - this.boundaryLeft), s = a ? this.boundaryBottom - this.targetTop : e.offsetHeight + (this.targetTop - this.boundaryTop);
+		}
+		return o && Number.isFinite(o) && (e = e && e < o ? e : o), s && Number.isFinite(s) && (t = t && t < s ? t : s), {
+			maxWidth: e,
+			maxHeight: t
+		};
+	}
+	calDirectionSize(e, t) {
+		let n = this.getProps(), r = n.scale || 1, i = n.ratio, [a, o] = Array.isArray(i) ? i : [i, i], { direction: s, original: c } = this.getStates(), { lockAspectRatio: l, lockAspectRatioExtraHeight: u = 0, lockAspectRatioExtraWidth: d = 0 } = n, f = c.width, p = c.height, m = (e) => c.width + e * a / r, h = (e) => c.height + e * o / r;
+		return M("top", s) && (p = h(c.y - t), l && (f = (p - u) * this.lockAspectRatio + d)), M("bottom", s) && (p = h(t - c.y), l && (f = (p - u) * this.lockAspectRatio + d)), M("right", s) && (f = m(e - c.x), l && (p = (f - d) / this.lockAspectRatio + u)), M("left", s) && (f = m(c.x - e), l && (p = (f - d) / this.lockAspectRatio + u)), {
+			newWidth: f,
+			newHeight: p
+		};
+	}
+	calAspectRatioSize(e, t, n, r) {
+		let { lockAspectRatio: i, lockAspectRatioExtraHeight: a = 0, lockAspectRatioExtraWidth: o = 0 } = this.getProps(), s = r.width === void 0 ? 10 : r.width, c = n.width === void 0 || n.width < 0 ? e : n.width, l = r.height === void 0 ? 10 : r.height, u = n.height === void 0 || n.height < 0 ? t : n.height;
+		if (i) {
+			let n = (l - a) * this.lockAspectRatio + o, r = (u - a) * this.lockAspectRatio + o, i = (s - o) / this.lockAspectRatio + a, d = (c - o) / this.lockAspectRatio + a, f = Math.max(s, n), p = Math.min(c, r), m = Math.max(l, i), h = Math.min(u, d);
+			e = A(e, f, p), t = A(t, m, h);
+		} else e = A(e, s, c), t = A(t, l, u);
+		return {
+			newWidth: e,
+			newHeight: t
+		};
+	}
+	setBoundary() {
+		let e = this.getProps();
+		if (e.boundElement === "parent") {
+			let e = this.parent;
+			if (e) {
+				let t = e.getBoundingClientRect();
+				this.parentLeft = t.left, this.parentTop = t.top;
+			}
+		}
+		if (e.boundElement && typeof e.boundElement != "string") {
+			let t = e.boundElement.getBoundingClientRect();
+			this.targetLeft = t.left, this.targetTop = t.top;
+		}
+		if (this.resizable) {
+			let { left: e, top: t, right: n, bottom: r } = this.resizable.getBoundingClientRect();
+			this.boundaryLeft = e, this.boundaryRight = n, this.boundaryTop = t, this.boundaryBottom = r;
+		}
+	}
+	destroy() {
+		this.unregisterEvents();
+	}
+}, U = class extends t {
+	constructor(t) {
+		super({ ...t }), this.registerEvents = () => {
+			this._adapter.registerEvents(this.type);
+		}, this.unregisterEvents = () => {
+			this._adapter.unregisterEvents(this.type);
+		}, this.onResizeStart = (e, t, n) => {
+			this.type = n;
+			let { clientX: r, clientY: i } = t, a = this._adapter.getItem(e), o = this._adapter.getItem(e + 1), s, c, l = this.window.getComputedStyle(a), u = this.window.getComputedStyle(o);
+			s = V(l, this.direction) + this.itemMinusMap.get(e), c = V(u, this.direction) + this.itemMinusMap.get(e + 1);
+			let d = (this.direction === "horizontal" ? a.offsetWidth : a.offsetHeight) + this.itemMinusMap.get(e), f = (this.direction === "horizontal" ? o.offsetWidth : o.offsetHeight) + this.itemMinusMap.get(e + 1), p = this.getStates();
+			this.setState({
+				isResizing: !0,
+				originalPosition: {
+					x: r,
+					y: i,
+					lastItemSize: d,
+					nextItemSize: f,
+					lastOffset: s,
+					nextOffset: c
+				},
+				backgroundStyle: {
+					...p.backgroundStyle,
+					cursor: this.window.getComputedStyle(t.target).cursor || "auto"
+				},
+				curHandler: e
+			}), this.registerEvents();
+			let m = this._adapter.getItemStart(e), h = this._adapter.getItemStart(e + 1), [g, _] = L(this.direction);
+			m && m(t, g), h && h(t, _);
+		}, this.onMouseMove = (e) => {
+			this.onResizing(e);
+		}, this.onTouchMove = (e) => {
+			e.preventDefault(), this.onResizing(e);
+		}, this.onResizing = (e) => {
+			let t = this.getStates();
+			if (!t.isResizing) return;
+			let { curHandler: n, originalPosition: r } = t, { x: i, y: a, lastItemSize: o, nextItemSize: s, lastOffset: c, nextOffset: l } = r, { clientX: u, clientY: d } = this.type === "mouse" ? e : e.targetTouches[0], { direction: f } = this.getProps(), p = this._adapter.getItem(n), m = this._adapter.getItem(n + 1), h = this.groupSize, g = f === "horizontal" ? u - i : d - a, _ = o + g, v = s - g, y = z(_, this._adapter.getItemMin(n), this._adapter.getItemMax(n), h, c), b = z(v, this._adapter.getItemMin(n + 1), this._adapter.getItemMax(n + 1), h, l);
+			y && (_ = B(_, this._adapter.getItemMin(n), this._adapter.getItemMax(n), h, c), v = o + s - _), b && (v = B(v, this._adapter.getItemMin(n + 1), this._adapter.getItemMax(n + 1), h, l), _ = o + s - v);
+			let x = this.itemPercentMap.get(n), S = this.itemPercentMap.get(n + 1), C = _ / h * 100, w = x + S - C;
+			this.itemPercentMap.set(n, C), this.itemPercentMap.set(n + 1, w), f === "horizontal" ? (p.style.width = `calc(${C}% - ${this.itemMinusMap.get(n)}px)`, m.style.width = `calc(${w}% - ${this.itemMinusMap.get(n + 1)}px)`) : f === "vertical" && (p.style.height = `calc(${C}% - ${this.itemMinusMap.get(n)}px)`, m.style.height = `calc(${w}% - ${this.itemMinusMap.get(n + 1)}px)`);
+			let T = this._adapter.getItemChange(n), E = this._adapter.getItemChange(n + 1), [D, O] = L(this.direction);
+			T && T({
+				width: p.offsetWidth,
+				height: p.offsetHeight
+			}, e, D), E && E({
+				width: m.offsetWidth,
+				height: m.offsetHeight
+			}, e, O);
+		}, this.onResizeEnd = (e) => {
+			let { curHandler: t } = this.getStates(), n = this._adapter.getItem(t), r = this._adapter.getItem(t + 1), i = this._adapter.getItemEnd(t), a = this._adapter.getItemEnd(t + 1), [o, s] = L(this.direction);
+			i && i({
+				width: n.offsetWidth,
+				height: n.offsetHeight
+			}, e, o), a && a({
+				width: r.offsetWidth,
+				height: r.offsetHeight
+			}, e, s), this.setState({
+				isResizing: !1,
+				curHandler: null
+			}), this.unregisterEvents();
+		}, this.initSpace = () => {
+			let { direction: e } = this.getProps(), t = Array(this._adapter.getHandlerCount()).fill(0), n = this.groupSize;
+			this.totalMinus = 0;
+			for (let n = 0; n < this._adapter.getHandlerCount(); n++) {
+				let r = e === "horizontal" ? this._adapter.getHandler(n).offsetWidth : this._adapter.getHandler(n).offsetHeight;
+				t[n] = r, this.totalMinus += r;
+			}
+			let r = 0, i = /* @__PURE__ */ new Map(), a = 0;
+			for (let o = 0; o < this._adapter.getItemCount(); o++) {
+				o === 0 ? this.itemMinusMap.set(o, t[o] / 2) : o === this._adapter.getItemCount() - 1 ? this.itemMinusMap.set(o, t[o - 1] / 2) : this.itemMinusMap.set(o, t[o - 1] / 2 + t[o] / 2);
+				let s = this._adapter.getItem(o), c = this._adapter.getItemMin(o), l = this._adapter.getItemMax(o), u = c ? R(c, n) / n * 100 : 0, d = l ? R(l, n) / n * 100 : 100;
+				u > d && console.warn("[Semi ResizableItem]: min size bigger than max size");
+				let f = this._adapter.getItemDefaultSize(o);
+				if (f) {
+					let t;
+					if (typeof f == "string") {
+						if (f.endsWith("%")) t = parseFloat(f.slice(0, -1)), this.itemPercentMap.set(o, t);
+						else if (f.endsWith("px")) t = parseFloat(f.slice(0, -2)) / n * 100, this.itemPercentMap.set(o, t);
+						else if (/^-?\d+(\.\d+)?$/.test(f)) {
+							i.set(o, parseFloat(f)), a += parseFloat(f);
+							continue;
+						}
+					} else if (typeof f == "number") {
+						i.set(o, f), a += f;
+						continue;
+					}
+					r += t, e === "horizontal" ? s.style.width = `calc(${t}% - ${this.itemMinusMap.get(o)}px)` : s.style.height = `calc(${t}% - ${this.itemMinusMap.get(o)}px)`, t < u && console.warn("[Semi ResizableGroup]: item size smaller than min size"), t > d && console.warn("[Semi ResizableGroup]: item size bigger than max size");
+				} else i.set(o, 1), a += 1;
+			}
+			let o = 100 - r;
+			r > 100 && (console.warn("[Semi ResizableGroup]: total Size bigger than 100%"), o = 10), i.forEach((t, n) => {
+				let r = this._adapter.getItem(n), i = t / a * o;
+				this.itemPercentMap.set(n, i), e === "horizontal" ? r.style.width = `calc(${i}% - ${this.itemMinusMap.get(n)}px)` : r.style.height = `calc(${i}% - ${this.itemMinusMap.get(n)}px)`;
+			});
+		}, this.ensureConstraint = (0, e.default)(() => {
+			let { direction: e } = this.getProps(), t = this._adapter.getItemCount(), n = !0;
+			for (let r = 0; r < t; r++) {
+				let i = this._adapter.getItem(r), a = e === "horizontal" ? i.offsetWidth : i.offsetHeight;
+				if (z(a, this._adapter.getItemMin(r), this._adapter.getItemMax(r), this.groupSize, this.itemMinusMap.get(r))) {
+					let o = B(a, this._adapter.getItemMin(r), this._adapter.getItemMax(r), this.groupSize, this.itemMinusMap.get(r));
+					for (let a = r + 1; a < t; a++) {
+						let s = this._adapter.getItem(a);
+						if (z(e === "horizontal" ? s.offsetWidth : s.offsetHeight, this._adapter.getItemMin(a), this._adapter.getItemMax(a), this.groupSize, this.itemMinusMap.get(a))) a === t - 1 && (n = !1, console.warn("[Semi ResizableGroup]: no enough space to adjust min/max size"));
+						else {
+							let t = this.itemPercentMap.get(r), n = this.itemPercentMap.get(a), c = o / this.groupSize * 100, l = t + n - c;
+							this.itemPercentMap.set(r, c), this.itemPercentMap.set(a, l), e === "horizontal" ? (i.style.width = `calc(${c}% - ${this.itemMinusMap.get(r)}px)`, s.style.width = `calc(${l}% - ${this.itemMinusMap.get(a)}px)`) : (i.style.height = `calc(${c}% - ${this.itemMinusMap.get(r)}px)`, s.style.height = `calc(${l}% - ${this.itemMinusMap.get(a)}px)`);
+							break;
+						}
+					}
+				}
+				if (!n) break;
+			}
+		}, 200);
+	}
+	get groupRef() {
+		return this._adapter.getGroupRef();
+	}
+	get groupSize() {
+		let { direction: e } = this.getProps();
+		return e === "horizontal" ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+	}
+	init() {
+		this.direction = this.getProp("direction"), this.itemMinusMap = /* @__PURE__ */ new Map(), this.itemPercentMap = /* @__PURE__ */ new Map(), this.initSpace();
+	}
+	get window() {
+		return this.groupRef.ownerDocument.defaultView ?? null;
+	}
+	destroy() {}
+}, W = c({
+	name: "ResizableNodeRenderer",
+	props: { content: {
+		type: null,
+		default: null
+	} },
+	setup(e) {
+		return () => e.content;
+	}
+}), G = /* @__PURE__ */ c({
+	name: "SingleResizeHandle",
+	inheritAttrs: !1,
+	__name: "SingleResizeHandle",
+	props: { direction: {} },
+	emits: ["start"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, a = w(), s = r(() => [
+			"semi-resizable-resizableHandler",
+			`semi-resizable-resizableHandler-${n.direction}`,
+			a.class
+		]);
+		function c(e) {
+			i("start", e, n.direction, "mouse");
+		}
+		function l(e) {
+			let t = e.targetTouches[0];
+			t && i("start", t, n.direction, "touch");
+		}
+		return (e, t) => (v(), o("div", {
+			class: p(s.value),
+			style: h(C(a).style),
+			onMousedown: c,
+			onTouchstart: l
+		}, [x(e.$slots, "default")], 38));
+	}
+}), K = [
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"topRight",
+	"bottomRight",
+	"bottomLeft",
+	"topLeft"
+];
+//#endregion
+//#region src/resizable/use-single-resize.ts
+function q(e, t, n) {
+	let i = e.size ?? e.defaultSize ?? {}, a = S({
+		isResizing: !1,
+		direction: "right",
+		original: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		width: i.width ?? "auto",
+		height: i.height ?? "auto",
+		backgroundStyle: { cursor: "auto" }
+	}), o = /* @__PURE__ */ new Map();
+	function s() {
+		return n.value?.ownerDocument.defaultView ?? null;
+	}
+	function c() {
+		return {
+			...e,
+			snap: e.snap === void 0 ? void 0 : {
+				...e.snap.x === void 0 ? {} : { x: [...e.snap.x] },
+				...e.snap.y === void 0 ? {} : { y: [...e.snap.y] }
+			},
+			onResizeStart: (n, r) => {
+				if (e.beforeResizeStart?.(n, r) === !1) return !1;
+				t("resizeStart", n, r);
+			},
+			onChange: (e, n, r) => {
+				t("change", e, n, r), t("update:size", e);
+			},
+			onResizeEnd: (e, n, r) => {
+				t("resizeEnd", e, n, r);
+			}
+		};
+	}
+	let l = u(new H({
+		getContext: () => void 0,
+		getContexts: () => void 0,
+		getProp: (e) => c()[e],
+		getProps: c,
+		getState: (e) => a[e],
+		getStates: () => a,
+		setState: (e, t) => {
+			Object.assign(a, e), t?.();
+		},
+		getCache: (e) => o.get(e),
+		getCaches: () => o,
+		setCache: (e, t) => o.set(String(e), t),
+		stopPropagation: (e) => e?.stopPropagation?.(),
+		persistEvent: () => void 0,
+		getResizable: () => n.value,
+		registerEvent: (e = "mouse") => {
+			let t = s();
+			t && (e === "mouse" ? (t.addEventListener("mouseup", l.onMouseUp), t.addEventListener("mousemove", l.onMouseMove), t.addEventListener("mouseleave", l.onMouseUp)) : (t.addEventListener("touchmove", l.onTouchMove, { passive: !1 }), t.addEventListener("touchend", l.onMouseUp), t.addEventListener("touchcancel", l.onMouseUp)));
+		},
+		unregisterEvent: (e = "mouse") => {
+			let t = s();
+			t && (e === "mouse" ? (t.removeEventListener("mouseup", l.onMouseUp), t.removeEventListener("mousemove", l.onMouseMove), t.removeEventListener("mouseleave", l.onMouseUp)) : (t.removeEventListener("touchmove", l.onTouchMove), t.removeEventListener("touchend", l.onMouseUp), t.removeEventListener("touchcancel", l.onMouseUp)));
+		}
+	})), d = r(() => ({
+		...l.sizeStyle,
+		...a.flexBasis === void 0 ? {} : { flexBasis: a.flexBasis }
+	})), f = (e) => typeof e == "number" ? `${e}px` : e, p = r(() => ({
+		userSelect: a.isResizing ? "none" : "auto",
+		minWidth: f(e.minWidth),
+		minHeight: f(e.minHeight),
+		maxWidth: f(e.maxWidth),
+		maxHeight: f(e.maxHeight)
+	}));
+	function m(e, t, n) {
+		l.onResizeStart(e, t, n);
+	}
+	return _(() => l.init()), g(() => l.destroy()), {
+		state: a,
+		sizeStyle: d,
+		constraintStyle: p,
+		startResize: m
+	};
+}
+//#endregion
+//#region src/resizable/Resizable.vue
+var J = /* @__PURE__ */ c({
+	name: "Resizable",
+	inheritAttrs: !1,
+	__name: "Resizable",
+	props: {
+		size: {},
+		defaultSize: {},
+		minWidth: {},
+		minHeight: {},
+		maxWidth: {},
+		maxHeight: {},
+		grid: { default: () => [1, 1] },
+		snap: {},
+		snapGap: { default: 0 },
+		boundElement: {},
+		boundsByDirection: {
+			type: Boolean,
+			default: !1
+		},
+		lockAspectRatio: {
+			type: [Boolean, Number],
+			default: !1
+		},
+		lockAspectRatioExtraWidth: { default: 0 },
+		lockAspectRatioExtraHeight: { default: 0 },
+		enable: {
+			type: [Object, Boolean],
+			default: () => ({})
+		},
+		handleStyle: {},
+		handleClass: {},
+		handleWrapperStyle: {},
+		handleWrapperClass: {},
+		handleNode: {},
+		scale: { default: 1 },
+		ratio: { default: 1 },
+		beforeResizeStart: {}
+	},
+	emits: [
+		"resizeStart",
+		"change",
+		"resizeEnd",
+		"update:size"
+	],
+	setup(e, { emit: t }) {
+		let c = e, l = t, u = w(), f = T("root"), { state: g, sizeStyle: _, constraintStyle: y, startResize: S } = q(c, l, f), E = r(() => Object.fromEntries(Object.entries(u).filter(([e]) => e !== "class" && e !== "style"))), O = r(() => ({
+			...c.handleWrapperClass ? { class: c.handleWrapperClass } : {},
+			...c.handleWrapperStyle ? { style: c.handleWrapperStyle } : {}
+		}));
+		return (e, t) => (v(), o("div", d(E.value, {
+			ref_key: "root",
+			ref: f,
+			class: [C(u).class, "semi-resizable-resizable"],
+			style: [
+				C(y),
+				C(u).style,
+				C(_)
+			]
+		}), [
+			C(g).isResizing ? (v(), o("div", {
+				key: 0,
+				class: "semi-resizable-background",
+				style: h({ cursor: C(g).backgroundStyle.cursor })
+			}, null, 4)) : a("", !0),
+			x(e.$slots, "default"),
+			c.enable === !1 ? a("", !0) : (v(), o("div", m(d({ key: 1 }, O.value)), [(v(!0), o(n, null, b(C(K), (t) => (v(), o(n, { key: t }, [c.enable?.[t] === !1 ? a("", !0) : (v(), i(G, {
+				key: 0,
+				direction: t,
+				class: p(c.handleClass?.[t]),
+				style: h(c.handleStyle?.[t]),
+				onStart: C(S)
+			}, {
+				default: D(() => [x(e.$slots, `handle-${t}`, {}, () => [s(C(W), { content: c.handleNode?.[t] }, null, 8, ["content"])])]),
+				_: 2
+			}, 1032, [
+				"direction",
+				"class",
+				"style",
+				"onStart"
+			]))], 64))), 128))], 16))
+		], 16));
+	}
+}), Y = Symbol("resize-group");
+//#endregion
+//#region src/resizable/use-resize-group.ts
+function X(e, t) {
+	let n = S([]), r = S([]), i = S({
+		isResizing: !1,
+		originalPosition: {
+			x: 0,
+			y: 0,
+			lastItemSize: 0,
+			nextItemSize: 0,
+			lastOffset: 0,
+			nextOffset: 0
+		},
+		backgroundStyle: { cursor: "auto" },
+		curHandler: null
+	}), a = /* @__PURE__ */ new Map(), o = !1;
+	function s() {
+		return t.value?.ownerDocument.defaultView ?? null;
+	}
+	function c() {
+		return { direction: e.value };
+	}
+	let l = {
+		getContext: () => void 0,
+		getContexts: () => void 0,
+		getProp: (e) => c()[e],
+		getProps: c,
+		getState: (e) => i[e],
+		getStates: () => i,
+		setState: (e, t) => {
+			Object.assign(i, e), t?.();
+		},
+		getCache: (e) => a.get(e),
+		getCaches: () => a,
+		setCache: (e, t) => a.set(String(e), t),
+		stopPropagation: (e) => e?.stopPropagation?.(),
+		persistEvent: () => void 0,
+		getGroupRef: () => t.value,
+		getItem: (e) => n[e].element,
+		getItemCount: () => n.length,
+		getHandler: (e) => r[e].element,
+		getHandlerCount: () => r.length,
+		getItemMin: (e) => n[e]?.min,
+		getItemMax: (e) => n[e]?.max,
+		getItemStart: (e) => n[e].onResizeStart,
+		getItemChange: (e) => n[e].onChange,
+		getItemEnd: (e) => n[e].onResizeEnd,
+		getItemDefaultSize: (e) => n[e]?.defaultSize,
+		registerEvents: (e = "mouse") => {
+			let t = s();
+			t && (e === "mouse" ? (t.addEventListener("mousemove", d.onMouseMove), t.addEventListener("mouseup", d.onResizeEnd), t.addEventListener("mouseleave", d.onResizeEnd)) : (t.addEventListener("touchmove", d.onTouchMove, { passive: !1 }), t.addEventListener("touchend", d.onResizeEnd), t.addEventListener("touchcancel", d.onResizeEnd)));
+		},
+		unregisterEvents: (e = "mouse") => {
+			let t = s();
+			t && (e === "mouse" ? (t.removeEventListener("mousemove", d.onMouseMove), t.removeEventListener("mouseup", d.onResizeEnd), t.removeEventListener("mouseleave", d.onResizeEnd)) : (t.removeEventListener("touchmove", d.onTouchMove), t.removeEventListener("touchend", d.onResizeEnd), t.removeEventListener("touchcancel", d.onResizeEnd)));
+		}
+	}, d = u(new U(l));
+	function p() {
+		o && t.value && f(() => d.initSpace());
+	}
+	function m(e) {
+		n.some((t) => t.id === e.id) || (n.push(e), p());
+	}
+	function h(e) {
+		let t = n.findIndex((t) => t.id === e);
+		t >= 0 && n.splice(t, 1), p();
+	}
+	function v(e) {
+		r.some((t) => t.id === e.id) || (r.push(e), p());
+	}
+	function y(e) {
+		let t = r.findIndex((t) => t.id === e);
+		t >= 0 && r.splice(t, 1), p();
+	}
+	function b(e, t, i) {
+		let a = r.findIndex((t) => t.id === e);
+		a < 0 || !n[a] || !n[a + 1] || d.onResizeStart(a, t, i);
+	}
+	return E(e, async (e) => {
+		d.direction = e;
+		for (let t of n) e === "horizontal" ? (t.element.style.width = t.element.style.height, t.element.style.removeProperty("height")) : (t.element.style.height = t.element.style.width, t.element.style.removeProperty("width"));
+		await f();
+	}), _(() => {
+		o = !0, d.init(), s()?.addEventListener("resize", d.ensureConstraint);
+	}), g(() => {
+		o = !1, s()?.removeEventListener("resize", d.ensureConstraint), l.unregisterEvents("mouse"), l.unregisterEvents("touch"), d.destroy();
+	}), {
+		state: i,
+		context: {
+			direction: e,
+			registerItem: m,
+			unregisterItem: h,
+			registerHandler: v,
+			unregisterHandler: y,
+			startResize: b
+		}
+	};
+}
+//#endregion
+//#region src/resizable/ResizeGroup.vue
+var Z = /* @__PURE__ */ c({
+	name: "ResizeGroup",
+	inheritAttrs: !1,
+	__name: "ResizeGroup",
+	props: { direction: { default: "horizontal" } },
+	setup(e) {
+		let t = e, n = w(), i = T("root"), { state: s, context: c } = X(r(() => t.direction), i);
+		y(Y, c);
+		let l = r(() => Object.fromEntries(Object.entries(n).filter(([e]) => e !== "class" && e !== "style")));
+		return (e, r) => (v(), o("div", d(l.value, {
+			ref_key: "root",
+			ref: i,
+			class: [C(n).class, "semi-resizable-group"],
+			style: [{ flexDirection: t.direction === "vertical" ? "column" : "row" }, C(n).style]
+		}), [C(s).isResizing ? (v(), o("div", {
+			key: 0,
+			class: "semi-resizable-background",
+			style: h({ cursor: C(s).backgroundStyle.cursor })
+		}, null, 4)) : a("", !0), x(e.$slots, "default")], 16));
+	}
+}), Q = /* @__PURE__ */ c({
+	name: "ResizeHandler",
+	inheritAttrs: !1,
+	__name: "ResizeHandler",
+	setup(e) {
+		let t = w(), n = T("root"), i = l(Y);
+		if (!i) throw Error("please make sure <ResizeHandler> inside <ResizeGroup>");
+		let a = i, c = Symbol("resize-handler"), u = r(() => [
+			t.class,
+			"semi-resizable-handler",
+			`semi-resizable-handler-${a.direction.value}`
+		]);
+		function d(e) {
+			a.startResize(c, e, "mouse");
+		}
+		function f(e) {
+			let t = e.targetTouches[0];
+			t && a.startResize(c, t, "touch");
+		}
+		return _(() => {
+			n.value && a.registerHandler({
+				id: c,
+				element: n.value
+			});
+		}), g(() => a.unregisterHandler(c)), (e, r) => (v(), o("div", {
+			ref_key: "root",
+			ref: n,
+			class: p(u.value),
+			style: h(C(t).style),
+			onMousedown: d,
+			onTouchstart: f
+		}, [x(e.$slots, "default", {}, () => [s(C(O), {
+			size: "inherit",
+			style: h({ rotate: C(a).direction.value === "horizontal" ? "0deg" : "90deg" })
+		}, null, 8, ["style"])])], 38));
+	}
+}), $ = /* @__PURE__ */ c({
+	name: "ResizeItem",
+	inheritAttrs: !1,
+	__name: "ResizeItem",
+	props: {
+		min: {},
+		max: {},
+		defaultSize: {}
+	},
+	emits: [
+		"resizeStart",
+		"change",
+		"resizeEnd"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = w(), a = T("root"), s = l(Y);
+		if (!s) throw Error("please make sure <ResizeItem> inside <ResizeGroup>");
+		let c = Symbol("resize-item");
+		return _(() => {
+			a.value && s.registerItem({
+				id: c,
+				element: a.value,
+				...n.min === void 0 ? {} : { min: n.min },
+				...n.max === void 0 ? {} : { max: n.max },
+				...n.defaultSize === void 0 ? {} : { defaultSize: n.defaultSize },
+				onResizeStart: (e, t) => r("resizeStart", e, t),
+				onChange: (e, t, n) => r("change", e, t, n),
+				onResizeEnd: (e, t, n) => r("resizeEnd", e, t, n)
+			});
+		}), g(() => s.unregisterItem(c)), (e, t) => (v(), o("div", {
+			ref_key: "root",
+			ref: a,
+			class: p([C(i).class, "semi-resizable-item"]),
+			style: h(C(i).style)
+		}, [x(e.$slots, "default")], 6));
+	}
+});
+//#endregion
+export { J as i, Q as n, Z as r, $ as t };