fix(Tabset): reset tabset to current tab when first tab is removed

docs/components/tabset/index.html

@@ -244,6 +244,7 @@ <h2 id="dynamic-tabset">Dynamic Tabset</h2>
         <hx-tabset
           ref="tabset"
           :current-tab="currentTab"
+          :tabsize="tabSize"
           @tabchange="onTabchange"
         >
           <hx-tablist>

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(`
-<hx-tabset current-tab="${this.currentTab}">
+<hx-tabset current-tab="${this.currentTab}" tabsize="${this.tabSize}">
   <hx-tablist>
     ${this._tablist}
   </hx-tablist>

docs/elements/hx-tabset/index.html

@@ -128,6 +128,12 @@ <h2 id="methods">Methods</h2>
         Automatically updates visual state, when changed.
       </p>
     </dd>
+    <dt>tabsize {Number}</dt>
+    <dd>
+      <p>
+        Number of tabs.
+      </p>
+    </dd>
   </dl>
 {% endblock %}
 
@@ -143,5 +149,15 @@ <h2 id="methods">Methods</h2>
         Reflects the <code>current-tab</code> attribute.
       </p>
     </dd>
+    <dt>tabSize {Integer}</dt>
+    <dd>
+      <p>
+        Number of tabs.
+      </p>
+      <p class="hxSubdued hxSubBody">
+        <hx-icon type="info-circle"></hx-icon>
+        Reflects the <code>tabsize</code> attribute.
+      </p>
+    </dd>
   </dl>
 {% endblock %}

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 ---------- */
 
     /**

src/elements/hx-tabset/index.spec.js

@@ -71,6 +71,15 @@ describe('<hx-tabset> 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`, () => {