@runlume/admin-ui 0.1.0 → 0.2.0

package/dist-package/components/combobox.js

@@ -0,0 +1,111 @@
+import { cn as e } from "../lib/utils.js";
+import { Button as t } from "./ui/button.js";
+import { useUiTranslation as n } from "../lib/use-ui-translation.js";
+import { Input as r } from "./ui/input.js";
+import { useMemo as i, useState as a } from "react";
+import { Popover as o } from "radix-ui";
+import { Check as s, ChevronDown as c, X as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/combobox.tsx
+function f({ options: f, value: p, onValueChange: m, label: h, placeholder: g, emptyText: _, clearable: v = !1, disabled: y = !1, className: b }) {
+	let { t: x } = n(), [S, C] = a(!1), [w, T] = a(""), E = i(() => {
+		let e = w.trim().toLowerCase();
+		return f.map((e) => "group" in e ? {
+			group: e.group,
+			options: e.options
+		} : {
+			group: "",
+			options: [e]
+		}).map((t) => ({
+			...t,
+			options: t.options.filter((t) => e === "" || t.label.toLowerCase().includes(e) || t.value.toLowerCase().includes(e))
+		})).filter((e) => e.options.length > 0);
+	}, [f, w]), D = i(() => E.flatMap((e) => e.options), [E]), O = i(() => f.flatMap((e) => "group" in e ? e.options : [e]).find((e) => e.value === p), [f, p]);
+	return /* @__PURE__ */ d(o.Root, {
+		open: S,
+		onOpenChange: (e) => {
+			C(e), e || T("");
+		},
+		children: [/* @__PURE__ */ d("div", {
+			className: e("relative flex items-center", b),
+			children: [/* @__PURE__ */ u(o.Trigger, {
+				asChild: !0,
+				children: /* @__PURE__ */ d(t, {
+					type: "button",
+					variant: "outline",
+					role: "combobox",
+					"aria-expanded": S,
+					"aria-label": h,
+					disabled: y,
+					className: "w-full justify-between bg-card font-normal",
+					children: [/* @__PURE__ */ u("span", {
+						className: e("truncate", !O && "text-muted-foreground"),
+						children: O?.label ?? g ?? x("search")
+					}), /* @__PURE__ */ u(c, {
+						"aria-hidden": "true",
+						className: "size-4 shrink-0 opacity-60"
+					})]
+				})
+			}), v && O && /* @__PURE__ */ u("button", {
+				type: "button",
+				"aria-label": x("clear"),
+				className: "absolute right-8 rounded p-0.5 text-muted-foreground hover:text-foreground",
+				onClick: () => m(void 0),
+				children: /* @__PURE__ */ u(l, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				})
+			})]
+		}), /* @__PURE__ */ u(o.Portal, { children: /* @__PURE__ */ d(o.Content, {
+			align: "start",
+			sideOffset: 4,
+			className: "z-50 w-[var(--radix-popover-trigger-width)] min-w-56 overflow-hidden rounded-lg border bg-popover p-1 shadow-lg outline-none",
+			children: [/* @__PURE__ */ u("div", {
+				className: "p-1",
+				children: /* @__PURE__ */ u(r, {
+					autoFocus: !0,
+					"aria-label": h,
+					value: w,
+					placeholder: g ?? x("search"),
+					className: "h-8",
+					onChange: (e) => T(e.target.value)
+				})
+			}), /* @__PURE__ */ d("div", {
+				role: "listbox",
+				"aria-label": h,
+				className: "max-h-64 overflow-y-auto p-1",
+				children: [E.map((t) => /* @__PURE__ */ d("div", { children: [t.group && /* @__PURE__ */ u("p", {
+					className: "px-2 py-1.5 text-xs text-muted-foreground",
+					children: t.group
+				}), t.options.map((t) => /* @__PURE__ */ d("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": t.value === p,
+					disabled: t.disabled,
+					onClick: () => {
+						m(t.value), C(!1);
+					},
+					className: e("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm", "hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"),
+					children: [/* @__PURE__ */ d("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ u("span", {
+							className: "block truncate",
+							children: t.label
+						}), t.description && /* @__PURE__ */ u("span", {
+							className: "block truncate text-xs text-muted-foreground",
+							children: t.description
+						})]
+					}), t.value === p && /* @__PURE__ */ u(s, {
+						"aria-hidden": "true",
+						className: "size-4 shrink-0"
+					})]
+				}, t.value))] }, t.group || "default")), !D.length && /* @__PURE__ */ u("p", {
+					className: "px-2 py-6 text-center text-sm text-muted-foreground",
+					children: _ ?? x("empty")
+				})]
+			})]
+		}) })]
+	});
+}
+//#endregion
+export { f as Combobox };

package/dist-package/components/confirm-dialog.cjs

@@ -0,0 +1 @@
+const e=require("./ui/button.cjs"),t=require("../lib/use-ui-translation.cjs"),n=require("./ui/dialog.cjs");let r=require("react"),i=require("react/jsx-runtime");function a({open:a,onOpenChange:o,title:s,description:c,confirmLabel:l,tone:u=`default`,onConfirm:d,children:f}){let{t:p}=t.useUiTranslation(),[m,h]=(0,r.useState)(!1);return(0,i.jsx)(n.Dialog,{open:a,onOpenChange:e=>m?void 0:o(e),children:(0,i.jsxs)(n.DialogContent,{className:`sm:max-w-md`,children:[(0,i.jsxs)(n.DialogHeader,{children:[(0,i.jsx)(n.DialogTitle,{children:s}),c&&(0,i.jsx)(n.DialogDescription,{children:c})]}),f,(0,i.jsxs)(n.DialogFooter,{children:[(0,i.jsx)(e.Button,{variant:`outline`,disabled:m,onClick:()=>o(!1),children:p(`cancel`)}),(0,i.jsx)(e.Button,{variant:{default:`default`,danger:`destructive`,warning:`warning`}[u],loading:m,onClick:async()=>{h(!0);try{await d(),o(!1)}finally{h(!1)}},children:l??p(`confirm`)})]})]})})}exports.ConfirmDialog=a;

package/dist-package/components/confirm-dialog.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+/**
+ * 二次确认弹窗：内置确认/取消页脚与异步 loading 状态。
+ * 删除、停用、批量操作等风险动作统一用它。
+ */
+export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, tone, onConfirm, children, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    tone?: 'default' | 'danger' | 'warning';
+    /** 支持异步：等待期间确认按钮显示 loading 且不可重复提交。 */
+    onConfirm: () => void | Promise<void>;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=confirm-dialog.d.ts.map

package/dist-package/components/confirm-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/components/confirm-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAYhD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IACvC,uCAAuC;IACvC,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,+BAmCA"}

package/dist-package/components/confirm-dialog.js

@@ -0,0 +1,44 @@
+import { Button as e } from "./ui/button.js";
+import { useUiTranslation as t } from "../lib/use-ui-translation.js";
+import { Dialog as n, DialogContent as r, DialogDescription as i, DialogFooter as a, DialogHeader as o, DialogTitle as s } from "./ui/dialog.js";
+import { useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/confirm-dialog.tsx
+function d({ open: d, onOpenChange: f, title: p, description: m, confirmLabel: h, tone: g = "default", onConfirm: _, children: v }) {
+	let { t: y } = t(), [b, x] = c(!1);
+	return /* @__PURE__ */ l(n, {
+		open: d,
+		onOpenChange: (e) => b ? void 0 : f(e),
+		children: /* @__PURE__ */ u(r, {
+			className: "sm:max-w-md",
+			children: [
+				/* @__PURE__ */ u(o, { children: [/* @__PURE__ */ l(s, { children: p }), m && /* @__PURE__ */ l(i, { children: m })] }),
+				v,
+				/* @__PURE__ */ u(a, { children: [/* @__PURE__ */ l(e, {
+					variant: "outline",
+					disabled: b,
+					onClick: () => f(!1),
+					children: y("cancel")
+				}), /* @__PURE__ */ l(e, {
+					variant: {
+						default: "default",
+						danger: "destructive",
+						warning: "warning"
+					}[g],
+					loading: b,
+					onClick: async () => {
+						x(!0);
+						try {
+							await _(), f(!1);
+						} finally {
+							x(!1);
+						}
+					},
+					children: h ?? y("confirm")
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { d as ConfirmDialog };

package/dist-package/components/count-to.cjs

@@ -0,0 +1 @@
+const e=require("../lib/metrics.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){return(0,t.useSyncExternalStore)(e=>{let t=window.matchMedia(`(prefers-reduced-motion: reduce)`);return t.addEventListener(`change`,e),()=>t.removeEventListener(`change`,e)},()=>window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,()=>!1)}function i({value:i,duration:a=1200,decimals:o=0,prefix:s=``,suffix:c=``,separator:l=`,`,className:u}){let d=!r()&&a>0,[f,p]=(0,t.useState)(i);return(0,t.useEffect)(()=>{if(!d)return;let e=performance.now(),t=0,n=r=>{let o=Math.min(1,(r-e)/a),s=1-(1-o)**3;p(i*s),o<1&&(t=requestAnimationFrame(n))};return t=requestAnimationFrame(n),()=>cancelAnimationFrame(t)},[i,a,d]),(0,n.jsx)(`span`,{"data-slot":`count-to`,className:u,children:e.formatNumber(d?f:i,{decimals:o,prefix:s,suffix:c,separator:l})})}exports.CountTo=i;

package/dist-package/components/count-to.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 数字滚动。系统开启"减少动态效果"时直接显示终值。
+ */
+export declare function CountTo({ value, duration, decimals, prefix, suffix, separator, className, }: {
+    value: number;
+    duration?: number;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    separator?: string;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=count-to.d.ts.map

package/dist-package/components/count-to.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"count-to.d.ts","sourceRoot":"","sources":["../../src/components/count-to.tsx"],"names":[],"mappings":"AAgBA;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAe,EACf,QAAY,EACZ,MAAW,EACX,MAAW,EACX,SAAe,EACf,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAsBA"}

package/dist-package/components/count-to.js

@@ -0,0 +1,36 @@
+import { formatNumber as e } from "../lib/metrics.js";
+import { useEffect as t, useState as n, useSyncExternalStore as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/count-to.tsx
+function a() {
+	return r((e) => {
+		let t = window.matchMedia("(prefers-reduced-motion: reduce)");
+		return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+	}, () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, () => !1);
+}
+function o({ value: r, duration: o = 1200, decimals: s = 0, prefix: c = "", suffix: l = "", separator: u = ",", className: d }) {
+	let f = !a() && o > 0, [p, m] = n(r);
+	return t(() => {
+		if (!f) return;
+		let e = performance.now(), t = 0, n = (i) => {
+			let a = Math.min(1, (i - e) / o), s = 1 - (1 - a) ** 3;
+			m(r * s), a < 1 && (t = requestAnimationFrame(n));
+		};
+		return t = requestAnimationFrame(n), () => cancelAnimationFrame(t);
+	}, [
+		r,
+		o,
+		f
+	]), /* @__PURE__ */ i("span", {
+		"data-slot": "count-to",
+		className: d,
+		children: e(f ? p : r, {
+			decimals: s,
+			prefix: c,
+			suffix: l,
+			separator: u
+		})
+	});
+}
+//#endregion
+export { o as CountTo };

package/dist-package/components/cursor-pagination.cjs

@@ -0,0 +1 @@
+const e=require("./ui/button.cjs"),t=require("../lib/use-ui-translation.cjs"),n=require("./pagination-bar.cjs"),r=require("./page-button.cjs");let i=require("react/jsx-runtime");function a({count:a,page:o,pending:s,hasNext:c,hasPrevious:l,first:u,previous:d,next:f}){let{t:p}=t.useUiTranslation();return(0,i.jsxs)(n.PaginationBar,{mode:`cursor`,summary:p(`pagination.cursorSummary`,{page:o,count:a}),children:[o>1&&(0,i.jsx)(e.Button,{variant:`ghost`,size:`sm`,disabled:s,onClick:u,children:p(`pagination.firstPage`)}),(0,i.jsx)(r.PageButton,{direction:`previous`,disabled:!l||s,onClick:d,children:p(`previous`)}),(0,i.jsx)(r.PageButton,{direction:`next`,disabled:!c||s,onClick:f,children:p(`next`)})]})}exports.CursorPagination=a;

package/dist-package/components/cursor-pagination.d.ts

@@ -0,0 +1,11 @@
+export declare function CursorPagination({ count, page, pending, hasNext, hasPrevious, first, previous, next, }: {
+    count: number;
+    page: number;
+    pending: boolean;
+    hasNext: boolean;
+    hasPrevious: boolean;
+    first: () => void;
+    previous: () => void;
+    next: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=cursor-pagination.d.ts.map

package/dist-package/components/cursor-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-pagination.d.ts","sourceRoot":"","sources":["../../src/components/cursor-pagination.tsx"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,QAAQ,EACR,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB,+BAiBA"}

package/dist-package/components/cursor-pagination.js

@@ -0,0 +1,39 @@
+import { Button as e } from "./ui/button.js";
+import { useUiTranslation as t } from "../lib/use-ui-translation.js";
+import { PaginationBar as n } from "./pagination-bar.js";
+import { PageButton as r } from "./page-button.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/cursor-pagination.tsx
+function o({ count: o, page: s, pending: c, hasNext: l, hasPrevious: u, first: d, previous: f, next: p }) {
+	let { t: m } = t();
+	return /* @__PURE__ */ a(n, {
+		mode: "cursor",
+		summary: m("pagination.cursorSummary", {
+			page: s,
+			count: o
+		}),
+		children: [
+			s > 1 && /* @__PURE__ */ i(e, {
+				variant: "ghost",
+				size: "sm",
+				disabled: c,
+				onClick: d,
+				children: m("pagination.firstPage")
+			}),
+			/* @__PURE__ */ i(r, {
+				direction: "previous",
+				disabled: !u || c,
+				onClick: f,
+				children: m("previous")
+			}),
+			/* @__PURE__ */ i(r, {
+				direction: "next",
+				disabled: !l || c,
+				onClick: p,
+				children: m("next")
+			})
+		]
+	});
+}
+//#endregion
+export { o as CursorPagination };

package/dist-package/components/data-table.cjs

@@ -0,0 +1 @@
+const e=require("../lib/utils.cjs"),t=require("./ui/button.cjs"),n=require("../lib/use-ui-translation.cjs"),r=require("./ui/dropdown-menu.cjs"),i=require("./ui/skeleton.cjs"),a=require("./ui/tooltip.cjs"),o=require("./ui/table.cjs"),s=require("./table-toolbar.cjs"),c=require("./table-cell-overflow.cjs"),l=require("../lib/table-prefs.cjs"),ee=require("./page.cjs");let u=require("react"),d=require("lucide-react"),f=require("react/jsx-runtime"),p=require("@tanstack/react-table");var m=`a, button, input, select, textarea, label, [role="menuitem"], [role="checkbox"], [role="switch"], [contenteditable="true"]`,h={compact:`px-4 py-2`,default:`px-4 py-3`,relaxed:`px-4 py-4`};function te(e,t,n){let r=e.indexOf(t),i=e.indexOf(n);if(r<0||i<0||r===i)return e;let a=[...e];return a.splice(r,1),a.splice(i,0,t),a}function g({columns:i,visibility:a,onVisibilityChange:o,order:s,onOrderChange:c,pinned:ee,storageId:p}){let{t:m}=n.useUiTranslation(),[h,g]=(0,u.useState)(),[_,v]=(0,u.useState)(),y=i.map(e=>e.id??(`accessorKey`in e?String(e.accessorKey):String(e.header??``))).filter(Boolean),b=s?.length?s:y,x=ee?.first?y[0]:void 0,S=ee?.last?y[y.length-1]:void 0,C=e=>!!c&&e!==x&&e!==S,w=i.filter(e=>e.id!==`select`&&e.id!==`actions`).map(e=>({id:e.id??(`accessorKey`in e?String(e.accessorKey):String(e.header??``)),label:typeof e.header==`string`?e.header:e.id??(`accessorKey`in e?String(e.accessorKey):``)})).sort((e,t)=>b.indexOf(e.id)-b.indexOf(t.id)),T=e=>{if(!h||h===e)return;let t=b.indexOf(h),n=b.indexOf(e);if(!(t<0||n<0))return t<n?`after`:`before`};return(0,f.jsxs)(r.DropdownMenu,{children:[(0,f.jsx)(r.DropdownMenuTrigger,{asChild:!0,children:(0,f.jsxs)(t.Button,{variant:`outline`,children:[(0,f.jsx)(d.Columns3,{"aria-hidden":`true`}),m(`columns`)]})}),(0,f.jsxs)(r.DropdownMenuContent,{align:`end`,className:`w-52`,children:[(0,f.jsx)(r.DropdownMenuLabel,{children:m(`columnsHint`)}),(0,f.jsx)(r.DropdownMenuSeparator,{}),w.map(t=>(0,f.jsxs)(r.DropdownMenuCheckboxItem,{indicator:`trailing`,draggable:C(t.id),className:e.cn(h===t.id&&`opacity-60`,_===t.id&&T(t.id)===`before`&&`shadow-[inset_0_2px_0_0_var(--primary)]`,_===t.id&&T(t.id)===`after`&&`shadow-[inset_0_-2px_0_0_var(--primary)]`),onDragStart:e=>{if(!C(t.id)){e.preventDefault();return}g(t.id),e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`text/plain`,t.id)},onDragOver:e=>{h&&h!==t.id&&C(t.id)&&(e.preventDefault(),e.dataTransfer.dropEffect=`move`,v(t.id))},onDragLeave:()=>v(e=>e===t.id?void 0:e),onDrop:e=>{e.preventDefault();let n=h??e.dataTransfer.getData(`text/plain`);n&&n!==t.id&&c?.(te(b,n,t.id)),g(void 0),v(void 0)},onDragEnd:()=>{g(void 0),v(void 0)},checked:a[t.id]!==!1,onSelect:e=>e.preventDefault(),onCheckedChange:e=>o({...a,[t.id]:e}),children:[(0,f.jsx)(d.GripVertical,{"aria-hidden":`true`,className:`size-3.5 shrink-0 cursor-grab text-muted-foreground/60`}),(0,f.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:t.label})]},t.id)),(0,f.jsx)(r.DropdownMenuSeparator,{}),(0,f.jsxs)(r.DropdownMenuItem,{onSelect:()=>{o({}),l.resetTableLayout(p)},children:[(0,f.jsx)(d.RotateCcw,{"aria-hidden":`true`}),m(`columnsReset`)]})]})]})}function _({data:r,columns:g,caption:_,loading:v,emptyTitle:y,emptyDescription:b,footer:x,toolbar:S,striped:C=!0,sortable:w=!1,defaultSorting:T=[],density:ne=`default`,onRowClick:E,columnVisibility:re,onColumnVisibilityChange:ie,columnOrder:ae,onColumnOrderChange:oe,columnSizes:se,onColumnSizesChange:ce,pinned:le,storageId:D,expandable:O,virtual:k}){let{t:A}=n.useUiTranslation(),ue=(0,u.useRef)(null),j=(0,u.useRef)(null),[M,de]=(0,u.useState)(0),[fe,pe]=(0,u.useState)(240),[me,he]=(0,u.useState)(()=>l.readColumnSizes(D)),N=se??me,P=e=>{let t=typeof e==`function`?e(N):e;(ce??he)(t)},[ge,_e]=(0,u.useState)(()=>l.readColumnOrder(D)),[F,I]=(0,u.useState)(),[ve,L]=(0,u.useState)(),[R,ye]=(0,u.useState)(()=>new Set),[be,xe]=(0,u.useState)(0),[Se,Ce]=(0,u.useState)();(0,u.useEffect)(()=>{l.writeColumnSizes(D,N)},[D,N]);let we=ae??ge,z=oe??_e,Te=g.map(e=>e.id??(`accessorKey`in e?String(e.accessorKey):``)).filter(Boolean),B=[...we.filter(e=>Te.includes(e)),...Te.filter(e=>!we.includes(e))],Ee=B.join(`|`);(0,u.useEffect)(()=>{l.writeColumnOrder(D,B)},[D,Ee]);let V=(0,u.useRef)({setSizes:P,setOrder:z});(0,u.useEffect)(()=>{V.current={setSizes:P,setOrder:z}}),(0,u.useEffect)(()=>{if(D)return l.registerTableReset(D,()=>{V.current.setSizes({}),V.current.setOrder([])})},[D]);let[De,Oe]=(0,u.useState)(T),[ke,Ae]=(0,u.useState)({}),je=re??ke,Me=ie??Ae;(0,u.useLayoutEffect)(()=>{let e=ue.current;if(!e)return;let t=()=>{de(e.clientWidth);let t=Array.from(e.querySelectorAll(`[data-action-content]`));t.length&&pe(Math.ceil(Math.max(...t.map(e=>e.getBoundingClientRect().width))+32))};t();let n=new ResizeObserver(t);return n.observe(e),e.querySelectorAll(`[data-action-content]`).forEach(e=>n.observe(e)),()=>n.disconnect()},[r,g]);let H=(0,p.useReactTable)({data:r,columns:g,getCoreRowModel:(0,p.getCoreRowModel)(),getSortedRowModel:(0,p.getSortedRowModel)(),enableSorting:w,enableMultiSort:w,isMultiSortEvent:e=>typeof e==`object`&&e&&`shiftKey`in e?!!e.shiftKey:!1,state:{sorting:De,columnVisibility:je,columnOrder:B},onSortingChange:Oe,onColumnOrderChange:e=>{let t=typeof e==`function`?e(B):e;z(t)},onColumnVisibilityChange:e=>{let t=typeof e==`function`?e(je):e;Me(t)},manualPagination:!0}),U=H.getRowModel().rows,W=!!k&&!O&&U.length>40,G=k?.rowHeight??Se??45,Ne=k?.height??460,Pe=k?.overscan??6,K=W?Math.max(0,Math.floor(be/G)-Pe):0,q=W?Math.min(U.length,K+Math.ceil(Ne/G)+Pe*2):U.length,J=H.getVisibleLeafColumns(),Y=e=>e===`actions`||e===`action`,X=e=>Y(e)?fe:e===`select`?56:96,Z=new Map(g.filter(e=>e.size!==void 0).map(e=>[e.id??(`accessorKey`in e?String(e.accessorKey).replaceAll(`.`,`_`):typeof e.header==`string`?e.header:``),e.size])),Fe=J.filter(e=>N[e.id]===void 0&&!Y(e.id)&&e.id!==`select`&&!Z.has(e.id)),Ie=J.filter(e=>!Fe.includes(e)).reduce((e,t)=>e+Math.max(X(t.id),N[t.id]??Z.get(t.id)??X(t.id)),0),Q=Object.fromEntries(J.map(e=>[e.id,Fe.includes(e)?Math.max(X(e.id),(M-Ie)/Fe.length):Math.max(X(e.id),N[e.id]??Z.get(e.id)??X(e.id))])),Le=Object.values(Q).reduce((e,t)=>e+t,0);if(Le<M){let e=J.filter(e=>!Y(e.id)&&e.id!==`select`),t=e.length?e:J;for(let e of t)Q[e.id]=(Q[e.id]??0)+(M-Le)/t.length}let Re=Object.values(Q).reduce((e,t)=>e+t,0);function ze(e,t,n){P(r=>({...r,[e]:Math.min(n,Math.max(X(e),t))}))}let Be=g.some(e=>e.id===`select`),Ve=le?.first?g[0]:void 0,He=le?.last?g[g.length-1]:void 0,Ue=e=>e.id??(`accessorKey`in e?String(e.accessorKey):void 0),We=Ve?Ue(Ve):void 0,Ge=He?Ue(He):void 0,Ke=e=>e===We?`sticky left-0 z-10 bg-card shadow-[1px_0_0_0_var(--border)]`:e===Ge?`sticky right-0 z-10 bg-card shadow-[-1px_0_0_0_var(--border)]`:void 0,$=e=>!Y(e)&&e!==`select`&&e!==We&&e!==Ge,qe=e=>{if(!F||F===e)return;let t=B.indexOf(F),n=B.indexOf(e);if(!(t<0||n<0))return t<n?`after`:`before`};return(0,f.jsxs)(a.TooltipProvider,{delayDuration:250,children:[S&&(0,f.jsx)(s.TableToolbar,{children:S}),(0,f.jsxs)(`div`,{ref:ue,className:`data-table flex flex-col overflow-hidden rounded-lg border border-table-border bg-card`,children:[(0,f.jsx)(`div`,{"data-slot":`table-scroll`,className:e.cn(W&&`overflow-auto overscroll-contain`,`[&_[data-slot=table-container]]:overflow-visible`,`[&_[data-slot=table-header]]:sticky [&_[data-slot=table-header]]:top-0 [&_[data-slot=table-header]]:z-10`,`[&_[data-slot=table-header]]:bg-table-header`),style:W?{maxHeight:Ne}:void 0,onScroll:e=>{W&&xe(e.currentTarget.scrollTop)},ref:e=>{if(!e||!W||k?.rowHeight)return;let t=e.querySelector(`tbody tr[data-row]`)?.getBoundingClientRect().height;t&&Math.abs(t-(Se??0))>1&&Ce(t)},children:(0,f.jsxs)(o.Table,{"data-striped":C,"aria-busy":!!v,className:`table-fixed`,style:{width:Re},children:[(0,f.jsx)(`colgroup`,{children:J.map(e=>(0,f.jsx)(`col`,{style:{width:Q[e.id]}},e.id))}),(0,f.jsx)(o.TableCaption,{className:`sr-only`,children:_}),(0,f.jsx)(o.TableHeader,{children:H.getHeaderGroups().map(t=>(0,f.jsx)(o.TableRow,{className:`bg-table-header hover:bg-table-header focus-within:bg-table-header`,children:t.headers.map(t=>(0,f.jsxs)(o.TableHead,{draggable:$(t.column.id),title:$(t.column.id)?A(`columnDragHint`):void 0,onDragStart:e=>{if(!$(t.column.id)||e.target.closest(`[role="separator"]`)){e.preventDefault();return}I(t.column.id),e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`text/plain`,t.column.id)},onDragOver:e=>{F&&F!==t.column.id&&$(t.column.id)&&(e.preventDefault(),e.dataTransfer.dropEffect=`move`,L(t.column.id))},onDragLeave:()=>L(e=>e===t.column.id?void 0:e),onDrop:e=>{e.preventDefault();let n=F??e.dataTransfer.getData(`text/plain`);n&&$(t.column.id)&&z(te(B,n,t.column.id)),I(void 0),L(void 0)},onDragEnd:()=>{I(void 0),L(void 0)},className:e.cn(`relative h-10 px-4 text-sm font-medium text-muted-foreground`,Ke(t.column.id)?.replace(`bg-card`,`bg-table-header`),$(t.column.id)&&`cursor-grab`,F===t.column.id&&`cursor-grabbing opacity-60`,ve===t.column.id&&qe(t.column.id)===`before`&&`bg-primary/5 shadow-[inset_2px_0_0_0_var(--primary)]`,ve===t.column.id&&qe(t.column.id)===`after`&&`bg-primary/5 shadow-[inset_-2px_0_0_0_var(--primary)]`),colSpan:t.colSpan,children:[(0,f.jsx)(`div`,{className:`truncate`,children:t.isPlaceholder?null:t.column.getCanSort()?(0,f.jsxs)(`button`,{type:`button`,"aria-label":t.column.getIsSorted()===`asc`?A(`sortDesc`):A(`sortAsc`),className:`-mx-1 inline-flex items-center gap-1 rounded px-1 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none`,onClick:t.column.getToggleSortingHandler(),children:[(0,p.flexRender)(t.column.columnDef.header,t.getContext()),t.column.getIsSorted()===`asc`?(0,f.jsx)(d.ArrowUp,{"aria-hidden":`true`,className:`size-3.5 text-primary`}):t.column.getIsSorted()===`desc`?(0,f.jsx)(d.ArrowDown,{"aria-hidden":`true`,className:`size-3.5 text-primary`}):(0,f.jsx)(d.ArrowUpDown,{"aria-hidden":`true`,className:`size-3.5 opacity-40`}),De.length>1&&t.column.getSortIndex()>=0&&(0,f.jsx)(`span`,{className:`rounded bg-primary/15 px-1 text-[10px] tabular-nums text-primary`,children:t.column.getSortIndex()+1})]}):(0,p.flexRender)(t.column.columnDef.header,t.getContext())}),!t.isPlaceholder&&t.subHeaders.length===0&&t.column.getCanResize()&&t.column.id!==`select`&&(0,f.jsx)(`div`,{role:`separator`,"aria-orientation":`vertical`,"aria-label":A(`tableResize`,{column:typeof t.column.columnDef.header==`string`?t.column.columnDef.header:t.column.id}),"aria-valuemin":X(t.column.id),"aria-valuemax":Math.max(X(t.column.id),t.column.columnDef.maxSize??2**53-1),"aria-valuenow":Math.round(Q[t.column.id]??X(t.column.id)),tabIndex:0,className:`absolute right-0 top-0 h-full w-2 touch-none cursor-col-resize select-none border-r border-transparent hover:border-primary/40 hover:bg-primary/10 focus:bg-primary/10 focus:outline-none`,onPointerDown:e=>{e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),j.current={id:t.column.id,x:e.clientX,width:Q[t.column.id]??X(t.column.id)}},onPointerMove:e=>{j.current?.id===t.column.id&&ze(t.column.id,j.current.width+e.clientX-j.current.x,Math.max(X(t.column.id),t.column.columnDef.maxSize??2**53-1))},onPointerUp:()=>{j.current=null},onPointerCancel:()=>{j.current=null},onDoubleClick:()=>P(e=>{let n={...e};return delete n[t.column.id],n}),onKeyDown:e=>{(e.key===`ArrowLeft`||e.key===`ArrowRight`)&&(e.preventDefault(),ze(t.column.id,(Q[t.column.id]??X(t.column.id))+(e.key===`ArrowRight`?16:-16),Math.max(X(t.column.id),t.column.columnDef.maxSize??2**53-1)))}})]},t.id))},t.id))}),(0,f.jsxs)(o.TableBody,{children:[W&&K>0&&(0,f.jsx)(o.TableRow,{className:`border-0`,"aria-hidden":`true`,children:(0,f.jsx)(o.TableCell,{colSpan:J.length,className:`p-0`,style:{height:K*G}})}),v?Array.from({length:4},(e,t)=>(0,f.jsx)(o.TableRow,{children:g.map((e,t)=>(0,f.jsx)(o.TableCell,{className:`px-4 py-3`,children:(0,f.jsx)(i.Skeleton,{className:`h-4 w-24`})},t))},t)):U.length?U.slice(K,q).map(n=>(0,f.jsxs)(u.Fragment,{children:[(0,f.jsx)(o.TableRow,{"data-row":``,"data-clickable":E?!0:void 0,className:e.cn(C&&n.index%2==1&&`bg-table-stripe`,E&&`cursor-pointer`),onClick:E?e=>{e.target.closest(m)||E(n.original)}:void 0,children:n.getVisibleCells().map((r,i)=>(0,f.jsx)(o.TableCell,{className:e.cn(h[ne],Ke(r.column.id)),children:Y(r.column.id)?(0,f.jsx)(`div`,{"data-action-content":!0,className:`w-max`,children:(0,p.flexRender)(r.column.columnDef.cell,r.getContext())}):r.column.id===`select`?(0,p.flexRender)(r.column.columnDef.cell,r.getContext()):i===+!!Be&&O?(0,f.jsxs)(`div`,{className:`flex min-w-0 items-center gap-1.5`,children:[(0,f.jsx)(t.Button,{type:`button`,variant:`ghost`,size:`icon-xs`,"aria-expanded":R.has(n.id),"aria-label":A(R.has(n.id)?`collapseRow`:`expandRow`),onClick:()=>{ye(e=>{let t=new Set(e);return t.has(n.id)?t.delete(n.id):t.add(n.id),t})},children:(0,f.jsx)(d.ChevronRight,{"aria-hidden":`true`,className:e.cn(`size-3.5 transition-transform`,R.has(n.id)&&`rotate-90`)})}),(0,f.jsx)(`span`,{className:`min-w-0 flex-1`,children:(0,p.flexRender)(r.column.columnDef.cell,r.getContext())})]}):(0,f.jsx)(c.TableCellOverflow,{children:(0,p.flexRender)(r.column.columnDef.cell,r.getContext())})},r.id))},n.id),O&&R.has(n.id)&&(0,f.jsx)(o.TableRow,{className:`bg-muted/30 hover:bg-muted/30`,children:(0,f.jsx)(o.TableCell,{colSpan:J.length,className:`px-4 py-3`,children:O.content(n.original)})},`${n.id}-detail`)]},n.id)):(0,f.jsx)(o.TableRow,{className:`hover:bg-transparent focus-within:bg-transparent`,children:(0,f.jsx)(o.TableCell,{colSpan:g.length,className:`whitespace-normal`,children:(0,f.jsx)(ee.EmptyState,{title:y,description:b})})}),W&&q<U.length&&(0,f.jsx)(o.TableRow,{className:`border-0`,"aria-hidden":`true`,children:(0,f.jsx)(o.TableCell,{colSpan:J.length,className:`p-0`,style:{height:(U.length-q)*G}})})]})]})}),x&&(0,f.jsx)(`div`,{className:`mt-auto flex flex-wrap items-center justify-between gap-3 border-t border-table-border px-4 py-3 [&>div:only-child]:w-full [&>div:only-child]:p-0`,children:x})]})]})}exports.ColumnManager=g,exports.DataTable=_;

package/dist-package/components/data-table.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react';
+import { type ColumnDef, type SortingState, type VisibilityState } from '@tanstack/react-table';
+import { type ColumnSizes } from '../lib/table-prefs';
+export declare function ColumnManager<T>({ columns, visibility, onVisibilityChange, order, onOrderChange, pinned, storageId, }: {
+    columns: ColumnDef<T>[];
+    visibility: VisibilityState;
+    onVisibilityChange: (state: VisibilityState) => void;
+    /** 当前列顺序；与 DataTable 传同一个数组即可两边联动 */
+    order?: string[];
+    onOrderChange?: (order: string[]) => void;
+    /** 与 DataTable 的 `pinned` 保持一致：固定列不允许拖拽排序 */
+    pinned?: {
+        first?: boolean;
+        last?: boolean;
+    };
+    /** 传入表格的 storageId 后，「恢复默认」会连列宽一起复位。 */
+    storageId?: string;
+}): import("react").JSX.Element;
+export declare function DataTable<T>({ data, columns, caption, loading, emptyTitle, emptyDescription, footer, toolbar, striped, sortable, defaultSorting, density, onRowClick, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, columnSizes, onColumnSizesChange, pinned, storageId, expandable, virtual, }: {
+    data: T[];
+    columns: ColumnDef<T>[];
+    caption: string;
+    loading?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    footer?: ReactNode;
+    toolbar?: ReactNode;
+    striped?: boolean;
+    /** 开启表头排序：点击表头在升序、降序、取消之间循环。 */
+    sortable?: boolean;
+    defaultSorting?: SortingState;
+    /** 行高密度；紧凑适合信息密集的运营列表。 */
+    density?: 'compact' | 'default' | 'relaxed';
+    /**
+     * 整行点击，例如进入详情。行内的按钮、链接、复选框、下拉与输入框会自己处理点击，
+     * 不会顺带冒泡成行点击 —— 操作列的「详情 / 编辑 / ⋯」因此不会和行点击打架。
+     */
+    onRowClick?: (row: T) => void;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: (state: VisibilityState) => void;
+    /** 列顺序（列 id 数组）；不传时用浏览器里保存的顺序，可由表头或列管理拖拽调整。 */
+    columnOrder?: string[];
+    onColumnOrderChange?: (order: string[]) => void;
+    /** 列宽（列 id → px）；受控时由调用方保存，未传时只存浏览器。 */
+    columnSizes?: ColumnSizes;
+    onColumnSizesChange?: (sizes: ColumnSizes) => void;
+    /** 固定列：把第一列固定在左侧、操作列固定在右侧，横向滚动时不跟随。 */
+    pinned?: {
+        first?: boolean;
+        last?: boolean;
+    };
+    /** 传入后把列宽按表名保存在当前浏览器。 */
+    storageId?: string;
+    /** 传入后每行可展开，在行下方渲染详情内容。 */
+    expandable?: {
+        content: (row: T) => ReactNode;
+        label?: string;
+    };
+    /**
+     * 大数据量虚拟滚动：只渲染可视窗口内的行，并给出上下占位行。
+     * 与行内展开互斥（展开会让行高不固定）。
+     */
+    virtual?: {
+        height?: number;
+        rowHeight?: number;
+        overscan?: number;
+    };
+}): import("react").JSX.Element;
+//# sourceMappingURL=data-table.d.ts.map

package/dist-package/components/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"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"}