neo.mjs 4.0.50 → 4.0.53

package/buildScripts/createClass.mjs

@@ -1,24 +1,42 @@
-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';
-
-const __dirname   = path.resolve(),
+#!/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   = [];
+      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()
@@ -33,7 +51,7 @@ 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 ${__dirname}`);
+    console.log(`  running from ${cwd}`);
 
     envinfo
         .run({
@@ -49,12 +67,34 @@ if (programOpts.info) {
 } 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 available 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.FooContainer'
+            default: 'Covid.view.HeaderContainerController'
         });
     }
 
@@ -63,39 +103,113 @@ if (programOpts.info) {
             type   : 'list',
             name   : 'baseClass',
             message: 'Please pick the base class, which you want to extend:',
-            choices: ['component.Base', 'container.Base'],
-            default: 'component.Base'
+            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, ns, root, rootLowerCase;
+            classFolder, file, folderDelta, index, ns, root, rootLowerCase, viewFile;
 
         if (className.endsWith('.mjs')) {
             className = className.slice(0, -4);
         }
 
-        ns            = className.split('.');
-        file          = ns.pop();
-        root          = ns.shift();
-        rootLowerCase = root.toLowerCase();
+        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 (fs.existsSync(path.resolve(cwd, 'apps', rootLowerCase))) {
-                classFolder = path.resolve(cwd, 'apps', rootLowerCase, ns.join('/'));
+            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.mkdirpSync(classFolder);
 
-                fs.writeFileSync(path.join(classFolder, file + '.mjs'), createContent({baseClass, className, file, folderDelta, ns, root}));
-            } else {
-                console.log('\nNon existing neo app name:', chalk.red(root));
-                process.exit(1);
+            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});
+                    }
+                }
             }
         }
 
@@ -108,9 +222,84 @@ if (programOpts.info) {
     /**
      * 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);
     }
 
     /**
@@ -125,13 +314,13 @@ if (programOpts.info) {
      * @returns {String}
      */
     function createContent(opts) {
-        let baseClass     = opts.baseClass,
-            baseClassNs   = baseClass.split('.'),
+        let baseClass    = opts.baseClass,
+            baseClassNs  = baseClass.split('.'),
             baseFileName = baseClassNs.pop(),
-            className     = opts.className,
-            file          = opts.file,
-            i             = 0,
-            importDelta   = '';
+            className    = opts.className,
+            file         = opts.file,
+            i            = 0,
+            importDelta  = '';
 
         for (; i < opts.folderDelta; i++) {
             importDelta += '../';
@@ -141,8 +330,8 @@ if (programOpts.info) {
             `import ${baseFileName} from '${importDelta}${(insideNeo ? '' : 'node_modules/neo.mjs/')}src/${baseClassNs.join('/')}/${baseFileName}.mjs';`,
             "",
             "/**",
-            " * @class " + className,
-            " * @extends Neo." + baseClass,
+            ` * @class ${className}`,
+            ` * @extends Neo.${baseClass}`,
             " */",
             `class ${file} extends ${baseFileName} {`,
             "    static getConfig() {return {",
@@ -153,28 +342,20 @@ if (programOpts.info) {
             `        className: '${className}'`
         ];
 
-        if (baseClass === 'component.Base') {
-            addComma(classContent);
-
-            classContent.push(
+        baseClass === 'container.Base' && addComma(classContent).push(
             "        /*",
-            "         * @member {Object} _vdom",
+            "         * @member {Object[]} items",
             "         */",
-            "        _vdom:",
-            "        {}",
-            );
-        }
-
-        if (baseClass === 'container.Base') {
-            addComma(classContent);
+            "        items: []"
+        );
 
-            classContent.push(
+        baseClass === 'component.Base' && addComma(classContent).push(
             "        /*",
-            "         * @member {Object[]} items",
+            "         * @member {Object} _vdom",
             "         */",
-            "        items: []",
-            );
-        }
+            "        _vdom:",
+            "        {}"
+        );
 
         classContent.push(
             "    }}",

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

@@ -36,6 +36,12 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'clearToOriginalValue',
             listeners: {change: me.onConfigChange.bind(me, 'clearToOriginalValue')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.hideLabel,
@@ -97,6 +103,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.50",
+    "version": "4.0.53",
     "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",
@@ -51,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",
@@ -59,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/resources/scss/src/form/field/Text.scss

@@ -8,7 +8,19 @@
 
     &.neo-focus {
         .neo-input-wrapper {
-            border-color: v(textfield-border-color-active);
+            border-color: v(textfield-border-color-active) !important;
+        }
+    }
+
+    &.neo-invalid {
+        .neo-input-wrapper {
+            border-color: brown;
+        }
+
+        &.neo-disabled {
+            .neo-input-wrapper {
+                border-color: inherit;
+            }
         }
     }
 
@@ -156,10 +168,6 @@
             margin       : 0; // important for Safari => #1125
             min-height   : 25px;
             width        : 30px;
-
-            &:invalid {
-                border: 1px solid brown;
-            }
         }
     }
 
@@ -179,14 +187,18 @@
             outline     : none;
         }
 
-        &:invalid {
-            border-color: brown;
-        }
-
         &::-webkit-input-placeholder {
             color  : v(textfield-input-placeholder-color) !important;
             opacity: v(textfield-input-placeholder-opacity) !important;
         }
+
+        &.neo-invalid {
+            border-color: brown;
+
+            &.neo-disabled {
+                border-color: inherit;
+            }
+        }
     }
 
     .neo-textfield-label {

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

@@ -99,6 +99,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMaxValue(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('max', value);
     }
 
@@ -109,6 +110,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMinValue(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('min', value);
     }
 
@@ -174,6 +176,31 @@ class Number extends Text {
         return this.beforeSetEnumValue(value, oldValue, 'triggerPosition');
     }
 
+    /**
+     * @returns {Boolean}
+     */
+    isValid() {
+        let me       = this,
+            maxValue = me.maxValue,
+            minValue = me.minValue,
+            value    = me.value,
+            isNumber = Neo.isNumber(value);
+
+        if (Neo.isNumber(maxValue) && isNumber && value > maxValue) {
+            return false;
+        }
+
+        if (Neo.isNumber(minValue) && isNumber && value < minValue) {
+            return false;
+        }
+
+        if (value % me.stepSize !== 0) {
+            return false;
+        }
+
+        return super.isValid();
+    }
+
     /**
      *
      */
@@ -215,12 +242,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 +262,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,28 @@ class Text extends Base {
         }
     }
 
+    /**
+     * Triggered after the maxLength config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetMaxLength(value, oldValue) {
+        this.updateValidationIndicators();
+        this.changeInputElKey('maxlength', value);
+    }
+
+    /**
+     * Triggered after the minLength config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetMinLength(value, oldValue) {
+        this.updateValidationIndicators();
+        this.changeInputElKey('minlength', value);
+    }
+
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -407,6 +439,7 @@ class Text extends Base {
      * @protected
      */
     afterSetRequired(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('required', value ? value : null);
     }
 
@@ -502,6 +535,7 @@ class Text extends Base {
         }
 
         NeoArray[me.originalConfig.value !== value ? 'add' : 'remove'](me._cls, 'neo-is-dirty');
+        me.updateValidationIndicators();
 
         me.vdom = vdom;
 
@@ -776,9 +810,19 @@ class Text extends Base {
      * @returns {Boolean}
      */
     isValid() {
-        let me = this;
+        let me          = this,
+            value       = me.value,
+            valueLength = value?.toString().length;
 
-        if (me.required && (!me.value || me.value?.length < 1)) {
+        if (me.required && (!value || valueLength < 1)) {
+            return false;
+        }
+
+        if (Neo.isNumber(me.maxLength) && valueLength > me.maxLength) {
+            return false;
+        }
+
+        if (Neo.isNumber(me.minLength) && valueLength < me.minLength) {
             return false;
         }
 
@@ -971,6 +1015,20 @@ class Text extends Base {
             });
         });
     }
+
+    /**
+     * @param {Boolean} silent=true
+     */
+    updateValidationIndicators(silent=true) {
+        let me   = this,
+            vdom = me.vdom;
+
+        NeoArray[!me.isValid() ? 'add' : 'remove'](me._cls, 'neo-invalid');
+
+        if (!silent) {
+            me.vdom = vdom;
+        }
+    }
 }
 
 Neo.applyClassConfig(Text);

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
                 });
             }