neo.mjs 6.0.3 → 6.1.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.0.3'
+         * @member {String} version='6.1.0'
          */
-        version: '6.0.3'
+        version: '6.1.0'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.0.3'
+         * @member {String} version='6.1.0'
          */
-        version: '6.0.3'
+        version: '6.1.0'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.0.3",
+    "version": "6.1.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/form/field/CheckBox.scss

@@ -1,4 +1,14 @@
 .neo-checkboxfield {
+    .neo-checkbox-icon {
+        color      : var(--checkboxfield-color);
+        cursor     : pointer;
+        display    : inline-block;
+        font-family: var(--checkboxfield-icon-font-family);
+        font-size  : var(--checkboxfield-icon-font-size);
+        margin     : var(--checkboxfield-icon-margin);
+        width      : 20px;
+    }
+
     .neo-checkbox-input {
         margin: 0;
         width: 0; // using display: none would break the keynav
@@ -14,19 +24,10 @@
         }
     }
 
-    .neo-checkbox-icon {
-        color      : var(--checkboxfield-color);
-        cursor     : pointer;
-        display    : inline-block;
-        font-family: var(--checkboxfield-icon-font-family);
-        font-size  : var(--checkboxfield-icon-font-size);
-        margin     : var(--checkboxfield-icon-margin);
-        width      : 20px;
-    }
-
     .neo-checkbox-label {
+        align-items: center;
         color      : var(--textfield-label-color);
-        display    : inline-block;
+        display    : flex;
         user-select: none;
     }
 

package/resources/scss/src/form/field/FileUpload.scss

@@ -98,14 +98,33 @@
         flex          : 0 0 1.2rem;
     }
 
-    // The file input and label is only visible in the ready state
-    &:not(.neo-file-upload-state-ready) {
+    // When we have a file selected, the file input and label are hidden
+    &:not(.neo-field-empty) {
         input[type="file"],label {
             display : none;
         }
     }
 
-    &.neo-invalid {
+    &.neo-field-empty {
+        // The input field and its label are visible when no file is selected.
+        // It takes up the whole component, and is the only interactive item
+        :not(input[type="file"],label) {
+            display : none;
+        }
+        input::file-selector-button {
+            position         : absolute;
+            border           : 0 none;
+            margin           : 0;
+            top              : 0;
+            left             : 0;
+            right            : 0;
+            bottom           : 0;
+            background-color : var(--fileuploadfield-background-color);
+            color            : var(--fileuploadfield-color);
+        }
+    }
+
+    &.neo-invalid:not(.neo-field-empty) {
         .neo-file-upload-error-message {
             display : initial;
         }
@@ -233,25 +252,6 @@
     }
 }
 
-.neo-file-upload-state-ready:not(.neo-invalid) {
-    // Only the input field and its label is visible when in ready state
-    // It takes up the whole component, and is the only interactive item
-    :not(input[type="file"],label) {
-        display : none;
-    }
-    input::file-selector-button {
-        position         : absolute;
-        border           : 0 none;
-        margin           : 0;
-        top              : 0;
-        left             : 0;
-        right            : 0;
-        bottom           : 0;
-        background-color : var(--fileuploadfield-background-color);
-        color            : var(--fileuploadfield-color);
-    }
-}
-
 .neo-file-upload-body {
     flex        : 1 1 0%;
     display     : flex;

package/resources/scss/src/form/field/Switch.scss

@@ -1,75 +1,86 @@
 .neo-switchfield {
-    @keyframes switch-off-transform {
-          0% {transform: translate(100%) scaleX(1)}
-         25% {transform: translate(100%) scaleX(1.33)}
-        100% {transform: translate(0)    scaleX(1)}
-    }
-
-    @keyframes switch-on-transform {
-          0% {transform: translate(0)    scaleX(1)}
-         25% {transform: translate(0)    scaleX(1.33)}
-        100% {transform: translate(100%) scaleX(1)}
-    }
-
     .neo-switchfield-input {
-        background-clip : padding-box;
-        background-color: var(--switchfield-background-color);
-        border-color    : transparent;
-        border-radius   : 1.25em;
-        color           : var(--switchfield-inactive-color);
-        display         : inline-block;
-        font-size       : 1.5em;
-        height          : 1.5em;
+        background-color: var(--switchfield-color-off-idle);
+        border-radius   : 999px;
+        height          : var(--switchfield-height);
+        margin          : 0;
         position        : relative;
-        transition      : transform 0.25s linear 0.25s;
-        vertical-align  : middle;
-        width           : 3em;
+        width           : var(--switchfield-width);
 
         -webkit-appearance         : none;
         -webkit-tap-highlight-color: transparent;
 
-        &::after {
-            content       : "\f00c\f00d";
-            font-family   : "Font Awesome 6 Free";
-            font-size     : 1.25rem;
-            font-weight   : 900;
-            left          : 0.5em;
-            letter-spacing: 1em;
-            line-height   : 1.5;
-            position      : absolute;
-            top           : 0.15em;
-            z-index       : 1;
+        &:after,
+        &:before {
+            content : "";
+            position: absolute;
         }
 
-        &::before {
-            animation       : switch-off-transform 0.25s ease-out forwards;
-            background-clip : padding-box;
-            background-color: var(--switchfield-thumb-color);
-            border          : 0.125em solid transparent;
-            border-radius   : 100%;
-            bottom          : 0;
-            content         : "";
+        &:before {
+            background-color: var(--switchfield-color-knob);
+            border-radius   : 50%;
+            height          : var(--switchfield-knobsize);
             left            : 0;
-            position        : absolute;
-            right           : 50%;
-            top             : 0;
-            transform-origin: right center;
-            z-index         : 2;
+            top             : 1.5px;
+            transition      : transform 150ms ease-out;
+            width           : var(--switchfield-knobsize);
+        }
+
+        &:after {
+            border       : 1px solid var(--switchfield-color-knob);
+            border-radius: 50%;
+            bottom       : 7px;
+            height       : 8px;
+            right        : 7px;
+            width        : 8px;
         }
 
         &:checked {
-            background-color: var(--switchfield-checked);
-            color           : var(--switchfield-inactive-color);
+            background-color: var(--switchfield-color-on-idle);
 
-            &::before {
-                animation       : switch-on-transform 0.25s ease-out forwards;
-                transform-origin: left center;
+            &:before {
+                transform: translateX(100%);
+            }
+
+            &:after {
+                background-color: var(--switchfield-color-knob);
+                border          : 0;
+                bottom          : 8px;
+                left            : 9px;
+                right           : auto;
+                width           : 1px;
+            }
+
+            &:hover {
+                background-color: var(--switchfield-color-on-hovered);
             }
         }
 
         &:focus {
-            color  : var(--switchfield-active-color);
-            outline: none;
+            outline: var(--switchfield-borderwidth-focused) solid var(--switchfield-bordercolor-focused);
+        }
+
+        &:hover {
+            background-color: var(--switchfield-color-off-hovered);
+        }
+    }
+
+    .neo-checkbox-value-label {
+        margin-left: 1em;
+    }
+}
+
+.neo-disabled {
+    .neo-switchfield,
+    &.neo-switchfield {
+        opacity: var(--switchfield-opacity-disabled);
+
+        .neo-switchfield-input {
+            background-color: var(--switchfield-color-off-disabled);
+
+            &:checked {
+                background-color: var(--switchfield-color-on-disabled);
+            }
         }
     }
 }

package/resources/scss/theme-dark/form/field/Switch.scss

@@ -1,7 +1,15 @@
 :root .neo-theme-dark { // .neo-switchfield
-    --switchfield-active-color    : white;
-    --switchfield-background-color: darkgrey;
-    --switchfield-checked         : green;
-    --switchfield-inactive-color  : grey;
-    --switchfield-thumb-color     : white;
+    --switchfield-bordercolor-focused: #57B2EF;
+    --switchfield-borderwidth-focused: 4px;
+    --switchfield-color-knob         : #fff;
+    --switchfield-color-off-disabled : #BDBDBD;
+    --switchfield-color-off-hovered  : #9E9E9E;
+    --switchfield-color-off-idle     : #BDBDBD;
+    --switchfield-color-on-disabled  : #005A96;
+    --switchfield-color-on-hovered   : #004C7E;
+    --switchfield-color-on-idle      : #005A96;
+    --switchfield-height             : 24px;
+    --switchfield-knobsize           : 20px;
+    --switchfield-opacity-disabled   : .5;
+    --switchfield-width              : 40px;
 }

package/resources/scss/theme-light/form/field/Switch.scss

@@ -1,7 +1,15 @@
 :root .neo-theme-light { // .neo-switchfield
-    --switchfield-active-color    : white;
-    --switchfield-background-color: darkgrey;
-    --switchfield-checked         : green;
-    --switchfield-inactive-color  : grey;
-    --switchfield-thumb-color     : white;
+    --switchfield-bordercolor-focused: #57B2EF;
+    --switchfield-borderwidth-focused: 4px;
+    --switchfield-color-knob         : #fff;
+    --switchfield-color-off-disabled : #BDBDBD;
+    --switchfield-color-off-hovered  : #9E9E9E;
+    --switchfield-color-off-idle     : #BDBDBD;
+    --switchfield-color-on-disabled  : #005A96;
+    --switchfield-color-on-hovered   : #004C7E;
+    --switchfield-color-on-idle      : #005A96;
+    --switchfield-height             : 24px;
+    --switchfield-knobsize           : 20px;
+    --switchfield-opacity-disabled   : .5;
+    --switchfield-width              : 40px;
 }

package/src/DefaultConfig.mjs

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

package/src/core/Util.mjs

@@ -42,7 +42,7 @@ class Util extends Base {
      * @returns {Boolean|String} Returns false for non string inputs
      */
     static capitalize(value) {
-        return Util.isString(value) && value[0].toUpperCase() + value.slice(1);
+        return value[0].toUpperCase() + value.slice(1)
     }
 
     /**
@@ -51,10 +51,6 @@ class Util extends Base {
      * @returns {Object} The camelcase styles object
      */
     static createStyleObject(string) {
-        if (!string) {
-            return null;
-        }
-
         let parts;
 
         // split(';') does fetch semicolons inside brackets
@@ -74,10 +70,11 @@ class Util extends Base {
                 parts[0] = parts[0].replace(/-([a-z])/g, (str, letter) => {
                     return letter.toUpperCase();
                 });
-                obj[parts[0]] = parts[1];
+
+                obj[parts[0]] = parts[1]
             }
             return obj;
-        }, {});
+        }, {})
     }
 
     /**
@@ -90,11 +87,11 @@ class Util extends Base {
 
         Object.entries(styles).forEach(([key, value]) => {
             if (value !== undefined && value !== null) {
-                style += Util.decamel(key) + ':' + value + ';';
+                style += Util.decamel(key) + ':' + value + ';'
             }
         });
 
-        return style;
+        return style
     }
 
     /**
@@ -104,7 +101,7 @@ class Util extends Base {
      * @returns {String} The lowercase output
      */
     static decamel(value) {
-        return value.replace(Util.decamelRegEx, '$1-$2').toLowerCase();
+        return value.replace(Util.decamelRegEx, '$1-$2').toLowerCase()
     }
 
     /**
@@ -122,7 +119,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isBoolean(value) {
-        return typeof value === 'boolean';
+        return typeof value === 'boolean'
     }
 
     /**
@@ -131,7 +128,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isDefined(value) {
-        return typeof value !== 'undefined';
+        return typeof value !== 'undefined'
     }
 
     /**
@@ -141,26 +138,26 @@ class Util extends Base {
      */
     static isEmpty(value) {
         if (value === null || value === undefined) {
-            return true;
+            return true
         }
 
         if (Array.isArray(value)) {
-            return value.length === 0;
+            return value.length === 0
         }
 
         if (value instanceof Date) {
-            return false;
+            return false
         }
 
         if (Util.isObject(value)) {
-            return Object.keys(value).length === 0;
+            return Object.keys(value).length === 0
         }
 
         if (Util.isString(value)) {
-            return value === '';
+            return value === ''
         }
 
-        return false;
+        return false
     }
 
     /**
@@ -169,7 +166,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isFunction(value) {
-        return typeof value === 'function';
+        return typeof value === 'function'
     }
 
     /**
@@ -178,7 +175,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isNumber(value){
-        return typeof value === 'number' && isFinite(value);
+        return typeof value === 'number' && isFinite(value)
     }
 
     /**
@@ -187,7 +184,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isObject(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value);
+        return value !== null && typeof value === 'object' && !Array.isArray(value)
     }
 
     /**
@@ -196,7 +193,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isString(value) {
-        return typeof value === 'string';
+        return typeof value === 'string'
     }
 
     /**
@@ -210,14 +207,14 @@ class Util extends Base {
         let len;
 
         if (!iterable || !(len = iterable.length)) {
-            return [];
+            return []
         }
 
         if (typeof iterable === 'string') {
-            return iterable.split('');
+            return iterable.split('')
         }
 
-        return Array.prototype.slice.call(iterable, start || 0, end || len);
+        return Array.prototype.slice.call(iterable, start || 0, end || len)
     }
 }
 

package/src/form/field/FileUpload.mjs

@@ -132,7 +132,7 @@ class FileUpload extends Base {
             ]
         },
 
-        cls : [],
+        cls : ['neo-field-empty'],
 
         /**
          * An Object containing a default set of headers to be passed to the server on every HTTP request.
@@ -370,9 +370,15 @@ class FileUpload extends Base {
     }
 
     async clear() {
-        const me = this;
+        const
+            me      = this,
+            { cls } = me;
+
+        NeoArray.add(cls, 'neo-field-empty');
+        me.cls = cls;
 
         me.vdom.cn[3] = {
+            id    : `${me.id}-input`,
             cls   : 'neo-file-upload-input',
             tag   : 'input',
             type  : 'file',
@@ -380,6 +386,7 @@ class FileUpload extends Base {
         };
         me.state = 'ready';
         me.error = '';
+        me.file = me.document = null;
 
         // We have to wait for the DOM to have changed, and the input field to be visible
         await new Promise(resolve => setTimeout(resolve, 100));
@@ -393,10 +400,16 @@ class FileUpload extends Base {
     onInputValueChange({ files }) {
         const
             me        = this,
-            { types } = me,
+            {
+                types,
+                cls
+            } = me,
             body      = me.vdom.cn[1];
 
         if (files.length) {
+            NeoArray.remove(cls, 'neo-field-empty');
+            me.cls = cls;
+            
             const
                 file     = files.item(0),
                 pointPos = file.name.lastIndexOf('.'),
@@ -434,6 +447,7 @@ class FileUpload extends Base {
             headers    = { ...me.headers };
 
         // Show the action button
+        me.file  = file;
         me.state = 'starting';
 
         // We have to wait for the DOM to have changed, and the action button to be visible
@@ -642,9 +656,12 @@ class FileUpload extends Base {
     afterSetDocument(document) {
         if (document) {
             const
-                me = this;
+                me      = this,
+                { cls } = me;
+
+            NeoArray.remove(cls, 'neo-field-empty');
+            me.cls = cls;
 
-            me.preExistingDocument = true;
             me.documentId = document.id;
             me.fileSize = me.formatSize(document.size);
             me.vdom.cn[1].cn[0].innerHTML = document.fileName;
@@ -693,8 +710,7 @@ class FileUpload extends Base {
                 status.innerHTML = me.fileSize;
                 break;
             case 'not-downloadable':
-                status.innerHTML = me.preExistingDocument ?
-                me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
+                status.innerHTML = me.document ? me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
                 break;
             case 'deleted':
                 status.innerHTML = me.fileWasDeleted;
@@ -708,6 +724,7 @@ class FileUpload extends Base {
 
         NeoArray.remove(cls, 'neo-file-upload-state-' + oldValue);
         NeoArray.add(cls, 'neo-file-upload-state-' + value);
+        NeoArray[me.file || me.document ? 'remove' : 'add', 'neo-field-empty'];
         me.cls = cls;
     }
 

package/src/form/field/Switch.mjs

@@ -1,5 +1,4 @@
 import CheckBox from './CheckBox.mjs';
-import NeoArray from '../../util/Array.mjs';
 
 /**
  * @class Neo.form.field.Switch

package/src/tree/Accordion.mjs

@@ -124,6 +124,25 @@ class AccordionTree extends TreeList {
         return ClassSystemUtil.beforeSetInstance(value, TreeAccordionModel);
     }
 
+    /**
+     * Remove all items from the accordion
+     * If you do not need to update the view after clearing, set `withUpdate = false`
+     *
+     * @param {Boolean} [withUpdate=true]
+     */
+    clear(withUpdate = true) {
+        delete this.getVdomRoot().cn[0].cn
+
+        if (withUpdate) this.update();
+    }
+
+    /**
+     * Remove all items from the selection
+     */
+    clearSelection() {
+        this.selectionModel.deselectAll();
+    }
+
     /**
      * @param {String} [parentId] The parent node
      * @param {Object} [vdomRoot] The vdom template root for the current sub tree
@@ -304,24 +323,57 @@ class AccordionTree extends TreeList {
         let me = this,
             listenerId;
 
+        me.clear(false);
+
         if (!me.mounted && me.rendering) {
             listenerId = me.on('mounted', () => {
                 me.un('mounted', listenerId);
                 me.createItems(null, me.getListItemsRoot(), 0);
                 me.timeout(0).then(() => {
-                    me.update()
+                    me.update();
                 });
             });
         } else {
             me.createItems(null, me.getListItemsRoot(), 0);
             me.timeout(0).then(() => {
-                me.update()
+                me.update();
             });
         }
     }
 
     onStoreRecordChange() {
     }
+
+    /**
+     * Set the selection either bei record id or record.
+     * You can pass a record or a recordId as value
+     *
+     * @param {Record|Record[]|Number|Number[]|String|String[]} value
+     */
+    setSelection(value) {
+        if (value === null) {
+            this.clearSelection();
+            return;
+        }
+
+        // In case you pass in an array use only the first item
+        if (Neo.isArray(value)) value = value[0];
+
+        const me = this;
+        let recordKeyProperty, elId;
+
+        if (Neo.isObject(value)) {
+            // Record
+            recordKeyProperty = value[me.getKeyProperty()];
+        } else {
+            // RecordId
+            recordKeyProperty = value;
+        }
+
+        elId = me.getItemId(recordKeyProperty);
+
+        me.selectionModel.selectAndScrollIntoView(elId);
+    }
 }
 
 Neo.applyClassConfig(AccordionTree);