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

Comparing version 4.2.0-alpha2 to 4.2.0-alpha3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-combo-box",
-  "version": "4.2.0-alpha2",
+  "version": "4.2.0-alpha3",
   "main": "vaadin-combo-box.js",
@@ -41,3 +41,3 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-text-field": "^2.1.1",
-    "@vaadin/vaadin-themable-mixin": "^1.2.1",
+    "@vaadin/vaadin-themable-mixin": "^1.3.2",
     "@vaadin/vaadin-lumo-styles": "^1.1.1",
@@ -44,0 +44,0 @@ "@vaadin/vaadin-material-styles": "^1.1.2",

README.md

@@ -1,2 +0,3 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box)
+[![npm latest version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box/latest)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box)
+[![npm next version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box/next)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box)
 [![Bower version](https://badgen.net/github/release/vaadin/vaadin-combo-box)](https://github.com/vaadin/vaadin-combo-box/releases)
@@ -136,2 +137,7 @@ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-combo-box)
 
+## Big Thanks
+
+Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
+
+
 ## Contributing
@@ -138,0 +144,0 @@

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

@@ -45,3 +45,3 @@ /**
     </style>
-    <vaadin-combo-box-dropdown id="dropdown" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight">
+    <vaadin-combo-box-dropdown id="dropdown" hidden="[[_hidden(_items.*, loading)]]" position-target="[[positionTarget]]" on-template-changed="_templateChanged" on-position-changed="_setOverlayHeight" theme="[[theme]]">
       <template>
@@ -51,3 +51,3 @@ <div id="scroller" on-click="_stopPropagation" hidden\$="[[loading]]">
             <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">
+              <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>
@@ -100,2 +100,7 @@ </template>
 
+      /**
+       * Used to propagate the `theme` attribute from the host element.
+       */
+      theme: String,
+
       _selectedItem: {
@@ -102,0 +107,0 @@ type: Object

src/vaadin-combo-box-dropdown.js

@@ -51,3 +51,3 @@ /**
     </style>
-    <vaadin-combo-box-overlay id="overlay" hidden\$="[[hidden]]" opened="[[opened]]" template="{{template}}" style="align-items: stretch; margin: 0;">
+    <vaadin-combo-box-overlay id="overlay" hidden\$="[[hidden]]" opened="[[opened]]" template="{{template}}" style="align-items: stretch; margin: 0;" theme\$="[[theme]]">
       <slot></slot>
@@ -84,3 +84,8 @@ </vaadin-combo-box-overlay>
         value: false
-      }
+      },
+
+      /**
+       * Used to propagate the `theme` attribute from the host element.
+       */
+      theme: String
     };
@@ -87,0 +92,0 @@ }

src/vaadin-combo-box-item.js

@@ -109,3 +109,3 @@ /**
     return [
-      '_render(renderer, index, item.*)',
+      '_rendererOrItemChanged(renderer, index, item.*)',
       '_updateLabel(label, _itemTemplateInstance)',
@@ -136,3 +136,16 @@ '_updateTemplateInstanceVariable("index", index, _itemTemplateInstance)',
 
-  _render(renderer, index, item) {
+  _render() {
+    if (!this.renderer) {
+      return;
+    }
+
+    const model = {
+      index: this.index,
+      item: this.item
+    };
+
+    this.renderer(this.$.content, this._comboBox, model);
+  }
+
+  _rendererOrItemChanged(renderer, index, item) {
     if (item === undefined || index === undefined) {
@@ -148,8 +161,3 @@ return;
       this._oldRenderer = renderer;
-      const model = {
-        index: index,
-        item: item.value
-      };
-
-      this.renderer(this.$.content, this._comboBox, model);
+      this._render();
     }
@@ -156,0 +164,0 @@ }

src/vaadin-combo-box-light.js

@@ -9,2 +9,3 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
@@ -59,4 +60,8 @@ import './vaadin-combo-box-dropdown-wrapper.js';
  * @mixes Vaadin.ThemableMixin
+ * @mixes Vaadin.ThemePropertyMixin
  */
-class ComboBoxLightElement extends ThemableMixin(ComboBoxMixin(PolymerElement)) {
+class ComboBoxLightElement extends
+  ThemePropertyMixin(
+    ThemableMixin(
+      ComboBoxMixin(PolymerElement))) {
   static get template() {
@@ -66,3 +71,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]]">
+    <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>
@@ -69,0 +74,0 @@ `;

src/vaadin-combo-box-mixin.js

@@ -257,2 +257,10 @@ /**
 
+
+  /**
+   * Manually invoke existing renderer.
+   */
+  render() {
+    this.$.overlay._selector.querySelectorAll('vaadin-combo-box-item').forEach(item => item._render());
+  }
+
   _setTemplateFromNodes(nodes) {
@@ -259,0 +267,0 @@ this._itemTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._itemTemplate;

src/vaadin-combo-box.js

@@ -11,2 +11,3 @@ /**
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
@@ -121,2 +122,12 @@ import './vaadin-combo-box-dropdown-wrapper.js';
  *
+ * In addition to `<vaadin-combo-box>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-text-field>`
+ * - `<vaadin-combo-box-overlay>`
+ * - `<vaadin-combo-box-item>`
+ *
+ * Note: the `theme` attribute value set on `<vaadin-combo-box>` is
+ * propagated to the internal themable components listed above.
+ *
  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
@@ -129,2 +140,3 @@ *
  * @mixes Vaadin.ThemableMixin
+ * @mixes Vaadin.ThemePropertyMixin
  * @demo demo/index.html
@@ -135,4 +147,5 @@ */
     ControlStateMixin(
-      ThemableMixin(
-        ComboBoxMixin(PolymerElement)))) {
+      ThemePropertyMixin(
+        ThemableMixin(
+          ComboBoxMixin(PolymerElement))))) {
   static get template() {
@@ -178,3 +191,3 @@ return html`
 
-    <vaadin-text-field part="text-field" id="input" pattern="[[pattern]]" prevent-invalid-input="[[preventInvalidInput]]" value="{{_inputElementValue}}" autocomplete="off" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errorMessage]]" autocapitalize="none" autofocus="[[autofocus]]" on-change="_stopPropagation" on-input="_inputValueChanged">
+    <vaadin-text-field part="text-field" id="input" pattern="[[pattern]]" prevent-invalid-input="[[preventInvalidInput]]" value="{{_inputElementValue}}" autocomplete="off" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errorMessage]]" autocapitalize="none" autofocus="[[autofocus]]" on-change="_stopPropagation" on-input="_inputValueChanged" theme\$="[[theme]]">
       <slot name="prefix" slot="prefix"></slot>
@@ -187,3 +200,3 @@
 
-    <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 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>
@@ -193,2 +206,10 @@ `;
 
+  constructor() {
+    super();
+    /**
+     * @property
+     */
+    this.theme;
+  }
+
   static get is() {
@@ -199,3 +220,3 @@ return 'vaadin-combo-box';
   static get version() {
-    return '4.2.0-alpha2';
+    return '4.2.0-alpha3';
   }
@@ -202,0 +223,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

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

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

91350

increased by1.83%

Lines of code

2116

increased by2.17%

Number of lines in readme file

152

increased by4.11%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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