neo.mjs 6.10.0 → 6.10.2

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.0'
+         * @member {String} version='6.10.2'
          */
-        version: '6.10.0'
+        version: '6.10.2'
     }
 
     /**

package/apps/learnneo/view/home/HeaderToolbar.mjs

@@ -0,0 +1,47 @@
+import Base  from '../../../../src/toolbar/Base.mjs';
+import Label from '../../../../src/component/Label.mjs';
+
+/**
+ * @class LearnNeo.view.home.HeaderToolbar
+ * @extends Neo.container.Base
+ */
+class HeaderToolbar extends Base {
+    static config = {
+        /**
+         * @member {String} className='LearnNeo.view.home.HeaderToolbar'
+         * @protected
+         */
+        className: 'LearnNeo.view.home.HeaderToolbar',
+        /**
+         * @member {String[]} cls=['learnneo-header-toolbar']
+         */
+        cls: ['learnneo-header-toolbar'],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Label,
+            cls   : ['logo'],
+            text  : 'neo.mjs'
+        }, '->', {
+            text: 'Docs',
+            ui  : 'tertiary'
+        }, {
+            text: 'Learn',
+            ui  : 'tertiary'
+        }, {
+            cls    : ['github-button'],
+            iconCls: 'fa-brands fa-github',
+            ui     : 'tertiary',
+            url    : 'https://github.com/neomjs/neo'
+        }, {
+            iconCls: 'fa-brands fa-slack',
+            ui     : 'tertiary',
+            url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA'
+        }]
+    }
+}
+
+Neo.applyClassConfig(HeaderToolbar);
+
+export default HeaderToolbar;

package/apps/learnneo/view/home/MainContainer.mjs

@@ -1,6 +1,7 @@
 import Container               from '../../../../src/container/Base.mjs';
 import ContentView             from './ContentView.mjs';
 import ContentTreeList         from './ContentTreeList.mjs';
+import HeaderToolbar           from './HeaderToolbar.mjs';
 import MainContainerController from './MainContainerController.mjs';
 import MainContainerModel      from './MainContainerModel.mjs';
 import Splitter                from '../../../../src/component/Splitter.mjs';
@@ -20,40 +21,46 @@ class MainContainer extends Container {
          * @member {Neo.controller.Component} controller=MainContainerController
          */
         controller: MainContainerController,
-
-        cls: 'learnneo-maincontainer',
+        /**
+         * @member {String[]} cls=['learnneo-maincontainer']
+         */
+        cls: ['learnneo-maincontainer'],
         /**
          * @member {Object[]} items
          */
         items: [{
-            module  : Container,
-            layout  : 'fit',
-            minWidth: 350,
-            width   : 350,
-            cls     : 'sidenav-container',
+            module: HeaderToolbar
+        }, {
+            module: Container,
+            layout: {ntype: 'hbox', align: 'stretch'},
+
             items: [{
-                module   : ContentTreeList,
-                reference: 'tree',
+                module  : Container,
+                layout  : 'fit',
+                minWidth: 350,
+                width   : 350,
+                cls     : 'sidenav-container',
+                items: [{
+                    module   : ContentTreeList,
+                    reference: 'tree',
+                    listeners: {
+                        contentChange: 'onContentChange',
+                    }
+                }]
+            }, {
+                module      : Splitter,
+                cls         : ['main-content-splitter'],
+                resizeTarget: 'previous',
+                size        : 4
+            }, {
+                module   : ContentView,
+                reference: 'content',
                 listeners: {
-                    contentChange: 'onContentChange',
+                    edit   : 'onContentEdit',
+                    refresh: 'onContentRefresh'
                 }
             }]
-        }, {
-            module      : Splitter,
-            resizeTarget: 'previous',
-            size        : 4
-        }, {
-            module   : ContentView,
-            reference: 'content',
-            listeners: {
-                edit   : 'onContentEdit',
-                refresh: 'onContentRefresh'
-            }
         }],
-        /**
-         * @member {Object} layout={ntype:'hbox',align:'stretch'}
-         */
-        layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Neo.model.Component} model=MainContainerModel
          */

package/apps/newwebsite/app.mjs

@@ -1,6 +1,6 @@
-import MainContainer from './view/MainContainer.mjs';
+import Viewport from './view/Viewport.mjs';
 
 export const onStart = () => Neo.app({
-    mainView: MainContainer,
+    mainView: Viewport,
     name    : 'NewWebsite'
 })

package/apps/newwebsite/view/{MainContainer.mjs → Viewport.mjs}

@@ -1,22 +1,22 @@
-import Button    from '../../../src/button/Base.mjs';
-import Container from '../../../src/container/Base.mjs';
-import Viewport  from '../../../src/container/Viewport.mjs';
+import BaseViewport  from '../../../src/container/Viewport.mjs';
+import Button        from '../../../src/button/Base.mjs';
+import Container     from '../../../src/container/Base.mjs';
 
 /**
- * @class NewWebsite.view.MainContainer
+ * @class NewWebsite.view.Viewport
  * @extends Neo.container.Viewport
  */
-class MainContainer extends Viewport {
+class Viewport extends BaseViewport {
     static config = {
         /**
-         * @member {String} className='NewWebsite.view.MainContainer'
+         * @member {String} className='NewWebsite.view.Viewport'
          * @protected
          */
-        className: 'NewWebsite.view.MainContainer',
+        className: 'NewWebsite.view.Viewport',
         /**
-         * @member {String[]} cls=['newwebsite-main-container']
+         * @member {String[]} cls=['newwebsite-viewport']
          */
-        cls: ['newwebsite-main-container'],
+        cls: ['newwebsite-viewport'],
         /**
          * @member {Object[]} items
          */
@@ -54,6 +54,6 @@ class MainContainer extends Viewport {
     }
 }
 
-Neo.applyClassConfig(MainContainer);
+Neo.applyClassConfig(Viewport);
 
-export default MainContainer;
+export default Viewport;

package/buildScripts/convertDesignTokens.mjs

@@ -41,7 +41,7 @@ function parseTokens(fileContent, prefix=tokenPrefix, map=[]) {
                 keys.forEach(objKey => {
                     if (objKey !== baseKey) {
                         modify   = value[objKey].$extensions?.['studio.tokens']?.modify;
-                        keyValue = `${modify.type}(${baseValue}, ${modify.value * 100}%)`;
+                        keyValue = `#{${modify.type}(${baseValue}, ${modify.value * 100}%)}`;
 
                         map.push([`${ns}-${objKey}`, keyValue]);
                     } else {

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.0'
+         * @member {String} version='6.10.2'
          */
-        version: '6.10.0'
+        version: '6.10.2'
     }
 
     /**

package/examples/tab/container/neo-config.json

@@ -3,5 +3,5 @@
     "basePath"   : "../../../",
     "environment": "development",
     "mainPath"   : "./Main.mjs",
-    "themes"     : ["neo-theme-dark", "neo-theme-light"]
+    "themes"     : ["neo-theme-dark", "neo-theme-light", "neo-theme-neo-light"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.0",
+    "version": "6.10.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -42,14 +42,14 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.4.2",
+        "@fortawesome/fontawesome-free": "^6.5.0",
         "autoprefixer": "^10.4.16",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^11.1.0",
         "cssnano": "^6.0.1",
         "envinfo": "^7.11.0",
-        "fs-extra": "^11.1.1",
+        "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^9.2.12",
         "neo-jsdoc": "1.0.1",

package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md

@@ -5,9 +5,9 @@ If you wish, you can create a workspace for yourself by running `npx neo-app` wo
 
 <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
 
-As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
+As you can see, a Neo.mjs workspace is a conventional npm package. If you run 
 the script `npm run server-start` from the workspace, Neo.mjs launches a web
-serve whose doc root is the workspace. 
+server whose doc root is the workspace. 
 
 <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/ServerRoot.png" style="height: 400px;">
 
@@ -32,19 +32,17 @@ as well as create new views classes, their controllers, and other application lo
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 
 <pre data-javascript>
-import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
 import ViewModel  from './MainViewModel.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
-        className: 'Foo.view.MainView',
-        
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {ntype: 'fit'},
-        items: [],
+        className : 'Foo.view.MainView',
+        controller: Controller,
+        model     : ViewModel,
+        layout    : {ntype: 'fit'},
+        items     : []
     }
 }
 
@@ -70,23 +68,22 @@ First, we need to import the class that defines buttons. Then we'll describe the
 `items:[].`
 
 <pre data-javascript>
-import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
 import ViewModel  from './MainViewModel.mjs';
-import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
-        className: 'Foo.view.MainView',
-        
-        controller: {module: Controller},
-        model: {module: ViewModel},
+        className : 'Foo.view.MainView',
+        controller: Controller,
+        model     : ViewModel,
 
         layout: {ntype: 'fit'},
-        items: [{
+        items : [{
             module: Button,
-            text: 'Button'
-        }],
+            text  : 'Button'
+        }]
     }
 }
 

package/resources/data/deck/learnneo/p/MainThreadAddonIntro.md

@@ -20,8 +20,8 @@ example, the following statement logs the URL query string.
 
 
 <pre data-javascript>
-Neo.Main.getByPath('window.location.search')
-    .then(value=>console.log(value)); // Logs the search string
+const search = await Neo.Main.getByPath('window.location.search');
+console.log(search); // Logs the search string
 </pre>
 
 `Neo.Main` has some simple methods for accessing the 

package/resources/design-tokens/json/component.json

@@ -86,7 +86,7 @@
         }
       },
       "spacex": {
-        "value": "{sem.spacing.medium}",
+        "value": "{sem.spacing.xsmall}",
         "type": "spacing"
       },
       "spacey": {
@@ -273,15 +273,51 @@
       }
     },
     "tab": {
-      "foreground": {
-        "default": {
-          "value": "{sem.color.fg.neutral.default}",
+      "height": {
+        "value": "{sem.height.xxlarge}",
+        "type": "sizing"
+      },
+      "spacinghorizontal": {
+        "value": "{sem.spacing.medium}",
+        "type": "spacing"
+      },
+      "gap": {
+        "value": "{sem.spacing.xsmall}",
+        "type": "spacing"
+      },
+      "strip": {
+        "height": {
+          "value": "3px",
+          "type": "sizing"
+        },
+        "selected": {
+          "value": "{sem.color.fg.neutral.contrast}",
+          "type": "color"
+        },
+        "unselected": {
+          "value": "transparent",
           "type": "color"
         }
       },
-      "height": {
-        "value": "{sem.height.xlarge}",
-        "type": "sizing"
+      "borderradius": {
+        "value": "{sem.borderradius.large}",
+        "type": "borderRadius"
+      },
+      "unselected": {
+        "bg": {
+          "default": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{sem.color.bg.neutral.hover}",
+            "type": "color"
+          },
+          "active": {
+            "value": "{sem.color.bg.neutral.active}",
+            "type": "color"
+          }
+        }
       }
     }
   }

package/resources/design-tokens/json/core.json

@@ -1,5 +1,18 @@
 {
   "green": {
+    "50": {
+      "value": "{green.500}",
+      "type": "color",
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {
+            "type": "lighten",
+            "value": "0.85",
+            "space": "hsl"
+          }
+        }
+      }
+    },
     "100": {
       "value": "{green.500}",
       "type": "color",
@@ -111,55 +124,55 @@
   },
   "spacing": {
     "2": {
-      "value": "2",
+      "value": "2px",
       "type": "spacing"
     },
     "4": {
-      "value": "4",
+      "value": "4px",
       "type": "spacing"
     },
     "8": {
-      "value": "8",
+      "value": "8px",
       "type": "spacing"
     },
     "12": {
-      "value": "12",
+      "value": "12px",
       "type": "spacing"
     },
     "16": {
-      "value": "16",
+      "value": "16px",
       "type": "spacing"
     },
     "20": {
-      "value": "20",
+      "value": "20px",
       "type": "spacing"
     },
     "24": {
-      "value": "24",
+      "value": "24px",
       "type": "spacing"
     },
     "32": {
-      "value": "32",
+      "value": "32px",
       "type": "spacing"
     },
     "40": {
-      "value": "40",
+      "value": "40px",
       "type": "spacing"
     },
     "48": {
-      "value": "48",
+      "value": "48px",
       "type": "spacing"
     },
     "64": {
-      "value": "64",
+      "value": "64px",
       "type": "spacing"
     },
     "80": {
-      "value": "80",
+      "value": "80px",
       "type": "spacing"
     },
     "96": {
-      "value": "96",
+      "value": "96px",
       "type": "spacing"
     }
   },
@@ -207,15 +220,15 @@
   },
   "borderradius": {
     "0": {
-      "value": "0",
+      "value": "0px",
       "type": "borderRadius"
     },
     "4": {
-      "value": "4",
+      "value": "4px",
       "type": "borderRadius"
     },
     "8": {
-      "value": "8",
+      "value": "8px",
       "type": "borderRadius"
     }
   },
@@ -229,27 +242,31 @@
   },
   "height": {
     "2": {
-      "value": "2",
+      "value": "2px",
       "type": "sizing"
     },
     "4": {
-      "value": "4",
+      "value": "4px",
       "type": "sizing"
     },
     "8": {
-      "value": "8",
+      "value": "8px",
       "type": "sizing"
     },
     "16": {
-      "value": "16",
+      "value": "16px",
       "type": "sizing"
     },
     "32": {
-      "value": "32",
+      "value": "32px",
       "type": "sizing"
     },
     "48": {
-      "value": "48",
+      "value": "48px",
+      "type": "sizing"
+    },
+    "56": {
+      "value": "56px",
       "type": "sizing"
     }
   },
@@ -302,7 +319,7 @@
         "type": "fontFamilies"
       },
       "sans": {
-        "value": "Source Sans Pro",
+        "value": "Source Sans 3",
         "type": "fontFamilies"
       },
       "serif": {
@@ -312,7 +329,7 @@
     },
     "fontsize": {
       "body": {
-        "value": "18px",
+        "value": "16px",
         "type": "fontSizes"
       },
       "h1": {
@@ -336,6 +353,10 @@
       "bold": {
         "value": "700",
         "type": "fontWeights"
+      },
+      "medium": {
+        "value": "500",
+        "type": "fontWeights"
       }
     },
     "lineheight": {

package/resources/design-tokens/json/semantic.json

@@ -56,7 +56,7 @@
             "type": "color"
           },
           "background": {
-            "value": "{green.100}",
+            "value": "{green.50}",
             "type": "color"
           },
           "disabled": {
@@ -111,6 +111,10 @@
         "contrast": {
           "value": "{black}",
           "type": "color"
+        },
+        "focus": {
+          "value": "#5595F5",
+          "type": "color"
         }
       }
     },
@@ -176,6 +180,10 @@
       "xlarge": {
         "value": "{height.48}",
         "type": "sizing"
+      },
+      "xxlarge": {
+        "value": "{height.56}",
+        "type": "sizing"
       }
     },
     "borderradius": {
@@ -225,6 +233,28 @@
           "lineHeight": "{core.lineheight.paragraph}"
         },
         "type": "typography"
+      },
+      "label-medium": {
+        "value": {
+          "fontFamily": "{core.fontfamily.sans}",
+          "fontSize": "{core.fontsize.body}",
+          "fontWeight": "{core.fontweight.medium}"
+        },
+        "type": "typography"
+      },
+      "label-regular": {
+        "value": {
+          "fontFamily": "{core.fontfamily.sans}",
+          "fontWeight": "{core.fontweight.regular}",
+          "fontSize": "{core.fontsize.body}"
+        },
+        "type": "typography"
+      }
+    },
+    "borderwidth": {
+      "focus": {
+        "value": "3px",
+        "type": "borderWidth"
       }
     }
   }

package/resources/scss/src/apps/learnneo/Viewport.scss

@@ -1,3 +1,3 @@
-.learnneo-maincontainer {
-    background-color: #f2f2f2;
-}
+.learnneo-viewport {
+
+}

package/resources/scss/src/apps/learnneo/home/HeaderToolbar.scss

@@ -0,0 +1,24 @@
+.learnneo-header-toolbar {
+    margin-bottom: 1px; // fakes a bottom border
+
+    .logo {
+        margin-left: 1em;
+    }
+
+    .neo-button {
+        margin-left: 10px;
+
+        &.no-text {
+            margin-left: 0;
+            width      : 1.2em;
+
+            &.github-button {
+                margin-left: 5em;
+            }
+
+            .neo-button-glyph {
+                font-size: 24px;
+            }
+        }
+    }
+}

package/resources/scss/src/apps/learnneo/home/MainContainer.scss

@@ -0,0 +1,7 @@
+.learnneo-maincontainer {
+    background-color: #f2f2f2;
+
+    .main-content-splitter{
+        margin: 0 2px;
+    }
+}