@krosoft/react 0.0.381 → 0.0.382

package/dist/components/core/table/TableBody.js

@@ -0,0 +1,130 @@
+import { ACTIONS_COLUMN_KEY as e, SELECTION_COLUMN_KEY as t, getAlignmentClass as n, getColumnAlignment as r, getFixedCellProps as i } from "../../../helpers/table.helper.js";
+import { useKrosoftTranslation as a } from "../../../i18n/useKrosoftTranslation.js";
+import { Checkbox as o } from "../../ui/checkbox.js";
+import { TableActions as s } from "./TableActions.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { AlertTriangleIcon as u, Loader2Icon as d } from "lucide-react";
+import { useNavigate as f } from "react-router-dom";
+//#region src/components/core/table/TableBody.tsx
+function p({ isLoading: p, error: m, colSpanCount: h, messages: g, paginatedData: _, rowKey: v, onRowClick: y, onRowNavigate: b, rowNavigable: x, hasBulkActions: S, rowSelectable: C, selectedKeys: w, toggleRowSelection: T, visibleColumnsArray: E, columnWidths: D, hasActions: O, actions: k, columns: A, bordered: j = !1, dense: M = !1, resizableColumns: N = !1, fixedColumns: P = {} }) {
+	let { t: F } = a(), I = F(g?.loadingKey ?? "states.loading"), L = F(g?.emptyKey ?? "states.noResult"), R = f(), z = (e, t) => {
+		let n = A.find((e) => e.key === t);
+		if (n?.renderCell !== void 0) return n.renderCell(e);
+		let r = e[t];
+		return /* @__PURE__ */ c("span", {
+			className: "text-sm truncate",
+			children: r == null ? "-" : String(r)
+		});
+	};
+	if (p) return /* @__PURE__ */ c("tbody", {
+		className: "divide-y divide-border",
+		children: /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+			colSpan: h,
+			className: "py-8 text-center",
+			children: /* @__PURE__ */ l("div", {
+				className: "flex flex-col items-center justify-center gap-2 text-muted-foreground",
+				children: [/* @__PURE__ */ c(d, { className: "h-6 w-6 animate-spin text-primary" }), /* @__PURE__ */ c("span", {
+					className: "text-sm",
+					children: I
+				})]
+			})
+		}) })
+	});
+	if (m) return /* @__PURE__ */ c("tbody", {
+		className: "divide-y divide-border",
+		children: /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+			colSpan: h,
+			className: "py-8 text-center",
+			children: /* @__PURE__ */ l("div", {
+				className: "flex flex-col items-center justify-center gap-2 text-destructive",
+				children: [/* @__PURE__ */ c(u, { className: "h-6 w-6" }), /* @__PURE__ */ c("span", {
+					className: "text-sm",
+					children: m
+				})]
+			})
+		}) })
+	});
+	if (_.length === 0) return /* @__PURE__ */ c("tbody", {
+		className: "divide-y divide-border",
+		children: /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+			colSpan: h,
+			className: "py-8 text-center text-sm text-muted-foreground",
+			children: L
+		}) })
+	});
+	let B = i(P[t], "body"), V = i(P[e], "body"), H = S && w.size > 0, U = (e) => {
+		if (x === void 0 || x(e)) return b?.(e);
+	}, W = (e, t, n) => {
+		H ? T(e) : t === void 0 ? y?.(e, n) : n.ctrlKey || n.metaKey ? window.open(t, "_blank") : R(t);
+	};
+	return /* @__PURE__ */ c("tbody", {
+		className: "divide-y divide-border",
+		children: _.map((e) => {
+			let t = v(e), a = C === void 0 || C(e), u = U(e);
+			return /* @__PURE__ */ l("tr", {
+				className: `group hover:bg-muted/50 transition-colors ${H || u !== void 0 || y !== void 0 ? "cursor-pointer" : ""}`,
+				onClick: (t) => {
+					W(e, u, t);
+				},
+				children: [
+					S ? /* @__PURE__ */ c("td", {
+						className: `p-1 text-center align-middle ${B.className}`,
+						style: {
+							width: "48px",
+							minWidth: "48px",
+							maxWidth: "48px",
+							...B.style
+						},
+						onClick: (e) => {
+							e.stopPropagation();
+						},
+						children: /* @__PURE__ */ c("div", {
+							className: "flex items-center justify-center",
+							children: /* @__PURE__ */ c(o, {
+								checked: w.has(t),
+								disabled: !a,
+								onCheckedChange: () => {
+									T(e);
+								}
+							})
+						})
+					}) : null,
+					E.map((t, a) => {
+						let o = a === E.length - 1, s = i(P[t.key], "body");
+						return /* @__PURE__ */ c("td", {
+							className: `${`${a === 0 && !S ? "pl-4" : "pl-2"} ${o && !O ? "pr-4" : "pr-2"}`} ${M ? "py-2" : "py-4"} text-sm ${n(r(t))} ${s.className} ${j && !o ? "border-r border-border" : ""} ${t.className ?? ""}`,
+							style: {
+								...N ? { width: D[t.key] } : { minWidth: D[t.key] },
+								...s.style
+							},
+							children: /* @__PURE__ */ c("div", {
+								className: "w-full h-full",
+								children: z(e, t.key)
+							})
+						}, t.key);
+					}),
+					O ? /* @__PURE__ */ c("td", {
+						className: `py-1 pl-1 pr-4 text-right align-middle whitespace-nowrap ${V.className}`,
+						style: {
+							minWidth: "32px",
+							...V.style
+						},
+						onClick: (e) => {
+							e.stopPropagation();
+						},
+						children: k !== void 0 && k.length > 0 ? /* @__PURE__ */ c("div", {
+							className: "flex items-center justify-end",
+							children: /* @__PURE__ */ c(s, {
+								actions: k,
+								row: e
+							})
+						}) : null
+					}) : null
+				]
+			}, t);
+		})
+	});
+}
+//#endregion
+export { p as TableBody };

package/dist/components/core/table/TableBulkActions.js

@@ -0,0 +1,47 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/core/table/TableBulkActions.tsx
+function i({ selectedRows: i, setSelectedRows: a, bulkActions: o }) {
+	let { t: s } = e();
+	return /* @__PURE__ */ r("div", {
+		className: "bg-muted/60 border border-border px-3 py-1.5 flex items-center justify-between rounded-surface",
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ n("span", {
+				className: "text-sm font-medium text-primary ml-1",
+				children: s("table.selectedCount", { count: i.length })
+			}), /* @__PURE__ */ n("div", {
+				className: "flex items-center gap-2",
+				children: o.map((e, o) => {
+					let c = e.icon;
+					return /* @__PURE__ */ r(t, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							e.onClick(i, () => {
+								a([]);
+							});
+						},
+						className: `h-7 bg-background shadow-sm text-xs px-2.5 ${e.variant === "destructive" ? "text-destructive border-destructive/30 hover:bg-destructive/10 hover:text-destructive" : "text-foreground"}`,
+						children: [c !== void 0 && /* @__PURE__ */ n("span", {
+							className: "mr-1.5 flex items-center justify-center",
+							children: /* @__PURE__ */ n(c, { className: "h-3.5 w-3.5" })
+						}), s(e.labelKey)]
+					}, o);
+				})
+			})]
+		}), /* @__PURE__ */ n(t, {
+			variant: "ghost",
+			size: "sm",
+			onClick: () => {
+				a([]);
+			},
+			className: "text-xs text-muted-foreground hover:text-foreground h-7 px-2",
+			children: s("table.clearSelection")
+		})]
+	});
+}
+//#endregion
+export { i as TableBulkActions };

package/dist/components/core/table/TableHeader.js

@@ -0,0 +1,103 @@
+import { ACTIONS_COLUMN_KEY as e, SELECTION_COLUMN_KEY as t, getAlignmentClass as n, getColumnAlignment as r, getFixedCellProps as i } from "../../../helpers/table.helper.js";
+import { useKrosoftTranslation as a } from "../../../i18n/useKrosoftTranslation.js";
+import { Checkbox as o } from "../../ui/checkbox.js";
+import "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ArrowDownIcon as l, ArrowUpDownIcon as u, ArrowUpIcon as d, GripVerticalIcon as f } from "lucide-react";
+//#region src/components/core/table/TableHeader.tsx
+var p = {
+	left: "justify-start",
+	center: "justify-center",
+	right: "justify-end"
+};
+function m({ hasBulkActions: m, allSelected: h, someSelected: g, toggleSelectAll: _, visibleColumnsArray: v, draggableColumns: y, resizableColumns: b, columnWidths: x, sortColumn: S, sortDirection: C, handleSort: w, handleDragStart: T, handleDragOver: E, handleDrop: D, handleMouseDown: O, hasActions: k, settingsNode: A, bordered: j = !1, dense: M = !1, fixedColumns: N = {}, fixedSelection: P = !1, fixedActions: F = !1 }) {
+	let { t: I } = a(), L = !1;
+	h ? L = !0 : g && (L = "indeterminate");
+	let R = (e) => e.sortable === !0 ? S === e.key ? s(C === "asc" ? d : l, { className: "size-3.5 text-foreground" }) : /* @__PURE__ */ s(u, { className: "size-3.5 text-muted-foreground/50 group-hover:text-muted-foreground transition-colors" }) : null, z = (e, t, a) => {
+		let o = a !== !1 && e.fixed === void 0, l = e.sortable === !0, u = i(N[e.key], "header"), d = r(e), h = R(e), g = t === 0 && !m, _ = t === v.length - 1 && !(k || A !== void 0), y = `${g ? "pl-4" : "pl-2"} ${_ ? "pr-4" : "pr-2"}`;
+		return /* @__PURE__ */ c("th", {
+			"data-column-key": e.key,
+			"data-fixed-side": e.fixed,
+			className: [
+				`${y} ${M ? "py-2" : "py-4"} text-sm font-medium text-foreground group`,
+				n(d),
+				u.className,
+				j ? "border-r border-border" : "",
+				l ? "cursor-pointer select-none" : "",
+				e.className ?? ""
+			].filter(Boolean).join(" "),
+			style: {
+				...b ? { width: x[e.key] } : { minWidth: x[e.key] },
+				...u.style
+			},
+			draggable: o,
+			onClick: () => {
+				w(e.key);
+			},
+			onDragStart: (t) => {
+				o ? T(t, e.key) : t.preventDefault();
+			},
+			onDragOver: (t) => {
+				E(t, e.key);
+			},
+			onDrop: (t) => {
+				D(t, e.key);
+			},
+			children: [/* @__PURE__ */ c("div", {
+				className: `flex items-center gap-1 ${p[d]} ${b ? "pr-2" : ""}`,
+				children: [
+					o ? /* @__PURE__ */ s(f, { className: "size-4 text-muted-foreground cursor-grab shrink-0" }) : null,
+					/* @__PURE__ */ s("span", {
+						className: "truncate",
+						children: I(e.headerKey)
+					}),
+					h === null ? null : /* @__PURE__ */ s("span", {
+						className: "ml-1 shrink-0",
+						children: h
+					})
+				]
+			}), b ? /* @__PURE__ */ s("div", {
+				className: "absolute right-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-blue-500 opacity-0 group-hover:opacity-50 transition-opacity",
+				onMouseDown: (t) => {
+					O(t, e.key);
+				}
+			}) : null]
+		}, e.key);
+	}, B = i(N[t], "header"), V = i(N[e], "header");
+	return /* @__PURE__ */ s("thead", {
+		className: "bg-muted/50 border-b border-border",
+		children: /* @__PURE__ */ c("tr", { children: [
+			m ? /* @__PURE__ */ s("th", {
+				"data-column-key": t,
+				"data-fixed-side": P ? "left" : void 0,
+				className: `p-1 text-center align-middle ${B.className}`,
+				style: {
+					width: "48px",
+					minWidth: "48px",
+					maxWidth: "48px",
+					...B.style
+				},
+				children: /* @__PURE__ */ s("div", {
+					className: "flex items-center justify-center",
+					children: /* @__PURE__ */ s(o, {
+						checked: L,
+						onCheckedChange: _
+					})
+				})
+			}) : null,
+			v.map((e, t) => z(e, t, y)),
+			k || A !== void 0 ? /* @__PURE__ */ s("th", {
+				"data-column-key": e,
+				"data-fixed-side": F ? "right" : void 0,
+				className: `py-1 pl-1 pr-4 text-right align-middle ${V.className}`,
+				style: {
+					minWidth: "32px",
+					...V.style
+				},
+				children: A
+			}) : null
+		] })
+	});
+}
+//#endregion
+export { m as TableHeader };

package/dist/components/core/table/TablePagination.js

@@ -0,0 +1,102 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../ui/select.js";
+import "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronLeftIcon as u, ChevronRightIcon as d } from "lucide-react";
+//#region src/components/core/table/TablePagination.tsx
+var f = "…";
+function p(e, t) {
+	return Array.from({ length: t - e + 1 }, (t, n) => e + n);
+}
+function m(e, t, n = 1) {
+	if (n * 2 + 5 >= t) return p(1, t);
+	let r = Math.max(e - n, 1), i = Math.min(e + n, t), a = r > 2, o = i < t - 1;
+	return !a && o ? [
+		...p(1, n + 2),
+		f,
+		t
+	] : a && !o ? [
+		1,
+		f,
+		...p(t - (n + 2) + 1, t)
+	] : [
+		1,
+		f,
+		...p(r, i),
+		f,
+		t
+	];
+}
+function h({ totalItems: p, startIndex: h, endIndex: g, pageSize: _, setPageSize: v, currentPage: y, setCurrentPage: b, pageSizeOptions: x, totalPages: S }) {
+	let { t: C } = e(), w = m(y, S);
+	return /* @__PURE__ */ l("div", {
+		className: "px-4 py-2 border-t border-border flex flex-col sm:grid sm:grid-cols-3 items-center gap-2 bg-muted/50",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "text-sm text-muted-foreground justify-self-start",
+				children: C("table.rangeOfTotal", {
+					range: p === 0 ? "0" : `${String(h + 1)} - ${String(g)}`,
+					total: p
+				})
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex items-center justify-center gap-1",
+				children: S > 1 && /* @__PURE__ */ l(s, { children: [
+					/* @__PURE__ */ c(t, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-8 w-8 rounded-control",
+						onClick: () => {
+							b((e) => Math.max(1, e - 1));
+						},
+						disabled: y === 1,
+						"aria-label": C("table.previousPage"),
+						children: /* @__PURE__ */ c(u, { className: "size-4" })
+					}),
+					w.map((e, n) => e === f ? /* @__PURE__ */ c("span", {
+						className: "flex h-8 w-8 items-center justify-center text-sm text-muted-foreground",
+						children: f
+					}, `dots-${String(n)}`) : /* @__PURE__ */ c(t, {
+						variant: e === y ? "default" : "ghost",
+						className: "h-8 min-w-8 px-2 rounded-control text-sm tabular-nums",
+						onClick: () => {
+							b(e);
+						},
+						"aria-current": e === y ? "page" : void 0,
+						children: e
+					}, e)),
+					/* @__PURE__ */ c(t, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-8 w-8 rounded-control",
+						onClick: () => {
+							b((e) => Math.min(S, e + 1));
+						},
+						disabled: y === S,
+						"aria-label": C("table.nextPage"),
+						children: /* @__PURE__ */ c(d, { className: "size-4" })
+					})
+				] })
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "justify-self-end",
+				children: /* @__PURE__ */ l(n, {
+					value: String(_),
+					onValueChange: (e) => {
+						v(Number(e)), b(1);
+					},
+					children: [/* @__PURE__ */ c(a, {
+						className: "h-8 w-[110px] text-sm",
+						children: /* @__PURE__ */ c(o, {})
+					}), /* @__PURE__ */ c(r, { children: x.map((e) => /* @__PURE__ */ c(i, {
+						value: String(e),
+						children: C("table.perPage", { count: e })
+					}, e)) })]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { h as TablePagination };

package/dist/components/core/table/TableSettings.js

@@ -0,0 +1,117 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as n } from "../../ui/button.js";
+import { Checkbox as r } from "../../ui/checkbox.js";
+import { Popover as i, PopoverContent as a, PopoverTrigger as o } from "../../ui/popover.js";
+import { useMemo as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { SearchIcon as d, SettingsIcon as f } from "lucide-react";
+//#region src/components/core/table/TableSettings.tsx
+function p({ columns: p, visibleColumns: m, toggleColumnVisibility: h, setColumnsVisibility: g }) {
+	let { t: _ } = t(), [v, y] = c(""), b = s(() => p.map((e, t) => ({
+		key: e.key,
+		label: _(e.headerKey),
+		locked: t === 0
+	})), [p, _]), x = s(() => {
+		let e = v.trim().toLowerCase();
+		return e === "" ? b : b.filter((t) => t.label.toLowerCase().includes(e));
+	}, [b, v]), S = (e) => {
+		let t = x.filter((e) => !e.locked).map((e) => e.key).filter((t) => m.has(t) !== e);
+		g === void 0 ? t.forEach(h) : g(t, e);
+	};
+	return /* @__PURE__ */ u(i, {
+		onOpenChange: (e) => {
+			e || y("");
+		},
+		children: [/* @__PURE__ */ l(o, {
+			asChild: !0,
+			children: /* @__PURE__ */ l(n, {
+				variant: "outline",
+				size: "sm",
+				className: "size-7 p-0 bg-background hover:bg-muted shadow-sm border-border",
+				children: /* @__PURE__ */ l(f, { className: "size-3.5 text-muted-foreground" })
+			})
+		}), /* @__PURE__ */ u(a, {
+			align: "end",
+			className: "w-64 p-0",
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "flex items-center justify-between px-3 pt-3 pb-2",
+					children: [/* @__PURE__ */ l("span", {
+						className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+						children: _("table.columnsTitle")
+					}), /* @__PURE__ */ u("span", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							m.size,
+							" / ",
+							p.length
+						]
+					})]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "px-2 pb-2",
+					children: /* @__PURE__ */ u("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ l(d, { className: "absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ l("input", {
+							value: v,
+							onChange: (e) => {
+								y(e.target.value);
+							},
+							placeholder: _("search.placeholder"),
+							className: "w-full rounded-control bg-muted/50 py-1.5 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring",
+							autoFocus: !0
+						})]
+					})
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "flex max-h-72 flex-col gap-0.5 overflow-y-auto overflow-x-hidden border-t border-border p-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-track]:bg-transparent",
+					children: [x.length === 0 && /* @__PURE__ */ l("p", {
+						className: "px-2 py-3 text-center text-xs text-muted-foreground",
+						children: _("states.noResult")
+					}), x.map((t) => /* @__PURE__ */ u("label", {
+						className: e("flex min-w-0 items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors", t.locked ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer hover:bg-muted"),
+						children: [/* @__PURE__ */ l(r, {
+							checked: t.locked || m.has(t.key),
+							disabled: t.locked,
+							onCheckedChange: () => {
+								h(t.key);
+							}
+						}), /* @__PURE__ */ l("span", {
+							className: "min-w-0 flex-1 truncate",
+							title: t.label,
+							children: t.label
+						})]
+					}, t.key))]
+				}),
+				x.length > 0 && /* @__PURE__ */ u("div", {
+					className: "flex items-center justify-end gap-2 border-t border-border px-3 py-2 text-xs",
+					children: [
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => {
+								S(!0);
+							},
+							className: "font-medium text-primary hover:underline",
+							children: _("table.showAllColumns")
+						}),
+						/* @__PURE__ */ l("span", {
+							className: "h-3 w-px bg-border",
+							"aria-hidden": !0
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							onClick: () => {
+								S(!1);
+							},
+							className: "font-medium text-primary hover:underline",
+							children: _("table.hideAllColumns")
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { p as TableSettings };