neo.mjs 5.1.5 → 5.1.6

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/tree/MainContainer.mjs

@@ -121,7 +121,7 @@ class MainContainer extends ConfigurationViewport {
      * @param {Object} opts
      */
     onLeafNodesOnlyChange(opts) {
-        let dragZone = this.exampleComponent.dragZone;
+        let dragZone = this.exampleComponent.down({module: ApiTreeList}).dragZone;
 
         if (dragZone) {
             dragZone.leafNodesOnly = opts.value;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.1.5",
+    "version": "5.1.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -41,7 +41,7 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^6.2.1",
+        "@fortawesome/fontawesome-free": "^6.3.0",
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
         "autoprefixer": "^10.4.13",

package/resources/scss/src/calendar/view/YearComponent.scss

@@ -56,7 +56,7 @@
 
             &:before {
                 color      : v(dateselector-nav-button-color);
-                font-family: "Font Awesome 5 Free";
+                font-family: var(--fa-style-family-classic);
                 font-weight: 900;
                 transition : color 150ms cubic-bezier(0.4, 0, 0.2, 1);
             }

package/resources/scss/src/component/DateSelector.scss

@@ -185,7 +185,7 @@
 
             &:before {
                 color      : v(dateselector-nav-button-color);
-                font-family: "Font Awesome 5 Free";
+                font-family: var(--fa-style-family-classic);
                 font-size  : 18px;
                 font-weight: 900;
                 transition : color 150ms cubic-bezier(0.4, 0, 0.2, 1);

package/resources/scss/src/form/field/Search.scss

@@ -3,7 +3,7 @@
         color      : v(searchfield-glyph-color);
         content    : "\f002";
         display    : inline-block;
-        font-family: "Font Awesome 5 Free";
+        font-family: var(--fa-style-family-classic);
         font-size  : 14px;
         font-weight: 900;
         padding    : 7px;
@@ -16,4 +16,4 @@
             padding-left: 25px;
         }
     }
-}
+}

package/resources/scss/src/form/field/Select.scss

@@ -19,7 +19,6 @@
             border-color: transparent;
             color       : v(selectfield-input-hint-color);
             font        : v(textfield-input-font);
-            min-height  : 25px;
             opacity     : v(selectfield-input-hint-opacity);
         }
     }

package/resources/scss/src/list/Base.scss

@@ -20,7 +20,7 @@
             color      : v(list-item-glyph-color);
             content    : "\f0c8";
             display    : inline-block;
-            font-family: "Font Awesome 5 Free";
+            font-family: var(--fa-style-family-classic);
             width      : 25px;
         }
 

package/resources/scss/src/plugin/Resizable.scss

@@ -6,7 +6,7 @@
     align-items    : center;
     color          : #bbb;
     display        : flex;
-    font-family    : "Font Awesome 5 Free";
+    font-family    : var(--fa-style-family-classic);
     font-weight    : 600;
     height         : 10px;
     justify-content: center;
@@ -110,4 +110,4 @@
             transform: rotate(270deg);
         }
     }
-}
+}

package/resources/scss/src/toolbar/Breadcrumb.scss

@@ -7,7 +7,7 @@
                 color       : v(button-text-color);
                 content     : "\f105";
                 display     : block;
-                font-family : "Font Awesome 5 Free";
+                font-family : var(--fa-style-family-classic);
                 font-weight : 600;
                 position    : absolute;
                 right       : -20px;

package/resources/scss/src/tree/List.scss

@@ -48,7 +48,7 @@
             color      : v(list-item-glyph-color); // todo: tree-list var
             content    : "\f1f9";
             display    : inline-block;
-            font-family: "Font Awesome 5 Free";
+            font-family: var(--fa-style-family-classic);
             font-weight: 900;
             width      : 25px;
         }
@@ -75,7 +75,7 @@
         .neo-treelist-menu-item-content:before {
             color      : v(tree-list-menu-item-color);
             display    : inline-block;
-            font-family: "Font Awesome 5 Free";
+            font-family: var(--fa-style-family-classic);
             font-weight: 900;
             width      : 25px;
         }

package/resources/scss/theme-dark/form/field/CheckBox.scss

@@ -1,7 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'checkboxfield-color'           : #eee,
     'checkboxfield-color-checked'   : #64B5F6,
-    'checkboxfield-icon-font-family': '"Font Awesome 5 Free"',
+    'checkboxfield-icon-font-family': var(--fa-style-family-classic),
     'checkboxfield-icon-font-size'  : 14px,
     'checkboxfield-label-top-margin': 0 0 3px
 ));

package/resources/scss/theme-light/form/field/CheckBox.scss

@@ -1,7 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'checkboxfield-color'           : #aaa,
     'checkboxfield-color-checked'   : #1c60a0,
-    'checkboxfield-icon-font-family': '"Font Awesome 5 Free"',
+    'checkboxfield-icon-font-family': var(--fa-style-family-classic),
     'checkboxfield-icon-font-size'  : 14px,
     'checkboxfield-label-top-margin': 0 0 3px
 ));

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -52,7 +52,7 @@ Neo = globalThis.Neo = Object.assign({
             ntypeMap = Neo.ntypeMap,
             proto    = cls.prototype || cls,
             protos   = [],
-            cfg, config, ctor, overrides;
+            cfg, config, ctor, ntype;
 
         while (proto.__proto__) {
             ctor = proto.constructor;
@@ -74,7 +74,7 @@ Neo = globalThis.Neo = Object.assign({
             ctor = element.constructor;
 
             cfg = ctor.config || {};
-            
+
             if (Neo.overwrites) {
                 ctor.applyOverwrites(cfg);
             }
@@ -99,11 +99,15 @@ Neo = globalThis.Neo = Object.assign({
             });
 
             if (Object.hasOwn(cfg, 'ntype')) {
-                if (Object.hasOwn(ntypeMap, cfg.ntype)) {
-                    throw new Error(`ntype conflict for '${cfg.ntype}' inside the classes:\n${ntypeMap[cfg.ntype]}\n${cfg.className}`);
+                ntype = cfg.ntype;
+
+                // Running the docs app inside a workspace can pull in the same classes from different roots,
+                // so we want to check for different class names as well
+                if (Object.hasOwn(ntypeMap, ntype) && cfg.className !== ntypeMap[ntype]) {
+                    throw new Error(`ntype conflict for '${ntype}' inside the classes:\n${ntypeMap[ntype]}\n${cfg.className}`);
                 }
 
-                ntypeMap[cfg.ntype] = cfg.className;
+                ntypeMap[ntype] = cfg.className;
             }
 
             mixins = Object.hasOwn(config, 'mixins') && config.mixins || [];
@@ -396,7 +400,7 @@ Neo = globalThis.Neo = Object.assign({
      *
      * @memberOf module:Neo
      * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} [create] Set create to true to create empty objects for non existing parts
+     * @param {Boolean} [create] Set create to true to create empty objects for non-existing parts
      * @param {Object} [scope] Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */

package/src/component/Base.mjs

@@ -252,6 +252,12 @@ class Base extends CoreBase {
          * @protected
          */
         rendering_: false,
+        /**
+         * Specify a role tag attribute for the vdom root.
+         * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+         * @member {String|null} role_=null
+         */
+        role_: null,
         /**
          * Set this to true for bulk updates.
          * Ensure to set it back to false afterwards.
@@ -625,6 +631,16 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the role config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetRole(value, oldValue) {
+        this.changeVdomRootKey('role', value);
+    }
+
     /**
      * Triggered after the style config got changed
      * @param {Object} value

package/src/component/Toast.mjs

@@ -1,6 +1,6 @@
 import Base         from '../component/Base.mjs';
-import ToastManager from '../manager/Toast.mjs';
 import NeoArray     from "../util/Array.mjs";
+import ToastManager from '../manager/Toast.mjs';
 
 /**
  * @class Neo.component.Toast
@@ -21,18 +21,6 @@ import NeoArray     from "../util/Array.mjs";
         })
  */
 class Toast extends Base {
-    /**
-     * Used by the ToastManager
-     * @member {Boolean} running=false
-     * @private
-     */
-    running = false
-    /**
-     * Timeout in ms after which the toast is removed
-     * @member {Number} timeout=3000
-     */
-    timeout = 3000
-
     /**
      * Valid values for positions
      * @member {String[]} positions = ['tl','tc','tr','bl','bc','br']
@@ -122,6 +110,18 @@ class Toast extends Base {
         }]}
     }
 
+    /**
+     * Used by the ToastManager
+     * @member {Boolean} running=false
+     * @private
+     */
+    running = false
+    /**
+     * Timeout in ms after which the toast is removed
+     * @member {Number} timeout=3000
+     */
+    timeout = 3000
+
     /**
      * @param {Object} config
      */

package/src/form/field/Picker.mjs

@@ -79,6 +79,11 @@ class Picker extends Text {
          * @member {Number|null} pickerWidth=100
          */
         pickerWidth: 100,
+        /**
+         * @member {Boolean} showPickerOnFocus=false
+         * @protected
+         */
+        showPickerOnFocus: false,
         /**
          * @member {Object|Object[]} triggers=[]
          * @protected
@@ -168,7 +173,7 @@ class Picker extends Text {
             id       : me.getPickerId(),
             items    : pickerComponent ? [pickerComponent] : [],
             maxHeight: me.pickerMaxHeight,
-            vdom     : {cn: [], tabIndex: -1},
+            vdom     : {cn: [], 'aria-activedescendant': me.id, tabIndex: -1},
             width    : me.pickerWidth,
             ...me.pickerConfig,
 
@@ -258,6 +263,18 @@ class Picker extends Text {
         me.pickerIsMounted = false;
     }
 
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    onFocusEnter(data) {
+        super.onFocusEnter(data);
+
+        let me = this;
+
+        me.showPickerOnFocus && !me.pickerIsMounted && me.getClientRectsThenShow();
+    }
+
     /**
      * @param {Object} data
      * @protected

package/src/form/field/Select.mjs

@@ -82,6 +82,10 @@ class Select extends Picker {
          * @protected
          */
         record: null,
+        /**
+         * @member {String|null} role='listbox'
+         */
+        role: 'listbox',
         /**
          * @member {Neo.data.Store|null} store_=null
          */
@@ -128,6 +132,7 @@ class Select extends Picker {
             module        : List,
             appName       : me.appName,
             displayField  : me.displayField,
+            itemRole      : 'option',
             parentId      : me.id,
             selectionModel: {stayInList: false},
             store         : me.store,
@@ -361,6 +366,21 @@ class Select extends Picker {
         return me.record?.[me.valueField] || me.value
     }
 
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    handleKeyDownEnter(data) {
+        let me = this;
+
+        if (me.pickerIsMounted) {
+            me.selectListItem();
+            super.onKeyDownEnter(data)
+        } else {
+            super.onKeyDownEnter(data, me.selectListItem)
+        }
+    }
+
     /**
      * @param {Object} data
      * @protected
@@ -406,7 +426,7 @@ class Select extends Picker {
      * @protected
      */
     onKeyDownDown(data) {
-        this.onKeyDownEnter(data)
+        this.handleKeyDownEnter(data)
     }
 
     /**
@@ -414,14 +434,7 @@ class Select extends Picker {
      * @protected
      */
     onKeyDownEnter(data) {
-        let me = this;
-
-        if (me.pickerIsMounted) {
-            me.selectListItem();
-            super.onKeyDownEnter(data)
-        } else {
-            super.onKeyDownEnter(data, me.selectListItem)
-        }
+        this.handleKeyDownEnter(data);
     }
 
     /**

package/src/list/Base.mjs

@@ -132,6 +132,11 @@ class Base extends Component {
         {tag: 'ul', cn: []}
     }
 
+    /**
+     * @member {String|null} itemRole=null
+     */
+    itemRole = null
+
     /**
      * @param {Object} config
      */
@@ -370,6 +375,10 @@ class Base extends Component {
             tabIndex: -1
         };
 
+        if (me.itemRole) {
+            item.role = me.itemRole;
+        }
+
         switch (Neo.typeOf(itemContent)) {
             case null: {
                 return null;