From b87f44ff742325cbe0536e30f0d8347297d31693 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Fri, 30 Aug 2024 16:36:11 +0200 Subject: [PATCH] WIP: continue migration --- .../editor/card-editor/hui-card-editor.ts | 29 ++--- .../card-editor/hui-card-element-editor.ts | 104 +----------------- 2 files changed, 17 insertions(+), 116 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts index 4dac2544dc..cf15640860 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts @@ -9,6 +9,8 @@ import "./hui-card-visibility-editor"; import { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { HuiCardElementEditor } from "./hui-card-element-editor"; import { fireEvent } from "../../../../common/dom/fire_event"; +import { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; +import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section"; const TABS = ["config", "visibility", "layout"] as const; @@ -20,23 +22,22 @@ class HuiCardEditor extends LitElement { @property({ attribute: false }) public config!: LovelaceCardConfig; - @property({ type: Boolean, attribute: "show-visibility-tab" }) - public showVisibilityTab = false; - - @property({ type: Boolean, attribute: "show-layout-tab" }) - public showLayoutTab = false; + @property({ attribute: false }) public containerConfig!: + | LovelaceViewConfig + | LovelaceSectionConfig; @query("hui-card-element-editor") public elementEditor?: HuiCardElementEditor; @state() private _selectedTab: (typeof TABS)[number] = TABS[0]; - private _tabs = memoizeOne((showLayoutTab: boolean, cardType: string) => - TABS.filter((tab) => { - if (tab === "visibility") return cardType !== "conditional"; - if (tab === "layout") return showLayoutTab; - return true; - }) + private _tabs = memoizeOne( + (containerType: string | undefined, cardType: string) => + TABS.filter((tab) => { + if (tab === "visibility") return cardType !== "conditional"; + if (tab === "layout") return containerType === "grid"; + return true; + }) ); private renderContent() { @@ -78,7 +79,8 @@ class HuiCardEditor extends LitElement { protected render() { const cardType = this.config.type; - const tabs = this._tabs(this.showLayoutTab, cardType); + const containerType = this.containerConfig.type; + const tabs = this._tabs(containerType, cardType); if (tabs.length <= 1) { return this.renderContent(); @@ -105,7 +107,8 @@ class HuiCardEditor extends LitElement { private _handleTabChanged(ev: CustomEvent): void { const cardType = this.config.type; - const tabs = this._tabs(this.showLayoutTab, cardType); + const containerType = this.containerConfig.type; + const tabs = this._tabs(containerType, cardType); const newTab = tabs[ev.detail.index]; if (newTab === this._selectedTab) { return; diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts index 8e605b12d4..7c17bddea7 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts @@ -1,26 +1,11 @@ -import "@material/mwc-tab-bar/mwc-tab-bar"; -import "@material/mwc-tab/mwc-tab"; -import { CSSResultGroup, TemplateResult, css, html, nothing } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement } from "lit/decorators"; import { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import { getCardElementClass } from "../../create-element/create-card-element"; import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types"; import { HuiElementEditor } from "../hui-element-editor"; -import "./hui-card-layout-editor"; -import "./hui-card-visibility-editor"; -import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section"; - -const tabs = ["config", "visibility", "layout"] as const; @customElement("hui-card-element-editor") export class HuiCardElementEditor extends HuiElementEditor { - @property({ type: Boolean, attribute: "show-visibility-tab" }) - public showVisibilityTab = false; - - @property({ attribute: false }) public sectionConfig?: LovelaceSectionConfig; - - @state() private _currTab: (typeof tabs)[number] = tabs[0]; - protected async getConfigElement(): Promise { const elClass = await getCardElementClass(this.configElementType!); @@ -42,93 +27,6 @@ export class HuiCardElementEditor extends HuiElementEditor { return undefined; } - - private _configChanged(ev: CustomEvent): void { - ev.stopPropagation(); - this.value = ev.detail.value; - } - - get _showLayoutTab(): boolean { - return ( - !!this.sectionConfig && - (this.sectionConfig.type === undefined || - this.sectionConfig.type === "grid") - ); - } - - protected renderConfigElement(): TemplateResult { - const displayedTabs: string[] = ["config"]; - if (this.showVisibilityTab) displayedTabs.push("visibility"); - if (this._showLayoutTab) displayedTabs.push("layout"); - - if (displayedTabs.length === 1) return super.renderConfigElement(); - - let content: TemplateResult<1> | typeof nothing = nothing; - - switch (this._currTab) { - case "config": - content = html`${super.renderConfigElement()}`; - break; - case "visibility": - content = html` - - `; - break; - case "layout": - content = html` - - - `; - } - return html` - - ${displayedTabs.map( - (tab) => html` - - - ` - )} - - ${content} - `; - } - - private _handleTabChanged(ev: CustomEvent): void { - const newTab = tabs[ev.detail.index]; - if (newTab === this._currTab) { - return; - } - this._currTab = newTab; - } - - static get styles(): CSSResultGroup { - return [ - HuiElementEditor.styles, - css` - mwc-tab-bar { - text-transform: uppercase; - margin-bottom: 16px; - border-bottom: 1px solid var(--divider-color); - } - `, - ]; - } } declare global {