Merge pull request #87 from github/change-default-tab-to-defaultTabIndex

Change default-tab to default-tab-index
github · Mar 8, 2024 · 6e90dbc · 6e90dbc
2 parents 3c74546 + 7a01bd2
commit 6e90dbc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/custom-elements.json b/custom-elements.json
@@ -196,6 +196,10 @@
               "kind": "field",
               "name": "selectedTabIndex"
             },
+            {
+              "kind": "field",
+              "name": "defaultTabIndex"
+            },
             {
               "kind": "method",
               "name": "selectTab",
@@ -550,6 +554,13 @@
                 "text": "number"
               }
             },
+            {
+              "kind": "field",
+              "name": "defaultTabIndex",
+              "type": {
+                "text": "number"
+              }
+            },
             {
               "kind": "method",
               "name": "selectTab",

diff --git a/examples/index.html b/examples/index.html
@@ -100,6 +100,23 @@ <h2>Set initially selected tab</h2>
       </div>
     </tab-container>
 
+    <h2>Set default tab</h2>
+
+    <tab-container default-tab-index="1">
+      <button type="button" id="tab-one" role="tab">Tab one</button>
+      <button type="button" id="tab-two" role="tab">Tab two</button>
+      <button type="button" id="tab-three" role="tab">Tab three</button>
+      <div role="tabpanel" aria-labelledby="tab-one" hidden>
+        Panel 1
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-two">
+        Panel 2
+      </div>
+      <div role="tabpanel" aria-labelledby="tab-three" hidden>
+        Panel 3
+      </div>
+    </tab-container>
+
     <h2>Panel with extra buttons</h2>
 
     <tab-container>
@@ -123,7 +140,7 @@ <h2>Panel with extra buttons</h2>
 
   </main>
 
-  <!-- <script src="../dist/index.js" type="module"></script> -->
+  <!--<script src="../dist/index.js" type="module"></script>-->
   <script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.js" type="module"></script>
 </body>
 </html>
diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts
@@ -254,6 +254,14 @@ export class TabContainerElement extends HTMLElement {
     this.selectTab(i)
   }
 
+  get defaultTabIndex(): number {
+    return Number(this.getAttribute('default-tab') || -1)
+  }
+
+  set defaultTabIndex(index: number) {
+    this.setAttribute('default-tab', String(index))
+  }
+
   selectTab(index: number): void {
     if (!this.#setupComplete) {
       const tabListSlot = this.#tabListSlot
@@ -310,7 +318,7 @@ export class TabContainerElement extends HTMLElement {
         for (const el of afterTabSlotted) el.setAttribute('slot', 'after-tabs')
         for (const el of afterSlotted) el.setAttribute('slot', 'after-panels')
       }
-      const defaultTab = Number(this.getAttribute('default-tab') || -1)
+      const defaultTab = this.defaultTabIndex
       const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex
       index = index >= 0 ? index : Math.max(0, defaultIndex)
     }

diff --git a/test/test.js b/test/test.js
@@ -108,10 +108,10 @@ describe('tab-container', function () {
     })
   })
 
-  describe('after tree insertion with default-tab', function () {
+  describe('after tree insertion with defaulTabIndex', function () {
     beforeEach(function () {
       document.body.innerHTML = `
-      <tab-container default-tab=1>
+      <tab-container default-tab="1">
         <button type="button" role="tab">Tab one</button>
         <button type="button" role="tab">Tab two</button>
         <button type="button" role="tab">Tab three</button>