@versini/ui-datagrid 0.7.0 → 0.8.1
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 +1 -1
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/DataGridTypes.d.ts +0 -5
- 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/ButtonSort.d.ts +8 -0
- package/dist/DataGridCellSort/ButtonSort.js +67 -0
- package/dist/DataGridCellSort/DataGridCellSort.d.ts +1 -1
- package/dist/DataGridCellSort/DataGridCellSort.js +12 -14
- 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 +1 -1
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridRow/DataGridRow.js +1 -1
- 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 +7 -29
- package/dist/utilities/classes.js +94 -141
- package/package.json +3 -3
|
@@ -194,11 +194,6 @@ export type DataGridCellSortProps = {
|
|
|
194
194
|
* CSS class to apply to the cell.
|
|
195
195
|
*/
|
|
196
196
|
className?: string;
|
|
197
|
-
/**
|
|
198
|
-
* The focus mode for the sort button.
|
|
199
|
-
* @default "alt-system"
|
|
200
|
-
*/
|
|
201
|
-
focusMode?: ThemeMode;
|
|
202
197
|
/**
|
|
203
198
|
* The theme mode for the sort button.
|
|
204
199
|
* @default "alt-system"
|
package/dist/DataGrid/index.js
CHANGED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ButtonSortTypes } from "@versini/ui-types";
|
|
2
|
+
import { type BlurEffect, type ThemeMode } from "../DataGridConstants";
|
|
3
|
+
type ButtonSortProps = Pick<ButtonSortTypes.Props, "active" | "className" | "onClick" | "labelRight" | "children">;
|
|
4
|
+
export declare const ButtonSort: ({ active, className, onClick, labelRight, children, blurEffect, mode, }: ButtonSortProps & {
|
|
5
|
+
mode: ThemeMode;
|
|
6
|
+
blurEffect?: BlurEffect;
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
@versini/ui-datagrid v0.8.1
|
|
3
|
+
© 2026 gizmette.com
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import clsx from "clsx";
|
|
8
|
+
import { BlurEffects } from "../DataGridConstants/index.js";
|
|
9
|
+
import { getTextColorClassesForHeaderFooter } from "../utilities/classes.js";
|
|
10
|
+
|
|
11
|
+
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
12
|
+
|
|
13
|
+
;// CONCATENATED MODULE: external "clsx"
|
|
14
|
+
|
|
15
|
+
;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
|
|
16
|
+
|
|
17
|
+
;// CONCATENATED MODULE: external "../utilities/classes.js"
|
|
18
|
+
|
|
19
|
+
;// CONCATENATED MODULE: ./src/DataGridCellSort/ButtonSort.tsx
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
const getActiveIndicatorClasses = (active)=>{
|
|
25
|
+
if (!active) {
|
|
26
|
+
return "";
|
|
27
|
+
}
|
|
28
|
+
return clsx("relative", "focus-within:static", "focus-within:after:border-transparent", "after:absolute", "after:content-['']", "after:border-b-2", "after:-bottom-1", "after:left-0", "after:right-0", // the small border at the bottom of the button when it is active (sorted)
|
|
29
|
+
"after:border-table-light");
|
|
30
|
+
};
|
|
31
|
+
const ButtonSort = ({ active = false, className, onClick, labelRight, children, blurEffect, mode })=>{
|
|
32
|
+
const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
|
|
33
|
+
const buttonClasses = clsx(// Base styles
|
|
34
|
+
"flex items-center cursor-pointer", // Size - small
|
|
35
|
+
"h-6 px-1 sm:px-2", // Font
|
|
36
|
+
"text-sm font-bold", // Radius - small
|
|
37
|
+
"rounded-xs", // Text color
|
|
38
|
+
getTextColorClassesForHeaderFooter({
|
|
39
|
+
mode,
|
|
40
|
+
hasBlur
|
|
41
|
+
}), // Focus styles
|
|
42
|
+
"focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-medium", // Hover styles
|
|
43
|
+
"hover:text-copy-light-hover", "hover:bg-action-darker-hover", // Active styles
|
|
44
|
+
"active:text-copy-medium-active", "active:bg-action-dark-active", // Custom className
|
|
45
|
+
className);
|
|
46
|
+
const wrapperClasses = getActiveIndicatorClasses(active);
|
|
47
|
+
return /*#__PURE__*/ jsx("div", {
|
|
48
|
+
className: wrapperClasses,
|
|
49
|
+
children: /*#__PURE__*/ jsxs("button", {
|
|
50
|
+
className: buttonClasses,
|
|
51
|
+
type: "button",
|
|
52
|
+
onClick: onClick,
|
|
53
|
+
children: [
|
|
54
|
+
/*#__PURE__*/ jsx("span", {
|
|
55
|
+
className: "text-copy-light",
|
|
56
|
+
children: children
|
|
57
|
+
}),
|
|
58
|
+
labelRight && /*#__PURE__*/ jsx("span", {
|
|
59
|
+
className: "pl-2",
|
|
60
|
+
children: labelRight
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
})
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export { ButtonSort };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { DataGridCellSortProps } from "../DataGrid/DataGridTypes";
|
|
2
|
-
export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName,
|
|
2
|
+
export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest }: DataGridCellSortProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.8.1
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { ButtonSort_private } from "@versini/ui-button/private";
|
|
8
7
|
import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
|
|
9
8
|
import clsx from "clsx";
|
|
10
9
|
import { DataGridContext } from "../DataGrid/DataGridContext.js";
|
|
11
10
|
import { getCellClasses } from "../utilities/classes.js";
|
|
11
|
+
import { ButtonSort } from "./ButtonSort.js";
|
|
12
12
|
|
|
13
13
|
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
14
14
|
|
|
15
|
-
;// CONCATENATED MODULE: external "@versini/ui-button/private"
|
|
16
|
-
|
|
17
15
|
;// CONCATENATED MODULE: external "@versini/ui-icons"
|
|
18
16
|
|
|
19
17
|
;// CONCATENATED MODULE: external "clsx"
|
|
@@ -22,6 +20,8 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
22
20
|
|
|
23
21
|
;// CONCATENATED MODULE: external "../utilities/classes.js"
|
|
24
22
|
|
|
23
|
+
;// CONCATENATED MODULE: external "./ButtonSort.js"
|
|
24
|
+
|
|
25
25
|
;// CONCATENATED MODULE: ./src/DataGridCellSort/DataGridCellSort.tsx
|
|
26
26
|
|
|
27
27
|
|
|
@@ -31,7 +31,7 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
31
31
|
|
|
32
32
|
/* =============================================================================
|
|
33
33
|
* DataGridCellSort
|
|
34
|
-
* ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName,
|
|
34
|
+
* ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest })=>{
|
|
35
35
|
const isSorted = sortedCell === cellId;
|
|
36
36
|
const handleSort = ()=>{
|
|
37
37
|
if (onSort) {
|
|
@@ -43,18 +43,18 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
43
43
|
const getSortIcon = ()=>{
|
|
44
44
|
if (isSorted && sortDirection === "asc") {
|
|
45
45
|
return /*#__PURE__*/ jsx(IconSortUp, {
|
|
46
|
-
|
|
46
|
+
size: "size-4",
|
|
47
47
|
monotone: true
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
if (isSorted && sortDirection === "desc") {
|
|
51
51
|
return /*#__PURE__*/ jsx(IconSortDown, {
|
|
52
|
-
|
|
52
|
+
size: "size-4",
|
|
53
53
|
monotone: true
|
|
54
54
|
});
|
|
55
55
|
}
|
|
56
56
|
return /*#__PURE__*/ jsx(IconSort, {
|
|
57
|
-
|
|
57
|
+
size: "size-4",
|
|
58
58
|
monotone: true
|
|
59
59
|
});
|
|
60
60
|
};
|
|
@@ -68,7 +68,7 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
68
68
|
return "other";
|
|
69
69
|
};
|
|
70
70
|
return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
|
|
71
|
-
children: ({ mode, compact, cellWrapper })=>{
|
|
71
|
+
children: ({ mode, compact, cellWrapper, blurEffect })=>{
|
|
72
72
|
const mainClasses = getCellClasses({
|
|
73
73
|
cellWrapper,
|
|
74
74
|
className,
|
|
@@ -91,15 +91,13 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
91
91
|
className: contentClasses,
|
|
92
92
|
children: [
|
|
93
93
|
slotLeft,
|
|
94
|
-
/*#__PURE__*/ jsx(
|
|
94
|
+
/*#__PURE__*/ jsx(ButtonSort, {
|
|
95
|
+
mode: mode,
|
|
96
|
+
blurEffect: blurEffect,
|
|
95
97
|
active: isSorted,
|
|
96
98
|
className: buttonClassName,
|
|
97
99
|
onClick: handleSort,
|
|
98
|
-
noBorder: true,
|
|
99
|
-
focusMode: focusMode,
|
|
100
|
-
mode: "light",
|
|
101
100
|
labelRight: children,
|
|
102
|
-
noBackground: true,
|
|
103
101
|
children: getSortIcon()
|
|
104
102
|
}),
|
|
105
103
|
slotRight
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
import { type BlurEffect, type CellWrapperType, type ThemeMode } from "../DataGridConstants/DataGridConstants";
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
4
|
-
* Primitive Theme Mappings (reusable building blocks)
|
|
5
|
-
* ============================================================================
|
|
6
|
-
*/
|
|
7
|
-
/**
|
|
8
|
-
* Text color classes based on theme mode. Used by: DataGrid wrapper, grid,
|
|
9
|
-
* spinner, header/footer copy.
|
|
3
|
+
* Text color classes based on theme mode.
|
|
10
4
|
*/
|
|
11
5
|
export declare const getTextColorClasses: ({ mode }: {
|
|
12
6
|
mode: ThemeMode;
|
|
@@ -16,38 +10,30 @@ export declare const getTextColorClassesForHeaderFooter: ({ mode, hasBlur, }: {
|
|
|
16
10
|
hasBlur: boolean;
|
|
17
11
|
}) => string;
|
|
18
12
|
/**
|
|
19
|
-
* Surface background classes (main container backgrounds).
|
|
20
|
-
* wrapper.
|
|
13
|
+
* Surface background classes (main container backgrounds).
|
|
21
14
|
*/
|
|
22
15
|
export declare const getSurfaceBackgroundClasses: ({ mode }: {
|
|
23
16
|
mode: ThemeMode;
|
|
24
17
|
}) => string;
|
|
25
18
|
/**
|
|
26
|
-
* Header/footer background classes (with optional blur transparency).
|
|
27
|
-
* DataGridHeader, DataGridFooter.
|
|
19
|
+
* Header/footer background classes (with optional blur transparency).
|
|
28
20
|
*/
|
|
29
21
|
export declare const getHeaderFooterBackgroundClasses: ({ hasBlur, sticky, }: {
|
|
30
22
|
hasBlur: boolean;
|
|
31
23
|
sticky: boolean;
|
|
32
24
|
}) => string;
|
|
33
25
|
/**
|
|
34
|
-
* Border color classes for rows.
|
|
26
|
+
* Border color classes for rows.
|
|
35
27
|
*/
|
|
36
28
|
export declare const getBorderClasses: ({ mode }: {
|
|
37
29
|
mode: ThemeMode;
|
|
38
30
|
}) => string;
|
|
39
31
|
/**
|
|
40
|
-
* Blur effect classes for sticky elements.
|
|
41
|
-
* DataGridFooter.
|
|
32
|
+
* Blur effect classes for sticky elements.
|
|
42
33
|
*/
|
|
43
34
|
export declare const getBlurClasses: ({ blurEffect }: {
|
|
44
35
|
blurEffect?: BlurEffect;
|
|
45
36
|
}) => string;
|
|
46
|
-
/**
|
|
47
|
-
* ============================================================================
|
|
48
|
-
* Composite Class Generators (component-specific combinations)
|
|
49
|
-
* ============================================================================
|
|
50
|
-
*/
|
|
51
37
|
/**
|
|
52
38
|
* Loading text classes for loading state.
|
|
53
39
|
*/
|
|
@@ -95,8 +81,6 @@ export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEff
|
|
|
95
81
|
}) => string;
|
|
96
82
|
/**
|
|
97
83
|
* 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.
|
|
100
84
|
*/
|
|
101
85
|
export declare const getCaptionClasses: ({ captionClassName, mode, hasBlur, stickyHeader, }: {
|
|
102
86
|
captionClassName?: string;
|
|
@@ -104,9 +88,6 @@ export declare const getCaptionClasses: ({ captionClassName, mode, hasBlur, stic
|
|
|
104
88
|
hasBlur: boolean;
|
|
105
89
|
stickyHeader: boolean;
|
|
106
90
|
}) => string;
|
|
107
|
-
/**
|
|
108
|
-
* Generates classes for the DataGridFooter.
|
|
109
|
-
*/
|
|
110
91
|
/**
|
|
111
92
|
* Generates classes for the DataGridFooter.
|
|
112
93
|
*/
|
|
@@ -117,9 +98,7 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
|
|
|
117
98
|
stickyFooter?: boolean;
|
|
118
99
|
}) => string;
|
|
119
100
|
/**
|
|
120
|
-
* Generates classes for DataGridRow.
|
|
121
|
-
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
122
|
-
* :nth-child selectors, which don't work with wrapper elements.
|
|
101
|
+
* Generates classes for DataGridRow.
|
|
123
102
|
*/
|
|
124
103
|
export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter, }: {
|
|
125
104
|
mode: ThemeMode;
|
|
@@ -142,7 +121,6 @@ export declare const getCellClasses: ({ cellWrapper, className, compact, align,
|
|
|
142
121
|
borderRight?: boolean;
|
|
143
122
|
}) => string;
|
|
144
123
|
/**
|
|
145
|
-
* Returns the appropriate ARIA role for the cell based on the cell wrapper
|
|
146
|
-
* type.
|
|
124
|
+
* Returns the appropriate ARIA role for the cell based on the cell wrapper type.
|
|
147
125
|
*/
|
|
148
126
|
export declare const getCellRole: (cellWrapper?: CellWrapperType) => string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.8.1
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -14,74 +14,71 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
17
|
+
* Theme mode helpers - reused across many functions.
|
|
18
|
+
*/ const isDark = (m)=>m === "dark";
|
|
19
|
+
const isLight = (m)=>m === "light";
|
|
20
|
+
const isSys = (m)=>m === "system";
|
|
21
|
+
const isAlt = (m)=>m === "alt-system";
|
|
22
|
+
const isDarkish = (m)=>isDark(m) || isSys(m);
|
|
23
|
+
const isLightish = (m)=>isLight(m) || isAlt(m);
|
|
24
|
+
const hasBlurEffect = (b)=>Boolean(b && b !== BlurEffects.NONE);
|
|
25
|
+
const isHeaderCell = (c)=>c === CellWrapper.HEADER;
|
|
26
|
+
const isFooterCell = (c)=>c === CellWrapper.FOOTER;
|
|
27
|
+
/**
|
|
28
|
+
* Text color classes - reused in multiple functions.
|
|
29
|
+
*/ const TXT_LIGHT = "text-copy-light";
|
|
30
|
+
const TXT_DARK = "text-copy-dark";
|
|
31
|
+
const TXT_SYS = "text-copy-light dark:text-copy-dark";
|
|
32
|
+
const TXT_ALT = "text-copy-dark dark:text-copy-light";
|
|
33
|
+
/**
|
|
34
|
+
* Text color classes based on theme mode.
|
|
35
|
+
*/ const getTextColorClasses = ({ mode })=>clsx({
|
|
36
|
+
[TXT_LIGHT]: isDark(mode),
|
|
37
|
+
[TXT_DARK]: isLight(mode),
|
|
38
|
+
[TXT_SYS]: isSys(mode),
|
|
39
|
+
[TXT_ALT]: isAlt(mode)
|
|
29
40
|
});
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"text-copy-dark": mode
|
|
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
|
|
41
|
+
const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>clsx({
|
|
42
|
+
[TXT_DARK]: isDark(mode) && !hasBlur || isLight(mode),
|
|
43
|
+
[TXT_SYS]: isSys(mode) && hasBlur,
|
|
44
|
+
"text-copy-dark dark:text-copy-dark": (isSys(mode) || isAlt(mode)) && !hasBlur
|
|
36
45
|
});
|
|
37
|
-
};
|
|
38
46
|
/**
|
|
39
|
-
* Surface background classes (main container backgrounds).
|
|
40
|
-
* wrapper.
|
|
47
|
+
* Surface background classes (main container backgrounds).
|
|
41
48
|
*/ const getSurfaceBackgroundClasses = ({ mode })=>clsx({
|
|
42
|
-
"bg-surface-darker": mode
|
|
43
|
-
"bg-surface-light": mode
|
|
44
|
-
"dark:bg-surface-light": mode
|
|
45
|
-
"dark:bg-surface-darker": mode
|
|
49
|
+
"bg-surface-darker": isDarkish(mode),
|
|
50
|
+
"bg-surface-light": isLightish(mode),
|
|
51
|
+
"dark:bg-surface-light": isSys(mode),
|
|
52
|
+
"dark:bg-surface-darker": isAlt(mode)
|
|
46
53
|
});
|
|
47
54
|
/**
|
|
48
|
-
* Header/footer background classes (with optional blur transparency).
|
|
49
|
-
|
|
50
|
-
*/ const getHeaderFooterBackgroundClasses = ({ hasBlur, sticky })=>{
|
|
51
|
-
return clsx({
|
|
52
|
-
// Semi-transparent for blur effect.
|
|
55
|
+
* Header/footer background classes (with optional blur transparency).
|
|
56
|
+
*/ const getHeaderFooterBackgroundClasses = ({ hasBlur, sticky })=>clsx({
|
|
53
57
|
"bg-surface-medium/50 dark:bg-surface-medium/50": hasBlur && sticky,
|
|
54
|
-
// Solid backgrounds.
|
|
55
58
|
"bg-surface-medium-light dark:bg-surface-medium-light": !hasBlur
|
|
56
59
|
});
|
|
57
|
-
};
|
|
58
60
|
/**
|
|
59
|
-
* Border color classes for rows.
|
|
61
|
+
* Border color classes for rows.
|
|
60
62
|
*/ const getBorderClasses = ({ mode })=>clsx({
|
|
61
|
-
"border-table-dark": mode
|
|
62
|
-
"border-table-light": mode
|
|
63
|
-
"dark:border-table-light": mode
|
|
64
|
-
"dark:border-table-dark": mode
|
|
63
|
+
"border-table-dark": isDarkish(mode),
|
|
64
|
+
"border-table-light": isLightish(mode),
|
|
65
|
+
"dark:border-table-light": isSys(mode),
|
|
66
|
+
"dark:border-table-dark": isAlt(mode)
|
|
65
67
|
});
|
|
66
68
|
/**
|
|
67
|
-
* Blur effect classes for sticky elements.
|
|
68
|
-
* DataGridFooter.
|
|
69
|
+
* Blur effect classes for sticky elements.
|
|
69
70
|
*/ const getBlurClasses = ({ blurEffect })=>clsx({
|
|
70
71
|
"backdrop-blur-sm": blurEffect === BlurEffects.SMALL,
|
|
71
72
|
"backdrop-blur-md": blurEffect === BlurEffects.MEDIUM,
|
|
72
73
|
"backdrop-blur-lg": blurEffect === BlurEffects.LARGE
|
|
73
74
|
});
|
|
74
75
|
/**
|
|
75
|
-
* ============================================================================
|
|
76
|
-
* Composite Class Generators (component-specific combinations)
|
|
77
|
-
* ============================================================================
|
|
78
|
-
*/ /**
|
|
79
76
|
* Loading text classes for loading state.
|
|
80
77
|
*/ const getLoadingTextClasses = ({ mode })=>clsx("text-lg font-medium", {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
78
|
+
[TXT_DARK]: isLight(mode),
|
|
79
|
+
[TXT_LIGHT]: isDark(mode),
|
|
80
|
+
[TXT_ALT]: isAlt(mode),
|
|
81
|
+
[TXT_SYS]: isSys(mode)
|
|
85
82
|
});
|
|
86
83
|
/**
|
|
87
84
|
* Overlay classes for loading state.
|
|
@@ -122,146 +119,102 @@ const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>{
|
|
|
122
119
|
/**
|
|
123
120
|
* Generates classes for the DataGridHeader wrapper.
|
|
124
121
|
*/ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect })=>{
|
|
125
|
-
const hasBlur =
|
|
122
|
+
const hasBlur = hasBlurEffect(blurEffect);
|
|
123
|
+
const textClasses = getTextColorClassesForHeaderFooter({
|
|
124
|
+
mode,
|
|
125
|
+
hasBlur
|
|
126
|
+
});
|
|
126
127
|
if (!stickyHeader) {
|
|
127
128
|
return clsx("contents", getHeaderFooterBackgroundClasses({
|
|
128
129
|
hasBlur,
|
|
129
130
|
sticky: false
|
|
130
|
-
}),
|
|
131
|
-
mode,
|
|
132
|
-
hasBlur
|
|
133
|
-
}), className);
|
|
131
|
+
}), textClasses, className);
|
|
134
132
|
}
|
|
135
|
-
return clsx("flex flex-col
|
|
133
|
+
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({
|
|
136
134
|
hasBlur,
|
|
137
135
|
sticky: true
|
|
138
|
-
}),
|
|
139
|
-
mode,
|
|
140
|
-
hasBlur
|
|
141
|
-
}), stickyHeader && getBlurClasses({
|
|
136
|
+
}), textClasses, getBlurClasses({
|
|
142
137
|
blurEffect
|
|
143
138
|
}), className);
|
|
144
139
|
};
|
|
145
140
|
/**
|
|
146
141
|
* Generates classes for the caption element inside DataGridHeader.
|
|
147
|
-
|
|
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({
|
|
142
|
+
*/ const getCaptionClasses = ({ captionClassName, mode, hasBlur, stickyHeader })=>clsx("py-2 text-sm text-center font-bold col-span-full", getTextColorClassesForHeaderFooter({
|
|
156
143
|
mode,
|
|
157
144
|
hasBlur
|
|
158
|
-
}),
|
|
145
|
+
}), !stickyHeader && getHeaderFooterBackgroundClasses({
|
|
159
146
|
hasBlur,
|
|
160
147
|
sticky: false
|
|
161
148
|
}), captionClassName);
|
|
162
|
-
};
|
|
163
149
|
/**
|
|
164
|
-
* Generates classes for the DataGridFooter.
|
|
165
|
-
*/ /**
|
|
166
150
|
* Generates classes for the DataGridFooter.
|
|
167
151
|
*/ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect })=>{
|
|
168
|
-
const hasBlur =
|
|
152
|
+
const hasBlur = hasBlurEffect(blurEffect);
|
|
153
|
+
const textClasses = getTextColorClassesForHeaderFooter({
|
|
154
|
+
mode,
|
|
155
|
+
hasBlur
|
|
156
|
+
});
|
|
169
157
|
if (!stickyFooter) {
|
|
170
|
-
return clsx("contents",
|
|
171
|
-
mode,
|
|
172
|
-
hasBlur
|
|
173
|
-
}), className);
|
|
158
|
+
return clsx("contents", textClasses, className);
|
|
174
159
|
}
|
|
175
|
-
return clsx("flex flex-col
|
|
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
|
|
177
|
-
}, getHeaderFooterBackgroundClasses({
|
|
160
|
+
return clsx("flex flex-col border-t border-table-medium", "absolute left-0 right-0 z-20 bottom-0 rounded-b-lg", "shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]", getHeaderFooterBackgroundClasses({
|
|
178
161
|
hasBlur,
|
|
179
|
-
sticky:
|
|
180
|
-
}),
|
|
162
|
+
sticky: true
|
|
163
|
+
}), getBlurClasses({
|
|
181
164
|
blurEffect
|
|
182
|
-
}),
|
|
183
|
-
mode,
|
|
184
|
-
hasBlur
|
|
185
|
-
}), className);
|
|
165
|
+
}), textClasses, className);
|
|
186
166
|
};
|
|
167
|
+
const ROW_LAYOUT = "group grid items-center";
|
|
187
168
|
/**
|
|
188
|
-
* Generates classes for DataGridRow.
|
|
189
|
-
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
190
|
-
* :nth-child selectors, which don't work with wrapper elements.
|
|
169
|
+
* Generates classes for DataGridRow.
|
|
191
170
|
*/ const getRowClasses = ({ mode, className, cellWrapper, isLastRow, stickyHeader, stickyFooter })=>{
|
|
192
|
-
|
|
193
|
-
|
|
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;
|
|
171
|
+
if (isHeaderCell(cellWrapper) || isFooterCell(cellWrapper)) {
|
|
172
|
+
const isHeader = isHeaderCell(cellWrapper);
|
|
199
173
|
const parentUsesContents = isHeader ? !stickyHeader : !stickyFooter;
|
|
200
174
|
if (parentUsesContents) {
|
|
201
|
-
return clsx(
|
|
175
|
+
return clsx(ROW_LAYOUT, getHeaderFooterBackgroundClasses({
|
|
202
176
|
hasBlur: false,
|
|
203
177
|
sticky: false
|
|
204
|
-
}),
|
|
205
|
-
"border-b border-table-medium shadow-md": isHeader,
|
|
206
|
-
"border-t border-table-medium": !isHeader
|
|
207
|
-
}, className);
|
|
178
|
+
}), isHeader ? "border-b border-table-medium shadow-md" : "border-t border-table-medium", className);
|
|
208
179
|
}
|
|
209
|
-
return clsx(
|
|
180
|
+
return clsx(ROW_LAYOUT, className);
|
|
210
181
|
}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
* provided, otherwise fall back to CSS :last-child selector.
|
|
214
|
-
*/ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent dark:border-b-transparent" // Last row: transparent border to maintain spacing
|
|
215
|
-
: "border-b" : "border-b last:border-0"; // Fallback to CSS :last-child
|
|
216
|
-
return clsx(layoutClass, borderClasses, "hover:bg-surface-medium hover:text-copy-light", getBorderClasses({
|
|
182
|
+
const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent dark:border-b-transparent" : "border-b" : "border-b last:border-0";
|
|
183
|
+
return clsx(ROW_LAYOUT, borderClasses, "hover:bg-surface-medium hover:text-copy-light", getBorderClasses({
|
|
217
184
|
mode
|
|
218
185
|
}), className);
|
|
219
186
|
};
|
|
220
187
|
/**
|
|
221
188
|
* Generates classes for DataGridCell.
|
|
222
189
|
*/ const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
|
|
223
|
-
|
|
224
|
-
const isFooter = cellWrapper === CellWrapper.FOOTER;
|
|
225
|
-
return clsx(// Base padding.
|
|
226
|
-
{
|
|
190
|
+
return clsx({
|
|
227
191
|
"px-2 py-1": compact,
|
|
228
192
|
"px-4 py-3": !compact
|
|
229
|
-
},
|
|
230
|
-
{
|
|
193
|
+
}, {
|
|
231
194
|
"text-left justify-start": align === "left" || !align,
|
|
232
195
|
"text-center justify-center": align === "center",
|
|
233
196
|
"text-right justify-end": align === "right"
|
|
234
|
-
},
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
"first:group-data-active:before:bg-table-active-dark": mode
|
|
241
|
-
|
|
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"
|
|
244
|
-
}, // Vertical borders.
|
|
245
|
-
{
|
|
197
|
+
}, {
|
|
198
|
+
"font-bold": isHeaderCell(cellWrapper) || isFooterCell(cellWrapper)
|
|
199
|
+
}, "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", {
|
|
200
|
+
"first:group-data-active:before:bg-table-active-dark": isDark(mode),
|
|
201
|
+
"first:group-data-active:before:bg-table-active-light": isLight(mode),
|
|
202
|
+
"first:group-data-active:before:bg-table-active-dark dark:first:group-data-active:before:bg-table-active-light": isSys(mode),
|
|
203
|
+
"first:group-data-active:before:bg-table-active-light dark:first:group-data-active:before:bg-table-active-dark": isAlt(mode)
|
|
204
|
+
}, {
|
|
246
205
|
"self-stretch flex items-center": borderLeft || borderRight,
|
|
247
|
-
"border-l border-l-table-dark": borderLeft && mode
|
|
248
|
-
"border-l border-l-table-light": borderLeft && mode
|
|
249
|
-
"border-l border-l-table-dark dark:border-l-table-light": borderLeft && mode
|
|
250
|
-
"border-l border-l-table-light dark:border-l-table-dark": borderLeft && mode
|
|
251
|
-
"border-r border-r-table-dark": borderRight && mode
|
|
252
|
-
"border-r border-r-table-light": borderRight && mode
|
|
253
|
-
"border-r border-r-table-dark dark:border-r-table-light": borderRight && mode
|
|
254
|
-
"border-r border-r-table-light dark:border-r-table-dark": borderRight && mode
|
|
206
|
+
"border-l border-l-table-dark": borderLeft && isDark(mode),
|
|
207
|
+
"border-l border-l-table-light": borderLeft && isLight(mode),
|
|
208
|
+
"border-l border-l-table-dark dark:border-l-table-light": borderLeft && isSys(mode),
|
|
209
|
+
"border-l border-l-table-light dark:border-l-table-dark": borderLeft && isAlt(mode),
|
|
210
|
+
"border-r border-r-table-dark": borderRight && isDark(mode),
|
|
211
|
+
"border-r border-r-table-light": borderRight && isLight(mode),
|
|
212
|
+
"border-r border-r-table-dark dark:border-r-table-light": borderRight && isSys(mode),
|
|
213
|
+
"border-r border-r-table-light dark:border-r-table-dark": borderRight && isAlt(mode)
|
|
255
214
|
}, className);
|
|
256
215
|
};
|
|
257
216
|
/**
|
|
258
|
-
* Returns the appropriate ARIA role for the cell based on the cell wrapper
|
|
259
|
-
|
|
260
|
-
*/ const getCellRole = (cellWrapper)=>{
|
|
261
|
-
if (cellWrapper === CellWrapper.HEADER) {
|
|
262
|
-
return "columnheader";
|
|
263
|
-
}
|
|
264
|
-
return "gridcell";
|
|
265
|
-
};
|
|
217
|
+
* Returns the appropriate ARIA role for the cell based on the cell wrapper type.
|
|
218
|
+
*/ const getCellRole = (cellWrapper)=>isHeaderCell(cellWrapper) ? "columnheader" : "gridcell";
|
|
266
219
|
|
|
267
220
|
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.8.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -87,11 +87,11 @@
|
|
|
87
87
|
},
|
|
88
88
|
"devDependencies": {
|
|
89
89
|
"@testing-library/jest-dom": "6.9.1",
|
|
90
|
+
"@versini/ui-button": "11.3.4",
|
|
90
91
|
"@versini/ui-types": "8.3.0"
|
|
91
92
|
},
|
|
92
93
|
"dependencies": {
|
|
93
94
|
"@tailwindcss/typography": "0.5.19",
|
|
94
|
-
"@versini/ui-button": "11.3.3",
|
|
95
95
|
"@versini/ui-icons": "4.16.1",
|
|
96
96
|
"clsx": "2.1.1",
|
|
97
97
|
"tailwindcss": "4.1.18"
|
|
@@ -99,5 +99,5 @@
|
|
|
99
99
|
"sideEffects": [
|
|
100
100
|
"**/*.css"
|
|
101
101
|
],
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "32b4533c580b7b6b3cd3355a9c5471e67cecb1d3"
|
|
103
103
|
}
|