@nccirtu/tablefy 0.7.9 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/builders/header-action-group.d.ts +11 -0
- package/dist/builders/header-actions.d.ts +59 -0
- package/dist/builders/index.d.ts +3 -0
- package/dist/columns/builders/header-action-group.d.ts +11 -0
- package/dist/columns/builders/header-actions.d.ts +59 -0
- package/dist/columns/builders/index.d.ts +3 -0
- package/dist/columns/index.d.ts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +178 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +179 -0
- package/dist/index.js.map +1 -1
- package/package.json +11 -7
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { HeaderActionItem } from "./header-actions";
|
|
3
|
+
interface HeaderActionGroupProps<TData = unknown> {
|
|
4
|
+
actions: HeaderActionItem<TData>[];
|
|
5
|
+
selectedRows?: TData[];
|
|
6
|
+
label?: string;
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
|
|
9
|
+
}
|
|
10
|
+
export declare function HeaderActionGroup<TData = unknown>({ actions, selectedRows, label, icon, variant, }: HeaderActionGroupProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { HeaderAction } from "../types/actions";
|
|
3
|
+
export interface HeaderActionItem<TData = unknown> {
|
|
4
|
+
label?: string;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
href?: string;
|
|
8
|
+
render?: (selectedRows?: TData[]) => ReactNode;
|
|
9
|
+
variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
|
|
10
|
+
size?: "default" | "sm" | "lg" | "icon";
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
hidden?: boolean;
|
|
14
|
+
bulk?: boolean;
|
|
15
|
+
bulkOnClick?: (selectedRows: TData[]) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare class HeaderActions<TData = unknown> {
|
|
18
|
+
private config;
|
|
19
|
+
static make<TData>(): HeaderActions<TData>;
|
|
20
|
+
label(label: string): this;
|
|
21
|
+
icon(icon: ReactNode): this;
|
|
22
|
+
variant(variant: "default" | "secondary" | "outline" | "ghost" | "destructive"): this;
|
|
23
|
+
size(size: "default" | "sm" | "lg" | "icon"): this;
|
|
24
|
+
disabled(disabled?: boolean): this;
|
|
25
|
+
loading(loading?: boolean): this;
|
|
26
|
+
hidden(hidden?: boolean): this;
|
|
27
|
+
action(action: HeaderActionItem<TData>): this;
|
|
28
|
+
onClick(handler: () => void): this;
|
|
29
|
+
href(url: string): this;
|
|
30
|
+
bulk(handler: (selectedRows: TData[]) => void): this;
|
|
31
|
+
create(config: {
|
|
32
|
+
label: string;
|
|
33
|
+
href?: string;
|
|
34
|
+
onClick?: () => void;
|
|
35
|
+
icon?: ReactNode;
|
|
36
|
+
}): this;
|
|
37
|
+
export(config: {
|
|
38
|
+
label: string;
|
|
39
|
+
icon?: ReactNode;
|
|
40
|
+
onClick?: () => void;
|
|
41
|
+
}): this;
|
|
42
|
+
import(config: {
|
|
43
|
+
label: string;
|
|
44
|
+
icon?: ReactNode;
|
|
45
|
+
onClick?: () => void;
|
|
46
|
+
}): this;
|
|
47
|
+
bulkExport(config: {
|
|
48
|
+
label: string;
|
|
49
|
+
icon?: ReactNode;
|
|
50
|
+
onExport: (rows: TData[]) => void;
|
|
51
|
+
}): this;
|
|
52
|
+
bulkDelete(config: {
|
|
53
|
+
label: string;
|
|
54
|
+
icon?: ReactNode;
|
|
55
|
+
onDelete: (rows: TData[]) => void;
|
|
56
|
+
}): this;
|
|
57
|
+
build(): HeaderActionItem<TData>[];
|
|
58
|
+
buildLegacy(): HeaderAction<TData>[];
|
|
59
|
+
}
|
package/dist/builders/index.d.ts
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { HeaderActionItem } from "./header-actions";
|
|
3
|
+
interface HeaderActionGroupProps<TData = unknown> {
|
|
4
|
+
actions: HeaderActionItem<TData>[];
|
|
5
|
+
selectedRows?: TData[];
|
|
6
|
+
label?: string;
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
|
|
9
|
+
}
|
|
10
|
+
export declare function HeaderActionGroup<TData = unknown>({ actions, selectedRows, label, icon, variant, }: HeaderActionGroupProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { HeaderAction } from "../types/actions";
|
|
3
|
+
export interface HeaderActionItem<TData = unknown> {
|
|
4
|
+
label?: string;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
href?: string;
|
|
8
|
+
render?: (selectedRows?: TData[]) => ReactNode;
|
|
9
|
+
variant?: "default" | "secondary" | "outline" | "ghost" | "destructive";
|
|
10
|
+
size?: "default" | "sm" | "lg" | "icon";
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
hidden?: boolean;
|
|
14
|
+
bulk?: boolean;
|
|
15
|
+
bulkOnClick?: (selectedRows: TData[]) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare class HeaderActions<TData = unknown> {
|
|
18
|
+
private config;
|
|
19
|
+
static make<TData>(): HeaderActions<TData>;
|
|
20
|
+
label(label: string): this;
|
|
21
|
+
icon(icon: ReactNode): this;
|
|
22
|
+
variant(variant: "default" | "secondary" | "outline" | "ghost" | "destructive"): this;
|
|
23
|
+
size(size: "default" | "sm" | "lg" | "icon"): this;
|
|
24
|
+
disabled(disabled?: boolean): this;
|
|
25
|
+
loading(loading?: boolean): this;
|
|
26
|
+
hidden(hidden?: boolean): this;
|
|
27
|
+
action(action: HeaderActionItem<TData>): this;
|
|
28
|
+
onClick(handler: () => void): this;
|
|
29
|
+
href(url: string): this;
|
|
30
|
+
bulk(handler: (selectedRows: TData[]) => void): this;
|
|
31
|
+
create(config: {
|
|
32
|
+
label: string;
|
|
33
|
+
href?: string;
|
|
34
|
+
onClick?: () => void;
|
|
35
|
+
icon?: ReactNode;
|
|
36
|
+
}): this;
|
|
37
|
+
export(config: {
|
|
38
|
+
label: string;
|
|
39
|
+
icon?: ReactNode;
|
|
40
|
+
onClick?: () => void;
|
|
41
|
+
}): this;
|
|
42
|
+
import(config: {
|
|
43
|
+
label: string;
|
|
44
|
+
icon?: ReactNode;
|
|
45
|
+
onClick?: () => void;
|
|
46
|
+
}): this;
|
|
47
|
+
bulkExport(config: {
|
|
48
|
+
label: string;
|
|
49
|
+
icon?: ReactNode;
|
|
50
|
+
onExport: (rows: TData[]) => void;
|
|
51
|
+
}): this;
|
|
52
|
+
bulkDelete(config: {
|
|
53
|
+
label: string;
|
|
54
|
+
icon?: ReactNode;
|
|
55
|
+
onDelete: (rows: TData[]) => void;
|
|
56
|
+
}): this;
|
|
57
|
+
build(): HeaderActionItem<TData>[];
|
|
58
|
+
buildLegacy(): HeaderAction<TData>[];
|
|
59
|
+
}
|
package/dist/columns/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { DataTable } from "./tablefy/data-table";
|
|
2
2
|
export { DataTableSchema } from "./tablefy/data-table-schema";
|
|
3
|
-
export { TableSchema, EmptyStateBuilder } from "./builders";
|
|
3
|
+
export { TableSchema, EmptyStateBuilder, HeaderActions, HeaderActionGroup, } from "./builders";
|
|
4
|
+
export type { HeaderActionItem } from "./builders";
|
|
4
5
|
export { AvatarGroupColumn, AvatarGroupColumn as avatarGroupColumn, } from "./columns/avatar-group-column";
|
|
5
6
|
export { BadgeColumn, BadgeColumn as badgeColumn, } from "./columns/badge-column";
|
|
6
7
|
export { ButtonColumn, ButtonColumn as buttonColumn, } from "./columns/button-column";
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { DataTable } from "./tablefy/data-table";
|
|
2
2
|
export { DataTableSchema } from "./tablefy/data-table-schema";
|
|
3
|
-
export { TableSchema, EmptyStateBuilder } from "./builders";
|
|
3
|
+
export { TableSchema, EmptyStateBuilder, HeaderActions, HeaderActionGroup, } from "./builders";
|
|
4
|
+
export type { HeaderActionItem } from "./builders";
|
|
4
5
|
export { AvatarGroupColumn, AvatarGroupColumn as avatarGroupColumn, } from "./columns/avatar-group-column";
|
|
5
6
|
export { BadgeColumn, BadgeColumn as badgeColumn, } from "./columns/badge-column";
|
|
6
7
|
export { ButtonColumn, ButtonColumn as buttonColumn, } from "./columns/button-column";
|
package/dist/index.esm.js
CHANGED
|
@@ -378,6 +378,183 @@ class EmptyStateBuilder {
|
|
|
378
378
|
}
|
|
379
379
|
}
|
|
380
380
|
|
|
381
|
+
class HeaderActions {
|
|
382
|
+
config = {
|
|
383
|
+
actions: [],
|
|
384
|
+
};
|
|
385
|
+
static make() {
|
|
386
|
+
return new HeaderActions();
|
|
387
|
+
}
|
|
388
|
+
label(label) {
|
|
389
|
+
if (this.config.actions.length > 0) {
|
|
390
|
+
this.config.actions[this.config.actions.length - 1].label = label;
|
|
391
|
+
}
|
|
392
|
+
return this;
|
|
393
|
+
}
|
|
394
|
+
icon(icon) {
|
|
395
|
+
if (this.config.actions.length > 0) {
|
|
396
|
+
this.config.actions[this.config.actions.length - 1].icon = icon;
|
|
397
|
+
}
|
|
398
|
+
return this;
|
|
399
|
+
}
|
|
400
|
+
variant(variant) {
|
|
401
|
+
if (this.config.actions.length > 0) {
|
|
402
|
+
this.config.actions[this.config.actions.length - 1].variant = variant;
|
|
403
|
+
}
|
|
404
|
+
return this;
|
|
405
|
+
}
|
|
406
|
+
size(size) {
|
|
407
|
+
if (this.config.actions.length > 0) {
|
|
408
|
+
this.config.actions[this.config.actions.length - 1].size = size;
|
|
409
|
+
}
|
|
410
|
+
return this;
|
|
411
|
+
}
|
|
412
|
+
disabled(disabled = true) {
|
|
413
|
+
if (this.config.actions.length > 0) {
|
|
414
|
+
this.config.actions[this.config.actions.length - 1].disabled = disabled;
|
|
415
|
+
}
|
|
416
|
+
return this;
|
|
417
|
+
}
|
|
418
|
+
loading(loading = true) {
|
|
419
|
+
if (this.config.actions.length > 0) {
|
|
420
|
+
this.config.actions[this.config.actions.length - 1].loading = loading;
|
|
421
|
+
}
|
|
422
|
+
return this;
|
|
423
|
+
}
|
|
424
|
+
hidden(hidden = true) {
|
|
425
|
+
if (this.config.actions.length > 0) {
|
|
426
|
+
this.config.actions[this.config.actions.length - 1].hidden = hidden;
|
|
427
|
+
}
|
|
428
|
+
return this;
|
|
429
|
+
}
|
|
430
|
+
action(action) {
|
|
431
|
+
this.config.actions.push(action);
|
|
432
|
+
return this;
|
|
433
|
+
}
|
|
434
|
+
onClick(handler) {
|
|
435
|
+
if (this.config.actions.length > 0) {
|
|
436
|
+
this.config.actions[this.config.actions.length - 1].onClick = handler;
|
|
437
|
+
}
|
|
438
|
+
return this;
|
|
439
|
+
}
|
|
440
|
+
href(url) {
|
|
441
|
+
if (this.config.actions.length > 0) {
|
|
442
|
+
this.config.actions[this.config.actions.length - 1].href = url;
|
|
443
|
+
}
|
|
444
|
+
return this;
|
|
445
|
+
}
|
|
446
|
+
bulk(handler) {
|
|
447
|
+
if (this.config.actions.length > 0) {
|
|
448
|
+
this.config.actions[this.config.actions.length - 1].bulk = true;
|
|
449
|
+
this.config.actions[this.config.actions.length - 1].bulkOnClick = handler;
|
|
450
|
+
}
|
|
451
|
+
return this;
|
|
452
|
+
}
|
|
453
|
+
create(config) {
|
|
454
|
+
return this.action({
|
|
455
|
+
label: config.label,
|
|
456
|
+
href: config.href,
|
|
457
|
+
onClick: config.onClick,
|
|
458
|
+
icon: config.icon,
|
|
459
|
+
variant: "default",
|
|
460
|
+
});
|
|
461
|
+
}
|
|
462
|
+
export(config) {
|
|
463
|
+
return this.action({
|
|
464
|
+
label: config.label,
|
|
465
|
+
icon: config.icon,
|
|
466
|
+
onClick: config.onClick,
|
|
467
|
+
variant: "outline",
|
|
468
|
+
});
|
|
469
|
+
}
|
|
470
|
+
import(config) {
|
|
471
|
+
return this.action({
|
|
472
|
+
label: config.label,
|
|
473
|
+
icon: config.icon,
|
|
474
|
+
onClick: config.onClick,
|
|
475
|
+
variant: "outline",
|
|
476
|
+
});
|
|
477
|
+
}
|
|
478
|
+
bulkExport(config) {
|
|
479
|
+
return this.action({
|
|
480
|
+
label: config.label,
|
|
481
|
+
icon: config.icon,
|
|
482
|
+
bulk: true,
|
|
483
|
+
bulkOnClick: config.onExport,
|
|
484
|
+
variant: "outline",
|
|
485
|
+
});
|
|
486
|
+
}
|
|
487
|
+
bulkDelete(config) {
|
|
488
|
+
return this.action({
|
|
489
|
+
label: config.label,
|
|
490
|
+
icon: config.icon,
|
|
491
|
+
bulk: true,
|
|
492
|
+
bulkOnClick: config.onDelete,
|
|
493
|
+
variant: "destructive",
|
|
494
|
+
});
|
|
495
|
+
}
|
|
496
|
+
build() {
|
|
497
|
+
return this.config.actions;
|
|
498
|
+
}
|
|
499
|
+
buildLegacy() {
|
|
500
|
+
return this.config.actions.map((action, index) => ({
|
|
501
|
+
id: `action-${index}`,
|
|
502
|
+
label: action.label || "",
|
|
503
|
+
icon: action.icon,
|
|
504
|
+
onClick: action.onClick,
|
|
505
|
+
href: action.href,
|
|
506
|
+
variant: action.variant,
|
|
507
|
+
size: action.size,
|
|
508
|
+
disabled: action.disabled,
|
|
509
|
+
loading: action.loading,
|
|
510
|
+
hidden: action.hidden,
|
|
511
|
+
bulk: action.bulk,
|
|
512
|
+
bulkOnClick: action.bulkOnClick,
|
|
513
|
+
}));
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
function HeaderActionGroup({ actions, selectedRows = [], label = "Aktionen", icon, variant = "outline", }) {
|
|
518
|
+
const visibleActions = actions.filter((action) => !action.hidden);
|
|
519
|
+
if (visibleActions.length === 0)
|
|
520
|
+
return null;
|
|
521
|
+
// If only one action, render it directly
|
|
522
|
+
if (visibleActions.length === 1) {
|
|
523
|
+
const action = visibleActions[0];
|
|
524
|
+
if (action.render) {
|
|
525
|
+
return jsx(Fragment, { children: action.render(selectedRows) });
|
|
526
|
+
}
|
|
527
|
+
return (jsxs(Button, { variant: action.variant || variant, size: action.size || "default", disabled: action.disabled, onClick: () => {
|
|
528
|
+
if (action.bulk && action.bulkOnClick) {
|
|
529
|
+
action.bulkOnClick(selectedRows);
|
|
530
|
+
}
|
|
531
|
+
else if (action.onClick) {
|
|
532
|
+
action.onClick();
|
|
533
|
+
}
|
|
534
|
+
else if (action.href) {
|
|
535
|
+
window.location.href = action.href;
|
|
536
|
+
}
|
|
537
|
+
}, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }));
|
|
538
|
+
}
|
|
539
|
+
// Multiple actions - render as dropdown
|
|
540
|
+
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) => {
|
|
541
|
+
if (action.render) {
|
|
542
|
+
return jsx("div", { children: action.render(selectedRows) }, index);
|
|
543
|
+
}
|
|
544
|
+
return (jsxs(DropdownMenuItem, { disabled: action.disabled, onClick: () => {
|
|
545
|
+
if (action.bulk && action.bulkOnClick) {
|
|
546
|
+
action.bulkOnClick(selectedRows);
|
|
547
|
+
}
|
|
548
|
+
else if (action.onClick) {
|
|
549
|
+
action.onClick();
|
|
550
|
+
}
|
|
551
|
+
else if (action.href) {
|
|
552
|
+
window.location.href = action.href;
|
|
553
|
+
}
|
|
554
|
+
}, children: [action.icon && jsx("span", { className: "mr-2", children: action.icon }), action.label] }, index));
|
|
555
|
+
}) })] }));
|
|
556
|
+
}
|
|
557
|
+
|
|
381
558
|
function DataTable({ columns, data, config = {}, className, isLoading = false, isError = false, onRetry, }) {
|
|
382
559
|
const [sorting, setSorting] = useState(config.defaultSort ? [config.defaultSort] : []);
|
|
383
560
|
const [columnFilters, setColumnFilters] = useState([]);
|
|
@@ -1754,5 +1931,5 @@ function ConfirmProvider({ children }) {
|
|
|
1754
1931
|
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" })] })] }) })] }));
|
|
1755
1932
|
}
|
|
1756
1933
|
|
|
1757
|
-
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 };
|
|
1934
|
+
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 };
|
|
1758
1935
|
//# sourceMappingURL=index.esm.js.map
|