neo.mjs 6.10.11 → 6.10.13

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.
Files changed (21) hide show
  1. package/apps/ServiceWorker.mjs +2 -2
  2. package/apps/portal/view/learn/LivePreview.mjs +1 -0
  3. package/buildScripts/createAppMinimal.mjs +0 -30
  4. package/examples/ServiceWorker.mjs +2 -2
  5. package/examples/toolbar/paging/view/MainContainer.mjs +6 -1
  6. package/package.json +5 -6
  7. package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md +0 -1
  8. package/resources/data/deck/learnneo/p/ComponentModels.md +26 -14
  9. package/resources/data/deck/learnneo/p/Earthquakes.md +1226 -31
  10. package/resources/data/deck/learnneo/p/Events.md +11 -0
  11. package/resources/data/deck/learnneo/p/Extending.md +1 -0
  12. package/resources/data/deck/learnneo/p/GuideEvents.md +153 -0
  13. package/resources/data/deck/learnneo/t.json +3 -1
  14. package/resources/scss/src/apps/portal/learn/ContentView.scss +0 -1
  15. package/resources/scss/src/list/Base.scss +8 -0
  16. package/src/DefaultConfig.mjs +2 -2
  17. package/src/form/field/Date.mjs +22 -1
  18. package/src/main/DomUtils.mjs +1 -1
  19. package/src/main/addon/Navigator.mjs +6 -2
  20. package/src/tooltip/Base.mjs +6 -2
  21. package/src/util/String.mjs +5 -4
package/apps/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='6.10.11'
23
+ * @member {String} version='6.10.13'
24
24
  */
25
- version: '6.10.11'
25
+ version: '6.10.13'
26
26
  }
27
27
 
28
28
  /**
package/apps/portal/view/learn/LivePreview.mjs CHANGED
@@ -75,6 +75,7 @@ class LivePreview extends Base {
75
75
  const moduleNameAndPath = [];
76
76
 
77
77
  const className = this.findLastClassName(source);
78
+
78
79
  source.split('\n').forEach(line => {
79
80
  let importMatch = line.match(importRegex);
80
81
  if (importMatch) {
package/buildScripts/createAppMinimal.mjs CHANGED
@@ -167,24 +167,6 @@ if (programOpts.info) {
167
167
  </head>
168
168
  <body>
169
169
  <script src="../../src/MicroLoader.mjs" type="module"></script>
170
- <script>
171
- new MutationObserver((mutationsList, observer) => {
172
- for (let mutation of mutationsList) {
173
- for (let addedNode of mutation.addedNodes) {
174
- if (addedNode.className && addedNode.className.includes(\'neo-viewport\')) {
175
- addedNode.addEventListener("contextmenu", function (e) {
176
- if (!(e.ctrlKey || e.metaKey)) return;
177
- e.stopPropagation();
178
- e.preventDefault();
179
- const event = new Event('neo-debug-item-select', {bubbles: true});
180
- e.target.dispatchEvent(event);
181
- });
182
- observer.disconnect(); // We found the viewport so we\'re finished listening
183
- }
184
- }
185
- }
186
- }).observe(document.body, {childList: true, subtree: false});
187
- </script>
188
170
  </body>
189
171
  </html>
190
172
  `;
@@ -251,18 +233,6 @@ class ${className} extends Base {
251
233
  layout: {ntype: 'fit'},
252
234
  items: [{module:MainView}],
253
235
  }
254
- afterSetMounted(value, oldValue) {
255
- super.afterSetMounted(value, oldValue);
256
- if (!value) return;
257
- this.addDomListeners({
258
- "neo-debug-item-select": (event) => {
259
- event.path.forEach((item) => {
260
- const component = Neo.getComponent(item.id);
261
- if (component) console.log(component);
262
- });
263
- },
264
- });
265
- }
266
236
  }
267
237
  Neo.applyClassConfig(${className});
268
238
  export default ${className};
package/examples/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='6.10.11'
23
+ * @member {String} version='6.10.13'
24
24
  */
25
- version: '6.10.11'
25
+ version: '6.10.13'
26
26
  }
27
27
 
28
28
  /**
package/examples/toolbar/paging/view/MainContainer.mjs CHANGED
@@ -60,7 +60,12 @@ class MainContainer extends Viewport {
60
60
  tooltip: 'Go to next page'
61
61
  },
62
62
  'nav-button-last' : {
63
- tooltip: 'Go to last page'
63
+ tooltip: {
64
+ text : 'Go to last page',
65
+ align : {
66
+ edgeAlign : 'b-t'
67
+ }
68
+ }
64
69
  },
65
70
 
66
71
  // These two have been moved to the start of the Toolbar by their weights
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name" : "neo.mjs",
3
- "version" : "6.10.11",
3
+ "version" : "6.10.13",
4
4
  "description" : "The webworkers driven UI framework",
5
5
  "type" : "module",
6
6
  "repository" : {
@@ -44,19 +44,19 @@
44
44
  "homepage" : "https://neomjs.github.io/pages/",
45
45
  "devDependencies" : {
46
46
  "@fortawesome/fontawesome-free" : "^6.5.1",
47
- "autoprefixer" : "^10.4.16",
47
+ "autoprefixer" : "^10.4.17",
48
48
  "chalk" : "^5.3.0",
49
49
  "clean-webpack-plugin" : "^4.0.0",
50
50
  "commander" : "^11.1.0",
51
- "cssnano" : "^6.0.2",
51
+ "cssnano" : "^6.0.3",
52
52
  "envinfo" : "^7.11.0",
53
53
  "fs-extra" : "^11.2.0",
54
54
  "highlightjs-line-numbers.js" : "^2.8.0",
55
55
  "inquirer" : "^9.2.12",
56
56
  "neo-jsdoc" : "1.0.1",
57
57
  "neo-jsdoc-x" : "1.0.5",
58
- "postcss" : "^8.4.32",
59
- "sass" : "^1.69.5",
58
+ "postcss" : "^8.4.33",
59
+ "sass" : "^1.70.0",
60
60
  "siesta-lite" : "5.5.2",
61
61
  "showdown" : "^2.1.0",
62
62
  "url" : "^0.11.3",
@@ -70,5 +70,4 @@
70
70
  "type" : "GitHub Sponsors",
71
71
  "url" : "https://github.com/sponsors/tobiu"
72
72
  }
73
-
74
73
  }
package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md CHANGED
@@ -106,7 +106,6 @@ Here's a simplified running example. The `model` and `controller` are omitted, b
106
106
  actually used in the example, and the import root path is different to reflect the location of the
107
107
  Neo.mjs libarary relative to the examples.
108
108
 
109
-
110
109
  <pre data-neo>
111
110
  import Base from '../../../../src/container/Base.mjs';
112
111
  import Button from '../../../../src/button/Base.mjs';
package/resources/data/deck/learnneo/p/ComponentModels.md CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  Neo has a feature that allows shared, bindable, data.
3
2
 
4
3
  A _view model_ &mdash; `Neo.model.Component` &mdash; instance holds properties that
@@ -38,20 +37,23 @@ class MainView extends Base {
38
37
  Neo.applyClassConfig(MainView);
39
38
  </pre>
40
39
 
41
- View model properties are visible up the containment hierarchy:
40
+ View model properties are visible down the containment hierarchy:
42
41
  Properties introduced in a parent container will be available to any child component, and properties
43
42
  introduces in a specific component are only visible to that component. This approach makes it easy to control scope.
44
43
 
45
- In this example the main view has three child items of type `MyPanel`. The main view has a view model with a
46
- `foo` property, and the third child has its own view model with a `foo` property.
44
+ In the example above, the main view has a view model that defined a property _foo_. A view model property is available
45
+ within the view and its children. The child items &mdash; a label and a text field &mdash; can bind properties to
46
+ _foo_. As _foo_ changes, the properties are automatically updated. The example also shows that a binding can be
47
+ `twoWay`, which means a change to the property in the view is _pushed_ to the view model.
48
+
49
+ <img width="50%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchy.png"></img>
47
50
 
48
- `MyPanel` contains a `Neo.componnet.Label` whose `text` value is bound to `foo`. To resolve the binding, Neo.mjs looks up the
49
- containment hierarchy until it finds the value. For the first two panels the label binding looks in the label, then in its `MyPanel`
50
- container, then in the main view where it finds `foo`. For the third child panel the label binding looks in the label,
51
- then in its `MyPanel` and finds it because the third copy of `MyPanel` has its own view model with the `foo` property.
51
+ (Note that in the example above, the main view's view model is defined in-line. Normally your view model
52
+ would be coded in its own class that extends 'Neo.model.Component', and you'd use that in your component.
53
+ Just like with items component configs, trivial configs may be done in-line, and non-trivial configs are
54
+ usually coded as separate classes.)
52
55
 
53
- The bottom line is the Neo.mjs view model and binding approach is simple and powerful, and gives you easy control over the scope
54
- of a value. Thus, you can share properties as globally or narrowly as needed.
56
+ Below is another example.
55
57
 
56
58
  <pre data-neo>
57
59
  import Base from '../../../../src/container/Base.mjs';
@@ -93,6 +95,7 @@ class MainView extends Base {
93
95
  module: MyPanel,
94
96
  }, {
95
97
  module: MyPanel,
98
+ // You wouldn't normally configure a view model. We're doing it here to illustrate view model scope.
96
99
  model: {
97
100
  data: {
98
101
  foo: 'child'
@@ -105,12 +108,21 @@ class MainView extends Base {
105
108
  Neo.applyClassConfig(MainView);
106
109
  </pre>
107
110
 
111
+ In this case, the main view has three child items of type `MyPanel`, each containing a label.
112
+ The main view has a view model with a `foo` property, and the third child has its own view model with a `foo` property.
113
+
114
+ <img width="60%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchyFooShadowed.png"></img>
115
+
116
+ `MyPanel` contains a `Neo.componnet.Label` whose `text` value is bound to `foo`. To resolve the binding,
117
+ Neo.mjs looks up the containment hierarchy until it finds the value. For the first two panels the label
118
+ binding looks in the label, then in its `MyPanel` container, then in the main view &mdash; where it finds `foo`.
108
119
 
120
+ For the third child panel the label binding looks in the label, then in its `MyPanel`, but this time it finds it
121
+ because the third copy of `MyPanel` has its own view model with the `foo` property.
109
122
 
110
123
 
111
124
 
112
- Note that in the example above, the view model is in-line. Normally your view model would be
113
- coded in its own class that extends 'Neo.model.Component', and you'd use that in your component.
114
- Just like with items component configs, trivial configs are often done in-line, and non-trivial
115
- configs are coded as separate classes.
125
+ ## Conclusion
116
126
 
127
+ The Neo.mjs view model and binding approach is simple and powerful. It gives you easy control
128
+ over the scope of a value, which means you can share properties as globally or narrowly as needed.