@cerberus-design/data-grid 1.0.0 → 1.1.0
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/components/data-grid.client.cjs +38 -37
- package/dist/components/data-grid.client.js +38 -37
- package/dist/components/grid.client.cjs +8 -8
- package/dist/components/grid.client.js +8 -8
- package/dist/const.cjs +13 -0
- package/dist/const.d.cts +2 -0
- package/dist/const.d.ts +2 -0
- package/dist/const.js +13 -1
- package/dist/panda.buildinfo.json +17 -11
- package/dist/store.cjs +15 -0
- package/dist/store.js +15 -0
- package/dist/types.d.cts +47 -0
- package/dist/types.d.ts +47 -0
- package/package.json +7 -7
|
@@ -18,7 +18,8 @@ function DataGridEl(props) {
|
|
|
18
18
|
columns: props.columns,
|
|
19
19
|
initialState: props.initialState,
|
|
20
20
|
rowSize: props.rowSize,
|
|
21
|
-
onPageChange: props.onPageChange
|
|
21
|
+
onPageChange: props.onPageChange,
|
|
22
|
+
theme: props.theme
|
|
22
23
|
}), []);
|
|
23
24
|
const [ready, setReady] = (0, _cerberus_design_signals.useSignal)(false);
|
|
24
25
|
const rootRef = (0, react.useRef)(null);
|
|
@@ -45,46 +46,46 @@ function DataGridEl(props) {
|
|
|
45
46
|
}, [store, setReady]);
|
|
46
47
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_context_client.DataGridProvider, {
|
|
47
48
|
createStore: () => store,
|
|
48
|
-
children: [
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
|
|
51
|
+
when: props.toolbar,
|
|
52
|
+
children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
|
|
53
|
+
"data-scope": require_const.SCOPE,
|
|
54
|
+
"data-part": require_const.PARTS.TOOLBAR,
|
|
55
|
+
w: "full",
|
|
56
|
+
children: props.toolbar
|
|
57
|
+
})
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Stack, {
|
|
51
60
|
"data-scope": require_const.SCOPE,
|
|
52
|
-
"data-part": require_const.PARTS.
|
|
61
|
+
"data-part": require_const.PARTS.ROOT,
|
|
62
|
+
dir: "columns",
|
|
63
|
+
maxH: "inherit",
|
|
64
|
+
minH: "inherit",
|
|
65
|
+
gap: "0",
|
|
66
|
+
h: "full",
|
|
67
|
+
bgColor: "page.surface.100/55",
|
|
68
|
+
border: "var(--border, 1px solid)",
|
|
69
|
+
borderColor: "var(--border-color, var(--cerberus-colors-page-border-initial))",
|
|
70
|
+
rounded: "var(--rounded, var(--cerberus-radii-lg))",
|
|
71
|
+
overflow: "hidden",
|
|
53
72
|
w: "full",
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Stack, {
|
|
57
|
-
"data-scope": require_const.SCOPE,
|
|
58
|
-
"data-part": require_const.PARTS.ROOT,
|
|
59
|
-
dir: "columns",
|
|
60
|
-
maxH: "inherit",
|
|
61
|
-
minH: "inherit",
|
|
62
|
-
gap: "0",
|
|
63
|
-
h: "full",
|
|
64
|
-
bgColor: "page.surface.100/55",
|
|
65
|
-
border: "1px solid",
|
|
66
|
-
borderColor: "page.border.initial",
|
|
67
|
-
rounded: "lg",
|
|
68
|
-
overflow: "hidden",
|
|
69
|
-
w: "full",
|
|
70
|
-
ref: rootRef,
|
|
71
|
-
children: [
|
|
72
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
|
|
73
|
+
ref: rootRef,
|
|
74
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
|
|
73
75
|
when: ready,
|
|
74
76
|
children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridViewport, {})
|
|
75
|
-
}),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
})
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
})]
|
|
77
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination_client.GridPagination, {})]
|
|
78
|
+
}),
|
|
79
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
|
|
80
|
+
when: props.footer,
|
|
81
|
+
children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
|
|
82
|
+
"data-scope": require_const.SCOPE,
|
|
83
|
+
"data-part": require_const.PARTS.FOOTER,
|
|
84
|
+
w: "full",
|
|
85
|
+
children: props.footer
|
|
86
|
+
})
|
|
87
|
+
})
|
|
88
|
+
]
|
|
88
89
|
});
|
|
89
90
|
}
|
|
90
91
|
var DataGrid = (0, react.memo)(DataGridEl);
|
|
@@ -18,7 +18,8 @@ function DataGridEl(props) {
|
|
|
18
18
|
columns: props.columns,
|
|
19
19
|
initialState: props.initialState,
|
|
20
20
|
rowSize: props.rowSize,
|
|
21
|
-
onPageChange: props.onPageChange
|
|
21
|
+
onPageChange: props.onPageChange,
|
|
22
|
+
theme: props.theme
|
|
22
23
|
}), []);
|
|
23
24
|
const [ready, setReady] = useSignal(false);
|
|
24
25
|
const rootRef = useRef(null);
|
|
@@ -45,46 +46,46 @@ function DataGridEl(props) {
|
|
|
45
46
|
}, [store, setReady]);
|
|
46
47
|
return /* @__PURE__ */ jsxs(DataGridProvider, {
|
|
47
48
|
createStore: () => store,
|
|
48
|
-
children: [
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsx(Show, {
|
|
51
|
+
when: props.toolbar,
|
|
52
|
+
children: () => /* @__PURE__ */ jsx(HStack, {
|
|
53
|
+
"data-scope": SCOPE,
|
|
54
|
+
"data-part": PARTS.TOOLBAR,
|
|
55
|
+
w: "full",
|
|
56
|
+
children: props.toolbar
|
|
57
|
+
})
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ jsxs(Stack, {
|
|
51
60
|
"data-scope": SCOPE,
|
|
52
|
-
"data-part": PARTS.
|
|
61
|
+
"data-part": PARTS.ROOT,
|
|
62
|
+
dir: "columns",
|
|
63
|
+
maxH: "inherit",
|
|
64
|
+
minH: "inherit",
|
|
65
|
+
gap: "0",
|
|
66
|
+
h: "full",
|
|
67
|
+
bgColor: "page.surface.100/55",
|
|
68
|
+
border: "var(--border, 1px solid)",
|
|
69
|
+
borderColor: "var(--border-color, var(--cerberus-colors-page-border-initial))",
|
|
70
|
+
rounded: "var(--rounded, var(--cerberus-radii-lg))",
|
|
71
|
+
overflow: "hidden",
|
|
53
72
|
w: "full",
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}), /* @__PURE__ */ jsxs(Stack, {
|
|
57
|
-
"data-scope": SCOPE,
|
|
58
|
-
"data-part": PARTS.ROOT,
|
|
59
|
-
dir: "columns",
|
|
60
|
-
maxH: "inherit",
|
|
61
|
-
minH: "inherit",
|
|
62
|
-
gap: "0",
|
|
63
|
-
h: "full",
|
|
64
|
-
bgColor: "page.surface.100/55",
|
|
65
|
-
border: "1px solid",
|
|
66
|
-
borderColor: "page.border.initial",
|
|
67
|
-
rounded: "lg",
|
|
68
|
-
overflow: "hidden",
|
|
69
|
-
w: "full",
|
|
70
|
-
ref: rootRef,
|
|
71
|
-
children: [
|
|
72
|
-
/* @__PURE__ */ jsx(Show, {
|
|
73
|
+
ref: rootRef,
|
|
74
|
+
children: [/* @__PURE__ */ jsx(Show, {
|
|
73
75
|
when: ready,
|
|
74
76
|
children: () => /* @__PURE__ */ jsx(GridViewport, {})
|
|
75
|
-
}),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
})
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
})]
|
|
77
|
+
}), /* @__PURE__ */ jsx(GridPagination, {})]
|
|
78
|
+
}),
|
|
79
|
+
/* @__PURE__ */ jsx(Show, {
|
|
80
|
+
when: props.footer,
|
|
81
|
+
children: () => /* @__PURE__ */ jsx(HStack, {
|
|
82
|
+
"data-scope": SCOPE,
|
|
83
|
+
"data-part": PARTS.FOOTER,
|
|
84
|
+
w: "full",
|
|
85
|
+
children: props.footer
|
|
86
|
+
})
|
|
87
|
+
})
|
|
88
|
+
]
|
|
88
89
|
});
|
|
89
90
|
}
|
|
90
91
|
var DataGrid = memo(DataGridEl);
|
|
@@ -109,9 +109,9 @@ var GridHeaderCell = (0, react.memo)(function GridHeaderCell(props) {
|
|
|
109
109
|
"data-state": pinnedState,
|
|
110
110
|
"data-col": column.id,
|
|
111
111
|
...pinnedAttr,
|
|
112
|
-
bgColor: "
|
|
112
|
+
bgColor: "var(--head-cell-bg-color)",
|
|
113
113
|
borderBottom: "1px solid",
|
|
114
|
-
borderBottomColor: "
|
|
114
|
+
borderBottomColor: "var(--head-cell-border-bottom-color)",
|
|
115
115
|
h: "full",
|
|
116
116
|
justify: "space-between",
|
|
117
117
|
pos: "relative",
|
|
@@ -192,7 +192,7 @@ var GridCell = (0, react.memo)(function GridCell(props) {
|
|
|
192
192
|
"data-state": pinnedState,
|
|
193
193
|
...pinnedAttr,
|
|
194
194
|
bgColor: "inherit",
|
|
195
|
-
borderColor: "
|
|
195
|
+
borderColor: "var(--grid-cell-border-color)",
|
|
196
196
|
h: "full",
|
|
197
197
|
pos: "relative",
|
|
198
198
|
px: "md",
|
|
@@ -204,11 +204,11 @@ var GridCell = (0, react.memo)(function GridCell(props) {
|
|
|
204
204
|
zIndex: 20
|
|
205
205
|
},
|
|
206
206
|
_leftPinned: {
|
|
207
|
-
borderRightColor: "
|
|
207
|
+
borderRightColor: "var(--grid-cell-pinned-border-color)",
|
|
208
208
|
borderRight: "1px solid"
|
|
209
209
|
},
|
|
210
210
|
_rightPinned: {
|
|
211
|
-
borderLeftColor: "
|
|
211
|
+
borderLeftColor: "var(--grid-cell-pinned-border-color)",
|
|
212
212
|
borderLeft: "1px solid"
|
|
213
213
|
},
|
|
214
214
|
style,
|
|
@@ -247,12 +247,12 @@ function GridRowContainer(props) {
|
|
|
247
247
|
"data-scope": require_const.SCOPE,
|
|
248
248
|
"data-part": require_const.PARTS.ROW,
|
|
249
249
|
"data-render": isVirtualized ? "virtualized" : "static",
|
|
250
|
-
bgColor: "
|
|
250
|
+
bgColor: "var(--row-bg-color)",
|
|
251
251
|
gap: "0",
|
|
252
252
|
h: "var(--row-height)",
|
|
253
253
|
w: "full",
|
|
254
|
-
_even: { bgColor: "
|
|
255
|
-
_hover: { bgColor: "
|
|
254
|
+
_even: { bgColor: "var(--row-even-bg-color)" },
|
|
255
|
+
_hover: { bgColor: "var(--row-hover-bg-color)" },
|
|
256
256
|
css: { "&:is([data-render=virtualized])": {
|
|
257
257
|
pos: "absolute",
|
|
258
258
|
left: 0
|
|
@@ -109,9 +109,9 @@ var GridHeaderCell = memo(function GridHeaderCell(props) {
|
|
|
109
109
|
"data-state": pinnedState,
|
|
110
110
|
"data-col": column.id,
|
|
111
111
|
...pinnedAttr,
|
|
112
|
-
bgColor: "
|
|
112
|
+
bgColor: "var(--head-cell-bg-color)",
|
|
113
113
|
borderBottom: "1px solid",
|
|
114
|
-
borderBottomColor: "
|
|
114
|
+
borderBottomColor: "var(--head-cell-border-bottom-color)",
|
|
115
115
|
h: "full",
|
|
116
116
|
justify: "space-between",
|
|
117
117
|
pos: "relative",
|
|
@@ -192,7 +192,7 @@ var GridCell = memo(function GridCell(props) {
|
|
|
192
192
|
"data-state": pinnedState,
|
|
193
193
|
...pinnedAttr,
|
|
194
194
|
bgColor: "inherit",
|
|
195
|
-
borderColor: "
|
|
195
|
+
borderColor: "var(--grid-cell-border-color)",
|
|
196
196
|
h: "full",
|
|
197
197
|
pos: "relative",
|
|
198
198
|
px: "md",
|
|
@@ -204,11 +204,11 @@ var GridCell = memo(function GridCell(props) {
|
|
|
204
204
|
zIndex: 20
|
|
205
205
|
},
|
|
206
206
|
_leftPinned: {
|
|
207
|
-
borderRightColor: "
|
|
207
|
+
borderRightColor: "var(--grid-cell-pinned-border-color)",
|
|
208
208
|
borderRight: "1px solid"
|
|
209
209
|
},
|
|
210
210
|
_rightPinned: {
|
|
211
|
-
borderLeftColor: "
|
|
211
|
+
borderLeftColor: "var(--grid-cell-pinned-border-color)",
|
|
212
212
|
borderLeft: "1px solid"
|
|
213
213
|
},
|
|
214
214
|
style,
|
|
@@ -247,12 +247,12 @@ function GridRowContainer(props) {
|
|
|
247
247
|
"data-scope": SCOPE,
|
|
248
248
|
"data-part": PARTS.ROW,
|
|
249
249
|
"data-render": isVirtualized ? "virtualized" : "static",
|
|
250
|
-
bgColor: "
|
|
250
|
+
bgColor: "var(--row-bg-color)",
|
|
251
251
|
gap: "0",
|
|
252
252
|
h: "var(--row-height)",
|
|
253
253
|
w: "full",
|
|
254
|
-
_even: { bgColor: "
|
|
255
|
-
_hover: { bgColor: "
|
|
254
|
+
_even: { bgColor: "var(--row-even-bg-color)" },
|
|
255
|
+
_hover: { bgColor: "var(--row-hover-bg-color)" },
|
|
256
256
|
css: { "&:is([data-render=virtualized])": {
|
|
257
257
|
pos: "absolute",
|
|
258
258
|
left: 0
|
package/dist/const.cjs
CHANGED
|
@@ -31,8 +31,21 @@ var ROW_SIZES = {
|
|
|
31
31
|
["xl"]: 64
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
+
var DEFAULT_THEME = {
|
|
35
|
+
border: "1px solid",
|
|
36
|
+
borderColor: "var(--cerberus-colors-page-border-initial)",
|
|
37
|
+
rounded: "var(--cerberus-radii-lg)",
|
|
38
|
+
rowBgColor: "var(--cerberus-colors-page-surface-100)",
|
|
39
|
+
rowEvenBgColor: "var(--cerberus-colors-page-surface-initial)",
|
|
40
|
+
rowHoverBgColor: "var(--cerberus-colors-page-surface-200)",
|
|
41
|
+
headCellBgColor: "var(--cerberus-colors-page-bg-initial)",
|
|
42
|
+
headCellBorderBottomColor: "var(--cerberus-colors-page-border-200)",
|
|
43
|
+
gridCellBorderColor: "var(--cerberus-colors-page-border-200)",
|
|
44
|
+
gridCellPinnedBorderColor: "var(--cerberus-colors-page-border-200)"
|
|
45
|
+
};
|
|
34
46
|
//#endregion
|
|
35
47
|
exports.DEFAULT_PAGE_SIZES = DEFAULT_PAGE_SIZES;
|
|
48
|
+
exports.DEFAULT_THEME = DEFAULT_THEME;
|
|
36
49
|
exports.PARTS = PARTS;
|
|
37
50
|
exports.ROW_SIZES = ROW_SIZES;
|
|
38
51
|
exports.SCOPE = SCOPE;
|
package/dist/const.d.cts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ThemeOptions } from './types';
|
|
1
2
|
export declare const SCOPE = "data-grid";
|
|
2
3
|
export declare const DEFAULT_COL_H = 40;
|
|
3
4
|
export declare const PARTS: {
|
|
@@ -25,4 +26,5 @@ type RowSizeData = {
|
|
|
25
26
|
results: Record<RowSize, number>;
|
|
26
27
|
};
|
|
27
28
|
export declare const ROW_SIZES: RowSizeData;
|
|
29
|
+
export declare const DEFAULT_THEME: ThemeOptions;
|
|
28
30
|
export {};
|
package/dist/const.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ThemeOptions } from './types';
|
|
1
2
|
export declare const SCOPE = "data-grid";
|
|
2
3
|
export declare const DEFAULT_COL_H = 40;
|
|
3
4
|
export declare const PARTS: {
|
|
@@ -25,4 +26,5 @@ type RowSizeData = {
|
|
|
25
26
|
results: Record<RowSize, number>;
|
|
26
27
|
};
|
|
27
28
|
export declare const ROW_SIZES: RowSizeData;
|
|
29
|
+
export declare const DEFAULT_THEME: ThemeOptions;
|
|
28
30
|
export {};
|
package/dist/const.js
CHANGED
|
@@ -31,5 +31,17 @@ var ROW_SIZES = {
|
|
|
31
31
|
["xl"]: 64
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
+
var DEFAULT_THEME = {
|
|
35
|
+
border: "1px solid",
|
|
36
|
+
borderColor: "var(--cerberus-colors-page-border-initial)",
|
|
37
|
+
rounded: "var(--cerberus-radii-lg)",
|
|
38
|
+
rowBgColor: "var(--cerberus-colors-page-surface-100)",
|
|
39
|
+
rowEvenBgColor: "var(--cerberus-colors-page-surface-initial)",
|
|
40
|
+
rowHoverBgColor: "var(--cerberus-colors-page-surface-200)",
|
|
41
|
+
headCellBgColor: "var(--cerberus-colors-page-bg-initial)",
|
|
42
|
+
headCellBorderBottomColor: "var(--cerberus-colors-page-border-200)",
|
|
43
|
+
gridCellBorderColor: "var(--cerberus-colors-page-border-200)",
|
|
44
|
+
gridCellPinnedBorderColor: "var(--cerberus-colors-page-border-200)"
|
|
45
|
+
};
|
|
34
46
|
//#endregion
|
|
35
|
-
export { DEFAULT_PAGE_SIZES, PARTS, ROW_SIZES, SCOPE };
|
|
47
|
+
export { DEFAULT_PAGE_SIZES, DEFAULT_THEME, PARTS, ROW_SIZES, SCOPE };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"schemaVersion": "1.9.
|
|
2
|
+
"schemaVersion": "1.9.1",
|
|
3
3
|
"styles": {
|
|
4
4
|
"atomic": [
|
|
5
5
|
"display]___[value:flex",
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"maxHeight]___[value:inherit",
|
|
92
92
|
"minHeight]___[value:inherit",
|
|
93
93
|
"backgroundColor]___[value:page.surface.100/55",
|
|
94
|
-
"border]___[value:1px solid",
|
|
95
|
-
"borderColor]___[value:page
|
|
96
|
-
"borderRadius]___[value:lg",
|
|
94
|
+
"border]___[value:var(--border, 1px solid)",
|
|
95
|
+
"borderColor]___[value:var(--border-color, var(--cerberus-colors-page-border-initial))",
|
|
96
|
+
"borderRadius]___[value:var(--rounded, var(--cerberus-radii-lg))",
|
|
97
97
|
"overflow]___[value:hidden",
|
|
98
98
|
"opacity]___[value:1",
|
|
99
99
|
"opacity]___[value:0]___[cond:md",
|
|
@@ -128,9 +128,9 @@
|
|
|
128
128
|
"backgroundGradient]___[value:to-l]___[cond:_rightPinned",
|
|
129
129
|
"gradientFrom]___[value:black/10]___[cond:_rightPinned",
|
|
130
130
|
"gradientTo]___[value:transparent]___[cond:_rightPinned",
|
|
131
|
-
"backgroundColor]___[value:
|
|
131
|
+
"backgroundColor]___[value:var(--head-cell-bg-color)",
|
|
132
132
|
"borderBottom]___[value:1px solid",
|
|
133
|
-
"borderBottomColor]___[value:
|
|
133
|
+
"borderBottomColor]___[value:var(--head-cell-border-bottom-color)",
|
|
134
134
|
"userSelect]___[value:none",
|
|
135
135
|
"textAlign]___[value:left",
|
|
136
136
|
"verticalAlign]___[value:middle",
|
|
@@ -146,15 +146,18 @@
|
|
|
146
146
|
"gap]___[value:sm",
|
|
147
147
|
"opacity]___[value:1]___[cond:_groupHover<___>& :is(button)",
|
|
148
148
|
"backgroundColor]___[value:inherit",
|
|
149
|
-
"borderColor]___[value:
|
|
149
|
+
"borderColor]___[value:var(--grid-cell-border-color)",
|
|
150
150
|
"zIndex]___[value:base",
|
|
151
|
+
"borderRightColor]___[value:var(--grid-cell-pinned-border-color)]___[cond:_leftPinned",
|
|
152
|
+
"borderLeftColor]___[value:var(--grid-cell-pinned-border-color)]___[cond:_rightPinned",
|
|
151
153
|
"position]___[value:absolute]___[cond:&:is([data-render=virtualized])",
|
|
152
154
|
"left]___[value:0]___[cond:&:is([data-render=virtualized])",
|
|
153
|
-
"backgroundColor]___[value:
|
|
154
|
-
"backgroundColor]___[value:
|
|
155
|
-
"backgroundColor]___[value:
|
|
155
|
+
"backgroundColor]___[value:var(--row-bg-color)",
|
|
156
|
+
"backgroundColor]___[value:var(--row-even-bg-color)]___[cond:_even",
|
|
157
|
+
"backgroundColor]___[value:var(--row-hover-bg-color)]___[cond:_hover",
|
|
156
158
|
"content]___[value:Sort Ascending",
|
|
157
159
|
"content]___[value:Sort Decending",
|
|
160
|
+
"backgroundColor]___[value:page.surface.100",
|
|
158
161
|
"borderTop]___[value:1px solid",
|
|
159
162
|
"borderTopColor]___[value:page.border.initial",
|
|
160
163
|
"color]___[value:page.text.200",
|
|
@@ -162,6 +165,7 @@
|
|
|
162
165
|
"--thickness]___[value:1px",
|
|
163
166
|
"height]___[value:1rem",
|
|
164
167
|
"borderInlineEndWidth]___[value:var(--thickness)",
|
|
168
|
+
"borderColor]___[value:page.border.200",
|
|
165
169
|
"flex]___[value:0 0 auto",
|
|
166
170
|
"height]___[value:4",
|
|
167
171
|
"colorPalette]___[value:page",
|
|
@@ -418,7 +422,9 @@
|
|
|
418
422
|
],
|
|
419
423
|
"tabs": [
|
|
420
424
|
"palette]___[value:action]___[recipe:tabs",
|
|
421
|
-
"
|
|
425
|
+
"indicatorPlacement]___[value:end]___[recipe:tabs",
|
|
426
|
+
"palette]___[value:secondaryAction]___[recipe:tabs",
|
|
427
|
+
"indicatorPlacement]___[value:start]___[recipe:tabs"
|
|
422
428
|
],
|
|
423
429
|
"toggle": [
|
|
424
430
|
"size]___[value:sm]___[recipe:toggle",
|
package/dist/store.cjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
const require_const = require("./const.cjs");
|
|
2
3
|
const require_utils = require("./utils.cjs");
|
|
3
4
|
let _cerberus_design_signals = require("@cerberus-design/signals");
|
|
4
5
|
//#region src/store.ts
|
|
@@ -157,6 +158,20 @@ function createGridStore(options) {
|
|
|
157
158
|
}
|
|
158
159
|
vars["--total-grid-width"] = `${totalW}px`;
|
|
159
160
|
vars["--row-height"] = `${rowSize()}px`;
|
|
161
|
+
const theme = {
|
|
162
|
+
...require_const.DEFAULT_THEME,
|
|
163
|
+
...options.theme
|
|
164
|
+
};
|
|
165
|
+
vars["--border"] = theme.border;
|
|
166
|
+
vars["--border-color"] = theme.borderColor;
|
|
167
|
+
vars["--rounded"] = theme.rounded;
|
|
168
|
+
vars["--row-bg-color"] = theme.rowBgColor;
|
|
169
|
+
vars["--row-even-bg-color"] = theme.rowEvenBgColor;
|
|
170
|
+
vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
|
|
171
|
+
vars["--head-cell-bg-color"] = theme.headCellBgColor;
|
|
172
|
+
vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
|
|
173
|
+
vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
|
|
174
|
+
vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
|
|
160
175
|
return vars;
|
|
161
176
|
}),
|
|
162
177
|
rowCount,
|
package/dist/store.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { DEFAULT_THEME } from "./const.js";
|
|
2
3
|
import { determineInitialCount, determinePageIndex, determinePageRange, determinePageSize, determineRowHeight } from "./utils.js";
|
|
3
4
|
import { batch, createComputed, createSignal } from "@cerberus-design/signals";
|
|
4
5
|
//#region src/store.ts
|
|
@@ -157,6 +158,20 @@ function createGridStore(options) {
|
|
|
157
158
|
}
|
|
158
159
|
vars["--total-grid-width"] = `${totalW}px`;
|
|
159
160
|
vars["--row-height"] = `${rowSize()}px`;
|
|
161
|
+
const theme = {
|
|
162
|
+
...DEFAULT_THEME,
|
|
163
|
+
...options.theme
|
|
164
|
+
};
|
|
165
|
+
vars["--border"] = theme.border;
|
|
166
|
+
vars["--border-color"] = theme.borderColor;
|
|
167
|
+
vars["--rounded"] = theme.rounded;
|
|
168
|
+
vars["--row-bg-color"] = theme.rowBgColor;
|
|
169
|
+
vars["--row-even-bg-color"] = theme.rowEvenBgColor;
|
|
170
|
+
vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
|
|
171
|
+
vars["--head-cell-bg-color"] = theme.headCellBgColor;
|
|
172
|
+
vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
|
|
173
|
+
vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
|
|
174
|
+
vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
|
|
160
175
|
return vars;
|
|
161
176
|
}),
|
|
162
177
|
rowCount,
|
package/dist/types.d.cts
CHANGED
|
@@ -36,6 +36,10 @@ export interface GridOptions<TData> {
|
|
|
36
36
|
* **default**: 'md'.
|
|
37
37
|
*/
|
|
38
38
|
rowSize?: RowSizeOptions;
|
|
39
|
+
/**
|
|
40
|
+
* The customizable colors for the Data Grid.
|
|
41
|
+
*/
|
|
42
|
+
theme?: ThemeOptions;
|
|
39
43
|
}
|
|
40
44
|
export type ColumnDef<TData, TKey extends keyof TData = keyof TData> = {
|
|
41
45
|
id: string;
|
|
@@ -196,3 +200,46 @@ export type AccessorFn<TData> = (row: TData) => ReactNode;
|
|
|
196
200
|
export type Comparator<TValue> = (a: TValue, b: TValue) => number;
|
|
197
201
|
export type SortDirection = 'asc' | 'desc' | null;
|
|
198
202
|
export type PinnedState = 'left' | 'right' | undefined | boolean;
|
|
203
|
+
export type ThemeOptions = {
|
|
204
|
+
/**
|
|
205
|
+
* The external border of the Data Grid container.
|
|
206
|
+
* The default is `page.border.initial`.
|
|
207
|
+
*/
|
|
208
|
+
borderColor?: string;
|
|
209
|
+
/**
|
|
210
|
+
* The border width and style of the Data Grid component. Default is `1px solid`.
|
|
211
|
+
*/
|
|
212
|
+
border?: string;
|
|
213
|
+
/**
|
|
214
|
+
* The border radius of the Data Grid component. Default is `lg`.
|
|
215
|
+
*/
|
|
216
|
+
rounded?: string;
|
|
217
|
+
/**
|
|
218
|
+
* The background color of the row. Default is `page.surface.100`.
|
|
219
|
+
*/
|
|
220
|
+
rowBgColor?: string;
|
|
221
|
+
/**
|
|
222
|
+
* The background color of the row on hover. Default is `page.surface.200`.
|
|
223
|
+
*/
|
|
224
|
+
rowHoverBgColor?: string;
|
|
225
|
+
/**
|
|
226
|
+
* The background color of the even rows. Default is `page.surface.initial`.
|
|
227
|
+
*/
|
|
228
|
+
rowEvenBgColor?: string;
|
|
229
|
+
/**
|
|
230
|
+
* The background color of the head cell. Default is `page.bg.initial`.
|
|
231
|
+
*/
|
|
232
|
+
headCellBgColor?: string;
|
|
233
|
+
/**
|
|
234
|
+
* The border color for the bottom border of the head cell. Default is `page.border.200`.
|
|
235
|
+
*/
|
|
236
|
+
headCellBorderBottomColor?: string;
|
|
237
|
+
/**
|
|
238
|
+
* The border color of the grid cell. Default is `page.border.200`.
|
|
239
|
+
*/
|
|
240
|
+
gridCellBorderColor?: string;
|
|
241
|
+
/**
|
|
242
|
+
* The border color of the pinned grid cell. Default is `page.border.200`.
|
|
243
|
+
*/
|
|
244
|
+
gridCellPinnedBorderColor?: string;
|
|
245
|
+
};
|
package/dist/types.d.ts
CHANGED
|
@@ -36,6 +36,10 @@ export interface GridOptions<TData> {
|
|
|
36
36
|
* **default**: 'md'.
|
|
37
37
|
*/
|
|
38
38
|
rowSize?: RowSizeOptions;
|
|
39
|
+
/**
|
|
40
|
+
* The customizable colors for the Data Grid.
|
|
41
|
+
*/
|
|
42
|
+
theme?: ThemeOptions;
|
|
39
43
|
}
|
|
40
44
|
export type ColumnDef<TData, TKey extends keyof TData = keyof TData> = {
|
|
41
45
|
id: string;
|
|
@@ -196,3 +200,46 @@ export type AccessorFn<TData> = (row: TData) => ReactNode;
|
|
|
196
200
|
export type Comparator<TValue> = (a: TValue, b: TValue) => number;
|
|
197
201
|
export type SortDirection = 'asc' | 'desc' | null;
|
|
198
202
|
export type PinnedState = 'left' | 'right' | undefined | boolean;
|
|
203
|
+
export type ThemeOptions = {
|
|
204
|
+
/**
|
|
205
|
+
* The external border of the Data Grid container.
|
|
206
|
+
* The default is `page.border.initial`.
|
|
207
|
+
*/
|
|
208
|
+
borderColor?: string;
|
|
209
|
+
/**
|
|
210
|
+
* The border width and style of the Data Grid component. Default is `1px solid`.
|
|
211
|
+
*/
|
|
212
|
+
border?: string;
|
|
213
|
+
/**
|
|
214
|
+
* The border radius of the Data Grid component. Default is `lg`.
|
|
215
|
+
*/
|
|
216
|
+
rounded?: string;
|
|
217
|
+
/**
|
|
218
|
+
* The background color of the row. Default is `page.surface.100`.
|
|
219
|
+
*/
|
|
220
|
+
rowBgColor?: string;
|
|
221
|
+
/**
|
|
222
|
+
* The background color of the row on hover. Default is `page.surface.200`.
|
|
223
|
+
*/
|
|
224
|
+
rowHoverBgColor?: string;
|
|
225
|
+
/**
|
|
226
|
+
* The background color of the even rows. Default is `page.surface.initial`.
|
|
227
|
+
*/
|
|
228
|
+
rowEvenBgColor?: string;
|
|
229
|
+
/**
|
|
230
|
+
* The background color of the head cell. Default is `page.bg.initial`.
|
|
231
|
+
*/
|
|
232
|
+
headCellBgColor?: string;
|
|
233
|
+
/**
|
|
234
|
+
* The border color for the bottom border of the head cell. Default is `page.border.200`.
|
|
235
|
+
*/
|
|
236
|
+
headCellBorderBottomColor?: string;
|
|
237
|
+
/**
|
|
238
|
+
* The border color of the grid cell. Default is `page.border.200`.
|
|
239
|
+
*/
|
|
240
|
+
gridCellBorderColor?: string;
|
|
241
|
+
/**
|
|
242
|
+
* The border color of the pinned grid cell. Default is `page.border.200`.
|
|
243
|
+
*/
|
|
244
|
+
gridCellPinnedBorderColor?: string;
|
|
245
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cerberus-design/data-grid",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "The Cerberus Design React DataGrid component.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"data grid",
|
|
@@ -27,20 +27,20 @@
|
|
|
27
27
|
"access": "public"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@cerberus-design/react": "1.
|
|
31
|
-
"@cerberus-design/signals": "1.
|
|
30
|
+
"@cerberus-design/react": "1.1.0",
|
|
31
|
+
"@cerberus-design/signals": "1.1.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@pandacss/dev": "^1.9.
|
|
34
|
+
"@pandacss/dev": "^1.9.1",
|
|
35
35
|
"@types/react": "^19.2.14",
|
|
36
36
|
"@types/react-dom": "^19.2.3",
|
|
37
|
-
"@vitejs/plugin-react": "^
|
|
37
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
38
38
|
"globby": "^16.1.1",
|
|
39
39
|
"react": "^19.2.4",
|
|
40
40
|
"react-dom": "^19.2.4",
|
|
41
|
-
"vite": "^8.0.
|
|
41
|
+
"vite": "^8.0.2",
|
|
42
42
|
"vite-plugin-dts": "^4.5.4",
|
|
43
|
-
"@cerberus/panda-preset": "1.
|
|
43
|
+
"@cerberus/panda-preset": "1.1.0",
|
|
44
44
|
"styled-system": "0.0.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|