@versini/ui-datagrid 0.2.4 → 0.3.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 +5 -3
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/index.js +1 -1
- package/dist/DataGrid/utilities.d.ts +2 -1
- package/dist/DataGrid/utilities.js +14 -5
- 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/index.js +1 -1
- package/dist/DataGridCell/DataGridCell.d.ts +4 -2
- package/dist/DataGridCell/DataGridCell.js +18 -4
- 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/InfiniteScrollMarker.js +1 -1
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridInfinite/useInfiniteScroll.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/common/utilities.js +1 -1
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.3.1
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -71,7 +71,8 @@ import { getDataGridClasses } from "./utilities.js";
|
|
|
71
71
|
stickyFooter: effectiveStickyFooter,
|
|
72
72
|
disabled,
|
|
73
73
|
hasCaption,
|
|
74
|
-
hasColumns: Boolean(columns)
|
|
74
|
+
hasColumns: Boolean(columns),
|
|
75
|
+
compact
|
|
75
76
|
}), [
|
|
76
77
|
mode,
|
|
77
78
|
className,
|
|
@@ -80,7 +81,8 @@ import { getDataGridClasses } from "./utilities.js";
|
|
|
80
81
|
effectiveStickyFooter,
|
|
81
82
|
disabled,
|
|
82
83
|
hasCaption,
|
|
83
|
-
columns
|
|
84
|
+
columns,
|
|
85
|
+
compact
|
|
84
86
|
]);
|
|
85
87
|
const contextValue = useMemo(()=>({
|
|
86
88
|
mode,
|
package/dist/DataGrid/index.js
CHANGED
|
@@ -10,7 +10,7 @@ import { type ThemeMode } from "../DataGridConstants/DataGridConstants";
|
|
|
10
10
|
* When columns prop is provided, the grid uses CSS Grid layout with subgrid
|
|
11
11
|
* support for proper column alignment across all rows.
|
|
12
12
|
*/
|
|
13
|
-
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns, }: {
|
|
13
|
+
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns, compact, }: {
|
|
14
14
|
mode: ThemeMode;
|
|
15
15
|
className?: string;
|
|
16
16
|
disabled?: boolean;
|
|
@@ -19,6 +19,7 @@ export declare const getDataGridClasses: ({ mode, className, wrapperClassName, s
|
|
|
19
19
|
stickyFooter?: boolean;
|
|
20
20
|
stickyHeader?: boolean;
|
|
21
21
|
wrapperClassName?: string;
|
|
22
|
+
compact?: boolean;
|
|
22
23
|
}) => {
|
|
23
24
|
overlay: string;
|
|
24
25
|
inner: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.3.1
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -41,7 +41,7 @@ import clsx from "clsx";
|
|
|
41
41
|
*
|
|
42
42
|
* When columns prop is provided, the grid uses CSS Grid layout with subgrid
|
|
43
43
|
* support for proper column alignment across all rows.
|
|
44
|
-
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns })=>{
|
|
44
|
+
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns, compact })=>{
|
|
45
45
|
const overlayClasses = disabled ? getOverlayClasses({
|
|
46
46
|
mode
|
|
47
47
|
}) : null;
|
|
@@ -73,9 +73,18 @@ import clsx from "clsx";
|
|
|
73
73
|
*/ scrollableContent: clsx(// flex-1 + min-h-0 allows this to shrink within flex parent and enable scrolling.
|
|
74
74
|
// min-h-0 overrides the default min-height:auto that prevents flex items from shrinking.
|
|
75
75
|
"overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0", {
|
|
76
|
-
|
|
77
|
-
"pt-
|
|
78
|
-
|
|
76
|
+
// Padding adjusted for header + caption when compact is false
|
|
77
|
+
"pt-20": stickyHeader && hasCaption && !compact,
|
|
78
|
+
// Padding adjusted for header row only when compact is false
|
|
79
|
+
"pt-11": stickyHeader && !hasCaption && !compact,
|
|
80
|
+
// Padding adjusted for footer row when compact is false
|
|
81
|
+
"pb-11": stickyFooter && !compact,
|
|
82
|
+
// Padding adjusted for header row only when compact is true
|
|
83
|
+
"pt-7": stickyHeader && !hasCaption && compact,
|
|
84
|
+
// Padding adjusted for header + caption when compact is true
|
|
85
|
+
"pt-16": stickyHeader && hasCaption && compact,
|
|
86
|
+
// Padding adjusted for footer row when compact is true
|
|
87
|
+
"pb-7": stickyFooter && compact
|
|
79
88
|
}),
|
|
80
89
|
/**
|
|
81
90
|
* When columns are provided, use CSS Grid so rows can use subgrid for
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import type { DataGridCellProps } from "../DataGrid/DataGridTypes";
|
|
2
2
|
import { type CellWrapperType, type ThemeMode } from "../DataGridConstants";
|
|
3
|
-
export declare const getCellClasses: ({ cellWrapper, className, compact, align, active, mode, }: {
|
|
3
|
+
export declare const getCellClasses: ({ cellWrapper, className, compact, align, active, mode, borderLeft, borderRight, }: {
|
|
4
4
|
cellWrapper?: CellWrapperType;
|
|
5
5
|
className?: string;
|
|
6
6
|
mode?: ThemeMode;
|
|
7
7
|
compact?: boolean;
|
|
8
8
|
align?: "left" | "center" | "right";
|
|
9
9
|
active?: boolean;
|
|
10
|
+
borderLeft?: boolean;
|
|
11
|
+
borderRight?: boolean;
|
|
10
12
|
}) => string;
|
|
11
|
-
export declare const DataGridCell: ({ className, children, align, active, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const DataGridCell: ({ className, children, align, active, borderLeft, borderRight, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.3.1
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -21,7 +21,7 @@ import { CellWrapper } from "../DataGridConstants/index.js";
|
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
const getCellClasses = ({ cellWrapper, className, compact, align, active, mode })=>{
|
|
24
|
+
const getCellClasses = ({ cellWrapper, className, compact, align, active, mode, borderLeft, borderRight })=>{
|
|
25
25
|
const isHeader = cellWrapper === CellWrapper.HEADER;
|
|
26
26
|
const mainClasses = clsx(// Base padding.
|
|
27
27
|
{
|
|
@@ -42,6 +42,18 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode }
|
|
|
42
42
|
"before:bg-table-active-light": active && mode === "light",
|
|
43
43
|
"before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
|
|
44
44
|
"before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
|
|
45
|
+
}, // Vertical borders.
|
|
46
|
+
// self-stretch ensures border spans full row height in grid layout.
|
|
47
|
+
{
|
|
48
|
+
"self-stretch": borderLeft || borderRight,
|
|
49
|
+
"border-l border-l-table-dark": borderLeft && mode === "dark",
|
|
50
|
+
"border-l border-l-table-light": borderLeft && mode === "light",
|
|
51
|
+
"border-l border-l-table-dark dark:border-l-table-light": borderLeft && mode === "system",
|
|
52
|
+
"border-l border-l-table-light dark:border-l-table-dark": borderLeft && mode === "alt-system",
|
|
53
|
+
"border-r border-r-table-dark": borderRight && mode === "dark",
|
|
54
|
+
"border-r border-r-table-light": borderRight && mode === "light",
|
|
55
|
+
"border-r border-r-table-dark dark:border-r-table-light": borderRight && mode === "system",
|
|
56
|
+
"border-r border-r-table-light dark:border-r-table-dark": borderRight && mode === "alt-system"
|
|
45
57
|
}, className);
|
|
46
58
|
return mainClasses;
|
|
47
59
|
};
|
|
@@ -55,7 +67,7 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode }
|
|
|
55
67
|
};
|
|
56
68
|
/* =============================================================================
|
|
57
69
|
* DataGridCell
|
|
58
|
-
* ========================================================================== */ const DataGridCell = ({ className, children, align, active, colSpan, style, ...rest })=>{
|
|
70
|
+
* ========================================================================== */ const DataGridCell = ({ className, children, align, active, borderLeft, borderRight, colSpan, style, ...rest })=>{
|
|
59
71
|
return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
|
|
60
72
|
children: ({ mode, compact, cellWrapper })=>{
|
|
61
73
|
const mainClasses = getCellClasses({
|
|
@@ -64,7 +76,9 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode }
|
|
|
64
76
|
mode,
|
|
65
77
|
compact,
|
|
66
78
|
align,
|
|
67
|
-
active
|
|
79
|
+
active,
|
|
80
|
+
borderLeft,
|
|
81
|
+
borderRight
|
|
68
82
|
});
|
|
69
83
|
const role = getCellRole(cellWrapper);
|
|
70
84
|
// Apply grid-column span for colSpan > 1
|
package/dist/common/utilities.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-datagrid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
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": "30fcda9a659ee83caeaf29475095ff6f192b65c2"
|
|
98
98
|
}
|