@nccirtu/tablefy 0.7.3 → 0.7.5

package/dist/index.js

@@ -14,9 +14,9 @@ var badge = require('@/components/ui/badge');
 var checkbox = require('@/components/ui/checkbox');
 var tooltip = require('@/components/ui/tooltip');
 var progress = require('@/components/ui/progress');
-var dialog = require('@/components/ui/dialog');
+var alertDialog = require('@/components/ui/alert-dialog');
 
-function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, className, }) {
+function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, enableColumnVisibility = false, columnVisibilityLabel = "Spalten", className, }) {
     const normalActions = actions.filter((a) => !a.bulk && !a.hidden);
     const bulkActions = actions.filter((a) => a.bulk && !a.hidden);
     const showBulkActions = selectedCount > 0 && bulkActions.length > 0;
@@ -50,7 +50,14 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
         return null;
     }
     return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-4", className), children: [(title || description) && (jsxRuntime.jsxs("div", { className: "space-y-1", children: [title && (jsxRuntime.jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title })), description && (jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description }))] })), (search?.enabled || normalActions.length > 0 || showBulkActions) && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [search?.enabled && (jsxRuntime.jsxs("div", { className: "relative max-w-sm flex-1", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), jsxRuntime.jsx(input.Input, { placeholder: search.placeholder || "Suchen...", value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), className: "pl-9 pr-9" }), searchValue && (jsxRuntime.jsx("button", { onClick: () => onSearchChange?.(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [showBulkActions && (jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [selectedCount, " ausgew\u00E4hlt"] })), showBulkActions &&
-                                bulkActions.map((action, index) => renderAction(action, index)), normalActions.length > 0 &&
+                                bulkActions.map((action, index) => renderAction(action, index)), enableColumnVisibility && table && (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: "outline", size: "default", children: [jsxRuntime.jsx(lucideReact.Columns, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "ml-2", children: columnVisibilityLabel }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-[200px]", children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuLabel, { children: columnVisibilityLabel }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), table
+                                                .getAllColumns()
+                                                .filter((column) => column.getCanHide())
+                                                .map((column) => {
+                                                const meta = column.columnDef.meta;
+                                                const label = meta?.visibilityLabel || column.id;
+                                                return (jsxRuntime.jsx(dropdownMenu.DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: label }, column.id));
+                                            })] })] })), normalActions.length > 0 &&
                                 normalActions.map((action, index) => renderAction(action, index))] })] }))] }));
 }
 
@@ -376,7 +383,16 @@ class EmptyStateBuilder {
 function DataTable({ columns, data, config = {}, className, isLoading = false, isError = false, onRetry, }) {
     const [sorting, setSorting] = react.useState(config.defaultSort ? [config.defaultSort] : []);
     const [columnFilters, setColumnFilters] = react.useState([]);
-    const [columnVisibility, setColumnVisibility] = react.useState({});
+    // Initialize column visibility based on visibleByDefault
+    const [columnVisibility, setColumnVisibility] = react.useState(() => {
+        const initialVisibility = {};
+        columns.forEach((column) => {
+            if (column.meta?.visibleByDefault === false) {
+                initialVisibility[column.accessorKey || column.id] = false;
+            }
+        });
+        return initialVisibility;
+    });
     const [rowSelection, setRowSelection] = react.useState({});
     const [globalFilter, setGlobalFilter] = react.useState("");
     const table$1 = reactTable.useReactTable({
@@ -424,7 +440,7 @@ function DataTable({ columns, data, config = {}, className, isLoading = false, i
     };
     const selectedCount = table$1.getFilteredSelectedRowModel().rows.length;
     const hasRows = table$1.getRowModel().rows?.length > 0;
-    return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col", className), children: [jsxRuntime.jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table$1, selectedCount: selectedCount }), jsxRuntime.jsx("div", { className: utils.cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxRuntime.jsxs(table.Table, { className: utils.cn(densityClasses[config.density || "default"], config.striped ? "[&_tr:nth-child(even)]:bg-muted/50" : "", config.hoverable !== false && "[&_tr:hover]:bg-muted/50"), children: [jsxRuntime.jsx(table.TableHeader, { children: table$1.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(table.TableRow, { children: headerGroup.headers.map((header) => (jsxRuntime.jsx(table.TableHead, { children: header.isPlaceholder
+    return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col", className), children: [jsxRuntime.jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table$1, selectedCount: selectedCount, enableColumnVisibility: config.enableColumnVisibility, columnVisibilityLabel: config.columnVisibilityLabel }), jsxRuntime.jsx("div", { className: utils.cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxRuntime.jsxs(table.Table, { className: utils.cn(densityClasses[config.density || "default"], config.striped ? "[&_tr:nth-child(even)]:bg-muted/50" : "", config.hoverable !== false && "[&_tr:hover]:bg-muted/50"), children: [jsxRuntime.jsx(table.TableHeader, { children: table$1.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(table.TableRow, { children: headerGroup.headers.map((header) => (jsxRuntime.jsx(table.TableHead, { children: header.isPlaceholder
                                         ? null
                                         : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), jsxRuntime.jsx(table.TableBody, { children: isLoading ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length, className: "h-[400px]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [jsxRuntime.jsxs("svg", { className: "animate-spin h-8 w-8 text-muted-foreground", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Laden..." })] }) }) }) })) : hasRows ? (table$1.getRowModel().rows.map((row) => (jsxRuntime.jsx(table.TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsxRuntime.jsx(table.TableCell, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (jsxRuntime.jsx(DataTableEmpty, { config: getEmptyState(), colSpan: columns.length })) })] }) }), config.pagination?.enabled && hasRows && (jsxRuntime.jsx(DataTablePagination, { table: table$1, config: config.pagination }))] }));
 }
@@ -466,6 +482,14 @@ class BaseColumn {
         this.config.hidden = hidden;
         return this;
     }
+    visibleByDefault(visible = true) {
+        this.config.visibleByDefault = visible;
+        return this;
+    }
+    visibilityLabel(label) {
+        this.config.visibilityLabel = label;
+        return this;
+    }
     alignLeft() {
         this.config.align = "left";
         return this;
@@ -1728,7 +1752,10 @@ function ConfirmProvider({ children }) {
             setQueue((q) => q.slice(1));
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(dialog.Dialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxRuntime.jsxs(dialog.DialogContent, { children: [jsxRuntime.jsxs(dialog.DialogHeader, { children: [jsxRuntime.jsx(dialog.DialogTitle, { children: currentRequest?.options?.title || "Bestätigung erforderlich" }), currentRequest?.options?.description && (jsxRuntime.jsx(dialog.DialogDescription, { children: currentRequest.options.description }))] }), jsxRuntime.jsxs(dialog.DialogFooter, { children: [jsxRuntime.jsx(button.Button, { variant: "outline", onClick: handleCancel, children: currentRequest?.options.cancelLabel || "Abbrechen" }), jsxRuntime.jsx(button.Button, { variant: currentRequest?.options.variant || "default", onClick: handleConfirm, children: currentRequest?.options.confirmLabel || "Bestätigen" })] })] }) })] }));
+    const { title, description, confirmLabel, cancelLabel, variant, icon, image, } = currentRequest?.options || {};
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(alertDialog.AlertDialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxRuntime.jsxs(alertDialog.AlertDialogContent, { className: "max-w-md", children: [jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [image && (jsxRuntime.jsx("div", { className: "mb-4 flex justify-center", children: jsxRuntime.jsx("img", { src: image, alt: "Confirmation", className: "h-24 w-24 object-contain" }) })), icon && !image && (jsxRuntime.jsx("div", { className: "mb-4 flex justify-center text-6xl", children: icon })), jsxRuntime.jsx(alertDialog.AlertDialogTitle, { className: "text-center", children: title || "Bestätigung erforderlich" }), description && (jsxRuntime.jsx(alertDialog.AlertDialogDescription, { className: "text-center", children: description }))] }), jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { className: "sm:justify-center", children: [jsxRuntime.jsx(alertDialog.AlertDialogCancel, { onClick: handleCancel, children: cancelLabel || "Abbrechen" }), jsxRuntime.jsx(alertDialog.AlertDialogAction, { onClick: handleConfirm, className: variant === "destructive"
+                                        ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                                        : "", children: confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
 exports.AvatarGroupColumn = AvatarGroupColumn;