neo.mjs 5.16.0 → 5.16.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/docs/app/view/MainContainer.mjs +10 -0
- package/docs/app/view/classdetails/MainContainer.mjs +14 -4
- package/examples/ServiceWorker.mjs +2 -2
- package/examples/form/field/switch/MainContainer.mjs +124 -0
- package/examples/form/field/switch/app.mjs +6 -0
- package/examples/form/field/switch/index.html +11 -0
- package/examples/form/field/switch/neo-config.json +6 -0
- package/package.json +1 -1
- package/resources/scss/src/apps/docs/HeaderContainer.scss +1 -1
- package/resources/scss/src/apps/docs/MainContainer.scss +5 -1
- package/resources/scss/src/apps/docs/classdetails/HeaderComponent.scss +0 -5
- package/resources/scss/src/apps/docs/classdetails/MainContainer.scss +1 -1
- package/resources/scss/src/component/Splitter.scss +3 -1
- package/resources/scss/src/form/field/Switch.scss +85 -115
- package/resources/scss/src/tree/List.scss +2 -1
- package/resources/scss/theme-dark/form/field/Switch.scss +10 -10
- package/resources/scss/theme-light/form/field/Switch.scss +10 -10
- package/src/DefaultConfig.mjs +2 -2
- package/src/component/Splitter.mjs +27 -22
- package/src/form/field/Switch.mjs +11 -11
package/apps/ServiceWorker.mjs
CHANGED
|
@@ -6,6 +6,7 @@ import ExamplesTreeList from './ExamplesTreeList.mjs';
|
|
|
6
6
|
import HeaderContainer from './HeaderContainer.mjs';
|
|
7
7
|
import MainContainerController from './MainContainerController.mjs';
|
|
8
8
|
import SourceViewComponent from './classdetails/SourceViewComponent.mjs';
|
|
9
|
+
import Splitter from '../../../src/component/Splitter.mjs';
|
|
9
10
|
import TutorialComponent from './classdetails/TutorialComponent.mjs';
|
|
10
11
|
import TutorialsTreeList from './TutorialsTreeList.mjs';
|
|
11
12
|
import Viewport from '../../../src/container/Viewport.mjs';
|
|
@@ -85,6 +86,15 @@ class MainContainer extends Viewport {
|
|
|
85
86
|
text : 'Examples'
|
|
86
87
|
}
|
|
87
88
|
}]
|
|
89
|
+
}, {
|
|
90
|
+
module : Splitter,
|
|
91
|
+
resizeTarget: 'previous',
|
|
92
|
+
size : 5,
|
|
93
|
+
|
|
94
|
+
style: {
|
|
95
|
+
borderTop: 'var(--tab-strip-height) solid var(--tab-strip-background-color)',
|
|
96
|
+
marginTop: 'var(--tab-button-height)'
|
|
97
|
+
}
|
|
88
98
|
}, {
|
|
89
99
|
module : ContentTabContainer,
|
|
90
100
|
flex : 1,
|
|
@@ -5,6 +5,7 @@ import MainContainerController from './MainContainerController.mjs';
|
|
|
5
5
|
import MembersList from './MembersList.mjs';
|
|
6
6
|
import Panel from '../../../../src/container/Panel.mjs';
|
|
7
7
|
import SearchField from '../../../../src/form/field/Search.mjs';
|
|
8
|
+
import Splitter from '../../../../src/component/Splitter.mjs';
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* @class Docs.view.classdetails.MainContainer
|
|
@@ -42,10 +43,11 @@ class MainContainer extends Container {
|
|
|
42
43
|
* @member {Array} items=[//...]]
|
|
43
44
|
*/
|
|
44
45
|
items: [{
|
|
45
|
-
ntype
|
|
46
|
-
|
|
47
|
-
flex
|
|
48
|
-
layout: {ntype: 'hbox', align: 'stretch'},
|
|
46
|
+
ntype : 'container',
|
|
47
|
+
cls : ['neo-docs-classdetails-headercontainer'],
|
|
48
|
+
flex : '1 1 auto',
|
|
49
|
+
layout : {ntype: 'hbox', align: 'stretch'},
|
|
50
|
+
minHeight: 200,
|
|
49
51
|
|
|
50
52
|
items: [{
|
|
51
53
|
module : Panel,
|
|
@@ -109,12 +111,20 @@ class MainContainer extends Container {
|
|
|
109
111
|
flex : 1,
|
|
110
112
|
record: '@config:structureData'
|
|
111
113
|
}]
|
|
114
|
+
}, {
|
|
115
|
+
module: Splitter,
|
|
116
|
+
size : 5
|
|
112
117
|
}, {
|
|
113
118
|
module : HierarchyTreeList,
|
|
114
119
|
flex : '0 0 auto',
|
|
115
120
|
minWidth : 330,
|
|
116
121
|
structureData: '@config:structureData'
|
|
117
122
|
}]
|
|
123
|
+
}, {
|
|
124
|
+
module : Splitter,
|
|
125
|
+
direction : 'horizontal',
|
|
126
|
+
resizeTarget: 'previous',
|
|
127
|
+
size : 5
|
|
118
128
|
}, {
|
|
119
129
|
module : MembersList,
|
|
120
130
|
flex : 1,
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import CheckBox from '../../../../src/form/field/CheckBox.mjs';
|
|
2
|
+
import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
|
|
3
|
+
import NumberField from '../../../../src/form/field/Number.mjs';
|
|
4
|
+
import Radio from '../../../../src/form/field/Radio.mjs';
|
|
5
|
+
import SwitchField from '../../../../src/form/field/Switch.mjs';
|
|
6
|
+
import TextField from '../../../../src/form/field/Text.mjs';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @class Neo.examples.form.field.switch.MainContainer
|
|
10
|
+
* @extends Neo.examples.ConfigurationViewport
|
|
11
|
+
*/
|
|
12
|
+
class MainContainer extends ConfigurationViewport {
|
|
13
|
+
static config = {
|
|
14
|
+
className : 'Neo.examples.form.field.switch.MainContainer',
|
|
15
|
+
autoMount : true,
|
|
16
|
+
configItemLabelWidth: 160,
|
|
17
|
+
layout : {ntype: 'hbox', align: 'stretch'}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
createConfigurationComponents() {
|
|
21
|
+
let me = this;
|
|
22
|
+
|
|
23
|
+
return [{
|
|
24
|
+
module : CheckBox,
|
|
25
|
+
checked : me.exampleComponent.checked,
|
|
26
|
+
labelText: 'checked',
|
|
27
|
+
listeners: {change: me.onConfigChange.bind(me, 'checked')}
|
|
28
|
+
}, {
|
|
29
|
+
module : CheckBox,
|
|
30
|
+
checked : me.exampleComponent.disabled,
|
|
31
|
+
labelText: 'disabled',
|
|
32
|
+
listeners: {change: me.onConfigChange.bind(me, 'disabled')},
|
|
33
|
+
style : {marginTop: '10px'}
|
|
34
|
+
}, {
|
|
35
|
+
module : TextField,
|
|
36
|
+
clearable: true,
|
|
37
|
+
labelText: 'error',
|
|
38
|
+
listeners: {change: me.onConfigChange.bind(me, 'error')},
|
|
39
|
+
style : {marginTop: '10px'},
|
|
40
|
+
value : me.exampleComponent.error
|
|
41
|
+
}, {
|
|
42
|
+
module : CheckBox,
|
|
43
|
+
checked : me.exampleComponent.hideLabel,
|
|
44
|
+
labelText: 'hideLabel',
|
|
45
|
+
listeners: {change: me.onConfigChange.bind(me, 'hideLabel')},
|
|
46
|
+
style : {marginTop: '10px'}
|
|
47
|
+
}, {
|
|
48
|
+
module : Radio,
|
|
49
|
+
checked : me.exampleComponent.labelPosition === 'left',
|
|
50
|
+
hideValueLabel: false,
|
|
51
|
+
labelText : 'labelPosition',
|
|
52
|
+
listeners : {change: me.onRadioChange.bind(me, 'labelPosition', 'left')},
|
|
53
|
+
name : 'labelPosition',
|
|
54
|
+
style : {marginTop: '10px'},
|
|
55
|
+
valueLabelText: 'left'
|
|
56
|
+
}, {
|
|
57
|
+
module : Radio,
|
|
58
|
+
checked : me.exampleComponent.labelPosition === 'top',
|
|
59
|
+
hideValueLabel: false,
|
|
60
|
+
labelText : '',
|
|
61
|
+
listeners : {change: me.onRadioChange.bind(me, 'labelPosition', 'top')},
|
|
62
|
+
name : 'labelPosition',
|
|
63
|
+
valueLabelText: 'top'
|
|
64
|
+
}, {
|
|
65
|
+
module : TextField,
|
|
66
|
+
labelText: 'labelText',
|
|
67
|
+
listeners: {change: me.onConfigChange.bind(me, 'labelText')},
|
|
68
|
+
style : {marginTop: '10px'},
|
|
69
|
+
value : me.exampleComponent.labelText
|
|
70
|
+
}, {
|
|
71
|
+
module : NumberField,
|
|
72
|
+
labelText: 'labelWidth',
|
|
73
|
+
listeners: {change: me.onConfigChange.bind(me, 'labelWidth')},
|
|
74
|
+
maxValue : 200,
|
|
75
|
+
minValue : 50,
|
|
76
|
+
stepSize : 5,
|
|
77
|
+
value : me.exampleComponent.labelWidth
|
|
78
|
+
}, {
|
|
79
|
+
module : CheckBox,
|
|
80
|
+
checked : me.exampleComponent.readOnly,
|
|
81
|
+
labelText: 'readOnly',
|
|
82
|
+
listeners: {change: me.onConfigChange.bind(me, 'readOnly')},
|
|
83
|
+
style : {marginTop: '10px'}
|
|
84
|
+
}, {
|
|
85
|
+
module : CheckBox,
|
|
86
|
+
checked : me.exampleComponent.required,
|
|
87
|
+
labelText: 'required',
|
|
88
|
+
listeners: {change: me.onConfigChange.bind(me, 'required')},
|
|
89
|
+
style : {marginTop: '10px'}
|
|
90
|
+
}, {
|
|
91
|
+
module : TextField,
|
|
92
|
+
labelText: 'valueLabelText',
|
|
93
|
+
listeners: {change: me.onConfigChange.bind(me, 'valueLabelText')},
|
|
94
|
+
style : {marginTop: '10px'},
|
|
95
|
+
value : me.exampleComponent.valueLabelText
|
|
96
|
+
}, {
|
|
97
|
+
module : NumberField,
|
|
98
|
+
labelText: 'width',
|
|
99
|
+
listeners: {change: me.onConfigChange.bind(me, 'width')},
|
|
100
|
+
maxValue : 500,
|
|
101
|
+
minValue : 50,
|
|
102
|
+
stepSize : 5,
|
|
103
|
+
style : {marginTop: '10px'},
|
|
104
|
+
value : me.exampleComponent.width
|
|
105
|
+
}, {
|
|
106
|
+
ntype : 'button',
|
|
107
|
+
handler: (() => {me.exampleComponent.reset()}),
|
|
108
|
+
style : {marginTop: '10px', width: '50%'},
|
|
109
|
+
text : 'reset()'
|
|
110
|
+
}]
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
createExampleComponent() {
|
|
114
|
+
return Neo.create(SwitchField, {
|
|
115
|
+
labelText : 'Label',
|
|
116
|
+
labelWidth: 70,
|
|
117
|
+
width : 200
|
|
118
|
+
})
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
Neo.applyClassConfig(MainContainer);
|
|
123
|
+
|
|
124
|
+
export default MainContainer;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<title>Neo SwitchField</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<script src="../../../../src/MicroLoader.mjs" type="module"></script>
|
|
10
|
+
</body>
|
|
11
|
+
</html>
|
package/package.json
CHANGED
|
@@ -3,14 +3,9 @@
|
|
|
3
3
|
z-index : 10;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.neo-docs-classdetails-headerpanel {
|
|
7
|
-
border-right: v(docs-classdetails-headerpanel-border-right) !important;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
6
|
.neo-docs-classdetails-headercomponent {
|
|
11
7
|
background-color: v(docs-classdetails-headercomponent-background-color);
|
|
12
8
|
overflow-y : auto;
|
|
13
|
-
max-height : 250px;
|
|
14
9
|
padding : 15px;
|
|
15
10
|
|
|
16
11
|
.neo-docs-header-description {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
.neo-splitter {
|
|
2
2
|
background-color: v(splitter-background-color);
|
|
3
3
|
border : v(splitter-border);
|
|
4
|
-
transition : background-color 0.3s ease-in-out;
|
|
4
|
+
transition : background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
|
|
5
5
|
|
|
6
6
|
&:hover {
|
|
7
7
|
background-color: v(splitter-hover-color);
|
|
8
|
+
border-color : v(splitter-hover-color);
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
&.neo-horizontal {
|
|
@@ -23,5 +24,6 @@
|
|
|
23
24
|
.neo-dragproxy {
|
|
24
25
|
&.neo-splitter {
|
|
25
26
|
background-color: v(splitter-hover-color);
|
|
27
|
+
border-color : v(splitter-hover-color);
|
|
26
28
|
}
|
|
27
29
|
}
|
|
@@ -1,135 +1,105 @@
|
|
|
1
|
-
.switchfield {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
.neo-switchfield {
|
|
2
|
+
@keyframes switch-on-position {
|
|
3
|
+
0% {left: 0; right: 50%}
|
|
4
|
+
25% {left: 0; right: 37.5%}
|
|
5
|
+
100% {left: 50%; right: 0}
|
|
6
6
|
}
|
|
7
|
-
25% {
|
|
8
|
-
left: 0;
|
|
9
|
-
right: 37.5%
|
|
10
|
-
}
|
|
11
|
-
100% {
|
|
12
|
-
left: 50%;
|
|
13
|
-
right: 0
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
7
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
25% {
|
|
23
|
-
left: 37.5%;
|
|
24
|
-
right: 0
|
|
25
|
-
}
|
|
26
|
-
100% {
|
|
27
|
-
left: 0%;
|
|
28
|
-
right: 50%
|
|
8
|
+
@keyframes switch-off-position {
|
|
9
|
+
0% {left: 50%; right: 0}
|
|
10
|
+
25% {left: 37.5%; right: 0}
|
|
11
|
+
100% {left: 0; right: 50%}
|
|
29
12
|
}
|
|
30
|
-
}
|
|
31
13
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
14
|
+
@keyframes switch-on-transform {
|
|
15
|
+
0% {transform: translate(0) scaleX(1)}
|
|
16
|
+
25% {transform: translate(0) scaleX(1.33)}
|
|
17
|
+
100% {transform: translate(100%) scaleX(1)}
|
|
35
18
|
}
|
|
36
|
-
25% {
|
|
37
|
-
transform: translate(0) scaleX(1.33)
|
|
38
|
-
}
|
|
39
|
-
100% {
|
|
40
|
-
transform: translate(100%) scaleX(1)
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
19
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
25% {
|
|
49
|
-
transform: translate(100%) scaleX(1.33)
|
|
50
|
-
}
|
|
51
|
-
100% {
|
|
52
|
-
transform: translate(0) scaleX(1)
|
|
20
|
+
@keyframes switch-off-transform {
|
|
21
|
+
0% {transform: translate(100%) scaleX(1)}
|
|
22
|
+
25% {transform: translate(100%) scaleX(1.33)}
|
|
23
|
+
100% {transform: translate(0) scaleX(1)}
|
|
53
24
|
}
|
|
54
|
-
}
|
|
55
25
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
26
|
+
input[type="checkbox"] {
|
|
27
|
+
background-clip : padding-box;
|
|
28
|
+
background-color: v(switchfield-background-color);
|
|
29
|
+
border-color : transparent;
|
|
30
|
+
border-radius : 1.25em;
|
|
31
|
+
color : v(switchfield-inactive-color);
|
|
32
|
+
display : inline-block;
|
|
33
|
+
font-size : 1.5em;
|
|
34
|
+
height : 1.5em;
|
|
35
|
+
position : relative;
|
|
36
|
+
transition : transform 0.25s linear 0.25s;
|
|
37
|
+
vertical-align : middle;
|
|
38
|
+
width : 3em;
|
|
64
39
|
|
|
65
|
-
|
|
66
|
-
|
|
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;
|
|
40
|
+
-webkit-appearance : none;
|
|
41
|
+
-webkit-tap-highlight-color: transparent;
|
|
72
42
|
|
|
73
43
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
44
|
+
&::before {
|
|
45
|
+
background-clip : padding-box;
|
|
46
|
+
background-color: v(switchfield-thumb-color);
|
|
47
|
+
border : 0.125em solid transparent;
|
|
48
|
+
border-radius : 100%;
|
|
49
|
+
bottom : 0;
|
|
50
|
+
content : "";
|
|
51
|
+
left : 0;
|
|
52
|
+
position : absolute;
|
|
53
|
+
right : 50%;
|
|
54
|
+
top : 0;
|
|
55
|
+
transform-origin: right center;
|
|
56
|
+
z-index : 2;
|
|
57
|
+
}
|
|
88
58
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
59
|
+
&::after {
|
|
60
|
+
content : "\f00c\f00d";
|
|
61
|
+
font-family : "Font Awesome 6 Free";
|
|
62
|
+
font-size : 1.25rem;
|
|
63
|
+
font-weight : 900;
|
|
64
|
+
left : 0.5em;
|
|
65
|
+
letter-spacing: 1em;
|
|
66
|
+
line-height : 1.5;
|
|
67
|
+
position : absolute;
|
|
68
|
+
top : 0.15em;
|
|
69
|
+
z-index : 1;
|
|
70
|
+
}
|
|
101
71
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
72
|
+
&:focus {
|
|
73
|
+
background-color: v(switchfield-background-color);
|
|
74
|
+
border-color : transparent;
|
|
75
|
+
color : v(switchfield-active-color);
|
|
76
|
+
outline : none;
|
|
77
|
+
}
|
|
108
78
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
79
|
+
&:checked {
|
|
80
|
+
background-color: v(switchfield-checked);
|
|
81
|
+
border-color : transparent;
|
|
82
|
+
color : v(switchfield-inactive-color);
|
|
113
83
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
84
|
+
&::before {
|
|
85
|
+
transform-origin: left center;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
117
88
|
}
|
|
118
|
-
}
|
|
119
89
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
90
|
+
input[type="checkbox"]::before {
|
|
91
|
+
animation: switch-off-position 0.25s ease-out forwards;
|
|
92
|
+
}
|
|
123
93
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
94
|
+
input[type="checkbox"]:checked::before {
|
|
95
|
+
animation: switch-on-position 0.25s ease-out forwards;
|
|
96
|
+
}
|
|
127
97
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
98
|
+
input[type="checkbox"]::before {
|
|
99
|
+
animation: switch-off-transform 0.25s ease-out forwards;
|
|
100
|
+
}
|
|
131
101
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
102
|
+
input[type="checkbox"]:checked::before {
|
|
103
|
+
animation: switch-on-transform 0.25s ease-out forwards;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
|
-
'switchfield-
|
|
2
|
+
'switchfield-active-color' : white,
|
|
3
3
|
'switchfield-background-color': darkgrey,
|
|
4
|
-
'switchfield-
|
|
5
|
-
'switchfield-
|
|
6
|
-
'switchfield-thumb-color': white
|
|
4
|
+
'switchfield-checked' : green,
|
|
5
|
+
'switchfield-inactive-color' : grey,
|
|
6
|
+
'switchfield-thumb-color' : white
|
|
7
7
|
));
|
|
8
8
|
|
|
9
9
|
@if $useCssVars == true {
|
|
10
10
|
:root .neo-theme-dark { // .neo-switchfield
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
11
|
+
--switchfield-active-color : #{neo(switchfield-active-color)};
|
|
12
|
+
--switchfield-background-color: #{neo(switchfield-background-color)};
|
|
13
|
+
--switchfield-checked : #{neo(switchfield-checked)};
|
|
14
|
+
--switchfield-inactive-color : #{neo(switchfield-inactive-color)};
|
|
15
|
+
--switchfield-thumb-color : #{neo(switchfield-thumb-color)};
|
|
16
16
|
}
|
|
17
|
-
}
|
|
17
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
$neoMap: map-merge($neoMap, (
|
|
2
|
-
'switchfield-
|
|
2
|
+
'switchfield-active-color' : white,
|
|
3
3
|
'switchfield-background-color': darkgrey,
|
|
4
|
-
'switchfield-
|
|
5
|
-
'switchfield-
|
|
6
|
-
'switchfield-thumb-color': white
|
|
4
|
+
'switchfield-checked' : green,
|
|
5
|
+
'switchfield-inactive-color' : grey,
|
|
6
|
+
'switchfield-thumb-color' : white
|
|
7
7
|
));
|
|
8
8
|
|
|
9
9
|
@if $useCssVars == true {
|
|
10
10
|
:root .neo-theme-light { // .neo-switchfield
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
11
|
+
--switchfield-active-color : #{neo(switchfield-active-color)};
|
|
12
|
+
--switchfield-background-color: #{neo(switchfield-background-color)};
|
|
13
|
+
--switchfield-checked : #{neo(switchfield-checked)};
|
|
14
|
+
--switchfield-inactive-color : #{neo(switchfield-inactive-color)};
|
|
15
|
+
--switchfield-thumb-color : #{neo(switchfield-thumb-color)};
|
|
16
16
|
}
|
|
17
|
-
}
|
|
17
|
+
}
|
package/src/DefaultConfig.mjs
CHANGED
|
@@ -245,12 +245,12 @@ const DefaultConfig = {
|
|
|
245
245
|
useVdomWorker: true,
|
|
246
246
|
/**
|
|
247
247
|
* buildScripts/injectPackageVersion.mjs will update this value
|
|
248
|
-
* @default '5.16.
|
|
248
|
+
* @default '5.16.1'
|
|
249
249
|
* @memberOf! module:Neo
|
|
250
250
|
* @name config.version
|
|
251
251
|
* @type String
|
|
252
252
|
*/
|
|
253
|
-
version: '5.16.
|
|
253
|
+
version: '5.16.1'
|
|
254
254
|
};
|
|
255
255
|
|
|
256
256
|
Object.assign(DefaultConfig, {
|
|
@@ -77,7 +77,7 @@ class Splitter extends Component {
|
|
|
77
77
|
me.addDomListeners([
|
|
78
78
|
{'drag:end' : me.onDragEnd, scope: me},
|
|
79
79
|
{'drag:start': me.onDragStart, scope: me}
|
|
80
|
-
])
|
|
80
|
+
])
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
/**
|
|
@@ -87,20 +87,24 @@ class Splitter extends Component {
|
|
|
87
87
|
* @protected
|
|
88
88
|
*/
|
|
89
89
|
afterSetDirection(value, oldValue) {
|
|
90
|
-
let me
|
|
91
|
-
cls
|
|
90
|
+
let me = this,
|
|
91
|
+
cls = me.cls,
|
|
92
|
+
height = value === 'vertical' ? null : me.size,
|
|
93
|
+
width = value !== 'vertical' ? null : me.size;
|
|
92
94
|
|
|
93
95
|
NeoArray.add(cls, `neo-${value}`);
|
|
94
96
|
|
|
95
97
|
if (oldValue) {
|
|
96
|
-
NeoArray.remove(cls, `neo-${oldValue}`)
|
|
98
|
+
NeoArray.remove(cls, `neo-${oldValue}`)
|
|
97
99
|
}
|
|
98
100
|
|
|
99
101
|
me.set({
|
|
100
102
|
cls,
|
|
101
|
-
height
|
|
102
|
-
|
|
103
|
-
|
|
103
|
+
height,
|
|
104
|
+
minHeight: height,
|
|
105
|
+
minWidth : width,
|
|
106
|
+
width
|
|
107
|
+
})
|
|
104
108
|
}
|
|
105
109
|
|
|
106
110
|
/**
|
|
@@ -110,7 +114,7 @@ class Splitter extends Component {
|
|
|
110
114
|
* @protected
|
|
111
115
|
*/
|
|
112
116
|
afterSetSize(value, oldValue) {
|
|
113
|
-
this[this.direction === 'vertical' ? 'width' : 'height'] = value
|
|
117
|
+
this[this.direction === 'vertical' ? 'width' : 'height'] = value
|
|
114
118
|
}
|
|
115
119
|
|
|
116
120
|
/**
|
|
@@ -121,7 +125,7 @@ class Splitter extends Component {
|
|
|
121
125
|
* @returns {String}
|
|
122
126
|
*/
|
|
123
127
|
beforeSetDirection(value, oldValue) {
|
|
124
|
-
return this.beforeSetEnumValue(value, oldValue, 'direction')
|
|
128
|
+
return this.beforeSetEnumValue(value, oldValue, 'direction')
|
|
125
129
|
}
|
|
126
130
|
|
|
127
131
|
/**
|
|
@@ -132,7 +136,7 @@ class Splitter extends Component {
|
|
|
132
136
|
* @returns {String}
|
|
133
137
|
*/
|
|
134
138
|
beforeSetResizeTarget(value, oldValue) {
|
|
135
|
-
return this.beforeSetEnumValue(value, oldValue, 'resizeTarget')
|
|
139
|
+
return this.beforeSetEnumValue(value, oldValue, 'resizeTarget')
|
|
136
140
|
}
|
|
137
141
|
|
|
138
142
|
/**
|
|
@@ -163,24 +167,25 @@ class Splitter extends Component {
|
|
|
163
167
|
style.flex = 'none';
|
|
164
168
|
|
|
165
169
|
if (me.direction === 'vertical') {
|
|
166
|
-
newSize = data.clientX - data.offsetX - size;
|
|
170
|
+
newSize = data.clientX - data.offsetX - size - parentRect.left;
|
|
167
171
|
|
|
168
172
|
if (resizeNext) {
|
|
169
|
-
|
|
173
|
+
console.log(parentRect);
|
|
174
|
+
newSize = parentRect.width - newSize - 2 * size
|
|
170
175
|
} else {
|
|
171
|
-
newSize += size
|
|
176
|
+
newSize += size
|
|
172
177
|
}
|
|
173
178
|
|
|
174
179
|
newSize = Math.min(Math.max(newSize, 0), parentRect.width - size);
|
|
175
180
|
|
|
176
|
-
style.width = `${newSize}px
|
|
181
|
+
style.width = `${newSize}px`
|
|
177
182
|
} else {
|
|
178
|
-
newSize = data.clientY - data.offsetY - size;
|
|
183
|
+
newSize = data.clientY - data.offsetY - size - parentRect.top;
|
|
179
184
|
|
|
180
185
|
if (resizeNext) {
|
|
181
|
-
newSize = parentRect.height - newSize
|
|
186
|
+
newSize = parentRect.height - newSize - 2 * size
|
|
182
187
|
} else {
|
|
183
|
-
newSize += size
|
|
188
|
+
newSize += size
|
|
184
189
|
}
|
|
185
190
|
|
|
186
191
|
newSize = Math.min(Math.max(newSize, 0), parentRect.height - size);
|
|
@@ -188,8 +193,8 @@ class Splitter extends Component {
|
|
|
188
193
|
style.height = `${newSize}px`;
|
|
189
194
|
}
|
|
190
195
|
|
|
191
|
-
sibling.style = style
|
|
192
|
-
})
|
|
196
|
+
sibling.style = style
|
|
197
|
+
})
|
|
193
198
|
}
|
|
194
199
|
|
|
195
200
|
/**
|
|
@@ -214,20 +219,20 @@ class Splitter extends Component {
|
|
|
214
219
|
owner : me,
|
|
215
220
|
useProxyWrapper : false,
|
|
216
221
|
...me.dragZoneConfig
|
|
217
|
-
})
|
|
222
|
+
})
|
|
218
223
|
} else {
|
|
219
224
|
me.dragZone.set({
|
|
220
225
|
bodyCursorStyle: vertical ? 'ew-resize !important' : 'ns-resize !important',
|
|
221
226
|
moveHorizontal : vertical,
|
|
222
227
|
moveVertical : !vertical
|
|
223
|
-
})
|
|
228
|
+
})
|
|
224
229
|
}
|
|
225
230
|
|
|
226
231
|
me.dragZone.dragStart(data);
|
|
227
232
|
|
|
228
233
|
style.opacity = 0.5;
|
|
229
234
|
|
|
230
|
-
me.style = style
|
|
235
|
+
me.style = style
|
|
231
236
|
}
|
|
232
237
|
}
|
|
233
238
|
|
|
@@ -17,24 +17,24 @@ class Switch extends CheckBox {
|
|
|
17
17
|
*/
|
|
18
18
|
ntype: 'switchfield',
|
|
19
19
|
/**
|
|
20
|
-
* @member {String[]} baseCls=['neo-
|
|
20
|
+
* @member {String[]} baseCls=['neo-switchfield']
|
|
21
21
|
*/
|
|
22
22
|
baseCls: ['neo-switchfield'],
|
|
23
23
|
/**
|
|
24
24
|
* @member {Object} _vdom
|
|
25
25
|
*/
|
|
26
26
|
_vdom:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
]}
|
|
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']}
|
|
37
36
|
]}
|
|
37
|
+
]}
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|