mithril-materialized 2.0.0-beta.7 → 2.0.0-beta.9
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/components.css +5 -5
- package/dist/core.css +8 -8
- package/dist/forms.css +8 -8
- package/dist/index.css +31 -21
- package/dist/index.esm.js +27 -22
- package/dist/index.js +27 -22
- package/dist/index.min.css +2 -2
- package/dist/index.umd.js +27 -22
- package/dist/label.d.ts +2 -0
- package/dist/utilities.css +8 -8
- package/package.json +1 -1
- package/sass/components/_chips.scss +8 -8
- package/sass/components/_dropdown.scss +5 -5
- package/sass/components/_theme-variables.scss +18 -0
- package/sass/components/_timepicker.scss +1 -1
- package/sass/components/forms/_select.scss +8 -8
package/dist/components.css
CHANGED
|
@@ -1063,7 +1063,7 @@ button.btn-floating {
|
|
|
1063
1063
|
}
|
|
1064
1064
|
|
|
1065
1065
|
.dropdown-content {
|
|
1066
|
-
background-color: #fff;
|
|
1066
|
+
background-color: var(--mm-surface-color, #fff);
|
|
1067
1067
|
margin: 0;
|
|
1068
1068
|
display: none;
|
|
1069
1069
|
min-width: 100px;
|
|
@@ -1080,7 +1080,7 @@ button.btn-floating {
|
|
|
1080
1080
|
}
|
|
1081
1081
|
.dropdown-content li {
|
|
1082
1082
|
clear: both;
|
|
1083
|
-
color: rgba(0, 0, 0, 0.87);
|
|
1083
|
+
color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
1084
1084
|
cursor: pointer;
|
|
1085
1085
|
min-height: 50px;
|
|
1086
1086
|
line-height: 1.5rem;
|
|
@@ -1088,7 +1088,7 @@ button.btn-floating {
|
|
|
1088
1088
|
text-align: left;
|
|
1089
1089
|
}
|
|
1090
1090
|
.dropdown-content li:hover, .dropdown-content li.active {
|
|
1091
|
-
background-color: #eee;
|
|
1091
|
+
background-color: var(--mm-dropdown-hover, #eee);
|
|
1092
1092
|
}
|
|
1093
1093
|
.dropdown-content li:focus {
|
|
1094
1094
|
outline: none;
|
|
@@ -1099,7 +1099,7 @@ button.btn-floating {
|
|
|
1099
1099
|
}
|
|
1100
1100
|
.dropdown-content li > a, .dropdown-content li > span {
|
|
1101
1101
|
font-size: 16px;
|
|
1102
|
-
color: #26a69a;
|
|
1102
|
+
color: var(--mm-text-primary, #26a69a);
|
|
1103
1103
|
display: block;
|
|
1104
1104
|
line-height: 22px;
|
|
1105
1105
|
padding: 14px 16px;
|
|
@@ -1118,7 +1118,7 @@ button.btn-floating {
|
|
|
1118
1118
|
}
|
|
1119
1119
|
|
|
1120
1120
|
body.keyboard-focused .dropdown-content li:focus {
|
|
1121
|
-
background-color: rgb(217.6, 217.6, 217.6);
|
|
1121
|
+
background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
|
|
1122
1122
|
}
|
|
1123
1123
|
|
|
1124
1124
|
.input-field.col .dropdown-content [type=checkbox] + label {
|
package/dist/core.css
CHANGED
|
@@ -3088,7 +3088,7 @@ select {
|
|
|
3088
3088
|
bottom: 0;
|
|
3089
3089
|
margin: auto 0;
|
|
3090
3090
|
z-index: 0;
|
|
3091
|
-
fill: rgba(0, 0, 0, 0.87);
|
|
3091
|
+
fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
3092
3092
|
}
|
|
3093
3093
|
.select-wrapper + label {
|
|
3094
3094
|
position: absolute;
|
|
@@ -3128,19 +3128,19 @@ select:disabled {
|
|
|
3128
3128
|
.select-dropdown li.disabled,
|
|
3129
3129
|
.select-dropdown li.disabled > span,
|
|
3130
3130
|
.select-dropdown li.optgroup {
|
|
3131
|
-
color: rgba(0, 0, 0, 0.3);
|
|
3131
|
+
color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
|
|
3132
3132
|
background-color: transparent;
|
|
3133
3133
|
}
|
|
3134
3134
|
|
|
3135
3135
|
body.keyboard-focused .select-dropdown.dropdown-content li:focus {
|
|
3136
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
3136
|
+
background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
|
|
3137
3137
|
}
|
|
3138
3138
|
|
|
3139
3139
|
.select-dropdown.dropdown-content li:hover {
|
|
3140
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
3140
|
+
background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
|
|
3141
3141
|
}
|
|
3142
3142
|
.select-dropdown.dropdown-content li.selected {
|
|
3143
|
-
background-color: rgba(0, 0, 0, 0.03);
|
|
3143
|
+
background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
|
|
3144
3144
|
}
|
|
3145
3145
|
|
|
3146
3146
|
.prefix ~ .select-wrapper {
|
|
@@ -3161,13 +3161,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
|
|
|
3161
3161
|
}
|
|
3162
3162
|
|
|
3163
3163
|
.select-dropdown li.optgroup {
|
|
3164
|
-
border-top: 1px solid #eee;
|
|
3164
|
+
border-top: 1px solid var(--mm-border-color, #eee);
|
|
3165
3165
|
}
|
|
3166
3166
|
.select-dropdown li.optgroup.selected > span {
|
|
3167
|
-
color: rgba(0, 0, 0, 0.7);
|
|
3167
|
+
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
|
|
3168
3168
|
}
|
|
3169
3169
|
.select-dropdown li.optgroup > span {
|
|
3170
|
-
color: rgba(0, 0, 0, 0.4);
|
|
3170
|
+
color: var(--mm-text-hint, rgba(0, 0, 0, 0.4));
|
|
3171
3171
|
}
|
|
3172
3172
|
.select-dropdown li.optgroup ~ li.optgroup-option {
|
|
3173
3173
|
padding-left: 1rem;
|
package/dist/forms.css
CHANGED
|
@@ -1338,7 +1338,7 @@ select {
|
|
|
1338
1338
|
bottom: 0;
|
|
1339
1339
|
margin: auto 0;
|
|
1340
1340
|
z-index: 0;
|
|
1341
|
-
fill: rgba(0, 0, 0, 0.87);
|
|
1341
|
+
fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
1342
1342
|
}
|
|
1343
1343
|
.select-wrapper + label {
|
|
1344
1344
|
position: absolute;
|
|
@@ -1378,19 +1378,19 @@ select:disabled {
|
|
|
1378
1378
|
.select-dropdown li.disabled,
|
|
1379
1379
|
.select-dropdown li.disabled > span,
|
|
1380
1380
|
.select-dropdown li.optgroup {
|
|
1381
|
-
color: rgba(0, 0, 0, 0.3);
|
|
1381
|
+
color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
|
|
1382
1382
|
background-color: transparent;
|
|
1383
1383
|
}
|
|
1384
1384
|
|
|
1385
1385
|
body.keyboard-focused .select-dropdown.dropdown-content li:focus {
|
|
1386
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
1386
|
+
background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
|
|
1387
1387
|
}
|
|
1388
1388
|
|
|
1389
1389
|
.select-dropdown.dropdown-content li:hover {
|
|
1390
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
1390
|
+
background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
|
|
1391
1391
|
}
|
|
1392
1392
|
.select-dropdown.dropdown-content li.selected {
|
|
1393
|
-
background-color: rgba(0, 0, 0, 0.03);
|
|
1393
|
+
background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
|
|
1394
1394
|
}
|
|
1395
1395
|
|
|
1396
1396
|
.prefix ~ .select-wrapper {
|
|
@@ -1411,13 +1411,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
|
|
|
1411
1411
|
}
|
|
1412
1412
|
|
|
1413
1413
|
.select-dropdown li.optgroup {
|
|
1414
|
-
border-top: 1px solid #eee;
|
|
1414
|
+
border-top: 1px solid var(--mm-border-color, #eee);
|
|
1415
1415
|
}
|
|
1416
1416
|
.select-dropdown li.optgroup.selected > span {
|
|
1417
|
-
color: rgba(0, 0, 0, 0.7);
|
|
1417
|
+
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
|
|
1418
1418
|
}
|
|
1419
1419
|
.select-dropdown li.optgroup > span {
|
|
1420
|
-
color: rgba(0, 0, 0, 0.4);
|
|
1420
|
+
color: var(--mm-text-hint, rgba(0, 0, 0, 0.4));
|
|
1421
1421
|
}
|
|
1422
1422
|
.select-dropdown li.optgroup ~ li.optgroup-option {
|
|
1423
1423
|
padding-left: 1rem;
|
package/dist/index.css
CHANGED
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
--mm-modal-background: #ffffff;
|
|
29
29
|
--mm-overlay-background: rgba(0, 0, 0, 0.5);
|
|
30
30
|
--mm-shadow-color: rgba(0, 0, 0, 0.16);
|
|
31
|
+
--mm-chip-bg: #e4e4e4;
|
|
32
|
+
--mm-chip-text: var(--mm-text-secondary);
|
|
33
|
+
--mm-dropdown-hover: #eee;
|
|
34
|
+
--mm-dropdown-focus: #ddd;
|
|
35
|
+
--mm-dropdown-selected: #e3f2fd;
|
|
31
36
|
--mm-shadow-umbra: rgba(0, 0, 0, 0.2);
|
|
32
37
|
--mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
|
|
33
38
|
--mm-shadow-ambient: rgba(0, 0, 0, 0.12);
|
|
@@ -81,6 +86,11 @@ body {
|
|
|
81
86
|
--mm-shadow-umbra: rgba(0, 0, 0, 0.5);
|
|
82
87
|
--mm-shadow-penumbra: rgba(0, 0, 0, 0.36);
|
|
83
88
|
--mm-shadow-ambient: rgba(0, 0, 0, 0.3);
|
|
89
|
+
--mm-chip-bg: #424242;
|
|
90
|
+
--mm-chip-text: var(--mm-text-secondary);
|
|
91
|
+
--mm-dropdown-hover: #444;
|
|
92
|
+
--mm-dropdown-focus: #555;
|
|
93
|
+
--mm-dropdown-selected: #1e3a8a;
|
|
84
94
|
--mm-switch-checked-track: rgba(128, 203, 196, 0.3);
|
|
85
95
|
--mm-switch-checked-thumb: #80cbc4;
|
|
86
96
|
--mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
|
|
@@ -5214,7 +5224,7 @@ button.btn-floating {
|
|
|
5214
5224
|
}
|
|
5215
5225
|
|
|
5216
5226
|
.dropdown-content {
|
|
5217
|
-
background-color: #fff;
|
|
5227
|
+
background-color: var(--mm-surface-color, #fff);
|
|
5218
5228
|
margin: 0;
|
|
5219
5229
|
display: none;
|
|
5220
5230
|
min-width: 100px;
|
|
@@ -5231,7 +5241,7 @@ button.btn-floating {
|
|
|
5231
5241
|
}
|
|
5232
5242
|
.dropdown-content li {
|
|
5233
5243
|
clear: both;
|
|
5234
|
-
color: rgba(0, 0, 0, 0.87);
|
|
5244
|
+
color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
5235
5245
|
cursor: pointer;
|
|
5236
5246
|
min-height: 50px;
|
|
5237
5247
|
line-height: 1.5rem;
|
|
@@ -5239,7 +5249,7 @@ button.btn-floating {
|
|
|
5239
5249
|
text-align: left;
|
|
5240
5250
|
}
|
|
5241
5251
|
.dropdown-content li:hover, .dropdown-content li.active {
|
|
5242
|
-
background-color: #eee;
|
|
5252
|
+
background-color: var(--mm-dropdown-hover, #eee);
|
|
5243
5253
|
}
|
|
5244
5254
|
.dropdown-content li:focus {
|
|
5245
5255
|
outline: none;
|
|
@@ -5250,7 +5260,7 @@ button.btn-floating {
|
|
|
5250
5260
|
}
|
|
5251
5261
|
.dropdown-content li > a, .dropdown-content li > span {
|
|
5252
5262
|
font-size: 16px;
|
|
5253
|
-
color: #26a69a;
|
|
5263
|
+
color: var(--mm-text-primary, #26a69a);
|
|
5254
5264
|
display: block;
|
|
5255
5265
|
line-height: 22px;
|
|
5256
5266
|
padding: 14px 16px;
|
|
@@ -5269,7 +5279,7 @@ button.btn-floating {
|
|
|
5269
5279
|
}
|
|
5270
5280
|
|
|
5271
5281
|
body.keyboard-focused .dropdown-content li:focus {
|
|
5272
|
-
background-color: rgb(217.6, 217.6, 217.6);
|
|
5282
|
+
background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
|
|
5273
5283
|
}
|
|
5274
5284
|
|
|
5275
5285
|
.input-field.col .dropdown-content [type=checkbox] + label {
|
|
@@ -5568,18 +5578,18 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
5568
5578
|
height: 32px;
|
|
5569
5579
|
font-size: 13px;
|
|
5570
5580
|
font-weight: 500;
|
|
5571
|
-
color: rgba(0, 0, 0, 0.6);
|
|
5581
|
+
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
5572
5582
|
line-height: 32px;
|
|
5573
5583
|
padding: 0 12px;
|
|
5574
5584
|
border-radius: 16px;
|
|
5575
|
-
background-color: #e4e4e4;
|
|
5585
|
+
background-color: var(--mm-chip-bg, #e4e4e4);
|
|
5576
5586
|
margin-bottom: 5px;
|
|
5577
5587
|
margin-right: 5px;
|
|
5578
5588
|
}
|
|
5579
5589
|
.chip:focus {
|
|
5580
5590
|
outline: none;
|
|
5581
|
-
background-color: #26a69a;
|
|
5582
|
-
color: #fff;
|
|
5591
|
+
background-color: var(--mm-primary-color, #26a69a);
|
|
5592
|
+
color: var(--mm-button-text, #fff);
|
|
5583
5593
|
}
|
|
5584
5594
|
.chip > img {
|
|
5585
5595
|
float: left;
|
|
@@ -5598,7 +5608,7 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
5598
5608
|
|
|
5599
5609
|
.chips {
|
|
5600
5610
|
border: none;
|
|
5601
|
-
border-bottom: 1px solid #9e9e9e;
|
|
5611
|
+
border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
|
|
5602
5612
|
box-shadow: none;
|
|
5603
5613
|
margin: 0 0 8px 0;
|
|
5604
5614
|
min-height: 45px;
|
|
@@ -5606,8 +5616,8 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
5606
5616
|
transition: all 0.3s;
|
|
5607
5617
|
}
|
|
5608
5618
|
.chips.focus {
|
|
5609
|
-
border-bottom: 1px solid #26a69a;
|
|
5610
|
-
box-shadow: 0 1px 0 0 #26a69a;
|
|
5619
|
+
border-bottom: 1px solid var(--mm-primary-color, #26a69a);
|
|
5620
|
+
box-shadow: 0 1px 0 0 var(--mm-primary-color, #26a69a);
|
|
5611
5621
|
}
|
|
5612
5622
|
.chips:hover {
|
|
5613
5623
|
cursor: text;
|
|
@@ -5615,7 +5625,7 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
5615
5625
|
.chips .input {
|
|
5616
5626
|
background: none;
|
|
5617
5627
|
border: 0;
|
|
5618
|
-
color: rgba(0, 0, 0, 0.6);
|
|
5628
|
+
color: var(--mm-text-primary, rgba(0, 0, 0, 0.6));
|
|
5619
5629
|
display: inline-block;
|
|
5620
5630
|
font-size: 16px;
|
|
5621
5631
|
height: 3rem;
|
|
@@ -6729,7 +6739,7 @@ select {
|
|
|
6729
6739
|
bottom: 0;
|
|
6730
6740
|
margin: auto 0;
|
|
6731
6741
|
z-index: 0;
|
|
6732
|
-
fill: rgba(0, 0, 0, 0.87);
|
|
6742
|
+
fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
6733
6743
|
}
|
|
6734
6744
|
.select-wrapper + label {
|
|
6735
6745
|
position: absolute;
|
|
@@ -6771,19 +6781,19 @@ select:disabled {
|
|
|
6771
6781
|
.select-dropdown li.disabled,
|
|
6772
6782
|
.select-dropdown li.disabled > span,
|
|
6773
6783
|
.select-dropdown li.optgroup {
|
|
6774
|
-
color: rgba(0, 0, 0, 0.3);
|
|
6784
|
+
color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
|
|
6775
6785
|
background-color: transparent;
|
|
6776
6786
|
}
|
|
6777
6787
|
|
|
6778
6788
|
body.keyboard-focused .select-dropdown.dropdown-content li:focus {
|
|
6779
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
6789
|
+
background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
|
|
6780
6790
|
}
|
|
6781
6791
|
|
|
6782
6792
|
.select-dropdown.dropdown-content li:hover {
|
|
6783
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
6793
|
+
background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
|
|
6784
6794
|
}
|
|
6785
6795
|
.select-dropdown.dropdown-content li.selected {
|
|
6786
|
-
background-color: rgba(0, 0, 0, 0.03);
|
|
6796
|
+
background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
|
|
6787
6797
|
}
|
|
6788
6798
|
|
|
6789
6799
|
.prefix ~ .select-wrapper {
|
|
@@ -6804,13 +6814,13 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
|
|
|
6804
6814
|
}
|
|
6805
6815
|
|
|
6806
6816
|
.select-dropdown li.optgroup {
|
|
6807
|
-
border-top: 1px solid #eee;
|
|
6817
|
+
border-top: 1px solid var(--mm-border-color, #eee);
|
|
6808
6818
|
}
|
|
6809
6819
|
.select-dropdown li.optgroup.selected > span {
|
|
6810
|
-
color: rgba(0, 0, 0, 0.7);
|
|
6820
|
+
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.7));
|
|
6811
6821
|
}
|
|
6812
6822
|
.select-dropdown li.optgroup > span {
|
|
6813
|
-
color: rgba(0, 0, 0, 0.4);
|
|
6823
|
+
color: var(--mm-text-hint, rgba(0, 0, 0, 0.4));
|
|
6814
6824
|
}
|
|
6815
6825
|
.select-dropdown li.optgroup ~ li.optgroup-option {
|
|
6816
6826
|
padding-left: 1rem;
|
package/dist/index.esm.js
CHANGED
|
@@ -166,9 +166,14 @@ const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
|
|
|
166
166
|
const Label = () => {
|
|
167
167
|
return {
|
|
168
168
|
view: (_a) => {
|
|
169
|
-
var _b = _a.attrs, { label, id, isMandatory, isActive, className } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className"]);
|
|
169
|
+
var _b = _a.attrs, { label, id, isMandatory, isActive, className, initialValue } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className", "initialValue"]);
|
|
170
170
|
return label
|
|
171
|
-
? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id
|
|
171
|
+
? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id, oncreate: ({ dom }) => {
|
|
172
|
+
if (!initialValue)
|
|
173
|
+
return;
|
|
174
|
+
const labelEl = dom;
|
|
175
|
+
labelEl.classList.add('active');
|
|
176
|
+
} }), [m.trust(label), isMandatory ? m(Mandatory) : undefined])
|
|
172
177
|
: undefined;
|
|
173
178
|
},
|
|
174
179
|
};
|
|
@@ -1090,8 +1095,8 @@ const Chips = () => {
|
|
|
1090
1095
|
maxHeight: '200px',
|
|
1091
1096
|
overflow: 'auto',
|
|
1092
1097
|
zIndex: 1000,
|
|
1093
|
-
backgroundColor: '#fff',
|
|
1094
|
-
boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
|
|
1098
|
+
backgroundColor: 'var(--mm-surface-color, #fff)',
|
|
1099
|
+
boxShadow: '0 2px 2px 0 var(--mm-shadow-penumbra, rgba(0,0,0,0.14)), 0 3px 1px -2px var(--mm-shadow-umbra, rgba(0,0,0,0.12)), 0 1px 5px 0 var(--mm-shadow-ambient, rgba(0,0,0,0.2))',
|
|
1095
1100
|
},
|
|
1096
1101
|
}, state.autocompleteItems.map((item, index) => m('li.autocomplete-item', {
|
|
1097
1102
|
key: item.tag,
|
|
@@ -1099,7 +1104,8 @@ const Chips = () => {
|
|
|
1099
1104
|
style: {
|
|
1100
1105
|
padding: '12px 16px',
|
|
1101
1106
|
cursor: 'pointer',
|
|
1102
|
-
backgroundColor: state.selectedAutocompleteIndex === index ? '#eee' : 'transparent',
|
|
1107
|
+
backgroundColor: state.selectedAutocompleteIndex === index ? 'var(--mm-border-color, #eee)' : 'transparent',
|
|
1108
|
+
color: 'var(--mm-text-primary, inherit)',
|
|
1103
1109
|
},
|
|
1104
1110
|
onmousedown: (e) => {
|
|
1105
1111
|
e.preventDefault();
|
|
@@ -2320,7 +2326,7 @@ const TextArea = () => {
|
|
|
2320
2326
|
}, oncreate: ({ dom }) => {
|
|
2321
2327
|
const textarea = (state.textarea = dom);
|
|
2322
2328
|
// Set initial value and height if provided
|
|
2323
|
-
if (initialValue
|
|
2329
|
+
if (initialValue) {
|
|
2324
2330
|
textarea.value = String(initialValue);
|
|
2325
2331
|
updateHeight(textarea);
|
|
2326
2332
|
// } else {
|
|
@@ -2363,7 +2369,7 @@ const TextArea = () => {
|
|
|
2363
2369
|
if (onchange && state.textarea) {
|
|
2364
2370
|
onchange(state.textarea.value);
|
|
2365
2371
|
}
|
|
2366
|
-
},
|
|
2372
|
+
}, onkeyup: onkeyup
|
|
2367
2373
|
? (ev) => {
|
|
2368
2374
|
onkeyup(ev, ev.target.value);
|
|
2369
2375
|
}
|
|
@@ -2380,7 +2386,8 @@ const TextArea = () => {
|
|
|
2380
2386
|
label,
|
|
2381
2387
|
id,
|
|
2382
2388
|
isMandatory,
|
|
2383
|
-
isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) ||
|
|
2389
|
+
isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || placeholder || state.active,
|
|
2390
|
+
initialValue: initialValue !== undefined,
|
|
2384
2391
|
}),
|
|
2385
2392
|
m(HelperText, {
|
|
2386
2393
|
helperText,
|
|
@@ -2438,6 +2445,9 @@ const InputField = (type, defaultClass = '') => () => {
|
|
|
2438
2445
|
const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
|
|
2439
2446
|
// const attributes = toAttrs(params);
|
|
2440
2447
|
const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
|
|
2448
|
+
const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
|
|
2449
|
+
? true
|
|
2450
|
+
: false;
|
|
2441
2451
|
return m('.input-field', { className: cn, style }, [
|
|
2442
2452
|
iconName ? m('i.material-icons.prefix', iconName) : undefined,
|
|
2443
2453
|
m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
|
|
@@ -2448,7 +2458,7 @@ const InputField = (type, defaultClass = '') => () => {
|
|
|
2448
2458
|
input.focus();
|
|
2449
2459
|
}
|
|
2450
2460
|
// Set initial value if provided
|
|
2451
|
-
if (initialValue
|
|
2461
|
+
if (initialValue) {
|
|
2452
2462
|
input.value = String(initialValue);
|
|
2453
2463
|
}
|
|
2454
2464
|
// Update character count state for counter component
|
|
@@ -2552,20 +2562,13 @@ const InputField = (type, defaultClass = '') => () => {
|
|
|
2552
2562
|
if (onchange && state.inputElement) {
|
|
2553
2563
|
onchange(getValue(state.inputElement));
|
|
2554
2564
|
}
|
|
2555
|
-
}
|
|
2565
|
+
} })),
|
|
2556
2566
|
m(Label, {
|
|
2557
2567
|
label,
|
|
2558
2568
|
id,
|
|
2559
2569
|
isMandatory,
|
|
2560
|
-
isActive
|
|
2561
|
-
|
|
2562
|
-
initialValue ||
|
|
2563
|
-
placeholder ||
|
|
2564
|
-
type === 'number' ||
|
|
2565
|
-
type === 'color' ||
|
|
2566
|
-
type === 'range'
|
|
2567
|
-
? true
|
|
2568
|
-
: false,
|
|
2570
|
+
isActive,
|
|
2571
|
+
initialValue: initialValue !== undefined,
|
|
2569
2572
|
}),
|
|
2570
2573
|
m(HelperText, {
|
|
2571
2574
|
helperText,
|
|
@@ -2638,7 +2641,7 @@ const FileInput = () => {
|
|
|
2638
2641
|
i.value = initialValue;
|
|
2639
2642
|
},
|
|
2640
2643
|
})),
|
|
2641
|
-
(canClear ||
|
|
2644
|
+
(canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
|
|
2642
2645
|
m('a.waves-effect.waves-teal.btn-flat', {
|
|
2643
2646
|
style: {
|
|
2644
2647
|
float: 'right',
|
|
@@ -4714,7 +4717,7 @@ const SearchSelect = () => {
|
|
|
4714
4717
|
placeholder &&
|
|
4715
4718
|
m('span.placeholder', {
|
|
4716
4719
|
style: {
|
|
4717
|
-
color: '#9e9e9e',
|
|
4720
|
+
color: 'var(--mm-text-hint, #9e9e9e)',
|
|
4718
4721
|
flexGrow: 1,
|
|
4719
4722
|
padding: '8px 0',
|
|
4720
4723
|
},
|
|
@@ -4776,7 +4779,9 @@ const SearchSelect = () => {
|
|
|
4776
4779
|
fontSize: '0.875rem',
|
|
4777
4780
|
border: 'none',
|
|
4778
4781
|
padding: '8px 0',
|
|
4779
|
-
borderBottom: '1px solid #9e9e9e',
|
|
4782
|
+
borderBottom: '1px solid var(--mm-input-border, #9e9e9e)',
|
|
4783
|
+
backgroundColor: 'transparent',
|
|
4784
|
+
color: 'var(--mm-text-primary, inherit)',
|
|
4780
4785
|
},
|
|
4781
4786
|
}),
|
|
4782
4787
|
]),
|
package/dist/index.js
CHANGED
|
@@ -168,9 +168,14 @@ const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
|
|
|
168
168
|
const Label = () => {
|
|
169
169
|
return {
|
|
170
170
|
view: (_a) => {
|
|
171
|
-
var _b = _a.attrs, { label, id, isMandatory, isActive, className } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className"]);
|
|
171
|
+
var _b = _a.attrs, { label, id, isMandatory, isActive, className, initialValue } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className", "initialValue"]);
|
|
172
172
|
return label
|
|
173
|
-
? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id
|
|
173
|
+
? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id, oncreate: ({ dom }) => {
|
|
174
|
+
if (!initialValue)
|
|
175
|
+
return;
|
|
176
|
+
const labelEl = dom;
|
|
177
|
+
labelEl.classList.add('active');
|
|
178
|
+
} }), [m.trust(label), isMandatory ? m(Mandatory) : undefined])
|
|
174
179
|
: undefined;
|
|
175
180
|
},
|
|
176
181
|
};
|
|
@@ -1092,8 +1097,8 @@ const Chips = () => {
|
|
|
1092
1097
|
maxHeight: '200px',
|
|
1093
1098
|
overflow: 'auto',
|
|
1094
1099
|
zIndex: 1000,
|
|
1095
|
-
backgroundColor: '#fff',
|
|
1096
|
-
boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
|
|
1100
|
+
backgroundColor: 'var(--mm-surface-color, #fff)',
|
|
1101
|
+
boxShadow: '0 2px 2px 0 var(--mm-shadow-penumbra, rgba(0,0,0,0.14)), 0 3px 1px -2px var(--mm-shadow-umbra, rgba(0,0,0,0.12)), 0 1px 5px 0 var(--mm-shadow-ambient, rgba(0,0,0,0.2))',
|
|
1097
1102
|
},
|
|
1098
1103
|
}, state.autocompleteItems.map((item, index) => m('li.autocomplete-item', {
|
|
1099
1104
|
key: item.tag,
|
|
@@ -1101,7 +1106,8 @@ const Chips = () => {
|
|
|
1101
1106
|
style: {
|
|
1102
1107
|
padding: '12px 16px',
|
|
1103
1108
|
cursor: 'pointer',
|
|
1104
|
-
backgroundColor: state.selectedAutocompleteIndex === index ? '#eee' : 'transparent',
|
|
1109
|
+
backgroundColor: state.selectedAutocompleteIndex === index ? 'var(--mm-border-color, #eee)' : 'transparent',
|
|
1110
|
+
color: 'var(--mm-text-primary, inherit)',
|
|
1105
1111
|
},
|
|
1106
1112
|
onmousedown: (e) => {
|
|
1107
1113
|
e.preventDefault();
|
|
@@ -2322,7 +2328,7 @@ const TextArea = () => {
|
|
|
2322
2328
|
}, oncreate: ({ dom }) => {
|
|
2323
2329
|
const textarea = (state.textarea = dom);
|
|
2324
2330
|
// Set initial value and height if provided
|
|
2325
|
-
if (initialValue
|
|
2331
|
+
if (initialValue) {
|
|
2326
2332
|
textarea.value = String(initialValue);
|
|
2327
2333
|
updateHeight(textarea);
|
|
2328
2334
|
// } else {
|
|
@@ -2365,7 +2371,7 @@ const TextArea = () => {
|
|
|
2365
2371
|
if (onchange && state.textarea) {
|
|
2366
2372
|
onchange(state.textarea.value);
|
|
2367
2373
|
}
|
|
2368
|
-
},
|
|
2374
|
+
}, onkeyup: onkeyup
|
|
2369
2375
|
? (ev) => {
|
|
2370
2376
|
onkeyup(ev, ev.target.value);
|
|
2371
2377
|
}
|
|
@@ -2382,7 +2388,8 @@ const TextArea = () => {
|
|
|
2382
2388
|
label,
|
|
2383
2389
|
id,
|
|
2384
2390
|
isMandatory,
|
|
2385
|
-
isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) ||
|
|
2391
|
+
isActive: ((_a = state.textarea) === null || _a === void 0 ? void 0 : _a.value) || placeholder || state.active,
|
|
2392
|
+
initialValue: initialValue !== undefined,
|
|
2386
2393
|
}),
|
|
2387
2394
|
m(HelperText, {
|
|
2388
2395
|
helperText,
|
|
@@ -2440,6 +2447,9 @@ const InputField = (type, defaultClass = '') => () => {
|
|
|
2440
2447
|
const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
|
|
2441
2448
|
// const attributes = toAttrs(params);
|
|
2442
2449
|
const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
|
|
2450
|
+
const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
|
|
2451
|
+
? true
|
|
2452
|
+
: false;
|
|
2443
2453
|
return m('.input-field', { className: cn, style }, [
|
|
2444
2454
|
iconName ? m('i.material-icons.prefix', iconName) : undefined,
|
|
2445
2455
|
m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
|
|
@@ -2450,7 +2460,7 @@ const InputField = (type, defaultClass = '') => () => {
|
|
|
2450
2460
|
input.focus();
|
|
2451
2461
|
}
|
|
2452
2462
|
// Set initial value if provided
|
|
2453
|
-
if (initialValue
|
|
2463
|
+
if (initialValue) {
|
|
2454
2464
|
input.value = String(initialValue);
|
|
2455
2465
|
}
|
|
2456
2466
|
// Update character count state for counter component
|
|
@@ -2554,20 +2564,13 @@ const InputField = (type, defaultClass = '') => () => {
|
|
|
2554
2564
|
if (onchange && state.inputElement) {
|
|
2555
2565
|
onchange(getValue(state.inputElement));
|
|
2556
2566
|
}
|
|
2557
|
-
}
|
|
2567
|
+
} })),
|
|
2558
2568
|
m(Label, {
|
|
2559
2569
|
label,
|
|
2560
2570
|
id,
|
|
2561
2571
|
isMandatory,
|
|
2562
|
-
isActive
|
|
2563
|
-
|
|
2564
|
-
initialValue ||
|
|
2565
|
-
placeholder ||
|
|
2566
|
-
type === 'number' ||
|
|
2567
|
-
type === 'color' ||
|
|
2568
|
-
type === 'range'
|
|
2569
|
-
? true
|
|
2570
|
-
: false,
|
|
2572
|
+
isActive,
|
|
2573
|
+
initialValue: initialValue !== undefined,
|
|
2571
2574
|
}),
|
|
2572
2575
|
m(HelperText, {
|
|
2573
2576
|
helperText,
|
|
@@ -2640,7 +2643,7 @@ const FileInput = () => {
|
|
|
2640
2643
|
i.value = initialValue;
|
|
2641
2644
|
},
|
|
2642
2645
|
})),
|
|
2643
|
-
(canClear ||
|
|
2646
|
+
(canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
|
|
2644
2647
|
m('a.waves-effect.waves-teal.btn-flat', {
|
|
2645
2648
|
style: {
|
|
2646
2649
|
float: 'right',
|
|
@@ -4716,7 +4719,7 @@ const SearchSelect = () => {
|
|
|
4716
4719
|
placeholder &&
|
|
4717
4720
|
m('span.placeholder', {
|
|
4718
4721
|
style: {
|
|
4719
|
-
color: '#9e9e9e',
|
|
4722
|
+
color: 'var(--mm-text-hint, #9e9e9e)',
|
|
4720
4723
|
flexGrow: 1,
|
|
4721
4724
|
padding: '8px 0',
|
|
4722
4725
|
},
|
|
@@ -4778,7 +4781,9 @@ const SearchSelect = () => {
|
|
|
4778
4781
|
fontSize: '0.875rem',
|
|
4779
4782
|
border: 'none',
|
|
4780
4783
|
padding: '8px 0',
|
|
4781
|
-
borderBottom: '1px solid #9e9e9e',
|
|
4784
|
+
borderBottom: '1px solid var(--mm-input-border, #9e9e9e)',
|
|
4785
|
+
backgroundColor: 'transparent',
|
|
4786
|
+
color: 'var(--mm-text-primary, inherit)',
|
|
4782
4787
|
},
|
|
4783
4788
|
}),
|
|
4784
4789
|
]),
|