neo.mjs 6.15.3 → 6.15.4

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/Viewport.mjs

@@ -1,13 +1,23 @@
 import BaseViewport       from '../../../src/container/Viewport.mjs';
 import Container          from '../../../src/container/Base.mjs';
 import HeaderToolbar      from './HeaderToolbar.mjs';
+import NeoArray           from '../../../src/util/Array.mjs';
 import ViewportController from './ViewportController.mjs';
+import ViewportModel      from './ViewportModel.mjs';
 
 /**
  * @class Portal.view.Viewport
  * @extends Neo.container.Viewport
  */
 class Viewport extends BaseViewport {
+    /**
+     * Valid values for size
+     * @member {String[]} sizes=['large','medium','small','x-small',null]
+     * @protected
+     * @static
+     */
+    static sizes = ['large', 'medium', 'small', 'x-small', null]
+
     static config = {
         /**
          * @member {String} className='Portal.view.Viewport'
@@ -35,23 +45,76 @@ class Viewport extends BaseViewport {
                 {module: () => import('./blog/Container.mjs')},
                 {module: () => import('../../../docs/app/view/MainContainer.mjs')}
             ]
-        }]
+        }],
+        /**
+         * @member {Neo.model.Component} model=ViewportModel
+         */
+        model: ViewportModel,
+        /**
+         * Values are: large, medium, small, xSmall
+         * @member {String|null} size_=null
+         */
+        size_: null
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.addDomListeners([{resize: this.onResize, scope: this}])
     }
 
     /**
-     *
+     * Triggered after the size config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
      */
-    async onConstructed() {
-        super.onConstructed();
+    afterSetSize(value, oldValue) {
+        if (value) {
+            let me  = this,
+                cls = me.cls;
 
-        let me           = this,
-            data         = await Neo.Main.getByPath({path: 'location.search'}),
-            searchString = data?.substr(1),
-            search       = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
+            NeoArray.remove(cls, 'portal-size-' + oldValue);
+            NeoArray.add(   cls, 'portal-size-' + value);
+            me.cls = cls;
 
-        me.deck = search.deck || 'learnneo';
+            me.model.setData({size: value})
+        }
+    }
+
+    /**
+     * Triggered before the size config gets changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @returns {String|null}
+     * @protected
+     */
+    beforeSetSize(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'size')
+    }
+
+    /**
+     * @param {Number} width
+     * @returns {String}
+     */
+    getSize(width) {
+        if (width <=  640) {return 'x-small'}
+        if (width <= 1024) {return 'small'}
+        if (width <= 1296) {return 'medium'}
+        return 'large'
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onResize(data) {
+        let me = this;
 
-        me.addCls(me.deck)
+        if (me.id === data.id) {
+            me.size = me.getSize(data.borderBoxSize.inlineSize)
+        }
     }
 }
 

package/apps/portal/view/ViewportModel.mjs

@@ -0,0 +1,29 @@
+import Component from '../../../src/model/Component.mjs';
+
+/**
+ * @class Portal.view.ViewportModel
+ * @extends Neo.model.Component
+ */
+class ViewportModel extends Component {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.ViewportModel'
+         * @protected
+         */
+        className: 'Portal.view.ViewportModel',
+        /**
+         * @member {Object} data
+         */
+        data: {
+            /**
+             * Values are: large, medium, small, xSmall, null
+             * @member {String|null} size
+             */
+            size: null
+        }
+    }
+}
+
+Neo.setupClass(ViewportModel);
+
+export default ViewportModel;

package/apps/portal/view/learn/MainContainer.mjs

@@ -3,7 +3,7 @@ import ContentTreeList         from './ContentTreeList.mjs';
 import MainContainerController from './MainContainerController.mjs';
 import MainContainerModel      from './MainContainerModel.mjs';
 import PageContainer           from './PageContainer.mjs';
-import PageSectionsPanel       from './PageSectionsPanel.mjs';
+import PageSectionsContainer   from './PageSectionsContainer.mjs';
 import Splitter                from '../../../../src/component/Splitter.mjs';
 
 /**
@@ -30,6 +30,7 @@ class MainContainer extends Container {
          */
         items: [{
             module  : Container,
+            bind    : {hidden: data => data.size === 'x-small'},
             cls     : ['sidenav-container'],
             layout  : 'fit',
             minWidth: 350,
@@ -41,20 +42,16 @@ class MainContainer extends Container {
             }]
         }, {
             module      : Splitter,
+            bind        : {hidden: data => data.size === 'x-small'},
             cls         : ['main-content-splitter'],
             resizeTarget: 'previous',
             size        : 3
         }, {
             module: PageContainer
-        }, 
-        // {
-        //     module: Splitter,
-        //     cls   : ['main-content-splitter'],
-        //     size  : 3
-        // }, 
-        {
-            module   : PageSectionsPanel,
-            reference: 'page-sections-panel',
+        }, {
+            module   : PageSectionsContainer,
+            bind     : {hidden: data => data.size !== 'large'},
+            reference: 'page-sections-container',
             width    : 250
         }],
         /**

package/apps/portal/view/learn/MainContainerController.mjs

@@ -184,7 +184,7 @@ class MainContainerController extends Controller {
      * @param {Object} data
      */
     onIntersect(data) {
-        let panel    = this.getReference('page-sections-panel'),
+        let panel    = this.getReference('page-sections-container'),
             list     = panel.list,
             recordId = parseInt(data.data.recordId);
 

package/apps/portal/view/learn/PageSectionsContainer.mjs

@@ -0,0 +1,51 @@
+import Container        from '../../../../src/container/Base.mjs';
+import PageSectionsList from './PageSectionsList.mjs';
+
+/**
+ * @class Portal.view.learn.PageSectionsContainer
+ * @extends Neo.container.Base
+ */
+class PageSectionsContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.learn.PageSectionsContainer'
+         * @protected
+         */
+        className: 'Portal.view.learn.PageSectionsContainer',
+        /**
+         * @member {String[]} cls=['portal-page-sections-container']
+         */
+        cls: ['portal-page-sections-container'],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            vdom:
+            {cn: [
+                {tag: 'h3', html: 'On this page'}
+            ]}
+
+        }, {
+            module   : PageSectionsList,
+            reference: 'list'
+        }],
+        /**
+         * @member {Object} layout={ntype:'vbox'}
+         */
+        layout: {
+            ntype: 'vbox'
+        }
+    }
+
+    /**
+     * Convenience shortcut
+     * @member {Portal.view.learn.PageSectionsList} list
+     */
+    get list() {
+        return this.getReference('list')
+    }
+}
+
+Neo.setupClass(PageSectionsContainer);
+
+export default PageSectionsContainer;

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.15.3",
+    "version": "6.15.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -49,7 +49,7 @@
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.0.0",
-        "cssnano": "^6.1.1",
+        "cssnano": "^6.1.2",
         "envinfo": "^7.11.1",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",

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

@@ -1,5 +1,3 @@
-## Introduction
-
 The purpose of this tutorial is to let you see the structure of a Neo.mjs workspace,
 and the structure of an application.
 

package/resources/data/deck/learnneo/pages/ComponentsAndContainers.md

@@ -1,5 +1,3 @@
-## Introduction
-
 Neo.mjs views are made up of components and containers. 
 
 A component is a visual widget, such as a button, label, or text field. A container is a visual 
@@ -88,7 +86,7 @@ class MainView extends Container {
         layout   : 'fit', // If no configs are needed, simply use the ntype of the layout
         items    : [{
             ntype: 'component',
-            style: {backgroundColor: 'lightgreen'}, // The camel-cased property converts to the hyphenated css style
+            style: {backgroundColor: 'lightgreen'}, // The camel-cased backgroundColor property converts to the hyphenated css style
         }]
     }
 }
@@ -98,7 +96,7 @@ Neo.setupClass(MainView);
 
 ### Vbox and hbox
 
-Items are arranged vertically or horizontally. On-axis and off-axis alignment can be specified.
+With `vbox` and `hbox`, items are arranged vertically or horizontally.
 
 <pre data-neo>
 import Button    from '../../../../src/button/Base.mjs';
@@ -125,7 +123,7 @@ Neo.setupClass(MainView);
 
 ### Card
 
-Having multiple child items, one of which is visible. 
+A card container has multiple child items, one of which is visible. 
 
 <pre data-neo>
 import Button    from '../../../../src/button/Base.mjs';
@@ -146,7 +144,7 @@ class MainView extends Base {
                 iconPosition: 'right',
                 handler: data => {
                     const container = data.component.up('container').getReference('cardContainer');
-                    container.layout.activeIndex = (container.layout.activeIndex +1) % container.items.length;
+                    container.layout.activeIndex = (container.layout.activeIndex + 1) % container.items.length;
                 }
             }]
         }, {
@@ -156,13 +154,13 @@ class MainView extends Base {
             flex: 1,
             items: [{
                 ntype : 'component',
-                style: {backgroundColor: 'lightsalmon'}, // The camel-cased property converts to the hyphated css style
+                style: {backgroundColor: 'lightsalmon'} // https://drafts.csswg.org/css-color/#named-colors
             }, {
                 ntype : 'component',
-                style: {backgroundColor: 'darkseagreen'} // https://drafts.csswg.org/css-color/#named-colors
+                style: {backgroundColor: 'darkseagreen'} // Who came up with these names?
             }, {
                 ntype : 'component',
-                style: {backgroundColor: 'cornflowerblue'} // Who came up with these names?
+                style: {backgroundColor: 'cornflowerblue'} 
             }]
         }]
     }
@@ -174,7 +172,42 @@ Neo.setupClass(MainView);
 
 
 
-## Reusing containers
+## Reusing components
+
+Neo.mjs is class-based, and thus, any component or container can be defined as its own class, and reused like any
+other component in the framework.
+
+<pre data-neo>
+import Button    from '../../../../src/button/Base.mjs';
+// In practice this would be some handy reusable component
+class MySpecialButton extends Button {
+    static config = {
+        className: 'Example.view.MySpecialButton',
+        iconCls: 'far fa-face-grin-wide',
+        ui: 'ghost'
+    }
+}
+
+Neo.setupClass(MySpecialButton);
+
+
+import Container from '../../../../src/container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            iconCls: 'fa fa-home',
+            text   : 'A framework button'
+        }, {
+            module : MySpecialButton,
+            text   : 'My special button'
+        }]
+    }
+}
 
+Neo.setupClass(MainView);
+</pre>
 
-## Lifecycle methods

package/resources/data/deck/learnneo/pages/Config.md

@@ -1,5 +1,3 @@
-## Introduction 
-
 As you've probably noticed, Neo.mjs classes have a `static config` property. 
 
 The config describes properties you can specify as you create an instance of the class.

package/resources/data/deck/learnneo/pages/CustomComponents.md

@@ -0,0 +1,45 @@
+## Introduction
+
+Neo.mjs is class-based, which means you're free to extend any component (or any other Neo.mjs class).
+
+
+## Overriding ancestor configs
+
+## Introducing new configs
+
+## Lifecycle config properties
+
+<pre data-neo>
+import Button    from '../../../../src/button/Base.mjs';
+// In practice this would be some handy reusable component
+class MySpecialButton extends Button {
+    static config = {
+        className: 'Example.view.MySpecialButton',
+        iconCls: 'far fa-face-grin-wide',
+        ui: 'ghost'
+    }
+}
+
+Neo.setupClass(MySpecialButton);
+
+
+import Container from '../../../../src/container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            iconCls: 'fa fa-home',
+            text   : 'A framework button'
+        }, {
+            module : MySpecialButton,
+            text   : 'My special button'
+        }]
+    }
+}
+
+Neo.setupClass(MainView);
+</pre>
+

package/resources/data/deck/learnneo/pages/DescribingTheUI.md

@@ -1,5 +1,3 @@
-## Introduction 
-
 A Neo.mjs view is comprised of components and containers. A component is a visual widget, like a button,
 and a container is a visual collection of components. 
 

package/resources/data/deck/learnneo/pages/Earthquakes.md

@@ -1,5 +1,3 @@
-## Introduction 
-
 In this topic you'll create an application that fetches data on earthquakes in Iceland,
 and show the information in two views: a table, and a map.
 

package/resources/data/deck/learnneo/pages/Events.md

@@ -1,5 +1,3 @@
-## Introduction
-
 All components fire events. For example, form fields fire a `change` event, various 
 focus events, and others. Some other types fire events too, such as `Neo.data.Store`, 
 which fires a `load` event after the store is loaded with data.

package/resources/data/deck/learnneo/pages/Extending.md

@@ -1,4 +1,3 @@
-
 In theory, a Neo.mjs app could be defined in a single `.mjs` source file. But that would be very hard to 
 maintain, and any reusable configs would have to be duplicated. Instead, each of your views and reusable 
 widgets will be defined as its own class. The result is simpler views which are inherently reusable and easier 

package/resources/data/deck/learnneo/pages/References.md

@@ -1,5 +1,3 @@
-## Introduction
-
 Controllers often need to get references to components in order to update 
 the UI or access component properties. 
 There are two common ways of doing that:

package/resources/data/deck/learnneo/pages/Setup.md

@@ -1,5 +1,3 @@
-## Introduction
-
 Setting up Neo.mjs is pretty easy — all you have to do is confirm that you have some required
 software then follow a single npx script.
 

package/resources/data/deck/learnneo/tree.json

@@ -23,9 +23,9 @@
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
         {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle"},
         {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
-        {"name": "Components and Containers",               "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
+        {"name": "Component and Container Basics",          "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
         {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts"},
-        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": false, "id": "CustomComponents"},
+        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": true,  "id": "CustomComponents"},
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},
         {"name": "Tables (Stores)",                         "parentId": "InDepth",           "isLeaf": false, "id": "Tables"},
         {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",           "isLeaf": false, "id": "InDepthComponentModels"},

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -1,25 +1,25 @@
 .learn-content {
-
-    max-width: 900px;
-    padding: 0 250px 0 3rem;
-    margin: 0 auto;
     background-color: white;
-    border-radius: 8px;
-    letter-spacing: 1px;
-    overflow: unset;
+    border-radius   : 8px;
+    letter-spacing  : 1px;
+    margin          : 0 auto;
+    max-width       : 900px;
+    overflow        : unset;
+    padding         : 0 3rem;
+    width           : -webkit-fill-available;
 
     pre[data-javascript] {
+        border       : thin solid lightgray;
         border-radius: 4px;
-        padding: 12px;
-        border: thin solid lightgray;
+        padding      : 12px;
     }
 
     p {
-        margin: 0.5em 0em 0.7em 0em;
+        margin: 0.5em 0 0.7em 0;
     }
 
     details summary {
-        cursor: pointer;
+        cursor    : pointer;
         transition: margin 300ms ease-out;
     }
 
@@ -28,12 +28,11 @@
     }
 
     details summary {
-        list-style: none;
-        color: #555;
-        display: flex;
-        /* also removes the list marker */
         align-items: center;
+        color      : #555;
+        display    : flex;
         font-weight: bold;
+        list-style : none;
     }
 
     details summary::before {
@@ -45,11 +44,11 @@
     }
 
     details summary::before {
-        color: #c4c4c4;
+        color      : #c4c4c4;
         font-family: var(--fa-style-family, "Font Awesome 6 Free");
-        font-size: 1em;
+        font-size  : 1em;
         font-weight: var(--fa-style, 900);
-        margin: 0.4em 0.4em 0.4em 0;
+        margin     : 0.4em 0.4em 0.4em 0;
     }
 
     summary::-webkit-details-marker {
@@ -61,8 +60,8 @@
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         transition: 0.3s;
         /* Add some padding inside the card container */
-        padding: 2px 16px;
-        font-size: 1em;
+        padding      : 2px 16px;
+        font-size    : 1em;
         margin-bottom: 1em;
     }
 
@@ -71,3 +70,9 @@
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
     }
 }
+
+.portal-size-large {
+    .learn-content {
+        padding: 0 250px 0 3rem;
+    }
+}

package/resources/scss/src/apps/portal/learn/LivePreview.scss

@@ -1,8 +1,29 @@
 .learn-live-preview {
-    textarea {
-        height: 100%;
-        font-family: monospace !important;
-    }
-
     margin-bottom: 2em;
-}
+
+    .live-preview-container {
+        border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+        box-shadow   : rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+        overflow     : hidden;
+
+        .neo-tab-header-toolbar {
+            background-color       : var(--sem-color-surface-neutral-default);
+            border                 : 1px solid #e6e6e6;
+            border-top-left-radius : calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            border-top-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            padding                : var(--cmp-tab-strip-height);
+        }
+
+        .neo-tab-strip {
+            margin-top: calc(var(--cmp-tab-strip-height) * (-1) - 1px);
+        }
+
+        .neo-tab-content-container {
+            background-color          : transparent;
+            border                    : 1px solid #e6e6e6;
+            border-bottom-left-radius : calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            border-bottom-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            border-top                : 0;
+        }
+    }
+}