@itilite/lumina-ui 1.0.5-alpha → 1.0.7-alpha
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/Table-DNvoh2P8.d.mts +127 -0
- package/dist/Table-DNvoh2P8.d.ts +127 -0
- package/dist/Table-DSFYzrpU.d.mts +129 -0
- package/dist/Table-DSFYzrpU.d.ts +129 -0
- package/dist/atom/Table/Table.d.mts +1 -1
- package/dist/atom/Table/Table.d.ts +1 -1
- package/dist/atom/Table/Table.js +55 -21
- package/dist/atom/Table/Table.mjs +1 -1
- package/dist/chunk-DXPVJNGY.mjs +284 -0
- package/dist/chunk-G4P6XGQX.mjs +278 -0
- package/dist/chunk-I6GLPWHS.mjs +278 -0
- package/dist/chunk-J5JDQ4R6.mjs +278 -0
- package/dist/chunk-LRNKIRH3.mjs +289 -0
- package/dist/chunk-X3NDICAU.mjs +284 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +55 -21
- package/dist/index.mjs +1 -1
- package/dist/styles.css +340 -331
- package/package.json +1 -1
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TableProps as TableProps$1, TablePaginationConfig } from 'antd';
|
|
3
|
+
|
|
4
|
+
type SortOrder = "ascend" | "descend" | undefined;
|
|
5
|
+
type AntColumnType<RecordType> = NonNullable<TableProps$1<RecordType>["columns"]>[number];
|
|
6
|
+
/**
|
|
7
|
+
* Header icon configuration added to any column definition.
|
|
8
|
+
* The Table component reads these props and renders sort/filter icons automatically.
|
|
9
|
+
*/
|
|
10
|
+
interface LuminaColumnHeaderProps {
|
|
11
|
+
/** Show sort icon. Clicking cycles: undefined (↑↓) → ascend (↑) → descend (↓) → undefined */
|
|
12
|
+
sortable?: boolean;
|
|
13
|
+
/** Current sort direction. Provide to make sort controlled. */
|
|
14
|
+
sortOrder?: SortOrder;
|
|
15
|
+
/** Called when the user clicks the sort icon. */
|
|
16
|
+
onSortChange?: (order: SortOrder) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Custom sort icon. This MUST be provided if sortable is true.
|
|
19
|
+
* If omitted, no icon will be rendered.
|
|
20
|
+
*/
|
|
21
|
+
sortIcon?: React.ReactNode;
|
|
22
|
+
/** > 0 turns the filter icon red and shows a count badge. */
|
|
23
|
+
filterCount?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Custom filter icon. This MUST be provided if filterContent is present.
|
|
26
|
+
* If omitted, no icon will be rendered.
|
|
27
|
+
*/
|
|
28
|
+
filterIcon?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Filter dropdown content from the consumer.
|
|
31
|
+
* Providing this prop renders the filter icon button.
|
|
32
|
+
* Clicking the icon toggles visibility of this content.
|
|
33
|
+
*/
|
|
34
|
+
filterContent?: React.ReactNode;
|
|
35
|
+
/** Optional class name to apply to the header label. */
|
|
36
|
+
className?: string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* AntD ColumnType extended with optional `headerProps` for Lumina sort/filter icons.
|
|
40
|
+
*/
|
|
41
|
+
type LuminaColumnType<RecordType = any> = AntColumnType<RecordType> & {
|
|
42
|
+
headerProps?: LuminaColumnHeaderProps;
|
|
43
|
+
};
|
|
44
|
+
type LuminaColumnsType<RecordType = any> = LuminaColumnType<RecordType>[];
|
|
45
|
+
interface TableProps<RecordType = any> extends Omit<TableProps$1<RecordType>, "size" | "bordered" | "pagination" | "columns"> {
|
|
46
|
+
/**
|
|
47
|
+
* Lumina UI table variant.
|
|
48
|
+
* - `default` – standard table
|
|
49
|
+
* - `selectable` – checkbox rows; clicking any row toggles its checkbox
|
|
50
|
+
*/
|
|
51
|
+
variant?: "default" | "selectable";
|
|
52
|
+
/** If true, strips outer card chrome to fit inside an Accordion parent. */
|
|
53
|
+
isAccordion?: boolean;
|
|
54
|
+
/** If true, strips outer card chrome to fit inside a Toolbar/Container parent. */
|
|
55
|
+
isToolbar?: boolean;
|
|
56
|
+
/** Table size. Defaults to 'middle'. */
|
|
57
|
+
size?: "small" | "middle" | "large";
|
|
58
|
+
/** Extra class applied on the outermost wrapper div. */
|
|
59
|
+
className?: string;
|
|
60
|
+
/** AntD pagination config. Pass `false` to hide pagination. */
|
|
61
|
+
pagination?: TablePaginationConfig | boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Column definitions. Add `headerProps` to any column to get sort/filter icons
|
|
64
|
+
* rendered automatically in the column header.
|
|
65
|
+
*/
|
|
66
|
+
columns?: LuminaColumnsType<RecordType>;
|
|
67
|
+
/** Total number of items in the dataset (for server-side pagination). */
|
|
68
|
+
total?: number;
|
|
69
|
+
/** Current page number (1-indexed). */
|
|
70
|
+
current?: number;
|
|
71
|
+
/** Number of rows per page. */
|
|
72
|
+
pageSize?: number;
|
|
73
|
+
/** Called when the page or page size changes. */
|
|
74
|
+
onPaginationChange?: TablePaginationConfig["onChange"];
|
|
75
|
+
/**
|
|
76
|
+
* Custom content to show when the table has no data.
|
|
77
|
+
* If provided, it overrides the default Ant Design "No Data" view.
|
|
78
|
+
*/
|
|
79
|
+
emptyState?: React.ReactNode;
|
|
80
|
+
/**
|
|
81
|
+
* If true, the table header (the row with column labels) will be hidden.
|
|
82
|
+
* Useful during loading or for specific visual variants.
|
|
83
|
+
*/
|
|
84
|
+
hideHeader?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Custom loading indicator (e.g. a spinner or skeleton).
|
|
87
|
+
* If provided, this will be rendered when the table is in a loading state.
|
|
88
|
+
*/
|
|
89
|
+
loadingIndicator?: React.ReactElement;
|
|
90
|
+
/** Extra class applied to header cells (th). */
|
|
91
|
+
headerCellClassName?: string;
|
|
92
|
+
/** Extra class applied to body cells (td). */
|
|
93
|
+
bodyCellClassName?: string;
|
|
94
|
+
/** Custom class name for rows. Can be a string or function. */
|
|
95
|
+
rowClassName?: string | ((record: RecordType, index: number) => string);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Lumina Table component.
|
|
100
|
+
*
|
|
101
|
+
* Variants:
|
|
102
|
+
* - `default` – standalone table card with rounded border
|
|
103
|
+
* - `hover` – row highlight on mouse-over
|
|
104
|
+
* - `selectable` – use with `rowSelection`; clicking any row toggles its checkbox
|
|
105
|
+
* - `accordion-child` – strips outer card chrome; place inside your own accordion wrapper
|
|
106
|
+
* - `toolbar-child` – strips outer card chrome; place inside your own toolbar/container wrapper
|
|
107
|
+
*
|
|
108
|
+
* Column header icons — add `headerProps` to any column definition:
|
|
109
|
+
* ```tsx
|
|
110
|
+
* columns={[{
|
|
111
|
+
* key: "name", dataIndex: "name", title: "Name",
|
|
112
|
+
* headerProps: {
|
|
113
|
+
* sortable: true,
|
|
114
|
+
* sortOrder: sortOrders.name,
|
|
115
|
+
* onSortChange: (order) => setSortOrders(prev => ({ ...prev, name: order })),
|
|
116
|
+
* filterCount: activeFilters.name ?? 0,
|
|
117
|
+
* filterContent: <MyFilterPanel />,
|
|
118
|
+
* },
|
|
119
|
+
* }]}
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): React.JSX.Element;
|
|
123
|
+
declare namespace Table {
|
|
124
|
+
var displayName: string;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export { type LuminaColumnHeaderProps as L, type SortOrder as S, Table as T, type LuminaColumnType as a, type LuminaColumnsType as b, type TableProps as c };
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TableProps as TableProps$1, TablePaginationConfig } from 'antd';
|
|
3
|
+
|
|
4
|
+
type SortOrder = "ascend" | "descend" | undefined;
|
|
5
|
+
type AntColumnType<RecordType> = NonNullable<TableProps$1<RecordType>["columns"]>[number];
|
|
6
|
+
/**
|
|
7
|
+
* Header icon configuration added to any column definition.
|
|
8
|
+
* The Table component reads these props and renders sort/filter icons automatically.
|
|
9
|
+
*/
|
|
10
|
+
interface LuminaColumnHeaderProps {
|
|
11
|
+
/** Show sort icon. Clicking cycles: undefined (↑↓) → ascend (↑) → descend (↓) → undefined */
|
|
12
|
+
sortable?: boolean;
|
|
13
|
+
/** Current sort direction. Provide to make sort controlled. */
|
|
14
|
+
sortOrder?: SortOrder;
|
|
15
|
+
/** Called when the user clicks the sort icon. */
|
|
16
|
+
onSortChange?: (order: SortOrder) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Custom sort icon. This MUST be provided if sortable is true.
|
|
19
|
+
* If omitted, no icon will be rendered.
|
|
20
|
+
*/
|
|
21
|
+
sortIcon?: React.ReactNode;
|
|
22
|
+
/** > 0 turns the filter icon red and shows a count badge. */
|
|
23
|
+
filterCount?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Custom filter icon. This MUST be provided if filterContent is present.
|
|
26
|
+
* If omitted, no icon will be rendered.
|
|
27
|
+
*/
|
|
28
|
+
filterIcon?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Filter dropdown content from the consumer.
|
|
31
|
+
* Providing this prop renders the filter icon button.
|
|
32
|
+
* Clicking the icon toggles visibility of this content.
|
|
33
|
+
*/
|
|
34
|
+
filterContent?: React.ReactNode;
|
|
35
|
+
/** Optional class name to apply to the header label. */
|
|
36
|
+
className?: string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* AntD ColumnType extended with optional `headerProps` for Lumina sort/filter icons.
|
|
40
|
+
*/
|
|
41
|
+
type LuminaColumnType<RecordType = any> = AntColumnType<RecordType> & {
|
|
42
|
+
headerProps?: LuminaColumnHeaderProps;
|
|
43
|
+
};
|
|
44
|
+
type LuminaColumnsType<RecordType = any> = LuminaColumnType<RecordType>[];
|
|
45
|
+
interface TableProps<RecordType = any> extends Omit<TableProps$1<RecordType>, "size" | "bordered" | "pagination" | "columns"> {
|
|
46
|
+
/**
|
|
47
|
+
* Lumina UI table variant.
|
|
48
|
+
* - `default` – standard table
|
|
49
|
+
* - `selectable` – checkbox rows; clicking any row toggles its checkbox
|
|
50
|
+
*/
|
|
51
|
+
variant?: "default" | "selectable";
|
|
52
|
+
/** If true, strips outer card chrome to fit inside an Accordion parent. */
|
|
53
|
+
isAccordion?: boolean;
|
|
54
|
+
/** If true, strips outer card chrome to fit inside a Toolbar/Container parent. */
|
|
55
|
+
isToolbar?: boolean;
|
|
56
|
+
/** Table size. Defaults to 'middle'. */
|
|
57
|
+
size?: "small" | "middle" | "large";
|
|
58
|
+
/** Extra class applied on the outermost wrapper div. */
|
|
59
|
+
className?: string;
|
|
60
|
+
/** AntD pagination config. Pass `false` to hide pagination. */
|
|
61
|
+
pagination?: TablePaginationConfig | boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Column definitions. Add `headerProps` to any column to get sort/filter icons
|
|
64
|
+
* rendered automatically in the column header.
|
|
65
|
+
*/
|
|
66
|
+
columns?: LuminaColumnsType<RecordType>;
|
|
67
|
+
/** Total number of items in the dataset (for server-side pagination). */
|
|
68
|
+
total?: number;
|
|
69
|
+
/** Current page number (1-indexed). */
|
|
70
|
+
current?: number;
|
|
71
|
+
/** Number of rows per page. */
|
|
72
|
+
pageSize?: number;
|
|
73
|
+
/** Called when the page or page size changes. */
|
|
74
|
+
onPaginationChange?: TablePaginationConfig["onChange"];
|
|
75
|
+
/**
|
|
76
|
+
* Custom content to show when the table has no data.
|
|
77
|
+
* If provided, it overrides the default Ant Design "No Data" view.
|
|
78
|
+
*/
|
|
79
|
+
emptyState?: React.ReactNode;
|
|
80
|
+
/**
|
|
81
|
+
* If true, the table header (the row with column labels) will be hidden.
|
|
82
|
+
* Useful during loading or for specific visual variants.
|
|
83
|
+
*/
|
|
84
|
+
hideHeader?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Custom loading indicator (e.g. a spinner or skeleton).
|
|
87
|
+
* If provided, this will be rendered when the table is in a loading state.
|
|
88
|
+
*/
|
|
89
|
+
loadingIndicator?: React.ReactElement;
|
|
90
|
+
/** Extra class applied to header cells (th). */
|
|
91
|
+
headerCellClassName?: string;
|
|
92
|
+
/** Extra class applied to body cells (td). */
|
|
93
|
+
bodyCellClassName?: string;
|
|
94
|
+
/** Custom class name for rows. Can be a string or function. */
|
|
95
|
+
rowClassName?: string | ((record: RecordType, index: number) => string);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Lumina Table component.
|
|
100
|
+
*
|
|
101
|
+
* Variants:
|
|
102
|
+
* - `default` – standalone table card with rounded border
|
|
103
|
+
* - `hover` – row highlight on mouse-over
|
|
104
|
+
* - `selectable` – use with `rowSelection`; clicking any row toggles its checkbox
|
|
105
|
+
* - `accordion-child` – strips outer card chrome; place inside your own accordion wrapper
|
|
106
|
+
* - `toolbar-child` – strips outer card chrome; place inside your own toolbar/container wrapper
|
|
107
|
+
*
|
|
108
|
+
* Column header icons — add `headerProps` to any column definition:
|
|
109
|
+
* ```tsx
|
|
110
|
+
* columns={[{
|
|
111
|
+
* key: "name", dataIndex: "name", title: "Name",
|
|
112
|
+
* headerProps: {
|
|
113
|
+
* sortable: true,
|
|
114
|
+
* sortOrder: sortOrders.name,
|
|
115
|
+
* onSortChange: (order) => setSortOrders(prev => ({ ...prev, name: order })),
|
|
116
|
+
* filterCount: activeFilters.name ?? 0,
|
|
117
|
+
* filterContent: <MyFilterPanel />,
|
|
118
|
+
* },
|
|
119
|
+
* }]}
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): React.JSX.Element;
|
|
123
|
+
declare namespace Table {
|
|
124
|
+
var displayName: string;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export { type LuminaColumnHeaderProps as L, type SortOrder as S, Table as T, type LuminaColumnType as a, type LuminaColumnsType as b, type TableProps as c };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TableProps as TableProps$1, TablePaginationConfig } from 'antd';
|
|
3
|
+
|
|
4
|
+
type SortOrder = "ascend" | "descend" | undefined;
|
|
5
|
+
type AntColumnType<RecordType> = NonNullable<TableProps$1<RecordType>["columns"]>[number];
|
|
6
|
+
/**
|
|
7
|
+
* Header icon configuration added to any column definition.
|
|
8
|
+
* The Table component reads these props and renders sort/filter icons automatically.
|
|
9
|
+
*/
|
|
10
|
+
interface LuminaColumnHeaderProps {
|
|
11
|
+
/** Show sort icon. Clicking cycles: undefined (↑↓) → ascend (↑) → descend (↓) → undefined */
|
|
12
|
+
sortable?: boolean;
|
|
13
|
+
/** Current sort direction. Provide to make sort controlled. */
|
|
14
|
+
sortOrder?: SortOrder;
|
|
15
|
+
/** Called when the user clicks the sort icon. */
|
|
16
|
+
onSortChange?: (order: SortOrder) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Custom sort icon. This MUST be provided if sortable is true.
|
|
19
|
+
* If omitted, no icon will be rendered.
|
|
20
|
+
*/
|
|
21
|
+
sortIcon?: React.ReactNode;
|
|
22
|
+
/** > 0 turns the filter icon red and shows a count badge. */
|
|
23
|
+
filterCount?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Custom filter icon. This MUST be provided if filterContent is present.
|
|
26
|
+
* If omitted, no icon will be rendered.
|
|
27
|
+
*/
|
|
28
|
+
filterIcon?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Filter dropdown content from the consumer.
|
|
31
|
+
* Providing this prop renders the filter icon button.
|
|
32
|
+
* Clicking the icon toggles visibility of this content.
|
|
33
|
+
*/
|
|
34
|
+
filterContent?: React.ReactNode;
|
|
35
|
+
/** Optional class name to apply to the header label. */
|
|
36
|
+
className?: string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* AntD ColumnType extended with optional `headerProps` for Lumina sort/filter icons.
|
|
40
|
+
*/
|
|
41
|
+
type LuminaColumnType<RecordType = any> = AntColumnType<RecordType> & {
|
|
42
|
+
headerProps?: LuminaColumnHeaderProps;
|
|
43
|
+
};
|
|
44
|
+
type LuminaColumnsType<RecordType = any> = LuminaColumnType<RecordType>[];
|
|
45
|
+
interface TableProps<RecordType = any> extends Omit<TableProps$1<RecordType>, "size" | "bordered" | "pagination" | "columns"> {
|
|
46
|
+
/**
|
|
47
|
+
* Lumina UI table variant.
|
|
48
|
+
* - `default` – standard table
|
|
49
|
+
* - `selectable` – checkbox rows; clicking any row toggles its checkbox
|
|
50
|
+
*/
|
|
51
|
+
variant?: "default" | "selectable";
|
|
52
|
+
/** If true, strips outer card chrome to fit inside an Accordion parent. */
|
|
53
|
+
isAccordion?: boolean;
|
|
54
|
+
/** If true, strips outer card chrome to fit inside a Toolbar/Container parent. */
|
|
55
|
+
isToolbar?: boolean;
|
|
56
|
+
/** Table size. Defaults to 'middle'. */
|
|
57
|
+
size?: "small" | "middle" | "large";
|
|
58
|
+
/** Extra class applied on the outermost wrapper div. */
|
|
59
|
+
className?: string;
|
|
60
|
+
/** AntD pagination config. Pass `false` to hide pagination. */
|
|
61
|
+
pagination?: TablePaginationConfig | boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Column definitions. Add `headerProps` to any column to get sort/filter icons
|
|
64
|
+
* rendered automatically in the column header.
|
|
65
|
+
*/
|
|
66
|
+
columns?: LuminaColumnsType<RecordType>;
|
|
67
|
+
/** Total number of items in the dataset (for server-side pagination). */
|
|
68
|
+
total?: number;
|
|
69
|
+
/** Current page number (1-indexed). */
|
|
70
|
+
current?: number;
|
|
71
|
+
/** Number of rows per page. */
|
|
72
|
+
pageSize?: number;
|
|
73
|
+
/** Called when the page or page size changes. */
|
|
74
|
+
onPaginationChange?: TablePaginationConfig["onChange"];
|
|
75
|
+
/**
|
|
76
|
+
* Custom content to show when the table has no data.
|
|
77
|
+
* If provided, it overrides the default Ant Design "No Data" view.
|
|
78
|
+
*/
|
|
79
|
+
emptyState?: React.ReactNode;
|
|
80
|
+
/**
|
|
81
|
+
* If true, the table header (the row with column labels) will be hidden.
|
|
82
|
+
* Useful during loading or for specific visual variants.
|
|
83
|
+
*/
|
|
84
|
+
hideHeader?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Custom loading indicator (e.g. a spinner or skeleton).
|
|
87
|
+
* If provided, this will be rendered when the table is in a loading state.
|
|
88
|
+
*/
|
|
89
|
+
loadingIndicator?: React.ReactElement;
|
|
90
|
+
/** Extra class applied to header cells (th). */
|
|
91
|
+
headerCellClassName?: string;
|
|
92
|
+
/** Extra class applied to body cells (td). */
|
|
93
|
+
bodyCellClassName?: string;
|
|
94
|
+
/** Custom class name for rows. Can be a string or function. */
|
|
95
|
+
rowClassName?: string | ((record: RecordType, index: number) => string);
|
|
96
|
+
/** Adds vertical spacing between table rows (e.g., "8px" or 8). */
|
|
97
|
+
rowSpacing?: number | string;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Lumina Table component.
|
|
102
|
+
*
|
|
103
|
+
* Variants:
|
|
104
|
+
* - `default` – standalone table card with rounded border
|
|
105
|
+
* - `hover` – row highlight on mouse-over
|
|
106
|
+
* - `selectable` – use with `rowSelection`; clicking any row toggles its checkbox
|
|
107
|
+
* - `accordion-child` – strips outer card chrome; place inside your own accordion wrapper
|
|
108
|
+
* - `toolbar-child` – strips outer card chrome; place inside your own toolbar/container wrapper
|
|
109
|
+
*
|
|
110
|
+
* Column header icons — add `headerProps` to any column definition:
|
|
111
|
+
* ```tsx
|
|
112
|
+
* columns={[{
|
|
113
|
+
* key: "name", dataIndex: "name", title: "Name",
|
|
114
|
+
* headerProps: {
|
|
115
|
+
* sortable: true,
|
|
116
|
+
* sortOrder: sortOrders.name,
|
|
117
|
+
* onSortChange: (order) => setSortOrders(prev => ({ ...prev, name: order })),
|
|
118
|
+
* filterCount: activeFilters.name ?? 0,
|
|
119
|
+
* filterContent: <MyFilterPanel />,
|
|
120
|
+
* },
|
|
121
|
+
* }]}
|
|
122
|
+
* ```
|
|
123
|
+
*/
|
|
124
|
+
declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): React.JSX.Element;
|
|
125
|
+
declare namespace Table {
|
|
126
|
+
var displayName: string;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export { type LuminaColumnHeaderProps as L, type SortOrder as S, Table as T, type LuminaColumnType as a, type LuminaColumnsType as b, type TableProps as c };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TableProps as TableProps$1, TablePaginationConfig } from 'antd';
|
|
3
|
+
|
|
4
|
+
type SortOrder = "ascend" | "descend" | undefined;
|
|
5
|
+
type AntColumnType<RecordType> = NonNullable<TableProps$1<RecordType>["columns"]>[number];
|
|
6
|
+
/**
|
|
7
|
+
* Header icon configuration added to any column definition.
|
|
8
|
+
* The Table component reads these props and renders sort/filter icons automatically.
|
|
9
|
+
*/
|
|
10
|
+
interface LuminaColumnHeaderProps {
|
|
11
|
+
/** Show sort icon. Clicking cycles: undefined (↑↓) → ascend (↑) → descend (↓) → undefined */
|
|
12
|
+
sortable?: boolean;
|
|
13
|
+
/** Current sort direction. Provide to make sort controlled. */
|
|
14
|
+
sortOrder?: SortOrder;
|
|
15
|
+
/** Called when the user clicks the sort icon. */
|
|
16
|
+
onSortChange?: (order: SortOrder) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Custom sort icon. This MUST be provided if sortable is true.
|
|
19
|
+
* If omitted, no icon will be rendered.
|
|
20
|
+
*/
|
|
21
|
+
sortIcon?: React.ReactNode;
|
|
22
|
+
/** > 0 turns the filter icon red and shows a count badge. */
|
|
23
|
+
filterCount?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Custom filter icon. This MUST be provided if filterContent is present.
|
|
26
|
+
* If omitted, no icon will be rendered.
|
|
27
|
+
*/
|
|
28
|
+
filterIcon?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Filter dropdown content from the consumer.
|
|
31
|
+
* Providing this prop renders the filter icon button.
|
|
32
|
+
* Clicking the icon toggles visibility of this content.
|
|
33
|
+
*/
|
|
34
|
+
filterContent?: React.ReactNode;
|
|
35
|
+
/** Optional class name to apply to the header label. */
|
|
36
|
+
className?: string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* AntD ColumnType extended with optional `headerProps` for Lumina sort/filter icons.
|
|
40
|
+
*/
|
|
41
|
+
type LuminaColumnType<RecordType = any> = AntColumnType<RecordType> & {
|
|
42
|
+
headerProps?: LuminaColumnHeaderProps;
|
|
43
|
+
};
|
|
44
|
+
type LuminaColumnsType<RecordType = any> = LuminaColumnType<RecordType>[];
|
|
45
|
+
interface TableProps<RecordType = any> extends Omit<TableProps$1<RecordType>, "size" | "bordered" | "pagination" | "columns"> {
|
|
46
|
+
/**
|
|
47
|
+
* Lumina UI table variant.
|
|
48
|
+
* - `default` – standard table
|
|
49
|
+
* - `selectable` – checkbox rows; clicking any row toggles its checkbox
|
|
50
|
+
*/
|
|
51
|
+
variant?: "default" | "selectable";
|
|
52
|
+
/** If true, strips outer card chrome to fit inside an Accordion parent. */
|
|
53
|
+
isAccordion?: boolean;
|
|
54
|
+
/** If true, strips outer card chrome to fit inside a Toolbar/Container parent. */
|
|
55
|
+
isToolbar?: boolean;
|
|
56
|
+
/** Table size. Defaults to 'middle'. */
|
|
57
|
+
size?: "small" | "middle" | "large";
|
|
58
|
+
/** Extra class applied on the outermost wrapper div. */
|
|
59
|
+
className?: string;
|
|
60
|
+
/** AntD pagination config. Pass `false` to hide pagination. */
|
|
61
|
+
pagination?: TablePaginationConfig | boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Column definitions. Add `headerProps` to any column to get sort/filter icons
|
|
64
|
+
* rendered automatically in the column header.
|
|
65
|
+
*/
|
|
66
|
+
columns?: LuminaColumnsType<RecordType>;
|
|
67
|
+
/** Total number of items in the dataset (for server-side pagination). */
|
|
68
|
+
total?: number;
|
|
69
|
+
/** Current page number (1-indexed). */
|
|
70
|
+
current?: number;
|
|
71
|
+
/** Number of rows per page. */
|
|
72
|
+
pageSize?: number;
|
|
73
|
+
/** Called when the page or page size changes. */
|
|
74
|
+
onPaginationChange?: TablePaginationConfig["onChange"];
|
|
75
|
+
/**
|
|
76
|
+
* Custom content to show when the table has no data.
|
|
77
|
+
* If provided, it overrides the default Ant Design "No Data" view.
|
|
78
|
+
*/
|
|
79
|
+
emptyState?: React.ReactNode;
|
|
80
|
+
/**
|
|
81
|
+
* If true, the table header (the row with column labels) will be hidden.
|
|
82
|
+
* Useful during loading or for specific visual variants.
|
|
83
|
+
*/
|
|
84
|
+
hideHeader?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Custom loading indicator (e.g. a spinner or skeleton).
|
|
87
|
+
* If provided, this will be rendered when the table is in a loading state.
|
|
88
|
+
*/
|
|
89
|
+
loadingIndicator?: React.ReactElement;
|
|
90
|
+
/** Extra class applied to header cells (th). */
|
|
91
|
+
headerCellClassName?: string;
|
|
92
|
+
/** Extra class applied to body cells (td). */
|
|
93
|
+
bodyCellClassName?: string;
|
|
94
|
+
/** Custom class name for rows. Can be a string or function. */
|
|
95
|
+
rowClassName?: string | ((record: RecordType, index: number) => string);
|
|
96
|
+
/** Adds vertical spacing between table rows (e.g., "8px" or 8). */
|
|
97
|
+
rowSpacing?: number | string;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Lumina Table component.
|
|
102
|
+
*
|
|
103
|
+
* Variants:
|
|
104
|
+
* - `default` – standalone table card with rounded border
|
|
105
|
+
* - `hover` – row highlight on mouse-over
|
|
106
|
+
* - `selectable` – use with `rowSelection`; clicking any row toggles its checkbox
|
|
107
|
+
* - `accordion-child` – strips outer card chrome; place inside your own accordion wrapper
|
|
108
|
+
* - `toolbar-child` – strips outer card chrome; place inside your own toolbar/container wrapper
|
|
109
|
+
*
|
|
110
|
+
* Column header icons — add `headerProps` to any column definition:
|
|
111
|
+
* ```tsx
|
|
112
|
+
* columns={[{
|
|
113
|
+
* key: "name", dataIndex: "name", title: "Name",
|
|
114
|
+
* headerProps: {
|
|
115
|
+
* sortable: true,
|
|
116
|
+
* sortOrder: sortOrders.name,
|
|
117
|
+
* onSortChange: (order) => setSortOrders(prev => ({ ...prev, name: order })),
|
|
118
|
+
* filterCount: activeFilters.name ?? 0,
|
|
119
|
+
* filterContent: <MyFilterPanel />,
|
|
120
|
+
* },
|
|
121
|
+
* }]}
|
|
122
|
+
* ```
|
|
123
|
+
*/
|
|
124
|
+
declare function Table<RecordType extends object = any>(props: TableProps<RecordType>): React.JSX.Element;
|
|
125
|
+
declare namespace Table {
|
|
126
|
+
var displayName: string;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export { type LuminaColumnHeaderProps as L, type SortOrder as S, Table as T, type LuminaColumnType as a, type LuminaColumnsType as b, type TableProps as c };
|
package/dist/atom/Table/Table.js
CHANGED
|
@@ -68,7 +68,7 @@ var import_antd = require("antd");
|
|
|
68
68
|
var import_clsx = __toESM(require("clsx"));
|
|
69
69
|
|
|
70
70
|
// src/atom/Table/Table.module.scss
|
|
71
|
-
var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "table": "Table-module__table___5d7g0", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
|
|
71
|
+
var Table_module_default = { "tableWrapper": "Table-module__tableWrapper___3cqiD", "isAccordion": "Table-module__isAccordion___-uIs6", "isToolbar": "Table-module__isToolbar___LdS-m", "hasCustomHeaderCell": "Table-module__hasCustomHeaderCell___AtCk8", "table": "Table-module__table___5d7g0", "ant-table-selection-column": "Table-module__ant-table-selection-column___H9vtu", "hasCustomBodyCell": "Table-module__hasCustomBodyCell___sf8j8", "firstRow": "Table-module__firstRow___Xq-Hi", "lastRow": "Table-module__lastRow___ahv4g", "showHoverEffect": "Table-module__showHoverEffect___IyKyO", "columnHeader": "Table-module__columnHeader___Unr6d", "columnHeaderLeft": "Table-module__columnHeaderLeft___mp7pK", "columnHeaderSortArea": "Table-module__columnHeaderSortArea___jrIYo", "columnHeaderLabel": "Table-module__columnHeaderLabel___A-mRu", "columnHeaderSortIcon": "Table-module__columnHeaderSortIcon___mWVZN", "columnHeaderSortIconActive": "Table-module__columnHeaderSortIconActive___wHAqC", "columnHeaderFilterWrapper": "Table-module__columnHeaderFilterWrapper___DnSve", "columnHeaderFilterBtn": "Table-module__columnHeaderFilterBtn___NR7DY", "columnHeaderFilterBtnActive": "Table-module__columnHeaderFilterBtnActive___JdO11", "columnHeaderFilterBadge": "Table-module__columnHeaderFilterBadge___-Q2T2", "columnHeaderFilterDropdown": "Table-module__columnHeaderFilterDropdown___M-fD4" };
|
|
72
72
|
|
|
73
73
|
// src/atom/Table/Table.tsx
|
|
74
74
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -167,13 +167,29 @@ function ColumnHeader({
|
|
|
167
167
|
] })
|
|
168
168
|
] });
|
|
169
169
|
}
|
|
170
|
-
function processColumns(columns) {
|
|
170
|
+
function processColumns(columns, headerCellClassName, bodyCellClassName) {
|
|
171
171
|
if (!columns) return void 0;
|
|
172
172
|
return columns.map((col) => {
|
|
173
|
-
const _a = col, { headerProps, title } = _a, rest = __objRest(_a, ["headerProps", "title"]);
|
|
174
|
-
|
|
173
|
+
const _a = col, { headerProps, title, onHeaderCell, onCell } = _a, rest = __objRest(_a, ["headerProps", "title", "onHeaderCell", "onCell"]);
|
|
174
|
+
const resolvedOnHeaderCell = (column) => {
|
|
175
|
+
var _a2;
|
|
176
|
+
const base = (_a2 = onHeaderCell == null ? void 0 : onHeaderCell(column)) != null ? _a2 : {};
|
|
177
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
178
|
+
className: (0, import_clsx.default)(base.className, headerCellClassName)
|
|
179
|
+
});
|
|
180
|
+
};
|
|
181
|
+
const resolvedOnCell = (record, rowIndex) => {
|
|
182
|
+
var _a2;
|
|
183
|
+
const base = (_a2 = onCell == null ? void 0 : onCell(record, rowIndex)) != null ? _a2 : {};
|
|
184
|
+
return __spreadProps(__spreadValues({}, base), {
|
|
185
|
+
className: (0, import_clsx.default)(base.className, bodyCellClassName)
|
|
186
|
+
});
|
|
187
|
+
};
|
|
188
|
+
const processedTitle = headerProps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColumnHeader, __spreadValues({ label: title }, headerProps)) : title;
|
|
175
189
|
return __spreadProps(__spreadValues({}, rest), {
|
|
176
|
-
title:
|
|
190
|
+
title: processedTitle,
|
|
191
|
+
onHeaderCell: resolvedOnHeaderCell,
|
|
192
|
+
onCell: resolvedOnCell
|
|
177
193
|
});
|
|
178
194
|
});
|
|
179
195
|
}
|
|
@@ -199,7 +215,10 @@ function Table(props) {
|
|
|
199
215
|
emptyState,
|
|
200
216
|
hideHeader,
|
|
201
217
|
loadingIndicator,
|
|
202
|
-
style
|
|
218
|
+
style,
|
|
219
|
+
headerCellClassName,
|
|
220
|
+
bodyCellClassName,
|
|
221
|
+
rowClassName
|
|
203
222
|
} = _a, rest = __objRest(_a, [
|
|
204
223
|
"size",
|
|
205
224
|
"variant",
|
|
@@ -220,7 +239,10 @@ function Table(props) {
|
|
|
220
239
|
"emptyState",
|
|
221
240
|
"hideHeader",
|
|
222
241
|
"loadingIndicator",
|
|
223
|
-
"style"
|
|
242
|
+
"style",
|
|
243
|
+
"headerCellClassName",
|
|
244
|
+
"bodyCellClassName",
|
|
245
|
+
"rowClassName"
|
|
224
246
|
]);
|
|
225
247
|
const isChildVariant = isAccordion || isToolbar;
|
|
226
248
|
const resolvedPagination = buildPagination(pagination, {
|
|
@@ -230,12 +252,17 @@ function Table(props) {
|
|
|
230
252
|
onChange: onPaginationChange
|
|
231
253
|
});
|
|
232
254
|
const processedColumns = React.useMemo(
|
|
233
|
-
() => processColumns(columns),
|
|
234
|
-
|
|
235
|
-
[columns]
|
|
255
|
+
() => processColumns(columns, headerCellClassName, bodyCellClassName),
|
|
256
|
+
[columns, headerCellClassName, bodyCellClassName]
|
|
236
257
|
);
|
|
258
|
+
const resolvedRowSelection = React.useMemo(() => {
|
|
259
|
+
if (!rowSelection) return void 0;
|
|
260
|
+
return __spreadValues({
|
|
261
|
+
columnWidth: 48
|
|
262
|
+
}, rowSelection);
|
|
263
|
+
}, [rowSelection]);
|
|
237
264
|
const resolvedOnRow = React.useMemo(() => {
|
|
238
|
-
const onChange =
|
|
265
|
+
const onChange = resolvedRowSelection == null ? void 0 : resolvedRowSelection.onChange;
|
|
239
266
|
if (variant !== "selectable" || !onChange) return onRow;
|
|
240
267
|
return (record, index) => {
|
|
241
268
|
var _a2;
|
|
@@ -247,7 +274,7 @@ function Table(props) {
|
|
|
247
274
|
var _a3, _b2;
|
|
248
275
|
(_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
|
|
249
276
|
const key = getKey(record, index);
|
|
250
|
-
const current2 = (_b2 =
|
|
277
|
+
const current2 = (_b2 = resolvedRowSelection.selectedRowKeys) != null ? _b2 : [];
|
|
251
278
|
const isSelected = current2.some((k) => k === key);
|
|
252
279
|
const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
|
|
253
280
|
const newRows = (dataSource != null ? dataSource : []).filter(
|
|
@@ -257,15 +284,19 @@ function Table(props) {
|
|
|
257
284
|
}
|
|
258
285
|
});
|
|
259
286
|
};
|
|
260
|
-
}, [variant,
|
|
287
|
+
}, [variant, resolvedRowSelection, rowKey, onRow, dataSource]);
|
|
261
288
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
262
289
|
"div",
|
|
263
290
|
{
|
|
264
291
|
className: (0, import_clsx.default)(
|
|
265
292
|
Table_module_default.tableWrapper,
|
|
266
293
|
Table_module_default.showHoverEffect,
|
|
267
|
-
{
|
|
268
|
-
|
|
294
|
+
{
|
|
295
|
+
[Table_module_default.isAccordion]: isAccordion,
|
|
296
|
+
[Table_module_default.isToolbar]: isToolbar,
|
|
297
|
+
[Table_module_default.hasCustomHeaderCell]: !!headerCellClassName,
|
|
298
|
+
[Table_module_default.hasCustomBodyCell]: !!bodyCellClassName
|
|
299
|
+
},
|
|
269
300
|
className
|
|
270
301
|
),
|
|
271
302
|
style,
|
|
@@ -277,7 +308,7 @@ function Table(props) {
|
|
|
277
308
|
size,
|
|
278
309
|
pagination: resolvedPagination,
|
|
279
310
|
columns: processedColumns,
|
|
280
|
-
rowSelection,
|
|
311
|
+
rowSelection: resolvedRowSelection,
|
|
281
312
|
rowKey,
|
|
282
313
|
onRow: resolvedOnRow,
|
|
283
314
|
dataSource,
|
|
@@ -287,12 +318,15 @@ function Table(props) {
|
|
|
287
318
|
}
|
|
288
319
|
}, rest), {
|
|
289
320
|
loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
|
|
290
|
-
rowClassName: (
|
|
321
|
+
rowClassName: (record, index) => {
|
|
291
322
|
var _a2;
|
|
292
|
-
return (0, import_clsx.default)(
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
323
|
+
return (0, import_clsx.default)(
|
|
324
|
+
{
|
|
325
|
+
[Table_module_default.firstRow]: index === 0,
|
|
326
|
+
[Table_module_default.lastRow]: index === ((_a2 = dataSource == null ? void 0 : dataSource.length) != null ? _a2 : 0) - 1
|
|
327
|
+
},
|
|
328
|
+
typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName
|
|
329
|
+
);
|
|
296
330
|
}
|
|
297
331
|
})
|
|
298
332
|
)
|