@vaadin/vaadin-list-box - npm Package Compare versions

Comparing version 22.0.0-alpha1 to 22.0.0-alpha10

package.json

		{
		"name": "@vaadin/vaadin-list-box",
		"version": "22.0.0-alpha1",
		"version": "22.0.0-alpha10",
		"publishConfig": {
		"access": "public"
		},
		"description": "vaadin-list-box",
		"license": "Apache-2.0",
		"repository": {
		"type": "git",
		"url": "https://github.com/vaadin/web-components.git",
		"directory": "packages/vaadin-list-box"
		},
		"author": "Vaadin Ltd",
		"homepage": "https://vaadin.com/components",
		"bugs": {
		"url": "https://github.com/vaadin/vaadin-list-box/issues"
		},
		"main": "vaadin-list-box.js",
		"module": "vaadin-list-box.js",
		"repository": "vaadin/vaadin-list-box",
		"files": [
		"src",
		"theme",
		"vaadin-*.d.ts",
		"vaadin-*.js"
		],
		"keywords": [
		@@ -15,32 +34,6 @@ "Vaadin",
		],
		"author": "Vaadin Ltd",
		"license": "Apache-2.0",
		"bugs": {
		"url": "https://github.com/vaadin/vaadin-list-box/issues"
		},
		"homepage": "https://vaadin.com/components",
		"files": [
		"vaadin-*.d.ts",
		"vaadin-*.js",
		"src",
		"theme"
		],
		"dependencies": {
		"@polymer/polymer": "^3.0.0",
		"@vaadin/vaadin-element-mixin": "^22.0.0-alpha1",
		"@vaadin/vaadin-item": "^22.0.0-alpha1",
		"@vaadin/vaadin-list-mixin": "^22.0.0-alpha1",
		"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha1",
		"@vaadin/vaadin-material-styles": "^22.0.0-alpha1",
		"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
		"@vaadin/list-box": "22.0.0-alpha10"
		},
		"devDependencies": {
		"@esm-bundle/chai": "^4.1.5",
		"@vaadin/testing-helpers": "^0.2.1",
		"sinon": "^9.2.1"
		},
		"publishConfig": {
		"access": "public"
		},
		"gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
		"gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
		}

README.md

		@@ -10,17 +10,14 @@ # <vaadin-list-box>
		[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-list-box)](https://www.npmjs.com/package/@vaadin/vaadin-list-box)
		[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-list-box)
		[![Build Status](https://travis-ci.org/vaadin/vaadin-list-box.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-list-box)
		[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-list-box)
		[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-list-box.svg)](https://vaadin.com/directory/component/vaadinvaadin-list-box)
		[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

		```html
		<vaadin-list-box selected="2">
		<b>Select an Item</b>
		<vaadin-item>Item one</vaadin-item>
		<vaadin-item>Item two</vaadin-item>
		<hr>
		<vaadin-item>Item three</vaadin-item>
		<vaadin-item>Item four</vaadin-item>
		</vaadin-list-box>
		<vaadin-list-box selected="2">
		<b>Select an Item</b>
		<vaadin-item>Item one</vaadin-item>
		<vaadin-item>Item two</vaadin-item>
		<hr />
		<vaadin-item>Item three</vaadin-item>
		<vaadin-item>Item four</vaadin-item>
		</vaadin-list-box>
		```
		@@ -64,43 +61,6 @@


		## Running API docs and tests in a browser

		1. Fork the `vaadin-list-box` repository and clone it locally.

		1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.

		1. Make sure you have [npm](https://www.npmjs.com/) installed.

		1. When in the `vaadin-list-box` directory, run `npm install` to install dependencies.

		1. Run `npm start`, browser will automatically open the component API documentation.

		1. You can also open visual tests, for example:

		- http://127.0.0.1:3000/test/visual/list-box.html


		## Running tests from the command line

		1. When in the `vaadin-list-box` directory, run `npm test`

		## Debugging tests in the browser

		1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.

		## Following the coding style

		We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.


		## Big Thanks

		Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).


		## Contributing

		To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
		Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.


		## License
		@@ -107,0 +67,0 @@

src/vaadin-list-box.d.ts

		@@ -1,82 +0,18 @@
		import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

		import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js';

		import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';

		/**
		* Fired when the `items` property changes.
		* @license
		* Copyright (c) 2021 Vaadin Ltd.
		* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
		*/
		export type ListBoxItemsChangedEvent = CustomEvent<{ value: Array<Element> }>;
		import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';

		/**
		* Fired when the `selected` property changes.
		* @deprecated Import `ListBox` from `@vaadin/list-box` instead.
		*/
		export type ListBoxSelectedChangedEvent = CustomEvent<{ value: number }>;
		export type ListBoxElement = ListBox;

		/**
		* Fired when the `selectedValues` property changes.
		* @deprecated Import `ListBox` from `@vaadin/list-box` instead.
		*/
		export type ListBoxSelectedValuesChangedEvent = CustomEvent<{ value: Array<number> }>;
		export const ListBoxElement: typeof ListBox;

		export interface ListBoxElementEventMap {
		'items-changed': ListBoxItemsChangedEvent;

		'selected-changed': ListBoxSelectedChangedEvent;

		'selected-values-changed': ListBoxSelectedValuesChangedEvent;
		}

		export interface ListBoxEventMap extends HTMLElementEventMap, ListBoxElementEventMap {}

		/**
		* `<vaadin-list-box>` is a Web Component for creating menus.
		*
		* ```
		* <vaadin-list-box selected="2">
		* <vaadin-item>Item 1</vaadin-item>
		* <vaadin-item>Item 2</vaadin-item>
		* <vaadin-item>Item 3</vaadin-item>
		* <vaadin-item>Item 4</vaadin-item>
		* </vaadin-list-box>
		* ```
		*
		* ### Styling
		*
		* The following shadow DOM parts are available for styling:
		*
		* Part name \| Description
		* ------------------\|------------------------
		* `items` \| The items container
		*
		* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
		*
		* @fires {CustomEvent} items-changed - Fired when the `items` property changes.
		* @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
		* @fires {CustomEvent} selected-values-changed - Fired when the `selectedValues` property changes.
		*/
		declare class ListBoxElement extends MultiSelectListMixin(ThemableMixin(ElementMixin(HTMLElement))) {
		focused: Element \| null;

		readonly _scrollerElement: HTMLElement;

		addEventListener<K extends keyof ListBoxEventMap>(
		type: K,
		listener: (this: ListBoxElement, ev: ListBoxEventMap[K]) => void,
		options?: boolean \| AddEventListenerOptions
		): void;

		removeEventListener<K extends keyof ListBoxEventMap>(
		type: K,
		listener: (this: ListBoxElement, ev: ListBoxEventMap[K]) => void,
		options?: boolean \| EventListenerOptions
		): void;
		}

		declare global {
		interface HTMLElementTagNameMap {
		'vaadin-list-box': ListBoxElement;
		}
		}

		export { ListBoxElement };
		export * from '@vaadin/list-box/src/vaadin-list-box.js';

117

src/vaadin-list-box.js

		@@ -6,118 +6,9 @@ /**
		*/
		import { PolymerElement, html } from '@polymer/polymer/polymer-element.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';
		import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
		import { ListBox } from '@vaadin/list-box/src/vaadin-list-box.js';

		/**
		* `<vaadin-list-box>` is a Web Component for creating menus.
		*
		* ```
		* <vaadin-list-box selected="2">
		* <vaadin-item>Item 1</vaadin-item>
		* <vaadin-item>Item 2</vaadin-item>
		* <vaadin-item>Item 3</vaadin-item>
		* <vaadin-item>Item 4</vaadin-item>
		* </vaadin-list-box>
		* ```
		*
		* ### Styling
		*
		* The following shadow DOM parts are available for styling:
		*
		* Part name \| Description
		* ------------------\|------------------------
		* `items` \| The items container
		*
		* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
		*
		* @fires {CustomEvent} items-changed - Fired when the `items` property changes.
		* @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
		* @fires {CustomEvent} selected-values-changed - Fired when the `selectedValues` property changes.
		*
		* @extends HTMLElement
		* @mixes MultiSelectListMixin
		* @mixes ThemableMixin
		* @mixes ElementMixin
		* @deprecated Import `ListBox` from `@vaadin/list-box` instead.
		*/
		class ListBoxElement extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolymerElement))) {
		static get template() {
		return html`
		<style>
		:host {
		display: flex;
		}
		export const ListBoxElement = ListBox;

		:host([hidden]) {
		display: none !important;
		}

		[part='items'] {
		height: 100%;
		width: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		}
		</style>
		<div part="items">
		<slot></slot>
		</div>
		`;
		}

		static get is() {
		return 'vaadin-list-box';
		}

		static get version() {
		return '22.0.0-alpha1';
		}

		static get properties() {
		return {
		// We don't need to define this property since super default is vertical,
		// but we don't want it to be modified, or be shown in the API docs.
		/** @private */
		orientation: {
		readOnly: true
		}
		};
		}

		constructor() {
		super();

		/**
		* @type {Element \| null}
		* @protected
		*/
		this.focused;
		}

		ready() {
		super.ready();
		this.setAttribute('role', 'list');

		setTimeout(this._checkImport.bind(this), 2000);
		}

		/**
		* @return {!HTMLElement}
		* @protected
		*/
		get _scrollerElement() {
		return this.shadowRoot.querySelector('[part="items"]');
		}

		/** @private */
		_checkImport() {
		var item = this.querySelector('vaadin-item');
		if (item && !(item instanceof PolymerElement)) {
		console.warn(`Make sure you have imported the vaadin-item element.`);
		}
		}
		}

		customElements.define(ListBoxElement.is, ListBoxElement);

		export { ListBoxElement };
		export * from '@vaadin/list-box/src/vaadin-list-box.js';

theme/lumo/vaadin-list-box.js

		@@ -1,2 +0,1 @@
		import './vaadin-list-box-styles.js';
		import '../../src/vaadin-list-box.js';
		import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';

theme/material/vaadin-list-box.js

		@@ -1,2 +0,1 @@
		import './vaadin-list-box-styles.js';
		import '../../src/vaadin-list-box.js';
		import '@vaadin/list-box/theme/material/vaadin-list-box.js';

theme/lumo/vaadin-list-box-styles.js

theme/material/vaadin-list-box-styles.js

@vaadin/vaadin-list-box - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes