jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 11:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace mwc-tab -> sl-tab (#25166)

Browse Source 
* Replace mwc-tab -> sl-tab
This commit is contained in:
Bram Kragten 2025-04-25 19:05:04 +02:00 committed by GitHub
parent 40fbeaae1c
commit d75ea3bb8d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 177 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,3 @@
import "@material/mwc-tab";
import "@material/mwc-tab-bar";
import { mdiEye, mdiGauge, mdiWaterPercent, mdiWeatherWindy } from "@mdi/js";
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
@ -8,8 +6,11 @@ import memoizeOne from "memoize-one";
import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
import { formatTime } from "../../../common/datetime/format_time";
import { formatNumber } from "../../../common/number/format_number";
import "../../../components/ha-relative-time";
import "../../../components/ha-state-icon";
import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import "../../../components/sl-tab-group";
import type {
ForecastEvent,
ModernForecastType,
@ -18,8 +19,8 @@ import type {
import {
getDefaultForecastType,
getForecast,
getSupportedForecastTypes,
getSecondaryWeatherAttribute,
getSupportedForecastTypes,
getWeatherStateIcon,
getWeatherUnit,
getWind,
@ -27,8 +28,6 @@ import {
weatherSVGStyles,
} from "../../../data/weather";
import type { HomeAssistant } from "../../../types";
import "../../../components/ha-relative-time";
import "../../../components/ha-state-icon";
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
@customElement("more-info-weather")
@ -299,21 +298,22 @@ class MoreInfoWeather extends LitElement {
${this.hass.localize("ui.card.weather.forecast")}:
</div>
${supportedForecasts.length > 1
? html`<mwc-tab-bar
.activeIndex=${supportedForecasts.findIndex(
(item) => item === this._forecastType
)}
@MDCTabBar:activated=${this._handleForecastTypeChanged}
? html`<sl-tab-group
@sl-tab-show=${this._handleForecastTypeChanged}
>
${supportedForecasts.map(
(forecastType) =>
html`<mwc-tab
.label=${this.hass!.localize(
html`<sl-tab
slot="nav"
.panel=${forecastType}
.active=${this._forecastType === forecastType}
>
${this.hass!.localize(
`ui.card.weather.${forecastType}`
)}
></mwc-tab>`
</sl-tab>`
)}
</mwc-tab-bar>`
</sl-tab-group>`
: nothing}
<div class="forecast">
${forecast.map((item) =>
@ -403,9 +403,7 @@ class MoreInfoWeather extends LitElement {
}
private _handleForecastTypeChanged(ev: CustomEvent): void {
this._forecastType = this._supportedForecasts(this.stateObj!)[
ev.detail.index
];
this._forecastType = ev.detail.name;
}
static get styles(): CSSResultGroup {
@ -419,15 +417,20 @@ class MoreInfoWeather extends LitElement {
margin-inline-end: initial;
}
mwc-tab-bar {
margin-bottom: 4px;
}
.section {
margin: 16px 0 8px 0;
font-size: 1.2em;
}
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
.flex {
display: flex;
height: 32px;

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

@ -1,8 +1,7 @@
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, nothing } from "lit";
import { customElement, state } from "lit/decorators";
import "../../../../components/sl-tab-group";
import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
import { getBadgeElementClass } from "../../create-element/create-badge-element";
import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
@ -38,7 +37,7 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
}
private _handleTabChanged(ev: CustomEvent): void {
const newTab = tabs[ev.detail.index];
const newTab = ev.detail.name;
if (newTab === this._currTab) {
return;
}
@ -68,21 +67,17 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
break;
}
return html`
<mwc-tab-bar
.activeIndex=${tabs.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
${tabs.map(
(tab) => html`
<mwc-tab
.label=${this.hass.localize(
<sl-tab slot="nav" .panel=${tab} .active=${this._currTab === tab}>
${this.hass!.localize(
`ui.panel.lovelace.editor.edit_badge.tab_${tab}`
)}
>
</mwc-tab>
</sl-tab>
`
)}
</mwc-tab-bar>
</sl-tab-group>
${content}
`;
}
@ -91,10 +86,15 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
return [
HuiTypedElementEditor.styles,
css`
mwc-tab-bar {
text-transform: uppercase;
sl-tab-group {
margin-bottom: 16px;
border-bottom: 1px solid var(--divider-color);
}
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
`,
];

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

@ -1,5 +1,3 @@
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import { mdiClose } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -13,6 +11,7 @@ import { computeStateName } from "../../../../common/entity/compute_state_name";
import type { DataTableRowData } from "../../../../components/data-table/ha-data-table";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles";
@ -48,7 +47,7 @@ export class HuiCreateDialogBadge
@state() private _selectedEntities: string[] = [];
@state() private _currTabIndex = 0;
@state() private _currTab: "badge" | "entity" = "badge";
public async showDialog(params: CreateBadgeDialogParams): Promise<void> {
this._params = params;
@ -67,7 +66,7 @@ export class HuiCreateDialogBadge
public closeDialog(): boolean {
this._params = undefined;
this._currTabIndex = 0;
this._currTab = "badge";
this._selectedEntities = [];
fireEvent(this, "dialog-closed", { dialog: this.localName });
return true;
@ -92,7 +91,7 @@ export class HuiCreateDialogBadge
@keydown=${this._ignoreKeydown}
@closed=${this._cancel}
.heading=${title}
class=${classMap({ table: this._currTabIndex === 1 })}
class=${classMap({ table: this._currTab === "entity" })}
>
<ha-dialog-header show-border slot="heading">
<ha-icon-button
@ -101,26 +100,30 @@ export class HuiCreateDialogBadge
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
<span slot="title"> ${title} </span>
<mwc-tab-bar
.activeIndex=${this._currTabIndex}
@MDCTabBar:activated=${this._handleTabChanged}
<span slot="title">${title}</span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<sl-tab
slot="nav"
.active=${this._currTab === "badge"}
panel="badge"
dialogInitialFocus
>
<mwc-tab
.label=${this.hass!.localize(
${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_badge"
)}
dialogInitialFocus
></mwc-tab>
<mwc-tab
.label=${this.hass!.localize(
</sl-tab>
<sl-tab
slot="nav"
.active=${this._currTab === "entity"}
panel="entity"
>${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_entity"
)}
></mwc-tab>
</mwc-tab-bar>
)}</sl-tab
>
</sl-tab-group>
</ha-dialog-header>
${cache(
this._currTabIndex === 0
this._currTab === "badge"
? html`
<hui-badge-picker
.suggestedBadges=${this._params.suggestedBadges}
@ -194,7 +197,13 @@ export class HuiCreateDialogBadge
--mdc-dialog-min-width: 1000px;
}
}
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
hui-badge-picker {
--badge-picker-search-shape: 0;
--badge-picker-search-margin: -2px -24px 0;
@ -234,12 +243,12 @@ export class HuiCreateDialogBadge
}
private _handleTabChanged(ev: CustomEvent): void {
const newTab = ev.detail.index;
if (newTab === this._currTabIndex) {
const newTab = ev.detail.name;
if (newTab === this._currTab) {
return;
}
this._currTabIndex = ev.detail.index;
this._currTab = newTab;
this._selectedEntities = [];
}

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

@ -1,15 +1,14 @@
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import type { TemplateResult } from "lit";
import { css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../../components/sl-tab-group";
import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
import { getCardElementClass } from "../../create-element/create-card-element";
import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
import { HuiTypedElementEditor } from "../hui-typed-element-editor";
import "./hui-card-layout-editor";
import "./hui-card-visibility-editor";
import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
const tabs = ["config", "visibility", "layout"] as const;
@ -91,27 +90,23 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
`;
}
return html`
<mwc-tab-bar
.activeIndex=${tabs.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
${displayedTabs.map(
(tab) => html`
<mwc-tab
.label=${this.hass.localize(
<sl-tab slot="nav" .active=${this._currTab === tab} panel=${tab}>
${this.hass.localize(
`ui.panel.lovelace.editor.edit_card.tab_${tab}`
)}
>
</mwc-tab>
</sl-tab>
`
)}
</mwc-tab-bar>
</sl-tab-group>
${content}
`;
}
private _handleTabChanged(ev: CustomEvent): void {
const newTab = tabs[ev.detail.index];
const newTab = ev.detail.name;
if (newTab === this._currTab) {
return;
}
@ -120,10 +115,17 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
static override styles = [
css`
mwc-tab-bar {
text-transform: uppercase;
sl-tab-group {
margin-bottom: 16px;
border-bottom: 1px solid var(--divider-color);
}
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
`,
];

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

@ -1,5 +1,3 @@
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import { mdiClose } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -14,6 +12,7 @@ import { computeStateName } from "../../../../common/entity/compute_state_name";
import type { DataTableRowData } from "../../../../components/data-table/ha-data-table";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group";
import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
import { isStrategySection } from "../../../../data/lovelace/config/section";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@ -60,7 +59,7 @@ export class HuiCreateDialogCard
@state() private _selectedEntities: string[] = [];
@state() private _currTabIndex = 0;
@state() private _currTab: "card" | "entity" = "card";
@state() private _narrow = false;
@ -85,7 +84,7 @@ export class HuiCreateDialogCard
public closeDialog(): boolean {
this._params = undefined;
this._currTabIndex = 0;
this._currTab = "card";
this._selectedEntities = [];
fireEvent(this, "dialog-closed", { dialog: this.localName });
return true;
@ -110,7 +109,7 @@ export class HuiCreateDialogCard
@keydown=${this._ignoreKeydown}
@closed=${this._cancel}
.heading=${title}
class=${classMap({ table: this._currTabIndex === 1 })}
class=${classMap({ table: this._currTab === "entity" })}
>
<ha-dialog-header show-border slot="heading">
<ha-icon-button
@ -119,26 +118,31 @@ export class HuiCreateDialogCard
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
<span slot="title"> ${title} </span>
<mwc-tab-bar
.activeIndex=${this._currTabIndex}
@MDCTabBar:activated=${this._handleTabChanged}
<span slot="title">${title}</span>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
<sl-tab
slot="nav"
.active=${this._currTab === "card"}
panel="card"
dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
>
<mwc-tab
.label=${this.hass!.localize(
${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_card"
)}
dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
></mwc-tab>
<mwc-tab
.label=${this.hass!.localize(
</sl-tab>
<sl-tab
slot="nav"
.active=${this._currTab === "entity"}
panel="entity"
>${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_entity"
)}
></mwc-tab>
</mwc-tab-bar>
)}</sl-tab
>
</sl-tab-group>
</ha-dialog-header>
${cache(
this._currTabIndex === 0
this._currTab === "card"
? html`
<hui-card-picker
dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
@ -215,7 +219,13 @@ export class HuiCreateDialogCard
--mdc-dialog-min-width: 1000px;
}
}
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
hui-card-picker {
--card-picker-search-shape: 0;
--card-picker-search-margin: 0 -24px 0;
@ -268,12 +278,12 @@ export class HuiCreateDialogCard
}
private _handleTabChanged(ev: CustomEvent): void {
const newTab = ev.detail.index;
if (newTab === this._currTabIndex) {
const newTab = ev.detail.name;
if (newTab === this._currTab) {
return;
}
this._currTabIndex = ev.detail.index;
this._currTab = newTab;
this._selectedEntities = [];
}

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

@ -1,6 +1,3 @@
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
import { mdiCodeBraces, mdiContentCopy, mdiListBoxOutline } from "@mdi/js";
import deepClone from "deep-clone-simple";
import type { CSSResultGroup } from "lit";
@ -13,6 +10,7 @@ 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 type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
import type { HomeAssistant } from "../../../../types";
@ -81,21 +79,18 @@ export class HuiConditionalCardEditor
const isGuiMode = !this._cardEditorEl || this._GUImode;
return html`
<mwc-tab-bar
.activeIndex=${this._cardTab ? 1 : 0}
@MDCTabBar:activated=${this._selectTab}
>
<mwc-tab
.label=${this.hass!.localize(
<sl-tab-group @sl-tab-show=${this._selectTab}>
<sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}>
${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.conditions"
)}
></mwc-tab>
<mwc-tab
.label=${this.hass!.localize(
</sl-tab>
<sl-tab slot="nav" panel="card" .active=${this._cardTab}>
${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.card"
)}
></mwc-tab>
</mwc-tab-bar>
</sl-tab>
</sl-tab-group>
${this._cardTab
? html`
<div class="card">
@ -159,8 +154,8 @@ export class HuiConditionalCardEditor
`;
}
private _selectTab(ev: MDCTabBarActivatedEvent): void {
this._cardTab = ev.detail.index === 1;
private _selectTab(ev: CustomEvent): void {
this._cardTab = ev.detail.name === "card";
}
private _toggleMode(): void {
@ -235,8 +230,13 @@ export class HuiConditionalCardEditor
return [
configElementStyle,
css`
mwc-tab-bar {
border-bottom: 1px solid var(--divider-color);
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
ha-alert {
display: block;

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

@ -14,7 +14,9 @@ import "../../../../components/ha-icon-button";
import "../../../../components/ha-list-item";
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 { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@ -25,9 +27,6 @@ import {
import "./hui-section-settings-editor";
import "./hui-section-visibility-editor";
import type { EditSectionDialogParams } from "./show-edit-section-dialog";
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
const TABS = ["tab-settings", "tab-visibility"] as const;
@ -169,21 +168,21 @@ export class HuiDialogEditSection
</ha-button-menu>
${!this._yamlMode
? html`
<mwc-tab-bar
.activeIndex=${TABS.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
${TABS.map(
(tab) => html`
<mwc-tab
.label=${this.hass!.localize(
<sl-tab
slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
>
${this.hass!.localize(
`ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
)}
>
</mwc-tab>
</sl-tab>
`
)}
</mwc-tab-bar>
</sl-tab-group>
`
: nothing}
</ha-dialog-header>
@ -205,7 +204,7 @@ export class HuiDialogEditSection
}
private _handleTabChanged(ev: CustomEvent): void {
const newTab = TABS[ev.detail.index];
const newTab = ev.detail.name;
if (newTab === this._currTab) {
return;
}
@ -274,10 +273,12 @@ export class HuiDialogEditSection
ha-dialog.yaml-mode {
--dialog-content-padding: 0;
}
mwc-tab-bar {
color: var(--primary-text-color);
text-transform: uppercase;
padding: 0 20px;
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
@media all and (min-width: 600px) {
ha-dialog {

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

@ -1,6 +1,4 @@
import type { ActionDetail } from "@material/mwc-list";
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import {
mdiClose,
mdiDotsVertical,
@ -55,6 +53,7 @@ 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;
@ -272,21 +271,21 @@ export class HuiDialogEditView extends LitElement {
`
: nothing}
${!this._yamlMode
? html`<mwc-tab-bar
.activeIndex=${TABS.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
${TABS.map(
(tab) => html`
<mwc-tab
.label=${this.hass!.localize(
<sl-tab
slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
>
${this.hass!.localize(
`ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
)}
>
</mwc-tab>
</sl-tab>
`
)}
</mwc-tab-bar>`
</sl-tab-group>`
: nothing}
</ha-dialog-header>
${content}
@ -515,7 +514,7 @@ export class HuiDialogEditView extends LitElement {
}
private _handleTabChanged(ev: CustomEvent): void {
const newTab = TABS[ev.detail.index];
const newTab = ev.detail.name;
if (newTab === this._currTab) {
return;
}
@ -644,10 +643,12 @@ export class HuiDialogEditView extends LitElement {
font-size: inherit;
font-weight: inherit;
}
mwc-tab-bar {
color: var(--primary-text-color);
text-transform: uppercase;
padding: 0 20px;
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
ha-button.warning {
margin-right: auto;