@everchron/ec-shards 20.4.1 → 20.5.1

package/dist/ec-shards.js

@@ -8120,6 +8120,21 @@ var rl = /*#__PURE__*/ V(el, [["render", nl], ["__scopeId", "data-v-4f34cac7"]])
 		hasPill() {
 			return this.pill?.text || this.pill?.icon;
 		},
+		designationLevel() {
+			return Number(this.designation?.level) || 0;
+		},
+		showTreeIndicator() {
+			return this.designationLevel > 0;
+		},
+		treeIndicatorStyle() {
+			return { left: `${this.computedOpenButton ? this.designationLevel * 8 - 2 : (this.designationLevel - 1) * 8}px` };
+		},
+		treeIndicatorPath() {
+			return `M1 ${this.designation?.firstInLevel ? 4 : 0}V18C1 19.1046 1.89543 20 3 20H5`;
+		},
+		rowStyle() {
+			return this.designationLevel <= 0 ? {} : { paddingLeft: `${this.designationLevel * 8}px` };
+		},
 		computedOpenButton() {
 			if (!this.openButton) return null;
 			let e = {
@@ -8177,7 +8192,7 @@ var rl = /*#__PURE__*/ V(el, [["render", nl], ["__scopeId", "data-v-4f34cac7"]])
 			this.checkTruncation(this.$refs.pillText), this.checkTruncation(this.$refs.titleText), this.checkTruncation(this.$refs.metaText);
 		});
 	}
-}, al = { class: "ecs-data-card-row" }, ol = { class: "ecs-data-card-row-title-container" }, sl = { class: "text" }, cl = {
+}, al = ["d"], ol = { class: "ecs-data-card-row-title-container" }, sl = { class: "text" }, cl = {
 	key: 2,
 	class: "border"
 }, ll = {
@@ -8186,153 +8201,173 @@ var rl = /*#__PURE__*/ V(el, [["render", nl], ["__scopeId", "data-v-4f34cac7"]])
 };
 function ul(t, n, r, i, a, u) {
 	let f = j("ecs-button"), p = j("ecs-party-entry"), m = j("ecs-icon"), h = j("ecs-button-table");
-	return T(), c("div", al, [u.computedOpenButton ? (T(), o(f, {
-		key: 0,
-		onClick: u.openButtonClick,
-		type: "secondary",
-		size: "sml",
-		"icon-only": "",
-		icon: u.computedOpenButton.icon,
-		disabled: u.computedOpenButton.disabled,
-		highlighted: u.computedOpenButton.active,
-		"aria-label": u.computedOpenButton.title,
-		title: u.computedOpenButton.title
-	}, null, 8, [
-		"onClick",
-		"icon",
-		"disabled",
-		"highlighted",
-		"aria-label",
-		"title"
-	])) : s("", !0), l("div", { class: b(["ecs-data-card-row-inner", { wrap: r.wrap === "wrap-text" || r.wrap === "wrap-row" }]) }, [
-		l("div", ol, [u.hasPill && r.pill?.party ? (T(), o(p, {
+	return T(), c("div", {
+		class: "ecs-data-card-row",
+		style: S(u.rowStyle)
+	}, [
+		u.showTreeIndicator ? (T(), c("svg", {
 			key: 0,
-			onClick: u.pillClick,
-			onMouseenter: n[0] ||= (e) => u.handleHover(!0),
-			onMouseleave: n[1] ||= (e) => u.handleHover(!1),
-			party: r.pill.party,
-			color: r.pill.color,
-			background: r.pill.background,
-			icon: r.pill.icon,
-			"icon-size": "20px",
-			"icon-spacing": "var(--spacing-5)",
-			class: b({
-				clickable: r.pill.clickable,
-				emphasized: r.pill.emphasized,
-				"has-background": r.pill.background,
-				"is-hovered": a.isHovered
-			})
-		}, {
-			default: L(() => [d(P(r.pill.text), 1)]),
-			_: 1
-		}, 8, [
-			"onClick",
-			"party",
-			"color",
-			"background",
-			"icon",
-			"class"
-		])) : u.hasPill ? (T(), c("span", {
+			class: "ecs-data-card-row-tree-indicator",
+			style: S(u.treeIndicatorStyle),
+			width: "6",
+			height: "32",
+			viewBox: "0 0 6 32",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg"
+		}, [l("path", {
+			d: u.treeIndicatorPath,
+			stroke: "var(--color-gray-4)",
+			"stroke-linecap": "round"
+		}, null, 8, al)], 4)) : s("", !0),
+		u.computedOpenButton ? (T(), o(f, {
 			key: 1,
-			onClick: n[2] ||= (...e) => u.pillClick && u.pillClick(...e),
-			onMouseenter: n[3] ||= (e) => u.handleHover(!0),
-			onMouseleave: n[4] ||= (e) => u.handleHover(!1),
-			class: b(["ecs-data-card-row-pill", {
-				clickable: r.pill.clickable,
-				emphasized: r.pill.emphasized,
-				"has-background": r.pill.background,
-				ai: r.pill.ai,
-				"is-hovered": a.isHovered
-			}]),
-			style: S({ color: r.pill.color }),
-			ref: "pillText"
-		}, [
-			r.pill.icon ? (T(), o(m, {
-				key: 0,
-				type: r.pill.icon,
-				color: u.pillIconColor,
-				size: "20px"
-			}, null, 8, ["type", "color"])) : s("", !0),
-			l("span", sl, P(r.pill.text), 1),
-			r.pill.background ? (T(), c("span", {
-				key: 1,
-				class: "background",
-				style: S(u.getPillBackgroundStyle)
-			}, null, 4)) : s("", !0),
-			r.pill.border && r.pill.background ? (T(), c("span", cl)) : s("", !0)
-		], 38)) : s("", !0), r.title ? (T(), c("span", {
-			key: 2,
-			class: b(["ecs-data-card-row-title", { ai: r.title.ai }])
-		}, [
-			r.title.icon ? (T(), o(m, {
-				key: 0,
-				type: r.title.icon,
-				color: u.titleIconColor,
-				size: "20px"
-			}, null, 8, ["type", "color"])) : s("", !0),
-			l("span", {
-				onClick: n[5] ||= (...e) => u.titleClick && u.titleClick(...e),
-				onMouseenter: n[6] ||= (e) => u.handleHover(!0),
-				onMouseleave: n[7] ||= (e) => u.handleHover(!1),
-				class: b(["ecs-data-card-row-title-text", {
-					escape: r.wrap === "wrap-row",
-					clickable: r.title.clickable,
-					emphasized: r.title.emphasized,
-					"is-hovered": a.isHovered
-				}]),
-				style: S({ color: r.title.textColor }),
-				ref: "titleText"
-			}, P(r.title.text), 39),
-			A(t.$slots, "titleControls", {}, void 0, !0)
-		], 2)) : s("", !0)]),
-		r.meta || t.$slots.customMeta ? (T(), c("div", {
-			key: 0,
-			class: b([{
-				ai: r.meta?.ai,
-				default: r.meta?.type === "default",
-				identifier: r.meta?.type === "identifier"
-			}, "ecs-data-card-row-meta-container"]),
-			ref: "metaText"
-		}, [d(P(r.meta?.text) + " ", 1), A(t.$slots, "customMeta", {}, void 0, !0)], 2)) : s("", !0),
-		r.count || r.designation ? (T(), c("div", ll, [r.designation ? (T(), o(p, {
-			key: 0,
-			party: r.designation.party,
-			color: r.designation.color,
-			background: "",
-			"icon-size": "20px",
-			"icon-position": "right",
-			"icon-spacing": "var(--spacing-5)",
-			icon: r.designation.icon,
-			badge: r.designation.warning ? "warning" : void 0,
-			"badge-size": 12,
-			class: "designation has-background"
-		}, {
-			default: L(() => [d(P(r.designation.text) + " ", 1), r.designation.secondaryText ? (T(), c(e, { key: 0 }, [n[8] ||= l("span", { class: "separator" }, null, -1), d(" " + P(r.designation.secondaryText), 1)], 64)) : s("", !0)]),
-			_: 1
-		}, 8, [
-			"party",
-			"color",
-			"icon",
-			"badge"
-		])) : s("", !0), r.count ? (T(), o(h, {
-			key: 1,
-			onClick: u.countClick,
-			unreactive: !r.count.clickable,
-			icon: r.count.icon,
+			onClick: u.openButtonClick,
+			type: "secondary",
 			size: "sml",
-			subtle: "",
-			label: r.count.value,
-			title: r.count.title
+			"icon-only": "",
+			icon: u.computedOpenButton.icon,
+			disabled: u.computedOpenButton.disabled,
+			highlighted: u.computedOpenButton.active,
+			"aria-label": u.computedOpenButton.title,
+			title: u.computedOpenButton.title
 		}, null, 8, [
 			"onClick",
-			"unreactive",
 			"icon",
-			"label",
+			"disabled",
+			"highlighted",
+			"aria-label",
 			"title"
-		])) : s("", !0)])) : s("", !0)
-	], 2)]);
+		])) : s("", !0),
+		l("div", { class: b(["ecs-data-card-row-inner", { wrap: r.wrap === "wrap-text" || r.wrap === "wrap-row" }]) }, [
+			l("div", ol, [u.hasPill && r.pill?.party ? (T(), o(p, {
+				key: 0,
+				onClick: u.pillClick,
+				onMouseenter: n[0] ||= (e) => u.handleHover(!0),
+				onMouseleave: n[1] ||= (e) => u.handleHover(!1),
+				party: r.pill.party,
+				color: r.pill.color,
+				background: r.pill.background,
+				icon: r.pill.icon,
+				"icon-size": "20px",
+				"icon-spacing": "var(--spacing-5)",
+				class: b({
+					clickable: r.pill.clickable,
+					emphasized: r.pill.emphasized,
+					"has-background": r.pill.background,
+					"is-hovered": a.isHovered
+				})
+			}, {
+				default: L(() => [d(P(r.pill.text), 1)]),
+				_: 1
+			}, 8, [
+				"onClick",
+				"party",
+				"color",
+				"background",
+				"icon",
+				"class"
+			])) : u.hasPill ? (T(), c("span", {
+				key: 1,
+				onClick: n[2] ||= (...e) => u.pillClick && u.pillClick(...e),
+				onMouseenter: n[3] ||= (e) => u.handleHover(!0),
+				onMouseleave: n[4] ||= (e) => u.handleHover(!1),
+				class: b(["ecs-data-card-row-pill", {
+					clickable: r.pill.clickable,
+					emphasized: r.pill.emphasized,
+					"has-background": r.pill.background,
+					ai: r.pill.ai,
+					"is-hovered": a.isHovered
+				}]),
+				style: S({ color: r.pill.color }),
+				ref: "pillText"
+			}, [
+				r.pill.icon ? (T(), o(m, {
+					key: 0,
+					type: r.pill.icon,
+					color: u.pillIconColor,
+					size: "20px"
+				}, null, 8, ["type", "color"])) : s("", !0),
+				l("span", sl, P(r.pill.text), 1),
+				r.pill.background ? (T(), c("span", {
+					key: 1,
+					class: "background",
+					style: S(u.getPillBackgroundStyle)
+				}, null, 4)) : s("", !0),
+				r.pill.border && r.pill.background ? (T(), c("span", cl)) : s("", !0)
+			], 38)) : s("", !0), r.title ? (T(), c("span", {
+				key: 2,
+				class: b(["ecs-data-card-row-title", { ai: r.title.ai }])
+			}, [
+				r.title.icon ? (T(), o(m, {
+					key: 0,
+					type: r.title.icon,
+					color: u.titleIconColor,
+					size: "20px"
+				}, null, 8, ["type", "color"])) : s("", !0),
+				l("span", {
+					onClick: n[5] ||= (...e) => u.titleClick && u.titleClick(...e),
+					onMouseenter: n[6] ||= (e) => u.handleHover(!0),
+					onMouseleave: n[7] ||= (e) => u.handleHover(!1),
+					class: b(["ecs-data-card-row-title-text", {
+						escape: r.wrap === "wrap-row",
+						clickable: r.title.clickable,
+						emphasized: r.title.emphasized,
+						"is-hovered": a.isHovered
+					}]),
+					style: S({ color: r.title.textColor }),
+					ref: "titleText"
+				}, P(r.title.text), 39),
+				A(t.$slots, "titleControls", {}, void 0, !0)
+			], 2)) : s("", !0)]),
+			r.meta || t.$slots.customMeta ? (T(), c("div", {
+				key: 0,
+				class: b([{
+					ai: r.meta?.ai,
+					default: r.meta?.type === "default",
+					identifier: r.meta?.type === "identifier"
+				}, "ecs-data-card-row-meta-container"]),
+				ref: "metaText"
+			}, [d(P(r.meta?.text) + " ", 1), A(t.$slots, "customMeta", {}, void 0, !0)], 2)) : s("", !0),
+			r.count || r.designation ? (T(), c("div", ll, [r.designation ? (T(), o(p, {
+				key: 0,
+				party: r.designation.party,
+				color: r.designation.color,
+				background: "",
+				"icon-size": "20px",
+				"icon-position": "right",
+				"icon-spacing": "var(--spacing-5)",
+				icon: r.designation.icon,
+				badge: r.designation.warning ? "warning" : void 0,
+				"badge-size": 12,
+				class: "designation has-background"
+			}, {
+				default: L(() => [d(P(r.designation.text) + " ", 1), r.designation.secondaryText ? (T(), c(e, { key: 0 }, [n[8] ||= l("span", { class: "separator" }, null, -1), d(" " + P(r.designation.secondaryText), 1)], 64)) : s("", !0)]),
+				_: 1
+			}, 8, [
+				"party",
+				"color",
+				"icon",
+				"badge"
+			])) : s("", !0), r.count ? (T(), o(h, {
+				key: 1,
+				onClick: u.countClick,
+				unreactive: !r.count.clickable,
+				icon: r.count.icon,
+				size: "sml",
+				subtle: "",
+				label: r.count.value,
+				title: r.count.title
+			}, null, 8, [
+				"onClick",
+				"unreactive",
+				"icon",
+				"label",
+				"title"
+			])) : s("", !0)])) : s("", !0)
+		], 2)
+	], 4);
 }
-var dl = /*#__PURE__*/ V(il, [["render", ul], ["__scopeId", "data-v-16fdc404"]]), fl = {
+var dl = /*#__PURE__*/ V(il, [["render", ul], ["__scopeId", "data-v-8820bf14"]]), fl = {
 	name: "ecs-data-grid",
 	emits: ["tableScroll"],
 	props: {