@everchron/ec-shards 21.0.0 → 21.1.0

package/dist/ec-shards.js

@@ -5768,6 +5768,9 @@ var Ka = /*#__PURE__*/ V(Ua, [["render", Ga], ["__scopeId", "data-v-7563cee0"]])
 		hasLabel() {
 			return this.label && this.label !== "" || this.label != null ? "has-label" : this.label;
 		},
+		chevronOnly() {
+			return this.chevron && this.label == null && !this.icon && !this.loading;
+		},
 		sizeClass() {
 			return `ecs-button-table-${this.size}`;
 		},
@@ -5805,6 +5808,7 @@ function Xa(e, t, n, r, i, a) {
 			n.pale ? "pale" : "",
 			n.unreactive ? "unreactive" : "",
 			n.loading ? "loading" : "",
+			a.chevronOnly ? "chevron-only" : "",
 			a.sizeClass
 		]]),
 		disabled: n.disabled || null,
@@ -5833,14 +5837,17 @@ function Xa(e, t, n, r, i, a) {
 			"color"
 		])) : s("", !0),
 		n.label == null ? s("", !0) : (T(), c("div", Ya, P(n.label), 1)),
-		n.chevron ? (T(), c("div", {
+		n.chevron ? (T(), o(l, {
 			key: 3,
+			type: "chevron-right",
+			size: "16",
+			"stroke-width": "1.5",
 			class: b(["chevron", n.active ? "expand" : ""])
-		}, null, 2)) : s("", !0),
+		}, null, 8, ["class"])) : s("", !0),
 		f(d, { radius: n.size === "sml" ? 8 : 10 }, null, 8, ["radius"])
 	], 42, Ja);
 }
-var Za = /*#__PURE__*/ V(qa, [["render", Xa], ["__scopeId", "data-v-b16a95c8"]]), Qa = { name: "ecs-toolbar-button-group" }, $a = { class: "ecs-toolbar-button-group" };
+var Za = /*#__PURE__*/ V(qa, [["render", Xa], ["__scopeId", "data-v-14d18178"]]), Qa = { name: "ecs-toolbar-button-group" }, $a = { class: "ecs-toolbar-button-group" };
 function eo(e, t, n, r, i, a) {
 	return T(), c("div", $a, [A(e.$slots, "default", {}, void 0, !0)]);
 }
@@ -7980,6 +7987,7 @@ var Lc = {
 		EcsTreeGuides: /* @__PURE__ */ V(Pc, [["render", Ic], ["__scopeId", "data-v-b586545e"]])
 	},
 	mixins: [Y],
+	emits: ["update:expanded", "toggle"],
 	props: {
 		icon: { type: String },
 		iconColor: {
@@ -8018,6 +8026,10 @@ var Lc = {
 			type: Boolean,
 			default: !1
 		},
+		expandOnClick: {
+			type: Boolean,
+			default: !1
+		},
 		expandIcon: { type: String },
 		expandLabel: { type: String },
 		expandPosition: {
@@ -8053,13 +8065,48 @@ var Lc = {
 		showTree() {
 			return this.treeLevel > 0;
 		},
+		slotProps() {
+			return {
+				expanded: this.isExpanded,
+				expandId: this.expandId,
+				toggle: this.toggle,
+				expand: this.expand,
+				collapse: this.collapse
+			};
+		},
 		treeIndentStyle() {
 			return this.showTree ? { paddingLeft: `${this.treeLevel * 8}px` } : {};
 		}
 	},
-	methods: { skeletonWidth: function(e, t) {
-		return Math.floor(Math.random() * (t - e + 1) + e);
+	watch: { expanded(e) {
+		this.isExpanded = e;
 	} },
+	methods: {
+		setExpanded(e) {
+			let t = !!e;
+			t !== this.isExpanded && (this.isExpanded = t, this.$emit("update:expanded", t), this.$emit("toggle", t));
+		},
+		toggle() {
+			this.setExpanded(!this.isExpanded);
+		},
+		expand() {
+			this.setExpanded(!0);
+		},
+		collapse() {
+			this.setExpanded(!1);
+		},
+		onCardClick(e) {
+			if (!this.expandOnClick || this.isLoading) return;
+			let t = e.target.closest?.("button, a, input, select, textarea, label, [role=\"button\"], [contenteditable=\"true\"], .control, .ecs-data-card-actions, .ecs-data-card-expand");
+			t && this.$el.contains(t) || this.toggle();
+		},
+		onCardKeydown(e) {
+			!this.expandOnClick || this.isLoading || (e.preventDefault(), this.toggle());
+		},
+		skeletonWidth: function(e, t) {
+			return Math.floor(Math.random() * (t - e + 1) + e);
+		}
+	},
 	created() {
 		this.expandId = this.generateUniqueId();
 	}
@@ -8074,18 +8121,21 @@ var Lc = {
 	class: "ecs-data-card-inner-content"
 }, Uc = ["id", "aria-hidden"], Wc = { class: "ecs-data-card-expand-inner" };
 function Gc(e, t, n, r, i, a) {
-	let u = j("ecs-tree-guides"), d = j("ecs-icon"), p = j("ecs-skeleton-loader"), m = j("ecs-button"), h = j("ecs-button-table"), g = j("ecs-focus-ring");
+	let u = j("ecs-tree-guides"), d = j("ecs-icon"), p = j("ecs-skeleton-loader"), h = j("ecs-button"), g = j("ecs-button-table"), _ = j("ecs-focus-ring");
 	return T(), c("div", {
 		class: b(["ecs-data-card", [
 			n.hover ? "ecs-data-card-hover" : "",
 			n.active ? "active" : "",
 			n.shadow ? "shadow" : "",
 			i.isExpanded ? "expanded" : "",
-			a.isLoading ? "loading" : ""
+			a.isLoading ? "loading" : "",
+			n.expandOnClick ? "expand-on-click" : ""
 		]]),
 		role: "listitem",
 		"aria-busy": a.isLoading || null,
-		tabindex: n.hover ? "0" : "-1"
+		tabindex: n.hover ? "0" : "-1",
+		onClick: t[0] ||= (...e) => a.onCardClick && a.onCardClick(...e),
+		onKeydown: [t[1] ||= R(z((...e) => a.onCardKeydown && a.onCardKeydown(...e), ["self"]), ["enter"]), t[2] ||= R(z((...e) => a.onCardKeydown && a.onCardKeydown(...e), ["self"]), ["space"])]
 	}, [
 		a.showTree ? (T(), c("div", zc, [f(u, {
 			level: a.treeLevel,
@@ -8098,7 +8148,7 @@ function Gc(e, t, n, r, i, a) {
 			"is-last-child",
 			"first-in-level"
 		])])) : s("", !0),
-		n.control && e.$slots.control ? (T(), c("div", Bc, [A(e.$slots, "control", {}, void 0, !0)])) : s("", !0),
+		n.control && e.$slots.control ? (T(), c("div", Bc, [A(e.$slots, "control", x(m(a.slotProps)), void 0, !0)])) : s("", !0),
 		n.icon ? (T(), o(d, {
 			key: 2,
 			type: n.icon,
@@ -8122,9 +8172,9 @@ function Gc(e, t, n, r, i, a) {
 			style: S(a.treeIndentStyle)
 		}, [
 			l("div", Vc, [
-				n.expandable && n.expandPosition === "left" ? (T(), o(m, {
+				n.expandable && n.expandPosition === "left" ? (T(), o(h, {
 					key: 0,
-					onClick: t[0] ||= (e) => i.isExpanded = !i.isExpanded,
+					onClick: a.toggle,
 					type: "secondary",
 					"aria-controls": i.expandId,
 					"aria-expanded": i.isExpanded ? "true" : "false",
@@ -8135,13 +8185,14 @@ function Gc(e, t, n, r, i, a) {
 					"aria-label": n.expandLabel ? n.expandLabel : i.isExpanded ? "Collapse" : "Expand",
 					class: "expand-button-left"
 				}, null, 8, [
+					"onClick",
 					"aria-controls",
 					"aria-expanded",
 					"icon",
 					"active",
 					"aria-label"
 				])) : s("", !0),
-				A(e.$slots, "default", {}, void 0, !0),
+				A(e.$slots, "default", x(m(a.slotProps)), void 0, !0),
 				a.isLoading ? (T(), o(p, {
 					key: 1,
 					type: "single",
@@ -8151,10 +8202,10 @@ function Gc(e, t, n, r, i, a) {
 				e.$slots.actions ? (T(), c("div", {
 					key: 2,
 					class: b(["ecs-data-card-actions", n.actionsOnHover ? "on-hover" : ""])
-				}, [A(e.$slots, "actions", {}, void 0, !0)], 2)) : s("", !0),
-				n.expandable && n.expandPosition === "right" ? (T(), o(h, {
+				}, [A(e.$slots, "actions", x(m(a.slotProps)), void 0, !0)], 2)) : s("", !0),
+				n.expandable && n.expandPosition === "right" ? (T(), o(g, {
 					key: 3,
-					onClick: t[1] ||= (e) => i.isExpanded = !i.isExpanded,
+					onClick: a.toggle,
 					"aria-controls": i.expandId,
 					"aria-expanded": i.isExpanded ? "true" : "false",
 					pale: "",
@@ -8165,6 +8216,7 @@ function Gc(e, t, n, r, i, a) {
 					label: n.expandLabel,
 					class: "expand-button-right"
 				}, null, 8, [
+					"onClick",
 					"aria-controls",
 					"aria-expanded",
 					"active",
@@ -8172,7 +8224,7 @@ function Gc(e, t, n, r, i, a) {
 					"label"
 				])) : s("", !0)
 			]),
-			e.$slots.meta ? (T(), c("div", Hc, [A(e.$slots, "meta", {}, void 0, !0), a.isLoading ? (T(), o(p, {
+			e.$slots.meta ? (T(), c("div", Hc, [A(e.$slots, "meta", x(m(a.slotProps)), void 0, !0), a.isLoading ? (T(), o(p, {
 				key: 0,
 				type: "single",
 				width: a.skeletonWidth(15, 30),
@@ -8183,16 +8235,16 @@ function Gc(e, t, n, r, i, a) {
 				id: i.expandId,
 				"aria-hidden": i.isExpanded ? "false" : "true",
 				class: "ecs-data-card-expand"
-			}, [l("div", Wc, [A(e.$slots, "expand", {}, void 0, !0)])], 8, Uc)), [[ae, i.isExpanded]]) : s("", !0)
+			}, [l("div", Wc, [A(e.$slots, "expand", x(m(a.slotProps)), void 0, !0)])], 8, Uc)), [[ae, i.isExpanded]]) : s("", !0)
 		], 4),
-		n.hover ? (T(), o(g, {
+		n.hover ? (T(), o(_, {
 			key: 4,
 			inset: 0,
 			radius: 0
 		})) : s("", !0)
-	], 10, Rc);
+	], 42, Rc);
 }
-var Kc = /*#__PURE__*/ V(Lc, [["render", Gc], ["__scopeId", "data-v-9174240c"]]), qc = { name: "ecs-data-card-list" }, Jc = {
+var Kc = /*#__PURE__*/ V(Lc, [["render", Gc], ["__scopeId", "data-v-a9ea1da1"]]), qc = { name: "ecs-data-card-list" }, Jc = {
 	class: "ecs-data-card-list",
 	role: "list"
 };
@@ -15804,15 +15856,27 @@ var kg = /*#__PURE__*/ V(Cg, [["render", Og], ["__scopeId", "data-v-3fe85af5"]])
 		EcsIcon: H,
 		EcsFocusRing: U
 	},
-	props: { size: {
-		type: String,
-		validator: (e) => [
-			"sml",
-			"md",
-			"lg"
-		].includes(e),
-		default: "md"
-	} },
+	props: {
+		size: {
+			type: String,
+			validator: (e) => [
+				"sml",
+				"md",
+				"lg"
+			].includes(e),
+			default: "md"
+		},
+		variant: {
+			type: String,
+			validator: (e) => [
+				"default",
+				"neutral",
+				"danger",
+				"ai"
+			].includes(e),
+			default: "default"
+		}
+	},
 	computed: { iconSize() {
 		return {
 			sml: 12,
@@ -15824,19 +15888,19 @@ var kg = /*#__PURE__*/ V(Cg, [["render", Og], ["__scopeId", "data-v-3fe85af5"]])
 function jg(e, t, n, r, i, a) {
 	let o = j("ecs-icon"), s = j("ecs-focus-ring");
 	return T(), c("div", {
-		class: b(["ecs-multiselect-token", `ecs-multiselect-token-${n.size}`]),
+		class: b(["ecs-multiselect-token", [`ecs-multiselect-token-${n.size}`, `ecs-multiselect-token-${n.variant}`]]),
 		tabindex: "0",
 		onKeydown: t[1] ||= R((t) => e.$emit("remove", t), ["delete"])
 	}, [A(e.$slots, "default", {}, void 0, !0), l("button", {
 		onClick: t[0] ||= (t) => e.$emit("remove", t),
+		"aria-label": "Remove",
 		class: "remove"
 	}, [f(o, {
 		type: "close",
-		size: a.iconSize,
-		color: "var(--color-white)"
+		size: a.iconSize
 	}, null, 8, ["size"]), f(s, { radius: 12 })])], 34);
 }
-var Mg = /*#__PURE__*/ V(Ag, [["render", jg], ["__scopeId", "data-v-7ec30fcb"]]), Ng = {
+var Mg = /*#__PURE__*/ V(Ag, [["render", jg], ["__scopeId", "data-v-7e73cf16"]]), Ng = {
 	name: "ecs-multiselect-option",
 	components: {
 		EcsIcon: H,
@@ -18446,6 +18510,10 @@ var ab = /*#__PURE__*/ V(nb, [["render", ib], ["__scopeId", "data-v-451fee48"]])
 			type: Boolean,
 			default: !0
 		},
+		chipSpacing: {
+			type: Boolean,
+			default: !0
+		},
 		name: {
 			type: String,
 			default: null
@@ -18537,10 +18605,19 @@ var ab = /*#__PURE__*/ V(nb, [["render", ib], ["__scopeId", "data-v-451fee48"]])
 				...e,
 				type: "chip"
 			}, n = document.createElement("span");
-			return n.className = "ecs-token-input-chip", n.setAttribute("contenteditable", "false"), n.setAttribute("draggable", this.isEditable ? "true" : "false"), n.__chip = t, O(h(Mg, {
+			n.className = "ecs-token-input-chip", n.setAttribute("contenteditable", "false"), n.setAttribute("draggable", this.isEditable ? "true" : "false"), n.__chip = t, O(h(Mg, {
 				size: this.tokenSize,
 				onRemove: () => this.removeChipHost(n)
-			}, { default: () => t.label }), n), n.addEventListener("dragstart", (e) => this.onChipDragStart(e, n)), n.addEventListener("dragend", () => this.onChipDragEnd(n)), n;
+			}, { default: () => t.label }), n);
+			let r = n.firstElementChild;
+			return r && r.removeAttribute("tabindex"), n.addEventListener("dragstart", (e) => this.onChipDragStart(e, n)), n.addEventListener("dragend", () => this.onChipDragEnd(n)), n.addEventListener("click", (e) => this.onChipClick(e, n)), n;
+		},
+		onChipClick(e, t) {
+			if (!this.isEditable || e.target.closest(".remove")) return;
+			let n = t.getBoundingClientRect(), r = document.createRange();
+			e.clientX < n.left + n.width / 2 ? r.setStartBefore(t) : r.setStartAfter(t), r.collapse(!0), this.$refs.editable.focus();
+			let i = window.getSelection();
+			i.removeAllRanges(), i.addRange(r);
 		},
 		isChipHost(e) {
 			return e && e.nodeType === Node.ELEMENT_NODE && e.classList && e.classList.contains("ecs-token-input-chip") && e.__chip;
@@ -18575,12 +18652,34 @@ var ab = /*#__PURE__*/ V(nb, [["render", ib], ["__scopeId", "data-v-451fee48"]])
 				}), !1;
 			}
 			let n = this.createChipHost(e), r = this.resolveInsertRange(), i = this.captureChipRects();
-			r ? (r.deleteContents(), r.insertNode(n)) : this.$refs.editable.appendChild(n), this.placeCaretAfter(n);
-			let a = document.createRange();
-			return a.setStartAfter(n), a.collapse(!0), this.savedRange = a.cloneRange(), this.animateReorder(i), this.syncFromDom(), !0;
+			r ? (r.deleteContents(), r.insertNode(n)) : this.$refs.editable.appendChild(n);
+			let a = this.addChipSpacing(n);
+			this.placeCaretAfter(a);
+			let o = document.createRange();
+			return o.setStartAfter(a), o.collapse(!0), this.savedRange = o.cloneRange(), this.animateReorder(i), this.syncFromDom(), !0;
+		},
+		addChipSpacing(e) {
+			if (!this.chipSpacing || this.chipsOnly) return e;
+			this.needsLeadingSpace(e) && e.before(document.createTextNode(" "));
+			let t = e.nextSibling;
+			if (t && t.nodeType === Node.TEXT_NODE && /^\s/.test(t.textContent)) return t.textContent.length === 1 || t.splitText(1), t;
+			let n = document.createTextNode(" ");
+			return e.after(n), n;
+		},
+		needsLeadingSpace(e) {
+			let t = e.previousSibling;
+			for (; t && t.nodeType === Node.TEXT_NODE && t.textContent === "";) t = t.previousSibling;
+			return t ? t.nodeType === Node.TEXT_NODE ? !/\s$/.test(t.textContent) : this.isChipHost(t) : !1;
 		},
 		removeChipHost(e) {
-			this.selectedChip === e && (this.selectedChip = null), O(null, e), e.remove(), this.syncFromDom(), this.focusEditable();
+			this.selectedChip === e && (this.selectedChip = null);
+			let t = this.$refs.editable, n = Array.prototype.indexOf.call(t.childNodes, e);
+			if (O(null, e), e.remove(), this.syncFromDom(), this.focusEditable(), n >= 0) {
+				let e = document.createRange();
+				e.setStart(t, Math.min(n, t.childNodes.length)), e.collapse(!0);
+				let r = window.getSelection();
+				r.removeAllRanges(), r.addRange(e);
+			}
 		},
 		selectChip(e) {
 			this.clearChipSelection(), this.selectedChip = e, e.classList.add("is-selected");
@@ -18604,7 +18703,19 @@ var ab = /*#__PURE__*/ V(nb, [["render", ib], ["__scopeId", "data-v-451fee48"]])
 				return;
 			}
 			let t = this.chipBeforeCaret();
-			t && (e.preventDefault(), this.selectChip(t));
+			if (t) {
+				e.preventDefault(), this.selectChip(t);
+				return;
+			}
+			this.caretAtStart() && e.preventDefault();
+		},
+		caretAtStart() {
+			let e = window.getSelection();
+			if (!e || e.rangeCount === 0) return !1;
+			let t = e.getRangeAt(0);
+			if (!t.collapsed) return !1;
+			let n = this.$refs.editable, { startContainer: r, startOffset: i } = t;
+			return r === n ? i === 0 : r.nodeType === Node.TEXT_NODE && i === 0 && r.parentNode === n && !r.previousSibling;
 		},
 		chipBeforeCaret() {
 			let e = window.getSelection();
@@ -18658,7 +18769,7 @@ var ab = /*#__PURE__*/ V(nb, [["render", ib], ["__scopeId", "data-v-451fee48"]])
 			let i = this.captureChipRects();
 			n && (O(null, this.draggingHost), this.draggingHost.remove());
 			let a = this.createChipHost(t);
-			r.insertNode(a), this.placeCaretAfter(a), this.animateReorder(i), this.syncFromDom();
+			r.insertNode(a), this.placeCaretAfter(n ? a : this.addChipSpacing(a)), this.animateReorder(i), this.syncFromDom();
 		},
 		onChipDragStart(e, t) {
 			if (!this.isEditable) {
@@ -18735,12 +18846,24 @@ var ab = /*#__PURE__*/ V(nb, [["render", ib], ["__scopeId", "data-v-451fee48"]])
 				this.hideDropCaret();
 				return;
 			}
-			let i = this.$el.getBoundingClientRect();
+			let i = this.$el.getBoundingClientRect(), a = i.top + this.$el.clientTop, o = this.getRowBounds(r.top + r.height / 2);
 			this.dropCaret = {
 				visible: !0,
 				left: r.left - i.left - this.$el.clientLeft,
-				top: r.top - i.top - this.$el.clientTop,
-				height: r.height
+				top: o ? o.top - a : r.top - a,
+				height: o ? o.height : r.height
+			};
+		},
+		getRowBounds(e) {
+			let t = this.$refs.editable, n = getComputedStyle(t), r = parseFloat(n.lineHeight);
+			if (!r) return null;
+			let i = t.getBoundingClientRect(), a = i.top + parseFloat(n.paddingTop), o = i.height - parseFloat(n.paddingTop) - parseFloat(n.paddingBottom), s = Math.max(1, Math.round(o / r));
+			return s === 1 ? {
+				top: this.$el.getBoundingClientRect().top + this.$el.clientTop,
+				height: this.$el.clientHeight
+			} : {
+				top: a + Math.min(s - 1, Math.max(0, Math.floor((e - a) / r))) * r,
+				height: r
 			};
 		},
 		hideDropCaret() {
@@ -18848,7 +18971,7 @@ function lb(e, t, n, r, i, a) {
 		"aria-hidden": "true"
 	}, null, 4), [[ae, i.dropCaret.visible]])], 34);
 }
-var ub = /*#__PURE__*/ V(sb, [["render", lb], ["__scopeId", "data-v-e232deb7"]]), db = "application/x-ecs-chip", fb = {
+var ub = /*#__PURE__*/ V(sb, [["render", lb], ["__scopeId", "data-v-97a7a7c4"]]), db = "application/x-ecs-chip", fb = {
 	name: "ecs-token-input-source",
 	emits: ["dragstart", "dragend"],
 	components: { EcsIcon: H },