Input conversion in dev tools (#11795)

2022-02-23 15:24:00 +01:00 · 2022-02-23 15:24:00 +01:00 · 0010bf5a8f
parent 6e2e80a297
commit 0010bf5a8f
9 changed files with 80 additions and 36 deletions
--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.

-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)

 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@ -75,7 +75,7 @@ class DialogBox extends LitElement {
            ? html`
                <ha-textfield
                  dialogInitialFocus
-                  .value=${this._value}
+                  .value=${this._value || ""}
                  @keyup=${this._handleKeyUp}
                  @change=${this._valueChanged}
                  .label=${this._params.inputLabel
--- a/src/panels/developer-tools/event/developer-tools-event.js
+++ b/src/panels/developer-tools/event/developer-tools-event.js
@ -1,11 +1,11 @@
 import "@material/mwc-button";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { load } from "js-yaml";
 import "../../../components/ha-code-editor";
+import "../../../components/ha-textfield";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
@ -46,6 +46,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
          margin-top: 8px;
        }

+        ha-textfield {
+          display: block;
+        }
+
        .code-editor {
          margin-right: 16px;
        }
@ -78,14 +82,15 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
            </a>
          </p>
          <div class="inputs">
-            <paper-input
+            <ha-textfield
              label="[[localize(
                'ui.panel.developer-tools.tabs.events.type'
              )]]"
              autofocus
              required
-              value="{{eventType}}"
-            ></paper-input>
+              value="[[eventType]]"
+              on-change="eventTypeChanged"
+            ></ha-textfield>
            <p>[[localize( 'ui.panel.developer-tools.tabs.events.data' )]]</p>
          </div>
          <div class="code-editor">
@ -150,6 +155,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
    this.eventType = ev.detail.eventType;
  }

+  eventTypeChanged(ev) {
+    this.eventType = ev.target.value;
+  }
+
  _computeParsedEventData(eventData) {
    try {
      return eventData.trim() ? load(eventData) : {};
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@ -1,11 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { HassEvent } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatTime } from "../../../common/datetime/format_time";
 import "../../../components/ha-card";
-import { PolymerChangedEvent } from "../../../polymer-types";
+import "../../../components/ha-textfield";
 import { HomeAssistant } from "../../../types";

@customElement("event-subscribe-card")
@ -39,7 +38,7 @@ class EventSubscribeCard extends LitElement {
        )}
      >
        <form>
-          <paper-input
+          <ha-textfield
            .label=${this._subscribed
              ? this.hass!.localize(
                  "ui.panel.developer-tools.tabs.events.listening_to"
@ -49,8 +48,8 @@ class EventSubscribeCard extends LitElement {
                )}
            .disabled=${this._subscribed !== undefined}
            .value=${this._eventType}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
+            @input=${this._valueChanged}
+          ></ha-textfield>
          <mwc-button
            .disabled=${this._eventType === ""}
            @click=${this._handleSubmit}
@ -84,8 +83,8 @@ class EventSubscribeCard extends LitElement {
    `;
  }

-  private _valueChanged(ev: PolymerChangedEvent<string>): void {
-    this._eventType = ev.detail.value;
+  private _valueChanged(ev): void {
+    this._eventType = ev.target.value;
  }

  private async _handleSubmit(): Promise<void> {
@ -116,9 +115,8 @@ class EventSubscribeCard extends LitElement {
        display: block;
        padding: 0 0 16px 16px;
      }
-      paper-input {
-        display: inline-block;
-        width: 200px;
+      ha-textfield {
+        width: 300px;
      }
      mwc-button {
        vertical-align: middle;
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@ -5,7 +5,6 @@ import {
  mdiInformationOutline,
  mdiRefresh,
 } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -42,6 +41,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
          padding: 16px;
        }

+        ha-textfield {
+          display: block;
+        }
+
+        .state-input {
+          margin-top: 16px;
+        }
+
        ha-expansion-panel {
          margin: 0 8px 16px;
        }
@ -74,6 +81,14 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
          );
        }

+        .filters th {
+          padding: 0;
+        }
+
+        .filters ha-textfield {
+          --mdc-text-field-fill-color: transparent;
+        }
+
        th.attributes {
          position: relative;
        }
@ -164,16 +179,17 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
              on-change="entityIdChanged"
              allow-custom-entity
            ></ha-entity-picker>
-            <paper-input
+            <ha-textfield
              label="[[localize('ui.panel.developer-tools.tabs.states.state')]]"
              required
              autocapitalize="none"
              autocomplete="off"
              autocorrect="off"
              spellcheck="false"
-              value="{{_state}}"
+              value="[[_state]]"
+              on-change="stateChanged"
              class="state-input"
-            ></paper-input>
+            ></ha-textfield>
            <p>
              [[localize('ui.panel.developer-tools.tabs.states.state_attributes')]]
            </p>
@ -234,27 +250,30 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
              ></ha-checkbox>
            </th>
          </tr>
-          <tr>
+          <tr class="filters">
            <th>
-              <paper-input
+              <ha-textfield
                label="[[localize('ui.panel.developer-tools.tabs.states.filter_entities')]]"
                type="search"
-                value="{{_entityFilter}}"
-              ></paper-input>
+                value="[[_entityFilter]]"
+                on-input="_entityFilterChanged"
+              ></ha-textfield>
            </th>
            <th>
-              <paper-input
+              <ha-textfield
                label="[[localize('ui.panel.developer-tools.tabs.states.filter_states')]]"
                type="search"
-                value="{{_stateFilter}}"
-              ></paper-input>
+                value="[[_stateFilter]]"
+                on-input="_stateFilterChanged"
+              ></ha-textfield>
            </th>
            <th hidden$="[[!computeShowAttributes(narrow, _showAttributes)]]">
-              <paper-input
+              <ha-textfield
                label="[[localize('ui.panel.developer-tools.tabs.states.filter_attributes')]]"
                type="search"
-                value="{{_attributeFilter}}"
-              ></paper-input>
+                value="[[_attributeFilter]]"
+                on-input="_attributeFilterChanged"
+              ></ha-textfield>
            </th>
          </tr>
          <tr hidden$="[[!computeShowEntitiesPlaceholder(_entities)]]">
@ -416,6 +435,22 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
    this._expanded = true;
  }

+  stateChanged(ev) {
+    this._state = ev.target.value;
+  }
+
+  _entityFilterChanged(ev) {
+    this._entityFilter = ev.target.value;
+  }
+
+  _stateFilterChanged(ev) {
+    this._stateFilter = ev.target.value;
+  }
+
+  _attributeFilterChanged(ev) {
+    this._attributeFilter = ev.target.value;
+  }
+
  _getHistoryURL(entityId, inputDate) {
    const date = new Date(inputDate);
    const hourBefore = addHours(date, -1).toISOString();
--- a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
@ -1,4 +1,3 @@
-import "@polymer/paper-input/paper-textarea";
 import { PropertyValues, ReactiveElement } from "lit";
 import { property } from "lit/decorators";
 import { computeRTL } from "../../../../common/util/compute_rtl";
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@ -333,7 +333,7 @@ export class HuiConditionalCardEditor
        .condition .state mwc-select {
          margin-right: 16px;
        }
-        .condition .state paper-input {
+        .condition .state ha-textfield {
          flex-grow: 1;
        }

--- a/src/panels/mailbox/ha-panel-mailbox.js
+++ b/src/panels/mailbox/ha-panel-mailbox.js
@ -1,7 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-tabs/paper-tab";
--- a/src/panels/profile/ha-long-lived-access-token-dialog.ts
+++ b/src/panels/profile/ha-long-lived-access-token-dialog.ts
@ -1,5 +1,4 @@
 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";
@ -7,6 +6,7 @@ import { createCloseHeading } from "../../components/ha-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
+import "../../components/ha-textfield";

 const QR_LOGO_URL = "/static/icons/favicon-192x192.png";

@ -41,14 +41,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
        @closed=${this.closeDialog}
      >
        <div>
-          <paper-input
+          <ha-textfield
            dialogInitialFocus
            .value=${this._params.token}
            .label=${this.hass.localize(
              "ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
            )}
            type="text"
-          ></paper-input>
+            readOnly
+          ></ha-textfield>
          <div id="qr">
            ${this._qrCode
              ? this._qrCode
@ -94,6 +95,9 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
        #qr {
          text-align: center;
        }
+        ha-textfield {
+          display: block;
+        }
      `,
    ];
  }