neo.mjs 4.6.0 → 4.6.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/README.md +0 -8
- package/docs/app/view/MainContainerController.mjs +12 -11
- package/docs/app/view/classdetails/SourceViewComponent.mjs +12 -12
- package/examples/form/field/text/MainContainer.mjs +6 -0
- package/examples/toast/MainContainer.mjs +131 -0
- package/examples/toast/MainContainerController.mjs +95 -0
- package/examples/toast/app.mjs +7 -0
- package/examples/toast/index.html +27 -0
- package/examples/toast/neo-config.json +7 -0
- package/examples/toast/resources/highlight/CHANGES.md +1739 -0
- package/examples/toast/resources/highlight/LICENSE +24 -0
- package/examples/toast/resources/highlight/README.md +186 -0
- package/examples/toast/resources/highlight/highlight.pack.js +2 -0
- package/examples/toast/resources/highlightjs-custom-dark-theme.css +120 -0
- package/examples/toast/resources/highlightjs-custom-github-theme.css +136 -0
- package/package.json +1 -1
- package/resources/scss/src/dialog/Toast.scss +34 -8
- package/resources/scss/src/form/field/Text.scss +38 -0
- package/resources/scss/theme-dark/dialog/Toast.scss +13 -0
- package/resources/scss/theme-dark/form/field/Text.scss +44 -34
- package/resources/scss/theme-light/dialog/Toast.scss +25 -0
- package/resources/scss/theme-light/form/field/Text.scss +44 -34
- package/src/component/Base.mjs +1 -17
- package/src/form/field/CheckBox.mjs +3 -3
- package/src/form/field/Text.mjs +27 -4
- package/src/main/addon/HighlightJS.mjs +28 -15
- package/src/manager/Toast.mjs +1 -1
|
@@ -1,41 +1,51 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
|
-
'textfield-border-color'
|
|
3
|
-
'textfield-border-color-active'
|
|
4
|
-
'textfield-border-color-hovered'
|
|
5
|
-
'textfield-border-color-invalid'
|
|
6
|
-
'textfield-border-
|
|
7
|
-
'textfield-border-
|
|
8
|
-
'textfield-
|
|
9
|
-
'textfield-input-color'
|
|
10
|
-
'textfield-input-
|
|
11
|
-
'textfield-input-
|
|
12
|
-
'textfield-input-
|
|
13
|
-
'textfield-input-
|
|
14
|
-
'textfield-input-
|
|
15
|
-
'textfield-
|
|
16
|
-
'textfield-
|
|
17
|
-
'textfield-
|
|
18
|
-
'textfield-
|
|
2
|
+
'textfield-border-color' : #424242,
|
|
3
|
+
'textfield-border-color-active' : #5d83a7,
|
|
4
|
+
'textfield-border-color-hovered' : #424242,
|
|
5
|
+
'textfield-border-color-invalid' : brown,
|
|
6
|
+
'textfield-border-color-readonly' : #424242,
|
|
7
|
+
'textfield-border-radius' : 0,
|
|
8
|
+
'textfield-border-width' : 1px,
|
|
9
|
+
'textfield-input-background-color' : #2b2b2b,
|
|
10
|
+
'textfield-input-background-color-readonly': #222,
|
|
11
|
+
'textfield-input-color' : #ccc,
|
|
12
|
+
'textfield-input-color-readonly' : #ccc,
|
|
13
|
+
'textfield-input-font' : 400 13px/17px Arial,
|
|
14
|
+
'textfield-input-height' : 25px,
|
|
15
|
+
'textfield-input-padding' : 3px 6px 2px,
|
|
16
|
+
'textfield-input-placeholder-color' : #ccc,
|
|
17
|
+
'textfield-input-placeholder-opacity' : 0.6,
|
|
18
|
+
'textfield-label-color' : #bbb,
|
|
19
|
+
'textfield-label-color-readonly' : #666,
|
|
20
|
+
'textfield-label-top-margin' : 0 0 3px,
|
|
21
|
+
'textfield-opacity-readonly' : 1,
|
|
22
|
+
'textfield-outline-active' : none,
|
|
23
|
+
'textfield-outline-hovered' : none
|
|
19
24
|
));
|
|
20
25
|
|
|
21
26
|
@if $useCssVars == true {
|
|
22
27
|
:root .neo-theme-dark { // .neo-textfield
|
|
23
|
-
--textfield-border-color
|
|
24
|
-
--textfield-border-color-active
|
|
25
|
-
--textfield-border-color-hovered
|
|
26
|
-
--textfield-border-color-invalid
|
|
27
|
-
--textfield-border-
|
|
28
|
-
--textfield-border-
|
|
29
|
-
--textfield-
|
|
30
|
-
--textfield-input-color
|
|
31
|
-
--textfield-input-
|
|
32
|
-
--textfield-input-
|
|
33
|
-
--textfield-input-
|
|
34
|
-
--textfield-input-
|
|
35
|
-
--textfield-input-
|
|
36
|
-
--textfield-
|
|
37
|
-
--textfield-
|
|
38
|
-
--textfield-
|
|
39
|
-
--textfield-
|
|
28
|
+
--textfield-border-color : #{neo(textfield-border-color)};
|
|
29
|
+
--textfield-border-color-active : #{neo(textfield-border-color-active)};
|
|
30
|
+
--textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
|
|
31
|
+
--textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
|
|
32
|
+
--textfield-border-color-readonly : #{neo(textfield-border-color-readonly)};
|
|
33
|
+
--textfield-border-radius : #{neo(textfield-border-radius)};
|
|
34
|
+
--textfield-border-width : #{neo(textfield-border-width)};
|
|
35
|
+
--textfield-input-background-color : #{neo(textfield-input-background-color)};
|
|
36
|
+
--textfield-input-background-color-readonly: #{neo(textfield-input-background-color-readonly)};
|
|
37
|
+
--textfield-input-color : #{neo(textfield-input-color)};
|
|
38
|
+
--textfield-input-color-readonly : #{neo(textfield-input-color-readonly)};
|
|
39
|
+
--textfield-input-font : #{neo(textfield-input-font)};
|
|
40
|
+
--textfield-input-height : #{neo(textfield-input-height)};
|
|
41
|
+
--textfield-input-padding : #{neo(textfield-input-padding)};
|
|
42
|
+
--textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
|
|
43
|
+
--textfield-input-placeholder-opacity : #{neo(textfield-input-placeholder-opacity)};
|
|
44
|
+
--textfield-label-color : #{neo(textfield-label-color)};
|
|
45
|
+
--textfield-label-color-readonly : #{neo(textfield-label-color-readonly)};
|
|
46
|
+
--textfield-label-top-margin : #{neo(textfield-label-top-margin)};
|
|
47
|
+
--textfield-opacity-readonly : #{neo(textfield-opacity-readonly)};
|
|
48
|
+
--textfield-outline-active : #{neo(textfield-outline-active)};
|
|
49
|
+
--textfield-outline-hovered : #{neo(textfield-outline-hovered)};
|
|
40
50
|
}
|
|
41
51
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'toast-background-color' : lightblue,
|
|
3
|
+
'toast-color' : #083741,
|
|
4
|
+
'toast-shadow-color' : rgba(0, 0, 0, 0.15),
|
|
5
|
+
// ui: danger
|
|
6
|
+
'toast-danger-background-color' : #e6adad,
|
|
7
|
+
'toast-danger-color' : #410808,
|
|
8
|
+
// ui: success
|
|
9
|
+
'toast-success-background-color' : #b7e6ad,
|
|
10
|
+
'toast-success-color' : #124108,
|
|
11
|
+
));
|
|
12
|
+
|
|
13
|
+
@if $useCssVars == true {
|
|
14
|
+
:root .neo-theme-light { // .neo-button
|
|
15
|
+
--toast-background-color : #{neo(toast-background-color)};
|
|
16
|
+
--toast-color : #{neo(toast-color)};
|
|
17
|
+
--toast-shadow-color : #{neo(toast-shadow-color)};
|
|
18
|
+
// ui: danger
|
|
19
|
+
--toast-danger-background-color : #{neo(toast-danger-background-color)};
|
|
20
|
+
--toast-danger-color : #{neo(toast-danger-color)};
|
|
21
|
+
// ui: success
|
|
22
|
+
--toast-success-background-color : #{neo(toast-success-background-color)};
|
|
23
|
+
--toast-success-color : #{neo(toast-success-color)};
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -1,41 +1,51 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
|
-
'textfield-border-color'
|
|
3
|
-
'textfield-border-color-active'
|
|
4
|
-
'textfield-border-color-hovered'
|
|
5
|
-
'textfield-border-color-invalid'
|
|
6
|
-
'textfield-border-
|
|
7
|
-
'textfield-border-
|
|
8
|
-
'textfield-
|
|
9
|
-
'textfield-input-color'
|
|
10
|
-
'textfield-input-
|
|
11
|
-
'textfield-input-
|
|
12
|
-
'textfield-input-
|
|
13
|
-
'textfield-input-
|
|
14
|
-
'textfield-input-
|
|
15
|
-
'textfield-
|
|
16
|
-
'textfield-
|
|
17
|
-
'textfield-
|
|
18
|
-
'textfield-
|
|
2
|
+
'textfield-border-color' : #ddd,
|
|
3
|
+
'textfield-border-color-active' : #1c60a0,
|
|
4
|
+
'textfield-border-color-hovered' : #ddd,
|
|
5
|
+
'textfield-border-color-invalid' : brown,
|
|
6
|
+
'textfield-border-color-readonly' : #ddd,
|
|
7
|
+
'textfield-border-radius' : 3px,
|
|
8
|
+
'textfield-border-width' : 1px,
|
|
9
|
+
'textfield-input-background-color' : #fff,
|
|
10
|
+
'textfield-input-background-color-readonly': #fbfbfb,
|
|
11
|
+
'textfield-input-color' : #000,
|
|
12
|
+
'textfield-input-color-readonly' : #000,
|
|
13
|
+
'textfield-input-font' : 400 13px/17px Arial,
|
|
14
|
+
'textfield-input-height' : 25px,
|
|
15
|
+
'textfield-input-padding' : 3px 6px 2px,
|
|
16
|
+
'textfield-input-placeholder-color' : #333,
|
|
17
|
+
'textfield-input-placeholder-opacity' : 0.6,
|
|
18
|
+
'textfield-label-color' : #666,
|
|
19
|
+
'textfield-label-color-readonly' : #666,
|
|
20
|
+
'textfield-label-top-margin' : 0 0 3px,
|
|
21
|
+
'textfield-opacity-readonly' : 1,
|
|
22
|
+
'textfield-outline-active' : none,
|
|
23
|
+
'textfield-outline-hovered' : none
|
|
19
24
|
));
|
|
20
25
|
|
|
21
26
|
@if $useCssVars == true {
|
|
22
27
|
:root .neo-theme-light { // .neo-textfield
|
|
23
|
-
--textfield-border-color
|
|
24
|
-
--textfield-border-color-active
|
|
25
|
-
--textfield-border-color-hovered
|
|
26
|
-
--textfield-border-color-invalid
|
|
27
|
-
--textfield-border-
|
|
28
|
-
--textfield-border-
|
|
29
|
-
--textfield-
|
|
30
|
-
--textfield-input-color
|
|
31
|
-
--textfield-input-
|
|
32
|
-
--textfield-input-
|
|
33
|
-
--textfield-input-
|
|
34
|
-
--textfield-input-
|
|
35
|
-
--textfield-input-
|
|
36
|
-
--textfield-
|
|
37
|
-
--textfield-
|
|
38
|
-
--textfield-
|
|
39
|
-
--textfield-
|
|
28
|
+
--textfield-border-color : #{neo(textfield-border-color)};
|
|
29
|
+
--textfield-border-color-active : #{neo(textfield-border-color-active)};
|
|
30
|
+
--textfield-border-color-hovered : #{neo(textfield-border-color-hovered)};
|
|
31
|
+
--textfield-border-color-invalid : #{neo(textfield-border-color-invalid)};
|
|
32
|
+
--textfield-border-color-readonly : #{neo(textfield-border-color-readonly)};
|
|
33
|
+
--textfield-border-radius : #{neo(textfield-border-radius)};
|
|
34
|
+
--textfield-border-width : #{neo(textfield-border-width)};
|
|
35
|
+
--textfield-input-background-color : #{neo(textfield-input-background-color)};
|
|
36
|
+
--textfield-input-background-color-readonly: #{neo(textfield-input-background-color-readonly)};
|
|
37
|
+
--textfield-input-color : #{neo(textfield-input-color)};
|
|
38
|
+
--textfield-input-color-readonly : #{neo(textfield-input-color-readonly)};
|
|
39
|
+
--textfield-input-font : #{neo(textfield-input-font)};
|
|
40
|
+
--textfield-input-height : #{neo(textfield-input-height)};
|
|
41
|
+
--textfield-input-padding : #{neo(textfield-input-padding)};
|
|
42
|
+
--textfield-input-placeholder-color : #{neo(textfield-input-placeholder-color)};
|
|
43
|
+
--textfield-input-placeholder-opacity : #{neo(textfield-input-placeholder-opacity)};
|
|
44
|
+
--textfield-label-color : #{neo(textfield-label-color)};
|
|
45
|
+
--textfield-label-color-readonly : #{neo(textfield-label-color-readonly)};
|
|
46
|
+
--textfield-label-top-margin : #{neo(textfield-label-top-margin)};
|
|
47
|
+
--textfield-opacity-readonly : #{neo(textfield-opacity-readonly)};
|
|
48
|
+
--textfield-outline-active : #{neo(textfield-outline-active)};
|
|
49
|
+
--textfield-outline-hovered : #{neo(textfield-outline-hovered)};
|
|
40
50
|
}
|
|
41
51
|
}
|
package/src/component/Base.mjs
CHANGED
|
@@ -16,13 +16,6 @@ import VNodeUtil from '../util/VNode.mjs';
|
|
|
16
16
|
* @extends Neo.core.Base
|
|
17
17
|
*/
|
|
18
18
|
class Base extends CoreBase {
|
|
19
|
-
/**
|
|
20
|
-
* Internal flag to prevent multiple CSS merges
|
|
21
|
-
* @member {Boolean} baseClsApplied=false
|
|
22
|
-
* @protected
|
|
23
|
-
*/
|
|
24
|
-
baseClsApplied = false
|
|
25
|
-
|
|
26
19
|
static getStaticConfig() {return {
|
|
27
20
|
/**
|
|
28
21
|
* Valid values for hideMode
|
|
@@ -866,16 +859,7 @@ class Base extends CoreBase {
|
|
|
866
859
|
* @protected
|
|
867
860
|
*/
|
|
868
861
|
beforeSetCls(value, oldValue) {
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
let me = this;
|
|
872
|
-
|
|
873
|
-
if (!me.baseClsApplied) {
|
|
874
|
-
value = NeoArray.union(value, me.baseCls);
|
|
875
|
-
me.baseClsApplied = true;
|
|
876
|
-
}
|
|
877
|
-
|
|
878
|
-
return value;
|
|
862
|
+
return NeoArray.union(value || [], this.baseCls);;
|
|
879
863
|
}
|
|
880
864
|
|
|
881
865
|
/**
|
package/src/form/field/Text.mjs
CHANGED
|
@@ -125,6 +125,10 @@ class Text extends Base {
|
|
|
125
125
|
* @member {String|null} placeholderText_=null
|
|
126
126
|
*/
|
|
127
127
|
placeholderText_: null,
|
|
128
|
+
/**
|
|
129
|
+
* @member {Boolean} readOnly_=false
|
|
130
|
+
*/
|
|
131
|
+
readOnly_: false,
|
|
128
132
|
/**
|
|
129
133
|
* @member {Boolean} required_=false
|
|
130
134
|
*/
|
|
@@ -476,6 +480,22 @@ class Text extends Base {
|
|
|
476
480
|
this.changeInputElKey('placeholder', value === '' ? null : value);
|
|
477
481
|
}
|
|
478
482
|
|
|
483
|
+
/**
|
|
484
|
+
* Triggered after the readOnly config got changed
|
|
485
|
+
* @param {Boolean} value
|
|
486
|
+
* @param {Boolean} oldValue
|
|
487
|
+
* @protected
|
|
488
|
+
*/
|
|
489
|
+
afterSetReadOnly(value, oldValue) {
|
|
490
|
+
let me = this,
|
|
491
|
+
cls = me.cls;
|
|
492
|
+
|
|
493
|
+
NeoArray[value ? 'add' : 'remove'](cls, 'neo-readonly');
|
|
494
|
+
me.cls = cls;
|
|
495
|
+
|
|
496
|
+
me.changeInputElKey('readonly', value ? value : null);
|
|
497
|
+
}
|
|
498
|
+
|
|
479
499
|
/**
|
|
480
500
|
* Triggered after the required config got changed
|
|
481
501
|
* @param {Boolean} value
|
|
@@ -567,18 +587,21 @@ class Text extends Base {
|
|
|
567
587
|
* @protected
|
|
568
588
|
*/
|
|
569
589
|
afterSetValue(value, oldValue) {
|
|
570
|
-
let me
|
|
571
|
-
cls
|
|
590
|
+
let me = this,
|
|
591
|
+
cls = me.cls,
|
|
592
|
+
emptyValue = Neo.isEmpty(value),
|
|
593
|
+
originalValue = me.originalConfig.value,
|
|
594
|
+
isDirty = value !== originalValue && emptyValue !== Neo.isEmpty(originalValue);
|
|
572
595
|
|
|
573
596
|
me.silentVdomUpdate = true;
|
|
574
597
|
|
|
575
598
|
me.getInputEl().value = value;
|
|
576
599
|
|
|
577
|
-
if (
|
|
600
|
+
if (emptyValue !== Neo.isEmpty(oldValue)) {
|
|
578
601
|
NeoArray[value !== null && value.toString().length > 0 ? 'add' : 'remove'](cls, 'neo-has-content');
|
|
579
602
|
}
|
|
580
603
|
|
|
581
|
-
NeoArray[
|
|
604
|
+
NeoArray[isDirty ? 'add' : 'remove'](cls, 'neo-is-dirty');
|
|
582
605
|
me.cls = cls;
|
|
583
606
|
|
|
584
607
|
me.validate(); // silent
|
|
@@ -27,13 +27,14 @@ class HighlightJS extends Base {
|
|
|
27
27
|
highlightJsLineNumbersPath: Neo.config.basePath + 'node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js',
|
|
28
28
|
/**
|
|
29
29
|
* Remote method access for other workers
|
|
30
|
-
* @member {Object} remote
|
|
30
|
+
* @member {Object} remote
|
|
31
31
|
* @protected
|
|
32
32
|
*/
|
|
33
33
|
remote: {
|
|
34
34
|
app: [
|
|
35
35
|
'scrollIntoView',
|
|
36
36
|
'syntaxHighlight',
|
|
37
|
+
'switchTheme',
|
|
37
38
|
'syntaxHighlightInit',
|
|
38
39
|
'syntaxHighlightLine'
|
|
39
40
|
]
|
|
@@ -62,7 +63,7 @@ class HighlightJS extends Base {
|
|
|
62
63
|
DomAccess.addScript({src: me.highlightJsLineNumbersPath});
|
|
63
64
|
});
|
|
64
65
|
|
|
65
|
-
Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath)
|
|
66
|
+
Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath)
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
/**
|
|
@@ -75,13 +76,11 @@ class HighlightJS extends Base {
|
|
|
75
76
|
let parentEl = DomAccess.getElement(data.vnodeId),
|
|
76
77
|
el = parentEl.querySelector('[data-list-header="' + data.text + '"]');
|
|
77
78
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
});
|
|
84
|
-
}
|
|
79
|
+
el?.previousSibling.scrollIntoView({
|
|
80
|
+
behavior: 'smooth',
|
|
81
|
+
block : 'start',
|
|
82
|
+
inline : 'nearest'
|
|
83
|
+
})
|
|
85
84
|
}
|
|
86
85
|
|
|
87
86
|
/**
|
|
@@ -95,10 +94,26 @@ class HighlightJS extends Base {
|
|
|
95
94
|
hljs.highlightBlock(node);
|
|
96
95
|
hljs.lineNumbersBlock(node);
|
|
97
96
|
} else {
|
|
98
|
-
console.error('highlight.js is not included inside the main thread.')
|
|
97
|
+
console.error('highlight.js is not included inside the main thread.')
|
|
99
98
|
}
|
|
100
99
|
}
|
|
101
100
|
|
|
101
|
+
/**
|
|
102
|
+
* You can pass in 'light', 'dark', or a path for a custom theme
|
|
103
|
+
* @param {String} theme
|
|
104
|
+
*/
|
|
105
|
+
switchTheme(theme) {
|
|
106
|
+
let definedThemes = {
|
|
107
|
+
dark: './resources/highlightjs-custom-dark-theme.css',
|
|
108
|
+
light: './resources/highlightjs-custom-github-theme.css'
|
|
109
|
+
},
|
|
110
|
+
switchToTheme = definedThemes[theme];
|
|
111
|
+
|
|
112
|
+
switchToTheme ??= theme;
|
|
113
|
+
this.themePath = switchToTheme;
|
|
114
|
+
Stylesheet.createStyleSheet(null, 'hljs-theme', switchToTheme);
|
|
115
|
+
}
|
|
116
|
+
|
|
102
117
|
/**
|
|
103
118
|
* @param {Object} data
|
|
104
119
|
*/
|
|
@@ -107,7 +122,7 @@ class HighlightJS extends Base {
|
|
|
107
122
|
let blocks = document.querySelectorAll('pre code:not(.hljs)');
|
|
108
123
|
Array.prototype.forEach.call(blocks, hljs.highlightBlock);
|
|
109
124
|
} else {
|
|
110
|
-
console.error('highlight.js is not included inside the main thread.')
|
|
125
|
+
console.error('highlight.js is not included inside the main thread.')
|
|
111
126
|
}
|
|
112
127
|
}
|
|
113
128
|
|
|
@@ -132,16 +147,14 @@ class HighlightJS extends Base {
|
|
|
132
147
|
behavior: 'smooth',
|
|
133
148
|
block : 'start',
|
|
134
149
|
inline : 'nearest'
|
|
135
|
-
})
|
|
150
|
+
})
|
|
136
151
|
}
|
|
137
152
|
}
|
|
138
153
|
|
|
139
154
|
if (Neo.isNumber(data.removeLine)) {
|
|
140
155
|
el = parentEl.querySelector('[data-line-number="' + data.removeLine + '"]');
|
|
141
156
|
|
|
142
|
-
|
|
143
|
-
el.parentNode.classList.remove(cls);
|
|
144
|
-
}
|
|
157
|
+
el && el.parentNode.classList.remove(cls)
|
|
145
158
|
}
|
|
146
159
|
}
|
|
147
160
|
}
|