@vaadin/tabsheet
Advanced tools
Comparing version 24.4.0-dev.223e39f050 to 24.4.0-dev.4b20a0c55
{ | ||
"name": "@vaadin/tabsheet", | ||
"version": "24.4.0-dev.223e39f050", | ||
"version": "24.4.0-dev.4b20a0c55", | ||
"publishConfig": { | ||
@@ -40,8 +40,8 @@ "access": "public" | ||
"@polymer/polymer": "^3.0.0", | ||
"@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" | ||
"@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" | ||
}, | ||
@@ -57,3 +57,3 @@ "devDependencies": { | ||
], | ||
"gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354" | ||
"gitHead": "b79c81e5f6fd24684b34ee0dc434e94d943ea13e" | ||
} |
@@ -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 |
/** | ||
* @license | ||
* Copyright (c) 2019 - 2023 Vaadin Ltd. | ||
* Copyright (c) 2019 - 2024 Vaadin Ltd. | ||
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* @license | ||
* Copyright (c) 2022 - 2023 Vaadin Ltd. | ||
* Copyright (c) 2022 - 2024 Vaadin Ltd. | ||
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -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); | ||
} | ||
} | ||
}; |
/** | ||
* @license | ||
* Copyright (c) 2022 - 2023 Vaadin Ltd. | ||
* Copyright (c) 2022 - 2024 Vaadin Ltd. | ||
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* @license | ||
* Copyright (c) 2022 - 2023 Vaadin Ltd. | ||
* Copyright (c) 2022 - 2024 Vaadin Ltd. | ||
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
/** | ||
* @license | ||
* Copyright (c) 2022 - 2023 Vaadin Ltd. | ||
* Copyright (c) 2022 - 2024 Vaadin Ltd. | ||
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
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
32270
513
72
+ Added@vaadin/a11y-base@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/component-base@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/icon@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/item@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/scroller@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/tabs@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/vaadin-material-styles@24.4.0-dev.4b20a0c55(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.4.0-dev.4b20a0c55(transitive)
- Removed@vaadin/a11y-base@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/component-base@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/icon@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/item@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/scroller@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/tabs@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/vaadin-material-styles@24.4.0-dev.223e39f050(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.4.0-dev.223e39f050(transitive)