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

Comparing version 4.2.0-alpha3 to 4.2.0-alpha4

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.2.0-alpha3",
+  "version": "4.2.0-alpha4",
   "main": "vaadin-combo-box.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

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

@@ -11,2 +11,3 @@ /**
 import './vaadin-combo-box-dropdown.js';
+import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -48,6 +49,6 @@
       <template>
-        <div id="scroller" on-click="_stopPropagation" hidden\$="[[loading]]">
-          <iron-list id="selector" role="listbox" items="[[_items]]" scroll-target="[[_scroller]]">
+        <div id="scroller" on-click="_stopPropagation">
+          <iron-list id="selector" role="listbox" items="[[_getItems(opened, _items)]]" scroll-target="[[_scroller]]">
             <template>
-              <vaadin-combo-box-item on-click="_onItemClick" index="[[index]]" item="[[item]]" label="[[getItemLabel(item)]]" selected="[[_isItemSelected(item, _selectedItem)]]" renderer="[[renderer]]" role\$="[[_getAriaRole(index)]]" aria-selected\$="[[_getAriaSelected(_focusedIndex,index)]]" focused="[[_isItemFocused(_focusedIndex,index)]]" tabindex="-1" theme\$="[[theme]]">
+              <vaadin-combo-box-item on-click="_onItemClick" index="[[__requestItemByIndex(item, index)]]" item="[[item]]" label="[[getItemLabel(item)]]" selected="[[_isItemSelected(item, _selectedItem, _itemIdPath)]]" renderer="[[renderer]]" role\$="[[_getAriaRole(index)]]" aria-selected\$="[[_getAriaSelected(_focusedIndex,index)]]" focused="[[_isItemFocused(_focusedIndex,index)]]" tabindex="-1" theme\$="[[theme]]">
               </vaadin-combo-box-item>
@@ -134,3 +135,5 @@ </template>
 
-      _selector: Object
+      _selector: Object,
+
+      _itemIdPath: String
     };
@@ -149,2 +152,6 @@ }
 
+  _getItems(opened, items) {
+    return opened ? items : [];
+  }
+
   _openedChanged(opened, items) {
@@ -229,4 +236,8 @@ // Do not attach if no items
 
-  _isItemSelected(item, selectedItem) {
-    return item === selectedItem;
+  _isItemSelected(item, selectedItem, itemIdPath) {
+    if (itemIdPath && item !== undefined && selectedItem !== undefined) {
+      return this.get(itemIdPath, item) === this.get(itemIdPath, selectedItem);
+    } else {
+      return item === selectedItem;
+    }
   }
@@ -260,2 +271,16 @@
   /**
+   * If dataProvider is used, dispatch a request for the item’s index if
+   * the item is a placeholder object.
+   *
+   * @return {Number}
+   */
+  __requestItemByIndex(item, index) {
+    if ((item instanceof ComboBoxPlaceholder) && index !== undefined) {
+      this.dispatchEvent(new CustomEvent('index-requested', {detail: {index}}));
+    }
+
+    return index;
+  }
+
+  /**
    * Gets the label string for the item based on the `_itemLabelPath`.
@@ -328,3 +353,3 @@ * @return {String}
   adjustScrollPosition() {
-    if (this._items) {
+    if (this.opened && this._items) {
       this._scrollIntoView(this._focusedIndex);
@@ -406,4 +431,4 @@ }
 
-  _hidden(itemsChange, loading) {
-    return !loading && (!this._items || !this._items.length);
+  _hidden(itemsChange) {
+    return !this.loading && (!this._items || !this._items.length);
   }
@@ -410,0 +435,0 @@ }

src/vaadin-combo-box-light.js

@@ -11,2 +11,3 @@ /**
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
+import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
 import './vaadin-combo-box-dropdown-wrapper.js';
@@ -58,2 +59,3 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
  * @memberof Vaadin
+ * @mixes Vaadin.ComboBoxDataProviderMixin
  * @mixes Vaadin.ComboBoxMixin
@@ -66,3 +68,4 @@ * @mixes Vaadin.ThemableMixin
     ThemableMixin(
-      ComboBoxMixin(PolymerElement))) {
+      ComboBoxDataProviderMixin(
+        ComboBoxMixin(PolymerElement)))) {
   static get template() {
@@ -72,3 +75,3 @@ return html`
 
-    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" position-target="[[inputElement]]" renderer="[[renderer]]" _focused-index="[[_focusedIndex]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]" theme="[[theme]]">
+    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" position-target="[[inputElement]]" renderer="[[renderer]]" _focused-index="[[_focusedIndex]]" _item-id-path="[[itemIdPath]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]" theme="[[theme]]">
     </vaadin-combo-box-dropdown-wrapper>
@@ -75,0 +78,0 @@ `;

src/vaadin-combo-box-mixin.js

@@ -13,2 +13,3 @@ /**
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
@@ -61,4 +62,2 @@ /**
        *   - `model.item` The item.
-       *
-       * **NOTE:** The renderer callback can be called multiple times with the previous content.
        */
@@ -72,3 +71,4 @@ renderer: Function,
       items: {
-        type: Array
+        type: Array,
+        observer: '_itemsChanged'
       },
@@ -178,2 +178,10 @@
       /**
+       * Path for the id of the item. If `items` is an array of objects,
+       * the `itemIdPath` is used to compare and identify the same item
+       * in `selectedItem` and `filteredItems` (items given by the
+       * `dataProvider` callback).
+       */
+      itemIdPath: String,
+
+      /**
        * The name of this element.
@@ -211,3 +219,3 @@ */
       '_filterChanged(filter, itemValuePath, itemLabelPath)',
-      '_itemsChanged(items.*, itemValuePath, itemLabelPath)',
+      '_itemsOrPathsChanged(items.*, itemValuePath, itemLabelPath)',
       '_filteredItemsChanged(filteredItems.*, itemValuePath, itemLabelPath)',
@@ -576,7 +584,7 @@ '_templateOrRendererChanged(_itemTemplate, renderer)',
           const customValue = this._inputElementValue;
-          this.selectedItem = null;
+          this._selectItemForValue(customValue);
           this.value = customValue;
         }
       } else {
-        this._inputElementValue = this._getItemLabel(this.selectedItem);
+        this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : '';
       }
@@ -589,3 +597,5 @@ }
 
-    this.filter = '';
+    if (!this.dataProvider) {
+      this.filter = '';
+    }
   }
@@ -707,4 +717,3 @@
       if (this._getItemValue(this.selectedItem) !== value) {
-        const valueIndex = this._indexOfValue(value, this.filteredItems);
-        this.selectedItem = valueIndex >= 0 ? this.filteredItems[valueIndex] : null;
+        this._selectItemForValue(value);
       } else {
@@ -733,3 +742,9 @@ item = this.selectedItem;
 
-  _itemsChanged(e, itemValuePath, itemLabelPath) {
+  _itemsChanged(items, oldItems) {
+    this._ensureItemsOrDataProvider(() => {
+      this.items = oldItems;
+    });
+  }
+
+  _itemsOrPathsChanged(e, itemValuePath, itemLabelPath) {
     if (e.value === undefined || itemValuePath === undefined || itemLabelPath === undefined) {
@@ -780,2 +795,11 @@ return;
 
+  _selectItemForValue(value) {
+    const valueIndex = this._indexOfValue(value, this.filteredItems);
+    this.selectedItem = valueIndex >= 0
+      ? this.filteredItems[valueIndex]
+      : (this.dataProvider && this.selectedItem === undefined)
+        ? undefined
+        : null;
+  }
+
   _setOverlayItems(items) {
@@ -823,2 +847,10 @@ this.$.overlay.set('_items', items);
   _overlaySelectedItemChanged(e) {
+    // stop this private event from leaking outside.
+    e.stopPropagation();
+
+    if (e.detail.item instanceof ComboBoxPlaceholder) {
+      // Placeholder items should not be selectable.
+      return;
+    }
+
     if (this.selectedItem !== e.detail.item) {
@@ -831,5 +863,2 @@ this.selectedItem = e.detail.item;
     }
-
-    // stop this private event from leaking outside.
-    e.stopPropagation();
   }
@@ -836,0 +865,0 @@

src/vaadin-combo-box.js

@@ -14,2 +14,3 @@ /**
 import './vaadin-combo-box-dropdown-wrapper.js';
+import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
@@ -65,2 +66,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
  *
+ * Renderer is called on the opening of the combo-box and each time the related model is updated.
+ * DOM generated during the renderer call can be reused
+ * in the next renderer call and will be provided with the `root` argument.
+ * On first call it will be empty.
+ *
  * ### Item Template
@@ -88,2 +94,36 @@ *
  *
+ * ### Lazy Loading with Function Data Provider
+ *
+ * In addition to assigning an array to the items property, you can alternatively
+ * provide the `<vaadin-combo-box>` data through the
+ * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
+ * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
+ * to be displayed.
+ *
+ * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
+ * the API reference below for the detailed data provider arguments description,
+ * and the “Lazy Loading“ example on “Basics” page in the demos.
+ *
+ * __Note that when using function data providers, the total number of items
+ * needs to be set manually. The total number of items can be returned
+ * in the second argument of the data provider callback:__
+ *
+ * ```javascript
+ * comboBox.dataProvider = function(params, callback) {
+ *   var url = 'https://api.example/data' +
+ *       '?page=' + params.page +        // the requested page index
+ *       '&per_page=' + params.pageSize; // number of items on the page
+ *   var xhr = new XMLHttpRequest();
+ *   xhr.onload = function() {
+ *     var response = JSON.parse(xhr.responseText);
+ *     callback(
+ *       response.employees, // requested page of items
+ *       response.totalSize  // total number of items
+ *     );
+ *   };
+ *   xhr.open('GET', url, true);
+ *   xhr.send();
+ * };
+ * ```
+ *
  * ### Styling
@@ -139,2 +179,3 @@ *
  * @mixes Vaadin.ControlStateMixin
+ * @mixes Vaadin.ComboBoxDataProviderMixin
  * @mixes Vaadin.ComboBoxMixin
@@ -150,3 +191,4 @@ * @mixes Vaadin.ThemableMixin
         ThemableMixin(
-          ComboBoxMixin(PolymerElement))))) {
+          ComboBoxDataProviderMixin(
+            ComboBoxMixin(PolymerElement)))))) {
   static get template() {
@@ -200,3 +242,3 @@ return html`
 
-    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" renderer="[[renderer]]" position-target="[[_getPositionTarget()]]" _focused-index="[[_focusedIndex]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]" theme="[[theme]]">
+    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" renderer="[[renderer]]" position-target="[[_getPositionTarget()]]" _focused-index="[[_focusedIndex]]" _item-id-path="[[itemIdPath]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]" theme="[[theme]]">
     </vaadin-combo-box-dropdown-wrapper>
@@ -219,3 +261,3 @@ `;
   static get version() {
-    return '4.2.0-alpha3';
+    return '4.2.0-alpha4';
   }
@@ -222,0 +264,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

101563

increased by11.18%

Number of package files

23

increased by9.52%

Lines of code

2419

increased by14.32%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes