From cd5a75a0c4f9ef336a3dafe8a28577261e7a0fe0 Mon Sep 17 00:00:00 2001 From: Javed Khan Date: Sun, 9 May 2021 20:15:58 +0530 Subject: [PATCH 1/5] fix(tabset): fixed issue when first tab is removed --- docs/components/tabset/index.html | 1 + docs/components/tabset/tabset-demo.js | 3 +++ src/elements/hx-tabset/index.js | 23 ++++++++++++++++++++++- src/elements/hx-tabset/index.spec.js | 9 +++++++++ 4 files changed, 35 insertions(+), 1 deletion(-) diff --git a/docs/components/tabset/index.html b/docs/components/tabset/index.html index 186f33fed..bab21055a 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..93f79e319 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) { diff --git a/src/elements/hx-tabset/index.js b/src/elements/hx-tabset/index.js index abdf0dfb4..ee0c2a6ad 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('current-tab')) || 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 ---------- */ + + /** + * Zero-based index of the currently active tab. + * @type {Number} + */ + get tabsize () { + return Number(this.getAttribute('current-tab')) || 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..e4304a3e5 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 tabPosition = fragment.tabsize; + + expect(tab).to.be.true; + expect(tabPosition).to.equal(3); + }); }); describe(`test ${template} getters and setters`, () => { From f94519efecb29710e75a4103c71238ba60f13efb Mon Sep 17 00:00:00 2001 From: Javed Khan Date: Sun, 9 May 2021 20:16:40 +0530 Subject: [PATCH 2/5] fix(tabset): fixed issue when first tab is removed --- src/elements/hx-tabset/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/hx-tabset/index.js b/src/elements/hx-tabset/index.js index ee0c2a6ad..f09ac4979 100644 --- a/src/elements/hx-tabset/index.js +++ b/src/elements/hx-tabset/index.js @@ -96,13 +96,13 @@ export class HXTabsetElement extends HXElement { this.setAttribute('current-tab', idx); } - /* ---------- PUBLIC MEMBERS ---------- */ + /* ---------- PUBLIC MEMBERS ---------- */ /** * Zero-based index of the currently active tab. * @type {Number} */ - get tabsize () { + get tabsize () { return Number(this.getAttribute('current-tab')) || this.tabs.length; } set tabsize (len) { From dc482eee1823ed72afe79acb5222833cda7842bc Mon Sep 17 00:00:00 2001 From: Javed Khan Date: Sun, 9 May 2021 21:46:02 +0530 Subject: [PATCH 3/5] fix(tabset): correction --- src/elements/hx-tabset/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/elements/hx-tabset/index.js b/src/elements/hx-tabset/index.js index f09ac4979..68b12c4b8 100644 --- a/src/elements/hx-tabset/index.js +++ b/src/elements/hx-tabset/index.js @@ -36,7 +36,7 @@ export class HXTabsetElement extends HXElement { this.$defaultAttribute('id', `tabset-${generateId()}`); this._setupIds(); this.currentTab = Number(this.getAttribute('current-tab')) || 0; - this.tabsize = Number(this.getAttribute('current-tab')) || this.tabs.length; + 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); @@ -103,7 +103,7 @@ export class HXTabsetElement extends HXElement { * @type {Number} */ get tabsize () { - return Number(this.getAttribute('current-tab')) || this.tabs.length; + return Number(this.getAttribute('tabsize')) || this.tabs.length; } set tabsize (len) { this.setAttribute('tabsize', len); From bf0a5662a5cfe4a883397b1da31fa8ade8a1c9d4 Mon Sep 17 00:00:00 2001 From: Javed Khan Date: Tue, 11 May 2021 11:23:21 +0530 Subject: [PATCH 4/5] fix(tabset): rename setter prop and update docs --- docs/components/tabset/index.html | 2 +- docs/components/tabset/tabset-demo.js | 6 +++--- docs/elements/hx-tabset/index.html | 16 ++++++++++++++++ src/elements/hx-tabset/index.js | 8 ++++---- src/elements/hx-tabset/index.spec.js | 4 ++-- 5 files changed, 26 insertions(+), 10 deletions(-) diff --git a/docs/components/tabset/index.html b/docs/components/tabset/index.html index bab21055a..9542c6c39 100644 --- a/docs/components/tabset/index.html +++ b/docs/components/tabset/index.html @@ -244,7 +244,7 @@

Dynamic Tabset

diff --git a/docs/components/tabset/tabset-demo.js b/docs/components/tabset/tabset-demo.js index 93f79e319..f6e9892eb 100644 --- a/docs/components/tabset/tabset-demo.js +++ b/docs/components/tabset/tabset-demo.js @@ -9,7 +9,7 @@ function getDefaultData (force = false) { { id: 2 }, { id: 3 }, ], - tabsize: 3, + tabSize: 3, }; if (force === true) { @@ -34,7 +34,7 @@ if (document.getElementById('vue-dynamicTabsetDemo')) { this.update(); } - this.tabsize = this.tabs.length; + this.tabSize = this.tabs.length; }, methods: { addTab: function (dir) { @@ -114,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 68b12c4b8..9632c5647 100644 --- a/src/elements/hx-tabset/index.js +++ b/src/elements/hx-tabset/index.js @@ -32,11 +32,11 @@ export class HXTabsetElement extends HXElement { $onConnect () { this.$upgradeProperty('current-tab'); - this.$upgradeProperty('tabSize'); + 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.tabSize = Number(this.getAttribute('tabsize')) || this.tabs.length; this._tablist.addEventListener('keyup', this._onKeyUp); this._tablist.addEventListener('keydown', preventKeyScroll); this.addEventListener('hxtabclick', this._onHxtabclick); @@ -102,10 +102,10 @@ export class HXTabsetElement extends HXElement { * Zero-based index of the currently active tab. * @type {Number} */ - get tabsize () { + get tabSize () { return Number(this.getAttribute('tabsize')) || this.tabs.length; } - set tabsize (len) { + set tabSize (len) { this.setAttribute('tabsize', len); } diff --git a/src/elements/hx-tabset/index.spec.js b/src/elements/hx-tabset/index.spec.js index e4304a3e5..841976665 100644 --- a/src/elements/hx-tabset/index.spec.js +++ b/src/elements/hx-tabset/index.spec.js @@ -75,10 +75,10 @@ describe(' component tests', () => { it('should get tabsize on render', async () => { const fragment = /** @type {HXTabsetElement} */ await fixture(mockup); const tab = fragment.hasAttribute('tabsize'); - const tabPosition = fragment.tabsize; + const tabSize = fragment.tabSize; expect(tab).to.be.true; - expect(tabPosition).to.equal(3); + expect(tabSize).to.equal(3); }); }); From 0be08cac69c40143061f4408f7018c62944dbd7d Mon Sep 17 00:00:00 2001 From: Javed Khan Date: Tue, 11 May 2021 11:27:06 +0530 Subject: [PATCH 5/5] fix(tabset): update comment --- src/elements/hx-tabset/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/hx-tabset/index.js b/src/elements/hx-tabset/index.js index 9632c5647..07181f661 100644 --- a/src/elements/hx-tabset/index.js +++ b/src/elements/hx-tabset/index.js @@ -99,7 +99,7 @@ export class HXTabsetElement extends HXElement { /* ---------- PUBLIC MEMBERS ---------- */ /** - * Zero-based index of the currently active tab. + * Number of Tabs. * @type {Number} */ get tabSize () {