@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system204.js

@@ -1,422 +1,103 @@
-import { useComponentId as e } from "./design-system10.js";
-import t from "./design-system202.js";
-import { BSplitterContextKey as n } from "./design-system203.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",
+import { BSpinSize as e } from "./design-system3.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createStaticVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useSlots as b, watch as x, withCtx as S } from "vue";
+//#region src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-label", "aria-describedby"], w = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, T = ["id"], E = ["aria-label", "aria-describedby"], D = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, O = ["id"], k = ["aria-label", "aria-describedby"], A = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, j = ["id"], M = ["aria-busy", "inert"], N = /* @__PURE__ */ f({
+	__name: "BSpin",
 	props: {
-		vertical: {
+		spinning: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		orientation: {},
-		lazy: {
+		size: { default: () => e.Default },
+		tip: { default: "" },
+		delay: { default: 0 },
+		fullscreen: {
 			type: Boolean,
 			default: !1
-		},
-		collapsible: {}
-	},
-	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;
-		}
-		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() {
-			let e = M.value, t = Math.max(A.value.length - 1, 0) * x;
-			return Math.max(e - t, 0);
-		}
-		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);
-		}
-		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 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();
-		}
-		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(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(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) {
-			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(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() {
-			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 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 "ArrowUp":
-					n = O.value ? -S : 0;
-					break;
-				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;
+	},
+	setup(e) {
+		let f = b(), N = y(), P = h(!1), F;
+		function I(t) {
+			clearTimeout(F), t && e.delay > 0 ? F = setTimeout(() => {
+				P.value = !0;
+			}, e.delay) : P.value = t;
+		}
+		I(e.spinning), x(() => e.spinning, I);
+		let L = i(() => !!f.default), R = i(() => !!(e.tip || f.tip)), z = i(() => [
+			"b-spin",
+			`b-spin--${e.size}`,
+			{
+				"b-spin--spinning": P.value,
+				"b-spin--nested": L.value,
+				"b-spin--has-tip": R.value,
+				"b-spin--fullscreen": e.fullscreen
 			}
-			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 _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` };
-		});
-		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", {
+		]);
+		return (i, f) => e.fullscreen ? (m(), a(n, {
 			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", {
+			to: "body"
+		}, [d(r, { name: "b-spin-fade" }, {
+			default: S(() => [P.value ? (m(), s("div", {
+				key: 0,
+				class: p(["b-spin b-spin--fullscreen", [`b-spin--${e.size}`, {
+					"b-spin--spinning": P.value,
+					"b-spin--has-tip": R.value
+				}]]),
+				role: "status",
+				"aria-label": R.value ? void 0 : "Loading",
+				"aria-describedby": R.value ? v(N) : void 0
+			}, [c("div", w, [g(i.$slots, "indicator", {}, () => [f[0] ||= c("span", { class: "b-spin__dot" }, [
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" })
+			], -1)])]), R.value ? (m(), s("div", {
 				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", {
+				id: v(N),
+				class: "b-spin__tip"
+			}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, T)) : o("", !0)], 10, C)) : o("", !0)]),
+			_: 3
+		})])) : L.value ? (m(), s("div", {
+			key: 2,
+			class: p(z.value)
+		}, [P.value ? (m(), s("div", {
+			key: 0,
+			class: "b-spin__overlay-container",
+			role: "status",
+			"aria-label": R.value ? void 0 : "Loading",
+			"aria-describedby": R.value ? v(N) : void 0
+		}, [c("div", A, [g(i.$slots, "indicator", {}, () => [f[2] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
+			key: 0,
+			id: v(N),
+			class: "b-spin__tip"
+		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, j)) : o("", !0)], 8, k)) : o("", !0), c("div", {
+			class: p(["b-spin__content", { "b-spin__content--blurred": P.value }]),
+			"aria-busy": P.value,
+			inert: P.value
+		}, [g(i.$slots, "default")], 10, M)], 2)) : (m(), s(t, { key: 1 }, [P.value ? (m(), s("div", {
+			key: 0,
+			class: p(z.value),
+			role: "status",
+			"aria-label": R.value ? void 0 : "Loading",
+			"aria-describedby": R.value ? v(N) : void 0
+		}, [c("div", D, [g(i.$slots, "indicator", {}, () => [f[1] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
 			key: 0,
-			class: "b-splitter__lazy-indicator",
-			style: p(Oe.value),
-			"aria-hidden": "true"
-		}, null, 4)) : s("", !0)], 10, ae));
+			id: v(N),
+			class: "b-spin__tip"
+		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, O)) : o("", !0)], 10, E)) : o("", !0)], 64));
 	}
 });
 //#endregion
-export { C as default };
+export { N as default };
 
 //# sourceMappingURL=design-system204.js.map