@nccirtu/tablefy 0.9.1 → 0.9.3

package/dist/index.esm.js

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuItem } from '@/components/ui/dropdown-menu';
-import { Search, X, Columns, ChevronDown, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink, MoreHorizontal, CalendarIcon, Upload, File, GripVertical, Trash2, Plus, Check } from 'lucide-react';
+import { Search, X, Columns, ChevronDown, MoreHorizontal, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ArrowUpDown, Calendar, ExternalLink, CalendarIcon, Upload, File, GripVertical, Trash2, Plus } from 'lucide-react';
 import { Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox as Checkbox$1 } from '@/components/ui/checkbox';
@@ -59,7 +59,7 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
         !search?.enabled) {
         return null;
     }
-    return (jsxs("div", { className: cn("flex flex-col gap-4", className), children: [(title || description) && (jsxs("div", { className: "space-y-1", children: [title && (jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title })), description && (jsx("p", { className: "text-sm text-muted-foreground", children: description }))] })), (search?.enabled || normalActions.length > 0 || showBulkActions) && (jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [search?.enabled && (jsxs("div", { className: "relative max-w-sm flex-1", children: [jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), jsx(Input, { placeholder: search.placeholder || "Suchen...", value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), className: "pl-9 pr-9" }), searchValue && (jsx("button", { onClick: () => onSearchChange?.(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: jsx(X, { className: "h-4 w-4" }) }))] })), jsxs("div", { className: "flex items-center gap-2", children: [showBulkActions && (jsxs("span", { className: "text-sm text-muted-foreground", children: [selectedCount, " ausgew\u00E4hlt"] })), showBulkActions &&
+    return (jsxs("div", { className: cn("flex flex-col gap-4", className), children: [(title || description) && (jsxs("div", { className: "space-y-1", children: [title && (jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title })), description && (jsx("p", { className: "text-sm text-muted-foreground", children: description }))] })), (search?.enabled || normalActions.length > 0 || showBulkActions) && (jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [search?.enabled && (jsxs("div", { className: "relative max-w-sm flex-1", children: [jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), jsx(Input, { placeholder: search.placeholder || "Suchen...", value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), className: "pl-9 pr-9" }), searchValue && (jsx("button", { onClick: () => onSearchChange?.(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: jsx(X, { className: "h-4 w-4" }) }))] })), jsxs("div", { className: "hidden md:flex items-center gap-2", children: [showBulkActions && (jsxs("span", { className: "text-sm text-muted-foreground", children: [selectedCount, " ausgew\u00E4hlt"] })), showBulkActions &&
                                 bulkActions.map((action, index) => renderAction(action, index)), enableColumnVisibility && table && (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "outline", size: "default", children: [jsx(Columns, { className: "h-4 w-4" }), jsx("span", { className: "ml-2", children: columnVisibilityLabel }), jsx(ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxs(DropdownMenuContent, { align: "end", className: "w-[200px]", children: [jsx(DropdownMenuLabel, { children: columnVisibilityLabel }), jsx(DropdownMenuSeparator, {}), table
                                                 .getAllColumns()
                                                 .filter((column) => column.getCanHide())
@@ -68,7 +68,21 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
                                                 const label = meta?.visibilityLabel || column.id;
                                                 return (jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: label }, column.id));
                                             })] })] })), normalActions.length > 0 &&
-                                normalActions.map((action, index) => renderAction(action, index))] })] }))] }));
+                                normalActions.map((action, index) => renderAction(action, index))] }), jsxs("div", { className: "flex md:hidden items-center gap-2", children: [showBulkActions && (jsx("span", { className: "text-sm text-muted-foreground", children: selectedCount })), enableColumnVisibility && table && (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "icon", "aria-label": columnVisibilityLabel, children: jsx(Columns, { className: "h-4 w-4" }) }) }), jsxs(DropdownMenuContent, { align: "end", className: "w-[200px]", children: [jsx(DropdownMenuLabel, { children: columnVisibilityLabel }), jsx(DropdownMenuSeparator, {}), table
+                                                .getAllColumns()
+                                                .filter((column) => column.getCanHide())
+                                                .map((column) => {
+                                                const meta = column.columnDef.meta;
+                                                const label = meta?.visibilityLabel || column.id;
+                                                return (jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), onSelect: (e) => e.preventDefault(), children: label }, column.id));
+                                            })] })] })), (normalActions.length > 0 || showBulkActions) && (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "outline", size: "icon", "aria-label": "Tabellen-Aktionen", children: jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), jsxs(DropdownMenuContent, { align: "end", className: "w-[240px]", children: [showBulkActions && (jsxs(Fragment, { children: [jsxs(DropdownMenuLabel, { children: [selectedCount, " ausgew\u00E4hlt"] }), jsx(DropdownMenuSeparator, {}), bulkActions.map((action, index) => (jsxs(DropdownMenuItem, { onClick: () => {
+                                                            if (action.bulkOnClick)
+                                                                action.bulkOnClick(getSelectedRows());
+                                                            else
+                                                                action.onClick?.();
+                                                        }, disabled: action.disabled || action.loading, className: cn(action.variant === "destructive" &&
+                                                            "text-destructive focus:text-destructive"), children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }, `bulk-${action.id || index}`))), normalActions.length > 0 && jsx(DropdownMenuSeparator, {})] })), normalActions.map((action, index) => action.href ? (jsx(DropdownMenuItem, { asChild: true, children: jsxs("a", { href: action.href, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }) }, action.id || index)) : (jsxs(DropdownMenuItem, { onClick: action.onClick, disabled: action.disabled || action.loading, className: cn(action.variant === "destructive" &&
+                                                    "text-destructive focus:text-destructive"), children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }, action.id || index)))] })] }))] })] }))] }));
 }
 
 function DataTableEmpty({ config, colSpan, className, }) {
@@ -2775,6 +2789,7 @@ function WizardRenderer({ steps, fields, data, errors, onChange, onBlur, isField
     const currentStepConfig = steps[currentStep];
     const isLastStep = currentStep === steps.length - 1;
     const isFirstStep = currentStep === 0;
+    const progressPercent = Math.round(((currentStep + 1) / steps.length) * 100);
     const canProceed = currentStepConfig?.canProceed
         ? currentStepConfig.canProceed(data)
         : true;
@@ -2797,12 +2812,7 @@ function WizardRenderer({ steps, fields, data, errors, onChange, onBlur, isField
     const stepFields = currentStepConfig?.fields
         ? fields.filter((f) => currentStepConfig.fields.includes(f.name))
         : [];
-    return (jsxs("div", { className: "space-y-6", children: [jsx("nav", { "aria-label": "Progress", children: jsx("ol", { className: "flex items-center", children: steps.map((step, index) => (jsxs("li", { className: cn("flex items-center", index < steps.length - 1 && "flex-1"), children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn("flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium", index < currentStep &&
-                                            "border-primary bg-primary text-primary-foreground", index === currentStep &&
-                                            "border-primary text-primary", index > currentStep &&
-                                            "border-muted-foreground/25 text-muted-foreground"), children: index < currentStep ? (jsx(Check, { className: "h-4 w-4" })) : (index + 1) }), jsxs("div", { className: "hidden sm:block", children: [jsx("p", { className: cn("text-sm font-medium", index <= currentStep
-                                                    ? "text-foreground"
-                                                    : "text-muted-foreground"), children: step.label }), step.description && (jsx("p", { className: "text-xs text-muted-foreground", children: step.description }))] })] }), index < steps.length - 1 && (jsx("div", { className: cn("mx-4 hidden h-0.5 flex-1 sm:block", index < currentStep ? "bg-primary" : "bg-muted") }))] }, step.id))) }) }), jsx("div", { children: currentStepConfig?.sections ? (jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
+    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "rounded-lg bg-muted/50 p-6", children: [jsxs("p", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: ["Step: ", currentStep + 1, " of ", steps.length] }), jsxs("div", { className: "mt-1 flex items-center justify-between gap-4", children: [jsxs("div", { children: [jsx("h3", { className: "text-xl font-bold text-foreground", children: currentStepConfig?.label }), currentStepConfig?.description && (jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: currentStepConfig.description }))] }), jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "h-3 w-40 overflow-hidden rounded-full bg-muted", children: jsx("div", { className: "h-full rounded-full bg-primary transition-all duration-300 ease-in-out", style: { width: `${progressPercent}%` } }) }), jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [progressPercent, "%"] })] })] })] }), jsx("div", { children: currentStepConfig?.sections ? (jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
                         if (!isFieldVisible(field))
                             return null;
                         return (jsx(FieldRenderer, { field: field, value: data[field.name], error: errors[field.name], disabled: isFieldDisabled(field), data: data, onChange: (v) => onChange(field.name, v), onBlur: onBlur ? () => onBlur(field.name) : undefined }, field.name));