Fix for Header selectedTab

hotosm · Oct 14, 2024 · e76555f · e76555f
1 parent 424045e
commit e76555f
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 14 deletions.
diff --git a/.storybook/stories/header.stories.ts b/.storybook/stories/header.stories.ts
@@ -55,6 +55,7 @@ export const Header: StoryObj = {
     drawer: true,
     tabs: twoTab,
     borderBottom: true,
+    selectedTab: 0
   },
   argTypes: {
     size: {
@@ -87,6 +88,12 @@ export const Header: StoryObj = {
         type: "radio",
       },
     },
+    selectedTab: {
+      options: [0,1],
+      control: {
+        type: "select",
+      },
+    },
     tabs: {
       options: {
         '1 Tab': oneTab,
@@ -109,6 +116,7 @@ export const Header: StoryObj = {
         size=${args.size}
         ?drawer=${args.drawer}
         .tabs=${args.tabs}
+        selectedTab=${args.selectedTab}
       ></hot-header>
     `;
   },

diff --git a/dist/chunks/chunk.J7BYXLYQ.js → dist/chunks/chunk.5MCKVFI6.js b/dist/chunks/chunk.J7BYXLYQ.js → dist/chunks/chunk.5MCKVFI6.js
@@ -1,4 +1,4 @@
-import{a as d}from"./chunk.WPXUR5EI.js";import{a as h,b as g}from"./chunk.4QDUS5ZV.js";import{a as t,b as s,c as l,d as o}from"./chunk.FWYUHKRF.js";import"@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";import"@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";import"@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";import"@shoelace-style/shoelace/dist/components/tab/tab.js";import{LitElement as E,html as i}from"lit";import{property as a}from"lit/decorators.js";d();var p,m,b,v,u,y,$,e=class extends E{constructor(){super(...arguments);this.name="hot-header";l(this,p,"");l(this,m,"");l(this,b,!0);l(this,v,[]);l(this,u,"small");l(this,y,!0);l(this,$,0)}get title(){return s(this,p)}set title(c){o(this,p,c)}get logo(){return s(this,m)}set logo(c){o(this,m,c)}get drawer(){return s(this,b)}set drawer(c){o(this,b,c)}get tabs(){return s(this,v)}set tabs(c){o(this,v,c)}get size(){return s(this,u)}set size(c){o(this,u,c)}get borderBottom(){return s(this,y)}set borderBottom(c){o(this,y,c)}get selectedTab(){return s(this,$)}set selectedTab(c){o(this,$,c)}render(){let c=typeof this.logo=="string"||this.logo instanceof URL?typeof this.logo=="string"?this.logo:this.logo.href:"";return i`
+import{a as d}from"./chunk.WPXUR5EI.js";import{a as h,b as g}from"./chunk.4QDUS5ZV.js";import{a as t,b as s,c as l,d as o}from"./chunk.FWYUHKRF.js";import"@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";import"@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";import"@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";import"@shoelace-style/shoelace/dist/components/tab/tab.js";import{LitElement as E,html as i}from"lit";import{property as r}from"lit/decorators.js";d();var p,m,b,v,u,y,$,e=class extends E{constructor(){super(...arguments);this.name="hot-header";l(this,p,"");l(this,m,"");l(this,b,!0);l(this,v,[]);l(this,u,"small");l(this,y,!0);l(this,$,0)}get title(){return s(this,p)}set title(c){o(this,p,c)}get logo(){return s(this,m)}set logo(c){o(this,m,c)}get drawer(){return s(this,b)}set drawer(c){o(this,b,c)}get tabs(){return s(this,v)}set tabs(c){o(this,v,c)}get size(){return s(this,u)}set size(c){o(this,u,c)}get borderBottom(){return s(this,y)}set borderBottom(c){o(this,y,c)}get selectedTab(){return s(this,$)}set selectedTab(c){o(this,$,c)}render(){let c=typeof this.logo=="string"||this.logo instanceof URL?typeof this.logo=="string"?this.logo:this.logo.href:"";return i`
       <header class=${h({size:this.size,borderBottom:this.borderBottom})}>
         <a href="/" class="header--link">
           ${c.length>0?i`
@@ -26,14 +26,14 @@ import{a as d}from"./chunk.WPXUR5EI.js";import{a as h,b as g}from"./chunk.4QDUS5
           class="header--nav"
         >
           <sl-tab-group class="header--tab-group">
-            ${this.tabs.map((r,n)=>i`
+            ${this.tabs.map((a,n)=>i`
                 <sl-tab
                   class="header--tab"
                   slot="nav"
                   panel="general"
-                  @click=${f=>{this._selectTab(f,r.clickEvent,n)}}
-                  ?active=${this.selectedTab===n}
-                  >${r.label}</sl-tab
+                  @click=${f=>{this._selectTab(f,a.clickEvent,n)}}
+                  ?active=${this.selectedTab.toString()===n.toString()}
+                  >${a.label}</sl-tab
                 >
               `)}
           </sl-tab-group>
@@ -51,7 +51,7 @@ import{a as d}from"./chunk.WPXUR5EI.js";import{a as h,b as g}from"./chunk.4QDUS5
             library="hot-icons"
             class="header--person-circle"
             label="login"
-            @click=${r=>{this._handleLogin(r)}}
+            @click=${a=>{this._handleLogin(a)}}
           ></sl-icon-button>
             ${this.drawer?i`
                   <sl-icon-button
@@ -64,4 +64,4 @@ import{a as d}from"./chunk.WPXUR5EI.js";import{a as h,b as g}from"./chunk.4QDUS5
           </div>
         </div>
       </header>
-    `}_selectTab(c,r,n){this.selectedTab=n,r()}_handleLogin(c){this.dispatchEvent(new Event("login"))}};p=new WeakMap,m=new WeakMap,b=new WeakMap,v=new WeakMap,u=new WeakMap,y=new WeakMap,$=new WeakMap,e.styles=[g],t([a({type:String})],e.prototype,"title",1),t([a({type:String})],e.prototype,"logo",1),t([a({type:Boolean})],e.prototype,"drawer",1),t([a({type:Array})],e.prototype,"tabs",1),t([a({type:String})],e.prototype,"size",1),t([a({type:Boolean})],e.prototype,"borderBottom",1),t([a()],e.prototype,"selectedTab",1);var x=e;customElements.define("hot-header",e);export{e as a,x as b};
+    `}_selectTab(c,a,n){this.selectedTab=n,a()}_handleLogin(c){this.dispatchEvent(new Event("login"))}};p=new WeakMap,m=new WeakMap,b=new WeakMap,v=new WeakMap,u=new WeakMap,y=new WeakMap,$=new WeakMap,e.styles=[g],t([r({type:String})],e.prototype,"title",1),t([r({type:String})],e.prototype,"logo",1),t([r({type:Boolean})],e.prototype,"drawer",1),t([r({type:Array})],e.prototype,"tabs",1),t([r({type:String})],e.prototype,"size",1),t([r({type:Boolean})],e.prototype,"borderBottom",1),t([r()],e.prototype,"selectedTab",1);var x=e;customElements.define("hot-header",e);export{e as a,x as b};
diff --git a/dist/chunks/chunk.WVMJKQRZ.js → dist/chunks/chunk.YX2NM5AR.js b/dist/chunks/chunk.WVMJKQRZ.js → dist/chunks/chunk.YX2NM5AR.js
@@ -1 +1 @@
-import{b as e}from"./chunk.J7BYXLYQ.js";import*as t from"react";import{createComponent as a}from"@lit/react";var o="hot-header",r=a({tagName:o,elementClass:e,react:t,events:{},displayName:"Header"}),n=r;export{n as a};
+import{b as e}from"./chunk.5MCKVFI6.js";import*as t from"react";import{createComponent as a}from"@lit/react";var o="hot-header",r=a({tagName:o,elementClass:e,react:t,events:{},displayName:"Header"}),n=r;export{n as a};
diff --git a/dist/components/header/header.component.js b/dist/components/header/header.component.js
@@ -1 +1 @@
-import{a,b}from"../../chunks/chunk.J7BYXLYQ.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.4QDUS5ZV.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as Header,b as default};
+import{a,b}from"../../chunks/chunk.5MCKVFI6.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.4QDUS5ZV.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as Header,b as default};
diff --git a/dist/components/header/header.js b/dist/components/header/header.js
@@ -1 +1 @@
-import{a,b as e}from"../../chunks/chunk.J7BYXLYQ.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.4QDUS5ZV.js";import"../../chunks/chunk.FWYUHKRF.js";var o=e;export{a as Header,o as default};
+import{a,b as e}from"../../chunks/chunk.5MCKVFI6.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.4QDUS5ZV.js";import"../../chunks/chunk.FWYUHKRF.js";var o=e;export{a as Header,o as default};