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 { mdiEye, mdiGauge, mdiWaterPercent, mdiWeatherWindy } from "@mdi/js";
import type { CSSResultGroup, PropertyValues } from "lit"; import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } 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 { 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";
import "../../../components/ha-relative-time";
import "../../../components/ha-state-icon";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip"; import "../../../components/ha-tooltip";
import "../../../components/sl-tab-group";
import type { import type {
ForecastEvent, ForecastEvent,
ModernForecastType, ModernForecastType,
@ -18,8 +19,8 @@ import type {
import { import {
getDefaultForecastType, getDefaultForecastType,
getForecast, getForecast,
getSupportedForecastTypes,
getSecondaryWeatherAttribute, getSecondaryWeatherAttribute,
getSupportedForecastTypes,
getWeatherStateIcon, getWeatherStateIcon,
getWeatherUnit, getWeatherUnit,
getWind, getWind,
@ -27,8 +28,6 @@ import {
weatherSVGStyles, weatherSVGStyles,
} from "../../../data/weather"; } from "../../../data/weather";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import "../../../components/ha-relative-time";
import "../../../components/ha-state-icon";
import { DragScrollController } from "../../../common/controllers/drag-scroll-controller"; import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
@customElement("more-info-weather") @customElement("more-info-weather")
@ -299,21 +298,22 @@ 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`<mwc-tab-bar ? html`<sl-tab-group
.activeIndex=${supportedForecasts.findIndex( @sl-tab-show=${this._handleForecastTypeChanged}
(item) => item === this._forecastType
)}
@MDCTabBar:activated=${this._handleForecastTypeChanged}
> >
${supportedForecasts.map( ${supportedForecasts.map(
(forecastType) => (forecastType) =>
html`<mwc-tab html`<sl-tab
.label=${this.hass!.localize( slot="nav"
.panel=${forecastType}
.active=${this._forecastType === forecastType}
>
${this.hass!.localize(
`ui.card.weather.${forecastType}` `ui.card.weather.${forecastType}`
)} )}
></mwc-tab>` </sl-tab>`
)} )}
</mwc-tab-bar>` </sl-tab-group>`
: nothing} : nothing}
<div class="forecast"> <div class="forecast">
${forecast.map((item) => ${forecast.map((item) =>
@ -403,9 +403,7 @@ class MoreInfoWeather extends LitElement {
} }
private _handleForecastTypeChanged(ev: CustomEvent): void { private _handleForecastTypeChanged(ev: CustomEvent): void {
this._forecastType = this._supportedForecasts(this.stateObj!)[ this._forecastType = ev.detail.name;
ev.detail.index
];
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
@ -419,15 +417,20 @@ class MoreInfoWeather extends LitElement {
margin-inline-end: initial; margin-inline-end: initial;
} }
mwc-tab-bar {
margin-bottom: 4px;
}
.section { .section {
margin: 16px 0 8px 0; margin: 16px 0 8px 0;
font-size: 1.2em; font-size: 1.2em;
} }
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
.flex { .flex {
display: flex; display: flex;
height: 32px; 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 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 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";
@ -38,7 +37,7 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
} }
private _handleTabChanged(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
const newTab = tabs[ev.detail.index]; const newTab = ev.detail.name;
if (newTab === this._currTab) { if (newTab === this._currTab) {
return; return;
} }
@ -68,21 +67,17 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
break; break;
} }
return html` return html`
<mwc-tab-bar <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
.activeIndex=${tabs.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
${tabs.map( ${tabs.map(
(tab) => html` (tab) => html`
<mwc-tab <sl-tab slot="nav" .panel=${tab} .active=${this._currTab === tab}>
.label=${this.hass.localize( ${this.hass!.localize(
`ui.panel.lovelace.editor.edit_badge.tab_${tab}` `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
)} )}
> </sl-tab>
</mwc-tab>
` `
)} )}
</mwc-tab-bar> </sl-tab-group>
${content} ${content}
`; `;
} }
@ -91,10 +86,15 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
return [ return [
HuiTypedElementEditor.styles, HuiTypedElementEditor.styles,
css` css`
mwc-tab-bar { sl-tab-group {
text-transform: uppercase;
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid var(--divider-color); }
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
} }
`, `,
]; ];

57
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 { mdiClose } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } 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 type { DataTableRowData } from "../../../../components/data-table/ha-data-table";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group";
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";
@ -48,7 +47,7 @@ export class HuiCreateDialogBadge
@state() private _selectedEntities: string[] = []; @state() private _selectedEntities: string[] = [];
@state() private _currTabIndex = 0; @state() private _currTab: "badge" | "entity" = "badge";
public async showDialog(params: CreateBadgeDialogParams): Promise<void> { public async showDialog(params: CreateBadgeDialogParams): Promise<void> {
this._params = params; this._params = params;
@ -67,7 +66,7 @@ export class HuiCreateDialogBadge
public closeDialog(): boolean { public closeDialog(): boolean {
this._params = undefined; this._params = undefined;
this._currTabIndex = 0; this._currTab = "badge";
this._selectedEntities = []; this._selectedEntities = [];
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
return true; return true;
@ -92,7 +91,7 @@ export class HuiCreateDialogBadge
@keydown=${this._ignoreKeydown} @keydown=${this._ignoreKeydown}
@closed=${this._cancel} @closed=${this._cancel}
.heading=${title} .heading=${title}
class=${classMap({ table: this._currTabIndex === 1 })} class=${classMap({ table: this._currTab === "entity" })}
> >
<ha-dialog-header show-border slot="heading"> <ha-dialog-header show-border slot="heading">
<ha-icon-button <ha-icon-button
@ -101,26 +100,30 @@ export class HuiCreateDialogBadge
.label=${this.hass.localize("ui.common.close")} .label=${this.hass.localize("ui.common.close")}
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
<span slot="title"> ${title} </span> <span slot="title">${title}</span>
<mwc-tab-bar <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
.activeIndex=${this._currTabIndex} <sl-tab
@MDCTabBar:activated=${this._handleTabChanged} slot="nav"
> .active=${this._currTab === "badge"}
<mwc-tab panel="badge"
.label=${this.hass!.localize( dialogInitialFocus
>
${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_badge" "ui.panel.lovelace.editor.badge_picker.by_badge"
)} )}
dialogInitialFocus </sl-tab>
></mwc-tab> <sl-tab
<mwc-tab slot="nav"
.label=${this.hass!.localize( .active=${this._currTab === "entity"}
panel="entity"
>${this.hass!.localize(
"ui.panel.lovelace.editor.badge_picker.by_entity" "ui.panel.lovelace.editor.badge_picker.by_entity"
)} )}</sl-tab
></mwc-tab> >
</mwc-tab-bar> </sl-tab-group>
</ha-dialog-header> </ha-dialog-header>
${cache( ${cache(
this._currTabIndex === 0 this._currTab === "badge"
? html` ? html`
<hui-badge-picker <hui-badge-picker
.suggestedBadges=${this._params.suggestedBadges} .suggestedBadges=${this._params.suggestedBadges}
@ -194,7 +197,13 @@ export class HuiCreateDialogBadge
--mdc-dialog-min-width: 1000px; --mdc-dialog-min-width: 1000px;
} }
} }
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
hui-badge-picker { hui-badge-picker {
--badge-picker-search-shape: 0; --badge-picker-search-shape: 0;
--badge-picker-search-margin: -2px -24px 0; --badge-picker-search-margin: -2px -24px 0;
@ -234,12 +243,12 @@ export class HuiCreateDialogBadge
} }
private _handleTabChanged(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
const newTab = ev.detail.index; const newTab = ev.detail.name;
if (newTab === this._currTabIndex) { if (newTab === this._currTab) {
return; return;
} }
this._currTabIndex = ev.detail.index; this._currTab = newTab;
this._selectedEntities = []; 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 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 type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; 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 { getCardElementClass } from "../../create-element/create-card-element";
import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types"; import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
import { HuiTypedElementEditor } from "../hui-typed-element-editor"; import { HuiTypedElementEditor } from "../hui-typed-element-editor";
import "./hui-card-layout-editor"; import "./hui-card-layout-editor";
import "./hui-card-visibility-editor"; import "./hui-card-visibility-editor";
import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
const tabs = ["config", "visibility", "layout"] as const; const tabs = ["config", "visibility", "layout"] as const;
@ -91,27 +90,23 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
`; `;
} }
return html` return html`
<mwc-tab-bar <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
.activeIndex=${tabs.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
${displayedTabs.map( ${displayedTabs.map(
(tab) => html` (tab) => html`
<mwc-tab <sl-tab slot="nav" .active=${this._currTab === tab} panel=${tab}>
.label=${this.hass.localize( ${this.hass.localize(
`ui.panel.lovelace.editor.edit_card.tab_${tab}` `ui.panel.lovelace.editor.edit_card.tab_${tab}`
)} )}
> </sl-tab>
</mwc-tab>
` `
)} )}
</mwc-tab-bar> </sl-tab-group>
${content} ${content}
`; `;
} }
private _handleTabChanged(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
const newTab = tabs[ev.detail.index]; const newTab = ev.detail.name;
if (newTab === this._currTab) { if (newTab === this._currTab) {
return; return;
} }
@ -120,10 +115,17 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
static override styles = [ static override styles = [
css` css`
mwc-tab-bar { sl-tab-group {
text-transform: uppercase;
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid var(--divider-color); }
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
} }
`, `,
]; ];

58
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 { mdiClose } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } 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 type { DataTableRowData } from "../../../../components/data-table/ha-data-table";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group";
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";
@ -60,7 +59,7 @@ export class HuiCreateDialogCard
@state() private _selectedEntities: string[] = []; @state() private _selectedEntities: string[] = [];
@state() private _currTabIndex = 0; @state() private _currTab: "card" | "entity" = "card";
@state() private _narrow = false; @state() private _narrow = false;
@ -85,7 +84,7 @@ export class HuiCreateDialogCard
public closeDialog(): boolean { public closeDialog(): boolean {
this._params = undefined; this._params = undefined;
this._currTabIndex = 0; this._currTab = "card";
this._selectedEntities = []; this._selectedEntities = [];
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
return true; return true;
@ -110,7 +109,7 @@ export class HuiCreateDialogCard
@keydown=${this._ignoreKeydown} @keydown=${this._ignoreKeydown}
@closed=${this._cancel} @closed=${this._cancel}
.heading=${title} .heading=${title}
class=${classMap({ table: this._currTabIndex === 1 })} class=${classMap({ table: this._currTab === "entity" })}
> >
<ha-dialog-header show-border slot="heading"> <ha-dialog-header show-border slot="heading">
<ha-icon-button <ha-icon-button
@ -119,26 +118,31 @@ export class HuiCreateDialogCard
.label=${this.hass.localize("ui.common.close")} .label=${this.hass.localize("ui.common.close")}
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
<span slot="title"> ${title} </span> <span slot="title">${title}</span>
<mwc-tab-bar
.activeIndex=${this._currTabIndex} <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
@MDCTabBar:activated=${this._handleTabChanged} <sl-tab
> slot="nav"
<mwc-tab .active=${this._currTab === "card"}
.label=${this.hass!.localize( panel="card"
dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
>
${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_card" "ui.panel.lovelace.editor.cardpicker.by_card"
)} )}
dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)} </sl-tab>
></mwc-tab> <sl-tab
<mwc-tab slot="nav"
.label=${this.hass!.localize( .active=${this._currTab === "entity"}
panel="entity"
>${this.hass!.localize(
"ui.panel.lovelace.editor.cardpicker.by_entity" "ui.panel.lovelace.editor.cardpicker.by_entity"
)} )}</sl-tab
></mwc-tab> >
</mwc-tab-bar> </sl-tab-group>
</ha-dialog-header> </ha-dialog-header>
${cache( ${cache(
this._currTabIndex === 0 this._currTab === "card"
? html` ? html`
<hui-card-picker <hui-card-picker
dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")} dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
@ -215,7 +219,13 @@ export class HuiCreateDialogCard
--mdc-dialog-min-width: 1000px; --mdc-dialog-min-width: 1000px;
} }
} }
sl-tab {
flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
}
hui-card-picker { hui-card-picker {
--card-picker-search-shape: 0; --card-picker-search-shape: 0;
--card-picker-search-margin: 0 -24px 0; --card-picker-search-margin: 0 -24px 0;
@ -268,12 +278,12 @@ export class HuiCreateDialogCard
} }
private _handleTabChanged(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
const newTab = ev.detail.index; const newTab = ev.detail.name;
if (newTab === this._currTabIndex) { if (newTab === this._currTab) {
return; return;
} }
this._currTabIndex = ev.detail.index; this._currTab = newTab;
this._selectedEntities = []; 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 { mdiCodeBraces, mdiContentCopy, mdiListBoxOutline } from "@mdi/js";
import deepClone from "deep-clone-simple"; import deepClone from "deep-clone-simple";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
@ -13,6 +10,7 @@ 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 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";
@ -81,21 +79,18 @@ export class HuiConditionalCardEditor
const isGuiMode = !this._cardEditorEl || this._GUImode; const isGuiMode = !this._cardEditorEl || this._GUImode;
return html` return html`
<mwc-tab-bar <sl-tab-group @sl-tab-show=${this._selectTab}>
.activeIndex=${this._cardTab ? 1 : 0} <sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}>
@MDCTabBar:activated=${this._selectTab} ${this.hass!.localize(
>
<mwc-tab
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.conditions" "ui.panel.lovelace.editor.card.conditional.conditions"
)} )}
></mwc-tab> </sl-tab>
<mwc-tab <sl-tab slot="nav" panel="card" .active=${this._cardTab}>
.label=${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.card" "ui.panel.lovelace.editor.card.conditional.card"
)} )}
></mwc-tab> </sl-tab>
</mwc-tab-bar> </sl-tab-group>
${this._cardTab ${this._cardTab
? html` ? html`
<div class="card"> <div class="card">
@ -159,8 +154,8 @@ export class HuiConditionalCardEditor
`; `;
} }
private _selectTab(ev: MDCTabBarActivatedEvent): void { private _selectTab(ev: CustomEvent): void {
this._cardTab = ev.detail.index === 1; this._cardTab = ev.detail.name === "card";
} }
private _toggleMode(): void { private _toggleMode(): void {
@ -235,8 +230,13 @@ export class HuiConditionalCardEditor
return [ return [
configElementStyle, configElementStyle,
css` css`
mwc-tab-bar { sl-tab {
border-bottom: 1px solid var(--divider-color); flex: 1;
}
sl-tab::part(base) {
width: 100%;
justify-content: center;
} }
ha-alert { ha-alert {
display: block; 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-list-item";
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 { 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";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
@ -25,9 +27,6 @@ import {
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 "@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; const TABS = ["tab-settings", "tab-visibility"] as const;
@ -169,21 +168,21 @@ export class HuiDialogEditSection
</ha-button-menu> </ha-button-menu>
${!this._yamlMode ${!this._yamlMode
? html` ? html`
<mwc-tab-bar <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
.activeIndex=${TABS.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
${TABS.map( ${TABS.map(
(tab) => html` (tab) => html`
<mwc-tab <sl-tab
.label=${this.hass!.localize( slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
>
${this.hass!.localize(
`ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}` `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
)} )}
> </sl-tab>
</mwc-tab>
` `
)} )}
</mwc-tab-bar> </sl-tab-group>
` `
: nothing} : nothing}
</ha-dialog-header> </ha-dialog-header>
@ -205,7 +204,7 @@ export class HuiDialogEditSection
} }
private _handleTabChanged(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
const newTab = TABS[ev.detail.index]; const newTab = ev.detail.name;
if (newTab === this._currTab) { if (newTab === this._currTab) {
return; return;
} }
@ -274,10 +273,12 @@ export class HuiDialogEditSection
ha-dialog.yaml-mode { ha-dialog.yaml-mode {
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }
mwc-tab-bar { sl-tab {
color: var(--primary-text-color); flex: 1;
text-transform: uppercase; }
padding: 0 20px; sl-tab::part(base) {
width: 100%;
justify-content: center;
} }
@media all and (min-width: 600px) { @media all and (min-width: 600px) {
ha-dialog { 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 type { ActionDetail } from "@material/mwc-list";
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import { import {
mdiClose, mdiClose,
mdiDotsVertical, mdiDotsVertical,
@ -55,6 +53,7 @@ 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;
@ -272,21 +271,21 @@ export class HuiDialogEditView extends LitElement {
` `
: nothing} : nothing}
${!this._yamlMode ${!this._yamlMode
? html`<mwc-tab-bar ? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
.activeIndex=${TABS.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
${TABS.map( ${TABS.map(
(tab) => html` (tab) => html`
<mwc-tab <sl-tab
.label=${this.hass!.localize( slot="nav"
.panel=${tab}
.active=${this._currTab === tab}
>
${this.hass!.localize(
`ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}` `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
)} )}
> </sl-tab>
</mwc-tab>
` `
)} )}
</mwc-tab-bar>` </sl-tab-group>`
: nothing} : nothing}
</ha-dialog-header> </ha-dialog-header>
${content} ${content}
@ -515,7 +514,7 @@ export class HuiDialogEditView extends LitElement {
} }
private _handleTabChanged(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
const newTab = TABS[ev.detail.index]; const newTab = ev.detail.name;
if (newTab === this._currTab) { if (newTab === this._currTab) {
return; return;
} }
@ -644,10 +643,12 @@ export class HuiDialogEditView extends LitElement {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
mwc-tab-bar { sl-tab {
color: var(--primary-text-color); flex: 1;
text-transform: uppercase; }
padding: 0 20px; sl-tab::part(base) {
width: 100%;
justify-content: center;
} }
ha-button.warning { ha-button.warning {
margin-right: auto; margin-right: auto;