neo.mjs 4.6.4 → 4.6.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.
Files changed (8) hide show
  1. package/examples/button/base/MainContainer.mjs +18 -1
  2. package/package.json +1 -1
  3. package/resources/scss/src/button/Base.scss +60 -23
  4. package/resources/scss/theme-dark/button/Base.scss +16 -2
  5. package/resources/scss/theme-light/button/Base.scss +16 -2
  6. package/src/component/Base.mjs +10 -1
  7. package/src/component/Toast.mjs +9 -10
  8. package/src/form/field/Select.mjs +77 -81
package/examples/button/base/MainContainer.mjs CHANGED
@@ -1,8 +1,9 @@
1
1
  import Button from '../../../src/button/Base.mjs';
2
2
  import CheckBox from '../../../src/form/field/CheckBox.mjs';
3
3
  import ConfigurationViewport from '../../ConfigurationViewport.mjs';
4
- import Radio from '../../../src/form/field/Radio.mjs';
5
4
  import NumberField from '../../../src/form/field/Number.mjs';
5
+ import Radio from '../../../src/form/field/Radio.mjs';
6
+ import SelectField from '../../../src/form/field/Select.mjs';
6
7
  import TextField from '../../../src/form/field/Text.mjs';
7
8
 
8
9
  /**
@@ -136,6 +137,21 @@ class MainContainer extends ConfigurationViewport {
136
137
  listeners : {change: me.onConfigChange.bind(me, 'text')},
137
138
  style : {marginTop: '10px'},
138
139
  value : me.exampleComponent.text
140
+ }, {
141
+ module : SelectField,
142
+ forceSelection: true,
143
+ labelText : 'ui',
144
+ listeners : {change: me.onConfigChange.bind(me, 'ui')},
145
+ style : {marginTop: '10px'},
146
+ value : me.exampleComponent.ui,
147
+
148
+ store: {
149
+ data: [
150
+ {id: 'primary', name: 'primary'},
151
+ {id: 'secondary', name: 'secondary'},
152
+ {id: 'tertiary', name: 'tertiary'}
153
+ ]
154
+ }
139
155
  }, {
140
156
  module : CheckBox,
141
157
  checked : me.exampleComponent.useRippleEffect,
@@ -162,6 +178,7 @@ class MainContainer extends ConfigurationViewport {
162
178
  height : 50,
163
179
  iconCls : 'fa fa-home',
164
180
  text : 'Hello World',
181
+ ui : 'primary',
165
182
  width : 150,
166
183
 
167
184
  handler: (data) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "4.6.4",
3
+ "version": "4.6.5",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
package/resources/scss/src/button/Base.scss CHANGED
@@ -10,29 +10,42 @@
10
10
  }
11
11
 
12
12
  .neo-disabled {
13
- .neo-button {
14
- cursor: default;
13
+ .neo-button,
14
+ &.neo-button {
15
+ background-color: v(button-background-color-disabled);
16
+ border-color : v(button-border-color-disabled);
17
+ cursor : default;
18
+ opacity : v(button-opacity-disabled);
19
+
20
+ .neo-button-glyph {
21
+ color: v(button-glyph-color-disabled);
22
+ }
23
+
24
+ .neo-button-text {
25
+ color: v(button-text-color-disabled);
26
+ }
15
27
  }
16
28
  }
17
29
 
18
30
  .neo-button {
19
- align-items : center;
20
- background-color : v(button-background-color);
21
- background-image : v(button-background-image);
22
- border : v(button-border);
23
- border-radius : v(button-border-radius);
24
- box-sizing : border-box;
25
- cursor : pointer;
26
- display : flex;
27
- flex-direction : row;
28
- justify-content : center;
29
- margin : v(button-margin);
30
- padding : v(button-padding);
31
- position : relative;
32
- text-decoration : none; // for url buttons => links
33
- user-select : none;
34
- white-space : nowrap;
35
- -webkit-appearance : button;
31
+ align-items : center;
32
+ background-color : v(button-background-color);
33
+ background-image : v(button-background-image);
34
+ border : v(button-border-width) solid v(button-border-color);
35
+ border-radius : v(button-border-radius);
36
+ box-sizing : border-box;
37
+ cursor : pointer;
38
+ display : flex;
39
+ flex-direction : row;
40
+ justify-content : center;
41
+ margin : v(button-margin);
42
+ padding : v(button-padding);
43
+ position : relative;
44
+ text-decoration : none; // for url buttons => links
45
+ transition : outline-width .1s ease-out;
46
+ user-select : none;
47
+ white-space : nowrap;
48
+ -webkit-appearance: button;
36
49
 
37
50
  &:active {
38
51
  background-color: v(button-active-background-color) !important;
@@ -41,6 +54,10 @@
41
54
  color : v(button-active-color) !important;
42
55
  }
43
56
 
57
+ &:focus {
58
+ outline: v(button-outline-active);
59
+ }
60
+
44
61
  &:hover {
45
62
  background-color: v(button-hover-background-color);
46
63
  background-image: none !important;
@@ -48,6 +65,30 @@
48
65
  color : v(button-hover-color);
49
66
  }
50
67
 
68
+ &.neo-button-secondary {
69
+ background-color: v(button-text-color);
70
+ background-image: none;
71
+
72
+ .neo-button-badge {
73
+ background-color: v(button-badge-color);
74
+ color : v(button-badge-background-color);
75
+ }
76
+
77
+ .neo-button-glyph {
78
+ color: v(button-background-color);
79
+ }
80
+
81
+ .neo-button-text {
82
+ color: v(button-background-color);
83
+ }
84
+ }
85
+
86
+ &.neo-button-tertiary {
87
+ background-color: transparent;
88
+ background-image: none;
89
+ border-width : 0;
90
+ }
91
+
51
92
  &.no-text {
52
93
  .neo-button-glyph {
53
94
  margin: 0 !important;
@@ -125,10 +166,6 @@
125
166
  z-index : 2;
126
167
  }
127
168
 
128
- &:focus {
129
- outline : 0;
130
- }
131
-
132
169
  &.icon-bottom {
133
170
  flex-direction: column-reverse;
134
171
 
package/resources/scss/theme-dark/button/Base.scss CHANGED
@@ -3,6 +3,7 @@ $neoMap: map-merge($neoMap, (
3
3
  'button-active-border-color' : #282828,
4
4
  'button-active-color' : #bbb,
5
5
  'button-background-color' : #3c3f41,
6
+ 'button-background-color-disabled': #3c3f41,
6
7
  'button-background-image' : linear-gradient(#434749, #323536),
7
8
  'button-background-gradient-end' : #323536,
8
9
  'button-background-gradient-start': #434749,
@@ -10,17 +11,23 @@ $neoMap: map-merge($neoMap, (
10
11
  'button-badge-color' : #282828,
11
12
  'button-badge-margin-left' : -10px,
12
13
  'button-badge-margin-top' : -10px,
13
- 'button-border' : 1px solid #2b2b2b,
14
+ 'button-border-color' : #2b2b2b,
15
+ 'button-border-color-disabled' : #2b2b2b,
14
16
  'button-border-radius' : 0,
17
+ 'button-border-width' : 1px,
15
18
  'button-glyph-color' : #bbb,
19
+ 'button-glyph-color-disabled' : #bbb,
16
20
  'button-hover-background-color' : #3a3c3e,
17
21
  'button-hover-border-color' : #292929,
18
22
  'button-hover-color' : #bbb,
19
23
  'button-margin' : 2px,
24
+ 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
25
+ 'button-outline-active' : none,
20
26
  'button-padding' : 5px 12px 5px 12px,
21
27
  'button-pressed-border-color' : #5d83a7,
22
28
  'button-ripple-background-color' : darken(#5d83a7, 10%),
23
29
  'button-text-color' : #bbb,
30
+ 'button-text-color-disabled' : #bbb,
24
31
  'button-text-font-family' : #{neo(neo-font-family)},
25
32
  'button-text-font-size' : 11px,
26
33
  'button-text-font-weight' : 600,
@@ -35,6 +42,7 @@ $neoMap: map-merge($neoMap, (
35
42
  --button-active-border-color : #{neo(button-active-border-color)};
36
43
  --button-active-color : #{neo(button-active-color)};
37
44
  --button-background-color : #{neo(button-background-color)};
45
+ --button-background-color-disabled: #{neo(button-background-color-disabled)};
38
46
  --button-background-image : #{neo(button-background-image)};
39
47
  --button-background-gradient-end : #{neo(button-background-gradient-end)};
40
48
  --button-background-gradient-start: #{neo(button-background-gradient-start)};
@@ -42,17 +50,23 @@ $neoMap: map-merge($neoMap, (
42
50
  --button-badge-color : #{neo(button-badge-color)};
43
51
  --button-badge-margin-left : #{neo(button-badge-margin-left)};
44
52
  --button-badge-margin-top : #{neo(button-badge-margin-top)};
45
- --button-border : #{neo(button-border)};
53
+ --button-border-color : #{neo(button-border-color)};
54
+ --button-border-color-disabled : #{neo(button-border-color-disabled)};
46
55
  --button-border-radius : #{neo(button-border-radius)};
56
+ --button-border-width : #{neo(button-border-width)};
47
57
  --button-glyph-color : #{neo(button-glyph-color)};
58
+ --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
48
59
  --button-hover-background-color : #{neo(button-hover-background-color)};
49
60
  --button-hover-border-color : #{neo(button-hover-border-color)};
50
61
  --button-hover-color : #{neo(button-hover-color)};
51
62
  --button-margin : #{neo(button-margin)};
63
+ --button-opacity-disabled : #{neo(button-opacity-disabled)};
64
+ --button-outline-active : #{neo(button-outline-active)};
52
65
  --button-padding : #{neo(button-padding)};
53
66
  --button-pressed-border-color : #{neo(button-pressed-border-color)};
54
67
  --button-ripple-background-color : #{neo(button-ripple-background-color)};
55
68
  --button-text-color : #{neo(button-text-color)};
69
+ --button-text-color-disabled : #{neo(button-text-color-disabled)};
56
70
  --button-text-font-family : #{neo(button-text-font-family)};
57
71
  --button-text-font-size : #{neo(button-text-font-size)};
58
72
  --button-text-font-weight : #{neo(button-text-font-weight)};
package/resources/scss/theme-light/button/Base.scss CHANGED
@@ -3,6 +3,7 @@ $neoMap: map-merge($neoMap, (
3
3
  'button-active-border-color' : #1c60a0,
4
4
  'button-active-color' : #1c60a0,
5
5
  'button-background-color' : #fff,
6
+ 'button-background-color-disabled': #fff,
6
7
  'button-background-image' : none,
7
8
  'button-background-gradient-end' : #323536,
8
9
  'button-background-gradient-start': #434749,
@@ -10,17 +11,23 @@ $neoMap: map-merge($neoMap, (
10
11
  'button-badge-color' : #fff,
11
12
  'button-badge-margin-left' : -10px,
12
13
  'button-badge-margin-top' : -10px,
13
- 'button-border' : 1px solid #ddd,
14
+ 'button-border-color' : #ddd,
15
+ 'button-border-color-disabled' : #ddd,
14
16
  'button-border-radius' : 3px,
17
+ 'button-border-width' : 1px,
15
18
  'button-glyph-color' : #1c60a0,
19
+ 'button-glyph-color-disabled' : #1c60a0,
16
20
  'button-hover-background-color' : #fff,
17
21
  'button-hover-border-color' : #1c60a0,
18
22
  'button-hover-color' : #bbb,
19
23
  'button-margin' : 2px,
24
+ 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
25
+ 'button-outline-active' : none,
20
26
  'button-padding' : 5px 12px 5px 12px,
21
27
  'button-pressed-border-color' : #1c60a0,
22
28
  'button-ripple-background-color' : lighten(#1c60a0, 50%),
23
29
  'button-text-color' : #1c60a0,
30
+ 'button-text-color-disabled' : #1c60a0,
24
31
  'button-text-font-family' : #{neo(neo-font-family)},
25
32
  'button-text-font-size' : 11px,
26
33
  'button-text-font-weight' : 600,
@@ -35,6 +42,7 @@ $neoMap: map-merge($neoMap, (
35
42
  --button-active-border-color : #{neo(button-active-border-color)};
36
43
  --button-active-color : #{neo(button-active-color)};
37
44
  --button-background-color : #{neo(button-background-color)};
45
+ --button-background-color-disabled: #{neo(button-background-color-disabled)};
38
46
  --button-background-image : #{neo(button-background-image)};
39
47
  --button-background-gradient-end : #{neo(button-background-gradient-end)};
40
48
  --button-background-gradient-start: #{neo(button-background-gradient-start)};
@@ -42,17 +50,23 @@ $neoMap: map-merge($neoMap, (
42
50
  --button-badge-color : #{neo(button-badge-color)};
43
51
  --button-badge-margin-left : #{neo(button-badge-margin-left)};
44
52
  --button-badge-margin-top : #{neo(button-badge-margin-top)};
45
- --button-border : #{neo(button-border)};
53
+ --button-border-color : #{neo(button-border-color)};
54
+ --button-border-color-disabled : #{neo(button-border-color-disabled)};
46
55
  --button-border-radius : #{neo(button-border-radius)};
56
+ --button-border-width : #{neo(button-border-width)};
47
57
  --button-glyph-color : #{neo(button-glyph-color)};
58
+ --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
48
59
  --button-hover-background-color : #{neo(button-hover-background-color)};
49
60
  --button-hover-border-color : #{neo(button-hover-border-color)};
50
61
  --button-hover-color : #{neo(button-hover-color)};
51
62
  --button-margin : #{neo(button-margin)};
63
+ --button-opacity-disabled : #{neo(button-opacity-disabled)};
64
+ --button-outline-active : #{neo(button-outline-active)};
52
65
  --button-padding : #{neo(button-padding)};
53
66
  --button-pressed-border-color : #{neo(button-pressed-border-color)};
54
67
  --button-ripple-background-color : #{neo(button-ripple-background-color)};
55
68
  --button-text-color : #{neo(button-text-color)};
69
+ --button-text-color-disabled : #{neo(button-text-color-disabled)};
56
70
  --button-text-font-family : #{neo(button-text-font-family)};
57
71
  --button-text-font-size : #{neo(button-text-font-size)};
58
72
  --button-text-font-weight : #{neo(button-text-font-weight)};
package/src/component/Base.mjs CHANGED
@@ -1062,7 +1062,7 @@ class Base extends CoreBase {
1062
1062
  * Convenience shortcut for Neo.manager.Component.down
1063
1063
  * @param {Object|String} config
1064
1064
  * @param {Boolean} returnFirstMatch=true
1065
- * @returns {Neo.core.Base} The matching instance or null
1065
+ * @returns {Neo.component.Base|null} The matching instance or null
1066
1066
  */
1067
1067
  down(config, returnFirstMatch=true) {
1068
1068
  return ComponentManager.down(this, config, returnFirstMatch);
@@ -1187,6 +1187,15 @@ class Base extends CoreBase {
1187
1187
  return null;
1188
1188
  }
1189
1189
 
1190
+ /**
1191
+ * convenience shortcut
1192
+ * @param {String} value
1193
+ * @returns {Neo.component.Base|null}
1194
+ */
1195
+ getReference(value) {
1196
+ return this.down({reference: value})
1197
+ }
1198
+
1190
1199
  /**
1191
1200
  * Walks up the vdom tree and returns the closest theme found
1192
1201
  * @returns {String}
package/src/component/Toast.mjs CHANGED
@@ -111,7 +111,8 @@ class Toast extends Base {
111
111
  /**
112
112
  * @member {String|null} title=null
113
113
  */
114
- vdom: {cn: [{
114
+ vdom:
115
+ {cn: [{
115
116
  cls: 'neo-toast-inner', cn: [
116
117
  {cls: ['neo-toast-icon'], removeDom: true},
117
118
  {cls: 'neo-toast-text', cn: [
@@ -133,7 +134,7 @@ class Toast extends Base {
133
134
 
134
135
  // click listener for close
135
136
  me.addDomListeners([
136
- {click: {fn: me.unregister, delegate: '.neo-toast-close', scope: me}}
137
+ {click: {fn: me.destroy, delegate: '.neo-toast-close', scope: me}}
137
138
  ]);
138
139
 
139
140
  ToastManager.register(me);
@@ -154,12 +155,11 @@ class Toast extends Base {
154
155
  * @param {String|null} oldValue
155
156
  */
156
157
  afterSetIconCls(value, oldValue) {
157
- let vdom = this.getVdomInner().cn[0],
158
- cls = vdom.cls,
159
- clsFn = !!value ? 'add' : 'remove';
158
+ let vdom = this.getVdomInner().cn[0],
159
+ cls = vdom.cls;
160
160
 
161
161
  vdom.removeDom = Neo.isEmpty(value);
162
- NeoArray[clsFn](cls, value);
162
+ NeoArray[value ? 'add' : 'remove'](cls, value);
163
163
  }
164
164
 
165
165
  /**
@@ -170,7 +170,7 @@ class Toast extends Base {
170
170
  * @param {String|null} oldValue
171
171
  */
172
172
  afterSetMsg(value, oldValue) {
173
- let vdom = this.getTextRootVdom().cn[1];
173
+ let vdom = this.getTextRootVdom().cn[1];
174
174
 
175
175
  vdom.innerHTML = value;
176
176
  }
@@ -215,12 +215,11 @@ class Toast extends Base {
215
215
  * @param {String|null} oldValue
216
216
  */
217
217
  afterSetTitle(value, oldValue) {
218
- let vdom = this.getTextRootVdom().cn[0],
219
- clsFn = !!value ? 'add' : 'remove';
218
+ let vdom = this.getTextRootVdom().cn[0];
220
219
 
221
220
  vdom.removeDom = Neo.isEmpty(value);
222
221
  vdom.innerHTML = value;
223
- NeoArray[clsFn](vdom.cls, 'neo-toast-has-title');
222
+ NeoArray[value ? 'add' : 'remove'](vdom.cls, 'neo-toast-has-title');
224
223
  }
225
224
 
226
225
  /**
package/src/form/field/Select.mjs CHANGED
@@ -102,9 +102,9 @@ class Select extends Picker {
102
102
  * Showing the list via the down trigger can either show all list items or only show items which
103
103
  * match the filter string inside the input field.
104
104
  * Valid values: all, filtered
105
- * @member {String} triggerAction_='filtered'
105
+ * @member {String} triggerAction_='all'
106
106
  */
107
- triggerAction_: 'filtered',
107
+ triggerAction_: 'all',
108
108
  /**
109
109
  * Display the first matching result while typing
110
110
  * @member {Boolean} typeAhead_=true
@@ -150,7 +150,7 @@ class Select extends Picker {
150
150
  scope : me
151
151
  });
152
152
 
153
- me.typeAhead && me.updateTypeAhead();
153
+ me.typeAhead && me.updateTypeAhead()
154
154
  }
155
155
 
156
156
  /**
@@ -173,7 +173,7 @@ class Select extends Picker {
173
173
  value : value.get(me.value)?.[me.displayField] || me.value
174
174
  });
175
175
 
176
- value.filters = filters;
176
+ value.filters = filters
177
177
  }
178
178
  }
179
179
 
@@ -184,14 +184,14 @@ class Select extends Picker {
184
184
  * @protected
185
185
  */
186
186
  afterSetTypeAhead(value, oldValue) {
187
- this.rendered && this.updateTypeAhead();
187
+ this.rendered && this.updateTypeAhead()
188
188
  }
189
189
 
190
190
  /**
191
191
  * Triggered after the value config got changed
192
192
  * @param {Number|String|null} value
193
193
  * @param {Number|String|null} oldValue
194
- * @param {Boolean} [preventFilter=false]
194
+ * @param {Boolean} preventFilter=false
195
195
  * @protected
196
196
  */
197
197
  afterSetValue(value, oldValue, preventFilter=false) {
@@ -201,7 +201,7 @@ class Select extends Picker {
201
201
  !preventFilter && this.updateValue(true);
202
202
  list && (list.silentVdomUpdate = false);
203
203
 
204
- super.afterSetValue(value, oldValue);
204
+ super.afterSetValue(value, oldValue)
205
205
  }
206
206
 
207
207
  /**
@@ -213,7 +213,7 @@ class Select extends Picker {
213
213
  */
214
214
  beforeSetListConfig(value, oldValue) {
215
215
  value && this.parseItemConfigs(value);
216
- return value;
216
+ return value
217
217
  }
218
218
 
219
219
  /**
@@ -237,7 +237,7 @@ class Select extends Picker {
237
237
  }
238
238
  }
239
239
 
240
- return ClassSystemUtil.beforeSetInstance(value, Store);
240
+ return ClassSystemUtil.beforeSetInstance(value, Store)
241
241
  }
242
242
 
243
243
  /**
@@ -247,7 +247,7 @@ class Select extends Picker {
247
247
  * @protected
248
248
  */
249
249
  beforeSetTriggerAction(value, oldValue) {
250
- return this.beforeSetEnumValue(value, oldValue, 'triggerAction');
250
+ return this.beforeSetEnumValue(value, oldValue, 'triggerAction')
251
251
  }
252
252
 
253
253
  /**
@@ -277,14 +277,14 @@ class Select extends Picker {
277
277
 
278
278
  me.record = store.find(displayField, value)[0] || null;
279
279
 
280
- return value;
280
+ return value
281
281
  }
282
282
 
283
283
  /**
284
284
  * @returns {Neo.list.Base}
285
285
  */
286
286
  createPickerComponent() {
287
- return this.list;
287
+ return this.list
288
288
  }
289
289
 
290
290
  /**
@@ -307,7 +307,7 @@ class Select extends Picker {
307
307
  oldValue,
308
308
  record,
309
309
  value
310
- });
310
+ })
311
311
  }
312
312
  }
313
313
 
@@ -322,18 +322,18 @@ class Select extends Picker {
322
322
  me.value = lastManualInput;
323
323
 
324
324
  Neo.main.DomAccess.focus({
325
- id: me.getInputElId()
325
+ appName: me.appName,
326
+ id : me.getInputElId()
326
327
  }).then(() => {
327
- callback?.apply(me);
328
- });
328
+ callback?.apply(me)
329
+ })
329
330
  }
330
331
 
331
332
  /**
332
333
  * @returns {Object}
333
334
  */
334
335
  getInputHintEl() {
335
- let el = VDomUtil.findVdomChild(this.vdom, this.getInputHintId());
336
- return el?.vdom;
336
+ return VDomUtil.findVdomChild(this.vdom, this.getInputHintId())?.vdom
337
337
  }
338
338
 
339
339
  /**
@@ -351,7 +351,7 @@ class Select extends Picker {
351
351
  let list = this.list,
352
352
  recordKey = list.selectionModel.getSelection()[0];
353
353
 
354
- return recordKey && this.store.get(list.getItemRecordId(recordKey)) || null;
354
+ return recordKey && this.store.get(list.getItemRecordId(recordKey)) || null
355
355
  }
356
356
 
357
357
  /**
@@ -360,7 +360,7 @@ class Select extends Picker {
360
360
  getSubmitValue() {
361
361
  let me = this;
362
362
 
363
- return me.record?.[me.valueField] || me.value;
363
+ return me.record?.[me.valueField] || me.value
364
364
  }
365
365
 
366
366
  /**
@@ -368,7 +368,7 @@ class Select extends Picker {
368
368
  * @protected
369
369
  */
370
370
  onContainerKeyDownEnter(data) {
371
- this.hidePicker();
371
+ this.hidePicker()
372
372
  }
373
373
 
374
374
  /**
@@ -376,7 +376,7 @@ class Select extends Picker {
376
376
  * @protected
377
377
  */
378
378
  onContainerKeyDownEscape(data) {
379
- this.focusInputEl(this.hidePicker);
379
+ this.focusInputEl(this.hidePicker)
380
380
  }
381
381
 
382
382
  /**
@@ -391,7 +391,7 @@ class Select extends Picker {
391
391
  me.value = me.hintRecordId;
392
392
  }
393
393
 
394
- super.onFocusLeave(data);
394
+ super.onFocusLeave(data)
395
395
  }
396
396
 
397
397
  /**
@@ -400,7 +400,7 @@ class Select extends Picker {
400
400
  */
401
401
  onInputValueChange(data) {
402
402
  super.onInputValueChange(data);
403
- this.lastManualInput = data.value;
403
+ this.lastManualInput = data.value
404
404
  }
405
405
 
406
406
  /**
@@ -408,7 +408,7 @@ class Select extends Picker {
408
408
  * @protected
409
409
  */
410
410
  onKeyDownDown(data) {
411
- this.onKeyDownEnter(data);
411
+ this.onKeyDownEnter(data)
412
412
  }
413
413
 
414
414
  /**
@@ -420,9 +420,9 @@ class Select extends Picker {
420
420
 
421
421
  if (me.pickerIsMounted) {
422
422
  me.selectListItem();
423
- super.onKeyDownEnter(data);
423
+ super.onKeyDownEnter(data)
424
424
  } else {
425
- super.onKeyDownEnter(data, me.selectListItem);
425
+ super.onKeyDownEnter(data, me.selectListItem)
426
426
  }
427
427
  }
428
428
 
@@ -441,7 +441,7 @@ class Select extends Picker {
441
441
  me.record = record;
442
442
  me._value = record[me.displayField];
443
443
 
444
- me.afterSetValue(me._value, oldValue);
444
+ me.afterSetValue(me._value, oldValue)
445
445
  }
446
446
  }
447
447
 
@@ -454,9 +454,9 @@ class Select extends Picker {
454
454
 
455
455
  if (me.pickerIsMounted) {
456
456
  me.selectLastListItem();
457
- super.onKeyDownEnter(data);
457
+ super.onKeyDownEnter(data)
458
458
  } else {
459
- super.onKeyDownEnter(data, me.selectLastListItem);
459
+ super.onKeyDownEnter(data, me.selectLastListItem)
460
460
  }
461
461
  }
462
462
 
@@ -465,7 +465,32 @@ class Select extends Picker {
465
465
  */
466
466
  onListCreateItems() {
467
467
  let me = this;
468
- me.typeAhead && me.picker?.mounted && me.updateTypeAheadValue();
468
+ me.typeAhead && me.picker?.mounted && me.updateTypeAheadValue()
469
+ }
470
+
471
+ /**
472
+ * @param {Object} record
473
+ * @protected
474
+ */
475
+ onListItemChange(record) {
476
+ let me = this,
477
+ displayField = me.displayField,
478
+ oldValue = me.value,
479
+ value = record[displayField];
480
+
481
+ if (me.value !== value) {
482
+ me.hintRecordId = null;
483
+ me.record = record;
484
+ me._value = value;
485
+ me.getInputHintEl().value = null;
486
+
487
+ me.afterSetValue(value, oldValue, true); // prevent the list from getting filtered
488
+
489
+ me.fire('select', {
490
+ record,
491
+ value: record[displayField]
492
+ })
493
+ }
469
494
  }
470
495
 
471
496
  /**
@@ -474,7 +499,15 @@ class Select extends Picker {
474
499
  */
475
500
  onListItemClick(record) {
476
501
  this.onListItemChange(record);
477
- this.hidePicker();
502
+ this.hidePicker()
503
+ }
504
+
505
+ /**
506
+ * @param {Object} record
507
+ * @protected
508
+ */
509
+ onListItemNavigate(record) {
510
+ this.onListItemChange(record)
478
511
  }
479
512
 
480
513
  /**
@@ -493,7 +526,7 @@ class Select extends Picker {
493
526
  }
494
527
  }
495
528
 
496
- super.onPickerTriggerClick();
529
+ super.onPickerTriggerClick()
497
530
  }
498
531
 
499
532
  /**
@@ -501,7 +534,7 @@ class Select extends Picker {
501
534
  */
502
535
  onSelectPostLastItem() {
503
536
  this.record = null;
504
- this.focusInputEl();
537
+ this.focusInputEl()
505
538
  }
506
539
 
507
540
  /**
@@ -509,55 +542,21 @@ class Select extends Picker {
509
542
  */
510
543
  onSelectPreFirstItem() {
511
544
  this.record = null;
512
- this.focusInputEl();
513
- }
514
-
515
-
516
- /**
517
- * @param {Object} record
518
- * @protected
519
- */
520
- onListItemChange(record) {
521
- let me = this,
522
- displayField = me.displayField,
523
- oldValue = me.value,
524
- value = record[displayField];
525
-
526
- if (me.value !== value) {
527
- me.hintRecordId = null;
528
- me.record = record;
529
- me._value = value;
530
- me.getInputHintEl().value = null;
531
-
532
- me.afterSetValue(value, oldValue, true); // prevent the list from getting filtered
533
-
534
- me.fire('select', {
535
- record,
536
- value: record[displayField]
537
- });
538
- }
539
- }
540
-
541
- /**
542
- * @param {Object} record
543
- * @protected
544
- */
545
- onListItemNavigate(record) {
546
- this.onListItemChange(record);
545
+ this.focusInputEl()
547
546
  }
548
547
 
549
548
  /**
550
549
  *
551
550
  */
552
551
  selectFirstListItem() {
553
- this.selectListItem(0);
552
+ this.selectListItem(0)
554
553
  }
555
554
 
556
555
  /**
557
556
  *
558
557
  */
559
558
  selectLastListItem() {
560
- this.selectListItem(this.store.getCount() -1);
559
+ this.selectListItem(this.store.getCount() -1)
561
560
  }
562
561
 
563
562
  /**
@@ -576,7 +575,7 @@ class Select extends Picker {
576
575
  }
577
576
 
578
577
  me.list.selectItem(index);
579
- me.onListItemNavigate(me.store.getAt(index));
578
+ me.onListItemNavigate(me.store.getAt(index))
580
579
  }
581
580
 
582
581
  /**
@@ -605,7 +604,7 @@ class Select extends Picker {
605
604
  VDomUtil.replaceVdomChild(vdom, inputEl.parentNode.id, inputEl.vdom);
606
605
  }
607
606
 
608
- me[silent ? '_vdom' : 'vdom'] = vdom;
607
+ !silent && me.update()
609
608
  }
610
609
 
611
610
  /**
@@ -619,7 +618,6 @@ class Select extends Picker {
619
618
  store = me.store,
620
619
  i = 0,
621
620
  len = store.getCount(),
622
- vdom = me.vdom,
623
621
  inputHintEl = me.getInputHintEl(),
624
622
  storeValue;
625
623
 
@@ -628,7 +626,6 @@ class Select extends Picker {
628
626
  storeValue = store.items[i][me.displayField];
629
627
 
630
628
  if (!Neo.isString(storeValue)) {
631
- console.log(store);
632
629
  return;
633
630
  }
634
631
 
@@ -640,7 +637,7 @@ class Select extends Picker {
640
637
 
641
638
  if (hasMatch && inputHintEl) {
642
639
  inputHintEl.value = value + storeValue.substr(value.length);
643
- me.hintRecordId = store.items[i][store.keyProperty || store.model.keyProperty];
640
+ me.hintRecordId = store.items[i][store.keyProperty || store.model.keyProperty]
644
641
  }
645
642
  }
646
643
 
@@ -649,11 +646,11 @@ class Select extends Picker {
649
646
  me.hintRecordId = null;
650
647
  }
651
648
 
652
- me[silent ? '_vdom' : 'vdom'] = vdom;
649
+ !silent && me.update()
653
650
  }
654
651
 
655
652
  /**
656
- * @param {Boolean} [silent=false]
653
+ * @param {Boolean} silent=false
657
654
  * @protected
658
655
  */
659
656
  updateValue(silent=false) {
@@ -661,19 +658,18 @@ class Select extends Picker {
661
658
  displayField = me.displayField,
662
659
  store = me.store,
663
660
  value = me._value,
664
- record = me.record,
665
661
  filter;
666
662
 
667
663
  if (store && !Neo.isEmpty(store.filters)) {
668
664
  filter = store.getFilter(displayField);
669
665
 
670
666
  if (filter) {
671
- filter.value = record?.[displayField] || value;
667
+ filter.value = me.record?.[displayField] || value;
672
668
  }
673
669
  }
674
670
 
675
671
  if (me.typeAhead && !me.picker?.containsFocus) {
676
- me.updateTypeAheadValue(value, silent);
672
+ me.updateTypeAheadValue(value, silent)
677
673
  }
678
674
  }
679
675
  }