neo.mjs 6.10.12 → 6.10.14

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 (37) hide show
  1. package/apps/ServiceWorker.mjs +2 -2
  2. package/apps/portal/view/learn/LivePreview.mjs +4 -2
  3. package/buildScripts/createAppMinimal.mjs +0 -30
  4. package/examples/ServiceWorker.mjs +2 -2
  5. package/examples/button/base/neo-config.json +1 -2
  6. package/examples/dialog/MainContainer.mjs +2 -0
  7. package/package.json +4 -4
  8. package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md +1 -0
  9. package/resources/data/deck/learnneo/p/ComponentModels.md +27 -13
  10. package/resources/data/deck/learnneo/p/DescribingTheUI.md +1 -1
  11. package/resources/data/deck/learnneo/p/Earthquakes.md +1226 -31
  12. package/resources/data/deck/learnneo/p/Events.md +11 -0
  13. package/resources/data/deck/learnneo/p/GuideEvents.md +153 -0
  14. package/resources/data/deck/learnneo/t.json +3 -1
  15. package/resources/scss/src/apps/portal/learn/ContentView.scss +1 -0
  16. package/resources/scss/src/list/Base.scss +1 -45
  17. package/src/DefaultConfig.mjs +2 -2
  18. package/src/component/Base.mjs +32 -0
  19. package/src/data/RecordFactory.mjs +0 -3
  20. package/src/dialog/Base.mjs +14 -7
  21. package/src/form/field/Picker.mjs +9 -1
  22. package/src/form/field/Select.mjs +23 -4
  23. package/src/form/field/Text.mjs +4 -2
  24. package/src/layout/Flexbox.mjs +31 -23
  25. package/src/layout/HBox.mjs +1 -1
  26. package/src/layout/VBox.mjs +1 -1
  27. package/src/main/DomAccess.mjs +11 -3
  28. package/src/main/DomUtils.mjs +26 -3
  29. package/src/main/addon/Navigator.mjs +139 -27
  30. package/src/manager/DomEvent.mjs +9 -3
  31. package/src/manager/Focus.mjs +3 -1
  32. package/src/util/String.mjs +3 -2
  33. package/test/components/files/form/field/Select.mjs +25 -4
  34. package/resources/data/deck/learnneo/p/AddingProperties.md +0 -1
  35. package/resources/data/deck/learnneo/p/ComponentState.md +0 -1
  36. package/resources/scss/src/apps/newwebsite/Viewport.scss +0 -32
  37. package/resources/scss/theme-neo-light/design-tokens/Components.scss +0 -3
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.12'
23
+ * @member {String} version='6.10.14'
24
24
  */
25
- version: '6.10.12'
25
+ version: '6.10.14'
26
26
  }
27
27
 
28
28
  /**
package/apps/portal/view/learn/LivePreview.mjs CHANGED
@@ -1,6 +1,6 @@
1
- import Base from '../../../../src/container/Base.mjs';
1
+ import Base from '../../../../src/container/Base.mjs';
2
2
  import TabContainer from '../../../../src/tab/Container.mjs';
3
- import TextArea from '../../../../src/form/field/TextArea.mjs';
3
+ import TextArea from '../../../../src/form/field/TextArea.mjs';
4
4
 
5
5
  /**
6
6
  * @class Portal.view.learn.LivePreview
@@ -75,6 +75,8 @@ class LivePreview extends Base {
75
75
  const moduleNameAndPath = [];
76
76
 
77
77
  const className = this.findLastClassName(source);
78
+
79
+
78
80
  source.split('\n').forEach(line => {
79
81
  let importMatch = line.match(importRegex);
80
82
  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.12'
23
+ * @member {String} version='6.10.14'
24
24
  */
25
- version: '6.10.12'
25
+ version: '6.10.14'
26
26
  }
27
27
 
28
28
  /**
package/examples/button/base/neo-config.json CHANGED
@@ -2,6 +2,5 @@
2
2
  "appPath" : "examples/button/base/app.mjs",
3
3
  "basePath" : "../../../",
4
4
  "environment": "development",
5
- "mainPath" : "./Main.mjs",
6
- "themes" : ["neo-theme-neo-light"]
5
+ "mainPath" : "./Main.mjs"
7
6
  }
package/examples/dialog/MainContainer.mjs CHANGED
@@ -36,6 +36,8 @@ class MainContainer extends Viewport {
36
36
  let me = this;
37
37
 
38
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>'
40
+ }, {
39
41
  module: Toolbar,
40
42
  items :[{
41
43
  module : Button,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name" : "neo.mjs",
3
- "version" : "6.10.12",
3
+ "version" : "6.10.14",
4
4
  "description" : "The webworkers driven UI framework",
5
5
  "type" : "module",
6
6
  "repository" : {
@@ -44,7 +44,7 @@
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",
@@ -56,11 +56,11 @@
56
56
  "neo-jsdoc" : "1.0.1",
57
57
  "neo-jsdoc-x" : "1.0.5",
58
58
  "postcss" : "^8.4.33",
59
- "sass" : "^1.69.7",
59
+ "sass" : "^1.70.0",
60
60
  "siesta-lite" : "5.5.2",
61
61
  "showdown" : "^2.1.0",
62
62
  "url" : "^0.11.3",
63
- "webpack" : "^5.89.0",
63
+ "webpack" : "^5.90.0",
64
64
  "webpack-cli" : "^5.1.4",
65
65
  "webpack-dev-server" : "4.15.1",
66
66
  "webpack-hook-plugin" : "^1.0.7",
package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md CHANGED
@@ -91,6 +91,7 @@ Neo.applyClassConfig(MainView);
91
91
  export default MainView;
92
92
  </pre>
93
93
 
94
+
94
95
  Note the entry in `items:[]`. That's a description of the button that will be the single item in our
95
96
  container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is a declarative framework, in
96
97
  which components and objects are described. It's an abstraction. In other words, the code describes
package/resources/data/deck/learnneo/p/ComponentModels.md CHANGED
@@ -37,20 +37,23 @@ class MainView extends Base {
37
37
  Neo.applyClassConfig(MainView);
38
38
  </pre>
39
39
 
40
- View model properties are visible up the containment hierarchy:
40
+ View model properties are visible down the containment hierarchy:
41
41
  Properties introduced in a parent container will be available to any child component, and properties
42
42
  introduces in a specific component are only visible to that component. This approach makes it easy to control scope.
43
43
 
44
- In this example the main view has three child items of type `MyPanel`. The main view has a view model with a
45
- `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.
46
48
 
47
- `MyPanel` contains a `Neo.componnet.Label` whose `text` value is bound to `foo`. To resolve the binding, Neo.mjs looks up the
48
- containment hierarchy until it finds the value. For the first two panels the label binding looks in the label, then in its `MyPanel`
49
- container, then in the main view where it finds `foo`. For the third child panel the label binding looks in the label,
50
- then in its `MyPanel` and finds it because the third copy of `MyPanel` has its own view model with the `foo` property.
49
+ <img width="50%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchy.png"></img>
51
50
 
52
- The bottom line is the Neo.mjs view model and binding approach is simple and powerful, and gives you easy control over the scope
53
- of a value. Thus, you can share properties as globally or narrowly as needed.
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.)
55
+
56
+ Below is another example.
54
57
 
55
58
  <pre data-neo>
56
59
  import Base from '../../../../src/container/Base.mjs';
@@ -92,6 +95,7 @@ class MainView extends Base {
92
95
  module: MyPanel,
93
96
  }, {
94
97
  module: MyPanel,
98
+ // You wouldn't normally configure a view model. We're doing it here to illustrate view model scope.
95
99
  model: {
96
100
  data: {
97
101
  foo: 'child'
@@ -104,11 +108,21 @@ class MainView extends Base {
104
108
  Neo.applyClassConfig(MainView);
105
109
  </pre>
106
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`.
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.
107
122
 
108
123
 
109
124
 
125
+ ## Conclusion
110
126
 
111
- Note that in the example above, the view model is in-line. Normally your view model would be
112
- coded in its own class that extends 'Neo.model.Component', and you'd use that in your component.
113
- Just like with items component configs, trivial configs are often done in-line, and non-trivial
114
- configs are coded as separate classes.
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.
package/resources/data/deck/learnneo/p/DescribingTheUI.md CHANGED
@@ -64,4 +64,4 @@ modify the code to specify `ntype:'hbox'` and run it again.
64
64
 
65
65
  Note that the layout specifies `ntype` rather than `module`. An `ntype` is an alias for a class
66
66
  that has already been imported. Containers import all the layout types, so since we've already
67
- imported container we can simply use `ntype` to specify which layout we want.
67
+ imported container we can simply use `ntype` to specify which layout we want.