mithril-materialized 2.0.0-beta.12 → 2.0.0-beta.14
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 +35 -1
- package/dist/forms.css +325 -0
- package/dist/index.css +326 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +832 -3
- package/dist/index.js +833 -2
- package/dist/index.min.css +1 -1
- package/dist/index.umd.js +833 -2
- package/dist/input-options.d.ts +18 -4
- package/dist/range-slider.d.ts +4 -0
- package/package.json +2 -2
- package/sass/components/forms/_forms.scss +1 -1
- package/sass/components/forms/_range-enhanced.scss +393 -0
- package/sass/materialize.scss +1 -0
package/dist/input-options.d.ts
CHANGED
|
@@ -37,10 +37,10 @@ export interface InputAttrs<T = string> extends Attributes {
|
|
|
37
37
|
onkeyup?: (ev: KeyboardEvent, value?: T) => void;
|
|
38
38
|
/** Invoked when the element looses focus */
|
|
39
39
|
onblur?: (ev: FocusEvent) => void;
|
|
40
|
-
/** Invoked when the value changes. */
|
|
41
|
-
oninput?: (value: T) => void;
|
|
42
|
-
/** Invoked when the input looses focus. */
|
|
43
|
-
onchange?: (value: T) => void;
|
|
40
|
+
/** Invoked when the value changes (immediate feedback). For range sliders with minmax, second parameter is maxValue. */
|
|
41
|
+
oninput?: (value: T, maxValue?: T) => void;
|
|
42
|
+
/** Invoked when the input looses focus. For range sliders with minmax, second parameter is maxValue. */
|
|
43
|
+
onchange?: (value: T, maxValue?: T) => void;
|
|
44
44
|
/** Add a a placeholder to the input field. */
|
|
45
45
|
placeholder?: string;
|
|
46
46
|
/** Add a description underneath the input field. */
|
|
@@ -82,4 +82,18 @@ export interface InputAttrs<T = string> extends Attributes {
|
|
|
82
82
|
isMandatory?: boolean;
|
|
83
83
|
/** Add the required and aria-required attributes to the input element */
|
|
84
84
|
required?: boolean;
|
|
85
|
+
/** For range inputs: render vertically instead of horizontally */
|
|
86
|
+
vertical?: boolean;
|
|
87
|
+
/** For range inputs: enable dual thumb (min/max) range selection */
|
|
88
|
+
minmax?: boolean;
|
|
89
|
+
/** For range inputs with minmax: initial minimum value */
|
|
90
|
+
minValue?: number;
|
|
91
|
+
/** For range inputs with minmax: initial maximum value */
|
|
92
|
+
maxValue?: number;
|
|
93
|
+
/** For range inputs: show value labels on thumbs */
|
|
94
|
+
showValue?: boolean;
|
|
95
|
+
/** For vertical range inputs: height of the slider */
|
|
96
|
+
height?: string;
|
|
97
|
+
/** For range inputs with showValue: position of value tooltips */
|
|
98
|
+
tooltipPos?: 'top' | 'bottom' | 'left' | 'right';
|
|
85
99
|
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import m from 'mithril';
|
|
2
|
+
import { InputAttrs } from './input-options';
|
|
3
|
+
export declare const renderSingleRangeWithTooltip: <T>(attrs: InputAttrs<T>, state: any, cn: string | undefined, style: any, iconName: string | undefined, id: string, label: string | undefined, isMandatory: boolean | undefined, helperText: string | undefined) => m.Vnode<any, any>;
|
|
4
|
+
export declare const renderMinMaxRange: <T>(attrs: InputAttrs<T>, state: any, cn: string | undefined, style: any, iconName: string | undefined, id: string, label: string | undefined, isMandatory: boolean | undefined, helperText: string | undefined) => m.Vnode<any, any>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mithril-materialized",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.14",
|
|
4
4
|
"description": "A materialize library for mithril.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -97,4 +97,4 @@
|
|
|
97
97
|
"typedoc": "^0.28.9",
|
|
98
98
|
"typescript": "^5.9.2"
|
|
99
99
|
}
|
|
100
|
-
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,393 @@
|
|
|
1
|
+
@use "../variables";
|
|
2
|
+
@use "../global";
|
|
3
|
+
|
|
4
|
+
/* Enhanced Range Sliders
|
|
5
|
+
========================================================================== */
|
|
6
|
+
|
|
7
|
+
.range-slider {
|
|
8
|
+
&.vertical {
|
|
9
|
+
-webkit-appearance: none;
|
|
10
|
+
appearance: none;
|
|
11
|
+
writing-mode: vertical-lr;
|
|
12
|
+
direction: rtl;
|
|
13
|
+
width: 6px;
|
|
14
|
+
transform: none;
|
|
15
|
+
|
|
16
|
+
&::-webkit-slider-runnable-track {
|
|
17
|
+
width: 6px;
|
|
18
|
+
height: 100%;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&::-webkit-slider-thumb {
|
|
22
|
+
-webkit-appearance: none;
|
|
23
|
+
width: variables.$range-height;
|
|
24
|
+
height: variables.$range-width;
|
|
25
|
+
margin-left: -4px;
|
|
26
|
+
margin-top: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&::-moz-range-track {
|
|
30
|
+
width: 6px;
|
|
31
|
+
height: 100%;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&::-moz-range-thumb {
|
|
35
|
+
width: variables.$range-height;
|
|
36
|
+
height: variables.$range-width;
|
|
37
|
+
margin-left: -12px;
|
|
38
|
+
margin-top: 0;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&.disabled {
|
|
43
|
+
opacity: 0.6;
|
|
44
|
+
cursor: not-allowed;
|
|
45
|
+
|
|
46
|
+
&::-webkit-slider-thumb {
|
|
47
|
+
cursor: not-allowed;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&::-moz-range-thumb {
|
|
51
|
+
cursor: not-allowed;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.single-range-slider {
|
|
57
|
+
// Container styles
|
|
58
|
+
outline: none; // Remove default focus outline
|
|
59
|
+
// border-radius: 4px; // Slight rounding for focus indicator
|
|
60
|
+
|
|
61
|
+
&.horizontal {
|
|
62
|
+
height: 40px;
|
|
63
|
+
position: relative;
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&.vertical {
|
|
69
|
+
width: 40px;
|
|
70
|
+
position: relative;
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
align-items: center;
|
|
74
|
+
height: 100%;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.track {
|
|
78
|
+
background-color: var(--mm-border-color, #c2c0c2);
|
|
79
|
+
border-radius: 2px;
|
|
80
|
+
|
|
81
|
+
&.horizontal {
|
|
82
|
+
position: absolute;
|
|
83
|
+
top: 25%;
|
|
84
|
+
left: 0;
|
|
85
|
+
transform: translateY(-50%);
|
|
86
|
+
width: 100%;
|
|
87
|
+
height: 4px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&.vertical {
|
|
91
|
+
position: absolute;
|
|
92
|
+
bottom: 10px;
|
|
93
|
+
width: 4px;
|
|
94
|
+
height: 100%;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.range-progress {
|
|
99
|
+
background-color: var(--mm-primary-color, #26a69a);
|
|
100
|
+
border-radius: 2px;
|
|
101
|
+
|
|
102
|
+
&.horizontal {
|
|
103
|
+
position: absolute;
|
|
104
|
+
top: 25%;
|
|
105
|
+
transform: translateY(-50%);
|
|
106
|
+
height: 4px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&.vertical {
|
|
110
|
+
position: absolute;
|
|
111
|
+
bottom: 10px;
|
|
112
|
+
width: 4px;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.thumb {
|
|
117
|
+
background-color: var(--mm-primary-color, #26a69a);
|
|
118
|
+
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
119
|
+
width: 20px;
|
|
120
|
+
height: 20px;
|
|
121
|
+
border-radius: 50%;
|
|
122
|
+
cursor: pointer;
|
|
123
|
+
outline: none;
|
|
124
|
+
|
|
125
|
+
&.horizontal {
|
|
126
|
+
position: absolute;
|
|
127
|
+
transform: translateY(-50%);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&.vertical {
|
|
131
|
+
position: absolute;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&:hover {
|
|
135
|
+
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.value-tooltip {
|
|
139
|
+
position: absolute;
|
|
140
|
+
background: var(--mm-primary-color, #26a69a);
|
|
141
|
+
color: white;
|
|
142
|
+
padding: 4px 8px;
|
|
143
|
+
border-radius: 4px;
|
|
144
|
+
font-size: 12px;
|
|
145
|
+
white-space: nowrap;
|
|
146
|
+
min-width: 24px;
|
|
147
|
+
text-align: center;
|
|
148
|
+
pointer-events: none;
|
|
149
|
+
z-index: 20;
|
|
150
|
+
|
|
151
|
+
&.top {
|
|
152
|
+
bottom: 100%;
|
|
153
|
+
left: 50%;
|
|
154
|
+
transform: translateX(-50%);
|
|
155
|
+
margin-bottom: 8px;
|
|
156
|
+
|
|
157
|
+
&::after {
|
|
158
|
+
content: '';
|
|
159
|
+
position: absolute;
|
|
160
|
+
top: 100%;
|
|
161
|
+
left: 50%;
|
|
162
|
+
transform: translateX(-50%);
|
|
163
|
+
border: 4px solid transparent;
|
|
164
|
+
border-top-color: var(--mm-primary-color, #26a69a);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&.bottom {
|
|
169
|
+
top: 100%;
|
|
170
|
+
left: 50%;
|
|
171
|
+
transform: translateX(-50%);
|
|
172
|
+
margin-top: 8px;
|
|
173
|
+
|
|
174
|
+
&::after {
|
|
175
|
+
content: '';
|
|
176
|
+
position: absolute;
|
|
177
|
+
bottom: 100%;
|
|
178
|
+
left: 50%;
|
|
179
|
+
transform: translateX(-50%);
|
|
180
|
+
border: 4px solid transparent;
|
|
181
|
+
border-bottom-color: var(--mm-primary-color, #26a69a);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&.left {
|
|
186
|
+
right: 100%;
|
|
187
|
+
top: 50%;
|
|
188
|
+
transform: translateY(-50%);
|
|
189
|
+
margin-right: 8px;
|
|
190
|
+
|
|
191
|
+
&::after {
|
|
192
|
+
content: '';
|
|
193
|
+
position: absolute;
|
|
194
|
+
top: 50%;
|
|
195
|
+
left: 100%;
|
|
196
|
+
transform: translateY(-50%);
|
|
197
|
+
border: 4px solid transparent;
|
|
198
|
+
border-left-color: var(--mm-primary-color, #26a69a);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&.right {
|
|
203
|
+
left: 100%;
|
|
204
|
+
top: 50%;
|
|
205
|
+
transform: translateY(-50%);
|
|
206
|
+
margin-left: 8px;
|
|
207
|
+
|
|
208
|
+
&::after {
|
|
209
|
+
content: '';
|
|
210
|
+
position: absolute;
|
|
211
|
+
top: 50%;
|
|
212
|
+
right: 100%;
|
|
213
|
+
transform: translateY(-50%);
|
|
214
|
+
border: 4px solid transparent;
|
|
215
|
+
border-right-color: var(--mm-primary-color, #26a69a);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
// Focus styling - show outline only on thumb when slider has focus
|
|
222
|
+
&:focus .thumb,
|
|
223
|
+
&:focus-visible .thumb {
|
|
224
|
+
box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.2);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
&:focus .thumb:hover,
|
|
228
|
+
&:focus-visible .thumb:hover {
|
|
229
|
+
box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.3);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.double-range-slider {
|
|
234
|
+
// Container styles
|
|
235
|
+
outline: none; // Remove default focus outline
|
|
236
|
+
border-radius: 4px; // Slight rounding for focus indicator
|
|
237
|
+
|
|
238
|
+
&.horizontal {
|
|
239
|
+
height: 40px;
|
|
240
|
+
position: relative;
|
|
241
|
+
display: flex;
|
|
242
|
+
align-items: center;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&.vertical {
|
|
246
|
+
width: 40px;
|
|
247
|
+
position: relative;
|
|
248
|
+
display: flex;
|
|
249
|
+
flex-direction: column;
|
|
250
|
+
align-items: center;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.track {
|
|
254
|
+
background-color: var(--mm-border-color, #c2c0c2);
|
|
255
|
+
border-radius: 2px;
|
|
256
|
+
|
|
257
|
+
&.horizontal {
|
|
258
|
+
position: absolute;
|
|
259
|
+
top: 50%;
|
|
260
|
+
left: 0;
|
|
261
|
+
transform: translateY(-50%);
|
|
262
|
+
width: 100%;
|
|
263
|
+
height: 4px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
&.vertical {
|
|
267
|
+
position: absolute;
|
|
268
|
+
left: 50%;
|
|
269
|
+
top: 0;
|
|
270
|
+
transform: translateX(-50%);
|
|
271
|
+
width: 4px;
|
|
272
|
+
height: 100%;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.range {
|
|
277
|
+
background-color: var(--mm-primary-color, #26a69a);
|
|
278
|
+
border-radius: 2px;
|
|
279
|
+
|
|
280
|
+
&.horizontal {
|
|
281
|
+
position: absolute;
|
|
282
|
+
top: 50%;
|
|
283
|
+
transform: translateY(-50%);
|
|
284
|
+
height: 4px;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
&.vertical {
|
|
288
|
+
position: absolute;
|
|
289
|
+
left: 50%;
|
|
290
|
+
transform: translateX(-50%);
|
|
291
|
+
width: 4px;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.thumb {
|
|
296
|
+
background-color: var(--mm-primary-color, #26a69a);
|
|
297
|
+
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
298
|
+
width: 20px;
|
|
299
|
+
height: 20px;
|
|
300
|
+
border-radius: 50%;
|
|
301
|
+
cursor: pointer;
|
|
302
|
+
outline: none;
|
|
303
|
+
|
|
304
|
+
&.horizontal {
|
|
305
|
+
position: absolute;
|
|
306
|
+
top: 50%;
|
|
307
|
+
transform: translateY(-50%);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
&.vertical {
|
|
311
|
+
position: absolute;
|
|
312
|
+
left: 50%;
|
|
313
|
+
transform: translateX(-50%);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
&:hover {
|
|
317
|
+
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.value {
|
|
321
|
+
position: absolute;
|
|
322
|
+
background: var(--mm-primary-color, #26a69a);
|
|
323
|
+
color: white;
|
|
324
|
+
padding: 2px 6px;
|
|
325
|
+
border-radius: 4px;
|
|
326
|
+
font-size: 12px;
|
|
327
|
+
white-space: nowrap;
|
|
328
|
+
min-width: 24px;
|
|
329
|
+
text-align: center;
|
|
330
|
+
pointer-events: none;
|
|
331
|
+
z-index: 20;
|
|
332
|
+
|
|
333
|
+
&.horizontal {
|
|
334
|
+
top: -30px;
|
|
335
|
+
left: 50%;
|
|
336
|
+
transform: translateX(-50%);
|
|
337
|
+
|
|
338
|
+
&::after {
|
|
339
|
+
content: '';
|
|
340
|
+
position: absolute;
|
|
341
|
+
top: 100%;
|
|
342
|
+
left: 50%;
|
|
343
|
+
transform: translateX(-50%);
|
|
344
|
+
border: 4px solid transparent;
|
|
345
|
+
border-top-color: var(--mm-primary-color, #26a69a);
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
&.vertical {
|
|
350
|
+
top: 50%;
|
|
351
|
+
left: -35px;
|
|
352
|
+
transform: translateY(-50%);
|
|
353
|
+
|
|
354
|
+
&::after {
|
|
355
|
+
content: '';
|
|
356
|
+
position: absolute;
|
|
357
|
+
top: 50%;
|
|
358
|
+
left: 100%;
|
|
359
|
+
transform: translateY(-50%);
|
|
360
|
+
border: 4px solid transparent;
|
|
361
|
+
border-left-color: var(--mm-primary-color, #26a69a);
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
// Focus styling for active thumb
|
|
368
|
+
&:focus .thumb.min-thumb.active,
|
|
369
|
+
&:focus .thumb.max-thumb.active,
|
|
370
|
+
&:focus-visible .thumb.min-thumb.active,
|
|
371
|
+
&:focus-visible .thumb.max-thumb.active {
|
|
372
|
+
box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.2);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
&:focus .thumb.min-thumb.active:hover,
|
|
376
|
+
&:focus .thumb.max-thumb.active:hover,
|
|
377
|
+
&:focus-visible .thumb.min-thumb.active:hover,
|
|
378
|
+
&:focus-visible .thumb.max-thumb.active:hover {
|
|
379
|
+
box-shadow: 0 0 0 3px var(--mm-primary-color-alpha-30, rgba(38, 166, 154, 0.3)), 0 4px 8px rgba(0,0,0,0.3);
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.range-field.vertical {
|
|
384
|
+
display: flex;
|
|
385
|
+
flex-direction: column;
|
|
386
|
+
align-items: center;
|
|
387
|
+
min-height: 100px;
|
|
388
|
+
padding-top: 20px;
|
|
389
|
+
|
|
390
|
+
.double-range-slider {
|
|
391
|
+
height: 100%;
|
|
392
|
+
}
|
|
393
|
+
}
|
package/sass/materialize.scss
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
@use "components/chips";
|
|
34
34
|
@use "components/materialbox";
|
|
35
35
|
@use "components/forms/forms";
|
|
36
|
+
@use "components/forms/range-enhanced"; // Enhanced custom range sliders with vertical and double-thumb support
|
|
36
37
|
@use "components/table_of_contents";
|
|
37
38
|
@use "components/sidenav";
|
|
38
39
|
@use "components/preloader";
|