neo.mjs 6.7.0 → 6.7.2

package/apps/ServiceWorker.mjs

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

package/examples/ConfigurationViewport.mjs

@@ -1,8 +1,14 @@
-import Button    from '../src/button/Base.mjs';
-import Container from '../src/container/Base.mjs';
-import NeoArray  from '../src/util/Array.mjs';
-import Panel     from '../src/container/Panel.mjs';
-import Viewport  from '../src/container/Viewport.mjs';
+import Button       from '../src/button/Base.mjs';
+import Container    from '../src/container/Base.mjs';
+import {bindAppend} from '../src/util/Function.mjs';
+import Panel        from '../src/container/Panel.mjs';
+import Viewport     from '../src/container/Viewport.mjs';
+
+// add custom themes here
+const themes = [
+    {name: 'neo-theme-dark',  label: 'Theme Dark'},
+    {name: 'neo-theme-light', label: 'Theme Light'}
+]
 
 /**
  * Base class for example Apps which should be configurable
@@ -112,8 +118,7 @@ class ConfigurationViewport extends Viewport {
 
                 items: [...me.configurationComponents, {
                     module : Button,
-                    handler: me.onSwitchTheme.bind(me, 'cmp'),
-                    id     : me.id + '_cmp_' + 'switchThemeButton',
+                    handler: bindAppend(me.onSwitchTheme, me, 'cmp'),
                     style  : {marginTop: '20px'},
                     text   : theme === 'neo-theme-dark' ? 'Theme Light' : 'Theme Dark',
                     width  : 100
@@ -172,24 +177,26 @@ class ConfigurationViewport extends Viewport {
     }
 
     /**
+     * @param {Object} data
      * @param {String} target
      */
-    onSwitchTheme(target) {
-        let me     = this,
-            button = Neo.getComponent(me.id + (target !== 'cmp' ? '__' : '_cmp_') + 'switchThemeButton'),
-            newTheme, oldTheme;
-
-        if (button.text === 'Theme Light') {
-            newTheme = 'neo-theme-light';
-            oldTheme = 'neo-theme-dark';
-
-            button.text = 'Theme Dark';
-        } else {
-            newTheme = 'neo-theme-dark';
-            oldTheme = 'neo-theme-light';
-
-            button.text = 'Theme Light';
-        }
+    onSwitchTheme(data, target) {
+        let me          = this,
+            button      = data.component,
+            countThemes = themes.length,
+            newTheme, oldIndex, oldTheme, themeIndex;
+
+        themes.forEach((theme, index) => {
+            if (button.text === theme.label) {
+                newTheme   = theme.name;
+                themeIndex = index;
+            }
+        });
+
+        oldIndex = (themeIndex + 1) % countThemes;
+        oldTheme = themes[oldIndex].name;
+
+        button.text = themes[oldIndex].label;
 
         if (target === 'cmp') {
             me.exampleComponent.theme = newTheme;

package/examples/ServiceWorker.mjs

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

package/examples/dialog/DemoDialog.mjs

@@ -44,11 +44,12 @@ class DemoDialog extends Dialog {
                 })()
             }
         }, {
-            module : Button,
-            handler: me.createDialog.bind(me),
-            iconCls: 'fa fa-window-maximize',
-            text   : 'Create new modal Dialog',
-        }];
+            module   : Button,
+            handler  : me.createDialog.bind(me),
+            iconCls  : 'fa fa-window-maximize',
+            reference: 'create-second-dialog-button',
+            text     : 'Create new modal Dialog',
+        }]
     }
 
     /**
@@ -63,16 +64,16 @@ class DemoDialog extends Dialog {
             appName            : me.appName,
             boundaryContainerId: me.boundaryContainerId,
             listeners          : {close: me.onWindowClose, scope: me},
-            modal              : true
+            modal              : true,
+            title              : 'Second Dialog'
         });
     }
 
+    /**
+     *
+     */
     onWindowClose() {
-        let button = this.down({
-            text: 'Create new modal Dialog'
-        });
-
-        button.disabled = false;
+        this.getReference('create-second-dialog-button').disabled = false;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.7.0",
+    "version": "6.7.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,7 +45,7 @@
         "@fortawesome/fontawesome-free": "^6.4.2",
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
-        "autoprefixer": "^10.4.15",
+        "autoprefixer": "^10.4.16",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^11.0.0",
@@ -57,7 +57,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.30",
-        "sass": "^1.67.0",
+        "sass": "^1.68.0",
         "showdown": "^2.1.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.7.0'
+     * @default '6.7.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.7.0'
+    version: '6.7.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -1336,7 +1336,7 @@ class Base extends CoreBase {
         }
 
         if (me.parentId) {
-            parentComponent = Neo.getComponent(me.parentId) || Neo.get(me.parentId);
+            parentComponent = me.parent || Neo.get(me.parentId);
 
             if (parentComponent) {
                 return parentComponent.getConfigInstanceByNtype(configName, ntype)
@@ -1419,7 +1419,7 @@ class Base extends CoreBase {
      * @returns {Number|undefined}
      */
     getMountedParentIndex() {
-        let parent = Neo.getComponent(this.parentId),
+        let parent = this.parent,
             items  = parent?.items || [],
             i      = 0,
             index  = 0,
@@ -1559,7 +1559,7 @@ class Base extends CoreBase {
             let removeFn = function() {
                 if(me.parentId !== 'document.body') {
                     me.vdom.removeDom = true;
-                    Neo.getComponent(me.parentId).update()
+                    me.parent.update()
                 } else {
                     me.unmount()
                 }
@@ -2033,7 +2033,7 @@ class Base extends CoreBase {
             if (me.silentVdomUpdate) {
                 me.needsVdomUpdate = true
             } else if(me.parentId !== 'document.body') {
-                Neo.getComponent(me.parentId).update()
+                me.parent.update()
             } else {
                 !me.mounted && me.render(true)
             }
@@ -2161,7 +2161,7 @@ class Base extends CoreBase {
     /**
      * Convenience shortcut for Neo.manager.Component.up
      * @param {Object|String} config
-     * @returns {Neo.core.Base} The matching instance or null
+     * @returns {Neo.component.Base|null} The matching instance or null
      */
     up(config) {
         return ComponentManager.up(this.id, config)

package/src/form/field/Base.mjs

@@ -13,8 +13,8 @@ class Base extends Component {
      * @static
      */
     static delayable = {
-        fireChangeEvent    : {type: 'debounce', timer: 300},
-        fireUserChangeEvent: {type: 'debounce', timer: 300}
+        fireChangeEvent    : {type: 'debounce', timer: 1000},
+        fireUserChangeEvent: {type: 'debounce', timer: 1000}
     }
 
     static config = {

package/src/table/Container.mjs

@@ -142,7 +142,7 @@ class Container extends BaseContainer {
 
         me.vdom.id = me.getWrapperId();
 
-        me.createColumns(me.columns);
+        me.createColumns(me.columns)
     }
 
     /**
@@ -152,7 +152,7 @@ class Container extends BaseContainer {
      * @protected
      */
     afterSetSelectionModel(value, oldValue) {
-        this.rendered && value.register(this);
+        this.rendered && value.register(this)
     }
 
     /**
@@ -163,7 +163,7 @@ class Container extends BaseContainer {
      */
     afterSetShowHeaderFilters(value, oldValue) {
         if (oldValue !== undefined) {
-            Neo.getComponent(this.headerToolbarId).showHeaderFilters = value;
+            Neo.getComponent(this.headerToolbarId).showHeaderFilters = value
         }
     }
 
@@ -175,7 +175,7 @@ class Container extends BaseContainer {
      */
     afterSetSortable(value, oldValue) {
         if (oldValue !== undefined) {
-            Neo.getComponent(this.headerToolbarId).sortable = value;
+            Neo.getComponent(this.headerToolbarId).sortable = value
         }
     }
 
@@ -187,7 +187,7 @@ class Container extends BaseContainer {
      */
     afterSetUseCustomScrollbars(value, oldValue) {
         if (value === true) {
-            this.vdom.cls = NeoArray.union(this.vdom.cls, ['neo-use-custom-scrollbar']);
+            this.vdom.cls = NeoArray.union(this.vdom.cls, ['neo-use-custom-scrollbar'])
         }
     }
 
@@ -200,17 +200,17 @@ class Container extends BaseContainer {
             cssRules = [];
 
         if (me.dockLeftMargin) {
-            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-left: ' + me.dockLeftMargin + 'px;}');
+            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-left: ' + me.dockLeftMargin + 'px;}')
         }
 
         if (me.dockRightMargin) {
-            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-right: ' + me.dockRightMargin + 'px;}');
+            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-right: ' + me.dockRightMargin + 'px;}')
         }
         if (cssRules.length > 0) {
-            CssUtil.insertRules(me.appName, cssRules);
+            CssUtil.insertRules(me.appName, cssRules)
         }
 
-        me.scrollbarsCssApplied = true;
+        me.scrollbarsCssApplied = true
     }
 
     /**
@@ -221,10 +221,10 @@ class Container extends BaseContainer {
      */
     beforeSetColumns(value, oldValue) {
         if (this.configsApplied) {
-            return this.createColumns(value);
+            return this.createColumns(value)
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -234,7 +234,7 @@ class Container extends BaseContainer {
      * @protected
      */
     beforeSetHeaderToolbarId(value, oldValue) {
-        return value ? value : oldValue;
+        return value || oldValue
     }
 
     /**
@@ -246,7 +246,7 @@ class Container extends BaseContainer {
     beforeSetSelectionModel(value, oldValue) {
         oldValue?.destroy();
 
-        return ClassSystemUtil.beforeSetInstance(value, RowModel);
+        return ClassSystemUtil.beforeSetInstance(value, RowModel)
     }
 
     /**
@@ -270,20 +270,20 @@ class Container extends BaseContainer {
 
             if (value instanceof Store) {
                 value.on(listeners);
-                value.getCount() > 0 && me.onStoreLoad(value.items);
+                value.getCount() > 0 && me.onStoreLoad(value.items)
             } else {
                 value = ClassSystemUtil.beforeSetInstance(value, Store, {
                     listeners
-                });
+                })
             }
 
             // in case we dynamically change the store, the view needs to get the new reference
             if (me.view) {
-                me.view.store = value;
+                me.view.store = value
             }
         }
 
-        return value;
+        return value
     }
 
     /**
@@ -293,7 +293,7 @@ class Container extends BaseContainer {
      * @protected
      */
     beforeSetViewId(value, oldValue) {
-        return value ? value : oldValue;
+        return value || oldValue
     }
 
     /**
@@ -325,26 +325,26 @@ class Container extends BaseContainer {
 
             if (sorters?.[0]) {
                 if (column.dataField === sorters[0].property) {
-                    column.isSorted = sorters[0].direction;
+                    column.isSorted = sorters[0].direction
                 }
             }
 
             column.listeners = {
                 sort : me.onSortColumn,
                 scope: me
-            };
+            }
         });
 
         me.items[0].items = columns;
 
-        return columns;
+        return columns
     }
 
     /**
      * @param {Number} countRows
      */
     createRandomViewData(countRows) {
-        this.loadData(countRows);
+        this.loadData(countRows)
     }
 
     /**
@@ -360,7 +360,7 @@ class Container extends BaseContainer {
             me.applyCustomScrollbarsCss();
         }
 
-        me.items = items;
+        me.items = items
     }
 
     /**
@@ -368,21 +368,21 @@ class Container extends BaseContainer {
      * @returns {*}
      */
     getVdomRoot() {
-        return this.vdom.cn[0];
+        return this.vdom.cn[0]
     }
 
     /**
      * @returns {Object[]} The new vdom items root
      */
     getVdomItemsRoot() {
-        return this.vdom.cn[0];
+        return this.vdom.cn[0]
     }
 
     /**
      * @returns {Neo.table.View}
      */
     getView() {
-        return Neo.getComponent(this.viewId) || Neo.get(this.viewId);
+        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
     }
 
     /**
@@ -390,14 +390,14 @@ class Container extends BaseContainer {
      * @returns {Neo.vdom.VNode}
      */
     getVnodeRoot() {
-        return this.vnode.childNodes[0];
+        return this.vnode.childNodes[0]
     }
 
     /**
      * @returns {String}
      */
     getWrapperId() {
-        return `${this.id}__wrapper`;
+        return `${this.id}__wrapper`
     }
 
     /**
@@ -409,8 +409,8 @@ class Container extends BaseContainer {
             countColumns = columns.length;
 
         Neo.manager.Store.createRandomData([countColumns, countRows]).then(data => {
-            me.createViewData(data);
-        });
+            me.createViewData(data)
+        })
     }
 
     /**
@@ -426,8 +426,8 @@ class Container extends BaseContainer {
         if (me.createRandomData) {
             // todo: if mounting apply after mount
             setTimeout(() => {
-                me.createRandomViewData(me.amountRows);
-            }, 50);
+                me.createRandomViewData(me.amountRows)
+            }, 50)
         }
     }
 
@@ -442,14 +442,14 @@ class Container extends BaseContainer {
 
         me.store.sort(opts);
         me.removeSortingCss(opts.property);
-        me.onStoreLoad(me.store.items);
+        me.onStoreLoad(me.store.items)
     }
 
     /**
      *
      */
     onStoreFilter() {
-        this.onStoreLoad(this.store.items);
+        this.onStoreLoad(this.store.items)
     }
 
     /**
@@ -464,14 +464,14 @@ class Container extends BaseContainer {
             me.createViewData(data);
 
             if (me.store.sorters.length < 1) {
-                me.removeSortingCss();
+                me.removeSortingCss()
             }
         } else {
             listenerId = me.on('rendered', () => {
                 me.un('rendered', listenerId);
                 setTimeout(() => {
-                    me.createViewData(data);
-                }, 50);
+                    me.createViewData(data)
+                }, 50)
             });
         }
     }
@@ -487,7 +487,7 @@ class Container extends BaseContainer {
      * @param {*} opts.value
      */
     onStoreRecordChange(opts) {
-        Neo.getComponent(this.viewId).onStoreRecordChange(opts);
+        Neo.getComponent(this.viewId).onStoreRecordChange(opts)
     }
 
     /**
@@ -497,9 +497,9 @@ class Container extends BaseContainer {
     removeSortingCss(dataField) {
         this.items[0].items.forEach(column => {
             if (column.dataField !== dataField) {
-                column.removeSortingCss();
+                column.removeSortingCss()
             }
-        });
+        })
     }
 }
 

package/src/table/View.mjs

@@ -134,7 +134,7 @@ class View extends Component {
     createViewData(inputData) {
         let me         = this,
             amountRows = inputData.length,
-            container  = Neo.getComponent(me.parentId),
+            container  = me.parent,
             columns    = container.items[0].items,
             colCount   = columns.length,
             data       = [],
@@ -248,8 +248,8 @@ class View extends Component {
      * @returns {Object|null}
      */
     getColumn(field) {
-        let container = Neo.getComponent(this.parentId),
-            columns   = container.columns,
+        let container = this.parent,
+            columns   = container.items[0].items, // todo: we need a shortcut for accessing the header toolbar
             i         = 0,
             len       = columns.length,
             column;
@@ -337,7 +337,7 @@ class View extends Component {
      */
     onStoreRecordChange(opts) {
         let me          = this,
-            container   = Neo.getComponent(me.parentId),
+            container   = me.parent,
             needsUpdate = false,
             vdom        = me.vdom,
             cellId, cellNode, column, index, scope;

package/src/table/header/Button.mjs

@@ -369,9 +369,9 @@ class Button extends BaseButton {
      */
     onDrop(data) {
         let me             = this,
-            headerToolbar  = Neo.getComponent(me.parentId),
+            headerToolbar  = me.parent,
             style          = me.style,
-            tableContainer = Neo.getComponent(headerToolbar.parentId);
+            tableContainer = headerToolbar.parent;
 
         me.onDragLeave();
         headerToolbar.switchItems(me.id, data.srcId);

package/src/toolbar/Breadcrumb.mjs

@@ -27,6 +27,13 @@ class Breadcrumb extends Toolbar {
          * @member {String[]} baseCls=['neo-breadcrumb-toolbar','neo-toolbar']
          */
         baseCls: ['neo-breadcrumb-toolbar', 'neo-toolbar'],
+        /**
+         * @member {Object} itemDefaults={ntype:'button', ui: 'tertiary'}
+         */
+        itemDefaults: {
+            ntype: 'button',
+            ui   : 'tertiary'
+        },
         /**
          * @member {Neo.data.Store|Object} store_=null
          */

package/src/util/Function.mjs

@@ -1,11 +1,11 @@
 /**
  * Append args instead of prepending them
+ * @param {Function} fn
  * @param {Object} scope
  * @returns {Function}
  */
-export function bindAppend(scope) {
-    const fn   = this,
-          args = [].slice.call(arguments).slice(1);
+export function bindAppend(fn, scope) {
+    const args = [].slice.call(arguments).slice(2);
 
     return function() {
         return fn.apply(scope, [].slice.call(arguments).concat(args))