@vaadin/tabs 23.2.0 → 23.3.0-alpha1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/tabs",
3
- "version": "23.2.0",
3
+ "version": "23.3.0-alpha1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,12 +36,12 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "^23.2.0",
40
- "@vaadin/item": "^23.2.0",
41
- "@vaadin/vaadin-list-mixin": "^23.2.0",
42
- "@vaadin/vaadin-lumo-styles": "^23.2.0",
43
- "@vaadin/vaadin-material-styles": "^23.2.0",
44
- "@vaadin/vaadin-themable-mixin": "^23.2.0"
39
+ "@vaadin/component-base": "23.3.0-alpha1",
40
+ "@vaadin/item": "23.3.0-alpha1",
41
+ "@vaadin/vaadin-list-mixin": "23.3.0-alpha1",
42
+ "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
43
+ "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
44
+ "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@esm-bundle/chai": "^4.3.4",
@@ -52,5 +52,5 @@
52
52
  "web-types.json",
53
53
  "web-types.lit.json"
54
54
  ],
55
- "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
55
+ "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
56
56
  }
@@ -3,6 +3,7 @@
3
3
  * Copyright (c) 2017 - 2022 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
6
7
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
7
8
  import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
8
9
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -29,7 +30,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
29
30
  *
30
31
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
31
32
  */
32
- declare class Tab extends ElementMixin(ThemableMixin(ItemMixin(HTMLElement))) {}
33
+ declare class Tab extends ElementMixin(ThemableMixin(ItemMixin(ControllerMixin(HTMLElement)))) {}
33
34
 
34
35
  declare global {
35
36
  interface HTMLElementTagNameMap {
package/src/vaadin-tab.js CHANGED
@@ -4,7 +4,9 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
7
8
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
9
+ import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
8
10
  import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
9
11
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
12
 
@@ -31,11 +33,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
31
33
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
32
34
  *
33
35
  * @extends HTMLElement
36
+ * @mixes ControllerMixin
34
37
  * @mixes ElementMixin
35
38
  * @mixes ThemableMixin
36
39
  * @mixes ItemMixin
37
40
  */
38
- class Tab extends ElementMixin(ThemableMixin(ItemMixin(PolymerElement))) {
41
+ class Tab extends ElementMixin(ThemableMixin(ItemMixin(ControllerMixin(PolymerElement)))) {
39
42
  static get template() {
40
43
  return html`
41
44
  <style>
@@ -48,6 +51,7 @@ class Tab extends ElementMixin(ThemableMixin(ItemMixin(PolymerElement))) {
48
51
  }
49
52
  </style>
50
53
  <slot></slot>
54
+ <slot name="tooltip"></slot>
51
55
  `;
52
56
  }
53
57
 
@@ -59,6 +63,9 @@ class Tab extends ElementMixin(ThemableMixin(ItemMixin(PolymerElement))) {
59
63
  ready() {
60
64
  super.ready();
61
65
  this.setAttribute('role', 'tab');
66
+
67
+ this._tooltipController = new TooltipController(this);
68
+ this.addController(this._tooltipController);
62
69
  }
63
70
 
64
71
  /**
@@ -29,7 +29,7 @@ export interface TabsCustomEventMap {
29
29
  export interface TabsEventMap extends HTMLElementEventMap, TabsCustomEventMap {}
30
30
 
31
31
  /**
32
- * `<vaadin-tabs>` is a Web Component for easy switching between different views.
32
+ * `<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.
33
33
  *
34
34
  * ```
35
35
  * <vaadin-tabs selected="4">
@@ -12,7 +12,7 @@ import { ListMixin } from '@vaadin/vaadin-list-mixin/vaadin-list-mixin.js';
12
12
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
13
13
 
14
14
  /**
15
- * `<vaadin-tabs>` is a Web Component for easy switching between different views.
15
+ * `<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.
16
16
  *
17
17
  * ```
18
18
  * <vaadin-tabs selected="4">
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/tabs",
4
- "version": "23.2.0",
4
+ "version": "23.3.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -57,7 +57,7 @@
57
57
  },
58
58
  {
59
59
  "name": "vaadin-tabs",
60
- "description": "`<vaadin-tabs>` is a Web Component for easy switching between different views.\n\n```\n <vaadin-tabs selected=\"4\">\n <vaadin-tab>Page 1</vaadin-tab>\n <vaadin-tab>Page 2</vaadin-tab>\n <vaadin-tab>Page 3</vaadin-tab>\n <vaadin-tab>Page 4</vaadin-tab>\n </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|--------------------------------------\n`back-button` | Button for moving the scroll back\n`tabs` | The tabs container\n`forward-button` | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
60
+ "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n <vaadin-tabs selected=\"4\">\n <vaadin-tab>Page 1</vaadin-tab>\n <vaadin-tab>Page 2</vaadin-tab>\n <vaadin-tab>Page 3</vaadin-tab>\n <vaadin-tab>Page 4</vaadin-tab>\n </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|--------------------------------------\n`back-button` | Button for moving the scroll back\n`tabs` | The tabs container\n`forward-button` | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
61
61
  "attributes": [
62
62
  {
63
63
  "name": "selected",
@@ -118,6 +118,10 @@
118
118
  {
119
119
  "name": "selected-changed",
120
120
  "description": "Fired when the selection is changed.\nNot fired when used in `multiple` selection mode."
121
+ },
122
+ {
123
+ "name": "items-changed",
124
+ "description": "Fired when the `items` property changes."
121
125
  }
122
126
  ]
123
127
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/tabs",
4
- "version": "23.2.0",
4
+ "version": "23.3.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -37,7 +37,7 @@
37
37
  },
38
38
  {
39
39
  "name": "vaadin-tabs",
40
- "description": "`<vaadin-tabs>` is a Web Component for easy switching between different views.\n\n```\n <vaadin-tabs selected=\"4\">\n <vaadin-tab>Page 1</vaadin-tab>\n <vaadin-tab>Page 2</vaadin-tab>\n <vaadin-tab>Page 3</vaadin-tab>\n <vaadin-tab>Page 4</vaadin-tab>\n </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|--------------------------------------\n`back-button` | Button for moving the scroll back\n`tabs` | The tabs container\n`forward-button` | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
40
+ "description": "`<vaadin-tabs>` is a Web Component for organizing and grouping content into sections.\n\n```\n <vaadin-tabs selected=\"4\">\n <vaadin-tab>Page 1</vaadin-tab>\n <vaadin-tab>Page 2</vaadin-tab>\n <vaadin-tab>Page 3</vaadin-tab>\n <vaadin-tab>Page 4</vaadin-tab>\n </vaadin-tabs>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|--------------------------------------\n`back-button` | Button for moving the scroll back\n`tabs` | The tabs container\n`forward-button` | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
41
41
  "extension": true,
42
42
  "attributes": [
43
43
  {
@@ -60,6 +60,13 @@
60
60
  "value": {
61
61
  "kind": "expression"
62
62
  }
63
+ },
64
+ {
65
+ "name": "@items-changed",
66
+ "description": "Fired when the `items` property changes.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
63
70
  }
64
71
  ]
65
72
  }