Add Fields to Script UI

src/components/ha-selector/ha-selector-date.ts

@@ -26,7 +26,7 @@ export class HaDateSelector extends LitElement {
         .label=${this.label}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
-        .value=${this.value}
+        .value=${typeof this.value === "string" ? this.value : undefined}
         .required=${this.required}
         .helper=${this.helper}
       >

src/components/ha-selector/ha-selector-datetime.ts

@@ -30,7 +30,8 @@ export class HaDateTimeSelector extends LitElement {
   @query("ha-time-input") private _timeInput!: HaTimeInput;
 
   protected render() {
-    const values = this.value?.split(" ");
+    const values =
+      typeof this.value === "string" ? this.value.split(" ") : undefined;
 
     return html`
       <div class="input">

src/components/ha-selector/ha-selector-number.ts

@@ -38,7 +38,10 @@ export class HaNumberSelector extends LitElement {
   }
 
   protected render() {
-    const isBox = this.selector.number?.mode === "box";
+    const isBox =
+      this.selector.number?.mode === "box" ||
+      this.selector.number?.min === undefined ||
+      this.selector.number?.max === undefined;
 
     return html`
       <div class="input">
@@ -67,11 +70,9 @@ export class HaNumberSelector extends LitElement {
           (this.selector.number?.step ?? 1) % 1 !== 0
             ? "decimal"
             : "numeric"}
-          .label=${this.selector.number?.mode !== "box"
-            ? undefined
-            : this.label}
+          .label=${!isBox ? undefined : this.label}
           .placeholder=${this.placeholder}
-          class=${classMap({ single: this.selector.number?.mode === "box" })}
+          class=${classMap({ single: isBox })}
           .min=${this.selector.number?.min}
           .max=${this.selector.number?.max}
           .value=${this._valueStr ?? ""}
@@ -83,7 +84,7 @@ export class HaNumberSelector extends LitElement {
           .suffix=${this.selector.number?.unit_of_measurement}
           type="number"
           autoValidate
-          ?no-spinner=${this.selector.number?.mode !== "box"}
+          ?no-spinner=${!isBox}
           @input=${this._handleInputChange}
         >
         </ha-textfield>

src/components/ha-selector/ha-selector-time.ts

@@ -23,7 +23,7 @@ export class HaTimeSelector extends LitElement {
   protected render() {
     return html`
       <ha-time-input
-        .value=${this.value}
+        .value=${typeof this.value === "string" ? this.value : undefined}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
         .required=${this.required}

src/data/script.ts

@@ -93,12 +93,27 @@ export interface ManualScriptConfig {
   icon?: string;
   mode?: (typeof MODES)[number];
   max?: number;
+  fields?: Fields;
 }
 
 export interface BlueprintScriptConfig extends ManualScriptConfig {
   use_blueprint: { path: string; input?: BlueprintInput };
 }
 
+export interface Fields {
+  [key: string]: Field;
+}
+
+export interface Field {
+  name?: string;
+  description?: string;
+  advanced?: boolean;
+  required?: boolean;
+  example?: string;
+  default?: any;
+  selector?: any;
+}
+
 interface BaseAction {
   alias?: string;
   continue_on_error?: boolean;

src/panels/config/script/ha-script-editor.ts

@@ -5,17 +5,18 @@ import {
   mdiContentSave,
   mdiDelete,
   mdiDotsVertical,
+  mdiFormTextbox,
   mdiInformationOutline,
   mdiPlay,
   mdiTransitConnection,
 } from "@mdi/js";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
   TemplateResult,
+  css,
+  html,
   nothing,
 } from "lit";
 import { property, query, state } from "lit/decorators";
@@ -38,16 +39,18 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
+import { validateConfig } from "../../../data/config";
+import { UNAVAILABLE } from "../../../data/entity";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
 import {
+  MODES,
+  MODES_MAX,
+  ScriptConfig,
   deleteScript,
   fetchScriptFileConfig,
   getScriptEditorInitData,
   getScriptStateConfig,
   isMaxMode,
-  MODES,
-  MODES_MAX,
-  ScriptConfig,
   showScriptEditor,
   triggerScript,
 } from "../../../data/script";
@@ -60,8 +63,7 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import "./blueprint-script-editor";
 import "./manual-script-editor";
-import { UNAVAILABLE } from "../../../data/entity";
-import { validateConfig } from "../../../data/config";
+import type { HaManualScriptEditor } from "./manual-script-editor";
 
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -92,7 +94,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _readOnly = false;
 
-  @query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor;
+  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
+
+  @query("manual-script-editor")
+  private _manualEditor?: HaManualScriptEditor;
 
   @state() private _validationErrors?: (string | TemplateResult)[];
 
@@ -231,6 +236,19 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
           </mwc-list-item>
 
+          ${!useBlueprint && !("fields" in this._config)
+            ? html`
+                <mwc-list-item graphic="icon" @click=${this._addFields}>
+                  ${this.hass.localize(
+                    "ui.panel.config.script.editor.field.add_fields"
+                  )}
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiFormTextbox}
+                  ></ha-svg-icon>
+                </mwc-list-item>
+              `
+            : nothing}
           ${this.scriptId && this.narrow
             ? html`
                 <a href="/config/script/trace/${this.scriptId}">
@@ -661,6 +679,14 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     }
   }
 
+  private _addFields() {
+    if ("fields" in this._config!) {
+      return;
+    }
+    this._manualEditor?.addFields();
+    this._dirty = true;
+  }
+
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
     if (this._readOnly) {