neo.mjs 5.18.0 → 6.0.1

package/resources/scss/theme-light/table/View.scss

@@ -1,29 +1,13 @@
-$neoMap: map-merge($neoMap, (
-        'table-cell-background-color-hover'                    : lighten(#33343d, 70%),
-        'table-cellmodel-selected-cell-background-color'       : lighten(#64B5F6, 22%),
-        'table-cellmodel-selected-cell-color'                  : #2b2b2b,
-        'table-cellmodel-selected-column-cell-background-color': lighten(#4f558a, 52%),
-        'table-cellmodel-selected-column-cell-color'           : #2b2b2b,
-        'table-cellrowmodel-selected-cell-background-color'    : lighten(#64B5F6, 22%),
-        'table-cellrowmodel-selected-cell-color'               : #2b2b2b,
-        'table-cellrowmodel-selected-row-cell-background-color': lighten(#4f558a, 52%),
-        'table-cellrowmodel-selected-row-cell-color'           : #2b2b2b,
-        'table-rowmodel-selected-cell-background-color'        : lighten(#64B5F6, 22%),
-        'table-rowmodel-selected-cell-color'                   : #2b2b2b
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .neo-table-view
-        --table-cell-background-color-hover                    : #{neo(table-cell-background-color-hover)};
-        --table-cellmodel-selected-cell-background-color       : #{neo(table-cellmodel-selected-cell-background-color)};
-        --table-cellmodel-selected-cell-color                  : #{neo(table-cellmodel-selected-cell-color)};
-        --table-cellmodel-selected-column-cell-background-color: #{neo(table-cellmodel-selected-column-cell-background-color)};
-        --table-cellmodel-selected-column-cell-color           : #{neo(table-cellmodel-selected-column-cell-color)};
-        --table-cellrowmodel-selected-cell-background-color    : #{neo(table-cellrowmodel-selected-cell-background-color)};
-        --table-cellrowmodel-selected-cell-color               : #{neo(table-cellrowmodel-selected-cell-color)};
-        --table-cellrowmodel-selected-row-cell-background-color: #{neo(table-cellrowmodel-selected-row-cell-background-color)};
-        --table-cellrowmodel-selected-row-cell-color           : #{neo(table-cellrowmodel-selected-row-cell-color)};
-        --table-rowmodel-selected-cell-background-color        : #{neo(table-rowmodel-selected-cell-background-color)};
-        --table-rowmodel-selected-cell-color                   : #{neo(table-rowmodel-selected-cell-color)};
-    }
-}
+:root .neo-theme-light { // .neo-table-view
+    --table-cell-background-color-hover                    : #{lighten(#33343d, 70%)};
+    --table-cellmodel-selected-cell-background-color       : #{lighten(#64B5F6, 22%)};
+    --table-cellmodel-selected-cell-color                  : #2b2b2b;
+    --table-cellmodel-selected-column-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellmodel-selected-column-cell-color           : #2b2b2b;
+    --table-cellrowmodel-selected-cell-background-color    : #{lighten(#64B5F6, 22%)};
+    --table-cellrowmodel-selected-cell-color               : #2b2b2b;
+    --table-cellrowmodel-selected-row-cell-background-color: #{lighten(#4f558a, 52%)};
+    --table-cellrowmodel-selected-row-cell-color           : #2b2b2b;
+    --table-rowmodel-selected-cell-background-color        : #{lighten(#64B5F6, 22%)};
+    --table-rowmodel-selected-cell-color                   : #2b2b2b;
+}

package/resources/scss/theme-light/table/header/Button.scss

@@ -1,17 +1,7 @@
-$neoMap: map-merge($neoMap, (
-    'table-header-button-background-color'       : #5d83a7,
-    'table-header-button-background-image'       : none,
-    'table-header-button-color'                  : #fff,
-    'table-header-button-glyph-color'            : #fff,
-    'table-header-button-ripple-background-color': darken(#5d83a7, 10%),
-));
-
-@if $useCssVars == true {
-    :root .neo-theme-light { // .neo-table-header-button
-        --table-header-button-background-color       : #{neo(table-header-button-background-color)};
-        --table-header-button-background-image       : #{neo(table-header-button-background-image)};
-        --table-header-button-color                  : #{neo(table-header-button-color)};
-        --table-header-button-glyph-color            : #{neo(table-header-button-glyph-color)};
-        --table-header-button-ripple-background-color: #{neo(table-header-button-ripple-background-color)};
-    }
+:root .neo-theme-light { // .neo-table-header-button
+    --table-header-button-background-color       : #5d83a7;
+    --table-header-button-background-image       : none;
+    --table-header-button-color                  : #fff;
+    --table-header-button-glyph-color            : #fff;
+    --table-header-button-ripple-background-color: #{darken(#5d83a7, 10%)};
 }

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.18.0'
+     * @default '6.0.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.18.0'
+    version: '6.0.1'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Splitter.mjs

@@ -170,7 +170,6 @@ class Splitter extends Component {
                 newSize = data.clientX - data.offsetX - size - parentRect.left;
 
                 if (resizeNext) {
-                    console.log(parentRect);
                     newSize = parentRect.width - newSize -  2 * size
                 } else {
                     newSize += size

package/src/draggable/tab/header/toolbar/SortZone.mjs

@@ -31,7 +31,7 @@ class SortZone extends BaseSortZone {
      * @param {Number} toIndex
      */
     moveTo(fromIndex, toIndex) {
-        this.owner.up().moveTo(fromIndex, toIndex);
+        this.owner.up().moveTo(fromIndex, toIndex)
     }
 
     /**
@@ -47,7 +47,7 @@ class SortZone extends BaseSortZone {
 
             NeoArray.remove(cls, 'neo-no-animation');
             owner.cls = cls;
-        }, 300);
+        }, 300)
     }
 
     /**
@@ -61,7 +61,7 @@ class SortZone extends BaseSortZone {
         NeoArray.add(cls, 'neo-no-animation');
         owner.cls = cls;
 
-        super.onDragStart(data);
+        super.onDragStart(data)
     }
 }
 

package/src/form/field/FileUpload.mjs

@@ -122,6 +122,10 @@ class FileUpload extends Base {
                     tag  : 'input',
                     type : 'file'
                 },
+                {
+                    cls  : 'neo-file-upload-label',
+                    tag  : 'label'
+                },
                 {
                     cls : 'neo-file-upload-error-message'
                 }
@@ -149,7 +153,7 @@ class FileUpload extends Base {
             UPLOADING        : 'scanning',
 
             MALWARE_DETECTED : 'scan-failed',
-            UN_DOWNLOADABLE  : 'not-downloadable',
+            AVAILABLE        : 'not-downloadable',
             DOWNLOADABLE     : 'downloadable',
             DELETED          : 'deleted'
         },
@@ -281,6 +285,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
          */
@@ -303,6 +315,7 @@ class FileUpload extends Base {
         error_ : null,
 
         // UI strings which can be overridden for other languages
+        chooseFile           : 'Choose file',
         documentText         : 'Document',
         pleaseUseTheseTypes  : 'Please use these file types',
         fileSizeMoreThan     : 'File size exceeds',
@@ -311,6 +324,7 @@ class FileUpload extends Base {
         documentStatusError  : 'Document status service error',
         uploadFailed         : 'Upload failed',
         scanning             : 'Scanning',
+        uploading            : 'Uploading...',
         malwareFoundInFile   : 'Malware found in file',
         pleaseCheck          : 'Please check the file and try again',
         successfullyUploaded : 'Successfully uploaded',
@@ -331,6 +345,18 @@ class FileUpload extends Base {
         ]);
     }
 
+    afterSetId(value, oldValue) {
+        const
+            labelEl   = this.vdom.cn[4],
+            inputElId = `${this.id}-input`;
+
+        this.getInputEl().id =  labelEl.for = inputElId;
+        labelEl.html = this.chooseFile;
+
+        // silent vdom update, the super call will trigger the engine
+        super.afterSetId?.(value, oldValue);
+    }
+    
     /**
      * @returns {Object}
      */
@@ -420,7 +446,7 @@ class FileUpload extends Base {
 
         /**
          * This event fires before every HTTP request is sent to the server via any of the configured URLs.
-         * 
+         *
          * @event beforeRequest
          * @param {Object} event The event
          * @param {Object} event.headers An object containing the configured {@link #property-headers}
@@ -444,7 +470,7 @@ class FileUpload extends Base {
 
         (vdom.style || (vdom.style = {}))['--upload-progress'] = `${progress}turn`;
 
-        vdom.cn[1].cn[1].innerHTML = `Uploading... (${Math.round(progress * 100)}%)`;
+        vdom.cn[1].cn[1].innerHTML = `${this.uploading}... (${Math.round(progress * 100)}%)`;
 
         this.uploadSize = loaded;
         this.update();
@@ -545,6 +571,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
         });
 
@@ -731,13 +758,13 @@ class FileUpload extends Base {
 
     afterSetError(text) {
         if (text) {
-            this.vdom.cn[4].cn = [{
+            this.vdom.cn[5].cn = [{
                 vtype : 'text',
                 html  : text
             }];
         }
         else {
-            this.vdom.cn[4].cn = [];
+            this.vdom.cn[5].cn = [];
         }
 
         this.validate();

package/src/form/field/Text.mjs

@@ -665,7 +665,7 @@ class Text extends Base {
 
         me.silentVdomUpdate = true;
 
-        !me.clean && me.validate(false);
+        me.validate(false);
         me.changeInputElKey('required', value ? value : null);
         me.labelText = me.labelText; // apply the optional text if needed
 

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

package/src/manager/DomEvent.mjs

@@ -31,6 +31,7 @@ const globalDomEvents = [
     'mouseleave',
     'mouseup',
     'scroll',
+    'selectionchange',
     'wheel'
 ];