neo.mjs 7.9.1 → 7.11.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.
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='7.9.1'
23
+ * @member {String} version='7.11.0'
24
24
  */
25
- version: '7.9.1'
25
+ version: '7.11.0'
26
26
  }
27
27
 
28
28
  /**
@@ -1,85 +1,92 @@
1
1
  [{
2
- "id" : 22,
2
+ "id" : 23,
3
3
  "image" : "devmode/sharedcovid.png",
4
4
  "name" : "Multi Window Covid App",
5
5
  "sharedWorkers": true,
6
6
  "sourceUrl" : "apps/sharedcovid",
7
7
  "url" : "apps/sharedcovid/index.html#mainview=table"
8
8
  }, {
9
- "id" : 21,
9
+ "id" : 22,
10
10
  "image" : "devmode/calendar-preview.png",
11
11
  "name" : "Calendar",
12
12
  "sourceUrl": "src/calendar",
13
13
  "url" : "examples/calendar/basic/index.html"
14
14
  }, {
15
- "id" : 20,
15
+ "id" : 21,
16
16
  "image" : "devmode/helix.png",
17
17
  "name" : "component.Helix",
18
18
  "sourceUrl": "examples/component/helix",
19
19
  "url" : "examples/component/helix/index.html"
20
20
  }, {
21
- "id" : 19,
22
- "image" : "devmode/coronaGallery.png",
23
- "name" : "COVID-19 Gallery",
24
- "sourceUrl": "examples/component/coronaGallery",
25
- "url" : "examples/component/coronaGallery/index.html"
21
+ "id" : 20,
22
+ "image" : "devmode/mwCoronaGallery.png",
23
+ "name" : "Multi Window Covid Gallery",
24
+ "sharedWorkers": true,
25
+ "sourceUrl" : "examples/component/multiWindowCoronaGallery",
26
+ "url" : "examples/component/multiWindowCoronaGallery/index.html"
26
27
  }, {
27
- "id" : 18,
28
+ "id" : 19,
28
29
  "image" : "devmode/offscreenCanvas.png",
29
30
  "name" : "OffscreenCanvas",
30
31
  "sourceUrl": "https://github.com/neomjs/offscreen-canvas/",
31
32
  "url" : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/apps/myapp/index.html"
32
33
  }, {
33
- "id" : 17,
34
+ "id" : 18,
34
35
  "image" : "devmode/sharedOffscreenCanvas.png",
35
36
  "name" : "Multi-Window OffscreenCanvas",
36
37
  "sourceUrl" : "https://github.com/neomjs/shared-offscreen",
37
38
  "sharedWorkers": true,
38
39
  "url" : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/apps/mainapp/index.html"
39
40
  }, {
40
- "id" : 16,
41
+ "id" : 17,
41
42
  "image" : "devmode/multi_window_dd.png",
42
43
  "name" : "Multi-Window Drag&Drop",
43
44
  "sharedWorkers": true,
44
45
  "sourceUrl" : "apps/shareddialog",
45
46
  "url" : "apps/shareddialog/index.html"
46
47
  }, {
47
- "id" : 15,
48
+ "id" : 16,
48
49
  "image" : "devmode/tabContainer.png",
49
50
  "name" : "tab.Container",
50
51
  "sourceUrl": "examples/tab/container",
51
52
  "url" : "examples/tab/container/index.html"
52
53
  }, {
53
- "id" : 14,
54
+ "id" : 15,
54
55
  "image" : "devmode/model-component-example.png",
55
56
  "name" : "View Models Example",
56
57
  "sourceUrl": "examples/model/advanced",
57
58
  "url" : "examples/model/advanced/index.html"
58
59
  }, {
59
- "id" : 13,
60
+ "id" : 14,
60
61
  "image" : "devmode/dragdrop.png",
61
62
  "name" : "Dialog drag&drop",
62
63
  "sourceUrl": "examples/dialog",
63
64
  "url" : "examples/dialog/"
64
65
  }, {
65
- "id" : 12,
66
+ "id" : 13,
66
67
  "image" : "dist_prod/colorsApp.png",
67
68
  "name" : "Colors Dashboard",
68
69
  "sharedWorkers": true,
69
70
  "sourceUrl" : "apps/colors",
70
71
  "url" : "apps/colors/index.html"
71
72
  }, {
72
- "id" : 11,
73
+ "id" : 12,
73
74
  "image" : "devmode/covidDashboard.png",
74
75
  "name" : "Covid Dashboard",
75
76
  "sourceUrl": "apps/covid",
76
77
  "url" : "apps/covid/index.html"
77
78
  }, {
78
- "id" : 10,
79
+ "id" : 11,
79
80
  "image" : "devmode/coronaHelix.png",
80
81
  "name" : "COVID-19 Helix",
81
82
  "sourceUrl": "examples/component/coronaHelix",
82
83
  "url" : "examples/component/coronaHelix/index.html"
84
+ }, {
85
+ "id" : 10,
86
+ "image" : "devmode/coronaGallery.png",
87
+ "name" : "COVID-19 Gallery",
88
+ "sourceUrl": "examples/component/coronaGallery",
89
+ "url" : "examples/component/coronaGallery/index.html"
83
90
  }, {
84
91
  "id" : 9,
85
92
  "image" : "devmode/gallery.png",
@@ -1,85 +1,92 @@
1
1
  [{
2
- "id" : 21,
2
+ "id" : 22,
3
3
  "image" : "devmode/sharedcovid.png",
4
4
  "name" : "Multi Window Covid App",
5
5
  "sharedWorkers": true,
6
6
  "sourceUrl" : "apps/sharedcovid",
7
7
  "url" : "dist/development/apps/sharedcovid/index.html#mainview=table"
8
8
  }, {
9
- "id" : 20,
9
+ "id" : 21,
10
10
  "image" : "devmode/calendar-preview.png",
11
11
  "name" : "Calendar",
12
12
  "sourceUrl": "src/calendar",
13
13
  "url" : "dist/development/examples/calendar/basic/index.html"
14
14
  }, {
15
- "id" : 19,
15
+ "id" : 20,
16
16
  "image" : "devmode/helix.png",
17
17
  "name" : "component.Helix",
18
18
  "sourceUrl": "examples/component/helix",
19
19
  "url" : "dist/development/examples/component/helix/index.html"
20
20
  }, {
21
- "id" : 18,
22
- "image" : "devmode/coronaGallery.png",
23
- "name" : "COVID-19 Gallery",
24
- "sourceUrl": "examples/component/coronaGallery",
25
- "url" : "dist/development/examples/component/coronaGallery/index.html"
21
+ "id" : 19,
22
+ "image" : "devmode/mwCoronaGallery.png",
23
+ "name" : "Multi Window Covid Gallery",
24
+ "sharedWorkers": true,
25
+ "sourceUrl" : "examples/component/multiWindowCoronaGallery",
26
+ "url" : "dist/development/examples/component/multiWindowCoronaGallery/index.html"
26
27
  }, {
27
- "id" : 17,
28
+ "id" : 18,
28
29
  "image" : "devmode/offscreenCanvas.png",
29
30
  "name" : "OffscreenCanvas",
30
31
  "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
31
32
  "url" : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/development/apps/myapp/index.html"
32
33
  }, {
33
- "id" : 16,
34
+ "id" : 17,
34
35
  "image" : "devmode/sharedOffscreenCanvas.png",
35
36
  "name" : "Multi-Window OffscreenCanvas",
36
37
  "sharedWorkers": true,
37
38
  "sourceUrl" : "https://github.com/neomjs/shared-offscreen",
38
39
  "url" : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/development/apps/mainapp/index.html"
39
40
  }, {
40
- "id" : 15,
41
+ "id" : 16,
41
42
  "image" : "devmode/multi_window_dd.png",
42
43
  "name" : "Multi-Window Drag&Drop",
43
44
  "sharedWorkers": true,
44
45
  "sourceUrl" : "apps/shareddialog",
45
46
  "url" : "dist/development/apps/shareddialog/index.html"
46
47
  }, {
47
- "id" : 14,
48
+ "id" : 15,
48
49
  "image" : "devmode/tabContainer.png",
49
50
  "name" : "tab.Container",
50
51
  "sourceUrl": "examples/tab/container",
51
52
  "url" : "dist/development/examples/tab/container/index.html"
52
53
  }, {
53
- "id" : 13,
54
+ "id" : 14,
54
55
  "image" : "devmode/model-component-example.png",
55
56
  "name" : "View Models Example",
56
57
  "sourceUrl": "examples/model/advanced",
57
58
  "url" : "dist/development/examples/model/advanced/index.html"
58
59
  }, {
59
- "id" : 12,
60
+ "id" : 13,
60
61
  "image" : "devmode/dragdrop.png",
61
62
  "name" : "Dialog drag&drop",
62
63
  "sourceUrl": "examples/dialog",
63
64
  "url" : "dist/development/examples/dialog/"
64
65
  }, {
65
- "id" : 11,
66
+ "id" : 12,
66
67
  "image" : "dist_prod/colorsApp.png",
67
68
  "name" : "Colors Dashboard",
68
69
  "sharedWorkers": true,
69
70
  "sourceUrl" : "apps/colors",
70
71
  "url" : "dist/development/apps/colors/index.html"
71
72
  }, {
72
- "id" : 10,
73
+ "id" : 11,
73
74
  "image" : "devmode/covidDashboard.png",
74
75
  "name" : "Covid Dashboard",
75
76
  "sourceUrl": "apps/covid",
76
77
  "url" : "dist/development/apps/covid/index.html#mainview=table"
77
78
  }, {
78
- "id" : 9,
79
+ "id" : 10,
79
80
  "image" : "devmode/coronaHelix.png",
80
81
  "name" : "COVID-19 Helix",
81
82
  "sourceUrl": "examples/component/coronaHelix",
82
83
  "url" : "dist/development/examples/component/coronaHelix/index.html"
84
+ }, {
85
+ "id" : 9,
86
+ "image" : "devmode/coronaGallery.png",
87
+ "name" : "COVID-19 Gallery",
88
+ "sourceUrl": "examples/component/coronaGallery",
89
+ "url" : "dist/development/examples/component/coronaGallery/index.html"
83
90
  }, {
84
91
  "id" : 8,
85
92
  "image" : "devmode/gallery.png",
@@ -1,85 +1,92 @@
1
1
  [{
2
- "id" : 21,
2
+ "id" : 22,
3
3
  "image" : "devmode/sharedcovid.png",
4
4
  "name" : "Multi Window Covid App",
5
5
  "sharedWorkers": true,
6
6
  "sourceUrl" : "apps/sharedcovid",
7
7
  "url" : "dist/production/apps/sharedcovid/index.html#mainview=table"
8
8
  }, {
9
- "id" : 20,
9
+ "id" : 21,
10
10
  "image" : "devmode/calendar-preview.png",
11
11
  "name" : "Calendar",
12
12
  "sourceUrl": "src/calendar",
13
13
  "url" : "dist/production/examples/calendar/basic/index.html"
14
14
  }, {
15
- "id" : 19,
15
+ "id" : 20,
16
16
  "image" : "devmode/helix.png",
17
17
  "name" : "component.Helix",
18
18
  "sourceUrl": "examples/component/helix",
19
19
  "url" : "dist/production/examples/component/helix/index.html"
20
20
  }, {
21
- "id" : 18,
22
- "image" : "devmode/coronaGallery.png",
23
- "name" : "COVID-19 Gallery",
24
- "sourceUrl": "examples/component/coronaGallery",
25
- "url" : "dist/production/examples/component/coronaGallery/index.html"
21
+ "id" : 19,
22
+ "image" : "devmode/mwCoronaGallery.png",
23
+ "name" : "Multi Window Covid Gallery",
24
+ "sharedWorkers": true,
25
+ "sourceUrl" : "examples/component/multiWindowCoronaGallery",
26
+ "url" : "dist/production/examples/component/multiWindowCoronaGallery/index.html"
26
27
  }, {
27
- "id" : 17,
28
+ "id" : 18,
28
29
  "image" : "devmode/offscreenCanvas.png",
29
30
  "name" : "OffscreenCanvas",
30
31
  "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
31
32
  "url" : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/production/apps/myapp/index.html"
32
33
  }, {
33
- "id" : 16,
34
+ "id" : 17,
34
35
  "image" : "devmode/sharedOffscreenCanvas.png",
35
36
  "name" : "Multi-Window OffscreenCanvas",
36
37
  "sharedWorkers": true,
37
38
  "sourceUrl" : "https://github.com/neomjs/shared-offscreen",
38
39
  "url" : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/production/apps/mainapp/index.html"
39
40
  }, {
40
- "id" : 15,
41
+ "id" : 16,
41
42
  "image" : "devmode/multi_window_dd.png",
42
43
  "name" : "Multi-Window Drag&Drop",
43
44
  "sharedWorkers": true,
44
45
  "sourceUrl" : "apps/shareddialog",
45
46
  "url" : "dist/production/apps/shareddialog/index.html"
46
47
  }, {
47
- "id" : 14,
48
+ "id" : 15,
48
49
  "image" : "devmode/tabContainer.png",
49
50
  "name" : "tab.Container",
50
51
  "sourceUrl": "examples/tab/container",
51
52
  "url" : "dist/production/examples/tab/container/index.html"
52
53
  }, {
53
- "id" : 13,
54
+ "id" : 14,
54
55
  "image" : "devmode/model-component-example.png",
55
56
  "name" : "View Models Example",
56
57
  "sourceUrl": "examples/model/advanced",
57
58
  "url" : "dist/production/examples/model/advanced/index.html"
58
59
  }, {
59
- "id" : 12,
60
+ "id" : 13,
60
61
  "image" : "devmode/dragdrop.png",
61
62
  "name" : "Dialog drag&drop",
62
63
  "sourceUrl": "examples/dialog",
63
64
  "url" : "dist/production/examples/dialog/"
64
65
  }, {
65
- "id" : 11,
66
+ "id" : 12,
66
67
  "image" : "dist_prod/colorsApp.png",
67
68
  "name" : "Colors Dashboard",
68
69
  "sharedWorkers": true,
69
70
  "sourceUrl" : "apps/colors",
70
71
  "url" : "dist/production/apps/colors/index.html"
71
72
  }, {
72
- "id" : 10,
73
+ "id" : 11,
73
74
  "image" : "devmode/covidDashboard.png",
74
75
  "name" : "Covid Dashboard",
75
76
  "sourceUrl": "apps/covid",
76
77
  "url" : "dist/production/apps/covid/index.html#mainview=table"
77
78
  }, {
78
- "id" : 9,
79
+ "id" : 10,
79
80
  "image" : "devmode/coronaHelix.png",
80
81
  "name" : "COVID-19 Helix",
81
82
  "sourceUrl": "examples/component/coronaHelix",
82
83
  "url" : "dist/production/examples/component/coronaHelix/index.html"
84
+ }, {
85
+ "id" : 9,
86
+ "image" : "devmode/coronaGallery.png",
87
+ "name" : "COVID-19 Gallery",
88
+ "sourceUrl": "examples/component/coronaGallery",
89
+ "url" : "dist/production/examples/component/coronaGallery/index.html"
83
90
  }, {
84
91
  "id" : 8,
85
92
  "image" : "devmode/gallery.png",
@@ -111,7 +111,7 @@ class FooterContainer extends Container {
111
111
  }, {
112
112
  module: Component,
113
113
  cls : ['neo-version'],
114
- html : 'v7.9.1'
114
+ html : 'v7.11.0'
115
115
  }]
116
116
  }],
117
117
  /**
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='7.9.1'
23
+ * @member {String} version='7.11.0'
24
24
  */
25
- version: '7.9.1'
25
+ version: '7.11.0'
26
26
  }
27
27
 
28
28
  /**
@@ -37,9 +37,16 @@ class ViewportController extends Controller {
37
37
  basePath = `${basePath + environment}/`
38
38
  }
39
39
 
40
- height -= 62; // popup header in Chrome
40
+ height += 1; // popup header in Chrome => height + 1, top -63
41
41
  left += (width + winData.screenLeft);
42
- top += (winData.outerHeight - winData.innerHeight + winData.screenTop);
42
+ top += (winData.outerHeight - winData.innerHeight + winData.screenTop - 63);
43
+
44
+ // Mounted inside a code.LivePreview, the popup header should be within the content (height-wise)
45
+ // See: https://github.com/neomjs/neo/issues/5991
46
+ if (me.component.up('live-preview')) {
47
+ height -= 63;
48
+ top += 63;
49
+ }
43
50
 
44
51
  /*
45
52
  * For this demo, the url './childapp/' would be sufficient.
@@ -37,9 +37,16 @@ class ViewportController extends Controller {
37
37
  basePath = `${basePath + environment}/`
38
38
  }
39
39
 
40
- height -= 62; // popup header in Chrome
40
+ height += 1; // popup header in Chrome => height + 1, top -63
41
41
  left += (width + winData.screenLeft);
42
- top += (winData.outerHeight - winData.innerHeight + winData.screenTop);
42
+ top += (winData.outerHeight - winData.innerHeight + winData.screenTop - 63);
43
+
44
+ // Mounted inside a code.LivePreview, the popup header should be within the content (height-wise)
45
+ // See: https://github.com/neomjs/neo/issues/5991
46
+ if (me.component.up('live-preview')) {
47
+ height -= 63;
48
+ top += 63;
49
+ }
43
50
 
44
51
  /*
45
52
  * For this demo, the url './childapp/' would be sufficient.
@@ -1,8 +1,8 @@
1
1
  import Button from '../../src/button/Base.mjs';
2
2
  import CheckBox from '../../src/form/field/CheckBox.mjs';
3
+ import DemoDialog from './DemoDialog.mjs';
3
4
  import NeoArray from '../../src/util/Array.mjs';
4
5
  import Toolbar from '../../src/toolbar/Base.mjs';
5
- import DemoDialog from './DemoDialog.mjs';
6
6
  import Viewport from '../../src/container/Viewport.mjs';
7
7
 
8
8
  /**
@@ -11,37 +11,33 @@ import Viewport from '../../src/container/Viewport.mjs';
11
11
  */
12
12
  class MainContainer extends Viewport {
13
13
  static config = {
14
+ /**
15
+ * @member {String} className='Neo.examples.dialog.MainContainer'
16
+ * @protected
17
+ */
14
18
  className: 'Neo.examples.dialog.MainContainer',
15
- layout : 'base',
16
- style : {padding: '20px'},
17
19
  /**
18
- * Custom config which gets passed to the dialog
19
- * Either a dom node id, 'document.body' or null
20
- * @member {String|null} boundaryContainerId='document.body'
20
+ * We are not using a container layout here
21
+ * @member {String} layout='base'
21
22
  */
22
- boundaryContainerId: 'document.body',
23
+ layout: 'base',
23
24
  /**
24
- * Custom config
25
- * @member {Neo.dialog.Base|null} dialog=null
25
+ * @member {Object} style={padding:'20px'}
26
26
  */
27
- dialog: null
28
- }
29
-
30
- /**
31
- * @param {Object} config
32
- */
33
- construct(config) {
34
- super.construct(config);
35
-
36
- let me = this;
37
-
38
- me.items = [{
39
- html : '<h3>The dialog is invoked from the "Create Dialog" button</h3><h1>Hide it by pressing the ESCAPE key. The button will be refocused</h1>'
27
+ style: {padding: '20px'},
28
+ /**
29
+ * @member {Object[]} items
30
+ */
31
+ items: [{
32
+ html: [
33
+ '<h3>The dialog is invoked from the "Create Dialog" button</h3>',
34
+ '<h1>Hide it by pressing the ESCAPE key. The button will be refocused</h1>'
35
+ ].join('')
40
36
  }, {
41
37
  module: Toolbar,
42
- items :[{
38
+ items : [{
43
39
  module : Button,
44
- handler : me.createDialog.bind(me),
40
+ handler : 'up.createDialog',
45
41
  iconCls : 'fa fa-window-maximize',
46
42
  reference: 'create-dialog-button',
47
43
  text : 'Create Dialog',
@@ -50,7 +46,7 @@ class MainContainer extends Viewport {
50
46
  checked : true,
51
47
  hideLabel : true,
52
48
  hideValueLabel: false,
53
- listeners : {change: me.onConfigChange.bind(me, 'boundaryContainerId')},
49
+ listeners : {change: 'up.onBoundaryContainerIdChange'},
54
50
  style : {marginLeft: '3em'},
55
51
  valueLabelText: 'Limit Drag&Drop to the document.body'
56
52
  }, {
@@ -58,24 +54,39 @@ class MainContainer extends Viewport {
58
54
  checked : true,
59
55
  hideLabel : true,
60
56
  hideValueLabel: false,
57
+ listeners : {change: 'up.onConfigChange'},
61
58
  style : {marginLeft: '3em'},
59
+ targetConfig : 'animated',
62
60
  valueLabelText: 'Animated'
63
61
  }, {
64
62
  module : CheckBox,
65
63
  checked : true,
66
64
  hideLabel : true,
67
65
  hideValueLabel: false,
66
+ listeners : {change: 'up.onConfigChange'},
68
67
  style : {marginLeft: '1em'},
68
+ targetConfig : 'modal',
69
69
  valueLabelText: 'Modal'
70
70
  }, '->', {
71
71
  module : Button,
72
- handler: me.switchTheme.bind(me),
72
+ handler: 'up.switchTheme',
73
73
  iconCls: 'fa fa-moon',
74
74
  text : 'Theme Dark'
75
75
  }]
76
76
  }]
77
77
  }
78
78
 
79
+ /**
80
+ * Custom class field which gets passed to the dialog. Either a dom node id, 'document.body' or null
81
+ * @member {String|null} boundaryContainerId='document.body'
82
+ */
83
+ boundaryContainerId = 'document.body'
84
+ /**
85
+ * Custom class field to store the created dialog.Base instance
86
+ * @member {Neo.dialog.Base|null} dialog=null
87
+ */
88
+ dialog = null
89
+
79
90
  /**
80
91
  * @param {Object} data
81
92
  */
@@ -100,17 +111,26 @@ class MainContainer extends Viewport {
100
111
  }
101
112
 
102
113
  /**
103
- * @param {String} config
104
114
  * @param {Object} opts
105
115
  */
106
- onConfigChange(config, opts) {
116
+ onBoundaryContainerIdChange(opts) {
107
117
  let me = this,
118
+ {dialog} = me,
108
119
  boundaryContainerId = opts.value ? 'document.body' : null;
109
120
 
110
121
  me.boundaryContainerId = boundaryContainerId
111
122
 
112
- if (me.dialog) {
113
- me.dialog[config] = boundaryContainerId
123
+ if (dialog) {
124
+ dialog.boundaryContainerId = boundaryContainerId
125
+ }
126
+ }
127
+
128
+ /**
129
+ * @param {Object} opts
130
+ */
131
+ onConfigChange(opts) {
132
+ if (this.dialog) {
133
+ this.dialog[opts.component.targetConfig] = opts.value
114
134
  }
115
135
  }
116
136
 
@@ -9,7 +9,6 @@ import TableContainer from '../../src/table/Container.mjs';
9
9
  class MainContainer extends Container {
10
10
  static config = {
11
11
  className: 'Neo.examples.tablePerformance.MainContainer',
12
- autoMount: true,
13
12
 
14
13
  layout: {
15
14
  ntype: 'vbox',
@@ -44,57 +43,41 @@ class MainContainer extends Container {
44
43
  }, {
45
44
  ntype : 'numberfield',
46
45
  clearable : false,
47
- id : 'amountRows',
48
46
  labelText : 'Rows:',
49
47
  labelWidth: 50,
50
48
  maxValue : 1500,
51
49
  minValue : 1,
50
+ reference : 'amount-rows-field',
52
51
  value : 20,
53
52
  width : 120
54
53
  }, {
55
54
  ntype : 'numberfield',
56
55
  clearable : false,
57
- id : 'interval',
58
56
  labelText : 'Interval:',
59
57
  labelWidth: 62,
60
58
  maxValue : 5000,
61
59
  minValue : 10,
60
+ reference : 'interval-field',
62
61
  value : 20,
63
62
  width : 130
64
63
  }, {
64
+ handler: 'up.updateTableViewData',
65
65
  iconCls: 'fa fa-sync-alt',
66
- text : 'Refresh Data',
67
- handler: function () {
68
- let rows = Neo.getComponent('amountRows').value;
69
- Neo.getComponent('myTableContainer').createRandomViewData(rows);
70
- }
66
+ text : 'Refresh Data'
71
67
  }, {
68
+ handler: 'up.updateTableViewData100x',
72
69
  iconCls: 'fa fa-sync-alt',
73
70
  style : {margin: 0},
74
- text : 'Refresh 100x',
75
- handler: function () {
76
- let interval = Neo.getComponent('interval').value,
77
- rows = Neo.getComponent('amountRows').value,
78
- maxRefreshes = 100,
79
- intervalId = setInterval(function () {
80
- if (maxRefreshes < 1) {
81
- clearInterval(intervalId);
82
- }
83
-
84
- Neo.getComponent('myTableContainer').createRandomViewData(rows);
85
- maxRefreshes--;
86
- }, interval);
87
- }
71
+ text : 'Refresh 100x'
88
72
  }]
89
73
  }, {
90
- ntype : 'table-container',
91
- id : 'myTableContainer',
92
- amountRows : 20, // testing var
93
- createRandomData: true,
94
- width : '100%',
74
+ module : TableContainer,
75
+ reference : 'table',
76
+ viewConfig: {useRowRecordIds: false},
77
+ width : '100%',
95
78
 
96
79
  columnDefaults: {
97
- renderer: function(data) {
80
+ renderer(data) {
98
81
  return {
99
82
  html : data.value,
100
83
  style: {
@@ -141,6 +124,43 @@ class MainContainer extends Container {
141
124
  }]
142
125
  }]
143
126
  }
127
+
128
+ /**
129
+ *
130
+ */
131
+ onConstructed() {
132
+ super.onConstructed();
133
+ this.updateTableViewData()
134
+ }
135
+
136
+ /**
137
+ *
138
+ */
139
+ updateTableViewData() {
140
+ let me = this,
141
+ table = me.getReference('table'),
142
+ columns = table.headerToolbar.items.length,
143
+ rows = me.getReference('amount-rows-field').value,
144
+ inputData = me.up('viewport').createRandomData(columns, rows);
145
+
146
+ table.createViewData(inputData)
147
+ }
148
+
149
+ /**
150
+ *
151
+ */
152
+ updateTableViewData100x() {
153
+ let interval = this.getReference('interval-field').value,
154
+ maxRefreshes = 100,
155
+ intervalId = setInterval(() => {
156
+ if (maxRefreshes < 1) {
157
+ clearInterval(intervalId);
158
+ }
159
+
160
+ this.updateTableViewData();
161
+ maxRefreshes--
162
+ }, interval)
163
+ }
144
164
  }
145
165
 
146
166
  export default Neo.setupClass(MainContainer);
@@ -43,57 +43,41 @@ class MainContainer2 extends Container {
43
43
  }, {
44
44
  ntype : 'numberfield',
45
45
  clearable : false,
46
- id : 'amountRows2',
47
46
  labelText : 'Rows:',
48
47
  labelWidth: 50,
49
48
  maxValue : 1500,
50
49
  minValue : 1,
50
+ reference : 'amount-rows-field',
51
51
  value : 50,
52
52
  width : 120
53
53
  }, {
54
54
  ntype : 'numberfield',
55
55
  clearable : false,
56
- id : 'interval2',
57
56
  labelText : 'Interval:',
58
57
  labelWidth: 62,
59
58
  maxValue : 5000,
60
59
  minValue : 10,
60
+ reference : 'interval-field',
61
61
  value : 30,
62
62
  width : 130
63
63
  }, {
64
+ handler: 'up.updateTableViewData',
64
65
  iconCls: 'fa fa-sync-alt',
65
- text : 'Refresh Data',
66
- handler: function () {
67
- let rows = Neo.getComponent('amountRows2').value;
68
- Neo.getComponent('myTableContainer2').createRandomViewData(rows);
69
- }
66
+ text : 'Refresh Data'
70
67
  }, {
68
+ handler: 'up.updateTableViewData100x',
71
69
  iconCls: 'fa fa-sync-alt',
72
70
  style : {margin: 0},
73
- text : 'Refresh 100x',
74
- handler: function () {
75
- let interval = Neo.getComponent('interval2').value,
76
- rows = Neo.getComponent('amountRows2').value,
77
- maxRefreshes = 100,
78
- intervalId = setInterval(function(){
79
- if (maxRefreshes < 1) {
80
- clearInterval(intervalId);
81
- }
82
-
83
- Neo.getComponent('myTableContainer2').createRandomViewData(rows);
84
- maxRefreshes--;
85
- }, interval);
86
- }
71
+ text : 'Refresh 100x'
87
72
  }]
88
73
  }, {
89
- ntype : 'table-container',
90
- id : 'myTableContainer2',
91
- amountRows : 50, // testing var
92
- createRandomData: true,
93
- width : '100%',
74
+ module : TableContainer,
75
+ reference : 'table',
76
+ viewConfig: {useRowRecordIds: false},
77
+ width : '100%',
94
78
 
95
79
  columnDefaults: {
96
- renderer: function(data) {
80
+ renderer(data) {
97
81
  return {
98
82
  html : data.value,
99
83
  style: {
@@ -140,6 +124,43 @@ class MainContainer2 extends Container {
140
124
  }]
141
125
  }]
142
126
  }
127
+
128
+ /**
129
+ *
130
+ */
131
+ onConstructed() {
132
+ super.onConstructed();
133
+ this.updateTableViewData()
134
+ }
135
+
136
+ /**
137
+ *
138
+ */
139
+ updateTableViewData() {
140
+ let me = this,
141
+ table = me.getReference('table'),
142
+ columns = table.headerToolbar.items.length,
143
+ rows = me.getReference('amount-rows-field').value,
144
+ inputData = me.up('viewport').createRandomData(columns, rows);
145
+
146
+ table.createViewData(inputData)
147
+ }
148
+
149
+ /**
150
+ *
151
+ */
152
+ updateTableViewData100x() {
153
+ let interval = this.getReference('interval-field').value,
154
+ maxRefreshes = 100,
155
+ intervalId = setInterval(() => {
156
+ if (maxRefreshes < 1) {
157
+ clearInterval(intervalId);
158
+ }
159
+
160
+ this.updateTableViewData();
161
+ maxRefreshes--
162
+ }, interval)
163
+ }
143
164
  }
144
165
 
145
166
  export default Neo.setupClass(MainContainer2);
@@ -33,7 +33,7 @@ class MainContainer3 extends Container {
33
33
 
34
34
  items: [{
35
35
  ntype: 'label',
36
- text : 'TableContainer App3 (Default Scollbars)',
36
+ text : 'TableContainer App3 (Default Scrollbars)',
37
37
  style: {
38
38
  margin: '4px 10px 0 5px'
39
39
  }
@@ -43,58 +43,42 @@ class MainContainer3 extends Container {
43
43
  }, {
44
44
  ntype : 'numberfield',
45
45
  clearable : false,
46
- id : 'amountRows3',
47
46
  labelText : 'Rows:',
48
47
  labelWidth: 50,
49
48
  maxValue : 1500,
50
49
  minValue : 1,
50
+ reference : 'amount-rows-field',
51
51
  value : 100,
52
52
  width : 120
53
53
  }, {
54
54
  ntype : 'numberfield',
55
55
  clearable : false,
56
- id : 'interval3',
57
56
  labelText : 'Interval:',
58
57
  labelWidth: 62,
59
58
  maxValue : 5000,
60
59
  minValue : 10,
60
+ reference : 'interval-field',
61
61
  value : 50,
62
62
  width : 130
63
63
  }, {
64
+ handler: 'up.updateTableViewData',
64
65
  iconCls: 'fa fa-sync-alt',
65
- text : 'Refresh Data',
66
- handler: function () {
67
- let rows = Neo.getComponent('amountRows3').value;
68
- Neo.getComponent('myTableContainer3').createRandomViewData(rows);
69
- }
66
+ text : 'Refresh Data'
70
67
  }, {
68
+ handler: 'up.updateTableViewData100x',
71
69
  iconCls: 'fa fa-sync-alt',
72
70
  text : 'Refresh 100x',
73
- style : {margin: 0},
74
- handler: function () {
75
- let interval = Neo.getComponent('interval3').value,
76
- rows = Neo.getComponent('amountRows3').value,
77
- maxRefreshes = 100,
78
- intervalId = setInterval(function(){
79
- if (maxRefreshes < 1) {
80
- clearInterval(intervalId);
81
- }
82
-
83
- Neo.getComponent('myTableContainer3').createRandomViewData(rows);
84
- maxRefreshes--;
85
- }, interval);
86
- }
71
+ style : {margin: 0}
87
72
  }]
88
73
  }, {
89
- ntype : 'table-container',
90
- id : 'myTableContainer3',
91
- amountRows : 100, // testing var
92
- createRandomData : true,
74
+ module : TableContainer,
75
+ reference : 'table',
76
+ viewConfig : {useRowRecordIds: false},
93
77
  useCustomScrollbars: false,
94
78
  width : '100%',
95
79
 
96
80
  columnDefaults: {
97
- renderer: function(data) {
81
+ renderer(data) {
98
82
  return {
99
83
  html : data.value,
100
84
  style: {
@@ -143,6 +127,43 @@ class MainContainer3 extends Container {
143
127
  }]
144
128
  }]
145
129
  }
130
+
131
+ /**
132
+ *
133
+ */
134
+ onConstructed() {
135
+ super.onConstructed();
136
+ this.updateTableViewData()
137
+ }
138
+
139
+ /**
140
+ *
141
+ */
142
+ updateTableViewData() {
143
+ let me = this,
144
+ table = me.getReference('table'),
145
+ columns = table.headerToolbar.items.length,
146
+ rows = me.getReference('amount-rows-field').value,
147
+ inputData = me.up('viewport').createRandomData(columns, rows);
148
+
149
+ table.view.createViewData(inputData)
150
+ }
151
+
152
+ /**
153
+ *
154
+ */
155
+ updateTableViewData100x() {
156
+ let interval = this.getReference('interval-field').value,
157
+ maxRefreshes = 100,
158
+ intervalId = setInterval(() => {
159
+ if (maxRefreshes < 1) {
160
+ clearInterval(intervalId);
161
+ }
162
+
163
+ this.updateTableViewData();
164
+ maxRefreshes--
165
+ }, interval)
166
+ }
146
167
  }
147
168
 
148
169
  export default Neo.setupClass(MainContainer3);
@@ -27,6 +27,27 @@ class Viewport extends BaseViewport {
27
27
  style : {marginTop: '20px'}
28
28
  }]
29
29
  }
30
+
31
+ /**
32
+ * @param {Number} amountColumns
33
+ * @param {Number} amountRows
34
+ */
35
+ createRandomData(amountColumns, amountRows) {
36
+ let data = [],
37
+ i = 0,
38
+ j;
39
+
40
+ for (; i < amountRows; i++) {
41
+ data.push({});
42
+
43
+ for (j=0; j < amountColumns; j++) {
44
+ data[i]['column' + j] = 'Column' + (j + 1) + ' - ' + Math.round(Math.random() / 1.5);
45
+ data[i]['column' + j + 'style'] = Math.round(Math.random() / 1.7) > 0 ? 'brown' : i%2 ? '#3c3f41' : '#323232'
46
+ }
47
+ }
48
+
49
+ return data
50
+ }
30
51
  }
31
52
 
32
53
  export default Neo.setupClass(Viewport);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "7.9.1",
3
+ "version": "7.11.0",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
@@ -262,12 +262,12 @@ const DefaultConfig = {
262
262
  useVdomWorker: true,
263
263
  /**
264
264
  * buildScripts/injectPackageVersion.mjs will update this value
265
- * @default '7.9.1'
265
+ * @default '7.11.0'
266
266
  * @memberOf! module:Neo
267
267
  * @name config.version
268
268
  * @type String
269
269
  */
270
- version: '7.9.1'
270
+ version: '7.11.0'
271
271
  };
272
272
 
273
273
  Object.assign(DefaultConfig, {
@@ -1,6 +1,5 @@
1
1
  import Base from './Base.mjs';
2
2
  import ClassSystemUtil from '../util/ClassSystem.mjs';
3
- import Logger from '../util/Logger.mjs';
4
3
 
5
4
  /**
6
5
  * @class Neo.controller.Application
@@ -101,8 +100,6 @@ class Application extends Base {
101
100
  // short delay to ensure changes from onHashChange() got applied
102
101
  await me.timeout(Neo.config.hash ? 200 : 10);
103
102
 
104
- Logger.addContextMenuListener(me.mainView);
105
-
106
103
  await value.render(true)
107
104
  }
108
105
  }
@@ -1,4 +1,4 @@
1
- import Date from '../form/field/Date.mjs';
1
+ import DateField from '../form/field/Date.mjs';
2
2
  import NumberContainer from './NumberContainer.mjs';
3
3
 
4
4
  /**
@@ -18,9 +18,9 @@ class DateContainer extends NumberContainer {
18
18
  */
19
19
  ntype: 'filter-datecontainer',
20
20
  /**
21
- * @member {Neo.form.field.Base} fieldModule=Date
21
+ * @member {Neo.form.field.Base} fieldModule=DateField
22
22
  */
23
- fieldModule: Date
23
+ fieldModule: DateField
24
24
  }
25
25
  }
26
26
 
@@ -172,7 +172,9 @@ class DomEvent extends Base {
172
172
  }
173
173
  }
174
174
 
175
- if (eventName.startsWith('drop')) {
175
+ if (eventName === 'contextmenu' && data.ctrlKey) {
176
+ Neo.util?.Logger?.onContextMenu(data)
177
+ } else if (eventName.startsWith('drop')) {
176
178
  let dragZone = data.dragZoneId && Neo.get(data.dragZoneId);
177
179
 
178
180
  if (dragZone) {
@@ -3,6 +3,5 @@ import Component from './Component.mjs';
3
3
  import DomEvent from './DomEvent.mjs';
4
4
  import Focus from './Focus.mjs';
5
5
  import Instance from './Instance.mjs';
6
- import Store from './Store.mjs';
7
6
 
8
- export {Base, Component, DomEvent, Instance, Focus, Store};
7
+ export {Base, Component, DomEvent, Instance, Focus};
@@ -23,11 +23,6 @@ class Container extends BaseContainer {
23
23
  * @protected
24
24
  */
25
25
  ntype: 'table-container',
26
- /**
27
- * todo: testing config, remove when Stores are ready
28
- * @member {Number} amountRows=20
29
- */
30
- amountRows: 20,
31
26
  /**
32
27
  * @member {String[]} baseCls=['neo-table-container']
33
28
  */
@@ -37,11 +32,6 @@ class Container extends BaseContainer {
37
32
  * @member {Object} columnDefaults=null
38
33
  */
39
34
  columnDefaults: null,
40
- /**
41
- * todo: testing config, remove when Stores are ready
42
- * @member {Boolean} createRandomData=false
43
- */
44
- createRandomData: false,
45
35
  /**
46
36
  * @member {Object[]} columns_=[]
47
37
  */
@@ -148,11 +138,10 @@ class Container extends BaseContainer {
148
138
  sortable : me.sortable,
149
139
  ...me.headerToolbarConfig
150
140
  }, {
151
- module : View,
152
- containerId : me.id,
153
- id : me.viewId,
154
- store : me.store,
155
- useRowRecordIds: !me.createRandomData,
141
+ module : View,
142
+ containerId: me.id,
143
+ id : me.viewId,
144
+ store : me.store,
156
145
  ...me.viewConfig
157
146
  }];
158
147
 
@@ -399,27 +388,17 @@ class Container extends BaseContainer {
399
388
  return columns
400
389
  }
401
390
 
402
- /**
403
- * @param {Number} countRows
404
- */
405
- createRandomViewData(countRows) {
406
- this.loadData(countRows)
407
- }
408
-
409
391
  /**
410
392
  * @param {Array} inputData
411
393
  */
412
394
  createViewData(inputData) {
413
- let me = this,
414
- {items} = me;
395
+ let me = this;
415
396
 
416
- items[1].createViewData(inputData); // todo: save a reference to the view & headerContainer
397
+ me.view.createViewData(inputData);
417
398
 
418
399
  if (me.useCustomScrollbars && me.scrollbarsCssApplied === false) {
419
- me.applyCustomScrollbarsCss();
400
+ me.applyCustomScrollbarsCss()
420
401
  }
421
-
422
- me.items = items
423
402
  }
424
403
 
425
404
  /**
@@ -452,35 +431,12 @@ class Container extends BaseContainer {
452
431
  return `${this.id}__wrapper`
453
432
  }
454
433
 
455
- /**
456
- * @param {Number} countRows
457
- */
458
- loadData(countRows) {
459
- let me = this,
460
- columns = me.items[0].items,
461
- countColumns = columns.length;
462
-
463
- Neo.manager.Store.createRandomData([countColumns, countRows]).then(data => {
464
- me.createViewData(data)
465
- })
466
- }
467
-
468
434
  /**
469
435
  *
470
436
  */
471
437
  onConstructed() {
472
438
  super.onConstructed();
473
-
474
- let me = this;
475
-
476
- me.selectionModel?.register(me);
477
-
478
- if (me.createRandomData) {
479
- // todo: if mounting apply after mount
480
- me.timeout(50).then(() => {
481
- me.createRandomViewData(me.amountRows)
482
- })
483
- }
439
+ this.selectionModel?.register(this)
484
440
  }
485
441
 
486
442
  /**
@@ -545,7 +501,7 @@ class Container extends BaseContainer {
545
501
  * @protected
546
502
  */
547
503
  removeSortingCss(dataField) {
548
- this.items[0].items.forEach(column => {
504
+ this.headerToolbar.items.forEach(column => {
549
505
  if (column.dataField !== dataField) {
550
506
  column.removeSortingCss()
551
507
  }
@@ -201,7 +201,7 @@ class View extends Component {
201
201
  if (selectedRows?.includes(id)) {
202
202
  trCls.push('neo-selected');
203
203
 
204
- Neo.getComponent(me.containerId).fire('select', {
204
+ me.parent.fire('select', {
205
205
  record
206
206
  })
207
207
  }
@@ -326,7 +326,7 @@ class View extends Component {
326
326
  */
327
327
  getColumn(field, returnIndex=false) {
328
328
  let container = this.parent,
329
- columns = container.items[0].items, // todo: we need a shortcut for accessing the header toolbar
329
+ columns = container.headerToolbar.items,
330
330
  i = 0,
331
331
  len = columns.length,
332
332
  column;
@@ -204,6 +204,7 @@ class Button extends BaseButton {
204
204
  flag : 'filter-field',
205
205
  hideLabel: true,
206
206
  parentId : me.id,
207
+ windowId : me.windowId,
207
208
 
208
209
  listeners: {
209
210
  change : me.changeFilterValue,
@@ -77,17 +77,6 @@ class Logger extends Base {
77
77
  })
78
78
  }
79
79
 
80
- /**
81
- * Ctrl-Right-Click will show the current component
82
- * @param {Neo.component.Base} view
83
- */
84
- addContextMenuListener(view) {
85
- view.addDomListeners({
86
- contextmenu: this.onContextMenu,
87
- scope : this
88
- })
89
- }
90
-
91
80
  /**
92
81
  * Set level to number based on position in logLevels
93
82
  * @param {String} value
@@ -169,11 +158,7 @@ class Logger extends Base {
169
158
  onContextMenu(data) {
170
159
  let {config} = Neo;
171
160
 
172
- if (
173
- data.ctrlKey
174
- && config.enableComponentLogger
175
- && !(config.env === 'dist/production' && config.enableLogsInProduction)
176
- ) {
161
+ if (config.enableComponentLogger && !(config.env === 'dist/production' && config.enableLogsInProduction)) {
177
162
  let isGroupSet = false,
178
163
  component;
179
164
 
@@ -1,10 +1,9 @@
1
- import Neo from '../Neo.mjs';
2
- import Base from './Base.mjs';
3
- import Compare from '../core/Compare.mjs';
4
- import Fetch from '../Fetch.mjs';
5
- import Util from '../core/Util.mjs';
6
- import StoreManager from '../manager/Store.mjs';
7
- import Xhr from '../Xhr.mjs';
1
+ import Neo from '../Neo.mjs';
2
+ import Base from './Base.mjs';
3
+ import Compare from '../core/Compare.mjs';
4
+ import Fetch from '../Fetch.mjs';
5
+ import Util from '../core/Util.mjs';
6
+ import Xhr from '../Xhr.mjs';
8
7
 
9
8
  /**
10
9
  * The Data worker is responsible to handle all of the communication to the backend (e.g. Ajax-calls).
@@ -1,84 +0,0 @@
1
- import Base from './Base.mjs';
2
-
3
- /**
4
- * todo: except for createRandomData a legacy class, since stores live directly inside the app worker
5
- * @class Neo.manager.Store
6
- * @extends Neo.manager.Base
7
- * @singleton
8
- */
9
- class Store extends Base {
10
- static config = {
11
- /**
12
- * @member {String} className='Neo.manager.Store'
13
- * @protected
14
- */
15
- className: 'Neo.manager.Store',
16
- /**
17
- * @member {Boolean} singleton=true
18
- * @protected
19
- */
20
- singleton: true,
21
- /**
22
- * @member {Object} listeners={}
23
- * @protected
24
- */
25
- listeners: {},
26
- /**
27
- * @member {Object} remote={app: ['createRandomData', 'filter', 'load', 'sort']}
28
- * @protected
29
- */
30
- remote: {
31
- app: ['createRandomData', 'filter', 'load', 'sort']
32
- }
33
- }
34
-
35
- /**
36
- * Dummy method until we have a data package in place
37
- * @param {Number} amountColumns
38
- * @param {Number} amountRows
39
- */
40
- createRandomData(amountColumns, amountRows) {
41
- let data = [],
42
- i = 0,
43
- j;
44
-
45
- for (; i < amountRows; i++) {
46
- data.push({});
47
-
48
- for (j=0; j < amountColumns; j++) {
49
- data[i]['column' + j] = 'Column' + (j + 1) + ' - ' + Math.round(Math.random() / 1.5);
50
- data[i]['column' + j + 'style'] = Math.round(Math.random() / 1.7) > 0 ? 'brown' : i%2 ? '#3c3f41' : '#323232'
51
- }
52
- }
53
-
54
- return data
55
- }
56
-
57
- /**
58
- * @param storeId
59
- * @param fieldName
60
- * @param value
61
- */
62
- filter(storeId, fieldName, value) {
63
-
64
- }
65
-
66
- /**
67
- * @param storeId
68
- * @param params
69
- */
70
- load(storeId, params) {
71
-
72
- }
73
-
74
- /**
75
- * @param storeId
76
- * @param fieldName
77
- * @param value
78
- */
79
- sort(storeId, fieldName, value) {
80
-
81
- }
82
- }
83
-
84
- export default Neo.setupClass(Store);