@vaadin/tabsheet 24.5.0-alpha9 → 24.5.0-rc1

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.
Files changed (6) hide show
  1. package/package.json +9 -9
  2. package/src/vaadin-tabsheet-mixin.js +22 -1
  3. package/src/vaadin-tabsheet.d.ts +1 -1
  4. package/src/vaadin-tabsheet.js +1 -1
  5. package/web-types.json +2 -2
  6. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/tabsheet",
3
- "version": "24.5.0-alpha9",
3
+ "version": "24.5.0-rc1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,15 +37,15 @@
37
37
  "dependencies": {
38
38
  "@open-wc/dedupe-mixin": "^1.3.0",
39
39
  "@polymer/polymer": "^3.0.0",
40
- "@vaadin/component-base": "24.5.0-alpha9",
41
- "@vaadin/scroller": "24.5.0-alpha9",
42
- "@vaadin/tabs": "24.5.0-alpha9",
43
- "@vaadin/vaadin-lumo-styles": "24.5.0-alpha9",
44
- "@vaadin/vaadin-material-styles": "24.5.0-alpha9",
45
- "@vaadin/vaadin-themable-mixin": "24.5.0-alpha9"
40
+ "@vaadin/component-base": "24.5.0-rc1",
41
+ "@vaadin/scroller": "24.5.0-rc1",
42
+ "@vaadin/tabs": "24.5.0-rc1",
43
+ "@vaadin/vaadin-lumo-styles": "24.5.0-rc1",
44
+ "@vaadin/vaadin-material-styles": "24.5.0-rc1",
45
+ "@vaadin/vaadin-themable-mixin": "24.5.0-rc1"
46
46
  },
47
47
  "devDependencies": {
48
- "@vaadin/chai-plugins": "24.5.0-alpha9",
48
+ "@vaadin/chai-plugins": "24.5.0-rc1",
49
49
  "@vaadin/testing-helpers": "^1.0.0",
50
50
  "sinon": "^18.0.0"
51
51
  },
@@ -53,5 +53,5 @@
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "804744762f3bec0a2247c4bbcbbb204dbcd78bc0"
56
+ "gitHead": "a8ae853ab69d7938cf507843784f1551a2eeb972"
57
57
  }
package/src/vaadin-tabsheet-mixin.js CHANGED
@@ -141,7 +141,28 @@ export const TabSheetMixin = (superClass) =>
141
141
 
142
142
  // Observe the panels slot for nodes. Set the assigned element nodes as the __panels array.
143
143
  const panelSlot = this.shadowRoot.querySelector('#panel-slot');
144
- this.__panelsObserver = new SlotObserver(panelSlot, () => {
144
+ this.__panelsObserver = new SlotObserver(panelSlot, ({ addedNodes, removedNodes }) => {
145
+ if (addedNodes.length) {
146
+ addedNodes.forEach((node) => {
147
+ // Preserve custom hidden attribute to not override it.
148
+ if (node.nodeType === Node.ELEMENT_NODE && node.hidden) {
149
+ node.__customHidden = true;
150
+ }
151
+ });
152
+ }
153
+ if (removedNodes.length) {
154
+ removedNodes.forEach((node) => {
155
+ // Clear hidden attribute when removing node from the default slot,
156
+ // e.g. when changing its slot to `prefix` or `suffix` dynamically.
157
+ if (node.nodeType === Node.ELEMENT_NODE && node.hidden) {
158
+ if (node.__customHidden) {
159
+ delete node.__customHidden;
160
+ } else {
161
+ node.hidden = false;
162
+ }
163
+ }
164
+ });
165
+ }
145
166
  this.__panels = Array.from(
146
167
  panelSlot.assignedNodes({
147
168
  flatten: true,
package/src/vaadin-tabsheet.d.ts CHANGED
@@ -64,7 +64,7 @@ export interface TabSheetEventMap extends HTMLElementEventMap, TabSheetCustomEve
64
64
  * `loading` | Set when a tab without associated content is selected
65
65
  * `overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
66
66
  *
67
- * See [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.
67
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
68
68
  *
69
69
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
70
70
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
package/src/vaadin-tabsheet.js CHANGED
@@ -48,7 +48,7 @@ import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
48
48
  * `loading` | Set when a tab without associated content is selected
49
49
  * `overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
50
50
  *
51
- * See [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.
51
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
52
52
  *
53
53
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
54
54
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/tabsheet",
4
- "version": "24.5.0-alpha9",
4
+ "version": "24.5.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-tabsheet",
11
- "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n <div slot=\"prefix\">Prefix</div>\n <div slot=\"suffix\">Suffix</div>\n\n <vaadin-tabs slot=\"tabs\">\n <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n </vaadin-tabs>\n\n <div tab=\"tab-1\">Panel 1</div>\n <div tab=\"tab-2\">Panel 2</div>\n <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container` | The container for the slotted prefix, tabs and suffix\n`content` | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.",
11
+ "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n <div slot=\"prefix\">Prefix</div>\n <div slot=\"suffix\">Suffix</div>\n\n <vaadin-tabs slot=\"tabs\">\n <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n </vaadin-tabs>\n\n <div tab=\"tab-1\">Panel 1</div>\n <div tab=\"tab-2\">Panel 2</div>\n <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container` | The container for the slotted prefix, tabs and suffix\n`content` | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "selected",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/tabsheet",
4
- "version": "24.5.0-alpha9",
4
+ "version": "24.5.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-tabsheet",
19
- "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n <div slot=\"prefix\">Prefix</div>\n <div slot=\"suffix\">Suffix</div>\n\n <vaadin-tabs slot=\"tabs\">\n <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n </vaadin-tabs>\n\n <div tab=\"tab-1\">Panel 1</div>\n <div tab=\"tab-2\">Panel 2</div>\n <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container` | The container for the slotted prefix, tabs and suffix\n`content` | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](hhttps://vaadin.com/docs/latest/components/ds-resources/customization/styling-components) documentation.",
19
+ "description": "`<vaadin-tabsheet>` is a Web Component for organizing and grouping content\ninto scrollable panels. The panels can be switched between by using tabs.\n\n```\n <vaadin-tabsheet>\n <div slot=\"prefix\">Prefix</div>\n <div slot=\"suffix\">Suffix</div>\n\n <vaadin-tabs slot=\"tabs\">\n <vaadin-tab id=\"tab-1\">Tab 1</vaadin-tab>\n <vaadin-tab id=\"tab-2\">Tab 2</vaadin-tab>\n <vaadin-tab id=\"tab-3\">Tab 3</vaadin-tab>\n </vaadin-tabs>\n\n <div tab=\"tab-1\">Panel 1</div>\n <div tab=\"tab-2\">Panel 2</div>\n <div tab=\"tab-3\">Panel 3</div>\n </vaadin-tabsheet>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`tabs-container` | The container for the slotted prefix, tabs and suffix\n`content` | The container for the slotted panels\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n------------------|-------------\n`loading` | Set when a tab without associated content is selected\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {