@versini/ui-table 6.7.3 → 6.7.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/309.js +12 -0
- package/dist/Table/Table.js +145 -11
- package/dist/TableConstants/TableConstants.js +2 -9
- package/package.json +3 -3
- package/dist/Table/TableContext.js +0 -20
- package/dist/Table/utilities.js +0 -147
- package/dist/index.js +0 -15
package/dist/309.js
ADDED
package/dist/Table/Table.js
CHANGED
|
@@ -1,28 +1,162 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-table v6.7.
|
|
2
|
+
@versini/ui-table v6.7.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { ButtonSort_private } from "@versini/ui-button/private";
|
|
8
8
|
import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
|
|
9
|
-
import react, { useContext } from "react";
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
9
|
+
import react , { useContext } from "react";
|
|
10
|
+
import clsx from "clsx";
|
|
11
|
+
import { TableCellSortDirections } from "../309.js";
|
|
12
12
|
|
|
13
|
-
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
14
13
|
|
|
15
|
-
;// CONCATENATED MODULE: external "@versini/ui-button/private"
|
|
16
14
|
|
|
17
|
-
;// CONCATENATED MODULE: external "@versini/ui-icons"
|
|
18
15
|
|
|
19
|
-
;// CONCATENATED MODULE: external "react"
|
|
20
16
|
|
|
21
|
-
;// CONCATENATED MODULE: external "./TableContext.js"
|
|
22
17
|
|
|
23
|
-
|
|
18
|
+
const TableContext = react.createContext({
|
|
19
|
+
mode: "light",
|
|
20
|
+
cellWrapper: "thead",
|
|
21
|
+
stickyHeader: false,
|
|
22
|
+
stickyFooter: false,
|
|
23
|
+
compact: false
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
const CELL_WRAPPER_HEAD = "thead";
|
|
30
|
+
const CELL_WRAPPER_FOOTER = "tfoot";
|
|
31
|
+
const CELL_WRAPPER_BODY = "tbody";
|
|
32
|
+
// Re-export moved constant for backward compatibility (tree-shakable now).
|
|
33
|
+
|
|
34
|
+
const getTableSpinnerClasses = ({ mode })=>{
|
|
35
|
+
return clsx("size-8", "align-[-0.125em]", "border-4", "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]", {
|
|
36
|
+
"text-copy-dark": mode === "light",
|
|
37
|
+
"text-copy-light": mode === "dark",
|
|
38
|
+
"text-copy-dark dark:text-copy-light": mode === "alt-system",
|
|
39
|
+
"text-copy-light dark:text-copy-dark": mode === "system"
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
const getTableOverlayClasses = ({ mode })=>{
|
|
43
|
+
return {
|
|
44
|
+
inner: "relative",
|
|
45
|
+
overlay: clsx("absolute inset-0 z-20 cursor-not-allowed", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
|
|
46
|
+
spinnerWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
|
|
47
|
+
spinner: getTableSpinnerClasses({
|
|
48
|
+
mode
|
|
49
|
+
})
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
const getTableClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled })=>{
|
|
53
|
+
const overlayClasses = disabled ? getTableOverlayClasses({
|
|
54
|
+
mode
|
|
55
|
+
}) : null;
|
|
56
|
+
return {
|
|
57
|
+
overlay: overlayClasses?.overlay ?? "",
|
|
58
|
+
inner: overlayClasses?.inner ?? "",
|
|
59
|
+
spinnerWrapper: overlayClasses?.spinnerWrapper ?? "",
|
|
60
|
+
spinner: overlayClasses?.spinner ?? "",
|
|
61
|
+
wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
|
|
62
|
+
"overflow-x-auto": !stickyHeader && !stickyFooter && !disabled,
|
|
63
|
+
"overflow-y-scroll": (stickyHeader || stickyFooter) && !disabled,
|
|
64
|
+
"overflow-hidden": disabled,
|
|
65
|
+
"bg-surface-darker": mode === "dark" || mode === "system",
|
|
66
|
+
"bg-surface-light": mode === "light" || mode === "alt-system",
|
|
67
|
+
"dark:bg-surface-light": mode === "system",
|
|
68
|
+
"dark:bg-surface-darker": mode === "alt-system",
|
|
69
|
+
"text-copy-light": mode === "dark",
|
|
70
|
+
"text-copy-dark": mode === "light",
|
|
71
|
+
"text-copy-light dark:text-copy-dark": mode === "system",
|
|
72
|
+
"text-copy-dark dark:text-copy-light": mode === "alt-system"
|
|
73
|
+
}, wrapperClassName),
|
|
74
|
+
table: clsx("my-0 w-full text-left text-sm", className, {
|
|
75
|
+
"text-copy-light": mode === "dark",
|
|
76
|
+
"text-copy-dark": mode === "light",
|
|
77
|
+
"text-copy-light dark:text-copy-dark": mode === "system",
|
|
78
|
+
"text-copy-dark dark:text-copy-light": mode === "alt-system"
|
|
79
|
+
}),
|
|
80
|
+
caption: clsx("py-2 text-sm font-bold", {
|
|
81
|
+
"text-copy-light": mode === "dark",
|
|
82
|
+
"text-copy-dark": mode === "light",
|
|
83
|
+
"text-copy-light dark:text-copy-dark": mode === "system",
|
|
84
|
+
"text-copy-dark dark:text-copy-light": mode === "alt-system"
|
|
85
|
+
})
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
const getTableHeadClasses = ({ className, stickyHeader, mode })=>{
|
|
89
|
+
return clsx({
|
|
90
|
+
"sticky top-0 z-10": stickyHeader,
|
|
91
|
+
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "dark",
|
|
92
|
+
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "system",
|
|
93
|
+
"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "light",
|
|
94
|
+
"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"
|
|
95
|
+
}, className);
|
|
96
|
+
};
|
|
97
|
+
const getTableFooterClasses = ({ className, stickyFooter, mode })=>{
|
|
98
|
+
return clsx({
|
|
99
|
+
"sticky bottom-0 z-10": stickyFooter,
|
|
100
|
+
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "dark",
|
|
101
|
+
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "system",
|
|
102
|
+
"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "light",
|
|
103
|
+
"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"
|
|
104
|
+
}, className);
|
|
105
|
+
};
|
|
106
|
+
const getTableRowClasses = ({ mode, className, cellWrapper })=>{
|
|
107
|
+
if (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER) {
|
|
108
|
+
return clsx({
|
|
109
|
+
"bg-table-head-dark": mode === "dark" || mode === "system",
|
|
110
|
+
"bg-table-head-light": mode === "light" || mode === "alt-system",
|
|
111
|
+
"dark:bg-table-head-light": mode === "system",
|
|
112
|
+
"dark:bg-table-head-dark": mode === "alt-system"
|
|
113
|
+
}, className);
|
|
114
|
+
}
|
|
115
|
+
return clsx("border-b last:border-0", {
|
|
116
|
+
"border-table-dark": mode === "dark" || mode === "system",
|
|
117
|
+
"border-table-light": mode === "light" || mode === "alt-system",
|
|
118
|
+
"dark:border-table-light": mode === "system",
|
|
119
|
+
"dark:border-table-dark": mode === "alt-system",
|
|
120
|
+
"odd:bg-table-dark-odd even:bg-table-dark-even": mode === "dark",
|
|
121
|
+
"hover:bg-table-dark-hover": mode === "dark",
|
|
122
|
+
"odd:bg-table-light-odd even:bg-table-light-even": mode === "light",
|
|
123
|
+
"hover:bg-table-light-hover": mode === "light",
|
|
124
|
+
"odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": mode === "system",
|
|
125
|
+
"hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
|
|
126
|
+
"odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": mode === "alt-system",
|
|
127
|
+
"hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
|
|
128
|
+
}, className);
|
|
129
|
+
};
|
|
130
|
+
const getTableCellClasses = ({ cellWrapper, className, compact, mode, align, active = false })=>{
|
|
131
|
+
return {
|
|
132
|
+
alignClasses: clsx({
|
|
133
|
+
"flex justify-start text-left": align === "left",
|
|
134
|
+
"flex justify-center text-center": align === "center",
|
|
135
|
+
"flex justify-end text-right": align === "right"
|
|
136
|
+
}),
|
|
137
|
+
mainClasses: clsx({
|
|
138
|
+
"text-copy-light": mode === "dark" || mode === "system",
|
|
139
|
+
"text-copy-dark": mode === "light" || mode === "alt-system",
|
|
140
|
+
"dark:text-copy-dark": mode === "system",
|
|
141
|
+
"dark:text-copy-light": mode === "alt-system",
|
|
142
|
+
"px-4 py-3": !compact && (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER),
|
|
143
|
+
"p-4": !compact && cellWrapper === CELL_WRAPPER_BODY,
|
|
144
|
+
"px-2 py-1.5": compact,
|
|
145
|
+
/**
|
|
146
|
+
* Active state - left border indicator on first cell using pseudo-element
|
|
147
|
+
* Inset slightly from top/bottom to avoid overlapping row borders.
|
|
148
|
+
*/ "relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1": active,
|
|
149
|
+
"before:bg-table-active-dark": active && mode === "dark",
|
|
150
|
+
"before:bg-table-active-light": active && mode === "light",
|
|
151
|
+
"before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
|
|
152
|
+
"before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
|
|
153
|
+
}, className)
|
|
154
|
+
};
|
|
155
|
+
};
|
|
156
|
+
const getTableCellSortButtonClasses = ({ buttonClassName })=>{
|
|
157
|
+
return clsx("rounded-none text-sm", buttonClassName);
|
|
158
|
+
};
|
|
24
159
|
|
|
25
|
-
;// CONCATENATED MODULE: ./src/components/Table/Table.tsx
|
|
26
160
|
|
|
27
161
|
|
|
28
162
|
|
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-table v6.7.
|
|
2
|
+
@versini/ui-table v6.7.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
// Side-effect free constants for ui-table.
|
|
9
|
-
const TableCellSortDirections = {
|
|
10
|
-
ASC: "asc",
|
|
11
|
-
DESC: "desc"
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export { TableCellSortDirections };
|
|
7
|
+
export { TableCellSortDirections } from "../309.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-table",
|
|
3
|
-
"version": "6.7.
|
|
3
|
+
"version": "6.7.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@tailwindcss/typography": "0.5.19",
|
|
53
|
-
"@versini/ui-button": "11.3.
|
|
53
|
+
"@versini/ui-button": "11.3.5",
|
|
54
54
|
"@versini/ui-icons": "4.16.1",
|
|
55
55
|
"clsx": "2.1.1",
|
|
56
56
|
"tailwindcss": "4.1.18"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"sideEffects": [
|
|
59
59
|
"**/*.css"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "e1f66fb685ddf40b22301f1fe766a2c56ddc4388"
|
|
62
62
|
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
@versini/ui-table v6.7.3
|
|
3
|
-
© 2026 gizmette.com
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import react from "react";
|
|
7
|
-
|
|
8
|
-
;// CONCATENATED MODULE: external "react"
|
|
9
|
-
|
|
10
|
-
;// CONCATENATED MODULE: ./src/components/Table/TableContext.ts
|
|
11
|
-
|
|
12
|
-
const TableContext = react.createContext({
|
|
13
|
-
mode: "light",
|
|
14
|
-
cellWrapper: "thead",
|
|
15
|
-
stickyHeader: false,
|
|
16
|
-
stickyFooter: false,
|
|
17
|
-
compact: false
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
export { TableContext };
|
package/dist/Table/utilities.js
DELETED
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
@versini/ui-table v6.7.3
|
|
3
|
-
© 2026 gizmette.com
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import clsx from "clsx";
|
|
7
|
-
import { TableCellSortDirections } from "../TableConstants/TableConstants.js";
|
|
8
|
-
|
|
9
|
-
;// CONCATENATED MODULE: external "clsx"
|
|
10
|
-
|
|
11
|
-
;// CONCATENATED MODULE: external "../TableConstants/TableConstants.js"
|
|
12
|
-
|
|
13
|
-
;// CONCATENATED MODULE: ./src/components/Table/utilities.ts
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const CELL_WRAPPER_HEAD = "thead";
|
|
17
|
-
const CELL_WRAPPER_FOOTER = "tfoot";
|
|
18
|
-
const CELL_WRAPPER_BODY = "tbody";
|
|
19
|
-
// Re-export moved constant for backward compatibility (tree-shakable now).
|
|
20
|
-
|
|
21
|
-
const getTableSpinnerClasses = ({ mode })=>{
|
|
22
|
-
return clsx("size-8", "align-[-0.125em]", "border-4", "inline-block animate-spin rounded-full border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]", {
|
|
23
|
-
"text-copy-dark": mode === "light",
|
|
24
|
-
"text-copy-light": mode === "dark",
|
|
25
|
-
"text-copy-dark dark:text-copy-light": mode === "alt-system",
|
|
26
|
-
"text-copy-light dark:text-copy-dark": mode === "system"
|
|
27
|
-
});
|
|
28
|
-
};
|
|
29
|
-
const getTableOverlayClasses = ({ mode })=>{
|
|
30
|
-
return {
|
|
31
|
-
inner: "relative",
|
|
32
|
-
overlay: clsx("absolute inset-0 z-20 cursor-not-allowed", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
|
|
33
|
-
spinnerWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
|
|
34
|
-
spinner: getTableSpinnerClasses({
|
|
35
|
-
mode
|
|
36
|
-
})
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
const getTableClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled })=>{
|
|
40
|
-
const overlayClasses = disabled ? getTableOverlayClasses({
|
|
41
|
-
mode
|
|
42
|
-
}) : null;
|
|
43
|
-
return {
|
|
44
|
-
overlay: overlayClasses?.overlay ?? "",
|
|
45
|
-
inner: overlayClasses?.inner ?? "",
|
|
46
|
-
spinnerWrapper: overlayClasses?.spinnerWrapper ?? "",
|
|
47
|
-
spinner: overlayClasses?.spinner ?? "",
|
|
48
|
-
wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
|
|
49
|
-
"overflow-x-auto": !stickyHeader && !stickyFooter && !disabled,
|
|
50
|
-
"overflow-y-scroll": (stickyHeader || stickyFooter) && !disabled,
|
|
51
|
-
"overflow-hidden": disabled,
|
|
52
|
-
"bg-surface-darker": mode === "dark" || mode === "system",
|
|
53
|
-
"bg-surface-light": mode === "light" || mode === "alt-system",
|
|
54
|
-
"dark:bg-surface-light": mode === "system",
|
|
55
|
-
"dark:bg-surface-darker": mode === "alt-system",
|
|
56
|
-
"text-copy-light": mode === "dark",
|
|
57
|
-
"text-copy-dark": mode === "light",
|
|
58
|
-
"text-copy-light dark:text-copy-dark": mode === "system",
|
|
59
|
-
"text-copy-dark dark:text-copy-light": mode === "alt-system"
|
|
60
|
-
}, wrapperClassName),
|
|
61
|
-
table: clsx("my-0 w-full text-left text-sm", className, {
|
|
62
|
-
"text-copy-light": mode === "dark",
|
|
63
|
-
"text-copy-dark": mode === "light",
|
|
64
|
-
"text-copy-light dark:text-copy-dark": mode === "system",
|
|
65
|
-
"text-copy-dark dark:text-copy-light": mode === "alt-system"
|
|
66
|
-
}),
|
|
67
|
-
caption: clsx("py-2 text-sm font-bold", {
|
|
68
|
-
"text-copy-light": mode === "dark",
|
|
69
|
-
"text-copy-dark": mode === "light",
|
|
70
|
-
"text-copy-light dark:text-copy-dark": mode === "system",
|
|
71
|
-
"text-copy-dark dark:text-copy-light": mode === "alt-system"
|
|
72
|
-
})
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
const getTableHeadClasses = ({ className, stickyHeader, mode })=>{
|
|
76
|
-
return clsx({
|
|
77
|
-
"sticky top-0 z-10": stickyHeader,
|
|
78
|
-
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "dark",
|
|
79
|
-
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "system",
|
|
80
|
-
"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "light",
|
|
81
|
-
"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"
|
|
82
|
-
}, className);
|
|
83
|
-
};
|
|
84
|
-
const getTableFooterClasses = ({ className, stickyFooter, mode })=>{
|
|
85
|
-
return clsx({
|
|
86
|
-
"sticky bottom-0 z-10": stickyFooter,
|
|
87
|
-
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "dark",
|
|
88
|
-
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "system",
|
|
89
|
-
"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "light",
|
|
90
|
-
"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"
|
|
91
|
-
}, className);
|
|
92
|
-
};
|
|
93
|
-
const getTableRowClasses = ({ mode, className, cellWrapper })=>{
|
|
94
|
-
if (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER) {
|
|
95
|
-
return clsx({
|
|
96
|
-
"bg-table-head-dark": mode === "dark" || mode === "system",
|
|
97
|
-
"bg-table-head-light": mode === "light" || mode === "alt-system",
|
|
98
|
-
"dark:bg-table-head-light": mode === "system",
|
|
99
|
-
"dark:bg-table-head-dark": mode === "alt-system"
|
|
100
|
-
}, className);
|
|
101
|
-
}
|
|
102
|
-
return clsx("border-b last:border-0", {
|
|
103
|
-
"border-table-dark": mode === "dark" || mode === "system",
|
|
104
|
-
"border-table-light": mode === "light" || mode === "alt-system",
|
|
105
|
-
"dark:border-table-light": mode === "system",
|
|
106
|
-
"dark:border-table-dark": mode === "alt-system",
|
|
107
|
-
"odd:bg-table-dark-odd even:bg-table-dark-even": mode === "dark",
|
|
108
|
-
"hover:bg-table-dark-hover": mode === "dark",
|
|
109
|
-
"odd:bg-table-light-odd even:bg-table-light-even": mode === "light",
|
|
110
|
-
"hover:bg-table-light-hover": mode === "light",
|
|
111
|
-
"odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": mode === "system",
|
|
112
|
-
"hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
|
|
113
|
-
"odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": mode === "alt-system",
|
|
114
|
-
"hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
|
|
115
|
-
}, className);
|
|
116
|
-
};
|
|
117
|
-
const getTableCellClasses = ({ cellWrapper, className, compact, mode, align, active = false })=>{
|
|
118
|
-
return {
|
|
119
|
-
alignClasses: clsx({
|
|
120
|
-
"flex justify-start text-left": align === "left",
|
|
121
|
-
"flex justify-center text-center": align === "center",
|
|
122
|
-
"flex justify-end text-right": align === "right"
|
|
123
|
-
}),
|
|
124
|
-
mainClasses: clsx({
|
|
125
|
-
"text-copy-light": mode === "dark" || mode === "system",
|
|
126
|
-
"text-copy-dark": mode === "light" || mode === "alt-system",
|
|
127
|
-
"dark:text-copy-dark": mode === "system",
|
|
128
|
-
"dark:text-copy-light": mode === "alt-system",
|
|
129
|
-
"px-4 py-3": !compact && (cellWrapper === CELL_WRAPPER_HEAD || cellWrapper === CELL_WRAPPER_FOOTER),
|
|
130
|
-
"p-4": !compact && cellWrapper === CELL_WRAPPER_BODY,
|
|
131
|
-
"px-2 py-1.5": compact,
|
|
132
|
-
/**
|
|
133
|
-
* Active state - left border indicator on first cell using pseudo-element
|
|
134
|
-
* Inset slightly from top/bottom to avoid overlapping row borders.
|
|
135
|
-
*/ "relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1": active,
|
|
136
|
-
"before:bg-table-active-dark": active && mode === "dark",
|
|
137
|
-
"before:bg-table-active-light": active && mode === "light",
|
|
138
|
-
"before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
|
|
139
|
-
"before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
|
|
140
|
-
}, className)
|
|
141
|
-
};
|
|
142
|
-
};
|
|
143
|
-
const getTableCellSortButtonClasses = ({ buttonClassName })=>{
|
|
144
|
-
return clsx("rounded-none text-sm", buttonClassName);
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
export { CELL_WRAPPER_BODY, CELL_WRAPPER_FOOTER, CELL_WRAPPER_HEAD, TableCellSortDirections, getTableCellClasses, getTableCellSortButtonClasses, getTableClasses, getTableFooterClasses, getTableHeadClasses, getTableOverlayClasses, getTableRowClasses, getTableSpinnerClasses };
|
package/dist/index.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
@versini/ui-table v6.7.3
|
|
3
|
-
© 2026 gizmette.com
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { TableCellSortDirections } from "./TableConstants/TableConstants.js";
|
|
7
|
-
export * from "./Table/Table.js";
|
|
8
|
-
|
|
9
|
-
;// CONCATENATED MODULE: external "./TableConstants/TableConstants.js"
|
|
10
|
-
|
|
11
|
-
;// CONCATENATED MODULE: ./src/components/index.ts
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
export { TableCellSortDirections };
|