neo.mjs 6.17.2 → 6.18.1

package/src/layout/Flexbox.mjs

@@ -85,7 +85,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetAlign(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'align');
+        oldValue && this.updateInputValue(value, oldValue, 'align')
     }
 
     /**
@@ -95,7 +95,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetDirection(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'direction');
+        oldValue && this.updateInputValue(value, oldValue, 'direction')
     }
 
     /**
@@ -111,7 +111,7 @@ class Flexbox extends Base {
             style = item.wrapperStyle;
 
         style.gap = value;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -121,7 +121,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetPack(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'pack');
+        oldValue && this.updateInputValue(value, oldValue, 'pack')
     }
 
     /**
@@ -131,23 +131,24 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetWrap(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'wrap');
+        oldValue && this.updateInputValue(value, oldValue, 'wrap')
     }
 
     /**
      * Applies the flex value to an item of the container this layout is bound to
      * @param {Neo.component.Base} item
+     * @param {Number} index
      */
-    applyChildAttributes(item) {
+    applyChildAttributes(item, index) {
         let style = item.wrapperStyle,
             flex  = style.flex || item.flex || (this.align === 'stretch' ? 1 : '0 1 auto');
 
         if (flex === 1) {
-            flex = '1 1 auto';
+            flex = '1 1 auto'
         }
 
         style.flex = flex;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -156,11 +157,11 @@ class Flexbox extends Base {
     applyRenderAttributes() {
         let me         = this,
             container  = Neo.getComponent(me.containerId),
-            prefix     = me.prefix,
+            {prefix}   = me,
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Flexbox: applyRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Flexbox: applyRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.add(wrapperCls, prefix + 'container');
@@ -170,7 +171,7 @@ class Flexbox extends Base {
         me.pack      && NeoArray.add(wrapperCls, prefix + 'pack-'      + me.pack);
         me.wrap      && NeoArray.add(wrapperCls, prefix + 'wrap-'      + me.wrap);
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
     }
 
     /**
@@ -181,7 +182,7 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     beforeSetAlign(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'alignValues', 'align');
+        return this.testInputValue(value, oldValue, 'alignValues', 'align')
     }
 
     /**
@@ -192,7 +193,7 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     beforeSetDirection(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'directionValues', 'direction');
+        return this.testInputValue(value, oldValue, 'directionValues', 'direction')
     }
 
     /**
@@ -203,7 +204,7 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     beforeSetPack(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'packValues', 'pack');
+        return this.testInputValue(value, oldValue, 'packValues', 'pack')
     }
 
     /**
@@ -214,11 +215,11 @@ class Flexbox extends Base {
      * @returns {String} value
      */
     beforeSetWrap(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'wrapValues', 'wrap');
+        return this.testInputValue(value, oldValue, 'wrapValues', 'wrap')
     }
 
     /**
-     * Removes all CSS rules from an container item this layout is bound to.
+     * Removes all CSS rules from a container item this layout is bound to.
      * Gets called when switching to a different layout.
      * @param {Neo.component.Base} item
      * @protected
@@ -227,7 +228,7 @@ class Flexbox extends Base {
         let style = item.wrapperStyle || {};
 
         style.flex = item.flex || null;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -238,29 +239,29 @@ class Flexbox extends Base {
     removeRenderAttributes() {
         let me         = this,
             container  = Neo.getComponent(me.containerId),
-            prefix     = me.prefix,
+            {prefix}   = me,
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Flexbox: removeRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Flexbox: removeRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.remove(wrapperCls, prefix + 'container');
 
         if (me.align) {
-            NeoArray.remove(wrapperCls, prefix + 'align-' + me.align);
+            NeoArray.remove(wrapperCls, prefix + 'align-' + me.align)
         }
         if (me.direction) {
-            NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
+            NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction)
         }
         if (me.pack) {
-            NeoArray.remove(wrapperCls, prefix + 'pack-' + me.pack);
+            NeoArray.remove(wrapperCls, prefix + 'pack-' + me.pack)
         }
         if (me.wrap) {
-            NeoArray.remove(wrapperCls, prefix + 'wrap-' + me.wrap);
+            NeoArray.remove(wrapperCls, prefix + 'wrap-' + me.wrap)
         }
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
     }
 
     /**
@@ -273,11 +274,11 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     testInputValue(value, oldValue, validValuesName, propertyName) {
-        const validValues = this.getStaticConfig(validValuesName);
+        let validValues = this.getStaticConfig(validValuesName);
 
         if (!NeoArray.hasItem(validValues, value)) {
             Neo.logError(this.containerId, '-> layout: supported values for "' + propertyName + '" are' , validValues);
-            return oldValue;
+            return oldValue
         }
 
         return value;
@@ -293,17 +294,17 @@ class Flexbox extends Base {
     updateInputValue(value, oldValue, propertyName) {
         let me         = this,
             container  = Neo.getComponent(me.containerId),
-            prefix     = me.prefix,
+            {prefix}   = me,
             wrapperCls = container?.wrapperCls;
 
         if (container?.rendered) {
             NeoArray.remove(wrapperCls, prefix + propertyName + '-' + oldValue);
 
             if (value !== null) {
-                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value);
+                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value)
             }
 
-            container.wrapperCls = wrapperCls;
+            container.wrapperCls = wrapperCls
         }
     }
 }

package/src/layout/Form.mjs

@@ -42,7 +42,7 @@ class Form extends Base {
             style = item.wrapperStyle;
 
         style.gap = value;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -50,14 +50,14 @@ class Form extends Base {
      * @param {Neo.component.Base} item
      * @param {Number} index
      */
-    applyChildAttributes(child, index) {
-        if (!child.ignoreLayout) {
-            if (child.ntype === 'fieldset') {
-                child.wrapperCls = NeoArray.union(child.wrapperCls, 'neo-layout-form-subfieldset');
+    applyChildAttributes(item, index) {
+        if (!item.ignoreLayout) {
+            if (item.ntype === 'fieldset') {
+                item.wrapperCls = NeoArray.union(item.wrapperCls, 'neo-layout-form-subfieldset')
             } else if (child.ntype === 'legend') {
-                child.wrapperCls = NeoArray.union(child.wrapperCls, 'neo-layout-form-legend');
+                item.wrapperCls = NeoArray.union(item.wrapperCls, 'neo-layout-form-legend')
             } else {
-                child.wrapperCls = NeoArray.union(child.wrapperCls, 'neo-layout-form-item');
+                item.wrapperCls = NeoArray.union(item.wrapperCls, 'neo-layout-form-item')
             }
         }
     }
@@ -71,12 +71,12 @@ class Form extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Form: applyRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Form: applyRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.add(wrapperCls, 'neo-layout-form');
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
     }
 
     /**
@@ -89,7 +89,7 @@ class Form extends Base {
         let style = item.wrapperStyle || {};
 
         style.flex = item.flex || null;
-        item.wrapperStyle = style;
+        item.wrapperStyle = style
     }
 
     /**
@@ -102,12 +102,12 @@ class Form extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Form: removeRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Form: removeRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.remove(wrapperCls, 'neo-layout-form');
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
     }
 
     /**
@@ -120,17 +120,17 @@ class Form extends Base {
     updateInputValue(value, oldValue, propertyName) {
         let me         = this,
             container  = Neo.getComponent(me.containerId),
-            prefix     = me.prefix,
+            {prefix}   = me,
             wrapperCls = container?.wrapperCls;
 
         if (container?.rendered) {
             NeoArray.remove(wrapperCls, prefix + propertyName + '-' + oldValue);
 
             if (value !== null) {
-                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value);
+                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value)
             }
 
-            container.wrapperCls = wrapperCls;
+            container.wrapperCls = wrapperCls
         }
     }
 }

package/src/layout/Grid.mjs

@@ -28,12 +28,12 @@ class Grid extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Grid: applyRenderAttributes -> container not yet created', me.containerId);
+            Neo.logError('layout.Grid: applyRenderAttributes -> container not yet created', me.containerId)
         }
 
         NeoArray.add(wrapperCls, 'neo-layout-grid');
 
-        container.wrapperCls = wrapperCls;
+        container.wrapperCls = wrapperCls
     }
 }
 

package/src/layout/HBox.mjs

@@ -26,10 +26,11 @@ class HBox extends Flexbox {
     /**
      * Applies the flex value to an item of the container this layout is bound to
      * @param {Neo.component.Base} item
+     * @param {Number} index
      */
-    applyChildAttributes(item) {
+    applyChildAttributes(item, index) {
         // Do not apply flex if fixed width
-        !item.width && super.applyChildAttributes(item);
+        !item.width && super.applyChildAttributes(item, index)
     }
 }
 

package/src/layout/VBox.mjs

@@ -26,10 +26,11 @@ class VBox extends Flexbox {
     /**
      * Applies the flex value to an item of the container this layout is bound to
      * @param {Neo.component.Base} item
+     * @param {Number} index
      */
-    applyChildAttributes(item) {
+    applyChildAttributes(item, index) {
         // Do not apply flex if fixed height
-        !item.height && super.applyChildAttributes(item);
+        !item.height && super.applyChildAttributes(item, index)
     }
 }
 

package/src/list/Base.mjs

@@ -152,7 +152,7 @@ class Base extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-            {tag: 'ul', cn: []}
+        {tag: 'ul', cn: []}
     }
 
     /**
@@ -179,7 +179,7 @@ class Base extends Component {
         let me = this;
 
         if (me.useHeaders) {
-            me.scrollIntoViewOnFocus = false;
+            me.scrollIntoViewOnFocus = false
         }
 
         me.addDomListeners({
@@ -195,19 +195,20 @@ class Base extends Component {
      * @protected
      */
     afterSetAnimate(value, oldValue) {
-        value && import('./plugin/Animate.mjs').then(module => {
-            let me      = this,
-                plugins = me.plugins || [];
-
-            plugins.push({
-                module : module.default,
-                appName: me.appName,
-                id     : 'animate',
-                ...me.pluginAnimateConfig
-            });
+        if (value && !this.getPlugin('list-animate')) {
+            import('./plugin/Animate.mjs').then(module => {
+                let me      = this,
+                    plugins = me.plugins || [];
 
-            me.plugins = plugins
-        })
+                plugins.push({
+                    module : module.default,
+                    appName: me.appName,
+                    ...me.pluginAnimateConfig
+                });
+
+                me.plugins = plugins
+            })
+        }
     }
 
     /**
@@ -280,7 +281,7 @@ class Base extends Component {
      * @protected
      */
     afterSetMounted(value, oldValue) {
-        const me = this;
+        let me = this;
 
         // Tear down navigation before we lose the element
         if (!value && me.hasNavigator) {
@@ -318,8 +319,8 @@ class Base extends Component {
      * @protected
      */
     afterSetSelectedIndex(value, oldValue) {
-        let me             = this,
-            selectionModel = me.selectionModel;
+        let me               = this,
+            {selectionModel} = me;
 
         if (Neo.isNumber(value)) {
             selectionModel?.selectAt(value);
@@ -367,8 +368,8 @@ class Base extends Component {
      * @protected
      */
     afterSetUseCheckBoxes(value, oldValue) {
-        let me  = this,
-            cls = me.cls;
+        let me    = this,
+            {cls} = me;
 
         NeoArray.toggle(cls, 'neo-use-checkicons', !!value);
         me.cls = cls
@@ -396,9 +397,8 @@ class Base extends Component {
      * @protected
      */
     afterSetUseWrapperNode(value, oldValue) {
-        let me         = this,
-            cls        = me.cls,
-            wrapperCls = me.wrapperCls;
+        let me                = this,
+            {cls, wrapperCls} = me;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-use-wrapper-node');
         NeoArray[value ? 'add' : 'remove'](wrapperCls, 'neo-list-wrapper');
@@ -438,15 +438,15 @@ class Base extends Component {
      * @returns {Object} The list item vdom object
      */
     createItem(record, index) {
-        let me             = this,
-            cls            = [me.itemCls],
-            hasItemHeight  = me.itemHeight !== null,
-            hasItemWidth   = me.itemWidth  !== null,
-            isHeader       = me.useHeaders && record.isHeader,
-            itemContent    = me.createItemContent(record, index),
-            itemId         = me.getItemId(record[me.getKeyProperty()]),
-            selectionModel = me.selectionModel,
-            isSelected     = !me.disableSelection && selectionModel?.isSelected(itemId),
+        let me               = this,
+            cls              = [me.itemCls],
+            hasItemHeight    = me.itemHeight !== null,
+            hasItemWidth     = me.itemWidth !== null,
+            isHeader         = me.useHeaders && record.isHeader,
+            itemContent      = me.createItemContent(record, index),
+            itemId           = me.getItemId(record[me.getKeyProperty()]),
+            {selectionModel} = me,
+            isSelected       = !me.disableSelection && selectionModel?.isSelected(itemId),
             item;
 
         isHeader && cls.push('neo-list-header');
@@ -484,12 +484,12 @@ class Base extends Component {
 
         switch (Neo.typeOf(itemContent)) {
             case null: {
-                return null;
+                return null
             }
 
             case 'Array': {
                 item.cn = itemContent;
-                break;
+                break
             }
 
             case 'Object': {
@@ -500,13 +500,13 @@ class Base extends Component {
                 }
 
                 Object.assign(item, itemContent);
-                break;
+                break
             }
 
             case 'Number':
             case 'String': {
                 item.html = itemContent;
-                break;
+                break
             }
         }
 
@@ -553,9 +553,9 @@ class Base extends Component {
      * @param {Boolean} silent=false
      */
     createItems(silent=false) {
-        let me                      = this,
-            headerlessSelectedIndex = me.headerlessSelectedIndex,
-            vdom                    = me.getVdomRoot(),
+        let me                        = this,
+            {headerlessSelectedIndex} = me,
+            vdom                      = me.getVdomRoot(),
             listItem;
 
         // in case we set headerlessSelectedIndex before the store was loaded, selectedIndex can be null
@@ -564,7 +564,7 @@ class Base extends Component {
             me.afterSetHeaderlessSelectedIndex(headerlessSelectedIndex, null)
         }
 
-        if (!(me.animate && !me.getPlugin('animate'))) {
+        if (!(me.animate && !me.getPlugin('list-animate'))) {
             vdom.cn = [];
 
             me.store.items.forEach((item, index) => {
@@ -657,7 +657,7 @@ class Base extends Component {
      */
     getItemRecordId(vnodeId) {
         let itemId   = vnodeId.split('__')[1],
-            model    = this.store.model,
+            {model}  = this.store,
             keyField = model?.getField(model.keyProperty),
             keyType  = keyField?.type?.toLowerCase();
 
@@ -752,14 +752,12 @@ class Base extends Component {
      *
      */
     onStoreLoad() {
-        let me = this,
-            listenerId;
+        let me = this;
 
         if (!me.mounted && me.rendering) {
-            listenerId = me.on('mounted', () => {
-                me.un('mounted', listenerId);
+            me.on('mounted', () => {
                 me.createItems()
-            });
+            }, me, {once: true});
         } else {
             me.createItems()
         }
@@ -774,8 +772,8 @@ class Base extends Component {
      *
      */
     onStoreRecordChange(data) {
-        let me    = this,
-            index = data.index;
+        let me      = this,
+            {index} = data;
 
         // ignore changes for records which have not been added to the list yet
         if (index > -1) {

package/src/list/Chip.mjs

@@ -63,7 +63,7 @@ class Chip extends ComponentList {
 
             items.forEach(item => {
                 item.display = value ? 'flex' : 'inline-flex';
-            });
+            })
         }
     }
 
@@ -85,7 +85,7 @@ class Chip extends ComponentList {
             };
 
         if (listItem) {
-            listItem.setSilent(config);
+            listItem.setSilent(config)
         } else {
             items[index] = listItem = Neo.create({
                 appName  : me.appName,
@@ -93,12 +93,12 @@ class Chip extends ComponentList {
                 tabIndex : -1,
                 ...me.itemDefaults,
                 ...config
-            });
+            })
         }
 
         me.items = items;
 
-        return [listItem.vdom];
+        return [listItem.vdom]
     }
 }
 

package/src/list/Circle.mjs

@@ -61,7 +61,7 @@ class Circle extends Component {
             };
 
         if (listItem) {
-            listItem.setSilent(config);
+            listItem.setSilent(config)
         } else {
             items[index] = listItem = Neo.create({
                 appName    : me.appName,
@@ -73,12 +73,12 @@ class Circle extends Component {
                 width      : me.itemWidth,
                 ...me.itemDefaults,
                 ...config
-            });
+            })
         }
 
         me.items = items;
 
-        return [listItem.vdom];
+        return [listItem.vdom]
     }
 }
 

package/src/list/Color.mjs

@@ -62,7 +62,7 @@ class Color extends Base {
             vtype: 'text',
             html : record[me.displayField],
             id   : me.getListItemVtextId(id)
-        }];
+        }]
     }
 
     /**
@@ -70,7 +70,7 @@ class Color extends Base {
      * @returns {String}
      */
     getListItemIconId(recordId) {
-        return `${this.id}__icon__${recordId}`;
+        return `${this.id}__icon__${recordId}`
     }
 
     /**
@@ -78,7 +78,7 @@ class Color extends Base {
      * @returns {String}
      */
     getListItemVtextId(recordId) {
-        return `${this.id}__vtext__${recordId}`;
+        return `${this.id}__vtext__${recordId}`
     }
 
     /**
@@ -89,7 +89,7 @@ class Color extends Base {
 
         me.createItems(me.silentSelectUpdate);
 
-        !me.silentSelect && me.focus(items[0]);
+        !me.silentSelect && me.focus(items[0])
     }
 }