Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vaadin/select
Advanced tools
@vaadin/select - npm Package Compare versions
Comparing version 24.5.0-alpha1 to 24.5.0-alpha10
| { | ||
| "name": "@vaadin/select", | ||
| "version": "24.5.0-alpha1", | ||
| "version": "24.5.0-alpha10", | ||
| "publishConfig": { | ||
@@ -42,20 +42,20 @@ "access": "public" | ||
| "@polymer/polymer": "^3.2.0", | ||
| "@vaadin/a11y-base": "24.5.0-alpha1", | ||
| "@vaadin/button": "24.5.0-alpha1", | ||
| "@vaadin/component-base": "24.5.0-alpha1", | ||
| "@vaadin/field-base": "24.5.0-alpha1", | ||
| "@vaadin/input-container": "24.5.0-alpha1", | ||
| "@vaadin/item": "24.5.0-alpha1", | ||
| "@vaadin/list-box": "24.5.0-alpha1", | ||
| "@vaadin/lit-renderer": "24.5.0-alpha1", | ||
| "@vaadin/overlay": "24.5.0-alpha1", | ||
| "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1", | ||
| "@vaadin/vaadin-material-styles": "24.5.0-alpha1", | ||
| "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1", | ||
| "@vaadin/a11y-base": "24.5.0-alpha10", | ||
| "@vaadin/button": "24.5.0-alpha10", | ||
| "@vaadin/component-base": "24.5.0-alpha10", | ||
| "@vaadin/field-base": "24.5.0-alpha10", | ||
| "@vaadin/input-container": "24.5.0-alpha10", | ||
| "@vaadin/item": "24.5.0-alpha10", | ||
| "@vaadin/list-box": "24.5.0-alpha10", | ||
| "@vaadin/lit-renderer": "24.5.0-alpha10", | ||
| "@vaadin/overlay": "24.5.0-alpha10", | ||
| "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10", | ||
| "@vaadin/vaadin-material-styles": "24.5.0-alpha10", | ||
| "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@esm-bundle/chai": "^4.3.4", | ||
| "@vaadin/testing-helpers": "^0.6.0", | ||
| "sinon": "^13.0.2" | ||
| "@vaadin/chai-plugins": "24.5.0-alpha10", | ||
| "@vaadin/testing-helpers": "^1.0.0", | ||
| "sinon": "^18.0.0" | ||
| }, | ||
@@ -66,3 +66,3 @@ "web-types": [ | ||
| ], | ||
| "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a" | ||
| "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51" | ||
| } |
@@ -73,3 +73,3 @@ # @vaadin/select | ||
| Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. | ||
| Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. | ||
@@ -76,0 +76,0 @@ ## License |
@@ -8,8 +8,6 @@ /** | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js'; | ||
| import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js'; | ||
| import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { SelectOverlayMixin } from './vaadin-select-overlay-mixin.js'; | ||
@@ -20,9 +18,7 @@ /** | ||
| * @extends HTMLElement | ||
| * @mixes PositionMixin | ||
| * @mixes OverlayMixin | ||
| * @mixes DirMixin | ||
| * @mixes SelectOverlayMixin | ||
| * @mixes ThemableMixin | ||
| * @protected | ||
| */ | ||
| class SelectOverlay extends PositionMixin(OverlayMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement))))) { | ||
| class SelectOverlay extends SelectOverlayMixin(ThemableMixin(PolylitMixin(LitElement))) { | ||
| static get is() { | ||
@@ -41,2 +37,6 @@ return 'vaadin-select-overlay'; | ||
| :host(:not([phone])) [part='overlay'] { | ||
| min-width: var(--vaadin-select-overlay-width, var(--vaadin-select-text-field-width)); | ||
| } | ||
| @media (forced-colors: active) { | ||
@@ -81,9 +81,4 @@ [part='overlay'] { | ||
| } | ||
| /** @protected */ | ||
| _getMenuElement() { | ||
| return Array.from(this.children).find((el) => el.localName !== 'style'); | ||
| } | ||
| } | ||
| defineCustomElement(SelectOverlay); |
@@ -93,2 +93,3 @@ /** | ||
| theme="${this._theme}" | ||
| ?no-vertical-overlap="${this.noVerticalOverlap}" | ||
| @opened-changed="${this._onOpenedChanged}" | ||
@@ -95,0 +96,0 @@ @vaadin-overlay-open="${this._onOverlayOpen}" |
@@ -106,2 +106,10 @@ /** | ||
| /** | ||
| * Defines whether the overlay should overlap the target element | ||
| * in the y-axis, or be positioned right above/below it. | ||
| * | ||
| * @attr {boolean} no-vertical-overlap | ||
| */ | ||
| noVerticalOverlap: boolean; | ||
| /** | ||
| * Requests an update for the content of the select. | ||
@@ -108,0 +116,0 @@ * While performing the update, it invokes the renderer passed in the `renderer` property. |
@@ -130,2 +130,13 @@ /** | ||
| /** | ||
| * Defines whether the overlay should overlap the target element | ||
| * in the y-axis, or be positioned right above/below it. | ||
| * | ||
| * @attr {boolean} no-vertical-overlap | ||
| */ | ||
| noVerticalOverlap: { | ||
| type: Boolean, | ||
| value: false, | ||
| }, | ||
| /** @private */ | ||
@@ -371,3 +382,2 @@ _phone: Boolean, | ||
| } else if (wasOpened) { | ||
| this.focus(); | ||
| if (this._openedWithFocusRing) { | ||
@@ -544,3 +554,5 @@ this.setAttribute('focus-ring', ''); | ||
| } | ||
| return Boolean(item.hasAttribute('label') ? item.getAttribute('label') : item.textContent.trim()); | ||
| const hasText = Boolean(item.hasAttribute('label') ? item.getAttribute('label') : item.textContent.trim()); | ||
| const hasChildren = item.childElementCount > 0; | ||
| return hasText || hasChildren; | ||
| } | ||
@@ -547,0 +559,0 @@ |
@@ -8,7 +8,5 @@ /** | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
| import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js'; | ||
| import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js'; | ||
| import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js'; | ||
| import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { SelectOverlayMixin } from './vaadin-select-overlay-mixin.js'; | ||
@@ -21,2 +19,6 @@ const selectOverlayStyles = css` | ||
| :host(:not([phone])) [part='overlay'] { | ||
| min-width: var(--vaadin-select-overlay-width, var(--vaadin-select-text-field-width)); | ||
| } | ||
| @media (forced-colors: active) { | ||
@@ -38,9 +40,7 @@ [part='overlay'] { | ||
| * @extends HTMLElement | ||
| * @mixes DirMixin | ||
| * @mixes OverlayMixin | ||
| * @mixes PositionMixin | ||
| * @mixes SelectOverlayMixin | ||
| * @mixes ThemableMixin | ||
| * @private | ||
| */ | ||
| export class SelectOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) { | ||
| export class SelectOverlay extends SelectOverlayMixin(ThemableMixin(PolymerElement)) { | ||
| static get is() { | ||
@@ -81,9 +81,4 @@ return 'vaadin-select-overlay'; | ||
| } | ||
| /** @protected */ | ||
| _getMenuElement() { | ||
| return Array.from(this.children).find((el) => el.localName !== 'style'); | ||
| } | ||
| } | ||
| defineCustomElement(SelectOverlay); |
@@ -89,2 +89,3 @@ /** | ||
| * `--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` | | ||
| * `--vaadin-select-overlay-width` | Width of the overlay | `vaadin-select-overlay` | | ||
| * | ||
@@ -188,2 +189,3 @@ * `<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`. | ||
| theme$="[[_theme]]" | ||
| no-vertical-overlap$="[[noVerticalOverlap]]" | ||
| on-vaadin-overlay-open="_onOverlayOpen" | ||
@@ -190,0 +192,0 @@ ></vaadin-select-overlay> |
@@ -97,6 +97,2 @@ /** | ||
| [part~='overlay'] { | ||
| min-width: var(--vaadin-select-text-field-width); | ||
| } | ||
| /* Small viewport adjustment */ | ||
@@ -114,2 +110,10 @@ :host([phone]) { | ||
| :host([no-vertical-overlap][top-aligned]) [part='overlay'] { | ||
| margin-block-start: var(--lumo-space-xs); | ||
| } | ||
| :host([no-vertical-overlap][bottom-aligned]) [part='overlay'] { | ||
| margin-block-end: var(--lumo-space-xs); | ||
| } | ||
| :host([theme~='align-left']) { | ||
@@ -116,0 +120,0 @@ text-align: left; |
@@ -78,8 +78,2 @@ /** | ||
| const selectOverlay = css` | ||
| [part='overlay'] { | ||
| min-width: var(--vaadin-select-text-field-width); | ||
| } | ||
| `; | ||
| registerStyles('vaadin-select-overlay', [menuOverlay, selectOverlay], { moduleId: 'material-select-overlay' }); | ||
| registerStyles('vaadin-select-overlay', [menuOverlay], { moduleId: 'material-select-overlay' }); |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/select", | ||
| "version": "24.5.0-alpha1", | ||
| "version": "24.5.0-alpha10", | ||
| "description-markup": "markdown", | ||
@@ -11,3 +11,3 @@ "contributions": { | ||
| "name": "vaadin-select", | ||
| "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Target element | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width` | Default width of the field | :host | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly 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.5.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\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 select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Target element | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width` | Default width of the field | :host | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n`--vaadin-select-overlay-width` | Width of the overlay | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly 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.5.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\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 select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "attributes": [ | ||
@@ -174,2 +174,13 @@ { | ||
| { | ||
| "name": "no-vertical-overlap", | ||
| "description": "Defines whether the overlay should overlap the target element\nin the y-axis, or be positioned right above/below it.", | ||
| "value": { | ||
| "type": [ | ||
| "boolean", | ||
| "null", | ||
| "undefined" | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "name": "theme", | ||
@@ -365,2 +376,13 @@ "description": "The theme variants to apply to the component.", | ||
| } | ||
| }, | ||
| { | ||
| "name": "noVerticalOverlap", | ||
| "description": "Defines whether the overlay should overlap the target element\nin the y-axis, or be positioned right above/below it.", | ||
| "value": { | ||
| "type": [ | ||
| "boolean", | ||
| "null", | ||
| "undefined" | ||
| ] | ||
| } | ||
| } | ||
@@ -367,0 +389,0 @@ ], |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/select", | ||
| "version": "24.5.0-alpha1", | ||
| "version": "24.5.0-alpha10", | ||
| "description-markup": "markdown", | ||
@@ -19,3 +19,3 @@ "framework": "lit", | ||
| "name": "vaadin-select", | ||
| "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Target element | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width` | Default width of the field | :host | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly 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.5.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\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 select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Target element | Default\n-----------------------------------|------------------------------|----------------------------------\n`--vaadin-field-default-width` | Default width of the field | :host | `12em`\n`--vaadin-select-text-field-width` | Effective width of the field | `vaadin-select-overlay` |\n`--vaadin-select-overlay-width` | Width of the overlay | `vaadin-select-overlay` |\n\n`<vaadin-select>` provides mostly 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.5.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\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 select is open | :host\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the button.\n\nNote: the `theme` attribute value set on `<vaadin-select>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "extension": true, | ||
@@ -66,2 +66,9 @@ "attributes": [ | ||
| { | ||
| "name": "?noVerticalOverlap", | ||
| "description": "Defines whether the overlay should overlap the target element\nin the y-axis, or be positioned right above/below it.", | ||
| "value": { | ||
| "kind": "expression" | ||
| } | ||
| }, | ||
| { | ||
| "name": ".label", | ||
@@ -68,0 +75,0 @@ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by2.62%
123192
- Number of package files
- increased by2.17%
47
- Lines of code
- increased by2.88%
2821
Dependency changes
+ Added@vaadin/a11y-base@24.5.0-alpha10(transitive)
+ Added@vaadin/button@24.5.0-alpha10(transitive)
+ Added@vaadin/component-base@24.5.0-alpha10(transitive)
+ Added@vaadin/field-base@24.5.0-alpha10(transitive)
+ Added@vaadin/icon@24.5.0-alpha10(transitive)
+ Added@vaadin/input-container@24.5.0-alpha10(transitive)
+ Added@vaadin/item@24.5.0-alpha10(transitive)
+ Added@vaadin/list-box@24.5.0-alpha10(transitive)
+ Added@vaadin/lit-renderer@24.5.0-alpha10(transitive)
+ Added@vaadin/overlay@24.5.0-alpha10(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.5.0-alpha10(transitive)
+ Added@vaadin/vaadin-material-styles@24.5.0-alpha10(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.5.0-alpha10(transitive)
- Removed@vaadin/a11y-base@24.5.0-alpha1(transitive)
- Removed@vaadin/button@24.5.0-alpha1(transitive)
- Removed@vaadin/component-base@24.5.0-alpha1(transitive)
- Removed@vaadin/field-base@24.5.0-alpha1(transitive)
- Removed@vaadin/icon@24.5.0-alpha1(transitive)
- Removed@vaadin/input-container@24.5.0-alpha1(transitive)
- Removed@vaadin/item@24.5.0-alpha1(transitive)
- Removed@vaadin/list-box@24.5.0-alpha1(transitive)
- Removed@vaadin/lit-renderer@24.5.0-alpha1(transitive)
- Removed@vaadin/overlay@24.5.0-alpha1(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.5.0-alpha1(transitive)
- Removed@vaadin/vaadin-material-styles@24.5.0-alpha1(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.5.0-alpha1(transitive)
Updated@vaadin/item@24.5.0-alpha10