diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts index 2c3ed39285..82baf2b3b4 100644 --- a/src/components/ha-form/ha-form-grid.ts +++ b/src/components/ha-form/ha-form-grid.ts @@ -1,5 +1,12 @@ import "./ha-form"; -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + PropertyValues, + TemplateResult, +} from "lit"; import { customElement, property } from "lit/decorators"; import type { HaFormGridSchema, @@ -26,10 +33,25 @@ export class HaFormGrid extends LitElement implements HaFormElement { @property() public computeHelper?: (schema: HaFormSchema) => string; - protected firstUpdated() { + protected firstUpdated(changedProps: PropertyValues) { + super.firstUpdated(changedProps); this.setAttribute("own-margin", ""); } + protected updated(changedProps: PropertyValues): void { + super.updated(changedProps); + if (changedProps.has("schema")) { + if (this.schema.column_min_width) { + this.style.setProperty( + "--form-grid-min-width", + this.schema.column_min_width + ); + } else { + this.style.setProperty("--form-grid-min-width", ""); + } + } + } + protected render(): TemplateResult { return html` ${this.schema.schema.map( diff --git a/src/components/ha-form/types.ts b/src/components/ha-form/types.ts index 5d9572147a..fc45bc3ef1 100644 --- a/src/components/ha-form/types.ts +++ b/src/components/ha-form/types.ts @@ -29,6 +29,7 @@ export interface HaFormBaseSchema { export interface HaFormGridSchema extends HaFormBaseSchema { type: "grid"; name: ""; + column_min_width?: string; schema: HaFormSchema[]; } diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts index f4fbb031e7..f794b5b317 100644 --- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts @@ -1,4 +1,5 @@ -import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import "../../../../components/ha-form/ha-form"; +import { html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { array, @@ -12,23 +13,14 @@ import { assign, } from "superstruct"; import { fireEvent } from "../../../../common/dom/fire_event"; -import { computeRTLDirection } from "../../../../common/util/compute_rtl"; -import "../../../../components/entity/state-badge"; -import "../../../../components/ha-card"; -import "../../../../components/ha-formfield"; -import "../../../../components/ha-icon"; -import "../../../../components/ha-switch"; -import { HomeAssistant } from "../../../../types"; +import type { HomeAssistant } from "../../../../types"; import { ConfigEntity, GlanceCardConfig } from "../../cards/types"; import "../../components/hui-entity-editor"; -import "../../components/hui-theme-select-editor"; -import { LovelaceCardEditor } from "../../types"; +import type { LovelaceCardEditor } from "../../types"; import { processEditorEntities } from "../process-editor-entities"; import { entitiesConfigStruct } from "../structs/entities-struct"; -import { EditorTarget, EntitiesEditorEvent } from "../types"; -import { configElementStyle } from "./config-elements-style"; import { baseLovelaceCardConfig } from "../structs/base-card-struct"; -import "@polymer/paper-input/paper-input"; +import type { HaFormSchema } from "../../../../components/ha-form/types"; const cardConfigStruct = assign( baseLovelaceCardConfig, @@ -44,6 +36,29 @@ const cardConfigStruct = assign( }) ); +const SCHEMA: HaFormSchema[] = [ + { name: "title", selector: { text: {} } }, + { + name: "", + type: "grid", + schema: [ + { name: "columns", selector: { number: { min: 1, mode: "box" } } }, + { name: "theme", selector: { theme: {} } }, + ], + }, + { + name: "", + type: "grid", + column_min_width: "100px", + schema: [ + { name: "show_name", selector: { boolean: {} } }, + { name: "show_icon", selector: { boolean: {} } }, + { name: "show_state", selector: { boolean: {} } }, + ], + }, + { name: "state_color", selector: { boolean: {} } }, +]; + @customElement("hui-glance-card-editor") export class HuiGlanceCardEditor extends LitElement @@ -61,177 +76,52 @@ export class HuiGlanceCardEditor this._configEntities = processEditorEntities(config.entities); } - get _title(): string { - return this._config!.title || ""; - } - - get _theme(): string { - return this._config!.theme || ""; - } - - get _columns(): number { - return this._config!.columns || NaN; - } - - get _show_name(): boolean { - return this._config!.show_name || true; - } - - get _show_icon(): boolean { - return this._config!.show_icon || true; - } - - get _show_state(): boolean { - return this._config!.show_state || true; - } - - get _state_color(): boolean { - return this._config!.state_color ?? true; - } - protected render(): TemplateResult { if (!this.hass || !this._config) { return html``; } - const dir = computeRTLDirection(this.hass!); + const data = { + show_name: true, + show_icon: true, + show_state: true, + ...this._config, + }; return html` -