neo.mjs 5.9.2 → 5.10.0
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/buildScripts/createClass.mjs +1 -3
- package/docs/app/view/classdetails/MembersList.mjs +2 -2
- package/examples/ServiceWorker.mjs +2 -2
- package/package.json +1 -1
- package/resources/scss/src/component/Process.scss +190 -0
- package/resources/scss/src/form/field/Switch.scss +135 -0
- package/resources/scss/theme-dark/component/Process.scss +21 -0
- package/resources/scss/theme-dark/form/field/Picker.scss +1 -1
- package/resources/scss/theme-dark/form/field/Switch.scss +17 -0
- package/resources/scss/theme-light/component/Process.scss +21 -0
- package/resources/scss/theme-light/form/field/Switch.scss +17 -0
- package/src/DefaultConfig.mjs +2 -2
- package/src/component/Process.mjs +180 -0
- package/src/form/field/Switch.mjs +43 -0
package/apps/ServiceWorker.mjs
CHANGED
|
@@ -674,9 +674,7 @@ if (programOpts.info) {
|
|
|
674
674
|
);
|
|
675
675
|
|
|
676
676
|
isSingleton && classContent.push(
|
|
677
|
-
`let instance = Neo.
|
|
678
|
-
"",
|
|
679
|
-
"Neo.applyToGlobalNs(instance);",
|
|
677
|
+
`let instance = Neo.applyClassConfig(${file});`,
|
|
680
678
|
"",
|
|
681
679
|
"export default instance;"
|
|
682
680
|
);
|
|
@@ -258,7 +258,7 @@ class MembersList extends Base {
|
|
|
258
258
|
}, []).join(', ') + ')');
|
|
259
259
|
}
|
|
260
260
|
|
|
261
|
-
if (item.returns
|
|
261
|
+
if (item.returns?.[0].type) {
|
|
262
262
|
headerText += (' → {' + MembersList.escapeHtml(item.returns[0].type.names.join('|') + '}'));
|
|
263
263
|
}
|
|
264
264
|
|
|
@@ -318,7 +318,7 @@ class MembersList extends Base {
|
|
|
318
318
|
itemConfig.cn.push(MembersList.createParametersTable(item.params));
|
|
319
319
|
}
|
|
320
320
|
|
|
321
|
-
if (item.returns && item.kind !== 'event') {
|
|
321
|
+
if (item.returns?.[0].type && item.kind !== 'event') {
|
|
322
322
|
itemConfig.cn.push({
|
|
323
323
|
innerHTML: 'Returns {' + MembersList.escapeHtml(item.returns[0].type.names.join('|') + '} ') + (item.returns[0].description || '')
|
|
324
324
|
});
|
package/package.json
CHANGED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
.neo-process {
|
|
2
|
+
// will be set by the component if changes
|
|
3
|
+
--process-arrow-color: v(process-arrow-color);
|
|
4
|
+
--process-icon-color: v(process-icon-color);
|
|
5
|
+
|
|
6
|
+
display: flex;
|
|
7
|
+
background-color: v(process-background-color);
|
|
8
|
+
padding: 0.5rem;
|
|
9
|
+
|
|
10
|
+
.process-step {
|
|
11
|
+
position: relative;
|
|
12
|
+
z-index: 0;
|
|
13
|
+
padding: 0.75rem;
|
|
14
|
+
|
|
15
|
+
.arrow {
|
|
16
|
+
width: 0;
|
|
17
|
+
height: 0;
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: 50%;
|
|
20
|
+
|
|
21
|
+
&.white {
|
|
22
|
+
z-index: 1;
|
|
23
|
+
border-bottom: 10px solid transparent;
|
|
24
|
+
border-right: 10px solid transparent;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.yellow {
|
|
28
|
+
z-index: -1;
|
|
29
|
+
border-bottom: 20px solid transparent;
|
|
30
|
+
border-right: 20px solid transparent;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.slit {
|
|
35
|
+
position: absolute;
|
|
36
|
+
inset: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.process-content {
|
|
40
|
+
position: relative;
|
|
41
|
+
|
|
42
|
+
.process-step-icon {
|
|
43
|
+
margin-left: auto;
|
|
44
|
+
margin-right: auto;
|
|
45
|
+
width: 100%;
|
|
46
|
+
text-align: center;
|
|
47
|
+
height: v(process-icon-size);
|
|
48
|
+
z-index: 10;
|
|
49
|
+
|
|
50
|
+
&::before {
|
|
51
|
+
// Do NOT switch to v()
|
|
52
|
+
color: var(--process-icon-color);
|
|
53
|
+
font-size: v(process-icon-size);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.process-step-header {
|
|
58
|
+
display: block;
|
|
59
|
+
color: v(process-title-color);
|
|
60
|
+
word-break: break-word;
|
|
61
|
+
text-align: center;
|
|
62
|
+
text-transform: uppercase;
|
|
63
|
+
margin: 1.5rem 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.process-step-text {
|
|
67
|
+
text-align: center;
|
|
68
|
+
display: block;
|
|
69
|
+
color: v(process-text-color);
|
|
70
|
+
font-size: 1em;
|
|
71
|
+
font-weight: 400;
|
|
72
|
+
line-height: 1.5;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&.neo-process-horizontal {
|
|
78
|
+
flex-direction: row;
|
|
79
|
+
|
|
80
|
+
.process-step {
|
|
81
|
+
.arrow.white {
|
|
82
|
+
border-left: 10px solid v(process-background-color);
|
|
83
|
+
border-top: 10px solid transparent;
|
|
84
|
+
top: 50%;
|
|
85
|
+
left: 0;
|
|
86
|
+
margin-left: 0;
|
|
87
|
+
margin-top: -10px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.arrow.yellow {
|
|
91
|
+
// Do NOT switch to v()
|
|
92
|
+
border-left: 20px solid var(--process-arrow-color);
|
|
93
|
+
border-top: 20px solid transparent;
|
|
94
|
+
top: 50%;
|
|
95
|
+
left: 0;
|
|
96
|
+
margin-left: 0;
|
|
97
|
+
margin-top: -20px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.slit {
|
|
101
|
+
box-shadow: inset 0 100px 50px -40px v(process-background-color),
|
|
102
|
+
inset 0 -100px 50px -40px v(process-background-color),
|
|
103
|
+
inset 5px 0 10px -5px v(process-shadow-color);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.process-content {
|
|
107
|
+
padding-left: 30px;
|
|
108
|
+
padding-top: 0;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&.neo-process-vertical {
|
|
114
|
+
flex-direction: column;
|
|
115
|
+
|
|
116
|
+
.process-step {
|
|
117
|
+
.arrow.white {
|
|
118
|
+
border-left: 10px solid transparent;
|
|
119
|
+
border-top: 10px solid v(process-background-color);
|
|
120
|
+
top: 0;
|
|
121
|
+
left: 50%;
|
|
122
|
+
margin-left: -10px;
|
|
123
|
+
margin-top: 0;
|
|
124
|
+
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.arrow.yellow {
|
|
128
|
+
border-left: 20px solid transparent;
|
|
129
|
+
// Do NOT switch to v()
|
|
130
|
+
border-top: 20px solid var(--process-arrow-color);
|
|
131
|
+
top: 0;
|
|
132
|
+
left: 50%;
|
|
133
|
+
margin-left: -20px;
|
|
134
|
+
margin-top: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.slit {
|
|
138
|
+
box-shadow: inset 80px 0 50px -40px v(process-background-color),
|
|
139
|
+
inset -80px 0 50px -40px v(process-background-color),
|
|
140
|
+
inset 0 5px 10px -5px v(process-shadow-color);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.process-content {
|
|
144
|
+
padding-left: 0;
|
|
145
|
+
padding-top: 30px;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@media screen and (max-width: 700px) {
|
|
152
|
+
.neo-process {
|
|
153
|
+
&.neo-process-horizontal {
|
|
154
|
+
flex-direction: column;
|
|
155
|
+
|
|
156
|
+
.process-step {
|
|
157
|
+
.arrow.white {
|
|
158
|
+
border-left: 10px solid transparent;
|
|
159
|
+
border-top: 10px solid v(process-background-color);
|
|
160
|
+
top: 0;
|
|
161
|
+
left: 50%;
|
|
162
|
+
margin-left: -10px;
|
|
163
|
+
margin-top: 0;
|
|
164
|
+
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.arrow.yellow {
|
|
168
|
+
border-left: 20px solid transparent;
|
|
169
|
+
// Do NOT switch to v()
|
|
170
|
+
border-top: 20px solid var(--process-arrow-color);
|
|
171
|
+
top: 0;
|
|
172
|
+
left: 50%;
|
|
173
|
+
margin-left: -20px;
|
|
174
|
+
margin-top: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.slit {
|
|
178
|
+
box-shadow: inset 80px 0 50px -40px v(process-background-color),
|
|
179
|
+
inset -80px 0 50px -40px v(process-background-color),
|
|
180
|
+
inset 0 5px 10px -5px v(process-shadow-color);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.process-content {
|
|
184
|
+
padding-left: 0;
|
|
185
|
+
padding-top: 30px;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
.switchfield {
|
|
2
|
+
@keyframes switch-on-position {
|
|
3
|
+
0% {
|
|
4
|
+
left: 0;
|
|
5
|
+
right: 50%
|
|
6
|
+
}
|
|
7
|
+
25% {
|
|
8
|
+
left: 0;
|
|
9
|
+
right: 37.5%
|
|
10
|
+
}
|
|
11
|
+
100% {
|
|
12
|
+
left: 50%;
|
|
13
|
+
right: 0
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes switch-off-position {
|
|
18
|
+
0% {
|
|
19
|
+
left: 50%;
|
|
20
|
+
right: 0
|
|
21
|
+
}
|
|
22
|
+
25% {
|
|
23
|
+
left: 37.5%;
|
|
24
|
+
right: 0
|
|
25
|
+
}
|
|
26
|
+
100% {
|
|
27
|
+
left: 0%;
|
|
28
|
+
right: 50%
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@keyframes switch-on-transform {
|
|
33
|
+
0% {
|
|
34
|
+
transform: translate(0) scaleX(1)
|
|
35
|
+
}
|
|
36
|
+
25% {
|
|
37
|
+
transform: translate(0) scaleX(1.33)
|
|
38
|
+
}
|
|
39
|
+
100% {
|
|
40
|
+
transform: translate(100%) scaleX(1)
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes switch-off-transform {
|
|
45
|
+
0% {
|
|
46
|
+
transform: translate(100%) scaleX(1)
|
|
47
|
+
}
|
|
48
|
+
25% {
|
|
49
|
+
transform: translate(100%) scaleX(1.33)
|
|
50
|
+
}
|
|
51
|
+
100% {
|
|
52
|
+
transform: translate(0) scaleX(1)
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
input[type="checkbox"] {
|
|
57
|
+
position: relative;
|
|
58
|
+
display: inline-block;
|
|
59
|
+
-webkit-appearance: none;
|
|
60
|
+
-webkit-tap-highlight-color: transparent;
|
|
61
|
+
height: 1.5em;
|
|
62
|
+
width: 3em;
|
|
63
|
+
font-size: 1.5em;
|
|
64
|
+
|
|
65
|
+
border-radius: 1.25em;
|
|
66
|
+
background-color: v(switchfield-background-color);
|
|
67
|
+
border-color: transparent;
|
|
68
|
+
background-clip: padding-box;
|
|
69
|
+
color: v(switchfield-inactive-color);
|
|
70
|
+
vertical-align: middle;
|
|
71
|
+
transition: all 0.25s linear 0.25s;
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
&::before {
|
|
75
|
+
content: "";
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: 0;
|
|
78
|
+
left: 0;
|
|
79
|
+
bottom: 0;
|
|
80
|
+
right: 50%;
|
|
81
|
+
background-color: v(switchfield-thumb-color);
|
|
82
|
+
border-radius: 100%;
|
|
83
|
+
border: 0.125em solid transparent;
|
|
84
|
+
background-clip: padding-box;
|
|
85
|
+
z-index: 2;
|
|
86
|
+
transform-origin: right center;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&::after {
|
|
90
|
+
position: absolute;
|
|
91
|
+
left: 0.5em;
|
|
92
|
+
top: 0.15em;
|
|
93
|
+
line-height: 1.5;
|
|
94
|
+
font-family: "Font Awesome 6 Free";
|
|
95
|
+
font-weight: 900;
|
|
96
|
+
content: "\f00c\f00d";
|
|
97
|
+
letter-spacing: 1em;
|
|
98
|
+
z-index: 1;
|
|
99
|
+
font-size: 1.25rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:focus {
|
|
103
|
+
color: v(switchfield-active-color);
|
|
104
|
+
border-color: transparent;
|
|
105
|
+
background-color: v(switchfield-background-color);
|
|
106
|
+
outline: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&:checked {
|
|
110
|
+
color: v(switchfield-inactive-color);
|
|
111
|
+
background-color: v(switchfield-checked);
|
|
112
|
+
border-color: transparent;
|
|
113
|
+
|
|
114
|
+
&::before {
|
|
115
|
+
transform-origin: left center;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
input[type="checkbox"]::before {
|
|
121
|
+
animation: switch-off-position 0.25s ease-out forwards;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
input[type="checkbox"]:checked::before {
|
|
125
|
+
animation: switch-on-position 0.25s ease-out forwards;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
input[type="checkbox"]::before {
|
|
129
|
+
animation: switch-off-transform 0.25s ease-out forwards;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
input[type="checkbox"]:checked::before {
|
|
133
|
+
animation: switch-on-transform 0.25s ease-out forwards;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'process-arrow-color' : #ffdb4a,
|
|
3
|
+
'process-background-color': #fff,
|
|
4
|
+
'process-icon-color' : steelblue,
|
|
5
|
+
'process-icon-size' : 2rem,
|
|
6
|
+
'process-shadow-color' : rgba(0, 0, 0, .5),
|
|
7
|
+
'process-title-color' : #363636,
|
|
8
|
+
'process-text-color' : #444444
|
|
9
|
+
));
|
|
10
|
+
|
|
11
|
+
@if $useCssVars == true {
|
|
12
|
+
:root .neo-theme-dark {
|
|
13
|
+
--process-arrow-color : #{neo(process-arrow-color)};
|
|
14
|
+
--process-background-color: #{neo(process-background-color)};
|
|
15
|
+
--process-icon-color : #{neo(process-icon-color)};
|
|
16
|
+
--process-icon-size : #{neo(process-icon-size)};
|
|
17
|
+
--process-shadow-color : #{neo(process-shadow-color)};
|
|
18
|
+
--process-title-color : #{neo(process-title-color)};
|
|
19
|
+
--process-text-color : #{neo(process-text-color)};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -5,7 +5,7 @@ $neoMap: map-merge($neoMap, (
|
|
|
5
5
|
));
|
|
6
6
|
|
|
7
7
|
@if $useCssVars == true {
|
|
8
|
-
:root .neo-theme-
|
|
8
|
+
:root .neo-theme-dark { // .neo-pickerfield
|
|
9
9
|
--pickerfield-container-background-color: #{neo(pickerfield-container-background-)};
|
|
10
10
|
--pickerfield-container-border : #{neo(pickerfield-container-border)};
|
|
11
11
|
--pickerfield-container-box-shadow : #{neo(pickerfield-container-box-shadow)};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'switchfield-checked': green,
|
|
3
|
+
'switchfield-background-color': darkgrey,
|
|
4
|
+
'switchfield-inactive-color': grey,
|
|
5
|
+
'switchfield-active-color': white,
|
|
6
|
+
'switchfield-thumb-color': white
|
|
7
|
+
));
|
|
8
|
+
|
|
9
|
+
@if $useCssVars == true {
|
|
10
|
+
:root .neo-theme-dark { // .neo-switchfield
|
|
11
|
+
--neo-switchfield-checked : #{neo(switchfield-checked)};
|
|
12
|
+
--neo-switchfield-background-color : #{neo(switchfield-background-color)};
|
|
13
|
+
--neo-switchfield-inactive-color : #{neo(switchfield-inactive-color)};
|
|
14
|
+
--neo-switchfield-active-color : #{neo(switchfield-active-color)};
|
|
15
|
+
--neo-switchfield-thumb-color-active-color : #{neo(switchfield-thumb-color-active-color)};
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'process-arrow-color' : #ffdb4a,
|
|
3
|
+
'process-background-color': #fff,
|
|
4
|
+
'process-icon-color' : steelblue,
|
|
5
|
+
'process-icon-size' : 2rem,
|
|
6
|
+
'process-shadow-color' : rgba(0, 0, 0, .5),
|
|
7
|
+
'process-title-color' : #363636,
|
|
8
|
+
'process-text-color' : #444444
|
|
9
|
+
));
|
|
10
|
+
|
|
11
|
+
@if $useCssVars == true {
|
|
12
|
+
:root .neo-theme-light {
|
|
13
|
+
--process-arrow-color : #{neo(process-arrow-color)};
|
|
14
|
+
--process-background-color: #{neo(process-background-color)};
|
|
15
|
+
--process-icon-color : #{neo(process-icon-color)};
|
|
16
|
+
--process-icon-size : #{neo(process-icon-size)};
|
|
17
|
+
--process-shadow-color : #{neo(process-shadow-color)};
|
|
18
|
+
--process-title-color : #{neo(process-title-color)};
|
|
19
|
+
--process-text-color : #{neo(process-text-color)};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
$neoMap: map-merge($neoMap, (
|
|
2
|
+
'switchfield-checked': green,
|
|
3
|
+
'switchfield-background-color': darkgrey,
|
|
4
|
+
'switchfield-inactive-color': grey,
|
|
5
|
+
'switchfield-active-color': white,
|
|
6
|
+
'switchfield-thumb-color': white
|
|
7
|
+
));
|
|
8
|
+
|
|
9
|
+
@if $useCssVars == true {
|
|
10
|
+
:root .neo-theme-light { // .neo-switchfield
|
|
11
|
+
--neo-switchfield-checked : #{neo(switchfield-checked)};
|
|
12
|
+
--neo-switchfield-background-color : #{neo(switchfield-background-color)};
|
|
13
|
+
--neo-switchfield-inactive-color : #{neo(switchfield-inactive-color)};
|
|
14
|
+
--neo-switchfield-active-color : #{neo(switchfield-active-color)};
|
|
15
|
+
--neo-switchfield-thumb-color-active-color : #{neo(switchfield-thumb-color-active-color)};
|
|
16
|
+
}
|
|
17
|
+
}
|
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 '5.
|
|
239
|
+
* @default '5.10.0'
|
|
240
240
|
* @memberOf! module:Neo
|
|
241
241
|
* @name config.version
|
|
242
242
|
* @type String
|
|
243
243
|
*/
|
|
244
|
-
version: '5.
|
|
244
|
+
version: '5.10.0'
|
|
245
245
|
};
|
|
246
246
|
|
|
247
247
|
Object.assign(DefaultConfig, {
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import Base from './Base.mjs';
|
|
2
|
+
import NeoArray from '../util/Array.mjs';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @class Neo.component.Process
|
|
6
|
+
* @extends Neo.component.Base
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* {
|
|
10
|
+
* module: Process,
|
|
11
|
+
* arrowColor: 'darkred',
|
|
12
|
+
* items: [{
|
|
13
|
+
* iconCls: 'fa fa-car',
|
|
14
|
+
* header: '1. Wunschkennzeichen',
|
|
15
|
+
* text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit...'
|
|
16
|
+
* }, {
|
|
17
|
+
* iconCls: 'fa fa-house',
|
|
18
|
+
* header: '2. Termine',
|
|
19
|
+
* text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit...'
|
|
20
|
+
* }]
|
|
21
|
+
* }
|
|
22
|
+
*/
|
|
23
|
+
class Process extends Base {
|
|
24
|
+
/**
|
|
25
|
+
* Each item gets an arrow and the content, which gets filled with an item.
|
|
26
|
+
* The slit allows to fade out the sidebar.
|
|
27
|
+
*
|
|
28
|
+
* @member {Object} itemLayout={cls: 'process-step', cn: [{cls: ['arrow', 'white']},{cls: ['slit']},{cls: ['arrow', 'yellow']},{cls: 'process-content', cn: [{cls: ['process-step-icon']},{tag: 'h2', cls: ['process-step-header']},{cls: ['process-step-text']}]}]}
|
|
29
|
+
*/
|
|
30
|
+
itemLayout = {
|
|
31
|
+
cls: 'process-step', cn: [
|
|
32
|
+
{cls: ['arrow', 'white']},
|
|
33
|
+
{cls: ['slit']},
|
|
34
|
+
{cls: ['arrow', 'yellow']},
|
|
35
|
+
{
|
|
36
|
+
cls: 'process-content', cn: [
|
|
37
|
+
{cls: ['process-step-icon']},
|
|
38
|
+
{tag: 'h2', cls: ['process-step-header']},
|
|
39
|
+
{cls: ['process-step-text']}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
static config = {
|
|
46
|
+
/**
|
|
47
|
+
* @member {String} className='Neo.component.Process'
|
|
48
|
+
* @protected
|
|
49
|
+
*/
|
|
50
|
+
className: 'Neo.component.Process',
|
|
51
|
+
/**
|
|
52
|
+
* @member {String} ntype='process'
|
|
53
|
+
* @protected
|
|
54
|
+
*/
|
|
55
|
+
ntype: 'process',
|
|
56
|
+
/**
|
|
57
|
+
* @member {String[]} baseCls=['neo-process']
|
|
58
|
+
*/
|
|
59
|
+
baseCls: ['neo-process'],
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Set the color of the process arrow.
|
|
63
|
+
* Out of the box this is #ffdb4a
|
|
64
|
+
*
|
|
65
|
+
* @member {String|null} arrowColor=null
|
|
66
|
+
*/
|
|
67
|
+
arrowColor_: null,
|
|
68
|
+
/**
|
|
69
|
+
* 'true' shows the items from left to right
|
|
70
|
+
* 'false' shows the items from top to bottom
|
|
71
|
+
* There is a minimum width of 700px to show items 'true'
|
|
72
|
+
*
|
|
73
|
+
* @member {Boolean} horizontal=true
|
|
74
|
+
*/
|
|
75
|
+
horizontal_: true,
|
|
76
|
+
/**
|
|
77
|
+
* Set the color of the icons.
|
|
78
|
+
* Out of the box this is #ffdb4a
|
|
79
|
+
*
|
|
80
|
+
* @member {String|null} iconColor=null
|
|
81
|
+
*/
|
|
82
|
+
iconColor_: null,
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Each item will be transferred into the itemLayout
|
|
86
|
+
*
|
|
87
|
+
* @member {Object[]|Object} items=null
|
|
88
|
+
*
|
|
89
|
+
* @example
|
|
90
|
+
* items: [{
|
|
91
|
+
* iconCls: 'fa fa-car',
|
|
92
|
+
* header: '1. First Step',
|
|
93
|
+
* text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.'
|
|
94
|
+
* }, {
|
|
95
|
+
* iconCls: 'fa fa-house',
|
|
96
|
+
* header: '2. Second Step',
|
|
97
|
+
* text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.'
|
|
98
|
+
* }]
|
|
99
|
+
*/
|
|
100
|
+
items_: null,
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* vdom definition is used during item creation
|
|
104
|
+
* Do not remove
|
|
105
|
+
*
|
|
106
|
+
* @member {Object} vdom={cn:[]}
|
|
107
|
+
*/
|
|
108
|
+
vdom: {cn: []}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Triggered after arrowColor config got changed
|
|
113
|
+
* @param {String} newValue
|
|
114
|
+
* @protected
|
|
115
|
+
*/
|
|
116
|
+
afterSetArrowColor(newValue) {
|
|
117
|
+
let style = this.style;
|
|
118
|
+
|
|
119
|
+
style['--process-arrow-color'] = newValue;
|
|
120
|
+
|
|
121
|
+
this.style = style;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Triggered after horizontal config got changed
|
|
126
|
+
* @param {Boolean} isHorizontal
|
|
127
|
+
* @protected
|
|
128
|
+
*/
|
|
129
|
+
afterSetHorizontal(isHorizontal) {
|
|
130
|
+
let cls = this.cls,
|
|
131
|
+
positionCls = isHorizontal ? 'neo-process-horizontal' : 'neo-process-vertical';
|
|
132
|
+
|
|
133
|
+
NeoArray.add(cls, positionCls);
|
|
134
|
+
|
|
135
|
+
this.cls = cls;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* Triggered after iconColor config got changed
|
|
140
|
+
* @param {String} newValue
|
|
141
|
+
* @protected
|
|
142
|
+
*/
|
|
143
|
+
afterSetIconColor(newValue) {
|
|
144
|
+
let style = this.style;
|
|
145
|
+
|
|
146
|
+
style['--process-icon-color'] = newValue;
|
|
147
|
+
|
|
148
|
+
this.style = style;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Triggered after items config got changed
|
|
153
|
+
* @param {Object[]} items
|
|
154
|
+
* @protected
|
|
155
|
+
*/
|
|
156
|
+
afterSetItems(items) {
|
|
157
|
+
if (!(Neo.isArray(items) || Neo.isObject(items))) return;
|
|
158
|
+
if (!Neo.isArray(items)) {
|
|
159
|
+
items = [items];
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
let vdomRoot = this.vdom,
|
|
163
|
+
itemLayout = this.itemLayout;
|
|
164
|
+
|
|
165
|
+
items.forEach((newItem) => {
|
|
166
|
+
let curItem = Neo.clone(itemLayout, true),
|
|
167
|
+
content = curItem.cn[3];
|
|
168
|
+
|
|
169
|
+
content.cn[0].cls.push(newItem.iconCls);
|
|
170
|
+
content.cn[1].innerHTML = newItem.header;
|
|
171
|
+
content.cn[2].innerHTML = newItem.text;
|
|
172
|
+
|
|
173
|
+
NeoArray.add(vdomRoot.cn, curItem);
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
Neo.applyClassConfig(Process);
|
|
179
|
+
|
|
180
|
+
export default Process;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import CheckBox from './CheckBox.mjs';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @class Neo.form.field.Switch
|
|
5
|
+
* @extends Neo.form.field.CheckBox
|
|
6
|
+
*/
|
|
7
|
+
class Switch extends CheckBox {
|
|
8
|
+
static config = {
|
|
9
|
+
/**
|
|
10
|
+
* @member {String} className='Neo.form.field.Switch'
|
|
11
|
+
* @protected
|
|
12
|
+
*/
|
|
13
|
+
className: 'Neo.form.field.Switch',
|
|
14
|
+
/**
|
|
15
|
+
* @member {String} ntype='switchfield'
|
|
16
|
+
* @protected
|
|
17
|
+
*/
|
|
18
|
+
ntype: 'switchfield',
|
|
19
|
+
/**
|
|
20
|
+
* @member {String[]} baseCls=['neo-checkboxfield']
|
|
21
|
+
*/
|
|
22
|
+
baseCls: ['neo-switchfield'],
|
|
23
|
+
/**
|
|
24
|
+
* @member {Object} _vdom
|
|
25
|
+
*/
|
|
26
|
+
_vdom:
|
|
27
|
+
{cn: [
|
|
28
|
+
{tag: 'label', cls: ['neo-checkbox-label'], cn: [
|
|
29
|
+
{tag: 'span', cls: []},
|
|
30
|
+
{tag: 'input', cls: ['neo-checkbox-input']},
|
|
31
|
+
{tag: 'i', cls: ['neo-checkbox-icon'], removeDom: true},
|
|
32
|
+
{tag: 'span', cls: ['neo-checkbox-value-label']}
|
|
33
|
+
]},
|
|
34
|
+
{cls: ['neo-error-wrapper'], removeDom: true, cn: [
|
|
35
|
+
{cls: ['neo-error']}
|
|
36
|
+
]}
|
|
37
|
+
]}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
Neo.applyClassConfig(Switch);
|
|
42
|
+
|
|
43
|
+
export default Switch;
|