@shtabapp/ui-kit 1.73.0 → 1.74.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [@shtabapp/ui-kit-v1.74.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.73.0...@shtabapp/ui-kit@1.74.0) (2026-09-13)
+
+### Features
+
+- **components:** reveal the sort button on hover and make drop-inside delay configurable ([5655956](https://gitlab.com/mstikharev/shtab-ui-kit/commit/5655956f3357bc8e0311925ed535aae442d12be8))
+- **components:** s-table rowStyle prop for app-driven row inline style ([e9a991c](https://gitlab.com/mstikharev/shtab-ui-kit/commit/e9a991c0a031b2c1f0f0c373240269cc37bfec73))
+- **components:** stable group rows honour rowStyle and expose their cells ([6efe711](https://gitlab.com/mstikharev/shtab-ui-kit/commit/6efe7111078c81b2987a4e1a2dcb78f234663742))
+
 ## [@shtabapp/ui-kit-v1.73.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.72.0...@shtabapp/ui-kit@1.73.0) (2026-09-12)
 
 ### Features

package/dist/{STable-DpH_h2-n.js → STable-CToIFCiU.js}

@@ -596,7 +596,7 @@ var J = /* @__PURE__ */ function(e) {
 				"data-section": W($).BODY,
 				tabindex: m.descriptor.key === e.focusColumnKey ? 0 : -1
 			}, [m.descriptor.key === e.groupColumnKey ? (L(), C("div", {
-				key: 0,
+				key: 1,
 				class: "s-ui-table__group-content",
 				style: P(h.value)
 			}, [B(t.$slots, "row", {}, () => [
@@ -650,7 +650,10 @@ var J = /* @__PURE__ */ function(e) {
 					})]),
 					_: 3
 				}, 8, ["modelValue", "placement"])) : S("", !0)])
-			])], 4)) : S("", !0)], 14, mt))), 128)),
+			])], 4)) : B(t.$slots, "group-cell", {
+				key: 0,
+				columnKey: m.descriptor.key
+			})], 14, mt))), 128)),
 			b[4] ||= w("td", {
 				class: "s-ui-table__cell s-ui-table__filler-cell s-ui-table__group-cell",
 				role: "presentation"
@@ -706,6 +709,10 @@ var J = /* @__PURE__ */ function(e) {
 		menuOpen: {
 			type: Boolean,
 			default: !1
+		},
+		menuEnabled: {
+			type: Boolean,
+			default: !0
 		}
 	},
 	emits: [
@@ -715,7 +722,7 @@ var J = /* @__PURE__ */ function(e) {
 		"hide"
 	],
 	setup(e, { emit: t }) {
-		let n = t, s = ie(), { t: c } = de(), f = b(() => !!s.menu || e.descriptor.sortable || e.descriptor.hideable), p = b(() => ({
+		let n = t, s = ie(), { t: c } = de(), f = b(() => e.menuEnabled === !1 ? !1 : !!s.menu || e.descriptor.sortable || e.descriptor.hideable), p = b(() => ({
 			"s-ui-table__header-plaque--sorted": !!e.sortDirection,
 			"s-ui-table__header-plaque--sortable": e.descriptor.sortable,
 			"s-ui-table__header-plaque--align-center": e.descriptor.align === Y.CENTER,
@@ -1705,74 +1712,74 @@ var J = /* @__PURE__ */ function(e) {
 			}
 		}
 	};
-}, _n = ({ tableId: e, enabled: t, dragMode: n, snapshot: r, scrollElement: i, isRowDraggable: a, dragExpandDelayMs: o, isExpanded: s, onHoverExpand: c, onReorder: l, onTreeDrop: u, resolveRowPreviewTitle: d }) => {
-	let f = /* @__PURE__ */ new Map(), p = V(), m = V(), h = V(), g = (e) => {
+}, _n = ({ tableId: e, enabled: t, dragMode: n, snapshot: r, scrollElement: i, isRowDraggable: a, dragExpandDelayMs: o, dragInsideDelayMs: s, isExpanded: c, onHoverExpand: l, onReorder: u, onTreeDrop: d, resolveRowPreviewTitle: f }) => {
+	let p = /* @__PURE__ */ new Map(), m = V(), h = V(), g = V(), _ = (e) => {
 		if (!(e instanceof HTMLElement)) return;
 		let t = Number(e.dataset.index);
 		if (Number.isInteger(t)) return r.value.flatRows[t];
-	}, _ = (e) => {
+	}, v = (e) => {
 		if (!e || !U(t) || e.kind !== Q.ROW && e.kind !== Q.GROUP) return !1;
 		let n = U(a);
 		return n ? n(e.item) !== !1 : !0;
-	}, v = (e, t) => {
+	}, y = (e, t) => {
 		let { getSubtreeRangeByKey: n, getRowIndexByKey: i } = r.value, a = n(e), o = i(t);
 		return !a || o === void 0 ? !1 : o >= a[0] && o <= a[1];
-	}, y = _e(() => {
-		let e = b.value;
-		e && !s(e) && c(e);
-	}, () => U(o) ?? 500, { immediate: !1 }), b = V(), x = _e(() => {
-		C.value = S.value;
-	}, He, { immediate: !1 }), S = V(), C = V(), w = (e) => {
-		!(e.hasChildren || e.kind === Q.GROUP) || e.expanded || b.value !== e.key && (b.value = e.key, y.stop(), y.start());
-	}, T = () => {
-		y.stop(), b.value = void 0, x.stop(), S.value = void 0, C.value = void 0;
-	}, E = (e, t, r, i) => {
+	}, b = _e(() => {
+		let e = x.value;
+		e && !c(e) && l(e);
+	}, () => U(o) ?? 500, { immediate: !1 }), x = V(), S = _e(() => {
+		w.value = C.value;
+	}, () => U(s) ?? 1300, { immediate: !1 }), C = V(), w = V(), T = (e) => {
+		!(e.hasChildren || e.kind === Q.GROUP) || e.expanded || x.value !== e.key && (x.value = e.key, b.stop(), b.start());
+	}, E = () => {
+		b.stop(), x.value = void 0, S.stop(), C.value = void 0, w.value = void 0;
+	}, D = (e, t, r, i) => {
 		if (U(n) === Pe.TREE) {
 			let n = t.getBoundingClientRect(), i = Ve * n.height / 2;
 			if (Math.abs(r - (n.top + n.height / 2)) <= i) {
-				if (e.kind === Q.GROUP || C.value === e.key) return Fe.CHILD;
-				S.value !== e.key && (S.value = e.key, x.stop(), x.start());
-			} else S.value === e.key && (x.stop(), S.value = void 0, C.value = void 0);
+				if (e.kind === Q.GROUP || w.value === e.key) return Fe.CHILD;
+				C.value !== e.key && (C.value = e.key, S.stop(), S.start());
+			} else C.value === e.key && (S.stop(), C.value = void 0, w.value = void 0);
 		}
 		return i === "top" ? Fe.BEFORE : Fe.AFTER;
-	}, D, O = (e) => {
+	}, O, k = (e) => {
 		[e, ...e.querySelectorAll("[id], [tabindex]")].forEach((e) => {
 			e.removeAttribute("id"), e.removeAttribute("tabindex");
 		});
-	}, k = (e) => {
+	}, A = (e) => {
 		let t = e.querySelector(".s-ui-table__cell--primary .s-ui-table__cell-body, .s-ui-table__cell--primary .s-ui-table__group-content"), n = t?.closest("td");
 		return t && n ? {
 			content: t,
 			cell: n
 		} : void 0;
-	}, A = (e, t) => {
+	}, j = (e, t) => {
 		let n = document.createElement("div");
 		n.className = "s-ui-table__row-drag-preview", n.setAttribute("aria-hidden", "true");
-		let r = k(e);
-		if (!r) return n.textContent = t ? d(t) : "", n;
+		let r = A(e);
+		if (!r) return n.textContent = t ? f(t) : "", n;
 		let i = r.content.cloneNode(!0);
-		return i instanceof Element && O(i), n.style.inlineSize = `${Math.round(r.cell.getBoundingClientRect().width)}px`, n.appendChild(i), n;
-	}, j = (e, t) => {
-		D && (D.style.transform = `translate(${e + 8}px, ${t + 8}px)`);
-	}, M = (e) => {
-		j(e.clientX, e.clientY);
-	}, ee = (e, t, n) => {
-		N(), D = document.createElement("div"), D.className = "s-ui-table__row-drag-layer", D.appendChild(e), document.body.appendChild(D), document.addEventListener("dragover", M), j(t, n);
-	}, N = () => {
-		document.removeEventListener("dragover", M), D?.remove(), D = void 0;
-	}, P = (t) => {
+		return i instanceof Element && k(i), n.style.inlineSize = `${Math.round(r.cell.getBoundingClientRect().width)}px`, n.appendChild(i), n;
+	}, M = (e, t) => {
+		O && (O.style.transform = `translate(${e + 8}px, ${t + 8}px)`);
+	}, ee = (e) => {
+		M(e.clientX, e.clientY);
+	}, N = (e, t, n) => {
+		P(), O = document.createElement("div"), O.className = "s-ui-table__row-drag-layer", O.appendChild(e), document.body.appendChild(O), document.addEventListener("dragover", ee), M(t, n);
+	}, P = () => {
+		document.removeEventListener("dragover", ee), O?.remove(), O = void 0;
+	}, I = (t) => {
 		if (!(t instanceof HTMLElement)) {
-			f.forEach((e, t) => {
-				t.isConnected || (e(), f.delete(t));
+			p.forEach((e, t) => {
+				t.isConnected || (e(), p.delete(t));
 			});
 			return;
 		}
-		if (f.has(t)) return;
+		if (p.has(t)) return;
 		let n = q(xe({
 			element: t,
-			canDrag: () => _(g(t)),
+			canDrag: () => v(_(t)),
 			getInitialData: () => {
-				let n = g(t);
+				let n = _(t);
 				return {
 					type: ln,
 					tableId: e,
@@ -1781,94 +1788,94 @@ var J = /* @__PURE__ */ function(e) {
 				};
 			},
 			onGenerateDragPreview: ({ nativeSetDragImage: e, location: n }) => {
-				let r = A(t, g(t)), { clientX: i, clientY: a } = n.current.input;
-				Oe({ nativeSetDragImage: e }), ee(r, i, a);
+				let r = j(t, _(t)), { clientX: i, clientY: a } = n.current.input;
+				Oe({ nativeSetDragImage: e }), N(r, i, a);
 			},
 			onDragStart: () => {
-				p.value = g(t)?.key, h.value = void 0;
+				m.value = _(t)?.key, g.value = void 0;
 			},
 			onDrop: () => {
-				p.value = void 0, m.value = void 0, T(), N();
+				m.value = void 0, h.value = void 0, E(), P();
 			}
 		}), Se({
 			element: t,
 			canDrop: ({ source: n }) => {
 				if (!dn(n.data, e)) return !1;
-				let r = g(t);
-				return !r || r.key === n.data.rowKey ? !1 : !v(n.data.rowKey, r.key);
+				let r = _(t);
+				return !r || r.key === n.data.rowKey ? !1 : !y(n.data.rowKey, r.key);
 			},
-			getData: ({ input: e, element: t }) => Ee({ rowKey: g(t)?.key ?? "" }, {
+			getData: ({ input: e, element: t }) => Ee({ rowKey: _(t)?.key ?? "" }, {
 				input: e,
 				element: t,
 				allowedEdges: ["top", "bottom"]
 			}),
 			onDrag: ({ self: e, location: n }) => {
-				let r = g(t);
+				let r = _(t);
 				if (!r) return;
-				w(r);
-				let i = De(e.data), a = i === "top" || i === "bottom" ? i : null, o = E(r, t, n.current.input.clientY, a), s = o === Fe.CHILD ? r.depth + 1 : r.depth, c = m.value;
-				(c?.targetKey !== r.key || c.action !== o || c.depth !== s) && (m.value = {
+				T(r);
+				let i = De(e.data), a = i === "top" || i === "bottom" ? i : null, o = D(r, t, n.current.input.clientY, a), s = o === Fe.CHILD ? r.depth + 1 : r.depth, c = h.value;
+				(c?.targetKey !== r.key || c.action !== o || c.depth !== s) && (h.value = {
 					targetKey: r.key,
 					action: o,
 					depth: s
-				}), h.value = {
+				}), g.value = {
 					targetKey: r.key,
 					action: o,
 					depth: s
 				};
 			},
 			onDragLeave: () => {
-				let e = g(t);
-				m.value?.targetKey === e?.key && (m.value = void 0), b.value === e?.key && (y.stop(), b.value = void 0);
+				let e = _(t);
+				h.value?.targetKey === e?.key && (h.value = void 0), x.value === e?.key && (b.stop(), x.value = void 0);
 			}
 		}));
-		f.set(t, n);
-	}, I = Ce({
+		p.set(t, n);
+	}, L = Ce({
 		canMonitor: ({ source: t }) => dn(t.data, e),
 		onDrop: ({ source: t, location: i }) => {
-			let a = h.value;
-			if (h.value = void 0, p.value = void 0, m.value = void 0, T(), !i.current.dropTargets[0] || !a || !dn(t.data, e)) return;
-			let { flatRows: o, getRowIndexByKey: s } = r.value, c = s(t.data.rowKey), d = s(a.targetKey), f = c === void 0 ? void 0 : o[c], g = d === void 0 ? void 0 : o[d];
-			if (!f || !g || f.key === g.key || v(f.key, g.key)) return;
+			let a = g.value;
+			if (g.value = void 0, m.value = void 0, h.value = void 0, E(), !i.current.dropTargets[0] || !a || !dn(t.data, e)) return;
+			let { flatRows: o, getRowIndexByKey: s } = r.value, c = s(t.data.rowKey), l = s(a.targetKey), f = c === void 0 ? void 0 : o[c], p = l === void 0 ? void 0 : o[l];
+			if (!f || !p || f.key === p.key || y(f.key, p.key)) return;
 			if (U(n) === Pe.FLAT) {
 				if (a.action === Fe.CHILD) return;
-				l({
+				u({
 					action: a.action,
 					sourceKey: f.key,
 					sourceItem: f.item,
-					targetKey: g.key,
-					targetItem: g.item,
+					targetKey: p.key,
+					targetItem: p.item,
 					sourceIndex: f.index,
-					targetIndex: g.index
+					targetIndex: p.index
 				});
 				return;
 			}
-			let _ = a.action === Fe.CHILD, y = _ ? g.key : g.parentKey, b = y === void 0 ? void 0 : s(y), x = b === void 0 ? void 0 : o[b];
-			u({
+			let _ = a.action === Fe.CHILD, v = _ ? p.key : p.parentKey, b = v === void 0 ? void 0 : s(v), x = b === void 0 ? void 0 : o[b];
+			d({
 				action: a.action,
 				sourceKey: f.key,
 				sourceItem: f.item,
-				targetKey: g.key,
-				targetItem: g.item,
-				parentKey: y,
+				targetKey: p.key,
+				targetItem: p.item,
+				parentKey: v,
 				parentItem: x?.item,
-				depth: _ ? g.depth + 1 : g.depth
+				depth: _ ? p.depth + 1 : p.depth
 			});
 		}
-	}), L;
+	}), R;
 	return G(i, (t) => {
-		L?.(), L = void 0, t && (L = ke({
+		R?.(), R = void 0, t && (R = ke({
 			element: t,
 			canScroll: ({ source: t }) => dn(t.data, e)
 		}));
 	}, { immediate: !0 }), F(() => {
-		I(), L?.(), N(), f.forEach((e) => {
+		L(), R?.(), P(), p.forEach((e) => {
 			e();
-		}), f.clear();
+		}), p.clear();
 	}), {
-		registerRowElement: P,
-		draggingRowKey: p,
-		dropIndicator: m
+		registerRowElement: I,
+		draggingRowKey: m,
+		dropIndicator: h
 	};
 }, vn = ({ flatRows: e, virtualEnabled: t, windowIndexes: n, uiTotalSize: r, getRowUiOffset: i, activeGroupRowIndex: a, activeDepthFooterRowIndexes: o, leavingDepthFooterRowIndex: s, slidingDepthFooterRowIndexes: c, farDepthFooterRowIndexes: l, activeRowIndex: u }) => {
 	let d = b(() => {
@@ -2579,6 +2586,7 @@ var J = /* @__PURE__ */ function(e) {
 		rowsDragMode: {},
 		isRowDraggable: { type: Function },
 		dragExpandDelayMs: { default: () => 500 },
+		dragInsideDelayMs: { default: () => He },
 		columnsResizable: {
 			type: Boolean,
 			default: !0
@@ -2587,6 +2595,10 @@ var J = /* @__PURE__ */ function(e) {
 			type: Boolean,
 			default: !0
 		},
+		columnMenu: {
+			type: Boolean,
+			default: !0
+		},
 		scrollSeekPlaceholders: {
 			type: Boolean,
 			default: !0
@@ -2736,6 +2748,7 @@ var J = /* @__PURE__ */ function(e) {
 			scrollElement: te,
 			isRowDraggable: () => e.isRowDraggable,
 			dragExpandDelayMs: () => e.dragExpandDelayMs,
+			dragInsideDelayMs: () => e.dragInsideDelayMs,
 			isExpanded: (e) => p.value.includes(e),
 			onHoverExpand: (e) => {
 				xe(e);
@@ -3048,50 +3061,52 @@ var J = /* @__PURE__ */ function(e) {
 					style: P({ width: `var(${e.liveWidthVar}, var(${e.widthVar}))` })
 				}, null, 4))), 128))
 			]),
-			w("thead", Rn, [w("tr", zn, [(L(!0), C(y, null, z(W(Ee), ({ key: e, descriptor: s }) => (L(), C(y, { key: e }, [s ? (L(), C("th", {
+			w("thead", Rn, [w("tr", zn, [(L(!0), C(y, null, z(W(Ee), ({ key: s, descriptor: c }) => (L(), C(y, { key: s }, [c ? (L(), C("th", {
 				key: 1,
 				id: pr({
 					section: W($).HEADER,
-					columnKey: s.key
+					columnKey: c.key
 				}),
 				ref_for: !0,
-				ref: (e) => ut(e, s.key),
-				class: N(["s-ui-table__header-cell", [W(Oe)(s), { "s-ui-table__header-cell--dragging": W(st) === s.key }]]),
-				style: P(W(De)(s)),
-				"data-column-key": s.key,
+				ref: (e) => ut(e, c.key),
+				class: N(["s-ui-table__header-cell", [W(Oe)(c), { "s-ui-table__header-cell--dragging": W(st) === c.key }]]),
+				style: P(W(De)(c)),
+				"data-column-key": c.key,
 				"data-section": W($).HEADER,
-				"aria-colindex": s.colIndex,
-				"aria-sort": W(Ft)(s),
-				tabindex: yr(W($).HEADER, void 0, s.key),
+				"aria-colindex": c.colIndex,
+				"aria-sort": W(Ft)(c),
+				tabindex: yr(W($).HEADER, void 0, c.key),
 				scope: "col"
-			}, [s.column ? (L(), x(Dt, {
+			}, [c.column ? (L(), x(Dt, {
 				key: 0,
-				descriptor: s,
-				"sort-direction": W(At)(s.key),
-				"sort-index": W(jt)(s.key),
-				"menu-open": Lt.value === s.key,
-				"onUpdate:menuOpen": (e) => Rt(s.key, e),
-				onSortToggle: (e) => W(Nt)(s.key, e),
-				onSortSet: (e) => W(Pt)(s.key, e),
-				onHide: (e) => qt(s.key)
-			}, T({ _: 2 }, [W(F)[`header:${s.key}`] ? {
+				descriptor: c,
+				"sort-direction": W(At)(c.key),
+				"sort-index": W(jt)(c.key),
+				"menu-enabled": e.columnMenu,
+				"menu-open": Lt.value === c.key,
+				"onUpdate:menuOpen": (e) => Rt(c.key, e),
+				onSortToggle: (e) => W(Nt)(c.key, e),
+				onSortSet: (e) => W(Pt)(c.key, e),
+				onHide: (e) => qt(c.key)
+			}, T({ _: 2 }, [W(F)[`header:${c.key}`] ? {
 				name: "default",
-				fn: K(() => [B(t.$slots, `header:${s.key}`, M({ ref_for: !0 }, W(It)(s)))]),
+				fn: K(() => [B(t.$slots, `header:${c.key}`, M({ ref_for: !0 }, W(It)(c)))]),
 				key: "0"
-			} : void 0, W(F)[`header-menu:${s.key}`] ? {
+			} : void 0, W(F)[`header-menu:${c.key}`] ? {
 				name: "menu",
-				fn: K(() => [B(t.$slots, `header-menu:${s.key}`, M({ ref_for: !0 }, W(It)(s)))]),
+				fn: K(() => [B(t.$slots, `header-menu:${c.key}`, M({ ref_for: !0 }, W(It)(c)))]),
 				key: "1"
 			} : void 0]), 1032, [
 				"descriptor",
 				"sort-direction",
 				"sort-index",
+				"menu-enabled",
 				"menu-open",
 				"onUpdate:menuOpen",
 				"onSortToggle",
 				"onSortSet",
 				"onHide"
-			])) : s.service === W(qe).CHECKBOX ? (L(), x(We, {
+			])) : c.service === W(qe).CHECKBOX ? (L(), x(We, {
 				key: 1,
 				class: N(["s-ui-table__header-checkbox", { "s-ui-table__header-checkbox--active": W(Yt) !== W(Z).UNCHECKED }]),
 				"model-value": W(Yt) === W(Z).CHECKED,
@@ -3103,7 +3118,7 @@ var J = /* @__PURE__ */ function(e) {
 				"model-value",
 				"indeterminate",
 				"screen-reader-label"
-			])) : s.service === W(qe).COLUMNS_MANAGER ? (L(), C("div", Hn, [D(W(u), {
+			])) : c.service === W(qe).COLUMNS_MANAGER ? (L(), C("div", Hn, [D(W(u), {
 				modelValue: Bt.value,
 				"onUpdate:modelValue": n[1] ||= (e) => Bt.value = e,
 				placement: W(l).BOTTOM_END,
@@ -3161,16 +3176,16 @@ var J = /* @__PURE__ */ function(e) {
 					_: 3
 				})]),
 				_: 3
-			}, 8, ["modelValue", "placement"])])) : S("", !0), s.resizable ? (L(), C("span", {
+			}, 8, ["modelValue", "placement"])])) : S("", !0), c.resizable ? (L(), C("span", {
 				key: 3,
-				class: N(["s-ui-table__resize-handle", { "s-ui-table__resize-handle--active": W(tt) === s.key }]),
+				class: N(["s-ui-table__resize-handle", { "s-ui-table__resize-handle--active": W(tt) === c.key }]),
 				role: "separator",
 				"aria-orientation": "vertical",
 				"aria-label": W(I)("table.resizeColumn"),
 				tabindex: "-1",
-				onPointerdown: (e) => W(nt)(e, s.key),
-				onKeydown: (e) => W(rt)(e, s.key),
-				onDblclick: (e) => W(it)(s.key),
+				onPointerdown: (e) => W(nt)(e, c.key),
+				onKeydown: (e) => W(rt)(e, c.key),
+				onDblclick: (e) => W(it)(c.key),
 				onClick: n[2] ||= oe(() => {}, ["stop"])
 			}, null, 42, Gn)) : S("", !0)], 14, Vn)) : (L(), C("th", Bn))], 64))), 128))])]),
 			w("tbody", Kn, [
@@ -3231,15 +3246,23 @@ var J = /* @__PURE__ */ function(e) {
 							fn: K(() => [B(t.$slots, "group-row", M({ ref_for: !0 }, ar(n)))]),
 							key: "1"
 						} : void 0,
+						W(F)["group-cell"] ? {
+							name: "group-cell",
+							fn: K((e) => [B(t.$slots, "group-cell", M({ ref_for: !0 }, {
+								...ar(n),
+								...e
+							}))]),
+							key: "2"
+						} : void 0,
 						W(F)["group-title"] ? {
 							name: "title",
 							fn: K(() => [B(t.$slots, "group-title", M({ ref_for: !0 }, ar(n)))]),
-							key: "2"
+							key: "3"
 						} : void 0,
 						W(F)["group-actions"] ? {
 							name: "actions",
 							fn: K(() => [B(t.$slots, "group-actions", M({ ref_for: !0 }, ar(n)))]),
-							key: "3"
+							key: "4"
 						} : void 0
 					]), 1032, [
 						"id",