neo.mjs 4.0.91 → 4.0.92

package/buildScripts/createClass.mjs

@@ -118,7 +118,9 @@ if (programOpts.info) {
                 'core.Base',
                 'data.Model',
                 'data.Store',
-                'model.Component'
+                'model.Component',
+                'tab.Container',
+                'table.Container'
             ]
         });
     }
@@ -581,6 +583,19 @@ if (programOpts.info) {
             `        className: '${className}'`
         );
 
+        baseClass === 'table.Container' && addComma(classContent).push(
+            "        /*",
+            "         * @member {Object[]} columns",
+            "         */",
+            "        columns: [{",
+            "            dataField: 'id',",
+            "            text     : 'Id'",
+            "        }, {",
+            "            dataField: 'name',",
+            "            text     : 'Name'",
+            "        }]"
+        );
+
         baseClass === 'data.Model' && addComma(classContent).push(
             "        /*",
             "         * @member {Object[]} fields",
@@ -598,6 +613,27 @@ if (programOpts.info) {
             "        items: []"
         );
 
+        baseClass === 'tab.Container' && addComma(classContent).push(
+            "        /*",
+            "         * @member {Object[]} items",
+            "         */",
+            "        items: [{",
+            "            ntype: 'component',",
+            "",
+            "            tabButtonConfig: {",
+            "                iconCls: 'fa fa-home',",
+            "                text   : 'Tab 1'",
+            "            }",
+            "        }, {",
+            "            ntype: 'component',",
+            "",
+            "            tabButtonConfig: {",
+            "                iconCls: 'fa fa-play-circle',",
+            "                text   : 'Tab 2'",
+            "            }",
+            "        }]",
+        );
+
         isSingleton && addComma(classContent).push(
             "        /*",
             "         * @member {Boolean} singleton=true",
@@ -642,6 +678,8 @@ if (programOpts.info) {
     }
 
     function guessBaseClass(className) {
+        className = className.toLowerCase();
+
         if (className.includes('.model.')) {
             return 'data.Model';
         }
@@ -650,14 +688,22 @@ if (programOpts.info) {
             return 'data.Store';
         }
 
-        if (className.endsWith('Controller')) {
+        if (className.endsWith('controller')) {
             return 'controller.Component';
         }
 
-        if (className.endsWith('Model')) {
+        if (className.endsWith('model')) {
             return 'model.Component';
         }
 
+        if (className.includes('table')) {
+            return 'table.Container';
+        }
+
+        if (className.includes('tab')) {
+            return 'tab.Container';
+        }
+
         return 'container.Base';
     }
 }

package/examples/component/carousel/MainContainer.mjs

@@ -44,7 +44,40 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return Neo.create(Carousel, {
             height: 500,
-            width : 500
+            width : 500,
+            // will automatically change to the next extry every 5500 ms
+            // if not set or 0, this will show arrows to navigate
+            // cannot be changed after created
+            autoRun: 5500,
+            store: {
+                data: [{
+                    "quote": "We love the German inspired dishes on the menu",
+                    "publisher": "Trip Advisor",
+                    "date": "Dezember 2020"
+                },{
+                    "quote": "Everything about this place was excellent, from start to finish",
+                    "publisher": "Trip Advisor",
+                    "date": "Dezember 2021"
+                },{
+                    "quote": "We had three courses and everything was great",
+                    "publisher": "Trip Advisor",
+                    "date": "September 2020"
+                },{
+                    "quote": "Excellent Food, Wine and Service",
+                    "publisher": "Best Food",
+                    "date": "August 2020"
+                }]
+            },
+            // custom item cls
+            itemCls: 'example-carousel-item',
+            // each item will be created like the itemTpl structure
+            itemTpl: data => [{
+                cls: 'example-quote',
+                html: data.quote
+            }, {
+                cls: 'example-details',
+                html: `${data.publisher} - ${data.date}`
+            }]
         });
     }
 }

package/examples/component/coronaGallery/MainContainer.mjs

@@ -336,8 +336,8 @@ class MainContainer extends Viewport {
     construct(config) {
         super.construct(config);
 
-        const me  = this,
-              url = 'https://corona.lmao.ninja/v3/covid-19/countries';
+        let me  = this,
+            url = 'https://disease.sh/v3/covid-19/countries';
 
         me.gallery = Neo.create({
             module: CountryGallery,

package/examples/component/coronaHelix/MainContainer.mjs

@@ -411,8 +411,8 @@ class MainContainer extends Viewport {
     construct(config) {
         super.construct(config);
 
-        const me  = this,
-              url = 'https://corona.lmao.ninja/v3/covid-19/countries';
+        let me  = this,
+            url = 'https://disease.sh/v3/covid-19/countries';
 
         me.helix = Neo.create({
             module: CountryHelix,

package/examples/model/dialog/EditUserDialog.mjs

@@ -34,14 +34,14 @@ class EditUserDialog extends Dialog {
          */
         items: [{
             module    : TextField,
-            bind      : {value: data => `${data.user.firstname}`},
+            bind      : {value: data => data.user.firstname},
             flex      : 'none',
             labelText : 'Firstname:',
             labelWidth: 110,
             listeners : {change: 'onFirstnameTextFieldChange'}
         }, {
             module    : TextField,
-            bind      : {value: data => `${data.user.lastname}`},
+            bind      : {value: data => data.user.lastname},
             flex      : 'none',
             labelText : 'Lastname:',
             labelWidth: 110,

package/examples/sitemap/MainContainer.mjs

@@ -1,6 +1,6 @@
 import ConfigurationViewport from '../ConfigurationViewport.mjs';
 import RangeField            from '../../src/form/field/Range.mjs';
-import SiteMapContainer      from '../../src/sitemap/Container.mjs';
+import SiteMapComponent      from '../../src/sitemap/Component.mjs';
 
 /**
  * @class Neo.examples.sitemap.MainContainer
@@ -36,11 +36,15 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createExampleComponent() {
-        return Neo.create(SiteMapContainer, {
+        return Neo.create(SiteMapComponent, {
             height: 600,
             width : 800,
 
-            itemStore: {
+            myHandler(record) {
+                console.log('myHandler', record);
+            },
+
+            store: {
                 data: [
                     {id:  1, column: 0, name: 'Group 1', level: 0},
                     {id:  2, column: 0, name: 'Item 1',  level: 1, action: 'item1'},
@@ -48,7 +52,7 @@ class MainContainer extends ConfigurationViewport {
                     {id:  4, column: 0, name: 'Item 3',  level: 2, action: 'https://github.com/neomjs/neo', actionType: 'url'},
                     {id:  5, column: 0, name: 'Item 4',  level: 2, disabled: true},
                     {id:  6, column: 1, name: 'Group 2', level: 0},
-                    {id:  7, column: 1, name: 'Item 1',  level: 1},
+                    {id:  7, column: 1, name: 'Item 1',  level: 1, action: 'myHandler', actionType: 'handler'},
                     {id:  8, column: 1, name: 'Item 2',  level: 1, hidden: true},
                     {id:  9, column: 1, name: 'Item 3',  level: 1},
                     {id: 10, column: 1, name: 'Item 4',  level: 2}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.91",
+    "version": "4.0.92",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -40,24 +40,24 @@
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.2",
-        "@material/mwc-button": "^0.26.1",
-        "@material/mwc-textfield": "^0.26.1",
+        "@material/mwc-button": "^0.27.0",
+        "@material/mwc-textfield": "^0.27.0",
         "autoprefixer": "^10.4.8",
         "chalk": "^5.0.1",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.4.0",
-        "cssnano": "^5.1.12",
+        "cssnano": "^5.1.13",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^9.1.0",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.14",
-        "sass": "^1.54.3",
+        "postcss": "^8.4.16",
+        "sass": "^1.54.4",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
-        "webpack-dev-server": "4.9.3",
+        "webpack-dev-server": "4.10.0",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/sitemap/{Container.scss → Component.scss}

@@ -1,5 +1,6 @@
 .neo-sitemap {
     border : 1px solid v(panel-border-color);
+    display: flex;
     padding: 30px 100px 60px;
 
     .neo-action {
@@ -9,7 +10,8 @@
         text-decoration: none;
     }
 
-    .neo-action[href] {
+    .neo-action[href],
+    .neo-action-handler {
         &:hover {
             text-decoration: underline;
         }
@@ -33,6 +35,8 @@
     }
 
     .neo-sitemap-column {
+        flex: 1;
+
         &:not(:last-child) {
             border-right: 1px solid v(panel-border-color);
             margin-right: 25px;

package/src/component/Carousel.mjs

@@ -20,6 +20,11 @@ class Carousel extends Component {
      * @member {String[]} positionArray
      */
     positionArray = ['neo-carousel--translate-x-full', 'neo-carousel-translate-x-0', 'neo-carousel-translate-x-full']
+    /**
+     * keeps track of the data for the onClickEvent
+     * @type {null}
+     */
+    itemData = {}
 
     static getConfig() {return {
         /**
@@ -57,8 +62,14 @@ class Carousel extends Component {
          * but it is a string instead of surrounding "`"
          * @member {String|null} tpl=null
          * @example
-         *     record = {foo: ... , bar: ...}
-         *     "[{cls: 'css-foo-class', html: '${foo}'}, {html: '${baa}'}]"
+         *      record = {foo: ... , bar: ...}
+         *      data => [{
+         *          cls: 'css-foo-class',
+         *          html: data.foo
+         *      },
+         *      {
+         *          html: data.baa
+         *      }]"
          */
         itemTpl_: null,
         /**
@@ -91,14 +102,18 @@ class Carousel extends Component {
         let me           = this,
             domListeners = me.domListeners;
 
-        if(me.autoRun) return;
-
         domListeners.push({
             click: {
                 fn      : me.onCarouselBtnClick,
                 delegate: '.neo-carousel-btn',
                 scope   : me
             }
+        }, {
+            click: {
+                fn      : me.onClick,
+                delegate: '.neo-carousel-item',
+                scope   : me
+            }
         });
 
         me.domListeners = domListeners;
@@ -146,25 +161,6 @@ class Carousel extends Component {
         value?.getCount() > 0 && me.onStoreLoad();
     }
 
-    /**
-     * Ensure the itemTpl is setup correctly to match a valid JSON
-     * @param {String|null} value
-     * @param {String|null} oldValue
-     * @returns {String}
-     * @protected
-     */
-    beforeSetItemTpl(value, oldValue) {
-        if (value) {
-            value = value.replaceAll('\'', '"');
-
-            value = value.replace(/(\w+:)|(\w+ :)/g, function(matchedStr) {
-                return `"${matchedStr.substring(0, matchedStr.length - 1)}":`;
-            });
-        }
-
-        return value;
-    }
-
     /**
      * Triggered before the store config gets changed.
      * @param {Neo.data.Store|Object|null} value
@@ -207,16 +203,18 @@ class Carousel extends Component {
             positionArray = me.positionArray,
             store         = me.store,
             data          = store.getAt(recordIndex),
-            itemTpl       = me.#formatTpl(me.itemTpl, data),
+            cn            = me.itemTpl(data),
 
         newItem = {
             cls: [positionArray[positionIndex], 'neo-carousel-item'],
-            cn : itemTpl,
+            cn,
             recordIndex
         };
 
         itemCls && newItem.cls.push(itemCls);
 
+        me.itemData[positionIndex] = data;
+
         return newItem;
     }
 
@@ -273,6 +271,48 @@ class Carousel extends Component {
         me.vdom = vdom;
     }
 
+    /**
+     * Check if the user clicked an item or the container
+     * @param data
+     */
+    onClick(data) {
+        let me = this,
+            item;
+
+        if (data.path[0].id === me.id) {
+            me.onContainerClick(data);
+        } else {
+            for (item of data.path) {
+                if (item.cls.includes(me.itemCls)) {
+                    me.onItemClick(item, data);
+                    break;
+                }
+            }
+        }
+    }
+
+    /**
+     * If the user wants to listen for the container click
+     * @param {Object} data
+     */
+    onContainerClick(data){}
+
+    /**
+     * @param {Object} node
+     * @param {Object} data
+     */
+    onItemClick(node, data) {
+        let me = this;
+
+        /**
+         * The itemClick event fires when a click occurs on a list item
+         * @event itemClick
+         * @param {String} id the record matching the list item
+         * @returns {Object}
+         */
+        me.fire('itemClick', me.itemData[me.itemIndex]);
+    }
+
     /**
      * As soon as the store is loaded we want to
      * - create the three items
@@ -292,12 +332,6 @@ class Carousel extends Component {
     #arrayRotate(arr, n) {
         return n ? [...arr.slice(n, arr.length), ...arr.slice(0, n)] : arr;
     }
-
-    #formatTpl(tpl, record) {
-        let resultStr = tpl.replace(/\$\{[^\}]+\}/g, (m) => record[m.slice(2, -1).trim()]);
-
-        return JSON.parse(resultStr);
-    }
 }
 
 Neo.applyClassConfig(Carousel);

package/src/sitemap/{Container.mjs → Component.mjs}

@@ -1,12 +1,12 @@
-import Base            from '../container/Base.mjs';
+import Base            from '../component/Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
-import ItemStore       from './store/Items.mjs';
+import Store           from './Store.mjs';
 
 /**
- * @class Neo.sitemap.Container
- * @extends Neo.container.Base
+ * @class Neo.sitemap.Component
+ * @extends Neo.component.Base
  */
-class Container extends Base {
+class Component extends Base {
     static getStaticConfig() {return {
         /**
          * Valid values for itemHideMode
@@ -19,26 +19,19 @@ class Container extends Base {
 
     static getConfig() {return {
         /*
-         * @member {String} className='Neo.sitemap.Container'
+         * @member {String} className='Neo.sitemap.Component'
          * @protected
          */
-        className: 'Neo.sitemap.Container',
+        className: 'Neo.sitemap.Component',
         /*
          * @member {String} ntype='sitemap'
          * @protected
          */
         ntype: 'sitemap',
         /*
-         * @member {String[} cls=['neo-sitemap','neo-container']
+         * @member {String[} cls=['neo-sitemap']
          */
-        cls: ['neo-sitemap', 'neo-container'],
-        /*
-         * @member {Object} itemDefaults
-         */
-        itemDefaults: {
-            ntype: 'component',
-            cls  : ['neo-sitemap-column', 'neo-container']
-        },
+        cls: ['neo-sitemap'],
         /**
          * Valid values: removeDom, visibility
          * Defines if the component items should use css visibility:'hidden' or vdom:removeDom
@@ -46,13 +39,9 @@ class Container extends Base {
          */
         itemHideMode_: 'removeDom',
         /*
-         * @member {Neo.sitemap.store.Items|null} itemStore_=null
-         */
-        itemStore_: null,
-        /**
-         * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         * @member {Neo.sitemap.Store|null} store_=null
          */
-        layout: {ntype: 'hbox', align: 'stretch'}
+        store_: null
     }}
 
     /**
@@ -64,28 +53,32 @@ class Container extends Base {
         let me           = this,
             domListeners = me.domListeners;
 
-        domListeners.push({click: me.onItemClick, delegate: '.neo-action', scope: me});
+        domListeners.push(
+            {click: me.onItemHandlerClick, delegate: '.neo-action-handler', scope: me},
+            {click: me.onItemClick,        delegate: '.neo-action',         scope: me}
+        );
 
         me.domListeners = domListeners;
     }
 
     /**
-     * Triggered after the itemStore config got changed
-     * @param {Neo.sitemap.store.Items|null} value
-     * @param {Neo.sitemap.store.Items|null} oldValue
+     * Triggered after the store config got changed
+     * @param {Neo.sitemap.Store|null} value
+     * @param {Neo.sitemap.Store|null} oldValue
      * @protected
      */
-    afterSetItemStore(value, oldValue) {
-        let me = this;
-
-        value?.on({
-            filter      : 'onItemStoreFilter',
-            load        : 'onItemStoreLoad',
-            recordChange: 'onItemStoreRecordChange',
-            scope       : me
-        });
-
-        value?.getCount() > 0 && me.createColumns();
+    afterSetStore(value, oldValue) {
+        let listeners = {
+            filter      : 'onStoreFilter',
+            load        : 'onStoreLoad',
+            recordChange: 'onStoreRecordChange',
+            scope       : this
+        };
+
+        oldValue?.un(listeners);
+        value   ?.on(listeners);
+
+        value?.getCount() > 0 && this.createItems();
     }
 
     /**
@@ -99,32 +92,41 @@ class Container extends Base {
     }
 
     /**
-     * Triggered before the itemStore config gets changed.
+     * Triggered before the store config gets changed.
      * @param {Object|Neo.data.Store} value
      * @param {Object|Neo.data.Store} oldValue
      * @returns {Neo.data.Store}
      * @protected
      */
-    beforeSetItemStore(value, oldValue) {
+    beforeSetStore(value, oldValue) {
         oldValue?.destroy();
-        return ClassSystemUtil.beforeSetInstance(value, ItemStore);
+        return ClassSystemUtil.beforeSetInstance(value, Store);
     }
 
     /**
      *
      */
-    createColumns() {
+    createItems() {
         let me          = this,
-            records     = me.itemStore.items,
+            records     = me.store.items,
             columnIndex = -1,
-            items       = [],
+            vdom        = me.vdom,
             action, column, item, record;
 
+        vdom.cn = [];
+
         for (record of records) {
             if (record.column !== columnIndex) {
                 columnIndex++;
-                column = {vdom: {cn: []}};
-                items.push(column);
+
+                column = {
+                    ...me.itemDefaults,
+                    cls: ['neo-sitemap-column'],
+                    cn : [],
+                    id : `${me.id}__column-${columnIndex}`
+                };
+
+                vdom.cn.push(column);
             }
 
             action = record.action;
@@ -163,10 +165,10 @@ class Container extends Base {
                 }
             }
 
-            column.vdom.cn.push(item);
+            column.cn.push(item);
         }
 
-        me.items = items;
+        me.vdom = vdom;
     }
 
     /**
@@ -181,9 +183,9 @@ class Container extends Base {
      * @param {String} vnodeId
      * @returns {String|Number} itemId
      */
-    getItemRecordId(vnodeId) {
+    getRecordId(vnodeId) {
         let itemId   = vnodeId.split('__')[1],
-            model    = this.itemStore.model,
+            model    = this.store.model,
             keyField = model?.getField(model.keyProperty),
             keyType  = keyField?.type.toLowerCase();
 
@@ -195,33 +197,43 @@ class Container extends Base {
     }
 
     /**
-     * Override as needed
+     * Override as needed (e.g. unmounting an overlay)
      * @param {Object} data
      */
     onItemClick(data) {}
 
+    /**
+     * @param {Object} data
+     */
+    onItemHandlerClick(data) {
+        let me     = this,
+            record = me.store.get(me.getRecordId(data.path[0].id));
+
+        me[record.action](record);
+    }
+
     /**
      *
      */
-    onItemStoreFilter() {
-        this.createColumns();
+    onStoreFilter() {
+        this.createItems();
     }
 
     /**
      *
      */
-    onItemStoreLoad() {
-        this.createColumns();
+    onStoreLoad() {
+        this.createItems();
     }
 
     /**
      *
      */
-    onItemStoreRecordChange() {
-        this.createColumns();
+    onStoreRecordChange() {
+        this.createItems();
     }
 }
 
-Neo.applyClassConfig(Container);
+Neo.applyClassConfig(Component);
 
-export default Container;
+export default Component;

package/src/sitemap/{model/Item.mjs → Model.mjs}

@@ -1,16 +1,16 @@
-import Model from '../../data/Model.mjs';
+import BaseModel from '../data/Model.mjs';
 
 /**
- * @class Neo.sitemap.model.Item
+ * @class Neo.sitemap.Model
  * @extends Neo.data.Model
  */
-class Item extends Model {
+class Model extends BaseModel {
     static getConfig() {return {
         /*
-         * @member {String} className='Neo.sitemap.model.Item'
+         * @member {String} className='Neo.sitemap.Model'
          * @protected
          */
-        className: 'Neo.sitemap.model.Item',
+        className: 'Neo.sitemap.Model',
         /*
          * @member {Object[]} fields
          */
@@ -18,7 +18,7 @@ class Item extends Model {
             name: 'action',
             type: 'String'
         }, {
-            name        : 'actionType',
+            name        : 'actionType', // handler, route, url
             defaultValue: 'route',
             type        : 'String'
         }, {
@@ -46,6 +46,6 @@ class Item extends Model {
     }}
 }
 
-Neo.applyClassConfig(Item);
+Neo.applyClassConfig(Model);
 
-export default Item;
+export default Model;

package/src/sitemap/Store.mjs

@@ -0,0 +1,24 @@
+import Model     from './Model.mjs';
+import BaseStore from '../data/Store.mjs';
+
+/**
+ * @class Neo.sitemap.Store
+ * @extends Neo.data.Store
+ */
+class Store extends BaseStore {
+    static getConfig() {return {
+        /*
+         * @member {String} className='Neo.sitemap.Store'
+         * @protected
+         */
+        className: 'Neo.sitemap.Store',
+        /*
+         * @member {Neo.data.Model} model=Model
+         */
+        model: Model
+    }}
+}
+
+Neo.applyClassConfig(Store);
+
+export default Store;

package/src/sitemap/store/Items.mjs

@@ -1,24 +0,0 @@
-import ItemModel from '../model/Item.mjs';
-import Store     from '../../data/Store.mjs';
-
-/**
- * @class Neo.sitemap.store.Items
- * @extends Neo.data.Store
- */
-class Items extends Store {
-    static getConfig() {return {
-        /*
-         * @member {String} className='Neo.sitemap.store.Items'
-         * @protected
-         */
-        className: 'Neo.sitemap.store.Items',
-        /*
-         * @member {Neo.data.Model} model=ItemModel
-         */
-        model: ItemModel
-    }}
-}
-
-Neo.applyClassConfig(Items);
-
-export default Items;