neo.mjs 8.18.1 → 8.19.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/apps/portal/index.html +1 -1
- package/apps/portal/view/home/FooterContainer.mjs +1 -1
- package/examples/ConfigurationViewport.mjs +1 -3
- package/examples/ServiceWorker.mjs +2 -2
- package/examples/grid/bigData/ControlsContainer.mjs +176 -0
- package/examples/grid/bigData/GridContainer.mjs +8 -1
- package/examples/grid/bigData/MainContainer.mjs +11 -94
- package/examples/grid/bigData/MainStore.mjs +2 -2
- package/examples/grid/bigData/neo-config.json +1 -1
- package/package.json +1 -1
- package/resources/scss/src/examples/grid/bigData/ControlsContainer.scss +38 -0
- package/resources/scss/src/examples/grid/bigData/MainContainer.scss +5 -3
- package/src/DefaultConfig.mjs +2 -2
- package/src/draggable/toolbar/DragZone.mjs +1 -1
- package/src/form/field/ComboBox.mjs +1 -1
package/apps/ServiceWorker.mjs
CHANGED
package/apps/portal/index.html
CHANGED
|
@@ -190,7 +190,7 @@ class ConfigurationViewport extends Viewport {
|
|
|
190
190
|
let me = this,
|
|
191
191
|
button = data.component,
|
|
192
192
|
countThemes = themes.length,
|
|
193
|
-
futureIndex, newTheme,
|
|
193
|
+
futureIndex, newTheme, themeIndex;
|
|
194
194
|
|
|
195
195
|
themes.forEach((theme, index) => {
|
|
196
196
|
if (button.text === theme.label) {
|
|
@@ -200,8 +200,6 @@ class ConfigurationViewport extends Viewport {
|
|
|
200
200
|
});
|
|
201
201
|
|
|
202
202
|
futureIndex = (themeIndex + countThemes +1) % countThemes;
|
|
203
|
-
oldIndex = (themeIndex + countThemes -1) % countThemes;
|
|
204
|
-
oldTheme = themes[oldIndex].name;
|
|
205
203
|
|
|
206
204
|
button.text = themes[futureIndex].label;
|
|
207
205
|
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import ComboBox from '../../../src/form/field/ComboBox.mjs';
|
|
2
|
+
import Container from '../../../src/container/Base.mjs';
|
|
3
|
+
import Radio from '../../../src/form/field/Radio.mjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @class Neo.examples.grid.bigData.ControlsContainer
|
|
7
|
+
* @extends Neo.container.Base
|
|
8
|
+
*/
|
|
9
|
+
class ControlsContainer extends Container {
|
|
10
|
+
static config = {
|
|
11
|
+
/**
|
|
12
|
+
* @member {String} className='Neo.examples.grid.bigData.ControlsContainer'
|
|
13
|
+
* @protected
|
|
14
|
+
*/
|
|
15
|
+
className: 'Neo.examples.grid.bigData.ControlsContainer',
|
|
16
|
+
/**
|
|
17
|
+
* @member {String[]} cls=['neo-examples-bigdata-controls-container']
|
|
18
|
+
*/
|
|
19
|
+
cls: ['neo-examples-bigdata-controls-container'],
|
|
20
|
+
/**
|
|
21
|
+
* @member {Object[]} items
|
|
22
|
+
*/
|
|
23
|
+
items: [{
|
|
24
|
+
ntype : 'button',
|
|
25
|
+
cls : ['sections-container-button'],
|
|
26
|
+
handler: 'up.onControlsToggleButtonClick',
|
|
27
|
+
iconCls: 'fas fa-bars'
|
|
28
|
+
}, {
|
|
29
|
+
module: Container,
|
|
30
|
+
|
|
31
|
+
itemDefaults: {
|
|
32
|
+
module : ComboBox,
|
|
33
|
+
clearable : false,
|
|
34
|
+
displayField: 'id',
|
|
35
|
+
editable : false
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
items: [{
|
|
39
|
+
ntype: 'component',
|
|
40
|
+
html : '<a class="github-button" href="https://github.com/neomjs/neo" data-size="large" data-show-count="true" aria-label="Star neomjs/neo on GitHub">Star</a>',
|
|
41
|
+
style: {marginLeft: 'auto'}
|
|
42
|
+
}, {
|
|
43
|
+
labelText : 'Amount Rows',
|
|
44
|
+
labelWidth: 120,
|
|
45
|
+
listeners : {change: 'up.onAmountRowsChange'},
|
|
46
|
+
store : ['1000', '5000', '10000', '20000', '50000'],
|
|
47
|
+
style : {marginTop: '2em'},
|
|
48
|
+
value : '1000',
|
|
49
|
+
width : 200
|
|
50
|
+
}, {
|
|
51
|
+
labelText : 'Amount Columns',
|
|
52
|
+
labelWidth: 145,
|
|
53
|
+
listeners : {change: 'up.onAmountColumnsChange'},
|
|
54
|
+
store : ['10', '25', '50', '75', '100'],
|
|
55
|
+
value : '50',
|
|
56
|
+
width : 200
|
|
57
|
+
}, {
|
|
58
|
+
labelText : 'Buffer Rows',
|
|
59
|
+
labelWidth: 145,
|
|
60
|
+
listeners : {change: 'up.onBufferRowRangeChange'},
|
|
61
|
+
store : ['0', '3', '5', '10', '25', '50'],
|
|
62
|
+
value : '5',
|
|
63
|
+
width : 200
|
|
64
|
+
}, {
|
|
65
|
+
labelText : 'Buffer Columns',
|
|
66
|
+
labelWidth: 145,
|
|
67
|
+
listeners : {change: 'up.onBufferColumnRangeChange'},
|
|
68
|
+
store : ['0', '3', '5', '10', '20'],
|
|
69
|
+
value : '3',
|
|
70
|
+
width : 200
|
|
71
|
+
}, {
|
|
72
|
+
module : Radio,
|
|
73
|
+
checked : true,
|
|
74
|
+
labelText : 'Theme',
|
|
75
|
+
labelWidth : 70,
|
|
76
|
+
listeners : {change: 'up.onThemeRadioChange'},
|
|
77
|
+
name : 'theme',
|
|
78
|
+
style : {marginTop: '2em'},
|
|
79
|
+
value : 'neo-theme-dark',
|
|
80
|
+
valueLabelText: 'Dark'
|
|
81
|
+
}, {
|
|
82
|
+
module : Radio,
|
|
83
|
+
labelText : '',
|
|
84
|
+
labelWidth : 70,
|
|
85
|
+
listeners : {change: 'up.onThemeRadioChange'},
|
|
86
|
+
name : 'theme',
|
|
87
|
+
style : {marginTop: '.3em'},
|
|
88
|
+
value : 'neo-theme-light',
|
|
89
|
+
valueLabelText: 'Light'
|
|
90
|
+
}]
|
|
91
|
+
}],
|
|
92
|
+
/**
|
|
93
|
+
* @member {Object} layout={ntype:'vbox'}
|
|
94
|
+
*/
|
|
95
|
+
layout: {ntype: 'vbox'},
|
|
96
|
+
/**
|
|
97
|
+
* @member {String} tag='aside'
|
|
98
|
+
*/
|
|
99
|
+
tag: 'aside'
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
get grid() {
|
|
103
|
+
return this.parent.getItem('grid')
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
*
|
|
108
|
+
*/
|
|
109
|
+
onConstructed() {
|
|
110
|
+
super.onConstructed();
|
|
111
|
+
|
|
112
|
+
Neo.main.DomAccess.addScript({
|
|
113
|
+
async : true,
|
|
114
|
+
defer : true,
|
|
115
|
+
src : 'https://buttons.github.io/buttons.js',
|
|
116
|
+
windowId: this.windowId
|
|
117
|
+
})
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* @param {Object} data
|
|
122
|
+
*/
|
|
123
|
+
onAmountColumnsChange(data) {
|
|
124
|
+
if (data.oldValue) {
|
|
125
|
+
this.grid.isLoading = 'Is Loading';
|
|
126
|
+
this.grid.amountColumns = parseInt(data.value.id)
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* @param {Object} data
|
|
132
|
+
*/
|
|
133
|
+
onAmountRowsChange(data) {
|
|
134
|
+
if (data.oldValue) {
|
|
135
|
+
this.grid.isLoading = 'Is Loading';
|
|
136
|
+
this.grid.store.amountRows = parseInt(data.value.id)
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* @param {Object} data
|
|
142
|
+
*/
|
|
143
|
+
onBufferColumnRangeChange(data) {
|
|
144
|
+
if (data.oldValue) {
|
|
145
|
+
this.grid.view.bufferColumnRange = parseInt(data.value.id)
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* @param {Object} data
|
|
151
|
+
*/
|
|
152
|
+
onBufferRowRangeChange(data) {
|
|
153
|
+
if (data.oldValue) {
|
|
154
|
+
this.grid.view.bufferRowRange = parseInt(data.value.id)
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* @param {Object} data
|
|
160
|
+
*/
|
|
161
|
+
async onControlsToggleButtonClick(data) {
|
|
162
|
+
let me = this,
|
|
163
|
+
button = data.component;
|
|
164
|
+
|
|
165
|
+
// Custom flag to track the state
|
|
166
|
+
button.expanded = !button.expanded;
|
|
167
|
+
|
|
168
|
+
me.toggleCls('neo-expanded');
|
|
169
|
+
|
|
170
|
+
await me.timeout(button.expanded ? 250 : 0);
|
|
171
|
+
|
|
172
|
+
me.grid.toggleCls('neo-extend-margin-right');
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
export default Neo.setupClass(ControlsContainer);
|
|
@@ -28,7 +28,14 @@ class GridContainer extends BaseGridContainer {
|
|
|
28
28
|
/**
|
|
29
29
|
* @member {Object[]} store=MainStore
|
|
30
30
|
*/
|
|
31
|
-
store: MainStore
|
|
31
|
+
store: MainStore,
|
|
32
|
+
/**
|
|
33
|
+
* @member {Object} viewConfig
|
|
34
|
+
*/
|
|
35
|
+
viewConfig: {
|
|
36
|
+
bufferColumnRange: 3,
|
|
37
|
+
bufferRowRange : 5
|
|
38
|
+
}
|
|
32
39
|
}
|
|
33
40
|
|
|
34
41
|
/**
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import GridContainer
|
|
3
|
-
import
|
|
4
|
-
import Viewport from '../../../src/container/Viewport.mjs';
|
|
1
|
+
import ControlsContainer from './ControlsContainer.mjs';
|
|
2
|
+
import GridContainer from './GridContainer.mjs';
|
|
3
|
+
import Viewport from '../../../src/container/Viewport.mjs';
|
|
5
4
|
|
|
6
5
|
/**
|
|
7
6
|
* @class Neo.examples.grid.bigData.MainContainer
|
|
@@ -22,104 +21,22 @@ class MainContainer extends Viewport {
|
|
|
22
21
|
* @member {Object[]} items
|
|
23
22
|
*/
|
|
24
23
|
items: [{
|
|
25
|
-
module:
|
|
26
|
-
|
|
27
|
-
layout: {ntype: 'hbox', align: 'stretch', wrap: 'wrap'},
|
|
28
|
-
style : {marginBottom: '1em', padding: 0},
|
|
29
|
-
|
|
30
|
-
itemDefaults: {
|
|
31
|
-
module : ComboBox,
|
|
32
|
-
clearable : false,
|
|
33
|
-
displayField: 'id',
|
|
34
|
-
editable : false
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
items: [{
|
|
38
|
-
labelText : 'Amount Rows',
|
|
39
|
-
labelWidth: 110,
|
|
40
|
-
listeners : {change: 'up.onAmountRowsChange'},
|
|
41
|
-
store : ['1000', '5000', '10000', '20000', '50000'],
|
|
42
|
-
value : '10000',
|
|
43
|
-
width : 200
|
|
44
|
-
}, {
|
|
45
|
-
labelText : 'Amount Columns',
|
|
46
|
-
labelWidth: 135,
|
|
47
|
-
listeners : {change: 'up.onAmountColumnsChange'},
|
|
48
|
-
store : ['10', '25', '50', '75', '100'],
|
|
49
|
-
value : '50',
|
|
50
|
-
width : 200
|
|
51
|
-
}, {
|
|
52
|
-
labelText : 'Buffer Rows',
|
|
53
|
-
labelWidth: 95,
|
|
54
|
-
listeners : {change: 'up.ontBufferRowRangeChange'},
|
|
55
|
-
store : ['0', '3', '5', '10', '25', '50'],
|
|
56
|
-
value : '5',
|
|
57
|
-
width : 160
|
|
58
|
-
}, {
|
|
59
|
-
labelText : 'Buffer Columns',
|
|
60
|
-
labelWidth: 120,
|
|
61
|
-
listeners : {change: 'up.ontBufferColumnRangeChange'},
|
|
62
|
-
store : ['0', '3', '5', '10', '20'],
|
|
63
|
-
value : '0',
|
|
64
|
-
width : 185
|
|
65
|
-
}]
|
|
24
|
+
module : GridContainer,
|
|
25
|
+
reference: 'grid'
|
|
66
26
|
}, {
|
|
67
|
-
module
|
|
68
|
-
reference : 'grid',
|
|
69
|
-
viewConfig: {
|
|
70
|
-
bufferRowRange: 5
|
|
71
|
-
}
|
|
27
|
+
module: ControlsContainer
|
|
72
28
|
}],
|
|
73
29
|
/**
|
|
74
|
-
* @member {Object} layout={ntype:'
|
|
30
|
+
* @member {Object} layout={ntype:'hbox',align:'stretch'}
|
|
75
31
|
*/
|
|
76
|
-
layout: {ntype: '
|
|
77
|
-
/**
|
|
78
|
-
* @member {Object} style={padding:'20px'}
|
|
79
|
-
*/
|
|
80
|
-
style: {padding: '20px'}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
get grid() {
|
|
84
|
-
return this.getItem('grid')
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
/**
|
|
88
|
-
* @param {Object} data
|
|
89
|
-
*/
|
|
90
|
-
onAmountColumnsChange(data) {
|
|
91
|
-
if (data.oldValue) {
|
|
92
|
-
this.grid.isLoading = 'Is Loading';
|
|
93
|
-
this.grid.amountColumns = parseInt(data.value.id)
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* @param {Object} data
|
|
99
|
-
*/
|
|
100
|
-
onAmountRowsChange(data) {
|
|
101
|
-
if (data.oldValue) {
|
|
102
|
-
this.grid.isLoading = 'Is Loading';
|
|
103
|
-
this.grid.store.amountRows = parseInt(data.value.id)
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/**
|
|
108
|
-
* @param {Object} data
|
|
109
|
-
*/
|
|
110
|
-
ontBufferColumnRangeChange(data) {
|
|
111
|
-
if (data.oldValue) {
|
|
112
|
-
this.grid.view.bufferColumnRange = parseInt(data.value.id)
|
|
113
|
-
}
|
|
32
|
+
layout: {ntype: 'hbox', align: 'stretch'}
|
|
114
33
|
}
|
|
115
34
|
|
|
116
35
|
/**
|
|
117
|
-
* @param {Object}
|
|
36
|
+
* @param {Object} opts
|
|
118
37
|
*/
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
this.grid.view.bufferRowRange = parseInt(data.value.id)
|
|
122
|
-
}
|
|
38
|
+
onThemeRadioChange({value}) {
|
|
39
|
+
this.theme = value
|
|
123
40
|
}
|
|
124
41
|
}
|
|
125
42
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.neo-examples-bigdata-controls-container {
|
|
2
|
+
border : none; // reset the default 1px
|
|
3
|
+
bottom : .5em;
|
|
4
|
+
box-shadow : 0 5px 10px rgba(75,75,75,.3);
|
|
5
|
+
display : block;
|
|
6
|
+
flex-shrink : 0;
|
|
7
|
+
min-width : 235px;
|
|
8
|
+
overflow : visible;
|
|
9
|
+
padding : .5em 1em;
|
|
10
|
+
position : absolute;
|
|
11
|
+
right : -235px;
|
|
12
|
+
top : .5em;
|
|
13
|
+
transition : right 250ms ease-out;
|
|
14
|
+
width : 235px;
|
|
15
|
+
z-index : 100;
|
|
16
|
+
|
|
17
|
+
&.neo-expanded {
|
|
18
|
+
right: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.sections-container-button {
|
|
22
|
+
//background-color: #fff;
|
|
23
|
+
border-radius : 8px;
|
|
24
|
+
box-shadow : 0 5px 10px rgba(75,75,75,.3);
|
|
25
|
+
display : flex;
|
|
26
|
+
height : 35px;
|
|
27
|
+
min-width : 35px;
|
|
28
|
+
position : absolute;
|
|
29
|
+
left : -53px;
|
|
30
|
+
top : .2em;
|
|
31
|
+
width : 35px;
|
|
32
|
+
|
|
33
|
+
.neo-button-glyph {
|
|
34
|
+
// color : #000; // required for mobile
|
|
35
|
+
font-size: 13px;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
package/src/DefaultConfig.mjs
CHANGED
|
@@ -262,12 +262,12 @@ const DefaultConfig = {
|
|
|
262
262
|
useVdomWorker: true,
|
|
263
263
|
/**
|
|
264
264
|
* buildScripts/injectPackageVersion.mjs will update this value
|
|
265
|
-
* @default '8.
|
|
265
|
+
* @default '8.19.0'
|
|
266
266
|
* @memberOf! module:Neo
|
|
267
267
|
* @name config.version
|
|
268
268
|
* @type String
|
|
269
269
|
*/
|
|
270
|
-
version: '8.
|
|
270
|
+
version: '8.19.0'
|
|
271
271
|
};
|
|
272
272
|
|
|
273
273
|
Object.assign(DefaultConfig, {
|
|
@@ -120,7 +120,7 @@ class DragZone extends BaseDragZone {
|
|
|
120
120
|
* @param {String} data.id
|
|
121
121
|
* @param {Neo.component.Base[]} data.items
|
|
122
122
|
*/
|
|
123
|
-
onItemsCreated(data) {
|
|
123
|
+
onItemsCreated(data) {
|
|
124
124
|
this.adjustToolbarItemCls(true)
|
|
125
125
|
}
|
|
126
126
|
}
|