Skip to content

Commit

Permalink
Fix for selected tab styling not updating when changing property
Browse files Browse the repository at this point in the history
  • Loading branch information
emi420 committed Oct 15, 2024
1 parent d1f1196 commit 850af69
Show file tree
Hide file tree
Showing 14 changed files with 108 additions and 96 deletions.
4 changes: 2 additions & 2 deletions .storybook/stories/header.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ export const Header: StoryObj = {
layout: 'fullscreen',
},
args: {
selectedTab: 0,
size: "small",
title: "",
logo: defaultLogo,
drawer: true,
tabs: twoTab,
borderBottom: false,
selectedTab: 0
},
argTypes: {
size: {
Expand Down Expand Up @@ -83,7 +83,7 @@ export const Header: StoryObj = {
},
},
selectedTab: {
options: [0,1],
options: [0,1,2,3,4,5],
control: {
type: "select",
},
Expand Down
68 changes: 0 additions & 68 deletions dist/chunks/chunk.4SB2ERYH.js

This file was deleted.

14 changes: 9 additions & 5 deletions dist/chunks/chunk.OZAMUC24.js → dist/chunks/chunk.7KXDULC3.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,6 @@ import{css as e}from"lit";import{cva as a}from"class-variance-authority";var o=a
font-size: var(--hot-font-size-x-large);
}
.header--tab-group {
flex-direction: column;
}
.header--tab::part(base) {
font-size: var(--hot-font-size-medium);
font-weight: var(--hot-font-weight-normal);
Expand All @@ -51,7 +47,7 @@ import{css as e}from"lit";import{cva as a}from"class-variance-authority";var o=a
.header--tab-group::part(base) {
--track-color: transparent;
--indicator-color: var(--hot-color-neutral-950);
--indicator-color: none;
}
.header--nav {
Expand All @@ -78,5 +74,13 @@ import{css as e}from"lit";import{cva as a}from"class-variance-authority";var o=a
.header--logo-img {
}
.header--tab {
border-bottom: 2px solid;
border-color: transparent;
}
.header--tab-active {
border-color: var(--hot-color-neutral-1000);
}
}
`;export{o as a,i as b};
66 changes: 66 additions & 0 deletions dist/chunks/chunk.B3MIQKX3.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
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`
<header class=${h({size:this.size,borderBottom:this.borderBottom})}>
<a href="/" class="header--link">
${r.length>0?n`
<img
id="logo"
src="${this.logo}"
alt="Logo"
class="header--logo-img"
/>
`:n`
<hot-logo
?iconOnly="${this.title.length>0}"
>
</hot-logo>
`}
${this.title.length>0?n`
<h1 class="header--title">
${this.title}
</h1>
`:null}
</a>
${""}
<nav
class="header--nav"
>
<sl-tab-group class="header--tab-group">
${this.tabs.map((i,c)=>n`
<sl-tab
class=${["header--tab",this.selectedTab===c?"header--tab-active":""].join(" ")}
slot="nav"
@click=${f=>{this._tabClick(f,i.clickEvent,c)}}
>
${i.label}
</sl-tab>
`)}
</sl-tab-group>
</nav>
${""}
${""}
<nav
class="header--nav-mobile"
></nav>
<div id="right-section" class="header--right-section">
<sl-icon-button
name="person-fill"
library="hot-icons"
class="header--person-circle"
label="login"
@click=${i=>{this._handleLogin(i)}}
></sl-icon-button>
${this.drawer?n`
<sl-icon-button
library="hot-icons"
class="header--drawer"
name="list"
label="drawer-open"
></sl-icon-button>
`:null}
</div>
</div>
</header>
`}_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};
Original file line number Diff line number Diff line change
@@ -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};
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};
5 changes: 3 additions & 2 deletions dist/components/header/header.component.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
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 } from "lit";
Expand All @@ -24,9 +23,11 @@ export declare class Header extends LitElement {
accessor size: sizes;
/** Border bottom. */
accessor borderBottom: boolean;
/** Index of the selected tab. */
accessor selectedTab: number;
selectTab(index: number): void;
protected render(): import("lit").TemplateResult<1>;
private _selectTab;
private _tabClick;
private _handleLogin;
}
export default Header;
2 changes: 1 addition & 1 deletion dist/components/header/header.component.js
Original file line number Diff line number Diff line change
@@ -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};
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};
2 changes: 1 addition & 1 deletion dist/components/header/header.js
Original file line number Diff line number Diff line change
@@ -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};
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};
2 changes: 1 addition & 1 deletion dist/components/header/header.styles.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
import{a,b}from"../../chunks/chunk.OZAMUC24.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as headerVariants,b as styles};
import{a,b}from"../../chunks/chunk.7KXDULC3.js";import"../../chunks/chunk.FWYUHKRF.js";export{a as headerVariants,b as styles};
Loading

0 comments on commit 850af69

Please sign in to comment.