neo.mjs 4.4.0 → 4.4.2
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/examples/list/base/MainContainer.mjs +11 -1
- package/package.json +1 -1
- package/resources/scss/src/form/field/Number.scss +12 -10
- package/resources/scss/src/form/field/Text.scss +6 -5
- package/resources/scss/src/form/field/trigger/Base.scss +2 -2
- package/resources/scss/theme-dark/form/field/Text.scss +11 -1
- package/resources/scss/theme-light/form/field/Text.scss +11 -1
- package/src/list/Base.mjs +20 -0
|
@@ -21,10 +21,20 @@ class MainContainer extends ConfigurationViewport {
|
|
|
21
21
|
let me = this;
|
|
22
22
|
|
|
23
23
|
return [{
|
|
24
|
+
module : NumberField,
|
|
25
|
+
clearable: true,
|
|
26
|
+
labelText: 'activeIndex',
|
|
27
|
+
listeners: {change: me.onConfigChange.bind(me, 'activeIndex')},
|
|
28
|
+
maxValue : 5,
|
|
29
|
+
minValue : 0,
|
|
30
|
+
stepSize : 1,
|
|
31
|
+
value : me.exampleComponent.activeIndex
|
|
32
|
+
}, {
|
|
24
33
|
module : CheckBox,
|
|
25
34
|
checked : me.exampleComponent.disableSelection,
|
|
26
35
|
labelText: 'disableSelection',
|
|
27
|
-
listeners: {change: me.onConfigChange.bind(me, 'disableSelection')}
|
|
36
|
+
listeners: {change: me.onConfigChange.bind(me, 'disableSelection')},
|
|
37
|
+
style : {marginTop: '10px'}
|
|
28
38
|
}, {
|
|
29
39
|
module : CheckBox,
|
|
30
40
|
checked : me.exampleComponent.draggable,
|
package/package.json
CHANGED
|
@@ -26,15 +26,17 @@
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.neo-spin-button {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
align-items : center;
|
|
30
|
+
border-left : 1px solid v(textfield-border-color);
|
|
31
|
+
color : v(trigger-color);
|
|
32
|
+
cursor : pointer;
|
|
33
|
+
display : flex;
|
|
34
|
+
font-size : 10px;
|
|
35
|
+
height : 50%;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
line-height : 11px;
|
|
38
|
+
text-align : center;
|
|
39
|
+
width : 22px;
|
|
38
40
|
|
|
39
41
|
&.neo-up {
|
|
40
42
|
border-bottom: 1px solid v(textfield-border-color);
|
|
@@ -51,4 +53,4 @@
|
|
|
51
53
|
color : v(trigger-color-hover);
|
|
52
54
|
}
|
|
53
55
|
}
|
|
54
|
-
}
|
|
56
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.neo-textfield {
|
|
2
2
|
align-items : center;
|
|
3
3
|
display : flex;
|
|
4
|
-
height :
|
|
4
|
+
height : calc(v(textfield-input-height) + v(textfield-border-width) * 2);
|
|
5
5
|
margin-bottom: 5px;
|
|
6
6
|
margin-top : 5px;
|
|
7
7
|
white-space : nowrap;
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
&.neo-focus {
|
|
10
10
|
.neo-input-wrapper {
|
|
11
11
|
border-color: v(textfield-border-color-active) !important;
|
|
12
|
+
outline : v(textfield-outline-active);
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
15
|
|
|
@@ -176,11 +177,11 @@
|
|
|
176
177
|
.neo-input-wrapper {
|
|
177
178
|
align-items : stretch;
|
|
178
179
|
background-color: v(textfield-input-background-color);
|
|
179
|
-
border :
|
|
180
|
+
border : v(textfield-border-width) solid v(textfield-border-color);
|
|
180
181
|
border-radius : v(textfield-border-radius);
|
|
181
182
|
display : flex;
|
|
182
183
|
flex : 1 1 100px;
|
|
183
|
-
min-height :
|
|
184
|
+
min-height : v(textfield-input-height);
|
|
184
185
|
overflow : hidden;
|
|
185
186
|
|
|
186
187
|
.neo-textfield-input {
|
|
@@ -207,9 +208,9 @@
|
|
|
207
208
|
border : 1px solid v(textfield-border-color);
|
|
208
209
|
border-radius : v(textfield-border-radius);
|
|
209
210
|
color : v(textfield-input-color);
|
|
210
|
-
font :
|
|
211
|
+
font : v(textfield-input-font);
|
|
211
212
|
min-height : 27px;
|
|
212
|
-
padding :
|
|
213
|
+
padding : v(textfield-input-padding);
|
|
213
214
|
transition : 250ms border-color cubic-bezier(0.4, 0, 0.2, 1);
|
|
214
215
|
width : 140px;
|
|
215
216
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
cursor : pointer;
|
|
5
5
|
display : inline-block;
|
|
6
6
|
font-size : 14px;
|
|
7
|
-
height :
|
|
7
|
+
height : v(textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
|
|
8
8
|
line-height: 26px;
|
|
9
9
|
text-align : center;
|
|
10
10
|
width : 22px;
|
|
@@ -24,4 +24,4 @@
|
|
|
24
24
|
.neo-field-trigger {
|
|
25
25
|
outline: none;
|
|
26
26
|
}
|
|
27
|
-
}
|
|
27
|
+
}
|
|
@@ -3,12 +3,17 @@ $neoMap: map-merge($neoMap, (
|
|
|
3
3
|
'textfield-border-color-active' : #5d83a7,
|
|
4
4
|
'textfield-border-color-invalid' : brown,
|
|
5
5
|
'textfield-border-radius' : 0,
|
|
6
|
+
'textfield-border-width' : 1px,
|
|
6
7
|
'textfield-input-background-color' : #2b2b2b,
|
|
7
8
|
'textfield-input-color' : #ccc,
|
|
9
|
+
'textfield-input-font' : 400 13px/17px Arial,
|
|
10
|
+
'textfield-input-height' : 25px,
|
|
11
|
+
'textfield-input-padding' : 3px 6px 2px,
|
|
8
12
|
'textfield-input-placeholder-color' : #ccc,
|
|
9
13
|
'textfield-input-placeholder-opacity': 0.6,
|
|
10
14
|
'textfield-label-color' : #bbb,
|
|
11
|
-
'textfield-label-top-margin' : 0 0 3px
|
|
15
|
+
'textfield-label-top-margin' : 0 0 3px,
|
|
16
|
+
'textfield-outline-active' : none
|
|
12
17
|
));
|
|
13
18
|
|
|
14
19
|
@if $useCssVars == true {
|
|
@@ -17,11 +22,16 @@ $neoMap: map-merge($neoMap, (
|
|
|
17
22
|
--textfield-border-color-active : #{neo(textfield-border-color-active)};
|
|
18
23
|
--textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
|
|
19
24
|
--textfield-border-radius : #{neo(textfield-border-radius)};
|
|
25
|
+
--textfield-border-width : #{neo(textfield-border-width)};
|
|
20
26
|
--textfield-input-background-color : #{neo(textfield-input-background-color)};
|
|
21
27
|
--textfield-input-color : #{neo(textfield-input-color)};
|
|
28
|
+
--textfield-input-font : #{neo(textfield-input-font)};
|
|
29
|
+
--textfield-input-height : #{neo(textfield-input-height)};
|
|
30
|
+
--textfield-input-padding : #{neo(textfield-input-padding)};
|
|
22
31
|
--textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
|
|
23
32
|
--textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
|
|
24
33
|
--textfield-label-color : #{neo(textfield-label-color)};
|
|
25
34
|
--textfield-label-top-margin : #{neo(textfield-label-top-margin)};
|
|
35
|
+
--textfield-outline-active : #{neo(textfield-outline-active)};
|
|
26
36
|
}
|
|
27
37
|
}
|
|
@@ -3,12 +3,17 @@ $neoMap: map-merge($neoMap, (
|
|
|
3
3
|
'textfield-border-color-active' : #1c60a0,
|
|
4
4
|
'textfield-border-color-invalid' : brown,
|
|
5
5
|
'textfield-border-radius' : 3px,
|
|
6
|
+
'textfield-border-width' : 1px,
|
|
6
7
|
'textfield-input-background-color' : #fff,
|
|
7
8
|
'textfield-input-color' : #000,
|
|
9
|
+
'textfield-input-font' : 400 13px/17px Arial,
|
|
10
|
+
'textfield-input-height' : 25px,
|
|
11
|
+
'textfield-input-padding' : 3px 6px 2px,
|
|
8
12
|
'textfield-input-placeholder-color' : #333,
|
|
9
13
|
'textfield-input-placeholder-opacity': 0.6,
|
|
10
14
|
'textfield-label-color' : #666,
|
|
11
|
-
'textfield-label-top-margin' : 0 0 3px
|
|
15
|
+
'textfield-label-top-margin' : 0 0 3px,
|
|
16
|
+
'textfield-outline-active' : none
|
|
12
17
|
));
|
|
13
18
|
|
|
14
19
|
@if $useCssVars == true {
|
|
@@ -17,11 +22,16 @@ $neoMap: map-merge($neoMap, (
|
|
|
17
22
|
--textfield-border-color-active : #{neo(textfield-border-color-active)};
|
|
18
23
|
--textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
|
|
19
24
|
--textfield-border-radius : #{neo(textfield-border-radius)};
|
|
25
|
+
--textfield-border-width : #{neo(textfield-border-width)};
|
|
20
26
|
--textfield-input-background-color : #{neo(textfield-input-background-color)};
|
|
21
27
|
--textfield-input-color : #{neo(textfield-input-color)};
|
|
28
|
+
--textfield-input-font : #{neo(textfield-input-font)};
|
|
29
|
+
--textfield-input-height : #{neo(textfield-input-height)};
|
|
30
|
+
--textfield-input-padding : #{neo(textfield-input-padding)};
|
|
22
31
|
--textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
|
|
23
32
|
--textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
|
|
24
33
|
--textfield-label-color : #{neo(textfield-label-color)};
|
|
25
34
|
--textfield-label-top-margin : #{neo(textfield-label-top-margin)};
|
|
35
|
+
--textfield-outline-active : #{neo(textfield-outline-active)};
|
|
26
36
|
}
|
|
27
37
|
}
|
package/src/list/Base.mjs
CHANGED
|
@@ -20,6 +20,10 @@ class Base extends Component {
|
|
|
20
20
|
* @protected
|
|
21
21
|
*/
|
|
22
22
|
ntype: 'list',
|
|
23
|
+
/**
|
|
24
|
+
* @member {Number|null} activeIndex_=null
|
|
25
|
+
*/
|
|
26
|
+
activeIndex_: null,
|
|
23
27
|
/**
|
|
24
28
|
* @member {Boolean} animate_=false
|
|
25
29
|
*/
|
|
@@ -136,6 +140,22 @@ class Base extends Component {
|
|
|
136
140
|
});
|
|
137
141
|
}
|
|
138
142
|
|
|
143
|
+
/**
|
|
144
|
+
* Triggered after the activeIndex config got changed
|
|
145
|
+
* @param {Number|null} value
|
|
146
|
+
* @param {Number|null} oldValue
|
|
147
|
+
* @protected
|
|
148
|
+
*/
|
|
149
|
+
afterSetActiveIndex(value, oldValue) {
|
|
150
|
+
let selectionModel = this.selectionModel;
|
|
151
|
+
|
|
152
|
+
if (Neo.isNumber(value)) {
|
|
153
|
+
selectionModel?.selectAt(value);
|
|
154
|
+
} else if (Neo.isNumber(oldValue)) {
|
|
155
|
+
selectionModel.deselectAll();
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
139
159
|
/**
|
|
140
160
|
* Triggered after the animate config got changed
|
|
141
161
|
* @param {Boolean} value
|