@nccirtu/tablefy 0.7.8 → 0.8.0

package/dist/builders/header-action-group.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { HeaderActionItem } from "./header-actions";
+interface HeaderActionGroupProps<TData = unknown> {
+    actions: HeaderActionItem<TData>[];
+    selectedRows?: TData[];
+    label?: string;
+    icon?: ReactNode;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+}
+export declare function HeaderActionGroup<TData = unknown>({ actions, selectedRows, label, icon, variant, }: HeaderActionGroupProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/builders/header-actions.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+import { HeaderAction } from "../types/actions";
+export interface HeaderActionItem<TData = unknown> {
+    label?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    render?: (selectedRows?: TData[]) => ReactNode;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    disabled?: boolean;
+    loading?: boolean;
+    hidden?: boolean;
+    bulk?: boolean;
+    bulkOnClick?: (selectedRows: TData[]) => void;
+}
+export declare class HeaderActions<TData = unknown> {
+    private config;
+    static make<TData>(): HeaderActions<TData>;
+    label(label: string): this;
+    icon(icon: ReactNode): this;
+    variant(variant: "default" | "secondary" | "outline" | "ghost" | "destructive"): this;
+    size(size: "default" | "sm" | "lg" | "icon"): this;
+    disabled(disabled?: boolean): this;
+    loading(loading?: boolean): this;
+    hidden(hidden?: boolean): this;
+    action(action: HeaderActionItem<TData>): this;
+    onClick(handler: () => void): this;
+    href(url: string): this;
+    bulk(handler: (selectedRows: TData[]) => void): this;
+    create(config: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: ReactNode;
+    }): this;
+    export(config: {
+        label: string;
+        icon?: ReactNode;
+        onClick?: () => void;
+    }): this;
+    import(config: {
+        label: string;
+        icon?: ReactNode;
+        onClick?: () => void;
+    }): this;
+    bulkExport(config: {
+        label: string;
+        icon?: ReactNode;
+        onExport: (rows: TData[]) => void;
+    }): this;
+    bulkDelete(config: {
+        label: string;
+        icon?: ReactNode;
+        onDelete: (rows: TData[]) => void;
+    }): this;
+    build(): HeaderActionItem<TData>[];
+    buildLegacy(): HeaderAction<TData>[];
+}

package/dist/builders/index.d.ts

@@ -1,2 +1,5 @@
 export { TableSchema } from "./table-schema";
 export { EmptyStateBuilder } from "./empty-state";
+export { HeaderActions } from "./header-actions";
+export { HeaderActionGroup } from "./header-action-group";
+export type { HeaderActionItem } from "./header-actions";

package/dist/columns/builders/header-action-group.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { HeaderActionItem } from "./header-actions";
+interface HeaderActionGroupProps<TData = unknown> {
+    actions: HeaderActionItem<TData>[];
+    selectedRows?: TData[];
+    label?: string;
+    icon?: ReactNode;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+}
+export declare function HeaderActionGroup<TData = unknown>({ actions, selectedRows, label, icon, variant, }: HeaderActionGroupProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/columns/builders/header-actions.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+import { HeaderAction } from "../types/actions";
+export interface HeaderActionItem<TData = unknown> {
+    label?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    render?: (selectedRows?: TData[]) => ReactNode;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    disabled?: boolean;
+    loading?: boolean;
+    hidden?: boolean;
+    bulk?: boolean;
+    bulkOnClick?: (selectedRows: TData[]) => void;
+}
+export declare class HeaderActions<TData = unknown> {
+    private config;
+    static make<TData>(): HeaderActions<TData>;
+    label(label: string): this;
+    icon(icon: ReactNode): this;
+    variant(variant: "default" | "secondary" | "outline" | "ghost" | "destructive"): this;
+    size(size: "default" | "sm" | "lg" | "icon"): this;
+    disabled(disabled?: boolean): this;
+    loading(loading?: boolean): this;
+    hidden(hidden?: boolean): this;
+    action(action: HeaderActionItem<TData>): this;
+    onClick(handler: () => void): this;
+    href(url: string): this;
+    bulk(handler: (selectedRows: TData[]) => void): this;
+    create(config: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: ReactNode;
+    }): this;
+    export(config: {
+        label: string;
+        icon?: ReactNode;
+        onClick?: () => void;
+    }): this;
+    import(config: {
+        label: string;
+        icon?: ReactNode;
+        onClick?: () => void;
+    }): this;
+    bulkExport(config: {
+        label: string;
+        icon?: ReactNode;
+        onExport: (rows: TData[]) => void;
+    }): this;
+    bulkDelete(config: {
+        label: string;
+        icon?: ReactNode;
+        onDelete: (rows: TData[]) => void;
+    }): this;
+    build(): HeaderActionItem<TData>[];
+    buildLegacy(): HeaderAction<TData>[];
+}

package/dist/columns/builders/index.d.ts

@@ -1,2 +1,5 @@
 export { TableSchema } from "./table-schema";
 export { EmptyStateBuilder } from "./empty-state";
+export { HeaderActions } from "./header-actions";
+export { HeaderActionGroup } from "./header-action-group";
+export type { HeaderActionItem } from "./header-actions";

package/dist/columns/index.d.ts

@@ -1,6 +1,7 @@
 export { DataTable } from "./tablefy/data-table";
 export { DataTableSchema } from "./tablefy/data-table-schema";
-export { TableSchema, EmptyStateBuilder } from "./builders";
+export { TableSchema, EmptyStateBuilder, HeaderActions, HeaderActionGroup, } from "./builders";
+export type { HeaderActionItem } from "./builders";
 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";

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { DataTable } from "./tablefy/data-table";
 export { DataTableSchema } from "./tablefy/data-table-schema";
-export { TableSchema, EmptyStateBuilder } from "./builders";
+export { TableSchema, EmptyStateBuilder, HeaderActions, HeaderActionGroup, } from "./builders";
+export type { HeaderActionItem } from "./builders";
 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";

package/dist/index.esm.js

@@ -378,6 +378,183 @@ class EmptyStateBuilder {
     }
 }
 
+class HeaderActions {
+    config = {
+        actions: [],
+    };
+    static make() {
+        return new HeaderActions();
+    }
+    label(label) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].label = label;
+        }
+        return this;
+    }
+    icon(icon) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].icon = icon;
+        }
+        return this;
+    }
+    variant(variant) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].variant = variant;
+        }
+        return this;
+    }
+    size(size) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].size = size;
+        }
+        return this;
+    }
+    disabled(disabled = true) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].disabled = disabled;
+        }
+        return this;
+    }
+    loading(loading = true) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].loading = loading;
+        }
+        return this;
+    }
+    hidden(hidden = true) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].hidden = hidden;
+        }
+        return this;
+    }
+    action(action) {
+        this.config.actions.push(action);
+        return this;
+    }
+    onClick(handler) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].onClick = handler;
+        }
+        return this;
+    }
+    href(url) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].href = url;
+        }
+        return this;
+    }
+    bulk(handler) {
+        if (this.config.actions.length > 0) {
+            this.config.actions[this.config.actions.length - 1].bulk = true;
+            this.config.actions[this.config.actions.length - 1].bulkOnClick = handler;
+        }
+        return this;
+    }
+    create(config) {
+        return this.action({
+            label: config.label,
+            href: config.href,
+            onClick: config.onClick,
+            icon: config.icon,
+            variant: "default",
+        });
+    }
+    export(config) {
+        return this.action({
+            label: config.label,
+            icon: config.icon,
+            onClick: config.onClick,
+            variant: "outline",
+        });
+    }
+    import(config) {
+        return this.action({
+            label: config.label,
+            icon: config.icon,
+            onClick: config.onClick,
+            variant: "outline",
+        });
+    }
+    bulkExport(config) {
+        return this.action({
+            label: config.label,
+            icon: config.icon,
+            bulk: true,
+            bulkOnClick: config.onExport,
+            variant: "outline",
+        });
+    }
+    bulkDelete(config) {
+        return this.action({
+            label: config.label,
+            icon: config.icon,
+            bulk: true,
+            bulkOnClick: config.onDelete,
+            variant: "destructive",
+        });
+    }
+    build() {
+        return this.config.actions;
+    }
+    buildLegacy() {
+        return this.config.actions.map((action, index) => ({
+            id: `action-${index}`,
+            label: action.label || "",
+            icon: action.icon,
+            onClick: action.onClick,
+            href: action.href,
+            variant: action.variant,
+            size: action.size,
+            disabled: action.disabled,
+            loading: action.loading,
+            hidden: action.hidden,
+            bulk: action.bulk,
+            bulkOnClick: action.bulkOnClick,
+        }));
+    }
+}
+
+function HeaderActionGroup({ actions, selectedRows = [], label = "Aktionen", icon, variant = "outline", }) {
+    const visibleActions = actions.filter((action) => !action.hidden);
+    if (visibleActions.length === 0)
+        return null;
+    // If only one action, render it directly
+    if (visibleActions.length === 1) {
+        const action = visibleActions[0];
+        if (action.render) {
+            return jsx(Fragment, { children: action.render(selectedRows) });
+        }
+        return (jsxs(Button, { variant: action.variant || variant, size: action.size || "default", disabled: action.disabled, onClick: () => {
+                if (action.bulk && action.bulkOnClick) {
+                    action.bulkOnClick(selectedRows);
+                }
+                else if (action.onClick) {
+                    action.onClick();
+                }
+                else if (action.href) {
+                    window.location.href = action.href;
+                }
+            }, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }));
+    }
+    // Multiple actions - render as dropdown
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: variant, size: "default", children: [icon && jsx("span", { className: "mr-2", children: icon }), label, jsx(ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsx(DropdownMenuContent, { align: "end", children: visibleActions.map((action, index) => {
+                    if (action.render) {
+                        return jsx("div", { children: action.render(selectedRows) }, index);
+                    }
+                    return (jsxs(DropdownMenuItem, { disabled: action.disabled, onClick: () => {
+                            if (action.bulk && action.bulkOnClick) {
+                                action.bulkOnClick(selectedRows);
+                            }
+                            else if (action.onClick) {
+                                action.onClick();
+                            }
+                            else if (action.href) {
+                                window.location.href = action.href;
+                            }
+                        }, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }, index));
+                }) })] }));
+}
+
 function DataTable({ columns, data, config = {}, className, isLoading = false, isError = false, onRetry, }) {
     const [sorting, setSorting] = useState(config.defaultSort ? [config.defaultSort] : []);
     const [columnFilters, setColumnFilters] = useState([]);
@@ -1751,10 +1928,8 @@ function ConfirmProvider({ children }) {
         }
     };
     const { title, description, confirmLabel, cancelLabel, variant, icon, image, } = currentRequest?.options || {};
-    return (jsxs(Fragment, { children: [children, jsx(AlertDialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxs(AlertDialogContent, { className: "max-w-md", children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { className: "text-center", children: title || "Bestätigung erforderlich" }), description && (jsx(AlertDialogDescription, { className: "text-center", children: description }))] }), image && (jsx("div", { className: "flex justify-center py-4", children: jsx("img", { src: image, alt: "Confirmation", className: "h-24 w-24 object-contain" }) })), icon && !image && (jsx("div", { className: "flex justify-center py-4 text-6xl", children: icon })), jsxs(AlertDialogFooter, { className: "flex flex-row gap-2 justify-between w-full", children: [jsx(AlertDialogCancel, { onClick: handleCancel, className: "mt-0", children: cancelLabel || "Abbrechen" }), jsx(AlertDialogAction, { onClick: handleConfirm, className: variant === "destructive"
-                                        ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
-                                        : "", children: confirmLabel || "Bestätigen" })] })] }) })] }));
+    return (jsxs(Fragment, { children: [children, jsx(AlertDialog, { open: !!currentRequest, onOpenChange: (open) => !open && handleCancel(), children: jsxs(AlertDialogContent, { className: "max-w-md", children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { className: "text-center", children: title || "Bestätigung erforderlich" }), description && (jsx(AlertDialogDescription, { className: "text-center", children: description }))] }), image && (jsx("div", { className: "flex justify-center py-4", children: jsx("img", { src: image, alt: "Confirmation", className: "h-24 w-24 object-contain" }) })), icon && !image && (jsx("div", { className: "flex justify-center py-4 text-6xl", children: icon })), jsxs(AlertDialogFooter, { className: "flex flex-row !justify-between w-full", children: [jsx(AlertDialogCancel, { onClick: handleCancel, className: "mt-0", children: cancelLabel || "Abbrechen" }), jsx(AlertDialogAction, { onClick: handleConfirm, variant: variant === "destructive" ? "destructive" : "default", children: confirmLabel || "Bestätigen" })] })] }) })] }));
 }
 
-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 };
+export { AvatarGroupColumn, BadgeColumn, ButtonColumn, CheckboxColumn, ConfirmProvider, DataTable, DataTableSchema, DateColumn, DropdownColumn, EmptyStateBuilder, EnumColumn, HeaderActionGroup, HeaderActions, 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