neo.mjs 5.1.1 → 5.1.3

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.3'
          */
-        version: '5.1.1'
+        version: '5.1.3'
     }
 
     /**

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/buildScripts/addConfig.mjs

@@ -74,7 +74,7 @@ function addHook(opts) {
         name         = opts.name,
         len          = contentArray.length,
         type         = opts.type,
-        j, methodName, nextLine,
+        index, j, methodName, nextLine,
 
     method = [
         '',
@@ -125,17 +125,18 @@ function addHook(opts) {
     );
 
     for (; i < len; i++) {
-        if (contentArray[i].includes('}}')) {
+        if (contentArray[i].startsWith('    }')) {
             break;
         }
     }
 
     for (; i < len; i++) {
         if (contentArray[i].includes('*/')) {
-            nextLine   = contentArray[i + 1]
-            methodName = nextLine.substring(0, nextLine.indexOf('(')).trim();
+            nextLine   = contentArray[i + 1];
+            index      = nextLine.indexOf('(');
+            methodName = index > -1 && nextLine.substring(0, index).trim();
 
-            if (methodName === 'construct') {
+            if (!methodName || methodName === 'construct') {
                 continue;
             }
 
@@ -324,7 +325,7 @@ if (programOpts.info) {
     for (; i < len; i++) {
         codeLine = contentArray[i];
 
-        if (codeLine.includes('    }')) {
+        if (codeLine.startsWith('    }')) {
             addComma(contentArray, i - 1);
             addConfig({
                 configName,

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.3'
          */
-        version: '5.1.1'
+        version: '5.1.3'
     }
 
     /**

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.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/button/Base.scss

@@ -9,24 +9,6 @@
     }
 }
 
-.neo-disabled {
-    .neo-button,
-    &.neo-button {
-        background-color: v(button-background-color-disabled);
-        border-color    : v(button-border-color-disabled);
-        cursor          : default;
-        opacity         : v(button-opacity-disabled);
-
-        .neo-button-glyph {
-            color: v(button-glyph-color-disabled);
-        }
-
-        .neo-button-text {
-            color: v(button-text-color-disabled);
-        }
-    }
-}
-
 .neo-button {
     align-items       : center;
     background-color  : v(button-background-color);
@@ -37,6 +19,7 @@
     cursor            : pointer;
     display           : flex;
     flex-direction    : row;
+    height            : v(button-height);
     justify-content   : center;
     margin            : v(button-margin);
     padding           : v(button-padding);
@@ -47,58 +30,6 @@
     white-space       : nowrap;
     -webkit-appearance: button;
 
-    &:active {
-        background-color: v(button-active-background-color) !important;
-        background-image: none !important;
-        border-color    : v(button-active-border-color);
-        color           : v(button-active-color) !important;
-    }
-
-    &:focus {
-        outline: v(button-outline-active);
-    }
-
-    &:hover {
-        background-color: v(button-hover-background-color);
-        background-image: none !important;
-        border-color    : v(button-hover-border-color);
-        color           : v(button-hover-color);
-    }
-
-    &.neo-button-secondary {
-        background-color: v(button-text-color);
-        background-image: none;
-
-        .neo-button-badge {
-            background-color: v(button-badge-color);
-            color           : v(button-badge-background-color);
-        }
-
-        .neo-button-glyph {
-            color: v(button-background-color);
-        }
-
-        .neo-button-text {
-            color: v(button-background-color);
-        }
-    }
-
-    &.neo-button-tertiary {
-        background-color: transparent;
-        background-image: none;
-        border-width    : 0;
-    }
-
-    &.no-text {
-        .neo-button-glyph {
-            margin: 0 !important;
-        }
-    }
-
-    &.pressed {
-        border-color: v(button-pressed-border-color);
-    }
-
     .neo-button-badge {
         background-color: v(button-badge-background-color);
         border-radius   : 5px;
@@ -166,6 +97,38 @@
         z-index       : 2;
     }
 
+    &:active {
+        background-color: v(button-background-color-active) !important;
+        background-image: none !important;
+        border-color    : v(button-border-color-active);
+
+        .neo-button-glyph {
+            color: v(button-glyph-color-active);
+        }
+
+        .neo-button-text {
+            color: v(button-text-color-active);
+        }
+    }
+
+    &:focus {
+        outline: v(button-outline-active);
+    }
+
+    &:hover {
+        background-color: v(button-background-color-hover);
+        background-image: none !important;
+        border-color    : v(button-border-color-hover);
+
+        .neo-button-glyph {
+            color: v(button-glyph-color-hover);
+        }
+
+        .neo-button-text {
+            color: v(button-text-color-hover);
+        }
+    }
+
     &.icon-bottom {
         flex-direction: column-reverse;
 
@@ -189,4 +152,158 @@
             margin: 0 0 6px 0;
         }
     }
+
+    &.neo-button-secondary {
+        background-color: v(button-secondary-background-color);
+        background-image: v(button-secondary-background-image);
+        border          : v(button-secondary-border-width) solid v(button-secondary-border-color);
+
+        .neo-button-badge {
+            background-color: v(button-secondary-badge-background-color);
+            color           : v(button-secondary-badge-color);
+        }
+
+        .neo-button-glyph {
+            color: v(button-secondary-glyph-color);
+        }
+
+        .neo-button-ripple {
+            background-color: v(button-secondary-ripple-background-color);
+        }
+
+        .neo-button-text {
+            color: v(button-secondary-text-color);
+        }
+
+        &:active {
+            background-color: v(button-secondary-background-color-active) !important;
+            border-color    : v(button-secondary-border-color-active);
+
+            .neo-button-glyph {
+                color: v(button-secondary-glyph-color-active);
+            }
+
+            .neo-button-text {
+                color: v(button-secondary-text-color-active);
+            }
+        }
+
+        &:hover {
+            background-color: v(button-secondary-background-color-hover);
+            border-color    : v(button-secondary-border-color-hover);
+
+            .neo-button-glyph {
+                color: v(button-secondary-glyph-color-hover);
+            }
+
+            .neo-button-text {
+                color: v(button-secondary-text-color-hover);
+            }
+        }
+    }
+
+    &.neo-button-tertiary {
+        background-color: v(button-tertiary-background-color);
+        background-image: v(button-tertiary-background-image);
+        border          : v(button-tertiary-border-width) solid v(button-tertiary-border-color);
+
+        .neo-button-badge {
+            background-color: v(button-tertiary-badge-background-color);
+            color           : v(button-tertiary-badge-color);
+        }
+
+        .neo-button-glyph {
+            color: v(button-tertiary-glyph-color);
+        }
+
+        .neo-button-ripple {
+            background-color: v(button-tertiary-ripple-background-color);
+        }
+
+        .neo-button-text {
+            color: v(button-tertiary-text-color);
+        }
+
+        &:active {
+            background-color: v(button-tertiary-background-color-active) !important;
+            border-color    : v(button-tertiary-border-color-active);
+
+            .neo-button-glyph {
+                color: v(button-tertiary-glyph-color-active);
+            }
+
+            .neo-button-text {
+                color: v(button-tertiary-text-color-active);
+            }
+        }
+
+        &:hover {
+            background-color: v(button-tertiary-background-color-hover);
+            border-color    : v(button-tertiary-border-color-hover);
+
+            .neo-button-glyph {
+                color: v(button-tertiary-glyph-color-hover);
+            }
+
+            .neo-button-text {
+                color: v(button-tertiary-text-color-hover);
+            }
+        }
+    }
+
+    &.no-text {
+        .neo-button-glyph {
+            margin: 0 !important;
+        }
+    }
+
+    &.pressed {
+        border-color: v(button-pressed-border-color);
+    }
+}
+
+.neo-disabled {
+    .neo-button,
+    &.neo-button {
+        background-color: v(button-background-color-disabled);
+        border-color    : v(button-border-color-disabled);
+        cursor          : default;
+        opacity         : v(button-opacity-disabled);
+
+        .neo-button-glyph {
+            color: v(button-glyph-color-disabled);
+        }
+
+        .neo-button-text {
+            color: v(button-text-color-disabled);
+        }
+
+        &.neo-button-secondary {
+            background-color: v(button-secondary-background-color-disabled);
+            border-color    : v(button-secondary-border-color-disabled);
+            opacity         : v(button-secondary-opacity-disabled);
+
+            .neo-button-glyph {
+                color: v(button-secondary-glyph-color-disabled);
+            }
+
+            .neo-button-text {
+                color: v(button-secondary-text-color-disabled);
+            }
+        }
+
+        &.neo-button-tertiary {
+            background-color: v(button-tertiary-background-color-disabled);
+            border-color    : v(button-tertiary-border-color-disabled);
+            opacity         : v(button-tertiary-opacity-disabled);
+
+            .neo-button-glyph {
+                color: v(button-tertiary-glyph-color-disabled);
+            }
+
+            .neo-button-text {
+                color: v(button-tertiary-text-color-disabled);
+            }
+        }
+    }
 }

package/resources/scss/src/component/Carousel.scss

@@ -2,69 +2,75 @@
  * CAROUSEL TRANSFORM
  */
 .neo-carousel {
-  /**
-   * VARS
-   */
-  --neo-carousel-translate-x: 0;
-  --neo-carousel-translate-y: 0;
-  --neo-carousel-transition-timing: cubic-bezier(.4,0,.2,1);
-  --neo-carousel-duration: .7s;
+    /**
+     * VARS
+     */
+    --neo-carousel-duration         : .7s;
+    --neo-carousel-transition-timing: cubic-bezier(.4, 0, .2, 1);
+    --neo-carousel-translate-x      : 0;
+    --neo-carousel-translate-y      : 0;
 
-  .neo-carousel-inner {
-    position: relative;
-    overflow: hidden;
+    .neo-carousel-inner {
+        overflow: hidden;
+        position: relative;
 
-    .neo-carousel-item {
-      transition-timing-function: var(--neo-carousel-transition-timing);
-      transition-duration: var(--neo-carousel-duration);
-      transition-property: all;
-      z-index: 10;
-      inset: 0;
-      position: absolute;
-      transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
+        .neo-carousel-item {
+            inset                     : 0;
+            position                  : absolute;
+            transform                 : translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
+            transition-duration       : var(--neo-carousel-duration);
+            transition-property       : all;
+            transition-timing-function: var(--neo-carousel-transition-timing);
+            z-index                   : 10;
+        }
     }
-  }
 }
 
-.neo-carousel--translate-x-full{
-  --neo-carousel-translate-x: -100%;
-  transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
+.neo-carousel--translate-x-full {
+    --neo-carousel-translate-x: -100%;
+
+    transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
 }
-.neo-carousel-translate-x-0{
-  --neo-carousel-translate-x: 0;
-  transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
+
+.neo-carousel-translate-x-0 {
+    --neo-carousel-translate-x: 0;
+
+    transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
 }
-.neo-carousel-translate-x-full{
-  --neo-carousel-translate-x: 100%;
-  transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
+
+.neo-carousel-translate-x-full {
+    --neo-carousel-translate-x: 100%;
+
+    transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
 }
 
 /**
  * BASE STYLING
  */
 .neo-carousel {
-  padding: 15px;
-  height: 14rem;
-  background: var(--container-background-color);
+    background: var(--container-background-color);
+    height    : 14rem;
+    padding   : 15px;
 
-  .neo-carousel-btn-bar {
-    text-align: end;
+    .neo-carousel-btn-bar {
+        text-align: end;
 
-    .neo-carousel-btn {
-      padding: 15px;
-      font-size: 18px;
+        .neo-carousel-btn {
+            font-size: 18px;
+            padding  : 15px;
+        }
     }
-  }
-  .neo-carousel-inner {
-    border-radius: 5px;
-    height: 9rem;
-    overflow: hidden;
-    background-color: var(--button-active-color);
-    color: var(--button-background-color);
 
-    .neo-carousel-item {
-      height: 9rem;
-      padding: 15px;
+    .neo-carousel-inner {
+        background-color: var(--button-text-color-active);
+        border-radius   : 5px;
+        color           : var(--button-background-color);
+        height          : 9rem;
+        overflow        : hidden;
+
+        .neo-carousel-item {
+            height : 9rem;
+            padding: 15px;
+        }
     }
-  }
 }

package/resources/scss/src/dialog/Base.scss

@@ -2,7 +2,7 @@
     // default styling to match buttons, since this is the most common use case
     background-color: v(button-background-color);
     background-image: v(button-background-image);
-    border          : 1px solid v(button-active-border-color);
+    border          : 1px solid v(button-border-color-active);
 
     position: fixed;
     z-index : 1000;

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;
+            }
+        }
+    }
+}