New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/combo-box
Advanced tools
@vaadin/combo-box - npm Package Compare versions
Comparing version 24.4.0-alpha9 to 24.4.0-beta1
| { | ||
| "name": "@vaadin/combo-box", | ||
| "version": "24.4.0-alpha9", | ||
| "version": "24.4.0-beta1", | ||
| "publishConfig": { | ||
@@ -29,3 +29,5 @@ "access": "public" | ||
| "web-types.json", | ||
| "web-types.lit.json" | ||
| "web-types.lit.json", | ||
| "!vaadin-lit-*.d.ts", | ||
| "!vaadin-lit-*.js" | ||
| ], | ||
@@ -42,12 +44,12 @@ "keywords": [ | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/a11y-base": "24.4.0-alpha9", | ||
| "@vaadin/component-base": "24.4.0-alpha9", | ||
| "@vaadin/field-base": "24.4.0-alpha9", | ||
| "@vaadin/input-container": "24.4.0-alpha9", | ||
| "@vaadin/item": "24.4.0-alpha9", | ||
| "@vaadin/lit-renderer": "24.4.0-alpha9", | ||
| "@vaadin/overlay": "24.4.0-alpha9", | ||
| "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9", | ||
| "@vaadin/vaadin-material-styles": "24.4.0-alpha9", | ||
| "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9" | ||
| "@vaadin/a11y-base": "24.4.0-beta1", | ||
| "@vaadin/component-base": "24.4.0-beta1", | ||
| "@vaadin/field-base": "24.4.0-beta1", | ||
| "@vaadin/input-container": "24.4.0-beta1", | ||
| "@vaadin/item": "24.4.0-beta1", | ||
| "@vaadin/lit-renderer": "24.4.0-beta1", | ||
| "@vaadin/overlay": "24.4.0-beta1", | ||
| "@vaadin/vaadin-lumo-styles": "24.4.0-beta1", | ||
| "@vaadin/vaadin-material-styles": "24.4.0-beta1", | ||
| "@vaadin/vaadin-themable-mixin": "24.4.0-beta1" | ||
| }, | ||
@@ -57,3 +59,3 @@ "devDependencies": { | ||
| "@vaadin/testing-helpers": "^0.6.0", | ||
| "@vaadin/text-field": "24.4.0-alpha9", | ||
| "@vaadin/text-field": "24.4.0-beta1", | ||
| "lit": "^3.0.0", | ||
@@ -66,3 +68,3 @@ "sinon": "^13.0.2" | ||
| ], | ||
| "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226" | ||
| "gitHead": "504787f741d677467ae93ca7cd31d84489366a9c" | ||
| } |
@@ -8,3 +8,2 @@ # @vaadin/combo-box | ||
| [](https://www.npmjs.com/package/@vaadin/combo-box) | ||
| [](https://discord.gg/PHmkCKC) | ||
@@ -11,0 +10,0 @@ ```html |
@@ -24,2 +24,3 @@ /** | ||
| observer: '_pageSizeChanged', | ||
| sync: true, | ||
| }, | ||
@@ -34,2 +35,3 @@ | ||
| observer: '_sizeChanged', | ||
| sync: true, | ||
| }, | ||
@@ -54,2 +56,3 @@ | ||
| observer: '_dataProviderChanged', | ||
| sync: true, | ||
| }, | ||
@@ -88,14 +91,7 @@ | ||
| this._scroller.addEventListener('index-requested', (e) => { | ||
| const index = e.detail.index; | ||
| const currentScrollerPos = e.detail.currentScrollerPos; | ||
| const allowedIndexRange = Math.floor(this.pageSize * 1.5); | ||
| // Ignores the indexes, which are being re-sent during scrolling reset, | ||
| // if the corresponding page is around the current scroller position. | ||
| // Otherwise, there might be a last pages duplicates, which cause the | ||
| // loading indicator hanging and blank items | ||
| if (this._shouldSkipIndex(index, allowedIndexRange, currentScrollerPos)) { | ||
| if (!this._shouldFetchData()) { | ||
| return; | ||
| } | ||
| const index = e.detail.index; | ||
| if (index !== undefined) { | ||
@@ -120,15 +116,11 @@ const page = this._getPageForIndex(index); | ||
| this.__keepOverlayOpened = true; | ||
| this._pendingRequests = {}; | ||
| // Immediately mark as loading if this refresh leads to re-fetching pages | ||
| // This prevents some issues with the properties below triggering | ||
| // observers that also rely on the loading state | ||
| this.loading = this._shouldFetchData(); | ||
| // Reset size and internal loading state | ||
| this.size = undefined; | ||
| this.clearCache(); | ||
| this.__keepOverlayOpened = false; | ||
| } | ||
| } | ||
| /** @private */ | ||
| /** @protected */ | ||
| _shouldFetchData() { | ||
@@ -144,2 +136,6 @@ if (!this.dataProvider) { | ||
| _ensureFirstPage(opened) { | ||
| if (!this._shouldFetchData()) { | ||
| return; | ||
| } | ||
| if (opened && this._shouldLoadPage(0)) { | ||
@@ -151,13 +147,4 @@ this._loadPage(0); | ||
| /** @private */ | ||
| _shouldSkipIndex(index, allowedIndexRange, currentScrollerPos) { | ||
| return ( | ||
| currentScrollerPos !== 0 && | ||
| index >= currentScrollerPos - allowedIndexRange && | ||
| index <= currentScrollerPos + allowedIndexRange | ||
| ); | ||
| } | ||
| /** @private */ | ||
| _shouldLoadPage(page) { | ||
| if (!this.filteredItems || this._forceNextRequest) { | ||
| if (this._forceNextRequest) { | ||
| this._forceNextRequest = false; | ||
@@ -164,0 +151,0 @@ return true; |
@@ -63,3 +63,3 @@ /** | ||
| static get observers() { | ||
| return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)']; | ||
| return ['__rendererOrItemChanged(renderer, index, item, selected, focused)', '__updateLabel(label, renderer)']; | ||
| } | ||
@@ -66,0 +66,0 @@ |
@@ -14,2 +14,3 @@ /** | ||
| import type { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js'; | ||
| import type { ComboBoxLightMixinClass } from './vaadin-combo-box-light-mixin.js'; | ||
| import type { ComboBoxDefaultItem, ComboBoxMixinClass } from './vaadin-combo-box-mixin.js'; | ||
@@ -130,9 +131,2 @@ export { | ||
| declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement { | ||
| /** | ||
| * Name of the two-way data-bindable property representing the | ||
| * value of the custom input field. | ||
| * @attr {string} attr-for-value | ||
| */ | ||
| attrForValue: string; | ||
| addEventListener<K extends keyof ComboBoxLightEventMap<TItem>>( | ||
@@ -153,2 +147,3 @@ type: K, | ||
| extends ComboBoxDataProviderMixinClass<TItem>, | ||
| ComboBoxLightMixinClass, | ||
| ComboBoxMixinClass<TItem>, | ||
@@ -155,0 +150,0 @@ KeyboardMixinClass, |
@@ -9,10 +9,6 @@ /** | ||
| import './vaadin-combo-box-scroller.js'; | ||
| import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js'; | ||
| import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js'; | ||
| import { ComboBoxMixin } from './vaadin-combo-box-mixin.js'; | ||
| import { ComboBoxLightMixin } from './vaadin-combo-box-light-mixin.js'; | ||
@@ -67,8 +63,6 @@ /** | ||
| * @extends HTMLElement | ||
| * @mixes ComboBoxDataProviderMixin | ||
| * @mixes ComboBoxMixin | ||
| * @mixes ComboBoxLightMixin | ||
| * @mixes ThemableMixin | ||
| * @mixes ValidateMixin | ||
| */ | ||
| class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixin(ThemableMixin(PolymerElement)))) { | ||
| class ComboBoxLight extends ComboBoxLightMixin(ThemableMixin(PolymerElement)) { | ||
| static get is() { | ||
@@ -99,120 +93,2 @@ return 'vaadin-combo-box-light'; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * Name of the two-way data-bindable property representing the | ||
| * value of the custom input field. | ||
| * @attr {string} attr-for-value | ||
| * @type {string} | ||
| */ | ||
| attrForValue: { | ||
| type: String, | ||
| value: 'value', | ||
| }, | ||
| }; | ||
| } | ||
| /** | ||
| * Used by `InputControlMixin` as a reference to the clear button element. | ||
| * @protected | ||
| * @return {!HTMLElement} | ||
| */ | ||
| get clearElement() { | ||
| return this.querySelector('.clear-button'); | ||
| } | ||
| /** | ||
| * Override this getter from `InputMixin` to allow using | ||
| * an arbitrary property name instead of `value` | ||
| * for accessing the input element's value. | ||
| * | ||
| * @protected | ||
| * @override | ||
| * @return {string} | ||
| */ | ||
| get _inputElementValueProperty() { | ||
| return dashToCamelCase(this.attrForValue); | ||
| } | ||
| /** | ||
| * @protected | ||
| * @override | ||
| * @return {HTMLInputElement | undefined} | ||
| */ | ||
| get _nativeInput() { | ||
| const input = this.inputElement; | ||
| if (input) { | ||
| // Support `<input class="input">` | ||
| if (input instanceof HTMLInputElement) { | ||
| return input; | ||
| } | ||
| // Support `<input>` in light DOM (e.g. `vaadin-text-field`) | ||
| const slottedInput = input.querySelector('input'); | ||
| if (slottedInput) { | ||
| return slottedInput; | ||
| } | ||
| if (input.shadowRoot) { | ||
| // Support `<input>` in Shadow DOM (e.g. `mwc-textfield`) | ||
| const shadowInput = input.shadowRoot.querySelector('input'); | ||
| if (shadowInput) { | ||
| return shadowInput; | ||
| } | ||
| } | ||
| } | ||
| return undefined; | ||
| } | ||
| /** @protected */ | ||
| ready() { | ||
| super.ready(); | ||
| this._toggleElement = this.querySelector('.toggle-button'); | ||
| // Wait until the slotted input DOM is ready | ||
| afterNextRender(this, () => { | ||
| this._setInputElement(this.querySelector('vaadin-text-field,.input')); | ||
| this._revertInputValue(); | ||
| }); | ||
| } | ||
| /** | ||
| * Returns true if the current input value satisfies all constraints (if any). | ||
| * @return {boolean} | ||
| */ | ||
| checkValidity() { | ||
| if (this.inputElement && this.inputElement.validate) { | ||
| return this.inputElement.validate(); | ||
| } | ||
| return super.checkValidity(); | ||
| } | ||
| /** @protected */ | ||
| _isClearButton(event) { | ||
| return ( | ||
| super._isClearButton(event) || | ||
| (event.type === 'input' && !event.isTrusted) || // Fake input event dispatched by clear button | ||
| event.composedPath()[0].getAttribute('part') === 'clear-button' | ||
| ); | ||
| } | ||
| /** | ||
| * @protected | ||
| * @override | ||
| */ | ||
| _shouldRemoveFocus(event) { | ||
| const isBlurringControlButtons = event.target === this._toggleElement || event.target === this.clearElement; | ||
| const isFocusingInputElement = event.relatedTarget && event.relatedTarget === this._nativeInput; | ||
| // prevent closing the overlay when moving focus from clear or toggle buttons to the internal input | ||
| if (isBlurringControlButtons && isFocusingInputElement) { | ||
| return false; | ||
| } | ||
| return super._shouldRemoveFocus(event); | ||
| } | ||
| } | ||
@@ -219,0 +95,0 @@ |
@@ -74,2 +74,3 @@ /** | ||
| reflectToAttribute: true, | ||
| sync: true, | ||
| observer: '_openedChanged', | ||
@@ -84,2 +85,3 @@ }, | ||
| type: Boolean, | ||
| sync: true, | ||
| }, | ||
@@ -109,3 +111,6 @@ | ||
| */ | ||
| renderer: Function, | ||
| renderer: { | ||
| type: Object, | ||
| sync: true, | ||
| }, | ||
@@ -119,2 +124,3 @@ /** | ||
| type: Array, | ||
| sync: true, | ||
| observer: '_itemsChanged', | ||
@@ -145,2 +151,3 @@ }, | ||
| observer: '_filteredItemsChanged', | ||
| sync: true, | ||
| }, | ||
@@ -162,2 +169,3 @@ | ||
| reflectToAttribute: true, | ||
| sync: true, | ||
| }, | ||
@@ -173,2 +181,3 @@ | ||
| value: -1, | ||
| sync: true, | ||
| }, | ||
@@ -184,2 +193,3 @@ | ||
| notify: true, | ||
| sync: true, | ||
| }, | ||
@@ -194,2 +204,3 @@ | ||
| notify: true, | ||
| sync: true, | ||
| }, | ||
@@ -211,2 +222,3 @@ | ||
| observer: '_itemLabelPathChanged', | ||
| sync: true, | ||
| }, | ||
@@ -227,2 +239,3 @@ | ||
| value: 'value', | ||
| sync: true, | ||
| }, | ||
@@ -237,3 +250,6 @@ | ||
| */ | ||
| itemIdPath: String, | ||
| itemIdPath: { | ||
| type: String, | ||
| sync: true, | ||
| }, | ||
@@ -255,2 +271,3 @@ /** | ||
| type: Array, | ||
| sync: true, | ||
| }, | ||
@@ -262,3 +279,6 @@ | ||
| /** @private */ | ||
| _scroller: Object, | ||
| _scroller: { | ||
| type: Object, | ||
| sync: true, | ||
| }, | ||
@@ -268,4 +288,11 @@ /** @private */ | ||
| type: Boolean, | ||
| sync: true, | ||
| observer: '_overlayOpenedChanged', | ||
| }, | ||
| /** @private */ | ||
| __keepOverlayOpened: { | ||
| type: Boolean, | ||
| sync: true, | ||
| }, | ||
| }; | ||
@@ -277,4 +304,4 @@ } | ||
| '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)', | ||
| '_openedOrItemsChanged(opened, _dropdownItems, loading)', | ||
| '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)', | ||
| '_openedOrItemsChanged(opened, _dropdownItems, loading, __keepOverlayOpened)', | ||
| '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, _theme)', | ||
| ]; | ||
@@ -432,2 +459,14 @@ } | ||
| /** | ||
| * Override LitElement lifecycle callback to handle filter property change. | ||
| * @param {Object} props | ||
| */ | ||
| updated(props) { | ||
| super.updated(props); | ||
| if (props.has('filter')) { | ||
| this._filterChanged(this.filter); | ||
| } | ||
| } | ||
| /** @private */ | ||
@@ -461,9 +500,13 @@ _initOverlay() { | ||
| _initScroller(host) { | ||
| const scrollerTag = `${this._tagNamePrefix}-scroller`; | ||
| const scroller = document.createElement(`${this._tagNamePrefix}-scroller`); | ||
| scroller.owner = host || this; | ||
| scroller.getItemLabel = this._getItemLabel.bind(this); | ||
| scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged); | ||
| const overlay = this._overlayElement; | ||
| overlay.renderer = (root) => { | ||
| if (!root.firstChild) { | ||
| root.appendChild(document.createElement(scrollerTag)); | ||
| if (!root.innerHTML) { | ||
| root.appendChild(scroller); | ||
| } | ||
@@ -475,8 +518,2 @@ }; | ||
| const scroller = overlay.querySelector(scrollerTag); | ||
| scroller.owner = host || this; | ||
| scroller.getItemLabel = this._getItemLabel.bind(this); | ||
| scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged); | ||
| // Trigger the observer to set properties | ||
@@ -505,2 +542,13 @@ this._scroller = scroller; | ||
| }); | ||
| // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set. | ||
| // This means for the first opening, properties won't be set synchronously. | ||
| // Call `performUpdate()` in this case to mimic the Polymer version logic. | ||
| if (scroller.performUpdate && !scroller.hasUpdated) { | ||
| try { | ||
| scroller.performUpdate(); | ||
| } catch (_) { | ||
| // Suppress errors in synchronous tests for pre-opened combo-box. | ||
| } | ||
| } | ||
| } | ||
@@ -510,6 +558,6 @@ } | ||
| /** @private */ | ||
| _openedOrItemsChanged(opened, items, loading) { | ||
| _openedOrItemsChanged(opened, items, loading, keepOverlayOpened) { | ||
| // Close the overlay if there are no items to display. | ||
| // See https://github.com/vaadin/vaadin-combo-box/pull/964 | ||
| this._overlayOpened = !!(opened && (loading || (items && items.length))); | ||
| this._overlayOpened = opened && (keepOverlayOpened || loading || !!(items && items.length)); | ||
| } | ||
@@ -566,3 +614,2 @@ | ||
| if (opened) { | ||
| this._openedWithFocusRing = this.hasAttribute('focus-ring'); | ||
| // For touch devices, we don't want to popup virtual keyboard | ||
@@ -579,5 +626,2 @@ // unless input element is explicitly focused by the user. | ||
| this._onClosed(); | ||
| if (this._openedWithFocusRing && this._isInputFocused()) { | ||
| this.setAttribute('focus-ring', ''); | ||
| } | ||
| } | ||
@@ -584,0 +628,0 @@ |
@@ -24,2 +24,3 @@ /** | ||
| type: Array, | ||
| sync: true, | ||
| observer: '__itemsChanged', | ||
@@ -34,2 +35,3 @@ }, | ||
| type: Number, | ||
| sync: true, | ||
| observer: '__focusedIndexChanged', | ||
@@ -43,2 +45,3 @@ }, | ||
| type: Boolean, | ||
| sync: true, | ||
| observer: '__loadingChanged', | ||
@@ -53,2 +56,3 @@ }, | ||
| type: Boolean, | ||
| sync: true, | ||
| observer: '__openedChanged', | ||
@@ -62,2 +66,3 @@ }, | ||
| type: Object, | ||
| sync: true, | ||
| observer: '__selectedItemChanged', | ||
@@ -92,2 +97,3 @@ }, | ||
| type: Object, | ||
| sync: true, | ||
| observer: '__rendererChanged', | ||
@@ -141,10 +147,2 @@ }, | ||
| this.__patchWheelOverScrolling(); | ||
| this.__virtualizer = new Virtualizer({ | ||
| createElements: this.__createElements.bind(this), | ||
| updateElement: this._updateElement.bind(this), | ||
| elementsContainer: this, | ||
| scrollTarget: this, | ||
| scrollContainer: this.$.selector, | ||
| }); | ||
| } | ||
@@ -156,5 +154,7 @@ | ||
| requestContentUpdate() { | ||
| if (this.__virtualizer) { | ||
| this.__virtualizer.update(); | ||
| if (!this.opened) { | ||
| return; | ||
| } | ||
| this.__virtualizer.update(); | ||
| } | ||
@@ -168,3 +168,3 @@ | ||
| scrollIntoView(index) { | ||
| if (!(this.opened && index >= 0)) { | ||
| if (!this.__virtualizer || !(this.opened && index >= 0)) { | ||
| return; | ||
@@ -221,6 +221,17 @@ } | ||
| /** @private */ | ||
| __initVirtualizer() { | ||
| this.__virtualizer = new Virtualizer({ | ||
| createElements: this.__createElements.bind(this), | ||
| updateElement: this._updateElement.bind(this), | ||
| elementsContainer: this, | ||
| scrollTarget: this, | ||
| scrollContainer: this.$.selector, | ||
| reorderElements: true, | ||
| }); | ||
| } | ||
| /** @private */ | ||
| __itemsChanged(items) { | ||
| if (this.__virtualizer && items) { | ||
| this.__virtualizer.size = items.length; | ||
| this.__virtualizer.flush(); | ||
| if (items && this.__virtualizer) { | ||
| this.__setVirtualizerItems(items); | ||
| this.requestContentUpdate(); | ||
@@ -238,2 +249,10 @@ } | ||
| if (opened) { | ||
| if (!this.__virtualizer) { | ||
| this.__initVirtualizer(); | ||
| if (this.items) { | ||
| this.__setVirtualizerItems(this.items); | ||
| } | ||
| } | ||
| this.requestContentUpdate(); | ||
@@ -244,2 +263,8 @@ } | ||
| /** @private */ | ||
| __setVirtualizerItems(items) { | ||
| this.__virtualizer.size = items.length; | ||
| this.__virtualizer.flush(); | ||
| } | ||
| /** @private */ | ||
| __selectedItemChanged() { | ||
@@ -300,2 +325,8 @@ this.requestContentUpdate(); | ||
| // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set. | ||
| // However, this causes issues with virtualizer. So we enforce sync update. | ||
| if (el.performUpdate && !el.hasUpdated) { | ||
| el.performUpdate(); | ||
| } | ||
| el.id = `${this.__hostTagName}-item-${index}`; | ||
@@ -361,3 +392,2 @@ el.setAttribute('role', index !== undefined ? 'option' : false); | ||
| index, | ||
| currentScrollerPos: this._oldScrollerPosition, | ||
| }, | ||
@@ -364,0 +394,0 @@ }), |
@@ -16,6 +16,4 @@ import '@vaadin/vaadin-lumo-styles/color.js'; | ||
| @media (any-hover: hover) { | ||
| :host([focused]:not([disabled])) { | ||
| box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); | ||
| } | ||
| :host([focused]:not([disabled])) { | ||
| box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); | ||
| } | ||
@@ -22,0 +20,0 @@ `; |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/combo-box", | ||
| "version": "24.4.0-alpha9", | ||
| "version": "24.4.0-beta1", | ||
| "description-markup": "markdown", | ||
@@ -463,3 +463,3 @@ "contributions": { | ||
| "name": "vaadin-combo-box", | ||
| "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "attributes": [ | ||
@@ -466,0 +466,0 @@ { |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/combo-box", | ||
| "version": "24.4.0-alpha9", | ||
| "version": "24.4.0-beta1", | ||
| "description-markup": "markdown", | ||
@@ -250,3 +250,3 @@ "framework": "lit", | ||
| "name": "vaadin-combo-box", | ||
| "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "extension": true, | ||
@@ -253,0 +253,0 @@ "attributes": [ |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by6.69%
246065
- Number of package files
- increased by20.37%
65
- Lines of code
- increased by8.47%
6030
Worsened metrics
- Number of lines in readme file
- decreased by-1.32%
75
Dependency changes
+ Added@vaadin/a11y-base@24.4.0-beta1(transitive)
+ Added@vaadin/component-base@24.4.0-beta1(transitive)
+ Added@vaadin/field-base@24.4.0-beta1(transitive)
+ Added@vaadin/icon@24.4.0-beta1(transitive)
+ Added@vaadin/input-container@24.4.0-beta1(transitive)
+ Added@vaadin/item@24.4.0-beta1(transitive)
+ Added@vaadin/lit-renderer@24.4.0-beta1(transitive)
+ Added@vaadin/overlay@24.4.0-beta1(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.4.0-beta1(transitive)
+ Added@vaadin/vaadin-material-styles@24.4.0-beta1(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.4.0-beta1(transitive)
- Removed@vaadin/a11y-base@24.4.0-alpha9(transitive)
- Removed@vaadin/component-base@24.4.0-alpha9(transitive)
- Removed@vaadin/field-base@24.4.0-alpha9(transitive)
- Removed@vaadin/icon@24.4.0-alpha9(transitive)
- Removed@vaadin/input-container@24.4.0-alpha9(transitive)
- Removed@vaadin/item@24.4.0-alpha9(transitive)
- Removed@vaadin/lit-renderer@24.4.0-alpha9(transitive)
- Removed@vaadin/overlay@24.4.0-alpha9(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.4.0-alpha9(transitive)
- Removed@vaadin/vaadin-material-styles@24.4.0-alpha9(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.4.0-alpha9(transitive)
Updated@vaadin/item@24.4.0-beta1
Updated@vaadin/overlay@24.4.0-beta1