neo.mjs 5.10.2 → 5.10.4

package/src/container/Accordion.mjs

@@ -0,0 +1,130 @@
+import AccordionItem from './AccordionItem.mjs';
+import NeoArray      from '../util/Array.mjs';
+import Panel         from './Panel.mjs';
+
+/**
+ * @class Neo.container.Accordion
+ * @extends Neo.container.Panel
+ */
+class Accordion extends Panel {
+    static config = {
+        /**
+         * @member {String} className='Neo.container.Accordion'
+         * @protected
+         */
+        className: 'Neo.container.Accordion',
+        /**
+         * @member {String} ntype='accordion'
+         * @protected
+         */
+        ntype: 'accordion',
+        /**
+         * @member {String[]} baseCls=['neo-accordion']
+         */
+        baseCls: ['neo-accordion'],
+        /**
+         * Add zero based numbers, which accordion items you want initially expanded
+         * @member {Number[]} initialOpen=[]
+         */
+        initialOpen_: [],
+        /**
+         * @member {Object} itemDefaults={ntype:'accordionitem'}
+         */
+        itemDefaults: {ntype: 'accordionitem'},
+        /**
+         * @member {Object[]} items=[]
+         */
+        items: [],
+        /**
+         * Max number of accordion items, which can be expanded at the same time
+         * @member {Number} maxExpandedItems=1
+         */
+        maxExpandedItems: 1,
+        /**
+         * Keep track of currently open items
+         * @member {String[]} expandedItems=[]
+         * @private
+         */
+        expandedItems_: [],
+        /**
+         * Creates a top header
+         * @memeber {String|null} title=null
+         */
+        title_: null
+    }
+
+    /**
+     * @param {Number[]} value
+     * @param {Number[]} oldValue
+     */
+    afterSetInitialOpen(value, oldValue) {
+        const me            = this,
+              items         = me.items,
+              expandedItems = me.expandedItems;
+
+        value.forEach((itemNo) => {
+            const id   = Neo.getId(me.itemDefaults.ntype),
+                  item = items[itemNo];
+
+            item.expanded = true;
+            item.id = id;
+            NeoArray.add(expandedItems, id);
+        });
+
+        me.expandedItems = expandedItems;
+    }
+
+    /**
+     * After changes to title config, we add a header
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetTitle(value, oldValue) {
+        const me      = this,
+              titleEl = me.down({flag: 'titleEl'});
+
+        if (value && !titleEl) {
+            me.headers = [{
+                baseCls: 'neo-accordion-title',
+                cls    : ['neo-accordion-title'],
+                dock   : 'top',
+                text   : value
+            }];
+        }
+    }
+
+    /**
+     * Called by accordion items.
+     * Checks for maxExpandedItems
+     * @param {Object}                      data
+     * @param {Boolean}                     data.expanded newState
+     * @param {Neo.container.AccordionItem} data.target   accordion item
+     * @protected
+     */
+    childExpandChange(data) {
+        const me               = this,
+              maxExpandedItems = me.maxExpandedItems,
+              expandedItems    = me.expandedItems,
+              curNoOpenItems   = expandedItems.length,
+              target           = data.target,
+              targetId         = target.id,
+              expanded         = data.expanded;
+
+        if (expanded
+            && maxExpandedItems !== 0
+            && curNoOpenItems === maxExpandedItems
+        ) {
+            Neo.get(expandedItems[0]).expanded = false;
+            NeoArray.remove(expandedItems, expandedItems[0]);
+        }
+
+        target.expanded = expanded;
+        NeoArray.toggle(expandedItems, targetId);
+
+        me.expandedItems = expandedItems;
+    }
+}
+
+Neo.applyClassConfig(Accordion);
+
+export default Accordion;

package/src/container/AccordionItem.mjs

@@ -0,0 +1,178 @@
+import Base     from './Base.mjs';
+import Toolbar  from '../toolbar/Base.mjs';
+import NeoArray from '../util/Array.mjs';
+
+/**
+ * @class Neo.container.AccordionItem
+ * @extends Neo.container.Base
+ */
+class AccordionContainer extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.container.AccordionItem'
+         * @protected
+         */
+        className: 'Neo.container.AccordionItem',
+        /**
+         * @member {String} ntype='accordionitem'
+         * @protected
+         */
+        ntype: 'accordionitem',
+        /**
+         * @member {String[]} baseCls=['neo-accordion-component']
+         */
+        baseCls: ['neo-accordion-item'],
+
+        /**
+         * Additional cls for the arrow, in case you need to customize it
+         * @member {String[]|String|null} arrowCls=null
+         */
+        arrowCls: null,
+        /**
+         * Expand or collapse (true/false) this value
+         * @member {Boolean} expanded=false
+         */
+        expanded_: false,
+        /**
+         * cls for the icon in front of the title
+         * May be empty. 'fa' is preset,
+         * so if you use fontawesome you do not have to add it.
+         *
+         * @member {String[]|String|null} iconCls=null
+         */
+        iconCls_: null,
+        /**
+         * Title for Headerbar
+         * @member {String|null} title=null
+         */
+        title_: null
+    }
+
+    /**
+     * Runs after afterSetTitle, so that the title component does not exist prior.
+     * @protected
+     */
+    createItems() {
+        const me    = this,
+              items = me.items,
+              title = me.title;
+        let iconCls  = me.iconCls || ['no-icon'],
+            arrowCls = me.arrowCls || 'fa-caret-down',
+            header, content;
+
+        if (!Neo.isArray(iconCls)) {
+            iconCls = iconCls.split(' ');
+        }
+        if (!Neo.isArray(arrowCls)) {
+            arrowCls = arrowCls.split(' ');
+        }
+
+        header = Neo.create({
+            module: Toolbar,
+            items : [{
+                flag   : 'iconEl',
+                ntype  : 'component',
+                baseCls: ['neo-accordion-header-icon'],
+                cls    : ['fa', ...iconCls],
+            }, {
+                flag   : 'titleEl',
+                ntype  : 'component',
+                baseCls: ['neo-accordion-header-title'],
+                html   : title
+            }, {
+                ntype  : 'component',
+                baseCls: ['neo-accordion-header-arrow'],
+                cls    : ['fa', ...arrowCls]
+            }]
+        });
+        content = {
+            ntype  : 'container',
+            flag   : 'content',
+            baseCls: ['neo-accordion-content', 'neo-container'],
+            items  : items
+        };
+
+        me.items = [header, content];
+
+        super.createItems();
+
+        me.addDomListeners([
+            {click: me.onExpandClick, delegate: 'neo-accordion-header-arrow'}
+        ]);
+    }
+
+    /**
+     * After changing expanded, we expand/collapse via CSS
+     * @param {Boolean} isExpanded
+     */
+    afterSetExpanded(isExpanded) {
+        const me  = this,
+              cls = me.cls,
+              fn  = isExpanded ? 'add' : 'remove';
+
+        NeoArray[fn](cls, 'neo-expanded');
+        me.cls = cls;
+
+        // Ensure scrollbars are not flipping in and out
+        Neo.timeout(450).then(() => {
+            NeoArray[fn](cls, 'neo-scrollable');
+            me.cls = cls;
+        })
+    }
+
+    /**
+     * The initial title is set before the component is created,
+     * so we have to check if it exists.
+     *
+     * @param {String[]|String} newValue
+     * @param {String[]} oldValue
+     */
+    afterSetIconCls(newValue, oldValue) {
+        let iconEl = this.down({flag: 'iconEl'});
+
+        if (iconEl) {
+            let cls = iconEl.cls;
+
+            if (!Neo.isArray(newValue)) newValue = newValue.split(' ');
+
+            NeoArray.remove(cls, oldValue);
+            NeoArray.add(cls, newValue);
+            iconEl.cls = cls;
+        }
+    }
+
+    /**
+     * The initial title is set before the component is created,
+     * so we have to check if it exists.
+     *
+     * @param {String} newValue
+     */
+    afterSetTitle(newValue) {
+        let titleEl = this.down({flag: 'titleEl'});
+
+        if (titleEl) titleEl.html = newValue;
+    }
+
+    /**
+     * If the parent is an AccordionContainer, we run the parent function.
+     * Otherwise we set this.expanded to the new value.
+     */
+    onExpandClick() {
+        const me           = this,
+              currentState = me.expanded;
+        let parent = me.up('accordion');
+
+        if (parent.ntype === 'accordion') {
+            parent.childExpandChange({
+                expanded: !currentState,
+                target  : me
+            });
+        } else {
+            me.expanded = !currentState;
+        }
+    }
+}
+
+Neo.applyClassConfig(AccordionContainer);
+
+export default AccordionContainer;

package/src/form/Container.mjs

@@ -198,46 +198,63 @@ class Container extends BaseContainer {
     }
 
     /**
-     * Set field values by field name or field id
-     * @param {Object} values={}
+     * Set field configs by field name or field id
+     * @param {Object} configs={}
      * @param {Boolean} suspendEvents=false
      */
-    async setValues(values={}, suspendEvents=false) {
+    async setConfigs(configs={}, suspendEvents=false) {
         let me     = this,
             fields = await me.getFields(),
-            isCheckBox, isRadio, path, value;
+            fieldConfigs, isCheckBox, isRadio, path, value;
 
         fields.forEach(item => {
-            if (suspendEvents) {
-                item.suspendEvents = true;
-            }
+            path         = me.getFieldPath(item);
+            fieldConfigs = Neo.nsWithArrays(path, false, configs);
+
+            if (fieldConfigs) {
+                if (suspendEvents) {
+                    item.suspendEvents = true;
+                }
+
+                isCheckBox = Neo.form.field?.CheckBox && item instanceof Neo.form.field.CheckBox;
+                value      = fieldConfigs.value;
 
-            isCheckBox = Neo.form.field?.CheckBox && item instanceof Neo.form.field.CheckBox;
-            path       = me.getFieldPath(item);
-            value      = Neo.nsWithArrays(path, false, values);
+                if (isCheckBox) {
+                    if (Neo.typeOf(value) === 'Array') {
+                        if (value.includes(item.value)) {
+                            fieldConfigs.checked = true
+                        }
+                    } else {
+                        fieldConfigs.checked = item.value === value
+                    }
+                } else if (value !== undefined) {
+                    isRadio = Neo.form.field?.Radio && item instanceof Neo.form.field.Radio;
 
-            if (isCheckBox) {
-                if (Neo.typeOf(value) === 'Array') {
-                    if (value.includes(item.value)) {
-                        item.checked = true
+                    if (isRadio) {
+                        fieldConfigs.checked = item.value === value
                     }
-                } else {
-                    item.checked = item.value === value
                 }
-            } else if (value !== undefined) {
-                isRadio = Neo.form.field?.Radio && item instanceof Neo.form.field.Radio;
 
-                if (isRadio) {
-                    item.checked = item.value === value
-                } else {
-                    item.value = value
+                item.set(fieldConfigs)
+
+                if (suspendEvents) {
+                    delete item.suspendEvents;
                 }
             }
+        })
+    }
 
-            if (suspendEvents) {
-                delete item.suspendEvents;
-            }
+    /**
+     * Set field values by field name or field id
+     * @param {Object} values={}
+     * @param {Boolean} suspendEvents=false
+     */
+    async setValues(values={}, suspendEvents=false) {
+        Object.entries(values).forEach(([key, value]) => {
+            values[key] = {value}
         })
+
+        await this.setConfigs(values, suspendEvents)
     }
 
     /**

package/src/form/field/CheckBox.mjs

@@ -81,7 +81,7 @@ class CheckBox extends Base {
         labelCls_: [],
         /**
          * Edge-case config in case we want to render leading content with their own selectors like:
-         * <span class="my-label-id-cls">E10</span> • Firstname
+         * <span class="my-label-id-cls">E10</span> · Firstname
          * @member {String|null} labelId_=null
          */
         labelId_: null,
@@ -90,6 +90,11 @@ class CheckBox extends Base {
          * @member {String[]} labelIdCls_=[]
          */
         labelIdCls_: [],
+        /**
+         * Separator between labelId & labelText
+         * @member {String} labelIdSeparator_=' · '
+         */
+        labelIdSeparator_: ' · ',
         /**
          * Valid values: 'left', 'top'
          * @member {String} labelPosition_='left'
@@ -310,7 +315,7 @@ class CheckBox extends Base {
         let me = this;
 
         if (me.labelId) {
-            value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span> • ${value}`
+            value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span>${me.labelIdSeparator + value}`
         }
 
         me.vdom.cn[0].cn[0].innerHTML = value;

package/src/form/field/Number.mjs

@@ -148,7 +148,7 @@ class Number extends Text {
 
         me.changeInputElKey('step', value);
 
-        stepSizeString = String(this.stepSize);
+        stepSizeString = String(value);
 
         me.stepSizeDigits = stepSizeString.includes('.') ? stepSizeString.split('.')[1].length : 0;
 
@@ -157,16 +157,44 @@ class Number extends Text {
 
             if (modulo !== 0) { // find the closest valid value
                 if (modulo / value > 0.5) {
-                    if      (val + value - modulo < me.maxValue) {me.value = val + value - modulo;}
-                    else if (val - modulo > me.minValue)         {me.value = val - modulo;}
+                    if (val + value - modulo < me.maxValue) {
+                        me.value = val + value - modulo;
+                    } else if (val - modulo > me.minValue) {
+                        me.value = val - modulo;
+                    }
                 } else {
-                    if      (val - modulo > me.minValue)         {me.value = val - modulo;}
-                    else if (val + value - modulo < me.maxValue) {me.value = val + value - modulo;}
+                    if (val - modulo > me.minValue) {
+                        me.value = val - modulo;
+                    } else if (val + value - modulo < me.maxValue) {
+                        me.value = val + value - modulo;
+                    }
                 }
             }
         }
     }
 
+    /**
+     * Triggered after the triggerPosition config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTriggerPosition(value, oldValue) {
+        oldValue && this.updateTriggers();
+    }
+
+    /**
+     * Triggered after the useSpinButtons config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseSpinButtons(value, oldValue) {
+        if (typeof oldValue === 'boolean') {
+            this.updateTriggers();
+        }
+    }
+
     /**
      * Triggered before the maxLength config gets changed
      * @param {Number|null} value
@@ -195,28 +223,6 @@ class Number extends Text {
         return null;
     }
 
-    /**
-     * Triggered after the triggerPosition config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetTriggerPosition(value, oldValue) {
-        oldValue && this.updateTriggers();
-    }
-
-    /**
-     * Triggered after the useSpinButtons config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetUseSpinButtons(value, oldValue) {
-        if (typeof oldValue === 'boolean') {
-            this.updateTriggers();
-        }
-    }
-
     /**
      * Triggered before the triggerPosition config gets changed
      * @param {String} value
@@ -229,18 +235,24 @@ class Number extends Text {
 
     /**
      * Triggered before the value config gets changed
-     * @param {Number} value
+     * @param {Number|String} value
      * @param {Number} oldValue
      * @protected
      */
     beforeSetValue(value, oldValue) {
-        if (Neo.isNumber(value) && this.stepSizeDigits > 0) {
-            return +value.toFixed(this.stepSizeDigits)
-        } else if (value === '') {
-            return null
+        if (value === null || value === '') {
+            return null;
+        }
+
+        if (!Neo.isNumber(value)) {
+            value = +value;
+        }
+
+        if (this.stepSizeDigits > 0) {
+            value = +value.toFixed(this.stepSizeDigits);
         }
 
-        return value
+        return value;
     }
 
     /**
@@ -366,7 +378,7 @@ class Number extends Text {
                 }
 
                 me.removeTrigger('spindown', true, triggers);
-                me.removeTrigger('spinup',   true, triggers);
+                me.removeTrigger('spinup', true, triggers);
             } else {
                 if (!me.hasTrigger('spindown')) {
                     triggers.push(SpinDownTrigger);
@@ -379,8 +391,8 @@ class Number extends Text {
                 me.removeTrigger('spinupdown', true, triggers);
             }
         } else {
-            me.removeTrigger('spindown',   true, triggers);
-            me.removeTrigger('spinup',     true, triggers);
+            me.removeTrigger('spindown', true, triggers);
+            me.removeTrigger('spinup', true, triggers);
             me.removeTrigger('spinupdown', true, triggers);
         }
 
@@ -392,7 +404,7 @@ class Number extends Text {
      * @param {Boolean} silent=true
      * @returns {Boolean} Returns true in case there are no client-side errors
      */
-    validate(silent=true) {
+    validate(silent = true) {
         let me          = this,
             value       = me.value,
             isNumber    = Neo.isNumber(value),

package/src/form/field/Range.mjs

@@ -30,6 +30,11 @@ class Range extends Number {
          * @member {String} inputType='range'
          */
         inputType: 'range',
+        /**
+         * If true, shows the result of the slider in the label
+         * @member {Boolean} showResultInLabel=false
+         */
+        showResultInLabel: false,
         /**
          * @member {Array} tickmarks_=[]
          */
@@ -37,7 +42,7 @@ class Range extends Number {
         /**
          * @member {Boolean} useInputEvent=false
          */
-        useInputEvent : false,
+        useInputEvent: false,
         /**
          * Disables the field.Number buttons
          * @member {Boolean} useInputEvent=false
@@ -57,14 +62,16 @@ class Range extends Number {
         if (me.useInputEvent) {
             me.addDomListeners({
                 input: {
-                    fn    : me.onInputValueChange,
-                    id    : me.vdom.cn[2].id,
-                    scope : me
+                    fn   : me.onInputValueChange,
+                    id   : me.vdom.cn[2].id,
+                    scope: me
                 }
             });
         }
 
         inputEl.cls = ['neo-rangefield-input']; // replace neo-textfield-input
+
+        me.addValueToLabel();
     }
 
     /**
@@ -76,6 +83,26 @@ class Range extends Number {
     afterSetTickmarks(value, oldValue) {
         // todo
     }
+
+    /**
+     * Override the NumberField implementation
+     * @param {Object} data
+     */
+    afterSetValue(value, oldValue) {
+        this.addValueToLabel();
+        super.afterSetValue(value, oldValue);
+    }
+
+    /**
+     * Update label with value
+     */
+    addValueToLabel() {
+        const me = this;
+
+        if (me.showResultInLabel) {
+            me.getLabelEl().innerHTML = `[${me.value}] ` + me.labelText;
+        }
+    }
 }
 
 Neo.applyClassConfig(Range);

package/src/form/field/Text.mjs

@@ -141,6 +141,11 @@ class Text extends Base {
          * @member {String[]} labelIdCls_=[]
          */
         labelIdCls_: [],
+        /**
+         * Separator between labelId & labelText
+         * @member {String} labelIdSeparator_=' · '
+         */
+        labelIdSeparator_: ' · ',
         /**
          * @member {String} labelOptionalText_=' (Optional)'
          */
@@ -514,7 +519,7 @@ class Text extends Base {
             isEmpty = me.isEmpty();
 
         if (me.labelId) {
-            value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span> • ${value}`
+            value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span>${me.labelIdSeparator + value}`
         }
 
         me.getLabelEl().innerHTML = value;

package/src/manager/Toast.mjs

@@ -204,7 +204,11 @@ class Toast extends Base {
             component.style = moveObj;
             component.update();
 
-            acc = acc + rects[index].height;
+            // Sometimes the index is already reduced
+            // so the last index might not be available
+            if(rects[index]) {
+                acc = acc + rects[index].height;
+            }
         }
     }
 }