neo.mjs 5.13.4 → 5.13.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/apps/ServiceWorker.mjs +2 -2
- package/examples/ServiceWorker.mjs +2 -2
- package/examples/form/field/select/MainContainer.mjs +5 -7
- package/package.json +1 -1
- package/resources/scss/src/button/Base.scss +3 -3
- package/resources/scss/src/menu/List.scss +16 -9
- package/resources/scss/theme-dark/menu/List.scss +24 -8
- package/resources/scss/theme-light/menu/List.scss +24 -8
- package/src/DefaultConfig.mjs +2 -2
- package/src/form/Container.mjs +17 -5
- package/src/form/field/Select.mjs +16 -0
package/apps/ServiceWorker.mjs
CHANGED
|
@@ -131,16 +131,14 @@ class MainContainer extends ConfigurationViewport {
|
|
|
131
131
|
createExampleComponent() {
|
|
132
132
|
return Neo.create({
|
|
133
133
|
module : SelectField,
|
|
134
|
-
displayField : 'name',
|
|
135
134
|
labelPosition: 'inline',
|
|
136
135
|
labelText : 'US States',
|
|
137
136
|
labelWidth : 80,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
});
|
|
137
|
+
store : MainStore,
|
|
138
|
+
value : 'Arizona',
|
|
139
|
+
valueField : 'abbreviation',
|
|
140
|
+
width : 200
|
|
141
|
+
})
|
|
144
142
|
}
|
|
145
143
|
}
|
|
146
144
|
|
package/package.json
CHANGED
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
|
|
178
178
|
&:active {
|
|
179
179
|
background-color: v(button-ghost-background-color-active) !important;
|
|
180
|
-
border : v(button-ghost-border-active);
|
|
180
|
+
border : v(button-ghost-border-active) !important;
|
|
181
181
|
|
|
182
182
|
.neo-button-glyph {
|
|
183
183
|
color: v(button-ghost-glyph-color-active);
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
|
|
231
231
|
&:active {
|
|
232
232
|
background-color: v(button-secondary-background-color-active) !important;
|
|
233
|
-
border : v(button-secondary-border-active);
|
|
233
|
+
border : v(button-secondary-border-active) !important;
|
|
234
234
|
|
|
235
235
|
.neo-button-glyph {
|
|
236
236
|
color: v(button-secondary-glyph-color-active);
|
|
@@ -283,7 +283,7 @@
|
|
|
283
283
|
|
|
284
284
|
&:active {
|
|
285
285
|
background-color: v(button-tertiary-background-color-active) !important;
|
|
286
|
-
border : v(button-tertiary-border-active);
|
|
286
|
+
border : v(button-tertiary-border-active) !important;
|
|
287
287
|
|
|
288
288
|
.neo-button-glyph {
|
|
289
289
|
color: v(button-tertiary-glyph-color-active);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.neo-menu-list {
|
|
2
|
-
border
|
|
3
|
-
overflow-y: auto;
|
|
4
|
-
width
|
|
2
|
+
border : 1px solid v(menu-list-border-color);
|
|
3
|
+
overflow-y : auto;
|
|
4
|
+
width : fit-content;
|
|
5
5
|
|
|
6
6
|
&.neo-floating {
|
|
7
7
|
box-shadow: v(menu-list-box-shadow);
|
|
@@ -9,17 +9,24 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.neo-list-item {
|
|
12
|
-
align-items: center;
|
|
13
|
-
|
|
12
|
+
align-items : center;
|
|
13
|
+
color : v(menu-list-item-color);
|
|
14
|
+
display : flex;
|
|
15
|
+
font-family : v(menu-list-item-font-family);
|
|
16
|
+
font-weight : v(menu-list-item-font-weight);
|
|
17
|
+
height : v(menu-list-item-height);
|
|
18
|
+
line-height : v(menu-list-item-line-height);
|
|
19
|
+
padding : v(menu-list-item-padding);
|
|
20
|
+
text-transform: v(menu-list-item-text-transform);
|
|
14
21
|
|
|
15
22
|
&.neo-selected {
|
|
16
23
|
.neo-icon {
|
|
17
|
-
color: v(menu-list-icon-color-selected);
|
|
24
|
+
color: v(menu-list-item-icon-color-selected);
|
|
18
25
|
}
|
|
19
26
|
}
|
|
20
27
|
|
|
21
28
|
.neo-arrow-icon {
|
|
22
|
-
color : v(menu-list-icon-color);
|
|
29
|
+
color : v(menu-list-item-icon-color);
|
|
23
30
|
margin-left: 1em;
|
|
24
31
|
}
|
|
25
32
|
|
|
@@ -28,13 +35,13 @@
|
|
|
28
35
|
}
|
|
29
36
|
|
|
30
37
|
.neo-icon {
|
|
31
|
-
color : v(menu-list-icon-color);
|
|
38
|
+
color : v(menu-list-item-icon-color);
|
|
32
39
|
display : flex;
|
|
33
40
|
justify-content: center;
|
|
34
41
|
}
|
|
35
42
|
|
|
36
43
|
.neo-menu-icon {
|
|
37
|
-
margin-right:
|
|
44
|
+
margin-right: v(menu-list-item-icon-gap);
|
|
38
45
|
width : 1.2em;
|
|
39
46
|
}
|
|
40
47
|
}
|
|
@@ -1,15 +1,31 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
|
-
'menu-list-border-color'
|
|
3
|
-
'menu-list-box-shadow'
|
|
4
|
-
'menu-list-
|
|
5
|
-
'menu-list-
|
|
2
|
+
'menu-list-border-color' : #3c3f41,
|
|
3
|
+
'menu-list-box-shadow' : 0 5px 10px rgba(0,0,0,.4),
|
|
4
|
+
'menu-list-item-color' : inherit,
|
|
5
|
+
'menu-list-item-font-family' : inherit,
|
|
6
|
+
'menu-list-item-font-weight' : inherit,
|
|
7
|
+
'menu-list-item-icon-color' : #bbb,
|
|
8
|
+
'menu-list-item-icon-color-selected': #2b2b2b,
|
|
9
|
+
'menu-list-item-icon-gap' : .4em,
|
|
10
|
+
'menu-list-item-height' : inherit,
|
|
11
|
+
'menu-list-item-line-height' : inherit,
|
|
12
|
+
'menu-list-item-padding' : 5px,
|
|
13
|
+
'menu-list-item-text-transform' : inherit
|
|
6
14
|
));
|
|
7
15
|
|
|
8
16
|
@if $useCssVars == true {
|
|
9
17
|
:root .neo-theme-dark { // .neo-menu-list
|
|
10
|
-
--menu-list-border-color
|
|
11
|
-
--menu-list-box-shadow
|
|
12
|
-
--menu-list-
|
|
13
|
-
--menu-list-
|
|
18
|
+
--menu-list-border-color : #{neo(menu-list-border-color)};
|
|
19
|
+
--menu-list-box-shadow : #{neo(menu-list-box-shadow)};
|
|
20
|
+
--menu-list-item-color : #{neo(menu-list-item-color)};
|
|
21
|
+
--menu-list-item-font-family : #{neo(menu-list-item-font-family)};
|
|
22
|
+
--menu-list-item-font-weight : #{neo(menu-list-item-font-weight)};
|
|
23
|
+
--menu-list-item-icon-color : #{neo(menu-list-item-icon-color)};
|
|
24
|
+
--menu-list-item-icon-color-selected: #{neo(menu-list-item-icon-color-selected)};
|
|
25
|
+
--menu-list-item-icon-gap : #{neo(menu-list-item-icon-gap)};
|
|
26
|
+
--menu-list-item-height : #{neo(menu-list-item-height)};
|
|
27
|
+
--menu-list-item-line-height : #{neo(menu-list-item-line-height)};
|
|
28
|
+
--menu-list-item-padding : #{neo(menu-list-item-padding)};
|
|
29
|
+
--menu-list-item-text-transform : #{neo(menu-list-item-text-transform)};
|
|
14
30
|
}
|
|
15
31
|
}
|
|
@@ -1,15 +1,31 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
|
-
'menu-list-border-color'
|
|
3
|
-
'menu-list-box-shadow'
|
|
4
|
-
'menu-list-
|
|
5
|
-
'menu-list-
|
|
2
|
+
'menu-list-border-color' : #1c60a0,
|
|
3
|
+
'menu-list-box-shadow' : 0 5px 10px rgba(0,0,0,.4),
|
|
4
|
+
'menu-list-item-color' : inherit,
|
|
5
|
+
'menu-list-item-font-family' : inherit,
|
|
6
|
+
'menu-list-item-font-weight' : inherit,
|
|
7
|
+
'menu-list-item-icon-color' : #1c60a0,
|
|
8
|
+
'menu-list-item-icon-color-selected': #1c60a0,
|
|
9
|
+
'menu-list-item-icon-gap' : .4em,
|
|
10
|
+
'menu-list-item-height' : inherit,
|
|
11
|
+
'menu-list-item-line-height' : inherit,
|
|
12
|
+
'menu-list-item-padding' : 5px,
|
|
13
|
+
'menu-list-item-text-transform' : inherit
|
|
6
14
|
));
|
|
7
15
|
|
|
8
16
|
@if $useCssVars == true {
|
|
9
17
|
:root .neo-theme-light { // .neo-menu-list
|
|
10
|
-
--menu-list-border-color
|
|
11
|
-
--menu-list-box-shadow
|
|
12
|
-
--menu-list-
|
|
13
|
-
--menu-list-
|
|
18
|
+
--menu-list-border-color : #{neo(menu-list-border-color)};
|
|
19
|
+
--menu-list-box-shadow : #{neo(menu-list-box-shadow)};
|
|
20
|
+
--menu-list-item-color : #{neo(menu-list-item-color)};
|
|
21
|
+
--menu-list-item-font-family : #{neo(menu-list-item-font-family)};
|
|
22
|
+
--menu-list-item-font-weight : #{neo(menu-list-item-font-weight)};
|
|
23
|
+
--menu-list-item-icon-color : #{neo(menu-list-item-icon-color)};
|
|
24
|
+
--menu-list-item-icon-color-selected: #{neo(menu-list-item-icon-color-selected)};
|
|
25
|
+
--menu-list-item-icon-gap : #{neo(menu-list-item-icon-gap)};
|
|
26
|
+
--menu-list-item-height : #{neo(menu-list-item-height)};
|
|
27
|
+
--menu-list-item-line-height : #{neo(menu-list-item-line-height)};
|
|
28
|
+
--menu-list-item-padding : #{neo(menu-list-item-padding)};
|
|
29
|
+
--menu-list-item-text-transform : #{neo(menu-list-item-text-transform)};
|
|
14
30
|
}
|
|
15
31
|
}
|
package/src/DefaultConfig.mjs
CHANGED
|
@@ -236,12 +236,12 @@ const DefaultConfig = {
|
|
|
236
236
|
useVdomWorker: true,
|
|
237
237
|
/**
|
|
238
238
|
* buildScripts/injectPackageVersion.mjs will update this value
|
|
239
|
-
* @default '5.13.
|
|
239
|
+
* @default '5.13.6'
|
|
240
240
|
* @memberOf! module:Neo
|
|
241
241
|
* @name config.version
|
|
242
242
|
* @type String
|
|
243
243
|
*/
|
|
244
|
-
version: '5.13.
|
|
244
|
+
version: '5.13.6'
|
|
245
245
|
};
|
|
246
246
|
|
|
247
247
|
Object.assign(DefaultConfig, {
|
package/src/form/Container.mjs
CHANGED
|
@@ -36,17 +36,29 @@ class Container extends BaseContainer {
|
|
|
36
36
|
* @param {String} configName
|
|
37
37
|
*/
|
|
38
38
|
static adjustTreeLeaves(values={}, configName) {
|
|
39
|
-
let type;
|
|
39
|
+
let assign,type;
|
|
40
40
|
|
|
41
41
|
Object.entries(values).forEach(([key, value]) => {
|
|
42
|
-
|
|
42
|
+
assign = true;
|
|
43
|
+
type = Neo.typeOf(value);
|
|
43
44
|
|
|
44
45
|
if (type === 'Array') {
|
|
45
|
-
value.forEach(item =>
|
|
46
|
+
value.forEach(item => {
|
|
47
|
+
if (Neo.typeOf(item) === 'Object') {
|
|
48
|
+
this.adjustTreeLeaves(item, configName)
|
|
49
|
+
}
|
|
50
|
+
})
|
|
46
51
|
} else if (type === 'Object') {
|
|
52
|
+
assign = false;
|
|
47
53
|
this.adjustTreeLeaves(value, configName)
|
|
48
|
-
}
|
|
49
|
-
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
if (assign) {
|
|
57
|
+
if (key === configName) {
|
|
58
|
+
values[key] = value
|
|
59
|
+
} else {
|
|
60
|
+
values[key] = {[configName]: value}
|
|
61
|
+
}
|
|
50
62
|
}
|
|
51
63
|
})
|
|
52
64
|
}
|
|
@@ -210,6 +210,8 @@ class Select extends Picker {
|
|
|
210
210
|
if (me.list) {
|
|
211
211
|
me.list.store = value
|
|
212
212
|
}
|
|
213
|
+
|
|
214
|
+
value.on('load', me.onStoreLoad, me)
|
|
213
215
|
}
|
|
214
216
|
}
|
|
215
217
|
|
|
@@ -577,6 +579,20 @@ class Select extends Picker {
|
|
|
577
579
|
this.focusInputEl()
|
|
578
580
|
}
|
|
579
581
|
|
|
582
|
+
/**
|
|
583
|
+
* Selecting a record, if required
|
|
584
|
+
* @param {Object[]} items
|
|
585
|
+
*/
|
|
586
|
+
onStoreLoad(items) {
|
|
587
|
+
let me = this,
|
|
588
|
+
value = me.value;
|
|
589
|
+
|
|
590
|
+
if (value) {
|
|
591
|
+
me._value = null; // silent update
|
|
592
|
+
me.value = value
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
|
|
580
596
|
/**
|
|
581
597
|
*
|
|
582
598
|
*/
|