jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use ha-combox-box-list-item in all combo box components (#25096)

Browse Source
This commit is contained in:
Paul Bottein 2025-04-17 17:13:19 +02:00 committed by GitHub
parent d56c7c41e2
commit 0389fbba52
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 135 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/device/ha-device-picker.ts
View File

@ -1,7 +1,7 @@
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit"; import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { HassEntity } from "home-assistant-js-websocket"; import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, html } from "lit"; import { LitElement, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
@ -19,7 +19,7 @@ import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
import type { HomeAssistant, ValueChangedEvent } from "../../types"; import type { HomeAssistant, ValueChangedEvent } from "../../types";
import "../ha-combo-box"; import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box"; import type { HaComboBox } from "../ha-combo-box";
import "../ha-list-item"; import "../ha-combo-box-item";
interface Device { interface Device {
name: string; name: string;
@ -35,11 +35,14 @@ export type HaDevicePickerDeviceFilterFunc = (
export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean; export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;
const rowRenderer: ComboBoxLitRenderer<Device> = (item) => const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`
html`<ha-list-item .twoline=${!!item.area}> <ha-combo-box-item type="button">
<span>${item.name}</span> <span slot="headline">${item.name}</span>
<span slot="secondary">${item.area}</span> ${item.area
</ha-list-item>`; ? html`<span slot="supporting-text">${item.area}</span>`
: nothing}
</ha-combo-box-item>
`;
@customElement("ha-device-picker") @customElement("ha-device-picker")
export class HaDevicePicker extends LitElement { export class HaDevicePicker extends LitElement {

32
src/components/entity/ha-statistic-picker.ts
View File

@ -1,23 +1,23 @@
import "@material/mwc-list/mwc-list-item"; import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { HassEntity } from "home-assistant-js-websocket"; import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement, nothing } from "lit"; import { html, LitElement, nothing } from "lit";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { ensureArray } from "../../common/array/ensure-array"; import { ensureArray } from "../../common/array/ensure-array";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { stringCompare } from "../../common/string/compare"; import { stringCompare } from "../../common/string/compare";
import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching";
import type { StatisticsMetaData } from "../../data/recorder"; import type { StatisticsMetaData } from "../../data/recorder";
import { getStatisticIds, getStatisticLabel } from "../../data/recorder"; import { getStatisticIds, getStatisticLabel } from "../../data/recorder";
import type { ValueChangedEvent, HomeAssistant } from "../../types"; import type { HomeAssistant, ValueChangedEvent } from "../../types";
import { documentationUrl } from "../../util/documentation-url"; import { documentationUrl } from "../../util/documentation-url";
import "../ha-combo-box"; import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box"; import type { HaComboBox } from "../ha-combo-box";
import "../ha-combo-box-item";
import "../ha-svg-icon"; import "../ha-svg-icon";
import "./state-badge"; import "./state-badge";
import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching";
interface StatisticItem extends ScorableTextItem { interface StatisticItem extends ScorableTextItem {
id: string; id: string;
@ -99,16 +99,18 @@ export class HaStatisticPicker extends LitElement {
@state() private _filteredItems?: StatisticItem[] = undefined; @state() private _filteredItems?: StatisticItem[] = undefined;
private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (item) => private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (item) =>
html`<mwc-list-item graphic="avatar" twoline> html`<ha-combo-box-item type="button">
${item.state ${item.state
? html`<state-badge ? html`
slot="graphic" <state-badge
.stateObj=${item.state} slot="start"
.hass=${this.hass} .stateObj=${item.state}
></state-badge>` .hass=${this.hass}
: ""} ></state-badge>
<span>${item.name}</span> `
<span slot="secondary" : html`<span slot="start" style="width: 32px"></span>`}
<span slot="headline">${item.name}</span>
<span slot="supporting-text"
>${item.id === "" || item.id === "__missing" >${item.id === "" || item.id === "__missing"
? html`<a ? html`<a
target="_blank" target="_blank"
@ -120,7 +122,7 @@ export class HaStatisticPicker extends LitElement {
>` >`
: item.id}</span : item.id}</span
> >
</mwc-list-item>`; </ha-combo-box-item>`;
private _getStatistics = memoizeOne( private _getStatistics = memoizeOne(
( (

27
src/components/ha-addon-picker.ts
View File

@ -10,20 +10,23 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
import "./ha-alert"; import "./ha-alert";
import "./ha-combo-box"; import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box";
import "./ha-list-item"; import "./ha-combo-box-item";
const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`
html`<ha-list-item twoline graphic="icon"> <ha-combo-box-item type="button">
<span>${item.name}</span> <span slot="headline">${item.name}</span>
<span slot="secondary">${item.slug}</span> <span slot="supporting-text">${item.slug}</span>
${item.icon ${item.icon
? html`<img ? html`
alt="" <img
slot="graphic" alt=""
.src="/api/hassio/addons/${item.slug}/icon" slot="start"
/>` .src="/api/hassio/addons/${item.slug}/icon"
: ""} />
</ha-list-item>`; `
: nothing}
</ha-combo-box-item>
`;
@customElement("ha-addon-picker") @customElement("ha-addon-picker")
class HaAddonPicker extends LitElement { class HaAddonPicker extends LitElement {

43
src/components/ha-area-floor-picker.ts
View File

@ -25,6 +25,7 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box"; import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
import "./ha-floor-icon"; import "./ha-floor-icon";
import "./ha-icon-button"; import "./ha-icon-button";
import "./ha-list-item"; import "./ha-list-item";
@ -125,38 +126,38 @@ export class HaAreaFloorPicker extends LitElement {
private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => { private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => {
const rtl = computeRTL(this.hass); const rtl = computeRTL(this.hass);
return html` return html`
<ha-list-item <ha-combo-box-item
graphic="icon" type="button"
style=${item.type === "area" && item.hasFloor style=${item.type === "area" && item.hasFloor
? rtl ? "--md-list-item-leading-space: 48px;"
? "--mdc-list-side-padding-right: 48px;"
: "--mdc-list-side-padding-left: 48px;"
: ""} : ""}
> >
${item.type === "area" && item.hasFloor ${item.type === "area" && item.hasFloor
? html`<ha-tree-indicator ? html`
style=${styleMap({ <ha-tree-indicator
width: "48px", style=${styleMap({
position: "absolute", width: "48px",
top: "0px", position: "absolute",
left: rtl ? undefined : "8px", top: "0px",
right: rtl ? "8px" : undefined, left: rtl ? undefined : "4px",
transform: rtl ? "scaleX(-1)" : "", right: rtl ? "4px" : undefined,
})} transform: rtl ? "scaleX(-1)" : "",
.end=${item.lastArea} })}
slot="graphic" .end=${item.lastArea}
></ha-tree-indicator>` slot="start"
></ha-tree-indicator>
`
: nothing} : nothing}
${item.type === "floor" ${item.type === "floor"
? html`<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>` ? html`<ha-floor-icon slot="start" .floor=${item}></ha-floor-icon>`
: item.icon : item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>` ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon : html`<ha-svg-icon
slot="graphic" slot="start"
.path=${mdiTextureBox} .path=${mdiTextureBox}
></ha-svg-icon>`} ></ha-svg-icon>`}
${item.name} ${item.name}
</ha-list-item> </ha-combo-box-item>
`; `;
}; };

16
src/components/ha-area-picker.ts
View File

@ -4,7 +4,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, html } from "lit"; import { LitElement, html } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain"; import { computeDomain } from "../common/entity/compute_domain";
@ -24,22 +23,21 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box"; import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
import "./ha-icon-button"; import "./ha-icon-button";
import "./ha-list-item"; import "./ha-list-item";
import "./ha-svg-icon"; import "./ha-svg-icon";
type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry; type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) => const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) => html`
html`<ha-list-item <ha-combo-box-item type="button">
graphic="icon"
class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
>
${item.icon ${item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>` ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>`} : html`<ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>`}
${item.name} ${item.name}
</ha-list-item>`; </ha-combo-box-item>
`;
const ADD_NEW_ID = "___ADD_NEW___"; const ADD_NEW_ID = "___ADD_NEW___";
const NO_ITEMS_ID = "___NO_ITEMS___"; const NO_ITEMS_ID = "___NO_ITEMS___";

4
src/components/ha-combo-box-item.ts
View File

@ -11,6 +11,7 @@ export class HaComboBoxItem extends HaMdListItem {
...super.styles, ...super.styles,
css` css`
:host { :host {
--md-list-item-one-line-container-height: 48px;
--md-list-item-two-line-container-height: 64px; --md-list-item-two-line-container-height: 64px;
} }
:host([border-top]) md-item { :host([border-top]) md-item {
@ -29,7 +30,8 @@ export class HaComboBoxItem extends HaMdListItem {
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
} }
::slotted(state-badge) { ::slotted(state-badge),
::slotted(img) {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }

9
src/components/ha-combo-box.ts
View File

@ -16,8 +16,8 @@ import { customElement, property, query } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "./ha-combo-box-item";
import "./ha-icon-button"; import "./ha-icon-button";
import "./ha-list-item";
import "./ha-textfield"; import "./ha-textfield";
import type { HaTextField } from "./ha-textfield"; import type { HaTextField } from "./ha-textfield";
@ -216,10 +216,11 @@ export class HaComboBox extends LitElement {
private _defaultRowRenderer: ComboBoxLitRenderer< private _defaultRowRenderer: ComboBoxLitRenderer<
string | Record<string, any> string | Record<string, any>
> = (item) => > = (item) => html`
html`<ha-list-item> <ha-combo-box-item type="button">
${this.itemLabelPath ? item[this.itemLabelPath] : item} ${this.itemLabelPath ? item[this.itemLabelPath] : item}
</ha-list-item>`; </ha-combo-box-item>
`;
private _clearValue(ev: Event) { private _clearValue(ev: Event) {
ev.stopPropagation(); ev.stopPropagation();

23
src/components/ha-config-entry-picker.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-list/mwc-list-item";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit"; import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { html, LitElement, nothing } from "lit"; import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
@ -11,6 +10,7 @@ import type { ValueChangedEvent, HomeAssistant } from "../types";
import { brandsUrl } from "../util/brands-url"; import { brandsUrl } from "../util/brands-url";
import "./ha-combo-box"; import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
export interface ConfigEntryExtended extends ConfigEntry { export interface ConfigEntryExtended extends ConfigEntry {
localized_domain_name?: string; localized_domain_name?: string;
@ -48,18 +48,20 @@ class HaConfigEntryPicker extends LitElement {
this._getConfigEntries(); this._getConfigEntries();
} }
private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (item) => private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (
html`<mwc-list-item twoline graphic="icon"> item
<span ) => html`
>${item.title || <ha-combo-box-item type="button">
<span slot="headline">
${item.title ||
this.hass.localize( this.hass.localize(
"ui.panel.config.integrations.config_entry.unnamed_entry" "ui.panel.config.integrations.config_entry.unnamed_entry"
)}</span )}
> </span>
<span slot="secondary">${item.localized_domain_name}</span> <span slot="supporting-text">${item.localized_domain_name}</span>
<img <img
alt="" alt=""
slot="graphic" slot="start"
src=${brandsUrl({ src=${brandsUrl({
domain: item.domain, domain: item.domain,
type: "icon", type: "icon",
@ -70,7 +72,8 @@ class HaConfigEntryPicker extends LitElement {
@error=${this._onImageError} @error=${this._onImageError}
@load=${this._onImageLoad} @load=${this._onImageLoad}
/> />
</mwc-list-item>`; </ha-combo-box-item>
`;
protected render() { protected render() {
if (!this._configEntries) { if (!this._configEntries) {

15
src/components/ha-floor-picker.ts
View File

@ -3,7 +3,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, html } from "lit"; import { LitElement, html } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain"; import { computeDomain } from "../common/entity/compute_domain";
@ -28,9 +27,9 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box"; import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
import "./ha-floor-icon"; import "./ha-floor-icon";
import "./ha-icon-button"; import "./ha-icon-button";
import "./ha-list-item";
type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry; type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry;
@ -38,14 +37,12 @@ const ADD_NEW_ID = "___ADD_NEW___";
const NO_FLOORS_ID = "___NO_FLOORS___"; const NO_FLOORS_ID = "___NO_FLOORS___";
const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___"; const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) => const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) => html`
html`<ha-list-item <ha-combo-box-item type="button">
graphic="icon" <ha-floor-icon slot="start" .floor=${item}></ha-floor-icon>
class=${classMap({ "add-new": item.floor_id === ADD_NEW_ID })}
>
<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>
${item.name} ${item.name}
</ha-list-item>`; </ha-combo-box-item>
`;
@customElement("ha-floor-picker") @customElement("ha-floor-picker")
export class HaFloorPicker extends LitElement { export class HaFloorPicker extends LitElement {

11
src/components/ha-icon-picker.ts
View File

@ -11,8 +11,8 @@ import { fireEvent } from "../common/dom/fire_event";
import { customIcons } from "../data/custom_icons"; import { customIcons } from "../data/custom_icons";
import type { HomeAssistant, ValueChangedEvent } from "../types"; import type { HomeAssistant, ValueChangedEvent } from "../types";
import "./ha-combo-box"; import "./ha-combo-box";
import "./ha-list-item";
import "./ha-icon"; import "./ha-icon";
import "./ha-combo-box-item";
interface IconItem { interface IconItem {
icon: string; icon: string;
@ -67,11 +67,12 @@ const loadCustomIconItems = async (iconsetPrefix: string) => {
} }
}; };
const rowRenderer: ComboBoxLitRenderer<IconItem | RankedIcon> = (item) => const rowRenderer: ComboBoxLitRenderer<IconItem | RankedIcon> = (item) => html`
html`<ha-list-item graphic="avatar"> <ha-combo-box-item type="button">
<ha-icon .icon=${item.icon} slot="graphic"></ha-icon> <ha-icon .icon=${item.icon} slot="start"></ha-icon>
${item.icon} ${item.icon}
</ha-list-item>`; </ha-combo-box-item>
`;
@customElement("ha-icon-picker") @customElement("ha-icon-picker")
export class HaIconPicker extends LitElement { export class HaIconPicker extends LitElement {

15
src/components/ha-label-picker.ts
View File

@ -3,7 +3,6 @@ import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, html, nothing } from "lit"; import { LitElement, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain"; import { computeDomain } from "../common/entity/compute_domain";
@ -26,8 +25,8 @@ import type { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box"; import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
import "./ha-icon-button"; import "./ha-icon-button";
import "./ha-list-item";
import "./ha-svg-icon"; import "./ha-svg-icon";
type ScorableLabelItem = ScorableTextItem & LabelRegistryEntry; type ScorableLabelItem = ScorableTextItem & LabelRegistryEntry;
@ -36,16 +35,14 @@ const ADD_NEW_ID = "___ADD_NEW___";
const NO_LABELS_ID = "___NO_LABELS___"; const NO_LABELS_ID = "___NO_LABELS___";
const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___"; const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
const rowRenderer: ComboBoxLitRenderer<LabelRegistryEntry> = (item) => const rowRenderer: ComboBoxLitRenderer<LabelRegistryEntry> = (item) => html`
html`<ha-list-item <ha-combo-box-item type="button">
graphic="icon"
class=${classMap({ "add-new": item.label_id === ADD_NEW_ID })}
>
${item.icon ${item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>` ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
: nothing} : nothing}
${item.name} ${item.name}
</ha-list-item>`; </ha-combo-box-item>
`;
@customElement("ha-label-picker") @customElement("ha-label-picker")
export class HaLabelPicker extends SubscribeMixin(LitElement) { export class HaLabelPicker extends SubscribeMixin(LitElement) {

16
src/components/ha-navigation-picker.ts
View File

@ -1,7 +1,6 @@
import "@material/mwc-list/mwc-list-item";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit"; import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { titleCase } from "../common/string/title-case"; import { titleCase } from "../common/string/title-case";
@ -10,6 +9,7 @@ import type { LovelaceViewRawConfig } from "../data/lovelace/config/view";
import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types"; import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types";
import "./ha-combo-box"; import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
import "./ha-icon"; import "./ha-icon";
interface NavigationItem { interface NavigationItem {
@ -21,11 +21,13 @@ interface NavigationItem {
const DEFAULT_ITEMS: NavigationItem[] = []; const DEFAULT_ITEMS: NavigationItem[] = [];
const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html` const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
<mwc-list-item graphic="icon" .twoline=${!!item.title}> <ha-combo-box-item type="button">
<ha-icon .icon=${item.icon} slot="graphic"></ha-icon> <ha-icon .icon=${item.icon} slot="start"></ha-icon>
<span>${item.title || item.path}</span> <span slot="headline">${item.title || item.path}</span>
<span slot="secondary">${item.path}</span> ${item.title
</mwc-list-item> ? html`<span slot="supporting-text">${item.path}</span>`
: nothing}
</ha-combo-box-item>
`; `;
const createViewNavigationItem = ( const createViewNavigationItem = (

15
src/components/ha-service-picker.ts
View File

@ -7,7 +7,7 @@ import type { LocalizeFunc } from "../common/translations/localize";
import { domainToName } from "../data/integration"; import { domainToName } from "../data/integration";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "./ha-combo-box"; import "./ha-combo-box";
import "./ha-list-item"; import "./ha-combo-box-item";
import "./ha-service-icon"; import "./ha-service-icon";
import { getServiceIcons } from "../data/icons"; import { getServiceIcons } from "../data/icons";
@ -29,18 +29,19 @@ class HaServicePicker extends LitElement {
} }
private _rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = private _rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> =
(item) => (item) => html`
html`<ha-list-item twoline graphic="icon"> <ha-combo-box-item type="button">
<ha-service-icon <ha-service-icon
slot="graphic" slot="start"
.hass=${this.hass} .hass=${this.hass}
.service=${item.service} .service=${item.service}
></ha-service-icon> ></ha-service-icon>
<span>${item.name}</span> <span slot="headline">${item.name}</span>
<span slot="secondary" <span slot="supporting-text"
>${item.name === item.service ? "" : item.service}</span >${item.name === item.service ? "" : item.service}</span
> >
</ha-list-item>`; </ha-combo-box-item>
`;
protected render() { protected render() {
return html` return html`

10
src/panels/config/application_credentials/dialog-add-application-credential.ts
View File

@ -1,17 +1,15 @@
import "@material/mwc-list/mwc-list-item";
import { mdiOpenInNew } from "@mdi/js"; import { mdiOpenInNew } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event"; 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-spinner";
import "../../../components/ha-combo-box"; import "../../../components/ha-combo-box";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-markdown"; import "../../../components/ha-markdown";
import "../../../components/ha-password-field"; import "../../../components/ha-password-field";
import "../../../components/ha-spinner";
import "../../../components/ha-textfield"; import "../../../components/ha-textfield";
import type { import type {
ApplicationCredential, ApplicationCredential,
@ -33,11 +31,6 @@ interface Domain {
name: string; name: string;
} }
const rowRenderer: ComboBoxLitRenderer<Domain> = (item) =>
html`<mwc-list-item>
<span>${item.name}</span>
</mwc-list-item>`;
@customElement("dialog-add-application-credential") @customElement("dialog-add-application-credential")
export class DialogAddApplicationCredential extends LitElement { export class DialogAddApplicationCredential extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -171,7 +164,6 @@ export class DialogAddApplicationCredential extends LitElement {
"ui.panel.config.application_credentials.editor.domain" "ui.panel.config.application_credentials.editor.domain"
)} )}
.value=${this._domain} .value=${this._domain}
.renderer=${rowRenderer}
.items=${this._domains} .items=${this._domains}
item-id-path="id" item-id-path="id"
item-value-path="id" item-value-path="id"

17
src/panels/config/category/ha-category-picker.ts
View File

@ -4,15 +4,14 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit"; import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import type { ScorableTextItem } from "../../../common/string/filter/sequence-matching"; import type { ScorableTextItem } from "../../../common/string/filter/sequence-matching";
import { fuzzyFilterSort } from "../../../common/string/filter/sequence-matching"; import { fuzzyFilterSort } from "../../../common/string/filter/sequence-matching";
import "../../../components/ha-combo-box"; import "../../../components/ha-combo-box";
import type { HaComboBox } from "../../../components/ha-combo-box"; import type { HaComboBox } from "../../../components/ha-combo-box";
import "../../../components/ha-combo-box-item";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import type { CategoryRegistryEntry } from "../../../data/category_registry"; import type { CategoryRegistryEntry } from "../../../data/category_registry";
import { import {
@ -29,16 +28,14 @@ const ADD_NEW_ID = "___ADD_NEW___";
const NO_CATEGORIES_ID = "___NO_CATEGORIES___"; const NO_CATEGORIES_ID = "___NO_CATEGORIES___";
const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___"; const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) => const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) => html`
html`<ha-list-item <ha-combo-box-item type="button">
graphic="icon"
class=${classMap({ "add-new": item.category_id === ADD_NEW_ID })}
>
${item.icon ${item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>` ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon .path=${mdiTag} slot="graphic"></ha-svg-icon>`} : html`<ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>`}
${item.name} ${item.name}
</ha-list-item>`; </ha-combo-box-item>
`;
@customElement("ha-category-picker") @customElement("ha-category-picker")
export class HaCategoryPicker extends SubscribeMixin(LitElement) { export class HaCategoryPicker extends SubscribeMixin(LitElement) {