neo.mjs 6.11.0 → 6.12.1

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.11.0",
+    "version": "6.12.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -62,7 +62,7 @@
         "url": "^0.11.3",
         "webpack": "^5.90.1",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "4.15.1",
+        "webpack-dev-server": "5.0.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -209,7 +209,7 @@ class Main extends core.Base {
             module = await import(`./main/addon/${name}.mjs`)
         }
 
-        this.addon[module.default.constructor.name] = module.default;
+        this.registerAddon(module.default);
 
         return true
     }
@@ -254,7 +254,7 @@ class Main extends core.Base {
         me.addon = {};
 
         modules.forEach(module => {
-            me.addon[module.default.constructor.name] = module.default;
+            me.registerAddon(module.default)
         });
 
         WorkerManager.onWorkerConstructed({
@@ -370,6 +370,24 @@ class Main extends core.Base {
         window.location.href = data.url;
     }
 
+    /**
+     * Helper method to register main thread addons
+     * @param {Neo.core.Base} addon Can either be a neo class or instance
+     */
+    registerAddon(addon) {
+        if (Neo.typeOf(addon) === 'NeoClass') {
+            // Addons could get imported multiple times. Ensure to only create an instance once.
+            if (Neo.typeOf(Neo.ns(addon.prototype.className)) !== 'NeoInstance') {
+                addon = Neo.create(addon)
+            }
+
+            // Main thread addons need to get registered as singletons inside the neo namespace
+            Neo.applyToGlobalNs(addon)
+        }
+
+        this.addon[addon.constructor.name] = addon;
+    }
+
     /**
      * Triggers the different DOM operation queues
      * @protected

package/src/component/Base.mjs

@@ -801,12 +801,6 @@ class Base extends CoreBase {
         }
     }
 
-    revertFocus() {
-        if (this.containsFocus && this.focusEnterData?.relatedTarget) {
-            Neo.getComponent(this.focusEnterData.relatedTarget.id)?.focus();
-        }
-    }
-
     /**
      * Triggered after the reference config got changed
      * @param {String|null} value
@@ -1838,13 +1832,19 @@ class Base extends CoreBase {
         this.keys?.register(this)
     }
 
+    /**
+     * @param {Object} data
+     */
     onFocusEnter(data) {
         // If we are hidden, or unmounted while we still contain focus, we have to revert
         // focus to where it came from if possible
         this.focusEnterData = data;
     }
 
-    onFocusLeave() {
+    /**
+     * @param {Object} data
+     */
+    onFocusLeave(data) {
         this.focusEnterData = null;
     }
 
@@ -2067,6 +2067,17 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     *
+     */
+    revertFocus() {
+        let relatedTarget = this.focusEnterData?.relatedTarget;
+
+        if (this.containsFocus && relatedTarget) {
+            Neo.getComponent(relatedTarget.id)?.focus()
+        }
+    }
+
     /**
      * Change multiple configs at once, ensuring that all afterSet methods get all new assigned values
      * @param {Object} values={}

package/src/core/Base.mjs

@@ -370,7 +370,7 @@ class Base {
             currentWorker = Neo.currentWorker,
             listenerId;
 
-        if (!me.singleton) {
+        if (!me.singleton && !me.isMainThreadAddon) {
             throw new Error('Remote method access is only functional for Singleton classes ' + className)
         }
 

package/src/form/field/Select.mjs

@@ -32,6 +32,10 @@ class Select extends Picker {
          * @protected
          */
         ntype: 'selectfield',
+        /**
+         * @member {String|Number|null} activeRecordId=null
+         */
+        activeRecordId: null,
         /**
          * @member {String[]} baseCls=['neo-selectfield','neo-pickerfield','neo-textfield']
          */
@@ -40,6 +44,12 @@ class Select extends Picker {
          * @member {String} displayField='name'
          */
         displayField: 'name',
+        /**
+         * The millisecond time to delay between input field mutation and applying the input field's
+         * new value to the filter
+         * @member {Number} filterDelay=300
+         */
+        filterDelay : 300,
         /**
          * @member {String} filterOperator_='like'
          */
@@ -50,10 +60,6 @@ class Select extends Picker {
          * @member {Boolean} forceSelection=false
          */
         forceSelection: false,
-        /**
-         * @member {String|Number|null} activeRecordId=null
-         */
-        activeRecordId: null,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -116,13 +122,7 @@ class Select extends Picker {
          * which you want to submit instead
          * @member {Number|String} valueField='id'
          */
-        valueField: 'id',
-        /**
-         * The millisecond time to delay between input field mutation and applying the input field's
-         * new value to the filter
-         * @member {Number} filterDelay=300
-         */
-        filterDelay : 300
+        valueField: 'id'
     }
 
     /**
@@ -143,7 +143,7 @@ class Select extends Picker {
      * @param {Object} oldValue
      * @protected
      */
-    afterSetRecord(value) {
+    afterSetRecord(value, oldValue) {
         if (this._picker?.isVisible) {
             let me             = this,
                 selectionModel = me.list?.selectionModel;
@@ -252,7 +252,7 @@ class Select extends Picker {
             }
         }
 
-        return ClassSystemUtil.beforeSetInstance(value, Store);
+        return ClassSystemUtil.beforeSetInstance(value, Store)
     }
 
     /**
@@ -305,16 +305,15 @@ class Select extends Picker {
             module          : List,
             appName         : me.appName,
             displayField    : me.displayField,
-            role            : 'listbox',
             itemRole        : 'option',
+            navigator       : {eventSource : me.getInputElId()},
             parentId        : me.id,
-            navigator       : {
-                eventSource : me.getInputElId()
-            },
+            role            : 'listbox',
             selectionModel  : {stayInList: false},
             store           : me.store,
             ...me.listConfig
         });
+
         me.getInputEl()['aria-controls'] = me.list.id;
 
         me.list.addDomListeners({
@@ -323,15 +322,76 @@ class Select extends Picker {
                 scope : me
             }
         });
+
         me.list.selectionModel.on({
-            selectionChange : me.onListItemSelectionChange,
             noChange        : me.onListItemSelectionNoChange,
+            selectionChange : me.onListItemSelectionChange,
             scope           : me
         })
 
         return me.list;
     }
 
+    /**
+     * All routes which expect to open the picker route through here. This updates the
+     * filter and ensures that the picker is visible and reflecting the state of the filter.
+     *
+     * Input event processing passes the current input field value in as the filter value.
+     *
+     * Invocation of the expand trigger passes `null` so as to clear filtering.
+     * @private
+     * @param {String|null} value The value to filter the picker by
+     */
+    doFilter(value) {
+        let me     = this,
+            filter = me.store.getFilter(me.displayField),
+            {
+                record,
+                picker
+            }      = me;
+
+        if (filter) {
+            filter.value = value;
+        }
+
+        // Filter resulting in something to show
+        if (me.store.getCount()) {
+            me.getPicker().hidden = false;
+
+            // List might not exist until the picker is created
+            const
+                { list }           = me,
+                { selectionModel } = list;
+
+            // On show, set the active item to be the current selected record or the first
+            if (record) {
+                // We do not want to hear back about our own selection
+                selectionModel.suspendEvents = true;
+                selectionModel.select(record);
+                selectionModel.suspendEvents = false;
+            }
+            setTimeout(() => {
+                list.activeIndex = me.record || 0;
+            }, 100)
+        }
+        // Filtered down to nothing - hide picker if it has been created.
+        else if (picker) {
+            picker._hidden = true;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    filterOnInput(data) {
+        if (data.value) {
+            this.doFilter(data.value);
+        }
+        else if (this.picker) {
+            this.picker?.hide();
+        }
+    }
+
     /**
      * Overrides form.field.Base
      * @param {*} value
@@ -383,7 +443,7 @@ class Select extends Picker {
 
     /**
      * Returns the first selected record or null
-     * returns {Object}
+     * @returns {Object}
      */
     getRecord() {
         let list      = this.list,
@@ -401,13 +461,17 @@ class Select extends Picker {
         return me.record?.[me.valueField] || me.value
     }
 
+    /**
+     *
+     */
     onConstructed() {
         const inputEl = this.getInputEl();
 
-        inputEl['aria-expanded'] = false
-        inputEl['aria-haspopup'] = 'listbox'
-        inputEl['aria-activedescendant'] = ''
-        super.onConstructed(...arguments);
+        inputEl['aria-activedescendant'] = '';
+        inputEl['aria-expanded']         = false;
+        inputEl['aria-haspopup']         = 'listbox';
+
+        super.onConstructed(...arguments)
     }
 
     /**
@@ -439,15 +503,6 @@ class Select extends Picker {
         super.onFocusLeave(data)
     }
 
-    filterOnInput(data) {
-        if (data.value) {
-            this.doFilter(data.value);
-        }
-        else if (this.picker) {
-            this.picker?.hide();
-        }
-    }
-
     /**
      * @param {Object} data
      * @protected
@@ -469,17 +524,6 @@ class Select extends Picker {
         }
     }
 
-    onPickerHiddenChange({ value }) {
-        const inputEl = this.getInputEl();
-
-        super.onPickerHiddenChange(...arguments);
-        if (value) {
-            inputEl['aria-activedescendant'] = '';
-        }
-        inputEl['aria-expanded'] = !value;
-        this.update();
-    }
-
     // TODO:
     // When we are using a `Collection` as our `valueCollection`, and that `Collection` is the
     // `items` of the List's `selectionModel`, then this will be `onValueCollectionChange`,
@@ -541,6 +585,34 @@ class Select extends Picker {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onPickerHiddenChange({ value }) {
+        const inputEl = this.getInputEl();
+
+        super.onPickerHiddenChange(...arguments);
+        if (value) {
+            inputEl['aria-activedescendant'] = '';
+        }
+        inputEl['aria-expanded'] = !value;
+        this.update();
+    }
+
+    /**
+     *
+     */
+    onPickerTriggerClick() {
+        let me = this;
+
+        if (me.picker?.isVisible) {
+            me.picker.hidden = true;
+        }
+        else if (!me.readOnly && !me.disabled) {
+            me.doFilter(null)
+        }
+    }
+
     /**
      * Selecting a record, if required
      * @param {Object[]} items
@@ -587,65 +659,6 @@ class Select extends Picker {
         me.list.selectItem(index);
     }
 
-    onPickerTriggerClick() {
-        let me = this;
-
-        if (me.picker?.isVisible) {
-            me.picker.hidden = true;
-        }
-        else if (!me.readOnly && !me.disabled) {
-            me.doFilter(null)
-        }
-    }
-
-    /**
-     * All routes which expect to open the picker route through here. This updates the
-     * filter and ensures that the picker is visible and reflecting the state of the filter.
-     *
-     * Input event processing passes the current input field value in as the filter value.
-     *
-     * Invocation of the expand trigger passes `null` so as to clear filtering.
-     * @private
-     * @param {String}null} value The value to filter the picker by
-     */
-    doFilter(value) {
-        let me     = this,
-            filter = me.store.getFilter(me.displayField),
-            {
-                record,
-                picker
-            }      = me;
-
-        if (filter) {
-            filter.value = value;
-        }
-
-        // Filter resulting in something to show
-        if (me.store.getCount()) {
-            me.getPicker().hidden = false;
-
-            // List might not exist until the picker is created
-            const
-                { list }           = me,
-                { selectionModel } = list;
-
-            // On show, set the active item to be the current selected record or the first
-            if (record) {
-                // We do not want to hear back about our own selection
-                selectionModel.suspendEvents = true;
-                selectionModel.select(record);
-                selectionModel.suspendEvents = false;
-            }
-            setTimeout(() => {
-                list.activeIndex = me.record || 0;
-            }, 100)
-        }
-        // Filtered down to nothing - hide picker if it has been created.
-        else if (picker) {
-            picker._hidden = true;
-        }
-    }
-
     /**
      * @param {Boolean} [silent=false]
      * @protected
@@ -661,7 +674,7 @@ class Select extends Picker {
                 cls: ['neo-input-field-wrapper'],
                 cn : [{
                     tag         : 'input',
-                    autocomplete: 'off',
+                    autocomplete: 'no', // while "off" is the correct value, browser vendors ignore it. Arbitrary strings do the trick.
                     autocorrect : 'off',
                     cls         : ['neo-textfield-input', 'neo-typeahead-input'],
                     disabled    : true,

package/src/form/field/Text.mjs

@@ -318,7 +318,8 @@ class Text extends Base {
      * @protected
      */
     afterSetAutoComplete(value, oldValue) {
-        this.changeInputElKey('autocomplete', value ? null : 'off')
+        // while "off" is the correct value, browser vendors ignore it. Arbitrary strings do the trick.
+        this.changeInputElKey('autocomplete', value ? null : 'no')
     }
 
     /**

package/src/list/Base.mjs

@@ -21,6 +21,7 @@ class Base extends Component {
          */
         ntype: 'list',
         /**
+         * Keeps track of the selected item index and allows bindings and programmatic changes
          * @member {Number|null} activeIndex_=null
          */
         activeIndex_: null,
@@ -63,6 +64,12 @@ class Base extends Component {
          * @member {Object} dragZoneConfig=null
          */
         dragZoneConfig: null,
+        /**
+         * Keeps track of the focussed item index and allows bindings and programmatic changes.
+         * You can either pass the index or the related record
+         * @member {Number|Object|null} focusIndex_=null
+         */
+        focusIndex_: null,
         /**
          * In case we are using list item headers and want to bind list item indexes to e.g. a card layout
          * for e.g. a sidenav, this config comes in handy.
@@ -178,15 +185,16 @@ class Base extends Component {
      * @param {Number|null} oldValue
      * @protected
      */
-    afterSetActiveIndex(value) {
-        let me = this;
+    afterSetActiveIndex(value, oldValue) {
+        let me             = this,
+            selectionModel = me.selectionModel;
 
         if (Neo.isNumber(value)) {
+            selectionModel?.selectAt(value);
             me.headerlessActiveIndex = me.getHeaderlessIndex(value)
-            Neo.main.addon.Navigator.navigateTo([value, this.navigator])
-        }
-        else if (value) {
-            Neo.main.addon.Navigator.navigateTo([me.getItemId(value[me.getKeyProperty()]), this.navigator])
+        } else if (Neo.isNumber(oldValue)) {
+            selectionModel.deselectAll();
+            me.headerlessActiveIndex = null
         }
     }
 
@@ -243,6 +251,22 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Triggered after the focusIndex config got changed
+     * @param {Number|Object|null} value
+     * @param {Number|Object|null} oldValue
+     * @protected
+     */
+    afterSetFocusIndex(value, oldValue) {
+        let me = this;
+
+        if (Neo.isNumber(value)) {
+            Neo.main.addon.Navigator.navigateTo([me.getHeaderlessIndex(value), me.navigator])
+        } else if (value) {
+            Neo.main.addon.Navigator.navigateTo([me.getItemId(value[me.getKeyProperty()]), me.navigator])
+        }
+    }
+
     /**
      * Triggered after the headerlessActiveIndex config got changed
      * @param {Number} value
@@ -253,7 +277,7 @@ class Base extends Component {
         let me = this;
 
         if (Neo.isNumber(value)) {
-            me.activeIndex = me.store.getCount() ? value: null
+            me.activeIndex = me.store.getCount() ? me.getActiveIndex(value) : null
         } else if (Neo.isNumber(oldValue)) {
             me.activeIndex = null
         }
@@ -755,14 +779,16 @@ class Base extends Component {
      * @param {Number|String} item
      */
     selectItem(item) {
-        if (!this.disableSelection) {
+        let me = this;
+
+        if (!me.disableSelection) {
             // Selecting index
             if (Neo.isNumber(item)) {
-                this.selectionModel?.selectAt(item)
+                me.selectionModel?.selectAt(item)
             }
             // Selecting record
             else if (item) {
-                this.selectionModel?.selectAt(this.store.indexOf(item));
+                me.selectionModel?.selectAt(me.store.indexOf(item))
             }
         }
     }

package/src/main/addon/AmCharts.mjs

@@ -1,12 +1,11 @@
-import Base      from '../../core/Base.mjs';
+import Base      from './Base.mjs';
 import DomAccess from '../DomAccess.mjs';
 
 /**
  * Helper class to include amCharts into your neo.mjs app
  * https://www.amcharts.com/docs/v4/
  * @class Neo.main.addon.AmCharts
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class AmCharts extends Base {
     static config = {
@@ -44,16 +43,6 @@ class AmCharts extends Base {
          * @protected
          */
         fallbackPath: 'https://neomjs.github.io/pages/resources/amCharts/',
-        /**
-         * @member {Boolean} scriptsLoaded_=true
-         * @protected
-         */
-        scriptsLoaded_: false,
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true,
         /**
          * Remote method access for other workers
          * @member {Object} remote={app: [//...]}
@@ -68,7 +57,12 @@ class AmCharts extends Base {
                 'setProperty',
                 'updateData'
             ]
-        }
+        },
+        /**
+         * @member {Boolean} scriptsLoaded_=true
+         * @protected
+         */
+        scriptsLoaded_: false
     }
 
     /**
@@ -278,6 +272,6 @@ class AmCharts extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(AmCharts);
+Neo.applyClassConfig(AmCharts);
 
-export default instance;
+export default AmCharts;

package/src/main/addon/AnalyticsByGoogle.mjs

@@ -1,12 +1,11 @@
-import Base from '../../core/Base.mjs';
+import Base from './Base.mjs';
 
 /**
  * Required for the online version of the examples & docs app
  * We can not name the file GoogleAnalytics, since it does break when using uBlock origin for dist versions.
  * See: https://github.com/neomjs/neo/issues/651
  * @class Neo.main.addon.AnalyticsByGoogle
- * @extends Neo.core.Base
- * @singleton
+ * @extends Neo.main.addon.Base
  */
 class AnalyticsByGoogle extends Base {
     static config = {
@@ -14,12 +13,7 @@ class AnalyticsByGoogle extends Base {
          * @member {String} className='Neo.main.addon.AnalyticsByGoogle'
          * @protected
          */
-        className: 'Neo.main.addon.AnalyticsByGoogle',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true
+        className: 'Neo.main.addon.AnalyticsByGoogle'
     }
 
     /**
@@ -54,6 +48,6 @@ class AnalyticsByGoogle extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(AnalyticsByGoogle);
+Neo.applyClassConfig(AnalyticsByGoogle);
 
-export default instance;
+export default AnalyticsByGoogle;