neo.mjs 6.10.3 → 6.10.5

package/apps/{learnneo/view → portal/view/learn}/LivePreview.mjs

@@ -1,18 +1,18 @@
-import Base from '../../../src/container/Base.mjs';
-import TabContainer from '../../../src/tab/Container.mjs';
-import TextArea from '../../../src/form/field/TextArea.mjs';
+import Base         from '../../../../src/container/Base.mjs';
+import TabContainer from '../../../../src/tab/Container.mjs';
+import TextArea     from '../../../../src/form/field/TextArea.mjs';
 
 /**
- * @class LearnNeo.view.LivePreview
+ * @class Portal.view.learn.LivePreview
  * @extends Neo.container.Base
  */
 class LivePreview extends Base {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.LivePreview'
+         * @member {String} className='Portal.view.learn.LivePreview'
          * @protected
          */
-        className: 'LearnNeo.view.LivePreview',
+        className: 'Portal.view.learn.LivePreview',
         value_: null,
         autoMount: true,
         autoRender: true,
@@ -22,7 +22,9 @@ class LivePreview extends Base {
          * @member {Object[]} items
          */
         items: [{
-            module: TabContainer,
+            module   : TabContainer,
+            reference: 'tab-container',
+
             items: [{
                 module: TextArea,
                 hideLabel: true,
@@ -38,15 +40,7 @@ class LivePreview extends Base {
                 reference: 'preview',
                 ntype: 'container'
             }]
-        }],
-        listeners: {
-            activeIndexChange: () => console.log('activeIndexChange')
-        }
-    }
-    onConstructed() {
-        console.log('constructed');
-        this.on('activeIndexChange', () => console.log('onConstructed'));
-        super.onConstructed();
+        }]
     }
 
     afterSetValue(value, oldValue) {
@@ -55,6 +49,14 @@ class LivePreview extends Base {
         }
     }
 
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        me.getReference('tab-container').on('activeIndexChange', me.onActiveIndexChange, me)
+    }
+
     doIt(button) {
         let source = this.getReference('source').getValue();
 
@@ -92,7 +94,7 @@ class LivePreview extends Base {
         });
         var params = [];
         var vars = [];
-        // Figure out the parts of the source we'll be running. 
+        // Figure out the parts of the source we'll be running.
         // o The promises/import() corresponding to the user's import statements
         // o The vars holding the name of the imported module based on the module name for each import
         // o The rest of the user-provided source
@@ -105,8 +107,8 @@ class LivePreview extends Base {
         //       const Button = ButtonModule.default;
         //       // Class declaration goes here...
         //   });
-        // Making the promise part of the eval seems weird, but it made it easier to 
-        // set up the import vars. 
+        // Making the promise part of the eval seems weird, but it made it easier to
+        // set up the import vars.
 
         let promises = moduleNameAndPath.map(item => {
             params.push(`${item.moduleName}Module`);
@@ -164,6 +166,17 @@ class LivePreview extends Base {
         }
         return null
     }
+
+    /**
+     * @param {Object} data
+     * @param {Neo.component.Base} data.item
+     * @param {Number} data.oldValue
+     * @param {String} data.source
+     * @param {Number} data.value
+     */
+    onActiveIndexChange(data) {
+        console.log('onActiveIndexChange', data)
+    }
 }
 
 Neo.applyClassConfig(LivePreview);

package/apps/{learnneo/view/home → portal/view/learn}/MainContainer.mjs

@@ -1,22 +1,21 @@
 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';
 
 /**
- * @class LearnNeo.view.home.MainContainer
+ * @class Portal.view.learn.MainContainer
  * @extends Neo.container.Base
  */
 class MainContainer extends Container {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.home.MainContainer'
+         * @member {String} className='Portal.view.learn.MainContainer'
          * @protected
          */
-        className: 'LearnNeo.view.home.MainContainer',
+        className: 'Portal.view.learn.MainContainer',
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */
@@ -29,38 +28,35 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module: HeaderToolbar
-        }, {
-            module: Container,
-            layout: {ntype: 'hbox', align: 'stretch'},
-
+            module  : Container,
+            layout  : 'fit',
+            minWidth: 350,
+            width   : 350,
+            cls     : 'sidenav-container',
             items: [{
-                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',
+                module   : ContentTreeList,
+                reference: 'tree',
                 listeners: {
-                    edit   : 'onContentEdit',
-                    refresh: 'onContentRefresh'
+                    contentChange: 'onContentChange',
                 }
             }]
+        }, {
+            module      : Splitter,
+            cls         : ['main-content-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/{learnneo/view/home → portal/view/learn}/MainContainerController.mjs

@@ -1,16 +1,16 @@
 import Controller from '../../../../src/controller/Component.mjs';
 
 /**
- * @class LearnNeo.view.home.MainContainerController
+ * @class Portal.view.learn.MainContainerController
  * @extends Neo.controller.Component
  */
 class MainContainerController extends Controller {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.home.MainContainerController'
+         * @member {String} className='Portal.view.learn.MainContainerController'
          * @protected
          */
-        className: 'LearnNeo.view.home.MainContainerController'
+        className: 'Portal.view.learn.MainContainerController'
     }
 
     /**

package/apps/{learnneo/view/home → portal/view/learn}/MainContainerModel.mjs

@@ -2,16 +2,16 @@ import Component from '../../../../src/model/Component.mjs';
 import Store     from '../../store/Content.mjs';
 
 /**
- * @class LearnNeo.view.home.MainContainerModel
+ * @class Portal.view.learn.MainContainerModel
  * @extends Neo.model.Component
  */
 class MainContainerModel extends Component {
     static config = {
         /**
-         * @member {String} className='LearnNeo.view.home.MainContainerModel'
+         * @member {String} className='Portal.view.learn.MainContainerModel'
          * @protected
          */
-        className: 'LearnNeo.view.home.MainContainerModel',
+        className: 'Portal.view.learn.MainContainerModel',
         /**
          * @member {Object} data
          */

package/apps/website/Overwrites.mjs

@@ -0,0 +1,16 @@
+Neo.overwrites = {
+    Neo: {
+        form: {
+            field: {
+                Base: {
+                    delayable: {
+                        fireChangeEvent    : null,
+                        fireUserChangeEvent: null
+                    }
+                }
+            }
+        }
+    }
+}
+
+export default Neo.overwrites;

package/apps/website/app.mjs

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

package/apps/website/view/blog/List.mjs

@@ -125,7 +125,7 @@ class List extends BaseList {
             valueRegEx = new RegExp(data.value, 'gi'),
             hasMatch, itemName, name, record;
 
-        me.vdom.cn.forEach((item, index) => {
+        me.getVdomRoot().cn.forEach((item, index) => {
             hasMatch = false;
             itemName = VDomUtil.getByFlag(item, 'name');
             record   = store.getAt(index);

package/buildScripts/webpack/development/webpack.config.appworker.mjs

@@ -99,7 +99,9 @@ export default env => {
         createStartingPoint(key.substr(1), 'apps');
     });
 
-    createStartingPoint('Docs', '');
+    if (fs.existsSync(path.join(cwd, 'docs'))) {
+        createStartingPoint('Docs', '');
+    }
 
     examplesPath = path.join(cwd, 'examples');
 

package/buildScripts/webpack/json/myApps.template.json

@@ -4,7 +4,7 @@
         "Docs",
         "Form",
         "Krausest",
-        "NewWebsite",
+        "Portal",
         "RealWorld",
         "RealWorld2",
         "SharedCovid",

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -108,7 +108,9 @@ export default env => {
         createStartingPoint(key.substr(1), 'apps');
     });
 
-    createStartingPoint('Docs', '');
+    if (fs.existsSync(path.join(cwd, 'docs'))) {
+        createStartingPoint('Docs', '');
+    }
 
     examplesPath = path.join(cwd, 'examples');
 

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.10.3",
+    "version": "6.10.5",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,7 +54,7 @@
         "inquirer": "^9.2.12",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.31",
+        "postcss": "^8.4.32",
         "sass": "^1.69.5",
         "siesta-lite": "5.5.2",
         "showdown": "^2.1.0",

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

@@ -18,7 +18,6 @@ and information is lost.
 <br>
 
 To show highlighted Neo.mjs source code use
-<pre>
 &lt;pre data-javascript>
 // Source code goes here
 &lt;/pre>
@@ -52,3 +51,7 @@ This is the item contents.
 This is the item contents.
 </details>
 
+<pre data-neo>
+let a = 1;
+</pre>
+

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

@@ -319,6 +319,28 @@
           }
         }
       }
+    },
+    "tooltip": {
+      "height": {
+        "value": "{height.24}",
+        "type": "sizing"
+      },
+      "spacinghorizontal": {
+        "value": "{sem.spacing.xsmall}",
+        "type": "spacing"
+      },
+      "fg": {
+        "value": "{sem.color.fg.neutral.inverted}",
+        "type": "color"
+      },
+      "bg": {
+        "value": "{sem.color.bg.neutral.contrast}",
+        "type": "color"
+      },
+      "borderradius": {
+        "value": "{sem.borderradius.medium}",
+        "type": "borderRadius"
+      }
     }
   }
 }

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

@@ -257,6 +257,10 @@
       "value": "16px",
       "type": "sizing"
     },
+    "24": {
+      "value": "24px",
+      "type": "sizing"
+    },
     "32": {
       "value": "32px",
       "type": "sizing"

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

@@ -40,6 +40,10 @@
           "disabled": {
             "value": "{gray.200}",
             "type": "color"
+          },
+          "contrast": {
+            "value": "{gray.900}",
+            "type": "color"
           }
         },
         "primary": {
@@ -82,6 +86,10 @@
           "disabled": {
             "value": "{gray.300}",
             "type": "color"
+          },
+          "inverted": {
+            "value": "{white}",
+            "type": "color"
           }
         },
         "primary": {

package/resources/examples/data/formSideNav.json

@@ -2,24 +2,24 @@
     "success": true,
 
     "data": [
-        {"id":  1, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "1. Basic data"},
-        {"id":  2, "cardIndex":    0, "isHeader": false, "isValid": null, "name": "Page 1"},
-        {"id":  3, "cardIndex":    1, "isHeader": false, "isValid": null, "name": "Page 2"},
-        {"id":  4, "cardIndex":    2, "isHeader": false, "isValid": null, "name": "Page 3"},
-        {"id":  5, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "2. Personal data"},
-        {"id":  6, "cardIndex":    3, "isHeader": false, "isValid": null, "name": "CheckBoxes"},
-        {"id":  7, "cardIndex":    4, "isHeader": false, "isValid": null, "name": "Radios"},
-        {"id":  8, "cardIndex":    5, "isHeader": false, "isValid": null, "name": "TextAreas"},
-        {"id":  9, "cardIndex":    6, "isHeader": false, "isValid": null, "name": "Fieldsets"},
-        {"id": 10, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "3. More data"},
-        {"id": 11, "cardIndex":    7, "isHeader": false, "isValid": null, "name": "NumberFields"},
-        {"id": 12, "cardIndex":    8, "isHeader": false, "isValid": null, "name": "HiddenFields"},
-        {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "SelectFields"},
-        {"id": 14, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "4. Optional data"},
-        {"id": 15, "cardIndex":   10, "isHeader": false, "isValid": null, "name": "ZipCodeFields"},
-        {"id": 16, "cardIndex":   11, "isHeader": false, "isValid": null, "name": "EmailFields"},
-        {"id": 17, "cardIndex":   12, "isHeader": false, "isValid": null, "name": "UrlFields"},
-        {"id": 18, "cardIndex":   13, "isHeader": false, "isValid": null, "name": "PhoneFields"},
-        {"id": 19, "cardIndex":   14, "isHeader": false, "isValid": null, "name": "CurrencyFields"}
+        {"id":  1, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "1. Basic data"},
+        {"id":  2, "cardIndex":    0, "formState": "clean", "isHeader": false, "name": "Page 1"},
+        {"id":  3, "cardIndex":    1, "formState": "clean", "isHeader": false, "name": "Page 2"},
+        {"id":  4, "cardIndex":    2, "formState": "clean", "isHeader": false, "name": "Page 3"},
+        {"id":  5, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "2. Personal data"},
+        {"id":  6, "cardIndex":    3, "formState": "clean", "isHeader": false, "name": "CheckBoxes"},
+        {"id":  7, "cardIndex":    4, "formState": "clean", "isHeader": false, "name": "Radios"},
+        {"id":  8, "cardIndex":    5, "formState": "clean", "isHeader": false, "name": "TextAreas"},
+        {"id":  9, "cardIndex":    6, "formState": "clean", "isHeader": false, "name": "Fieldsets"},
+        {"id": 10, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "3. More data"},
+        {"id": 11, "cardIndex":    7, "formState": "clean", "isHeader": false, "name": "NumberFields"},
+        {"id": 12, "cardIndex":    8, "formState": "clean", "isHeader": false, "name": "HiddenFields"},
+        {"id": 13, "cardIndex":    9, "formState": "clean", "isHeader": false, "name": "SelectFields"},
+        {"id": 14, "cardIndex": null, "formState": "clean", "isHeader": true,  "name": "4. Optional data"},
+        {"id": 15, "cardIndex":   10, "formState": "clean", "isHeader": false, "name": "ZipCodeFields"},
+        {"id": 16, "cardIndex":   11, "formState": "clean", "isHeader": false, "name": "EmailFields"},
+        {"id": 17, "cardIndex":   12, "formState": "clean", "isHeader": false, "name": "UrlFields"},
+        {"id": 18, "cardIndex":   13, "formState": "clean", "isHeader": false, "name": "PhoneFields"},
+        {"id": 19, "cardIndex":   14, "formState": "clean", "isHeader": false, "name": "CurrencyFields"}
     ]
 }

package/resources/scss/src/apps/portal/blog/Container.scss

@@ -0,0 +1,18 @@
+.website-blog-container {
+    .website-blog-searchfield {
+        transition: margin var(--website-transition-duration) ease-out;
+        width     : 240px;
+
+        @media (max-height: 400px), (max-width: 600px) {
+            margin: 5px;
+        }
+
+        @media (min-height: 401px) and (min-width: 601px) {
+            margin: 10px;
+        }
+    }
+
+    .website-blog-toolbar {
+        background-color: var(--website-blog-toolbar-background-color);
+    }
+}

package/resources/scss/src/apps/portal/blog/List.scss

@@ -0,0 +1,183 @@
+.website-blog-list.neo-list {
+    transition: padding var(--website-transition-duration) ease-out;
+
+    .neo-list-item {
+        cursor     : default;
+        display    : flex;
+        max-width  : 800px;
+        overflow   : hidden;
+        padding    : 0;
+        transition : height var(--website-transition-duration) ease-out, margin-bottom var(--website-transition-duration) ease-out;
+        white-space: normal;
+        width      : 100%;
+
+        .content {
+            flex: 1;
+        }
+
+        .neo-absolute {
+            position: absolute;
+        }
+
+        .neo-bold {
+            font-weight: 600;
+        }
+
+        .neo-highlight-search {
+            color: #5d83a7;
+        }
+
+        .neo-inner-content {
+            color      : #fff;
+            display    : inline-block;
+            margin-left: 10px;
+            text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition : font-size var(--website-transition-duration) ease-out;
+        }
+
+        .neo-full-size {
+            height: 100%;
+            width : 100%;
+        }
+
+        .neo-inner-details {
+            transition: line-height var(--website-transition-duration) ease-out;
+        }
+
+        .neo-item-bottom-position {
+            bottom    : 0;
+            left      : 0;
+            transition: margin var(--website-transition-duration) ease-out;
+        }
+
+        .neo-item-top-position {
+            color      : #fff;
+            right      : 0;
+            text-align : end;
+            text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition : font-size var(--website-transition-duration) ease-out, margin var(--website-transition-duration) ease-out;
+        }
+
+        .neo-relative {
+            position: relative;
+        }
+
+        .neo-title {
+            color          : #fff;
+            font-weight    : 600;
+            line-height    : 1;
+            text-decoration: none;
+            text-shadow    : 1px 1px 1px #000, 1px 1px 1px #fff;
+            transition     : color 250ms ease-out;
+
+            &:hover {
+                color: #5d83a7
+            }
+        }
+
+        .neo-top-20 {
+            align-items: center;
+            display    : flex;
+            transition : margin var(--website-transition-duration) ease-out;
+        }
+
+        .neo-user-image {
+            border-radius: 50%;
+            display      : inline-block;
+            transition   : height var(--website-transition-duration) ease-out, width var(--website-transition-duration) ease-out;
+        }
+
+        .preview-image {
+            background-blend-mode: overlay;
+            background-position  : 50% 50%;
+            background-size      : cover;
+            height               : 100%;
+        }
+    }
+
+    @media (max-height: 400px), (max-width: 600px) {
+        padding: 5px 5px 0 5px;
+
+        .neo-inner-content {
+            font-size: 12px;
+        }
+
+        .neo-inner-details {
+            line-height: 16px;
+        }
+
+        .neo-item-bottom-position {
+            margin: 9px 12px;
+            right : 15%;
+        }
+
+        .neo-item-top-position {
+            font-size: 12px;
+            left     : 15%;
+            margin   : 9px 12px;
+            top      : -200px;
+        }
+
+        .neo-list-item {
+            border-radius: 10px;
+            height       : 200px;
+            margin-bottom: 5px;
+        }
+
+        .neo-title {
+            font-size: 20px;
+        }
+
+        .neo-top-20 {
+            margin-top: 15px;
+        }
+
+        .neo-user-image {
+            height: 30px;
+            width : 30px;
+        }
+    }
+
+    @media (min-height: 401px) and (min-width: 601px) {
+        padding: 10px 10px 0 10px;
+
+        .neo-inner-content {
+            font-size: 16px;
+        }
+
+        .neo-inner-details {
+            line-height: 22px;
+        }
+
+        .neo-item-bottom-position {
+            margin: 30px 40px;
+            right : 30%;
+        }
+
+        .neo-item-top-position {
+            font-size: 16px;
+            left     : 30%;
+            margin   : 30px 40px;
+            top      : -400px;
+        }
+
+        .neo-list-item {
+            border-radius: 20px;
+            height       : 400px;
+            margin-bottom: 10px;
+        }
+
+        .neo-title {
+            font-size: 34px;
+        }
+
+        .neo-top-20 {
+            margin-top: 20px;
+        }
+
+        .neo-user-image {
+            height: 44px;
+            width : 44px;
+        }
+    }
+}