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

Comparing version 23.1.0-rc3 to 23.1.0

package.json

 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0-rc3",
+  "version": "23.1.0",
   "publishConfig": {
@@ -36,9 +36,9 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.1.0-rc3",
-    "@vaadin/component-base": "23.1.0-rc3",
-    "@vaadin/field-base": "23.1.0-rc3",
-    "@vaadin/input-container": "23.1.0-rc3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-rc3",
-    "@vaadin/vaadin-material-styles": "23.1.0-rc3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-rc3"
+    "@vaadin/combo-box": "^23.1.0",
+    "@vaadin/component-base": "^23.1.0",
+    "@vaadin/field-base": "^23.1.0",
+    "@vaadin/input-container": "^23.1.0",
+    "@vaadin/vaadin-lumo-styles": "^23.1.0",
+    "@vaadin/vaadin-material-styles": "^23.1.0",
+    "@vaadin/vaadin-themable-mixin": "^23.1.0"
   },
@@ -50,3 +50,3 @@ "devDependencies": {
   },
-  "gitHead": "49c312fbe0228adb559296d45655bbfd4eac6235"
+  "gitHead": "322bba42b83f908a78cd972b06acadc5da95a69d"
 }

src/vaadin-multi-select-combo-box-dropdown.js

@@ -36,4 +36,13 @@ /**
   }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // Set owner for using by item renderers
+    const comboBox = this.getRootNode().host;
+    this._scroller.comboBox = comboBox.getRootNode().host;
+  }
 }
 
 customElements.define(MultiSelectComboBoxDropdown.is, MultiSelectComboBoxDropdown);

src/vaadin-multi-select-combo-box-internal.js

@@ -54,2 +54,12 @@ /**
       /**
+       * When set to `true`, "loading" attribute is set
+       * on the host and the overlay element.
+       * @type {boolean}
+       */
+      loading: {
+        type: Boolean,
+        notify: true,
+      },
+
+      /**
        * Total number of items.
@@ -63,2 +73,11 @@ * @type {number | undefined}
 
+      /**
+       * Selected items to render in the dropdown
+       * when the component is read-only.
+       */
+      selectedItems: {
+        type: Array,
+        value: () => [],
+      },
+
       _target: {
@@ -70,2 +89,6 @@ type: Object,
 
+  static get observers() {
+    return ['_readonlyItemsChanged(readonly, selectedItems)'];
+  }
+
   /**
@@ -86,3 +109,3 @@ * Reference to the clear button element.
   open() {
-    if (!this.disabled && !(this.readonly && this._getOverlayItems().length === 0)) {
+    if (!this.disabled && !(this.readonly && this.selectedItems.length === 0)) {
       this.opened = true;
@@ -253,4 +276,48 @@ }
   }
+
+  /**
+   * Override method inherited from the combo-box
+   * to render only selected items when read-only,
+   * even if a different set of items is provided.
+   *
+   * @protected
+   * @override
+   */
+  _setOverlayItems(items) {
+    const effectiveItems = this.readonly ? this.selectedItems : items;
+    super._setOverlayItems(effectiveItems);
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to not request data provider when read-only.
+   *
+   * @param {number}
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldLoadPage(page) {
+    if (this.readonly) {
+      return false;
+    }
+
+    return super._shouldLoadPage(page);
+  }
+
+  /** @private */
+  _readonlyItemsChanged(readonly, selectedItems) {
+    if (readonly && selectedItems) {
+      this.__savedItems = this._getOverlayItems();
+      this._setOverlayItems(selectedItems);
+    }
+
+    // Restore the original dropdown items
+    if (readonly === false && this.__savedItems) {
+      this._setOverlayItems(this.__savedItems);
+      this.__savedItems = null;
+    }
+  }
 }
 
 customElements.define(MultiSelectComboBoxInternal.is, MultiSelectComboBoxInternal);

src/vaadin-multi-select-combo-box-scroller.js

@@ -43,4 +43,3 @@ /**
 
-    const host = this.comboBox.getRootNode().host;
-    return host._findIndex(item, host.selectedItems, itemIdPath) > -1;
+    return this.comboBox._findIndex(item, this.comboBox.selectedItems, itemIdPath) > -1;
   }
@@ -47,0 +46,0 @@

src/vaadin-multi-select-combo-box.d.ts

@@ -6,3 +6,7 @@ /**
  */
-import { ComboBoxDataProvider, ComboBoxDefaultItem, ComboBoxRenderer } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import {
+  ComboBoxDataProvider,
+  ComboBoxDefaultItem,
+  ComboBoxItemModel,
+} from '@vaadin/combo-box/src/vaadin-combo-box.js';
 import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
@@ -24,2 +28,8 @@ import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 
+export type MultiSelectComboBoxRenderer<TItem> = (
+  root: HTMLElement,
+  comboBox: MultiSelectComboBox<TItem>,
+  model: ComboBoxItemModel<TItem>,
+) => void;
+
 export interface MultiSelectComboBoxI18n {
@@ -117,2 +127,3 @@ cleared: string;
  * `focus-ring`           | Set when the element is keyboard focused
+ * `loading`              | Set when loading items from the data provider
  * `opened`               | Set when the dropdown is open
@@ -238,2 +249,7 @@ * `readonly`             | Set to a readonly element
   /**
+   * True when loading items from the data provider, false otherwise.
+   */
+  loading: boolean;
+
+  /**
    * True if the dropdown is open, false otherwise.
@@ -261,3 +277,3 @@ */
    * - `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.
-   * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+   * - `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.
    * - `model` The object with the properties related with the rendered
@@ -268,3 +284,3 @@ *   item, contains:
    */
-  renderer: ComboBoxRenderer<TItem> | null | undefined;
+  renderer: MultiSelectComboBoxRenderer<TItem> | null | undefined;
 
@@ -287,2 +303,10 @@ /**
 
+  /**
+   * Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+
   addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
@@ -289,0 +313,0 @@ type: K,

src/vaadin-multi-select-combo-box.js

@@ -103,2 +103,3 @@ /**
  * `focus-ring`           | Set when the element is keyboard focused
+ * `loading`              | Set when loading items from the data provider
  * `opened`               | Set when the dropdown is open
@@ -166,4 +167,6 @@ * `readonly`             | Set to a readonly element
           filter="{{filter}}"
+          loading="{{loading}}"
           size="{{size}}"
           filtered-items="[[filteredItems]]"
+          selected-items="[[selectedItems]]"
           opened="{{opened}}"
@@ -304,2 +307,11 @@ renderer="[[renderer]]"
       /**
+       * True when loading items from the data provider, false otherwise.
+       */
+      loading: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+
+      /**
        * When present, it specifies that the field is read-only.
@@ -365,3 +377,2 @@ */
         type: Object,
-        observer: '_dataProviderChanged',
       },
@@ -394,3 +405,3 @@
        * - `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.
-       * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+       * - `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.
        * - `model` The object with the properties related with the rendered
@@ -496,2 +507,14 @@ *   item, contains:
   /**
+   * Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate() {
+    if (this.$ && this.$.comboBox) {
+      this.$.comboBox.requestContentUpdate();
+    }
+  }
+
+  /**
    * Override method inherited from `DisabledMixin` to forward disabled to chips.
@@ -593,10 +616,4 @@ * @protected
   _readonlyChanged(readonly, oldReadonly) {
-    if (readonly) {
-      this.__savedItems = this.$.comboBox._getOverlayItems();
-      this.$.comboBox._setOverlayItems(Array.from(this.selectedItems));
+    if (readonly || oldReadonly) {
       this.__updateChips();
-    } else if (oldReadonly) {
-      this.$.comboBox._setOverlayItems(this.__savedItems);
-      this.__savedItems = null;
-      this.__updateChips();
     }
@@ -647,8 +664,4 @@ }
 
-    if (this.readonly) {
-      this.$.comboBox._setOverlayItems(selectedItems);
-    }
-
     // Update selected for dropdown items
-    this.$.comboBox.requestContentUpdate();
+    this.requestContentUpdate();
   }
@@ -655,0 +668,0 @@

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

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

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

Improved metrics

Total package byte prevSize

81764

increased by3.46%

Lines of code

2076

increased by4.95%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Added@vaadin/combo-box@23.5.8(transitive)

• + Added@vaadin/component-base@23.5.8(transitive)

• + Added@vaadin/field-base@23.5.8(transitive)

• + Added@vaadin/icon@23.5.8(transitive)

• + Added@vaadin/input-container@23.5.8(transitive)

• + Added@vaadin/item@23.5.8(transitive)

• + Added@vaadin/lit-renderer@23.5.8(transitive)

• + Added@vaadin/overlay@23.5.8(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.5.8(transitive)

• + Added@vaadin/vaadin-material-styles@23.5.8(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.5.8(transitive)

• - Removed@vaadin/combo-box@23.1.0-rc3(transitive)

• - Removed@vaadin/component-base@23.1.0-rc3(transitive)

• - Removed@vaadin/field-base@23.1.0-rc3(transitive)

• - Removed@vaadin/icon@23.1.0-rc3(transitive)

• - Removed@vaadin/input-container@23.1.0-rc3(transitive)

• - Removed@vaadin/item@23.1.0-rc3(transitive)

• - Removed@vaadin/lit-renderer@23.1.0-rc3(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.1.0-rc3(transitive)

• - Removed@vaadin/vaadin-material-styles@23.1.0-rc3(transitive)

• - Removed@vaadin/vaadin-overlay@23.1.0-rc3(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.1.0-rc3(transitive)

• Updated@vaadin/combo-box@^23.1.0

• Updated@vaadin/component-base@^23.1.0

• Updated@vaadin/field-base@^23.1.0

• Updated@vaadin/input-container@^23.1.0

• Updated@vaadin/vaadin-lumo-styles@^23.1.0

• Updated@vaadin/vaadin-material-styles@^23.1.0

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