@versini/ui-datagrid 0.4.6 → 0.5.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/DataGrid/DataGrid.js +3 -5
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/DataGridTypes.js +1 -1
- package/dist/DataGrid/index.js +1 -1
- package/dist/DataGridAnimated/AnimatedWrapper.js +1 -1
- package/dist/DataGridAnimated/index.js +1 -1
- package/dist/DataGridAnimated/useAnimatedHeight.js +1 -1
- package/dist/DataGridBody/DataGridBody.js +2 -2
- package/dist/DataGridBody/getBodyClass.d.ts +4 -5
- package/dist/DataGridBody/getBodyClass.js +6 -7
- package/dist/DataGridBody/index.js +1 -1
- package/dist/DataGridBody/useColumnMeasurement.js +1 -1
- package/dist/DataGridCell/DataGridCell.js +1 -1
- package/dist/DataGridCell/index.js +1 -1
- package/dist/DataGridCellSort/DataGridCellSort.js +3 -2
- package/dist/DataGridCellSort/index.js +1 -1
- package/dist/DataGridConstants/DataGridConstants.js +1 -1
- package/dist/DataGridConstants/index.js +1 -1
- package/dist/DataGridFooter/DataGridFooter.js +2 -4
- package/dist/DataGridFooter/index.js +1 -1
- package/dist/DataGridHeader/DataGridHeader.js +5 -5
- package/dist/DataGridHeader/index.js +1 -1
- package/dist/DataGridInfinite/DataGridInfiniteBody.js +2 -2
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridRow/DataGridRow.js +4 -2
- package/dist/DataGridRow/index.js +1 -1
- package/dist/DataGridSorting/index.js +1 -1
- package/dist/DataGridSorting/sortingUtils.js +1 -1
- package/dist/utilities/classes.d.ts +20 -11
- package/dist/utilities/classes.js +78 -40
- package/package.json +8 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -75,16 +75,14 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
75
75
|
wrapperClassName,
|
|
76
76
|
stickyHeader: effectiveStickyHeader,
|
|
77
77
|
stickyFooter: effectiveStickyFooter,
|
|
78
|
-
loading: Boolean(loading)
|
|
79
|
-
hasColumns: Boolean(columns)
|
|
78
|
+
loading: Boolean(loading)
|
|
80
79
|
}), [
|
|
81
80
|
mode,
|
|
82
81
|
className,
|
|
83
82
|
wrapperClassName,
|
|
84
83
|
effectiveStickyHeader,
|
|
85
84
|
effectiveStickyFooter,
|
|
86
|
-
loading
|
|
87
|
-
columns
|
|
85
|
+
loading
|
|
88
86
|
]);
|
|
89
87
|
const contextValue = useMemo(()=>({
|
|
90
88
|
mode,
|
package/dist/DataGrid/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -36,7 +36,7 @@ import { useColumnMeasurement } from "./useColumnMeasurement.js";
|
|
|
36
36
|
const bodyRef = useRef(null);
|
|
37
37
|
// Measure column widths for sticky header/footer sync.
|
|
38
38
|
useColumnMeasurement(bodyRef, children);
|
|
39
|
-
const bodyClass = getBodyClass(
|
|
39
|
+
const bodyClass = getBodyClass(className);
|
|
40
40
|
return /*#__PURE__*/ jsx(DataGridContext.Provider, {
|
|
41
41
|
value: {
|
|
42
42
|
...ctx,
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Get the CSS class for a DataGrid body element.
|
|
3
|
-
*
|
|
4
|
-
*
|
|
2
|
+
* Get the CSS class for a DataGrid body element. Uses display:contents so the
|
|
3
|
+
* body doesn't interfere with the grid flow. Rows will use subgrid when columns
|
|
4
|
+
* are provided, or define their own grid otherwise.
|
|
5
5
|
*
|
|
6
|
-
* @param hasColumns - Whether the DataGrid has columns defined
|
|
7
6
|
* @param className - Additional class name to merge
|
|
8
7
|
*
|
|
9
8
|
*/
|
|
10
|
-
export declare function getBodyClass(
|
|
9
|
+
export declare function getBodyClass(className?: string): string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -10,15 +10,14 @@ import clsx from "clsx";
|
|
|
10
10
|
;// CONCATENATED MODULE: ./src/DataGridBody/getBodyClass.ts
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
* Get the CSS class for a DataGrid body element.
|
|
14
|
-
*
|
|
15
|
-
*
|
|
13
|
+
* Get the CSS class for a DataGrid body element. Uses display:contents so the
|
|
14
|
+
* body doesn't interfere with the grid flow. Rows will use subgrid when columns
|
|
15
|
+
* are provided, or define their own grid otherwise.
|
|
16
16
|
*
|
|
17
|
-
* @param hasColumns - Whether the DataGrid has columns defined
|
|
18
17
|
* @param className - Additional class name to merge
|
|
19
18
|
*
|
|
20
|
-
*/ function getBodyClass(
|
|
21
|
-
return
|
|
19
|
+
*/ function getBodyClass(className) {
|
|
20
|
+
return clsx("contents", className);
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
export { getBodyClass };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -97,8 +97,9 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
97
97
|
onClick: handleSort,
|
|
98
98
|
noBorder: true,
|
|
99
99
|
focusMode: focusMode,
|
|
100
|
-
mode:
|
|
100
|
+
mode: "light",
|
|
101
101
|
labelRight: children,
|
|
102
|
+
noBackground: true,
|
|
102
103
|
children: getSortIcon()
|
|
103
104
|
}),
|
|
104
105
|
slotRight
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -42,7 +42,6 @@ DataGridFooter.displayName = "DataGridFooter";
|
|
|
42
42
|
* Inner component to handle the useEffect for registering footer. Separated to
|
|
43
43
|
* avoid hooks inside Consumer render prop.
|
|
44
44
|
*/ const DataGridFooterInner = ({ className, ctx, children, ...rest })=>{
|
|
45
|
-
const hasColumns = Boolean(ctx.columns);
|
|
46
45
|
const footerRef = useRef(null);
|
|
47
46
|
/**
|
|
48
47
|
* Register this footer with the parent DataGrid on mount. This enables sticky
|
|
@@ -88,8 +87,7 @@ DataGridFooter.displayName = "DataGridFooter";
|
|
|
88
87
|
className,
|
|
89
88
|
stickyFooter: ctx.stickyFooter,
|
|
90
89
|
mode: ctx.mode,
|
|
91
|
-
blurEffect: ctx.blurEffect
|
|
92
|
-
hasColumns
|
|
90
|
+
blurEffect: ctx.blurEffect
|
|
93
91
|
}),
|
|
94
92
|
...rest,
|
|
95
93
|
children: children
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -46,7 +46,6 @@ DataGridHeader.displayName = "DataGridHeader";
|
|
|
46
46
|
* Inner component to handle the useEffect for registering captionId and header.
|
|
47
47
|
* Separated to avoid hooks inside Consumer render prop.
|
|
48
48
|
*/ const DataGridHeaderInner = ({ caption, captionClassName, captionId, className, ctx, children, ...rest })=>{
|
|
49
|
-
const hasColumns = Boolean(ctx.columns);
|
|
50
49
|
const headerRef = useRef(null);
|
|
51
50
|
/**
|
|
52
51
|
* Register this header with the parent DataGrid on mount. This enables sticky
|
|
@@ -107,8 +106,7 @@ DataGridHeader.displayName = "DataGridHeader";
|
|
|
107
106
|
className,
|
|
108
107
|
stickyHeader: ctx.stickyHeader,
|
|
109
108
|
mode: ctx.mode,
|
|
110
|
-
blurEffect: ctx.blurEffect
|
|
111
|
-
hasColumns
|
|
109
|
+
blurEffect: ctx.blurEffect
|
|
112
110
|
}),
|
|
113
111
|
...rest,
|
|
114
112
|
children: [
|
|
@@ -116,7 +114,9 @@ DataGridHeader.displayName = "DataGridHeader";
|
|
|
116
114
|
id: captionId,
|
|
117
115
|
className: getCaptionClasses({
|
|
118
116
|
captionClassName,
|
|
119
|
-
|
|
117
|
+
mode: ctx.mode,
|
|
118
|
+
hasBlur: Boolean(ctx.blurEffect && ctx.blurEffect !== "none"),
|
|
119
|
+
stickyHeader: Boolean(ctx.stickyHeader)
|
|
120
120
|
}),
|
|
121
121
|
children: caption
|
|
122
122
|
}),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -313,7 +313,7 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
|
|
|
313
313
|
]);
|
|
314
314
|
// Measure column widths for sticky header/footer sync.
|
|
315
315
|
useColumnMeasurement(bodyRef, renderedContent);
|
|
316
|
-
const bodyClass = getBodyClass(
|
|
316
|
+
const bodyClass = getBodyClass(className);
|
|
317
317
|
return /*#__PURE__*/ jsx(DataGridContext.Provider, {
|
|
318
318
|
value: {
|
|
319
319
|
...ctx,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -89,7 +89,9 @@ import { getRowClasses } from "../utilities/classes.js";
|
|
|
89
89
|
mode,
|
|
90
90
|
className,
|
|
91
91
|
cellWrapper,
|
|
92
|
-
isLastRow
|
|
92
|
+
isLastRow,
|
|
93
|
+
stickyHeader,
|
|
94
|
+
stickyFooter
|
|
93
95
|
}),
|
|
94
96
|
style: {
|
|
95
97
|
...rowStyle,
|
|
@@ -11,6 +11,10 @@ import { type BlurEffect, type CellWrapperType, type ThemeMode } from "../DataGr
|
|
|
11
11
|
export declare const getTextColorClasses: ({ mode }: {
|
|
12
12
|
mode: ThemeMode;
|
|
13
13
|
}) => string;
|
|
14
|
+
export declare const getTextColorClassesForHeaderFooter: ({ mode, hasBlur, }: {
|
|
15
|
+
mode: ThemeMode;
|
|
16
|
+
hasBlur: boolean;
|
|
17
|
+
}) => string;
|
|
14
18
|
/**
|
|
15
19
|
* Surface background classes (main container backgrounds). Used by: DataGrid
|
|
16
20
|
* wrapper.
|
|
@@ -22,8 +26,7 @@ export declare const getSurfaceBackgroundClasses: ({ mode }: {
|
|
|
22
26
|
* Header/footer background classes (with optional blur transparency). Used by:
|
|
23
27
|
* DataGridHeader, DataGridFooter.
|
|
24
28
|
*/
|
|
25
|
-
export declare const getHeaderFooterBackgroundClasses: ({
|
|
26
|
-
mode: ThemeMode;
|
|
29
|
+
export declare const getHeaderFooterBackgroundClasses: ({ hasBlur, sticky, }: {
|
|
27
30
|
hasBlur: boolean;
|
|
28
31
|
sticky: boolean;
|
|
29
32
|
}) => string;
|
|
@@ -65,11 +68,10 @@ export declare const getOverlayClasses: ({ mode }: {
|
|
|
65
68
|
/**
|
|
66
69
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
67
70
|
*/
|
|
68
|
-
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading,
|
|
71
|
+
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, }: {
|
|
69
72
|
mode: ThemeMode;
|
|
70
73
|
className?: string;
|
|
71
74
|
loading?: boolean;
|
|
72
|
-
hasColumns?: boolean;
|
|
73
75
|
stickyFooter?: boolean;
|
|
74
76
|
stickyHeader?: boolean;
|
|
75
77
|
wrapperClassName?: string;
|
|
@@ -85,28 +87,33 @@ export declare const getDataGridClasses: ({ mode, className, wrapperClassName, s
|
|
|
85
87
|
/**
|
|
86
88
|
* Generates classes for the DataGridHeader wrapper.
|
|
87
89
|
*/
|
|
88
|
-
export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect,
|
|
90
|
+
export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect, }: {
|
|
89
91
|
mode: ThemeMode;
|
|
90
92
|
blurEffect?: BlurEffect;
|
|
91
93
|
className?: string;
|
|
92
|
-
hasColumns?: boolean;
|
|
93
94
|
stickyHeader?: boolean;
|
|
94
95
|
}) => string;
|
|
95
96
|
/**
|
|
96
97
|
* Generates classes for the caption element inside DataGridHeader.
|
|
98
|
+
* Needs explicit styling since the parent may use `display: contents`
|
|
99
|
+
* when not sticky, which doesn't render a box and breaks CSS inheritance.
|
|
97
100
|
*/
|
|
98
|
-
export declare const getCaptionClasses: ({ captionClassName,
|
|
101
|
+
export declare const getCaptionClasses: ({ captionClassName, mode, hasBlur, stickyHeader, }: {
|
|
99
102
|
captionClassName?: string;
|
|
100
|
-
|
|
103
|
+
mode: ThemeMode;
|
|
104
|
+
hasBlur: boolean;
|
|
105
|
+
stickyHeader: boolean;
|
|
101
106
|
}) => string;
|
|
102
107
|
/**
|
|
103
108
|
* Generates classes for the DataGridFooter.
|
|
104
109
|
*/
|
|
105
|
-
|
|
110
|
+
/**
|
|
111
|
+
* Generates classes for the DataGridFooter.
|
|
112
|
+
*/
|
|
113
|
+
export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, }: {
|
|
106
114
|
mode: ThemeMode;
|
|
107
115
|
blurEffect?: BlurEffect;
|
|
108
116
|
className?: string;
|
|
109
|
-
hasColumns?: boolean;
|
|
110
117
|
stickyFooter?: boolean;
|
|
111
118
|
}) => string;
|
|
112
119
|
/**
|
|
@@ -114,11 +121,13 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
|
|
|
114
121
|
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
115
122
|
* :nth-child selectors, which don't work with wrapper elements.
|
|
116
123
|
*/
|
|
117
|
-
export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, }: {
|
|
124
|
+
export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter, }: {
|
|
118
125
|
mode: ThemeMode;
|
|
119
126
|
cellWrapper?: CellWrapperType;
|
|
120
127
|
className?: string;
|
|
121
128
|
isLastRow?: boolean;
|
|
129
|
+
stickyHeader?: boolean;
|
|
130
|
+
stickyFooter?: boolean;
|
|
122
131
|
}) => string;
|
|
123
132
|
/**
|
|
124
133
|
* Generates classes for DataGridCell.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.5.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -20,12 +20,21 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
20
20
|
*/ /**
|
|
21
21
|
* Text color classes based on theme mode. Used by: DataGrid wrapper, grid,
|
|
22
22
|
* spinner, header/footer copy.
|
|
23
|
-
*/ const getTextColorClasses = ({ mode })=>
|
|
23
|
+
*/ const getTextColorClasses = ({ mode })=>{
|
|
24
|
+
return clsx({
|
|
24
25
|
"text-copy-light": mode === "dark",
|
|
25
26
|
"text-copy-dark": mode === "light",
|
|
26
27
|
"text-copy-light dark:text-copy-dark": mode === "system",
|
|
27
28
|
"text-copy-dark dark:text-copy-light": mode === "alt-system"
|
|
28
29
|
});
|
|
30
|
+
};
|
|
31
|
+
const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>{
|
|
32
|
+
return clsx({
|
|
33
|
+
"text-copy-dark": mode === "dark" && !hasBlur || mode === "light",
|
|
34
|
+
"text-copy-light dark:text-copy-dark": mode === "system" && hasBlur,
|
|
35
|
+
"text-copy-dark dark:text-copy-dark": (mode === "system" || mode === "alt-system") && !hasBlur
|
|
36
|
+
});
|
|
37
|
+
};
|
|
29
38
|
/**
|
|
30
39
|
* Surface background classes (main container backgrounds). Used by: DataGrid
|
|
31
40
|
* wrapper.
|
|
@@ -38,18 +47,14 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
38
47
|
/**
|
|
39
48
|
* Header/footer background classes (with optional blur transparency). Used by:
|
|
40
49
|
* DataGridHeader, DataGridFooter.
|
|
41
|
-
*/ const getHeaderFooterBackgroundClasses = ({
|
|
50
|
+
*/ const getHeaderFooterBackgroundClasses = ({ hasBlur, sticky })=>{
|
|
51
|
+
return clsx({
|
|
42
52
|
// Semi-transparent for blur effect.
|
|
43
|
-
"bg-surface-
|
|
44
|
-
"bg-surface-medium/50": hasBlur && sticky && (mode === "light" || mode === "alt-system"),
|
|
45
|
-
"dark:bg-surface-medium/50": hasBlur && sticky && mode === "system",
|
|
46
|
-
"dark:bg-surface-darkest/50": hasBlur && sticky && mode === "alt-system",
|
|
53
|
+
"bg-surface-medium/50 dark:bg-surface-medium/50": hasBlur && sticky,
|
|
47
54
|
// Solid backgrounds.
|
|
48
|
-
"bg-surface-
|
|
49
|
-
"bg-surface-medium-light": !hasBlur && (mode === "light" || mode === "alt-system"),
|
|
50
|
-
"dark:bg-surface-medium-light": !hasBlur && mode === "system",
|
|
51
|
-
"dark:bg-surface-darkest": !hasBlur && mode === "alt-system"
|
|
55
|
+
"bg-surface-medium-light dark:bg-surface-medium-light": !hasBlur
|
|
52
56
|
});
|
|
57
|
+
};
|
|
53
58
|
/**
|
|
54
59
|
* Border color classes for rows. Used by: DataGridRow.
|
|
55
60
|
*/ const getBorderClasses = ({ mode })=>clsx({
|
|
@@ -90,7 +95,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
90
95
|
});
|
|
91
96
|
/**
|
|
92
97
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
93
|
-
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading
|
|
98
|
+
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading })=>{
|
|
94
99
|
const overlayClasses = loading ? getOverlayClasses({
|
|
95
100
|
mode
|
|
96
101
|
}) : null;
|
|
@@ -109,65 +114,98 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
109
114
|
mode
|
|
110
115
|
}), wrapperClassName),
|
|
111
116
|
scrollableContent: clsx("overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0"),
|
|
112
|
-
grid: clsx("my-0 w-full text-left text-sm
|
|
117
|
+
grid: clsx("my-0 w-full text-left text-sm grid", className, getTextColorClasses({
|
|
113
118
|
mode
|
|
114
119
|
}))
|
|
115
120
|
};
|
|
116
121
|
};
|
|
117
122
|
/**
|
|
118
123
|
* Generates classes for the DataGridHeader wrapper.
|
|
119
|
-
*/ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect
|
|
124
|
+
*/ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect })=>{
|
|
120
125
|
const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
|
|
121
|
-
if (
|
|
126
|
+
if (!stickyHeader) {
|
|
122
127
|
return clsx("contents", getHeaderFooterBackgroundClasses({
|
|
123
|
-
mode,
|
|
124
128
|
hasBlur,
|
|
125
|
-
sticky:
|
|
126
|
-
}),
|
|
127
|
-
mode
|
|
129
|
+
sticky: false
|
|
130
|
+
}), getTextColorClassesForHeaderFooter({
|
|
131
|
+
mode,
|
|
132
|
+
hasBlur
|
|
128
133
|
}), className);
|
|
129
134
|
}
|
|
130
|
-
return clsx("flex flex-col", "border-b border-table-medium shadow-md", {
|
|
131
|
-
"absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader
|
|
132
|
-
}, getHeaderFooterBackgroundClasses({
|
|
133
|
-
mode,
|
|
135
|
+
return clsx("flex flex-col", "border-b border-table-medium shadow-md", "absolute left-0 right-0 z-20 top-0 rounded-t-lg", getHeaderFooterBackgroundClasses({
|
|
134
136
|
hasBlur,
|
|
135
|
-
sticky:
|
|
136
|
-
}),
|
|
137
|
-
mode
|
|
137
|
+
sticky: true
|
|
138
|
+
}), getTextColorClassesForHeaderFooter({
|
|
139
|
+
mode,
|
|
140
|
+
hasBlur
|
|
138
141
|
}), stickyHeader && getBlurClasses({
|
|
139
142
|
blurEffect
|
|
140
143
|
}), className);
|
|
141
144
|
};
|
|
142
145
|
/**
|
|
143
146
|
* Generates classes for the caption element inside DataGridHeader.
|
|
144
|
-
|
|
145
|
-
|
|
147
|
+
* Needs explicit styling since the parent may use `display: contents`
|
|
148
|
+
* when not sticky, which doesn't render a box and breaks CSS inheritance.
|
|
149
|
+
*/ const getCaptionClasses = ({ captionClassName, mode, hasBlur, stickyHeader })=>{
|
|
150
|
+
/**
|
|
151
|
+
* When sticky, the header wrapper renders a box with background/text colors.
|
|
152
|
+
* When NOT sticky, the header uses `display: contents` so the caption needs
|
|
153
|
+
* its own background and text color styling.
|
|
154
|
+
*/ const needsOwnBackground = !stickyHeader;
|
|
155
|
+
return clsx("py-2 text-sm text-center font-bold col-span-full", getTextColorClassesForHeaderFooter({
|
|
156
|
+
mode,
|
|
157
|
+
hasBlur
|
|
158
|
+
}), needsOwnBackground && getHeaderFooterBackgroundClasses({
|
|
159
|
+
hasBlur,
|
|
160
|
+
sticky: false
|
|
161
|
+
}), captionClassName);
|
|
146
162
|
};
|
|
147
163
|
/**
|
|
148
164
|
* Generates classes for the DataGridFooter.
|
|
149
|
-
*/
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
}
|
|
165
|
+
*/ /**
|
|
166
|
+
* Generates classes for the DataGridFooter.
|
|
167
|
+
*/ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect })=>{
|
|
153
168
|
const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
|
|
169
|
+
if (!stickyFooter) {
|
|
170
|
+
return clsx("contents", getTextColorClassesForHeaderFooter({
|
|
171
|
+
mode,
|
|
172
|
+
hasBlur
|
|
173
|
+
}), className);
|
|
174
|
+
}
|
|
154
175
|
return clsx("flex flex-col", "border-t border-table-medium", {
|
|
155
176
|
"absolute left-0 right-0 z-20 bottom-0 rounded-b-lg shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]": stickyFooter
|
|
156
177
|
}, getHeaderFooterBackgroundClasses({
|
|
157
|
-
mode,
|
|
158
178
|
hasBlur,
|
|
159
179
|
sticky: Boolean(stickyFooter)
|
|
160
180
|
}), stickyFooter && getBlurClasses({
|
|
161
181
|
blurEffect
|
|
182
|
+
}), getTextColorClassesForHeaderFooter({
|
|
183
|
+
mode,
|
|
184
|
+
hasBlur
|
|
162
185
|
}), className);
|
|
163
186
|
};
|
|
164
187
|
/**
|
|
165
188
|
* Generates classes for DataGridRow. When rowIndex is provided (e.g., from
|
|
166
189
|
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
167
190
|
* :nth-child selectors, which don't work with wrapper elements.
|
|
168
|
-
*/ const getRowClasses = ({ mode, className, cellWrapper, isLastRow })=>{
|
|
191
|
+
*/ const getRowClasses = ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter })=>{
|
|
169
192
|
const layoutClass = "group grid items-center";
|
|
170
193
|
if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
|
|
194
|
+
/**
|
|
195
|
+
* When not sticky, the parent wrapper uses `display: contents` which
|
|
196
|
+
* doesn't render a box. In this case, we need to apply background and
|
|
197
|
+
* border styling directly to the row.
|
|
198
|
+
*/ const isHeader = cellWrapper === CellWrapper.HEADER;
|
|
199
|
+
const parentUsesContents = isHeader ? !stickyHeader : !stickyFooter;
|
|
200
|
+
if (parentUsesContents) {
|
|
201
|
+
return clsx(layoutClass, getHeaderFooterBackgroundClasses({
|
|
202
|
+
hasBlur: false,
|
|
203
|
+
sticky: false
|
|
204
|
+
}), {
|
|
205
|
+
"border-b border-table-medium shadow-md": isHeader,
|
|
206
|
+
"border-t border-table-medium": !isHeader
|
|
207
|
+
}, className);
|
|
208
|
+
}
|
|
171
209
|
return clsx(layoutClass, className);
|
|
172
210
|
}
|
|
173
211
|
/**
|
|
@@ -197,12 +235,12 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
197
235
|
{
|
|
198
236
|
"font-bold": isHeader || isFooter
|
|
199
237
|
}, // Active row indicator.
|
|
200
|
-
"first:group-data-
|
|
238
|
+
"first:group-data-active:relative", "first:group-data-active:before:absolute first:group-data-active:before:left-0 first:group-data-active:before:top-0 first:group-data-active:before:bottom-0 first:group-data-active:before:w-1", "first:group-data-active:self-stretch first:group-data-active:flex first:group-data-active:items-center", // Active indicator color based on theme mode.
|
|
201
239
|
{
|
|
202
|
-
"first:group-data-
|
|
203
|
-
"first:group-data-
|
|
204
|
-
"first:group-data-
|
|
205
|
-
"first:group-data-
|
|
240
|
+
"first:group-data-active:before:bg-table-active-dark": mode === "dark",
|
|
241
|
+
"first:group-data-active:before:bg-table-active-light": mode === "light",
|
|
242
|
+
"first:group-data-active:before:bg-table-active-dark dark:first:group-data-active:before:bg-table-active-light": mode === "system",
|
|
243
|
+
"first:group-data-active:before:bg-table-active-light dark:first:group-data-active:before:bg-table-active-dark": mode === "alt-system"
|
|
206
244
|
}, // Vertical borders.
|
|
207
245
|
{
|
|
208
246
|
"self-stretch flex items-center": borderLeft || borderRight,
|
|
@@ -226,4 +264,4 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
226
264
|
return "gridcell";
|
|
227
265
|
};
|
|
228
266
|
|
|
229
|
-
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses };
|
|
267
|
+
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses, getTextColorClassesForHeaderFooter };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-datagrid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"build:js": "rslib build",
|
|
68
68
|
"build:types": "echo 'Types now built with rslib'",
|
|
69
69
|
"build": "npm-run-all --serial clean build:check build:js",
|
|
70
|
-
"clean": "rimraf dist tmp coverage",
|
|
70
|
+
"clean": "rimraf dist tmp test-results playwright-report playwright/.cache coverage",
|
|
71
71
|
"dev:js": "rslib build --watch",
|
|
72
72
|
"dev:types": "echo 'Types now watched with rslib'",
|
|
73
73
|
"dev": "rslib build --watch",
|
|
@@ -77,6 +77,11 @@
|
|
|
77
77
|
"start": "static-server dist --port 5173",
|
|
78
78
|
"test:coverage:ui": "vitest --coverage --ui",
|
|
79
79
|
"test:coverage": "vitest run --coverage",
|
|
80
|
+
"test:update": "vitest run --update",
|
|
81
|
+
"test:visual": "playwright test -c playwright-ct.config.ts",
|
|
82
|
+
"test:visual:report": "playwright show-report playwright-report",
|
|
83
|
+
"test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
|
|
84
|
+
"test:visual:ui": "playwright test -c playwright-ct.config.ts --ui",
|
|
80
85
|
"test:watch": "vitest",
|
|
81
86
|
"test": "vitest run"
|
|
82
87
|
},
|
|
@@ -94,5 +99,5 @@
|
|
|
94
99
|
"sideEffects": [
|
|
95
100
|
"**/*.css"
|
|
96
101
|
],
|
|
97
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "174181a4429822aacdcce0ee955d6ad9a4b0deae"
|
|
98
103
|
}
|