@datavac/ui-kit 1.8.0-data-table.1 → 1.8.0-data-table.2

package/dist/components/DataTable/types.d.ts

@@ -32,6 +32,11 @@ export interface DataTableColumn<T = Record<string, unknown>> {
      * В планшетных и мобильных карточках колонка скрывается.
      */
     desktopOnly?: boolean;
+    /**
+     * На мобайле (< 480px) колонка занимает половину ширины.
+     * Соседние `mobileHalf`-колонки группируются в одну строку.
+     */
+    mobileHalf?: boolean;
 }
 export interface DataTableProps<T = Record<string, unknown>> {
     columns: DataTableColumn<T>[];

package/dist/index.js

@@ -8967,18 +8967,27 @@ function Gm(e, t) {
 	return n;
 }
 function Km(e) {
+	let t = [], n = 0;
+	for (; n < e.length;) if (e[n].mobileHalf) {
+		let r = [];
+		for (; n < e.length && e[n].mobileHalf;) r.push(e[n]), n++;
+		t.push(r);
+	} else t.push([e[n]]), n++;
+	return t;
+}
+function qm(e) {
 	return {
 		width: e.width == null ? void 0 : typeof e.width == "number" ? `${e.width}px` : e.width,
 		flex: e.flex,
 		minWidth: 0
 	};
 }
-function qm(e, t, n) {
+function Jm(e, t, n) {
 	if (e.render) return e.render(t, n);
 	let r = t[e.key];
 	return r == null ? "" : typeof r == "string" ? r : JSON.stringify(r);
 }
-function Jm({ row: e, index: t, columns: n, isDisabled: r = !1, hasAction: i = !1, mobileActionLabel: a = "Подробнее", mobileDisabledLabel: o = "Нет сведений", tabletColumns: s = 3, desktopBreakpoint: c = "md", onClick: l }) {
+function Ym({ row: e, index: t, columns: n, isDisabled: r = !1, hasAction: i = !1, mobileActionLabel: a = "Подробнее", mobileDisabledLabel: o = "Нет сведений", tabletColumns: s = 3, desktopBreakpoint: c = "md", onClick: l }) {
 	let u = !!l && !r, d = u ? {
 		role: "button",
 		tabIndex: 0,
@@ -8988,33 +8997,33 @@ function Jm({ row: e, index: t, columns: n, isDisabled: r = !1, hasAction: i = !
 		onKeyDown: (e) => {
 			u && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l());
 		}
-	} : {}, h = K("bg-card rounded-xl transition-colors", r ? "text-fg-muted" : "text-fg", !r && u ? "cursor-pointer hover:brightness-[0.97]" : ""), g = r ? "py-[11px]" : "py-4", _ = n.filter((e) => !e.desktopOnly), v = Gm(_, s), { desktop: y, tablet: b } = Wm[c], x = i && /* @__PURE__ */ p("div", {
+	} : {}, h = K("bg-card rounded-xl transition-colors", r ? "text-fg-muted" : "text-fg", !r && u ? "cursor-pointer hover:brightness-[0.97]" : ""), g = r ? "py-[11px]" : "py-4", _ = n.filter((e) => !e.desktopOnly), v = Gm(_, s), y = Km(_), { desktop: b, tablet: x } = Wm[c], S = i && /* @__PURE__ */ p("div", {
 		className: "shrink-0 flex items-center justify-center size-5 rounded-full bg-subtle",
 		children: r ? /* @__PURE__ */ p(Is, {
 			width: 12,
 			height: 12,
 			className: "text-fg-muted"
 		}) : /* @__PURE__ */ p(ws, { className: "text-fg" })
-	}), S = i && /* @__PURE__ */ p("span", {
+	}), C = i && /* @__PURE__ */ p("span", {
 		className: "shrink-0 px-2 py-0.5 bg-subtle rounded-full text-xs text-neutral whitespace-nowrap",
 		children: r ? o : a
 	});
 	return /* @__PURE__ */ m(f, { children: [
 		/* @__PURE__ */ m("div", {
-			className: K(y, "items-center px-3 gap-5", g, h),
+			className: K(b, "items-center px-3 gap-5", g, h),
 			"aria-disabled": r || void 0,
 			...d,
 			children: [n.map((n) => /* @__PURE__ */ p("div", {
 				className: "shrink-0 text-base overflow-hidden text-ellipsis",
-				style: Km(n),
-				children: qm(n, e, t)
+				style: qm(n),
+				children: Jm(n, e, t)
 			}, n.key)), i && /* @__PURE__ */ p("div", {
 				className: "ml-auto",
-				children: x
+				children: S
 			})]
 		}),
 		/* @__PURE__ */ m("div", {
-			className: K(b, "items-start gap-[10px] p-3", h),
+			className: K(x, "items-start gap-[10px] p-3", h),
 			"aria-disabled": r || void 0,
 			...d,
 			children: [/* @__PURE__ */ p("div", {
@@ -9028,35 +9037,38 @@ function Jm({ row: e, index: t, columns: n, isDisabled: r = !1, hasAction: i = !
 							children: n.label
 						}), /* @__PURE__ */ p("div", {
 							className: "text-sm",
-							children: qm(n, e, t)
+							children: Jm(n, e, t)
 						})]
 					}, n.key))
 				}, r))
-			}), x]
+			}), S]
 		}),
 		/* @__PURE__ */ p("div", {
 			className: K("min-[480px]:hidden flex flex-col gap-[10px] px-3 py-4", h),
 			"aria-disabled": r || void 0,
 			...d,
-			children: _.map((n, r) => /* @__PURE__ */ m("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ m("div", {
-					className: "flex items-center justify-between gap-2",
-					children: [/* @__PURE__ */ p("span", {
-						className: "text-xs text-fg-secondary",
-						children: n.label
-					}), r === 0 && S]
-				}), /* @__PURE__ */ p("div", {
-					className: "text-sm",
-					children: qm(n, e, t)
-				})]
-			}, n.key))
+			children: y.map((n, r) => /* @__PURE__ */ p("div", {
+				className: "flex gap-3 w-full",
+				children: n.map((n, i) => /* @__PURE__ */ m("div", {
+					className: "flex-1 flex flex-col gap-1 min-w-0",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ p("span", {
+							className: "text-xs text-fg-secondary",
+							children: n.label
+						}), r === 0 && i === 0 && C]
+					}), /* @__PURE__ */ p("div", {
+						className: "text-sm",
+						children: Jm(n, e, t)
+					})]
+				}, n.key))
+			}, n[0].key))
 		})
 	] });
 }
 //#endregion
 //#region src/components/DataTable/DataTable.tsx
-var Ym = {
+var Xm = {
 	md: {
 		show: "hidden md:flex",
 		hide: "md:hidden"
@@ -9066,7 +9078,7 @@ var Ym = {
 		hide: "lg:hidden"
 	}
 };
-function Xm({ columns: e, rows: t, isRowDisabled: n, onRowClick: r, getRowKey: i, sortField: a, sortDirection: o = "asc", onSortChange: s, mobileActionLabel: c = "Подробнее", mobileDisabledLabel: l = "Нет сведений", tabletColumns: u = 3, desktopBreakpoint: d = "md", className: f }) {
+function Zm({ columns: e, rows: t, isRowDisabled: n, onRowClick: r, getRowKey: i, sortField: a, sortDirection: o = "asc", onSortChange: s, mobileActionLabel: c = "Подробнее", mobileDisabledLabel: l = "Нет сведений", tabletColumns: u = 3, desktopBreakpoint: d = "md", className: f }) {
 	let h = e.filter((e) => e.sortable), g = h.length > 0 && !!s, _ = h.flatMap((e) => [{
 		value: `${e.key}::asc`,
 		label: `По ${e.label} А – Я`
@@ -9076,7 +9088,7 @@ function Xm({ columns: e, rows: t, isRowDisabled: n, onRowClick: r, getRowKey: i
 	}]), v = a && o ? `${a}::${o}` : _[0]?.value ?? "", y = (e) => {
 		let t = e.lastIndexOf("::");
 		t === -1 || !s || s(e.slice(0, t), e.slice(t + 2));
-	}, b = !!r, { show: x, hide: S } = Ym[d];
+	}, b = !!r, { show: x, hide: S } = Xm[d];
 	return /* @__PURE__ */ m("div", {
 		className: K("flex flex-col gap-3", f),
 		children: [
@@ -9139,7 +9151,7 @@ function Xm({ columns: e, rows: t, isRowDisabled: n, onRowClick: r, getRowKey: i
 			}),
 			/* @__PURE__ */ p("div", {
 				className: "flex flex-col gap-1",
-				children: t.map((t, a) => /* @__PURE__ */ p(Jm, {
+				children: t.map((t, a) => /* @__PURE__ */ p(Ym, {
 					row: t,
 					index: a,
 					columns: e,
@@ -9156,4 +9168,4 @@ function Xm({ columns: e, rows: t, isRowDisabled: n, onRowClick: r, getRowKey: i
 	});
 }
 //#endregion
-export { Gd as Accordion, Kd as AccordionItem, Jf as AdministrationIcon, bs as ArrowDownArrowUpIcon, xs as ArrowDownToBracketIcon, Cs as ArrowIcon, Ss as ArrowUpRightFromSquareIcon, ws as ArrowsIcon, bt as Badge, Ts as BottleIcon, yt as Button, nt as Caption, Jd as Card, Es as ChevronDownIcon, xt as Chip, Ds as CircleAttentionIcon, Os as CircleMinusIcon, ks as CirclePlusIcon, As as CircleXmarkIcon, js as CopyIcon, St as Counter, Xm as DataTable, Ms as DnaIcon, Bu as Drawer, Yd as EmptyState, Xd as ErrorState, Ns as FileArrowDownIcon, $e as Heading, Ps as InfoCircleIcon, Ct as Input, tt as Label, Fs as MenuIcon, Is as MinusIcon, Ls as MoonStarsIcon, Rs as PlusIcon, Xs as SearchBar, ys as SearchDropdown, zs as SearchIcon, Bs as SearchListIcon, Hm as Select, _s as Skeleton, Um as SortControl, gs as Spinner, Hs as SunIcon, Vs as SunMiniIcon, Xf as Switch, Rf as Tabs, dp as TagFilter, Us as TestTubeIcon, et as Text, sp as ThemeProvider, lp as ThemeToggle, Ws as ThermometerIcon, Uc as Tooltip, Gs as VirusIcon, qs as XmarkIcon, Ks as XmarkLargeIcon, K as cn, Qf as darkTheme, Zf as defaultTheme, ep as themes, np as tokensToCssVars, cp as useTheme };
+export { Gd as Accordion, Kd as AccordionItem, Jf as AdministrationIcon, bs as ArrowDownArrowUpIcon, xs as ArrowDownToBracketIcon, Cs as ArrowIcon, Ss as ArrowUpRightFromSquareIcon, ws as ArrowsIcon, bt as Badge, Ts as BottleIcon, yt as Button, nt as Caption, Jd as Card, Es as ChevronDownIcon, xt as Chip, Ds as CircleAttentionIcon, Os as CircleMinusIcon, ks as CirclePlusIcon, As as CircleXmarkIcon, js as CopyIcon, St as Counter, Zm as DataTable, Ms as DnaIcon, Bu as Drawer, Yd as EmptyState, Xd as ErrorState, Ns as FileArrowDownIcon, $e as Heading, Ps as InfoCircleIcon, Ct as Input, tt as Label, Fs as MenuIcon, Is as MinusIcon, Ls as MoonStarsIcon, Rs as PlusIcon, Xs as SearchBar, ys as SearchDropdown, zs as SearchIcon, Bs as SearchListIcon, Hm as Select, _s as Skeleton, Um as SortControl, gs as Spinner, Hs as SunIcon, Vs as SunMiniIcon, Xf as Switch, Rf as Tabs, dp as TagFilter, Us as TestTubeIcon, et as Text, sp as ThemeProvider, lp as ThemeToggle, Ws as ThermometerIcon, Uc as Tooltip, Gs as VirusIcon, qs as XmarkIcon, Ks as XmarkLargeIcon, K as cn, Qf as darkTheme, Zf as defaultTheme, ep as themes, np as tokensToCssVars, cp as useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datavac/ui-kit",
-  "version": "1.8.0-data-table.1",
+  "version": "1.8.0-data-table.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",