neo.mjs 6.0.4 → 6.1.1
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/package.json +1 -1
- package/resources/scss/src/form/field/CheckBox.scss +12 -11
- package/resources/scss/src/form/field/FileUpload.scss +5 -5
- package/resources/scss/src/form/field/Switch.scss +65 -54
- package/resources/scss/theme-dark/form/field/Switch.scss +13 -5
- package/resources/scss/theme-light/form/field/Switch.scss +13 -5
- package/src/DefaultConfig.mjs +2 -2
- package/src/form/field/FileUpload.mjs +6 -5
- package/src/form/field/Switch.mjs +0 -1
package/apps/ServiceWorker.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
.neo-checkboxfield {
|
|
2
|
+
.neo-checkbox-icon {
|
|
3
|
+
color : var(--checkboxfield-color);
|
|
4
|
+
cursor : pointer;
|
|
5
|
+
display : inline-block;
|
|
6
|
+
font-family: var(--checkboxfield-icon-font-family);
|
|
7
|
+
font-size : var(--checkboxfield-icon-font-size);
|
|
8
|
+
margin : var(--checkboxfield-icon-margin);
|
|
9
|
+
width : 20px;
|
|
10
|
+
}
|
|
11
|
+
|
|
2
12
|
.neo-checkbox-input {
|
|
3
13
|
margin: 0;
|
|
4
14
|
width: 0; // using display: none would break the keynav
|
|
@@ -14,19 +24,10 @@
|
|
|
14
24
|
}
|
|
15
25
|
}
|
|
16
26
|
|
|
17
|
-
.neo-checkbox-icon {
|
|
18
|
-
color : var(--checkboxfield-color);
|
|
19
|
-
cursor : pointer;
|
|
20
|
-
display : inline-block;
|
|
21
|
-
font-family: var(--checkboxfield-icon-font-family);
|
|
22
|
-
font-size : var(--checkboxfield-icon-font-size);
|
|
23
|
-
margin : var(--checkboxfield-icon-margin);
|
|
24
|
-
width : 20px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
27
|
.neo-checkbox-label {
|
|
28
|
+
align-items: center;
|
|
28
29
|
color : var(--textfield-label-color);
|
|
29
|
-
display :
|
|
30
|
+
display : flex;
|
|
30
31
|
user-select: none;
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -194,14 +194,14 @@
|
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
-
.neo-file-upload-state-icon
|
|
197
|
+
.neo-file-upload-state-icon {
|
|
198
|
+
background-image: none;
|
|
198
199
|
color : var(--fileuploadfield-error-color);
|
|
200
|
+
border : 3px solid var(--fileuploadfield-error-color);
|
|
199
201
|
}
|
|
200
|
-
|
|
202
|
+
.neo-file-upload-state {
|
|
203
|
+
color : var(--fileuploadfield-error-color);
|
|
201
204
|
|
|
202
|
-
.neo-file-upload-state-scan-failed {
|
|
203
|
-
.neo-file-upload-state-icon {
|
|
204
|
-
border : 3px solid var(--fileuploadfield-error-color);
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
207
|
|
|
@@ -1,75 +1,86 @@
|
|
|
1
1
|
.neo-switchfield {
|
|
2
|
-
@keyframes switch-off-transform {
|
|
3
|
-
0% {transform: translate(100%) scaleX(1)}
|
|
4
|
-
25% {transform: translate(100%) scaleX(1.33)}
|
|
5
|
-
100% {transform: translate(0) scaleX(1)}
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@keyframes switch-on-transform {
|
|
9
|
-
0% {transform: translate(0) scaleX(1)}
|
|
10
|
-
25% {transform: translate(0) scaleX(1.33)}
|
|
11
|
-
100% {transform: translate(100%) scaleX(1)}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
2
|
.neo-switchfield-input {
|
|
15
|
-
background-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
color : var(--switchfield-inactive-color);
|
|
20
|
-
display : inline-block;
|
|
21
|
-
font-size : 1.5em;
|
|
22
|
-
height : 1.5em;
|
|
3
|
+
background-color: var(--switchfield-color-off-idle);
|
|
4
|
+
border-radius : 999px;
|
|
5
|
+
height : var(--switchfield-height);
|
|
6
|
+
margin : 0;
|
|
23
7
|
position : relative;
|
|
24
|
-
|
|
25
|
-
vertical-align : middle;
|
|
26
|
-
width : 3em;
|
|
8
|
+
width : var(--switchfield-width);
|
|
27
9
|
|
|
28
10
|
-webkit-appearance : none;
|
|
29
11
|
-webkit-tap-highlight-color: transparent;
|
|
30
12
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
font-weight : 900;
|
|
36
|
-
left : 0.5em;
|
|
37
|
-
letter-spacing: 1em;
|
|
38
|
-
line-height : 1.5;
|
|
39
|
-
position : absolute;
|
|
40
|
-
top : 0.15em;
|
|
41
|
-
z-index : 1;
|
|
13
|
+
&:after,
|
|
14
|
+
&:before {
|
|
15
|
+
content : "";
|
|
16
|
+
position: absolute;
|
|
42
17
|
}
|
|
43
18
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
border : 0.125em solid transparent;
|
|
49
|
-
border-radius : 100%;
|
|
50
|
-
bottom : 0;
|
|
51
|
-
content : "";
|
|
19
|
+
&:before {
|
|
20
|
+
background-color: var(--switchfield-color-knob);
|
|
21
|
+
border-radius : 50%;
|
|
22
|
+
height : var(--switchfield-knobsize);
|
|
52
23
|
left : 0;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
24
|
+
top : 1.5px;
|
|
25
|
+
transition : transform 150ms ease-out;
|
|
26
|
+
width : var(--switchfield-knobsize);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:after {
|
|
30
|
+
border : 1px solid var(--switchfield-color-knob);
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
bottom : 7px;
|
|
33
|
+
height : 8px;
|
|
34
|
+
right : 7px;
|
|
35
|
+
width : 8px;
|
|
58
36
|
}
|
|
59
37
|
|
|
60
38
|
&:checked {
|
|
61
|
-
background-color: var(--switchfield-
|
|
62
|
-
color : var(--switchfield-inactive-color);
|
|
39
|
+
background-color: var(--switchfield-color-on-idle);
|
|
63
40
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
41
|
+
&:before {
|
|
42
|
+
transform: translateX(100%);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:after {
|
|
46
|
+
background-color: var(--switchfield-color-knob);
|
|
47
|
+
border : 0;
|
|
48
|
+
bottom : 8px;
|
|
49
|
+
left : 9px;
|
|
50
|
+
right : auto;
|
|
51
|
+
width : 1px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:hover {
|
|
55
|
+
background-color: var(--switchfield-color-on-hovered);
|
|
67
56
|
}
|
|
68
57
|
}
|
|
69
58
|
|
|
70
59
|
&:focus {
|
|
71
|
-
|
|
72
|
-
|
|
60
|
+
outline: var(--switchfield-borderwidth-focused) solid var(--switchfield-bordercolor-focused);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:hover {
|
|
64
|
+
background-color: var(--switchfield-color-off-hovered);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.neo-checkbox-value-label {
|
|
69
|
+
margin-left: 1em;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.neo-disabled {
|
|
74
|
+
.neo-switchfield,
|
|
75
|
+
&.neo-switchfield {
|
|
76
|
+
opacity: var(--switchfield-opacity-disabled);
|
|
77
|
+
|
|
78
|
+
.neo-switchfield-input {
|
|
79
|
+
background-color: var(--switchfield-color-off-disabled);
|
|
80
|
+
|
|
81
|
+
&:checked {
|
|
82
|
+
background-color: var(--switchfield-color-on-disabled);
|
|
83
|
+
}
|
|
73
84
|
}
|
|
74
85
|
}
|
|
75
86
|
}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
:root .neo-theme-dark { // .neo-switchfield
|
|
2
|
-
--switchfield-
|
|
3
|
-
--switchfield-
|
|
4
|
-
--switchfield-
|
|
5
|
-
--switchfield-
|
|
6
|
-
--switchfield-
|
|
2
|
+
--switchfield-bordercolor-focused: #57B2EF;
|
|
3
|
+
--switchfield-borderwidth-focused: 4px;
|
|
4
|
+
--switchfield-color-knob : #fff;
|
|
5
|
+
--switchfield-color-off-disabled : #BDBDBD;
|
|
6
|
+
--switchfield-color-off-hovered : #9E9E9E;
|
|
7
|
+
--switchfield-color-off-idle : #BDBDBD;
|
|
8
|
+
--switchfield-color-on-disabled : #005A96;
|
|
9
|
+
--switchfield-color-on-hovered : #004C7E;
|
|
10
|
+
--switchfield-color-on-idle : #005A96;
|
|
11
|
+
--switchfield-height : 24px;
|
|
12
|
+
--switchfield-knobsize : 20px;
|
|
13
|
+
--switchfield-opacity-disabled : .5;
|
|
14
|
+
--switchfield-width : 40px;
|
|
7
15
|
}
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
:root .neo-theme-light { // .neo-switchfield
|
|
2
|
-
--switchfield-
|
|
3
|
-
--switchfield-
|
|
4
|
-
--switchfield-
|
|
5
|
-
--switchfield-
|
|
6
|
-
--switchfield-
|
|
2
|
+
--switchfield-bordercolor-focused: #57B2EF;
|
|
3
|
+
--switchfield-borderwidth-focused: 4px;
|
|
4
|
+
--switchfield-color-knob : #fff;
|
|
5
|
+
--switchfield-color-off-disabled : #BDBDBD;
|
|
6
|
+
--switchfield-color-off-hovered : #9E9E9E;
|
|
7
|
+
--switchfield-color-off-idle : #BDBDBD;
|
|
8
|
+
--switchfield-color-on-disabled : #005A96;
|
|
9
|
+
--switchfield-color-on-hovered : #004C7E;
|
|
10
|
+
--switchfield-color-on-idle : #005A96;
|
|
11
|
+
--switchfield-height : 24px;
|
|
12
|
+
--switchfield-knobsize : 20px;
|
|
13
|
+
--switchfield-opacity-disabled : .5;
|
|
14
|
+
--switchfield-width : 40px;
|
|
7
15
|
}
|
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 '6.
|
|
239
|
+
* @default '6.1.1'
|
|
240
240
|
* @memberOf! module:Neo
|
|
241
241
|
* @name config.version
|
|
242
242
|
* @type String
|
|
243
243
|
*/
|
|
244
|
-
version: '6.
|
|
244
|
+
version: '6.1.1'
|
|
245
245
|
};
|
|
246
246
|
|
|
247
247
|
Object.assign(DefaultConfig, {
|
|
@@ -319,8 +319,9 @@ class FileUpload extends Base {
|
|
|
319
319
|
chooseFile : 'Choose file',
|
|
320
320
|
documentText : 'Document',
|
|
321
321
|
invalidFileFormat : 'invalid file format',
|
|
322
|
-
pleaseUseTheseTypes : 'Please use these file types',
|
|
323
|
-
fileSizeMoreThan : 'File size exceeds',
|
|
322
|
+
pleaseUseTheseTypes : 'Please use these file types {allowedFileTypes}',
|
|
323
|
+
fileSizeMoreThan : 'File size exceeds {allowedFileSize}',
|
|
324
|
+
uploadError : 'Please try again',
|
|
324
325
|
documentDeleteError : 'Document delete service error',
|
|
325
326
|
isNoLongerAvailable : 'is no longer available',
|
|
326
327
|
documentStatusError : 'Document status service error',
|
|
@@ -418,12 +419,12 @@ class FileUpload extends Base {
|
|
|
418
419
|
if (me.types && !types[type]) {
|
|
419
420
|
body.cn[0].innerHTML = file.name;
|
|
420
421
|
body.cn[1].innerHTML = `${me.invalidFileFormat} (.${type}) ${me.formatSize(file.size)}`;
|
|
421
|
-
me.error =
|
|
422
|
+
me.error = me.pleaseUseTheseTypes?.replace('{allowedFileTypes}', Object.keys(types).join(' .'))
|
|
422
423
|
}
|
|
423
424
|
else if (file.size > me.maxSize) {
|
|
424
425
|
body.cn[0].innerHTML = file.name;
|
|
425
426
|
body.cn[1].innerHTML = me.formatSize(file.size);
|
|
426
|
-
me.error =
|
|
427
|
+
me.error = me.fileSizeMoreThan?.replace('{allowedFileSize}', String(me._maxSize).toUpperCase());
|
|
427
428
|
}
|
|
428
429
|
// If it passes the type and maxSize check, upload it
|
|
429
430
|
else {
|
|
@@ -508,7 +509,7 @@ class FileUpload extends Base {
|
|
|
508
509
|
onUploadError(e) {
|
|
509
510
|
this.xhr = null;
|
|
510
511
|
this.state = 'upload-failed';
|
|
511
|
-
this.error =
|
|
512
|
+
this.error = `${this.uploadError}`;
|
|
512
513
|
}
|
|
513
514
|
|
|
514
515
|
onUploadDone({ loaded, target : xhr }) {
|