@vaadin/tabs
Advanced tools
@vaadin/tabs - npm Package Compare versions
Comparing version 22.0.0-beta1 to 22.0.0-beta2
| { | ||
| "name": "@vaadin/tabs", | ||
| "version": "22.0.0-beta1", | ||
| "version": "22.0.0-beta2", | ||
| "publishConfig": { | ||
@@ -37,8 +37,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" | ||
| }, | ||
@@ -50,3 +50,3 @@ "devDependencies": { | ||
| }, | ||
| "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e" | ||
| "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4" | ||
| } |
@@ -1,11 +0,8 @@ | ||
| # <vaadin-tabs> | ||
| # @vaadin/tabs | ||
| [Live Demo ↗](https://vaadin.com/components/vaadin-tabs/html-examples) | ||
| | | ||
| [API documentation ↗](https://vaadin.com/components/vaadin-tabs/html-api) | ||
| A web component for organizing and grouping content into sections. | ||
| [<vaadin-tabs>](https://vaadin.com/components/vaadin-tabs) is a Web Component providing item navigation part of the [Vaadin components](https://vaadin.com/components). It is designed for menu and tab components. | ||
| [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/tabs) | ||
| [](https://www.npmjs.com/package/@vaadin/tabs) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-tabs) | ||
| [](https://discord.gg/PHmkCKC) | ||
@@ -22,42 +19,41 @@ | ||
| [<img src="https://raw.githubusercontent.com/vaadin/vaadin-tabs/master/screenshot.png" width="355" alt="Screenshot of vaadin-tabs, using the default Lumo theme">](https://vaadin.com/components/vaadin-tabs) | ||
| [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/tabs/screenshot.png" width="355" alt="Screenshot of vaadin-tabs">](https://vaadin.com/docs/latest/ds/components/tabs) | ||
| ## Installation | ||
| Install `vaadin-tabs`: | ||
| Install the component: | ||
| ```sh | ||
| npm i @vaadin/tabs --save | ||
| npm i @vaadin/tabs | ||
| ``` | ||
| Once installed, import it in your application: | ||
| Once installed, import the component in your application: | ||
| ```js | ||
| import '@vaadin/tabs/vaadin-tabs.js'; | ||
| import '@vaadin/tabs'; | ||
| ``` | ||
| ## 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/tabs/vaadin-tabs.js) of the package uses the 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/tabs/theme/material/vaadin-tabs.js'; | ||
| ``` | ||
| - The components with the Lumo theme: | ||
| You can also import the Lumo version of the component explicitly: | ||
| `theme/lumo/vaadin-tab.js` | ||
| `theme/lumo/vaadin-tabs.js` | ||
| ```js | ||
| import '@vaadin/tabs/theme/lumo/vaadin-tabs.js'; | ||
| ``` | ||
| - The components 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-tab.js` | ||
| `theme/material/vaadin-tabs.js` | ||
| ```js | ||
| import '@vaadin/tabs/src/vaadin-tabs.js'; | ||
| ``` | ||
| - Alias for `theme/lumo/vaadin-tab.js` | ||
| `theme/lumo/vaadin-tabs.js`: | ||
| `vaadin-tab.js` | ||
| `vaadin-tabs.js` | ||
| ## Contributing | ||
@@ -71,2 +67,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. |
@@ -32,5 +32,3 @@ /** | ||
| */ | ||
| declare class Tab extends ElementMixin(ThemableMixin(ItemMixin(HTMLElement))) { | ||
| _onKeyup(event: KeyboardEvent): void; | ||
| } | ||
| declare class Tab extends ElementMixin(ThemableMixin(ItemMixin(HTMLElement))) {} | ||
@@ -37,0 +35,0 @@ declare global { |
@@ -6,3 +6,3 @@ /** | ||
| */ | ||
| 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'; | ||
@@ -55,9 +55,12 @@ import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js'; | ||
| /** | ||
| * Override an event listener from `KeyboardMixin` | ||
| * to handle clicking anchors inside the tabs. | ||
| * @param {!KeyboardEvent} event | ||
| * @protected | ||
| * @override | ||
| */ | ||
| _onKeyup(event) { | ||
| _onKeyUp(event) { | ||
| const willClick = this.hasAttribute('active'); | ||
| super._onKeyup(event); | ||
| super._onKeyUp(event); | ||
@@ -64,0 +67,0 @@ if (willClick) { |
@@ -65,4 +65,2 @@ /** | ||
| declare class Tabs extends ElementMixin(ListMixin(ThemableMixin(HTMLElement))) { | ||
| readonly _scrollerElement: HTMLElement; | ||
| /** | ||
@@ -78,4 +76,2 @@ * The index of the selected tab. | ||
| readonly _scrollOffset: number; | ||
| addEventListener<K extends keyof TabsEventMap>( | ||
@@ -82,0 +78,0 @@ type: K, |
@@ -6,10 +6,10 @@ /** | ||
| */ | ||
| import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
| import './vaadin-tab.js'; | ||
| import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; | ||
| import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; | ||
| import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; | ||
| import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
| import { ListMixin } from '@vaadin/vaadin-list-mixin/vaadin-list-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import './vaadin-tab.js'; | ||
@@ -16,0 +16,0 @@ /** |
@@ -1,2 +0,1 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-lumo-styles/color.js'; | ||
@@ -6,2 +5,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'; | ||
@@ -8,0 +8,0 @@ registerStyles( |
@@ -1,2 +0,1 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-lumo-styles/font-icons.js'; | ||
@@ -8,2 +7,3 @@ import '@vaadin/vaadin-lumo-styles/color.js'; | ||
| import '@vaadin/vaadin-lumo-styles/typography.js'; | ||
| import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -10,0 +10,0 @@ registerStyles( |
@@ -1,4 +0,4 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.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'; | ||
@@ -5,0 +5,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( |
New alerts
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
Fixed alerts
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
Worsened metrics
- Total package byte prevSize
- decreased by-0.34%
47392
- Lines of code
- decreased by-0.1%
1008
- Number of lines in readme file
- decreased by-4.23%
68
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