neo.mjs 4.4.4 → 4.4.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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/resources/scss/src/form/field/Text.scss +11 -0
  3. package/resources/scss/src/form/field/trigger/Base.scss +12 -10
  4. package/resources/scss/theme-dark/form/field/Text.scss +5 -1
  5. package/resources/scss/theme-light/form/field/Text.scss +5 -1
  6. package/src/form/field/Text.mjs +25 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "4.4.4",
3
+ "version": "4.4.6",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
package/resources/scss/src/form/field/Text.scss CHANGED
@@ -13,6 +13,15 @@
13
13
  }
14
14
  }
15
15
 
16
+ &.neo-hovered {
17
+ &:not(&.neo-focus) {
18
+ .neo-input-wrapper {
19
+ border-color: v(textfield-border-color-hovered) !important;
20
+ outline : v(textfield-outline-hovered);
21
+ }
22
+ }
23
+ }
24
+
16
25
  &.neo-invalid:not(.neo-disabled) {
17
26
  .neo-input-wrapper {
18
27
  border-color: v(textfield-border-color-invalid);
@@ -182,7 +191,9 @@
182
191
  display : flex;
183
192
  flex : 1 1 100px;
184
193
  min-height : v(textfield-input-height);
194
+ outline : 0 solid v(textfield-outline-active);
185
195
  overflow : hidden;
196
+ transition : outline-width .1s ease-out;
186
197
 
187
198
  .neo-textfield-input {
188
199
  border : none;
package/resources/scss/src/form/field/trigger/Base.scss CHANGED
@@ -1,17 +1,19 @@
1
1
  .neo-field-trigger {
2
- border-left: 1px solid v(textfield-border-color);
3
- color : v(trigger-color);
4
- cursor : pointer;
5
- display : inline-block;
6
- font-size : 14px;
7
- height : v(textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
8
- line-height: 26px;
9
- text-align : center;
10
- width : 22px;
2
+ align-items : center;
3
+ border-left : v(textfield-border-width) solid v(textfield-border-color);
4
+ color : v(trigger-color);
5
+ cursor : pointer;
6
+ display : flex;
7
+ font-size : 14px;
8
+ height : v(textfield-input-height); // has to be 1px smaller to not overlap the bottom border on hover
9
+ justify-content: center;
10
+ line-height : 26px;
11
+ text-align : center;
12
+ width : 22px;
11
13
 
12
14
  &.neo-align-start {
13
15
  border-left : 0;
14
- border-right: 1px solid v(textfield-border-color);
16
+ border-right: v(textfield-border-width) solid v(textfield-border-color);
15
17
  }
16
18
 
17
19
  &:hover {
package/resources/scss/theme-dark/form/field/Text.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  $neoMap: map-merge($neoMap, (
2
2
  'textfield-border-color' : #424242,
3
3
  'textfield-border-color-active' : #5d83a7,
4
+ 'textfield-border-color-hovered' : #424242,
4
5
  'textfield-border-color-invalid' : brown,
5
6
  'textfield-border-radius' : 0,
6
7
  'textfield-border-width' : 1px,
@@ -13,13 +14,15 @@ $neoMap: map-merge($neoMap, (
13
14
  'textfield-input-placeholder-opacity': 0.6,
14
15
  'textfield-label-color' : #bbb,
15
16
  'textfield-label-top-margin' : 0 0 3px,
16
- 'textfield-outline-active' : none
17
+ 'textfield-outline-active' : none,
18
+ 'textfield-outline-hovered' : none
17
19
  ));
18
20
 
19
21
  @if $useCssVars == true {
20
22
  :root .neo-theme-dark { // .neo-textfield
21
23
  --textfield-border-color : #{neo(textfield-border-color)};
22
24
  --textfield-border-color-active : #{neo(textfield-border-color-active)};
25
+ --textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
23
26
  --textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
24
27
  --textfield-border-radius : #{neo(textfield-border-radius)};
25
28
  --textfield-border-width : #{neo(textfield-border-width)};
@@ -33,5 +36,6 @@ $neoMap: map-merge($neoMap, (
33
36
  --textfield-label-color : #{neo(textfield-label-color)};
34
37
  --textfield-label-top-margin : #{neo(textfield-label-top-margin)};
35
38
  --textfield-outline-active : #{neo(textfield-outline-active)};
39
+ --textfield-outline-hovered : #{neo(textfield-outline-hovered)};
36
40
  }
37
41
  }
package/resources/scss/theme-light/form/field/Text.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  $neoMap: map-merge($neoMap, (
2
2
  'textfield-border-color' : #ddd,
3
3
  'textfield-border-color-active' : #1c60a0,
4
+ 'textfield-border-color-hovered' : #ddd,
4
5
  'textfield-border-color-invalid' : brown,
5
6
  'textfield-border-radius' : 3px,
6
7
  'textfield-border-width' : 1px,
@@ -13,13 +14,15 @@ $neoMap: map-merge($neoMap, (
13
14
  'textfield-input-placeholder-opacity': 0.6,
14
15
  'textfield-label-color' : #666,
15
16
  'textfield-label-top-margin' : 0 0 3px,
16
- 'textfield-outline-active' : none
17
+ 'textfield-outline-active' : none,
18
+ 'textfield-outline-hovered' : none
17
19
  ));
18
20
 
19
21
  @if $useCssVars == true {
20
22
  :root .neo-theme-light { // .neo-textfield
21
23
  --textfield-border-color : #{neo(textfield-border-color)};
22
24
  --textfield-border-color-active : #{neo(textfield-border-color-active)};
25
+ --textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
23
26
  --textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
24
27
  --textfield-border-radius : #{neo(textfield-border-radius)};
25
28
  --textfield-border-width : #{neo(textfield-border-width)};
@@ -33,5 +36,6 @@ $neoMap: map-merge($neoMap, (
33
36
  --textfield-label-color : #{neo(textfield-label-color)};
34
37
  --textfield-label-top-margin : #{neo(textfield-label-top-margin)};
35
38
  --textfield-outline-active : #{neo(textfield-outline-active)};
39
+ --textfield-outline-hovered : #{neo(textfield-outline-hovered)};
36
40
  }
37
41
  }
package/src/form/field/Text.mjs CHANGED
@@ -157,9 +157,11 @@ class Text extends Base {
157
157
 
158
158
  let me = this;
159
159
 
160
- me.addDomListeners(
161
- {input: me.onInputValueChange, scope: me}
162
- );
160
+ me.addDomListeners([
161
+ {input : me.onInputValueChange, scope: me},
162
+ {mouseenter: me.onMouseEnter, scope: me},
163
+ {mouseleave: me.onMouseLeave, scope: me}
164
+ ]);
163
165
  }
164
166
 
165
167
  /**
@@ -942,6 +944,26 @@ class Text extends Base {
942
944
  }
943
945
  }
944
946
 
947
+ /**
948
+ * @param {Object} data
949
+ */
950
+ onMouseEnter(data) {
951
+ let cls = this.cls;
952
+
953
+ NeoArray.add(cls, 'neo-hovered');
954
+ this.cls = cls;
955
+ }
956
+
957
+ /**
958
+ * @param {Object} data
959
+ */
960
+ onMouseLeave(data) {
961
+ let cls = this.cls;
962
+
963
+ NeoArray.remove(cls, 'neo-hovered');
964
+ this.cls = cls;
965
+ }
966
+
945
967
  /**
946
968
  * Removes all triggers of a given type
947
969
  * @param {String} type