neo.mjs 4.0.87 → 4.0.90

package/buildScripts/createClass.mjs

@@ -157,9 +157,15 @@ if (programOpts.info) {
     }
 
     if (root === 'Neo') {
-        console.log('todo: create the file inside the src folder');
+        if (isDrop) {
+            console.log(chalk.red('Drop mode not yet supported for the neo framework scope'));
+            process.exit(1);
+        } else {
+            classFolder = path.join(cwd, '/src/', ns.join('/'));
+            folderDelta = ns.length;
+        }
     } else {
-        if (isDrop === true) {
+        if (isDrop) {
             ns = [];
 
             let pathInfo      = path.parse(cwd),
@@ -211,9 +217,7 @@ if (programOpts.info) {
                 parts = delta.split(sep);
 
             folderDelta = parts.length;
-        }
-
-        if (isDrop !== true) {
+        } else {
             if (fs.existsSync(path.resolve(cwd, 'apps', rootLowerCase))) {
                 classFolder = path.resolve(cwd, 'apps', rootLowerCase, ns.join('/'));
             } else {
@@ -221,24 +225,24 @@ if (programOpts.info) {
                 process.exit(1);
             }
         }
+    }
 
-        if (folderDelta === undefined) {
-            folderDelta = ns.length + 2;
-        }
-
-        createClass({
-            baseClass,
-            className,
-            isSingleton,
-            file,
-            folderDelta,
-            ns,
-            root
-        });
+    if (folderDelta === undefined) {
+        folderDelta = ns.length + 2;
+    }
 
-        if (baseClass === 'data.Model') {
-            // todo: add a question for auto-generating a matching store
-        }
+    createClass({
+        baseClass,
+        className,
+        isSingleton,
+        file,
+        folderDelta,
+        ns,
+        root
+    });
+
+    if (baseClass === 'data.Model') {
+        // todo: add a question for auto-generating a matching store
     }
 
     const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
@@ -440,7 +444,7 @@ if (programOpts.info) {
             root
         } = opts, baseFileName;
 
-        fs.mkdirpSync(classFolder);
+        fs.mkdirpSync(classFolder, {recursive: true});
 
         baseFileName = baseClass.split('.').pop();
 
@@ -534,7 +538,7 @@ if (programOpts.info) {
      * @param {String} opts.className
      * @param {Boolean} opts.isSingleton
      * @param {String} opts.file
-     * @param {String} opts.folderDelta
+     * @param {Number} opts.folderDelta
      * @param {String} opts.ns
      * @param {String} opts.root
      * @returns {String}
@@ -544,6 +548,7 @@ if (programOpts.info) {
             baseFileName  = opts.baseFileName,
             baseClassPath = baseClass.split('.').join('/'),
             className     = opts.className,
+            importSrc     = root === 'Neo' ? '' : 'src/',
             isSingleton   = opts.isSingleton,
             file          = opts.file,
             i             = 0,
@@ -554,7 +559,7 @@ if (programOpts.info) {
         }
 
         let classContent = [
-            `import ${baseFileName} from '${importDelta}${(insideNeo ? '' : 'node_modules/neo.mjs/')}src/${baseClassPath}.mjs';`,
+            `import ${baseFileName} from '${importDelta}${(insideNeo ? '' : 'node_modules/neo.mjs/')}${importSrc + baseClassPath}.mjs';`,
             "",
             "/**",
             ` * @class ${className}`,

package/examples/sitemap/MainContainer.mjs

@@ -0,0 +1,63 @@
+import ConfigurationViewport from '../ConfigurationViewport.mjs';
+import RangeField            from '../../src/form/field/Range.mjs';
+import SiteMapContainer      from '../../src/sitemap/Container.mjs';
+
+/**
+ * @class Neo.examples.sitemap.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static getConfig() {return {
+        className: 'Neo.examples.sitemap.MainContainer',
+        autoMount: true,
+        layout   : {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module    :  RangeField,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 800,
+            minValue  : 200,
+            stepSize  : 1,
+            value     : me.exampleComponent.height
+        }, {
+            module    :  RangeField,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 800,
+            minValue  : 200,
+            stepSize  : 1,
+            value     : me.exampleComponent.width
+        }]
+    }
+
+    createExampleComponent() {
+        return Neo.create(SiteMapContainer, {
+            height: 600,
+            width : 800,
+
+            itemStore: {
+                data: [
+                    {id:  1, column: 0, name: 'Group 1', level: 0},
+                    {id:  2, column: 0, name: 'Item 1',  level: 1, action: 'item1'},
+                    {id:  3, column: 0, name: 'Item 2',  level: 1, action: 'item2'},
+                    {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:  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}
+                ]
+            }
+        })
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/sitemap/app.mjs

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

package/examples/sitemap/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Sitemap</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/sitemap/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/sitemap/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.87",
+    "version": "4.0.90",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/Global.scss

@@ -27,6 +27,10 @@ html, .neo-body-viewport {
     pointer-events: none;
 }
 
+.neo-hidden {
+    visibility: hidden;
+}
+
 .neo-link-color {
     color: v(neo-color);
 

package/resources/scss/src/component/Iframe.scss

@@ -0,0 +1,3 @@
+.neo-iframe {
+    border: none;
+}

package/resources/scss/src/sitemap/Container.scss

@@ -0,0 +1,41 @@
+.neo-sitemap {
+    border : 1px solid v(panel-border-color);
+    padding: 30px 100px 60px;
+
+    .neo-action {
+        color          : inherit;
+        display        : block;
+        margin         : 1.1em 0;
+        text-decoration: none;
+    }
+
+    .neo-action[href] {
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .neo-level-0 {
+        font-size  : 16px/22px;
+        font-weight: 600;
+    }
+
+    .neo-level-1 {
+        margin-left: 1em;
+    }
+
+    .neo-level-2 {
+        margin-left: 2em;
+    }
+
+    .neo-level-3 {
+        margin-left: 3em;
+    }
+
+    .neo-sitemap-column {
+        &:not(:last-child) {
+            border-right: 1px solid v(panel-border-color);
+            margin-right: 25px;
+        }
+    }
+}

package/src/component/Base.mjs

@@ -163,9 +163,9 @@ class Base extends CoreBase {
         /**
          * Used for hide and show and defines if the component
          * should use css visibility:'hidden' or vdom:removeDom
-         * @member {String} hideMode_='visibility'
+         * @member {String} hideMode_='removeDom'
          */
-        hideMode_: 'visibility',
+        hideMode_: 'removeDom',
         /**
          * The top level innerHTML of the component
          * @member {String|null} html_=null
@@ -1121,10 +1121,9 @@ class Base extends CoreBase {
      * @param {Number} timeout
      */
     hide(timeout) {
-        let me       = this,
-            doRemove = me.hideMode !== 'visibility';
+        let me = this;
 
-        if (doRemove) {
+        if (me.hideMode !== 'visibility') {
             let removeFn = function() {
                 let vdom = me.vdom;
                 vdom.removeDom = true;
@@ -1142,7 +1141,7 @@ class Base extends CoreBase {
             me.style = style;
         }
 
-        this._hidden = true;
+        me._hidden = true;
     }
 
     /**
@@ -1505,10 +1504,9 @@ class Base extends CoreBase {
      * hideMode: 'visibility' uses css visibility.
      */
     show() {
-        let me    = this,
-            doAdd = me.hideMode !== 'visibility';
+        let me = this;
 
-        if (doAdd) {
+        if (me.hideMode !== 'visibility') {
             let vdom = me.vdom;
             vdom.removeDom = false;
             me.vdom = vdom;
@@ -1518,7 +1516,7 @@ class Base extends CoreBase {
             me.style = style;
         }
 
-        this._hidden = false;
+        me._hidden = false;
     }
 
     /**

package/src/component/Iframe.mjs

@@ -0,0 +1,42 @@
+import Base from '../component/Base.mjs';
+
+/**
+ * @class Neo.component.Iframe
+ * @extends Neo.component.Base
+ */
+class Iframe extends Base {
+    static getConfig() {return {
+        /*
+         * @member {String} className='Neo.component.Iframe'
+         * @protected
+         */
+        className: 'Neo.component.Iframe',
+        /*
+         * @member {String[]} cls=['neo-iframe']
+         */
+        cls: ['neo-iframe'],
+        /*
+         * @member {String|null} src_=null
+         */
+        src_: null,
+        /*
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {tag: 'iframe'}
+    }}
+
+    /**
+     * Triggered after the src config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetSrc(value, oldValue) {
+        this.changeVdomRootKey('src', value);
+    }
+}
+
+Neo.applyClassConfig(Iframe);
+
+export default Iframe;

package/src/data/RecordFactory.mjs

@@ -76,8 +76,15 @@ class RecordFactory extends Base {
 
                         if (Array.isArray(model.fields)) {
                             model.fields.forEach(field => {
-                                let parsedValue = instance.parseRecordValue(me, field, config[field.name], config),
-                                    symbol      = Symbol.for(field.name);
+                                let value  = config[field.name],
+                                    symbol = Symbol.for(field.name),
+                                    parsedValue;
+
+                                if (!Object.hasOwn(config, field.name) && Object.hasOwn(field, 'defaultValue')) {
+                                    value = field.defaultValue;
+                                }
+
+                                parsedValue = instance.parseRecordValue(me, field, value, config);
 
                                 properties = {
                                     [Symbol.for('isRecord')]: {
@@ -271,6 +278,10 @@ class RecordFactory extends Base {
             return new Date(value);
         }
 
+        if (type === 'html' && value) {
+            value = value + '';
+        }
+
         if (type === 'string' && value) {
             value = value + '';
             value =  value.replace(/(<([^>]+)>)/ig, '');

package/src/list/Base.mjs

@@ -405,9 +405,10 @@ class Base extends Component {
     getItemRecordId(vnodeId) {
         let itemId   = vnodeId.split('__')[1],
             model    = this.store.model,
-            keyField = model?.getField(model.keyProperty);
+            keyField = model?.getField(model.keyProperty),
+            keyType  = keyField?.type.toLowerCase();
 
-        if (keyField?.type.toLowerCase() === 'integer' || keyField?.type.toLowerCase() === 'number') {
+        if (keyType === 'integer' || keyType === 'number') {
             itemId = parseInt(itemId);
         }
 

package/src/sitemap/Container.mjs

@@ -0,0 +1,227 @@
+import Base            from '../container/Base.mjs';
+import ClassSystemUtil from '../util/ClassSystem.mjs';
+import ItemStore       from './store/Items.mjs';
+
+/**
+ * @class Neo.sitemap.Container
+ * @extends Neo.container.Base
+ */
+class Container extends Base {
+    static getStaticConfig() {return {
+        /**
+         * Valid values for itemHideMode
+         * @member {String[]} itemHideModes=['removeDom','visibility']
+         * @protected
+         * @static
+         */
+        itemHideModes: ['removeDom', 'visibility']
+    }}
+
+    static getConfig() {return {
+        /*
+         * @member {String} className='Neo.sitemap.Container'
+         * @protected
+         */
+        className: 'Neo.sitemap.Container',
+        /*
+         * @member {String} ntype='sitemap'
+         * @protected
+         */
+        ntype: 'sitemap',
+        /*
+         * @member {String[} cls=['neo-sitemap','neo-container']
+         */
+        cls: ['neo-sitemap', 'neo-container'],
+        /*
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            ntype: 'component',
+            cls  : ['neo-sitemap-column', 'neo-container']
+        },
+        /**
+         * Valid values: removeDom, visibility
+         * Defines if the component items should use css visibility:'hidden' or vdom:removeDom
+         * @member {String} hideMode_='removeDom'
+         */
+        itemHideMode_: 'removeDom',
+        /*
+         * @member {Neo.sitemap.store.Items|null} itemStore_=null
+         */
+        itemStore_: null,
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me           = this,
+            domListeners = me.domListeners;
+
+        domListeners.push({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
+     * @protected
+     */
+    afterSetItemStore(value, oldValue) {
+        let me = this;
+
+        value?.on({
+            filter      : 'onItemStoreFilter',
+            load        : 'onItemStoreLoad',
+            recordChange: 'onItemStoreRecordChange',
+            scope       : me
+        });
+
+        value?.getCount() > 0 && me.createColumns();
+    }
+
+    /**
+     * Triggered before the itemHideMode config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetItemHideMode(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'itemHideMode');
+    }
+
+    /**
+     * Triggered before the itemStore config gets changed.
+     * @param {Object|Neo.data.Store} value
+     * @param {Object|Neo.data.Store} oldValue
+     * @returns {Neo.data.Store}
+     * @protected
+     */
+    beforeSetItemStore(value, oldValue) {
+        oldValue?.destroy();
+        return ClassSystemUtil.beforeSetInstance(value, ItemStore);
+    }
+
+    /**
+     *
+     */
+    createColumns() {
+        let me          = this,
+            records     = me.itemStore.items,
+            columnIndex = -1,
+            items       = [],
+            action, column, item, record;
+
+        for (record of records) {
+            if (record.column !== columnIndex) {
+                columnIndex++;
+                column = {vdom: {cn: []}};
+                items.push(column);
+            }
+
+            action = record.action;
+
+            item = {
+                tag : 'a',
+                cls : ['neo-action', `neo-level-${record.level}`],
+                id  : me.getItemId(record.id),
+                html: record.name
+            };
+
+            if (action && action !== '') {
+                switch (record.actionType) {
+                    case 'handler': {
+                        item.cls.push('neo-action-handler');
+                        break;
+                    }
+                    case 'route': {
+                        item.href = `#${record.action}`;
+                        break;
+                    }
+                    case 'url': {
+                        item.href   = record.action;
+                        item.target = '_blank';
+                    }
+                }
+            }
+
+            record.disabled && item.cls.push('neo-disabled');
+
+            if (record.hidden) {
+                if (me.itemHideMode === 'removeDom') {
+                    item.removeDom = true;
+                } else {
+                    item.cls.push('neo-hidden');
+                }
+            }
+
+            column.vdom.cn.push(item);
+        }
+
+        me.items = items;
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @returns {String}
+     */
+    getItemId(recordId) {
+        return `${this.id}__${recordId}`;
+    }
+
+    /**
+     * @param {String} vnodeId
+     * @returns {String|Number} itemId
+     */
+    getItemRecordId(vnodeId) {
+        let itemId   = vnodeId.split('__')[1],
+            model    = this.store.model,
+            keyField = model?.getField(model.keyProperty),
+            keyType  = keyField?.type.toLowerCase();
+
+        if (keyType === 'integer' || keyType === 'number') {
+            itemId = parseInt(itemId);
+        }
+
+        return itemId;
+    }
+
+    /**
+     * Override as needed
+     * @param {Object} data
+     */
+    onItemClick(data) {}
+
+    /**
+     *
+     */
+    onItemStoreFilter() {
+        this.createColumns();
+    }
+
+    /**
+     *
+     */
+    onItemStoreLoad() {
+        this.createColumns();
+    }
+
+    /**
+     *
+     */
+    onItemStoreRecordChange() {
+        this.createColumns();
+    }
+}
+
+Neo.applyClassConfig(Container);
+
+export default Container;

package/src/sitemap/model/Item.mjs

@@ -0,0 +1,51 @@
+import Model from '../../data/Model.mjs';
+
+/**
+ * @class Neo.sitemap.model.Item
+ * @extends Neo.data.Model
+ */
+class Item extends Model {
+    static getConfig() {return {
+        /*
+         * @member {String} className='Neo.sitemap.model.Item'
+         * @protected
+         */
+        className: 'Neo.sitemap.model.Item',
+        /*
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'action',
+            type: 'String'
+        }, {
+            name        : 'actionType',
+            defaultValue: 'route',
+            type        : 'String'
+        }, {
+            name: 'column',
+            type: 'Number' // zero based
+        }, {
+            name        : 'disabled',
+            defaultValue: false,
+            type        : 'Boolean'
+        }, {
+            name        : 'hidden',
+            defaultValue: false,
+            type        : 'Boolean'
+        }, {
+            name: 'id',
+            type: 'Number'
+        }, {
+            name        : 'level', // indentation
+            defaultValue: 0,
+            type        : 'Number'
+        }, {
+            name: 'name',
+            type: 'Html'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(Item);
+
+export default Item;

package/src/sitemap/store/Items.mjs

@@ -0,0 +1,24 @@
+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;