Skip to content

Commit 850af69

Browse files
emi420emi420
committed
Fix for selected tab styling not updating when changing property
1 parent d1f1196 commit 850af69

14 files changed

+108
-96
lines changed

‎.storybook/stories/header.stories.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@ export const Header: StoryObj = {
4343
layout: 'fullscreen',
4444
},
4545
args: {
46+
selectedTab: 0,
4647
size: "small",
4748
title: "",
4849
logo: defaultLogo,
4950
drawer: true,
5051
tabs: twoTab,
5152
borderBottom: false,
52-
selectedTab: 0
5353
},
5454
argTypes: {
5555
size: {
@@ -83,7 +83,7 @@ export const Header: StoryObj = {
8383
},
8484
},
8585
selectedTab: {
86-
options: [0,1],
86+
options: [0,1,2,3,4,5],
8787
control: {
8888
type: "select",
8989
},

‎dist/chunks/chunk.4SB2ERYH.js

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎dist/chunks/chunk.OZAMUC24.js renamed to ‎dist/chunks/chunk.7KXDULC3.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,6 @@ import{css as e}from"lit";import{cva as a}from"class-variance-authority";var o=a
3838
font-size: var(--hot-font-size-x-large);
3939
}
4040
41-
.header--tab-group {
42-
flex-direction: column;
43-
}
44-
4541
.header--tab::part(base) {
4642
font-size: var(--hot-font-size-medium);
4743
font-weight: var(--hot-font-weight-normal);
@@ -51,7 +47,7 @@ import{css as e}from"lit";import{cva as a}from"class-variance-authority";var o=a
5147
5248
.header--tab-group::part(base) {
5349
--track-color: transparent;
54-
--indicator-color: var(--hot-color-neutral-950);
50+
--indicator-color: none;
5551
}
5652
5753
.header--nav {
@@ -78,5 +74,13 @@ import{css as e}from"lit";import{cva as a}from"class-variance-authority";var o=a
7874
.header--logo-img {
7975
}
8076
77+
.header--tab {
78+
border-bottom: 2px solid;
79+
border-color: transparent;
80+
}
81+
.header--tab-active {
82+
border-color: var(--hot-color-neutral-1000);
83+
}
84+
8185
}
8286
`;export{o as a,i as b};

‎dist/chunks/chunk.B3MIQKX3.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import{a as d}from"./chunk.WPXUR5EI.js";import{a as h,b as g}from"./chunk.7KXDULC3.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-group/tab-group.js";import"@shoelace-style/shoelace/dist/components/tab/tab.js";import{LitElement as E,html as n}from"lit";import{property as a}from"lit/decorators.js";d();var b,p,m,v,u,y,$,e=class extends E{constructor(){super(...arguments);this.name="hot-header";l(this,b,"");l(this,p,"");l(this,m,!0);l(this,v,[]);l(this,u,"small");l(this,y,!0);l(this,$,0)}get title(){return s(this,b)}set title(r){o(this,b,r)}get logo(){return s(this,p)}set logo(r){o(this,p,r)}get drawer(){return s(this,m)}set drawer(r){o(this,m,r)}get tabs(){return s(this,v)}set tabs(r){o(this,v,r)}get size(){return s(this,u)}set size(r){o(this,u,r)}get borderBottom(){return s(this,y)}set borderBottom(r){o(this,y,r)}get selectedTab(){return s(this,$)}set selectedTab(r){o(this,$,r)}selectTab(r){console.log(r),this.tabs=[...this.tabs],this.selectedTab=r}render(){let r=typeof this.logo=="string"||this.logo instanceof URL?typeof this.logo=="string"?this.logo:this.logo.href:"";return n`
2+
<header class=${h({size:this.size,borderBottom:this.borderBottom})}>
3+
<a href="/" class="header--link">
4+
${r.length>0?n`
5+
<img
6+
id="logo"
7+
src="${this.logo}"
8+
alt="Logo"
9+
class="header--logo-img"
10+
/>
11+
`:n`
12+
<hot-logo
13+
?iconOnly="${this.title.length>0}"
14+
>
15+
</hot-logo>
16+
`}
17+
${this.title.length>0?n`
18+
<h1 class="header--title">
19+
${this.title}
20+
</h1>
21+
`:null}
22+
</a>
23+
24+
${""}
25+
<nav
26+
class="header--nav"
27+
>
28+
<sl-tab-group class="header--tab-group">
29+
${this.tabs.map((i,c)=>n`
30+
<sl-tab
31+
class=${["header--tab",this.selectedTab===c?"header--tab-active":""].join(" ")}
32+
slot="nav"
33+
@click=${f=>{this._tabClick(f,i.clickEvent,c)}}
34+
>
35+
${i.label}
36+
</sl-tab>
37+
`)}
38+
</sl-tab-group>
39+
</nav>
40+
41+
${""}
42+
${""}
43+
<nav
44+
class="header--nav-mobile"
45+
></nav>
46+
47+
<div id="right-section" class="header--right-section">
48+
<sl-icon-button
49+
name="person-fill"
50+
library="hot-icons"
51+
class="header--person-circle"
52+
label="login"
53+
@click=${i=>{this._handleLogin(i)}}
54+
></sl-icon-button>
55+
${this.drawer?n`
56+
<sl-icon-button
57+
library="hot-icons"
58+
class="header--drawer"
59+
name="list"
60+
label="drawer-open"
61+
></sl-icon-button>
62+
`:null}
63+
</div>
64+
</div>
65+
</header>
66+
`}_tabClick(r,i,c){this.selectTab(c),i()}_handleLogin(r){this.dispatchEvent(new Event("login"))}};b=new WeakMap,p=new WeakMap,m=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({type:Number})],e.prototype,"selectedTab",1);var R=e;customElements.define("hot-header",e);export{e as a,R as b};

‎dist/chunks/chunk.HG7UATLC.js renamed to ‎dist/chunks/chunk.JK2P4SXH.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import{b as e}from"./chunk.4SB2ERYH.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};
1+
import{b as e}from"./chunk.B3MIQKX3.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};

‎dist/components/header/header.component.d.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
2-
import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
32
import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
43
import "@shoelace-style/shoelace/dist/components/tab/tab.js";
54
import { LitElement } from "lit";
@@ -24,9 +23,11 @@ export declare class Header extends LitElement {
2423
accessor size: sizes;
2524
/** Border bottom. */
2625
accessor borderBottom: boolean;
26+
/** Index of the selected tab. */
2727
accessor selectedTab: number;
28+
selectTab(index: number): void;
2829
protected render(): import("lit").TemplateResult<1>;
29-
private _selectTab;
30+
private _tabClick;
3031
private _handleLogin;
3132
}
3233
export default Header;

‎dist/components/header/header.component.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import{a,b}from"../../chunks/chunk.4SB2ERYH.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.OZAMUC24.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as Header,b as default};
1+
import{a,b}from"../../chunks/chunk.B3MIQKX3.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.7KXDULC3.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as Header,b as default};

‎dist/components/header/header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import{a,b as e}from"../../chunks/chunk.4SB2ERYH.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.OZAMUC24.js";import"../../chunks/chunk.FWYUHKRF.js";var o=e;export{a as Header,o as default};
1+
import{a,b as e}from"../../chunks/chunk.B3MIQKX3.js";import"../../chunks/chunk.WPXUR5EI.js";import"../../chunks/chunk.7KXDULC3.js";import"../../chunks/chunk.FWYUHKRF.js";var o=e;export{a as Header,o as default};

‎dist/components/header/header.styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import{a,b}from"../../chunks/chunk.OZAMUC24.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as headerVariants,b as styles};
1+
import{a,b}from"../../chunks/chunk.7KXDULC3.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as headerVariants,b as styles};

0 commit comments

Comments
 (0)