@vaadin/item
Advanced tools
Comparing version 22.0.0-beta1 to 22.0.0-beta2
{ | ||
"name": "@vaadin/item", | ||
"version": "22.0.0-beta1", | ||
"version": "22.0.0-beta2", | ||
"publishConfig": { | ||
@@ -35,7 +35,8 @@ "access": "public" | ||
"dependencies": { | ||
"@open-wc/dedupe-mixin": "^1.3.0", | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/component-base": "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/vaadin-lumo-styles": "22.0.0-beta2", | ||
"@vaadin/vaadin-material-styles": "22.0.0-beta2", | ||
"@vaadin/vaadin-themable-mixin": "22.0.0-beta2" | ||
}, | ||
@@ -47,3 +48,3 @@ "devDependencies": { | ||
}, | ||
"gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e" | ||
"gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4" | ||
} |
@@ -1,11 +0,8 @@ | ||
# <vaadin-item> | ||
# @vaadin/item | ||
[Live Demo ↗](https://vaadin.com/components/vaadin-item/html-examples) | ||
| | ||
[API documentation ↗](https://vaadin.com/components/vaadin-item/html-api) | ||
A web component for displaying items in list-box, context-menu or select components. | ||
[<vaadin-item>](https://vaadin.com/components/vaadin-item) is a Web Component providing a container for item elements, part of the [Vaadin components](https://vaadin.com/components). | ||
[Documentation + Live Demo ↗](https://vaadin.com/components/vaadin-item/html-examples) | ||
[![npm version](https://badgen.net/npm/v/@vaadin/item)](https://www.npmjs.com/package/@vaadin/item) | ||
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-item) | ||
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC) | ||
@@ -21,34 +18,37 @@ | ||
Install `vaadin-item`: | ||
Install the component: | ||
```sh | ||
npm i @vaadin/item --save | ||
npm i @vaadin/item | ||
``` | ||
Once installed, import it in your application: | ||
Once installed, import the component in your application: | ||
```js | ||
import '@vaadin/item/vaadin-item.js'; | ||
import '@vaadin/item'; | ||
``` | ||
## 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/item/vaadin-item.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/item/theme/material/vaadin-item.js'; | ||
``` | ||
- The component with the Lumo theme: | ||
You can also import the Lumo version of the component explicitly: | ||
`theme/lumo/vaadin-item.js` | ||
```js | ||
import '@vaadin/item/theme/lumo/vaadin-item.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-item.js` | ||
```js | ||
import '@vaadin/item/src/vaadin-item.js'; | ||
``` | ||
- Alias for `theme/lumo/vaadin-item.js`: | ||
`vaadin-item.js` | ||
## Contributing | ||
@@ -61,1 +61,4 @@ | ||
Apache License 2.0 | ||
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. |
@@ -6,2 +6,6 @@ /** | ||
*/ | ||
import { Constructor } from '@open-wc/dedupe-mixin'; | ||
import { ActiveMixinClass } from '@vaadin/component-base/src/active-mixin.js'; | ||
import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js'; | ||
import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js'; | ||
@@ -13,9 +17,11 @@ /** | ||
*/ | ||
declare function ItemMixin<T extends new (...args: any[]) => {}>(base: T): T & ItemMixinConstructor; | ||
export declare function ItemMixin<T extends Constructor<HTMLElement>>( | ||
base: T | ||
): T & | ||
Constructor<ItemMixinClass> & | ||
Constructor<ActiveMixinClass> & | ||
Constructor<DisabledMixinClass> & | ||
Constructor<FocusMixinClass>; | ||
interface ItemMixinConstructor { | ||
new (...args: any[]): ItemMixin; | ||
} | ||
interface ItemMixin { | ||
export declare class ItemMixinClass { | ||
value: string; | ||
@@ -28,23 +34,8 @@ | ||
*/ | ||
_hasVaadinItemMixin: boolean; | ||
protected _hasVaadinItemMixin: boolean; | ||
/** | ||
* If true, the user cannot interact with this element. | ||
*/ | ||
disabled: boolean; | ||
/** | ||
* If true, the item is in selected state. | ||
*/ | ||
selected: boolean; | ||
_setFocused(focused: boolean): void; | ||
_setActive(active: boolean): void; | ||
_onKeydown(event: KeyboardEvent): void; | ||
_onKeyup(event: KeyboardEvent): void; | ||
} | ||
export { ItemMixin, ItemMixinConstructor }; |
@@ -6,2 +6,4 @@ /** | ||
*/ | ||
import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js'; | ||
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js'; | ||
@@ -15,3 +17,3 @@ /** | ||
export const ItemMixin = (superClass) => | ||
class VaadinItemMixin extends superClass { | ||
class VaadinItemMixin extends ActiveMixin(FocusMixin(superClass)) { | ||
static get properties() { | ||
@@ -30,13 +32,2 @@ return { | ||
/** | ||
* If true, the user cannot interact with this element. | ||
* @type {boolean} | ||
*/ | ||
disabled: { | ||
type: Boolean, | ||
value: false, | ||
observer: '_disabledChanged', | ||
reflectToAttribute: true | ||
}, | ||
/** | ||
* If true, the item is in selected state. | ||
@@ -58,2 +49,14 @@ * @type {boolean} | ||
/** | ||
* By default, `Space` is the only possible activation key for a focusable HTML element. | ||
* Nonetheless, the item is an exception as it can be also activated by pressing `Enter`. | ||
* See the "Keyboard Support" section in https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html. | ||
* | ||
* @protected | ||
* @override | ||
*/ | ||
get _activeKeys() { | ||
return ['Enter', ' ']; | ||
} | ||
/** | ||
* @return {string} | ||
@@ -80,29 +83,28 @@ */ | ||
} | ||
this.addEventListener('focus', () => this._setFocused(true), true); | ||
this.addEventListener('blur', () => this._setFocused(false), true); | ||
this.addEventListener('mousedown', () => { | ||
this._setActive((this._mousedown = true)); | ||
const mouseUpListener = () => { | ||
this._setActive((this._mousedown = false)); | ||
document.removeEventListener('mouseup', mouseUpListener); | ||
}; | ||
document.addEventListener('mouseup', mouseUpListener); | ||
}); | ||
this.addEventListener('keydown', (e) => this._onKeydown(e)); | ||
this.addEventListener('keyup', (e) => this._onKeyup(e)); | ||
} | ||
/** @protected */ | ||
disconnectedCallback() { | ||
super.disconnectedCallback(); | ||
/** | ||
* Override native `focus` to set focused attribute | ||
* when focusing the item programmatically. | ||
* @protected | ||
* @override | ||
*/ | ||
focus() { | ||
if (this.disabled) { | ||
return; | ||
} | ||
// in Firefox and Safari, blur does not fire on the element when it is removed, | ||
// especially between keydown and keyup events, being active at the same time. | ||
// reproducible in `<vaadin-select>` when closing overlay on select. | ||
if (this.hasAttribute('active')) { | ||
this._setFocused(false); | ||
} | ||
super.focus(); | ||
this._setFocused(true); | ||
} | ||
/** | ||
* @param {KeyboardEvent | MouseEvent} _event | ||
* @protected | ||
* @override | ||
*/ | ||
_shouldSetActive(event) { | ||
return !this.disabled && !(event.type === 'keydown' && event.defaultPrevented); | ||
} | ||
/** @private */ | ||
@@ -113,10 +115,13 @@ _selectedChanged(selected) { | ||
/** @private */ | ||
/** | ||
* Override an observer from `DisabledMixin`. | ||
* @protected | ||
* @override | ||
*/ | ||
_disabledChanged(disabled) { | ||
super._disabledChanged(disabled); | ||
if (disabled) { | ||
this.selected = false; | ||
this.setAttribute('aria-disabled', 'true'); | ||
this.blur(); | ||
} else { | ||
this.removeAttribute('aria-disabled'); | ||
} | ||
@@ -126,48 +131,21 @@ } | ||
/** | ||
* @param {boolean} focused | ||
* In order to be fully accessible from the keyboard, the item should | ||
* manually fire the `click` event once an activation key is pressed. | ||
* | ||
* According to the UI Events specifications, | ||
* the `click` event should be fired exactly on `keydown`: | ||
* https://www.w3.org/TR/uievents/#event-type-keydown | ||
* | ||
* @param {KeyboardEvent} event | ||
* @protected | ||
* @override | ||
*/ | ||
_setFocused(focused) { | ||
if (focused) { | ||
this.setAttribute('focused', ''); | ||
if (!this._mousedown) { | ||
this.setAttribute('focus-ring', ''); | ||
} | ||
} else { | ||
this.removeAttribute('focused'); | ||
this.removeAttribute('focus-ring'); | ||
this._setActive(false); | ||
} | ||
} | ||
_onKeyDown(event) { | ||
super._onKeyDown(event); | ||
/** | ||
* @param {boolean} active | ||
* @protected | ||
*/ | ||
_setActive(active) { | ||
if (active) { | ||
this.setAttribute('active', ''); | ||
} else { | ||
this.removeAttribute('active'); | ||
} | ||
} | ||
/** | ||
* @param {!KeyboardEvent} event | ||
* @protected | ||
*/ | ||
_onKeydown(event) { | ||
if (/^( |SpaceBar|Enter)$/.test(event.key) && !event.defaultPrevented) { | ||
if (this._activeKeys.includes(event.key) && !event.defaultPrevented) { | ||
event.preventDefault(); | ||
this._setActive(true); | ||
} | ||
} | ||
/** | ||
* @param {!KeyboardEvent} event | ||
* @protected | ||
*/ | ||
_onKeyup() { | ||
if (this.hasAttribute('active')) { | ||
this._setActive(false); | ||
// `DisabledMixin` overrides the standard `click()` method | ||
// so that it doesn't fire the `click` event when the element is disabled. | ||
this.click(); | ||
@@ -174,0 +152,0 @@ } |
@@ -6,3 +6,3 @@ /** | ||
*/ | ||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
@@ -9,0 +9,0 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; |
@@ -1,2 +0,1 @@ | ||
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
import '@vaadin/vaadin-lumo-styles/font-icons.js'; | ||
@@ -7,2 +6,3 @@ import '@vaadin/vaadin-lumo-styles/sizing.js'; | ||
import '@vaadin/vaadin-lumo-styles/typography.js'; | ||
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -9,0 +9,0 @@ const item = css` |
@@ -1,5 +0,5 @@ | ||
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 '@vaadin/vaadin-material-styles/typography.js'; | ||
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -6,0 +6,0 @@ const item = css` |
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
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
63
28708
6
456
+ Added@open-wc/dedupe-mixin@^1.3.0
+ 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/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/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)