neo.mjs 4.6.2 → 4.6.3

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 (10) hide show
  1. package/examples/toast/MainContainer.mjs +11 -6
  2. package/examples/toast/MainContainerController.mjs +1 -1
  3. package/package.json +1 -1
  4. package/resources/scss/src/dialog/Toast.scss +118 -118
  5. package/resources/scss/src/form/field/Text.scss +92 -24
  6. package/resources/scss/theme-dark/form/field/Text.scss +11 -1
  7. package/resources/scss/theme-light/form/field/Text.scss +10 -0
  8. package/src/collection/Base.mjs +0 -1
  9. package/src/dialog/Toast.mjs +140 -68
  10. package/src/form/field/Text.mjs +31 -21
package/examples/toast/MainContainer.mjs CHANGED
@@ -33,7 +33,7 @@ class MainContainer extends Viewport {
33
33
  maxValue : 4000,
34
34
  style : {marginLeft: '10px'},
35
35
  useSpinButtons: false,
36
- width : 150
36
+ width : 200
37
37
  },
38
38
 
39
39
  items: [{
@@ -52,27 +52,32 @@ class MainContainer extends Viewport {
52
52
  name : 'iconCls'
53
53
  }, {
54
54
  module : SelectField,
55
- labelText: 'position',
55
+ labelText: 'position = tr',
56
56
  name : 'position',
57
57
  store : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]}
58
58
  }, {
59
59
  module : SelectField,
60
- labelText: 'slideDirection',
60
+ labelText: 'slideDirection = down',
61
61
  name : 'slideDirection',
62
62
  store : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]}
63
63
  }, {
64
64
  module : SelectField,
65
- labelText: 'ui',
65
+ labelText: 'ui = info',
66
66
  name : 'ui',
67
67
  store : {data: [{name: 'info'}, {name: 'danger'}, {name: 'success'}]}
68
68
  }, {
69
69
  module : NumberField,
70
- labelText: 'minHeight',
70
+ labelText: 'minHeight = 50',
71
71
  name : 'minHeight'
72
72
  }, {
73
73
  module : NumberField,
74
- labelText: 'maxWidth',
74
+ labelText: 'maxWidth = 250',
75
75
  name : 'maxWidth'
76
+ }, {
77
+ module : NumberField,
78
+ labelText: 'timeout = 3000',
79
+ name : 'timeout',
80
+ maxValue : 99999
76
81
  }, {
77
82
  module : CheckBox,
78
83
  labelText : 'Closable',
package/examples/toast/MainContainerController.mjs CHANGED
@@ -62,7 +62,7 @@ class MainContainerController extends ComponentController {
62
62
  let me = this,
63
63
  form = me.getReference('form'),
64
64
  values = form.getValues(),
65
- clear = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable'];
65
+ clear = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
66
66
 
67
67
  // use the defaults from toast if not set
68
68
  clear.forEach(item => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "4.6.2",
3
+ "version": "4.6.3",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
package/resources/scss/src/dialog/Toast.scss CHANGED
@@ -1,190 +1,190 @@
1
1
  .neo-toast {
2
- align-items : center;
3
- background-color: v(toast-background-color);
4
- border-radius : 0.5rem;
5
- box-shadow : 0 0.25rem 0.5rem v(toast-shadow-color);
6
- color : v(toast-color);
7
- display : flex;
8
- position : fixed;
2
+ z-index: 20; // ensure to be on top of table headers
3
+ align-items: center;
4
+ background-color: v(toast-background-color);
5
+ border-radius: 0.5rem;
6
+ box-shadow: 0 0.25rem 0.5rem v(toast-shadow-color);
7
+ color: v(toast-color);
8
+ display: flex;
9
+ position: fixed;
10
+
11
+ .neo-toast-inner {
12
+ align-items: center;
13
+ display: flex;
14
+
15
+ &.neo-toast-has-title {
16
+ .neo-toast-text {
17
+ text-align: left;
18
+ }
19
+ }
9
20
 
10
21
  & > div {
11
- background-color: transparent;
12
-
13
- .neo-toast-inner {
14
- align-items: center;
15
- display : flex;
16
-
17
- &.neo-toast-has-title {
18
- .neo-toast-text {
19
- text-align: left;
20
- }
21
- }
22
-
23
- & > div {
24
- padding: 0.25em 0.5em;
25
- }
26
-
27
- .neo-toast-icon {
28
- border-right: 2px solid v(toast-color);
29
- flex : 1;
30
- font-size : 1.5em;
31
- }
32
-
33
- .neo-toast-text {
34
- padding : 0.25em 1em;
35
- text-align: center;
36
-
37
- .neo-toast-msg {
38
- font-size: 0.8em;
39
- }
40
-
41
- .neo-toast-title {
42
- padding-bottom: 0.2em;
43
- }
44
- }
45
-
46
- .neo-toast-close {
47
- background : transparent;
48
- border : 0;
49
- color : inherit;
50
- cursor : pointer;
51
- font-size : 1.5rem;
52
- line-height: 1.5;
53
- margin-left: auto;
54
- }
55
- }
22
+ padding: 0.25em 0.5em;
23
+ }
24
+
25
+ .neo-toast-icon {
26
+ border-right: 2px solid v(toast-color);
27
+ flex: 1;
28
+ font-size: 1.5em;
29
+ }
30
+
31
+ .neo-toast-text {
32
+ padding: 0.25em 1em;
33
+ text-align: center;
34
+
35
+ .neo-toast-msg {
36
+ font-size: 0.8em;
37
+ }
38
+
39
+ .neo-toast-title {
40
+ padding-bottom: 0.2em;
41
+ text-transform: uppercase;
42
+ }
43
+ }
44
+
45
+ .neo-toast-close {
46
+ background: transparent;
47
+ border: 0;
48
+ color: inherit;
49
+ cursor: pointer;
50
+ font-size: 1.5rem;
51
+ line-height: 1.5;
52
+ margin-left: auto;
56
53
  }
54
+ }
57
55
  }
56
+
58
57
  // ui: danger
59
58
  .neo-toast-danger {
60
- background-color: v(toast-danger-background-color);
61
- color : v(toast-danger-color);
59
+ background-color: v(toast-danger-background-color);
60
+ color: v(toast-danger-color);
62
61
 
63
- & > div {
62
+ & > div {
64
63
 
65
- .neo-toast-inner {
64
+ .neo-toast-inner {
66
65
 
67
- .neo-toast-icon {
68
- border-right: 2px solid v(toast-danger-color);
69
- }
70
- }
66
+ .neo-toast-icon {
67
+ border-right: 2px solid v(toast-danger-color);
68
+ }
71
69
  }
70
+ }
72
71
  }
72
+
73
73
  // ui: success
74
74
  .neo-toast-success {
75
- background-color: v(toast-success-background-color);
76
- color : v(toast-success-color);
75
+ background-color: v(toast-success-background-color);
76
+ color: v(toast-success-color);
77
77
 
78
- & > div {
78
+ & > div {
79
79
 
80
- .neo-toast-inner {
80
+ .neo-toast-inner {
81
81
 
82
- .neo-toast-icon {
83
- border-right: 2px solid v(toast-success-color);
84
- }
85
- }
82
+ .neo-toast-icon {
83
+ border-right: 2px solid v(toast-success-color);
84
+ }
86
85
  }
86
+ }
87
87
  }
88
88
 
89
89
  /* Toast positions */
90
90
  .neo-toast-tr {
91
- right: 1rem;
92
- top : 1rem;
91
+ right: 1rem;
92
+ top: 1rem;
93
93
  }
94
94
 
95
95
  .neo-toast-tc {
96
- left : 50%;
97
- top : 1rem;
98
- transform: translateX(-50%);
96
+ left: 50%;
97
+ top: 1rem;
98
+ transform: translateX(-50%);
99
99
  }
100
100
 
101
101
  .neo-toast-tl {
102
- left: 1rem;
103
- top : 1rem;
102
+ left: 1rem;
103
+ top: 1rem;
104
104
  }
105
105
 
106
106
  .neo-toast-br {
107
- bottom: 1rem;
108
- right : 1rem;
107
+ bottom: 1rem;
108
+ right: 1rem;
109
109
  }
110
110
 
111
111
  .neo-toast-bc {
112
- bottom : 1rem;
113
- left : 50%;
114
- transform: translateX(-50%);
112
+ bottom: 1rem;
113
+ left: 50%;
114
+ transform: translateX(-50%);
115
115
  }
116
116
 
117
117
  .neo-toast-bl {
118
- bottom: 1rem;
119
- left : 1rem;
118
+ bottom: 1rem;
119
+ left: 1rem;
120
120
  }
121
121
 
122
122
  /* Toast slide-in animation */
123
123
  @keyframes neo-toast-slide-down-in {
124
- from {
125
- transform: translateY(-150%);
126
- }
127
- to {
128
- transform: translateY(0);
129
- }
124
+ from {
125
+ transform: translateY(-150%);
126
+ }
127
+ to {
128
+ transform: translateY(0);
129
+ }
130
130
  }
131
131
 
132
132
  @keyframes neo-toast-slide-up-in {
133
- from {
134
- transform: translateY(150%);
135
- }
136
- to {
137
- transform: translateY(0);
138
- }
133
+ from {
134
+ transform: translateY(150%);
135
+ }
136
+ to {
137
+ transform: translateY(0);
138
+ }
139
139
  }
140
140
 
141
141
  @keyframes neo-toast-slide-left-in {
142
- from {
143
- transform: translateX(-150%);
144
- }
145
- to {
146
- transform: translateX(0);
147
- }
142
+ from {
143
+ transform: translateX(-150%);
144
+ }
145
+ to {
146
+ transform: translateX(0);
147
+ }
148
148
  }
149
149
 
150
150
  @keyframes neo-toast-slide-right-in {
151
- from {
152
- transform: translateX(150%);
153
- }
154
- to {
155
- transform: translateX(0);
156
- }
151
+ from {
152
+ transform: translateX(150%);
153
+ }
154
+ to {
155
+ transform: translateX(0);
156
+ }
157
157
  }
158
158
 
159
159
  /* Add the slide-in animation to the toast when the slide-in class is added */
160
160
  .neo-toast-slide-down-in {
161
- animation: neo-toast-slide-down-in 0.25s ease-out;
161
+ animation: neo-toast-slide-down-in 0.25s ease-out;
162
162
  }
163
163
 
164
164
  .neo-toast-slide-up-in {
165
- animation: neo-toast-slide-up-in 0.25s ease-out;
165
+ animation: neo-toast-slide-up-in 0.25s ease-out;
166
166
  }
167
167
 
168
168
  .neo-toast-slide-left-in {
169
- animation: neo-toast-slide-left-in 0.25s ease-out;
169
+ animation: neo-toast-slide-left-in 0.25s ease-out;
170
170
  }
171
171
 
172
172
  .neo-toast-slide-right-in {
173
- animation: neo-toast-slide-right-in 0.25s ease-out;
173
+ animation: neo-toast-slide-right-in 0.25s ease-out;
174
174
  }
175
175
 
176
176
  /* Toast fade-out animation */
177
177
  @keyframes neo-toast-fade-out {
178
- from {
179
- opacity: 1;
180
- }
181
- to {
182
- opacity: 0;
183
- }
178
+ from {
179
+ opacity: 1;
180
+ }
181
+ to {
182
+ opacity: 0;
183
+ }
184
184
  }
185
185
 
186
186
  /* Add the fade-out animation to the toast when the fade-out class is added */
187
187
  .neo-toast-fade-out {
188
- animation : neo-toast-fade-out 0.25s ease-out;
189
- animation-fill-mode: forwards;
188
+ animation: neo-toast-fade-out 0.25s ease-out;
189
+ animation-fill-mode: forwards;
190
190
  }
package/resources/scss/src/form/field/Text.scss CHANGED
@@ -11,13 +11,44 @@
11
11
  border-color: v(textfield-border-color-active) !important;
12
12
  outline : v(textfield-outline-active);
13
13
  }
14
+
15
+ .neo-label-wrapper { // labelPosition: inline
16
+ .neo-textfield-input {
17
+ border-color: transparent;
18
+ }
19
+ }
20
+
21
+ .neo-textfield-input {
22
+ border-color: v(textfield-border-color-active);
23
+ outline : v(textfield-outline-active);
24
+ }
14
25
  }
15
26
 
16
27
  &.neo-hovered {
17
28
  &:not(&.neo-focus) {
18
- .neo-input-wrapper {
19
- border-color: v(textfield-border-color-hovered) !important;
20
- outline : v(textfield-outline-hovered);
29
+ &:not(&.label-inline) {
30
+ .neo-input-wrapper {
31
+ border-color: v(textfield-border-color-hovered) !important;
32
+ outline : v(textfield-outline-hovered);
33
+ }
34
+ }
35
+
36
+ .neo-label-wrapper {
37
+ .neo-center-border, .neo-left-border, .neo-right-border {
38
+ border-bottom-color: v(textfield-border-color-hovered);
39
+ }
40
+
41
+ .neo-left-border, .neo-right-border {
42
+ border-top-color: v(textfield-border-color-hovered);
43
+ }
44
+
45
+ .neo-left-border {
46
+ border-left-color: v(textfield-border-color-hovered);
47
+ }
48
+
49
+ .neo-right-border {
50
+ border-right-color: v(textfield-border-color-hovered);
51
+ }
21
52
  }
22
53
  }
23
54
  }
@@ -54,6 +85,44 @@
54
85
  }
55
86
  }
56
87
 
88
+ &.neo-disabled {
89
+ opacity: v(textfield-opacity-disabled);
90
+
91
+ &.label-inline {
92
+ .neo-label-wrapper {
93
+ .neo-center-border, .neo-left-border, .neo-right-border {
94
+ border-bottom-color: v(textfield-border-color-disabled);
95
+ }
96
+
97
+ .neo-left-border, .neo-right-border {
98
+ border-top-color: v(textfield-border-color-disabled);
99
+ }
100
+
101
+ .neo-left-border {
102
+ border-left-color: v(textfield-border-color-disabled);
103
+ }
104
+
105
+ .neo-right-border {
106
+ border-right-color: v(textfield-border-color-disabled);
107
+ }
108
+ }
109
+ }
110
+
111
+ .neo-input-wrapper {
112
+ background-color: v(textfield-input-background-color-disabled);
113
+ border-color : v(textfield-border-color-disabled);
114
+ }
115
+
116
+ .neo-textfield-input {
117
+ background-color: v(textfield-input-background-color-disabled);
118
+ color : v(textfield-input-color-disabled);
119
+ }
120
+
121
+ .neo-textfield-label {
122
+ color: v(textfield-label-color-disabled);
123
+ }
124
+ }
125
+
57
126
  &.neo-readonly {
58
127
  opacity: v(textfield-opacity-readonly);
59
128
 
@@ -133,7 +202,7 @@
133
202
 
134
203
  .neo-textfield-label {
135
204
  color : v(textfield-border-color-active) !important;
136
- transform: translateX(4px) translateY(-65%) scale(.7);
205
+ transform: translateX(4px) translateY(calc(-62% - 0.5 * v(textfield-border-width))) scale(.7);
137
206
  }
138
207
  }
139
208
 
@@ -144,7 +213,7 @@
144
213
 
145
214
  .neo-textfield-label {
146
215
  color : #777;
147
- transform: translateX(4px) translateY(-65%) scale(.7);
216
+ transform: translateX(4px) translateY(calc(-62% - 0.5 * v(textfield-border-width))) scale(.7);
148
217
  }
149
218
  }
150
219
 
@@ -158,27 +227,31 @@
158
227
 
159
228
  .neo-label-wrapper {
160
229
  display : flex;
161
- height : 27px;
230
+ height : calc(v(textfield-input-height) + v(textfield-border-width) * 2);
162
231
  position: absolute;
163
232
  width : 100%;
164
233
 
165
234
  .neo-center-border {
166
- border-bottom: 1px solid v(textfield-border-color);
167
- border-top : 1px solid v(textfield-border-color);
235
+ border-bottom: v(textfield-border-width) solid v(textfield-border-color);
236
+ border-top : v(textfield-border-width) solid v(textfield-border-color);
168
237
  flex : 0 0 auto;
169
238
  }
170
239
 
171
240
  .neo-left-border {
172
- border : 1px solid v(textfield-border-color);
173
- border-right: 0;
174
- flex : 0 0 auto;
175
- width : 12px
241
+ border : v(textfield-border-width) solid v(textfield-border-color);
242
+ border-bottom-left-radius: v(textfield-border-radius);
243
+ border-right : 0;
244
+ border-top-left-radius : v(textfield-border-radius);
245
+ flex : 0 0 auto;
246
+ width : calc(11px + v(textfield-border-width));
176
247
  }
177
248
 
178
249
  .neo-right-border {
179
- border : 1px solid v(textfield-border-color);
180
- border-left: 0;
181
- flex : 1 0 auto;
250
+ border : v(textfield-border-width) solid v(textfield-border-color);
251
+ border-bottom-right-radius: v(textfield-border-radius);
252
+ border-left : 0;
253
+ border-top-right-radius : v(textfield-border-radius);
254
+ flex : 1 0 auto;
182
255
  }
183
256
  }
184
257
 
@@ -188,10 +261,6 @@
188
261
  margin : 0; // important for Safari => #1125
189
262
  padding-left : 16px;
190
263
  z-index : 1;
191
-
192
- &:focus{ // todo: switch to .neo-focus
193
- border-color: transparent;
194
- }
195
264
  }
196
265
 
197
266
  .neo-textfield-label {
@@ -239,7 +308,7 @@
239
308
  flex-grow : 1;
240
309
  flex-shrink : 1;
241
310
  margin : 0; // important for Safari => #1125
242
- min-height : 25px;
311
+ min-height : v(textfield-input-height);
243
312
  width : 30px;
244
313
  }
245
314
  }
@@ -254,7 +323,7 @@
254
323
 
255
324
  .neo-textfield-input {
256
325
  background-color: v(textfield-input-background-color);
257
- border : 1px solid v(textfield-border-color);
326
+ border : v(textfield-border-width) solid v(textfield-border-color);
258
327
  border-radius : v(textfield-border-radius);
259
328
  color : v(textfield-input-color);
260
329
  font : v(textfield-input-font);
@@ -263,9 +332,8 @@
263
332
  transition : 250ms border-color cubic-bezier(0.4, 0, 0.2, 1);
264
333
  width : 140px;
265
334
 
266
- &:focus{
267
- border-color: #5d83a7;
268
- outline : none;
335
+ &:focus {
336
+ outline: none;
269
337
  }
270
338
 
271
339
  &::-webkit-input-placeholder {
package/resources/scss/theme-dark/form/field/Text.scss CHANGED
@@ -1,14 +1,17 @@
1
1
  $neoMap: map-merge($neoMap, (
2
2
  'textfield-border-color' : #424242,
3
3
  'textfield-border-color-active' : #5d83a7,
4
+ 'textfield-border-color-disabled' : #424242,
4
5
  'textfield-border-color-hovered' : #424242,
5
6
  'textfield-border-color-invalid' : brown,
6
7
  'textfield-border-color-readonly' : #424242,
7
8
  'textfield-border-radius' : 0,
8
9
  'textfield-border-width' : 1px,
9
10
  'textfield-input-background-color' : #2b2b2b,
11
+ 'textfield-input-background-color-disabled': #2b2b2b,
10
12
  'textfield-input-background-color-readonly': #222,
11
13
  'textfield-input-color' : #ccc,
14
+ 'textfield-input-color-disabled' : #ccc,
12
15
  'textfield-input-color-readonly' : #ccc,
13
16
  'textfield-input-font' : 400 13px/17px Arial,
14
17
  'textfield-input-height' : 25px,
@@ -16,8 +19,10 @@ $neoMap: map-merge($neoMap, (
16
19
  'textfield-input-placeholder-color' : #ccc,
17
20
  'textfield-input-placeholder-opacity' : 0.6,
18
21
  'textfield-label-color' : #bbb,
19
- 'textfield-label-color-readonly' : #666,
22
+ 'textfield-label-color-disabled' : #bbb,
23
+ 'textfield-label-color-readonly' : #bbb,
20
24
  'textfield-label-top-margin' : 0 0 3px,
25
+ 'textfield-opacity-disabled' : #{neo(neo-disabled-opacity)},
21
26
  'textfield-opacity-readonly' : 1,
22
27
  'textfield-outline-active' : none,
23
28
  'textfield-outline-hovered' : none
@@ -27,14 +32,17 @@ $neoMap: map-merge($neoMap, (
27
32
  :root .neo-theme-dark { // .neo-textfield
28
33
  --textfield-border-color : #{neo(textfield-border-color)};
29
34
  --textfield-border-color-active : #{neo(textfield-border-color-active)};
35
+ --textfield-border-color-disabled : #{neo(textfield-border-color-disabled)};
30
36
  --textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
31
37
  --textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
32
38
  --textfield-border-color-readonly : #{neo(textfield-border-color-readonly)};
33
39
  --textfield-border-radius : #{neo(textfield-border-radius)};
34
40
  --textfield-border-width : #{neo(textfield-border-width)};
35
41
  --textfield-input-background-color : #{neo(textfield-input-background-color)};
42
+ --textfield-input-background-color-disabled: #{neo(textfield-input-background-color-disabled)};
36
43
  --textfield-input-background-color-readonly: #{neo(textfield-input-background-color-readonly)};
37
44
  --textfield-input-color : #{neo(textfield-input-color)};
45
+ --textfield-input-color-disabled : #{neo(textfield-input-color-disabled)};
38
46
  --textfield-input-color-readonly : #{neo(textfield-input-color-readonly)};
39
47
  --textfield-input-font : #{neo(textfield-input-font)};
40
48
  --textfield-input-height : #{neo(textfield-input-height)};
@@ -42,8 +50,10 @@ $neoMap: map-merge($neoMap, (
42
50
  --textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
43
51
  --textfield-input-placeholder-opacity : #{neo(textfield-input-placeholder-opacity)};
44
52
  --textfield-label-color : #{neo(textfield-label-color)};
53
+ --textfield-label-color-disabled : #{neo(textfield-label-color-disabled)};
45
54
  --textfield-label-color-readonly : #{neo(textfield-label-color-readonly)};
46
55
  --textfield-label-top-margin : #{neo(textfield-label-top-margin)};
56
+ --textfield-opacity-disabled : #{neo(textfield-opacity-disabled)};
47
57
  --textfield-opacity-readonly : #{neo(textfield-opacity-readonly)};
48
58
  --textfield-outline-active : #{neo(textfield-outline-active)};
49
59
  --textfield-outline-hovered : #{neo(textfield-outline-hovered)};
package/resources/scss/theme-light/form/field/Text.scss CHANGED
@@ -1,14 +1,17 @@
1
1
  $neoMap: map-merge($neoMap, (
2
2
  'textfield-border-color' : #ddd,
3
3
  'textfield-border-color-active' : #1c60a0,
4
+ 'textfield-border-color-disabled' : #ddd,
4
5
  'textfield-border-color-hovered' : #ddd,
5
6
  'textfield-border-color-invalid' : brown,
6
7
  'textfield-border-color-readonly' : #ddd,
7
8
  'textfield-border-radius' : 3px,
8
9
  'textfield-border-width' : 1px,
9
10
  'textfield-input-background-color' : #fff,
11
+ 'textfield-input-background-color-disabled': #fff,
10
12
  'textfield-input-background-color-readonly': #fbfbfb,
11
13
  'textfield-input-color' : #000,
14
+ 'textfield-input-color-disabled' : #000,
12
15
  'textfield-input-color-readonly' : #000,
13
16
  'textfield-input-font' : 400 13px/17px Arial,
14
17
  'textfield-input-height' : 25px,
@@ -16,8 +19,10 @@ $neoMap: map-merge($neoMap, (
16
19
  'textfield-input-placeholder-color' : #333,
17
20
  'textfield-input-placeholder-opacity' : 0.6,
18
21
  'textfield-label-color' : #666,
22
+ 'textfield-label-color-disabled' : #666,
19
23
  'textfield-label-color-readonly' : #666,
20
24
  'textfield-label-top-margin' : 0 0 3px,
25
+ 'textfield-opacity-disabled' : #{neo(neo-disabled-opacity)},
21
26
  'textfield-opacity-readonly' : 1,
22
27
  'textfield-outline-active' : none,
23
28
  'textfield-outline-hovered' : none
@@ -27,14 +32,17 @@ $neoMap: map-merge($neoMap, (
27
32
  :root .neo-theme-light { // .neo-textfield
28
33
  --textfield-border-color : #{neo(textfield-border-color)};
29
34
  --textfield-border-color-active : #{neo(textfield-border-color-active)};
35
+ --textfield-border-color-disabled : #{neo(textfield-border-color-disabled)};
30
36
  --textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
31
37
  --textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
32
38
  --textfield-border-color-readonly : #{neo(textfield-border-color-readonly)};
33
39
  --textfield-border-radius : #{neo(textfield-border-radius)};
34
40
  --textfield-border-width : #{neo(textfield-border-width)};
35
41
  --textfield-input-background-color : #{neo(textfield-input-background-color)};
42
+ --textfield-input-background-color-disabled: #{neo(textfield-input-background-color-disabled)};
36
43
  --textfield-input-background-color-readonly: #{neo(textfield-input-background-color-readonly)};
37
44
  --textfield-input-color : #{neo(textfield-input-color)};
45
+ --textfield-input-color-disabled : #{neo(textfield-input-color-disabled)};
38
46
  --textfield-input-color-readonly : #{neo(textfield-input-color-readonly)};
39
47
  --textfield-input-font : #{neo(textfield-input-font)};
40
48
  --textfield-input-height : #{neo(textfield-input-height)};
@@ -42,8 +50,10 @@ $neoMap: map-merge($neoMap, (
42
50
  --textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
43
51
  --textfield-input-placeholder-opacity : #{neo(textfield-input-placeholder-opacity)};
44
52
  --textfield-label-color : #{neo(textfield-label-color)};
53
+ --textfield-label-color-disabled : #{neo(textfield-label-color-disabled)};
45
54
  --textfield-label-color-readonly : #{neo(textfield-label-color-readonly)};
46
55
  --textfield-label-top-margin : #{neo(textfield-label-top-margin)};
56
+ --textfield-opacity-disabled : #{neo(textfield-opacity-disabled)};
47
57
  --textfield-opacity-readonly : #{neo(textfield-opacity-readonly)};
48
58
  --textfield-outline-active : #{neo(textfield-outline-active)};
49
59
  --textfield-outline-hovered : #{neo(textfield-outline-hovered)};
package/src/collection/Base.mjs CHANGED
@@ -668,7 +668,6 @@ class Base extends CoreBase {
668
668
  me.clearSilent();
669
669
 
670
670
  me.items = [...me.allItems._items];
671
- me.map.set(...me.allItems.map);
672
671
  } else {
673
672
  if (!me.allItems) {
674
673
  config = {...me.originalConfig};
package/src/dialog/Toast.mjs CHANGED
@@ -1,9 +1,10 @@
1
- import Base from './Base.mjs';
1
+ import Base from '../component/Base.mjs';
2
2
  import ToastManager from '../manager/Toast.mjs';
3
+ import NeoArray from "../util/Array.mjs";
3
4
 
4
5
  /**
5
6
  * @class Neo.dialog.Toast
6
- * @extends Neo.dialog.Base
7
+ * @extends Neo.component.Base
7
8
  *
8
9
  * @example
9
10
  Neo.toast({
@@ -20,33 +21,12 @@ import ToastManager from '../manager/Toast.mjs';
20
21
  })
21
22
  */
22
23
  class Toast extends Base {
23
- /**
24
- * If true makes the toast sticky and show a close icon
25
- * @member {Boolean} closable=false
26
- */
27
- closable = false
28
- /**
29
- * Change to use your own fade out animation
30
- * @member {String} fadeOutCls='neo-toast-fade-out'
31
- */
32
- fadeOutCls = 'neo-toast-fade-out'
33
- /**
34
- * If set, it shows this icon in front of the text
35
- * e.g. 'fa fa-cog'
36
- * @member {String|null} iconCls=null
37
- */
38
- iconCls = null
39
24
  /**
40
25
  * Used by the ToastManager
41
26
  * @member {Boolean} running=false
42
27
  * @private
43
28
  */
44
29
  running = false
45
- /**
46
- * Change the complete styling with custom cls
47
- * @member {String} toastCls='neo-toast-'
48
- */
49
- toastCls = 'neo-toast-'
50
30
  /**
51
31
  * Used by the ToastManager
52
32
  * @member {String|null} toastManagerId=null
@@ -54,6 +34,22 @@ class Toast extends Base {
54
34
  */
55
35
  toastManagerId = null
56
36
 
37
+ static getStaticConfig() {return {
38
+ /**
39
+ * Valid values for positions
40
+ * @member {String[]} positions = ['tl', 'tc', 'tr', 'bl', 'bc', 'br']
41
+ * @protected
42
+ * @static
43
+ */
44
+ positions: ['tl', 'tc', 'tr', 'bl', 'bc', 'br'],
45
+ /**
46
+ * True automatically applies the core/Observable.mjs mixin
47
+ * @member {String[]} slideDirections = ['down', 'up', 'left', 'right']
48
+ * @static
49
+ */
50
+ slideDirections: ['down', 'up', 'left', 'right']
51
+ }}
52
+
57
53
  static getConfig() {return {
58
54
  /**
59
55
  * @member {String} className='Neo.dialog.Toast'
@@ -65,18 +61,31 @@ class Toast extends Base {
65
61
  * @protected
66
62
  */
67
63
  ntype: 'toast',
64
+
65
+ /**
66
+ * @member {Boolean} autoMount=true
67
+ */
68
+ autoMount: true,
69
+ /**
70
+ * @member {Boolean} autoRender=true
71
+ */
72
+ autoRender: true,
68
73
  /**
69
- * The Toast should not be moved
70
- * @member {Boolean} draggable=false
74
+ * @member {String[]} baseCls=['neo-toast']
75
+ * @protected
71
76
  */
72
- draggable: false,
77
+ baseCls: ['neo-toast'],
73
78
  /**
74
- * Header is not meant to be shown.
75
- * @member {Object} headerConfig={hidden:true}
79
+ * If true makes the toast sticky and show a close icon
80
+ * @member {Boolean} closable=false
76
81
  */
77
- headerConfig: {
78
- hidden: true
79
- },
82
+ closable_: false,
83
+ /**
84
+ * If set, it shows this icon in front of the text
85
+ * e.g. 'fa fa-cog'
86
+ * @member {String|null} iconCls=null
87
+ */
88
+ iconCls_: null,
80
89
  /**
81
90
  * Limits the width of the Toast
82
91
  * @member {Number} maxWidth=250
@@ -94,17 +103,13 @@ class Toast extends Base {
94
103
  msg_: null,
95
104
  /**
96
105
  * Describes the position of the toast, e.g. bl=bottom-left
97
- * This creates a cls `toastCls + position`
106
+ * This creates a cls `noe-toast-position`
98
107
  * @member {'tl'|'tc'|'tr'|'bl'|'bc'|'br'} position='tr'
99
108
  */
100
109
  position_: 'tr',
101
- /**
102
- * @member {Boolean} resizable=false
103
- */
104
- resizable: false,
105
110
  /**
106
111
  * Describes which direction from which side the toasts slides-in
107
- * This creates a cls `toastCls + slide- + direction + in`
112
+ * This creates a cls `neo-toast-slide-${direction}-in`
108
113
  * @member {'down'|'up'|'left'|'right'} slideDirection_=null
109
114
  */
110
115
  slideDirection_: 'down',
@@ -114,25 +119,59 @@ class Toast extends Base {
114
119
  */
115
120
  timeout_: 3000,
116
121
  /**
117
- * @member {String|null} title=null
122
+ * Adds a title to the toast
123
+ * @member {Number} title_=null
118
124
  */
119
- title: null,
125
+ title_: null,
120
126
  /**
121
- * @member {Function} itemTpl
127
+ * @member {String|null} title=null
122
128
  */
123
- itemTpl: data => {
124
- let cls = data.cls;
125
-
126
- return [
127
- {cls: [`${cls}icon`, data.iconCls], removeDom: !data.iconCls},
128
- {cls: `${cls}text`, cn: [
129
- {cls: `${cls}title`, innerHTML: `${data.title}`, removeDom: !data.title},
130
- {cls: `${cls}msg`, innerHTML: `${data.msg}`}
129
+ vdom: {cn: [{
130
+ cls: 'neo-toast-inner', cn: [
131
+ {cls: ['neo-toast-icon'], removeDom: true},
132
+ {cls: 'neo-toast-text', cn: [
133
+ {cls: ['neo-toast-title'], removeDom: true},
134
+ {cls: 'neo-toast-msg'}
131
135
  ]},
132
- {cls: `${cls}close fa fa-close`, removeDom: !data.closable}
133
- ]}
136
+ {cls: ['neo-toast-close', 'fa', 'fa-close'], removeDom: true}
137
+ ]
138
+ }]}
134
139
  }}
135
140
 
141
+ construct(config) {
142
+ super.construct(config);
143
+
144
+ let me = this;
145
+
146
+ // click listener for close
147
+ me.addDomListeners([
148
+ {click: {fn: me.unregister, delegate: '.neo-toast-close', scope: me}}
149
+ ])
150
+ }
151
+
152
+ /**
153
+ * @param {String|null} value
154
+ * @param {String|null} oldValue
155
+ */
156
+ afterSetClosable(value, oldValue) {
157
+ let vdom = this.getVdomInner().cn[2];
158
+
159
+ vdom.removeDom = !value;
160
+ }
161
+
162
+ /**
163
+ * @param {String|null} value
164
+ * @param {String|null} oldValue
165
+ */
166
+ afterSetIconCls(value, oldValue) {
167
+ let vdom = this.getVdomInner().cn[0],
168
+ cls = vdom.cls,
169
+ clsFn = !!value ? 'add' : 'remove';
170
+
171
+ vdom.removeDom = Neo.isEmpty(value);
172
+ NeoArray[clsFn](cls, value);
173
+ }
174
+
136
175
  /**
137
176
  * Using the afterSetMsg to trigger the setup of the dom
138
177
  * A new container is added as an item.
@@ -142,21 +181,22 @@ class Toast extends Base {
142
181
  * @param {String|null} oldValue
143
182
  */
144
183
  afterSetMsg(value, oldValue) {
145
- let me = this,
146
- toastCls = me.toastCls,
147
- data = {closable: me.closable, cls: toastCls, iconCls: me.iconCls, msg: me.msg, title: me.title},
148
- titleCls = (me.title && me.iconCls) ? `${toastCls}has-title` : '',
149
- vdom = {cn: me.itemTpl(data)};
150
-
151
- me.add({
152
- cls: [`${toastCls}inner`, titleCls],
153
- vdom
154
- });
155
-
156
- // if closable add a listener to the close-element
157
- me.closable && me.addDomListeners([
158
- {click: {fn: me.unregister, delegate: `.${me.toastCls}close`, scope: me}}
159
- ])
184
+ let vdom = this.getTextRootVdom().cn[1];
185
+
186
+ vdom.innerHTML = value;
187
+ }
188
+
189
+ /**
190
+ * @param {String|null} value
191
+ * @param {String|null} oldValue
192
+ */
193
+ afterSetTitle(value, oldValue) {
194
+ let vdom = this.getTextRootVdom().cn[0],
195
+ clsFn = !!value ? 'add' : 'remove';
196
+
197
+ vdom.removeDom = Neo.isEmpty(value);
198
+ vdom.innerHTML = value;
199
+ NeoArray[clsFn](vdom.cls, 'neo-toast-has-title');
160
200
  }
161
201
 
162
202
  /**
@@ -165,7 +205,7 @@ class Toast extends Base {
165
205
  * @param {String} oldValue
166
206
  */
167
207
  afterSetPosition(value, oldValue) {
168
- value && this.addCls(`${this.toastCls}${value}`)
208
+ value && this.addCls(`neo-toast-${value}`)
169
209
  }
170
210
 
171
211
  /**
@@ -174,7 +214,7 @@ class Toast extends Base {
174
214
  * @param {String} oldValue
175
215
  */
176
216
  afterSetSlideDirection(value, oldValue) {
177
- value && this.addCls(`${this.toastCls}slide-${value}-in`)
217
+ value && this.addCls(`neo-toast-slide-${value}-in`)
178
218
  }
179
219
 
180
220
  /**
@@ -189,6 +229,38 @@ class Toast extends Base {
189
229
  }
190
230
  }
191
231
 
232
+ /**
233
+ * Triggered before the position config gets changed
234
+ * @param {String} value
235
+ * @param {String} oldValue
236
+ * @protected
237
+ */
238
+ beforeSetPosition(value, oldValue) {
239
+ return this.beforeSetEnumValue(value, oldValue, 'position');
240
+ }
241
+
242
+ /**
243
+ * Triggered before the slideDirection config gets changed
244
+ * @param {String} value
245
+ * @param {String} oldValue
246
+ * @protected
247
+ */
248
+ beforeSetSlideDirection(value, oldValue) {
249
+ return this.beforeSetEnumValue(value, oldValue, 'slideDirection');
250
+ }
251
+
252
+ /**
253
+ * This is a dialog, so we have to add an item to be able to
254
+ * @returns {vdom}
255
+ */
256
+ getVdomInner() {
257
+ return this.vdom.cn[0];
258
+ }
259
+
260
+ getTextRootVdom() {
261
+ return this.getVdomInner().cn[1];
262
+ }
263
+
192
264
  /**
193
265
  * After the close-click or timeout, we unregister the toast
194
266
  * from the ToastManager
@@ -203,7 +275,7 @@ class Toast extends Base {
203
275
  }
204
276
  })
205
277
 
206
- me.addCls(me.fadeOutCls);
278
+ me.addCls('neo-toast-fade-out');
207
279
  }
208
280
  }
209
281
 
package/src/form/field/Text.mjs CHANGED
@@ -908,15 +908,17 @@ class Text extends Base {
908
908
  let me = this,
909
909
  cls = me.cls;
910
910
 
911
- NeoArray.add(cls, 'neo-focus');
912
- me.cls = cls;
911
+ if (!me.readOnly) {
912
+ NeoArray.add(cls, 'neo-focus');
913
+ me.cls = cls;
913
914
 
914
- if (me.labelPosition === 'inline') {
915
- if (me.centerBorderElWidth) {
916
- me.getCenterBorderEl().width = me.centerBorderElWidth;
917
- me.update();
918
- } else {
919
- me.updateCenterBorderElWidth(false);
915
+ if (me.labelPosition === 'inline') {
916
+ if (me.centerBorderElWidth) {
917
+ me.getCenterBorderEl().width = me.centerBorderElWidth;
918
+ me.update();
919
+ } else {
920
+ me.updateCenterBorderElWidth(false);
921
+ }
920
922
  }
921
923
  }
922
924
  }
@@ -931,16 +933,18 @@ class Text extends Base {
931
933
  centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
932
934
  cls = me.cls;
933
935
 
934
- me.validate(); // silent
936
+ if (!me.readOnly) {
937
+ me.validate(); // silent
935
938
 
936
- NeoArray.remove(cls, 'neo-focus');
937
- me.cls = cls;
939
+ NeoArray.remove(cls, 'neo-focus');
940
+ me.cls = cls;
938
941
 
939
- if (centerBorderEl && me.isEmpty()) {
940
- delete centerBorderEl.width;
941
- }
942
+ if (centerBorderEl && me.isEmpty()) {
943
+ delete centerBorderEl.width;
944
+ }
942
945
 
943
- me.update();
946
+ me.update();
947
+ }
944
948
  }
945
949
 
946
950
  /**
@@ -969,20 +973,26 @@ class Text extends Base {
969
973
  * @param {Object} data
970
974
  */
971
975
  onMouseEnter(data) {
972
- let cls = this.cls;
976
+ let me = this,
977
+ cls = me.cls;
973
978
 
974
- NeoArray.add(cls, 'neo-hovered');
975
- this.cls = cls;
979
+ if (!me.readOnly) {
980
+ NeoArray.add(cls, 'neo-hovered');
981
+ me.cls = cls;
982
+ }
976
983
  }
977
984
 
978
985
  /**
979
986
  * @param {Object} data
980
987
  */
981
988
  onMouseLeave(data) {
982
- let cls = this.cls;
989
+ let me = this,
990
+ cls = me.cls;
983
991
 
984
- NeoArray.remove(cls, 'neo-hovered');
985
- this.cls = cls;
992
+ if (!me.readOnly) {
993
+ NeoArray.remove(cls, 'neo-hovered');
994
+ me.cls = cls;
995
+ }
986
996
  }
987
997
 
988
998
  /**