mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Add multiple option to text selector (#18785)
* Add multiple option to text selector * Make multiple optional * Update src/components/ha-selector/ha-selector-text.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> --------- Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paul Bottein
GitHub
parent
71a41be20a
commit
37a56b250a
@ -1,12 +1,8 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { LitElement, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { haStyle } from "../resources/styles";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-textfield";
|
||||
import type { HaTextField } from "./ha-textfield";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-multi-textfield";
|
||||
|
||||
@customElement("ha-aliases-editor")
|
||||
class AliasesEditor extends LitElement {
|
||||
@ -22,107 +18,23 @@ class AliasesEditor extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.aliases.map(
|
||||
(alias, index) => html`
|
||||
<div class="layout horizontal center-center row">
|
||||
<ha-textfield
|
||||
<ha-multi-textfield
|
||||
.hass=${this.hass}
|
||||
.value=${this.aliases}
|
||||
.disabled=${this.disabled}
|
||||
dialogInitialFocus=${index}
|
||||
.index=${index}
|
||||
class="flex-auto"
|
||||
.label=${this.hass!.localize("ui.dialogs.aliases.input_label", {
|
||||
number: index + 1,
|
||||
})}
|
||||
.value=${alias}
|
||||
?data-last=${index === this.aliases.length - 1}
|
||||
@input=${this._editAlias}
|
||||
@keydown=${this._keyDownAlias}
|
||||
></ha-textfield>
|
||||
<ha-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.index=${index}
|
||||
slot="navigationIcon"
|
||||
label=${this.hass!.localize("ui.dialogs.aliases.remove_alias", {
|
||||
number: index + 1,
|
||||
})}
|
||||
@click=${this._removeAlias}
|
||||
.path=${mdiDeleteOutline}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
<div class="layout horizontal center-center">
|
||||
<mwc-button @click=${this._addAlias} .disabled=${this.disabled}>
|
||||
${this.hass!.localize("ui.dialogs.aliases.add_alias")}
|
||||
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
|
||||
</mwc-button>
|
||||
</div>
|
||||
.label=${this.hass!.localize("ui.dialogs.aliases.label")}
|
||||
.removeLabel=${this.hass!.localize("ui.dialogs.aliases.remove")}
|
||||
.addLabel=${this.hass!.localize("ui.dialogs.aliases.add")}
|
||||
item-index
|
||||
@value-changed=${this._aliasesChanged}
|
||||
>
|
||||
</ha-multi-textfield>
|
||||
`;
|
||||
}
|
||||
|
||||
private async _addAlias() {
|
||||
this.aliases = [...this.aliases, ""];
|
||||
this._fireChanged(this.aliases);
|
||||
await this.updateComplete;
|
||||
const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
|
||||
| HaTextField
|
||||
| undefined;
|
||||
field?.focus();
|
||||
}
|
||||
|
||||
private async _editAlias(ev: Event) {
|
||||
const index = (ev.target as any).index;
|
||||
const aliases = [...this.aliases];
|
||||
aliases[index] = (ev.target as any).value;
|
||||
this._fireChanged(aliases);
|
||||
}
|
||||
|
||||
private async _keyDownAlias(ev: KeyboardEvent) {
|
||||
if (ev.key === "Enter") {
|
||||
ev.stopPropagation();
|
||||
this._addAlias();
|
||||
}
|
||||
}
|
||||
|
||||
private async _removeAlias(ev: Event) {
|
||||
const index = (ev.target as any).index;
|
||||
const aliases = [...this.aliases];
|
||||
aliases.splice(index, 1);
|
||||
this._fireChanged(aliases);
|
||||
}
|
||||
|
||||
private _fireChanged(value) {
|
||||
private _aliasesChanged(value) {
|
||||
fireEvent(this, "value-changed", { value });
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
.row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
ha-icon-button {
|
||||
display: block;
|
||||
}
|
||||
mwc-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
#alias_input {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.alias {
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
--mdc-icon-button-size: 24px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
144
src/components/ha-multi-textfield.ts
Normal file
144
src/components/ha-multi-textfield.ts
Normal file
@ -0,0 +1,144 @@
|
||||
import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { haStyle } from "../resources/styles";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./ha-button";
|
||||
import "./ha-textfield";
|
||||
import type { HaTextField } from "./ha-textfield";
|
||||
|
||||
@customElement("ha-multi-textfield")
|
||||
class HaMultiTextField extends LitElement {
|
||||
@property({ attribute: false }) public hass?: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public value?: string[];
|
||||
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@property() public inputType?: string;
|
||||
|
||||
@property() public inputSuffix?: string;
|
||||
|
||||
@property() public inputPrefix?: string;
|
||||
|
||||
@property() public autocomplete?: string;
|
||||
|
||||
@property() public addLabel?: string;
|
||||
|
||||
@property() public removeLabel?: string;
|
||||
|
||||
@property({ attribute: "item-index", type: Boolean })
|
||||
public itemIndex?: boolean;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
${this._items.map((item, index) => {
|
||||
const indexSuffix = `${this.itemIndex ? ` ${index + 1}` : ""}`;
|
||||
return html`
|
||||
<div class="layout horizontal center-center row">
|
||||
<ha-textfield
|
||||
.suffix=${this.inputSuffix}
|
||||
.prefix=${this.inputPrefix}
|
||||
.type=${this.inputType}
|
||||
.autocomplete=${this.autocomplete}
|
||||
.disabled=${this.disabled}
|
||||
dialogInitialFocus=${index}
|
||||
.index=${index}
|
||||
class="flex-auto"
|
||||
.label=${`${this.label ? `${this.label}${indexSuffix}` : ""}`}
|
||||
.value=${item}
|
||||
?data-last=${index === this._items.length - 1}
|
||||
@input=${this._editItem}
|
||||
@keydown=${this._keyDown}
|
||||
></ha-textfield>
|
||||
<ha-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.index=${index}
|
||||
slot="navigationIcon"
|
||||
.label=${this.removeLabel ??
|
||||
this.hass?.localize("ui.common.remove") ??
|
||||
"Remove"}
|
||||
@click=${this._removeItem}
|
||||
.path=${mdiDeleteOutline}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<div class="layout horizontal center-center">
|
||||
<ha-button @click=${this._addItem} .disabled=${this.disabled}>
|
||||
${this.addLabel ?? this.hass?.localize("ui.common.add") ?? "Add"}
|
||||
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
|
||||
</ha-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private get _items() {
|
||||
return this.value ?? [];
|
||||
}
|
||||
|
||||
private async _addItem() {
|
||||
const items = [...this._items, ""];
|
||||
this._fireChanged(items);
|
||||
await this.updateComplete;
|
||||
const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
|
||||
| HaTextField
|
||||
| undefined;
|
||||
field?.focus();
|
||||
}
|
||||
|
||||
private async _editItem(ev: Event) {
|
||||
const index = (ev.target as any).index;
|
||||
const items = [...this._items];
|
||||
items[index] = (ev.target as any).value;
|
||||
this._fireChanged(items);
|
||||
}
|
||||
|
||||
private async _keyDown(ev: KeyboardEvent) {
|
||||
if (ev.key === "Enter") {
|
||||
ev.stopPropagation();
|
||||
this._addItem();
|
||||
}
|
||||
}
|
||||
|
||||
private async _removeItem(ev: Event) {
|
||||
const index = (ev.target as any).index;
|
||||
const items = [...this._items];
|
||||
items.splice(index, 1);
|
||||
this._fireChanged(items);
|
||||
}
|
||||
|
||||
private _fireChanged(value) {
|
||||
this.value = value;
|
||||
fireEvent(this, "value-changed", { value });
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
.row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
ha-icon-button {
|
||||
display: block;
|
||||
}
|
||||
ha-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-multi-textfield": HaMultiTextField;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,12 @@
|
||||
import { mdiEye, mdiEyeOff } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||
import { CSSResultGroup, LitElement, css, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { ensureArray } from "../../common/array/ensure-array";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { StringSelector } from "../../data/selector";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../ha-icon-button";
|
||||
import "../ha-multi-textfield";
|
||||
import "../ha-textarea";
|
||||
import "../ha-textfield";
|
||||
|
||||
@ -38,6 +40,22 @@ export class HaTextSelector extends LitElement {
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (this.selector.text?.multiple) {
|
||||
return html`
|
||||
<ha-multi-textfield
|
||||
.hass=${this.hass}
|
||||
.value=${ensureArray(this.value ?? [])}
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label}
|
||||
.inputType=${this.selector.text?.type}
|
||||
.inputSuffix=${this.selector.text?.suffix}
|
||||
.inputPrefix=${this.selector.text?.prefix}
|
||||
.autocomplete=${this.selector.text?.autocomplete}
|
||||
@value-changed=${this._handleChange}
|
||||
>
|
||||
</ha-multi-textfield>
|
||||
`;
|
||||
}
|
||||
if (this.selector.text?.multiline) {
|
||||
return html`<ha-textarea
|
||||
.name=${this.name}
|
||||
@ -92,11 +110,14 @@ export class HaTextSelector extends LitElement {
|
||||
}
|
||||
|
||||
private _handleChange(ev) {
|
||||
let value = ev.target.value;
|
||||
let value = ev.detail?.value ?? ev.target.value;
|
||||
if (this.value === value) {
|
||||
return;
|
||||
}
|
||||
if (value === "" && !this.required) {
|
||||
if (
|
||||
(value === "" || (Array.isArray(value) && value.length === 0)) &&
|
||||
!this.required
|
||||
) {
|
||||
value = undefined;
|
||||
}
|
||||
|
||||
|
||||
@ -347,6 +347,7 @@ export interface StringSelector {
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
autocomplete?: string;
|
||||
multiple?: true;
|
||||
} | null;
|
||||
}
|
||||
|
||||
|
||||
@ -1240,10 +1240,10 @@
|
||||
},
|
||||
"aliases": {
|
||||
"heading": "{name} aliases",
|
||||
"remove_alias": "Remove alias {number}",
|
||||
"input_label": "Alias {number}",
|
||||
"label": "Alias",
|
||||
"remove": "Remove alias",
|
||||
"save": "Save",
|
||||
"add_alias": "Add alias",
|
||||
"add": "Add alias",
|
||||
"no_aliases": "No aliases have been added yet",
|
||||
"update": "Update",
|
||||
"unknown_error": "Unknown error"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user