neo.mjs 5.10.3 → 5.10.5

package/src/component/Progress.mjs

@@ -0,0 +1,113 @@
+import Base from '../component/Base.mjs';
+
+/**
+ * @class Neo.component.Progress
+ * @extends Neo.component.Base
+ */
+class Progress extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.component.Progress'
+         * @protected
+         */
+        className: 'Neo.component.Progress',
+        /**
+         * @member {String} ntype='progress'
+         * @protected
+         */
+        ntype: 'progress',
+        /**
+         * @member {String[]} baseCls=['neo-progress-label']
+         * @protected
+         */
+        baseCls: ['neo-progress'],
+        /**
+         * @member {String|null} labelText_=null
+         */
+        labelText_: null,
+        /**
+         * @member {Number} max_=100
+         */
+        max_: 100,
+        /**
+         * @member {Number|null} value_=null
+         */
+        value_: null,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {tag: 'div', cls: ['neo-progress'], cn: [
+            {tag: 'label'},
+            {tag: 'progress'}
+        ]}
+    }
+
+    /**
+     * Triggered after the id config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetId(value, oldValue) {
+        super.afterSetId(value, oldValue);
+
+        this.vdom.cn[0].for = value;
+        this.update()
+    }
+
+    /**
+     * Triggered after the labelText config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelText(value, oldValue) {
+        this.vdom.cn[0].html = value;
+        this.update()
+    }
+
+    /**
+     * Triggered after the max config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetMax(value, oldValue) {
+        this.vdom.cn[1].max = value;
+        this.update()
+    }
+
+    /**
+     * Triggered after the value config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetValue(value, oldValue) {
+        this.vdom.cn[1].value = value;
+        this.update()
+    }
+
+    /**
+     * Specify a different vdom root if needed to apply the top level style attributes on a different level.
+     * Make sure to use getVnodeRoot() as well, to keep the vdom & vnode trees in sync.
+     * @returns {Object} The new vdom root
+     */
+    getVdomRoot() {
+        return this.vdom.cn[1]
+    }
+
+    /**
+     * Specify a different vnode root if needed to apply the top level style attributes on a different level.
+     * Make sure to use getVdomRoot() as well, to keep the vdom & vnode trees in sync.
+     * @returns {Object} The new vnode root
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[1]
+    }
+}
+
+Neo.applyClassConfig(Progress);
+
+export default Progress;

package/src/component/Splitter.mjs

@@ -136,16 +136,17 @@ class Splitter extends Component {
     }
 
     /**
-     * @param data
+     * @param {Object} data
      */
     onDragEnd(data) {
         let me         = this,
             style      = me.style || {},
+            parentId   = me.parentId,
             resizeNext = me.resizeTarget === 'next',
             size       = me.size,
             index, newSize, sibling, parent;
 
-        Neo.getComponent(me.parentId).disabled = false;
+        Neo.getComponent(parentId).disabled = false;
 
         me.dragZone.dragEnd(data);
 
@@ -153,8 +154,8 @@ class Splitter extends Component {
 
         me.style = style;
 
-        me.getDomRect(me.parentId).then(parentRect => {
-            parent  = Neo.getComponent(me.parentId);
+        me.getDomRect(parentId).then(parentRect => {
+            parent  = Neo.getComponent(parentId);
             index   = parent.indexOf(me);
             sibling = parent.items[resizeNext ? index + 1 :index - 1];
             style   = sibling.style || {};

package/src/component/Toast.mjs

@@ -245,12 +245,13 @@ class Toast extends Base {
      */
     async destroy(...args) {
         let me = this;
+        const superDestroy = super.destroy.bind(me);
 
         me.addDomListeners({
             animationend: function () {
                 ToastManager.removeToast(me.id);
                 ToastManager.unregister(me);
-                me.destroy(true);
+                superDestroy(...args);
             }
         });
 

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/container/Dialog.mjs

@@ -21,9 +21,17 @@ class Dialog extends Base {
          */
         ntype: 'container-dialog',
         /**
-        * @member {String[]} baseCls=['container-dialog']
-        * @protected
-        */
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Boolean} autoRender=true
+         */
+        autoRender: true,
+        /**
+         * @member {String[]} baseCls=['neo-container-dialog', 'neo-panel', 'neo-container']
+         * @protected
+         */
         baseCls: ['neo-container-dialog', 'neo-panel', 'neo-container'],
         /**
          * @member {Object} headerConfig=null
@@ -34,10 +42,16 @@ class Dialog extends Base {
          */
         headerToolbar: null,
         /**
-         * The CSS class to use for an icon, e.g. 'fa fa-home'
-         * @member {String|null} [iconCls_=null]
+         * The CSS class to use for an icon, e.g. ['fa', 'fa-home']
+         * @member {String[]} [iconCls_=null]
          */
         iconCls_: null,
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            baseCls: ['neo-dialog-content']
+        },
         /**
          * @member {Object[]} items
          */
@@ -68,11 +82,9 @@ class Dialog extends Base {
      * @protected
      */
     afterSetIconCls(value, oldValue) {
-        console.log(value, oldValue)
-        
         if (!this.headers) { return }
-        let iconNode = this.headers.down({flag: 'dialog-header-icon'});
-        let iconNodeCls = [...iconNode.cls];
+        let iconNode    = this.headers.down({flag: 'dialog-header-icon'}),
+            iconNodeCls = [...iconNode.cls];
 
         NeoArray.remove(iconNodeCls, oldValue);
         NeoArray.add(   iconNodeCls, value);
@@ -90,41 +102,11 @@ class Dialog extends Base {
      * @protected
      */
     afterSetTitle(value, oldValue) {
-        this.headerToolbar?.set({
-            title: value
+        this.headerToolbar?.down({flag: 'panel-header-title'}).set({
+            text: value
         });
     }
 
-    /**
-     * Converts the iconCls array into a string on beforeGet
-     * @returns {String}
-     * @protected
-     */
-    beforeGetIconCls() {
-        let iconCls = this._iconCls;
-
-        if (Array.isArray(iconCls)) {
-            return iconCls.join(' ');
-        }
-
-        return iconCls;
-    }
-
-    /**
-     * Triggered before the iconCls config gets changed. Converts the string into an array if needed.
-     * @param {Array|String|null} value
-     * @param {Array|String|null} oldValue
-     * @returns {Array}
-     * @protected
-     */
-    beforeSetIconCls(value, oldValue) {
-        if (value && !Array.isArray(value)) {
-            value = value.split(' ').filter(Boolean);
-        }
-
-        return value;
-    }
- 
     /**
      * close the dialog in main thread
      */
@@ -141,15 +123,15 @@ class Dialog extends Base {
      * @protected
      */
     createHeader() {
-        let me      = this,
-            cls     = ['neo-header-toolbar', 'neo-toolbar'],
-            headers = me.headers || [],
+        let me               = this,
+            cls              = ['neo-header-toolbar', 'neo-toolbar'],
+            headers          = me.headers || [],
             headerConfigCopy = {...me.headerConfig};
         delete headerConfigCopy.items;
 
         me.headerToolbar = Neo.create({
             module   : HeaderToolbar,
-            actions: [{action: 'close', iconCls: 'fa-solid fa-xmark'}],
+            actions  : [{action: 'close', iconCls: 'fa-solid fa-xmark'}],
             appName  : me.appName,
             cls,
             dock     : 'top',
@@ -157,15 +139,16 @@ class Dialog extends Base {
             id       : me.getHeaderToolbarId(),
             listeners: {headerAction: me.executeHeaderAction, scope: me},
             items    : [{
-                cls: me.iconCls,
-                flag     : 'dialog-header-icon',
+                ntype: '',
+                cls  : ['neo-dialog-header-icon', ...me.iconCls],
+                flag : 'dialog-header-icon',
             }, {
-                ntype    : 'label',
-                cls      : ['neo-panel-header-text', 'neo-label'],
-                flag     : 'title-label',
-                removeDom: !me.title,
-                text     : me.title
-            }, ...me.headerConfig.items],
+                ntype : 'label',
+                cls   : ['neo-panel-header-text', 'neo-label'],
+                flag  : 'panel-header-title',
+                hidden: !me.title,
+                text  : me.title
+            }, ...me.headerConfig.items || []],
             
             ...headerConfigCopy
         });
@@ -182,7 +165,7 @@ class Dialog extends Base {
         let me = this,
 
         map = {
-            close   : me.close
+            close: me.close
         };
 
         map[data.action]?.call(me, data);