neo.mjs 3.2.0 → 3.2.4

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.0",
+    "version": "3.2.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -34,14 +34,14 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.15.4",
+        "@fortawesome/fontawesome-free": "^6.0.0",
         "@material/mwc-button": "^0.25.3",
         "@material/mwc-textfield": "^0.25.3",
         "autoprefixer": "^10.4.2",
         "chalk": "^5.0.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.0.0",
-        "cssnano": "^5.0.16",
+        "cssnano": "^5.0.17",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.0.0",
         "highlightjs-line-numbers.js": "^2.8.0",
@@ -49,8 +49,8 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.6",
-        "sass": "^1.49.7",
-        "webpack": "^5.68.0",
+        "sass": "^1.49.8",
+        "webpack": "^5.69.1",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "4.7.4",
         "webpack-hook-plugin": "^1.0.7",

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/apps/covid/country/Gallery.scss

@@ -16,6 +16,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity            : .95;
             transform          : translateZ(180px) scale(1.5);
             -webkit-box-reflect: unset!important;
         }
@@ -66,4 +67,4 @@
     .image-wrap.neo-selected img {
         transform: inherit;
     }
-}
+}

package/resources/scss/src/component/Gallery.scss

@@ -62,6 +62,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity  : .95;
             transform: translate3d(0, 0, 180px) scale(1.5);
         }
     }
@@ -69,4 +70,4 @@
     .image-wrap.neo-selected img {
         -webkit-box-reflect: unset !important;
     }
-}
+}

package/resources/scss/src/examples/component/coronaGallery/CountryGallery.scss

@@ -42,6 +42,7 @@
 
     .neo-selected {
         .neo-item-wrapper {
+            opacity            : .95;
             transform          : translateZ(180px) scale(1.5);
             -webkit-box-reflect: unset!important;
         }
@@ -87,4 +88,4 @@
     .image-wrap.neo-selected img {
         transform: inherit;
     }
-}
+}

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

@@ -41,11 +41,11 @@ class Circle extends Component {
         collapsed: true,
         /**
          * Additional used keys for the selection model
-         * @member {Object} keys
+         * @member {Object} keys={}
          */
         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,
         /**
@@ -73,21 +73,25 @@ class Circle extends Component {
         /**
          * @member {Number} rotateX_=0
          */
-        rotateX_:0,
+        rotateX_: 0,
         /**
          * @member {Number} rotateY_=0
          */
-        rotateY_:0,
+        rotateY_: 0,
         /**
          * @member {Number} rotateZ_=0
          */
-        rotateZ_:0,
+        rotateZ_: 0,
         /**
-         * @member {Neo.selection.Model} selectionModel_=null
+         * @member {Number} rotationIndex_=0
+         */
+        rotationIndex_: 0,
+        /**
+         * @member {Neo.selection.Model|null} selectionModel_=null
          */
         selectionModel_: null,
         /**
-         * @member {Neo.collection.Base} store_=null
+         * @member {Neo.collection.Base|null} store_=null
          */
         store_: null,
         /**
@@ -96,9 +100,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
          */
@@ -283,6 +287,18 @@ class Circle extends Component {
         oldValue && this.rendered && this.rotate();
     }
 
+    /**
+     * Triggered after the rotationIndex config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetRotationIndex(value, oldValue) {
+        if (Neo.isNumber(oldValue)) {
+            console.log('afterSetRotationIndex', value);
+        }
+    }
+
     /**
      * Triggered after the selectionModel config got changed
      * @param {Neo.selection.Model} value
@@ -408,6 +424,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 +435,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 +456,7 @@ class Circle extends Component {
     }
 
     /**
-     *
+     * @param {Object} data
      */
     expand(data) {
         let me = this;
@@ -452,7 +469,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param data
+     * @param {Object} data
      */
     expandItem(data) {
         let me   = this,
@@ -526,7 +543,7 @@ class Circle extends Component {
      * @returns {String|Number} itemId
      */
     getItemRecordId(vnodeId) {
-        let itemId   = vnodeId.split('__')[1],
+        let itemId   = vnodeId.split('__').pop(),
             model    = this.store.model,
             keyField = model?.getField(model.keyProperty);
 
@@ -586,10 +603,7 @@ class Circle extends Component {
 
         let me = this;
 
-        if (me.selectionModel) {
-            me.selectionModel.register(me);
-        }
-
+        me.selectionModel?.register(me);
         me.loadData();
     }
 
@@ -604,18 +618,25 @@ class Circle extends Component {
      * @param {Object} data
      */
     onMouseWheel(data) {
-        let me      = this,
-            deltaY  = data.deltaY,
-            rotateZ = me.rotateZ;
+        let me        = this,
+            deltaY    = data.deltaY,
+            itemAngle = 360 / me.maxItems,
+            maxAngle  = Math.max(0, (me.store.getCount() - me.maxItems) * itemAngle),
+            rotateZ   = me.rotateZ;
 
-        if (deltaY >  1 || deltaY < -1) {rotateZ += deltaY;}
+        if (deltaY >  1 || deltaY < -1) {
+            rotateZ += deltaY;
+        }
 
         if (rotateZ < 0) {
             rotateZ = 0;
+        } else if (rotateZ > maxAngle) {
+            rotateZ = maxAngle;
         }
 
-        if (!(me.rotateZ === 0 && rotateZ === 0)) {
-            me.rotateZ = rotateZ;
+        if (!(me.rotateZ === 0 && rotateZ === 0) && !(me.rotateZ === maxAngle && rotateZ === maxAngle)) {
+            me.rotateZ       = rotateZ;
+            me.rotationIndex = Math.floor(rotateZ / itemAngle);
 
             me.rotate();
         }
@@ -629,9 +650,9 @@ class Circle extends Component {
             vdom           = me.vdom,
             circleCenterEl = vdom.cn[0],
             transform = [
-                'rotateX(' + me.rotateX + 'deg)',
-                'rotateY(' + me.rotateY + 'deg)',
-                'rotateZ(' + me.rotateZ + 'deg)'
+                `rotateX(${me.rotateX}deg)`,
+                `rotateY(${me.rotateY}deg)`,
+                `rotateZ(${me.rotateZ}deg)`
             ].join(' ');
 
         if (me.circleCenterHasTransitionCls) {