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`, () => {