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

Use md-select for entity-row and state-card (#25307)

Browse Source
This commit is contained in:
Wendelin 2025-05-05 10:01:35 +02:00 committed by GitHub
parent a19e7002ea
commit 3c9dce20e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
View File

@ -3,8 +3,8 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-list-item"; import "../../../components/ha-md-select";
import "../../../components/ha-select"; import "../../../components/ha-md-select-option";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics"; import { forwardHaptic } from "../../../data/haptics";
import type { InputSelectEntity } from "../../../data/input_select"; import type { InputSelectEntity } from "../../../data/input_select";
@ -57,25 +57,26 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config} .config=${this._config}
hide-name hide-name
> >
<ha-select <ha-md-select
.label=${this._config.name || computeStateName(stateObj)} .label=${this._config.name || computeStateName(stateObj)}
.value=${stateObj.state} .value=${stateObj.state}
.options=${stateObj.attributes.options}
.disabled=${ .disabled=${
stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */ stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
} }
naturalMenuWidth naturalMenuWidth
@selected=${this._selectedChanged} @change=${this._selectedChanged}
@click=${stopPropagation} @click=${stopPropagation}
@closed=${stopPropagation} @closed=${stopPropagation}
> >
${stateObj.attributes.options ${stateObj.attributes.options
? stateObj.attributes.options.map( ? stateObj.attributes.options.map(
(option) => (option) =>
html`<ha-list-item .value=${option}>${option}</ha-list-item>` html`<ha-md-select-option .value=${option}>
<div slot="headline">${option}</div>
</ha-md-select-option>`
) )
: ""} : nothing}
</ha-select> </ha-md-select>
</hui-generic-entity-row> </hui-generic-entity-row>
`; `;
} }
@ -85,9 +86,8 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
display: flex; display: flex;
align-items: center; align-items: center;
} }
ha-select { ha-md-select {
width: 100%; width: 100%;
--ha-select-min-width: 0;
} }
`; `;

21
src/state-summary/state-card-input_select.ts
View File

@ -1,11 +1,10 @@
import type { TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name"; import { computeStateName } from "../common/entity/compute_state_name";
import "../components/entity/state-badge"; import "../components/entity/state-badge";
import "../components/ha-list-item"; import "../components/ha-md-select";
import "../components/ha-select"; import "../components/ha-md-select-option";
import { UNAVAILABLE } from "../data/entity"; import { UNAVAILABLE } from "../data/entity";
import type { InputSelectEntity } from "../data/input_select"; import type { InputSelectEntity } from "../data/input_select";
import { setInputSelectOption } from "../data/input_select"; import { setInputSelectOption } from "../data/input_select";
@ -20,23 +19,21 @@ class StateCardInputSelect extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge> <state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge>
<ha-select <ha-md-select
.label=${computeStateName(this.stateObj)} .label=${computeStateName(this.stateObj)}
.value=${this.stateObj.state} .value=${this.stateObj.state}
.options=${this.stateObj.attributes.options}
.disabled=${ .disabled=${
this.stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */ this.stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
} }
naturalMenuWidth @change=${this._selectedOptionChanged}
fixedMenuPosition
@selected=${this._selectedOptionChanged}
@closed=${stopPropagation}
> >
${this.stateObj.attributes.options.map( ${this.stateObj.attributes.options.map(
(option) => (option) =>
html`<ha-list-item .value=${option}>${option}</ha-list-item>` html`<ha-md-select-option .value=${option}>
<div slot="headline">${option}</div>
</ha-md-select-option>`
)} )}
</ha-select> </ha-md-select>
`; `;
} }
@ -58,7 +55,7 @@ class StateCardInputSelect extends LitElement {
margin-top: 10px; margin-top: 10px;
} }
ha-select { ha-md-select {
width: 100%; width: 100%;
} }
`; `;

25
src/state-summary/state-card-select.ts
View File

@ -1,11 +1,10 @@
import type { TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name"; import { computeStateName } from "../common/entity/compute_state_name";
import "../components/entity/state-badge"; import "../components/entity/state-badge";
import "../components/ha-list-item"; import "../components/ha-md-select";
import "../components/ha-select"; import "../components/ha-md-select-option";
import { UNAVAILABLE } from "../data/entity"; import { UNAVAILABLE } from "../data/entity";
import type { SelectEntity } from "../data/select"; import type { SelectEntity } from "../data/select";
import { setSelectOption } from "../data/select"; import { setSelectOption } from "../data/select";
@ -20,24 +19,22 @@ class StateCardSelect extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge> <state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge>
<ha-select <ha-md-select
.value=${this.stateObj.state}
.label=${computeStateName(this.stateObj)} .label=${computeStateName(this.stateObj)}
.options=${this.stateObj.attributes.options} .value=${this.stateObj.state}
.disabled=${this.stateObj.state === UNAVAILABLE} .disabled=${this.stateObj.state === UNAVAILABLE}
naturalMenuWidth @change=${this._selectedOptionChanged}
fixedMenuPosition
@selected=${this._selectedOptionChanged}
@closed=${stopPropagation}
> >
${this.stateObj.attributes.options.map( ${this.stateObj.attributes.options.map(
(option) => html` (option) => html`
<ha-list-item .value=${option}> <ha-md-select-option .value=${option}>
<div slot="headline">
${this.hass.formatEntityState(this.stateObj, option)} ${this.hass.formatEntityState(this.stateObj, option)}
</ha-list-item> </div>
</ha-md-select-option>
` `
)} )}
</ha-select> </ha-md-select>
`; `;
} }
@ -59,7 +56,7 @@ class StateCardSelect extends LitElement {
margin-top: 10px; margin-top: 10px;
} }
ha-select { ha-md-select {
width: 100%; width: 100%;
} }
`; `;