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-password-field";
import "../../../../src/components/ha-radio";
import "../../../../src/components/ha-tab-group";
import "../../../../src/components/ha-tab-group-tab";
import "../../../../src/components/ha-textfield";
import type { HaTextField } from "../../../../src/components/ha-textfield";
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 type { HomeAssistant } from "../../../../src/types";
import type { HassioNetworkDialogParams } from "./show-dialog-network";
import "../../../../src/components/sl-tab-group";
const IP_VERSIONS = ["ipv4", "ipv6"];
@@ -114,19 +115,19 @@ export class DialogHassioNetwork
></ha-icon-button>
</ha-header-bar>
${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(
(device, index) =>
html`<sl-tab
html`<ha-tab-group-tab
slot="nav"
.id=${device.interface}
.panel=${index.toString()}
.active=${this._curTabIndex === index}
>
${device.interface}
</sl-tab>`
</ha-tab-group-tab>`
)}
</sl-tab-group>`
</ha-tab-group>`
: ""}
</div>
${cache(this._renderTab())}
@@ -627,10 +628,10 @@ export class DialogHassioNetwork
--mdc-list-side-padding: 10px;
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
justify-content: center;
}

2
package.json
View File

@@ -51,7 +51,7 @@
"@fullcalendar/list": "6.1.19",
"@fullcalendar/luxon3": "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",
"@lit-labs/motion": "1.0.9",
"@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 { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
import { formatTime } from "../../../common/datetime/format_time";
import { formatNumber } from "../../../common/number/format_number";
@@ -11,8 +12,9 @@ import "../../../components/ha-relative-time";
import "../../../components/ha-spinner";
import "../../../components/ha-state-icon";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tab-group";
import "../../../components/ha-tab-group-tab";
import "../../../components/ha-tooltip";
import "../../../components/sl-tab-group";
import type {
ForecastEvent,
ModernForecastType,
@@ -30,7 +32,6 @@ import {
weatherSVGStyles,
} from "../../../data/weather";
import type { HomeAssistant } from "../../../types";
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
@customElement("more-info-weather")
class MoreInfoWeather extends LitElement {
@@ -299,18 +300,18 @@ class MoreInfoWeather extends LitElement {
${this.hass.localize("ui.card.weather.forecast")}:
</div>
${supportedForecasts?.length > 1
? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
${supportedForecasts.map(
(forecastType) =>
html`<sl-tab
html`<ha-tab-group-tab
slot="nav"
.panel=${forecastType}
.active=${this._forecastType === forecastType}
>
${this.hass!.localize(`ui.card.weather.${forecastType}`)}
</sl-tab>`
</ha-tab-group-tab>`
)}
</sl-tab-group>`
</ha-tab-group>`
: nothing}
<div class="forecast">
${forecast?.length
@@ -419,11 +420,11 @@ class MoreInfoWeather extends LitElement {
font-size: 1.2em;
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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-dialog";
import "../../../../../components/ha-dialog-header";
import "../../../../../components/ha-tab-group";
import "../../../../../components/ha-tab-group-tab";
import type { ZHADevice, ZHAGroup } from "../../../../../data/zha";
import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha";
import { haStyleDialog } from "../../../../../resources/styles";
@@ -103,10 +105,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
>
${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
</span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${tabs.map(
(tab) => html`
<sl-tab
<ha-tab-group-tab
slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
@@ -114,10 +116,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
${this.hass.localize(
`ui.dialogs.zha_manage_device.tabs.${tab}`
)}
</sl-tab>
</ha-tab-group-tab>
`
)}
</sl-tab-group>
</ha-tab-group>
</ha-dialog-header>
<div class="content" tabindex="-1" dialogInitialFocus>
${cache(
@@ -229,10 +231,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
}
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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-list-item";
import "../../../../../components/ha-select";
import "../../../../../components/ha-tab-group";
import "../../../../../components/ha-tab-group-tab";
import type { Cluster, ZHADevice } from "../../../../../data/zha";
import { fetchClustersForZhaDevice } from "../../../../../data/zha";
import { haStyle } from "../../../../../resources/styles";
@@ -13,7 +15,6 @@ import type { HomeAssistant } from "../../../../../types";
import { computeClusterKey } from "./functions";
import "./zha-cluster-attributes";
import "./zha-cluster-commands";
import "../../../../../components/sl-tab-group";
declare global {
// for fire event
@@ -91,20 +92,20 @@ export class ZHAManageClusters extends LitElement {
</div>
${this._selectedCluster
? html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${tabs.map(
(tab) => html`
<sl-tab
<ha-tab-group-tab
slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
>${this.hass.localize(
`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>
${cache(
@@ -177,10 +178,10 @@ export class ZHAManageClusters extends LitElement {
padding-bottom: 10px;
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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 type { HaRadio } from "../../../components/ha-radio";
import "../../../components/ha-spinner";
import "../../../components/ha-tab-group";
import "../../../components/ha-tab-group-tab";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
import "../../../components/sl-tab-group";
import { extractApiErrorMessage } from "../../../data/hassio/common";
import {
type AccessPoint,
@@ -99,19 +100,19 @@ export class HassioNetwork extends LitElement {
${this.hass.localize("ui.panel.config.network.supervisor.title")}
${this._interfaces.length > 1
? html`
<sl-tab-group @sl-tab-show=${this._handleTabActivated}
<ha-tab-group @wa-tab-show=${this._handleTabActivated}
>${this._interfaces.map(
(device, i) =>
html`<sl-tab
html`<ha-tab-group-tab
slot="nav"
.active=${this._curTabIndex === i}
.panel=${i.toString()}
.id=${device.interface}
>
${device.interface}
</sl-tab>`
</ha-tab-group-tab>`
)}
</sl-tab-group>
</ha-tab-group>
`
: nothing}
</div>
@@ -833,13 +834,13 @@ export class HassioNetwork extends LitElement {
margin-bottom: 16px;
}
sl-tab-group {
ha-tab-group {
line-height: var(--ha-line-height-normal);
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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 type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { ActionDetail } from "@material/mwc-list";
import { navigate } from "../../common/navigate";
import "../../components/ha-menu-button";
import "../../components/ha-button-menu";
import "../../components/ha-icon-button";
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 type { HomeAssistant, Route } from "../../types";
import "./developer-tools-router";
@@ -50,25 +51,41 @@ class PanelDeveloperTools extends LitElement {
</ha-list-item>
</ha-button-menu>
</div>
<sl-tab-group @sl-tab-show=${this._handlePageSelected}>
<sl-tab slot="nav" panel="yaml" .active=${page === "yaml"}>
<ha-tab-group @wa-tab-show=${this._handlePageSelected}>
<ha-tab-group-tab slot="nav" panel="yaml" .active=${page === "yaml"}>
${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
</sl-tab>
<sl-tab slot="nav" panel="state" .active=${page === "state"}>
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
panel="state"
.active=${page === "state"}
>
${this.hass.localize("ui.panel.developer-tools.tabs.states.title")}
</sl-tab>
<sl-tab slot="nav" panel="action" .active=${page === "action"}>
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
panel="action"
.active=${page === "action"}
>
${this.hass.localize("ui.panel.developer-tools.tabs.actions.title")}
</sl-tab>
<sl-tab slot="nav" panel="template" .active=${page === "template"}>
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
panel="template"
.active=${page === "template"}
>
${this.hass.localize(
"ui.panel.developer-tools.tabs.templates.title"
)}
</sl-tab>
<sl-tab slot="nav" panel="event" .active=${page === "event"}>
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
panel="event"
.active=${page === "event"}
>
${this.hass.localize("ui.panel.developer-tools.tabs.events.title")}
</sl-tab>
<sl-tab
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
panel="statistics"
.active=${page === "statistics"}
@@ -76,11 +93,14 @@ class PanelDeveloperTools extends LitElement {
${this.hass.localize(
"ui.panel.developer-tools.tabs.statistics.title"
)}
</sl-tab>
<sl-tab slot="nav" panel="assist" .active=${page === "assist"}
>Assist</sl-tab
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
panel="assist"
.active=${page === "assist"}
>Assist</ha-tab-group-tab
>
</sl-tab-group>
</ha-tab-group>
</div>
<developer-tools-router
.route=${this.route}
@@ -165,7 +185,7 @@ class PanelDeveloperTools extends LitElement {
flex: 1 1 100%;
max-width: 100%;
}
sl-tab-group {
ha-tab-group {
--ha-tab-active-text-color: var(--app-header-text-color, white);
--ha-tab-indicator-color: var(--app-header-text-color, white);
--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 { css, html, nothing } from "lit";
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 { getBadgeElementClass } from "../../create-element/create-badge-element";
import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
@@ -67,17 +68,21 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
break;
}
return html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${tabs.map(
(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(
`ui.panel.lovelace.editor.edit_badge.tab_${tab}`
)}
</sl-tab>
</ha-tab-group-tab>
`
)}
</sl-tab-group>
</ha-tab-group>
${content}
`;
}
@@ -86,13 +91,13 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
return [
HuiTypedElementEditor.styles,
css`
sl-tab-group {
ha-tab-group {
margin-bottom: 16px;
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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 { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-dialog";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog";
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 { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles";
@@ -98,8 +99,8 @@ export class HuiCreateDialogBadge
.path=${mdiClose}
></ha-icon-button>
<span slot="title">${title}</span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<sl-tab
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
<ha-tab-group-tab
slot="nav"
.active=${this._currTab === "badge"}
panel="badge"
@@ -108,16 +109,16 @@ export class HuiCreateDialogBadge
${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_badge"
)}
</sl-tab>
<sl-tab
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
.active=${this._currTab === "entity"}
panel="entity"
>${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_entity"
)}</sl-tab
)}</ha-tab-group-tab
>
</sl-tab-group>
</ha-tab-group>
</ha-dialog-header>
${cache(
this._currTab === "badge"
@@ -193,10 +194,10 @@ export class HuiCreateDialogBadge
--mdc-dialog-min-width: 1000px;
}
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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 { css, html, nothing } from "lit";
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 { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
import { getCardElementClass } from "../../create-element/create-card-element";
@@ -90,17 +91,21 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
`;
}
return html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${displayedTabs.map(
(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(
`ui.panel.lovelace.editor.edit_card.tab_${tab}`
)}
</sl-tab>
</ha-tab-group-tab>
`
)}
</sl-tab-group>
</ha-tab-group>
${content}
`;
}
@@ -115,15 +120,15 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
static override styles = [
css`
sl-tab-group {
ha-tab-group {
margin-bottom: 16px;
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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-dialog";
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 { isStrategySection } from "../../../../data/lovelace/config/section";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -117,8 +118,8 @@ export class HuiCreateDialogCard
></ha-icon-button>
<span slot="title">${title}</span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<sl-tab
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
<ha-tab-group-tab
slot="nav"
.active=${this._currTab === "card"}
panel="card"
@@ -127,16 +128,16 @@ export class HuiCreateDialogCard
${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_card"
)}
</sl-tab>
<sl-tab
</ha-tab-group-tab>
<ha-tab-group-tab
slot="nav"
.active=${this._currTab === "entity"}
panel="entity"
>${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_entity"
)}</sl-tab
)}</ha-tab-group-tab
>
</sl-tab-group>
</ha-tab-group>
</ha-dialog-header>
${cache(
this._currTab === "card"
@@ -215,10 +216,10 @@ export class HuiCreateDialogCard
--mdc-dialog-min-width: 1000px;
}
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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-button";
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 { LovelaceConfig } from "../../../../data/lovelace/config/types";
import type { HomeAssistant } from "../../../../types";
@@ -79,18 +80,22 @@ export class HuiConditionalCardEditor
const isGuiMode = !this._cardEditorEl || this._GUImode;
return html`
<sl-tab-group @sl-tab-show=${this._selectTab}>
<sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}>
<ha-tab-group @wa-tab-show=${this._selectTab}>
<ha-tab-group-tab
slot="nav"
panel="conditions"
.active=${!this._cardTab}
>
${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.conditions"
)}
</sl-tab>
<sl-tab slot="nav" panel="card" .active=${this._cardTab}>
</ha-tab-group-tab>
<ha-tab-group-tab slot="nav" panel="card" .active=${this._cardTab}>
${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.card"
)}
</sl-tab>
</sl-tab-group>
</ha-tab-group-tab>
</ha-tab-group>
${this._cardTab
? html`
<div class="card">
@@ -233,11 +238,11 @@ export class HuiConditionalCardEditor
return [
configElementStyle,
css`
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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-arrow-next";
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 { LovelaceConfig } from "../../../../data/lovelace/config/types";
import type { HomeAssistant } from "../../../../types";
@@ -123,14 +124,18 @@ export class HuiStackCardEditor
></ha-form>
<div class="card-config">
<div class="toolbar">
<sl-tab-group @sl-tab-show=${this._handleSelectedCard}>
<ha-tab-group @wa-tab-show=${this._handleSelectedCard}>
${this._config.cards.map(
(_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}
</sl-tab>`
</ha-tab-group-tab>`
)}
</sl-tab-group>
</ha-tab-group>
<ha-icon-button
@click=${this._handleAddCard}
.path=${mdiPlus}
@@ -229,8 +234,6 @@ export class HuiStackCardEditor
protected async _handleAddCard() {
this._selectedCard = this._config!.cards.length;
await this.updateComplete;
this.renderRoot.querySelector("sl-tab-group")!.syncIndicator();
}
protected _handleSelectedCard(ev) {
@@ -335,7 +338,7 @@ export class HuiStackCardEditor
justify-content: space-between;
align-items: center;
}
sl-tab-group {
ha-tab-group {
flex-grow: 1;
min-width: 0;
--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-icon-button";
import "../../../../components/ha-list-item";
import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import "../../../../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 { LovelaceConfig } from "../../../../data/lovelace/config/types";
import { saveConfig } from "../../../../data/lovelace/config/types";
import {
isStrategyView,
type LovelaceViewConfig,
} from "../../../../data/lovelace/config/view";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import type { Lovelace } from "../../types";
import { addSection, deleteSection, moveSection } from "../config-util";
import {
findLovelaceContainer,
updateLovelaceContainer,
} from "../lovelace-path";
import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
import "./hui-section-settings-editor";
import "./hui-section-visibility-editor";
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;
@@ -195,10 +196,10 @@ export class HuiDialogEditSection
</ha-button-menu>
${!this._yamlMode
? html`
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${TABS.map(
(tab) => html`
<sl-tab
<ha-tab-group-tab
slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
@@ -206,10 +207,10 @@ export class HuiDialogEditSection
${this.hass!.localize(
`ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
)}
</sl-tab>
</ha-tab-group-tab>
`
)}
</sl-tab-group>
</ha-tab-group>
`
: nothing}
</ha-dialog-header>
@@ -433,10 +434,10 @@ export class HuiDialogEditSection
ha-dialog.yaml-mode {
--dialog-content-padding: 0;
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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-list-item";
import "../../../../components/ha-spinner";
import "../../../../components/ha-tab-group";
import "../../../../components/ha-tab-group-tab";
import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import {
@@ -53,7 +55,6 @@ import "./hui-view-background-editor";
import "./hui-view-editor";
import "./hui-view-visibility-editor";
import type { EditViewDialogParams } from "./show-edit-view-dialog";
import "../../../../components/sl-tab-group";
const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const;
@@ -274,10 +275,10 @@ export class HuiDialogEditView extends LitElement {
`
: nothing}
${!this._yamlMode
? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
? html`<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
${TABS.map(
(tab) => html`
<sl-tab
<ha-tab-group-tab
slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
@@ -285,10 +286,10 @@ export class HuiDialogEditView extends LitElement {
${this.hass!.localize(
`ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
)}
</sl-tab>
</ha-tab-group-tab>
`
)}
</sl-tab-group>`
</ha-tab-group>`
: nothing}
</ha-dialog-header>
${content}
@@ -651,10 +652,10 @@ export class HuiDialogEditView extends LitElement {
font-size: inherit;
font-weight: inherit;
}
sl-tab {
ha-tab-group-tab {
flex: 1;
}
sl-tab::part(base) {
ha-tab-group-tab::part(base) {
width: 100%;
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-menu-button";
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 type { LovelacePanelConfig } from "../../data/lovelace";
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 === 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) => {
const hidden =
!this._editMode && (view.subview || _isTabHiddenForUser(view));
return html`
<sl-tab
<ha-tab-group-tab
slot="nav"
panel=${index}
.active=${this._curView === index}
@@ -471,10 +472,10 @@ class HUIRoot extends LitElement {
></ha-icon-button-arrow-next>
`
: nothing}
</sl-tab>
</ha-tab-group-tab>
`;
})}
</sl-tab-group>`;
</ha-tab-group>`;
const isSubview = curViewConfig?.subview;
const hasTabViews = views.filter((view) => !view.subview).length > 1;
@@ -1267,7 +1268,7 @@ class HUIRoot extends LitElement {
display: flex;
align-items: center;
}
sl-tab-group {
ha-tab-group {
--ha-tab-indicator-color: var(
--app-header-selection-bar-color,
var(--app-header-text-color, white)
@@ -1279,10 +1280,10 @@ class HUIRoot extends LitElement {
min-width: 0;
height: 100%;
}
sl-tab-group::part(nav) {
ha-tab-group::part(nav) {
padding: 0;
}
sl-tab-group::part(scroll-button) {
ha-tab-group::part(scroll-button) {
background-color: var(--app-header-background-color);
background: linear-gradient(
90deg,
@@ -1291,14 +1292,14 @@ class HUIRoot extends LitElement {
);
z-index: 1;
}
sl-tab-group::part(scroll-button--end) {
ha-tab-group::part(scroll-button-end) {
background: linear-gradient(
270deg,
var(--app-header-background-color),
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: linear-gradient(
90deg,
@@ -1306,7 +1307,7 @@ class HUIRoot extends LitElement {
transparent
);
}
.edit-mode sl-tab-group::part(scroll-button--end) {
.edit-mode ha-tab-group::part(scroll-button--end) {
background: linear-gradient(
270deg,
var(--app-header-edit-background-color, #455a64),
@@ -1319,41 +1320,35 @@ class HUIRoot extends LitElement {
.tab-bar {
display: flex;
}
.edit-mode sl-tab-group {
.edit-mode ha-tab-group {
flex-grow: 0;
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);
}
sl-tab {
--sl-tab-height: var(--header-height, 56px);
height: calc(var(--sl-tab-height) - 2px);
ha-tab-group-tab {
--ha-tab-group-tab-height: var(--header-height, 56px);
}
sl-tab[aria-selected="true"] .edit-icon {
ha-tab-group-tab[aria-selected="true"] .edit-icon {
display: inline-flex;
}
sl-tab::part(base) {
padding-inline-start: var(
--ha-tab-padding-start,
var(--sl-spacing-large)
);
padding-inline-end: var(
--ha-tab-padding-end,
var(--sl-spacing-large)
ha-tab-group-tab::part(base) {
padding-inline-start: var(--ha-tab-padding-start, var(--wa-space-l));
padding-inline-end: var(--ha-tab-padding-end, var(--wa-space-l));
}
ha-tab-group-tab::part(base) {
padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2);
}
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) {
padding-top: calc((var(--sl-tab-height) - 20px) / 2);
padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
.tab-bar ha-tab-group-tab {
--ha-tab-group-tab-height: var(--tab-bar-height, 56px);
}
sl-tab.icon::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) {
.edit-mode ha-tab-group-tab[aria-selected="true"]::part(base) {
padding: 0;
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-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2);
--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
linkType: hard
"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1":
version: 3.0.0-beta.4.ha.1
resolution: "@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.2
resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2"
dependencies:
"@ctrl/tinycolor": "npm:^4.1.0"
"@floating-ui/dom": "npm:^1.6.13"
@@ -1919,7 +1919,7 @@ __metadata:
nanoid: "npm:^5.1.5"
qr-creator: "npm:^1.0.0"
style-observer: "npm:^0.0.7"
checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144
checksum: 10/0ac66d43050571e2b86bb7b0181d428aa2a064e25745075b207a8fe96d873398eaead663172130dfe8d9ac0be575028f8f9f6b9f8a9cd12f81c8c82e9f60a0e9
languageName: node
linkType: hard
@@ -9334,7 +9334,7 @@ __metadata:
"@fullcalendar/list": "npm:6.1.19"
"@fullcalendar/luxon3": "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"
"@lit-labs/motion": "npm:1.0.9"
"@lit-labs/observers": "npm:2.0.6"