neo.mjs 5.17.1 → 6.0.0

package/resources/scss/theme-light/toolbar/Base.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'toolbar-background-color': #fff,
-    'toolbar-padding'         : 5px
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .neo-toolbar
-        --toolbar-background-color: #{neo(toolbar-background-color)};
-        --toolbar-padding         : #{neo(toolbar-padding)};
-    }
-}
+:root .neo-theme-light { // .neo-toolbar
+    --toolbar-background-color: #fff;
+    --toolbar-padding         : 5px;
+}

package/resources/scss/theme-light/tree/List.scss

@@ -1,11 +1,4 @@
-$neoMap: map-merge($neoMap, (
-    'tree-list-color'          : #666,
-    'tree-list-menu-item-color': #1c60a0
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .neo-tree-list
-        --tree-list-color          : #{neo(tree-list-color)};
-        --tree-list-menu-item-color: #{neo(tree-list-menu-item-color)};
-    }
-}
+:root .neo-theme-light { // .neo-tree-list
+    --tree-list-color          : #666;
+    --tree-list-menu-item-color: #1c60a0;
+}

package/src/DefaultConfig.mjs

@@ -245,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.17.1'
+     * @default '6.0.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.17.1'
+    version: '6.0.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/StatusBadge.mjs

@@ -1,4 +1,4 @@
-import Base     from '../component/Base.mjs';
+import Base from '../component/Base.mjs';
 import NeoArray from '../util/Array.mjs';
 
 /**
@@ -8,11 +8,11 @@ import NeoArray from '../util/Array.mjs';
 class StatusBadge extends Base {
     /**
      * Valid values for state
-     * @member {String[]} states=['error','neutral','success']
+     * @member {String[]} states=['alert','error','info','neutral','success']
      * @protected
      * @static
      */
-    static states = ['error', 'neutral', 'success']
+    static states = ['alert', 'error', 'info', 'neutral', 'success']
 
     static config = {
         /**
@@ -30,15 +30,297 @@ class StatusBadge extends Base {
          * @protected
          */
         baseCls: ['neo-status-badge'],
+        /**
+        * @member {String[]} currentStateIcon=null
+        */
+        _currentStateIcon: null,
+        /**
+        * @member {String[]} currentSideIcon=null
+        */
+        _currentSideIcon: null,
+        /**
+         * false calls Neo.Main.setRoute()
+         * @member {Boolean} deactivateStateIcons=false
+         */
+        deactivateStateIcons_: false,
+        /**
+         * false calls Neo.Main.setRoute()
+         * @member {Boolean} deactivateSideIcons=false
+         */
+        deactivateSideIcons_: false,
+
+        /**
+        * @member {String} iconAlert='fa-triangle-exclamation'
+        */
+        iconAlert_: 'fa fa-triangle-exclamation',
+        /**
+        * @member {String} iconError='fa-xmark'
+        */
+        iconError_: 'fa fa-xmark',
+        /**
+        * @member {String} iconInfo='fa-info'
+        */
+        iconInfo_: 'fa fa-info',
+        /**
+        * @member {String} iconNeutral='fa-circle'
+        */
+        iconNeutral_: 'fa fa-circle',
+        /**
+        * @member {String} iconSuccess='fa-check'
+        */
+        iconSuccess_: 'fa fa-check',
+
+        /**
+        * @member {String} sideIconAlert='fa fa-registered'
+        */
+        sideIconAlert_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconError='fa fa-registered'
+        */
+        sideIconError_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconInfo='fa fa-registered'
+        */
+        sideIconInfo_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconNeutral='fa fa-registered'
+        */
+        sideIconNeutral_: 'fa fa-registered',
+        /**
+        * @member {String} sideIconSuccess='fa fa-registered'
+        */
+        sideIconSuccess_: 'fa fa-registered',
+
+
+
+        /**
+         * @member {String} labelAlert_='Alert'
+        */
+        labelAlert_: 'Alert',
+        /**
+         * @member {String} labelError_='Error'
+        */
+        labelError_: 'Error',
+        /**
+         * @member {String} labelInfo_='Info'
+        */
+        labelInfo_: 'Info',
+        /**
+         * @member {String} labelNeutral_='Neutral'
+        */
+        labelNeutral_: 'Neutral',
+        /**
+         * @member {String} labelSuccess_='Success'
+        */
+        labelSuccess_: 'Success',
+
+
         /**
          * @member {String} state_='neutral'
          */
         state_: 'neutral',
         /**
-         * @member {Object} vdom
+         * @member {Object} _vdom
          */
-        vdom:
-        {}
+        _vdom:
+        {
+            tag: 'div', type: 'div', cn: [
+                { tag: 'span', cls: ['neo-state-glyph'] },
+                { tag: 'span', cls: ['neo-state-text'] },
+                { tag: 'span', cls: ['neo-state-glyph'] }
+            ]
+        }
+    }
+
+    /**
+    * Triggered after the deactivateStateIcons config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetDeactivateStateIcons(value, oldValue) {
+        this.updateStateIconNode(this._currentStateIcon);
+    }
+
+    /**
+    * Triggered after the deactivateSideIcons config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetDeactivateSideIcons(value, oldValue) {
+        this.updateSideIconNode(this._currentSideIcon);
+    }
+
+    /**
+     * Triggered after the labelAlert config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelAlert(value, oldValue) {
+        if (this.state === 'alert') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+     * Triggered after the iconAlert config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetIconAlert(value, oldValue) {
+        if (this.state === 'alert') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconAlert config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconAlert(value, oldValue) {
+        if (this.state === 'alert') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+    /**
+     * Triggered after the labelError config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelError(value, oldValue) {
+        if (this.state === 'error') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconError config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconError(value, oldValue) {
+        if (this.state === 'error') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconError config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconError(value, oldValue) {
+        if (this.state === 'error') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+
+    /**
+     * Triggered after the labelInfo config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelInfo(value, oldValue) {
+        if (this.state === 'info') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconInfo config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconInfo(value, oldValue) {
+        if (this.state === 'info') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconInfo config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconInfo(value, oldValue) {
+        if (this.state === 'info') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+    /**
+     * Triggered after the labelNeutral config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelNeutral(value, oldValue) {
+        if (this.state === 'neutral') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconNeutral config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconNeutral(value, oldValue) {
+        if (this.state === 'neutral') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconNeutral config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconNeutral(value, oldValue) {
+        if (this.state === 'neutral') {
+            this.updateSideIconNode(value);
+        }
+    }
+
+    /**
+     * Triggered after the labelSuccess config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelSuccess(value, oldValue) {
+        if (this.state === 'success') {
+            this.updateLabelNode(value);
+        }
+    }
+    /**
+    * Triggered after the iconSuccess config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetIconSuccess(value, oldValue) {
+        if (this.state === 'success') {
+            this.updateStateIconNode(value);
+        }
+    }
+    /**
+     * Triggered after the sideIconSuccess config got changed
+    * @param {String|null} value
+    * @param {String|null} oldValue
+    * @protected
+    */
+    afterSetSideIconSuccess(value, oldValue) {
+        if (this.state === 'success') {
+            this.updateSideIconNode(value);
+        }
     }
 
     /**
@@ -48,12 +330,58 @@ class StatusBadge extends Base {
      * @protected
      */
     afterSetState(value, oldValue) {
-        let cls = this.cls;
+
+        let cls = this.cls,
+            me = this,
+            isEmpty = !value || value === '',
+            vdomRoot = me.getVdomRoot(),
+            labelNode = vdomRoot.cn[1];
 
         NeoArray.remove(cls, 'neo-state-' + oldValue);
         NeoArray.add(cls, 'neo-state-' + value);
 
         this.cls = cls
+
+        labelNode.removeDom = isEmpty;
+
+        if (!isEmpty) {
+            let showLabel = '';
+            let showStateIcon = '';
+            let showSideIcon = '';
+
+            switch (value) {
+                case 'alert':
+                    showLabel = me.labelAlert;
+                    showStateIcon = me.iconAlert;
+                    showSideIcon = me.sideIconAlert;
+                    break;
+                case 'error':
+                    showLabel = me.labelError;
+                    showStateIcon = me.iconError;
+                    showSideIcon = me.sideIconError;
+                    break;
+                case 'info':
+                    showLabel = me.labelInfo;
+                    showStateIcon = me.iconInfo;
+                    showSideIcon = me.sideIconInfo;
+                    break;
+                case 'neutral':
+                    showLabel = me.labelNeutral;
+                    showStateIcon = me.iconNeutral;
+                    showSideIcon = me.sideIconNeutral;
+                    break;
+                case 'success':
+                    showLabel = me.labelSuccess;
+                    showStateIcon = me.iconSuccess;
+                    showSideIcon = me.sideIconSuccess;
+                    break;
+            }
+            labelNode.innerHTML = showLabel;
+            this.updateStateIconNode(showStateIcon);
+            this.updateSideIconNode(showSideIcon);
+        }
+
+        me.update();
     }
 
     /**
@@ -66,6 +394,105 @@ class StatusBadge extends Base {
     beforeSetState(value, oldValue) {
         return this.beforeSetEnumValue(value, oldValue, 'state')
     }
+
+    /**
+     * Convenience shortcut
+    * @returns {Object}
+    */
+    updateLabelNode(value) {
+        let labelNode = this.getVdomRoot().cn[1];
+
+        labelNode.innerHTML = value;
+        labelNode.removeDom = !Boolean(value);
+
+        this.update();
+    }
+
+    /**
+     * Convenience shortcut
+    * @returns {Object}
+    */
+    updateStateIconNode(value) {
+        let iconNode = this.getStateIconNode();
+        let currentValue = this._currentStateIcon;
+
+        if (value && !Array.isArray(value)) {
+            value = value.split(' ').filter(Boolean);
+        }
+        if (currentValue && !Array.isArray(currentValue)) {
+            currentValue = value.split(' ').filter(Boolean);
+        }
+
+        NeoArray.remove(iconNode.cls, currentValue);
+        NeoArray.add(iconNode.cls, value);
+
+        iconNode.removeDom = !value || value === '' || this.deactivateStateIcons;
+
+        this._currentStateIcon = value;
+        this.update();
+    }
+
+    /**
+     * Convenience shortcut
+     * @returns {Object}
+     */
+    getStateIconNode() {
+        return this.getVdomRoot().cn[0]
+    }
+
+
+    /**
+     * Triggered after the StateIcon config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetStateIcon(value, oldValue) {
+        this.updateStateIconNode(value, oldValue);
+    }
+
+    /**
+     * Convenience shortcut
+    * @returns {Object}
+    */
+    updateSideIconNode(value) {
+        let iconNode = this.getSideIconNode();
+        let currentValue = this._currentSideIcon;
+
+        if (value && !Array.isArray(value)) {
+            value = value.split(' ').filter(Boolean);
+        }
+        if (currentValue && !Array.isArray(currentValue)) {
+            currentValue = value.split(' ').filter(Boolean);
+        }
+
+        NeoArray.remove(iconNode.cls, currentValue);
+        NeoArray.add(iconNode.cls, value);
+
+        iconNode.removeDom = !value || value === '' || this.deactivateSideIcons;
+
+        this._currentSideIcon = value;
+        this.update();
+    }
+
+    /**
+     * Convenience shortcut
+     * @returns {Object}
+     */
+    getSideIconNode() {
+        return this.getVdomRoot().cn[2]
+    }
+
+
+    /**
+     * Triggered after the StateIcon config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetSideIcon(value, oldValue) {
+        this.updateSideIconNode(value, oldValue);
+    }
 }
 
 Neo.applyClassConfig(StatusBadge);

package/src/form/field/FileUpload.mjs

@@ -281,6 +281,14 @@ class FileUpload extends Base {
          */
         documentDeleteUrl_ : null,
 
+        /**
+         * The HTTP method to use when requesting a document deletion using the {@link #member-documentDeleteUrl}.
+         * 
+         * Defaults to `DELETE`.
+         * @member {String} documentDeleteMethod
+         */
+        documentDeleteMethod : 'DELETE',
+
         /**
          * @member {String} state_=null
          */
@@ -545,6 +553,7 @@ class FileUpload extends Base {
 
         // We ask the server to delete using our this.documentId
         const statusResponse = await fetch(me.documentDeleteUrl, {
+            method : me.documentDeleteMethod,
             headers
         });
 

package/src/main/DomAccess.mjs

@@ -509,8 +509,8 @@ class DomAccess extends Base {
      */
     selectNode(data) {
         let node  = this.getElement(data.id),
-            start = Neo.isNumber(data.start) || 0,
-            end   = Neo.isNumber(data.end)   || 99999;
+            start = Neo.isNumber(data.start) ? data.start : 0,
+            end   = Neo.isNumber(data.end)   ? data.end   : 99999;
 
         if (node) {
             node.select();

package/src/main/DomEvents.mjs

@@ -118,6 +118,7 @@ class DomEvents extends Base {
 
         let me = this;
 
+        document.addEventListener('selectionchange',  me.onSelectionChange .bind(me));
         document.addEventListener('DOMContentLoaded', me.onDomContentLoaded.bind(me));
         window  .addEventListener('hashchange',       me.onHashChange      .bind(me));
 
@@ -331,6 +332,16 @@ class DomEvents extends Base {
         return path
     }
 
+    getSelectionPath(path, target) {
+        if (target.parentNode && target.id.split('__').length > 1) {
+            path = this.getSelectionPath(path, target.parentNode);
+        }
+
+        path.push(this.getTargetData(target));
+
+        return path;
+    }
+
     /**
      * @param {Object} node
      * @returns {Object}
@@ -388,7 +399,7 @@ class DomEvents extends Base {
         let manager = Neo.worker.Manager;
 
         manager.appNames.forEach(appName => {
-            manager.broadcast({action : 'disconnect', appName})
+            manager.broadcast({action: 'disconnect', appName})
         })
     }
 
@@ -401,11 +412,11 @@ class DomEvents extends Base {
             tagName = target.tagName,
             value   = target.value,
 
-        data = {
-            ...me.getEventData(event),
-            valid: target.checkValidity(),
-            value: tagName === 'INPUT' ? StringUtil.escapeHtml(value) : tagName === 'TEXTAREA' ? me.stripHtml(value) : value
-        };
+            data    = {
+                ...me.getEventData(event),
+                valid: target.checkValidity(),
+                value: tagName === 'INPUT' ? StringUtil.escapeHtml(value) : tagName === 'TEXTAREA' ? me.stripHtml(value) : value
+            };
 
         // input and change events can pass a FileList for input type file
         if (target.files) {
@@ -489,8 +500,8 @@ class DomEvents extends Base {
         manager.sendMessage('app', {
             action: 'hashChange',
             data  : {
-                appNames  : manager.appNames,
-                hash      : this.parseHash(hashString),
+                appNames: manager.appNames,
+                hash    : this.parseHash(hashString),
                 hashString
             }
         })
@@ -575,6 +586,33 @@ class DomEvents extends Base {
         })
     }
 
+    /**
+     * @param {Object} event
+     */
+    onSelectionChange(event) {
+        const me     = this,
+              target = event.target.activeElement;
+
+        if (target.tagName === 'BODY') return;
+
+
+        const targetData  = me.getTargetData(target),
+              path        = me.getSelectionPath([], target),
+              outputEvent = {
+                  selection: {
+                      start    : target.selectionStart,
+                      end      : target.selectionEnd,
+                      direction: target.selectionDirection
+                  },
+                  path     : path,
+                  target   : targetData,
+                  timeStamp: event.timeStamp,
+                  type     : "selectionchange"
+              };
+
+        me.sendMessageToApp(outputEvent);
+    }
+
     /**
      * @param {Object} event
      */
@@ -599,7 +637,7 @@ class DomEvents extends Base {
                 }
             }
 
-             if (!preventUpdate) {
+            if (!preventUpdate) {
                 let {deltaX, deltaY, deltaZ} = event;
 
                 this.sendMessageToApp({
@@ -659,7 +697,7 @@ class DomEvents extends Base {
                 parts.push('')
             }
 
-            key   = decodeURIComponent(parts[0]);
+            key = decodeURIComponent(parts[0]);
             value = decodeURIComponent(parts[1]);
 
             if (key.indexOf('[]') !== -1) {
@@ -770,10 +808,10 @@ class DomEvents extends Base {
         for (; i < len; i++) {
             node = path[i];
 
-            for (j=0; j < countTargets; j++) {
+            for (j = 0; j < countTargets; j++) {
                 if (node.classList?.contains(targetArray[j])) {
                     return {
-                        cls : targetArray[j],
+                        cls: targetArray[j],
                         node
                     };
                 }