New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/list-box
Advanced tools
@vaadin/list-box - npm Package Compare versions
Comparing version 22.0.0-beta1 to 22.0.0-beta2
| { | ||
| "name": "@vaadin/list-box", | ||
| "version": "22.0.0-beta1", | ||
| "version": "22.0.0-beta2", | ||
| "publishConfig": { | ||
@@ -36,8 +36,8 @@ "access": "public" | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/component-base": "22.0.0-beta1", | ||
| "@vaadin/item": "22.0.0-beta1", | ||
| "@vaadin/vaadin-list-mixin": "22.0.0-beta1", | ||
| "@vaadin/vaadin-lumo-styles": "22.0.0-beta1", | ||
| "@vaadin/vaadin-material-styles": "22.0.0-beta1", | ||
| "@vaadin/vaadin-themable-mixin": "22.0.0-beta1" | ||
| "@vaadin/component-base": "22.0.0-beta2", | ||
| "@vaadin/item": "22.0.0-beta2", | ||
| "@vaadin/vaadin-list-mixin": "22.0.0-beta2", | ||
| "@vaadin/vaadin-lumo-styles": "22.0.0-beta2", | ||
| "@vaadin/vaadin-material-styles": "22.0.0-beta2", | ||
| "@vaadin/vaadin-themable-mixin": "22.0.0-beta2" | ||
| }, | ||
@@ -49,3 +49,3 @@ "devDependencies": { | ||
| }, | ||
| "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e" | ||
| "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4" | ||
| } |
@@ -1,11 +0,8 @@ | ||
| # <vaadin-list-box> | ||
| # @vaadin/list-box | ||
| [Live Demo ↗](https://vaadin.com/components/vaadin-list-box/html-examples) | ||
| | | ||
| [API documentation ↗](https://vaadin.com/components/vaadin-list-box/html-api) | ||
| A web component for selecting one or more values from a scrollable list of items. | ||
| [<vaadin-list-box>](https://vaadin.com/components/vaadin-list-box) is a Web Component providing reusable list boxes, part of the [Vaadin components](https://vaadin.com/components). | ||
| [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/list-box) | ||
| [](https://www.npmjs.com/package/@vaadin/list-box) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-list-box) | ||
| [](https://discord.gg/PHmkCKC) | ||
@@ -15,47 +12,50 @@ | ||
| <vaadin-list-box selected="2"> | ||
| <b>Select an Item</b> | ||
| <vaadin-item>Item one</vaadin-item> | ||
| <vaadin-item>Item two</vaadin-item> | ||
| <b>Select an list-box</b> | ||
| <vaadin-list-box>list-box one</vaadin-list-box> | ||
| <vaadin-list-box>list-box two</vaadin-list-box> | ||
| <hr /> | ||
| <vaadin-item>Item three</vaadin-item> | ||
| <vaadin-item>Item four</vaadin-item> | ||
| <vaadin-list-box>list-box three</vaadin-list-box> | ||
| <vaadin-list-box>list-box four</vaadin-list-box> | ||
| </vaadin-list-box> | ||
| ``` | ||
| [<img src="https://raw.githubusercontent.com/vaadin/vaadin-list-box/master/screenshot.png" width="150" alt="Screenshot of vaadin-list-box">](https://vaadin.com/components/vaadin-list-box) | ||
| [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/list-box/screenshot.png" width="150" alt="Screenshot of vaadin-list-box">](https://vaadin.com/docs/latest/ds/components/list-box) | ||
| ## Installation | ||
| Install `vaadin-list-box`: | ||
| Install the component: | ||
| ```sh | ||
| npm i @vaadin/list-box --save | ||
| npm i @vaadin/list-box | ||
| ``` | ||
| Once installed, import it in your application: | ||
| Once installed, import the component in your application: | ||
| ```js | ||
| import '@vaadin/list-box/vaadin-list-box.js'; | ||
| import '@vaadin/list-box'; | ||
| ``` | ||
| ## Getting started | ||
| ## Themes | ||
| Vaadin components use the Lumo theme by default. | ||
| Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material. | ||
| The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/list-box/vaadin-list-box.js) of the package uses Lumo theme. | ||
| To use the Material theme, import the correspondent file from the `theme/material` folder. | ||
| To use the Material theme, import the component from the `theme/material` folder: | ||
| ## Entry points | ||
| ```js | ||
| import '@vaadin/list-box/theme/material/vaadin-list-box.js'; | ||
| ``` | ||
| - The component with the Lumo theme: | ||
| You can also import the Lumo version of the component explicitly: | ||
| `theme/lumo/vaadin-list-box.js` | ||
| ```js | ||
| import '@vaadin/list-box/theme/lumo/vaadin-list-box.js'; | ||
| ``` | ||
| - The component with the Material theme: | ||
| Finally, you can import the un-themed component from the `src` folder to get a minimal starting point: | ||
| `theme/material/vaadin-list-box.js` | ||
| ```js | ||
| import '@vaadin/list-box/src/vaadin-list-box.js'; | ||
| ``` | ||
| - Alias for `theme/lumo/vaadin-list-box.js`: | ||
| `vaadin-list-box.js` | ||
| ## Contributing | ||
@@ -69,2 +69,3 @@ | ||
| Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. | ||
| Vaadin collects usage statistics at development time to improve this product. | ||
| For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. |
@@ -7,4 +7,4 @@ /** | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
| import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js'; | ||
@@ -65,4 +65,2 @@ /** | ||
| readonly _scrollerElement: HTMLElement; | ||
| addEventListener<K extends keyof ListBoxEventMap>( | ||
@@ -69,0 +67,0 @@ type: K, |
@@ -6,6 +6,6 @@ /** | ||
| */ | ||
| import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
| import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js'; | ||
@@ -12,0 +12,0 @@ /** |
@@ -1,5 +0,5 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-lumo-styles/color.js'; | ||
| import '@vaadin/vaadin-lumo-styles/spacing.js'; | ||
| import '@vaadin/vaadin-lumo-styles/style.js'; | ||
| import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -6,0 +6,0 @@ registerStyles( |
@@ -1,4 +0,4 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-material-styles/font-icons.js'; | ||
| import '@vaadin/vaadin-material-styles/color.js'; | ||
| import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -5,0 +5,0 @@ registerStyles( |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.09%
21637
- Number of lines in readme file
- increased by1.45%
70
Worsened metrics
- Lines of code
- decreased by-0.43%
229
Dependency changes
+ Added@open-wc/dedupe-mixin@1.4.0(transitive)
+ Added@vaadin/component-base@22.0.0-beta2(transitive)
+ Added@vaadin/icon@22.0.0-beta2(transitive)
+ Added@vaadin/item@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-list-mixin@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-lumo-styles@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-material-styles@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-themable-mixin@22.0.0-beta2(transitive)
- Removed@vaadin/component-base@22.0.0-beta1(transitive)
- Removed@vaadin/icon@22.0.0-beta1(transitive)
- Removed@vaadin/item@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-list-mixin@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-lumo-styles@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-material-styles@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-themable-mixin@22.0.0-beta1(transitive)
Updated@vaadin/item@22.0.0-beta2