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
0
Versions
398
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-alpha3 to 24.5.0-alpha4

28

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

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

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

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

],
"gitHead": "9ccd96c77a1568e625fa44f6809e765c0ba91403"
"gitHead": "a2cd3079183a097b793073eeffd3bd59dec2b664"
}

1

src/vaadin-lit-select.js

@@ -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}"

8

src/vaadin-select-base-mixin.d.ts

@@ -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.

15

src/vaadin-select-base-mixin.js

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

@@ -543,3 +554,5 @@ _phone: Boolean,

}
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;
}

@@ -546,0 +559,0 @@

1

src/vaadin-select.js

@@ -187,2 +187,3 @@ /**

theme$="[[_theme]]"
no-vertical-overlap$="[[noVerticalOverlap]]"
on-vaadin-overlay-open="_onOverlayOpen"

@@ -189,0 +190,0 @@ ></vaadin-select-overlay>

8

theme/lumo/vaadin-select-styles.js

@@ -113,2 +113,10 @@ /**

: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']) {

@@ -115,0 +123,0 @@ text-align: left;

26

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

11

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

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