@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system210.js

@@ -1,170 +1,419 @@
-import { BTooltipPlacement as e, BTooltipTrigger as t } from "./design-system3.js";
-import { useComponentId as n } from "./design-system10.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, watch as b } from "vue";
-//#region src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-describedby"], S = ["id"], ee = {
-	key: 0,
-	class: "b-tooltip__arrow",
-	"aria-hidden": "true"
-}, C = /* @__PURE__ */ l({
-	__name: "BTooltip",
+import { useComponentId as e } from "./design-system10.js";
+import t from "./design-system208.js";
+import { BSplitterContextKey as n } from "./design-system209.js";
+import { Fragment as r, camelize as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, h as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, onMounted as ee, openBlock as h, provide as te, ref as g, renderList as ne, renderSlot as _, resolveDynamicComponent as re, unref as v, useSlots as ie, watch as y, withModifiers as b } from "vue";
+//#region src/components/BSplitter/BSplitter.vue?vue&type=script&setup=true&lang.ts
+var ae = ["data-orientation"], oe = ["id"], se = [
+	"tabindex",
+	"aria-orientation",
+	"aria-controls",
+	"aria-valuenow",
+	"aria-disabled",
+	"aria-label",
+	"onMousedown",
+	"onTouchstart",
+	"onKeydown",
+	"onDblclick"
+], ce = {
+	"aria-hidden": "true",
+	class: "b-splitter__handle"
+}, le = [
+	"aria-label",
+	"aria-expanded",
+	"onClick"
+], ue = [
+	"aria-label",
+	"aria-expanded",
+	"onClick"
+], x = 6, S = 10, C = /* @__PURE__ */ u({
+	name: "BSplitter",
+	inheritAttrs: !1,
+	__name: "BSplitter",
 	props: {
-		title: {},
-		trigger: { default: () => t.Hover },
-		placement: { default: () => e.TopCenter },
-		arrow: {
-			type: Boolean,
-			default: !0
-		},
-		color: {},
-		mouseEnterDelay: { default: 100 },
-		mouseLeaveDelay: { default: 100 },
-		destroyTooltipOnHide: {
+		vertical: {
 			type: Boolean,
 			default: !1
 		},
-		zIndex: { default: 1070 },
-		fresh: {
+		orientation: {},
+		lazy: {
 			type: Boolean,
 			default: !1
 		},
-		autoAdjustOverflow: { type: Boolean },
-		modelValue: {
-			type: Boolean,
-			default: () => void 0
-		},
-		toggleClass: {},
-		tooltipClass: {},
-		tooltipInnerClass: {}
+		collapsible: {}
 	},
-	emits: ["openChange", "update:modelValue"],
-	setup(l, { expose: C, emit: w }) {
-		let T = w, { componentUID: E } = n(), D = y(), O = h(!1), k = i(() => l.modelValue === void 0 ? O.value : l.modelValue), A = h(!1), j = i(() => l.fresh || l.destroyTooltipOnHide ? k.value : A.value || k.value);
-		b(k, (e) => {
-			e && (A.value = !0);
-		});
-		let M = null, N = null;
-		function P() {
-			M &&= (clearTimeout(M), null), N &&= (clearTimeout(N), null);
-		}
-		function F(e = 0) {
-			P(), !k.value && (e > 0 ? M = setTimeout(() => L(), e) : L());
-		}
-		function I(e = 0) {
-			P(), k.value && (e > 0 ? N = setTimeout(() => R(), e) : R());
+	emits: [
+		"resize",
+		"resizeStart",
+		"resizeEnd",
+		"collapse",
+		"draggerDoubleClick"
+	],
+	setup(C, { expose: de, emit: fe }) {
+		let w = u({
+			name: "BSplitterVNodeRenderer",
+			props: { nodes: {
+				type: Array,
+				default: () => []
+			} },
+			setup(e) {
+				return () => e.nodes && e.nodes.length ? d(r, null, e.nodes) : null;
+			}
+		}), T = fe, pe = ie(), { componentUID: E } = e(), D = a(() => C.orientation ?? (C.vertical ? "vertical" : "horizontal")), O = a(() => D.value === "vertical");
+		te(n, { orientation: D.value });
+		function k(e) {
+			let t = [];
+			for (let n of e) n.type === r && Array.isArray(n.children) ? t.push(...k(n.children)) : t.push(n);
+			return t;
 		}
-		function L() {
-			V.value?.showPopover();
+		let A = a(() => {
+			let e = pe.default?.();
+			if (!e) return [];
+			let n = k(e), r = [], a = 0;
+			for (let e of n) {
+				if (e.type !== t) continue;
+				let n = e.props ?? {}, o = {};
+				for (let e in n) o[i(e)] = n[e];
+				let s = e.children?.default?.(), c = s ? Array.isArray(s) ? s : [s] : void 0, l = !1, u = o.collapsible;
+				u === !0 || u === "" || u === "true" ? l = {
+					start: !0,
+					end: !0
+				} : u && typeof u == "object" && (l = u);
+				let d = o.resizable, f = d === void 0 ? !0 : !(d === !1 || d === "false"), p = o.destroyOnHidden, m = p === !0 || p === "" || p === "true";
+				r.push({
+					index: a++,
+					size: o.size,
+					defaultSize: o.defaultSize,
+					min: o.min,
+					max: o.max,
+					resizable: f,
+					collapsible: l,
+					destroyOnHidden: m,
+					content: c
+				});
+			}
+			return r;
+		}), j = g(null), M = g(0), N = g([]), P = g([]), F = g([]), I = g([]);
+		function L(e, t, n = NaN) {
+			if (e == null) return n;
+			if (typeof e == "number") return e;
+			let r = e.trim();
+			if (r.endsWith("%")) {
+				let e = parseFloat(r);
+				return isFinite(e) ? e / 100 * t : n;
+			}
+			if (r.endsWith("px")) return parseFloat(r);
+			let i = parseFloat(r);
+			return isFinite(i) ? i : n;
 		}
 		function R() {
-			V.value?.hidePopover();
+			let e = M.value, t = Math.max(A.value.length - 1, 0) * x;
+			return Math.max(e - t, 0);
 		}
-		function z(e) {
-			l.modelValue === void 0 ? O.value = e : T("update:modelValue", e), T("openChange", e);
+		function me() {
+			let e = A.value, t = R();
+			if (e.length === 0 || t <= 0) return e.map(() => 0);
+			let n = Array.from({ length: e.length }, () => NaN), r = 0;
+			e.forEach((e, i) => {
+				let a = L(e.size ?? e.defaultSize, t);
+				isNaN(a) || (n[i] = a, r += a);
+			});
+			let i = n.map((e, t) => isNaN(e) ? t : -1).filter((e) => e >= 0);
+			if (i.length > 0) {
+				let e = Math.max(t - r, 0) / i.length;
+				i.forEach((t) => n[t] = e);
+			}
+			return z(n, t);
 		}
-		let B = ({ newState: e }) => {
-			z(e === "open");
-		}, V = h(null), H = h(null);
-		function U() {
-			k.value ? I() : F();
+		function z(e, t) {
+			let n = A.value, r = e.map((e, r) => {
+				let i = L(n[r]?.min, t, 0), a = L(n[r]?.max, t, Infinity);
+				return Math.min(Math.max(e, i), a);
+			}), i = r.reduce((e, t) => e + t, 0);
+			if (i === 0 || t === 0) return r;
+			let a = t / i;
+			return r.map((e) => e * a);
 		}
-		function W() {
-			F(l.mouseEnterDelay);
+		function B() {
+			let e = A.value;
+			P.value.length !== e.length && (P.value = e.map(() => !1), F.value = e.map(() => null), I.value = e.map(() => null)), N.value = me();
 		}
-		function G() {
-			I(l.mouseLeaveDelay);
+		y(() => A.value.map((e) => `${e.size ?? ""}`).join("|"), () => {
+			M.value > 0 && B();
+		}), y(() => A.value.length, () => {
+			M.value > 0 && B();
+		});
+		let V = null;
+		ee(() => {
+			j.value && (H(), B(), typeof ResizeObserver < "u" && (V = new ResizeObserver(() => {
+				let e = M.value;
+				if (H(), e > 0 && M.value > 0 && N.value.length > 0) {
+					let t = R() / Math.max(e - x * (N.value.length - 1), 1);
+					N.value = z(N.value.map((e) => e * t), R());
+				} else B();
+			}), V.observe(j.value)));
+		}), m(() => {
+			V?.disconnect(), V = null, X();
+		});
+		function H() {
+			j.value && (M.value = O.value ? j.value.clientHeight : j.value.clientWidth);
+		}
+		let U = g(null), W = g(null);
+		function G(e) {
+			if ("touches" in e) {
+				let t = e.touches[0] ?? e.changedTouches[0];
+				return O.value ? t.clientY : t.clientX;
+			}
+			return O.value ? e.clientY : e.clientX;
 		}
-		function K() {
-			F();
+		function K(e, t) {
+			Z(e) && (t.preventDefault(), U.value = {
+				draggerIndex: e,
+				startCoord: G(t),
+				startSizes: [...N.value],
+				previewDelta: 0
+			}, W.value = C.lazy ? 0 : null, T("resizeStart", [...N.value]), document.addEventListener("mousemove", J), document.addEventListener("mouseup", Y), document.addEventListener("touchmove", J, { passive: !1 }), document.addEventListener("touchend", Y));
 		}
-		function q() {
-			I();
+		function q(e, t, n) {
+			let r = A.value, i = R(), a = [...e], o = t, s = t + 1, c = L(r[o]?.min, i, 0), l = L(r[o]?.max, i, Infinity), u = L(r[s]?.min, i, 0), d = L(r[s]?.max, i, Infinity), f = a[o] + n, p = a[s] - n;
+			return f < c && (p -= c - f, f = c), f > l && (p += f - l, f = l), p < u && (f -= u - p, p = u), p > d && (f += p - d, p = d), f = Math.min(Math.max(f, c), l), p = Math.min(Math.max(p, u), d), a[o] = f, a[s] = p, a;
 		}
 		function J(e) {
-			e.key === "Escape" && k.value && (e.preventDefault(), I(), H.value?.focus());
+			if (!U.value) return;
+			"touches" in e && e.preventDefault();
+			let t = G(e) - U.value.startCoord;
+			if (C.lazy) {
+				W.value = t;
+				return;
+			}
+			let n = q(U.value.startSizes, U.value.draggerIndex, t);
+			N.value = n, T("resize", [...n]);
 		}
-		function Y() {
-			l.trigger === t.Hover && P();
+		function Y(e) {
+			if (!U.value) return;
+			let t = ("changedTouches" in e, G(e)) - U.value.startCoord;
+			if (C.lazy) {
+				let e = q(U.value.startSizes, U.value.draggerIndex, t);
+				N.value = e, T("resize", [...e]);
+			}
+			T("resizeEnd", [...N.value]), U.value = null, W.value = null, X();
 		}
 		function X() {
-			l.trigger === t.Hover && I(l.mouseLeaveDelay);
+			document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", Y), document.removeEventListener("touchmove", J), document.removeEventListener("touchend", Y);
+		}
+		function Z(e) {
+			let t = A.value[e], n = A.value[e + 1];
+			return !!(t?.resizable && n?.resizable);
 		}
-		function Z() {
-			let e = H.value;
-			if (e) switch (e.addEventListener("keydown", J), l.trigger) {
-				case t.Click:
-					e.addEventListener("click", U);
+		function he(e) {
+			T("draggerDoubleClick", e);
+		}
+		function ge(e, t) {
+			if (!Z(e)) return;
+			let n = 0;
+			switch (t.key) {
+				case "ArrowLeft":
+					n = O.value ? 0 : -S;
+					break;
+				case "ArrowRight":
+					n = O.value ? 0 : S;
 					break;
-				case t.Focus:
-					e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+				case "ArrowUp":
+					n = O.value ? -S : 0;
 					break;
-				case t.Hover:
-				default:
-					e.addEventListener("mouseenter", W), e.addEventListener("mouseleave", G), e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+				case "ArrowDown":
+					n = O.value ? S : 0;
 					break;
+				case "Home": {
+					let t = R(), r = A.value[e];
+					n = -(N.value[e] - L(r?.min, t, 0));
+					break;
+				}
+				case "End": {
+					let t = R(), r = A.value[e + 1];
+					n = N.value[e + 1] - L(r?.min, t, 0);
+					break;
+				}
+				case "Enter":
+				case " ":
+					t.preventDefault(), _e(e);
+					return;
+				default: return;
 			}
+			if (n === 0) return;
+			t.preventDefault(), T("resizeStart", [...N.value]);
+			let r = q(N.value, e, n);
+			N.value = r, T("resize", [...r]), T("resizeEnd", [...r]);
 		}
-		function Q() {
-			let e = H.value;
-			e && (e.removeEventListener("keydown", J), e.removeEventListener("click", U), e.removeEventListener("focusin", K), e.removeEventListener("focusout", q), e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", G));
-		}
-		p(() => {
-			Z();
-		}), f(() => {
-			Q(), P();
-		}), b(() => l.trigger, () => {
-			Q(), Z();
-		}), b(() => l.modelValue, (e) => {
-			e !== void 0 && (e ? V.value?.showPopover() : V.value?.hidePopover());
-		});
-		let $ = i(() => `--b-tooltip-anchor-${E.value}`), te = i(() => ({
-			[e.TopLeft]: "top-left",
-			[e.TopCenter]: "top-center",
-			[e.TopRight]: "top-right",
-			[e.RightTop]: "right-top",
-			[e.RightCenter]: "right-center",
-			[e.RightBottom]: "right-bottom",
-			[e.BottomRight]: "bottom-right",
-			[e.BottomCenter]: "bottom-center",
-			[e.BottomLeft]: "bottom-left",
-			[e.LeftBottom]: "left-bottom",
-			[e.LeftCenter]: "left-center",
-			[e.LeftTop]: "left-top"
-		})[l.placement] ?? "top-center"), ne = i(() => {
-			if (l.color) return {
-				"--b-tooltip-bg": l.color,
-				"--b-tooltip-arrow-color": l.color
+		function _e(e) {
+			let t = A.value[e], n = A.value[e + 1];
+			t?.collapsible ? Q(e, "start") : n?.collapsible && Q(e + 1, "end");
+		}
+		function Q(e, t) {
+			if (!A.value[e]) return;
+			let n = R(), r = [...N.value], i = t === "start" ? e + 1 : e - 1;
+			if (P.value[e]) {
+				let t = F.value[e] ?? n / A.value.length;
+				if (i >= 0 && i < r.length) {
+					let n = Math.min(t, r[i]);
+					r[e] = n, r[i] -= n;
+				} else r[e] = t;
+				P.value = P.value.map((t, n) => n === e ? !1 : t), F.value = F.value.map((t, n) => n === e ? null : t), I.value = I.value.map((t, n) => n === e ? null : t);
+			} else F.value = F.value.map((t, n) => n === e ? r[e] : t), i >= 0 && i < r.length && (r[i] += r[e]), r[e] = 0, P.value = P.value.map((t, n) => n === e ? !0 : t), I.value = I.value.map((n, r) => r === e ? t : n);
+			N.value = r, T("resize", [...r]), T("resizeEnd", [...r]), T("collapse", [...P.value], [...r]);
+		}
+		function ve(e) {
+			return A.value[e]?.collapsible ? A.value[e].collapsible : null;
+		}
+		function ye(e) {
+			return A.value[e + 1]?.collapsible ? A.value[e + 1].collapsible : null;
+		}
+		function be(e) {
+			let t = N.value, n = t[e] ?? 0, r = t[e + 1] ?? 0, i = !!ve(e)?.start && n > 0 && r > 0, a = !!P.value[e + 1] && I.value[e + 1] === "end" && n > 0;
+			return i || a;
+		}
+		function xe(e) {
+			let t = N.value, n = t[e] ?? 0, r = t[e + 1] ?? 0, i = !!ye(e)?.end && r > 0 && n > 0, a = !!P.value[e] && I.value[e] === "start" && r > 0;
+			return i || a;
+		}
+		function $(e) {
+			P.value[e + 1] && I.value[e + 1] === "end" ? Q(e + 1, "end") : Q(e, "start");
+		}
+		function Se(e) {
+			P.value[e] && I.value[e] === "start" ? Q(e, "start") : Q(e + 1, "end");
+		}
+		function Ce(e) {
+			return P.value[e + 1] && I.value[e + 1] === "end" ? `Expand panel ${e + 2}` : `Collapse panel ${e + 1}`;
+		}
+		function we(e) {
+			return P.value[e] && I.value[e] === "start" ? `Expand panel ${e + 1}` : `Collapse panel ${e + 2}`;
+		}
+		let Te = a(() => C.collapsible?.motion !== !1);
+		function Ee(e) {
+			let t = `${N.value[e] ?? 0}px`;
+			return O.value ? {
+				height: t,
+				flex: `0 0 ${t}`
+			} : {
+				width: t,
+				flex: `0 0 ${t}`
 			};
+		}
+		function De(e) {
+			let t = R();
+			if (t === 0) return 0;
+			let n = N.value.slice(0, e + 1).reduce((e, t) => e + t, 0);
+			return Math.round(n / t * 100);
+		}
+		let Oe = a(() => {
+			if (!C.lazy || !U.value || W.value === null) return;
+			let e = U.value.draggerIndex, t = U.value.startSizes.slice(0, e + 1).reduce((e, t) => e + t, 0) + e * x + W.value;
+			return O.value ? { top: `${t}px` } : { left: `${t}px` };
 		});
-		return C({
-			open: L,
-			close: R
-		}), (e, t) => (m(), o(r, null, [s("div", {
-			ref_key: "toggleRef",
-			ref: H,
-			class: u(["b-tooltip__toggle", l.toggleClass]),
-			style: d({ anchorName: $.value }),
-			"aria-describedby": k.value ? v(D) : void 0
-		}, [g(e.$slots, "default")], 14, x), s("div", {
-			ref_key: "tooltipRef",
-			ref: V,
-			popover: "manual",
-			class: u([
-				"b-tooltip__content",
-				te.value,
-				{ "b-tooltip__content--no-arrow": !l.arrow },
-				l.tooltipClass
-			]),
-			style: d([{
-				zIndex: l.zIndex,
-				positionAnchor: $.value
-			}, ne.value]),
-			role: "tooltip",
-			id: v(D),
-			onToggle: B,
-			onMouseenter: Y,
-			onMouseleave: X
-		}, [j.value || !l.destroyTooltipOnHide ? (m(), o(r, { key: 0 }, [l.arrow ? (m(), o("div", ee)) : a("", !0), s("div", { class: u(["b-tooltip__inner", l.tooltipInnerClass]) }, [g(e.$slots, "title", {}, () => [c(_(l.title), 1)])], 2)], 64)) : a("", !0)], 46, S)], 64));
+		function ke() {
+			return [...N.value];
+		}
+		function Ae(e) {
+			e.length === N.value.length && (N.value = z(e, R()), T("resize", [...N.value]));
+		}
+		de({
+			getSizes: ke,
+			setSizes: Ae
+		});
+		function je(e, t) {
+			let n = (N.value[t] ?? 0) <= 0;
+			return e.destroyOnHidden && n ? null : e.content ?? null;
+		}
+		return (e, t) => (h(), c("div", {
+			ref_key: "rootRef",
+			ref: j,
+			class: f(["b-splitter", {
+				"b-splitter--horizontal": !O.value,
+				"b-splitter--vertical": O.value,
+				"b-splitter--lazy": C.lazy,
+				"b-splitter--motion": Te.value,
+				"b-splitter--dragging": U.value !== null
+			}]),
+			"data-orientation": D.value
+		}, [(h(!0), c(r, null, ne(A.value, (n, i) => (h(), c(r, { key: `panel-${v(E)}-${i}` }, [l("div", {
+			id: `b-splitter-${v(E)}-panel-${i}`,
+			class: f(["b-splitter__panel", { "b-splitter__panel--collapsed": (N.value[i] ?? 0) <= 0 }]),
+			style: p(Ee(i)),
+			role: "group"
+		}, [(h(), o(re(v(w)), { nodes: je(n, i) }, null, 8, ["nodes"]))], 14, oe), i < A.value.length - 1 ? (h(), c("div", {
+			key: 0,
+			class: f(["b-splitter__divider", { "b-splitter__divider--disabled": !Z(i) }])
+		}, [
+			l("div", {
+				class: f(["b-splitter__dragger", {
+					"b-splitter__dragger--disabled": !Z(i),
+					"b-splitter__dragger--active": U.value && U.value.draggerIndex === i
+				}]),
+				role: "separator",
+				tabindex: Z(i) ? 0 : -1,
+				"aria-orientation": O.value ? "horizontal" : "vertical",
+				"aria-controls": `b-splitter-${v(E)}-panel-${i} b-splitter-${v(E)}-panel-${i + 1}`,
+				"aria-valuenow": De(i),
+				"aria-valuemin": "0",
+				"aria-valuemax": "100",
+				"aria-disabled": !Z(i) || void 0,
+				"aria-label": `Resize panel ${i + 1}`,
+				onMousedown: (e) => K(i, e),
+				onTouchstart: (e) => K(i, e),
+				onKeydown: (e) => ge(i, e),
+				onDblclick: (e) => he(i)
+			}, [l("span", ce, [_(e.$slots, "draggerIcon")])], 42, se),
+			be(i) ? (h(), c("button", {
+				key: 0,
+				type: "button",
+				class: "b-splitter__collapse-btn b-splitter__collapse-btn--start",
+				"aria-label": Ce(i),
+				"aria-expanded": !(P.value[i + 1] && I.value[i + 1] === "end"),
+				onMousedown: t[0] ||= b(() => {}, ["stop"]),
+				onTouchstart: t[1] ||= b(() => {}, ["stop"]),
+				onClick: b((e) => $(i), ["stop"])
+			}, [_(e.$slots, "collapseIconStart", {}, () => [t[4] ||= l("svg", {
+				"aria-hidden": "true",
+				class: "b-splitter__chevron b-splitter__chevron--start",
+				viewBox: "0 0 8 8",
+				width: "8",
+				height: "8"
+			}, [l("polyline", {
+				points: "5,1 2,4 5,7",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.5",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)])], 40, le)) : s("", !0),
+			xe(i) ? (h(), c("button", {
+				key: 1,
+				type: "button",
+				class: "b-splitter__collapse-btn b-splitter__collapse-btn--end",
+				"aria-label": we(i),
+				"aria-expanded": !(P.value[i] && I.value[i] === "start"),
+				onMousedown: t[2] ||= b(() => {}, ["stop"]),
+				onTouchstart: t[3] ||= b(() => {}, ["stop"]),
+				onClick: b((e) => Se(i), ["stop"])
+			}, [_(e.$slots, "collapseIconEnd", {}, () => [t[5] ||= l("svg", {
+				"aria-hidden": "true",
+				class: "b-splitter__chevron b-splitter__chevron--end",
+				viewBox: "0 0 8 8",
+				width: "8",
+				height: "8"
+			}, [l("polyline", {
+				points: "3,1 6,4 3,7",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.5",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)])], 40, ue)) : s("", !0)
+		], 2)) : s("", !0)], 64))), 128)), C.lazy && U.value && W.value !== null ? (h(), c("div", {
+			key: 0,
+			class: "b-splitter__lazy-indicator",
+			style: p(Oe.value),
+			"aria-hidden": "true"
+		}, null, 4)) : s("", !0)], 10, ae));
 	}
 });
 //#endregion