diff --git a/docs/components/tabset/index.html b/docs/components/tabset/index.html index 186f33fed..9542c6c39 100644 --- a/docs/components/tabset/index.html +++ b/docs/components/tabset/index.html @@ -244,6 +244,7 @@

Dynamic Tabset

diff --git a/docs/components/tabset/tabset-demo.js b/docs/components/tabset/tabset-demo.js index 67e8f2927..f6e9892eb 100644 --- a/docs/components/tabset/tabset-demo.js +++ b/docs/components/tabset/tabset-demo.js @@ -9,6 +9,7 @@ function getDefaultData (force = false) { { id: 2 }, { id: 3 }, ], + tabSize: 3, }; if (force === true) { @@ -32,6 +33,8 @@ if (document.getElementById('vue-dynamicTabsetDemo')) { if (this.autoUpdate) { this.update(); } + + this.tabSize = this.tabs.length; }, methods: { addTab: function (dir) { @@ -111,7 +114,7 @@ if (document.getElementById('vue-dynamicTabsetDemo')) { // isn't smart enough to re-indent HTML tags. snippet: function () { return Util.snippet(` - + ${this._tablist} diff --git a/docs/elements/hx-tabset/index.html b/docs/elements/hx-tabset/index.html index 7a524ed1d..036d102f6 100644 --- a/docs/elements/hx-tabset/index.html +++ b/docs/elements/hx-tabset/index.html @@ -128,6 +128,12 @@

Methods

Automatically updates visual state, when changed.

+
tabsize {Number}
+
+

+ Number of tabs. +

+
{% endblock %} @@ -143,5 +149,15 @@

Methods

Reflects the current-tab attribute.

+
tabSize {Integer}
+
+

+ Number of tabs. +

+

+ + Reflects the tabsize attribute. +

+
{% endblock %} diff --git a/src/elements/hx-tabset/index.js b/src/elements/hx-tabset/index.js index abdf0dfb4..07181f661 100644 --- a/src/elements/hx-tabset/index.js +++ b/src/elements/hx-tabset/index.js @@ -32,9 +32,11 @@ export class HXTabsetElement extends HXElement { $onConnect () { this.$upgradeProperty('current-tab'); + this.$upgradeProperty('tabsize'); this.$defaultAttribute('id', `tabset-${generateId()}`); this._setupIds(); this.currentTab = Number(this.getAttribute('current-tab')) || 0; + this.tabSize = Number(this.getAttribute('tabsize')) || this.tabs.length; this._tablist.addEventListener('keyup', this._onKeyUp); this._tablist.addEventListener('keydown', preventKeyScroll); this.addEventListener('hxtabclick', this._onHxtabclick); @@ -48,7 +50,7 @@ export class HXTabsetElement extends HXElement { } static get $observedAttributes () { - return [ 'current-tab' ]; + return [ 'current-tab', 'tabsize' ]; } $onAttributeChange (attr, oldVal, newVal) { @@ -58,6 +60,12 @@ export class HXTabsetElement extends HXElement { this.$emit('tabchange'); } } + if (attr === 'tabsize') { + if (this.currentTab === 0 && !isNaN(newVal)) { + this._activateTab(0); + this.$emit('tabchange'); + } + } } /* ---------- PUBLIC MEMBERS ---------- */ @@ -88,6 +96,19 @@ export class HXTabsetElement extends HXElement { this.setAttribute('current-tab', idx); } + /* ---------- PUBLIC MEMBERS ---------- */ + + /** + * Number of Tabs. + * @type {Number} + */ + get tabSize () { + return Number(this.getAttribute('tabsize')) || this.tabs.length; + } + set tabSize (len) { + this.setAttribute('tabsize', len); + } + /* ---------- PUBLIC METHODS ---------- */ /** diff --git a/src/elements/hx-tabset/index.spec.js b/src/elements/hx-tabset/index.spec.js index 30f5aad84..841976665 100644 --- a/src/elements/hx-tabset/index.spec.js +++ b/src/elements/hx-tabset/index.spec.js @@ -71,6 +71,15 @@ describe(' component tests', () => { expect(attr).to.be.true; }); + + it('should get tabsize on render', async () => { + const fragment = /** @type {HXTabsetElement} */ await fixture(mockup); + const tab = fragment.hasAttribute('tabsize'); + const tabSize = fragment.tabSize; + + expect(tab).to.be.true; + expect(tabSize).to.equal(3); + }); }); describe(`test ${template} getters and setters`, () => {