@7pmlabs/design-system 1.0.8 → 1.0.10

package/dist/design-system241.js

@@ -0,0 +1,583 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createStaticVNode as a, createTextVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as ee, renderSlot as p, toDisplayString as m, watch as te, withKeys as ne, withModifiers as h } from "vue";
+//#region src/components/BTree/BTree.vue?vue&type=script&setup=true&lang.ts
+var re = ["aria-multiselectable"], ie = [
+	"data-node-key",
+	"aria-expanded",
+	"aria-selected",
+	"aria-checked",
+	"aria-disabled",
+	"aria-level",
+	"tabindex",
+	"draggable",
+	"onClick",
+	"onDblclick",
+	"onContextmenu",
+	"onDragstart",
+	"onDragenter",
+	"onDragover",
+	"onDragleave",
+	"onDragend",
+	"onDrop"
+], ae = {
+	key: 0,
+	class: "b-tree__drag-handle",
+	"aria-hidden": "true"
+}, oe = ["onClick"], se = {
+	key: 1,
+	class: "b-tree__switcher-icon b-tree__switcher-icon--spin",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true"
+}, ce = {
+	key: 2,
+	class: "b-tree__switcher b-tree__switcher--leaf",
+	"aria-hidden": "true"
+}, le = [
+	"aria-label",
+	"aria-checked",
+	"aria-disabled",
+	"onClick",
+	"onKeydown"
+], ue = {
+	key: 4,
+	class: "b-tree__icon",
+	"aria-hidden": "true"
+}, de = { key: 0 }, g = /* @__PURE__ */ s({
+	__name: "BTree",
+	props: {
+		treeData: { default: () => [] },
+		fieldNames: { default: () => ({}) },
+		checkable: {
+			type: Boolean,
+			default: !1
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: !1
+		},
+		checkedKeys: { default: () => void 0 },
+		defaultCheckedKeys: { default: () => [] },
+		selectedKeys: { default: () => void 0 },
+		defaultSelectedKeys: { default: () => [] },
+		expandedKeys: { default: () => void 0 },
+		defaultExpandedKeys: { default: () => [] },
+		defaultExpandAll: {
+			type: Boolean,
+			default: !1
+		},
+		defaultExpandParent: {
+			type: Boolean,
+			default: !0
+		},
+		autoExpandParent: {
+			type: Boolean,
+			default: !1
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		selectable: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		showIcon: {
+			type: Boolean,
+			default: !1
+		},
+		showLine: {
+			type: Boolean,
+			default: !1
+		},
+		blockNode: {
+			type: Boolean,
+			default: !1
+		},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		loadData: {
+			type: Function,
+			default: void 0
+		},
+		loadedKeys: { default: () => void 0 },
+		filterTreeNode: {
+			type: Function,
+			default: void 0
+		},
+		height: { default: () => void 0 },
+		virtual: {
+			type: Boolean,
+			default: !1
+		},
+		directory: {
+			type: Boolean,
+			default: !1
+		},
+		expandAction: {
+			type: [String, Boolean],
+			default: "click"
+		}
+	},
+	emits: [
+		"check",
+		"expand",
+		"select",
+		"load",
+		"rightClick",
+		"dragStart",
+		"dragEnter",
+		"dragOver",
+		"dragLeave",
+		"dragEnd",
+		"drop",
+		"dblclick",
+		"update:checkedKeys",
+		"update:selectedKeys",
+		"update:expandedKeys",
+		"update:loadedKeys"
+	],
+	setup(s, { expose: g, emit: fe }) {
+		let _ = fe, pe = t(() => s.fieldNames.key ?? "key"), me = t(() => s.fieldNames.title ?? "title"), he = t(() => s.fieldNames.children ?? "children");
+		function v(e) {
+			return e[pe.value];
+		}
+		function y(e) {
+			return e[me.value] ?? "";
+		}
+		function b(e) {
+			return e[he.value];
+		}
+		let x = f(/* @__PURE__ */ new Set()), S = f(/* @__PURE__ */ new Set()), C = f(/* @__PURE__ */ new Set()), w = f(/* @__PURE__ */ new Set()), T = f(/* @__PURE__ */ new Set()), E = f(/* @__PURE__ */ new Set()), D = f(null), O = t(() => s.expandedKeys !== void 0), k = t(() => s.selectedKeys !== void 0), A = t(() => s.checkedKeys !== void 0), j = t(() => s.loadedKeys !== void 0), M = t(() => O.value ? new Set(s.expandedKeys) : x.value), ge = t(() => k.value ? new Set(s.selectedKeys) : S.value), _e = t(() => {
+			if (A.value) {
+				let e = s.checkedKeys;
+				return Array.isArray(e) ? new Set(e) : new Set(e.checked);
+			}
+			return C.value;
+		}), N = t(() => {
+			if (A.value) {
+				let e = s.checkedKeys;
+				if (!Array.isArray(e) && "halfChecked" in e) return new Set(e.halfChecked);
+			}
+			return w.value;
+		}), P = t(() => j.value ? new Set(s.loadedKeys) : T.value);
+		function F(e, t = 0, n = !0) {
+			let r = [];
+			for (let i of e) {
+				let e = v(i), a = M.value.has(e), o = n;
+				r.push({
+					key: e,
+					data: i,
+					depth: t,
+					visible: o
+				});
+				let s = b(i);
+				s?.length && r.push(...F(s, t + 1, o && a));
+			}
+			return r;
+		}
+		let I = t(() => F(s.treeData)), L = t(() => I.value.filter((e) => e.visible));
+		function R(e) {
+			let t = [];
+			for (let n of e) {
+				t.push(v(n));
+				let e = b(n);
+				e?.length && t.push(...R(e));
+			}
+			return t;
+		}
+		function z(e, t) {
+			let n = [];
+			function r(e) {
+				for (let i of e) {
+					let e = b(i);
+					e?.length && (e.some((e) => t.has(v(e)) || r([e]) !== void 0) && n.push(v(i)), r(e));
+				}
+			}
+			return r(e), n;
+		}
+		if (!O.value) {
+			if (s.defaultExpandAll) x.value = new Set(R(s.treeData).filter((e) => {
+				let t = I.value.find((t) => t.key === e);
+				return t ? !!b(t.data)?.length : !1;
+			}));
+			else if (s.defaultExpandedKeys.length) {
+				let e = new Set(s.defaultExpandedKeys);
+				s.defaultExpandParent && z(s.treeData, e).forEach((t) => e.add(t)), x.value = e;
+			}
+		}
+		!k.value && s.defaultSelectedKeys.length && (S.value = new Set(s.defaultSelectedKeys)), !A.value && s.defaultCheckedKeys.length && (C.value = new Set(s.defaultCheckedKeys), s.checkStrictly || B(C.value)), te(() => s.expandedKeys, (e) => {
+			if (!s.autoExpandParent || !e) return;
+			let t = new Set(e);
+			z(s.treeData, t).forEach((e) => t.add(e)), _("update:expandedKeys", [...t]);
+		});
+		function B(e) {
+			let t = /* @__PURE__ */ new Set();
+			function n(r) {
+				let i = !0, a = !1;
+				for (let o of r) {
+					let r = v(o), s = b(o);
+					if (s?.length) {
+						let o = n(s);
+						o.all ? (e.add(r), a = !0) : o.some ? (e.delete(r), t.add(r), i = !1, a = !0) : e.has(r) ? a = !0 : i = !1;
+					} else e.has(r) ? a = !0 : i = !1;
+				}
+				return {
+					all: i,
+					some: a
+				};
+			}
+			n(s.treeData), w.value = t;
+		}
+		function V(e) {
+			return !!b(e)?.length || !!s.loadData && !e.isLeaf;
+		}
+		function H(e) {
+			return M.value.has(e);
+		}
+		function U(e) {
+			return ge.value.has(e);
+		}
+		function W(e) {
+			return _e.value.has(e);
+		}
+		function G(e) {
+			return N.value.has(e);
+		}
+		function K(e) {
+			return E.value.has(e);
+		}
+		function ve(e) {
+			return P.value.has(e);
+		}
+		function q(e) {
+			return s.filterTreeNode ? s.filterTreeNode(e) : !1;
+		}
+		async function J(e, t) {
+			let n = v(e);
+			if (e.disabled || s.disabled) return;
+			let r = !H(n);
+			if (r && s.loadData && !ve(n) && !K(n)) {
+				E.value.add(n);
+				try {
+					await s.loadData(e), j.value || T.value.add(n), _("update:loadedKeys", [...P.value, n]);
+				} finally {
+					E.value.delete(n);
+				}
+			}
+			let i;
+			i = O.value ? new Set(s.expandedKeys) : new Set(x.value), r ? i.add(n) : i.delete(n), O.value || (x.value = i), _("update:expandedKeys", [...i]);
+			let a = {
+				expanded: r,
+				node: e,
+				event: t
+			};
+			_("expand", [...i], a);
+		}
+		function Y(e, t) {
+			if (!s.selectable || e.selectable === !1 || e.disabled || s.disabled) return;
+			let n = v(e), r;
+			r = k.value ? new Set(s.selectedKeys) : new Set(S.value), r.has(n) ? r.delete(n) : (s.multiple || r.clear(), r.add(n)), k.value || (S.value = r), _("update:selectedKeys", [...r]);
+			let i = {
+				event: t,
+				selected: r.has(n),
+				node: e,
+				selectedNodes: I.value.filter((e) => r.has(e.key)).map((e) => e.data),
+				nativeEvent: t
+			};
+			_("select", [...r], i);
+		}
+		function X(e, t) {
+			if (!s.checkable || e.disableCheckbox || e.disabled || s.disabled) return;
+			let n = v(e), r;
+			if (A.value) {
+				let e = s.checkedKeys;
+				r = new Set(Array.isArray(e) ? e : e.checked);
+			} else r = new Set(C.value);
+			if (r.has(n)) {
+				if (r.delete(n), !s.checkStrictly) {
+					function t(e) {
+						for (let n of e) {
+							r.delete(v(n));
+							let e = b(n);
+							e?.length && t(e);
+						}
+					}
+					let n = b(e);
+					n?.length && t(n);
+				}
+			} else if (r.add(n), !s.checkStrictly) {
+				function t(e) {
+					for (let n of e) {
+						!n.disableCheckbox && !n.disabled && r.add(v(n));
+						let e = b(n);
+						e?.length && t(e);
+					}
+				}
+				let n = b(e);
+				n?.length && t(n);
+			}
+			!s.checkStrictly && !A.value && B(r);
+			let i = I.value.filter((e) => r.has(e.key)).map((e) => e.data), a = {
+				event: t,
+				node: e,
+				checked: r.has(n),
+				checkedNodes: i,
+				checkedNodesPositions: i.map((e) => ({
+					node: e,
+					pos: "0"
+				})),
+				halfCheckedKeys: [...N.value],
+				nativeEvent: t
+			};
+			A.value || (C.value = r);
+			let o = s.checkStrictly ? {
+				checked: [...r],
+				halfChecked: [...N.value]
+			} : [...r];
+			_("update:checkedKeys", o), _("check", o, a);
+		}
+		function ye(e, t) {
+			s.draggable && (D.value = v(t), e.dataTransfer?.setData("text/plain", String(v(t))), _("dragStart", {
+				event: e,
+				node: t
+			}));
+		}
+		function be(e, t) {
+			s.draggable && (e.preventDefault(), _("dragEnter", {
+				event: e,
+				node: t,
+				expandedKeys: [...M.value]
+			}));
+		}
+		function xe(e, t) {
+			s.draggable && (e.preventDefault(), _("dragOver", {
+				event: e,
+				node: t
+			}));
+		}
+		function Se(e, t) {
+			s.draggable && _("dragLeave", {
+				event: e,
+				node: t
+			});
+		}
+		function Ce(e, t) {
+			s.draggable && (D.value = null, _("dragEnd", {
+				event: e,
+				node: t
+			}));
+		}
+		function we(e, t) {
+			if (!s.draggable) return;
+			e.preventDefault();
+			let n = I.value.find((e) => e.key === D.value);
+			n && (_("drop", {
+				event: e,
+				node: t,
+				dragNode: n.data,
+				dragNodesKeys: [n.key],
+				dropPosition: 0,
+				dropToGap: !1
+			}), D.value = null);
+		}
+		let Z = f(null), Q = f(L.value[0]?.key ?? null);
+		function Te(e) {
+			let t = L.value;
+			if (!t.length) return;
+			let n = t.findIndex((e) => e.key === Q.value), r = t[n];
+			switch (e.key) {
+				case "ArrowDown": {
+					e.preventDefault();
+					let r = t[n + 1];
+					r && (Q.value = r.key, c(() => $(r.key)));
+					break;
+				}
+				case "ArrowUp": {
+					e.preventDefault();
+					let r = t[n - 1];
+					r && (Q.value = r.key, c(() => $(r.key)));
+					break;
+				}
+				case "ArrowRight":
+					if (e.preventDefault(), !r) break;
+					if (V(r.data) && !H(r.key)) J(r.data, e);
+					else if (H(r.key)) {
+						let e = t[n + 1];
+						e?.depth > r.depth && (Q.value = e.key, c(() => $(e.key)));
+					}
+					break;
+				case "ArrowLeft":
+					if (e.preventDefault(), !r) break;
+					if (H(r.key)) J(r.data, e);
+					else if (r.depth > 0) {
+						for (let e = n - 1; e >= 0; e--) if (t[e].depth < r.depth) {
+							Q.value = t[e].key, c(() => $(t[e].key));
+							break;
+						}
+					}
+					break;
+				case "Enter":
+				case " ":
+					if (e.preventDefault(), !r) break;
+					s.checkable ? X(r.data, e) : s.selectable && Y(r.data, e);
+					break;
+				case "Home":
+					e.preventDefault(), t[0] && (Q.value = t[0].key, c(() => $(t[0].key)));
+					break;
+				case "End": {
+					e.preventDefault();
+					let n = t[t.length - 1];
+					n && (Q.value = n.key, c(() => $(n.key)));
+					break;
+				}
+			}
+		}
+		function $(e) {
+			(Z.value?.querySelector(`[data-node-key="${String(e).replace(/["\\]/g, "\\$&")}"]`))?.focus();
+		}
+		function Ee(e, t) {
+			s.directory && s.expandAction === "click" && V(e) && J(e, t), Y(e, t);
+		}
+		function De(e, t) {
+			s.directory && s.expandAction === "doubleClick" && V(e) && J(e, t), _("dblclick", t, e);
+		}
+		function Oe(e) {
+			c(() => {
+				(Z.value?.querySelector(`[data-node-key="${String(e.key).replace(/["\\]/g, "\\$&")}"]`))?.scrollIntoView?.({ block: {
+					top: "start",
+					bottom: "end",
+					auto: "nearest"
+				}[e.align ?? "auto"] });
+			});
+		}
+		g({ scrollTo: Oe });
+		function ke(e, t) {
+			e.preventDefault(), _("rightClick", {
+				event: e,
+				node: t
+			});
+		}
+		return (t, c) => (d(), r("div", {
+			ref_key: "treeRef",
+			ref: Z,
+			class: l(["b-tree", {
+				"b-tree--checkable": s.checkable,
+				"b-tree--show-line": s.showLine,
+				"b-tree--block-node": s.blockNode,
+				"b-tree--directory": s.directory,
+				"b-tree--disabled": s.disabled
+			}]),
+			role: "tree",
+			"aria-multiselectable": s.multiple || void 0,
+			style: u(s.height ? {
+				height: `${s.height}px`,
+				overflowY: "auto"
+			} : void 0),
+			onKeydown: Te
+		}, [(d(!0), r(e, null, ee(L.value, (e) => (d(), r("div", {
+			key: e.key,
+			"data-node-key": String(e.key),
+			class: l(["b-tree__node", {
+				"b-tree__node--selected": U(e.key),
+				"b-tree__node--checked": W(e.key),
+				"b-tree__node--half-checked": G(e.key),
+				"b-tree__node--expanded": H(e.key),
+				"b-tree__node--disabled": e.data.disabled || s.disabled,
+				"b-tree__node--leaf": !V(e.data),
+				"b-tree__node--loading": K(e.key),
+				"b-tree__node--dragging": s.draggable && D.value === e.key,
+				"b-tree__node--filtered": q(e.data),
+				"b-tree__node--block": s.blockNode
+			}]),
+			role: "treeitem",
+			"aria-expanded": V(e.data) ? H(e.key) : void 0,
+			"aria-selected": s.selectable ? U(e.key) : void 0,
+			"aria-checked": s.checkable ? W(e.key) : void 0,
+			"aria-disabled": e.data.disabled || s.disabled || void 0,
+			"aria-level": e.depth + 1,
+			tabindex: e.key === Q.value ? 0 : -1,
+			style: u({ "--b-tree-node-indent": `${e.depth * 24}px` }),
+			draggable: s.draggable ? "true" : void 0,
+			onClick: h((t) => Ee(e.data, t), ["stop"]),
+			onDblclick: h((t) => De(e.data, t), ["stop"]),
+			onContextmenu: h((t) => ke(t, e.data), ["stop"]),
+			onDragstart: (t) => ye(t, e.data),
+			onDragenter: (t) => be(t, e.data),
+			onDragover: (t) => xe(t, e.data),
+			onDragleave: (t) => Se(t, e.data),
+			onDragend: (t) => Ce(t, e.data),
+			onDrop: (t) => we(t, e.data)
+		}, [
+			s.draggable ? (d(), r("span", ae, [...c[0] ||= [a("<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" data-v-08bb45f2><circle cx=\"5\" cy=\"3.5\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"5\" cy=\"8\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"5\" cy=\"12.5\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"11\" cy=\"3.5\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"11\" cy=\"8\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"11\" cy=\"12.5\" r=\"1.25\" data-v-08bb45f2></circle></svg>", 1)]])) : n("", !0),
+			c[4] ||= i("span", {
+				class: "b-tree__indent",
+				"aria-hidden": "true"
+			}, null, -1),
+			V(e.data) ? (d(), r("span", {
+				key: 1,
+				class: l(["b-tree__switcher", {
+					"b-tree__switcher--expanded": H(e.key),
+					"b-tree__switcher--loading": K(e.key)
+				}]),
+				"aria-hidden": "true",
+				onClick: h((t) => J(e.data, t), ["stop"])
+			}, [K(e.key) ? n("", !0) : p(t.$slots, "switcherIcon", {
+				key: 0,
+				node: e.data,
+				expanded: H(e.key)
+			}, () => [c[1] ||= i("svg", {
+				class: "b-tree__switcher-icon",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": "true"
+			}, [i("path", {
+				d: "M9 18L15 12L9 6",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)], !0), K(e.key) ? (d(), r("svg", se, [...c[2] ||= [i("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-dasharray": "42",
+				"stroke-dashoffset": "14",
+				"stroke-linecap": "round"
+			}, null, -1)]])) : n("", !0)], 10, oe)) : s.showLine ? (d(), r("span", ce)) : n("", !0),
+			s.checkable && e.data.checkable !== !1 ? (d(), r("span", {
+				key: 3,
+				class: l(["b-tree__checkbox", {
+					"b-tree__checkbox--checked": W(e.key),
+					"b-tree__checkbox--indeterminate": G(e.key),
+					"b-tree__checkbox--disabled": e.data.disableCheckbox || e.data.disabled || s.disabled
+				}]),
+				role: "checkbox",
+				"aria-label": y(e.data),
+				"aria-checked": G(e.key) ? "mixed" : W(e.key),
+				"aria-disabled": e.data.disableCheckbox || e.data.disabled || s.disabled || void 0,
+				tabindex: "-1",
+				onClick: h((t) => X(e.data, t), ["stop"]),
+				onKeydown: [ne(h((t) => X(e.data, t), ["prevent"]), ["enter"]), ne(h((t) => X(e.data, t), ["prevent"]), ["space"])]
+			}, [...c[3] ||= [i("span", {
+				class: "b-tree__checkbox-inner",
+				"aria-hidden": "true"
+			}, null, -1)]], 42, le)) : n("", !0),
+			s.showIcon || e.data.icon || t.$slots.icon ? (d(), r("span", ue, [p(t.$slots, "icon", { node: e.data }, () => [e.data.icon ? (d(), r("span", de, m(e.data.icon), 1)) : n("", !0)], !0)])) : n("", !0),
+			i("span", { class: l(["b-tree__title", { "b-tree__title--filtered": q(e.data) }]) }, [p(t.$slots, "title", { node: e.data }, () => [o(m(y(e.data)), 1)], !0)], 2)
+		], 46, ie))), 128))], 46, re));
+	}
+});
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=design-system241.js.map