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

Comparing version 5.0.11 to 5.1.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "5.0.11",
+  "version": "5.1.0-alpha1",
   "main": "vaadin-combo-box.js",
@@ -39,9 +39,9 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-control-state-mixin": "^2.1.1",
-    "@vaadin/vaadin-overlay": "^3.2.0",
-    "@vaadin/vaadin-text-field": "^2.4.3",
-    "@vaadin/vaadin-themable-mixin": "^1.3.2",
+    "@vaadin/vaadin-overlay": "^3.4.0",
+    "@vaadin/vaadin-text-field": "^2.6.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "^1.5.2",
     "@vaadin/vaadin-lumo-styles": "^1.1.1",
     "@vaadin/vaadin-material-styles": "^1.1.2",
-    "@vaadin/vaadin-item": "^2.1.0",
-    "@vaadin/vaadin-element-mixin": "^2.0.0"
+    "@vaadin/vaadin-item": "^2.2.0-alpha1",
+    "@vaadin/vaadin-element-mixin": "^2.3.0"
   },
@@ -55,5 +55,5 @@ "devDependencies": {
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^3.0.0",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0-alpha1",
     "@vaadin/vaadin-dialog": "^2.2.1"
   }
 }

src/vaadin-combo-box-item.js

@@ -9,2 +9,3 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -35,3 +36,3 @@ /**
  */
-class ComboBoxItemElement extends ThemableMixin(PolymerElement) {
+class ComboBoxItemElement extends ThemableMixin(DirMixin(PolymerElement)) {
   static get template() {
@@ -38,0 +39,0 @@ return html`

src/vaadin-combo-box-mixin.js

@@ -35,2 +35,7 @@ /**
       /**
+       * Set true to prevent the overlay from opening automatically.
+       */
+      autoOpenDisabled: Boolean,
+
+      /**
        * Set to true to disable this element.
@@ -366,3 +371,3 @@ */
         this.close();
-      } else {
+      } else if (path.indexOf(this._toggleElement) > -1 || !this.autoOpenDisabled) {
         this.open();
@@ -488,7 +493,15 @@ }
 
+  _closeOrCommit() {
+    if (this.autoOpenDisabled && !this.opened) {
+      this._commitValue();
+    } else {
+      this.close();
+    }
+  }
+
   _onEnter(e) {
     // should close on enter when custom values are allowed, input field is cleared, or when an existing
-    // item is focused with keyboard.
-    if (this.opened && (this.allowCustomValue || this._inputElementValue === '' || this._focusedIndex > -1)) {
-      this.close();
+    // item is focused with keyboard. If auto open is disabled, under the same conditions, commit value.
+    if ((this.opened || this.autoOpenDisabled) && (this.allowCustomValue || this._inputElementValue === '' || this._focusedIndex > -1)) {
+      this._closeOrCommit();
 
@@ -504,3 +517,6 @@ // Do not submit the surrounding form.
   _onEscape(e) {
-    if (this.opened) {
+    if (this.autoOpenDisabled) {
+      this._focusedIndex = -1;
+      this.cancel();
+    } else if (this.opened) {
       this._stopPropagation(e);
@@ -550,3 +566,3 @@
     this._lastCommittedValue = this.value;
-    this.close();
+    this._closeOrCommit();
   }
@@ -581,3 +597,2 @@
   _onClosed() {
-
     // Happens when the overlay is closed by clicking outside
@@ -588,2 +603,6 @@ if (this.opened) {
 
+    this._commitValue();
+  }
+
+  _commitValue() {
     if (this.$.overlay._items && this._focusedIndex > -1) {
@@ -644,3 +663,3 @@ const focusedItem = this.$.overlay._items[this._focusedIndex];
   _filterFromInput(e) {
-    if (!this.opened && !e.__fromClearButton) {
+    if (!this.opened && !e.__fromClearButton && !this.autoOpenDisabled) {
       this.open();
@@ -812,3 +831,3 @@ }
 
-      this._focusedIndex = this.opened ?
+      this._focusedIndex = this.opened || this.autoOpenDisabled ?
         this.$.overlay.indexOfLabel(this.filter) :
@@ -828,3 +847,3 @@ this._indexOfValue(this.value, this.filteredItems);
 
-    return arr.filter(item => {
+    const filteredItems = arr.filter(item => {
       filter = filter ? filter.toString().toLowerCase() : '';
@@ -834,2 +853,4 @@ // Check if item contains input value.
     });
+
+    return !filteredItems.length && this.autoOpenDisabled ? arr : filteredItems;
   }
@@ -932,3 +953,3 @@
     if (!this._closeOnBlurIsPrevented) {
-      this.close();
+      this._closeOrCommit();
     }
@@ -935,0 +956,0 @@ }

src/vaadin-combo-box.js

@@ -234,3 +234,3 @@ /**
   static get version() {
-    return '5.0.11';
+    return '5.1.0-alpha1';
   }
@@ -237,0 +237,0 @@

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

@@ -87,2 +87,12 @@ import '@vaadin/vaadin-lumo-styles/color.js';
       }
+
+      /* RTL specific styles */
+
+      :host([loading][dir="rtl"]) [part~="loader"] {
+        left: auto;
+        margin-left: 0;
+        margin-right: auto;
+        margin-inline-start: 0;
+        margin-inline-end: auto;
+      }
     </style>
@@ -89,0 +99,0 @@ </template>

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

@@ -45,2 +45,8 @@ import '@vaadin/vaadin-lumo-styles/color.js';
       }
+
+      /* RTL specific styles */
+      :host([dir="rtl"]) {
+        padding-right: calc(var(--lumo-border-radius) / 4);
+        padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      }
     </style>
@@ -47,0 +53,0 @@ </template>

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

@@ -94,2 +94,32 @@ import '@vaadin/vaadin-material-styles/color.js';
       }
+
+      /* RTL specific styles */
+
+      @keyframes material-combo-box-loader-progress-rtl {
+        0% {
+          background-position: 100% 0;
+          background-size: 300% 100%;
+        }
+
+        33% {
+          background-position: 200% 0;
+          background-size: 400% 100%;
+        }
+
+        67% {
+          background-position: 300% 0;
+          background-size: 250% 100%;
+        }
+
+        100% {
+          background-position: 400% 0;
+          background-size: 300% 100%;
+        }
+      }
+
+      :host([loading][dir="rtl"]) [part="loader"] {
+        animation:
+          3s linear infinite material-combo-box-loader-progress-rtl,
+          .3s .1s both material-combo-box-loader-fade-in;
+      }
     </style>
@@ -96,0 +126,0 @@ </template>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113096

increased by1.82%

Lines of code

2736

increased by2.09%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@vaadin/vaadin-element-mixin@^2.3.0

• Updated@vaadin/vaadin-item@^2.2.0-alpha1

• Updated@vaadin/vaadin-overlay@^3.4.0

• Updated@vaadin/vaadin-text-field@^2.6.0-alpha3

• Updated@vaadin/vaadin-themable-mixin@^1.5.2