Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/select

Package Overview
Dependencies
Maintainers
12
Versions
408
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/select - npm Package Compare versions

Comparing version 24.5.0-alpha5 to 24.5.0-alpha6

src/vaadin-select-overlay-mixin.js

28

package.json
{
"name": "@vaadin/select",
"version": "24.5.0-alpha5",
"version": "24.5.0-alpha6",
"publishConfig": {

@@ -42,14 +42,14 @@ "access": "public"

"@polymer/polymer": "^3.2.0",
"@vaadin/a11y-base": "24.5.0-alpha5",
"@vaadin/button": "24.5.0-alpha5",
"@vaadin/component-base": "24.5.0-alpha5",
"@vaadin/field-base": "24.5.0-alpha5",
"@vaadin/input-container": "24.5.0-alpha5",
"@vaadin/item": "24.5.0-alpha5",
"@vaadin/list-box": "24.5.0-alpha5",
"@vaadin/lit-renderer": "24.5.0-alpha5",
"@vaadin/overlay": "24.5.0-alpha5",
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha5",
"@vaadin/vaadin-material-styles": "24.5.0-alpha5",
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha5",
"@vaadin/a11y-base": "24.5.0-alpha6",
"@vaadin/button": "24.5.0-alpha6",
"@vaadin/component-base": "24.5.0-alpha6",
"@vaadin/field-base": "24.5.0-alpha6",
"@vaadin/input-container": "24.5.0-alpha6",
"@vaadin/item": "24.5.0-alpha6",
"@vaadin/list-box": "24.5.0-alpha6",
"@vaadin/lit-renderer": "24.5.0-alpha6",
"@vaadin/overlay": "24.5.0-alpha6",
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha6",
"@vaadin/vaadin-material-styles": "24.5.0-alpha6",
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha6",
"lit": "^3.0.0"

@@ -66,3 +66,3 @@ },

],
"gitHead": "4e57d240ababf0c2db9d674891b90bdf3812e6ae"
"gitHead": "c5f541dbe961a994730d4c60472ae957bf6b4c12"
}

19

src/vaadin-lit-select-overlay.js

@@ -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);

19

src/vaadin-select-overlay.js

@@ -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);

1

src/vaadin-select.js

@@ -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` |
*

@@ -91,0 +92,0 @@ * `<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.

4

theme/lumo/vaadin-select-styles.js

@@ -97,6 +97,2 @@ /**

[part~='overlay'] {
min-width: var(--vaadin-select-text-field-width);
}
/* Small viewport adjustment */

@@ -103,0 +99,0 @@ :host([phone]) {

8

theme/material/vaadin-select-styles.js

@@ -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' });

4

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/select",
"version": "24.5.0-alpha5",
"version": "24.5.0-alpha6",
"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-alpha5/#/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-alpha5/#/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-alpha5/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha5/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha6/#/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": [

@@ -14,0 +14,0 @@ {

4

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/select",
"version": "24.5.0-alpha5",
"version": "24.5.0-alpha6",
"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-alpha5/#/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-alpha5/#/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-alpha5/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha5/#/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-alpha6/#/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-alpha6/#/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-alpha6/#/elements/vaadin-button).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha6/#/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,

@@ -22,0 +22,0 @@ "attributes": [

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc