neo.mjs 5.13.3 → 5.13.5
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 -6
- package/package.json +1 -1
- package/resources/scss/src/button/Base.scss +3 -3
- package/resources/scss/src/form/field/Text.scss +1 -1
- 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/button/Base.mjs +2 -1
- package/src/form/field/Select.mjs +16 -0
- package/src/menu/List.mjs +53 -3
- package/src/selection/ListModel.mjs +18 -10
- package/src/selection/menu/ListModel.mjs +7 -0
package/apps/ServiceWorker.mjs
CHANGED
|
@@ -135,12 +135,11 @@ class MainContainer extends ConfigurationViewport {
|
|
|
135
135
|
labelPosition: 'inline',
|
|
136
136
|
labelText : 'US States',
|
|
137
137
|
labelWidth : 80,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
});
|
|
138
|
+
store : MainStore,
|
|
139
|
+
value : 'Arizona',
|
|
140
|
+
valueField : 'abbreviation',
|
|
141
|
+
width : 200
|
|
142
|
+
})
|
|
144
143
|
}
|
|
145
144
|
}
|
|
146
145
|
|
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);
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
.neo-textfield-input {
|
|
26
26
|
border-color: v(textfield-border-color-active);
|
|
27
|
-
outline : v(textfield-outline-active);
|
|
27
|
+
outline : v(textfield-outline-active) !important; // important is needed, since the default &:focus selector would get a prio
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
@@ -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.5'
|
|
240
240
|
* @memberOf! module:Neo
|
|
241
241
|
* @name config.version
|
|
242
242
|
* @type String
|
|
243
243
|
*/
|
|
244
|
-
version: '5.13.
|
|
244
|
+
version: '5.13.5'
|
|
245
245
|
};
|
|
246
246
|
|
|
247
247
|
Object.assign(DefaultConfig, {
|
package/src/button/Base.mjs
CHANGED
|
@@ -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
|
*/
|
package/src/menu/List.mjs
CHANGED
|
@@ -342,15 +342,49 @@ class List extends BaseList {
|
|
|
342
342
|
onItemClick(node, data) {
|
|
343
343
|
super.onItemClick(node, data);
|
|
344
344
|
|
|
345
|
-
let me
|
|
345
|
+
let me = this,
|
|
346
|
+
record = data.record;
|
|
346
347
|
|
|
347
|
-
|
|
348
|
+
record.handler?.call(me, record);
|
|
348
349
|
|
|
349
|
-
if (me.hideOnLeafItemClick && !
|
|
350
|
+
if (me.hideOnLeafItemClick && !record.items) {
|
|
350
351
|
me.unmount()
|
|
351
352
|
}
|
|
352
353
|
}
|
|
353
354
|
|
|
355
|
+
/**
|
|
356
|
+
* @param {String} nodeId
|
|
357
|
+
*/
|
|
358
|
+
onKeyDownEnter(nodeId) {
|
|
359
|
+
if (nodeId) {
|
|
360
|
+
let me = this,
|
|
361
|
+
recordId = me.getItemRecordId(nodeId),
|
|
362
|
+
record = me.store.get(recordId),
|
|
363
|
+
submenu;
|
|
364
|
+
|
|
365
|
+
record.handler?.call(me, record);
|
|
366
|
+
|
|
367
|
+
if (me.hideOnLeafItemClick && !record.items) {
|
|
368
|
+
me.unmount()
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
if (record.items) {
|
|
372
|
+
submenu = me.subMenuMap[me.getMenuMapId(recordId)];
|
|
373
|
+
|
|
374
|
+
if (submenu) {
|
|
375
|
+
me.toggleSubMenu(nodeId, record)
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/**
|
|
382
|
+
* @param {Object} data
|
|
383
|
+
*/
|
|
384
|
+
onKeyDownEscape(data) {
|
|
385
|
+
this.floating && this.unmount()
|
|
386
|
+
}
|
|
387
|
+
|
|
354
388
|
/**
|
|
355
389
|
* @param {String[]} items
|
|
356
390
|
*/
|
|
@@ -415,6 +449,22 @@ class List extends BaseList {
|
|
|
415
449
|
});
|
|
416
450
|
}
|
|
417
451
|
|
|
452
|
+
/**
|
|
453
|
+
* @param {String} nodeId
|
|
454
|
+
* @param {Object} record
|
|
455
|
+
*/
|
|
456
|
+
toggleSubMenu(nodeId, record) {
|
|
457
|
+
let me = this,
|
|
458
|
+
recordId = record[me.getKeyProperty()],
|
|
459
|
+
submenu = me.subMenuMap[me.getMenuMapId(recordId)];
|
|
460
|
+
|
|
461
|
+
if (!submenu?.mounted) {
|
|
462
|
+
me.showSubMenu(nodeId, record)
|
|
463
|
+
} else {
|
|
464
|
+
me.hideSubMenu()
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
|
|
418
468
|
/**
|
|
419
469
|
*
|
|
420
470
|
*/
|
|
@@ -38,6 +38,12 @@ class ListModel extends Model {
|
|
|
38
38
|
!view.disableSelection && view.onKeyDownEnter?.(this.getSelection()[0]);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
/**
|
|
42
|
+
* Placeholder method to get overridden by class extension list menu.ListModel
|
|
43
|
+
* @param {Object} data
|
|
44
|
+
*/
|
|
45
|
+
onKeyDownEscape(data) {}
|
|
46
|
+
|
|
41
47
|
/**
|
|
42
48
|
* @param {Object} data
|
|
43
49
|
*/
|
|
@@ -136,11 +142,12 @@ class ListModel extends Model {
|
|
|
136
142
|
view = me.view;
|
|
137
143
|
|
|
138
144
|
view.keys?._keys.push(
|
|
139
|
-
{fn: 'onKeyDownDown'
|
|
140
|
-
{fn: 'onKeyDownEnter'
|
|
141
|
-
{fn: '
|
|
142
|
-
{fn: '
|
|
143
|
-
{fn: '
|
|
145
|
+
{fn: 'onKeyDownDown' ,key: 'Down' ,scope: id},
|
|
146
|
+
{fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
|
|
147
|
+
{fn: 'onKeyDownEscape' ,key: 'Escape' ,scope: id},
|
|
148
|
+
{fn: 'onKeyDownLeft' ,key: 'Left' ,scope: id},
|
|
149
|
+
{fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
|
|
150
|
+
{fn: 'onKeyDownUp' ,key: 'Up' ,scope: id}
|
|
144
151
|
);
|
|
145
152
|
}
|
|
146
153
|
|
|
@@ -167,11 +174,12 @@ class ListModel extends Model {
|
|
|
167
174
|
view = me.view;
|
|
168
175
|
|
|
169
176
|
view.keys?.removeKeys([
|
|
170
|
-
{fn: 'onKeyDownDown'
|
|
171
|
-
{fn: 'onKeyDownEnter'
|
|
172
|
-
{fn: '
|
|
173
|
-
{fn: '
|
|
174
|
-
{fn: '
|
|
177
|
+
{fn: 'onKeyDownDown' ,key: 'Down' ,scope: id},
|
|
178
|
+
{fn: 'onKeyDownEnter' ,key: 'Enter' ,scope: id},
|
|
179
|
+
{fn: 'onKeyDownEscape' ,key: 'Escape' ,scope: id},
|
|
180
|
+
{fn: 'onKeyDownLeft' ,key: 'Left' ,scope: id},
|
|
181
|
+
{fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
|
|
182
|
+
{fn: 'onKeyDownUp' ,key: 'Up' ,scope: id}
|
|
175
183
|
]);
|
|
176
184
|
|
|
177
185
|
super.unregister();
|