jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-08 10:29:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate tab-group to webawesome (#26951)

Browse Source
This commit is contained in:
Wendelin
2025-09-11 11:15:24 +02:00
committed by GitHub
parent 9e29693293
commit 1abedcd5f0
21 changed files with 324 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@@ -15,6 +15,8 @@ import "../../../../src/components/ha-list";
import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-list-item";
import "../../../../src/components/ha-password-field"; import "../../../../src/components/ha-password-field";
import "../../../../src/components/ha-radio"; import "../../../../src/components/ha-radio";
import "../../../../src/components/ha-tab-group";
import "../../../../src/components/ha-tab-group-tab";
import "../../../../src/components/ha-textfield"; import "../../../../src/components/ha-textfield";
import type { HaTextField } from "../../../../src/components/ha-textfield"; import type { HaTextField } from "../../../../src/components/ha-textfield";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -36,7 +38,6 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../src/resources/styles"; import { haStyleDialog } from "../../../../src/resources/styles";
import type { HomeAssistant } from "../../../../src/types"; import type { HomeAssistant } from "../../../../src/types";
import type { HassioNetworkDialogParams } from "./show-dialog-network"; import type { HassioNetworkDialogParams } from "./show-dialog-network";
import "../../../../src/components/sl-tab-group";
const IP_VERSIONS = ["ipv4", "ipv6"]; const IP_VERSIONS = ["ipv4", "ipv6"];
@@ -114,19 +115,19 @@ export class DialogHassioNetwork
></ha-icon-button> ></ha-icon-button>
</ha-header-bar> </ha-header-bar>
${this._interfaces.length > 1 ${this._interfaces.length > 1
? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated} ? html`<ha-tab-group @wa-tab-show=${this._handleTabActivated}
>${this._interfaces.map( >${this._interfaces.map(
(device, index) => (device, index) =>
html`<sl-tab html`<ha-tab-group-tab
slot="nav" slot="nav"
.id=${device.interface} .id=${device.interface}
.panel=${index.toString()} .panel=${index.toString()}
.active=${this._curTabIndex === index} .active=${this._curTabIndex === index}
> >
${device.interface} ${device.interface}
</sl-tab>` </ha-tab-group-tab>`
)} )}
</sl-tab-group>` </ha-tab-group>`
: ""} : ""}
</div> </div>
${cache(this._renderTab())} ${cache(this._renderTab())}
@@ -627,10 +628,10 @@ export class DialogHassioNetwork
--mdc-list-side-padding: 10px; --mdc-list-side-padding: 10px;
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

2
package.json
View File

@@ -51,7 +51,7 @@
"@fullcalendar/list": "6.1.19", "@fullcalendar/list": "6.1.19",
"@fullcalendar/luxon3": "6.1.19", "@fullcalendar/luxon3": "6.1.19",
"@fullcalendar/timegrid": "6.1.19", "@fullcalendar/timegrid": "6.1.19",
"@home-assistant/webawesome": "3.0.0-beta.4.ha.1", "@home-assistant/webawesome": "3.0.0-beta.4.ha.2",
"@lezer/highlight": "1.2.1", "@lezer/highlight": "1.2.1",
"@lit-labs/motion": "1.0.9", "@lit-labs/motion": "1.0.9",
"@lit-labs/observers": "2.0.6", "@lit-labs/observers": "2.0.6",

42
src/components/ha-tab-group-tab.ts Normal file
View File

@@ -0,0 +1,42 @@
import Tab from "@home-assistant/webawesome/dist/components/tab/tab";
import { css, type CSSResultGroup } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-tab-group-tab")
export class HaTabGroupTab extends Tab {
static get styles(): CSSResultGroup {
return [
Tab.styles,
css`
:host {
font-size: var(--ha-font-size-m);
--wa-color-brand-on-quiet: var(
--ha-tab-active-text-color,
var(--primary-color)
);
2
--wa-color-neutral-on-quiet: var(--wa-color-brand-on-quiet);
opacity: 0.8;
color: inherit;
}
:host([active]:not([disabled])) {
opacity: 1;
}
@media (hover: hover) {
:host(:hover:not([disabled]):not([active])) .tab {
color: var(--wa-color-brand-on-quiet);
}
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-tab-group-tab": HaTabGroupTab;
}
}

64
src/components/ha-tab-group.ts Normal file
View File

@@ -0,0 +1,64 @@
import TabGroup from "@home-assistant/webawesome/dist/components/tab-group/tab-group";
import { css, type CSSResultGroup } from "lit";
import { customElement, property } from "lit/decorators";
import { DragScrollController } from "../common/controllers/drag-scroll-controller";
@customElement("ha-tab-group")
export class HaTabGroup extends TabGroup {
private _dragScrollController = new DragScrollController(this, {
selector: ".nav",
});
@property({ attribute: "tab-tag" }) override tabTag = "ha-tab-group-tab";
@property({ attribute: "tab-only", type: Boolean }) tabOnly = true;
protected override handleClick(event: MouseEvent) {
if (this._dragScrollController.scrolled) {
return;
}
super.handleClick(event);
}
static get styles(): CSSResultGroup {
return [
TabGroup.styles,
css`
:host {
--track-width: 2px;
--track-color: var(--ha-tab-track-color, var(--divider-color));
--indicator-color: var(
--ha-tab-indicator-color,
var(--primary-color)
);
--wa-color-neutral-on-quiet: var(--indicator-color);
}
.tab-group-top ::slotted(ha-tab-group-tab[active]) {
border-block-end: solid var(--track-width) var(--indicator-color);
margin-block-end: calc(-1 * var(--track-width));
}
.tab-group-start ::slotted(ha-tab-group-tab[active]) {
border-inline-end: solid var(--track-width) var(--indicator-color);
margin-inline-end: calc(-1 * var(--track-width));
}
.tab-group-end ::slotted(ha-tab-group-tab[active]) {
border-inline-start: solid var(--track-width) var(--indicator-color);
margin-inline-start: calc(-1 * var(--track-width));
}
.scroll-button::part(base):hover {
background-color: transparent;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-tab-group": HaTabGroup;
}
}

88
src/components/sl-tab-group.ts
View File

@@ -1,88 +0,0 @@
import TabGroup from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.component";
import TabGroupStyles from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.styles";
import "@shoelace-style/shoelace/dist/components/tab/tab";
import { css } from "lit";
import { customElement } from "lit/decorators";
import { DragScrollController } from "../common/controllers/drag-scroll-controller";
@customElement("sl-tab-group")
// @ts-ignore
export class HaSlTabGroup extends TabGroup {
private _dragScrollController = new DragScrollController(this, {
selector: ".tab-group__nav",
});
override setAriaLabels() {
// Override the method to prevent setting aria-labels, as we don't use panels
// and don't want to set aria-labels for the tabs
}
override getAllPanels() {
// Override the method to prevent querying for panels
// and return an empty array instead
// as we don't use panels
return [];
}
// @ts-ignore
protected override handleClick(event: MouseEvent) {
if (this._dragScrollController.scrolled) {
return;
}
// @ts-ignore
super.handleClick(event);
}
static override styles = [
TabGroupStyles,
css`
:host {
--sl-spacing-3x-small: 0.125rem;
--sl-spacing-2x-small: 0.25rem;
--sl-spacing-x-small: 0.5rem;
--sl-spacing-small: 0.75rem;
--sl-spacing-medium: 1rem;
--sl-spacing-large: 1.25rem;
--sl-spacing-x-large: 1.75rem;
--sl-spacing-2x-large: 2.25rem;
--sl-spacing-3x-large: 3rem;
--sl-spacing-4x-large: 4.5rem;
--sl-transition-x-slow: 1000ms;
--sl-transition-slow: 500ms;
--sl-transition-medium: 250ms;
--sl-transition-fast: 150ms;
--sl-transition-x-fast: 50ms;
--transition-speed: var(--sl-transition-fast);
--sl-border-radius-small: 0.1875rem;
--sl-border-radius-medium: 0.25rem;
--sl-border-radius-large: 0.5rem;
--sl-border-radius-x-large: 1rem;
--sl-border-radius-circle: 50%;
--sl-border-radius-pill: 9999px;
--sl-color-neutral-600: inherit;
--sl-font-weight-semibold: var(--ha-font-weight-medium);
--sl-font-size-small: var(--ha-font-size-m);
--sl-color-primary-600: var(
--ha-tab-active-text-color,
var(--primary-color)
);
--track-color: var(--ha-tab-track-color, var(--divider-color));
--indicator-color: var(--ha-tab-indicator-color, var(--primary-color));
}
::slotted(sl-tab:not([active])) {
opacity: 0.8;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
// @ts-ignore
"sl-tab-group": HaSlTabGroup;
}
}

17
src/dialogs/more-info/controls/more-info-weather.ts
View File

@@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
import { formatDateWeekdayShort } from "../../../common/datetime/format_date"; import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
import { formatTime } from "../../../common/datetime/format_time"; import { formatTime } from "../../../common/datetime/format_time";
import { formatNumber } from "../../../common/number/format_number"; import { formatNumber } from "../../../common/number/format_number";
@@ -11,8 +12,9 @@ import "../../../components/ha-relative-time";
import "../../../components/ha-spinner"; import "../../../components/ha-spinner";
import "../../../components/ha-state-icon"; import "../../../components/ha-state-icon";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-tab-group";
import "../../../components/ha-tab-group-tab";
import "../../../components/ha-tooltip"; import "../../../components/ha-tooltip";
import "../../../components/sl-tab-group";
import type { import type {
ForecastEvent, ForecastEvent,
ModernForecastType, ModernForecastType,
@@ -30,7 +32,6 @@ import {
weatherSVGStyles, weatherSVGStyles,
} from "../../../data/weather"; } from "../../../data/weather";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
@customElement("more-info-weather") @customElement("more-info-weather")
class MoreInfoWeather extends LitElement { class MoreInfoWeather extends LitElement {
@@ -299,18 +300,18 @@ class MoreInfoWeather extends LitElement {
${this.hass.localize("ui.card.weather.forecast")}: ${this.hass.localize("ui.card.weather.forecast")}:
</div> </div>
${supportedForecasts?.length > 1 ${supportedForecasts?.length > 1
? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}> ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
${supportedForecasts.map( ${supportedForecasts.map(
(forecastType) => (forecastType) =>
html`<sl-tab html`<ha-tab-group-tab
slot="nav" slot="nav"
.panel=${forecastType} .panel=${forecastType}
.active=${this._forecastType === forecastType} .active=${this._forecastType === forecastType}
> >
${this.hass!.localize(`ui.card.weather.${forecastType}`)} ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
</sl-tab>` </ha-tab-group-tab>`
)} )}
</sl-tab-group>` </ha-tab-group>`
: nothing} : nothing}
<div class="forecast"> <div class="forecast">
${forecast?.length ${forecast?.length
@@ -419,11 +420,11 @@ class MoreInfoWeather extends LitElement {
font-size: 1.2em; font-size: 1.2em;
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

14
src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
View File

@@ -8,6 +8,8 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-code-editor"; import "../../../../../components/ha-code-editor";
import "../../../../../components/ha-dialog"; import "../../../../../components/ha-dialog";
import "../../../../../components/ha-dialog-header"; import "../../../../../components/ha-dialog-header";
import "../../../../../components/ha-tab-group";
import "../../../../../components/ha-tab-group-tab";
import type { ZHADevice, ZHAGroup } from "../../../../../data/zha"; import type { ZHADevice, ZHAGroup } from "../../../../../data/zha";
import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha"; import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha";
import { haStyleDialog } from "../../../../../resources/styles"; import { haStyleDialog } from "../../../../../resources/styles";
@@ -103,10 +105,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
> >
${this.hass.localize("ui.dialogs.zha_manage_device.heading")} ${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
</span> </span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}> <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${tabs.map( ${tabs.map(
(tab) => html` (tab) => html`
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.panel=${tab} .panel=${tab}
.active=${this._currTab === tab} .active=${this._currTab === tab}
@@ -114,10 +116,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
${this.hass.localize( ${this.hass.localize(
`ui.dialogs.zha_manage_device.tabs.${tab}` `ui.dialogs.zha_manage_device.tabs.${tab}`
)} )}
</sl-tab> </ha-tab-group-tab>
` `
)} )}
</sl-tab-group> </ha-tab-group>
</ha-dialog-header> </ha-dialog-header>
<div class="content" tabindex="-1" dialogInitialFocus> <div class="content" tabindex="-1" dialogInitialFocus>
${cache( ${cache(
@@ -229,10 +231,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
} }
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

15
src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts
View File

@@ -6,6 +6,8 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/ha-card"; import "../../../../../components/ha-card";
import "../../../../../components/ha-list-item"; import "../../../../../components/ha-list-item";
import "../../../../../components/ha-select"; import "../../../../../components/ha-select";
import "../../../../../components/ha-tab-group";
import "../../../../../components/ha-tab-group-tab";
import type { Cluster, ZHADevice } from "../../../../../data/zha"; import type { Cluster, ZHADevice } from "../../../../../data/zha";
import { fetchClustersForZhaDevice } from "../../../../../data/zha"; import { fetchClustersForZhaDevice } from "../../../../../data/zha";
import { haStyle } from "../../../../../resources/styles"; import { haStyle } from "../../../../../resources/styles";
@@ -13,7 +15,6 @@ import type { HomeAssistant } from "../../../../../types";
import { computeClusterKey } from "./functions"; import { computeClusterKey } from "./functions";
import "./zha-cluster-attributes"; import "./zha-cluster-attributes";
import "./zha-cluster-commands"; import "./zha-cluster-commands";
import "../../../../../components/sl-tab-group";
declare global { declare global {
// for fire event // for fire event
@@ -91,20 +92,20 @@ export class ZHAManageClusters extends LitElement {
</div> </div>
${this._selectedCluster ${this._selectedCluster
? html` ? html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}> <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${tabs.map( ${tabs.map(
(tab) => html` (tab) => html`
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.panel=${tab} .panel=${tab}
.active=${this._currTab === tab} .active=${this._currTab === tab}
>${this.hass.localize( >${this.hass.localize(
`ui.panel.config.zha.clusters.tabs.${tab}` `ui.panel.config.zha.clusters.tabs.${tab}`
)}</sl-tab )}</ha-tab-group-tab
> >
` `
)} )}
</sl-tab-group> </ha-tab-group>
<div class="content" tabindex="-1" dialogInitialFocus> <div class="content" tabindex="-1" dialogInitialFocus>
${cache( ${cache(
@@ -177,10 +178,10 @@ export class ZHAManageClusters extends LitElement {
padding-bottom: 10px; padding-bottom: 10px;
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

17
src/panels/config/network/supervisor-network.ts
View File

@@ -15,9 +15,10 @@ import "../../../components/ha-password-field";
import "../../../components/ha-radio"; import "../../../components/ha-radio";
import type { HaRadio } from "../../../components/ha-radio"; import type { HaRadio } from "../../../components/ha-radio";
import "../../../components/ha-spinner"; import "../../../components/ha-spinner";
import "../../../components/ha-tab-group";
import "../../../components/ha-tab-group-tab";
import "../../../components/ha-textfield"; import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield"; import type { HaTextField } from "../../../components/ha-textfield";
import "../../../components/sl-tab-group";
import { extractApiErrorMessage } from "../../../data/hassio/common"; import { extractApiErrorMessage } from "../../../data/hassio/common";
import { import {
type AccessPoint, type AccessPoint,
@@ -99,19 +100,19 @@ export class HassioNetwork extends LitElement {
${this.hass.localize("ui.panel.config.network.supervisor.title")} ${this.hass.localize("ui.panel.config.network.supervisor.title")}
${this._interfaces.length > 1 ${this._interfaces.length > 1
? html` ? html`
<sl-tab-group @sl-tab-show=${this._handleTabActivated} <ha-tab-group @wa-tab-show=${this._handleTabActivated}
>${this._interfaces.map( >${this._interfaces.map(
(device, i) => (device, i) =>
html`<sl-tab html`<ha-tab-group-tab
slot="nav" slot="nav"
.active=${this._curTabIndex === i} .active=${this._curTabIndex === i}
.panel=${i.toString()} .panel=${i.toString()}
.id=${device.interface} .id=${device.interface}
> >
${device.interface} ${device.interface}
</sl-tab>` </ha-tab-group-tab>`
)} )}
</sl-tab-group> </ha-tab-group>
` `
: nothing} : nothing}
</div> </div>
@@ -833,13 +834,13 @@ export class HassioNetwork extends LitElement {
margin-bottom: 16px; margin-bottom: 16px;
} }
sl-tab-group { ha-tab-group {
line-height: var(--ha-line-height-normal); line-height: var(--ha-line-height-normal);
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

60
src/panels/developer-tools/ha-panel-developer-tools.ts
View File

@@ -1,14 +1,15 @@
import type { ActionDetail } from "@material/mwc-list";
import { mdiDotsVertical } from "@mdi/js"; import { mdiDotsVertical } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import type { ActionDetail } from "@material/mwc-list";
import { navigate } from "../../common/navigate"; import { navigate } from "../../common/navigate";
import "../../components/ha-menu-button";
import "../../components/ha-button-menu"; import "../../components/ha-button-menu";
import "../../components/ha-icon-button"; import "../../components/ha-icon-button";
import "../../components/ha-list-item"; import "../../components/ha-list-item";
import "../../components/sl-tab-group"; import "../../components/ha-menu-button";
import "../../components/ha-tab-group";
import "../../components/ha-tab-group-tab";
import { haStyle } from "../../resources/styles"; import { haStyle } from "../../resources/styles";
import type { HomeAssistant, Route } from "../../types"; import type { HomeAssistant, Route } from "../../types";
import "./developer-tools-router"; import "./developer-tools-router";
@@ -50,25 +51,41 @@ class PanelDeveloperTools extends LitElement {
</ha-list-item> </ha-list-item>
</ha-button-menu> </ha-button-menu>
</div> </div>
<sl-tab-group @sl-tab-show=${this._handlePageSelected}> <ha-tab-group @wa-tab-show=${this._handlePageSelected}>
<sl-tab slot="nav" panel="yaml" .active=${page === "yaml"}> <ha-tab-group-tab slot="nav" panel="yaml" .active=${page === "yaml"}>
${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")} ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
</sl-tab> </ha-tab-group-tab>
<sl-tab slot="nav" panel="state" .active=${page === "state"}> <ha-tab-group-tab
slot="nav"
panel="state"
.active=${page === "state"}
>
${this.hass.localize("ui.panel.developer-tools.tabs.states.title")} ${this.hass.localize("ui.panel.developer-tools.tabs.states.title")}
</sl-tab> </ha-tab-group-tab>
<sl-tab slot="nav" panel="action" .active=${page === "action"}> <ha-tab-group-tab
slot="nav"
panel="action"
.active=${page === "action"}
>
${this.hass.localize("ui.panel.developer-tools.tabs.actions.title")} ${this.hass.localize("ui.panel.developer-tools.tabs.actions.title")}
</sl-tab> </ha-tab-group-tab>
<sl-tab slot="nav" panel="template" .active=${page === "template"}> <ha-tab-group-tab
slot="nav"
panel="template"
.active=${page === "template"}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.title" "ui.panel.developer-tools.tabs.templates.title"
)} )}
</sl-tab> </ha-tab-group-tab>
<sl-tab slot="nav" panel="event" .active=${page === "event"}> <ha-tab-group-tab
slot="nav"
panel="event"
.active=${page === "event"}
>
${this.hass.localize("ui.panel.developer-tools.tabs.events.title")} ${this.hass.localize("ui.panel.developer-tools.tabs.events.title")}
</sl-tab> </ha-tab-group-tab>
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
panel="statistics" panel="statistics"
.active=${page === "statistics"} .active=${page === "statistics"}
@@ -76,11 +93,14 @@ class PanelDeveloperTools extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.developer-tools.tabs.statistics.title" "ui.panel.developer-tools.tabs.statistics.title"
)} )}
</sl-tab> </ha-tab-group-tab>
<sl-tab slot="nav" panel="assist" .active=${page === "assist"} <ha-tab-group-tab
>Assist</sl-tab slot="nav"
panel="assist"
.active=${page === "assist"}
>Assist</ha-tab-group-tab
> >
</sl-tab-group> </ha-tab-group>
</div> </div>
<developer-tools-router <developer-tools-router
.route=${this.route} .route=${this.route}
@@ -165,7 +185,7 @@ class PanelDeveloperTools extends LitElement {
flex: 1 1 100%; flex: 1 1 100%;
max-width: 100%; max-width: 100%;
} }
sl-tab-group { ha-tab-group {
--ha-tab-active-text-color: var(--app-header-text-color, white); --ha-tab-active-text-color: var(--app-header-text-color, white);
--ha-tab-indicator-color: var(--app-header-text-color, white); --ha-tab-indicator-color: var(--app-header-text-color, white);
--ha-tab-track-color: transparent; --ha-tab-track-color: transparent;

21
src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts
View File

@@ -1,7 +1,8 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, nothing } from "lit"; import { css, html, nothing } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import "../../../../components/sl-tab-group"; import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
import { getBadgeElementClass } from "../../create-element/create-badge-element"; import { getBadgeElementClass } from "../../create-element/create-badge-element";
import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types"; import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
@@ -67,17 +68,21 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
break; break;
} }
return html` return html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}> <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${tabs.map( ${tabs.map(
(tab) => html` (tab) => html`
<sl-tab slot="nav" .panel=${tab} .active=${this._currTab === tab}> <ha-tab-group-tab
slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
>
${this.hass!.localize( ${this.hass!.localize(
`ui.panel.lovelace.editor.edit_badge.tab_${tab}` `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
)} )}
</sl-tab> </ha-tab-group-tab>
` `
)} )}
</sl-tab-group> </ha-tab-group>
${content} ${content}
`; `;
} }
@@ -86,13 +91,13 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
return [ return [
HuiTypedElementEditor.styles, HuiTypedElementEditor.styles,
css` css`
sl-tab-group { ha-tab-group {
margin-bottom: 16px; margin-bottom: 16px;
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

21
src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts
View File

@@ -5,10 +5,11 @@ import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache"; import { cache } from "lit/directives/cache";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-dialog";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group"; import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles"; import { haStyleDialog } from "../../../../resources/styles";
@@ -98,8 +99,8 @@ export class HuiCreateDialogBadge
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
<span slot="title">${title}</span> <span slot="title">${title}</span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}> <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.active=${this._currTab === "badge"} .active=${this._currTab === "badge"}
panel="badge" panel="badge"
@@ -108,16 +109,16 @@ export class HuiCreateDialogBadge
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_badge" "ui.panel.lovelace.editor.badge_picker.by_badge"
)} )}
</sl-tab> </ha-tab-group-tab>
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.active=${this._currTab === "entity"} .active=${this._currTab === "entity"}
panel="entity" panel="entity"
>${this.hass!.localize( >${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_entity" "ui.panel.lovelace.editor.badge_picker.by_entity"
)}</sl-tab )}</ha-tab-group-tab
> >
</sl-tab-group> </ha-tab-group>
</ha-dialog-header> </ha-dialog-header>
${cache( ${cache(
this._currTab === "badge" this._currTab === "badge"
@@ -193,10 +194,10 @@ export class HuiCreateDialogBadge
--mdc-dialog-min-width: 1000px; --mdc-dialog-min-width: 1000px;
} }
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

21
src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
View File

@@ -1,7 +1,8 @@
import type { TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, nothing } from "lit"; import { css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../../components/sl-tab-group"; import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section"; import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
import { getCardElementClass } from "../../create-element/create-card-element"; import { getCardElementClass } from "../../create-element/create-card-element";
@@ -90,17 +91,21 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
`; `;
} }
return html` return html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}> <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${displayedTabs.map( ${displayedTabs.map(
(tab) => html` (tab) => html`
<sl-tab slot="nav" .active=${this._currTab === tab} panel=${tab}> <ha-tab-group-tab
slot="nav"
.active=${this._currTab === tab}
panel=${tab}
>
${this.hass.localize( ${this.hass.localize(
`ui.panel.lovelace.editor.edit_card.tab_${tab}` `ui.panel.lovelace.editor.edit_card.tab_${tab}`
)} )}
</sl-tab> </ha-tab-group-tab>
` `
)} )}
</sl-tab-group> </ha-tab-group>
${content} ${content}
`; `;
} }
@@ -115,15 +120,15 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
static override styles = [ static override styles = [
css` css`
sl-tab-group { ha-tab-group {
margin-bottom: 16px; margin-bottom: 16px;
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

19
src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
View File

@@ -9,7 +9,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group"; import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section"; import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
import { isStrategySection } from "../../../../data/lovelace/config/section"; import { isStrategySection } from "../../../../data/lovelace/config/section";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -117,8 +118,8 @@ export class HuiCreateDialogCard
></ha-icon-button> ></ha-icon-button>
<span slot="title">${title}</span> <span slot="title">${title}</span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}> <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.active=${this._currTab === "card"} .active=${this._currTab === "card"}
panel="card" panel="card"
@@ -127,16 +128,16 @@ export class HuiCreateDialogCard
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_card" "ui.panel.lovelace.editor.cardpicker.by_card"
)} )}
</sl-tab> </ha-tab-group-tab>
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.active=${this._currTab === "entity"} .active=${this._currTab === "entity"}
panel="entity" panel="entity"
>${this.hass!.localize( >${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_entity" "ui.panel.lovelace.editor.cardpicker.by_entity"
)}</sl-tab )}</ha-tab-group-tab
> >
</sl-tab-group> </ha-tab-group>
</ha-dialog-header> </ha-dialog-header>
${cache( ${cache(
this._currTab === "card" this._currTab === "card"
@@ -215,10 +216,10 @@ export class HuiCreateDialogCard
--mdc-dialog-min-width: 1000px; --mdc-dialog-min-width: 1000px;
} }
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

23
src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
View File

@@ -10,7 +10,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import "../../../../components/sl-tab-group"; import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
@@ -79,18 +80,22 @@ export class HuiConditionalCardEditor
const isGuiMode = !this._cardEditorEl || this._GUImode; const isGuiMode = !this._cardEditorEl || this._GUImode;
return html` return html`
<sl-tab-group @sl-tab-show=${this._selectTab}> <ha-tab-group @wa-tab-show=${this._selectTab}>
<sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}> <ha-tab-group-tab
slot="nav"
panel="conditions"
.active=${!this._cardTab}
>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.conditions" "ui.panel.lovelace.editor.card.conditional.conditions"
)} )}
</sl-tab> </ha-tab-group-tab>
<sl-tab slot="nav" panel="card" .active=${this._cardTab}> <ha-tab-group-tab slot="nav" panel="card" .active=${this._cardTab}>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.card" "ui.panel.lovelace.editor.card.conditional.card"
)} )}
</sl-tab> </ha-tab-group-tab>
</sl-tab-group> </ha-tab-group>
${this._cardTab ${this._cardTab
? html` ? html`
<div class="card"> <div class="card">
@@ -233,11 +238,11 @@ export class HuiConditionalCardEditor
return [ return [
configElementStyle, configElementStyle,
css` css`
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

19
src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
View File

@@ -30,7 +30,8 @@ import type {
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-button-arrow-next"; import "../../../../components/ha-icon-button-arrow-next";
import "../../../../components/ha-icon-button-arrow-prev"; import "../../../../components/ha-icon-button-arrow-prev";
import "../../../../components/sl-tab-group"; import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
@@ -123,14 +124,18 @@ export class HuiStackCardEditor
></ha-form> ></ha-form>
<div class="card-config"> <div class="card-config">
<div class="toolbar"> <div class="toolbar">
<sl-tab-group @sl-tab-show=${this._handleSelectedCard}> <ha-tab-group @wa-tab-show=${this._handleSelectedCard}>
${this._config.cards.map( ${this._config.cards.map(
(_card, i) => (_card, i) =>
html`<sl-tab slot="nav" .panel=${i} .active=${i === selected}> html`<ha-tab-group-tab
slot="nav"
.panel=${i}
.active=${i === selected}
>
${i + 1} ${i + 1}
</sl-tab>` </ha-tab-group-tab>`
)} )}
</sl-tab-group> </ha-tab-group>
<ha-icon-button <ha-icon-button
@click=${this._handleAddCard} @click=${this._handleAddCard}
.path=${mdiPlus} .path=${mdiPlus}
@@ -229,8 +234,6 @@ export class HuiStackCardEditor
protected async _handleAddCard() { protected async _handleAddCard() {
this._selectedCard = this._config!.cards.length; this._selectedCard = this._config!.cards.length;
await this.updateComplete;
this.renderRoot.querySelector("sl-tab-group")!.syncIndicator();
} }
protected _handleSelectedCard(ev) { protected _handleSelectedCard(ev) {
@@ -335,7 +338,7 @@ export class HuiStackCardEditor
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
sl-tab-group { ha-tab-group {
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
--ha-tab-track-color: var(--card-background-color); --ha-tab-track-color: var(--card-background-color);

27
src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
View File

@@ -17,30 +17,31 @@ import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-list-item"; import "../../../../components/ha-list-item";
import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import "../../../../components/ha-yaml-editor"; import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import "../../../../components/sl-tab-group";
import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section"; import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
import { saveConfig } from "../../../../data/lovelace/config/types";
import { import {
isStrategyView, isStrategyView,
type LovelaceViewConfig, type LovelaceViewConfig,
} from "../../../../data/lovelace/config/view"; } from "../../../../data/lovelace/config/view";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles"; import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import type { Lovelace } from "../../types";
import { addSection, deleteSection, moveSection } from "../config-util";
import { import {
findLovelaceContainer, findLovelaceContainer,
updateLovelaceContainer, updateLovelaceContainer,
} from "../lovelace-path"; } from "../lovelace-path";
import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
import "./hui-section-settings-editor"; import "./hui-section-settings-editor";
import "./hui-section-visibility-editor"; import "./hui-section-visibility-editor";
import type { EditSectionDialogParams } from "./show-edit-section-dialog"; import type { EditSectionDialogParams } from "./show-edit-section-dialog";
import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
import { saveConfig } from "../../../../data/lovelace/config/types";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
import { addSection, deleteSection, moveSection } from "../config-util";
import type { Lovelace } from "../../types";
const TABS = ["tab-settings", "tab-visibility"] as const; const TABS = ["tab-settings", "tab-visibility"] as const;
@@ -195,10 +196,10 @@ export class HuiDialogEditSection
</ha-button-menu> </ha-button-menu>
${!this._yamlMode ${!this._yamlMode
? html` ? html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}> <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${TABS.map( ${TABS.map(
(tab) => html` (tab) => html`
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.panel=${tab} .panel=${tab}
.active=${this._currTab === tab} .active=${this._currTab === tab}
@@ -206,10 +207,10 @@ export class HuiDialogEditSection
${this.hass!.localize( ${this.hass!.localize(
`ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}` `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
)} )}
</sl-tab> </ha-tab-group-tab>
` `
)} )}
</sl-tab-group> </ha-tab-group>
` `
: nothing} : nothing}
</ha-dialog-header> </ha-dialog-header>
@@ -433,10 +434,10 @@ export class HuiDialogEditSection
ha-dialog.yaml-mode { ha-dialog.yaml-mode {
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

15
src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
View File

@@ -20,6 +20,8 @@ import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/ha-list-item"; import "../../../../components/ha-list-item";
import "../../../../components/ha-spinner"; import "../../../../components/ha-spinner";
import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import "../../../../components/ha-yaml-editor"; import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import { import {
@@ -53,7 +55,6 @@ import "./hui-view-background-editor";
import "./hui-view-editor"; import "./hui-view-editor";
import "./hui-view-visibility-editor"; import "./hui-view-visibility-editor";
import type { EditViewDialogParams } from "./show-edit-view-dialog"; import type { EditViewDialogParams } from "./show-edit-view-dialog";
import "../../../../components/sl-tab-group";
const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const; const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const;
@@ -274,10 +275,10 @@ export class HuiDialogEditView extends LitElement {
` `
: nothing} : nothing}
${!this._yamlMode ${!this._yamlMode
? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}> ? html`<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${TABS.map( ${TABS.map(
(tab) => html` (tab) => html`
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
.panel=${tab} .panel=${tab}
.active=${this._currTab === tab} .active=${this._currTab === tab}
@@ -285,10 +286,10 @@ export class HuiDialogEditView extends LitElement {
${this.hass!.localize( ${this.hass!.localize(
`ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}` `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
)} )}
</sl-tab> </ha-tab-group-tab>
` `
)} )}
</sl-tab-group>` </ha-tab-group>`
: nothing} : nothing}
</ha-dialog-header> </ha-dialog-header>
${content} ${content}
@@ -651,10 +652,10 @@ export class HuiDialogEditView extends LitElement {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
sl-tab { ha-tab-group-tab {
flex: 1; flex: 1;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }

65
src/panels/lovelace/hui-root.ts
View File

@@ -45,7 +45,8 @@ import "../../components/ha-icon-button-arrow-prev";
import "../../components/ha-list-item"; import "../../components/ha-list-item";
import "../../components/ha-menu-button"; import "../../components/ha-menu-button";
import "../../components/ha-svg-icon"; import "../../components/ha-svg-icon";
import "../../components/sl-tab-group"; import "../../components/ha-tab-group";
import "../../components/ha-tab-group-tab";
import { createAreaRegistryEntry } from "../../data/area_registry"; import { createAreaRegistryEntry } from "../../data/area_registry";
import type { LovelacePanelConfig } from "../../data/lovelace"; import type { LovelacePanelConfig } from "../../data/lovelace";
import type { LovelaceConfig } from "../../data/lovelace/config/types"; import type { LovelaceConfig } from "../../data/lovelace/config/types";
@@ -409,12 +410,12 @@ class HUIRoot extends LitElement {
!view.visible.some((e) => e.user === this.hass!.user?.id)) || !view.visible.some((e) => e.user === this.hass!.user?.id)) ||
view.visible === false); view.visible === false);
const tabs = html`<sl-tab-group @sl-tab-show=${this._handleViewSelected}> const tabs = html`<ha-tab-group @wa-tab-show=${this._handleViewSelected}>
${views.map((view, index) => { ${views.map((view, index) => {
const hidden = const hidden =
!this._editMode && (view.subview || _isTabHiddenForUser(view)); !this._editMode && (view.subview || _isTabHiddenForUser(view));
return html` return html`
<sl-tab <ha-tab-group-tab
slot="nav" slot="nav"
panel=${index} panel=${index}
.active=${this._curView === index} .active=${this._curView === index}
@@ -471,10 +472,10 @@ class HUIRoot extends LitElement {
></ha-icon-button-arrow-next> ></ha-icon-button-arrow-next>
` `
: nothing} : nothing}
</sl-tab> </ha-tab-group-tab>
`; `;
})} })}
</sl-tab-group>`; </ha-tab-group>`;
const isSubview = curViewConfig?.subview; const isSubview = curViewConfig?.subview;
const hasTabViews = views.filter((view) => !view.subview).length > 1; const hasTabViews = views.filter((view) => !view.subview).length > 1;
@@ -1267,7 +1268,7 @@ class HUIRoot extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
} }
sl-tab-group { ha-tab-group {
--ha-tab-indicator-color: var( --ha-tab-indicator-color: var(
--app-header-selection-bar-color, --app-header-selection-bar-color,
var(--app-header-text-color, white) var(--app-header-text-color, white)
@@ -1279,10 +1280,10 @@ class HUIRoot extends LitElement {
min-width: 0; min-width: 0;
height: 100%; height: 100%;
} }
sl-tab-group::part(nav) { ha-tab-group::part(nav) {
padding: 0; padding: 0;
} }
sl-tab-group::part(scroll-button) { ha-tab-group::part(scroll-button) {
background-color: var(--app-header-background-color); background-color: var(--app-header-background-color);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
@@ -1291,14 +1292,14 @@ class HUIRoot extends LitElement {
); );
z-index: 1; z-index: 1;
} }
sl-tab-group::part(scroll-button--end) { ha-tab-group::part(scroll-button-end) {
background: linear-gradient( background: linear-gradient(
270deg, 270deg,
var(--app-header-background-color), var(--app-header-background-color),
transparent transparent
); );
} }
.edit-mode sl-tab-group::part(scroll-button) { .edit-mode ha-tab-group::part(scroll-button) {
background-color: var(--app-header-edit-background-color, #455a64); background-color: var(--app-header-edit-background-color, #455a64);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
@@ -1306,7 +1307,7 @@ class HUIRoot extends LitElement {
transparent transparent
); );
} }
.edit-mode sl-tab-group::part(scroll-button--end) { .edit-mode ha-tab-group::part(scroll-button--end) {
background: linear-gradient( background: linear-gradient(
270deg, 270deg,
var(--app-header-edit-background-color, #455a64), var(--app-header-edit-background-color, #455a64),
@@ -1319,41 +1320,35 @@ class HUIRoot extends LitElement {
.tab-bar { .tab-bar {
display: flex; display: flex;
} }
.edit-mode sl-tab-group { .edit-mode ha-tab-group {
flex-grow: 0; flex-grow: 0;
color: var(--app-header-edit-text-color, #fff); color: var(--app-header-edit-text-color, #fff);
--ha-tab-active-text-color: var(--app-header-edit-text-color, #fff); --ha-tab-active-text-color: var(--app-header-edit-text-color, #fff);
--ha-tab-indicator-color: var(--app-header-edit-text-color, #fff); --ha-tab-indicator-color: var(--app-header-edit-text-color, #fff);
} }
sl-tab { ha-tab-group-tab {
--sl-tab-height: var(--header-height, 56px); --ha-tab-group-tab-height: var(--header-height, 56px);
height: calc(var(--sl-tab-height) - 2px);
} }
sl-tab[aria-selected="true"] .edit-icon { ha-tab-group-tab[aria-selected="true"] .edit-icon {
display: inline-flex; display: inline-flex;
} }
sl-tab::part(base) { ha-tab-group-tab::part(base) {
padding-inline-start: var( padding-inline-start: var(--ha-tab-padding-start, var(--wa-space-l));
--ha-tab-padding-start, padding-inline-end: var(--ha-tab-padding-end, var(--wa-space-l));
var(--sl-spacing-large) }
); ha-tab-group-tab::part(base) {
padding-inline-end: var( padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2);
--ha-tab-padding-end, }
var(--sl-spacing-large) ha-tab-group-tab.icon::part(base) {
padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2 - 2px);
padding-bottom: calc(
(var(--ha-tab-group-tab-height) - 20px) / 2 - 4px
); );
} }
sl-tab::part(base) { .tab-bar ha-tab-group-tab {
padding-top: calc((var(--sl-tab-height) - 20px) / 2); --ha-tab-group-tab-height: var(--tab-bar-height, 56px);
padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
} }
sl-tab.icon::part(base) { .edit-mode ha-tab-group-tab[aria-selected="true"]::part(base) {
padding-top: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 4px);
}
.tab-bar sl-tab {
--sl-tab-height: var(--tab-bar-height, 56px);
}
.edit-mode sl-tab[aria-selected="true"]::part(base) {
padding: 0; padding: 0;
margin-top: calc((var(--tab-bar-height, 56px) - 48px) / 2); margin-top: calc((var(--tab-bar-height, 56px) - 48px) / 2);
} }

6
src/resources/theme/wa.globals.ts
View File

@@ -11,6 +11,12 @@ export const waMainStyles = css`
--wa-space-l: 24px; --wa-space-l: 24px;
--wa-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2); --wa-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2);
--wa-form-control-padding-block: 0.75em; --wa-form-control-padding-block: 0.75em;
--wa-font-weight-action: var(--ha-font-weight-medium);
--wa-transition-fast: 75ms;
--wa-transition-easing: ease;
--wa-border-width-l: var(--ha-border-radius-l);
--wa-space-xl: 32px;
} }
`; `;

10
yarn.lock
View File

@@ -1905,9 +1905,9 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1": "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2":
version: 3.0.0-beta.4.ha.1 version: 3.0.0-beta.4.ha.2
resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1" resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2"
dependencies: dependencies:
"@ctrl/tinycolor": "npm:^4.1.0" "@ctrl/tinycolor": "npm:^4.1.0"
"@floating-ui/dom": "npm:^1.6.13" "@floating-ui/dom": "npm:^1.6.13"
@@ -1919,7 +1919,7 @@ __metadata:
nanoid: "npm:^5.1.5" nanoid: "npm:^5.1.5"
qr-creator: "npm:^1.0.0" qr-creator: "npm:^1.0.0"
style-observer: "npm:^0.0.7" style-observer: "npm:^0.0.7"
checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144 checksum: 10/0ac66d43050571e2b86bb7b0181d428aa2a064e25745075b207a8fe96d873398eaead663172130dfe8d9ac0be575028f8f9f6b9f8a9cd12f81c8c82e9f60a0e9
languageName: node languageName: node
linkType: hard linkType: hard
@@ -9334,7 +9334,7 @@ __metadata:
"@fullcalendar/list": "npm:6.1.19" "@fullcalendar/list": "npm:6.1.19"
"@fullcalendar/luxon3": "npm:6.1.19" "@fullcalendar/luxon3": "npm:6.1.19"
"@fullcalendar/timegrid": "npm:6.1.19" "@fullcalendar/timegrid": "npm:6.1.19"
"@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.1" "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.2"
"@lezer/highlight": "npm:1.2.1" "@lezer/highlight": "npm:1.2.1"
"@lit-labs/motion": "npm:1.0.9" "@lit-labs/motion": "npm:1.0.9"
"@lit-labs/observers": "npm:2.0.6" "@lit-labs/observers": "npm:2.0.6"