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

Replace remaining paper inputs (#19292)

Browse Source
This commit is contained in:
Simon Lamon 2024-01-05 14:31:58 +01:00 committed by GitHub
parent 53be012b34
commit 7a8f5c0cc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 44 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
hassio/src/components/supervisor-backup-content.ts
View File

@ -1,6 +1,4 @@
import { mdiFolder, mdiPuzzle } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
CSSResultGroup,
LitElement,
@ -16,6 +14,7 @@ import { formatDateTime } from "../../../src/common/datetime/format_date_time";
import { LocalizeFunc } from "../../../src/common/translations/localize";
import "../../../src/components/ha-checkbox";
import "../../../src/components/ha-formfield";
import "../../../src/components/ha-textfield";
import "../../../src/components/ha-radio";
import type { HaRadio } from "../../../src/components/ha-radio";
import {
@ -25,12 +24,9 @@ import {
} from "../../../src/data/hassio/backup";
import { Supervisor } from "../../../src/data/supervisor/supervisor";
import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
import {
HomeAssistant,
TranslationDict,
ValueChangedEvent,
} from "../../../src/types";
import { HomeAssistant, TranslationDict } from "../../../src/types";
import "./supervisor-formfield-label";
import type { HaTextField } from "../../../src/components/ha-textfield";
type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
@ -100,7 +96,7 @@ export class SupervisorBackupContent extends LitElement {
@property() public confirmBackupPassword = "";
@query("paper-input, ha-radio, ha-checkbox", true) private _focusTarget;
@query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;
public willUpdate(changedProps) {
super.willUpdate(changedProps);
@ -151,13 +147,13 @@ export class SupervisorBackupContent extends LitElement {
)
: this.backup.date}
</div>`
: html`<paper-input
: html`<ha-textfield
name="backupName"
.label=${this._localize("name")}
.value=${this.backupName}
@value-changed=${this._handleTextValueChanged}
@change=${this._handleTextValueChanged}
>
</paper-input>`}
</ha-textfield>`}
${!this.backup || this.backup.type === "full"
? html`<div class="sub-header">
${!this.backup
@ -265,23 +261,23 @@ export class SupervisorBackupContent extends LitElement {
: ""}
${this.backupHasPassword
? html`
<paper-input
<ha-textfield
.label=${this._localize("password")}
type="password"
name="backupPassword"
.value=${this.backupPassword}
@value-changed=${this._handleTextValueChanged}
@change=${this._handleTextValueChanged}
>
</paper-input>
</ha-textfield>
${!this.backup
? html` <paper-input
? html`<ha-textfield
.label=${this._localize("confirm_password")}
type="password"
name="confirmBackupPassword"
.value=${this.confirmBackupPassword}
@value-changed=${this._handleTextValueChanged}
@change=${this._handleTextValueChanged}
>
</paper-input>`
</ha-textfield>`
: ""}
`
: ""}
@ -429,9 +425,9 @@ export class SupervisorBackupContent extends LitElement {
this[input.name] = input.value;
}
private _handleTextValueChanged(ev: ValueChangedEvent<string>) {
const input = ev.currentTarget as PaperInputElement;
this[input.name!] = ev.detail.value;
private _handleTextValueChanged(ev: InputEvent) {
const input = ev.currentTarget as HaTextField;
this[input.name!] = input.value;
}
private _toggleHasPassword(): void {

46
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -4,7 +4,6 @@ import "@material/mwc-list/mwc-list-item";
import "@material/mwc-tab";
import "@material/mwc-tab-bar";
import { mdiClose } from "@mdi/js";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache";
@ -14,6 +13,7 @@ import "../../../../src/components/ha-circular-progress";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-expansion-panel";
import "../../../../src/components/ha-formfield";
import "../../../../src/components/ha-textfield";
import "../../../../src/components/ha-header-bar";
import "../../../../src/components/ha-icon-button";
import "../../../../src/components/ha-radio";
@ -34,6 +34,7 @@ import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../src/resources/styles";
import type { HomeAssistant } from "../../../../src/types";
import { HassioNetworkDialogParams } from "./show-dialog-network";
import type { HaTextField } from "../../../../src/components/ha-textfield";
const IP_VERSIONS = ["ipv4", "ipv6"];
@ -245,7 +246,7 @@ export class DialogHassioNetwork
${this._wifiConfiguration.auth === "wpa-psk" ||
this._wifiConfiguration.auth === "wep"
? html`
<paper-input
<ha-textfield
class="flex-auto"
type="password"
id="psk"
@ -253,10 +254,9 @@ export class DialogHassioNetwork
"dialog.network.wifi_password"
)}
version="wifi"
@value-changed=${this
._handleInputValueChangedWifi}
@change=${this._handleInputValueChangedWifi}
>
</paper-input>
</ha-textfield>
`
: ""}
`
@ -358,33 +358,33 @@ export class DialogHassioNetwork
</div>
${this._interface![version].method === "static"
? html`
<paper-input
<ha-textfield
class="flex-auto"
id="address"
.label=${this.supervisor.localize("dialog.network.ip_netmask")}
.version=${version}
.value=${this._toString(this._interface![version].address)}
@value-changed=${this._handleInputValueChanged}
@change=${this._handleInputValueChanged}
>
</paper-input>
<paper-input
</ha-textfield>
<ha-textfield
class="flex-auto"
id="gateway"
.label=${this.supervisor.localize("dialog.network.gateway")}
.version=${version}
.value=${this._interface![version].gateway}
@value-changed=${this._handleInputValueChanged}
@change=${this._handleInputValueChanged}
>
</paper-input>
<paper-input
</ha-textfield>
<ha-textfield
class="flex-auto"
id="nameservers"
.label=${this.supervisor.localize("dialog.network.dns_servers")}
.version=${version}
.value=${this._toString(this._interface![version].nameservers)}
@value-changed=${this._handleInputValueChanged}
@change=${this._handleInputValueChanged}
>
</paper-input>
</ha-textfield>
`
: ""}
</ha-expansion-panel>
@ -517,11 +517,11 @@ export class DialogHassioNetwork
this.requestUpdate("_wifiConfiguration");
}
private _handleInputValueChanged(ev: CustomEvent): void {
const value: string | null | undefined = (ev.target as PaperInputElement)
.value;
private _handleInputValueChanged(ev: Event): void {
const source = ev.target as HaTextField;
const value = source.value;
const version = (ev.target as any).version as "ipv4" | "ipv6";
const id = (ev.target as PaperInputElement).id;
const id = source.id;
if (
!value ||
@ -535,10 +535,10 @@ export class DialogHassioNetwork
this._interface[version]![id] = value;
}
private _handleInputValueChangedWifi(ev: CustomEvent): void {
const value: string | null | undefined = (ev.target as PaperInputElement)
.value;
const id = (ev.target as PaperInputElement).id;
private _handleInputValueChangedWifi(ev: Event): void {
const source = ev.target as HaTextField;
const value = source.value;
const id = source.id;
if (
!value ||
@ -630,7 +630,7 @@ export class DialogHassioNetwork
--expansion-panel-summary-padding: 0 16px;
margin: 4px 0;
}
paper-input {
ha-textfield {
padding: 0 14px;
}
mwc-list-item {

10
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDeleteOff } 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 "@lrnwebcomponents/simple-tooltip/simple-tooltip";
@ -27,12 +25,14 @@ import {
import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
import type { HomeAssistant } from "../../../../src/types";
import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
import type { HaTextField } from "../../../../src/components/ha-textfield";
import "../../../../src/components/ha-textfield";
@customElement("dialog-hassio-repositories")
class HassioRepositoriesDialog extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@query("#repository_input", true) private _optionInput?: PaperInputElement;
@query("#repository_input", true) private _optionInput?: HaTextField;
@state() private _repositories?: HassioAddonRepository[];
@ -145,7 +145,7 @@ class HassioRepositoriesDialog extends LitElement {
)
: html`<paper-item> No repositories </paper-item>`}
<div class="layout horizontal bottom">
<paper-input
<ha-textfield
class="flex-auto"
id="repository_input"
.value=${this._dialogParams!.url || ""}
@ -154,7 +154,7 @@ class HassioRepositoriesDialog extends LitElement {
)}
@keydown=${this._handleKeyAdd}
dialogInitialFocus
></paper-input>
></ha-textfield>
<mwc-button @click=${this._addRepository}>
${this._processing
? html`<ha-circular-progress

1
package.json
View File

@ -83,7 +83,6 @@
"@material/web": "=1.1.1",
"@mdi/js": "7.4.47",
"@mdi/svg": "7.4.47",
"@polymer/paper-input": "3.2.1",
"@polymer/paper-item": "3.0.1",
"@polymer/paper-listbox": "3.0.1",
"@polymer/paper-tabs": "3.1.0",

39
yarn.lock
View File

@ -3430,18 +3430,6 @@ __metadata:
languageName: node
linkType: hard
"@polymer/iron-autogrow-textarea@npm:^3.0.0-pre.26":
version: 3.0.3
resolution: "@polymer/iron-autogrow-textarea@npm:3.0.3"
dependencies:
"@polymer/iron-behaviors": "npm:^3.0.0-pre.26"
"@polymer/iron-flex-layout": "npm:^3.0.0-pre.26"
"@polymer/iron-validatable-behavior": "npm:^3.0.0-pre.26"
"@polymer/polymer": "npm:^3.0.0"
checksum: bf11bd05a40623f6609bb9156e299414b15c7bb8c170c4f542f6586cf9273940a19f0f329047c7adf941a90ddc0deefc06be42c8770c6ca3637debad67c9456b
languageName: node
linkType: hard
"@polymer/iron-behaviors@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/iron-behaviors@npm:3.0.1"
@ -3511,17 +3499,6 @@ __metadata:
languageName: node
linkType: hard
"@polymer/iron-input@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/iron-input@npm:3.0.1"
dependencies:
"@polymer/iron-a11y-announcer": "npm:^3.0.0-pre.26"
"@polymer/iron-validatable-behavior": "npm:^3.0.0-pre.26"
"@polymer/polymer": "npm:^3.0.0"
checksum: b607da1b2962038cb12d6c220b98e49a9e9552ae89c798167d39d7caffea8671ce8d6b62721f386e623ddd535694248459bf5505b6ef335c2fbb36cf6ca373a9
languageName: node
linkType: hard
"@polymer/iron-menu-behavior@npm:^3.0.0-pre.26":
version: 3.0.2
resolution: "@polymer/iron-menu-behavior@npm:3.0.2"
@ -3607,21 +3584,6 @@ __metadata:
languageName: node
linkType: hard
"@polymer/paper-input@npm:3.2.1":
version: 3.2.1
resolution: "@polymer/paper-input@npm:3.2.1"
dependencies:
"@polymer/iron-a11y-keys-behavior": "npm:^3.0.0-pre.26"
"@polymer/iron-autogrow-textarea": "npm:^3.0.0-pre.26"
"@polymer/iron-behaviors": "npm:^3.0.0-pre.26"
"@polymer/iron-form-element-behavior": "npm:^3.0.0-pre.26"
"@polymer/iron-input": "npm:^3.0.0-pre.26"
"@polymer/paper-styles": "npm:^3.0.0-pre.26"
"@polymer/polymer": "npm:^3.0.0"
checksum: d337b8c74351080e224aaa53233cd372b5f5121ecee13a4d218e42e6e5be23b21dcdd03e5019978c422436a14762c7b373b5073bb1988b11021d2103c32e3efe
languageName: node
linkType: hard
"@polymer/paper-item@npm:3.0.1":
version: 3.0.1
resolution: "@polymer/paper-item@npm:3.0.1"
@ -9582,7 +9544,6 @@ __metadata:
"@octokit/plugin-retry": "npm:6.0.1"
"@octokit/rest": "npm:20.0.2"
"@open-wc/dev-server-hmr": "npm:0.1.4"
"@polymer/paper-input": "npm:3.2.1"
"@polymer/paper-item": "npm:3.0.1"
"@polymer/paper-listbox": "npm:3.0.1"
"@polymer/paper-tabs": "npm:3.1.0"