jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-24 21:37:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Entity Settings Page to MWC 3 (#11694)

Browse Source
This commit is contained in:
Zack Barett 2022-02-18 14:51:37 -06:00 committed by GitHub
parent 4fc0617289
commit 8999ca2ea0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 211 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/panels/config/entities/entity-registry-basic-editor.ts
View File

@ -1,10 +1,10 @@
import "@polymer/paper-input/paper-input";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import "../../../components/ha-area-picker";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaSwitch } from "../../../components/ha-switch";
import {
DeviceRegistryEntry,
@ -17,7 +17,6 @@ import {
} from "../../../data/entity_registry";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types";
@customElement("ha-registry-basic-editor")
@ -123,16 +122,16 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
computeDomain(this.entry.entity_id);
return html`
<paper-input
<ha-textfield
error-message="Domain needs to stay the same"
.value=${this._entityId}
@value-changed=${this._entityIdChanged}
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_id"
)}
error-message="Domain needs to stay the same"
.invalid=${invalidDomainUpdate}
.disabled=${this._submitting}
></paper-input>
@input=${this._entityIdChanged}
></ha-textfield>
<ha-area-picker
.hass=${this.hass}
.value=${this._areaId}
@ -177,8 +176,8 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
this._areaId = ev.detail.value;
}
private _entityIdChanged(ev: PolymerChangedEvent<string>): void {
this._entityId = ev.detail.value;
private _entityIdChanged(ev): void {
this._entityId = ev.target.value;
}
private _disabledByChanged(ev: Event): void {
@ -199,6 +198,10 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
.secondary {
color: var(--secondary-text-color);
}
ha-textfield {
display: block;
margin-bottom: 8px;
}
`;
}
}

39
src/panels/config/entities/entity-registry-settings.ts
View File

@ -1,7 +1,7 @@
import "../../../components/ha-alert";
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -19,6 +19,7 @@ import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-picker";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaSwitch } from "../../../components/ha-switch";
import {
DeviceRegistryEntry,
@ -36,7 +37,6 @@ import {
showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { PolymerChangedEvent } from "../../../polymer-types";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
@ -137,15 +137,18 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
</div>
`
: ""}
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="form container">
<paper-input
<ha-textfield
.value=${this._name}
@value-changed=${this._nameChanged}
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")}
.placeholder=${this.entry.original_name}
.invalid=${invalidDomainUpdate}
.disabled=${this._submitting}
></paper-input>
.placeholder=${this.entry.original_name}
@input=${this._nameChanged}
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
@value-changed=${this._iconChanged}
@ -176,16 +179,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
)}
</mwc-select>`
: ""}
<paper-input
<ha-textfield
error-message="Domain needs to stay the same"
.value=${this._entityId}
@value-changed=${this._entityIdChanged}
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_id"
)}
error-message="Domain needs to stay the same"
.invalid=${invalidDomainUpdate}
.disabled=${this._submitting}
></paper-input>
@input=${this._entityIdChanged}
></ha-textfield>
${!this.entry.device_id
? html`<ha-area-picker
.hass=${this.hass}
@ -282,19 +285,19 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
`;
}
private _nameChanged(ev: PolymerChangedEvent<string>): void {
private _nameChanged(ev): void {
this._error = undefined;
this._name = ev.detail.value;
this._name = ev.target.value;
}
private _iconChanged(ev: PolymerChangedEvent<string>): void {
private _iconChanged(ev: CustomEvent): void {
this._error = undefined;
this._icon = ev.detail.value;
}
private _entityIdChanged(ev: PolymerChangedEvent<string>): void {
private _entityIdChanged(ev): void {
this._error = undefined;
this._entityId = ev.detail.value;
this._entityId = ev.target.value;
}
private _deviceClassChanged(ev): void {
@ -423,6 +426,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
ha-switch {
margin-right: 16px;
}
ha-textfield {
display: block;
margin: 8px 0;
}
.row {
margin: 8px 0;
color: var(--primary-text-color);

62
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -116,36 +116,35 @@ export class DialogHelperDetail extends LitElement {
${Object.keys(HELPERS).map((platform: string) => {
const isLoaded = isComponentLoaded(this.hass, platform);
return html`
<div class="form">
<paper-icon-item
.disabled=${!isLoaded}
@click=${this._platformPicked}
@keydown=${this._handleEnter}
.platform=${platform}
dialogInitialFocus
>
<ha-svg-icon
slot="item-icon"
.path=${domainIcon(platform)}
></ha-svg-icon>
<span class="item-text">
${this.hass.localize(
`ui.panel.config.helpers.types.${platform}`
) || platform}
</span>
</paper-icon-item>
${!isLoaded
? html`
<paper-tooltip animation-delay="0"
>${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
"platform",
platform
)}</paper-tooltip
>
`
: ""}
</div>
<mwc-list-item
.disabled=${!isLoaded}
.platform=${platform}
@click=${this._platformPicked}
@keydown=${this._handleEnter}
dialogInitialFocus
graphic="icon"
>
<ha-svg-icon
slot="graphic"
.path=${domainIcon(platform)}
></ha-svg-icon>
<span class="item-text">
${this.hass.localize(
`ui.panel.config.helpers.types.${platform}`
) || platform}
</span>
</mwc-list-item>
${!isLoaded
? html`
<paper-tooltip animation-delay="0"
>${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
"platform",
platform
)}</paper-tooltip
>
`
: ""}
`;
})}
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
@ -208,9 +207,6 @@ export class DialogHelperDetail extends LitElement {
ha-dialog.button-left {
--justify-action-buttons: flex-start;
}
paper-icon-item {
cursor: pointer;
}
`,
];
}

42
src/panels/config/helpers/forms/ha-counter-form.ts
View File

@ -1,9 +1,9 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import type { HaSwitch } from "../../../../components/ha-switch";
import { Counter } from "../../../../data/counter";
import { haStyle } from "../../../../resources/styles";
@ -68,10 +68,10 @@ class HaCounterForm extends LitElement {
return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
@ -80,7 +80,7 @@ class HaCounterForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -89,44 +89,44 @@ class HaCounterForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-picker>
<paper-input
<ha-textfield
.value=${this._minimum}
.configValue=${"minimum"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.minimum"
)}
></paper-input>
<paper-input
></ha-textfield>
<ha-textfield
.value=${this._maximum}
.configValue=${"maximum"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.maximum"
)}
></paper-input>
<paper-input
></ha-textfield>
<ha-textfield
.value=${this._initial}
.configValue=${"initial"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.initial"
)}
></paper-input>
></ha-textfield>
${this.hass.userData?.showAdvanced
? html`
<paper-input
<ha-textfield
.value=${this._step}
.configValue=${"step"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.step"
)}
></paper-input>
></ha-textfield>
<div class="row">
<ha-switch
.checked=${this._restore}
@ -155,12 +155,12 @@ class HaCounterForm extends LitElement {
const configValue = target.configValue;
const value =
target.type === "number"
? ev.detail.value !== ""
? Number(ev.detail.value)
? target.value !== ""
? Number(target.value)
: undefined
: target.localName === "ha-switch"
? (ev.target as HaSwitch).checked
: ev.detail.value;
: ev.detail?.value || target.value;
if (this[`_${configValue}`] === value) {
return;
}
@ -192,6 +192,10 @@ class HaCounterForm extends LitElement {
.row div {
margin-left: 16px;
}
ha-textfield {
display: block;
margin: 8px 0;
}
`,
];
}

16
src/panels/config/helpers/forms/ha-input_boolean-form.ts
View File

@ -1,8 +1,8 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { InputBoolean } from "../../../../data/input_boolean";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -46,10 +46,10 @@ class HaInputBooleanForm extends LitElement {
return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
@ -58,7 +58,7 @@ class HaInputBooleanForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -77,7 +77,7 @@ class HaInputBooleanForm extends LitElement {
}
ev.stopPropagation();
const configValue = (ev.target as any).configValue;
const value = ev.detail.value;
const value = ev.detail?.value || (ev.target as any).value;
if (this[`_${configValue}`] === value) {
return;
}
@ -85,7 +85,7 @@ class HaInputBooleanForm extends LitElement {
if (!value) {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
@ -102,6 +102,10 @@ class HaInputBooleanForm extends LitElement {
.row {
padding: 16px 0;
}
ha-textfield {
display: block;
margin: 8px 0;
}
`,
];
}

16
src/panels/config/helpers/forms/ha-input_button-form.ts
View File

@ -1,8 +1,8 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { InputButton } from "../../../../data/input_button";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -46,10 +46,10 @@ class HaInputButtonForm extends LitElement {
return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
@ -58,7 +58,7 @@ class HaInputButtonForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -77,7 +77,7 @@ class HaInputButtonForm extends LitElement {
}
ev.stopPropagation();
const configValue = (ev.target as any).configValue;
const value = ev.detail.value;
const value = ev.detail?.value || (ev.target as any).value;
if (this[`_${configValue}`] === value) {
return;
}
@ -85,7 +85,7 @@ class HaInputButtonForm extends LitElement {
if (!value) {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
@ -102,6 +102,10 @@ class HaInputButtonForm extends LitElement {
.row {
padding: 16px 0;
}
ha-textfield {
display: block;
margin: 8px 0;
}
`,
];
}

16
src/panels/config/helpers/forms/ha-input_datetime-form.ts
View File

@ -1,10 +1,10 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import type { HaRadio } from "../../../../components/ha-radio";
import { InputDateTime } from "../../../../data/input_datetime";
import { haStyle } from "../../../../resources/styles";
@ -60,10 +60,10 @@ class HaInputDateTimeForm extends LitElement {
return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
@ -72,7 +72,7 @@ class HaInputDateTimeForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -142,7 +142,7 @@ class HaInputDateTimeForm extends LitElement {
}
ev.stopPropagation();
const configValue = (ev.target as any).configValue;
const value = ev.detail.value;
const value = ev.detail?.value || (ev.target as any).value;
if (this[`_${configValue}`] === value) {
return;
}
@ -150,7 +150,7 @@ class HaInputDateTimeForm extends LitElement {
if (!value) {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
@ -167,6 +167,10 @@ class HaInputDateTimeForm extends LitElement {
.row {
padding: 16px 0;
}
ha-textfield {
display: block;
margin: 8px 0;
}
`,
];
}

46
src/panels/config/helpers/forms/ha-input_number-form.ts
View File

@ -1,8 +1,8 @@
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { InputNumber } from "../../../../data/input_number";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -73,10 +73,10 @@ class HaInputNumberForm extends LitElement {
return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
@ -85,7 +85,7 @@ class HaInputNumberForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -94,24 +94,24 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-picker>
<paper-input
<ha-textfield
.value=${this._min}
.configValue=${"min"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.min"
)}
></paper-input>
<paper-input
></ha-textfield>
<ha-textfield
.value=${this._max}
.configValue=${"max"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.max"
)}
></paper-input>
></ha-textfield>
${this.hass.userData?.showAdvanced
? html`
<div class="layout horizontal center justified">
@ -143,24 +143,24 @@ class HaInputNumberForm extends LitElement {
></ha-radio>
</ha-formfield>
</div>
<paper-input
<ha-textfield
.value=${this._step}
.configValue=${"step"}
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.step"
)}
></paper-input>
></ha-textfield>
<paper-input
.value=${this._unit_of_measurement}
<ha-textfield
.value=${this._unit_of_measurement || ""}
.configValue=${"unit_of_measurement"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.unit_of_measurement"
)}
></paper-input>
></ha-textfield>
`
: ""}
</div>
@ -181,7 +181,10 @@ class HaInputNumberForm extends LitElement {
const target = ev.target as any;
const configValue = target.configValue;
const value =
target.type === "number" ? Number(ev.detail.value) : ev.detail.value;
target.type === "number"
? Number(target.value)
: ev.detail?.value || target.value;
if (this[`_${configValue}`] === value) {
return;
}
@ -189,7 +192,7 @@ class HaInputNumberForm extends LitElement {
if (value === undefined || value === "") {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
@ -203,6 +206,11 @@ class HaInputNumberForm extends LitElement {
.form {
color: var(--primary-text-color);
}
ha-textfield {
display: block;
margin-bottom: 8px;
}
`,
];
}

59
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@ -1,14 +1,13 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import { mdiDelete } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import type { InputSelect } from "../../../../data/input_select";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
@ -28,7 +27,7 @@ class HaInputSelectForm extends LitElement {
@state() private _options: string[] = [];
@query("#option_input", true) private _optionInput?: PaperInputElement;
@query("#option_input", true) private _optionInput?: HaTextField;
set item(item: InputSelect) {
this._item = item;
@ -59,19 +58,19 @@ class HaInputSelectForm extends LitElement {
return html`
<div class="form">
<paper-input
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
<ha-textfield
dialogInitialFocus
.errorMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg"
)}
.value=${this._name}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
.configValue=${"name"}
@input=${this._valueChanged}
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -86,9 +85,10 @@ class HaInputSelectForm extends LitElement {
${this._options.length
? this._options.map(
(option, index) => html`
<paper-item class="option">
<paper-item-body> ${option} </paper-item-body>
<mwc-list-item class="option" hasMeta noninteractive>
${option}
<ha-icon-button
slot="meta"
.index=${index}
.label=${this.hass.localize(
"ui.dialogs.helper_settings.input_select.remove_option"
@ -96,25 +96,25 @@ class HaInputSelectForm extends LitElement {
@click=${this._removeOption}
.path=${mdiDelete}
></ha-icon-button>
</paper-item>
</mwc-list-item>
`
)
: html`
<paper-item>
<mwc-list-item noninteractive>
${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.no_options"
)}
</paper-item>
</mwc-list-item>
`}
<div class="layout horizontal bottom">
<paper-input
<div class="layout horizontal center">
<ha-textfield
class="flex-auto"
id="option_input"
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.add_option"
)}
@keydown=${this._handleKeyAdd}
></paper-input>
></ha-textfield>
<mwc-button @click=${this._addOption}
>${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.add"
@ -135,7 +135,7 @@ class HaInputSelectForm extends LitElement {
private _addOption() {
const input = this._optionInput;
if (!input || !input.value) {
if (!input?.value) {
return;
}
fireEvent(this, "value-changed", {
@ -167,7 +167,8 @@ class HaInputSelectForm extends LitElement {
}
ev.stopPropagation();
const configValue = (ev.target as any).configValue;
const value = ev.detail.value;
const value = ev.detail?.value || (ev.target as any).value;
if (this[`_${configValue}`] === value) {
return;
}
@ -175,7 +176,7 @@ class HaInputSelectForm extends LitElement {
if (!value) {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
@ -193,10 +194,18 @@ class HaInputSelectForm extends LitElement {
border: 1px solid var(--divider-color);
border-radius: 4px;
margin-top: 4px;
--mdc-icon-button-size: 24px;
}
mwc-button {
margin-left: 8px;
}
ha-textfield {
display: block;
margin-bottom: 8px;
}
#option_input {
margin-top: 8px;
}
`,
];
}

37
src/panels/config/helpers/forms/ha-input_text-form.ts
View File

@ -1,8 +1,9 @@
import "@polymer/paper-input/paper-input";
import "../../../../components/ha-form/ha-form";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import type { HaRadio } from "../../../../components/ha-radio";
import { InputText } from "../../../../data/input_text";
import { haStyle } from "../../../../resources/styles";
@ -64,10 +65,10 @@ class HaInputTextForm extends LitElement {
return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
@ -76,7 +77,7 @@ class HaInputTextForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -87,28 +88,28 @@ class HaInputTextForm extends LitElement {
></ha-icon-picker>
${this.hass.userData?.showAdvanced
? html`
<paper-input
<ha-textfield
.value=${this._min}
.configValue=${"min"}
type="number"
min="0"
max="255"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.min"
)}
></paper-input>
<paper-input
></ha-textfield>
<ha-textfield
.value=${this._max}
.configValue=${"max"}
min="0"
max="255"
type="number"
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.max"
)}
></paper-input>
></ha-textfield>
<div class="layout horizontal center justified">
${this.hass.localize(
"ui.dialogs.helper_settings.input_text.mode"
@ -138,14 +139,14 @@ class HaInputTextForm extends LitElement {
></ha-radio>
</ha-formfield>
</div>
<paper-input
.value=${this._pattern}
<ha-textfield
.value=${this._pattern || ""}
.configValue=${"pattern"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.pattern"
)}
></paper-input>
></ha-textfield>
`
: ""}
</div>
@ -164,7 +165,7 @@ class HaInputTextForm extends LitElement {
}
ev.stopPropagation();
const configValue = (ev.target as any).configValue;
const value = ev.detail.value;
const value = ev.detail?.value || (ev.target as any).value;
if (this[`_${configValue}`] === value) {
return;
}
@ -172,7 +173,7 @@ class HaInputTextForm extends LitElement {
if (!value) {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
@ -189,6 +190,10 @@ class HaInputTextForm extends LitElement {
.row {
padding: 16px 0;
}
ha-textfield {
display: block;
margin: 8px 0;
}
`,
];
}

21
src/panels/config/helpers/forms/ha-timer-form.ts
View File

@ -2,6 +2,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { DurationDict, Timer } from "../../../../data/timer";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -49,10 +50,10 @@ class HaTimerForm extends LitElement {
return html`
<div class="form">
<paper-input
<ha-textfield
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
@ -61,7 +62,7 @@ class HaTimerForm extends LitElement {
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@ -70,14 +71,14 @@ class HaTimerForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-picker>
<paper-input
<ha-textfield
.configValue=${"duration"}
.value=${this._duration}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass.localize(
"ui.dialogs.helper_settings.timer.duration"
)}
></paper-input>
></ha-textfield>
</div>
`;
}
@ -88,7 +89,7 @@ class HaTimerForm extends LitElement {
}
ev.stopPropagation();
const configValue = (ev.target as any).configValue;
const value = ev.detail.value;
const value = ev.detail?.value || (ev.target as any).value;
if (this[`_${configValue}`] === value) {
return;
}
@ -96,7 +97,7 @@ class HaTimerForm extends LitElement {
if (!value) {
delete newValue[configValue];
} else {
newValue[configValue] = ev.detail.value;
newValue[configValue] = value;
}
fireEvent(this, "value-changed", {
value: newValue,
@ -110,6 +111,10 @@ class HaTimerForm extends LitElement {
.form {
color: var(--primary-text-color);
}
ha-textfield {
display: block;
margin: 8px 0;
}
`,
];
}