neo.mjs 5.1.1 → 5.1.2

package/.github/CODING_GUIDELINES.md

@@ -419,18 +419,21 @@ fields: [{
 * (39) `if (/**/) {` if, blank char, parenthesis, blank char, curly bracket
 * (40) `for (/**/) {` for, blank char, parenthesis, blank char, curly bracket
 * (41) `switch(/**/) {` switch, parenthesis, blank char, curly bracket `// could get changed to use a blank char as well
-* (42) Use optional chaining => `?.` where it makes sense
+* (42) `while (/**/) {` while, blank char, parenthesis, blank char, curly bracket
+* (43) Use optional chaining => `?.` where it makes sense
   + Bad: `myView && myView.myFn && myView.myFn();`
   + Good: `myView?.myFn?.();`
   + https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
-* (43) Use method definitions (meaning avoid using the term `function`)
+* (44) Use method definitions (meaning avoid using the term `function`)
   + Bad: `let obj = {a: function() {/**/}};`
   + Good: `let obj = {a() {/**/}};`
   + https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions
-* (44) Use shorthand property names when possible
+* (45) Use shorthand property names when possible
   + Bad: `let obj = {record: record}`
   + Good: `let obj = {record};`
   + https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions
-* (45) Do not use killing commas (while IE6 is luckily no longer an issue => file size)
-  + Bad: `let obj = {a: 1,}`
+* (46) Do not use killing commas (while IE6 is luckily no longer an issue => file size)
+  + Bad: `let obj = {a: 1,};`
+  + Bad: `let arr = [1,];`
   + Good: `let obj = {a: 1};`
+  + Good: `let arr = [1];`

package/apps/ServiceWorker.mjs

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

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Torsten Dinkheller",
+        "authorImage" : "author_TorstenDinkheller.jpg",
+        "date"        : "Feb 03, 2023",
+        "id"          : 57,
+        "image"       : "leveraging-overrides.jpg",
+        "name"        : "Leveraging Overrides for Resilient Customizations and Effective Bugfixes in JavaScript Frameworks",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/leveraging-overrides-for-resilient-customizations-and-effective-bugfixes-in-javascript-frameworks-5b8ccfec0f8?source=friends_link&sk=790e868aac8b8570f0eee093adc30c00"
+    },
     {
         "author"      : "Torsten Dinkheller",
         "authorImage" : "author_TorstenDinkheller.jpg",

package/examples/ServiceWorker.mjs

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

package/examples/toolbar/breadcrumb/view/MainContainer.mjs

@@ -1,4 +1,5 @@
 import BreadcrumbToolbar from '../../../../src/toolbar/Breadcrumb.mjs';
+import Store             from '../../../../src/data/Store.mjs';
 import Viewport          from '../../../../src/container/Viewport.mjs';
 
 /**
@@ -16,8 +17,36 @@ class MainContainer extends Viewport {
          * @member {Object[]} items
          */
         items: [{
-            module: BreadcrumbToolbar,
-            flex  : 'none'
+            module   : BreadcrumbToolbar,
+            activeKey: 2,
+            flex     : 'none',
+
+            store: {
+                module: Store,
+
+                model: {
+                    fields: [{
+                        name: 'id',
+                        type: 'Integer'
+                    }, {
+                        name: 'name',
+                        type: 'String'
+                    }, {
+                        name: 'parentId',
+                        type: 'Integer'
+                    }, {
+                        name: 'route',
+                        type: 'String'
+                    }]
+                },
+
+                data: [
+                    {id: 1, name: 'Home',          parentId: null, route: '/home/'},
+                    {id: 2, name: 'Accessibility', parentId: 1,    route: '/home/accessibility/'},
+                    {id: 3, name: 'Imprint',       parentId: 1,    route: '/home/imprint/'},
+                    {id: 4, name: 'News',          parentId: 1,    route: '/home/news/'},
+                ]
+            }
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.1.1",
+    "version": "5.1.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -18,6 +18,7 @@
         .neo-typeahead-input {
             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/form/field/Text.scss

@@ -309,7 +309,6 @@
             flex-shrink  : 1;
             margin       : 0; // important for Safari => #1125
             min-height   : v(textfield-input-height);
-            width        : 30px;
         }
     }
 
@@ -331,6 +330,7 @@
         min-width       : 50px;
         padding         : v(textfield-input-padding);
         transition      : 250ms border-color cubic-bezier(0.4, 0, 0.2, 1);
+        width           : 100%;
 
         &:focus {
             outline: none;

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

@@ -0,0 +1,17 @@
+.neo-breadcrumb-toolbar {
+    .neo-button {
+        &:not(:last-child) {
+            margin-right: 30px;
+
+            &::after {
+                color       : v(button-text-color);
+                content     : "\f105";
+                display     : block;
+                font-family : "Font Awesome 5 Free";
+                font-weight : 600;
+                position    : absolute;
+                right       : -20px;
+            }
+        }
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/container/Base.mjs

@@ -215,7 +215,11 @@ class Base extends Component {
 
             case 'NeoInstance': {
                 item.set(config);
+
+                // In case an item got created outside a VC or VM based hierarchy, there might be bindings or string
+                // based listeners which still need to get resolved.
                 item.getController()?.parseConfig(item);
+                item.getModel()     ?.parseConfig(item);
                 break;
             }
 

package/src/form/field/Number.mjs

@@ -242,7 +242,7 @@ class Number extends Text {
             value    = (oldValue - stepSize) < me.minValue ? me.maxValue : (oldValue - stepSize);
 
         if (me.excludedValues) {
-            while(me.excludedValues.includes(value)) {
+            while (me.excludedValues.includes(value)) {
                 value = Math.max(me.minValue, value - stepSize);
             }
         }
@@ -262,7 +262,7 @@ class Number extends Text {
             value    = (oldValue + stepSize) > me.maxValue ? me.minValue : (oldValue + stepSize);
 
         if (me.excludedValues) {
-            while(me.excludedValues.includes(value)) {
+            while (me.excludedValues.includes(value)) {
                 value = Math.min(me.maxValue, value + stepSize);
             }
         }

package/src/form/field/Picker.mjs

@@ -115,6 +115,20 @@ class Picker extends Text {
         this.cls = cls;
     }
 
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        if (value === false && oldValue && this.pickerIsMounted) {
+            this.picker.hide();
+        }
+
+        super.afterSetMounted(value, oldValue);
+    }
+
     /**
      * @param {Boolean} silent
      */
@@ -186,6 +200,14 @@ class Picker extends Text {
         return null;
     }
 
+    /**
+     * @param args
+     */
+    destroy(...args) {
+        this.picker?.destroy();
+        super.destroy(...args);
+    }
+
     /**
      * @param {Function} [callback]
      * @param {Object} [callbackScope]

package/src/form/field/Select.mjs

@@ -640,7 +640,7 @@ class Select extends Picker {
         }
 
         if (!hasMatch && inputHintEl) {
-            inputHintEl.value = '';
+            inputHintEl.value = null;
             me.hintRecordId = null;
         }
 

package/src/form/field/Text.mjs

@@ -530,7 +530,17 @@ class Text extends Base {
      * @protected
      */
     afterSetPlaceholderText(value, oldValue) {
-        this.changeInputElKey('placeholder', value === '' ? null : value);
+        let me  = this,
+            cls = me.cls;
+
+        me.changeInputElKey('placeholder', value === '' ? null : value);
+
+        // a non-empty placeholder needs to keep the 'neo-has-content' rule
+        // => labelPosition: 'inline' should keep the label at the top
+        if (Neo.isEmpty(value) !== Neo.isEmpty(oldValue)) {
+            NeoArray[value !== null && value.toString().length > 0 ? 'add' : 'remove'](cls, 'neo-has-content');
+            me.cls = cls;
+        }
     }
 
     /**
@@ -686,21 +696,19 @@ class Text extends Base {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        let me            = this,
-            cls           = me.cls,
-            emptyValue    = Neo.isEmpty(value),
-            originalValue = me.originalConfig.value,
-            isDirty       = value !== originalValue && emptyValue !== Neo.isEmpty(originalValue);
+        let me              = this,
+            cls             = me.cls,
+            placeholderText = me.placeholderText,
+            hasContent      = placeholderText?.length > 0 || value !== null && value.toString().length > 0,
+            originalValue   = me.originalConfig.value,
+            isDirty         = value !== originalValue && Neo.isEmpty(value) !== Neo.isEmpty(originalValue);
 
         me.silentVdomUpdate = true;
 
         me.getInputEl().value = value;
 
-        if (emptyValue !== Neo.isEmpty(oldValue)) {
-            NeoArray[value !== null && value.toString().length > 0 ? 'add' : 'remove'](cls, 'neo-has-content');
-        }
-
-        NeoArray[isDirty ? 'add' : 'remove'](cls, 'neo-is-dirty');
+        NeoArray[hasContent ? 'add' : 'remove'](cls, 'neo-has-content');
+        NeoArray[isDirty    ? 'add' : 'remove'](cls, 'neo-is-dirty');
         me.cls = cls;
 
         me.validate(); // silent

package/src/main/DomEvents.mjs

@@ -407,11 +407,20 @@ class DomEvents extends Base {
      * @param {Object} event
      */
     onChange(event) {
-        this.sendMessageToApp({
+        let target = event.target,
+
+        data = {
             ...this.getEventData(event),
-            valid: event.target.checkValidity(),
-            value: event.target.value
-        });
+            valid: target.checkValidity(),
+            value: target.value
+        };
+
+        // input and change events can pass a FileList for input type file
+        if (target.files) {
+            data.files = target.files;
+        }
+
+        this.sendMessageToApp(data);
     }
 
     /**

package/src/toolbar/Breadcrumb.mjs

@@ -13,6 +13,19 @@ class Breadcrumb extends Toolbar {
          * @protected
          */
         className: 'Neo.toolbar.Breadcrumb',
+        /**
+         * @member {String} ntype='breadcrumb-toolbar'
+         * @protected
+         */
+        ntype: 'breadcrumb-toolbar',
+        /**
+         * @member {String[]} baseCls=['neo-breadcrumb-toolbar','neo-toolbar']
+         */
+        baseCls: ['neo-breadcrumb-toolbar', 'neo-toolbar'],
+        /**
+         * @member {Number|String|null} activeKey_=null
+         */
+        activeKey_: null,
         /**
          * @member {Object[]} items
          */
@@ -23,6 +36,16 @@ class Breadcrumb extends Toolbar {
         store_: null
     }
 
+    /**
+     * Triggered after the activeKey config got changed
+     * @param {Number|String|null} value
+     * @param {Number|String|null} oldValue
+     * @protected
+     */
+    afterSetActiveKey(value, oldValue) {
+        this.store.getCount?.() > 0 && this.updateItems()
+    }
+
     /**
      * Triggered after the store config got changed
      * @param {Neo.data.Store|Object} value
@@ -30,7 +53,14 @@ class Breadcrumb extends Toolbar {
      * @protected
      */
     afterSetStore(value, oldValue) {
+        let me = this;
+
+        value.on({
+            load: this.onStoreLoad,
+            scope: me
+        });
 
+        value?.getCount() > 0 && me.onStoreLoad(value.items)
     }
 
     /**
@@ -44,6 +74,64 @@ class Breadcrumb extends Toolbar {
         oldValue?.destroy();
         return ClassSystemUtil.beforeSetInstance(value, Store);
     }
+
+    /**
+     * @returns {Object[]}
+     */
+    getPathItems() {
+        let items    = [],
+            parentId = this.activeKey,
+            store    = this.store,
+            item;
+
+        while (parentId !== null) {
+            item = store.get(parentId);
+
+            items.unshift(item);
+
+            parentId = item.parentId;
+        }
+
+        return items;
+    }
+
+    /**
+     * @param {Object[]} items
+     */
+    onStoreLoad(items) {
+        this.activeKey !== null && this.updateItems()
+    }
+
+    /**
+     *
+     */
+    updateItems() {
+        let me        = this,
+            items     = me.items,
+            pathItems = me.getPathItems(),
+            i         = 0,
+            len       = pathItems.length,
+            newItems  = [],
+            config, item
+
+        for (; i < len; i++) {
+            item = pathItems[i];
+
+            config = {
+                editRoute: false,
+                route    : item.route,
+                text     : item.name
+            };
+
+            if (items[i]) {
+                items[i].set(config);
+            } else {
+                newItems.push(config);
+            }
+        }
+
+        newItems.length > 0 && me.add(newItems);
+    }
 }
 
 Neo.applyClassConfig(Breadcrumb);