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

Comparing version 23.1.0-alpha3 to 23.1.0-alpha4

package.json

 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
@@ -36,9 +36,9 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/field-base": "23.1.0-alpha3",
-    "@vaadin/input-container": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/combo-box": "23.1.0-alpha4",
+    "@vaadin/component-base": "23.1.0-alpha4",
+    "@vaadin/field-base": "23.1.0-alpha4",
+    "@vaadin/input-container": "23.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
   },
@@ -50,3 +50,3 @@ "devDependencies": {
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

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

@@ -34,8 +34,8 @@ /**
       label: {
-        type: String
+        type: String,
       },
 
       item: {
-        type: Object
-      }
+        type: Object,
+      },
     };
@@ -77,7 +77,7 @@ }
         detail: {
-          item: this.item
+          item: this.item,
         },
         bubbles: true,
-        composed: true
-      })
+        composed: true,
+      }),
     );
@@ -84,0 +84,0 @@ }

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

@@ -19,4 +19,4 @@ /**
   {
-    moduleId: 'vaadin-multi-select-combo-box-container-styles'
-  }
+    moduleId: 'vaadin-multi-select-combo-box-container-styles',
+  },
 );
@@ -23,0 +23,0 @@

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

@@ -54,4 +54,4 @@ /**
       _target: {
-        type: Object
-      }
+        type: Object,
+      },
     };
@@ -70,2 +70,13 @@ }
   /**
+   * Override method inherited from the combo-box
+   * to allow opening dropdown when readonly.
+   * @override
+   */
+  open() {
+    if (!this.disabled && !(this.readonly && this._getOverlayItems().length === 0)) {
+      this.opened = true;
+    }
+  }
+
+  /**
    * @protected
@@ -118,2 +129,7 @@ * @override
   _closeOrCommit() {
+    if (this.readonly) {
+      this.close();
+      return;
+    }
+
     if (this.__enterPressed) {
@@ -134,2 +150,45 @@ this.__enterPressed = null;
   /**
+   * Override method inherited from the combo-box
+   * to not update focused item when readonly.
+   * @protected
+   * @override
+   */
+  _onArrowDown() {
+    if (!this.readonly) {
+      super._onArrowDown();
+    } else if (!this.opened) {
+      this.open();
+    }
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to not update focused item when readonly.
+   * @protected
+   * @override
+   */
+  _onArrowUp() {
+    if (!this.readonly) {
+      super._onArrowUp();
+    } else if (!this.opened) {
+      this.open();
+    }
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to close dropdown on blur when readonly.
+   * @param {FocusEvent} event
+   * @protected
+   * @override
+   */
+  _onFocusout(event) {
+    super._onFocusout(event);
+
+    if (this.readonly && !this._closeOnBlurIsPrevented) {
+      this.close();
+    }
+  }
+
+  /**
    * @param {CustomEvent} event
@@ -142,2 +201,7 @@ * @protected
 
+    // Do not un-select on click when readonly
+    if (this.readonly) {
+      return;
+    }
+
     if (event.detail.item instanceof ComboBoxPlaceholder) {
@@ -151,5 +215,5 @@ return;
           detail: {
-            item: event.detail.item
-          }
-        })
+            item: event.detail.item,
+          },
+        }),
       );
@@ -156,0 +220,0 @@ }

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

@@ -19,3 +19,3 @@ /**
   `,
-  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' }
+  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' },
 );
@@ -22,0 +22,0 @@

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

@@ -26,7 +26,18 @@ /**
 
+    if (this.comboBox.readonly) {
+      return false;
+    }
+
     const host = this.comboBox.getRootNode().host;
     return host._findIndex(item, host.selectedItems, itemIdPath) > -1;
   }
+
+  /** @private */
+  __updateElement(el, index) {
+    super.__updateElement(el, index);
+
+    el.toggleAttribute('readonly', this.comboBox.readonly);
+  }
 }
 
 customElements.define(MultiSelectComboBoxScroller.is, MultiSelectComboBoxScroller);

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

@@ -235,3 +235,3 @@ /**
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
@@ -242,3 +242,3 @@
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
@@ -245,0 +245,0 @@ }

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

@@ -49,3 +49,3 @@ /**
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'vaadin-multi-select-combo-box-styles'
+  moduleId: 'vaadin-multi-select-combo-box-styles',
 });
@@ -217,3 +217,3 @@
         observer: '_clearButtonVisibleChanged',
-        value: false
+        value: false,
       },
@@ -226,3 +226,3 @@
       items: {
-        type: Array
+        type: Array,
       },
@@ -235,3 +235,3 @@
       itemLabelPath: {
-        type: String
+        type: String,
       },
@@ -245,3 +245,3 @@
       itemValuePath: {
-        type: String
+        type: String,
       },
@@ -254,6 +254,16 @@
       itemIdPath: {
-        type: String
+        type: String,
       },
 
       /**
+       * When present, it specifies that the field is read-only.
+       */
+      readonly: {
+        type: Boolean,
+        value: false,
+        observer: '_readonlyChanged',
+        reflectToAttribute: true,
+      },
+
+      /**
        * The list of selected items.
@@ -265,3 +275,3 @@ * Note: modifying the selected items creates a new array each time.
         value: () => [],
-        notify: true
+        notify: true,
       },
@@ -276,3 +286,3 @@
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
@@ -287,3 +297,3 @@
         value: 50,
-        observer: '_pageSizeChanged'
+        observer: '_pageSizeChanged',
       },
@@ -305,3 +315,3 @@
         type: Object,
-        observer: '_dataProviderChanged'
+        observer: '_dataProviderChanged',
       },
@@ -315,3 +325,3 @@
         type: Boolean,
-        value: false
+        value: false,
       },
@@ -338,3 +348,3 @@
         value: '',
-        notify: true
+        notify: true,
       },
@@ -352,3 +362,3 @@
         type: Boolean,
-        value: false
+        value: false,
       },
@@ -359,4 +369,4 @@
         type: Array,
-        value: () => []
-      }
+        value: () => [],
+      },
     };
@@ -393,3 +403,3 @@ }
         this.ariaTarget = input;
-      })
+      }),
     );
@@ -484,2 +494,22 @@ this.addController(new LabelledInputController(this.inputElement, this._labelController));
   /** @private */
+  _readonlyChanged(readonly, oldReadonly) {
+    if (readonly) {
+      this.__savedItems = this.$.comboBox._getOverlayItems();
+      this.$.comboBox._setOverlayItems(Array.from(this.selectedItems));
+
+      // Update chips to hide remove button
+      this._chips.forEach((chip) => {
+        chip.setAttribute('readonly', '');
+      });
+    } else if (oldReadonly) {
+      this.$.comboBox._setOverlayItems(this.__savedItems);
+      this.__savedItems = null;
+
+      this._chips.forEach((chip) => {
+        chip.removeAttribute('readonly');
+      });
+    }
+  }
+
+  /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
@@ -503,2 +533,6 @@ if (Math.floor(pageSize) !== pageSize || pageSize <= 0) {
 
+    if (this.readonly) {
+      this.$.comboBox._setOverlayItems(selectedItems);
+    }
+
     // Re-render scroller
@@ -613,2 +647,3 @@ this.$.comboBox.$.dropdown._scroller.requestContentUpdate();
     chip.toggleAttribute('disabled', this.disabled);
+    chip.toggleAttribute('readonly', this.readonly);
 
@@ -740,4 +775,4 @@ const label = this._getItemLabel(item, this.itemLabelPath);
         composed: true,
-        bubbles: true
-      })
+        bubbles: true,
+      }),
     );
@@ -744,0 +779,0 @@ }

theme/lumo/vaadin-multi-select-combo-box-chip-styles.js

@@ -25,3 +25,3 @@ /**
 
-  :host(:not([part~='overflow'])) {
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
     padding-inline-end: 0;
@@ -92,3 +92,3 @@ }
 
-  :host([disabled]) [part] {
+  :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
@@ -98,6 +98,11 @@ -webkit-text-fill-color: var(--lumo-disabled-text-color);
   }
+
+  :host([readonly]) [part='remove-button'],
+  :host([disabled]) [part='remove-button'] {
+    display: none;
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'lumo-multi-select-combo-box-chip'
+  moduleId: 'lumo-multi-select-combo-box-chip',
 });

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

@@ -13,2 +13,17 @@ /**
 
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'lumo-multi-select-combo-box-item',
+  },
+);
+
 const multiSelectComboBox = css`
@@ -30,6 +45,11 @@ :host([has-value]) {
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--lumo-contrast-60pct);
+    cursor: var(--lumo-clickable-cursor);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'lumo-multi-select-combo-box'
+  moduleId: 'lumo-multi-select-combo-box',
 });

theme/material/vaadin-multi-select-combo-box-chip-styles.js

@@ -16,3 +16,3 @@ /**
     margin-inline-end: 0.25rem;
-    padding-inline-start: 0.5rem;
+    padding: 0 0.5rem;
     border-radius: 4px;
@@ -24,6 +24,9 @@ background-color: hsla(214, 53%, 23%, 0.1);
 
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
   :host([part~='overflow']) {
     position: relative;
     margin-inline-start: 0.5rem;
-    padding-inline-end: 0.5rem;
   }
@@ -90,15 +93,11 @@
 
-  /* Disabled */
-  :host([disabled]) [part] {
-    pointer-events: none;
-  }
-
   :host([disabled]) [part='label'] {
     color: var(--material-disabled-text-color);
     -webkit-text-fill-color: var(--material-disabled-text-color);
+    pointer-events: none;
   }
 
+  :host([readonly]) [part='remove-button'],
   :host([disabled]) [part='remove-button'] {
-    color: hsla(0, 0%, 100%, 0.75);
-    -webkit-text-fill-color: hsla(0, 0%, 100%, 0.75);
+    display: none;
   }
@@ -108,3 +107,3 @@ `;
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'material-multi-select-combo-box-chip'
+  moduleId: 'material-multi-select-combo-box-chip',
 });

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

@@ -12,2 +12,17 @@ /**
 
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'material-multi-select-combo-box-item',
+  },
+);
+
 const multiSelectComboBox = css`
@@ -34,6 +49,10 @@ :host([readonly]) [part~='chip'] {
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--material-secondary-text-color);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'material-multi-select-combo-box'
+  moduleId: 'material-multi-select-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

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

69363

increased by5.16%

Lines of code

1653

increased by8.75%

Dependency changes

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

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

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

• + Added@vaadin/icon@23.1.0-alpha4(transitive)

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

• + Added@vaadin/item@23.1.0-alpha4(transitive)

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

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

• + Added@vaadin/vaadin-overlay@23.1.0-alpha4(transitive)

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

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

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

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

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

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

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

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

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

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

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

• Updated@vaadin/combo-box@23.1.0-alpha4

• Updated@vaadin/component-base@23.1.0-alpha4

• Updated@vaadin/field-base@23.1.0-alpha4

• Updated@vaadin/input-container@23.1.0-alpha4

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

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

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