github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Migrate single textfields (#11799) 

* Migrate single textfields

* Update ha-config-name-form.ts

* Update dialog-area-registry-detail.ts

* Update manual-automation-editor.ts

* Update manual-automation-editor.ts

* required to number selector fix script

* review
This commit is contained in:
Bram Kragten 2022-02-23 17:27:03 +01:00 committed by GitHub
parent 5d8b3227f3
commit 430b47fc4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 103 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ha-selector/ha-selector-number.ts
View File

@ -19,6 +19,8 @@ export class HaNumberSelector extends LitElement {
@property() public label?: string;
@property({ type: Boolean }) public required = true;
@property({ type: Boolean }) public disabled = false;
protected render() {
@ -29,6 +31,7 @@ export class HaNumberSelector extends LitElement {
.value=${this._value}
.step=${this.selector.number.step ?? 1}
.disabled=${this.disabled}
.required=${this.required}
pin
ignore-bar-touch
@change=${this._handleSliderChange}
@ -43,9 +46,10 @@ export class HaNumberSelector extends LitElement {
class=${classMap({ single: this.selector.number.mode === "box" })}
.min=${this.selector.number.min}
.max=${this.selector.number.max}
.value=${this.value}
.value=${this.value || ""}
.step=${this.selector.number.step ?? 1}
.disabled=${this.disabled}
.required=${this.required}
.suffix=${this.selector.number.unit_of_measurement}
type="number"
autoValidate
@ -56,14 +60,16 @@ export class HaNumberSelector extends LitElement {
}
private get _value() {
return this.value ?? 0;
return this.value ?? (this.selector.number.min || 0);
}
private _handleInputChange(ev) {
ev.stopPropagation();
const value =
ev.target.value === "" || isNaN(ev.target.value)
? undefined
? this.required
? this.selector.number.min || 0
: undefined
: Number(ev.target.value);
if (this.value === value) {
return;

25
src/panels/config/areas/dialog-area-registry-detail.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-alert";
import "../../../components/ha-textfield";
import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
@ -69,7 +69,7 @@ class DialogAreaDetail extends LitElement {
>
<div>
${this._error
? html` <ha-alert alert-type="error">${this._error}</ha-alert> `
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<div class="form">
${entry
@ -83,17 +83,16 @@ class DialogAreaDetail extends LitElement {
`
: ""}
<paper-input
<ha-textfield
.value=${this._name}
@value-changed=${this._nameChanged}
@keyup=${this._handleKeyup}
@input=${this._nameChanged}
.label=${this.hass.localize("ui.panel.config.areas.editor.name")}
.errorMessage=${this.hass.localize(
"ui.panel.config.areas.editor.name_required"
)}
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-picture-upload
.hass=${this.hass}
.value=${this._picture}
@ -132,15 +131,9 @@ class DialogAreaDetail extends LitElement {
return this._name.trim() !== "";
}
private _handleKeyup(ev: KeyboardEvent) {
if (ev.keyCode === 13 && this._isNameValid() && !this._submitting) {
this._updateEntry();
}
}
private _nameChanged(ev: PolymerChangedEvent<string>) {
private _nameChanged(ev) {
this._error = undefined;
this._name = ev.detail.value;
this._name = ev.target.value;
}
private _pictureChanged(ev: PolymerChangedEvent<string | null>) {
@ -188,6 +181,10 @@ class DialogAreaDetail extends LitElement {
.form {
padding-bottom: 24px;
}
ha-textfield {
display: block;
margin-bottom: 16px;
}
`,
];
}

11
src/panels/config/automation/manual-automation-editor.ts
View File

@ -99,7 +99,7 @@ export class HaManualAutomationEditor extends LitElement {
.label=${this.hass.localize(
"ui.panel.config.automation.editor.modes.label"
)}
.value=${this.config.mode ? MODES.indexOf(this.config.mode) : 0}
.value=${this.config.mode}
@selected=${this._modeChanged}
fixedMenuPosition
>
@ -115,7 +115,7 @@ export class HaManualAutomationEditor extends LitElement {
</mwc-select>
${this.config.mode && MODES_MAX.includes(this.config.mode)
? html`
<ha-textfield
<br /><ha-textfield
.label=${this.hass.localize(
`ui.panel.config.automation.editor.max.${this.config.mode}`
)}
@ -123,6 +123,7 @@ export class HaManualAutomationEditor extends LitElement {
name="max"
.value=${this.config.max || "10"}
@change=${this._valueChanged}
class="max"
>
</ha-textfield>
`
@ -357,8 +358,10 @@ export class HaManualAutomationEditor extends LitElement {
ha-entity-toggle {
margin-right: 8px;
}
mwc-select {
margin-top: 8px;
mwc-select,
.max {
margin-top: 16px;
width: 200px;
}
`,
];

34
src/panels/config/blueprint/dialog-import-blueprint.ts
View File

@ -1,13 +1,13 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-markdown";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
import {
BlueprintImportResult,
importBlueprint,
@ -32,7 +32,7 @@ class DialogImportBlueprint extends LitElement {
@state() private _url?: string;
@query("#input") private _input?: PaperInputElement;
@query("#input") private _input?: HaTextField;
public showDialog(params): void {
this._params = params;
@ -90,13 +90,13 @@ class DialogImportBlueprint extends LitElement {
</ul>
`
: html`
<paper-input
<ha-textfield
id="input"
.value=${this._result.suggested_filename}
.value=${this._result.suggested_filename || ""}
.label=${this.hass.localize(
"ui.panel.config.blueprint.add.file_name"
)}
></paper-input>
></ha-textfield>
`}
<ha-expansion-panel
.header=${this.hass.localize(
@ -116,14 +116,14 @@ class DialogImportBlueprint extends LitElement {
"ui.panel.config.blueprint.add.community_forums"
)}</a
>`
)}<paper-input
)}<ha-textfield
id="input"
.label=${this.hass.localize(
"ui.panel.config.blueprint.add.url"
)}
.value=${this._url}
.value=${this._url || ""}
dialogInitialFocus
></paper-input>`}
></ha-textfield>`}
</div>
${!this._result
? html`<mwc-button
@ -212,9 +212,15 @@ class DialogImportBlueprint extends LitElement {
}
}
static get styles(): CSSResultGroup {
return haStyleDialog;
}
static styles = [
haStyleDialog,
css`
ha-textfield {
display: block;
margin-top: 8px;
}
`,
];
}
declare global {

21
src/panels/config/core/ha-config-name-form.ts
View File

@ -1,12 +1,11 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-card";
import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
@customElement("ha-config-name-form")
class ConfigNameForm extends LitElement {
@ -34,16 +33,15 @@ class ConfigNameForm extends LitElement {
</p>
`
: ""}
<paper-input
<ha-textfield
class="flex"
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.location_name"
)}
name="name"
.disabled=${disabled}
.value=${this._nameValue}
@value-changed=${this._handleChange}
></paper-input>
@changed=${this._handleChange}
></ha-textfield>
</div>
<div class="card-actions">
<mwc-button @click=${this._save} .disabled=${disabled}>
@ -62,9 +60,9 @@ class ConfigNameForm extends LitElement {
: this.hass.config.location_name;
}
private _handleChange(ev: PolymerChangedEvent<string>) {
const target = ev.currentTarget as PaperInputElement;
this[`_${target.name}`] = target.value;
private _handleChange(ev) {
const target = ev.currentTarget as HaTextField;
this._name = target.value;
}
private async _save() {
@ -85,6 +83,9 @@ class ConfigNameForm extends LitElement {
.card-actions {
text-align: right;
}
ha-textfield {
display: block;
}
`;
}
}

22
src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
View File

@ -1,13 +1,12 @@
import "@material/mwc-button/mwc-button";
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-area-picker";
import "../../../../components/ha-dialog";
import type { HaSwitch } from "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import { computeDeviceName } from "../../../../data/device_registry";
import { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail";
@ -57,16 +56,18 @@ class DialogDeviceRegistryDetail extends LitElement {
.heading=${computeDeviceName(device, this.hass)}
>
<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">
<paper-input
<ha-textfield
.value=${this._nameByUser}
@value-changed=${this._nameChanged}
@input=${this._nameChanged}
.label=${this.hass.localize("ui.panel.config.devices.name")}
.placeholder=${device.name || ""}
.disabled=${this._submitting}
dialogInitialFocus
></paper-input>
></ha-textfield>
<ha-area-picker
.hass=${this.hass}
.value=${this._areaId}
@ -132,9 +133,9 @@ class DialogDeviceRegistryDetail extends LitElement {
`;
}
private _nameChanged(ev: PolymerChangedEvent<string>): void {
private _nameChanged(ev): void {
this._error = undefined;
this._nameByUser = ev.detail.value;
this._nameByUser = ev.target.value;
}
private _areaPicked(event: CustomEvent): void {
@ -174,8 +175,9 @@ class DialogDeviceRegistryDetail extends LitElement {
mwc-button.warning {
margin-right: auto;
}
.error {
color: var(--error-color);
ha-textfield {
display: block;
margin-bottom: 16px;
}
ha-switch {
margin-right: 16px;

15
src/panels/config/person/dialog-person-detail.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -7,6 +6,7 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/entity/ha-entities-picker";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
import "../../../components/ha-textfield";
import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import { adminChangePassword } from "../../../data/auth";
@ -120,17 +120,17 @@ class DialogPersonDetail extends LitElement {
<div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
<div class="form">
<paper-input
<ha-textfield
dialogInitialFocus
.value=${this._name}
@value-changed=${this._nameChanged}
@input=${this._nameChanged}
label=${this.hass!.localize("ui.panel.config.person.detail.name")}
error-message=${this.hass!.localize(
"ui.panel.config.person.detail.name_error_msg"
)}
required
auto-validate
></paper-input>
></ha-textfield>
<ha-picture-upload
.hass=${this.hass}
.value=${this._picture}
@ -277,9 +277,9 @@ class DialogPersonDetail extends LitElement {
this._params = undefined;
}
private _nameChanged(ev: PolymerChangedEvent<string>) {
private _nameChanged(ev) {
this._error = undefined;
this._name = ev.detail.value;
this._name = ev.target.value;
}
private _adminChanged(ev): void {
@ -460,7 +460,8 @@ class DialogPersonDetail extends LitElement {
.form {
padding-bottom: 24px;
}
ha-picture-upload {
ha-picture-upload,
ha-textfield {
display: block;
}
ha-formfield {

7
src/panels/config/script/ha-script-editor.ts
View File

@ -136,10 +136,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
if (currentMode && MODES_MAX.includes(currentMode)) {
schema.push({
name: "max",
required: true,
selector: {
text: {
type: "number",
},
number: { mode: "box", min: 1, max: Infinity },
},
});
}
@ -161,11 +160,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
const data = {
mode: MODES[0],
icon: undefined,
max:
this._config.mode && MODES_MAX.includes(this._config.mode)
? 10
: undefined,
icon: undefined,
...this._config,
id: this._entityId,
};

26
src/panels/config/tags/dialog-tag-detail.ts
View File

@ -1,11 +1,12 @@
import "@material/mwc-button";
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-alert";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import { Tag, UpdateTagParams } from "../../../data/tag";
import { HassDialog } from "../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../resources/styles";
@ -71,7 +72,9 @@ class DialogTagDetail
)}
>
<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">
${this._params.entry
? html`${this.hass!.localize(
@ -79,30 +82,30 @@ class DialogTagDetail
)}:
${this._params.entry.id}`
: ""}
<paper-input
<ha-textfield
dialogInitialFocus
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize("ui.panel.config.tag.detail.name")}
.errorMessage=${this.hass!.localize(
"ui.panel.config.tag.detail.required_error_msg"
)}
required
auto-validate
></paper-input>
></ha-textfield>
${!this._params.entry
? html` <paper-input
? html`<ha-textfield
.value=${this._id}
.configValue=${"id"}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
.label=${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id"
)}
.placeholder=${this.hass!.localize(
"ui.panel.config.tag.detail.tag_id_placeholder"
)}
></paper-input>`
></ha-textfield>`
: ""}
</div>
${this._params.entry
@ -165,11 +168,12 @@ class DialogTagDetail
`;
}
private _valueChanged(ev: CustomEvent) {
const configValue = (ev.target as any).configValue;
private _valueChanged(ev: Event) {
const target = ev.target as any;
const configValue = target.configValue;
this._error = undefined;
this[`_${configValue}`] = ev.detail.value;
this[`_${configValue}`] = target.value;
}
private async _updateEntry() {

13
src/panels/config/users/dialog-user-detail.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-tooltip/paper-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -11,6 +10,7 @@ import "../../../components/ha-help-tooltip";
import "../../../components/ha-chip-set";
import "../../../components/ha-chip";
import "../../../components/ha-svg-icon";
import "../../../components/ha-textfield";
import "../../../components/ha-switch";
import { adminChangePassword } from "../../../data/auth";
import {
@ -92,13 +92,13 @@ class DialogUserDetail extends LitElement {
</ha-chip-set>
`}
<div class="form">
<paper-input
<ha-textfield
dialogInitialFocus
.value=${this._name}
.disabled=${user.system_generated}
@value-changed=${this._nameChanged}
label=${this.hass!.localize("ui.panel.config.users.editor.name")}
></paper-input>
@input=${this._nameChanged}
.label=${this.hass!.localize("ui.panel.config.users.editor.name")}
></ha-textfield>
<div class="row">
<ha-formfield
.label=${this.hass.localize(
@ -322,7 +322,8 @@ class DialogUserDetail extends LitElement {
.secondary {
color: var(--secondary-text-color);
}
ha-chip-set {
ha-chip-set,
ha-textfield {
display: block;
}
.state {