jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 22:07:20 +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 { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
import "../../../components/ha-area-picker"; import "../../../components/ha-area-picker";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaSwitch } from "../../../components/ha-switch"; import type { HaSwitch } from "../../../components/ha-switch";
import { import {
DeviceRegistryEntry, DeviceRegistryEntry,
@ -17,7 +17,6 @@ import {
} from "../../../data/entity_registry"; } from "../../../data/entity_registry";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
@customElement("ha-registry-basic-editor") @customElement("ha-registry-basic-editor")
@ -123,16 +122,16 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
computeDomain(this.entry.entity_id); computeDomain(this.entry.entity_id);
return html` return html`
<paper-input <ha-textfield
error-message="Domain needs to stay the same"
.value=${this._entityId} .value=${this._entityId}
@value-changed=${this._entityIdChanged}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_id" "ui.dialogs.entity_registry.editor.entity_id"
)} )}
error-message="Domain needs to stay the same"
.invalid=${invalidDomainUpdate} .invalid=${invalidDomainUpdate}
.disabled=${this._submitting} .disabled=${this._submitting}
></paper-input> @input=${this._entityIdChanged}
></ha-textfield>
<ha-area-picker <ha-area-picker
.hass=${this.hass} .hass=${this.hass}
.value=${this._areaId} .value=${this._areaId}
@ -177,8 +176,8 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
this._areaId = ev.detail.value; this._areaId = ev.detail.value;
} }
private _entityIdChanged(ev: PolymerChangedEvent<string>): void { private _entityIdChanged(ev): void {
this._entityId = ev.detail.value; this._entityId = ev.target.value;
} }
private _disabledByChanged(ev: Event): void { private _disabledByChanged(ev: Event): void {
@ -199,6 +198,10 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
.secondary { .secondary {
color: var(--secondary-text-color); 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-button/mwc-button";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select"; import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { import {
css, css,
@ -19,6 +19,7 @@ import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel"; import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-picker"; import "../../../components/ha-icon-picker";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaSwitch } from "../../../components/ha-switch"; import type { HaSwitch } from "../../../components/ha-switch";
import { import {
DeviceRegistryEntry, DeviceRegistryEntry,
@ -36,7 +37,6 @@ import {
showConfirmationDialog, showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box"; } from "../../../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { PolymerChangedEvent } from "../../../polymer-types";
import { haStyle } from "../../../resources/styles"; import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail"; import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
@ -137,15 +137,18 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
</div> </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"> <div class="form container">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
@value-changed=${this._nameChanged}
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")} .label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")}
.placeholder=${this.entry.original_name} .invalid=${invalidDomainUpdate}
.disabled=${this._submitting} .disabled=${this._submitting}
></paper-input> .placeholder=${this.entry.original_name}
@input=${this._nameChanged}
></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
@value-changed=${this._iconChanged} @value-changed=${this._iconChanged}
@ -176,16 +179,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
)} )}
</mwc-select>` </mwc-select>`
: ""} : ""}
<paper-input <ha-textfield
error-message="Domain needs to stay the same"
.value=${this._entityId} .value=${this._entityId}
@value-changed=${this._entityIdChanged}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_id" "ui.dialogs.entity_registry.editor.entity_id"
)} )}
error-message="Domain needs to stay the same"
.invalid=${invalidDomainUpdate} .invalid=${invalidDomainUpdate}
.disabled=${this._submitting} .disabled=${this._submitting}
></paper-input> @input=${this._entityIdChanged}
></ha-textfield>
${!this.entry.device_id ${!this.entry.device_id
? html`<ha-area-picker ? html`<ha-area-picker
.hass=${this.hass} .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._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._error = undefined;
this._icon = ev.detail.value; this._icon = ev.detail.value;
} }
private _entityIdChanged(ev: PolymerChangedEvent<string>): void { private _entityIdChanged(ev): void {
this._error = undefined; this._error = undefined;
this._entityId = ev.detail.value; this._entityId = ev.target.value;
} }
private _deviceClassChanged(ev): void { private _deviceClassChanged(ev): void {
@ -423,6 +426,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
ha-switch { ha-switch {
margin-right: 16px; margin-right: 16px;
} }
ha-textfield {
display: block;
margin: 8px 0;
}
.row { .row {
margin: 8px 0; margin: 8px 0;
color: var(--primary-text-color); 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) => { ${Object.keys(HELPERS).map((platform: string) => {
const isLoaded = isComponentLoaded(this.hass, platform); const isLoaded = isComponentLoaded(this.hass, platform);
return html` return html`
<div class="form"> <mwc-list-item
<paper-icon-item .disabled=${!isLoaded}
.disabled=${!isLoaded} .platform=${platform}
@click=${this._platformPicked} @click=${this._platformPicked}
@keydown=${this._handleEnter} @keydown=${this._handleEnter}
.platform=${platform} dialogInitialFocus
dialogInitialFocus graphic="icon"
> >
<ha-svg-icon <ha-svg-icon
slot="item-icon" slot="graphic"
.path=${domainIcon(platform)} .path=${domainIcon(platform)}
></ha-svg-icon> ></ha-svg-icon>
<span class="item-text"> <span class="item-text">
${this.hass.localize( ${this.hass.localize(
`ui.panel.config.helpers.types.${platform}` `ui.panel.config.helpers.types.${platform}`
) || platform} ) || platform}
</span> </span>
</paper-icon-item> </mwc-list-item>
${!isLoaded ${!isLoaded
? html` ? html`
<paper-tooltip animation-delay="0" <paper-tooltip animation-delay="0"
>${this.hass.localize( >${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded", "ui.dialogs.helper_settings.platform_not_loaded",
"platform", "platform",
platform platform
)}</paper-tooltip )}</paper-tooltip
> >
` `
: ""} : ""}
</div>
`; `;
})} })}
<mwc-button slot="primaryAction" @click=${this.closeDialog}> <mwc-button slot="primaryAction" @click=${this.closeDialog}>
@ -208,9 +207,6 @@ export class DialogHelperDetail extends LitElement {
ha-dialog.button-left { ha-dialog.button-left {
--justify-action-buttons: flex-start; --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 { css, CSSResultGroup, html, LitElement, TemplateResult } 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-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch"; import "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import type { HaSwitch } from "../../../../components/ha-switch"; import type { HaSwitch } from "../../../../components/ha-switch";
import { Counter } from "../../../../data/counter"; import { Counter } from "../../../../data/counter";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
@ -68,10 +68,10 @@ class HaCounterForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name" "ui.dialogs.helper_settings.generic.name"
)} )}
@ -80,7 +80,7 @@ class HaCounterForm extends LitElement {
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -89,44 +89,44 @@ class HaCounterForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon" "ui.dialogs.helper_settings.generic.icon"
)} )}
></ha-icon-picker> ></ha-icon-picker>
<paper-input <ha-textfield
.value=${this._minimum} .value=${this._minimum}
.configValue=${"minimum"} .configValue=${"minimum"}
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.minimum" "ui.dialogs.helper_settings.counter.minimum"
)} )}
></paper-input> ></ha-textfield>
<paper-input <ha-textfield
.value=${this._maximum} .value=${this._maximum}
.configValue=${"maximum"} .configValue=${"maximum"}
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.maximum" "ui.dialogs.helper_settings.counter.maximum"
)} )}
></paper-input> ></ha-textfield>
<paper-input <ha-textfield
.value=${this._initial} .value=${this._initial}
.configValue=${"initial"} .configValue=${"initial"}
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.initial" "ui.dialogs.helper_settings.counter.initial"
)} )}
></paper-input> ></ha-textfield>
${this.hass.userData?.showAdvanced ${this.hass.userData?.showAdvanced
? html` ? html`
<paper-input <ha-textfield
.value=${this._step} .value=${this._step}
.configValue=${"step"} .configValue=${"step"}
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.counter.step" "ui.dialogs.helper_settings.counter.step"
)} )}
></paper-input> ></ha-textfield>
<div class="row"> <div class="row">
<ha-switch <ha-switch
.checked=${this._restore} .checked=${this._restore}
@ -155,12 +155,12 @@ class HaCounterForm extends LitElement {
const configValue = target.configValue; const configValue = target.configValue;
const value = const value =
target.type === "number" target.type === "number"
? ev.detail.value !== "" ? target.value !== ""
? Number(ev.detail.value) ? Number(target.value)
: undefined : undefined
: target.localName === "ha-switch" : target.localName === "ha-switch"
? (ev.target as HaSwitch).checked ? (ev.target as HaSwitch).checked
: ev.detail.value; : ev.detail?.value || target.value;
if (this[`_${configValue}`] === value) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -192,6 +192,10 @@ class HaCounterForm extends LitElement {
.row div { .row div {
margin-left: 16px; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } 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-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { InputBoolean } from "../../../../data/input_boolean"; import { InputBoolean } from "../../../../data/input_boolean";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
@ -46,10 +46,10 @@ class HaInputBooleanForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name" "ui.dialogs.helper_settings.generic.name"
)} )}
@ -58,7 +58,7 @@ class HaInputBooleanForm extends LitElement {
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -77,7 +77,7 @@ class HaInputBooleanForm extends LitElement {
} }
ev.stopPropagation(); ev.stopPropagation();
const configValue = (ev.target as any).configValue; 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) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -85,7 +85,7 @@ class HaInputBooleanForm extends LitElement {
if (!value) { if (!value) {
delete newValue[configValue]; delete newValue[configValue];
} else { } else {
newValue[configValue] = ev.detail.value; newValue[configValue] = value;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: newValue, value: newValue,
@ -102,6 +102,10 @@ class HaInputBooleanForm extends LitElement {
.row { .row {
padding: 16px 0; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } 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-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { InputButton } from "../../../../data/input_button"; import { InputButton } from "../../../../data/input_button";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
@ -46,10 +46,10 @@ class HaInputButtonForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name" "ui.dialogs.helper_settings.generic.name"
)} )}
@ -58,7 +58,7 @@ class HaInputButtonForm extends LitElement {
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -77,7 +77,7 @@ class HaInputButtonForm extends LitElement {
} }
ev.stopPropagation(); ev.stopPropagation();
const configValue = (ev.target as any).configValue; 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) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -85,7 +85,7 @@ class HaInputButtonForm extends LitElement {
if (!value) { if (!value) {
delete newValue[configValue]; delete newValue[configValue];
} else { } else {
newValue[configValue] = ev.detail.value; newValue[configValue] = value;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: newValue, value: newValue,
@ -102,6 +102,10 @@ class HaInputButtonForm extends LitElement {
.row { .row {
padding: 16px 0; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } 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-formfield"; import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-radio"; import "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import type { HaRadio } from "../../../../components/ha-radio"; import type { HaRadio } from "../../../../components/ha-radio";
import { InputDateTime } from "../../../../data/input_datetime"; import { InputDateTime } from "../../../../data/input_datetime";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
@ -60,10 +60,10 @@ class HaInputDateTimeForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name" "ui.dialogs.helper_settings.generic.name"
)} )}
@ -72,7 +72,7 @@ class HaInputDateTimeForm extends LitElement {
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -142,7 +142,7 @@ class HaInputDateTimeForm extends LitElement {
} }
ev.stopPropagation(); ev.stopPropagation();
const configValue = (ev.target as any).configValue; 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) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -150,7 +150,7 @@ class HaInputDateTimeForm extends LitElement {
if (!value) { if (!value) {
delete newValue[configValue]; delete newValue[configValue];
} else { } else {
newValue[configValue] = ev.detail.value; newValue[configValue] = value;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: newValue, value: newValue,
@ -167,6 +167,10 @@ class HaInputDateTimeForm extends LitElement {
.row { .row {
padding: 16px 0; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } 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-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { InputNumber } from "../../../../data/input_number"; import { InputNumber } from "../../../../data/input_number";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
@ -73,10 +73,10 @@ class HaInputNumberForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name" "ui.dialogs.helper_settings.generic.name"
)} )}
@ -85,7 +85,7 @@ class HaInputNumberForm extends LitElement {
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -94,24 +94,24 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon" "ui.dialogs.helper_settings.generic.icon"
)} )}
></ha-icon-picker> ></ha-icon-picker>
<paper-input <ha-textfield
.value=${this._min} .value=${this._min}
.configValue=${"min"} .configValue=${"min"}
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.min" "ui.dialogs.helper_settings.input_number.min"
)} )}
></paper-input> ></ha-textfield>
<paper-input <ha-textfield
.value=${this._max} .value=${this._max}
.configValue=${"max"} .configValue=${"max"}
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.max" "ui.dialogs.helper_settings.input_number.max"
)} )}
></paper-input> ></ha-textfield>
${this.hass.userData?.showAdvanced ${this.hass.userData?.showAdvanced
? html` ? html`
<div class="layout horizontal center justified"> <div class="layout horizontal center justified">
@ -143,24 +143,24 @@ class HaInputNumberForm extends LitElement {
></ha-radio> ></ha-radio>
</ha-formfield> </ha-formfield>
</div> </div>
<paper-input <ha-textfield
.value=${this._step} .value=${this._step}
.configValue=${"step"} .configValue=${"step"}
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.step" "ui.dialogs.helper_settings.input_number.step"
)} )}
></paper-input> ></ha-textfield>
<paper-input <ha-textfield
.value=${this._unit_of_measurement} .value=${this._unit_of_measurement || ""}
.configValue=${"unit_of_measurement"} .configValue=${"unit_of_measurement"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_number.unit_of_measurement" "ui.dialogs.helper_settings.input_number.unit_of_measurement"
)} )}
></paper-input> ></ha-textfield>
` `
: ""} : ""}
</div> </div>
@ -181,7 +181,10 @@ class HaInputNumberForm extends LitElement {
const target = ev.target as any; const target = ev.target as any;
const configValue = target.configValue; const configValue = target.configValue;
const value = 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) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -189,7 +192,7 @@ class HaInputNumberForm extends LitElement {
if (value === undefined || value === "") { if (value === undefined || value === "") {
delete newValue[configValue]; delete newValue[configValue];
} else { } else {
newValue[configValue] = ev.detail.value; newValue[configValue] = value;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: newValue, value: newValue,
@ -203,6 +206,11 @@ class HaInputNumberForm extends LitElement {
.form { .form {
color: var(--primary-text-color); 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-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import { mdiDelete } from "@mdi/js"; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } 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 "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import type { InputSelect } from "../../../../data/input_select"; import type { InputSelect } from "../../../../data/input_select";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
@ -28,7 +27,7 @@ class HaInputSelectForm extends LitElement {
@state() private _options: string[] = []; @state() private _options: string[] = [];
@query("#option_input", true) private _optionInput?: PaperInputElement; @query("#option_input", true) private _optionInput?: HaTextField;
set item(item: InputSelect) { set item(item: InputSelect) {
this._item = item; this._item = item;
@ -59,19 +58,19 @@ class HaInputSelectForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} dialogInitialFocus
.configValue=${"name"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
.errorMessage=${this.hass!.localize( .errorMessage=${this.hass!.localize(
"ui.dialogs.helper_settings.required_error_msg" "ui.dialogs.helper_settings.required_error_msg"
)} )}
.value=${this._name}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name"
)}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus .configValue=${"name"}
></paper-input> @input=${this._valueChanged}
></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -86,9 +85,10 @@ class HaInputSelectForm extends LitElement {
${this._options.length ${this._options.length
? this._options.map( ? this._options.map(
(option, index) => html` (option, index) => html`
<paper-item class="option"> <mwc-list-item class="option" hasMeta noninteractive>
<paper-item-body> ${option} </paper-item-body> ${option}
<ha-icon-button <ha-icon-button
slot="meta"
.index=${index} .index=${index}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.helper_settings.input_select.remove_option" "ui.dialogs.helper_settings.input_select.remove_option"
@ -96,25 +96,25 @@ class HaInputSelectForm extends LitElement {
@click=${this._removeOption} @click=${this._removeOption}
.path=${mdiDelete} .path=${mdiDelete}
></ha-icon-button> ></ha-icon-button>
</paper-item> </mwc-list-item>
` `
) )
: html` : html`
<paper-item> <mwc-list-item noninteractive>
${this.hass!.localize( ${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.no_options" "ui.dialogs.helper_settings.input_select.no_options"
)} )}
</paper-item> </mwc-list-item>
`} `}
<div class="layout horizontal bottom"> <div class="layout horizontal center">
<paper-input <ha-textfield
class="flex-auto" class="flex-auto"
id="option_input" id="option_input"
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.add_option" "ui.dialogs.helper_settings.input_select.add_option"
)} )}
@keydown=${this._handleKeyAdd} @keydown=${this._handleKeyAdd}
></paper-input> ></ha-textfield>
<mwc-button @click=${this._addOption} <mwc-button @click=${this._addOption}
>${this.hass!.localize( >${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.add" "ui.dialogs.helper_settings.input_select.add"
@ -135,7 +135,7 @@ class HaInputSelectForm extends LitElement {
private _addOption() { private _addOption() {
const input = this._optionInput; const input = this._optionInput;
if (!input || !input.value) { if (!input?.value) {
return; return;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
@ -167,7 +167,8 @@ class HaInputSelectForm extends LitElement {
} }
ev.stopPropagation(); ev.stopPropagation();
const configValue = (ev.target as any).configValue; 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) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -175,7 +176,7 @@ class HaInputSelectForm extends LitElement {
if (!value) { if (!value) {
delete newValue[configValue]; delete newValue[configValue];
} else { } else {
newValue[configValue] = ev.detail.value; newValue[configValue] = value;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: newValue, value: newValue,
@ -193,10 +194,18 @@ class HaInputSelectForm extends LitElement {
border: 1px solid var(--divider-color); border: 1px solid var(--divider-color);
border-radius: 4px; border-radius: 4px;
margin-top: 4px; margin-top: 4px;
--mdc-icon-button-size: 24px;
} }
mwc-button { mwc-button {
margin-left: 8px; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } 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-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import type { HaRadio } from "../../../../components/ha-radio"; import type { HaRadio } from "../../../../components/ha-radio";
import { InputText } from "../../../../data/input_text"; import { InputText } from "../../../../data/input_text";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
@ -64,10 +65,10 @@ class HaInputTextForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name" "ui.dialogs.helper_settings.generic.name"
)} )}
@ -76,7 +77,7 @@ class HaInputTextForm extends LitElement {
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -87,28 +88,28 @@ class HaInputTextForm extends LitElement {
></ha-icon-picker> ></ha-icon-picker>
${this.hass.userData?.showAdvanced ${this.hass.userData?.showAdvanced
? html` ? html`
<paper-input <ha-textfield
.value=${this._min} .value=${this._min}
.configValue=${"min"} .configValue=${"min"}
type="number" type="number"
min="0" min="0"
max="255" max="255"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.min" "ui.dialogs.helper_settings.input_text.min"
)} )}
></paper-input> ></ha-textfield>
<paper-input <ha-textfield
.value=${this._max} .value=${this._max}
.configValue=${"max"} .configValue=${"max"}
min="0" min="0"
max="255" max="255"
type="number" type="number"
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.max" "ui.dialogs.helper_settings.input_text.max"
)} )}
></paper-input> ></ha-textfield>
<div class="layout horizontal center justified"> <div class="layout horizontal center justified">
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.helper_settings.input_text.mode" "ui.dialogs.helper_settings.input_text.mode"
@ -138,14 +139,14 @@ class HaInputTextForm extends LitElement {
></ha-radio> ></ha-radio>
</ha-formfield> </ha-formfield>
</div> </div>
<paper-input <ha-textfield
.value=${this._pattern} .value=${this._pattern || ""}
.configValue=${"pattern"} .configValue=${"pattern"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.input_text.pattern" "ui.dialogs.helper_settings.input_text.pattern"
)} )}
></paper-input> ></ha-textfield>
` `
: ""} : ""}
</div> </div>
@ -164,7 +165,7 @@ class HaInputTextForm extends LitElement {
} }
ev.stopPropagation(); ev.stopPropagation();
const configValue = (ev.target as any).configValue; 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) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -172,7 +173,7 @@ class HaInputTextForm extends LitElement {
if (!value) { if (!value) {
delete newValue[configValue]; delete newValue[configValue];
} else { } else {
newValue[configValue] = ev.detail.value; newValue[configValue] = value;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: newValue, value: newValue,
@ -189,6 +190,10 @@ class HaInputTextForm extends LitElement {
.row { .row {
padding: 16px 0; 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 { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
import "../../../../components/ha-textfield";
import { DurationDict, Timer } from "../../../../data/timer"; import { DurationDict, Timer } from "../../../../data/timer";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
@ -49,10 +50,10 @@ class HaTimerForm extends LitElement {
return html` return html`
<div class="form"> <div class="form">
<paper-input <ha-textfield
.value=${this._name} .value=${this._name}
.configValue=${"name"} .configValue=${"name"}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.name" "ui.dialogs.helper_settings.generic.name"
)} )}
@ -61,7 +62,7 @@ class HaTimerForm extends LitElement {
)} )}
.invalid=${nameInvalid} .invalid=${nameInvalid}
dialogInitialFocus dialogInitialFocus
></paper-input> ></ha-textfield>
<ha-icon-picker <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@ -70,14 +71,14 @@ class HaTimerForm extends LitElement {
"ui.dialogs.helper_settings.generic.icon" "ui.dialogs.helper_settings.generic.icon"
)} )}
></ha-icon-picker> ></ha-icon-picker>
<paper-input <ha-textfield
.configValue=${"duration"} .configValue=${"duration"}
.value=${this._duration} .value=${this._duration}
@value-changed=${this._valueChanged} @input=${this._valueChanged}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.helper_settings.timer.duration" "ui.dialogs.helper_settings.timer.duration"
)} )}
></paper-input> ></ha-textfield>
</div> </div>
`; `;
} }
@ -88,7 +89,7 @@ class HaTimerForm extends LitElement {
} }
ev.stopPropagation(); ev.stopPropagation();
const configValue = (ev.target as any).configValue; 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) { if (this[`_${configValue}`] === value) {
return; return;
} }
@ -96,7 +97,7 @@ class HaTimerForm extends LitElement {
if (!value) { if (!value) {
delete newValue[configValue]; delete newValue[configValue];
} else { } else {
newValue[configValue] = ev.detail.value; newValue[configValue] = value;
} }
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: newValue, value: newValue,
@ -110,6 +111,10 @@ class HaTimerForm extends LitElement {
.form { .form {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
ha-textfield {
display: block;
margin: 8px 0;
}
`, `,
]; ];
} }