@nccirtu/tablefy 0.1.4 → 0.1.6

package/dist/index.js

@@ -7327,12 +7327,12 @@ var DropdownMenuItemIndicator = React__namespace.forwardRef((props, forwardedRef
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME$1;
 var SEPARATOR_NAME$1 = "DropdownMenuSeparator";
-var DropdownMenuSeparator = React__namespace.forwardRef((props, forwardedRef) => {
+var DropdownMenuSeparator$1 = React__namespace.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 });
-DropdownMenuSeparator.displayName = SEPARATOR_NAME$1;
+DropdownMenuSeparator$1.displayName = SEPARATOR_NAME$1;
 var ARROW_NAME$2 = "DropdownMenuArrow";
 var DropdownMenuArrow = React__namespace.forwardRef(
   (props, forwardedRef) => {
@@ -7379,6 +7379,7 @@ var Trigger$2 = DropdownMenuTrigger$1;
 var Portal2 = DropdownMenuPortal;
 var Content2$2 = DropdownMenuContent$1;
 var Item2 = DropdownMenuItem$1;
+var Separator2 = DropdownMenuSeparator$1;
 
 // packages/core/number/src/number.ts
 function clamp(value, [min, max]) {
@@ -9123,6 +9124,9 @@ function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...pr
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
     return (jsxRuntimeExports.jsx(Item2, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: className, ...props }));
 }
+function DropdownMenuSeparator({ className, ...props }) {
+    return (jsxRuntimeExports.jsx(Separator2, { "data-slot": "dropdown-menu-separator", className: className, ...props }));
+}
 
 function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, className, }) {
     // Actions aufteilen in normale und Bulk-Actions
@@ -10044,6 +10048,68 @@ class IconColumn extends BaseColumn {
     }
 }
 
+class ImageColumn extends BaseColumn {
+    constructor(accessor) {
+        super(accessor);
+        this.config.size = 'md';
+        this.config.rounded = 'md';
+    }
+    static make(accessor) {
+        return new ImageColumn(accessor);
+    }
+    size(size) {
+        this.config.size = size;
+        return this;
+    }
+    rounded(rounded) {
+        this.config.rounded = rounded;
+        return this;
+    }
+    circular() {
+        return this.rounded('full');
+    }
+    square() {
+        return this.rounded('none');
+    }
+    fallback(url) {
+        this.config.fallback = url;
+        return this;
+    }
+    alt(fn) {
+        this.config.alt = fn;
+        return this;
+    }
+    build() {
+        const config = this.config;
+        const { accessor, label, size, rounded, fallback, alt } = config;
+        const sizeClasses = {
+            sm: 'h-8 w-8',
+            md: 'h-10 w-10',
+            lg: 'h-12 w-12',
+        };
+        const roundedClasses = {
+            none: 'rounded-none',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            full: 'rounded-full',
+        };
+        return {
+            accessorKey: accessor,
+            header: () => jsxRuntimeExports.jsx("span", { className: cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
+            cell: ({ getValue, row }) => {
+                const src = getValue();
+                const altText = alt ? alt(row.original) : 'Bild';
+                return (jsxRuntimeExports.jsx("img", { src: src || fallback || '/placeholder.png', alt: altText, className: cn('object-cover', sizeClasses[size || 'md'], roundedClasses[rounded || 'md'], this.config.cellClassName), onError: (e) => {
+                        if (fallback) {
+                            e.target.src = fallback;
+                        }
+                    } }));
+            },
+        };
+    }
+}
+
 const InputColumn = (config) => {
     const accessorKey = config.accessorKey || "input";
     return {
@@ -10056,6 +10122,182 @@ const InputColumn = (config) => {
     };
 };
 
+class LinkColumn extends BaseColumn {
+    constructor(accessor) {
+        super(accessor);
+        const config = this.config;
+        config.external = false;
+        config.showExternalIcon = false;
+        config.underline = 'hover';
+        config.openInNewTab = false;
+    }
+    static make(accessor) {
+        return new LinkColumn(accessor);
+    }
+    // URL setzen (statisch oder dynamisch)
+    href(href) {
+        this.config.href = href;
+        return this;
+    }
+    // URL aus einem anderen Feld nehmen
+    urlFromField(field) {
+        this.config.href = (row) => String(row[field]);
+        return this;
+    }
+    // Externer Link (zeigt Icon)
+    external(external = true) {
+        const config = this.config;
+        config.external = external;
+        config.showExternalIcon = external;
+        config.openInNewTab = external;
+        return this;
+    }
+    // Icon vor dem Text
+    icon(icon) {
+        this.config.icon = icon;
+        return this;
+    }
+    // External-Icon anzeigen
+    showExternalIcon(show = true) {
+        this.config.showExternalIcon = show;
+        return this;
+    }
+    // Unterstreichung
+    underline(style) {
+        this.config.underline = style;
+        return this;
+    }
+    // In neuem Tab öffnen
+    openInNewTab(open = true) {
+        this.config.openInNewTab = open;
+        return this;
+    }
+    // Click-Handler (für programmatische Navigation)
+    onClick(handler) {
+        this.config.onClick = handler;
+        return this;
+    }
+    build() {
+        const config = this.config;
+        const { accessor, label, sortable, href, icon, showExternalIcon, underline, openInNewTab, onClick } = config;
+        const underlineClasses = {
+            always: 'underline',
+            hover: 'hover:underline',
+            never: 'no-underline',
+        };
+        return {
+            accessorKey: accessor,
+            header: ({ column }) => {
+                const displayLabel = label || String(accessor);
+                if (!sortable) {
+                    return (jsxRuntimeExports.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                }
+                return (jsxRuntimeExports.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, jsxRuntimeExports.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
+            },
+            cell: ({ getValue, row }) => {
+                const value = getValue();
+                if (!value) {
+                    return jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+                }
+                // URL berechnen
+                const url = typeof href === 'function' ? href(row.original) : href || value;
+                const handleClick = (e) => {
+                    if (onClick) {
+                        e.preventDefault();
+                        onClick(row.original);
+                    }
+                };
+                // Alignment ohne text-muted-foreground für Links
+                const alignmentClass = this.config.align === 'center' ? 'text-center' : this.config.align === 'right' ? 'text-right' : 'text-left';
+                return (jsxRuntimeExports.jsxs("a", { href: url, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, onClick: onClick ? handleClick : undefined, className: cn('inline-flex items-center gap-1.5 text-sm text-blue-500', underlineClasses[underline || 'hover'], 'hover:text-blue-500/80', alignmentClass, this.config.cellClassName), children: [icon, jsxRuntimeExports.jsx("span", { children: value }), showExternalIcon && jsxRuntimeExports.jsx(lucideReact.ExternalLink, { className: "text-muted-foreground h-3 w-3" })] }));
+            },
+        };
+    }
+}
+
+class NumberColumn extends BaseColumn {
+    constructor(accessor) {
+        super(accessor);
+        this.config.align = 'right'; // Zahlen standardmäßig rechtsbündig
+        this.config.decimals = 0;
+        this.config.locale = 'de-DE';
+    }
+    static make(accessor) {
+        return new NumberColumn(accessor);
+    }
+    decimals(decimals) {
+        this.config.decimals = decimals;
+        return this;
+    }
+    locale(locale) {
+        this.config.locale = locale;
+        return this;
+    }
+    // Währungsformatierung
+    money(currency = 'EUR') {
+        this.config.currency = currency;
+        this.config.decimals = 2;
+        return this;
+    }
+    // Prozentformatierung
+    percent() {
+        this.config.percent = true;
+        return this;
+    }
+    prefix(prefix) {
+        this.config.prefix = prefix;
+        return this;
+    }
+    suffix(suffix) {
+        this.config.suffix = suffix;
+        return this;
+    }
+    build() {
+        const config = this.config;
+        const { accessor, label, sortable, decimals, locale, currency, percent, prefix, suffix } = config;
+        return {
+            accessorKey: accessor,
+            header: ({ column }) => {
+                const displayLabel = label || String(accessor);
+                if (!sortable) {
+                    return (jsxRuntimeExports.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                }
+                return (jsxRuntimeExports.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, jsxRuntimeExports.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
+            },
+            cell: ({ getValue }) => {
+                const value = getValue();
+                if (value === null || value === undefined) {
+                    return jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+                }
+                let formatted;
+                if (currency) {
+                    formatted = new Intl.NumberFormat(locale, {
+                        style: 'currency',
+                        currency,
+                        minimumFractionDigits: decimals,
+                        maximumFractionDigits: decimals,
+                    }).format(value);
+                }
+                else if (percent) {
+                    formatted = new Intl.NumberFormat(locale, {
+                        style: 'percent',
+                        minimumFractionDigits: decimals,
+                        maximumFractionDigits: decimals,
+                    }).format(value / 100);
+                }
+                else {
+                    formatted = new Intl.NumberFormat(locale, {
+                        minimumFractionDigits: decimals,
+                        maximumFractionDigits: decimals,
+                    }).format(value);
+                }
+                const displayValue = `${prefix || ''}${formatted}${suffix || ''}`;
+                return jsxRuntimeExports.jsx("span", { className: cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
+            },
+        };
+    }
+}
+
 function Progress({ className, value, ...props }) {
     return (jsxRuntimeExports.jsx(Root, { "data-slot": "progress", className: className, ...props, children: jsxRuntimeExports.jsx(Indicator, { "data-slot": "progress-indicator", className: "bg-primary size-full flex-1 transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
 }
@@ -10276,10 +10518,93 @@ class TextColumn extends BaseColumn {
     }
 }
 
+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: () => jsxRuntimeExports.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 (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: jsxRuntimeExports.jsxs(Button, { variant: "ghost", className: "h-10 w-10 p-0", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: label }), triggerIcon || jsxRuntimeExports.jsx(lucideReact.MoreHorizontal, { className: "h-8 w-8" })] }) }), jsxRuntimeExports.jsx(DropdownMenuContent, { align: "end", children: visibleActions.map((action, index) => (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.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 && jsxRuntimeExports.jsx("span", { className: "mr-2", children: action.icon }), action.label] }), action.separator && index < visibleActions.length - 1 && jsxRuntimeExports.jsx(DropdownMenuSeparator, {})] }, index))) })] }));
+            },
+        };
+    }
+}
+
+exports.ActionsColumn = ActionsColumn;
+exports.AvatarGroupColumn = AvatarGroupColumn;
+exports.BadgeColumn = BadgeColumn;
+exports.ButtonColumn = ButtonColumn;
+exports.CheckboxColumn = CheckboxColumn;
 exports.DataTable = DataTable;
 exports.DataTableSchema = DataTableSchema;
+exports.DateColumn = DateColumn;
+exports.DropdownColumn = DropdownColumn;
 exports.EmptyStateBuilder = EmptyStateBuilder;
+exports.IconColumn = IconColumn;
+exports.ImageColumn = ImageColumn;
+exports.InputColumn = InputColumn;
+exports.LinkColumn = LinkColumn;
+exports.NumberColumn = NumberColumn;
+exports.ProgressColumn = ProgressColumn;
+exports.SelectColumn = SelectColumn;
 exports.TableSchema = TableSchema;
+exports.TextColumn = TextColumn;
 exports.avatarGroupColumn = AvatarGroupColumn;
 exports.badgeColumn = BadgeColumn;
 exports.buttonColumn = ButtonColumn;