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

Comparing version 4.1.0 to 4.2.0-alpha1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.1.0",
+  "version": "4.2.0-alpha1",
   "main": "vaadin-combo-box.js",
@@ -25,9 +25,10 @@ "author": "Vaadin Ltd",
     "supports-color": "3.1.2",
-    "type-detect": "1.0.0"
+    "type-detect": "1.0.0",
+    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
   },
   "dependencies": {
-    "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.18",
-    "@polymer/iron-a11y-announcer": "^3.0.0-pre.18",
-    "@polymer/iron-list": "^3.0.0-pre.18",
-    "@polymer/iron-resizable-behavior": "^3.0.0-pre.18",
+    "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.15",
+    "@polymer/iron-a11y-announcer": "^3.0.0-pre.15",
+    "@polymer/iron-list": "^3.0.0-pre.15",
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.15",
     "@polymer/polymer": "^3.0.0",
@@ -44,20 +45,20 @@ "@vaadin/vaadin-control-state-mixin": "^2.1.1",
   "devDependencies": {
-    "@polymer/iron-ajax": "^3.0.0-pre.18",
-    "@polymer/iron-component-page": "^3.0.0-pre.18",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
-    "@polymer/iron-form": "^3.0.0-pre.18",
-    "@polymer/iron-icon": "^3.0.0-pre.18",
-    "@polymer/iron-icons": "^3.0.0-pre.18",
-    "@polymer/iron-input": "^3.0.0-pre.18",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
-    "@polymer/paper-button": "^3.0.0-pre.18",
-    "@polymer/paper-icon-button": "^3.0.0-pre.18",
-    "@polymer/paper-item": "^3.0.0-pre.18",
-    "@polymer/paper-input": "^3.0.0-pre.18",
-    "@polymer/paper-styles": "^3.0.0-pre.18",
-    "@polymer/test-fixture": "^3.0.0-pre.18",
+    "@polymer/iron-ajax": "^3.0.0-pre.15",
+    "@polymer/iron-component-page": "^3.0.0-pre.15",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.15",
+    "@polymer/iron-form": "^3.0.0-pre.15",
+    "@polymer/iron-icon": "^3.0.0-pre.15",
+    "@polymer/iron-icons": "^3.0.0-pre.15",
+    "@polymer/iron-input": "^3.0.0-pre.15",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.15",
+    "@polymer/paper-button": "^3.0.0-pre.15",
+    "@polymer/paper-icon-button": "^3.0.0-pre.15",
+    "@polymer/paper-item": "^3.0.0-pre.15",
+    "@polymer/paper-input": "^3.0.0-pre.15",
+    "@polymer/paper-styles": "^3.0.0-pre.15",
+    "@polymer/test-fixture": "^3.0.0-pre.15",
     "@vaadin/vaadin-button": "^2.1.0-beta2",
-    "wct-browser-legacy": "^1.0.1",
+    "wct-browser-legacy": "^0.0.1-pre.11",
     "@vaadin/vaadin-demo-helpers": "^2.0.1"
   }
 }

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

@@ -42,3 +42,3 @@ /**
             <template>
-              <vaadin-combo-box-item on-click="_onItemClick" index="[[index]]" item="[[item]]" label="[[getItemLabel(item)]]" selected="[[_isItemSelected(item, _selectedItem)]]" role\$="[[_getAriaRole(index)]]" aria-selected\$="[[_getAriaSelected(_focusedIndex,index)]]" focused="[[_isItemFocused(_focusedIndex,index)]]" touch-device\$="[[touchDevice]]" tabindex="-1">
+              <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)]]" touch-device\$="[[touchDevice]]" tabindex="-1">
               </vaadin-combo-box-item>
@@ -85,2 +85,7 @@ </template>
       /**
+       * Custom function for rendering the content of the `<vaadin-combo-box-item>` propagated from the combo box element.
+       */
+      renderer: Function,
+
+      /**
        * `true` when new items are being loaded.
@@ -87,0 +92,0 @@ */

src/vaadin-combo-box-item.js

@@ -93,3 +93,13 @@ /**
        */
-      _itemTemplateInstance: Object
+      _itemTemplateInstance: Object,
+
+      /**
+       * Custom function for rendering the content of the `<vaadin-combo-box-item>` propagated from the combo box element.
+       */
+      renderer: Function,
+
+      /**
+       * Saved instance of a custom renderer function.
+       */
+      _oldRenderer: Function
     };
@@ -100,2 +110,3 @@ }
     return [
+      '_render(renderer, index, item.*)',
       '_updateLabel(label, _itemTemplateInstance)',
@@ -111,3 +122,2 @@ '_updateTemplateInstanceVariable("index", index, _itemTemplateInstance)',
     super.connectedCallback();
-
     if (!this._itemTemplateInstance) {
@@ -118,6 +128,6 @@ // 2.0 has __dataHost. Might want to consider assigning combobox reference directly to item.
       const comboBoxOverlay = dropdown.getRootNode().host;
-      const comboBox = comboBoxOverlay.getRootNode().host;
-      comboBox._ensureTemplatized();
-      if (comboBox._TemplateClass) {
-        this._itemTemplateInstance = new comboBox._TemplateClass({});
+      this._comboBox = comboBoxOverlay.getRootNode().host;
+      this._comboBox._ensureTemplatized();
+      if (this._comboBox._TemplateClass) {
+        this._itemTemplateInstance = new this._comboBox._TemplateClass({});
         this.$.content.textContent = '';
@@ -129,4 +139,24 @@ this.$.content.appendChild(this._itemTemplateInstance.root);
 
+  _render(renderer, index, item) {
+    if (item === undefined || index === undefined) {
+      return;
+    }
+
+    if (this._oldRenderer !== renderer) {
+      this.$.content.innerHTML = '';
+    }
+
+    if (renderer) {
+      this._oldRenderer = renderer;
+      const model = {
+        index: index,
+        item: item.value
+      };
+
+      this.renderer(this.$.content, this._comboBox, model);
+    }
+  }
+
   _updateLabel(label, _itemTemplateInstance) {
-    if (_itemTemplateInstance === undefined && this.$.content) {
+    if (_itemTemplateInstance === undefined && this.$.content && !this.renderer) {
       // Only set label to textContent no template
@@ -133,0 +163,0 @@ this.$.content.textContent = label;

src/vaadin-combo-box-light.js

@@ -68,3 +68,3 @@ /**
 
-    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" position-target="[[inputElement]]" _focused-index="[[_focusedIndex]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]">
+    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" position-target="[[inputElement]]" renderer="[[renderer]]" _focused-index="[[_focusedIndex]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]">
     </vaadin-combo-box-dropdown-wrapper>
@@ -71,0 +71,0 @@ `;

src/vaadin-combo-box-mixin.js

@@ -10,2 +10,3 @@ /**
 import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
@@ -52,2 +53,17 @@ import { flush } from '@polymer/polymer/lib/utils/flush.js';
       /**
+       * Custom function for rendering the content of every item.
+       * Receives three arguments:
+       *
+       * - `root` The `<vaadin-combo-box-item>` internal container DOM element.
+       * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+       * - `model` The object with the properties related with the rendered
+       *   item, contains:
+       *   - `model.index` The index of the rendered item.
+       *   - `model.item` The item.
+       *
+       * **NOTE:** The renderer callback can be called multiple times with the previous content.
+       */
+      renderer: Function,
+
+      /**
        * A full set of items to filter the visible options from.
@@ -185,3 +201,5 @@ * The items can be of either `String` or `Object` type.
 
-      _previousDocumentPointerEvents: String
+      _previousDocumentPointerEvents: String,
+
+      _itemTemplate: Object
     };
@@ -195,2 +213,3 @@ }
       '_filteredItemsChanged(filteredItems.*, itemValuePath, itemLabelPath)',
+      '_templateOrRendererChanged(_itemTemplate, renderer)',
       '_loadingChanged(loading)',
@@ -237,4 +256,30 @@ '_selectedItemChanged(selectedItem)',
     });
+
+    this._observer = new FlattenedNodesObserver(this, info => {
+      this._setTemplateFromNodes(info.addedNodes);
+    });
   }
 
+  _setTemplateFromNodes(nodes) {
+    this._itemTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._itemTemplate;
+  }
+
+  _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
+    if (template !== oldTemplate) {
+      this._itemTemplate = undefined;
+    } else if (renderer !== oldRenderer) {
+      this.renderer = undefined;
+    }
+  }
+
+  _templateOrRendererChanged(template, renderer) {
+    if (template && renderer) {
+      this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);
+      throw new Error('You should only use either a renderer or a template for dialog content');
+    }
+
+    this._oldTemplate = template;
+    this._oldRenderer = renderer;
+  }
+
   /**
@@ -810,3 +855,3 @@ * Opens the dropdown list.
     if (!this._TemplateClass) {
-      const tpl = this.querySelector('template');
+      const tpl = this._itemTemplate || this.querySelector('template');
       if (tpl) {
@@ -813,0 +858,0 @@ this._TemplateClass = templatize(tpl, this, {

src/vaadin-combo-box.js

@@ -41,6 +41,29 @@ /**
  *
+ * ### Item rendering
+ *
+ * `<vaadin-combo-box>` supports using custom renderer callback function for defining the
+ * content of `<vaadin-combo-box-item>`.
+ *
+ * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
+ * Generate DOM content by using `model` object properties if needed, append it to the `root`
+ * element and control the state of the host element by accessing `comboBox`. Before generating new
+ * content, users are able to check if there is already content in `root` for reusing it.
+ *
+ * ```html
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
+ * ```
+ * ```js
+ * const comboBox = document.querySelector('#combo-box');
+ * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
+ * comboBox.renderer = function(root, comboBox, model) {
+ *   root.innerHTML = model.index + ': ' +
+ *                    model.item.label + ' ' +
+ *                    '<b>' + model.item.value + '</b>';
+ * };
+ * ```
+ *
  * ### Item Template
  *
- * `<vaadin-combo-box>` supports using custom item template provided in the light
- * DOM:
+ * Alternatively, the content of the `<vaadin-combo-box-item>` can be populated by using
+ * custom item template provided in the light DOM:
  *
@@ -161,3 +184,3 @@ * ```html
 
-    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" position-target="[[_getPositionTarget()]]" _focused-index="[[_focusedIndex]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]">
+    <vaadin-combo-box-dropdown-wrapper id="overlay" opened="[[opened]]" renderer="[[renderer]]" position-target="[[_getPositionTarget()]]" _focused-index="[[_focusedIndex]]" _item-label-path="[[itemLabelPath]]" loading="[[loading]]">
     </vaadin-combo-box-dropdown-wrapper>
@@ -172,3 +195,3 @@ `;
   static get version() {
-    return '4.1.0';
+    return '4.2.0-alpha1';
   }
@@ -175,0 +198,0 @@

test/common-imports.js

@@ -5,2 +5,3 @@ import '@polymer/iron-test-helpers/test-helpers.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -7,0 +8,0 @@ $_documentContainer.innerHTML = `<dom-module id="not-animated-combo-box-overlay" theme-for="vaadin-combo-box-overlay">

test/test-suites.js

@@ -16,2 +16,3 @@ const isPolymer2 = document.querySelector('script[src*="wct-browser-legacy"]') === null;
   'vaadin-combo-box-light.html',
+  'item-renderer.html',
   'item-template.html',
@@ -18,0 +19,0 @@ 'vaadin-combo-box-dropdown.html'

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

@@ -6,2 +6,3 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -8,0 +9,0 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-combo-box-overlay" theme-for="vaadin-combo-box-overlay">

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

@@ -6,2 +6,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -8,0 +9,0 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-combo-box-item" theme-for="vaadin-combo-box-item">

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

@@ -5,2 +5,3 @@ import '@vaadin/vaadin-lumo-styles/font-icons.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -7,0 +8,0 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-combo-box" theme-for="vaadin-combo-box">

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

 import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -4,0 +5,0 @@ $_documentContainer.innerHTML = `<dom-module id="material-combo-box-overlay" theme-for="vaadin-combo-box-overlay">

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

@@ -6,2 +6,3 @@ import '@vaadin/vaadin-material-styles/color.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -8,0 +9,0 @@ $_documentContainer.innerHTML = `<dom-module id="material-combo-box-item" theme-for="vaadin-combo-box-item">

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

@@ -6,2 +6,3 @@ import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
 const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
@@ -8,0 +9,0 @@ $_documentContainer.innerHTML = `<dom-module id="material-combo-box" theme-for="vaadin-combo-box">

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

273802

increased by2.69%

Number of package files

53

increased by1.92%

Lines of code

2238

increased by4.58%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-a11y-announcer@^3.0.0-pre.15

• Updated@polymer/iron-a11y-keys-behavior@^3.0.0-pre.15

• Updated@polymer/iron-list@^3.0.0-pre.15

• Updated@polymer/iron-resizable-behavior@^3.0.0-pre.15