neo.mjs 4.0.49 → 4.0.52

package/buildScripts/createClass.mjs

@@ -0,0 +1,372 @@
+#!/usr/bin/env node
+
+import chalk           from 'chalk';
+import { Command }     from 'commander/esm.mjs';
+import envinfo         from 'envinfo';
+import fs              from 'fs-extra';
+import inquirer        from 'inquirer';
+import os              from 'os';
+import path            from 'path';
+import {fileURLToPath} from 'url';
+
+const
+      __dirname   = fileURLToPath(new URL('../', import.meta.url)),
+      cwd         = process.cwd(),
+      requireJson = path => JSON.parse(fs.readFileSync((path))),
+      packageJson = requireJson(path.join(__dirname, 'package.json')),
+      insideNeo   = packageJson.name === 'neo.mjs',
+      program     = new Command(),
+      programName = `${packageJson.name} create-class`,
+      questions   = [],
+      /**
+       * Maintain a list of dir-names recognized as source root directories.
+       * When not using dot notation with a class-name, the program assumes
+       * that we want to create the class inside the cwd. The proper namespace
+       * is then looked up by traversing the directory path up to the first
+       * folder that matches an entry in "sourceRootDirs". The owning
+       * folder (parent of cwd, child of sourceRootDirs[n]) will then be used as the
+       * namespace for this created class.
+       * Can be overwritten with the -s option.
+       * @type {string[]}
+       */
+      sourceRootDirs = ['apps'];
+
+program
+    .name(programName)
+    .version(packageJson.version)
+    .option('-i, --info',              'print environment debug info')
+    .option('-d, --drop',              'drops class in the currently selected folder')
+    .option('-s, --source <value>',    `name of the folder containing the project. Defaults to any of ${sourceRootDirs.join(',')}`)
+    .option('-b, --baseClass <value>')
+    .option('-c, --className <value>')
+    .allowUnknownOption()
+    .on('--help', () => {
+        console.log('\nIn case you have any issues, please create a ticket here:');
+        console.log(chalk.cyan(process.env.npm_package_bugs_url));
+    })
+    .parse(process.argv);
+
+const programOpts = program.opts();
+
+if (programOpts.info) {
+    console.log(chalk.bold('\nEnvironment Info:'));
+    console.log(`\n  current version of ${packageJson.name}: ${packageJson.version}`);
+    console.log(`  running from ${cwd}`);
+
+    envinfo
+        .run({
+            System     : ['OS', 'CPU'],
+            Binaries   : ['Node', 'npm', 'Yarn'],
+            Browsers   : ['Chrome', 'Edge', 'Firefox', 'Safari'],
+            npmPackages: ['neo.mjs']
+        }, {
+            duplicates  : true,
+            showNotFound: true
+        })
+        .then(console.log);
+} else {
+    console.log(chalk.green(programName));
+
+    if (programOpts.drop) {
+        // change source folder if the user wants to
+        if (programOpts.source) {
+            while (sourceRootDirs.length) {
+                sourceRootDirs.pop();
+            }
+            sourceRootDirs.push(programOpts.source);
+        }
+
+        if (!programOpts.className || !programOpts.baseClass) {
+            console.error(chalk.red('-d is non interactive. Please provide name base class, and optionally the source parent for the class to create'));
+            console.info(chalk.bgCyan('Usage: createClass -d -c <className> -b <baseClass> [-s sourceParent]'));
+            process.exit(1);
+        }
+
+        if (programOpts.className.indexOf('.') !== -1) {
+            console.error(chalk.red('No .dot-notation avcailable when -d option is selected.'));
+            console.info(chalk.bgCyan('Usage: createClass -d -c <className> -b <baseClass> [-s sourceParent]'));
+            process.exit(1);
+        }
+    }
+
+    if (!programOpts.className) {
+        questions.push({
+            type   : 'input',
+            name   : 'className',
+            message: 'Please choose the namespace for your class:',
+            default: 'Covid.view.HeaderContainerController'
+        });
+    }
+
+    if (!programOpts.baseClass) {
+        questions.push({
+            type   : 'list',
+            name   : 'baseClass',
+            message: 'Please pick the base class, which you want to extend:',
+            choices: ['component.Base', 'container.Base', 'controller.Component', 'core.Base'],
+            default: 'container.Base'
+        });
+    }
+
+    inquirer.prompt(questions).then(answers => {
+        let baseClass = programOpts.baseClass || answers.baseClass,
+            className = programOpts.className || answers.className,
+            isDrop    = programOpts.drop,
+            startDate = new Date(),
+            classFolder, file, folderDelta, index, ns, root, rootLowerCase, viewFile;
+
+        if (className.endsWith('.mjs')) {
+            className = className.slice(0, -4);
+        }
+
+        if (!isDrop) {
+            ns            = className.split('.');
+            file          = ns.pop();
+            root          = ns.shift();
+            rootLowerCase = root.toLowerCase();
+        }
+
+        if (root === 'Neo') {
+            console.log('todo: create the file inside the src folder');
+        } else {
+            if (isDrop === true) {
+                ns = [];
+
+                let pathInfo = path.parse(cwd),
+                    sep      = path.sep,
+                    baseName, loc = baseName = '',
+                    tmpNs;
+
+                sourceRootDirs.some(dir => {
+                    loc   = cwd;
+                    tmpNs = [];
+
+                    while (pathInfo.root !== loc) {
+                        baseName = path.resolve(loc, './').split(sep).pop();
+
+                        if (baseName === dir) {
+                            ns          = tmpNs.reverse();
+                            classFolder = path.resolve(loc, ns.join(sep));
+                            file        = className;
+                            className   = ns.concat(className).join('.');
+                            loc         = path.resolve(loc, ns.join(sep));
+                            return true;
+                        }
+
+                        tmpNs.push(baseName);
+                        loc = path.resolve(loc, '../');
+                    }
+                });
+
+                if (!ns.length) {
+                    console.error(chalk.red(
+                        'Could not determine namespace for application. Did you provide the ' +
+                            `correct source parent with -s? (was: ${sourceRootDirs.join(',')}`));
+                    process.exit(1);
+                }
+
+                console.info(
+                    chalk.yellow(`Creating ${chalk.bgGreen(className)} extending ${chalk.bgGreen(baseClass)} in ${loc}${sep}${file}.mjs`)
+                );
+
+                let delta_l = path.normalize(__dirname),
+                    delta_r = path.normalize(loc);
+
+                if (delta_r.indexOf(delta_l) !== 0) {
+                    console.error(chalk.red(`Could not determine ${loc} being a child of ${__dirname}`));
+                    process.exit(1);
+                }
+
+                let delta = delta_r.replace(delta_l, ''),
+                    parts = delta.split(sep);
+
+                folderDelta = parts.length;
+            }
+
+            if (isDrop !== true) {
+                if (fs.existsSync(path.resolve(__dirname, 'apps', rootLowerCase))) {
+                    classFolder = path.resolve(__dirname, 'apps', rootLowerCase, ns.join('/'));
+                } else {
+                    console.log('\nNon existing neo app name:', chalk.red(root));
+                    process.exit(1);
+                }
+            }
+
+            if (folderDelta === undefined) {
+                folderDelta = ns.length + 2;
+            }
+
+            fs.mkdirpSync(classFolder);
+
+            fs.writeFileSync(path.join(classFolder, file + '.mjs'), createContent({baseClass, className, file, folderDelta, ns, root}));
+
+            if (baseClass === 'controller.Component') {
+                index = file.indexOf('Controller');
+
+                if (index > 0) {
+                    viewFile = path.join(classFolder, file.substr(0, index) + '.mjs');
+
+                    if (fs.existsSync(viewFile)) {
+                        adjustView({file, viewFile});
+                    }
+                }
+            }
+        }
+
+        const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
+        console.log(`\nTotal time for ${programName}: ${processTime}s`);
+
+        process.exit();
+    });
+
+    /**
+     * Adds a comma to the last element of the contentArray
+     * @param {String[]} contentArray
+     * @returns {String[]}
+     */
+    function addComma(contentArray) {
+        contentArray[contentArray.length - 1] += ',';
+        return contentArray;
+    }
+
+    /**
+     * Adjusts the views related to controller.Component or model.Component
+     * @param {Object} opts
+     * @param {String} opts.file
+     * @param {String} opts.viewFile
+     */
+    function adjustView(opts) {
+        let file            = opts.file,
+            viewFile        = opts.viewFile,
+            content         = fs.readFileSync(viewFile).toString().split(os.EOL),
+            fromMaxPosition = 0,
+            i               = 0,
+            len             = content.length,
+            adjustSpaces, codeLine, fromPosition, importLength, importName, j, spaces;
+
+        // find the index where we want to insert our import statement
+        for (; i < len; i++) {
+            codeLine = content[i];
+
+            if (codeLine === '') {
+                break;
+            }
+
+            importName   = codeLine.substr(7);
+            importName   = importName.substr(0, importName.indexOf(' '));
+            importLength = importName.length;
+
+            if (importName > file) {
+                break;
+            }
+        }
+
+        content.splice(i, 0, `import ${file} from './${file}.mjs';`);
+
+        // find the longest import module name
+        for (i=0; i < len; i++) {
+            codeLine = content[i];
+
+            if (codeLine === '') {
+                break;
+            }
+
+            fromMaxPosition = Math.max(fromMaxPosition, codeLine.indexOf('from'));
+        }
+
+        // adjust the block-formatting for imports
+        for (i=0; i < len; i++) {
+            codeLine = content[i];
+
+            if (codeLine === '') {
+                break;
+            }
+
+            fromPosition = codeLine.indexOf('from');
+            adjustSpaces = fromMaxPosition - fromPosition;
+
+            if (adjustSpaces > 0) {
+                spaces = '';
+
+                for (j=0; j < adjustSpaces; j++) {
+                    spaces += ' ';
+                }
+
+                content[i] = codeLine.substr(0, fromPosition) + spaces + codeLine.substr(fromPosition);
+            }
+        }
+
+        fs.writeFileSync(viewFile, content.join(os.EOL));
+
+        console.log(i, opts.file);
+        console.log(content);
+    }
+
+    /**
+     * Creates the content of the neo-class .mjs file
+     * @param {Object} opts
+     * @param {String} opts.baseClass
+     * @param {String} opts.className
+     * @param {String} opts.file
+     * @param {String} opts.folderDelta
+     * @param {String} opts.ns
+     * @param {String} opts.root
+     * @returns {String}
+     */
+    function createContent(opts) {
+        let baseClass    = opts.baseClass,
+            baseClassNs  = baseClass.split('.'),
+            baseFileName = baseClassNs.pop(),
+            className    = opts.className,
+            file         = opts.file,
+            i            = 0,
+            importDelta  = '';
+
+        for (; i < opts.folderDelta; i++) {
+            importDelta += '../';
+        }
+
+        let classContent = [
+            `import ${baseFileName} from '${importDelta}${(insideNeo ? '' : 'node_modules/neo.mjs/')}src/${baseClassNs.join('/')}/${baseFileName}.mjs';`,
+            "",
+            "/**",
+            ` * @class ${className}`,
+            ` * @extends Neo.${baseClass}`,
+            " */",
+            `class ${file} extends ${baseFileName} {`,
+            "    static getConfig() {return {",
+            "        /*",
+            `         * @member {String} className='${className}'`,
+            "         * @protected",
+            "         */",
+            `        className: '${className}'`
+        ];
+
+        baseClass === 'container.Base' && addComma(classContent).push(
+            "        /*",
+            "         * @member {Object[]} items",
+            "         */",
+            "        items: []"
+        );
+
+        baseClass === 'component.Base' && addComma(classContent).push(
+            "        /*",
+            "         * @member {Object} _vdom",
+            "         */",
+            "        _vdom:",
+            "        {}"
+        );
+
+        classContent.push(
+            "    }}",
+            "}",
+            "",
+            `Neo.applyClassConfig(${file});`,
+            "",
+            `export default ${file};`,
+            ""
+        );
+
+        return classContent.join(os.EOL);
+    }
+}

package/examples/form/field/text/MainContainer.mjs

@@ -97,6 +97,22 @@ class MainContainer extends ConfigurationViewport {
             minValue : 50,
             stepSize : 5,
             value    : me.exampleComponent.labelWidth
+        }, {
+            module   : NumberField,
+            labelText: 'maxLength',
+            listeners: {change: me.onConfigChange.bind(me, 'maxLength')},
+            maxValue : 50,
+            minValue : 1,
+            stepSize : 1,
+            value    : me.exampleComponent.maxLength
+        }, {
+            module   : NumberField,
+            labelText: 'minLength',
+            listeners: {change: me.onConfigChange.bind(me, 'minLength')},
+            maxValue : 50,
+            minValue : 1,
+            stepSize : 1,
+            value    : me.exampleComponent.minLength
         }, {
             module   : TextField,
             clearable: true,

package/package.json

@@ -1,12 +1,15 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.49",
+    "version": "4.0.52",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
         "type": "git",
         "url": "https://github.com/neomjs/neo.git"
     },
+    "bin": {
+        "neo-cc": "./buildScripts/createClass.mjs"
+    },
     "scripts": {
         "build-all": "node ./buildScripts/buildAll.mjs -f -n",
         "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
@@ -14,6 +17,7 @@
         "build-themes": "node ./buildScripts/buildThemes.mjs -f",
         "build-threads": "node ./buildScripts/webpack/buildThreads.mjs -f",
         "create-app": "node ./buildScripts/createApp.mjs",
+        "create-class": "node ./buildScripts/createClass.mjs",
         "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
         "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -50,7 +54,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.14",
-        "sass": "^1.52.3",
+        "sass": "^1.53.0",
         "webpack": "^5.73.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "4.9.2",
@@ -58,7 +62,8 @@
         "webpack-node-externals": "^3.0.0"
     },
     "devDependencies": {
-        "siesta-lite": "^5.5.2"
+        "siesta-lite": "^5.5.2",
+        "url": "^0.11.0"
     },
     "funding": {
         "type": "GitHub Sponsors",

package/src/data/RecordFactory.mjs

@@ -28,9 +28,9 @@ class RecordFactory extends Base {
          */
         ovPrefix: 'ov_',
         /**
-         * @member {String} recordNamespace='Neo.data.record.'
+         * @member {String} recordNamespace='Neo.data.record'
          */
-        recordNamespace: 'Neo.data.record.'
+        recordNamespace: 'Neo.data.record'
     }}
 
     /**
@@ -39,7 +39,7 @@ class RecordFactory extends Base {
      * @returns {Object}
      */
     createRecord(model, config) {
-        let recordClass = Neo.ns(this.recordNamespace + model.className);
+        let recordClass = Neo.ns(`${this.recordNamespace}.${model.className}.${model.id}`);
 
         if (!recordClass) {
             recordClass = this.createRecordClass(model);
@@ -54,7 +54,7 @@ class RecordFactory extends Base {
      */
     createRecordClass(model) {
         if (model instanceof Model) {
-            let className = this.recordNamespace + model.className,
+            let className = `${this.recordNamespace}.${model.className}.${model.id}`,
                 ns        = Neo.ns(className),
                 key, nsArray;
 
@@ -76,7 +76,7 @@ class RecordFactory extends Base {
 
                         if (Array.isArray(model.fields)) {
                             model.fields.forEach(field => {
-                                let parsedValue = instance.parseRecordValue(field, config[field.name], config),
+                                let parsedValue = instance.parseRecordValue(me, field, config[field.name], config),
                                     symbol      = Symbol.for(field.name);
 
                                 properties = {
@@ -97,9 +97,9 @@ class RecordFactory extends Base {
                                             let me       = this,
                                                 oldValue = me[symbol];
 
-                                            if (!Neo.isEqual(value, oldValue)) {
-                                                value = instance.parseRecordValue(field, value, null);
+                                            value = instance.parseRecordValue(me, field, value);
 
+                                            if (!Neo.isEqual(value, oldValue)) {
                                                 me[symbol] = value;
 
                                                 me._isModified = true;
@@ -221,14 +221,18 @@ class RecordFactory extends Base {
 
     /**
      * todo: parse value for more field types
+     * @param {Object} record
      * @param {Object} field
      * @param {*} value
-     * @param {Object} recordConfig
+     * @param {Object} recordConfig=null
      * @returns {*}
      */
-    parseRecordValue(field, value, recordConfig) {
-        let mapping = field.mapping,
-            type    = field.type?.toLowerCase();
+    parseRecordValue(record, field, value, recordConfig=null) {
+        let mapping   = field.mapping,
+            maxLength = field.maxLength,
+            minLength = field.minLength,
+            oldValue  = recordConfig?.[field.name] || record[field.name],
+            type      = field.type?.toLowerCase();
 
         // only trigger mappings for initial values
         // dynamic changes of a field will not pass the recordConfig
@@ -240,7 +244,21 @@ class RecordFactory extends Base {
             value = ns[key];
         }
 
-        if (type === 'date') {
+        if (Object.hasOwn(field, maxLength)) {
+            if (value?.toString() > maxLength) {
+                console.warn(`Setting record field: ${field} value: ${value} conflicts with the maxLength: ${maxLength}`);
+                return oldValue;
+            }
+        }
+
+        if (Object.hasOwn(field, minLength)) {
+            if (value?.toString() < minLength) {
+                console.warn(`Setting record field: ${field} value: ${value} conflicts with the minLength: ${minLength}`);
+                return oldValue;
+            }
+        }
+
+        if (type === 'date' && Neo.typeOf(value) !== 'Date') {
             return new Date(value);
         }
 
@@ -259,6 +277,7 @@ class RecordFactory extends Base {
 
         Object.entries(fields).forEach(([key, value]) => {
             oldValue = record[key];
+            value    = instance.parseRecordValue(record, model.getField(key), value);
 
             if (!Neo.isEqual(oldValue, value)) {
                 record[Symbol.for(key)] = value; // silent update

package/src/form/field/Number.mjs

@@ -174,6 +174,28 @@ class Number extends Text {
         return this.beforeSetEnumValue(value, oldValue, 'triggerPosition');
     }
 
+    /**
+     * @returns {Boolean}
+     */
+    isValid() {
+        let me    = this,
+            value = me.value;
+
+        if (Neo.isNumber(me.maxValue) && value > me.maxValue) {
+            return false;
+        }
+
+        if (Neo.isNumber(me.minValue) && value < me.minValue) {
+            return false;
+        }
+
+        if (value % me.stepSize !== 0) {
+            return false;
+        }
+
+        return super.isValid();
+    }
+
     /**
      *
      */
@@ -215,12 +237,13 @@ class Number extends Text {
      */
     onSpinButtonDownClick() {
         let me       = this,
-            oldValue = me.value || (me.maxValue + me.stepSize),
-            value    = Math.max(me.minValue, oldValue - me.stepSize);
+            stepSize = me.stepSize,
+            oldValue = Neo.isNumber(me.value) ? me.value : me.minValue,
+            value    = (oldValue - stepSize) < me.minValue ? me.maxValue : (oldValue - stepSize);
 
         if (me.excludedValues) {
             while(me.excludedValues.includes(value)) {
-                value = Math.max(me.minValue, value - me.stepSize);
+                value = Math.max(me.minValue, value - stepSize);
             }
         }
 
@@ -234,12 +257,13 @@ class Number extends Text {
      */
     onSpinButtonUpClick() {
         let me       = this,
-            oldValue = me.value || (me.minValue - me.stepSize),
-            value    = Math.min(me.maxValue, oldValue + me.stepSize);
+            stepSize = me.stepSize,
+            oldValue = Neo.isNumber(me.value) ? me.value : me.maxValue,
+            value    = (oldValue + stepSize) > me.maxValue ? me.minValue : (oldValue + stepSize);
 
         if (me.excludedValues) {
             while(me.excludedValues.includes(value)) {
-                value = Math.min(me.maxValue, value + me.stepSize);
+                value = Math.min(me.maxValue, value + stepSize);
             }
         }
 

package/src/form/field/Text.mjs

@@ -93,6 +93,16 @@ class Text extends Base {
          * @member {Number|String} labelWidth_=150
          */
         labelWidth_: 150,
+        /**
+         * The maximum amount of chars which you can enter into this field
+         * @member {Number|null} maxLength_=null
+         */
+        maxLength_: null,
+        /**
+         * The minimum amount of chars which you can enter into this field
+         * @member {Number|null} minLength_=null
+         */
+        minLength_: null,
         /**
          * @member {String|null} placeholderText_=null
          */
@@ -358,6 +368,26 @@ class Text extends Base {
         }
     }
 
+    /**
+     * Triggered after the maxLength config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetMaxLength(value, oldValue) {
+        this.changeInputElKey('maxlength', value);
+    }
+
+    /**
+     * Triggered after the minLength config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetMinLength(value, oldValue) {
+        this.changeInputElKey('minlength', value);
+    }
+
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -776,9 +806,19 @@ class Text extends Base {
      * @returns {Boolean}
      */
     isValid() {
-        let me = this;
+        let me          = this,
+            value       = me.value,
+            valueLength = value?.toString().length;
+
+        if (me.required && (!value || valueLength < 1)) {
+            return false;
+        }
+
+        if (Neo.isNumber(me.maxLength) && valueLength > me.maxLength) {
+            return false;
+        }
 
-        if (me.required && (!me.value || me.value?.length < 1)) {
+        if (Neo.isNumber(me.minLength) && valueLength < me.minLength) {
             return false;
         }
 

package/src/main/mixin/DeltaUpdates.mjs

@@ -186,11 +186,15 @@ class DeltaUpdates extends Base {
                                 }
                             } else if (key === 'id') {
                                 node[Neo.config.useDomIds ? 'id' : 'data-neo-id'] = val;
-                            }else if (key === 'spellcheck' && val === 'false') {
+                            } else if (key === 'spellcheck' && val === 'false') {
                                 // see https://github.com/neomjs/neo/issues/1922
                                 node[key] = false;
                             } else {
-                                node[key] = val;
+                                if (key === 'value') {
+                                    node[key] = val;
+                                } else {
+                                    node.setAttribute(key, val);
+                                }
                             }
                         });
                         break;

package/src/table/Container.mjs

@@ -247,9 +247,9 @@ class Container extends BaseContainer {
         }
 
         if (value) {
-            let me = this;
+            let me = this,
 
-            const listeners = {
+            listeners = {
                 filter      : me.onStoreFilter,
                 load        : me.onStoreLoad,
                 recordChange: me.onStoreRecordChange,
@@ -258,13 +258,10 @@ class Container extends BaseContainer {
 
             if (value instanceof Store) {
                 value.on(listeners);
-
-                if (value.getCount() > 0) {
-                    me.onStoreLoad(value.items);
-                }
+                value.getCount() > 0 && me.onStoreLoad(value.items);
             } else {
                 value = ClassSystemUtil.beforeSetInstance(value, Store, {
-                    listeners: listeners
+                    listeners
                 });
             }