@vaadin/vaadin-combo-box - npm Package Compare versions

Comparing version 4.2.0-beta1 to 4.2.0-beta2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.2.0-beta1",
+  "version": "4.2.0-beta2",
   "main": "vaadin-combo-box.js",
@@ -39,3 +39,3 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-control-state-mixin": "^2.1.1",
-    "@vaadin/vaadin-overlay": "^3.2.0-alpha1",
+    "@vaadin/vaadin-overlay": "^3.2.0",
     "@vaadin/vaadin-text-field": "^2.1.1",
@@ -42,0 +42,0 @@ "@vaadin/vaadin-themable-mixin": "^1.3.2",

src/vaadin-combo-box-dropdown-wrapper.js

@@ -140,3 +140,3 @@ /**
   static get observers() {
-    return ['_selectorChanged(_selector)', '_loadingChanged(loading)', '_openedChanged(opened, _items)'];
+    return ['_selectorChanged(_selector)', '_loadingChanged(loading)', '_openedChanged(opened, _items, loading)'];
   }
@@ -154,6 +154,6 @@
 
-  _openedChanged(opened, items) {
+  _openedChanged(opened, items, loading) {
     // Do not attach if no items
     // Do not dettach if opened but user types an invalid search
-    this.$.dropdown.opened = !!(opened && (this.$.dropdown.opened || items && items.length));
+    this.$.dropdown.opened = !!(opened && (loading || this.$.dropdown.opened || items && items.length));
   }
@@ -160,0 +160,0 @@

src/vaadin-combo-box-dropdown.js

@@ -29,2 +29,10 @@ /**
   }
+
+  ready() {
+    super.ready();
+    const loader = document.createElement('div');
+    loader.setAttribute('part', 'loader');
+    const content = this.shadowRoot.querySelector(['[part~="content"]']);
+    content.parentNode.insertBefore(loader, content);
+  }
 }
@@ -31,0 +39,0 @@

src/vaadin-combo-box.js

@@ -255,3 +255,3 @@ /**
   static get version() {
-    return '4.2.0-beta1';
+    return '4.2.0-beta2';
   }
@@ -258,0 +258,0 @@

theme/lumo/vaadin-combo-box-dropdown-styles.js

@@ -29,2 +29,59 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
       }
+
+      /* Loading state */
+
+      /* When items are empty, the sinner needs some room */
+      :host(:not([closing])) [part~="content"] {
+        min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
+      }
+
+      [part~="overlay"] {
+        position: relative;
+      }
+
+      :host([loading]) [part~="loader"] {
+        box-sizing: border-box;
+        width: var(--lumo-icon-size-s);
+        height: var(--lumo-icon-size-s);
+        position: absolute;
+        z-index: 1;
+        left: var(--lumo-space-s);
+        right: var(--lumo-space-s);
+        top: var(--lumo-space-s);
+        margin-left: auto;
+        margin-inline-start: auto;
+        margin-inline-end: 0;
+        border: 2px solid transparent;
+        border-color:
+          var(--lumo-primary-color-50pct)
+          var(--lumo-primary-color-50pct)
+          var(--lumo-primary-color)
+          var(--lumo-primary-color);
+        border-radius: calc(0.5 * var(--lumo-icon-size-s));
+        opacity: 0;
+        animation:
+          1s linear infinite lumo-combo-box-loader-rotate,
+          .3s .1s lumo-combo-box-loader-fade-in both;
+        pointer-events: none;
+      }
+
+      @keyframes lumo-combo-box-loader-fade-in {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes lumo-combo-box-loader-rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(360deg);
+        }
+      }
     </style>
@@ -31,0 +88,0 @@ </template>

theme/material/vaadin-combo-box-dropdown-styles.js

@@ -17,2 +17,4 @@ import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
       [part="overlay"] {
+        position: relative;
+        overflow: visible;
         border-top-left-radius: 0;
@@ -25,2 +27,69 @@ border-top-right-radius: 0;
       }
+
+      :host([loading]) [part="loader"] {
+        height: 2px;
+        position: absolute;
+        z-index: 1;
+        top: -2px;
+        left: 0;
+        right: 0;
+        background:
+          var(--material-background-color) linear-gradient(
+            90deg,
+            transparent 0%,
+            transparent 20%,
+            var(--material-primary-color) 20%,
+            var(--material-primary-color) 40%,
+            transparent 40%,
+            transparent 60%,
+            var(--material-primary-color) 60%,
+            var(--material-primary-color) 80%,
+            transparent 80%,
+            transparent 100%
+          ) 0 0 / 400% 100% repeat-x;
+        opacity: 0;
+        animation:
+          3s linear infinite material-combo-box-loader-progress,
+          .3s .1s both material-combo-box-loader-fade-in;
+      }
+
+      [part="loader"]::before {
+        content: '';
+        display: block;
+        height: 100%;
+        opacity: 0.16;
+        background: var(--material-primary-color);
+      }
+
+      @keyframes material-combo-box-loader-fade-in {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes material-combo-box-loader-progress {
+        0% {
+          background-position: 0 0;
+          background-size: 300% 100%;
+        }
+
+        33% {
+          background-position: -100% 0;
+          background-size: 400% 100%;
+        }
+
+        67% {
+          background-position: -200% 0;
+          background-size: 250% 100%;
+        }
+
+        100% {
+          background-position: -300% 0;
+          background-size: 300% 100%;
+        }
+      }
     </style>
@@ -27,0 +96,0 @@ </template>

No alert changes

Improved metrics

Total package byte prevSize

105135

increased by3.4%

Lines of code

2539

increased by4.83%

Dependency changes

• Updated@vaadin/vaadin-overlay@^3.2.0