@septkit/ui 0.0.60 → 0.0.62

package/dist/diagram-layout/diagram-node-card.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./diagram-node-card.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                  */
+//#region lib/diagram-layout/diagram-node-card.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-b6238586"]]);
+//#endregion
+export { n as default };

package/dist/diagram-layout/diagram-node-card.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,147 @@
+import e from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/info.js";
+import { ELEMENT_TO_COLOR as t } from "../icons/element-color-map.generated.js";
+import { ELEMENT_TO_ICON as n } from "../icons/element-icon-mapper.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, withModifiers as y } from "vue";
+//#region lib/diagram-layout/diagram-node-card.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-testid",
+	"data-testid-node",
+	"data-node-id",
+	"tabindex",
+	"role",
+	"aria-expanded",
+	"aria-label",
+	"aria-level",
+	"aria-setsize",
+	"aria-posinset",
+	"aria-selected"
+], x = ["data-tip"], S = ["title"], C = ["data-testid"], w = {
+	key: 1,
+	class: "node-footer"
+}, T = {
+	"data-testid": "capsules",
+	class: "node-capsules"
+}, E = ["data-tip"], D = {
+	key: 1,
+	class: "capsule-tag"
+}, O = { class: "capsule-value" }, k = /*@__PURE__*/ u({
+	__name: "diagram-node-card",
+	props: {
+		nodeId: {},
+		tagName: {},
+		label: {},
+		hasChildren: { type: Boolean },
+		isExpanded: { type: Boolean },
+		width: {},
+		height: { default: void 0 },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		childCounts: { default: () => [] },
+		testId: { default: "diagram-node-card" },
+		detailsTestId: { default: "diagram-node-card-show-details" },
+		tabbable: {
+			type: Boolean,
+			default: !1
+		},
+		treeMeta: { default: void 0 }
+	},
+	emits: [
+		"select",
+		"toggle-expand",
+		"show-details",
+		"keydown"
+	],
+	setup(u, { expose: k, emit: A }) {
+		let j = u, M = A, N = m(null);
+		k({ focus: () => N.value?.focus() });
+		let P = i(() => ({
+			width: `${j.width}px`,
+			...j.height ? { height: `${j.height}px` } : {}
+		})), F = i(() => `${j.tagName}: ${j.label}`), I = i(() => n[j.tagName]), L = i(() => t[j.tagName]), R = i(() => {
+			let e = j.childCounts.reduce((e, t) => e + t.count, 0), t = e > 0 ? `, ${e} child element${e === 1 ? "" : "s"}` : "";
+			return `${j.tagName}: ${j.label}${t}`;
+		}), z = i(() => j.treeMeta ? "treeitem" : void 0);
+		function B() {
+			M("select", j.nodeId), j.hasChildren && M("toggle-expand", j.nodeId);
+		}
+		function V(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), B();
+				return;
+			}
+			M("keydown", e);
+		}
+		return (i, u) => (p(), s("div", {
+			ref_key: "rootEl",
+			ref: N,
+			class: d(["node-root", { selected: j.selected }]),
+			"data-testid": j.testId,
+			"data-testid-node": j.tagName,
+			"data-node-id": j.nodeId,
+			style: f(P.value),
+			tabindex: j.tabbable ? 0 : -1,
+			role: z.value,
+			"aria-expanded": j.hasChildren ? j.isExpanded : void 0,
+			"aria-label": R.value,
+			"aria-level": j.treeMeta?.level,
+			"aria-setsize": j.treeMeta?.setsize,
+			"aria-posinset": j.treeMeta?.posinset,
+			"aria-selected": j.selected,
+			onClick: y(B, ["stop"]),
+			onKeydown: V
+		}, [c("div", {
+			"data-testid": "node-body",
+			class: d(["node-body", { compact: j.compact }])
+		}, [
+			j.compact ? o("", !0) : (p(), s("div", {
+				key: 0,
+				"data-testid": "type-label",
+				class: d(["node-type-label", [L.value?.background, L.value?.text]])
+			}, _(j.tagName), 3)),
+			c("div", {
+				"data-testid": "header",
+				class: d(["header", {
+					collapsed: !j.isExpanded,
+					expanded: j.isExpanded
+				}])
+			}, [
+				I.value ? (p(), s("div", {
+					key: 0,
+					"data-testid": "icon-circle",
+					class: d(["node-icon-circle tooltip", [L.value?.background, L.value?.text]]),
+					"data-tip": j.tagName
+				}, [(p(), a(g(I.value)))], 10, x)) : o("", !0),
+				c("div", {
+					"data-testid": "node-label",
+					class: "node-label",
+					title: F.value
+				}, _(j.label), 9, S),
+				c("button", {
+					type: "button",
+					class: "details-button tooltip",
+					"data-testid": j.detailsTestId,
+					"data-tip": "Show details",
+					"aria-label": "Show details",
+					onClick: u[0] ||= y((e) => M("show-details", j.nodeId), ["stop"])
+				}, [l(v(e), { size: 16 })], 8, C)
+			], 2),
+			j.childCounts.length > 0 ? (p(), s("div", w, [c("div", T, [(p(!0), s(r, null, h(j.childCounts, (e) => (p(), s("div", {
+				key: e.tagName,
+				"data-testid": "capsule",
+				class: d(["capsule tooltip", [v(t)[e.tagName]?.text]]),
+				"data-tip": `${e.count} × ${e.tagName}`
+			}, [v(n)[e.tagName] ? (p(), a(g(v(n)[e.tagName]), {
+				key: 0,
+				class: "capsule-icon"
+			})) : (p(), s("span", D, _(e.tagName), 1)), c("span", O, _(e.label ?? e.count), 1)], 10, E))), 128))])])) : o("", !0)
+		], 2)], 46, b));
+	}
+});
+//#endregion
+export { k as default };

package/dist/diagram-layout/diagram-node-group.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./diagram-node-group.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                   */
+//#region lib/diagram-layout/diagram-node-group.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-636fa72f"]]);
+//#endregion
+export { n as default };

package/dist/diagram-layout/diagram-node-group.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,107 @@
+import e from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/chevron-down.js";
+import t from "../external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/chevron-right.js";
+import { ELEMENT_TO_COLOR as n } from "../icons/element-color-map.generated.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _ } from "vue";
+//#region lib/diagram-layout/diagram-node-group.vue?vue&type=script&setup=true&lang.ts
+var v = ["data-testid"], y = [
+	"data-testid",
+	"role",
+	"tabindex",
+	"aria-expanded",
+	"aria-label",
+	"aria-level",
+	"aria-setsize",
+	"aria-posinset"
+], b = ["title"], x = {
+	key: 0,
+	class: "group-toggle"
+}, S = ["role"], C = /*@__PURE__*/ l({
+	__name: "diagram-node-group",
+	props: {
+		groupId: {},
+		tagName: {},
+		label: {},
+		count: {},
+		width: {},
+		collapsedMembersHeight: {},
+		members: { default: () => [] },
+		expanded: {
+			type: Boolean,
+			default: !1
+		},
+		expandable: {
+			type: Boolean,
+			default: !1
+		},
+		testId: { default: "diagram-node-group" },
+		toggleTestId: { default: "diagram-node-group-toggle" },
+		tabbable: {
+			type: Boolean,
+			default: void 0
+		},
+		treeMeta: { default: void 0 }
+	},
+	emits: ["toggle", "keydown"],
+	setup(l, { expose: C, emit: w }) {
+		let T = l, E = w, D = p(null);
+		C({ focus: () => D.value?.focus() });
+		let O = i(() => n[T.tagName]), k = i(() => ({ width: `${T.width}px` })), A = i(() => T.expanded ? {} : {
+			height: `${T.collapsedMembersHeight}px`,
+			overflowY: "auto",
+			overflowX: "hidden"
+		}), j = i(() => `${T.tagName} group, ${T.count} item${T.count === 1 ? "" : "s"}`), M = i(() => {
+			if (T.tabbable !== void 0) return T.tabbable ? 0 : -1;
+		}), N = i(() => T.treeMeta ? "treeitem" : void 0), P = i(() => T.treeMeta ? "group" : void 0);
+		function F() {
+			T.expandable && E("toggle", T.groupId);
+		}
+		function I(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), F();
+				return;
+			}
+			E("keydown", e);
+		}
+		return (n, i) => (f(), s("div", {
+			class: u(["group-root", O.value?.text]),
+			style: d(k.value),
+			"data-testid": T.testId
+		}, [c("div", {
+			ref_key: "headerEl",
+			ref: D,
+			class: u(["group-header", [
+				O.value?.background,
+				O.value?.text,
+				{ "is-expandable": T.expandable }
+			]]),
+			"data-testid": T.toggleTestId,
+			role: N.value,
+			tabindex: M.value,
+			"aria-expanded": T.expandable ? T.expanded : void 0,
+			"aria-label": j.value,
+			"aria-level": T.treeMeta?.level,
+			"aria-setsize": T.treeMeta?.setsize,
+			"aria-posinset": T.treeMeta?.posinset,
+			onClick: F,
+			onKeydown: I
+		}, [c("div", {
+			class: "group-label",
+			title: `${T.tagName} group (${T.count})`
+		}, g(T.label), 9, b), T.expandable ? (f(), s("div", x, [T.expanded ? (f(), a(_(e), {
+			key: 0,
+			size: 24
+		})) : (f(), a(_(t), {
+			key: 1,
+			size: 24
+		}))])) : o("", !0)], 42, y), c("div", {
+			class: "group-members",
+			role: P.value,
+			style: d(A.value)
+		}, [(f(!0), s(r, null, m(T.members, (e) => h(n.$slots, "member", {
+			key: e.id,
+			member: e
+		}, void 0, !0)), 128))], 12, S)], 14, v));
+	}
+});
+//#endregion
+export { C as default };

package/dist/diagram-layout/group-geometry.js

@@ -0,0 +1,7 @@
+//#region lib/diagram-layout/group-geometry.ts
+var e = 34, t = 72, n = 48, r = 12, i = 156;
+function a(e) {
+	return e ? 72 : 48;
+}
+//#endregion
+export { i as GROUP_COLLAPSED_MEMBERS_HEIGHT, e as GROUP_HEADER_HEIGHT, r as GROUP_MEMBER_GAP, t as GROUP_MEMBER_HEIGHT, n as GROUP_MEMBER_HEIGHT_COMPACT, a as memberCardHeight };

package/dist/diagram-layout/index.js

@@ -1,6 +1,9 @@
 import { applyInitialVisibility as e, buildRecordCache as t, collectVisibleIds as n, hideDescendants as r } from "./visibility-model.js";
 import { groupStackMetrics as i } from "./group-stack.js";
-import { computeGroups as a, isGroupId as o, makeGroupId as s } from "./grouping.js";
-import { createElkLayoutEngine as c } from "./elk-layout-engine.js";
-import { useDiagramLayout as l } from "./use-diagram-layout.js";
-export { e as applyInitialVisibility, t as buildRecordCache, n as collectVisibleIds, a as computeGroups, c as createElkLayoutEngine, i as groupStackMetrics, r as hideDescendants, o as isGroupId, s as makeGroupId, l as useDiagramLayout };
+import { GROUP_COLLAPSED_MEMBERS_HEIGHT as a, GROUP_HEADER_HEIGHT as o, GROUP_MEMBER_GAP as s, GROUP_MEMBER_HEIGHT as c, GROUP_MEMBER_HEIGHT_COMPACT as l, memberCardHeight as u } from "./group-geometry.js";
+import { computeGroups as d, isGroupId as f, makeGroupId as p } from "./grouping.js";
+import { createElkLayoutEngine as m } from "./elk-layout-engine.js";
+import { useDiagramLayout as h } from "./use-diagram-layout.js";
+import g from "./diagram-node-card.js";
+import _ from "./diagram-node-group.js";
+export { g as DiagramNodeCard, _ as DiagramNodeGroup, a as GROUP_COLLAPSED_MEMBERS_HEIGHT, o as GROUP_HEADER_HEIGHT, s as GROUP_MEMBER_GAP, c as GROUP_MEMBER_HEIGHT, l as GROUP_MEMBER_HEIGHT_COMPACT, e as applyInitialVisibility, t as buildRecordCache, n as collectVisibleIds, d as computeGroups, m as createElkLayoutEngine, i as groupStackMetrics, r as hideDescendants, f as isGroupId, p as makeGroupId, u as memberCardHeight, h as useDiagramLayout };

package/dist/external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/arrow-up-down.js

@@ -0,0 +1,22 @@
+import e from "../createLucideIcon.js";
+//#region node_modules/.pnpm/@lucide+vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/arrow-up-down.mjs
+var t = [
+	["path", {
+		d: "m21 16-4 4-4-4",
+		key: "f6ql7i"
+	}],
+	["path", {
+		d: "M17 20V4",
+		key: "1ejh1v"
+	}],
+	["path", {
+		d: "m3 8 4-4 4 4",
+		key: "11wl7u"
+	}],
+	["path", {
+		d: "M7 4v16",
+		key: "1glfcx"
+	}]
+], n = e("arrow-up-down", t);
+//#endregion
+export { t as __iconNode, n as default };

package/dist/external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/funnel.js

@@ -0,0 +1,8 @@
+import e from "../createLucideIcon.js";
+//#region node_modules/.pnpm/@lucide+vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/funnel.mjs
+var t = [["path", {
+	d: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z",
+	key: "sc7q7i"
+}]], n = e("funnel", t);
+//#endregion
+export { t as __iconNode, n as default };

package/dist/external/.pnpm/@lucide_vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/info.js

@@ -0,0 +1,20 @@
+import e from "../createLucideIcon.js";
+//#region node_modules/.pnpm/@lucide+vue@1.23.0_vue@3.5.39_typescript@5.8.3_/node_modules/@lucide/vue/dist/esm/icons/info.mjs
+var t = [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		key: "1mglay"
+	}],
+	["path", {
+		d: "M12 16v-4",
+		key: "1dtifu"
+	}],
+	["path", {
+		d: "M12 8h.01",
+		key: "e9boi3"
+	}]
+], n = e("info", t);
+//#endregion
+export { t as __iconNode, n as default };