neo.mjs 2.3.14 → 2.3.18

package/src/form/field/Text.mjs

@@ -121,7 +121,6 @@ class Text extends Base {
     }}
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {
@@ -638,7 +637,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @returns {Object|null}
      */
     getCenterBorderEl() {
@@ -647,7 +645,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @returns {Object|null}
      */
     getInputEl() {
@@ -655,7 +652,6 @@ class Text extends Base {
         return el?.vdom;
     }
     /**
-     *
      * @returns {String}
      */
     getInputElId() {
@@ -682,7 +678,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @returns {String}
      */
     getInputWrapperId() {
@@ -690,7 +685,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @returns {Object|null}
      */
     getLabelEl() {
@@ -699,7 +693,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @returns {String}
      */
     getLabelId() {
@@ -707,7 +700,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @param {String} type
      * @returns {Neo.form.field.trigger.Base|null}
      */
@@ -727,7 +719,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @param {String} id
      * @returns {Neo.form.field.trigger.Base|null}
      */
@@ -747,7 +738,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @param {String} type
      * @protected
      * @returns {String} The trigger node id
@@ -776,7 +766,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @returns {Boolean}
      */
     isEmpty() {
@@ -784,7 +773,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @returns {Boolean}
      */
     isValid() {
@@ -798,7 +786,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @param {Object} config
      * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
      * @returns {Object} config
@@ -815,7 +802,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {Object[]} data.path
      * @protected
@@ -840,7 +826,6 @@ class Text extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {Object[]} data.oldPath
      * @protected

package/src/form/field/Time.mjs

@@ -82,7 +82,6 @@ class Time extends Picker {
     }}
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {
@@ -253,7 +252,6 @@ class Time extends Picker {
     }
 
     /**
-     *
      * @returns {String[]}
      */
     createCollectionItems() {
@@ -285,7 +283,6 @@ class Time extends Picker {
     }
 
     /**
-     *
      * @returns {Neo.component.DateSelector}
      */
     createPickerComponent() {
@@ -293,7 +290,6 @@ class Time extends Picker {
     }
 
     /**
-     *
      * @param {Function} [callback]
      */
     focusInputEl(callback) {
@@ -340,7 +336,6 @@ class Time extends Picker {
     }
 
     /**
-     *
      * @param {Object} data
      * @protected
      */
@@ -356,7 +351,6 @@ class Time extends Picker {
     }
 
     /**
-     *
      * @param {Object} record
      */
     onListItemClick(record) {
@@ -373,7 +367,6 @@ class Time extends Picker {
     }
 
     /**
-     *
      * @param {Object} record
      */
     onListItemNavigate(record) {

package/src/form/field/trigger/Base.mjs

@@ -80,7 +80,6 @@ class Base extends Component {
     }}
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {
@@ -168,7 +167,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Boolean} updateParentVdom
      * @param {Boolean} silent
      */

package/src/form/field/trigger/Clear.mjs

@@ -81,7 +81,6 @@ class Clear extends Base {
     }
 
     /**
-     *
      * @returns {Boolean} true in case the trigger should be hidden
      */
     getHiddenState() {
@@ -101,7 +100,6 @@ class Clear extends Base {
     }
 
     /**
-     *
      * @param {Object} opts
      */
     onFieldChange(opts) {
@@ -136,7 +134,6 @@ class Clear extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      */
     onTriggerClick(data) {

package/src/form/field/trigger/CopyToClipboard.mjs

@@ -55,7 +55,6 @@ class CopyToClipboard extends Base {
     }
 
     /**
-     *
      * @returns {Boolean} true in case the trigger should be hidden
      */
     getHiddenState() {
@@ -80,7 +79,6 @@ class CopyToClipboard extends Base {
     }
 
     /**
-     *
      * @param {Object} opts
      */
     onFieldChange(opts) {
@@ -88,7 +86,6 @@ class CopyToClipboard extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      */
     onTriggerClick(data) {

package/src/form/field/trigger/Picker.mjs

@@ -30,7 +30,6 @@ class Picker extends Base {
     }}
 
     /**
-     *
      * @param {Object} data
      */
     onTriggerClick(data) {

package/src/form/field/trigger/SpinDown.mjs

@@ -34,7 +34,6 @@ class SpinDown extends Base {
     }}
 
     /**
-     *
      * @param {Object} data
      */
     onTriggerClick(data) {

package/src/form/field/trigger/SpinUp.mjs

@@ -30,7 +30,6 @@ class SpinUp extends Base {
     }}
 
     /**
-     *
      * @param {Object} data
      */
     onTriggerClick(data) {

package/src/form/field/trigger/SpinUpDown.mjs

@@ -55,7 +55,6 @@ class SpinUpDown extends Base {
     }
 
     /**
-     *
      * @param {Object} data
      */
     onTriggerClick(data) {

package/src/form/field/trigger/Time.mjs

@@ -48,7 +48,6 @@ class Time extends Picker {
     }}
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {

package/src/grid/Container.mjs

@@ -74,7 +74,6 @@ class Container extends BaseContainer {
     }
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {
@@ -84,7 +83,6 @@ class Container extends BaseContainer {
     }
 
     /**
-     *
      * @param columns
      * @returns {*}
      */
@@ -108,7 +106,6 @@ class Container extends BaseContainer {
     }
 
     /**
-     *
      * Dummy method until we have a data package in place
      * @param {Number} amountRows
      */
@@ -165,4 +162,4 @@ class Container extends BaseContainer {
 
 Neo.applyClassConfig(Container);
 
-export {Container as default};
+export {Container as default};

package/src/grid/header/Toolbar.mjs

@@ -43,7 +43,6 @@ class Toolbar extends BaseToolbar {
     }}
 
     /**
-     *
      * @param {Array} items
      */
     createItems(items) {
@@ -73,7 +72,6 @@ class Toolbar extends BaseToolbar {
     }
 
     /**
-     *
      * @param dock
      * @returns {String} layoutConfig
      * @override
@@ -83,7 +81,6 @@ class Toolbar extends BaseToolbar {
     }
 
     /**
-     *
      * @returns {Object}
      */
     getVdomRoot() {
@@ -91,7 +88,6 @@ class Toolbar extends BaseToolbar {
     }
 
     /**
-     *
      * @returns {Object}
      */
     getVnodeRoot() {
@@ -101,4 +97,4 @@ class Toolbar extends BaseToolbar {
 
 Neo.applyClassConfig(Toolbar);
 
-export {Toolbar as default};
+export {Toolbar as default};

package/src/list/Base.mjs

@@ -20,6 +20,10 @@ class Base extends Component {
          * @protected
          */
         ntype: 'list',
+        /**
+         * @member {Boolean} animate_=false
+         */
+        animate_: false,
         /**
          * True will destroy the used collection / store when the component gets destroyed
          * @member {Boolean} autoDestroyStore=true
@@ -67,6 +71,11 @@ class Base extends Component {
          * @member {Object} keys
          */
         keys: {},
+        /**
+         * config values for Neo.list.plugin.Animate
+         * @member {Object} pluginAnimateConfig=null
+         */
+        pluginAnimateConfig: null,
         /**
          * Either pass a selection.Model module, an instance or a config object
          * @member {Object|Neo.selection.Model} selectionModel_=null
@@ -94,7 +103,6 @@ class Base extends Component {
     }}
 
     /**
-     *
      * @param {Object} config
      */
     constructor(config) {
@@ -110,6 +118,28 @@ class Base extends Component {
         me.domListeners = domListeners;
     }
 
+    /**
+     * Triggered after the animate config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @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,
+                flag   : 'animate',
+                ...me.pluginAnimateConfig
+            });
+
+            me.plugins = plugins;
+        });
+    }
+
     /**
      * Triggered after the disableSelection config got changed
      * @param {Boolean} value
@@ -236,6 +266,10 @@ class Base extends Component {
         };
 
         switch (Neo.typeOf(itemContent)) {
+            case null: {
+                return null;
+            }
+
             case 'Array': {
                 item.cn = itemContent;
                 break;
@@ -283,12 +317,14 @@ class Base extends Component {
      */
     createItems(silent=false) {
         let me   = this,
-            vdom = me.vdom;
+            vdom = me.vdom,
+            listItem;
 
         vdom.cn = [];
 
         me.store.items.forEach((item, index) => {
-            vdom.cn.push(me.createItem(item, index));
+            listItem = me.createItem(item, index);
+            listItem && vdom.cn.push(listItem);
         });
 
         if (silent) {
@@ -327,7 +363,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -336,7 +371,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {String} vnodeId
      * @returns {String|Number} itemId
      */
@@ -361,7 +395,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Object} data
      */
     onClick(data) {
@@ -390,7 +423,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Object} data
      */
     onContainerClick(data) {
@@ -406,7 +438,6 @@ class Base extends Component {
     }
 
     /**
-     *
      * @param {Object} node
      * @param {Object} data
      */

package/src/list/Color.mjs

@@ -66,7 +66,6 @@ class Color extends Base {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -75,7 +74,6 @@ class Color extends Base {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -84,7 +82,6 @@ class Color extends Base {
     }
 
     /**
-     *
      * @param {String[]} items
      */
     onSelect(items) {

package/src/list/Component.mjs

@@ -53,7 +53,6 @@ class Component extends Base {
     }
 
     /**
-     *
      * @param {Number} index
      * @returns {String}
      */
@@ -62,7 +61,6 @@ class Component extends Base {
     }
 
     /**
-     *
      * @param {Number|String} recordId
      * @returns {String}
      */
@@ -71,7 +69,6 @@ class Component extends Base {
     }
 
     /**
-     *
      * @param {String} vnodeId
      * @returns {String|Number} itemId
      */

package/src/list/plugin/Animate.mjs

@@ -0,0 +1,176 @@
+import Base from '../../plugin/Base.mjs';
+
+/**
+ * @class Neo.list.plugin.Animate
+ * @extends Neo.plugin.Base
+ */
+class Animate extends Base {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.list.plugin.Animate'
+         * @protected
+         */
+        className: 'Neo.list.plugin.Animate',
+        /**
+         * Read only
+         * @member {Number|null} columns=null
+         */
+        columns: null,
+        /**
+         * Value in px
+         * @member {Number} itemHeight=200
+         */
+        itemHeight: 200,
+        /**
+         * Value in px
+         * @member {Number} itemMargin=10
+         */
+        itemMargin: 10,
+        /**
+         * Value in px
+         * @member {Number} itemWidth=300
+         */
+        itemWidth: 300,
+        /**
+         * @member {DOMRect|null} ownerRect=null
+         */
+        ownerRect: null,
+        /**
+         * Read only
+         * @member {Number|null} rows=null
+         */
+        rows: null
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    constructor(config) {
+        super(config);
+
+        let me = this;
+
+        me.adjustCreateItem();
+
+        me.owner.store.on({
+            filter: me.onFilter,
+            sort  : me.onSort,
+            scope : me
+        });
+    }
+
+    /**
+     *
+     */
+    adjustCreateItem() {
+        let me    = this,
+            owner = me.owner;
+
+        me.ownerCreateItem = owner.createItem.bind(owner);
+        owner.createItem   = me.createItem.bind(owner, me);
+    }
+
+    /**
+     * @param {Neo.list.plugin.Animate} me
+     * @param {Object} record
+     * @param {Number} index
+     * @returns {Object}
+     */
+    createItem(me, record, index) {
+        let item       = me.ownerCreateItem(record, index),
+            itemHeight = me.itemHeight,
+            itemWidth  = me.itemWidth,
+            margin     = me.itemMargin,
+            style      = item.style || {},
+            column, row, x, y;
+
+        if (!me.ownerRect) {
+            return null;
+        }
+
+        column = index % me.columns;
+        row    = Math.floor(index / me.columns);
+        x      = column * (margin + itemWidth)  + margin;
+        y      = row    * (margin + itemHeight) + margin;
+
+        Object.assign(style, {
+            height   : `${itemHeight}px`,
+            position : 'absolute',
+            transform: `translate(${x}px, ${y}px)`,
+            width    : `${itemWidth}px`
+        });
+
+        item.style = style;
+
+        return item;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFilter(data) {
+        console.log('onFilter', data);
+    }
+
+    /**
+     *
+     */
+    onOwnerMounted() {
+        let me = this;
+
+        Neo.main.DomAccess.getBoundingClientRect({
+            id: me.owner.id
+        }).then(rect => {
+            Object.assign(me, {
+                columns  : Math.floor(rect.width / me.itemWidth),
+                ownerRect: rect,
+                rows     : Math.floor(rect.height / me.itemHeight)
+            });
+        });
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onSort(data) {
+        let me          = this,
+            hasChange   = false,
+            keyProperty = data.scope.keyProperty,
+            owner       = me.owner,
+            newVdomCn   = [],
+            vdom        = owner.vdom,
+            vdomMap     = vdom.cn.map(e => e.id),
+            fromIndex, itemId;
+
+        if (vdomMap.length > 0) {
+            data.items.forEach((item, index) => {
+                itemId    = owner.getItemId(item[keyProperty]);
+                fromIndex = vdomMap.indexOf(itemId);
+
+                newVdomCn.push(vdom.cn[fromIndex]);
+
+                if (fromIndex !== index) {
+                    hasChange = true;
+                }
+            });
+
+            if (hasChange) {
+                owner.vdom.cn = newVdomCn;
+
+                owner.promiseVdomUpdate().then(() => {
+                    // we need to ensure to get this call into the next animation frame
+                    setTimeout(() => {
+                        owner.createItems();
+                    }, 50);
+                });
+            }
+        }
+    }
+}
+
+Neo.applyClassConfig(Animate);
+
+export {Animate as default};