@versini/ui-datagrid 0.4.3 → 0.4.5
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.d.ts +1 -1
- package/dist/DataGrid/DataGrid.js +10 -12
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/DataGridTypes.d.ts +5 -8
- 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 +1 -1
- package/dist/DataGridBody/getBodyClass.js +1 -1
- 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 +1 -1
- 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 +1 -1
- package/dist/DataGridFooter/index.js +1 -1
- package/dist/DataGridHeader/DataGridHeader.js +1 -1
- package/dist/DataGridHeader/index.js +1 -1
- package/dist/DataGridInfinite/DataGridInfiniteBody.js +3 -4
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridRow/DataGridRow.js +2 -3
- 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 +10 -25
- package/dist/utilities/classes.js +27 -74
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { DataGridProps } from "./DataGridTypes";
|
|
2
|
-
export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight,
|
|
2
|
+
export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, loading, columns, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -27,7 +27,7 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
27
27
|
|
|
28
28
|
/* =============================================================================
|
|
29
29
|
* DataGrid (main component)
|
|
30
|
-
* ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight,
|
|
30
|
+
* ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, ...rest })=>{
|
|
31
31
|
/**
|
|
32
32
|
* Track registered header/footer components via context registration. Uses
|
|
33
33
|
* counter-based tracking to properly handle multiple instances. Components
|
|
@@ -75,7 +75,7 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
75
75
|
wrapperClassName,
|
|
76
76
|
stickyHeader: effectiveStickyHeader,
|
|
77
77
|
stickyFooter: effectiveStickyFooter,
|
|
78
|
-
|
|
78
|
+
loading: Boolean(loading),
|
|
79
79
|
hasColumns: Boolean(columns)
|
|
80
80
|
}), [
|
|
81
81
|
mode,
|
|
@@ -83,7 +83,7 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
83
83
|
wrapperClassName,
|
|
84
84
|
effectiveStickyHeader,
|
|
85
85
|
effectiveStickyFooter,
|
|
86
|
-
|
|
86
|
+
loading,
|
|
87
87
|
columns
|
|
88
88
|
]);
|
|
89
89
|
const contextValue = useMemo(()=>({
|
|
@@ -146,26 +146,24 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
146
146
|
...rest,
|
|
147
147
|
children: children
|
|
148
148
|
});
|
|
149
|
+
const loadingText = typeof loading === "string" ? loading : loading ? "Loading..." : null;
|
|
149
150
|
return /*#__PURE__*/ jsx(DataGridContext.Provider, {
|
|
150
151
|
value: contextValue,
|
|
151
152
|
children: /*#__PURE__*/ jsxs("div", {
|
|
152
153
|
className: classes.inner,
|
|
153
154
|
children: [
|
|
154
|
-
|
|
155
|
+
loading && /*#__PURE__*/ jsxs(Fragment, {
|
|
155
156
|
children: [
|
|
156
157
|
/*#__PURE__*/ jsx("div", {
|
|
157
158
|
className: classes.overlay,
|
|
158
159
|
"aria-hidden": "true"
|
|
159
160
|
}),
|
|
160
161
|
/*#__PURE__*/ jsx("div", {
|
|
161
|
-
className: classes.
|
|
162
|
-
children: /*#__PURE__*/ jsx("
|
|
163
|
-
className: classes.
|
|
162
|
+
className: classes.loadingWrapper,
|
|
163
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
164
|
+
className: classes.loadingText,
|
|
164
165
|
role: "status",
|
|
165
|
-
children:
|
|
166
|
-
className: "sr-only",
|
|
167
|
-
children: "Loading..."
|
|
168
|
-
})
|
|
166
|
+
children: loadingText
|
|
169
167
|
})
|
|
170
168
|
})
|
|
171
169
|
]
|
|
@@ -25,12 +25,14 @@ export type DataGridProps = {
|
|
|
25
25
|
*/
|
|
26
26
|
compact?: boolean;
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* When set, a frosty overlay will be placed above the data grid, blocking all
|
|
29
29
|
* interactions (sorting, scrolling, etc.). The content remains visible but
|
|
30
|
-
* slightly blurred with a
|
|
30
|
+
* slightly blurred with a loading message.
|
|
31
|
+
* - If `true`, displays "Loading..."
|
|
32
|
+
* - If a string, displays that string as the loading message
|
|
31
33
|
* @default false
|
|
32
34
|
*/
|
|
33
|
-
|
|
35
|
+
loading?: boolean | string;
|
|
34
36
|
/**
|
|
35
37
|
* The max height of the data grid. Required for sticky header/footer to work.
|
|
36
38
|
* Accepts any valid CSS max-height value.
|
|
@@ -266,11 +268,6 @@ export type DataGridContextValue = {
|
|
|
266
268
|
* sticky header/footer columns with body columns.
|
|
267
269
|
*/
|
|
268
270
|
setMeasuredColumnWidths?: (widths: number[]) => void;
|
|
269
|
-
/**
|
|
270
|
-
* Row index for explicit odd/even styling. Used by DataGridInfiniteBody where
|
|
271
|
-
* CSS :nth-child selectors don't work due to wrapper elements.
|
|
272
|
-
*/
|
|
273
|
-
rowIndex?: number;
|
|
274
271
|
/**
|
|
275
272
|
* Whether this is the last row (for explicit border removal). Used by
|
|
276
273
|
* DataGridInfiniteBody where CSS :last-child doesn't work.
|
package/dist/DataGrid/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -250,8 +250,8 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
|
|
|
250
250
|
/**
|
|
251
251
|
* Render items with marker at the correct position. Each row gets a
|
|
252
252
|
* data-row-index attribute for scrollToIndex functionality. Each row is
|
|
253
|
-
* wrapped with a context provider that includes the
|
|
254
|
-
*
|
|
253
|
+
* wrapped with a context provider that includes the isLastRow flag for proper
|
|
254
|
+
* border removal (CSS :last-child doesn't work with wrappers).
|
|
255
255
|
*/ const renderedContent = useMemo(()=>{
|
|
256
256
|
const result = [];
|
|
257
257
|
// Determine the actual last visible index (for border styling).
|
|
@@ -278,7 +278,6 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
|
|
|
278
278
|
*/ result.push(/*#__PURE__*/ jsx(DataGridContext.Provider, {
|
|
279
279
|
value: {
|
|
280
280
|
...bodyContextBase,
|
|
281
|
-
rowIndex: i,
|
|
282
281
|
isLastRow
|
|
283
282
|
},
|
|
284
283
|
children: /*#__PURE__*/ jsx("div", {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -31,7 +31,7 @@ import { getRowClasses } from "../utilities/classes.js";
|
|
|
31
31
|
// Count the number of direct children to determine column count.
|
|
32
32
|
const columnCount = react.Children.count(children);
|
|
33
33
|
return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
|
|
34
|
-
children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths,
|
|
34
|
+
children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths, isLastRow })=>{
|
|
35
35
|
/**
|
|
36
36
|
* Determine if this row is inside a sticky header/footer. Sticky elements
|
|
37
37
|
* are absolutely positioned and outside the main grid flow, so they can't
|
|
@@ -89,7 +89,6 @@ import { getRowClasses } from "../utilities/classes.js";
|
|
|
89
89
|
mode,
|
|
90
90
|
className,
|
|
91
91
|
cellWrapper,
|
|
92
|
-
rowIndex,
|
|
93
92
|
isLastRow
|
|
94
93
|
}),
|
|
95
94
|
style: {
|
|
@@ -40,49 +40,35 @@ export declare const getBorderClasses: ({ mode }: {
|
|
|
40
40
|
export declare const getBlurClasses: ({ blurEffect }: {
|
|
41
41
|
blurEffect?: BlurEffect;
|
|
42
42
|
}) => string;
|
|
43
|
-
/**
|
|
44
|
-
* Shadow classes for sticky headers (downward glow).
|
|
45
|
-
*/
|
|
46
|
-
export declare const getStickyHeaderShadowClasses: ({ mode, stickyHeader, }: {
|
|
47
|
-
mode: ThemeMode;
|
|
48
|
-
stickyHeader?: boolean;
|
|
49
|
-
}) => string;
|
|
50
|
-
/**
|
|
51
|
-
* Shadow classes for sticky footers (upward glow).
|
|
52
|
-
*/
|
|
53
|
-
export declare const getStickyFooterShadowClasses: ({ mode, stickyFooter, }: {
|
|
54
|
-
mode: ThemeMode;
|
|
55
|
-
stickyFooter?: boolean;
|
|
56
|
-
}) => string;
|
|
57
43
|
/**
|
|
58
44
|
* ============================================================================
|
|
59
45
|
* Composite Class Generators (component-specific combinations)
|
|
60
46
|
* ============================================================================
|
|
61
47
|
*/
|
|
62
48
|
/**
|
|
63
|
-
*
|
|
49
|
+
* Loading text classes for loading state.
|
|
64
50
|
*/
|
|
65
|
-
export declare const
|
|
51
|
+
export declare const getLoadingTextClasses: ({ mode }: {
|
|
66
52
|
mode: ThemeMode;
|
|
67
53
|
}) => string;
|
|
68
54
|
/**
|
|
69
|
-
* Overlay classes for
|
|
55
|
+
* Overlay classes for loading state.
|
|
70
56
|
*/
|
|
71
57
|
export declare const getOverlayClasses: ({ mode }: {
|
|
72
58
|
mode: ThemeMode;
|
|
73
59
|
}) => {
|
|
74
60
|
inner: string;
|
|
75
61
|
overlay: string;
|
|
76
|
-
|
|
77
|
-
|
|
62
|
+
loadingWrapper: string;
|
|
63
|
+
loadingText: string;
|
|
78
64
|
};
|
|
79
65
|
/**
|
|
80
66
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
81
67
|
*/
|
|
82
|
-
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter,
|
|
68
|
+
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, hasColumns, }: {
|
|
83
69
|
mode: ThemeMode;
|
|
84
70
|
className?: string;
|
|
85
|
-
|
|
71
|
+
loading?: boolean;
|
|
86
72
|
hasColumns?: boolean;
|
|
87
73
|
stickyFooter?: boolean;
|
|
88
74
|
stickyHeader?: boolean;
|
|
@@ -90,8 +76,8 @@ export declare const getDataGridClasses: ({ mode, className, wrapperClassName, s
|
|
|
90
76
|
}) => {
|
|
91
77
|
overlay: string;
|
|
92
78
|
inner: string;
|
|
93
|
-
|
|
94
|
-
|
|
79
|
+
loadingWrapper: string;
|
|
80
|
+
loadingText: string;
|
|
95
81
|
wrapper: string;
|
|
96
82
|
scrollableContent: string;
|
|
97
83
|
grid: string;
|
|
@@ -128,11 +114,10 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
|
|
|
128
114
|
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
129
115
|
* :nth-child selectors, which don't work with wrapper elements.
|
|
130
116
|
*/
|
|
131
|
-
export declare const getRowClasses: ({ mode, className, cellWrapper,
|
|
117
|
+
export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, }: {
|
|
132
118
|
mode: ThemeMode;
|
|
133
119
|
cellWrapper?: CellWrapperType;
|
|
134
120
|
className?: string;
|
|
135
|
-
rowIndex?: number;
|
|
136
121
|
isLastRow?: boolean;
|
|
137
122
|
}) => string;
|
|
138
123
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -41,13 +41,13 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
41
41
|
*/ const getHeaderFooterBackgroundClasses = ({ mode, hasBlur, sticky })=>clsx({
|
|
42
42
|
// Semi-transparent for blur effect.
|
|
43
43
|
"bg-surface-darkest/50": hasBlur && sticky && (mode === "dark" || mode === "system"),
|
|
44
|
-
"bg-surface-
|
|
45
|
-
"dark: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
46
|
"dark:bg-surface-darkest/50": hasBlur && sticky && mode === "alt-system",
|
|
47
47
|
// Solid backgrounds.
|
|
48
48
|
"bg-surface-darkest": !hasBlur && (mode === "dark" || mode === "system"),
|
|
49
|
-
"bg-surface-light": !hasBlur && (mode === "light" || mode === "alt-system"),
|
|
50
|
-
"dark:bg-surface-light": !hasBlur && mode === "system",
|
|
49
|
+
"bg-surface-medium-light": !hasBlur && (mode === "light" || mode === "alt-system"),
|
|
50
|
+
"dark:bg-surface-medium-light": !hasBlur && mode === "system",
|
|
51
51
|
"dark:bg-surface-darkest": !hasBlur && mode === "alt-system"
|
|
52
52
|
});
|
|
53
53
|
/**
|
|
@@ -66,59 +66,43 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
66
66
|
"backdrop-blur-md": blurEffect === BlurEffects.MEDIUM,
|
|
67
67
|
"backdrop-blur-lg": blurEffect === BlurEffects.LARGE
|
|
68
68
|
});
|
|
69
|
-
/**
|
|
70
|
-
* Shadow classes for sticky headers (downward glow).
|
|
71
|
-
*/ const getStickyHeaderShadowClasses = ({ mode, stickyHeader })=>clsx({
|
|
72
|
-
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "dark",
|
|
73
|
-
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "system",
|
|
74
|
-
"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "light",
|
|
75
|
-
"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "alt-system"
|
|
76
|
-
});
|
|
77
|
-
/**
|
|
78
|
-
* Shadow classes for sticky footers (upward glow).
|
|
79
|
-
*/ const getStickyFooterShadowClasses = ({ mode, stickyFooter })=>clsx({
|
|
80
|
-
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "dark",
|
|
81
|
-
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "system",
|
|
82
|
-
"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "light",
|
|
83
|
-
"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "alt-system"
|
|
84
|
-
});
|
|
85
69
|
/**
|
|
86
70
|
* ============================================================================
|
|
87
71
|
* Composite Class Generators (component-specific combinations)
|
|
88
72
|
* ============================================================================
|
|
89
73
|
*/ /**
|
|
90
|
-
*
|
|
91
|
-
*/ const
|
|
74
|
+
* Loading text classes for loading state.
|
|
75
|
+
*/ const getLoadingTextClasses = ({ mode })=>clsx("text-lg font-medium", {
|
|
92
76
|
"text-copy-dark": mode === "light",
|
|
93
77
|
"text-copy-light": mode === "dark",
|
|
94
78
|
"text-copy-dark dark:text-copy-light": mode === "alt-system",
|
|
95
79
|
"text-copy-light dark:text-copy-dark": mode === "system"
|
|
96
80
|
});
|
|
97
81
|
/**
|
|
98
|
-
* Overlay classes for
|
|
82
|
+
* Overlay classes for loading state.
|
|
99
83
|
*/ const getOverlayClasses = ({ mode })=>({
|
|
100
84
|
inner: "relative",
|
|
101
85
|
overlay: clsx("absolute inset-0 z-20 cursor-not-allowed rounded-lg", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
|
|
102
|
-
|
|
103
|
-
|
|
86
|
+
loadingWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
|
|
87
|
+
loadingText: getLoadingTextClasses({
|
|
104
88
|
mode
|
|
105
89
|
})
|
|
106
90
|
});
|
|
107
91
|
/**
|
|
108
92
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
109
|
-
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter,
|
|
110
|
-
const overlayClasses =
|
|
93
|
+
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, hasColumns })=>{
|
|
94
|
+
const overlayClasses = loading ? getOverlayClasses({
|
|
111
95
|
mode
|
|
112
96
|
}) : null;
|
|
113
97
|
const hasSticky = stickyHeader || stickyFooter;
|
|
114
98
|
return {
|
|
115
99
|
overlay: overlayClasses?.overlay ?? "",
|
|
116
100
|
inner: overlayClasses?.inner ?? "",
|
|
117
|
-
|
|
118
|
-
|
|
101
|
+
loadingWrapper: overlayClasses?.loadingWrapper ?? "",
|
|
102
|
+
loadingText: overlayClasses?.loadingText ?? "",
|
|
119
103
|
wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
|
|
120
|
-
"overflow-x-auto": !hasSticky && !
|
|
121
|
-
"overflow-hidden flex flex-col": hasSticky ||
|
|
104
|
+
"overflow-x-auto": !hasSticky && !loading,
|
|
105
|
+
"overflow-hidden flex flex-col": hasSticky || loading
|
|
122
106
|
}, getSurfaceBackgroundClasses({
|
|
123
107
|
mode
|
|
124
108
|
}), getTextColorClasses({
|
|
@@ -143,7 +127,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
143
127
|
mode
|
|
144
128
|
}), className);
|
|
145
129
|
}
|
|
146
|
-
return clsx("flex flex-col", {
|
|
130
|
+
return clsx("flex flex-col", "border-b border-table-medium shadow-md", {
|
|
147
131
|
"absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader
|
|
148
132
|
}, getHeaderFooterBackgroundClasses({
|
|
149
133
|
mode,
|
|
@@ -167,12 +151,9 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
167
151
|
return clsx("contents", className);
|
|
168
152
|
}
|
|
169
153
|
const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
|
|
170
|
-
return clsx("flex flex-col", {
|
|
171
|
-
"absolute left-0 right-0 z-20 bottom-0 rounded-b-lg": stickyFooter
|
|
172
|
-
},
|
|
173
|
-
mode,
|
|
174
|
-
stickyFooter
|
|
175
|
-
}), getHeaderFooterBackgroundClasses({
|
|
154
|
+
return clsx("flex flex-col", "border-t border-table-medium", {
|
|
155
|
+
"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
|
+
}, getHeaderFooterBackgroundClasses({
|
|
176
157
|
mode,
|
|
177
158
|
hasBlur,
|
|
178
159
|
sticky: Boolean(stickyFooter)
|
|
@@ -184,53 +165,25 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
184
165
|
* Generates classes for DataGridRow. When rowIndex is provided (e.g., from
|
|
185
166
|
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
186
167
|
* :nth-child selectors, which don't work with wrapper elements.
|
|
187
|
-
*/ const getRowClasses = ({ mode, className, cellWrapper,
|
|
168
|
+
*/ const getRowClasses = ({ mode, className, cellWrapper, isLastRow })=>{
|
|
188
169
|
const layoutClass = "group grid items-center";
|
|
189
170
|
if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
|
|
190
171
|
return clsx(layoutClass, className);
|
|
191
172
|
}
|
|
192
|
-
/**
|
|
193
|
-
* When rowIndex is provided, use explicit classes instead of CSS :nth-child
|
|
194
|
-
* selectors. CSS :nth-child doesn't work correctly when rows are wrapped
|
|
195
|
-
* (e.g., in DataGridInfiniteBody).
|
|
196
|
-
*/ const hasExplicitIndex = rowIndex !== undefined;
|
|
197
|
-
const isOdd = hasExplicitIndex && rowIndex % 2 === 0; // 0-based index: 0,2,4 are visually "odd" rows (1st, 3rd, 5th)
|
|
198
|
-
const isEven = hasExplicitIndex && rowIndex % 2 === 1;
|
|
199
173
|
/**
|
|
200
174
|
* Border classes: use explicit border-0 for last row when isLastRow is
|
|
201
175
|
* provided, otherwise fall back to CSS :last-child selector.
|
|
202
|
-
*/ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent" // Last row: transparent border to maintain spacing
|
|
176
|
+
*/ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent dark:border-b-transparent" // Last row: transparent border to maintain spacing
|
|
203
177
|
: "border-b" : "border-b last:border-0"; // Fallback to CSS :last-child
|
|
204
|
-
return clsx(layoutClass, borderClasses, getBorderClasses({
|
|
178
|
+
return clsx(layoutClass, borderClasses, "hover:bg-surface-medium hover:text-copy-light", getBorderClasses({
|
|
205
179
|
mode
|
|
206
|
-
}),
|
|
207
|
-
// Explicit odd/even when rowIndex is provided.
|
|
208
|
-
"bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "dark",
|
|
209
|
-
"bg-table-dark-even": hasExplicitIndex && isEven && mode === "dark",
|
|
210
|
-
"bg-table-light-odd": hasExplicitIndex && isOdd && mode === "light",
|
|
211
|
-
"bg-table-light-even": hasExplicitIndex && isEven && mode === "light",
|
|
212
|
-
// System mode with explicit index.
|
|
213
|
-
"bg-table-dark-odd dark:bg-table-light-odd": hasExplicitIndex && isOdd && mode === "system",
|
|
214
|
-
"bg-table-dark-even dark:bg-table-light-even": hasExplicitIndex && isEven && mode === "system",
|
|
215
|
-
// Alt-system mode with explicit index.
|
|
216
|
-
"bg-table-light-odd dark:bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "alt-system",
|
|
217
|
-
"bg-table-light-even dark:bg-table-dark-even": hasExplicitIndex && isEven && mode === "alt-system",
|
|
218
|
-
// CSS :nth-child selectors (original behavior when rowIndex not provided).
|
|
219
|
-
"odd:bg-table-dark-odd even:bg-table-dark-even": !hasExplicitIndex && mode === "dark",
|
|
220
|
-
"odd:bg-table-light-odd even:bg-table-light-even": !hasExplicitIndex && mode === "light",
|
|
221
|
-
"odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": !hasExplicitIndex && mode === "system",
|
|
222
|
-
"odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": !hasExplicitIndex && mode === "alt-system",
|
|
223
|
-
// Hover effects (same for both modes).
|
|
224
|
-
"hover:bg-table-dark-hover": mode === "dark",
|
|
225
|
-
"hover:bg-table-light-hover": mode === "light",
|
|
226
|
-
"hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
|
|
227
|
-
"hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
|
|
228
|
-
}, className);
|
|
180
|
+
}), className);
|
|
229
181
|
};
|
|
230
182
|
/**
|
|
231
183
|
* Generates classes for DataGridCell.
|
|
232
184
|
*/ const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
|
|
233
185
|
const isHeader = cellWrapper === CellWrapper.HEADER;
|
|
186
|
+
const isFooter = cellWrapper === CellWrapper.FOOTER;
|
|
234
187
|
return clsx(// Base padding.
|
|
235
188
|
{
|
|
236
189
|
"px-2 py-1": compact,
|
|
@@ -242,7 +195,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
242
195
|
"text-right justify-end": align === "right"
|
|
243
196
|
}, // Header/footer specific styles.
|
|
244
197
|
{
|
|
245
|
-
"font-
|
|
198
|
+
"font-bold": isHeader || isFooter
|
|
246
199
|
}, // Active row indicator.
|
|
247
200
|
"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.
|
|
248
201
|
{
|
|
@@ -273,4 +226,4 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
273
226
|
return "gridcell";
|
|
274
227
|
};
|
|
275
228
|
|
|
276
|
-
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getOverlayClasses, getRowClasses,
|
|
229
|
+
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-datagrid",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"sideEffects": [
|
|
95
95
|
"**/*.css"
|
|
96
96
|
],
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "44e35ba9a6b530b1b6c7ef9113a0267890364311"
|
|
98
98
|
}
|