neo.mjs 5.18.0 → 6.0.0

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

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

package/resources/scss/mixins/_all.scss

@@ -1,31 +0,0 @@
-@function neo($key) {
-    @return map-get($neoMap, $key);
-}
-
-@function calcVar($name, $operator, $value) {
-    @if($useCssVars) {
-             @if ($operator == '+') {@return calc(#{v(#{$name})} + #{$value});}
-        @else if ($operator == '-') {@return calc(#{v(#{$name})} - #{$value});}
-        @else if ($operator == '*') {@return calc(#{v(#{$name})} * #{$value});}
-        @else if ($operator == '/') {@return calc(#{v(#{$name})} / #{$value});}
-    } @else {
-        $var: neo($name);
-
-             @if ($operator == '+') {@return calc(#{$var} + #{$value});}
-        @else if ($operator == '-') {@return calc(#{$var} - #{$value});}
-        @else if ($operator == '*') {@return calc(#{$var} * #{$value});}
-        @else if ($operator == '/') {@return calc(#{$var} / #{$value});}
-    }
-}
-
-@function v($name, $fallback: null) {
-    @if($useCssVars) {
-        @if($fallback) {
-            @return var(--#{$name}, #{$fallback});
-        } @else {
-            @return var(--#{$name});
-        }
-    } @else {
-        @return #{neo($name)};
-    }
-}

package/resources/scss/theme-dark/_all.scss

@@ -1,15 +0,0 @@
-@import "Global";
-
-@import "apps/all";
-@import "button/all";
-@import "calendar/all";
-@import "component/all";
-@import "dialog/all";
-@import "container/all";
-@import "examples/all";
-@import "form/all";
-@import "list/all";
-@import "menu/all";
-@import "tab/all";
-@import "table/all";
-@import "tree/all";

package/resources/scss/theme-dark/apps/_all.scss

@@ -1,3 +0,0 @@
-@import "covid/all";
-@import "docs/all";
-@import "website/all";

package/resources/scss/theme-dark/apps/covid/_all.scss

@@ -1,4 +0,0 @@
-@import "country/Gallery";
-@import "country/Helix";
-@import "country/LineChartComponent";
-@import "HeaderContainer";

package/resources/scss/theme-dark/apps/docs/_all.scss

@@ -1,6 +0,0 @@
-@import "classdetails/all";
-@import "ContentTabContainer";
-@import "ExamplesTreeList";
-@import "HeaderContainer";
-@import "MainContainer";
-@import "TutorialsTreeList";

package/resources/scss/theme-dark/apps/docs/classdetails/_all.scss

@@ -1,5 +0,0 @@
-@import "HeaderComponent";
-@import "HierarchyTreeList";
-@import "MainContainer";
-@import "MembersList";
-@import "TutorialComponent";

package/resources/scss/theme-dark/apps/website/_all.scss

@@ -1,4 +0,0 @@
-@import "blog/Container";
-@import "home/TabContainer";
-@import "HeaderContainer";
-@import "MainContainer";

package/resources/scss/theme-dark/button/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-dark/calendar/_all.scss

@@ -1,8 +0,0 @@
-@import "view/calendars/EditContainer";
-@import "view/calendars/List";
-@import "view/month/Component";
-@import "view/week/Component";
-@import "view/EditEventContainer";
-@import "view/MainContainer";
-@import "view/SettingsContainer";
-@import "view/YearComponent";

package/resources/scss/theme-dark/component/_all.scss

@@ -1,5 +0,0 @@
-@import "BoxLabel";
-@import "Chip";
-@import "Circle";
-@import "DateSelector";
-@import "Splitter";

package/resources/scss/theme-dark/container/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Panel";
-@import "Viewport";

package/resources/scss/theme-dark/dialog/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-dark/examples/_all.scss

@@ -1,2 +0,0 @@
-@import "calendar/basic/MainContainer";
-@import "ConfigurationPanel";

package/resources/scss/theme-dark/form/_all.scss

@@ -1,9 +0,0 @@
-@import "field/trigger/all";
-@import "field/CheckBox";
-@import "field/Picker";
-@import "field/Range";
-@import "field/Search";
-@import "field/Select";
-@import "field/Text";
-
-@import "Fieldset";

package/resources/scss/theme-dark/form/field/trigger/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Clear";
-@import "Time";

package/resources/scss/theme-dark/grid/_all.scss

@@ -1,3 +0,0 @@
-@import "header/all";
-@import "Container";
-@import "View";

package/resources/scss/theme-dark/grid/header/_all.scss

@@ -1,2 +0,0 @@
-@import "Button";
-@import "Toolbar";

package/resources/scss/theme-dark/list/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-dark/menu/_all.scss

@@ -1,2 +0,0 @@
-@import "List";
-@import "Panel";

package/resources/scss/theme-dark/tab/_all.scss

@@ -1,3 +0,0 @@
-@import "Container";
-@import "header/Button";
-@import "Strip";

package/resources/scss/theme-dark/table/_all.scss

@@ -1,3 +0,0 @@
-@import "header/all";
-@import "Container";
-@import "View";

package/resources/scss/theme-dark/table/header/_all.scss

@@ -1,2 +0,0 @@
-@import "Button";
-@import "Toolbar";

package/resources/scss/theme-dark/tree/_all.scss

@@ -1 +0,0 @@
-@import "List";

package/resources/scss/theme-light/_all.scss

@@ -1,15 +0,0 @@
-@import "Global";
-
-@import "apps/all";
-@import "button/all";
-@import "calendar/all";
-@import "component/all";
-@import "container/all";
-@import "dialog/all";
-@import "examples/all";
-@import "form/all";
-@import "list/all";
-@import "menu/all";
-@import "tab/all";
-@import "table/all";
-@import "tree/all";

package/resources/scss/theme-light/apps/_all.scss

@@ -1,3 +0,0 @@
-@import "covid/all";
-@import "docs/all";
-@import "website/all";

package/resources/scss/theme-light/apps/covid/_all.scss

@@ -1,4 +0,0 @@
-@import "country/Gallery";
-@import "country/Helix";
-@import "country/LineChartComponent";
-@import "HeaderContainer";

package/resources/scss/theme-light/apps/docs/_all.scss

@@ -1,6 +0,0 @@
-@import "classdetails/all";
-@import "ContentTabContainer";
-@import "ExamplesTreeList";
-@import "HeaderContainer";
-@import "MainContainer";
-@import "TutorialsTreeList";

package/resources/scss/theme-light/apps/docs/classdetails/_all.scss

@@ -1,5 +0,0 @@
-@import "HeaderComponent";
-@import "HierarchyTreeList";
-@import "MainContainer";
-@import "MembersList";
-@import "TutorialComponent";

package/resources/scss/theme-light/apps/website/_all.scss

@@ -1,4 +0,0 @@
-@import "blog/Container";
-@import "home/TabContainer";
-@import "HeaderContainer";
-@import "MainContainer";

package/resources/scss/theme-light/button/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-light/calendar/_all.scss

@@ -1,8 +0,0 @@
-@import "view/calendars/EditContainer";
-@import "view/calendars/List";
-@import "view/month/Component";
-@import "view/week/Component";
-@import "view/EditEventContainer";
-@import "view/MainContainer";
-@import "view/SettingsContainer";
-@import "view/YearComponent";

package/resources/scss/theme-light/component/_all.scss

@@ -1,5 +0,0 @@
-@import "BoxLabel";
-@import "Chip";
-@import "Circle";
-@import "DateSelector";
-@import "Splitter";

package/resources/scss/theme-light/container/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Panel";
-@import "Viewport";

package/resources/scss/theme-light/dialog/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-light/examples/_all.scss

@@ -1,2 +0,0 @@
-@import "calendar/basic/MainContainer";
-@import "ConfigurationPanel";

package/resources/scss/theme-light/form/_all.scss

@@ -1,9 +0,0 @@
-@import "field/trigger/all";
-@import "field/CheckBox";
-@import "field/Picker";
-@import "field/Range";
-@import "field/Search";
-@import "field/Select";
-@import "field/Text";
-
-@import "Fieldset";

package/resources/scss/theme-light/form/field/trigger/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Clear";
-@import "Time";

package/resources/scss/theme-light/grid/_all.scss

@@ -1,3 +0,0 @@
-@import "header/all";
-@import "Container";
-@import "View";

package/resources/scss/theme-light/grid/header/_all.scss

@@ -1,2 +0,0 @@
-@import "Button";
-@import "Toolbar";

package/resources/scss/theme-light/list/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-light/menu/_all.scss

@@ -1,2 +0,0 @@
-@import "List";
-@import "Panel";

package/resources/scss/theme-light/tab/_all.scss

@@ -1,3 +0,0 @@
-@import "Container";
-@import "header/Button";
-@import "Strip";

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

@@ -1,3 +0,0 @@
-@import "header/all";
-@import "Container";
-@import "View";

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

@@ -1,2 +0,0 @@
-@import "Button";
-@import "Toolbar";

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

@@ -1 +0,0 @@
-@import "List";