@jinaan/uikit 0.1.0 → 0.1.2
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/README.md +28 -0
- package/dist/data-table.d.ts +17 -1
- package/dist/data-table.d.ts.map +1 -1
- package/dist/index.js +857 -726
- package/dist/index.js.map +1 -1
- package/dist/input.d.ts +2 -0
- package/dist/input.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/data-table.tsx +194 -30
- package/src/input.tsx +32 -8
package/README.md
CHANGED
|
@@ -38,6 +38,34 @@ All primitives and `DataTable` are exported from the package root. Component
|
|
|
38
38
|
styles reference semantic tokens such as `bg-surface`, `text-fg`, and
|
|
39
39
|
`border-line`; override tokens on `:root` / `.dark` to theme.
|
|
40
40
|
|
|
41
|
+
### DataTable toolbar
|
|
42
|
+
|
|
43
|
+
`DataTable` renders the Clerk-style toolbar automatically: a 32px search field,
|
|
44
|
+
`Columns` visibility menu, `Filter` menu, filter chips, and a primary action slot.
|
|
45
|
+
Filters are functional and typed:
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
<DataTable
|
|
49
|
+
rows={users}
|
|
50
|
+
columns={columns}
|
|
51
|
+
getRowId={(u) => u.id}
|
|
52
|
+
search={{ value, onChange, keys: (u) => `${u.name} ${u.email}` }}
|
|
53
|
+
filters={[
|
|
54
|
+
{
|
|
55
|
+
id: "status",
|
|
56
|
+
label: "Status",
|
|
57
|
+
options: [
|
|
58
|
+
{ value: "active", label: "Active" },
|
|
59
|
+
{ value: "invited", label: "Invited" },
|
|
60
|
+
],
|
|
61
|
+
value: status,
|
|
62
|
+
onChange: setStatus,
|
|
63
|
+
match: (u, values) => values.includes(u.active ? "active" : "invited"),
|
|
64
|
+
},
|
|
65
|
+
]}
|
|
66
|
+
/>
|
|
67
|
+
```
|
|
68
|
+
|
|
41
69
|
## Live preview
|
|
42
70
|
|
|
43
71
|
```sh
|
package/dist/data-table.d.ts
CHANGED
|
@@ -12,6 +12,21 @@ export interface Column<T> {
|
|
|
12
12
|
className?: string;
|
|
13
13
|
/** Column width for the fixed layout (e.g. "18rem", "20%"). Defaults to auto. */
|
|
14
14
|
width?: string;
|
|
15
|
+
/** Required columns stay visible and cannot be hidden. */
|
|
16
|
+
required?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export interface DataTableFilterOption {
|
|
19
|
+
value: string;
|
|
20
|
+
label: string;
|
|
21
|
+
}
|
|
22
|
+
export interface DataTableFilter<T> {
|
|
23
|
+
id: string;
|
|
24
|
+
label: string;
|
|
25
|
+
options: DataTableFilterOption[];
|
|
26
|
+
value: string[];
|
|
27
|
+
onChange: (value: string[]) => void;
|
|
28
|
+
/** Return true when the row matches the selected filter values. */
|
|
29
|
+
match: (row: T, values: string[]) => boolean;
|
|
15
30
|
}
|
|
16
31
|
export interface BulkAction<T> {
|
|
17
32
|
label: string;
|
|
@@ -47,6 +62,7 @@ interface DataTableProps<T> {
|
|
|
47
62
|
placeholder?: string;
|
|
48
63
|
keys: (row: T) => string;
|
|
49
64
|
};
|
|
65
|
+
filters?: DataTableFilter<T>[];
|
|
50
66
|
toolbarStart?: ReactNode;
|
|
51
67
|
toolbarEnd?: ReactNode;
|
|
52
68
|
tabs?: TabDef[];
|
|
@@ -79,6 +95,6 @@ export declare function DataTableIdentity({ name, secondary, image, }: {
|
|
|
79
95
|
secondary?: ReactNode;
|
|
80
96
|
image?: string;
|
|
81
97
|
}): import("react").JSX.Element;
|
|
82
|
-
export declare function DataTable<T>({ rows, columns, getRowId, loading, error, empty, search, toolbarStart, toolbarEnd, tabs, activeTab, onTabChange, infoBanner, selectable, bulkActions, rowActions, onRowClick, defaultSort, pageSize: initialPageSize, pageSizeOptions, tone, headerAction, headerClassName, panelClassName, className, }: DataTableProps<T>): import("react").JSX.Element;
|
|
98
|
+
export declare function DataTable<T>({ rows, columns, getRowId, loading, error, empty, search, filters, toolbarStart, toolbarEnd, tabs, activeTab, onTabChange, infoBanner, selectable, bulkActions, rowActions, onRowClick, defaultSort, pageSize: initialPageSize, pageSizeOptions, tone, headerAction, headerClassName, panelClassName, className, }: DataTableProps<T>): import("react").JSX.Element;
|
|
83
99
|
export {};
|
|
84
100
|
//# sourceMappingURL=data-table.d.ts.map
|
package/dist/data-table.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.tsx"],"names":[],"mappings":"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"}
|