@vaadin/select - npm Package Compare versions

Comparing version 22.0.0-rc1 to 23.0.0-alpha1

package.json

 {
   "name": "@vaadin/select",
-  "version": "22.0.0-rc1",
+  "version": "23.0.0-alpha1",
   "publishConfig": {
@@ -37,17 +37,17 @@ "access": "public"
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "22.0.0-rc1",
-    "@vaadin/component-base": "22.0.0-rc1",
-    "@vaadin/field-base": "22.0.0-rc1",
-    "@vaadin/input-container": "22.0.0-rc1",
-    "@vaadin/item": "22.0.0-rc1",
-    "@vaadin/list-box": "22.0.0-rc1",
-    "@vaadin/vaadin-list-mixin": "22.0.0-rc1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-material-styles": "22.0.0-rc1",
-    "@vaadin/vaadin-overlay": "22.0.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-rc1"
+    "@vaadin/button": "23.0.0-alpha1",
+    "@vaadin/component-base": "23.0.0-alpha1",
+    "@vaadin/field-base": "23.0.0-alpha1",
+    "@vaadin/input-container": "23.0.0-alpha1",
+    "@vaadin/item": "23.0.0-alpha1",
+    "@vaadin/list-box": "23.0.0-alpha1",
+    "@vaadin/vaadin-list-mixin": "23.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha1",
+    "@vaadin/vaadin-overlay": "23.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-rc1",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
@@ -57,3 +57,3 @@ "lit": "^2.0.0",
   },
-  "gitHead": "7b6f44bcd2c0fd415028ace666feeb0fedb1d540"
+  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
 }

src/vaadin-select-value-button.js

@@ -17,3 +17,3 @@ /**
 
-    ::slotted(vaadin-item) {
+    ::slotted(:not([slot])) {
       padding-left: 0;
@@ -25,3 +25,3 @@ padding-right: 0;
     /* placeholder styles */
-    ::slotted(:not([selected])) {
+    ::slotted(:not([slot]):not([selected])) {
       line-height: normal;
@@ -28,0 +28,0 @@ }

src/vaadin-select.d.ts

@@ -12,3 +12,16 @@ /**
 
+export interface SelectItem {
+  label?: string;
+  component?: string;
+  disabled?: boolean;
+}
+
 /**
+ * Fired when the user commits a value change.
+ */
+export type SelectChangeEvent = Event & {
+  target: Select;
+};
+
+/**
  * Function for rendering the content of the `<vaadin-select>`.
@@ -46,3 +59,5 @@ * Receives two arguments:
 
-export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMap {}
+export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMap {
+  change: SelectChangeEvent;
+}
 
@@ -52,5 +67,25 @@ /**
  *
+ * ### Items
+ *
+ * Use the `items` property to define possible options for the select:
+ *
+ * ```html
+ * <vaadin-select id="select"></vaadin-select>
+ * ```
+ * ```js
+ * const select = document.querySelector('#select');
+ * select.items = [
+ *   { label: 'Most recent first', value: 'recent' },
+ *   { component: 'hr' },
+ *   { label: 'Rating: low to high', value: 'rating-asc' },
+ *   { label: 'Rating: high to low', value: 'rating-desc' },
+ *   { component: 'hr' },
+ *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+ *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+ * ];
+ * ```
+ *
  * ### Rendering
  *
- * The content of the select can be populated by using the renderer callback function.
+ * Alternatively, the content of the select can be populated by using the renderer callback function.
  *
@@ -61,5 +96,2 @@ * The renderer function provides `root`, `select` arguments.
  *
- * ```html
- * <vaadin-select id="select"></vaadin-select>
- * ```
  * ```js
@@ -140,2 +172,25 @@ * const select = document.querySelector('#select');
   /**
+   * An array containing items that will be rendered as the options of the select.
+   *
+   * #### Example
+   * ```js
+   * select.items = [
+   *   { label: 'Most recent first', value: 'recent' },
+   *   { component: 'hr' },
+   *   { label: 'Rating: low to high', value: 'rating-asc' },
+   *   { label: 'Rating: high to low', value: 'rating-desc' },
+   *   { component: 'hr' },
+   *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+   *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+   * ];
+   * ```
+   *
+   * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
+   * To render the item with a custom component, provide a tag name by the `component` property.
+   *
+   * @type {!Array<!SelectItem>}
+   */
+  items: SelectItem[] | null | undefined;
+
+  /**
    * Set when the select is open
@@ -142,0 +197,0 @@ */

src/vaadin-select.js

@@ -8,2 +8,4 @@ /**
 import '@vaadin/input-container/src/vaadin-input-container.js';
+import './vaadin-select-item.js';
+import './vaadin-select-list-box.js';
 import './vaadin-select-overlay.js';
@@ -26,5 +28,25 @@ import './vaadin-select-value-button.js';
  *
+ * ### Items
+ *
+ * Use the `items` property to define possible options for the select:
+ *
+ * ```html
+ * <vaadin-select id="select"></vaadin-select>
+ * ```
+ * ```js
+ * const select = document.querySelector('#select');
+ * select.items = [
+ *   { label: 'Most recent first', value: 'recent' },
+ *   { component: 'hr' },
+ *   { label: 'Rating: low to high', value: 'rating-asc' },
+ *   { label: 'Rating: high to low', value: 'rating-desc' },
+ *   { component: 'hr' },
+ *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+ *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+ * ];
+ * ```
+ *
  * ### Rendering
  *
- * The content of the select can be populated by using the renderer callback function.
+ * Alternatively, the content of the select can be populated by using the renderer callback function.
  *
@@ -35,5 +57,2 @@ * The renderer function provides `root`, `select` arguments.
  *
- * ```html
- * <vaadin-select id="select"></vaadin-select>
- * ```
  * ```js
@@ -176,2 +195,28 @@ * const select = document.querySelector('#select');
       /**
+       * An array containing items that will be rendered as the options of the select.
+       *
+       * #### Example
+       * ```js
+       * select.items = [
+       *   { label: 'Most recent first', value: 'recent' },
+       *   { component: 'hr' },
+       *   { label: 'Rating: low to high', value: 'rating-asc' },
+       *   { label: 'Rating: high to low', value: 'rating-desc' },
+       *   { component: 'hr' },
+       *   { label: 'Price: low to high', value: 'price-asc', disabled: true },
+       *   { label: 'Price: high to low', value: 'price-desc', disabled: true }
+       * ];
+       * ```
+       *
+       * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
+       * To render the item with a custom component, provide a tag name by the `component` property.
+       *
+       * @type {!Array<!SelectItem>}
+       */
+      items: {
+        type: Array,
+        observer: '__itemsChanged'
+      },
+
+      /**
        * Set when the select is open
@@ -364,3 +409,7 @@ * @type {boolean}
 
-  /** @private */
+  /**
+   * @param {SelectRenderer | undefined | null} renderer
+   * @param {SelectOverlay | undefined} overlay
+   * @private
+   */
   _rendererChanged(renderer, overlay) {
@@ -371,3 +420,3 @@ if (!overlay) {
 
-    overlay.setProperties({ owner: this, renderer });
+    overlay.setProperties({ owner: this, renderer: renderer || this.__defaultRenderer });
 
@@ -381,2 +430,13 @@ this.requestContentUpdate();
 
+  /**
+   * @param {SelectItem[] | undefined | null} newItems
+   * @param {SelectItem[] | undefined | null} oldItems
+   * @private
+   */
+  __itemsChanged(newItems, oldItems) {
+    if (newItems || oldItems) {
+      this.requestContentUpdate();
+    }
+  }
+
   /** @private */
@@ -542,3 +602,3 @@ _assignMenuElement() {
     if (label) {
-      labelItem = this.__createItem(label);
+      labelItem = this.__createItemElement({ label });
     } else {
@@ -551,3 +611,3 @@ labelItem = selected.cloneNode(true);
 
-    this.__appendItem(labelItem);
+    this.__appendValueItemElement(labelItem);
 
@@ -558,16 +618,30 @@ // ensure the item gets proper styles
 
-  /** @private */
-  __createItem(text) {
-    const item = document.createElement('vaadin-item');
-    item.textContent = text;
-    return item;
+  /**
+   * @param {!SelectItem} item
+   * @private
+   */
+  __createItemElement(item) {
+    const itemElement = document.createElement(item.component || 'vaadin-select-item');
+    if (item.label) {
+      itemElement.textContent = item.label;
+    }
+    if (item.value) {
+      itemElement.value = item.value;
+    }
+    if (item.disabled) {
+      itemElement.disabled = item.disabled;
+    }
+    return itemElement;
   }
 
-  /** @private */
-  __appendItem(item) {
-    item.removeAttribute('tabindex');
-    item.removeAttribute('role');
-    item.setAttribute('id', this._fieldId);
+  /**
+   * @param {!HTMLElement} itemElement
+   * @private
+   */
+  __appendValueItemElement(itemElement) {
+    itemElement.removeAttribute('tabindex');
+    itemElement.removeAttribute('role');
+    itemElement.setAttribute('id', this._fieldId);
 
-    this._valueButton.appendChild(item);
+    this._valueButton.appendChild(itemElement);
   }
@@ -589,4 +663,4 @@
       if (this.placeholder) {
-        const item = this.__createItem(this.placeholder);
-        this.__appendItem(item);
+        const item = this.__createItemElement({ label: this.placeholder });
+        this.__appendValueItemElement(item);
         this._valueButton.setAttribute('placeholder', '');
@@ -659,2 +733,26 @@ }
   /**
+   * Renders items when they are provided by the `items` property and clears the content otherwise.
+   * @param {!HTMLElement} root
+   * @param {!Select} _select
+   * @private
+   */
+  __defaultRenderer(root, _select) {
+    if (!this.items || this.items.length === 0) {
+      root.textContent = '';
+      return;
+    }
+
+    let listBox = root.firstElementChild;
+    if (!listBox) {
+      listBox = document.createElement('vaadin-select-list-box');
+      root.appendChild(listBox);
+    }
+
+    listBox.textContent = '';
+    this.items.forEach((item) => {
+      listBox.appendChild(this.__createItemElement(item));
+    });
+  }
+
+  /**
    * Fired when the user commits a value change.
@@ -661,0 +759,0 @@ *

theme/lumo/vaadin-select-styles.js

@@ -70,3 +70,3 @@ /**
 
-    ::slotted(vaadin-item:hover) {
+    ::slotted(:not([slot]):hover) {
       background-color: transparent;
@@ -73,0 +73,0 @@ }

theme/material/vaadin-select-styles.js

@@ -57,3 +57,3 @@ /**
 
-    ::slotted(vaadin-item) {
+    ::slotted(:not([slot])) {
       font: inherit;
@@ -63,3 +63,3 @@ padding: 4px 0;
 
-    ::slotted(vaadin-item:hover) {
+    ::slotted(:not([slot]):hover) {
       background-color: transparent;
@@ -66,0 +66,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

56047

increased by11.61%

Number of package files

15

increased by15.38%

Lines of code

1202

increased by17.73%

Dependency changes

• + Added@vaadin/button@23.0.0-alpha1(transitive)

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

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

• + Added@vaadin/icon@23.0.0-alpha1(transitive)

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

• + Added@vaadin/item@23.0.0-alpha1(transitive)

• + Added@vaadin/list-box@23.0.0-alpha1(transitive)

• + Added@vaadin/vaadin-list-mixin@23.0.0-alpha1(transitive)

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

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

• + Added@vaadin/vaadin-overlay@23.0.0-alpha1(transitive)

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

• - Removed@vaadin/button@22.0.0-rc1(transitive)

• - Removed@vaadin/component-base@22.0.0-rc1(transitive)

• - Removed@vaadin/field-base@22.0.0-rc1(transitive)

• - Removed@vaadin/icon@22.0.0-rc1(transitive)

• - Removed@vaadin/input-container@22.0.0-rc1(transitive)

• - Removed@vaadin/item@22.0.0-rc1(transitive)

• - Removed@vaadin/list-box@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-list-mixin@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-material-styles@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-overlay@22.0.0-rc1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.0.0-rc1(transitive)

• Updated@vaadin/button@23.0.0-alpha1

• Updated@vaadin/component-base@23.0.0-alpha1

• Updated@vaadin/field-base@23.0.0-alpha1

• Updated@vaadin/input-container@23.0.0-alpha1

• Updated@vaadin/item@23.0.0-alpha1

• Updated@vaadin/list-box@23.0.0-alpha1

• Updated@vaadin/vaadin-list-mixin@23.0.0-alpha1

• Updated@vaadin/vaadin-lumo-styles@23.0.0-alpha1

• Updated@vaadin/vaadin-material-styles@23.0.0-alpha1

• Updated@vaadin/vaadin-overlay@23.0.0-alpha1

• Updated@vaadin/vaadin-themable-mixin@23.0.0-alpha1