@vaadin/tabsheet
Advanced tools
Comparing version 24.4.0-alpha17 to 24.4.0-alpha18
{ | ||
"name": "@vaadin/tabsheet", | ||
"version": "24.4.0-alpha17", | ||
"version": "24.4.0-alpha18", | ||
"publishConfig": { | ||
@@ -40,8 +40,8 @@ "access": "public" | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/component-base": "24.4.0-alpha17", | ||
"@vaadin/scroller": "24.4.0-alpha17", | ||
"@vaadin/tabs": "24.4.0-alpha17", | ||
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha17", | ||
"@vaadin/vaadin-material-styles": "24.4.0-alpha17", | ||
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha17" | ||
"@vaadin/component-base": "24.4.0-alpha18", | ||
"@vaadin/scroller": "24.4.0-alpha18", | ||
"@vaadin/tabs": "24.4.0-alpha18", | ||
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha18", | ||
"@vaadin/vaadin-material-styles": "24.4.0-alpha18", | ||
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha18" | ||
}, | ||
@@ -57,3 +57,3 @@ "devDependencies": { | ||
], | ||
"gitHead": "eb6b4dac66be1c0ddc77757bed5f84a6d355e5cf" | ||
"gitHead": "7d675c61eaa32ef50c07de7b2fea19ff437b6b90" | ||
} |
@@ -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-alpha17", | ||
"version": "24.4.0-alpha18", | ||
"description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "contributions": { |
{ | ||
"$schema": "https://json.schemastore.org/web-types", | ||
"name": "@vaadin/tabsheet", | ||
"version": "24.4.0-alpha17", | ||
"version": "24.4.0-alpha18", | ||
"description-markup": "markdown", | ||
@@ -6,0 +6,0 @@ "framework": "lit", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
38284
647
+ Added@vaadin/a11y-base@24.4.0-alpha18(transitive)
+ Added@vaadin/component-base@24.4.0-alpha18(transitive)
+ Added@vaadin/icon@24.4.0-alpha18(transitive)
+ Added@vaadin/item@24.4.0-alpha18(transitive)
+ Added@vaadin/scroller@24.4.0-alpha18(transitive)
+ Added@vaadin/tabs@24.4.0-alpha18(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.4.0-alpha18(transitive)
+ Added@vaadin/vaadin-material-styles@24.4.0-alpha18(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.4.0-alpha18(transitive)
- Removed@vaadin/a11y-base@24.4.0-alpha17(transitive)
- Removed@vaadin/component-base@24.4.0-alpha17(transitive)
- Removed@vaadin/icon@24.4.0-alpha17(transitive)
- Removed@vaadin/item@24.4.0-alpha17(transitive)
- Removed@vaadin/scroller@24.4.0-alpha17(transitive)
- Removed@vaadin/tabs@24.4.0-alpha17(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.4.0-alpha17(transitive)
- Removed@vaadin/vaadin-material-styles@24.4.0-alpha17(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.4.0-alpha17(transitive)
Updated@vaadin/tabs@24.4.0-alpha18