mithril-materialized 2.0.0-beta.10 → 2.0.0-beta.11
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/README.md +18 -19
- package/dist/advanced.css +6 -6
- package/dist/button.d.ts +56 -11
- package/dist/components.css +6 -6
- package/dist/core.css +13 -13
- package/dist/datatable.d.ts +291 -0
- package/dist/forms.css +13 -13
- package/dist/index.css +341 -16
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +1074 -442
- package/dist/index.js +1077 -441
- package/dist/index.min.css +2 -2
- package/dist/index.umd.js +1077 -441
- package/dist/input.d.ts +0 -1
- package/dist/types.d.ts +226 -0
- package/dist/utilities.css +16 -9
- package/package.json +5 -2
- package/sass/components/_cards.scss +10 -3
- package/sass/components/_datatable.scss +417 -0
- package/sass/components/_global.scss +6 -6
- package/sass/components/forms/_range.scss +5 -5
- package/sass/components/forms/_select.scss +1 -1
- package/sass/materialize.scss +1 -0
|
@@ -0,0 +1,417 @@
|
|
|
1
|
+
@use "variables";
|
|
2
|
+
|
|
3
|
+
// DataTable Container
|
|
4
|
+
.datatable-container {
|
|
5
|
+
background: var(--mm-card-background);
|
|
6
|
+
color: var(--mm-text-primary);
|
|
7
|
+
border-radius: 4px;
|
|
8
|
+
|
|
9
|
+
.datatable-title {
|
|
10
|
+
color: var(--mm-text-primary);
|
|
11
|
+
font-weight: 400;
|
|
12
|
+
margin-bottom: 1rem;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.datatable-global-search {
|
|
16
|
+
padding-top: .5rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.datatable-wrapper {
|
|
20
|
+
position: relative;
|
|
21
|
+
background: var(--mm-card-background);
|
|
22
|
+
border-radius: 4px;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.table-wrapper {
|
|
27
|
+
overflow-x: auto;
|
|
28
|
+
width: 100%;
|
|
29
|
+
-webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
|
|
30
|
+
background: var(--mm-card-background);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Loading State
|
|
34
|
+
.datatable-loading {
|
|
35
|
+
padding: 2rem;
|
|
36
|
+
text-align: center;
|
|
37
|
+
color: var(--mm-text-secondary);
|
|
38
|
+
background: var(--mm-card-background);
|
|
39
|
+
|
|
40
|
+
.preloader-wrapper {
|
|
41
|
+
margin-bottom: 1rem;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Empty State
|
|
46
|
+
.datatable-empty {
|
|
47
|
+
padding: 3rem 2rem;
|
|
48
|
+
text-align: center;
|
|
49
|
+
color: var(--mm-text-secondary);
|
|
50
|
+
font-style: italic;
|
|
51
|
+
background: var(--mm-card-background);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// DataTable Specific Enhancements
|
|
56
|
+
.datatable {
|
|
57
|
+
background: var(--mm-card-background);
|
|
58
|
+
color: var(--mm-text-primary);
|
|
59
|
+
border-collapse: collapse;
|
|
60
|
+
width: 100%;
|
|
61
|
+
|
|
62
|
+
// Table headers
|
|
63
|
+
thead {
|
|
64
|
+
background: var(--mm-card-background);
|
|
65
|
+
|
|
66
|
+
th {
|
|
67
|
+
background: var(--mm-card-background);
|
|
68
|
+
color: var(--mm-text-primary);
|
|
69
|
+
border-bottom: 1px solid var(--mm-border-color);
|
|
70
|
+
font-weight: 500;
|
|
71
|
+
padding: 12px 16px;
|
|
72
|
+
text-align: left;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Table body
|
|
77
|
+
tbody {
|
|
78
|
+
background: var(--mm-card-background);
|
|
79
|
+
|
|
80
|
+
td {
|
|
81
|
+
background: var(--mm-card-background);
|
|
82
|
+
color: var(--mm-text-primary);
|
|
83
|
+
border-bottom: 1px solid var(--mm-border-color);
|
|
84
|
+
padding: 12px 16px;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Sortable column headers
|
|
89
|
+
thead th.sortable {
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
user-select: none;
|
|
92
|
+
position: relative;
|
|
93
|
+
transition: background-color 0.2s ease;
|
|
94
|
+
|
|
95
|
+
&:hover {
|
|
96
|
+
background-color: var(--mm-dropdown-hover);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.sort-indicators {
|
|
100
|
+
position: absolute;
|
|
101
|
+
right: 8px;
|
|
102
|
+
top: 50%;
|
|
103
|
+
transform: translateY(-50%);
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
line-height: 1;
|
|
107
|
+
|
|
108
|
+
.sort-icon {
|
|
109
|
+
font-size: 16px;
|
|
110
|
+
color: var(--mm-text-disabled);
|
|
111
|
+
transition: color 0.2s ease;
|
|
112
|
+
|
|
113
|
+
&.active {
|
|
114
|
+
color: var(--mm-primary-color);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.sort-asc {
|
|
119
|
+
margin-bottom: 0px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.sort-desc {
|
|
123
|
+
margin-top: 0px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Add padding for sort icons
|
|
128
|
+
padding-right: 32px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// Column alignment classes
|
|
132
|
+
.align-left {
|
|
133
|
+
text-align: left;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.align-center {
|
|
137
|
+
text-align: center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.align-right {
|
|
141
|
+
text-align: right;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Row hover effects
|
|
145
|
+
tbody tr {
|
|
146
|
+
transition: background-color 0.2s ease;
|
|
147
|
+
cursor: pointer;
|
|
148
|
+
|
|
149
|
+
&:hover {
|
|
150
|
+
background-color: var(--mm-dropdown-hover);
|
|
151
|
+
|
|
152
|
+
td {
|
|
153
|
+
background-color: var(--mm-dropdown-hover);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// Enhanced striped rows for dark theme
|
|
159
|
+
&.striped tbody tr:nth-child(odd) {
|
|
160
|
+
background-color: var(--mm-dropdown-focus);
|
|
161
|
+
|
|
162
|
+
td {
|
|
163
|
+
background-color: var(--mm-dropdown-focus);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&:hover {
|
|
167
|
+
background-color: var(--mm-dropdown-hover);
|
|
168
|
+
|
|
169
|
+
td {
|
|
170
|
+
background-color: var(--mm-dropdown-hover);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Selection styles
|
|
176
|
+
.selection-checkbox {
|
|
177
|
+
width: 40px;
|
|
178
|
+
text-align: center;
|
|
179
|
+
padding: 0 8px !important;
|
|
180
|
+
|
|
181
|
+
label {
|
|
182
|
+
margin: 0;
|
|
183
|
+
height: 100%;
|
|
184
|
+
display: flex;
|
|
185
|
+
align-items: center;
|
|
186
|
+
justify-content: center;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
input[type="checkbox"] {
|
|
190
|
+
opacity: 1;
|
|
191
|
+
position: relative;
|
|
192
|
+
left: auto;
|
|
193
|
+
top: auto;
|
|
194
|
+
transform: none;
|
|
195
|
+
margin-right: 0;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// Selected row styles
|
|
200
|
+
tbody tr.selected {
|
|
201
|
+
background-color: var(--mm-dropdown-selected) !important;
|
|
202
|
+
|
|
203
|
+
td {
|
|
204
|
+
background-color: var(--mm-dropdown-selected) !important;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&:hover {
|
|
208
|
+
background-color: var(--mm-dropdown-selected) !important;
|
|
209
|
+
opacity: 0.9;
|
|
210
|
+
|
|
211
|
+
td {
|
|
212
|
+
background-color: var(--mm-dropdown-selected) !important;
|
|
213
|
+
opacity: 0.9;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
// Fixed header styles
|
|
219
|
+
&.fixed-header {
|
|
220
|
+
thead th {
|
|
221
|
+
position: sticky;
|
|
222
|
+
top: 0;
|
|
223
|
+
background: var(--mm-card-background);
|
|
224
|
+
z-index: 10;
|
|
225
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
// Pagination Component
|
|
231
|
+
.datatable-pagination {
|
|
232
|
+
margin-top: 1rem;
|
|
233
|
+
display: flex;
|
|
234
|
+
justify-content: space-between;
|
|
235
|
+
align-items: center;
|
|
236
|
+
flex-wrap: wrap;
|
|
237
|
+
gap: 1rem;
|
|
238
|
+
background: var(--mm-card-background);
|
|
239
|
+
color: var(--mm-text-primary);
|
|
240
|
+
padding: 1rem;
|
|
241
|
+
border-top: 1px solid var(--mm-border-color);
|
|
242
|
+
|
|
243
|
+
.pagination-info {
|
|
244
|
+
color: var(--mm-text-secondary);
|
|
245
|
+
font-size: 0.9rem;
|
|
246
|
+
flex: 1;
|
|
247
|
+
min-width: 200px;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.pagination-controls {
|
|
251
|
+
display: flex;
|
|
252
|
+
align-items: center;
|
|
253
|
+
gap: 0.5rem;
|
|
254
|
+
|
|
255
|
+
button.btn-flat {
|
|
256
|
+
min-width: 40px;
|
|
257
|
+
height: 40px;
|
|
258
|
+
padding: 0;
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
justify-content: center;
|
|
262
|
+
border-radius: 50%;
|
|
263
|
+
transition: background-color 0.2s ease;
|
|
264
|
+
background: transparent;
|
|
265
|
+
color: var(--mm-text-primary);
|
|
266
|
+
border: 1px solid var(--mm-border-color);
|
|
267
|
+
|
|
268
|
+
&:hover:not(:disabled) {
|
|
269
|
+
background-color: var(--mm-dropdown-hover);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
&:disabled {
|
|
273
|
+
color: var(--mm-text-disabled);
|
|
274
|
+
cursor: not-allowed;
|
|
275
|
+
border-color: var(--mm-text-disabled);
|
|
276
|
+
opacity: 0.6;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
i {
|
|
280
|
+
font-size: 20px;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.page-info {
|
|
285
|
+
margin: 0 0.5rem;
|
|
286
|
+
color: var(--mm-text-secondary);
|
|
287
|
+
font-weight: 500;
|
|
288
|
+
white-space: nowrap;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
// Responsive enhancements
|
|
294
|
+
@media #{variables.$medium-and-down} {
|
|
295
|
+
.datatable-container {
|
|
296
|
+
.datatable-search {
|
|
297
|
+
max-width: 100%;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.datatable-pagination {
|
|
301
|
+
flex-direction: column;
|
|
302
|
+
align-items: stretch;
|
|
303
|
+
text-align: center;
|
|
304
|
+
|
|
305
|
+
.pagination-info {
|
|
306
|
+
order: 2;
|
|
307
|
+
margin-top: 0.5rem;
|
|
308
|
+
text-align: center;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.pagination-controls {
|
|
312
|
+
order: 1;
|
|
313
|
+
justify-content: center;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
// Enhanced responsive table
|
|
319
|
+
.datatable.responsive-table {
|
|
320
|
+
// Hide certain columns on mobile if needed
|
|
321
|
+
&.mobile-hide-secondary {
|
|
322
|
+
th:nth-child(n+4),
|
|
323
|
+
td:nth-child(n+4) {
|
|
324
|
+
display: none;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
// Stack table cells on very small screens
|
|
329
|
+
@media #{variables.$small-and-down} {
|
|
330
|
+
&.mobile-stack {
|
|
331
|
+
thead {
|
|
332
|
+
display: none;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
tbody tr {
|
|
336
|
+
display: block;
|
|
337
|
+
border: 1px solid var(--mm-border-color);
|
|
338
|
+
margin-bottom: 1rem;
|
|
339
|
+
padding: 1rem;
|
|
340
|
+
border-radius: 4px;
|
|
341
|
+
background: var(--mm-card-background);
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
tbody td {
|
|
345
|
+
display: block;
|
|
346
|
+
text-align: left !important;
|
|
347
|
+
padding: 0.5rem 0;
|
|
348
|
+
border: none;
|
|
349
|
+
|
|
350
|
+
&::before {
|
|
351
|
+
content: attr(data-label) ": ";
|
|
352
|
+
font-weight: bold;
|
|
353
|
+
color: var(--mm-text-secondary);
|
|
354
|
+
display: inline-block;
|
|
355
|
+
min-width: 100px;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
// Dark theme specific adjustments
|
|
364
|
+
@media (prefers-color-scheme: dark) {
|
|
365
|
+
:root:not([data-theme]) .datatable-container,
|
|
366
|
+
[data-theme="dark"] .datatable-container {
|
|
367
|
+
.datatable thead th.sortable:hover {
|
|
368
|
+
background-color: var(--mm-dropdown-hover);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.datatable tbody tr:hover {
|
|
372
|
+
background-color: var(--mm-dropdown-hover);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.datatable.striped tbody tr:nth-child(odd) {
|
|
376
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.datatable.fixed-header thead th {
|
|
380
|
+
border-bottom: 1px solid var(--mm-border-color);
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
// Future: Virtual scrolling styles will be added in Phase 2
|
|
386
|
+
|
|
387
|
+
// Performance optimizations
|
|
388
|
+
.datatable {
|
|
389
|
+
// Use contain for better performance
|
|
390
|
+
contain: layout style paint;
|
|
391
|
+
|
|
392
|
+
// Enable hardware acceleration for smooth scrolling
|
|
393
|
+
&.virtual-table {
|
|
394
|
+
transform: translateZ(0);
|
|
395
|
+
backface-visibility: hidden;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
// Optimize row rendering
|
|
399
|
+
tbody tr {
|
|
400
|
+
// Use transform3d for better performance
|
|
401
|
+
transform: translateZ(0);
|
|
402
|
+
|
|
403
|
+
// Optimize paint operations
|
|
404
|
+
will-change: transform;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
// Optimize table layout
|
|
408
|
+
&.fixed-layout {
|
|
409
|
+
table-layout: fixed;
|
|
410
|
+
|
|
411
|
+
th, td {
|
|
412
|
+
overflow: hidden;
|
|
413
|
+
text-overflow: ellipsis;
|
|
414
|
+
white-space: nowrap;
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
}
|
|
@@ -177,20 +177,20 @@ video.responsive-video {
|
|
|
177
177
|
height: 30px;
|
|
178
178
|
|
|
179
179
|
a {
|
|
180
|
-
color: #444;
|
|
180
|
+
color: var(--mm-text-primary, #444);
|
|
181
181
|
display: inline-block;
|
|
182
182
|
font-size: 1.2rem;
|
|
183
183
|
padding: 0 10px;
|
|
184
184
|
line-height: 30px;
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
&.active a { color: #fff; }
|
|
187
|
+
&.active a { color: var(--mm-text-on-primary, #fff); }
|
|
188
188
|
|
|
189
189
|
&.active { background-color: variables.$primary-color; }
|
|
190
190
|
|
|
191
191
|
&.disabled a {
|
|
192
192
|
cursor: default;
|
|
193
|
-
color: #999;
|
|
193
|
+
color: var(--mm-text-disabled, #999);
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
i {
|
|
@@ -556,8 +556,8 @@ td, th{
|
|
|
556
556
|
i.circle {
|
|
557
557
|
font-size: 18px;
|
|
558
558
|
line-height: 42px;
|
|
559
|
-
color: #fff;
|
|
560
|
-
background-color: #999;
|
|
559
|
+
color: var(--mm-text-on-primary, #fff);
|
|
560
|
+
background-color: var(--mm-text-disabled, #999);
|
|
561
561
|
text-align: center;
|
|
562
562
|
}
|
|
563
563
|
|
|
@@ -588,7 +588,7 @@ td, th{
|
|
|
588
588
|
color: variables.$collection-active-color;
|
|
589
589
|
|
|
590
590
|
.secondary-content {
|
|
591
|
-
color: #fff;
|
|
591
|
+
color: var(--mm-text-on-primary, #fff);
|
|
592
592
|
}
|
|
593
593
|
}
|
|
594
594
|
}
|
|
@@ -66,7 +66,7 @@ input[type=range] + .thumb {
|
|
|
66
66
|
// Shared
|
|
67
67
|
@mixin range-track {
|
|
68
68
|
height: variables.$track-height;
|
|
69
|
-
background: #c2c0c2;
|
|
69
|
+
background: var(--mm-border-color, #c2c0c2);
|
|
70
70
|
border: none;
|
|
71
71
|
}
|
|
72
72
|
|
|
@@ -104,7 +104,7 @@ input[type=range]::-webkit-slider-thumb {
|
|
|
104
104
|
// FireFox
|
|
105
105
|
input[type=range] {
|
|
106
106
|
/* fix for FF unable to apply focus style bug */
|
|
107
|
-
border: 1px solid white;
|
|
107
|
+
border: 1px solid var(--mm-card-background, white);
|
|
108
108
|
|
|
109
109
|
/*required for proper track sizing in FF*/
|
|
110
110
|
}
|
|
@@ -124,7 +124,7 @@ input[type=range]::-moz-range-thumb {
|
|
|
124
124
|
|
|
125
125
|
// hide the outline behind the border
|
|
126
126
|
input[type=range]:-moz-focusring {
|
|
127
|
-
outline: 1px solid #fff;
|
|
127
|
+
outline: 1px solid var(--mm-card-background, #fff);
|
|
128
128
|
outline-offset: -1px;
|
|
129
129
|
}
|
|
130
130
|
|
|
@@ -148,11 +148,11 @@ input[type=range]::-ms-track {
|
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
input[type=range]::-ms-fill-lower {
|
|
151
|
-
background: #777;
|
|
151
|
+
background: var(--mm-text-secondary, #777);
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
input[type=range]::-ms-fill-upper {
|
|
155
|
-
background: #ddd;
|
|
155
|
+
background: var(--mm-surface-color, #ddd);
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
input[type=range]::-ms-thumb {
|
package/sass/materialize.scss
CHANGED