neo.mjs 10.0.0-beta.1 → 10.0.0-beta.3

package/src/component/Chip.mjs

@@ -38,9 +38,9 @@ class Chip extends Component {
         iconCls_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String|null} text_=null
+         * @member {String|null} text=null
          */
-        text_: null,
+        text: null,
         /**
          * Set this one to false when used in lists
          * @member {Boolean} useDomListeners=true
@@ -132,7 +132,7 @@ class Chip extends Component {
             textNode.removeDom = true
         } else {
             textNode.removeDom = false;
-            textNode.html      = value
+            textNode.text      = value
         }
 
         this.update()

package/src/component/Circle.mjs

@@ -850,8 +850,8 @@ class Circle extends Component {
         let me          = this,
             innerCircle = me.getInnerCircle();
 
-        innerCircle.cn[0].html = me.store?.getCount() || 0;
-        innerCircle.cn[1].html = me.title;
+        innerCircle.cn[0].text = me.store?.getCount() || 0;
+        innerCircle.cn[1].text = me.title;
 
         !silent && me.update()
     }

package/src/component/DateSelector.mjs

@@ -250,7 +250,7 @@ class DateSelector extends Component {
 
             me.updateHeaderDays(me.dayNameFormat, '', true);
 
-            me.getHeaderMonthEl().html = dt.format(me.currentDate);
+            me.getHeaderMonthEl().text = dt.format(me.currentDate);
 
             me.update()
         }
@@ -588,7 +588,7 @@ class DateSelector extends Component {
         for (; i < len; i++) {
             config =
             {cls: ['neo-cell'], cn: [
-                {cls : ['neo-cell-content'], html: me.intlFormat_day.format(date)}
+                {cls : ['neo-cell-content'], text: me.intlFormat_day.format(date)}
             ]};
 
             day = date.getDay();
@@ -652,7 +652,7 @@ class DateSelector extends Component {
                     tabIndex: hasContent ? -1 : null,
                     cn: [{
                         cls : ['neo-cell-content'],
-                        html: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
+                        text: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
                     }]
                 };
 
@@ -748,7 +748,7 @@ class DateSelector extends Component {
             cellEl = VDomUtil.find(me.vdom, data.path[0].id),
             date   = me.currentDate; // cloned
 
-        date.setDate(parseInt(cellEl.vdom.cn[0].html));
+        date.setDate(parseInt(cellEl.vdom.cn[0].text));
         date = DateUtil.convertToyyyymmdd(date);
 
         // We want to always trigger a change event.
@@ -893,7 +893,7 @@ class DateSelector extends Component {
             for (; i < 7; i++) {
                 node = centerEl.cn[i];
 
-                node.cn[0].html = me.intlFormat_day.format(date);
+                node.cn[0].text = me.intlFormat_day.format(date);
 
                 day = date.getDay();
 
@@ -927,7 +927,7 @@ class DateSelector extends Component {
             headerCenterEl, y;
 
         if (!me.mounted || !me.useAnimations) {
-            monthEl.html = currentMonth;
+            monthEl.text = currentMonth;
             !silent && me.update();
             return null
         } else {
@@ -954,7 +954,7 @@ class DateSelector extends Component {
 
             headerCenterEl.cn[0].cn[0].cn.push({
                 cls : ['neo-month-text'],
-                html: currentMonth
+                text: currentMonth
             });
 
             headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 'unshift' : 'push'](headerCenterEl.cn[1]);
@@ -1012,7 +1012,7 @@ class DateSelector extends Component {
         let me     = this,
             yearEl = me.getHeaderYearEl();
 
-        yearEl.html = me.currentDate.getFullYear();
+        yearEl.text = me.currentDate.getFullYear();
 
         !silent && me.update()
     }

package/src/component/Helix.mjs

@@ -702,7 +702,7 @@ class Helix extends Component {
             if (me.showCloneInfo) {
                 itemVdom.cn.push({
                     cls : ['contact-name'],
-                    html: record.firstname + ' ' + record.lastname
+                    text: record.firstname + ' ' + record.lastname
                 })
             }
 

package/src/component/Label.mjs

@@ -22,25 +22,10 @@ class Label extends Component {
          */
         baseCls: ['neo-label'],
         /**
-         * @member {String} text_=''
-         */
-        text_: '',
-        /**
-         * @member {Object} _vdom={tag: 'label'}
+         * @member {String} tag='label'
+         * @protected
          */
-        _vdom:
-        {tag: 'label', draggable: false}
-    }
-
-    /**
-     * Triggered after the text config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetText(value, oldValue) {
-        this.vdom.html = value;
-        this.update()
+        tag: 'label'
     }
 }
 

package/src/component/Legend.mjs

@@ -27,9 +27,9 @@ class Legend extends Component {
          */
         iconCls_: 'far fa-check',
         /**
-         * @member {String} text_=''
+         * @member {String} text=''
          */
-        text_: '',
+        text: '',
         /**
          * @member {Boolean} useIcon_=true
          */
@@ -62,7 +62,7 @@ class Legend extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        this.vdom.cn[1].html = value;
+        this.vdom.cn[1].text = value;
         this.update()
     }
 

package/src/component/MagicMoveText.mjs

@@ -51,10 +51,6 @@ class MagicMoveText extends Component {
          * @member {String} fontFamily_='Helvetica Neue'
          */
         fontFamily_: 'Helvetica Neue',
-        /**
-         * @member {String} text_=null
-         */
-        text_: null,
         /**
          * Time in ms for the fadeIn, fadeOut and move character OPs
          * @member {Number} transitionTime_=500
@@ -258,11 +254,7 @@ class MagicMoveText extends Component {
             value?.split('').forEach(char => {
                 me.chars.push({name: char});
 
-                if (char === ' ') {
-                    char = ' '
-                }
-
-                measureElement.cn.push({tag: 'span', html: char})
+                measureElement.cn.push({tag: 'span', text: char})
             });
 
             if (me.mounted) {
@@ -301,8 +293,8 @@ class MagicMoveText extends Component {
 
                 charsContainer.push({
                     cls  : ['neo-char'],
-                    html : char.name,
-                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top}
+                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top},
+                    text : char.name
                 })
             }
         });
@@ -354,7 +346,7 @@ class MagicMoveText extends Component {
             me.chars[index].top  = `${rect.top  - parentRect.top }px`;
         });
 
-        measureWrapper.removeDom = true;
+        //measureWrapper.removeDom = true;
         await me.promiseUpdate()
     }
 
@@ -409,7 +401,7 @@ class MagicMoveText extends Component {
         if (start) {
             me.intervalId = setInterval(me.cycleText.bind(me), me.autoCycleInterval);
 
-            me.timeout(20).then(() => {me.cycleText()});
+            me.timeout(20).then(() => {me.cycleText()})
         } else {
             clearInterval(me.intervalId)
         }
@@ -491,7 +483,7 @@ class MagicMoveText extends Component {
 
         charsContainer.cn.length = 0;
 
-        charsContainer.cn.push({html: me.text});
+        charsContainer.cn.push({text: me.text});
         await me.promiseUpdate();
 
         me.isTransitioning = false

package/src/component/Process.mjs

@@ -169,12 +169,12 @@ class Process extends Base {
             curItem, content;
 
         items.forEach((newItem) => {
-            curItem = Neo.clone(itemLayout, true),
+            curItem = Neo.clone(itemLayout, true);
             content = curItem.cn[3];
 
             content.cn[0].cls.push(newItem.iconCls);
-            content.cn[1].html = newItem.title;
-            content.cn[2].html = newItem.text;
+            content.cn[1].text = newItem.title;
+            content.cn[2].text = newItem.text;
 
             NeoArray.add(vdomRoot.cn, curItem)
         })

package/src/component/Progress.mjs

@@ -84,7 +84,7 @@ class Progress extends Base {
             delete label.removeDom
         }
 
-        label.html = value;
+        label.text = value;
         this.update()
     }
 

package/src/component/StatusBadge.mjs

@@ -329,7 +329,7 @@ class StatusBadge extends Base {
                     break;
             }
 
-            labelNode.html = showLabel;
+            labelNode.text = showLabel;
 
             me.updateStateIconNode(showStateIcon);
             me.updateSideIconNode(showSideIcon)
@@ -382,7 +382,7 @@ class StatusBadge extends Base {
     updateLabelNode(value) {
         let labelNode = this.getVdomRoot().cn[1];
 
-        labelNode.html      = value;
+        labelNode.text      = value;
         labelNode.removeDom = !Boolean(value);
 
         this.update()

package/src/component/Timer.mjs

@@ -74,7 +74,7 @@ class Timer extends Component {
                             {tag: 'button',cls: 'fa fa-play'}
                         ]},
                         {cls: 'flip-card-back', cn : [
-                            {cls: 'runner', html: '00:00'}
+                            {cls: 'runner', text: '00:00'}
                         ]}
                     ]}
                 ]}
@@ -283,7 +283,7 @@ class Timer extends Component {
         let me    = this,
             timer = me.vdom.cn[0].cn[1].cn[0].cn[1].cn[0];
 
-        timer.html = value;
+        timer.text = value;
         me.update()
     }
 

package/src/component/Toast.mjs

@@ -175,7 +175,7 @@ class Toast extends Component {
     afterSetMsg(value, oldValue) {
         let vdom = this.getTextRootVdom().cn[1];
 
-        vdom.html = value
+        vdom.text = value
     }
 
     /**
@@ -221,8 +221,10 @@ class Toast extends Component {
         let vdom = this.getTextRootVdom().cn[0];
 
         vdom.removeDom = Neo.isEmpty(value);
-        vdom.html      = value;
-        NeoArray[value ? 'add' : 'remove'](vdom.cls, 'neo-toast-has-title')
+        vdom.text      = value;
+        NeoArray.toggle(vdom.cls, 'neo-toast-has-title', value);
+
+        this.update()
     }
 
     /**

package/src/container/AccordionItem.mjs

@@ -78,7 +78,7 @@ class AccordionContainer extends Base {
                 flag   : 'titleEl',
                 ntype  : 'component',
                 baseCls: ['neo-accordion-header-title'],
-                html   : title
+                text   : title
             }, {
                 ntype  : 'component',
                 baseCls: ['neo-accordion-header-arrow'],
@@ -154,7 +154,7 @@ class AccordionContainer extends Base {
         let titleEl = this.down({flag: 'titleEl'});
 
         if (titleEl) {
-            titleEl.html = newValue
+            titleEl.text = newValue
         }
     }
 

package/src/container/Base.mjs

@@ -389,7 +389,7 @@ class Container extends Component {
             case 'String': {
                 item = Neo.create({
                     module: Component,
-                    vdom  : {html: item},
+                    vdom  : {text: item},
                     ...config
                 });
 

package/src/core/Base.mjs

@@ -80,6 +80,14 @@ class Base {
          * @member {String|null} id_=null
          */
         id_: null,
+        /**
+         * An array of remote method names that should be intercepted.
+         * Names used here must be present inside the `remote_` config.
+         * If a remote call for one of these methods arrives, `onInterceptRemotes()` will be called.
+         * @member {String[]|null} interceptRemotes=null
+         * @protected
+         */
+        interceptRemotes: null,
         /**
          * Neo.create() will change this flag to true after the onConstructed() chain is done.
          * @member {Boolean} isConstructed=false
@@ -203,7 +211,7 @@ class Base {
             if (hasManager) {
                 Neo.manager.Instance.register(me);
             } else {
-                Neo.idMap = Neo.idMap || {};
+                Neo.idMap ??= {};
                 Neo.idMap[me.id] = me
             }
         }
@@ -503,10 +511,18 @@ class Base {
 
     /**
      * Gets triggered after all constructors are done
-     * @tutorial 02_ClassSystem
      */
     onConstructed() {}
 
+    /**
+     * Placeholder method for intercepting remote calls.
+     * Subclasses can override this method to implement custom interception logic.
+     * @param {Object} msg The remote message object.
+     */
+    onInterceptRemotes(msg) {
+        // No-op in base class
+    }
+
     /**
      * Helper method to replace string based values containing "@config:" with the matching config value
      * of this instance.

package/src/date/DayViewComponent.mjs

@@ -104,7 +104,7 @@ class DayViewComponent extends Base {
         for (; i < len; i++) {
             config =
             {cls: ['neo-cell'], cn: [
-                {cls : ['neo-cell-content'], html: me.intlFormatDay.format(date)}
+                {cls : ['neo-cell-content'], text: me.intlFormatDay.format(date)}
             ]};
 
             day = date.getDay();
@@ -168,7 +168,7 @@ class DayViewComponent extends Base {
                     tabIndex: hasContent ? -1 : null,
                     cn: [{
                         cls : ['neo-cell-content'],
-                        html: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
+                        text: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
                     }]
                 };
 

package/src/date/SelectorContainer.mjs

@@ -332,7 +332,7 @@ class SelectorContainer extends Container {
             for (; i < 7; i++) {
                 node = centerEl.cn[i];
 
-                node.cn[0].html = me.intlFormatDay.format(date);
+                node.cn[0].text = me.intlFormatDay.format(date);
 
                 day = date.getDay();
 

package/src/form/field/CheckBox.mjs

@@ -397,7 +397,7 @@ class CheckBox extends Field {
             showLabel  = !!value; // hide the label, in case value === null || value === ''
 
         if (showLabel) {
-            valueLabel.html = value
+            valueLabel.text = value
         }
 
         valueLabel.removeDom = !showLabel;
@@ -582,16 +582,16 @@ class CheckBox extends Field {
         if (!(me.clean && !me.mounted)) {
             me._error = value; // silent update
 
-            NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
+            NeoArray.toggle(cls, 'neo-invalid', value);
             me.cls = cls;
 
             errorWrapper = me.vdom.cn[1];
             errorNode    = errorWrapper.cn[0];
 
             if (showError) {
-                errorNode.html = value
+                errorNode.text = value
             } else {
-                delete errorNode.html
+                delete errorNode.text
             }
 
             errorWrapper.removeDom = !showError;

package/src/form/field/ComboBox.mjs

@@ -118,7 +118,12 @@ class ComboBox extends Picker {
          * which you want to submit instead
          * @member {Number|String} valueField='id'
          */
-        valueField: 'id'
+        valueField: 'id',
+        /**
+         * Default width to prevent rendering issues.
+         * @member {Number} width=150
+         */
+        width: 150
     }
 
     /**

package/src/form/field/FileUpload.mjs

@@ -1,6 +1,5 @@
-import Field      from './Base.mjs';
-import NeoArray   from '../../util/Array.mjs';
-import StringUtil from '../../util/String.mjs';
+import Field    from './Base.mjs';
+import NeoArray from '../../util/Array.mjs';
 
 const
     sizeRE           = /^(\d+)(kb|mb|gb)?$/i,
@@ -352,7 +351,7 @@ class FileUpload extends Field {
     onConstructed() {
         super.onConstructed(...arguments);
 
-        this.vdom.cn[4].html = this.chooseFile;
+        this.vdom.cn[4].text = this.chooseFile;
     }
 
     /**
@@ -392,12 +391,9 @@ class FileUpload extends Field {
      */
     onInputValueChange({ files }) {
         const
-            me        = this,
-            {
-                types,
-                cls
-            } = me,
-            body      = me.vdom.cn[1];
+            me           = this,
+            {cls, types} = me,
+            body         = me.vdom.cn[1];
 
         if (files.length) {
             NeoArray.remove(cls, 'neo-field-empty');
@@ -406,17 +402,16 @@ class FileUpload extends Field {
             const
                 file     = files.item(0),
                 pointPos = file.name.lastIndexOf('.'),
-                type     = pointPos > -1 ? file.name.slice(pointPos + 1) : '',
-                escapedFileName = StringUtil.escapeHtml(file.name);
+                type     = pointPos > -1 ? file.name.slice(pointPos + 1) : '';
 
             if (me.types && !types[type]) {
-                body.cn[0].html = escapedFileName;
-                body.cn[1].html = `${me.invalidFileFormat} (.${type}) ${me.formatSize(file.size)}`;
+                body.cn[0].text = file.name;
+                body.cn[1].text = `${me.invalidFileFormat} (.${type}) ${me.formatSize(file.size)}`;
                 me.error = me.pleaseUseTheseTypes?.replace('{allowedFileTypes}', Object.keys(types).join(' .'))
             }
             else if (file.size > me.maxSize) {
-                body.cn[0].html = escapedFileName;
-                body.cn[1].html = me.formatSize(file.size);
+                body.cn[0].text = file.name;
+                body.cn[1].text = me.formatSize(file.size);
                 me.error = me.fileSizeMoreThan?.replace('{allowedFileSize}', String(me._maxSize).toUpperCase());
             }
             // If it passes the type and maxSize check, upload it
@@ -448,7 +443,7 @@ class FileUpload extends Field {
         await me.timeout(100);
         me.focus(me.vdom.cn[2].id);
 
-        me.vdom.cn[1].cn[0].html = StringUtil.escapeHtml(file.name);
+        me.vdom.cn[1].cn[0].text = file.name;
         me.update();
         me.state = 'uploading';
 
@@ -492,10 +487,10 @@ class FileUpload extends Field {
 
         (vdom.style || (vdom.style = {}))['--upload-progress'] = `${progress}turn`;
 
-        vdom.cn[1].cn[1].html = `${this.uploading}... (${Math.round(progress * 100)}%)`;
+        vdom.cn[1].cn[1].text = `${this.uploading}... (${Math.round(progress * 100)}%)`;
 
         this.uploadSize = loaded;
-        this.update();
+        this.update()
     }
 
     onUploadAbort(e) {
@@ -665,15 +660,15 @@ class FileUpload extends Field {
     afterSetDocument(document) {
         if (document) {
             const
-                me      = this,
-                { cls } = me;
+                me    = this,
+                {cls} = me;
 
             NeoArray.remove(cls, 'neo-field-empty');
             me.cls = cls;
 
             me.documentId = document.id;
             me.fileSize = me.formatSize(document.size);
-            me.vdom.cn[1].cn[0].html = StringUtil.escapeHtml(document.fileName);
+            me.vdom.cn[1].cn[0].text = document.fileName;
             me.state = me.documentStatusMap[document.status];
         }
     }
@@ -704,15 +699,15 @@ class FileUpload extends Field {
                 isChangeEventNeeded = true;
                 break;
             case 'upload-failed':
-                status.html = `${me.uploadFailed}${isNaN(me.progress) ? '' : `... (${Math.round(me.progress * 100)}%)`}`;
+                status.text = `${me.uploadFailed}${isNaN(me.progress) ? '' : `... (${Math.round(me.progress * 100)}%)`}`;
                 isChangeEventNeeded = true;
                 break;
             case 'processing':
-                status.html = `${me.scanning}... (${me.formatSize(me.uploadSize)})`;
+                status.text = `${me.scanning}... (${me.formatSize(me.uploadSize)})`;
                 vdom.inert = true;
                 break;
             case 'scan-failed':
-                status.html = `${me.malwareFoundInFile}. \u2022 ${me.fileSize}`;
+                status.text = `${me.malwareFoundInFile}. \u2022 ${me.fileSize}`;
                 me.error = me.pleaseCheck;
                 isChangeEventNeeded = true;
                 break;
@@ -721,19 +716,19 @@ class FileUpload extends Field {
                 anchor.href = me.createUrl(me.downloadUrl, {
                     [me.documentIdParameter] : me.documentId
                 });
-                status.html = me.fileSize;
+                status.text = me.fileSize;
                 isChangeEventNeeded = true;
                 break;
             case 'not-downloadable':
-                status.html = me.document ? me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
+                status.text = me.document ? me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
                 isChangeEventNeeded = true;
                 break;
             case 'deleted':
-                status.html = me.fileWasDeleted;
+                status.text = me.fileWasDeleted;
                 isChangeEventNeeded = true;
                 break;
             case 'error':
-                status.html = me.fileIsInAnErrorState;
+                status.text = me.fileIsInAnErrorState;
                 me.error = me.pleaseCheck;
                 isChangeEventNeeded = true;
             }
@@ -812,16 +807,7 @@ class FileUpload extends Field {
     }
 
     afterSetError(text) {
-        if (text) {
-            this.vdom.cn[5].cn = [{
-                vtype : 'text',
-                html  : text
-            }];
-        }
-        else {
-            this.vdom.cn[5].cn = [];
-        }
-
+        this.vdom.cn[5].cn = text ? [{vtype : 'text', text}] : [];
         this.validate();
         this.update();
     }

package/src/form/field/Range.mjs

@@ -109,7 +109,7 @@ class Range extends Number {
         let me = this;
 
         if (me.showResultInLabel) {
-            me.getLabelEl().html = `[${me.value}] ` + me.labelText
+            me.getLabelEl().text = `[${me.value}] ` + me.labelText
         }
     }
 }

package/src/form/field/Text.mjs

@@ -788,8 +788,8 @@ class Text extends Field {
             showLabel = me.labelPosition === 'top',
             subLabel  = me.vdom.cn[1];
 
-        subLabel.html      = value;
         subLabel.removeDom = !showLabel;
+        subLabel.text      = value;
 
         me.update()
     }
@@ -1494,9 +1494,9 @@ class Text extends Field {
             errorNode    = errorWrapper.cn[0];
 
             if (value) {
-                errorNode.html = value
+                errorNode.text = value
             } else {
-                delete errorNode.html
+                delete errorNode.text
             }
 
             errorWrapper.removeDom = !value;

package/src/form/field/TextArea.mjs

@@ -1,5 +1,4 @@
-import StringUtil from '../../util/String.mjs';
-import Text       from './Text.mjs';
+import Text from './Text.mjs';
 
 /**
  *
@@ -162,7 +161,7 @@ class TextArea extends Text {
             inputEl = me.getInputEl();
 
         if (inputEl) {
-            inputEl.html = StringUtil.escapeHtml(value)
+            inputEl.text = value
         }
 
         super.afterSetValue(value, oldValue);