@vaadin/tabsheet
Advanced tools
Comparing version 24.4.0-alpha2 to 24.4.0-alpha20
{ | ||
"name": "@vaadin/tabsheet", | ||
"version": "24.4.0-alpha2", | ||
"version": "24.4.0-alpha20", | ||
"publishConfig": { | ||
@@ -40,8 +40,8 @@ "access": "public" | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/component-base": "24.4.0-alpha2", | ||
"@vaadin/scroller": "24.4.0-alpha2", | ||
"@vaadin/tabs": "24.4.0-alpha2", | ||
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha2", | ||
"@vaadin/vaadin-material-styles": "24.4.0-alpha2", | ||
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha2" | ||
"@vaadin/component-base": "24.4.0-alpha20", | ||
"@vaadin/scroller": "24.4.0-alpha20", | ||
"@vaadin/tabs": "24.4.0-alpha20", | ||
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha20", | ||
"@vaadin/vaadin-material-styles": "24.4.0-alpha20", | ||
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha20" | ||
}, | ||
@@ -57,3 +57,3 @@ "devDependencies": { | ||
], | ||
"gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421" | ||
"gitHead": "9d2eacc494eb27658ba9298be6656815912637be" | ||
} |
@@ -8,3 +8,2 @@ # @vaadin/tabsheet | ||
[![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) | ||
@@ -11,0 +10,0 @@ ```html |
@@ -21,2 +21,13 @@ /** | ||
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); | ||
} | ||
}); | ||
}); | ||
} | ||
@@ -26,3 +37,10 @@ | ||
__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); | ||
} | ||
@@ -147,11 +165,3 @@ | ||
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); | ||
}); | ||
@@ -168,6 +178,10 @@ } | ||
} | ||
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"]'); | ||
@@ -190,2 +204,15 @@ // Mark loading state if a selected panel is not found. | ||
} | ||
/** @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); | ||
} | ||
} | ||
}; |
{ | ||
"$schema": "https://json.schemastore.org/web-types", | ||
"name": "@vaadin/tabsheet", | ||
"version": "24.4.0-alpha2", | ||
"version": "24.4.0-alpha20", | ||
"description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "contributions": { |
{ | ||
"$schema": "https://json.schemastore.org/web-types", | ||
"name": "@vaadin/tabsheet", | ||
"version": "24.4.0-alpha2", | ||
"version": "24.4.0-alpha20", | ||
"description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "framework": "lit", |
38284
20
647
72
+ Added@vaadin/a11y-base@24.4.0-alpha20(transitive)
+ Added@vaadin/component-base@24.4.0-alpha20(transitive)
+ Added@vaadin/icon@24.4.0-alpha20(transitive)
+ Added@vaadin/item@24.4.0-alpha20(transitive)
+ Added@vaadin/scroller@24.4.0-alpha20(transitive)
+ Added@vaadin/tabs@24.4.0-alpha20(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.4.0-alpha20(transitive)
+ Added@vaadin/vaadin-material-styles@24.4.0-alpha20(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.4.0-alpha20(transitive)
- Removed@vaadin/a11y-base@24.4.0-alpha2(transitive)
- Removed@vaadin/component-base@24.4.0-alpha2(transitive)
- Removed@vaadin/icon@24.4.0-alpha2(transitive)
- Removed@vaadin/item@24.4.0-alpha2(transitive)
- Removed@vaadin/scroller@24.4.0-alpha2(transitive)
- Removed@vaadin/tabs@24.4.0-alpha2(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.4.0-alpha2(transitive)
- Removed@vaadin/vaadin-material-styles@24.4.0-alpha2(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.4.0-alpha2(transitive)
Updated@vaadin/tabs@24.4.0-alpha20