neo.mjs 3.2.2 → 3.2.3

package/buildScripts/webpack/development/webpack.config.appworker.mjs

@@ -70,10 +70,10 @@ export default env => {
         content.appPath = content.appPath.replace(regexTopLevel, '');
 
         Object.assign(content, {
-            basePath      : basePath,
-            environment   : 'dist/development',
-            mainPath      : '../main.js',
-            workerBasePath: workerBasePath
+            basePath,
+            environment: 'dist/development',
+            mainPath   : '../main.js',
+            workerBasePath
         });
 
         fs.writeFileSync(outputPath, JSON.stringify(content, null, 4));

package/buildScripts/webpack/development/webpack.config.myapps.mjs

@@ -80,10 +80,10 @@ export default env => {
                 content.appPath = content.appPath.replace(regexTopLevel, '');
 
                 Object.assign(content, {
-                    basePath      : basePath,
-                    environment   : 'dist/development',
-                    mainPath      : '../main.js',
-                    workerBasePath: workerBasePath
+                    basePath,
+                    environment: 'dist/development',
+                    mainPath   : '../main.js',
+                    workerBasePath
                 });
 
                 fs.writeFileSync(outputPath, JSON.stringify(content, null, 4));

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -75,9 +75,9 @@ export default env => {
         content.appPath = content.appPath.replace(regexTopLevel, '');
 
         Object.assign(content, {
-            basePath      : basePath,
-            mainPath      : '../main.js',
-            workerBasePath: workerBasePath
+            basePath,
+            mainPath: '../main.js',
+            workerBasePath
         });
 
         fs.writeFileSync(outputPath, JSON.stringify(content));

package/buildScripts/webpack/production/webpack.config.myapps.mjs

@@ -86,9 +86,9 @@ export default env => {
                 content.appPath = content.appPath.replace(regexTopLevel, '');
 
                 Object.assign(content, {
-                    basePath      : basePath,
-                    mainPath      : '../main.js',
-                    workerBasePath: workerBasePath
+                    basePath,
+                    mainPath: '../main.js',
+                    workerBasePath
                 });
 
                 fs.writeFileSync(outputPath, JSON.stringify(content));

package/examples/ConfigurationViewport.mjs

@@ -129,7 +129,7 @@ class ConfigurationViewport extends Viewport {
 
     /**
      * Override this method to create the components to show inside the configuration container
-     * @returns {Neo.component.Base[]|null}
+     * @returns {Object[]|null}
      */
     createConfigurationComponents() {
         return null;

package/examples/list/animate/List.mjs

@@ -19,10 +19,20 @@ class List extends BaseList {
          * @member {String[]} cls=['neo-examples-list-animate','neo-list-container','neo-list']
          */
         cls: ['neo-examples-list-animate', 'neo-list-container', 'neo-list'],
+        /**
+         * Value in px
+         * @member {Number} itemHeight=200
+         */
+        itemHeight: 200,
         /**
          * @member {String} itemTagName='div'
          */
-        itemTagName: 'div'
+        itemTagName: 'div',
+        /**
+         * Value in px
+         * @member {Number} itemWidth=300
+         */
+        itemWidth: 300
     }}
 
     /**

package/examples/list/animate/MainStore.mjs

@@ -7,11 +7,10 @@ import Store     from '../../../src/data/Store.mjs';
  */
 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',
+        className: 'Neo.examples.list.animate.MainStore',
+        autoLoad : true,
+        model    : MainModel,
+        url      : '../../resources/examples/data/circleContacts.json',
 
         filters: [{
             disabled : true,

package/examples/list/circle/MainContainer.mjs

@@ -0,0 +1,142 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import CircleList            from '../../../src/list/Circle.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import MainStore             from './MainStore.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.list.circle.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static getConfig() {return {
+        className           : 'Neo.examples.list.circle.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 130,
+        configItemWidth     : 230,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }}
+
+    /**
+     * @returns {Object[]}
+     */
+    createConfigurationComponents() {
+        let me     = this,
+            sorter = me.exampleComponent.store.sorters[0];
+
+        return [{
+            module   : CheckBox,
+            checked  : me.exampleComponent.disableSelection,
+            labelText: 'disableSelection',
+            listeners: {change: me.onConfigChange.bind(me, 'disableSelection')}
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 5,
+            value    : me.exampleComponent.height,
+            style    : {marginTop: '10px'}
+        }, {
+            module        : Radio,
+            checked       : sorter.direction === 'ASC',
+            hideValueLabel: false,
+            labelText     : 'Sort',
+            listeners     : {change: me.changeSorting.bind(me, 'ASC')},
+            name          : 'sort',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'ASC'
+        }, {
+            module        : Radio,
+            checked       : sorter.direction === 'DESC',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.changeSorting.bind(me, 'DESC')},
+            name          : 'sort',
+            style         : {marginTop: '5px'},
+            valueLabelText: 'DESC'
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 5,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }, {
+            module   : TextField,
+            flex     : 'none',
+            labelText: 'Group1 Name',
+            listeners: {change: me.onGroupNameChange.bind(me, 0)},
+            name     : 'group1',
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.store.getAt(0).name
+        }, {
+            module   : TextField,
+            flex     : 'none',
+            labelText: 'Group2 Name',
+            listeners: {change: me.onGroupNameChange.bind(me, 1)},
+            name     : 'group2',
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.store.getAt(1).name
+        }];
+    }
+
+    /**
+     * @param {String} direction
+     * @param {Object} data
+     */
+    changeSorting(direction, data) {
+        if (data.value) {
+            this.exampleComponent.store.sorters[0].direction = direction;
+        }
+    }
+
+    /**
+     * @returns {Neo.component.Base}
+     */
+    createExampleComponent() {
+        let list = Neo.create({
+            module : CircleList,
+            animate: true,
+            height : 1000,
+            store  : MainStore,
+            width  : 1000
+        });
+
+        list.store.on('sort', this.onStoreSort, this);
+
+        return list;
+    }
+
+    /**
+     * @param {Number} index
+     * @param {Object} data
+     */
+    onGroupNameChange(index, data) {
+        this.exampleComponent.items[index].title = data.value;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onStoreSort(data) {
+        setTimeout(() => {
+            let me    = this,
+                items = me.exampleComponent.items;
+
+            me.down({name: 'group1'}).value = items[0].title;
+            me.down({name: 'group2'}).value = items[1].title;
+        }, 10);
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/list/circle/MainModel.mjs

@@ -0,0 +1,33 @@
+import Model  from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.list.circle.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.list.circle.MainModel'
+         * @protected
+         */
+        className: 'Neo.examples.list.circle.MainModel',
+        /**
+         * @member {Object[]} fields
+         * @protected
+         */
+        fields: [{
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'name',
+            type: 'String'
+        }, {
+            name: 'url',
+            type: 'String'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainModel);
+
+export default MainModel;

package/examples/list/circle/MainStore.mjs

@@ -0,0 +1,42 @@
+import MainModel from './MainModel.mjs';
+import Store     from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.list.circle.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.list.circle.MainStore'
+         * @protected
+         */
+        className: 'Neo.examples.list.circle.MainStore',
+        /**
+         * @member {Object[]} data
+         */
+        data: [
+            {id: 1, name: 'Red',    url: '../../resources/examples/data/circles/group1.json'},
+            {id: 2, name: 'Pink',   url: '../../resources/examples/data/circles/group4.json'},
+            {id: 3, name: 'Orange', url: '../../resources/examples/data/circles/group3.json'},
+            {id: 4, name: 'Yellow', url: '../../resources/examples/data/circles/group1.json'},
+            {id: 5, name: 'Green',  url: '../../resources/examples/data/circles/group2.json'},
+            {id: 6, name: 'Blue',   url: '../../resources/examples/data/circles/group1.json'}
+        ],
+        /**
+         * @member {Neo.data.Model} model=MainModel
+         */
+        model: MainModel,
+        /**
+         * @member {Object[]} sorters
+         */
+        sorters: [{
+            property : 'name',
+            direction: 'ASC'
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainStore);
+
+export default MainStore;

package/examples/list/circle/app.mjs

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

package/examples/list/circle/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 CircleList</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/examples/data/circles/group2.json

@@ -0,0 +1,18 @@
+{
+    "success" : true,
+
+    "total" : 10,
+
+    "data" : [
+        {"id":  1, "firstname": "Linda",    "lastname": "Kamen",     "isOnline": false, "image": "ai_images/000022.jpg"},
+        {"id":  2, "firstname": "William",  "lastname": "Horn",      "isOnline": true,  "image": "ai_images/000023.jpg"},
+        {"id":  3, "firstname": "Kimberly", "lastname": "Martin",    "isOnline": false, "image": "ai_images/000024.jpg"},
+        {"id":  4, "firstname": "Maribel",  "lastname": "Hermandez", "isOnline": true,  "image": "ai_images/000025.jpg"},
+        {"id":  5, "firstname": "Keneth",   "lastname": "Gilette",   "isOnline": true,  "image": "ai_images/000026.jpg"},
+        {"id":  6, "firstname": "Mark",     "lastname": "Boerner",   "isOnline": false, "image": "ai_images/000027.jpg"},
+        {"id":  7, "firstname": "Alicia",   "lastname": "Baker",     "isOnline": true,  "image": "ai_images/000028.jpg"},
+        {"id":  8, "firstname": "Wesley",   "lastname": "Kaplan",    "isOnline": true,  "image": "ai_images/000029.jpg"},
+        {"id":  9, "firstname": "Leroy",    "lastname": "Marzano",   "isOnline": false, "image": "ai_images/000030.jpg"},
+        {"id": 10, "firstname": "Lynn",     "lastname": "Broughton", "isOnline": false, "image": "ai_images/000031.jpg"}
+    ]
+}

package/resources/examples/data/circles/group3.json

@@ -0,0 +1,20 @@
+{
+    "success" : true,
+
+    "total" : 12,
+
+    "data" : [
+        {"id":  1, "firstname": "Leah",     "lastname": "Weigle",    "isOnline": false, "image": "ai_images/000032.jpg"},
+        {"id":  2, "firstname": "Teresita", "lastname": "Cisneros",  "isOnline": true,  "image": "ai_images/000033.jpg"},
+        {"id":  3, "firstname": "Anne",     "lastname": "Brown",     "isOnline": false, "image": "ai_images/000034.jpg"},
+        {"id":  4, "firstname": "Kim",      "lastname": "Bryant",    "isOnline": true,  "image": "ai_images/000035.jpg"},
+        {"id":  5, "firstname": "Rose",     "lastname": "Seale",     "isOnline": true,  "image": "ai_images/000036.jpg"},
+        {"id":  6, "firstname": "Joseph",   "lastname": "Sabin",     "isOnline": false, "image": "ai_images/000037.jpg"},
+        {"id":  7, "firstname": "Edward",   "lastname": "Paine",     "isOnline": true,  "image": "ai_images/000038.jpg"},
+        {"id":  8, "firstname": "Shannon",  "lastname": "Dison",     "isOnline": true,  "image": "ai_images/000039.jpg"},
+        {"id":  9, "firstname": "Tyler",    "lastname": "Marlowe",   "isOnline": false, "image": "ai_images/000040.jpg"},
+        {"id": 10, "firstname": "Mary",     "lastname": "Thompson",  "isOnline": false, "image": "ai_images/000041.jpg"},
+        {"id": 11, "firstname": "David",    "lastname": "Maddy",     "isOnline": false, "image": "ai_images/000042.jpg"},
+        {"id": 12, "firstname": "Anna",     "lastname": "McDaniel",  "isOnline": false, "image": "ai_images/000043.jpg"}
+    ]
+}

package/resources/examples/data/circles/group4.json

@@ -0,0 +1,28 @@
+{
+    "success" : true,
+
+    "total" : 20,
+
+    "data" : [
+        {"id":  1, "firstname": "Susanne",  "lastname": "Bosch",         "isOnline": false, "image": "ai_images/000044.jpg"},
+        {"id":  2, "firstname": "Sarah",    "lastname": "Baer",          "isOnline": true,  "image": "ai_images/000045.jpg"},
+        {"id":  3, "firstname": "Felix",    "lastname": "Schwarz",       "isOnline": false, "image": "ai_images/000046.jpg"},
+        {"id":  4, "firstname": "Lukas",    "lastname": "Krause",        "isOnline": true,  "image": "ai_images/000047.jpg"},
+        {"id":  5, "firstname": "Frank",    "lastname": "Schmitz",       "isOnline": true,  "image": "ai_images/000048.jpg"},
+        {"id":  6, "firstname": "Stefanie", "lastname": "Berg",          "isOnline": false, "image": "ai_images/000049.jpg"},
+        {"id":  7, "firstname": "Anne",     "lastname": "Fischer",       "isOnline": true,  "image": "ai_images/000050.jpg"},
+        {"id":  8, "firstname": "Tanja",    "lastname": "Fenstermacher", "isOnline": true,  "image": "ai_images/000051.jpg"},
+        {"id":  9, "firstname": "Ines",     "lastname": "Meister",       "isOnline": false, "image": "ai_images/000052.jpg"},
+        {"id": 10, "firstname": "Antje",    "lastname": "Peters",        "isOnline": false, "image": "ai_images/000053.jpg"},
+        {"id": 11, "firstname": "Stephan",  "lastname": "Fleischer",     "isOnline": false, "image": "ai_images/000054.jpg"},
+        {"id": 12, "firstname": "Annett",   "lastname": "Fuerst",        "isOnline": false, "image": "ai_images/000055.jpg"},
+        {"id": 13, "firstname": "Leon",     "lastname": "Ritter",        "isOnline": false, "image": "ai_images/000056.jpg"},
+        {"id": 14, "firstname": "Andrea",   "lastname": "Biermann",      "isOnline": false, "image": "ai_images/000057.jpg"},
+        {"id": 15, "firstname": "Wolfgang", "lastname": "Abend",         "isOnline": false, "image": "ai_images/000058.jpg"},
+        {"id": 16, "firstname": "Ulrich",   "lastname": "Zimmer",        "isOnline": false, "image": "ai_images/000059.jpg"},
+        {"id": 17, "firstname": "Nicole",   "lastname": "Herzog",        "isOnline": false, "image": "ai_images/000060.jpg"},
+        {"id": 18, "firstname": "Felix",    "lastname": "König",         "isOnline": false, "image": "ai_images/000061.jpg"},
+        {"id": 19, "firstname": "Thorsten", "lastname": "Werfel",        "isOnline": false, "image": "ai_images/000063.jpg"},
+        {"id": 20, "firstname": "Patrick",  "lastname": "Wolf",          "isOnline": false, "image": "ai_images/000064.jpg"}
+    ]
+}

package/resources/scss/src/list/Circle.scss

@@ -0,0 +1,25 @@
+.neo-circle-list.neo-list {
+    background-color: v(list-item-background-color);
+
+    .neo-circle-component {
+        background-color: transparent;
+        border          : none;
+
+        .neo-circle-center {
+            top: 50%;
+
+            .neo-circle-back {
+                background-color: rgba(62, 123, 134, 0.302);
+            }
+        }
+    }
+
+    .neo-list-item {
+        background-color: transparent;
+        padding         : 0;
+
+        &.neo-selected {
+            background-color: v(list-item-background-color-hover);
+        }
+    }
+}

package/src/calendar/view/calendars/List.mjs

@@ -47,7 +47,7 @@ class List extends ComponentList {
      */
     createItemContent(record, index) {
         let me       = this,
-            id       = record[me.store.keyProperty],
+            id       = record[me.getKeyProperty()],
             items    = me.items || [],
             checkBox = items[index],
 
@@ -112,7 +112,7 @@ class List extends ComponentList {
 
             Object.assign(style, {
                 left: `${listItemRect.right + 13}px`,
-                top : `${listItemRect.top   - 10}px`,
+                top : `${listItemRect.top   - 10}px`
             });
 
             editCalendarContainer[mounted ? 'set' : 'setSilent']({

package/src/component/Circle.mjs

@@ -45,7 +45,7 @@ class Circle extends Component {
          */
         keys: {},
         /**
-         * @member {Number} innerRadius_=60
+         * @member {Number} innerRadius_=100
          */
         innerRadius_: 100,
         /**
@@ -58,7 +58,7 @@ class Circle extends Component {
          */
         itemImagePath: null,
         /**
-         * @member {Number} itemSize_=30
+         * @member {Number} itemSize_=60
          */
         itemSize_: 60,
         /**
@@ -96,9 +96,9 @@ class Circle extends Component {
         title_: 'Circle 1',
         /**
          * The url for the store to load the data
-         * @member {String} url_='../resources/examples/data/ai_contacts.json'
+         * @member {String} url_='../resources/examples/data/circles/group1.json'
          */
-        url_: '../../resources/examples/data/circleContacts.json',
+        url_: '../../resources/examples/data/circles/group1.json',
         /**
          * @member {Object} _vdom
          */
@@ -408,6 +408,7 @@ class Circle extends Component {
         let me            = this,
             frontEl       = me.getFrontEl(),
             itemPositions = me.calculateItemPositions(),
+            itemSize      = me.itemSize,
             countItems    = Math.min(me.store.getCount(), me.maxItems),
             i             = startIndex,
             vdom          = me.vdom;
@@ -418,18 +419,18 @@ class Circle extends Component {
                 cls     : ['neo-circle-item'],
                 tabIndex: -1,
                 style: {
-                    height: me.itemSize           + 'px',
+                    height: itemSize              + 'px',
                     left  : itemPositions[i].left + 'px',
                     top   : itemPositions[i].top  + 'px',
-                    width : me.itemSize           + 'px'
+                    width : itemSize              + 'px'
                 },
                 cn: [{
                     tag  : 'img',
                     cls  : ['neo-circle-item-image'],
                     src  : me.itemImagePath + me.store.getAt(i).image,
                     style: {
-                        height: me.itemSize + 'px',
-                        width : me.itemSize + 'px'
+                        height: itemSize + 'px',
+                        width : itemSize + 'px'
                     }
                 }]
             });
@@ -439,7 +440,7 @@ class Circle extends Component {
     }
 
     /**
-     *
+     * @param {Object} data
      */
     expand(data) {
         let me = this;
@@ -452,7 +453,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param data
+     * @param {Object} data
      */
     expandItem(data) {
         let me   = this,
@@ -586,10 +587,7 @@ class Circle extends Component {
 
         let me = this;
 
-        if (me.selectionModel) {
-            me.selectionModel.register(me);
-        }
-
+        me.selectionModel?.register(me);
         me.loadData();
     }
 

package/src/component/Gallery.mjs

@@ -318,10 +318,7 @@ class Gallery extends Component {
     afterSetSelectionModel(value, oldValue) {
         if (this.rendered) {
             value.register(this);
-
-            if (oldValue) {
-                oldValue.destroy();
-            }
+            oldValue?.destroy();
         }
     }
 

package/src/core/Base.mjs

@@ -29,7 +29,7 @@ class Base {
 
     /**
      * The return value will get applied to each class instance
-     * @returns {Object} staticConfig
+     * @returns {Object} config
      * @tutorial 02_ClassSystem
      */
     static getConfig() {return {

package/src/data/Store.mjs

@@ -212,11 +212,11 @@ class Store extends Base {
 
         Neo.Xhr.promiseJson({
             url: me.url
+        }).catch(err => {
+            console.log('Error for Neo.Xhr.request', err, me.id);
         }).then(data => {
             me.data = Array.isArray(data.json) ? data.json : data.json.data;
             // we do not need to fire a load event => onCollectionMutate()
-        }).catch(err => {
-            console.log('Error for Neo.Xhr.request', err, me.id);
         });
     }
 

package/src/list/Base.mjs

@@ -61,11 +61,21 @@ class Base extends Component {
          * @member {String} itemCls='neo-list-item'
          */
         itemCls: 'neo-list-item',
+        /**
+         * Defaults to px
+         * @member {Number|null} itemHeight_=null
+         */
+        itemHeight_: null,
         /**
          * The type of the node / tag for each list item
          * @member {String} itemTagName='li'
          */
         itemTagName: 'li',
+        /**
+         * Defaults to px
+         * @member {Number|null} itemWidth_=null
+         */
+        itemWidth_: null,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -194,6 +204,7 @@ class Base extends Component {
             filter      : 'onStoreFilter',
             load        : 'onStoreLoad',
             recordChange: 'onStoreRecordChange',
+            sort        : 'onStoreSort',
             scope       : me
         });
 
@@ -247,6 +258,8 @@ class Base extends Component {
     createItem(record, index) {
         let me             = this,
             cls            = [me.itemCls],
+            hasItemHeight  = me.itemHeight !== null,
+            hasItemWidth   = me.itemWidth  !== null,
             itemContent    = me.createItemContent(record, index),
             itemId         = me.getItemId(record[me.getKeyProperty()]),
             selectionModel = me.selectionModel,
@@ -261,7 +274,7 @@ class Base extends Component {
         item = {
             tag     : me.itemTagName,
             cls     : cls,
-            id      : me.getItemId(record[me.getKeyProperty(itemId)]),
+            id      : itemId,
             tabIndex: -1
         };
 
@@ -285,6 +298,18 @@ class Base extends Component {
             }
         }
 
+        if (hasItemHeight || hasItemWidth) {
+            item.style = item.style || {};
+
+            if (hasItemHeight && !item.hasOwnProperty('height')) {
+                item.style.height = `${me.itemHeight}px`;
+            }
+
+            if (hasItemWidth && !item.hasOwnProperty('width')) {
+                item.style.width = `${me.itemWidth}px`;
+            }
+        }
+
         return item;
     }
 
@@ -320,19 +345,21 @@ class Base extends Component {
             vdom = me.vdom,
             listItem;
 
-        vdom.cn = [];
-
-        me.store.items.forEach((item, index) => {
-            listItem = me.createItem(item, index);
-            listItem && vdom.cn.push(listItem);
-        });
+        if (!(me.animate && !me.getPlugin('animate'))) {
+            vdom.cn = [];
 
-        if (silent) {
-            me._vdom = vdom;
-        } else {
-            me.promiseVdomUpdate().then(() => {
-                me.fire('createItems');
+            me.store.items.forEach((item, index) => {
+                listItem = me.createItem(item, index);
+                listItem && vdom.cn.push(listItem);
             });
+
+            if (silent) {
+                me._vdom = vdom;
+            } else {
+                me.promiseVdomUpdate().then(() => {
+                    me.fire('createItems');
+                });
+            }
         }
     }
 
@@ -499,6 +526,16 @@ class Base extends Component {
         }
     }
 
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreSort(data) {
+        this.createItems();
+    }
+
     /**
      * Convenience shortcut
      * @param {Number} index

package/src/list/Chip.mjs

@@ -13,10 +13,10 @@ class Chip extends ComponentList {
          */
         className: 'Neo.list.Chip',
         /**
-         * @member {String} ntype='chiplist'
+         * @member {String} ntype='chip-list'
          * @protected
          */
-        ntype: 'chiplist',
+        ntype: 'chip-list',
         /**
          * @member {String[]} cls=['neo-chip-list','neo-list']
          */
@@ -70,7 +70,6 @@ class Chip extends ComponentList {
      */
     createItemContent(record, index) {
         let me       = this,
-            id       = record[me.store.keyProperty],
             items    = me.items || [],
             listItem = items[index],
 

package/src/list/Circle.mjs

@@ -0,0 +1,87 @@
+import CircleComponent from '../component/Circle.mjs';
+import Component       from './Component.mjs';
+
+/**
+ * @class Neo.list.Circle
+ * @extends Neo.list.Component
+ */
+class Circle extends Component {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.list.Circle'
+         * @protected
+         */
+        className: 'Neo.list.Circle',
+        /**
+         * @member {String} ntype='circle-list'
+         * @protected
+         */
+        ntype: 'circle-list',
+        /**
+         * @member {String[]} cls=['neo-circle-list','neo-list']
+         */
+        cls: ['neo-circle-list', 'neo-list'],
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module : CircleComponent
+        },
+        /**
+         * Defaults to px
+         * @member {Number|null} itemHeight=300
+         */
+        itemHeight: 300,
+        /**
+         * Defaults to px
+         * @member {Number|null} itemWidth=300
+         */
+        itemWidth: 300,
+        /**
+         * @member {String} urlField='url'
+         */
+        urlField: 'url'
+    }}
+
+    /**
+     * 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) {
+        let me       = this,
+            items    = me.items || [],
+            listItem = items[index],
+
+            config = {
+                id   : me.getComponentId(index),
+                title: record[me.displayField],
+                url  : record[me.urlField]
+            };
+
+        if (listItem) {
+            listItem.setSilent(config);
+        } else {
+            items[index] = listItem = Neo.create({
+                appName    : me.appName,
+                height     : me.itemHeight,
+                innerRadius: me.itemHeight / 2 - 64,
+                itemSize   : 40,
+                parentId   : me.id,
+                tabIndex   : -1,
+                width      : me.itemWidth,
+                ...me.itemDefaults,
+                ...config
+            });
+        }
+
+        me.items = items;
+
+        return [listItem.vdom];
+    }
+}
+
+Neo.applyClassConfig(Circle);
+
+export default Circle;

package/src/list/Component.mjs

@@ -30,11 +30,9 @@ class Component extends Base {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        let me = this;
-
         super.afterSetAppName(value, oldValue);
 
-        value && me.items?.forEach(item => {
+        value && this.items?.forEach(item => {
             item.appName = value;
         });
     }
@@ -73,10 +71,43 @@ class Component extends Base {
      * @returns {String|Number} itemId
      */
     getItemRecordId(vnodeId) {
-        let itemId = vnodeId.split('__')[1],
-            store  = this.store;
+        let itemId = vnodeId.split('__')[1];
+        return this.store.getAt(parseInt(itemId))[this.getKeyProperty()];
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreSort(data) {
+        this.sortItems(data);
+        super.onStoreSort(data);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    sortItems(data) {
+        let me       = this,
+            newItems = [],
+            fromIndex, key, previousKeys;
+
+        if (me.items) {
+            key          = me.getKeyProperty();
+            previousKeys = data.previousItems.map(e => e[key]);
+
+            data.items.forEach(item => {
+                fromIndex = previousKeys.indexOf(item[key]);
+                newItems.push(me.items[fromIndex]);
+            });
 
-        return store.getAt(parseInt(itemId))[store.model.keyProperty];
+            me.items = newItems;
+        }
     }
 }
 

package/src/list/plugin/Animate.mjs

@@ -27,21 +27,11 @@ class Animate extends Base {
          * @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
          */
@@ -78,14 +68,14 @@ class Animate extends Base {
         let me    = this,
             owner = me.owner;
 
+        if (!owner.itemHeight || !owner.itemWidth) {
+            console.error('list.plugin.Animate requires fixed itemHeight and itemWidth values', owner);
+        }
+
         me.adjustCreateItem();
 
         owner.onStoreFilter = me.onStoreFilter.bind(me);
-
-        owner.store.on({
-            sort : me.onStoreSort,
-            scope: me
-        });
+        owner.onStoreSort   = me.onStoreSort  .bind(me);
 
         this.updateTransitionDetails(false);
     }
@@ -139,6 +129,7 @@ class Animate extends Base {
      */
     createItem(me, record, index) {
         let item     = me.ownerCreateItem(record, index),
+            owner    = me.owner,
             position = me.getItemPosition(record, index),
             style    = item.style || {};
 
@@ -147,10 +138,10 @@ class Animate extends Base {
         }
 
         Object.assign(style, {
-            height   : `${me.itemHeight}px`,
+            height   : `${owner.itemHeight}px`,
             position : 'absolute',
             transform: `translate(${position.x}px, ${position.y}px)`,
-            width    : `${me.itemWidth}px`
+            width    : `${owner.itemWidth}px`
         });
 
         item.style = style;
@@ -167,9 +158,10 @@ class Animate extends Base {
         let me     = this,
             column = index % me.columns,
             margin = me.itemMargin,
+            owner  = me.owner,
             row    = Math.floor(index / me.columns),
-            x      = column * (margin + me.itemWidth)  + margin,
-            y      = row    * (margin + me.itemHeight) + margin;
+            x      = column * (margin + owner.itemWidth)  + margin,
+            y      = row    * (margin + owner.itemHeight) + margin;
 
         return {x, y};
     }
@@ -186,7 +178,7 @@ class Animate extends Base {
         }
 
         let owner = this.owner,
-            key   = owner.store.keyProperty;
+            key   = owner.getKeyProperty();
 
         return map.indexOf(owner.getItemId(obj.record[key]));
     }
@@ -195,14 +187,18 @@ class Animate extends Base {
      *
      */
     onOwnerMounted() {
-        let me = this;
+        let me    = this,
+            owner = me.owner;
 
-        me.owner.getDomRect().then(rect => {
+        owner.getDomRect().then(rect => {
             Object.assign(me, {
-                columns  : Math.floor(rect.width / me.itemWidth),
+                columns  : Math.floor(rect.width / owner.itemWidth),
                 ownerRect: rect,
-                rows     : Math.floor(rect.height / me.itemHeight)
+                rows     : Math.floor(rect.height / owner.itemHeight)
             });
+
+            // if the store got loaded before this plugin is ready, create the items now
+            owner.store.getCount() > 0 && owner.createItems();
         });
     }
 
@@ -216,7 +212,7 @@ class Animate extends Base {
     onStoreFilter(data) {
         let me                  = this,
             owner               = me.owner,
-            key                 = owner.store.keyProperty,
+            key                 = owner.getKeyProperty(),
             hasAddedItems       = false,
             addedItems          = [],
             movedItems          = [],
@@ -326,19 +322,34 @@ class Animate extends Base {
      * @param {Neo.data.Store} data.scope
      */
     onStoreSort(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) {
+        let me = this;
+
+        if (Neo.list.Component && me.owner instanceof Neo.list.Component) {
+            me.sortComponentList(data);
+        } else {
+            me.sortBaseList(data);
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    sortBaseList(data) {
+        let me            = this,
+            hasChange     = false,
+            owner         = me.owner,
+            key           = owner.getKeyProperty(),
+            newVdomCn     = [],
+            previousKeys  = data.previousItems.map(e => e[key]),
+            vdom          = owner.vdom,
+            fromIndex;
+
+        if (vdom.cn.length > 0) {
             data.items.forEach((item, index) => {
-                itemId    = owner.getItemId(item[keyProperty]);
-                fromIndex = vdomMap.indexOf(itemId);
+                fromIndex = previousKeys.indexOf(item[key]);
 
                 newVdomCn.push(vdom.cn[fromIndex]);
 
@@ -360,6 +371,37 @@ class Animate extends Base {
         }
     }
 
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.items
+     * @param {Object[]} data.previousItems
+     * @param {Neo.data.Store} data.scope
+     */
+    sortComponentList(data) {
+        let me           = this,
+            owner        = me.owner,
+            key          = owner.getKeyProperty(),
+            previousKeys = data.previousItems.map(e => e[key]),
+            vdom         = owner.vdom,
+            fromIndex, item, position;
+
+        owner.sortItems(data);
+
+        previousKeys = owner.items.map(e => owner.getItemRecordId(e[key]));
+
+        if (vdom.cn.length > 0) {
+            data.items.forEach((record, index) => {
+                fromIndex = previousKeys.indexOf(record[key]);
+                item      = vdom.cn[fromIndex];
+                position  = me.getItemPosition(record, index);
+
+                item.style.transform = `translate(${position.x}px, ${position.y}px)`;
+            });
+
+            owner.vdom = vdom;
+        }
+    }
+
     /**
      *
      */