@vaadin/tabsheet 24.4.0-alpha9 → 24.4.0-dev.4b20a0c55

package/README.md

@@ -5,7 +5,6 @@ A web component for organizing and grouping content into sections.
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/tabs/#tab-sheet)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/tabsheet)](https://www.npmjs.com/package/@vaadin/tabsheet)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-tabsheet>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabsheet",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-dev.4b20a0c55",
   "publishConfig": {
     "access": "public"
   },
@@ -37,12 +37,12 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.4.0-alpha9",
-    "@vaadin/scroller": "24.4.0-alpha9",
-    "@vaadin/tabs": "24.4.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9"
+    "@vaadin/component-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/scroller": "24.4.0-dev.4b20a0c55",
+    "@vaadin/tabs": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
+  "gitHead": "b79c81e5f6fd24684b34ee0dc434e94d943ea13e"
 }

package/src/vaadin-tabsheet-mixin.js

@@ -18,11 +18,29 @@ class TabsSlotController extends SlotController {
     super(host, 'tabs');
     this.__tabsItemsChangedListener = this.__tabsItemsChangedListener.bind(this);
     this.__tabsSelectedChangedListener = this.__tabsSelectedChangedListener.bind(this);
+    this.__tabIdObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const tab = mutation.target;
+
+        host.__linkTabAndPanel(tab);
+
+        if (tab.selected) {
+          host.__togglePanels(tab);
+        }
+      });
+    });
   }
 
   /** @private */
   __tabsItemsChangedListener() {
-    this.host._setItems(this.tabs.items);
+    this.__tabIdObserver.disconnect();
+    const items = this.tabs.items || [];
+    items.forEach((tab) => {
+      this.__tabIdObserver.observe(tab, {
+        attributeFilter: ['id'],
+      });
+    });
+    this.host._setItems(items);
   }
 
   /** @private */
@@ -142,15 +160,7 @@ export const TabSheetMixin = (superClass) =>
         return;
       }
       items.forEach((tabItem) => {
-        const panel = panels.find((panel) => panel.getAttribute('tab') === tabItem.id);
-        if (panel) {
-          panel.role = 'tabpanel';
-          if (!panel.id) {
-            panel.id = `tabsheet-panel-${generateUniqueId()}`;
-          }
-          panel.setAttribute('aria-labelledby', tabItem.id);
-          tabItem.setAttribute('aria-controls', panel.id);
-        }
+        this.__linkTabAndPanel(tabItem, panels);
       });
     }
 
@@ -162,10 +172,14 @@ export const TabSheetMixin = (superClass) =>
       if (!items || !panels || selected === undefined) {
         return;
       }
-      const content = this.shadowRoot.querySelector('[part="content"]');
-      const selectedTab = items[selected];
+      this.__togglePanels(items[selected], panels);
+    }
+
+    /** @private */
+    __togglePanels(selectedTab, panels = this.__panels) {
       const selectedTabId = selectedTab ? selectedTab.id : '';
       const selectedPanel = panels.find((panel) => panel.getAttribute('tab') === selectedTabId);
+      const content = this.shadowRoot.querySelector('[part="content"]');
 
       // Mark loading state if a selected panel is not found.
       this.toggleAttribute('loading', !selectedPanel);
@@ -183,4 +197,17 @@ export const TabSheetMixin = (superClass) =>
         panel.hidden = panel !== selectedPanel;
       });
     }
+
+    /** @private */
+    __linkTabAndPanel(tab, panels = this.__panels) {
+      const panel = panels.find((panel) => panel.getAttribute('tab') === tab.id);
+      if (panel) {
+        panel.role = 'tabpanel';
+        if (!panel.id) {
+          panel.id = `tabsheet-panel-${generateUniqueId()}`;
+        }
+        panel.setAttribute('aria-labelledby', tab.id);
+        tab.setAttribute('aria-controls', panel.id);
+      }
+    }
   };

package/theme/lumo/vaadin-tabsheet-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-declare const tabsheet: import("lit").CSSResult;
-export { tabsheet };

package/theme/lumo/vaadin-tabsheet.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/tabs/theme/lumo/vaadin-tabs.js';
-import '@vaadin/scroller/theme/lumo/vaadin-scroller.js';
-import './vaadin-tabsheet-styles.js';
-import '../../src/vaadin-tabsheet.js';

package/theme/material/vaadin-tabsheet-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-tabsheet.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/tabs/theme/material/vaadin-tabs.js';
-import '@vaadin/scroller/theme/material/vaadin-scroller.js';
-import './vaadin-tabsheet-styles.js';
-import '../../src/vaadin-tabsheet.js';

package/web-types.json

@@ -1,65 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/web-types",
-  "name": "@vaadin/tabsheet",
-  "version": "24.4.0-alpha9",
-  "description-markup": "markdown",
-  "contributions": {
-    "html": {
-      "elements": [
-        {
-          "name": "vaadin-tabsheet",
-          "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.",
-          "attributes": [
-            {
-              "name": "selected",
-              "description": "The index of the selected tab.",
-              "value": {
-                "type": [
-                  "number",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "theme",
-              "description": "The theme variants to apply to the component.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "selected",
-                "description": "The index of the selected tab.",
-                "value": {
-                  "type": [
-                    "number",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              }
-            ],
-            "events": [
-              {
-                "name": "items-changed",
-                "description": "Fired when the `items` property changes."
-              },
-              {
-                "name": "selected-changed",
-                "description": "Fired when the `selected` property changes."
-              }
-            ]
-          }
-        }
-      ]
-    }
-  }
-}

package/web-types.lit.json

@@ -1,48 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/web-types",
-  "name": "@vaadin/tabsheet",
-  "version": "24.4.0-alpha9",
-  "description-markup": "markdown",
-  "framework": "lit",
-  "framework-config": {
-    "enable-when": {
-      "node-packages": [
-        "lit"
-      ]
-    }
-  },
-  "contributions": {
-    "html": {
-      "elements": [
-        {
-          "name": "vaadin-tabsheet",
-          "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.",
-          "extension": true,
-          "attributes": [
-            {
-              "name": ".selected",
-              "description": "The index of the selected tab.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@items-changed",
-              "description": "Fired when the `items` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@selected-changed",
-              "description": "Fired when the `selected` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            }
-          ]
-        }
-      ]
-    }
-  }
-}