@vaadin/tabsheet 24.3.2 → 24.4.0-dev.223e39f050

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tabsheet",
-  "version": "24.3.2",
+  "version": "24.4.0-dev.223e39f050",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/web-components.git",
-    "directory": "packages/vaadin-tabsheet"
+    "directory": "packages/tabsheet"
   },
   "author": "Vaadin Ltd",
   "homepage": "https://vaadin.com/components",
@@ -35,13 +35,14 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.3.2",
-    "@vaadin/scroller": "~24.3.2",
-    "@vaadin/tabs": "~24.3.2",
-    "@vaadin/vaadin-lumo-styles": "~24.3.2",
-    "@vaadin/vaadin-material-styles": "~24.3.2",
-    "@vaadin/vaadin-themable-mixin": "~24.3.2"
+    "@vaadin/component-base": "24.4.0-dev.223e39f050",
+    "@vaadin/scroller": "24.4.0-dev.223e39f050",
+    "@vaadin/tabs": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.223e39f050",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.223e39f050"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -52,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "615ee9dd4611f52db90445b0db13dcbb91ca74d4"
+  "gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
 }

package/src/vaadin-tabsheet-mixin.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+
+/**
+ * A mixin providing common tab-sheet functionality.
+ */
+export declare function TabSheetMixin<
+  Tab extends HTMLElement,
+  T extends Constructor<HTMLElement> = Constructor<HTMLElement>,
+>(base: T): Constructor<DelegateStateMixinClass> & Constructor<TabSheetMixinClass<Tab>> & T;
+
+export declare class TabSheetMixinClass<Tab extends HTMLElement> {
+  /**
+   * The index of the selected tab.
+   */
+  selected: number | null | undefined;
+
+  /**
+   * The list of `<vaadin-tab>`s from which a selection can be made.
+   * It is populated from the elements passed inside the slotted
+   * `<vaadin-tabs>`, and updated dynamically when adding or removing items.
+   *
+   * Note: unlike `<vaadin-combo-box>`, this property is read-only.
+   */
+  readonly items: Tab[] | undefined;
+}

package/src/vaadin-tabsheet-mixin.js

@@ -0,0 +1,186 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+
+/**
+ * @private
+ * A controller which observes the <vaadin-tabs> slotted to the tabs slot.
+ */
+class TabsSlotController extends SlotController {
+  constructor(host) {
+    super(host, 'tabs');
+    this.__tabsItemsChangedListener = this.__tabsItemsChangedListener.bind(this);
+    this.__tabsSelectedChangedListener = this.__tabsSelectedChangedListener.bind(this);
+  }
+
+  /** @private */
+  __tabsItemsChangedListener() {
+    this.host._setItems(this.tabs.items);
+  }
+
+  /** @private */
+  __tabsSelectedChangedListener() {
+    this.host.selected = this.tabs.selected;
+  }
+
+  initCustomNode(tabs) {
+    if (!(tabs instanceof customElements.get('vaadin-tabs'))) {
+      throw Error('The "tabs" slot of a <vaadin-tabsheet> must only contain a <vaadin-tabs> element!');
+    }
+    this.tabs = tabs;
+    tabs.addEventListener('items-changed', this.__tabsItemsChangedListener);
+    tabs.addEventListener('selected-changed', this.__tabsSelectedChangedListener);
+    this.host.__tabs = tabs;
+    this.host.stateTarget = tabs;
+    this.__tabsItemsChangedListener();
+  }
+
+  teardownNode(tabs) {
+    this.tabs = null;
+    tabs.removeEventListener('items-changed', this.__tabsItemsChangedListener);
+    tabs.removeEventListener('selected-changed', this.__tabsSelectedChangedListener);
+    this.host.__tabs = null;
+    this.host._setItems([]);
+    this.host.stateTarget = undefined;
+  }
+}
+
+/**
+ * @polymerMixin
+ * @mixes DelegateStateMixin
+ */
+export const TabSheetMixin = (superClass) =>
+  class extends DelegateStateMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * The list of `<vaadin-tab>`s from which a selection can be made.
+         * It is populated from the elements passed inside the slotted
+         * `<vaadin-tabs>`, and updated dynamically when adding or removing items.
+         *
+         * Note: unlike `<vaadin-combo-box>`, this property is read-only.
+         * @type {!Array<!Tab> | undefined}
+         */
+        items: {
+          type: Array,
+          readOnly: true,
+          notify: true,
+        },
+
+        /**
+         * The index of the selected tab.
+         */
+        selected: {
+          value: 0,
+          type: Number,
+          notify: true,
+        },
+
+        /**
+         * The slotted <vaadin-tabs> element.
+         */
+        __tabs: {
+          type: Object,
+        },
+
+        /**
+         * The panel elements.
+         */
+        __panels: {
+          type: Array,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__itemsOrPanelsChanged(items, __panels)', '__selectedTabItemChanged(selected, items, __panels)'];
+    }
+
+    /** @override */
+    static get delegateProps() {
+      return ['selected'];
+    }
+
+    /** @override */
+    static get delegateAttrs() {
+      return ['theme'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+      this.__overflowController = new OverflowController(this, this.shadowRoot.querySelector('[part="content"]'));
+      this.addController(this.__overflowController);
+      this._tabsSlotController = new TabsSlotController(this);
+      this.addController(this._tabsSlotController);
+
+      // Observe the panels slot for nodes. Set the assigned element nodes as the __panels array.
+      const panelSlot = this.shadowRoot.querySelector('#panel-slot');
+      this.__panelsObserver = new SlotObserver(panelSlot, () => {
+        this.__panels = Array.from(
+          panelSlot.assignedNodes({
+            flatten: true,
+          }),
+        ).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+      });
+    }
+
+    /**
+     * An observer which applies the necessary roles and ARIA attributes
+     * to associate the tab elements with the panels.
+     * @private
+     */
+    __itemsOrPanelsChanged(items, panels) {
+      if (!items || !panels) {
+        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);
+        }
+      });
+    }
+
+    /**
+     * An observer which toggles the visibility of the panels based on the selected tab.
+     * @private
+     */
+    __selectedTabItemChanged(selected, items, panels) {
+      if (!items || !panels || selected === undefined) {
+        return;
+      }
+      const content = this.shadowRoot.querySelector('[part="content"]');
+      const selectedTab = items[selected];
+      const selectedTabId = selectedTab ? selectedTab.id : '';
+      const selectedPanel = panels.find((panel) => panel.getAttribute('tab') === selectedTabId);
+
+      // Mark loading state if a selected panel is not found.
+      this.toggleAttribute('loading', !selectedPanel);
+      const hasOneVisiblePanel = panels.filter((panel) => !panel.hidden).length === 1;
+      if (selectedPanel) {
+        // A selected panel is found, remove the loading state fallback height.
+        content.style.minHeight = '';
+      } else if (hasOneVisiblePanel) {
+        // Make sure the empty content has a fallback height in loading state..
+        content.style.minHeight = `${content.offsetHeight}px`;
+      }
+
+      // Hide all panels and show only the selected panel.
+      panels.forEach((panel) => {
+        panel.hidden = panel !== selectedPanel;
+      });
+    }
+  };

package/src/vaadin-tabsheet.d.ts

@@ -4,10 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import type { Tab } from '@vaadin/tabs/src/vaadin-tab.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
 
 /**
  * Fired when the `items` property changes.
@@ -69,21 +69,7 @@ export interface TabSheetEventMap extends HTMLElementEventMap, TabSheetCustomEve
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} selected-changed - Fired when the `selected` property changes.
  */
-declare class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
-  /**
-   * The index of the selected tab.
-   */
-  selected: number | null | undefined;
-
-  /**
-   * The list of `<vaadin-tab>`s from which a selection can be made.
-   * It is populated from the elements passed inside the slotted
-   * `<vaadin-tabs>`, and updated dynamically when adding or removing items.
-   *
-   * Note: unlike `<vaadin-combo-box>`, this property is read-only.
-   */
-  readonly items: Tab[] | undefined;
-
+declare class TabSheet extends ThemableMixin(TabSheetMixin<Tab>(ControllerMixin(ElementMixin(HTMLElement)))) {
   addEventListener<K extends keyof TabSheetEventMap>(
     type: K,
     listener: (this: TabSheet, ev: TabSheetEventMap[K]) => void,

package/src/vaadin-tabsheet.js

@@ -7,57 +7,9 @@ import './vaadin-tabsheet-scroller.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
-import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-import { Tabs } from '@vaadin/tabs/src/vaadin-tabs.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * @private
- * A controller which observes the <vaadin-tabs> slotted to the tabs slot.
- */
-class TabsSlotController extends SlotController {
-  constructor(host) {
-    super(host, 'tabs');
-    this.__tabsItemsChangedListener = this.__tabsItemsChangedListener.bind(this);
-    this.__tabsSelectedChangedListener = this.__tabsSelectedChangedListener.bind(this);
-  }
-
-  /** @private */
-  __tabsItemsChangedListener() {
-    this.host._setItems(this.tabs.items);
-  }
-
-  /** @private */
-  __tabsSelectedChangedListener() {
-    this.host.selected = this.tabs.selected;
-  }
-
-  initCustomNode(tabs) {
-    if (!(tabs instanceof Tabs)) {
-      throw Error('The "tabs" slot of a <vaadin-tabsheet> must only contain a <vaadin-tabs> element!');
-    }
-    this.tabs = tabs;
-    tabs.addEventListener('items-changed', this.__tabsItemsChangedListener);
-    tabs.addEventListener('selected-changed', this.__tabsSelectedChangedListener);
-    this.host.__tabs = tabs;
-    this.host.stateTarget = tabs;
-    this.__tabsItemsChangedListener();
-  }
-
-  teardownNode(tabs) {
-    this.tabs = null;
-    tabs.removeEventListener('items-changed', this.__tabsItemsChangedListener);
-    tabs.removeEventListener('selected-changed', this.__tabsSelectedChangedListener);
-    this.host.__tabs = null;
-    this.host._setItems([]);
-    this.host.stateTarget = undefined;
-  }
-}
+import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
 
 /**
  * `<vaadin-tabsheet>` is a Web Component for organizing and grouping content
@@ -103,12 +55,12 @@ class TabsSlotController extends SlotController {
  *
  * @customElement
  * @extends HTMLElement
+ * @mixes TabSheetMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes ControllerMixin
- * @mixes DelegateStateMixin
  */
-class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
+class TabSheet extends TabSheetMixin(ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -156,138 +108,6 @@ class TabSheet extends ControllerMixin(DelegateStateMixin(ElementMixin(ThemableM
   static get is() {
     return 'vaadin-tabsheet';
   }
-
-  static get properties() {
-    return {
-      /**
-       * The list of `<vaadin-tab>`s from which a selection can be made.
-       * It is populated from the elements passed inside the slotted
-       * `<vaadin-tabs>`, and updated dynamically when adding or removing items.
-       *
-       * Note: unlike `<vaadin-combo-box>`, this property is read-only.
-       * @type {!Array<!Tab> | undefined}
-       */
-      items: {
-        type: Array,
-        readOnly: true,
-        notify: true,
-      },
-
-      /**
-       * The index of the selected tab.
-       */
-      selected: {
-        value: 0,
-        type: Number,
-        notify: true,
-      },
-
-      /**
-       * The slotted <vaadin-tabs> element.
-       */
-      __tabs: {
-        type: Object,
-      },
-
-      /**
-       * The panel elements.
-       */
-      __panels: {
-        type: Array,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__itemsOrPanelsChanged(items, __panels)', '__selectedTabItemChanged(selected, items, __panels)'];
-  }
-
-  /** @override */
-  static get delegateProps() {
-    return ['selected'];
-  }
-
-  /** @override */
-  static get delegateAttrs() {
-    return ['theme'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.__overflowController = new OverflowController(this, this.shadowRoot.querySelector('[part="content"]'));
-    this.addController(this.__overflowController);
-
-    this._tabsSlotController = new TabsSlotController(this);
-    this.addController(this._tabsSlotController);
-
-    // Observe the panels slot for nodes. Set the assigned element nodes as the __panels array.
-    const panelSlot = this.shadowRoot.querySelector('#panel-slot');
-    this.__panelsObserver = new SlotObserver(panelSlot, () => {
-      this.__panels = Array.from(panelSlot.assignedNodes({ flatten: true })).filter(
-        (node) => node.nodeType === Node.ELEMENT_NODE,
-      );
-    });
-  }
-
-  /**
-   * An observer which applies the necessary roles and ARIA attributes
-   * to associate the tab elements with the panels.
-   * @private
-   */
-  __itemsOrPanelsChanged(items, panels) {
-    if (!items || !panels) {
-      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);
-      }
-    });
-  }
-
-  /**
-   * An observer which toggles the visibility of the panels based on the selected tab.
-   * @private
-   */
-  __selectedTabItemChanged(selected, items, panels) {
-    if (!items || !panels || selected === undefined) {
-      return;
-    }
-
-    const content = this.shadowRoot.querySelector('[part="content"]');
-
-    const selectedTab = items[selected];
-    const selectedTabId = selectedTab ? selectedTab.id : '';
-    const selectedPanel = panels.find((panel) => panel.getAttribute('tab') === selectedTabId);
-
-    // Mark loading state if a selected panel is not found.
-    this.toggleAttribute('loading', !selectedPanel);
-
-    const hasOneVisiblePanel = panels.filter((panel) => !panel.hidden).length === 1;
-
-    if (selectedPanel) {
-      // A selected panel is found, remove the loading state fallback height.
-      content.style.minHeight = '';
-    } else if (hasOneVisiblePanel) {
-      // Make sure the empty content has a fallback height in loading state..
-      content.style.minHeight = `${content.offsetHeight}px`;
-    }
-
-    // Hide all panels and show only the selected panel.
-    panels.forEach((panel) => {
-      panel.hidden = panel !== selectedPanel;
-    });
-  }
 }
 
 defineCustomElement(TabSheet);

package/web-types.json

@@ -1,65 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/web-types",
-  "name": "@vaadin/tabsheet",
-  "version": "24.3.2",
-  "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.3.2",
-  "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"
-              }
-            }
-          ]
-        }
-      ]
-    }
-  }
-}