neo.mjs 2.3.13 → 2.3.17

package/examples/list/animate/List.mjs

@@ -0,0 +1,50 @@
+import BaseList from '../../../src/list/Base.mjs';
+
+/**
+ * @class Neo.examples.list.animate.List
+ * @extends Neo.list.Base
+ */
+class List extends BaseList {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.list.animate.List'
+         * @protected
+         */
+        className: 'Neo.examples.list.animate.List',
+        /**
+         * @member {Boolean} animate=true
+         */
+        animate: true,
+        /**
+         * @member {String[]} cls=['neo-examples-list-animate','neo-list-container','neo-list']
+         */
+        cls: ['neo-examples-list-animate', 'neo-list-container', 'neo-list'],
+        /**
+         * @member {String} itemTagName='div'
+         */
+        itemTagName: 'div'
+    }}
+
+    /**
+     * Override this method for custom renderers
+     * @param {Object} record
+     * @param {Number} index
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     */
+    createItemContent(record, index) {
+        return [
+            {cls: ['neo-list-item-content'], cn: [
+                {tag: 'img', src: `../../../resources/examples/${record.image}`},
+                {cls: ['neo-list-item-text'], cn: [
+                    {html: record.firstname},
+                    {cls: ['neo-lastname'], html: record.lastname},
+                    {cls: ['neo-is-online'], removeDom: !record.isOnline}
+                ]}
+            ]}
+        ];
+    }
+}
+
+Neo.applyClassConfig(List);
+
+export {List as default};

package/examples/list/animate/MainContainer.mjs

@@ -0,0 +1,79 @@
+import CheckBox  from '../../../src/form/field/CheckBox.mjs';
+import List      from './List.mjs';
+import MainStore from './MainStore.mjs';
+import Toolbar   from '../../../src/container/Toolbar.mjs';
+import Viewport  from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.list.animate.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        className: 'Neo.examples.list.animate.MainContainer',
+        autoMount: true,
+        layout   : {ntype: 'vbox', align: 'stretch'}
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    constructor(config) {
+        super(config);
+
+        let me = this;
+
+        me.items = [{
+            module: Toolbar,
+            flex  : 'none',
+
+            itemDefaults: {
+                ntype: 'button',
+                style: {marginRight: '.5em'}
+            },
+
+            items : [{
+                ntype: 'label',
+                text : 'Sort by'
+            }, {
+                handler: me.changeSorting.bind(me, 'firstname'),
+                text   : 'Firstname'
+            }, {
+                handler: me.changeSorting.bind(me, 'lastname'),
+                text   : 'Lastname'
+            }, {
+                module    : CheckBox,
+                labelText : 'Is online',
+                labelWidth: 70,
+                listeners : {change: me.changeIsOnlineFilter.bind(me)},
+                style     : {marginLeft: '50px'}
+            }]
+        }, {
+            module: List,
+            store : MainStore
+        }];
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeIsOnlineFilter(data) {
+        let store = this.down({module: List}).store;
+
+        store.getFilter('isOnline').disabled = !data.value;
+    }
+
+    /**
+     * @param {String} field
+     * @param {Object} data
+     */
+    changeSorting(field, data) {
+        let store = this.down({module: List}).store;
+
+        store.sorters[0].property = field;
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export {MainContainer as default};

package/examples/list/animate/MainModel.mjs

@@ -0,0 +1,33 @@
+import Model  from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.list.animate.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static getConfig() {return {
+        className  : 'Neo.examples.list.animate.MainModel',
+        keyProperty: 'id',
+
+        fields: [{
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'isOnline',
+            type: 'Boolean'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainModel);
+
+export {MainModel as default};

package/examples/list/animate/MainStore.mjs

@@ -0,0 +1,31 @@
+import MainModel from './MainModel.mjs';
+import Store     from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.list.animate.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static getConfig() {return {
+        className  : 'Neo.examples.list.animate.MainStore',
+        autoLoad   : true,
+        keyProperty: 'id',
+        model      : MainModel,
+        url        : '../../resources/examples/data/circleContacts.json',
+
+        filters: [{
+            disabled : true,
+            property : 'isOnline',
+            value    : true
+        }],
+
+        sorters: [{
+            property : 'firstname',
+            direction: 'ASC'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainStore);
+
+export {MainStore as default};

package/examples/list/animate/app.mjs

@@ -0,0 +1,8 @@
+import MainContainer from './MainContainer.mjs';
+
+const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.list.animate'
+});
+
+export {onStart as onStart};

package/examples/list/animate/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo AnimatedList</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/list/animate/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"         : "examples/list/animate/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["Stylesheet"]
+}

package/examples/list/base/neo-config.json

@@ -3,5 +3,5 @@
     "basePath"        : "../../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "mainThreadAddons": ["DragDrop", "Stylesheet"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "2.3.13",
+    "version": "2.3.17",
     "description": "The webworkers driven UI framework",
     "repository": {
         "type": "git",
@@ -34,24 +34,24 @@
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.4",
-        "@material/mwc-button": "^0.23.0",
-        "@material/mwc-textfield": "^0.23.0",
-        "autoprefixer": "^10.3.4",
+        "@material/mwc-button": "^0.25.3",
+        "@material/mwc-textfield": "^0.25.3",
+        "autoprefixer": "^10.4.0",
         "chalk": "^4.1.2",
         "clean-webpack-plugin": "^4.0.0",
-        "commander": "^8.2.0",
-        "cssnano": "^5.0.8",
+        "commander": "^8.3.0",
+        "cssnano": "^5.0.10",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.0.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^8.1.5",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.3.6",
-        "sass": "^1.41.1",
-        "webpack": "^5.53.0",
-        "webpack-cli": "^4.8.0",
-        "webpack-dev-server": "4.2.1",
+        "postcss": "^8.3.11",
+        "sass": "^1.43.4",
+        "webpack": "^5.62.1",
+        "webpack-cli": "^4.9.1",
+        "webpack-dev-server": "4.4.0",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/examples/list/animate/List.scss

@@ -0,0 +1,30 @@
+.neo-examples-list-animate {
+    .neo-is-online {
+        background-color: green;
+        border-radius   : 50%;
+        height          : .7em;
+        margin-top      : .5em;
+        width           : .7em;
+    }
+
+    .neo-lastname {
+        color      : #1c60a0;
+        font-weight: bold;
+    }
+
+    .neo-list-item {
+        background-color: lavender;
+        border          : 1px solid #1c60a0;
+        border-radius   : 6px;
+        opacity         : .9;
+        transition      : transform .5s ease-in-out;
+    }
+
+    .neo-list-item-content {
+        display: flex;
+    }
+
+    .neo-list-item-text {
+        margin-left: 10px;
+    }
+}

package/src/Main.mjs

@@ -100,14 +100,6 @@ class Main extends core.Base {
      * @param {Object} config
      */
     constructor(config) {
-        if (Neo.config.environment === 'development' && typeof window.webkitConvertPointFromNodeToPage === 'function') {
-            document.body.innerHTML = [
-                'Please use Chrome for the development mode.</br>',
-                'For details, see the open Ticket: ',
-                '<a style="color:red;" href="https://github.com/neomjs/neo/issues/191">Safari: Worker should support ES6 modules</a>'
-            ].join('');
-        }
-
         super(config);
 
         let me = this;

package/src/Neo.mjs

@@ -137,9 +137,7 @@ Neo = self.Neo = Object.assign({
             delete ctor.getConfig;
             delete ctor.getStaticConfig;
 
-            if (!config.singleton) {
-                this.applyToGlobalNs(cls);
-            }
+            !config.singleton && this.applyToGlobalNs(cls);
         });
     },
 

package/src/calendar/view/week/Component.mjs

@@ -468,7 +468,7 @@ class Component extends BaseComponent {
                         appName  : me.appName,
                         direction: 'left',
                         id       : me.getScrollContainer().id,
-                        value    : data.width / 3
+                        value    : data.width * me.columnsBuffer / me.columnsVisible / 3
                     });
                 });
             }, 20);

package/src/collection/Base.mjs

@@ -484,6 +484,7 @@ class Base extends CoreBase {
     doSort() {
         let me                = this,
             items             = me._items,
+            previousItems     = [...items],
             sorters           = me.sorters,
             sortDirections    = me.sortDirections,
             sortProperties    = me.sortProperties,
@@ -568,7 +569,11 @@ class Base extends CoreBase {
         me[isSorted] = countSorters > 0;
 
         if (me[updatingIndex] === 0) {
-            me.fire('sort');
+            me.fire('sort', {
+                items: me._items,
+                previousItems,
+                scope: me
+            });
         }
     }
 
@@ -687,7 +692,7 @@ class Base extends CoreBase {
 
         me[isFiltered] = countFilters !== 0;
 
-        me.fire('filter');
+        me.fire('filter', me);
     }
 
     /**
@@ -968,8 +973,6 @@ class Base extends CoreBase {
         }
 
         me.splice(null, opts.removedItems, opts.addedItems);
-
-        // console.log('onMutate', me.getCount(), me.id, opts);
     }
 
     /**

package/src/component/Base.mjs

@@ -440,7 +440,7 @@ class Base extends CoreBase {
     afterSetConfig(key, value, oldValue) {
         if (Neo.currentWorker.isUsingViewModels) {
             if (this.bind?.[key]?.twoWay) {
-                this.getModel().setData(key, value);
+                this.getModel()?.setData(key, value);
             }
         }
     }
@@ -1080,17 +1080,10 @@ class Base extends CoreBase {
     initConfig(config, preventOriginalConfig) {
         super.initConfig(config, preventOriginalConfig);
 
-        let me         = this,
-            controller = me.getController(),
-            model      = me.getModel();
-
-        if (controller) {
-            controller.parseConfig(me);
-        }
+        let me = this;
 
-        if (model) {
-            model.parseConfig(me);
-        }
+        me.getController()?.parseConfig(me);
+        me.getModel()     ?.parseConfig(me);
     }
 
     /**

package/src/core/Base.mjs

@@ -145,7 +145,7 @@ class Base {
      * @returns {String|Number} value or oldValue
      */
     beforeSetEnumValue(value, oldValue, name, staticName = name + 's') {
-        const values = Array.isArray(staticName) ? staticName : this.getStaticConfig(staticName);
+        let values = Array.isArray(staticName) ? staticName : this.getStaticConfig(staticName);
 
         if (!values.includes(value)) {
             Neo.logError(`Supported values for ${name} are: ${values.join(', ')}`, this);

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
      */