neo.mjs 7.1.0 → 7.3.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='7.1.0'
+         * @member {String} version='7.3.0'
          */
-        version: '7.1.0'
+        version: '7.3.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-10",
+      "datePublished": "2024-09-13",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/model/Example.mjs

@@ -0,0 +1,56 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Portal.model.Example
+ * @extends Neo.data.Model
+ */
+class Example extends Model {
+    static config = {
+        /**
+         * @member {String} className='Portal.model.Example'
+         * @protected
+         */
+        className: 'Portal.model.Example',
+        /**
+         * @member {Object[]} fields
+         * @protected
+         */
+        fields: [{
+            name: 'backgroundColor',
+            type: 'String'
+        }, {
+            name        : 'browsers',
+            type        : 'Array',
+            defaultValue: ['Chrome', 'Edge', 'Firefox', 'Safari']
+        }, {
+            name        : 'environments',
+            type        : 'Array',
+            defaultValue: ['Desktop']
+        }, {
+            name        : 'hidden',
+            type        : 'Boolean',
+            defaultValue: false
+        }, {
+            name: 'id',
+            type: 'Integer'
+        }, {
+            name: 'image',
+            type: 'String'
+        }, {
+            name: 'name',
+            type: 'String'
+        }, {
+            name        : 'sharedWorkers',
+            type        : 'Boolean',
+            defaultValue: false
+        }, {
+            name: 'sourceUrl',
+            type: 'String'
+        }, {
+            name: 'url',
+            type: 'String'
+        }]
+    }
+}
+
+export default Neo.setupClass(Example);

package/apps/portal/resources/data/examples_devmode.json

@@ -0,0 +1,114 @@
+[{
+    "id"           : 18,
+    "image"        : "devmode/sharedcovid.png",
+    "name"         : "Multi Window Covid App",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/sharedcovid",
+    "url"          : "apps/sharedcovid/index.html#mainview=table"
+}, {
+    "id"       : 17,
+    "image"    : "devmode/calendar-preview.png",
+    "name"     : "Calendar",
+    "sourceUrl": "src/calendar",
+    "url"      : "examples/calendar/basic/index.html"
+}, {
+    "id"       : 16,
+    "image"    : "devmode/helix.png",
+    "name"     : "component.Helix",
+    "sourceUrl": "examples/component/helix",
+    "url"      : "examples/component/helix/index.html"
+}, {
+    "id"       : 15,
+    "image"    : "devmode/coronaGallery.png",
+    "name"     : "COVID-19 Gallery",
+    "sourceUrl": "examples/component/coronaGallery",
+    "url"      : "examples/component/coronaGallery/index.html"
+}, {
+    "id"       : 14,
+    "image"    : "devmode/tabContainer.png",
+    "name"     : "tab.Container",
+    "sourceUrl": "examples/tab/container",
+    "url"      : "examples/tab/container/index.html"
+}, {
+    "id"       : 13,
+    "image"    : "devmode/model-component-example.png",
+    "name"     : "View Models Example",
+    "sourceUrl": "examples/model/advanced",
+    "url"      : "examples/model/advanced/index.html"
+}, {
+    "id"       : 12,
+    "image"    : "devmode/dragdrop.png",
+    "name"     : "Dialog drag&drop",
+    "sourceUrl": "examples/dialog",
+    "url"      : "examples/dialog/"
+}, {
+    "id"       : 11,
+    "image"    : "devmode/covidDashboard.png",
+    "name"     : "Covid Dashboard",
+    "sourceUrl": "apps/covid",
+    "url"      : "apps/covid/index.html"
+}, {
+    "id"       : 10,
+    "image"    : "devmode/coronaHelix.png",
+    "name"     : "COVID-19 Helix",
+    "sourceUrl": "examples/component/coronaHelix",
+    "url"      : "examples/component/coronaHelix/index.html"
+}, {
+    "id"       : 9,
+    "image"    : "devmode/gallery.png",
+    "name"     : "component.Gallery",
+    "sourceUrl": "examples/component/gallery",
+    "url"      : "examples/component/gallery/index.html"
+}, {
+    "id"       : 8,
+    "image"    : "devmode/tableFiltering.png",
+    "name"     : "Table Filtering",
+    "sourceUrl": "examples/tableFiltering",
+    "url"      : "examples/tableFiltering/"
+}, {
+    "id"       : 7,
+    "image"    : "devmode/dateSelector.png",
+    "name"     : "component.DateSelector",
+    "sourceUrl": "examples/component/dateSelector",
+    "url"      : "examples/component/dateSelector/index.html"
+}, {
+    "id"       : 6,
+    "image"    : "devmode/dateField.png",
+    "name"     : "form.field.Date",
+    "sourceUrl": "examples/form/field/date",
+    "url"      : "examples/form/field/date/index.html"
+}, {
+    "id"       : 5,
+    "image"    : "devmode/selectField.png",
+    "name"     : "form.field.ComboBox",
+    "sourceUrl": "examples/form/field/combobox",
+    "url"      : "examples/form/field/combobox/index.html"
+}, {
+    "id"       : 4,
+    "image"    : "devmode/siesta.png",
+    "name"     : "Siesta Unit Tests",
+    "sourceUrl": "test/siesta",
+    "url"      : "test/siesta/index.html"
+}, {
+    "hidden"       : true,
+    "id"           : 3,
+    "image"        : "devmode/multi_window_dd.png",
+    "name"         : "Multi Window Drag&Drop",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/shareddialog",
+    "url"          : "apps/shareddialog/index.html"
+}, {
+    "hidden"   : true,
+    "id"       : 2,
+    "image"    : "devmode/realworldApp.png",
+    "name"     : "RealWorld App",
+    "sourceUrl": "apps/realworld",
+    "url"      : "apps/realworld/index.html"
+}, {
+    "hidden"   : true,
+    "id"       : 1,
+    "image"    : "devmode/realworldApp2.png",
+    "name"     : "RealWorld App v2</br>(in progress)",
+    "sourceUrl": "apps/realworld2",
+    "url"      : "apps/realworld2/index.html#/gallery"
+}]

package/apps/portal/resources/data/examples_dist_dev.json

@@ -0,0 +1,108 @@
+[{
+    "id"           : 17,
+    "image"        : "devmode/sharedcovid.png",
+    "name"         : "Multi Window Covid App",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/sharedcovid",
+    "url"          : "dist/development/apps/sharedcovid/index.html#mainview=table"
+}, {
+    "id"       : 16,
+    "image"    : "devmode/calendar-preview.png",
+    "name"     : "Calendar",
+    "sourceUrl": "src/calendar",
+    "url"      : "dist/development/examples/calendar/basic/index.html"
+}, {
+    "id"       : 15,
+    "image"    : "devmode/helix.png",
+    "name"     : "component.Helix",
+    "sourceUrl": "examples/component/helix",
+    "url"      : "dist/development/examples/component/helix/index.html"
+}, {
+    "id"       : 14,
+    "image"    : "devmode/coronaGallery.png",
+    "name"     : "COVID-19 Gallery",
+    "sourceUrl": "examples/component/coronaGallery",
+    "url"      : "dist/development/examples/component/coronaGallery/index.html"
+}, {
+    "id"       : 13,
+    "image"    : "devmode/tabContainer.png",
+    "name"     : "tab.Container",
+    "sourceUrl": "examples/tab/container",
+    "url"      : "dist/development/examples/tab/container/index.html"
+}, {
+    "id"       : 12,
+    "image"    : "devmode/model-component-example.png",
+    "name"     : "View Models Example",
+    "sourceUrl": "examples/model/advanced",
+    "url"      : "dist/development/examples/model/advanced/index.html"
+}, {
+    "id"       : 11,
+    "image"    : "devmode/dragdrop.png",
+    "name"     : "Dialog drag&drop",
+    "sourceUrl": "examples/dialog",
+    "url"      : "dist/development/examples/dialog/"
+}, {
+    "id"       : 10,
+    "image"    : "devmode/covidDashboard.png",
+    "name"     : "Covid Dashboard",
+    "sourceUrl": "apps/covid",
+    "url"      : "dist/development/apps/covid/index.html#mainview=table"
+}, {
+    "id"       : 9,
+    "image"    : "devmode/coronaHelix.png",
+    "name"     : "COVID-19 Helix",
+    "sourceUrl": "examples/component/coronaHelix",
+    "url"      : "dist/development/examples/component/coronaHelix/index.html"
+}, {
+    "id"       : 8,
+    "image"    : "devmode/gallery.png",
+    "name"     : "component.Gallery",
+    "sourceUrl": "examples/component/gallery",
+    "url"      : "dist/development/examples/component/gallery/index.html"
+}, {
+    "id"       : 7,
+    "image"    : "devmode/tableFiltering.png",
+    "name"     : "Table Filtering",
+    "sourceUrl": "examples/tableFiltering",
+    "url"      : "dist/development/examples/tableFiltering/"
+}, {
+    "id"       : 6,
+    "image"    : "devmode/dateSelector.png",
+    "name"     : "component.DateSelector",
+    "sourceUrl": "examples/component/dateSelector",
+    "url"      : "dist/development/examples/component/dateSelector/index.html"
+}, {
+    "id"       : 5,
+    "image"    : "devmode/dateField.png",
+    "name"     : "form.field.Date",
+    "sourceUrl": "examples/form/field/date",
+    "url"      : "dist/development/examples/form/field/date/index.html"
+}, {
+    "id"       : 4,
+    "image"    : "devmode/selectField.png",
+    "name"     : "form.field.ComboBox",
+    "sourceUrl": "examples/form/field/combobox",
+    "url"      : "dist/development/examples/form/field/combobox/index.html"
+}, {
+    "hidden"       : true,
+    "id"           : 3,
+    "image"        : "devmode/multi_window_dd.png",
+    "name"         : "Multi Window Drag&Drop",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/shareddialog",
+    "url"          : "dist/development/apps/shareddialog/index.html"
+}, {
+    "hidden"   : true,
+    "id"       : 2,
+    "image"    : "devmode/realworldApp.png",
+    "name"     : "RealWorld App",
+    "sourceUrl": "apps/realworld",
+    "url"      : "dist/development/apps/realworld/index.html"
+}, {
+    "hidden"   : true,
+    "id"       : 1,
+    "image"    : "devmode/realworldApp2.png",
+    "name"     : "RealWorld App v2</br>(in progress)",
+    "sourceUrl": "apps/realworld2",
+    "url"      : "dist/development/apps/realworld2/index.html#/gallery"
+}]

package/apps/portal/resources/data/examples_dist_prod.json

@@ -0,0 +1,108 @@
+[{
+    "id"           : 17,
+    "image"        : "devmode/sharedcovid.png",
+    "name"         : "Multi Window Covid App",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/sharedcovid",
+    "url"          : "dist/production/apps/sharedcovid/index.html#mainview=table"
+}, {
+    "id"       : 16,
+    "image"    : "devmode/calendar-preview.png",
+    "name"     : "Calendar",
+    "sourceUrl": "src/calendar",
+    "url"      : "dist/production/examples/calendar/basic/index.html"
+}, {
+    "id"       : 15,
+    "image"    : "devmode/helix.png",
+    "name"     : "component.Helix",
+    "sourceUrl": "examples/component/helix",
+    "url"      : "dist/production/examples/component/helix/index.html"
+}, {
+    "id"       : 14,
+    "image"    : "devmode/coronaGallery.png",
+    "name"     : "COVID-19 Gallery",
+    "sourceUrl": "examples/component/coronaGallery",
+    "url"      : "dist/production/examples/component/coronaGallery/index.html"
+}, {
+    "id"       : 13,
+    "image"    : "devmode/tabContainer.png",
+    "name"     : "tab.Container",
+    "sourceUrl": "examples/tab/container",
+    "url"      : "dist/production/examples/tab/container/index.html"
+}, {
+    "id"       : 12,
+    "image"    : "devmode/model-component-example.png",
+    "name"     : "View Models Example",
+    "sourceUrl": "examples/model/advanced",
+    "url"      : "dist/production/examples/model/advanced/index.html"
+}, {
+    "id"       : 11,
+    "image"    : "devmode/dragdrop.png",
+    "name"     : "Dialog drag&drop",
+    "sourceUrl": "examples/dialog",
+    "url"      : "dist/production/examples/dialog/"
+}, {
+    "id"       : 10,
+    "image"    : "devmode/covidDashboard.png",
+    "name"     : "Covid Dashboard",
+    "sourceUrl": "apps/covid",
+    "url"      : "dist/production/apps/covid/index.html#mainview=table"
+}, {
+    "id"       : 9,
+    "image"    : "devmode/coronaHelix.png",
+    "name"     : "COVID-19 Helix",
+    "sourceUrl": "examples/component/coronaHelix",
+    "url"      : "dist/production/examples/component/coronaHelix/index.html"
+}, {
+    "id"       : 8,
+    "image"    : "devmode/gallery.png",
+    "name"     : "component.Gallery",
+    "sourceUrl": "examples/component/gallery",
+    "url"      : "dist/production/examples/component/gallery/index.html"
+}, {
+    "id"       : 7,
+    "image"    : "devmode/tableFiltering.png",
+    "name"     : "Table Filtering",
+    "sourceUrl": "examples/tableFiltering",
+    "url"      : "dist/production/examples/tableFiltering/"
+}, {
+    "id"       : 6,
+    "image"    : "devmode/dateSelector.png",
+    "name"     : "component.DateSelector",
+    "sourceUrl": "examples/component/dateSelector",
+    "url"      : "dist/production/examples/component/dateSelector/index.html"
+}, {
+    "id"       : 5,
+    "image"    : "devmode/dateField.png",
+    "name"     : "form.field.Date",
+    "sourceUrl": "examples/form/field/date",
+    "url"      : "dist/production/examples/form/field/date/index.html"
+}, {
+    "id"       : 4,
+    "image"    : "devmode/selectField.png",
+    "name"     : "form.field.ComboBox",
+    "sourceUrl": "examples/form/field/combobox",
+    "url"      : "dist/production/examples/form/field/combobox/index.html"
+}, {
+    "hidden"       : true,
+    "id"           : 3,
+    "image"        : "devmode/multi_window_dd.png",
+    "name"         : "Multi Window Drag&Drop",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/shareddialog",
+    "url"          : "dist/production/apps/shareddialog/index.html"
+}, {
+    "hidden"   : true,
+    "id"       : 2,
+    "image"    : "devmode/realworldApp.png",
+    "name"     : "RealWorld App",
+    "sourceUrl": "apps/realworld",
+    "url"      : "dist/production/apps/realworld/index.html"
+}, {
+    "hidden"   : true,
+    "id"       : 1,
+    "image"    : "devmode/realworldApp2.png",
+    "name"     : "RealWorld App v2</br>(in progress)",
+    "sourceUrl": "apps/realworld2",
+    "url"      : "dist/production/apps/realworld2/index.html#/gallery"
+}]

package/apps/portal/store/Examples.mjs

@@ -0,0 +1,26 @@
+import Example from '../model/Example.mjs';
+import Store   from '../../../src/data/Store.mjs';
+
+/**
+ * @class Portal.store.Examples
+ * @extends Neo.data.Store
+ */
+class Examples extends Store {
+    static config = {
+        /**
+         * @member {String} className='Portal.store.Examples'
+         * @protected
+         */
+        className: 'Portal.store.Examples',
+        /**
+         * @member {String} keyProperty='id'
+         */
+        keyProperty: 'id',
+        /**
+         * @member {Neo.data.Model} model=Example
+         */
+        model: Example
+    }
+}
+
+export default Neo.setupClass(Examples);

package/apps/portal/view/HeaderToolbar.mjs

@@ -38,6 +38,9 @@ class HeaderToolbar extends Base {
             text     : 'Blog',
             reference: 'blog-header-button',
             route    : '/blog'
+        }, {
+            text : 'Examples',
+            route: '/examples'
         }, {
             text : 'Services',
             route: '/services'

package/apps/portal/view/Viewport.mjs

@@ -49,9 +49,10 @@ class Viewport extends BaseViewport {
                 {module: () => import('./home/MainContainer.mjs')},
                 {module: () => import('./learn/MainContainer.mjs')},
                 {module: () => import('./blog/Container.mjs')},
-                {module: () => import('../../../docs/app/view/MainContainer.mjs')},
                 {module: () => import('./services/Component.mjs')},
-                {module: () => import('./about/Container.mjs')}
+                {module: () => import('./examples/TabContainer.mjs')},
+                {module: () => import('./about/Container.mjs')},
+                {module: () => import('../../../docs/app/view/MainContainer.mjs')}
             ]
         }],
         /**

package/apps/portal/view/ViewportController.mjs

@@ -43,13 +43,15 @@ class ViewportController extends Controller {
          * @member {Object} routes
          */
         routes: {
-            '/about-us'      : 'onAboutUsRoute',
-            '/blog'          : 'onBlogRoute',
-            '/docs'          : 'onDocsRoute',
-            '/home'          : 'onHomeRoute',
-            '/learn'         : 'onLearnRoute',
-            '/learn/{itemId}': 'onLearnRoute',
-            '/services'      : 'onServicesRoute',
+            '/about-us'         : 'onAboutUsRoute',
+            '/blog'             : 'onBlogRoute',
+            '/docs'             : 'onDocsRoute',
+            '/examples'         : 'onExamplesRoute',
+            '/examples/{itemId}': 'onExamplesRoute',
+            '/home'             : 'onHomeRoute',
+            '/learn'            : 'onLearnRoute',
+            '/learn/{itemId}'   : 'onLearnRoute',
+            '/services'         : 'onServicesRoute'
         },
         /**
          * Values are: large, medium, small, xSmall
@@ -230,7 +232,16 @@ class ViewportController extends Controller {
      * @param {Object} oldValue
      */
     onDocsRoute(params, value, oldValue) {
-        this.setMainContentIndex(3)
+        this.setMainContentIndex(6)
+    }
+
+    /**
+     * @param {Object} params
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    onExamplesRoute(params, value, oldValue) {
+        this.setMainContentIndex(4)
     }
 
     /**
@@ -257,7 +268,7 @@ class ViewportController extends Controller {
      * @param {Object} oldValue
      */
     onServicesRoute(params, value, oldValue) {
-        this.setMainContentIndex(4)
+        this.setMainContentIndex(3)
     }
 
     /**
@@ -272,12 +283,19 @@ class ViewportController extends Controller {
 
         if (index !== activeIndex) {
             me.activeIndex = index;
-            me.#transitionId++;
-
-            transitionId = me.#transitionId;
 
-            // skip the initial layout-switch, since we do not need a transition
-            if (mainContentLayout === 'mixed' && Neo.isNumber(activeIndex)) {
+            if (
+                mainContentLayout === 'mixed' &&
+                // skip the initial layout-switch, since we do not need a transition
+                Neo.isNumber(activeIndex) &&
+                // also skip the layout switch in case the index >= 6, since a cube only has 6 faces
+                index < 6 &&
+                // also skip the layout switch in case we navigate back from a non-cube item
+                activeIndex < 6
+            ) {
+                me.#transitionId++;
+
+                transitionId = me.#transitionId;
                 updateLayout = false;
 
                 // enable "fast clicking" on main nav items => do not replace a cube layout with a new instance of cube

package/apps/portal/view/about/Container.mjs

@@ -58,9 +58,9 @@ class Container extends Base {
             teamRole       : 'Training'
         }],
         /**
-         * @member {Object} layout={ntype:'vbox',align:'start'}
+         * @member {Object} layout={ntype:'vbox',align:'center'}
          */
-        layout: {ntype: 'vbox', align: 'start'}
+        layout: {ntype: 'vbox', align: 'center'}
     }
 }
 

package/apps/portal/view/blog/List.mjs

@@ -28,9 +28,9 @@ class List extends BaseList {
         /**
          * Specify the amount of delayed observe() calls, in case the IntersectionObserver does not find targets.
          * This can happen when moving the component inside the DOM (e.g. cube layout)
-         * @member {Number} intersectionObserverReconnects=5
+         * @member {Number} intersectionObserverReconnects=10
          */
-        intersectionObserverReconnects: 5,
+        intersectionObserverReconnects: 10,
         /**
          * Specify how many blog item images to preload when intersecting
          * @member {Number} preloadImages=5
@@ -249,7 +249,7 @@ class List extends BaseList {
             len  = me.intersectionObserverReconnects,
             data;
 
-        await me.timeout(50);
+        await me.timeout(150);
 
         data = await Neo.main.addon.IntersectionObserver.register({
             ...opts,