simple-table-core 2.4.4 → 2.4.6
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/Animate-dc613bc7.js +2 -0
- package/dist/Animate-dc613bc7.js.map +1 -0
- package/dist/{DatePicker-9d5825ee.js → DatePicker-05e8765f.js} +2 -2
- package/dist/DatePicker-05e8765f.js.map +1 -0
- package/dist/cjs/Animate-65e89c58.js +2 -0
- package/dist/cjs/Animate-65e89c58.js.map +1 -0
- package/dist/cjs/{DatePicker-3d0a5721.js → DatePicker-eba46e52.js} +2 -2
- package/dist/cjs/DatePicker-eba46e52.js.map +1 -0
- package/dist/cjs/components/scroll-sync/ScrollSyncPane.d.ts +2 -2
- package/dist/cjs/components/simple-table/TableHeaderCell.d.ts +2 -1
- package/dist/cjs/context/TableContext.d.ts +1 -0
- package/dist/cjs/hooks/useDragHandler.d.ts +4 -0
- package/dist/cjs/hooks/useScrollbarVisibility.d.ts +2 -2
- package/dist/cjs/index-9eb55e2f.js +2 -0
- package/dist/cjs/index-9eb55e2f.js.map +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/cjs/types/HandleResizeStartProps.d.ts +1 -0
- package/dist/cjs/types/SharedTableProps.d.ts +7 -7
- package/dist/cjs/types/SimpleTableProps.d.ts +1 -0
- package/dist/cjs/types/TableHeaderSectionProps.d.ts +1 -2
- package/dist/cjs/types/Theme.d.ts +1 -1
- package/dist/cjs/utils/headerWidthUtils.d.ts +14 -0
- package/dist/cjs/utils/resizeUtils.d.ts +1 -1
- package/dist/components/scroll-sync/ScrollSyncPane.d.ts +2 -2
- package/dist/components/simple-table/TableHeaderCell.d.ts +2 -1
- package/dist/context/TableContext.d.ts +1 -0
- package/dist/hooks/useDragHandler.d.ts +4 -0
- package/dist/hooks/useScrollbarVisibility.d.ts +2 -2
- package/dist/index-cd5b7c82.js +2 -0
- package/dist/index-cd5b7c82.js.map +1 -0
- package/dist/index.es.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/HandleResizeStartProps.d.ts +1 -0
- package/dist/types/SharedTableProps.d.ts +7 -7
- package/dist/types/SimpleTableProps.d.ts +1 -0
- package/dist/types/TableHeaderSectionProps.d.ts +1 -2
- package/dist/types/Theme.d.ts +1 -1
- package/dist/utils/headerWidthUtils.d.ts +14 -0
- package/dist/utils/resizeUtils.d.ts +1 -1
- package/package.json +1 -1
- package/src/styles/all-themes.css +2 -0
- package/src/styles/base.css +6 -5
- package/src/styles/themes/modern-dark.css +285 -0
- package/src/styles/themes/modern-light.css +275 -0
- package/dist/Animate-85a426a3.js +0 -2
- package/dist/Animate-85a426a3.js.map +0 -1
- package/dist/DatePicker-9d5825ee.js.map +0 -1
- package/dist/cjs/Animate-18759d53.js +0 -2
- package/dist/cjs/Animate-18759d53.js.map +0 -1
- package/dist/cjs/DatePicker-3d0a5721.js.map +0 -1
- package/dist/cjs/index-63f4ad95.js +0 -2
- package/dist/cjs/index-63f4ad95.js.map +0 -1
- package/dist/index-57a11501.js +0 -2
- package/dist/index-57a11501.js.map +0 -1
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
/* Modern Dark Theme - Clean, minimal dark design inspired by contemporary table UIs
|
|
2
|
+
*
|
|
3
|
+
* Design Philosophy:
|
|
4
|
+
* - Subtle borders on dark backgrounds for depth
|
|
5
|
+
* - Dark gray base with lighter text for reduced eye strain
|
|
6
|
+
* - Hover states with subtle brightness changes
|
|
7
|
+
* - Generous padding (12px) for better readability
|
|
8
|
+
* - Rounded corners (8px) for a softer appearance
|
|
9
|
+
* - Modern blue accent (#60a5fa) for interactive elements (lighter for dark mode)
|
|
10
|
+
* - High contrast text for accessibility
|
|
11
|
+
* - Lightweight visual hierarchy
|
|
12
|
+
*
|
|
13
|
+
* Inspired by: GitHub dark mode, VS Code, and modern dark UIs
|
|
14
|
+
*/
|
|
15
|
+
.theme-modern-dark {
|
|
16
|
+
/* Layout/Structure variables - Tighter, more compact */
|
|
17
|
+
--st-border-radius: 8px;
|
|
18
|
+
--st-cell-padding: 12px;
|
|
19
|
+
|
|
20
|
+
/* Spacing variables - Reduced for cleaner look */
|
|
21
|
+
--st-spacing-small: 4px;
|
|
22
|
+
--st-spacing-medium: 8px;
|
|
23
|
+
|
|
24
|
+
/* Scrollbar variables - Dark minimal */
|
|
25
|
+
--st-scrollbar-bg-color: #111827;
|
|
26
|
+
--st-scrollbar-thumb-color: #4b5563;
|
|
27
|
+
--st-scrollbar-width: thin;
|
|
28
|
+
|
|
29
|
+
/* Base/Structural colors - Subtle dark borders */
|
|
30
|
+
--st-border-color: #374151;
|
|
31
|
+
--st-footer-background-color: #1f2937;
|
|
32
|
+
--st-last-group-row-separator-border-color: #4b5563;
|
|
33
|
+
|
|
34
|
+
/* Row colors - Dark background, subtle hover */
|
|
35
|
+
--st-odd-row-background-color: #1f2937;
|
|
36
|
+
--st-even-row-background-color: #1f2937;
|
|
37
|
+
--st-hover-row-background-color: #374151;
|
|
38
|
+
--st-selected-row-background-color: #1e3a5f;
|
|
39
|
+
|
|
40
|
+
/* Column colors - No alternating columns by default */
|
|
41
|
+
--st-odd-column-background-color: #1f2937;
|
|
42
|
+
--st-even-column-background-color: #1f2937;
|
|
43
|
+
|
|
44
|
+
/* Header colors - Minimal, clean dark header */
|
|
45
|
+
--st-header-background-color: #1f2937;
|
|
46
|
+
--st-sub-header-background-color: #111827;
|
|
47
|
+
--st-header-label-color: #f3f4f6;
|
|
48
|
+
--st-header-icon-color: #9ca3af;
|
|
49
|
+
|
|
50
|
+
/* Cell colors - Clean, high contrast light text */
|
|
51
|
+
--st-cell-color: #f3f4f6;
|
|
52
|
+
--st-cell-odd-row-color: #d1d5db;
|
|
53
|
+
--st-edit-cell-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
54
|
+
--st-sub-cell-background-color: #111827;
|
|
55
|
+
--st-sub-cell-hover-background-color: #1f2937;
|
|
56
|
+
|
|
57
|
+
/* Selection colors - Subtle blue tint for dark mode */
|
|
58
|
+
--st-selected-cell-background-color: #1e40af;
|
|
59
|
+
--st-selected-first-cell-background-color: #1e3a8a;
|
|
60
|
+
--st-selected-cell-color: #f3f4f6;
|
|
61
|
+
--st-selected-first-cell-color: #f3f4f6;
|
|
62
|
+
--st-selected-sub-cell-background-color: #1e3a8a;
|
|
63
|
+
--st-selected-sub-cell-color: #f3f4f6;
|
|
64
|
+
--st-dragging-background-color: #374151;
|
|
65
|
+
--st-dragging-sub-header-background-color: #4b5563;
|
|
66
|
+
|
|
67
|
+
/* Interactive element colors */
|
|
68
|
+
--st-resize-handle-color: #4b5563;
|
|
69
|
+
--st-resize-handle-selected-color: #60a5fa;
|
|
70
|
+
|
|
71
|
+
/* Border colors - Modern blue accent (lighter for dark mode) */
|
|
72
|
+
--st-selected-border-color: #60a5fa;
|
|
73
|
+
--st-editable-cell-focus-border-color: #60a5fa;
|
|
74
|
+
--st-focus-ring-color: #60a5fa;
|
|
75
|
+
|
|
76
|
+
/* Button colors - Clean, minimal dark */
|
|
77
|
+
--st-button-hover-background-color: #374151;
|
|
78
|
+
--st-button-active-background-color: #3b82f6;
|
|
79
|
+
--st-next-prev-btn-color: #9ca3af;
|
|
80
|
+
--st-next-prev-btn-disabled-color: #4b5563;
|
|
81
|
+
--st-page-btn-color: #d1d5db;
|
|
82
|
+
--st-page-btn-hover-background-color: #374151;
|
|
83
|
+
|
|
84
|
+
/* Checkbox colors */
|
|
85
|
+
--st-checkbox-checked-background-color: #3b82f6;
|
|
86
|
+
--st-checkbox-checked-border-color: #3b82f6;
|
|
87
|
+
--st-checkbox-border-color: #4b5563;
|
|
88
|
+
|
|
89
|
+
/* Column editor colors */
|
|
90
|
+
--st-column-editor-background-color: #1f2937;
|
|
91
|
+
--st-column-editor-popout-background-color: #1f2937;
|
|
92
|
+
--st-column-editor-text-color: #9ca3af;
|
|
93
|
+
|
|
94
|
+
/* Form element colors */
|
|
95
|
+
--st-datepicker-weekday-color: #9ca3af;
|
|
96
|
+
--st-datepicker-other-month-color: #4b5563;
|
|
97
|
+
--st-filter-button-disabled-background-color: #374151;
|
|
98
|
+
--st-filter-button-disabled-text-color: #6b7280;
|
|
99
|
+
|
|
100
|
+
/* Flash/Animation colors */
|
|
101
|
+
--st-cell-flash-color: #1e40af;
|
|
102
|
+
--st-copy-flash-color: #60a5fa;
|
|
103
|
+
--st-warning-flash-color: #ef4444;
|
|
104
|
+
|
|
105
|
+
/* Tooltip variables */
|
|
106
|
+
--st-tooltip-background-color: #f3f4f6;
|
|
107
|
+
--st-tooltip-text-color: #111827;
|
|
108
|
+
--st-tooltip-border-radius: 6px;
|
|
109
|
+
--st-tooltip-padding: 6px 10px;
|
|
110
|
+
--st-tooltip-font-size: 12px;
|
|
111
|
+
--st-tooltip-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
|
|
112
|
+
|
|
113
|
+
/* Header selection colors */
|
|
114
|
+
--st-header-selected-background-color: #3b82f6;
|
|
115
|
+
--st-header-selected-label-color: var(--st-white);
|
|
116
|
+
--st-header-selected-icon-color: var(--st-white);
|
|
117
|
+
--st-header-highlight-indicator-color: #1e40af;
|
|
118
|
+
--st-selection-highlight-indicator-color: #374151;
|
|
119
|
+
|
|
120
|
+
/* Utility colors */
|
|
121
|
+
--st-loading-skeleton-bg-color: #374151;
|
|
122
|
+
--st-chart-color: #60a5fa;
|
|
123
|
+
--st-chart-fill-color: #3b82f6;
|
|
124
|
+
|
|
125
|
+
/* Drag and drop colors */
|
|
126
|
+
--st-drag-separator-color: #60a5fa;
|
|
127
|
+
|
|
128
|
+
/* Body background for state rows */
|
|
129
|
+
--st-body-background-color: #1f2937;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Modern Dark theme specific overrides for even cleaner look */
|
|
133
|
+
.theme-modern-dark .st-wrapper {
|
|
134
|
+
border: 1px solid #374151;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Subtle header border */
|
|
138
|
+
.theme-modern-dark .st-header-pinned-left,
|
|
139
|
+
.theme-modern-dark .st-header-main,
|
|
140
|
+
.theme-modern-dark .st-header-pinned-right {
|
|
141
|
+
border-bottom: 1px solid #374151;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Remove heavy borders on pinned sections */
|
|
145
|
+
.theme-modern-dark .st-header-pinned-left,
|
|
146
|
+
.theme-modern-dark .st-body-pinned-left {
|
|
147
|
+
border-right: 1px solid #374151;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.theme-modern-dark .st-header-pinned-right,
|
|
151
|
+
.theme-modern-dark .st-body-pinned-right {
|
|
152
|
+
border-left: 1px solid #374151;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Cleaner row separators */
|
|
156
|
+
.theme-modern-dark .st-row-separator {
|
|
157
|
+
background-color: #374151;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Lighter header cell styling */
|
|
161
|
+
.theme-modern-dark .st-header-cell {
|
|
162
|
+
font-weight: 500;
|
|
163
|
+
font-size: 14px;
|
|
164
|
+
color: #d1d5db;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Cleaner cell text */
|
|
168
|
+
.theme-modern-dark .st-cell-content {
|
|
169
|
+
font-size: 14px;
|
|
170
|
+
color: #f3f4f6;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Subtle hover effect */
|
|
174
|
+
.theme-modern-dark .st-row.hovered {
|
|
175
|
+
transition: background-color 0.15s ease;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Modern footer styling */
|
|
179
|
+
.theme-modern-dark .st-footer {
|
|
180
|
+
border-top: 1px solid #374151;
|
|
181
|
+
background-color: #1f2937;
|
|
182
|
+
padding: 12px 16px;
|
|
183
|
+
gap: 12px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Footer text color */
|
|
187
|
+
.theme-modern-dark .st-footer-results-text {
|
|
188
|
+
color: #d1d5db;
|
|
189
|
+
font-size: 14px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* Footer pagination container - hide extra buttons on smaller screens */
|
|
193
|
+
.theme-modern-dark .st-footer-pagination {
|
|
194
|
+
gap: 2px;
|
|
195
|
+
flex-wrap: nowrap;
|
|
196
|
+
overflow: hidden;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* Pagination ellipsis */
|
|
200
|
+
.theme-modern-dark .st-page-ellipsis {
|
|
201
|
+
color: #9ca3af;
|
|
202
|
+
font-weight: 400;
|
|
203
|
+
padding: 0 4px;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Cleaner pagination buttons - more compact */
|
|
207
|
+
.theme-modern-dark .st-page-btn {
|
|
208
|
+
border-radius: 6px;
|
|
209
|
+
font-size: 13px;
|
|
210
|
+
font-weight: 500;
|
|
211
|
+
color: #d1d5db;
|
|
212
|
+
padding: 6px 8px;
|
|
213
|
+
min-width: 36px;
|
|
214
|
+
transition: all 0.15s ease;
|
|
215
|
+
margin-right: 0;
|
|
216
|
+
flex-shrink: 0;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.theme-modern-dark .st-page-btn:hover {
|
|
220
|
+
background-color: #374151;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.theme-modern-dark .st-page-btn.active {
|
|
224
|
+
background-color: #3b82f6;
|
|
225
|
+
color: white;
|
|
226
|
+
font-weight: 600;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* Hide buttons beyond the 9th one to prevent overflow */
|
|
230
|
+
.theme-modern-dark .st-page-btn:nth-child(n+10):not(.active) {
|
|
231
|
+
display: none;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* Always show active button and adjacent buttons */
|
|
235
|
+
.theme-modern-dark .st-page-btn.active,
|
|
236
|
+
.theme-modern-dark .st-page-btn.active + .st-page-btn,
|
|
237
|
+
.theme-modern-dark .st-page-btn:has(+ .st-page-btn.active) {
|
|
238
|
+
display: inline-flex;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Next/Prev buttons */
|
|
242
|
+
.theme-modern-dark .st-next-prev-btn {
|
|
243
|
+
padding: 6px 8px;
|
|
244
|
+
border-radius: 6px;
|
|
245
|
+
transition: all 0.15s ease;
|
|
246
|
+
margin-left: 4px;
|
|
247
|
+
flex-shrink: 0;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.theme-modern-dark .st-next-prev-btn:not(.disabled):hover {
|
|
251
|
+
background-color: #374151;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.theme-modern-dark .st-next-prev-btn.disabled > * {
|
|
255
|
+
fill: #4b5563;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* Modern scrollbar */
|
|
259
|
+
.theme-modern-dark .st-horizontal-scrollbar-container {
|
|
260
|
+
border-top: 1px solid #374151;
|
|
261
|
+
background-color: #111827;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* Cleaner group headers */
|
|
265
|
+
.theme-modern-dark .st-group-header {
|
|
266
|
+
border-bottom: 1px solid #374151;
|
|
267
|
+
font-weight: 500;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* Modern checkbox styling */
|
|
271
|
+
.theme-modern-dark .st-checkbox-custom {
|
|
272
|
+
border-radius: 4px;
|
|
273
|
+
border: 1.5px solid #4b5563;
|
|
274
|
+
background-color: #1f2937;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.theme-modern-dark .st-checkbox-custom.st-checked {
|
|
278
|
+
background-color: #3b82f6;
|
|
279
|
+
border-color: #3b82f6;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* Empty state styling */
|
|
283
|
+
.theme-modern-dark .st-empty-state {
|
|
284
|
+
color: #9ca3af;
|
|
285
|
+
}
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
/* Modern Light Theme - Clean, minimal design inspired by contemporary table UIs
|
|
2
|
+
*
|
|
3
|
+
* Design Philosophy:
|
|
4
|
+
* - Subtle borders (#f3f4f6) for a clean, uncluttered look
|
|
5
|
+
* - White backgrounds with minimal color variation
|
|
6
|
+
* - Hover states instead of alternating row colors
|
|
7
|
+
* - Generous padding (12px) for better readability
|
|
8
|
+
* - Rounded corners (8px) for a softer appearance
|
|
9
|
+
* - Modern blue accent (#3b82f6) for interactive elements
|
|
10
|
+
* - High contrast text (#111827) for accessibility
|
|
11
|
+
* - Lightweight visual hierarchy
|
|
12
|
+
*
|
|
13
|
+
* Inspired by: Tailwind UI, Shadcn UI, and modern SaaS dashboards
|
|
14
|
+
*/
|
|
15
|
+
.theme-modern-light {
|
|
16
|
+
/* Layout/Structure variables - Tighter, more compact */
|
|
17
|
+
--st-border-radius: 8px;
|
|
18
|
+
--st-cell-padding: 12px;
|
|
19
|
+
|
|
20
|
+
/* Spacing variables - Reduced for cleaner look */
|
|
21
|
+
--st-spacing-small: 4px;
|
|
22
|
+
--st-spacing-medium: 8px;
|
|
23
|
+
|
|
24
|
+
/* Scrollbar variables - Minimal */
|
|
25
|
+
--st-scrollbar-bg-color: #fafafa;
|
|
26
|
+
--st-scrollbar-thumb-color: #d1d5db;
|
|
27
|
+
--st-scrollbar-width: thin;
|
|
28
|
+
|
|
29
|
+
/* Base/Structural colors - Very subtle borders */
|
|
30
|
+
--st-border-color: #f3f4f6;
|
|
31
|
+
--st-footer-background-color: var(--st-white);
|
|
32
|
+
--st-last-group-row-separator-border-color: #e5e7eb;
|
|
33
|
+
|
|
34
|
+
/* Row colors - Clean white background, subtle hover */
|
|
35
|
+
--st-odd-row-background-color: var(--st-white);
|
|
36
|
+
--st-even-row-background-color: var(--st-white);
|
|
37
|
+
--st-hover-row-background-color: #f9fafb;
|
|
38
|
+
--st-selected-row-background-color: #eff6ff;
|
|
39
|
+
|
|
40
|
+
/* Column colors - No alternating columns by default */
|
|
41
|
+
--st-odd-column-background-color: var(--st-white);
|
|
42
|
+
--st-even-column-background-color: var(--st-white);
|
|
43
|
+
|
|
44
|
+
/* Header colors - Minimal, clean header */
|
|
45
|
+
--st-header-background-color: var(--st-white);
|
|
46
|
+
--st-sub-header-background-color: #fafafa;
|
|
47
|
+
--st-header-label-color: #111827;
|
|
48
|
+
--st-header-icon-color: #6b7280;
|
|
49
|
+
|
|
50
|
+
/* Cell colors - Clean, high contrast text */
|
|
51
|
+
--st-cell-color: #111827;
|
|
52
|
+
--st-cell-odd-row-color: #374151;
|
|
53
|
+
--st-edit-cell-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
54
|
+
--st-sub-cell-background-color: #f9fafb;
|
|
55
|
+
--st-sub-cell-hover-background-color: #f3f4f6;
|
|
56
|
+
|
|
57
|
+
/* Selection colors - Subtle blue tint */
|
|
58
|
+
--st-selected-cell-background-color: #dbeafe;
|
|
59
|
+
--st-selected-first-cell-background-color: #eff6ff;
|
|
60
|
+
--st-selected-cell-color: #111827;
|
|
61
|
+
--st-selected-first-cell-color: #111827;
|
|
62
|
+
--st-selected-sub-cell-background-color: #bfdbfe;
|
|
63
|
+
--st-selected-sub-cell-color: #111827;
|
|
64
|
+
--st-dragging-background-color: #f3f4f6;
|
|
65
|
+
--st-dragging-sub-header-background-color: #e5e7eb;
|
|
66
|
+
|
|
67
|
+
/* Interactive element colors */
|
|
68
|
+
--st-resize-handle-color: #e5e7eb;
|
|
69
|
+
--st-resize-handle-selected-color: #3b82f6;
|
|
70
|
+
|
|
71
|
+
/* Border colors - Modern blue accent */
|
|
72
|
+
--st-selected-border-color: #3b82f6;
|
|
73
|
+
--st-editable-cell-focus-border-color: #3b82f6;
|
|
74
|
+
--st-focus-ring-color: #3b82f6;
|
|
75
|
+
|
|
76
|
+
/* Button colors - Clean, minimal */
|
|
77
|
+
--st-button-hover-background-color: #f3f4f6;
|
|
78
|
+
--st-button-active-background-color: #3b82f6;
|
|
79
|
+
--st-next-prev-btn-color: #6b7280;
|
|
80
|
+
--st-next-prev-btn-disabled-color: #d1d5db;
|
|
81
|
+
--st-page-btn-color: #6b7280;
|
|
82
|
+
--st-page-btn-hover-background-color: #f3f4f6;
|
|
83
|
+
|
|
84
|
+
/* Checkbox colors */
|
|
85
|
+
--st-checkbox-checked-background-color: #3b82f6;
|
|
86
|
+
--st-checkbox-checked-border-color: #3b82f6;
|
|
87
|
+
--st-checkbox-border-color: #d1d5db;
|
|
88
|
+
|
|
89
|
+
/* Column editor colors */
|
|
90
|
+
--st-column-editor-background-color: var(--st-white);
|
|
91
|
+
--st-column-editor-popout-background-color: var(--st-white);
|
|
92
|
+
--st-column-editor-text-color: #6b7280;
|
|
93
|
+
|
|
94
|
+
/* Form element colors */
|
|
95
|
+
--st-datepicker-weekday-color: #6b7280;
|
|
96
|
+
--st-datepicker-other-month-color: #d1d5db;
|
|
97
|
+
--st-filter-button-disabled-background-color: #f3f4f6;
|
|
98
|
+
--st-filter-button-disabled-text-color: #9ca3af;
|
|
99
|
+
|
|
100
|
+
/* Flash/Animation colors */
|
|
101
|
+
--st-cell-flash-color: #dbeafe;
|
|
102
|
+
--st-copy-flash-color: #3b82f6;
|
|
103
|
+
--st-warning-flash-color: #fca5a5;
|
|
104
|
+
|
|
105
|
+
/* Tooltip variables */
|
|
106
|
+
--st-tooltip-background-color: #1f2937;
|
|
107
|
+
--st-tooltip-text-color: var(--st-white);
|
|
108
|
+
--st-tooltip-border-radius: 6px;
|
|
109
|
+
--st-tooltip-padding: 6px 10px;
|
|
110
|
+
--st-tooltip-font-size: 12px;
|
|
111
|
+
--st-tooltip-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
112
|
+
|
|
113
|
+
/* Header selection colors */
|
|
114
|
+
--st-header-selected-background-color: #3b82f6;
|
|
115
|
+
--st-header-selected-label-color: var(--st-white);
|
|
116
|
+
--st-header-selected-icon-color: var(--st-white);
|
|
117
|
+
--st-header-highlight-indicator-color: #dbeafe;
|
|
118
|
+
--st-selection-highlight-indicator-color: #f3f4f6;
|
|
119
|
+
|
|
120
|
+
/* Utility colors */
|
|
121
|
+
--st-loading-skeleton-bg-color: #f3f4f6;
|
|
122
|
+
--st-chart-color: #60a5fa;
|
|
123
|
+
--st-chart-fill-color: #93c5fd;
|
|
124
|
+
|
|
125
|
+
/* Drag and drop colors */
|
|
126
|
+
--st-drag-separator-color: #3b82f6;
|
|
127
|
+
|
|
128
|
+
/* Body background for state rows */
|
|
129
|
+
--st-body-background-color: var(--st-white);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Modern Light theme specific overrides for even cleaner look */
|
|
133
|
+
.theme-modern-light .st-wrapper {
|
|
134
|
+
border: 1px solid #f3f4f6;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Subtle header border */
|
|
138
|
+
.theme-modern-light .st-header-pinned-left,
|
|
139
|
+
.theme-modern-light .st-header-main,
|
|
140
|
+
.theme-modern-light .st-header-pinned-right {
|
|
141
|
+
border-bottom: 1px solid #f3f4f6;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Remove heavy borders on pinned sections */
|
|
145
|
+
.theme-modern-light .st-header-pinned-left,
|
|
146
|
+
.theme-modern-light .st-body-pinned-left {
|
|
147
|
+
border-right: 1px solid #f3f4f6;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.theme-modern-light .st-header-pinned-right,
|
|
151
|
+
.theme-modern-light .st-body-pinned-right {
|
|
152
|
+
border-left: 1px solid #f3f4f6;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Cleaner row separators */
|
|
156
|
+
.theme-modern-light .st-row-separator {
|
|
157
|
+
background-color: #f9fafb;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Lighter header cell styling */
|
|
161
|
+
.theme-modern-light .st-header-cell {
|
|
162
|
+
font-weight: 500;
|
|
163
|
+
font-size: 14px;
|
|
164
|
+
color: #6b7280;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Cleaner cell text */
|
|
168
|
+
.theme-modern-light .st-cell-content {
|
|
169
|
+
font-size: 14px;
|
|
170
|
+
color: #111827;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Subtle hover effect */
|
|
174
|
+
.theme-modern-light .st-row.hovered {
|
|
175
|
+
transition: background-color 0.15s ease;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Modern footer styling */
|
|
179
|
+
.theme-modern-light .st-footer {
|
|
180
|
+
border-top: 1px solid #f3f4f6;
|
|
181
|
+
background-color: var(--st-white);
|
|
182
|
+
padding: 12px 16px;
|
|
183
|
+
gap: 12px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Footer text styling */
|
|
187
|
+
.theme-modern-light .st-footer-results-text {
|
|
188
|
+
color: #6b7280;
|
|
189
|
+
font-size: 14px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* Footer pagination container - hide extra buttons on smaller screens */
|
|
193
|
+
.theme-modern-light .st-footer-pagination {
|
|
194
|
+
gap: 2px;
|
|
195
|
+
flex-wrap: nowrap;
|
|
196
|
+
overflow: hidden;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* Pagination ellipsis */
|
|
200
|
+
.theme-modern-light .st-page-ellipsis {
|
|
201
|
+
color: #9ca3af;
|
|
202
|
+
font-weight: 400;
|
|
203
|
+
padding: 0 4px;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Cleaner pagination buttons - more compact */
|
|
207
|
+
.theme-modern-light .st-page-btn {
|
|
208
|
+
border-radius: 6px;
|
|
209
|
+
font-size: 13px;
|
|
210
|
+
font-weight: 500;
|
|
211
|
+
color: #374151;
|
|
212
|
+
padding: 6px 8px;
|
|
213
|
+
min-width: 36px;
|
|
214
|
+
transition: all 0.15s ease;
|
|
215
|
+
margin-right: 0;
|
|
216
|
+
flex-shrink: 0;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.theme-modern-light .st-page-btn:hover {
|
|
220
|
+
background-color: #f3f4f6;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.theme-modern-light .st-page-btn.active {
|
|
224
|
+
background-color: #3b82f6;
|
|
225
|
+
color: white;
|
|
226
|
+
font-weight: 600;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* Hide buttons beyond the 9th one to prevent overflow */
|
|
230
|
+
.theme-modern-light .st-page-btn:nth-child(n+10):not(.active) {
|
|
231
|
+
display: none;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* Always show active button and adjacent buttons */
|
|
235
|
+
.theme-modern-light .st-page-btn.active,
|
|
236
|
+
.theme-modern-light .st-page-btn.active + .st-page-btn,
|
|
237
|
+
.theme-modern-light .st-page-btn:has(+ .st-page-btn.active) {
|
|
238
|
+
display: inline-flex;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Next/Prev buttons */
|
|
242
|
+
.theme-modern-light .st-next-prev-btn {
|
|
243
|
+
padding: 6px 8px;
|
|
244
|
+
border-radius: 6px;
|
|
245
|
+
transition: all 0.15s ease;
|
|
246
|
+
margin-left: 4px;
|
|
247
|
+
flex-shrink: 0;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.theme-modern-light .st-next-prev-btn:not(.disabled):hover {
|
|
251
|
+
background-color: #f3f4f6;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* Modern scrollbar */
|
|
255
|
+
.theme-modern-light .st-horizontal-scrollbar-container {
|
|
256
|
+
border-top: 1px solid #f3f4f6;
|
|
257
|
+
background-color: #fafafa;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* Cleaner group headers */
|
|
261
|
+
.theme-modern-light .st-group-header {
|
|
262
|
+
border-bottom: 1px solid #f3f4f6;
|
|
263
|
+
font-weight: 500;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* Modern checkbox styling */
|
|
267
|
+
.theme-modern-light .st-checkbox-custom {
|
|
268
|
+
border-radius: 4px;
|
|
269
|
+
border: 1.5px solid #d1d5db;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.theme-modern-light .st-checkbox-custom.st-checked {
|
|
273
|
+
background-color: #3b82f6;
|
|
274
|
+
border-color: #3b82f6;
|
|
275
|
+
}
|
package/dist/Animate-85a426a3.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{_ as n,u as i,a as t,c as o,b as e,A as a,d as r,f as l,R as d}from"./index-57a11501.js";import{jsx as u}from"react/jsx-runtime";import{useRef as f,useMemo as s,useLayoutEffect as v}from"react";var m=function(m){var p=m.children,h=m.id,M=m.parentRef,c=m.tableRow,Y=n(m,["children","id","parentRef","tableRow"]),C=i(),g=C.allowAnimations,x=C.isResizing,R=C.isScrolling,b=C.rowHeight,j=f(null),A=f(null),B=t(R),w=t(x),_=s(function(){return o(b)},[b]);return v(function(){var n,i,t,o;if(g&&j.current&&!x){var u=j.current.getBoundingClientRect(),f=A.current;if(!R)if(!B||R)if(!w||x){if(A.current=u,f){var s=u.x-f.x,v=u.y-f.y;if((Math.abs(s)>=50||Math.abs(v)>5)&&(Math.abs(s)>5||Math.abs(v)>5)){var m=e(e({},a.ROW_REORDER),{onComplete:function(){j.current&&(j.current.style.zIndex="",j.current.style.position="",j.current.style.top="")}}),p=null===(n=null==M?void 0:M.current)||void 0===n?void 0:n.scrollTop,h=null===(i=null==M?void 0:M.current)||void 0===i?void 0:i.clientHeight,Y=null===(t=null==M?void 0:M.current)||void 0===t?void 0:t.scrollHeight;if(void 0!==p&&void 0!==h&&void 0!==Y){var C=_*(b+d),k=p-C,q=p+h+C,y=f.y>k&&q>f.y,z=u.y>k&&q>u.y,D=p>u.y,E=null!==(o=null==c?void 0:c.position)&&void 0!==o?o:0,F=.6*b,G=function(n,i,t){return Math.min(900,Math.max(100,100+80*Math.log10(Math.max(1,Math.min(Math.abs(n-i),Math.abs(n-t))))))};if(y&&!z&&u.y>p+h){var H=G(u.y,p,p+h);return void r({element:j.current,options:{startY:f.y,endY:p+h+H+E%15*F*2.5+E%7*.4*b,finalY:u.y,duration:m.duration,easing:m.easing,onComplete:m.onComplete}})}if(y&&!z&&D)return H=G(u.y,p,p+h),void r({element:j.current,options:{startY:f.y,endY:p-H-E%15*F*2.5-E%7*.4*b,finalY:u.y,duration:m.duration,easing:m.easing,onComplete:m.onComplete}});if(!y&&z&&f.y>p+h)return H=G(f.y,p,p+h),void r({element:j.current,options:{startY:p+h+H+E%10*F*1,endY:u.y,duration:m.duration,easing:m.easing,onComplete:m.onComplete}});if(!y&&z&&p>f.y)return H=G(f.y,p,p+h),void r({element:j.current,options:{startY:p-H-E%10*F*1,endY:u.y,duration:m.duration,easing:m.easing,onComplete:m.onComplete}})}l({element:j.current,fromBounds:f,toBounds:u,finalConfig:m})}}}else A.current=u;else A.current=u}},[g,_,x,R,M,B,w,b,null==c?void 0:c.position,c]),u("div",e({ref:j,"data-animate-id":h,id:h+""},Y,{children:p}))};m.displayName="Animate";export{m as Animate,m as default};
|
|
2
|
-
//# sourceMappingURL=Animate-85a426a3.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Animate-85a426a3.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker-9d5825ee.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var n=require("./index-63f4ad95.js"),e=require("react/jsx-runtime"),i=require("react"),t=function(t){var o=t.children,r=t.id,a=t.parentRef,l=t.tableRow,d=n.__rest(t,["children","id","parentRef","tableRow"]),u=n.useTableContext(),v=u.allowAnimations,f=u.isResizing,s=u.isScrolling,m=u.rowHeight,h=i.useRef(null),p=i.useRef(null),M=n.usePrevious(s),c=n.usePrevious(f),Y=i.useMemo(function(){return n.calculateBufferRowCount(m)},[m]);return i.useLayoutEffect(function(){var e,i,t,o;if(v&&h.current&&!f){var r=h.current.getBoundingClientRect(),d=p.current;if(!s)if(!M||s)if(!c||f){if(p.current=r,d){var u=r.x-d.x,C=r.y-d.y;if((Math.abs(u)>=50||Math.abs(C)>5)&&(Math.abs(u)>5||Math.abs(C)>5)){var g=n.__assign(n.__assign({},n.ANIMATION_CONFIGS.ROW_REORDER),{onComplete:function(){h.current&&(h.current.style.zIndex="",h.current.style.position="",h.current.style.top="")}}),x=null===(e=null==a?void 0:a.current)||void 0===e?void 0:e.scrollTop,q=null===(i=null==a?void 0:a.current)||void 0===i?void 0:i.clientHeight,j=null===(t=null==a?void 0:a.current)||void 0===t?void 0:t.scrollHeight;if(void 0!==x&&void 0!==q&&void 0!==j){var B=Y*(m+n.ROW_SEPARATOR_WIDTH),R=x-B,b=x+q+B,w=d.y>R&&b>d.y,A=r.y>R&&b>r.y,k=x>r.y,y=null!==(o=null==l?void 0:l.position)&&void 0!==o?o:0,z=.6*m,D=function(n,e,i){return Math.min(900,Math.max(100,100+80*Math.log10(Math.max(1,Math.min(Math.abs(n-e),Math.abs(n-i))))))};if(w&&!A&&r.y>x+q){var E=D(r.y,x,x+q);return void n.animateWithCustomCoordinates({element:h.current,options:{startY:d.y,endY:x+q+E+y%15*z*2.5+y%7*.4*m,finalY:r.y,duration:g.duration,easing:g.easing,onComplete:g.onComplete}})}if(w&&!A&&k)return E=D(r.y,x,x+q),void n.animateWithCustomCoordinates({element:h.current,options:{startY:d.y,endY:x-E-y%15*z*2.5-y%7*.4*m,finalY:r.y,duration:g.duration,easing:g.easing,onComplete:g.onComplete}});if(!w&&A&&d.y>x+q)return E=D(d.y,x,x+q),void n.animateWithCustomCoordinates({element:h.current,options:{startY:x+q+E+y%10*z*1,endY:r.y,duration:g.duration,easing:g.easing,onComplete:g.onComplete}});if(!w&&A&&x>d.y)return E=D(d.y,x,x+q),void n.animateWithCustomCoordinates({element:h.current,options:{startY:x-E-y%10*z*1,endY:r.y,duration:g.duration,easing:g.easing,onComplete:g.onComplete}})}n.flipElement({element:h.current,fromBounds:d,toBounds:r,finalConfig:g})}}}else p.current=r;else p.current=r}},[v,Y,f,s,a,M,c,m,null==l?void 0:l.position,l]),e.jsx("div",n.__assign({ref:h,"data-animate-id":r,id:r+""},d,{children:o}))};t.displayName="Animate",exports.Animate=t,exports.default=t;
|
|
2
|
-
//# sourceMappingURL=Animate-18759d53.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Animate-18759d53.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker-3d0a5721.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|