npm - neo.mjs - Versions diffs - 6.8.3 → 6.9.0 - Mend

neo.mjs 6.8.3 → 6.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/apps/ServiceWorker.mjs +2 -2
package/apps/learnneo/view/home/MainContainer.mjs +4 -3
package/apps/learnneo/view/home/MainContainerController.mjs +24 -2
package/apps/route/app.mjs +6 -0
package/apps/route/index.html +11 -0
package/apps/route/neo-config.json +6 -0
package/apps/route/view/ButtonBar.mjs +57 -0
package/apps/route/view/CenterContainer.mjs +37 -0
package/apps/route/view/FooterContainer.mjs +47 -0
package/apps/route/view/HeaderContainer.mjs +47 -0
package/apps/route/view/MainView.mjs +66 -0
package/apps/route/view/MainViewController.mjs +210 -0
package/apps/route/view/MetaContainer.mjs +52 -0
package/apps/route/view/Viewport.mjs +15 -0
package/apps/route/view/center/CardAdministration.mjs +36 -0
package/apps/route/view/center/CardAdministrationDenied.mjs +26 -0
package/apps/route/view/center/CardContact.mjs +29 -0
package/apps/route/view/center/CardHome.mjs +26 -0
package/apps/route/view/center/CardSection1.mjs +26 -0
package/apps/route/view/center/CardSection2.mjs +27 -0
package/examples/ConfigurationViewport.mjs +1 -1
package/examples/ServiceWorker.mjs +2 -2
package/examples/form/field/select/MainContainer.mjs +1 -2
package/examples/table/container/MainContainer.mjs +4 -2
package/examples/table/container/MainModel.mjs +3 -0
package/examples/table/container/MainStore.mjs +10 -10
package/examples/toolbar/paging/view/MainContainer.mjs +31 -3
package/package.json +1 -1
package/resources/data/learnneo/content.json +9 -9
package/resources/data/learnneo/pages/whyneo.md +76 -0
package/resources/scss/src/apps/route/CenterContainer.scss +29 -0
package/resources/scss/src/apps/route/HeaderContainer.scss +122 -0
package/resources/scss/src/apps/route/MainView.scss +3 -0
package/resources/scss/src/apps/route/MetaContainer.scss +44 -0
package/resources/scss/src/apps/route/_all.scss +1 -0
package/src/DefaultConfig.mjs +2 -2
package/src/Neo.mjs +15 -14
package/src/button/Base.mjs +2 -2
package/src/component/Base.mjs +41 -50
package/src/container/Base.mjs +59 -2
package/src/controller/Base.mjs +84 -4
package/src/controller/Component.mjs +22 -7
package/src/core/Observable.mjs +50 -9
package/src/form/field/Range.mjs +8 -0
package/src/main/DomEvents.mjs +9 -3
package/src/manager/DomEvent.mjs +3 -0
package/src/menu/List.mjs +1 -1
package/src/table/View.mjs +78 -53
package/src/toolbar/Paging.mjs +68 -76
package/src/tooltip/Base.mjs +111 -11

package/apps/ServiceWorker.mjs CHANGED Viewed

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

package/apps/learnneo/view/home/MainContainer.mjs CHANGED Viewed

@@ -22,9 +22,10 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
-            layout: 'fit',
-            width : 300,
+            module  : Container,
+            layout  : 'fit',
+            minWidth: 350,
+            width   : 350,
             items: [{
                 module   : ContentTreeList,

package/apps/learnneo/view/home/MainContainerController.mjs CHANGED Viewed

@@ -16,10 +16,32 @@ class MainContainerController extends Component {
     /**
      * @param {Object} record
      */
-    onContentListLeafClick(record) {
-        let contentContainer = this.getReference('content-container');
+    async onContentListLeafClick(record) {
+        const
+            contentContainer = this.getReference('content-container'),
+            path             = '../../../resources/data/learnneo/pages';
         console.log('onContentListLeafClick', {contentContainer, record});
+        console.log('onContentListLeafClick', {contentContainer, record});
+        if (record.isLeaf && record.path) {
+            const data    = await fetch(`${path}/${record.path}`);
+            const content = await data.text();
+            contentContainer.removeAll();
+            await this.timeout(50);
+            contentContainer.add({
+                ntype: 'component',
+                html : content
+            });
+            await this.timeout(50);
+            contentContainer.layout.activeIndex = 0;
+        }
     }
 }

package/apps/route/app.mjs ADDED Viewed

@@ -0,0 +1,6 @@
+import Viewport from './view/Viewport.mjs';
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Route'
+});

package/apps/route/index.html ADDED Viewed

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

package/apps/route/neo-config.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+    "appPath": "apps/route/app.mjs",
+    "basePath": "../../",
+    "environment": "development",
+    "mainPath": "./Main.mjs"
+}

package/apps/route/view/ButtonBar.mjs ADDED Viewed

@@ -0,0 +1,57 @@
+import Base from '../../../src/container/Base.mjs';
+import Button from '../../../src/button/Base.mjs';
+/**
+ * @class Route.view.ButtonBar
+ * @extends Neo.container.Base
+ */
+class ButtonBar extends Base {
+    static config = {
+        /**
+         * @member {String} className='Route.view.ButtonBar'
+         * @protected
+         */
+        className: 'Route.view.ButtonBar',
+        baseCls: ['route', 'neo-container'],
+        cls: ['route_buttonbar', 'centerPanel'],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Button,
+            flex: 'none',
+            handler: 'onSwitchButtonCardHome',
+            cls: ['route_button', 'neo-button'],
+            iconCls: 'fa-solid fa-home',
+            reference: 'home_button',
+            text: 'Home',
+        }, {
+            module: Button,
+            flex: 'none',
+            handler: 'onSwitchButtonCardSection1',
+            cls: ['route_button', 'neo-button'],
+            iconCls: 'fa-solid fa-globe',
+            text: 'Section 1'
+        }, {
+            module: Button,
+            flex: 'none',
+            handler: 'onSwitchButtonCardSection2',
+            cls: ['route_button', 'neo-button'],
+            iconCls: 'fa-solid fa-globe',
+            text: 'Section 2'
+        },{
+            module: Button,
+            flex: 'none',
+            handler: 'onSwitchButtonAdministration',
+            cls: ['route_button', 'neo-button'],
+            iconCls: 'fa-solid fa-building-user',
+            text: 'Administration',
+        }],
+        layout: { ntype: 'flexbox', wrap: 'wrap' },
+    }
+}
+Neo.applyClassConfig(ButtonBar);
+export default ButtonBar;

package/apps/route/view/CenterContainer.mjs ADDED Viewed

@@ -0,0 +1,37 @@
+import Base from '../../../src/container/Base.mjs';
+/**
+ * @class Route.view.CenterContainer
+ * @extends Neo.container.Base
+ */
+class CenterContainer extends Base {
+    static config = {
+        /**
+         * @member {String} className='Route.view.CenterContainer'
+         * @protected
+         */
+        className: 'Route.view.CenterContainer',
+        baseCls: ['route_center', 'neo-container'],
+        /**
+         * @member {Object[]} items
+         */
+        items: [
+            {module: () => import('./center/CardContact.mjs')},
+            {module: () => import('./center/CardAdministration.mjs')},
+            {module: () => import('./center/CardSection1.mjs')},
+            {module: () => import('./center/CardSection2.mjs')},
+            {module: () => import('./center/CardHome.mjs')},
+            {module: () => import('./center/CardAdministrationDenied.mjs')},
+        ],
+        /**
+         * @member {Object} layout={ntype: 'vbox', align: 'stretch'}
+         */
+        layout: {ntype: 'card', align: 'stretch', activeIndex: 4},
+        }
+}
+Neo.applyClassConfig(CenterContainer);
+export default CenterContainer;

package/apps/route/view/FooterContainer.mjs ADDED Viewed

@@ -0,0 +1,47 @@
+import Container from '../../../src/container/Base.mjs';
+import Button from '../../../src/button/Base.mjs';
+/**
+ * @class Route.view.FooterContainer
+ * @extends Neo.container.Base
+ */
+class FooterContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.FooterContainer'
+         * @protected
+         */
+        className: 'Route.view.FooterContainer',
+        baseCls: ['route_footer', 'neo-container'],
+        height: 55,
+        /**
+         * @member {Object[]} items
+         */
+        items: [
+            {
+                module: Container,
+                reference: 'footer-container',
+                cls: ['centerPanel'],
+                items: [
+                    {
+                        module: Button,
+                        flex: 'none',
+                        handler: 'onSwitchButtonCardContact',
+                        cls: ['route_button', 'neo-button'],
+                        text: 'Contact'
+                    }
+                ],
+                layout: { ntype: 'hbox', align: 'stretch'  },
+            }
+        ],
+    }
+}
+Neo.applyClassConfig(FooterContainer);
+export default FooterContainer;

package/apps/route/view/HeaderContainer.mjs ADDED Viewed

@@ -0,0 +1,47 @@
+import Container from '../../../src/container/Base.mjs';
+import Label from '../../../src/component/Label.mjs';
+import Button from '../../../src/button/Base.mjs';
+import Component from '../../../src/component/Base.mjs';
+/**
+ * @class Route.view.HeaderContainer
+ * @extends Neo.container.Base
+ */
+class HeaderContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.HeaderContainer'
+         * @protected
+         */
+        className: 'Route.view.HeaderContainer',
+        baseCls: ['route', 'neo-container', 'route_header'],
+        height: 242,
+        /**
+         * @member {Object[]} items
+         */
+        items: [
+            {
+                module: Component,
+                reference: 'logo',
+                width: 140,
+                height: 140,
+                cls: ['center'],
+                vdom: {
+                    tag: 'img',
+                    src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/logo_rounded.svg'
+                }
+            },
+            {
+                module: Label,
+                text: 'neo.mjs routes showcase',
+                cls: ['headline-caption']
+            },
+        ],
+        layout: { ntype: 'vbox', align: 'stretch' },
+    }
+}
+Neo.applyClassConfig(HeaderContainer);
+export default HeaderContainer;

package/apps/route/view/MainView.mjs ADDED Viewed

@@ -0,0 +1,66 @@
+import MainViewController from './MainViewController.mjs';
+import HeaderContainer from './HeaderContainer.mjs';
+import FooterContainer from './FooterContainer.mjs';
+import CenterContainer from './CenterContainer.mjs';
+import ButtonBar from './ButtonBar.mjs';
+import Panel from '../../../src/container/Panel.mjs';
+import MetaContainer from './MetaContainer.mjs';
+/**
+ * @class Route.view.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Panel {
+    static config = {
+        /**
+         * @member {String} className='Route.view.MainContainer'
+         * @protected
+         */
+        className: 'Route.view.MainView',
+        baseCls: ['route'],
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        //        autoMount: true,
+        /**
+         * @member {Neo.controller.Component} controller=MainViewController
+         */
+        controller: MainViewController,
+        /**
+         * @member {headers[]} items
+         */
+        headers: [
+            {
+                module: HeaderContainer,
+                dock: 'top'
+            },
+            {
+                module: ButtonBar,
+                dock: 'top',
+                reference: 'buttonbar',
+            },
+            {
+                module: FooterContainer,
+                dock: 'bottom'
+            },
+            {
+                module: MetaContainer,
+                dock: 'bottom',
+                reference: 'metabar',
+            }
+        ],
+        items: [
+            {
+                module: CenterContainer,
+                reference: 'center-container'
+            }
+        ],
+    }
+}
+Neo.applyClassConfig(MainContainer);
+export default MainContainer;

package/apps/route/view/MainViewController.mjs ADDED Viewed

@@ -0,0 +1,210 @@
+import Component from '../../../src/controller/Component.mjs';
+/**
+ * @class Route.view.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends Component {
+   static config = {
+      /**
+       * @member {String} className='Route.view.MainContainerController'
+       * @protected
+       */
+      className: 'Route.view.MainContainerController',
+      routes: {
+         '/home': 'handleHomeRoute',
+         '/section1': 'handleSection1Route',
+         '/section2': 'handleSection2Route',
+         '/contact': 'handleContactRoute',
+         '/users/{userId}': { handler: 'handleUserRoute', preHandler: 'doPrehandling' },
+         // '/users/{userId}' : {handler: 'handleUserRoute', preHandler: 'doPrehandling'}, //example
+         // '/users/{userId}/posts/{postId}' : {handler:'handleUserPostsRoute', preHandler: 'doPrehandlingFalse'}, //example
+         // default: 'doDefaultHandling' //optional - example
+      },
+      //Demo data
+      data: {
+         users: [{ id: 1, name: 'Joe Doe' }, { id: 2, name: 'Max Mustermann' }],
+         activeUser: 0
+      }
+   }
+   onConstructed() {
+      super.onConstructed();
+   }
+   /**
+    * Card sort order
+    * 0 - Contact
+    * 1 - Administration
+    * 2 - Section 1
+    * 3 - Section 2
+    * 4 - Home
+    */
+   doPrehandling(value, oldValue, params = null) {
+      const userId = parseInt(params);
+      if (userId > 0 && userId === this.data.activeUser) {
+         return true;
+      }
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 5;
+      return false;
+   }
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardContact(data) {
+      Neo.Main.redirectTo({ url: '#/contact' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+   /**
+       * @param {Object} data
+       */
+   onSwitchButtonAdministration(data) {
+      Neo.Main.redirectTo({ url: `#/users/${this.data.activeUser}` });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardSection1(data) {
+      Neo.Main.redirectTo({ url: '#/section1' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardSection2(data) {
+      Neo.Main.redirectTo({ url: '#/section2' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonCardHome(data) {
+      Neo.Main.redirectTo({ url: '#/home' });
+      this.#removeFromButtonSelection();
+      this.#addButtonSelection(data);
+   }
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonMetaUser1(data) {
+      const currentUser = this.data.activeUser;
+      this.data.activeUser = 1;
+      this.#removeMetaButtonSelection();
+      this.#setUsername();
+      data.component?.addCls('route_meta_button_grant_selected');
+   }
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonMetaUser2(data) {
+      const currentUser = this.data.activeUser;
+      this.data.activeUser = 2;
+      this.#removeMetaButtonSelection();
+      this.#setUsername();
+      data.component?.addCls('route_meta_button_grant_selected');
+   }
+   /**
+   * @param {Object} data
+   */
+   onSwitchButtonMetaReset(data) {
+      const currentUser = this.data.activeUser;
+      this.data.activeUser = 0;
+      this.#setUsername();
+      this.#removeMetaButtonSelection();
+   }
+   handleHomeRoute(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 4;
+   }
+   handleSection1Route(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 2;
+   }
+   handleSection2Route(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 3;
+   }
+   handleContactRoute(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 0;
+   }
+   handleUserRoute(value, oldValue, params = null) {
+      const centerContainer = this.getReference('center-container');
+      centerContainer.layout.activeIndex = 1
+   }
+   #removeFromButtonSelection() {
+      const buttonbar = this.getReference('buttonbar');
+      buttonbar.items.forEach(element => {
+         element.removeCls('route_button_selected');
+      });
+      const footer = this.getReference('footer-container');
+      footer.items.forEach(element => {
+         element.removeCls('route_button_selected');
+      });
+   }
+   #addButtonSelection(data) {
+      data.component?.addCls('route_button_selected');
+   }
+   #removeMetaButtonSelection(user) {
+      const buttonbar = this.getReference('metabar');
+      buttonbar.items.forEach(element => {
+         element.removeCls('route_meta_button_grant_selected');
+      });
+      this.#removeFromButtonSelection();
+      const data = {
+         component: this.getReference('home_button')
+      }
+      this.#addButtonSelection(data);
+      Neo.Main.redirectTo({ url: '#/home' });
+   }
+   #setUsername() {
+      const user = this.data.users.find(item => { return item.id === this.data.activeUser });
+      const centerContainer = this.getReference('center-container');
+      const adminPage = centerContainer.items[1];
+      adminPage.username = user ? user.name : '';
+   }
+}
+Neo.applyClassConfig(MainContainerController);
+export default MainContainerController;

package/apps/route/view/MetaContainer.mjs ADDED Viewed

@@ -0,0 +1,52 @@
+import Container from '../../../src/container/Base.mjs';
+import Button from '../../../src/button/Base.mjs';
+/**
+ * @class Route.view.MetaContainer
+ * @extends Neo.container.Base
+ */
+class MetaContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.MetaContainer'
+         * @protected
+         */
+        className: 'Route.view.MetaContainer',
+        baseCls: ['route_meta', 'route_meta_color','route_meta_center', 'neo-container'],
+        height: 55,
+        /**
+         * @member {Object[]} items
+         */
+        items: [
+            {
+                module: Button,
+                flex: 'none',
+                handler: 'onSwitchButtonMetaUser1',
+                cls: ['route_meta_button_grant', 'neo-button'],
+                text: 'User 1'
+            },
+            {
+                module: Button,
+                flex: 'none',
+               handler: 'onSwitchButtonMetaUser2',
+                cls: ['route_meta_button_grant', 'neo-button'],
+                text: 'User 2'
+            },
+            {
+                module: Button,
+                flex: 'none',
+                handler: 'onSwitchButtonMetaReset',
+                cls: ['route_meta_button_remove', 'neo-button'],
+                text: 'Reset User'
+            }
+        ],
+        layout: { ntype: 'hbox', align: 'stretch'  },
+    }
+}
+Neo.applyClassConfig(MetaContainer);
+export default MetaContainer;

package/apps/route/view/Viewport.mjs ADDED Viewed

@@ -0,0 +1,15 @@
+import Base from '../../../src/container/Viewport.mjs';
+import MainView from './MainView.mjs';
+class Viewport extends Base {
+    static config = {
+        className: 'Route.view.Viewport',
+        autoMount: true,
+        layout: { ntype: 'fit' },
+        items: [{ module: MainView }]
+    }
+}
+Neo.applyClassConfig(Viewport);
+export default Viewport;

package/apps/route/view/center/CardAdministration.mjs ADDED Viewed

@@ -0,0 +1,36 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+/**
+ * @class Route.view.center.CardAdministration
+ * @extends Neo.container.Base
+ */
+class CardAdministration extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardAdministration'
+         * @protected
+         */
+        className: 'Route.view.center.CardAdministration',
+        baseCls: ['route_card_simple_page', 'neo-container'],
+        username_: '',
+        /**
+         * @member {Object[]} items
+         */
+        vdom: {
+            tag: 'h1',
+            innerHTML: 'Access Granted.'
+        }
+    }
+    afterSetUsername(value, oldValue){
+        this.vdom.innerHTML = `Access Granted to ${this.username}.`;
+    }
+}
+Neo.applyClassConfig(CardAdministration);
+export default CardAdministration;

package/apps/route/view/center/CardAdministrationDenied.mjs ADDED Viewed

@@ -0,0 +1,26 @@
+import Container from '../../../../src/container/Base.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+/**
+ * @class Route.view.center.CardAdministrationDenied
+ * @extends Neo.container.Base
+ */
+class CardAdministrationDenied extends Container {
+    static config = {
+        /**
+         * @member {String} className='Route.view.center.CardAdministrationDenied'
+         * @protected
+         */
+        className: 'Route.view.center.CardAdministrationDenied',
+        baseCls: ['route_card_simple_page','neo-container'],
+        vdom: {
+            tag: 'h1',
+            innerHTML: 'Access Denied.'
+        }
+    }
+}
+Neo.applyClassConfig(CardAdministrationDenied);
+export default CardAdministrationDenied;