@nccirtu/tablefy 0.1.4 → 0.1.6

package/dist/columns/index.d.ts

@@ -1,15 +1,19 @@
 export { DataTable } from "./components/ui/data-table/data-table";
 export { DataTableSchema } from "./components/ui/data-table/data-table-schema";
 export { TableSchema, EmptyStateBuilder } from "./lib/builders";
-export { AvatarGroupColumn as avatarGroupColumn } from "./columns/avatar-group-column";
-export { BadgeColumn as badgeColumn } from "./columns/badge-column";
-export { ButtonColumn as buttonColumn } from "./columns/button-column";
-export { CheckboxColumn as checkboxColumn } from "./columns/checkbox-column";
-export { DateColumn as dateColumn } from "./columns/date-column";
-export { DropdownColumn as dropdownColumn } from "./columns/dropdown-column";
-export { IconColumn as iconColumn } from "./columns/icon-column";
-export { InputColumn as inputColumn } from "./columns/input-column";
-export { ProgressColumn as progressColumn } from "./columns/progress-column";
-export { SelectColumn as selectColumn } from "./columns/select-column";
-export { TextColumn as textColumn } from "./columns/text-column";
+export { AvatarGroupColumn, AvatarGroupColumn as avatarGroupColumn, } from "./columns/avatar-group-column";
+export { BadgeColumn, BadgeColumn as badgeColumn, } from "./columns/badge-column";
+export { ButtonColumn, ButtonColumn as buttonColumn, } from "./columns/button-column";
+export { CheckboxColumn, CheckboxColumn as checkboxColumn, } from "./columns/checkbox-column";
+export { DateColumn, DateColumn as dateColumn } from "./columns/date-column";
+export { DropdownColumn, DropdownColumn as dropdownColumn, } from "./columns/dropdown-column";
+export { IconColumn, IconColumn as iconColumn } from "./columns/icon-column";
+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 { DataTableConfig, EmptyStateConfig, FilterConfig, HeaderAction, PaginationConfig, SearchConfig, } from "./lib/types";

package/dist/index.d.ts

@@ -1,15 +1,19 @@
 export { DataTable } from "./components/ui/data-table/data-table";
 export { DataTableSchema } from "./components/ui/data-table/data-table-schema";
 export { TableSchema, EmptyStateBuilder } from "./lib/builders";
-export { AvatarGroupColumn as avatarGroupColumn } from "./columns/avatar-group-column";
-export { BadgeColumn as badgeColumn } from "./columns/badge-column";
-export { ButtonColumn as buttonColumn } from "./columns/button-column";
-export { CheckboxColumn as checkboxColumn } from "./columns/checkbox-column";
-export { DateColumn as dateColumn } from "./columns/date-column";
-export { DropdownColumn as dropdownColumn } from "./columns/dropdown-column";
-export { IconColumn as iconColumn } from "./columns/icon-column";
-export { InputColumn as inputColumn } from "./columns/input-column";
-export { ProgressColumn as progressColumn } from "./columns/progress-column";
-export { SelectColumn as selectColumn } from "./columns/select-column";
-export { TextColumn as textColumn } from "./columns/text-column";
+export { AvatarGroupColumn, AvatarGroupColumn as avatarGroupColumn, } from "./columns/avatar-group-column";
+export { BadgeColumn, BadgeColumn as badgeColumn, } from "./columns/badge-column";
+export { ButtonColumn, ButtonColumn as buttonColumn, } from "./columns/button-column";
+export { CheckboxColumn, CheckboxColumn as checkboxColumn, } from "./columns/checkbox-column";
+export { DateColumn, DateColumn as dateColumn } from "./columns/date-column";
+export { DropdownColumn, DropdownColumn as dropdownColumn, } from "./columns/dropdown-column";
+export { IconColumn, IconColumn as iconColumn } from "./columns/icon-column";
+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 { DataTableConfig, EmptyStateConfig, FilterConfig, HeaderAction, PaginationConfig, SearchConfig, } from "./lib/types";

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useState, useLayoutEffect } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
-import { Search, X, ChevronDown, ChevronDownIcon, CheckIcon, ChevronUpIcon, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar } from 'lucide-react';
+import { Search, X, ChevronDown, ChevronDownIcon, CheckIcon, ChevronUpIcon, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink, MoreHorizontal } from 'lucide-react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
@@ -7307,12 +7307,12 @@ var DropdownMenuItemIndicator = React.forwardRef((props, forwardedRef) => {
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME$1;
 var SEPARATOR_NAME$1 = "DropdownMenuSeparator";
-var DropdownMenuSeparator = React.forwardRef((props, forwardedRef) => {
+var DropdownMenuSeparator$1 = React.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.forwardRef(
   (props, forwardedRef) => {
@@ -7359,6 +7359,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]) {
@@ -9103,6 +9104,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
@@ -10024,6 +10028,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 {
@@ -10036,6 +10102,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(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(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(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)}%)` } }) }));
 }
@@ -10256,5 +10498,73 @@ class TextColumn extends BaseColumn {
     }
 }
 
-export { DataTable, DataTableSchema, EmptyStateBuilder, TableSchema, AvatarGroupColumn as avatarGroupColumn, BadgeColumn as badgeColumn, ButtonColumn as buttonColumn, CheckboxColumn as checkboxColumn, DateColumn as dateColumn, DropdownColumn as dropdownColumn, IconColumn as iconColumn, InputColumn as inputColumn, ProgressColumn as progressColumn, SelectColumn as selectColumn, TextColumn as textColumn };
+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(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))) })] }));
+            },
+        };
+    }
+}
+
+export { ActionsColumn, AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, 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, DateColumn as dateColumn, DropdownColumn as dropdownColumn, IconColumn as iconColumn, InputColumn as inputColumn, ProgressColumn as progressColumn, SelectColumn as selectColumn, TextColumn as textColumn };
 //# sourceMappingURL=index.esm.js.map