@nccirtu/tablefy 0.7.1 → 0.7.3

package/dist/index.d.ts

@@ -12,11 +12,9 @@ export { ImageColumn } from "./columns/image-column";
 export { InputColumn, InputColumn as inputColumn, } from "./columns/input-column";
 export { LinkColumn } from "./columns/link-column";
 export { NumberColumn } from "./columns/number-column";
-export { ProgressColumn, ProgressColumn as progressColumn, } from "./columns/progress-column";
-export { SelectColumn, SelectColumn as selectColumn, } from "./columns/select-column";
-export { TextColumn, TextColumn as textColumn } from "./columns/text-column";
-export { ActionsColumn } from "./columns/actions-column";
-export type { ActionItem } from "./columns/actions-column";
+export { ProgressColumn, SelectColumn } from "./columns";
+export { EnumColumn, EnumColumn as enumColumn } from "./columns/enum-column";
+export type { EnumOption } from "./columns/enum-column";
 export { ConfirmProvider, confirm } from "./confirm";
 export type { ConfirmOptions } from "./confirm";
 export type { DataTableConfig, EmptyStateConfig, FilterConfig, HeaderAction, PaginationConfig, SearchConfig, } from "./types";

package/dist/index.esm.js

@@ -5,8 +5,8 @@ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
-import { Search, X, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink, MoreHorizontal } from 'lucide-react';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Search, X, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink } from 'lucide-react';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -1596,60 +1596,70 @@ class SelectColumn extends BaseColumn {
     }
 }
 
-class TextColumn extends BaseColumn {
+class EnumColumn extends BaseColumn {
+    constructor(accessor) {
+        super(accessor);
+        this.config.asBadge = true;
+        this.config.showIcon = true;
+        this.config.iconPosition = "left";
+    }
     static make(accessor) {
-        return new TextColumn(accessor);
+        return new EnumColumn(accessor);
     }
-    formatter(fn) {
-        this.config.formatter = fn;
+    /**
+     * Define the enum options with labels, icons, and colors
+     */
+    options(options) {
+        this.config.options = options;
         return this;
     }
-    prefix(prefix) {
-        this.config.prefix = prefix;
+    /**
+     * Display as plain text instead of badge
+     */
+    asText() {
+        this.config.asBadge = false;
         return this;
     }
-    suffix(suffix) {
-        this.config.suffix = suffix;
+    /**
+     * Display as badge (default)
+     */
+    asBadge() {
+        this.config.asBadge = true;
         return this;
     }
-    placeholder(placeholder) {
-        this.config.placeholder = placeholder;
+    /**
+     * Hide icons
+     */
+    hideIcon() {
+        this.config.showIcon = false;
         return this;
     }
-    // Shortcuts für gängige Formatierungen
-    uppercase() {
-        const existingFormatter = this.config.formatter;
-        this.config.formatter = (value, row) => {
-            const result = existingFormatter ? existingFormatter(value, row) : value;
-            return typeof result === "string"
-                ? result.toUpperCase()
-                : result;
-        };
+    /**
+     * Show icons (default)
+     */
+    showIcon() {
+        this.config.showIcon = true;
         return this;
     }
-    lowercase() {
-        const existingFormatter = this.config.formatter;
-        this.config.formatter = (value, row) => {
-            const result = existingFormatter ? existingFormatter(value, row) : value;
-            return typeof result === "string"
-                ? result.toLowerCase()
-                : result;
-        };
+    /**
+     * Set icon position
+     */
+    iconPosition(position) {
+        this.config.iconPosition = position;
         return this;
     }
-    limit(chars) {
-        const existingFormatter = this.config.formatter;
-        this.config.formatter = (value, row) => {
-            const result = existingFormatter ? existingFormatter(value, row) : value;
-            if (typeof result === "string" && result.length > chars) {
-                return result.slice(0, chars) + "...";
-            }
-            return result;
-        };
+    /**
+     * Placeholder for unknown values
+     */
+    placeholder(placeholder) {
+        this.config.placeholder = placeholder;
         return this;
     }
     build() {
-        const { accessor, label, sortable, prefix, suffix, placeholder, formatter, } = this.config;
+        const { accessor, label, sortable, options, asBadge, showIcon, iconPosition, placeholder, } = this.config;
+        if (!options || options.length === 0) {
+            throw new Error(`EnumColumn "${String(accessor)}" requires options to be defined`);
+        }
         return {
             accessorKey: accessor,
             header: ({ column }) => {
@@ -1659,92 +1669,22 @@ class TextColumn extends BaseColumn {
                 }
                 return (jsxs(Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsx(ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
             },
-            cell: ({ row, getValue }) => {
-                let value = getValue();
-                // Custom Formatter anwenden
-                if (formatter) {
-                    value = formatter(value, row);
-                }
-                // Placeholder wenn leer
-                if (value === null || value === undefined || value === "") {
+            cell: ({ getValue }) => {
+                const value = getValue();
+                // Find matching option
+                const option = options.find((opt) => opt.value === value);
+                // Handle unknown values
+                if (!option) {
                     return (jsx("span", { className: cn("text-muted-foreground", this.getAlignmentClass(), this.config.cellClassName), children: placeholder || "—" }));
                 }
-                // Prefix/Suffix hinzufügen
-                const displayValue = `${prefix || ""}${value}${suffix || ""}`;
-                return (jsx("span", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue }));
-            },
-        };
-    }
-}
-
-class ActionsColumn {
-    config = {
-        actions: [],
-        label: "Aktionen",
-    };
-    static make() {
-        return new ActionsColumn();
-    }
-    label(label) {
-        this.config.label = label;
-        return this;
-    }
-    triggerIcon(icon) {
-        this.config.triggerIcon = icon;
-        return this;
-    }
-    // Action hinzufügen
-    action(action) {
-        this.config.actions.push(action);
-        return this;
-    }
-    // Shortcuts für gängige Actions
-    view(onClick) {
-        return this.action({ label: "Anzeigen", onClick });
-    }
-    edit(onClick) {
-        return this.action({ label: "Bearbeiten", onClick });
-    }
-    delete(onClick) {
-        return this.action({
-            label: "Löschen",
-            onClick,
-            variant: "destructive",
-            separator: true,
-        });
-    }
-    link(label, href) {
-        return this.action({ label, href });
-    }
-    separator() {
-        if (this.config.actions.length > 0) {
-            this.config.actions[this.config.actions.length - 1].separator = true;
-        }
-        return this;
-    }
-    build() {
-        const { actions, label, triggerIcon } = this.config;
-        return {
-            id: "actions",
-            header: () => jsx("span", { className: "sr-only", children: label }),
-            cell: ({ row }) => {
-                const data = row.original;
-                const visibleActions = actions.filter((action) => !action.hidden || !action.hidden(data));
-                if (visibleActions.length === 0)
-                    return null;
-                return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", className: "h-10 w-10 p-0", children: [jsx("span", { className: "sr-only", children: label }), triggerIcon || jsx(MoreHorizontal, { className: "h-8 w-8" })] }) }), jsx(DropdownMenuContent, { align: "end", children: visibleActions.map((action, index) => (jsxs("div", { children: [action.render ? (
-                                    // Custom render function takes priority
-                                    action.render(data)) : (
-                                    // Standard menu item
-                                    jsxs(DropdownMenuItem, { disabled: action.disabled?.(data), className: cn(action.variant === "destructive" &&
-                                            "text-destructive focus:text-destructive"), onClick: () => {
-                                            if (action.href) {
-                                                window.location.href = action.href(data);
-                                            }
-                                            else if (action.onClick) {
-                                                action.onClick(data);
-                                            }
-                                        }, children: [action.icon && (jsx("span", { className: "mr-2", children: action.icon })), action.label] })), action.separator && index < visibleActions.length - 1 && (jsx(DropdownMenuSeparator, {}))] }, index))) })] }));
+                const Icon = option.icon;
+                const iconElement = showIcon && Icon ? jsx(Icon, { className: "h-4 w-4" }) : null;
+                // Render as Badge
+                if (asBadge) {
+                    return (jsx("div", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: jsxs(Badge, { variant: option.color || "default", className: cn("inline-flex items-center gap-1.5", option.className), children: [iconPosition === "left" && iconElement, option.label, iconPosition === "right" && iconElement] }) }));
+                }
+                // Render as plain text with icon
+                return (jsxs("div", { className: cn("inline-flex items-center gap-2", this.getAlignmentClass(), this.config.cellClassName, option.className), children: [iconPosition === "left" && iconElement, jsx("span", { children: option.label }), iconPosition === "right" && iconElement] }));
             },
         };
     }
@@ -1766,7 +1706,6 @@ function ConfirmProvider({ children }) {
     const currentRequest = queue[0];
     useEffect(() => {
         registerConfirm(async (options) => {
-            console.log("ConfirmProvider received options:", options);
             return new Promise((resolve) => {
                 setQueue((q) => [...q, { options, resolve }]);
             });
@@ -1790,5 +1729,5 @@ function ConfirmProvider({ children }) {
     return (jsxs(Fragment, { children: [children, jsx(Dialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxs(DialogContent, { children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: currentRequest?.options?.title || "Bestätigung erforderlich" }), currentRequest?.options?.description && (jsx(DialogDescription, { children: currentRequest.options.description }))] }), jsxs(DialogFooter, { children: [jsx(Button, { variant: "outline", onClick: handleCancel, children: currentRequest?.options.cancelLabel || "Abbrechen" }), jsx(Button, { variant: currentRequest?.options.variant || "default", onClick: handleConfirm, children: currentRequest?.options.confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
-export { ActionsColumn, AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DropdownColumn, EmptyStateBuilder, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, SelectColumn, TableSchema, TextColumn, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, confirm, DateColumn as dateColumn, DropdownColumn as dropdownColumn, IconColumn as iconColumn, InputColumn as inputColumn, ProgressColumn as progressColumn, SelectColumn as selectColumn, TextColumn as textColumn };
+export { AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DropdownColumn, EmptyStateBuilder, EnumColumn, IconColumn, ImageColumn, InputColumn, LinkColumn, NumberColumn, ProgressColumn, SelectColumn, TableSchema, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, confirm, DateColumn as dateColumn, DropdownColumn as dropdownColumn, EnumColumn as enumColumn, IconColumn as iconColumn, InputColumn as inputColumn };
 //# sourceMappingURL=index.esm.js.map