@nccirtu/tablefy 0.9.1 → 0.9.3

package/dist/index.js

@@ -61,7 +61,7 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
         !search?.enabled) {
         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 &&
+    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: "hidden md: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)), 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())
@@ -70,7 +70,21 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
                                                 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))] })] }))] }));
+                                normalActions.map((action, index) => renderAction(action, index))] }), jsxRuntime.jsxs("div", { className: "flex md:hidden items-center gap-2", children: [showBulkActions && (jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: selectedCount })), enableColumnVisibility && table && (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "outline", size: "icon", "aria-label": columnVisibilityLabel, children: jsxRuntime.jsx(lucideReact.Columns, { className: "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), onSelect: (e) => e.preventDefault(), children: label }, column.id));
+                                            })] })] })), (normalActions.length > 0 || showBulkActions) && (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "outline", size: "icon", "aria-label": "Tabellen-Aktionen", children: jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" }) }) }), jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-[240px]", children: [showBulkActions && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuLabel, { children: [selectedCount, " ausgew\u00E4hlt"] }), jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}), bulkActions.map((action, index) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => {
+                                                            if (action.bulkOnClick)
+                                                                action.bulkOnClick(getSelectedRows());
+                                                            else
+                                                                action.onClick?.();
+                                                        }, disabled: action.disabled || action.loading, className: utils.cn(action.variant === "destructive" &&
+                                                            "text-destructive focus:text-destructive"), children: [action.icon && jsxRuntime.jsx("span", { className: "mr-2", children: action.icon }), action.label] }, `bulk-${action.id || index}`))), normalActions.length > 0 && jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {})] })), normalActions.map((action, index) => action.href ? (jsxRuntime.jsx(dropdownMenu.DropdownMenuItem, { asChild: true, children: jsxRuntime.jsxs("a", { href: action.href, children: [action.icon && jsxRuntime.jsx("span", { className: "mr-2", children: action.icon }), action.label] }) }, action.id || index)) : (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: action.onClick, disabled: action.disabled || action.loading, className: utils.cn(action.variant === "destructive" &&
+                                                    "text-destructive focus:text-destructive"), children: [action.icon && jsxRuntime.jsx("span", { className: "mr-2", children: action.icon }), action.label] }, action.id || index)))] })] }))] })] }))] }));
 }
 
 function DataTableEmpty({ config, colSpan, className, }) {
@@ -2777,6 +2791,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;
@@ -2799,12 +2814,7 @@ function WizardRenderer({ steps, fields, data, errors, onChange, onBlur, isField
     const stepFields = currentStepConfig?.fields
         ? fields.filter((f) => currentStepConfig.fields.includes(f.name))
         : [];
-    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsx("nav", { "aria-label": "Progress", children: jsxRuntime.jsx("ol", { className: "flex items-center", children: steps.map((step, index) => (jsxRuntime.jsxs("li", { className: utils.cn("flex items-center", index < steps.length - 1 && "flex-1"), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: utils.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 ? (jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })) : (index + 1) }), jsxRuntime.jsxs("div", { className: "hidden sm:block", children: [jsxRuntime.jsx("p", { className: utils.cn("text-sm font-medium", index <= currentStep
-                                                    ? "text-foreground"
-                                                    : "text-muted-foreground"), children: step.label }), step.description && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: step.description }))] })] }), index < steps.length - 1 && (jsxRuntime.jsx("div", { className: utils.cn("mx-4 hidden h-0.5 flex-1 sm:block", index < currentStep ? "bg-primary" : "bg-muted") }))] }, step.id))) }) }), jsxRuntime.jsx("div", { children: currentStepConfig?.sections ? (jsxRuntime.jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsxRuntime.jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsxRuntime.jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
+    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-6", children: [jsxRuntime.jsxs("p", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: ["Step: ", currentStep + 1, " of ", steps.length] }), jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between gap-4", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h3", { className: "text-xl font-bold text-foreground", children: currentStepConfig?.label }), currentStepConfig?.description && (jsxRuntime.jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: currentStepConfig.description }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "h-3 w-40 overflow-hidden rounded-full bg-muted", children: jsxRuntime.jsx("div", { className: "h-full rounded-full bg-primary transition-all duration-300 ease-in-out", style: { width: `${progressPercent}%` } }) }), jsxRuntime.jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [progressPercent, "%"] })] })] })] }), jsxRuntime.jsx("div", { children: currentStepConfig?.sections ? (jsxRuntime.jsx("div", { className: "space-y-4", children: currentStepConfig.sections.map((section) => (jsxRuntime.jsx(SectionRenderer, { section: section, fields: fields, data: data, errors: errors, onChange: onChange, onBlur: onBlur, isFieldVisible: isFieldVisible, isFieldDisabled: isFieldDisabled }, section.id))) })) : (jsxRuntime.jsx(GridLayout, { columns: columns, children: stepFields.map((field) => {
                         if (!isFieldVisible(field))
                             return null;
                         return (jsxRuntime.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));