jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 02:49:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use automation sidebar in scripts (#26602)

Browse Source
This commit is contained in:
Wendelin
2025-08-21 12:21:00 +02:00
committed by GitHub
parent 3a70310f78
commit 5a540dd889
31 changed files with 2222 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/ha-selector/ha-selector-selector.ts
View File

@@ -8,7 +8,6 @@ import type {
LocalizeKeys,
} from "../../common/translations/localize";
import type { HomeAssistant } from "../../types";
import "../ha-alert";
import "../ha-form/ha-form";
const SELECTOR_DEFAULTS = {
@@ -156,6 +155,8 @@ export class HaSelectorSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public narrow = false;
@property({ type: Boolean, reflect: true }) public required = true;
private _yamlMode = false;
@@ -172,10 +173,10 @@ export class HaSelectorSelector extends LitElement {
[
{
name: "type",
required: true,
selector: {
select: {
mode: "dropdown",
required: true,
options: Object.keys(SELECTOR_SCHEMAS)
.concat("manual")
.map((key) => ({
@@ -228,8 +229,7 @@ export class HaSelectorSelector extends LitElement {
const schema = this._schema(type, this.hass.localize);
return html`<ha-card>
<div class="card-content">
return html`<div>
<p>${this.label ? this.label : ""}</p>
<ha-form
.hass=${this.hass}
@@ -237,8 +237,9 @@ export class HaSelectorSelector extends LitElement {
.schema=${schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form></div
></ha-card>`;
.narrow=${this.narrow}
></ha-form>
</div>`;
}
private _valueChanged(ev: CustomEvent) {
@@ -285,23 +286,6 @@ export class HaSelectorSelector extends LitElement {
) || schema.name;
static styles = css`
:host {
--expansion-panel-summary-padding: 0 16px;
}
ha-alert {
display: block;
margin-bottom: 16px;
}
ha-card {
margin: 0 0 16px 0;
}
ha-card.disabled {
pointer-events: none;
color: var(--disabled-text-color);
}
.card-content {
padding: 0px 16px 16px 16px;
}
.title {
font-size: var(--ha-font-size-l);
padding-top: 16px;

73
src/data/automation.ts
View File

@@ -7,10 +7,10 @@ import { navigate } from "../common/navigate";
import { createSearchParam } from "../common/url/search-params";
import type { Context, HomeAssistant } from "../types";
import type { BlueprintInput } from "./blueprint";
import type { DeviceCondition, DeviceTrigger } from "./device_automation";
import type { Action, MODES } from "./script";
import { migrateAutomationAction } from "./script";
import { CONDITION_BUILDING_BLOCKS } from "./condition";
import type { DeviceCondition, DeviceTrigger } from "./device_automation";
import type { Action, Field, MODES } from "./script";
import { migrateAutomationAction } from "./script";
export const AUTOMATION_DEFAULT_MODE: (typeof MODES)[number] = "single";
export const AUTOMATION_DEFAULT_MAX = 10;
@@ -523,6 +523,14 @@ export const isCondition = (config: unknown): boolean => {
return "condition" in condition && typeof condition.condition === "string";
};
export const isScriptField = (config: unknown): boolean => {
if (!config || typeof config !== "object") {
return false;
}
const field = config as Record<string, unknown>;
return "field" in field && typeof field.field === "object";
};
export const subscribeTrigger = (
hass: HomeAssistant,
onChange: (result: {
@@ -557,6 +565,65 @@ export interface AutomationClipboard {
action?: Action;
}
export interface BaseSidebarConfig {
toggleYamlMode: () => boolean;
delete: () => void;
}
export interface TriggerSidebarConfig extends BaseSidebarConfig {
save: (value: Trigger) => void;
close: () => void;
rename: () => void;
disable: () => void;
config: Trigger;
yamlMode: boolean;
uiSupported: boolean;
}
export interface ConditionSidebarConfig extends BaseSidebarConfig {
save: (value: Condition) => void;
close: () => void;
rename: () => void;
disable: () => void;
config: Condition;
yamlMode: boolean;
uiSupported: boolean;
}
export interface ActionSidebarConfig extends BaseSidebarConfig {
save: (value: Action) => void;
close: () => void;
rename: () => void;
disable: () => void;
config: Action;
yamlMode: boolean;
uiSupported: boolean;
}
export interface OptionSidebarConfig extends BaseSidebarConfig {
close: () => void;
rename: () => void;
}
export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
save: (value: Field) => void;
close: () => void;
config: {
field: Field;
selector: boolean;
key: string;
excludeKeys: string[];
};
yamlMode: boolean;
}
export type SidebarConfig =
| TriggerSidebarConfig
| ConditionSidebarConfig
| ActionSidebarConfig
| OptionSidebarConfig
| ScriptFieldSidebarConfig;
export interface ShowAutomationEditorParams {
data?: Partial<AutomationConfig>;
expanded?: boolean;

1
src/data/selector/selector_selector.ts Normal file
View File

@@ -0,0 +1 @@
export const SELECTOR_SELECTOR_BUILDING_BLOCKS = ["condition", "action"];

4
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@@ -41,6 +41,7 @@ import {
YAML_ONLY_ACTION_TYPES,
} from "../../../../data/action";
import type {
ActionSidebarConfig,
AutomationClipboard,
Condition,
} from "../../../../data/automation";
@@ -665,10 +666,9 @@ export default class HaAutomationActionRow extends LitElement {
disable: this._onDisable,
delete: this._onDelete,
config: sidebarAction,
type: "action",
uiSupported: actionType ? this._uiSupported(actionType) : false,
yamlMode: this._yamlMode,
});
} satisfies ActionSidebarConfig);
this._selected = true;
}

2
src/panels/config/automation/action/ha-automation-action.ts
View File

@@ -167,7 +167,9 @@ export default class HaAutomationAction extends LitElement {
} else if (!this.optionsInSidebar) {
row.expand();
}
if (this.narrow) {
row.scrollIntoView();
}
row.focus();
});
}

36
src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts
View File

@@ -1,24 +1,31 @@
import { mdiClose, mdiPlus } from "@mdi/js";
import { dump } from "js-yaml";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { mdiClose, mdiPlus } from "@mdi/js";
import { dump } from "js-yaml";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/chips/ha-assist-chip";
import "../../../../components/chips/ha-chip-set";
import "../../../../components/ha-alert";
import "../../../../components/ha-area-picker";
import "../../../../components/ha-domain-icon";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-textarea";
import "../../../../components/ha-textfield";
import "../../../../components/ha-labels-picker";
import "../../../../components/ha-suggest-with-ai-button";
import type { SuggestWithAIGenerateTask } from "../../../../components/ha-suggest-with-ai-button";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-textarea";
import "../../../../components/ha-textfield";
import "../../category/ha-category-picker";
import "../../../../components/ha-expansion-panel";
import "../../../../components/chips/ha-chip-set";
import "../../../../components/chips/ha-assist-chip";
import "../../../../components/ha-area-picker";
import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
import { supportsMarkdownHelper } from "../../../../common/translations/markdown_support";
import { subscribeOne } from "../../../../common/util/subscribe-one";
import type { GenDataTaskResult } from "../../../../data/ai_task";
import { fetchCategoryRegistry } from "../../../../data/category_registry";
import { subscribeEntityRegistry } from "../../../../data/entity_registry";
import { subscribeLabelRegistry } from "../../../../data/label_registry";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@@ -26,13 +33,6 @@ import type {
EntityRegistryUpdate,
SaveDialogParams,
} from "./show-dialog-automation-save";
import { supportsMarkdownHelper } from "../../../../common/translations/markdown_support";
import type { GenDataTaskResult } from "../../../../data/ai_task";
import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
import { subscribeOne } from "../../../../common/util/subscribe-one";
import { subscribeLabelRegistry } from "../../../../data/label_registry";
import { subscribeEntityRegistry } from "../../../../data/entity_registry";
import { fetchCategoryRegistry } from "../../../../data/category_registry";
@customElement("ha-dialog-automation-save")
class DialogAutomationSave extends LitElement implements HassDialog {
@@ -242,7 +242,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
const title = this.hass.localize(
this._params.config.alias
? "ui.panel.config.automation.editor.rename"
: "ui.panel.config.automation.editor.save"
: "ui.common.save"
);
return html`
@@ -289,7 +289,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
${this.hass.localize(
this._params.config.alias && !this._params.onDiscard
? "ui.panel.config.automation.editor.rename"
: "ui.panel.config.automation.editor.save"
: "ui.common.save"
)}
</ha-button>
</div>

3
src/panels/config/automation/blueprint-automation-editor.ts
View File

@@ -6,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-markdown";
import "../../../components/ha-fab";
import type { BlueprintAutomationConfig } from "../../../data/automation";
import { fetchBlueprints } from "../../../data/blueprint";
import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
@@ -58,7 +59,7 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
.label=${this.hass.localize("ui.panel.config.automation.editor.save")}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this.saving}
extended
@click=${this._saveAutomation}

4
src/panels/config/automation/condition/ha-automation-condition-row.ts
View File

@@ -35,6 +35,7 @@ import "../../../../components/ha-md-menu-item";
import type {
AutomationClipboard,
Condition,
ConditionSidebarConfig,
} from "../../../../data/automation";
import { testCondition } from "../../../../data/automation";
import { describeCondition } from "../../../../data/automation_i18n";
@@ -621,10 +622,9 @@ export default class HaAutomationConditionRow extends LitElement {
disable: this._onDisable,
delete: this._onDelete,
config: sidebarCondition,
type: "condition",
uiSupported: this._uiSupported(sidebarCondition.condition),
yamlMode: this._yamlMode,
});
} satisfies ConditionSidebarConfig);
this._selected = true;
}

4
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@@ -16,6 +16,7 @@ import type {
AutomationClipboard,
Condition,
} from "../../../../data/automation";
import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
import type { HomeAssistant } from "../../../../types";
import {
PASTE_VALUE,
@@ -23,7 +24,6 @@ import {
} from "../show-add-automation-element-dialog";
import "./ha-automation-condition-row";
import type HaAutomationConditionRow from "./ha-automation-condition-row";
import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
@customElement("ha-automation-condition")
export default class HaAutomationCondition extends LitElement {
@@ -111,7 +111,9 @@ export default class HaAutomationCondition extends LitElement {
} else if (!this.optionsInSidebar) {
row.expand();
}
if (this.narrow) {
row.scrollIntoView();
}
row.focus();
});
}

6
src/panels/config/automation/ha-automation-editor.ts
View File

@@ -535,12 +535,10 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
<ha-fab
slot="fab"
class=${this._dirty ? "dirty" : ""}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.save"
)}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this._saving}
extended
@click=${this._saveAutomation}
@click=${this._handleSaveAutomation}
>
<ha-svg-icon
slot="icon"

465
src/panels/config/automation/ha-automation-sidebar.ts
View File

@@ -1,59 +1,32 @@
import {
mdiClose,
mdiDelete,
mdiDotsVertical,
mdiIdentifier,
mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox,
mdiStopCircleOutline,
} from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../common/dom/fire_event";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { handleStructError } from "../../../common/structs/handle-errors";
import type { LocalizeKeys } from "../../../common/translations/localize";
import "../../../components/ha-card";
import "../../../components/ha-dialog-header";
import "../../../components/ha-icon-button";
import "../../../components/ha-md-button-menu";
import "../../../components/ha-md-divider";
import "../../../components/ha-md-menu-item";
import type { Condition, Trigger } from "../../../data/automation";
import type { Action, RepeatAction } from "../../../data/script";
import {
isCondition,
isScriptField,
isTrigger,
type ActionSidebarConfig,
type ConditionSidebarConfig,
type ScriptFieldSidebarConfig,
type SidebarConfig,
type TriggerSidebarConfig,
} from "../../../data/automation";
import { isTriggerList } from "../../../data/trigger";
import type { HomeAssistant } from "../../../types";
import "./action/ha-automation-action-editor";
import { getAutomationActionType } from "./action/ha-automation-action-row";
import { getRepeatType } from "./action/types/ha-automation-action-repeat";
import "./condition/ha-automation-condition-editor";
import type HaAutomationConditionEditor from "./condition/ha-automation-condition-editor";
import "./ha-automation-editor-warning";
import "./trigger/ha-automation-trigger-editor";
import "./sidebar/ha-automation-sidebar-action";
import "./sidebar/ha-automation-sidebar-condition";
import "./sidebar/ha-automation-sidebar-option";
import "./sidebar/ha-automation-sidebar-script-field";
import "./sidebar/ha-automation-sidebar-script-field-selector";
import "./sidebar/ha-automation-sidebar-trigger";
import type HaAutomationTriggerEditor from "./trigger/ha-automation-trigger-editor";
import { ACTION_BUILDING_BLOCKS } from "../../../data/action";
import { CONDITION_BUILDING_BLOCKS } from "../../../data/condition";
export interface OpenSidebarConfig {
save: (config: Trigger | Condition | Action) => void;
close: () => void;
rename: () => void;
toggleYamlMode: () => boolean;
disable: () => void;
delete: () => void;
config: Trigger | Condition | Action;
type: "trigger" | "condition" | "action" | "option";
uiSupported: boolean;
yamlMode: boolean;
}
@customElement("ha-automation-sidebar")
export default class HaAutomationSidebar extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public config?: OpenSidebarConfig;
@property({ attribute: false }) public config?: SidebarConfig;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@@ -61,270 +34,134 @@ export default class HaAutomationSidebar extends LitElement {
@state() private _yamlMode = false;
@state() private _requestShowId = false;
@state() private _warnings?: string[];
@query(".sidebar-editor")
public editor?: HaAutomationTriggerEditor | HaAutomationConditionEditor;
protected willUpdate(changedProperties) {
if (changedProperties.has("config")) {
this._requestShowId = false;
this._warnings = undefined;
if (this.config) {
this._yamlMode = this.config.yamlMode;
if (this._yamlMode) {
this.editor?.yamlEditor?.setValue(this.config.config);
}
}
}
}
protected render() {
if (!this.config) {
return nothing;
}
const disabled =
this.disabled ||
("enabled" in this.config.config && this.config.config.enabled === false);
let type = isTriggerList(this.config.config as Trigger)
? "list"
: this.config.type === "action"
? getAutomationActionType(this.config.config as Action)
: this.config.config[this.config.type];
if (this.config.type === "action" && type === "repeat") {
type = `repeat_${getRepeatType((this.config.config as RepeatAction).repeat)}`;
}
const isBuildingBlock = [
...CONDITION_BUILDING_BLOCKS,
...ACTION_BUILDING_BLOCKS,
].includes(type);
const subtitle = this.hass.localize(
(this.config.type === "option"
? "ui.panel.config.automation.editor.actions.type.choose.label"
: `ui.panel.config.automation.editor.${this.config.type}s.${this.config.type}`) as LocalizeKeys
);
const title =
this.hass.localize(
(this.config.type === "option"
? "ui.panel.config.automation.editor.actions.type.choose.option_label"
: `ui.panel.config.automation.editor.${this.config.type}s.type.${type}.label`) as LocalizeKeys
) || type;
const description =
isBuildingBlock || this.config.type === "option"
? this.hass.localize(
(this.config.type === "option"
? "ui.panel.config.automation.editor.actions.type.choose.option_description"
: `ui.panel.config.automation.editor.${this.config.type}s.type.${type}.description.picker`) as LocalizeKeys
)
: "";
// get config type
const type = this._getType();
if (type === "trigger") {
return html`
<ha-card
outlined
class=${classMap({
mobile: !this.isWide,
yaml: this._yamlMode,
})}
>
<ha-dialog-header>
<ha-icon-button
slot="navigationIcon"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
@click=${this._closeSidebar}
></ha-icon-button>
<span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span>
<ha-md-button-menu
slot="actionItems"
@click=${this._openOverflowMenu}
@keydown=${stopPropagation}
@closed=${stopPropagation}
positioning="fixed"
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-md-menu-item
.clickAction=${this.config.rename}
.disabled=${disabled || type === "list"}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
${this.config.type === "trigger" &&
!this._yamlMode &&
!("id" in this.config.config) &&
!this._requestShowId
? html`<ha-md-menu-item
.clickAction=${this._showTriggerId}
.disabled=${disabled || type === "list"}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.edit_id"
)}
<ha-svg-icon
slot="start"
.path=${mdiIdentifier}
></ha-svg-icon>
</ha-md-menu-item>`
: nothing}
${this.config.type !== "option"
? html`
<ha-md-menu-item
.clickAction=${this._toggleYamlMode}
.disabled=${!this.config.uiSupported || !!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon
slot="start"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-md-menu-item>
`
: nothing}
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
${this.config.type !== "option"
? html`
<ha-md-menu-item
.clickAction=${this.config.disable}
.disabled=${this.disabled || type === "list"}
>
${disabled
? this.hass.localize(
"ui.panel.config.automation.editor.actions.enable"
)
: this.hass.localize(
"ui.panel.config.automation.editor.actions.disable"
)}
<ha-svg-icon
slot="start"
.path=${disabled
? mdiPlayCircleOutline
: mdiStopCircleOutline}
></ha-svg-icon>
</ha-md-menu-item>
`
: nothing}
<ha-md-menu-item
.clickAction=${this.config.delete}
class="warning"
.disabled=${this.disabled}
>
${this.hass.localize(
`ui.panel.config.automation.editor.actions.${this.config.type !== "option" ? "delete" : "type.choose.remove_option"}`
)}
<ha-svg-icon
class="warning"
slot="start"
.path=${mdiDelete}
></ha-svg-icon>
</ha-md-menu-item>
</ha-md-button-menu>
</ha-dialog-header>
${this._warnings
? html`<ha-automation-editor-warning
.localize=${this.hass.localize}
.warnings=${this._warnings}
>
</ha-automation-editor-warning>`
: nothing}
<div class="card-content">
${this.config.type === "trigger"
? html`<ha-automation-trigger-editor
class="sidebar-editor"
<ha-automation-sidebar-trigger
.hass=${this.hass}
.trigger=${this.config.config as Trigger}
@value-changed=${this._valueChangedSidebar}
.uiSupported=${this.config.uiSupported}
.showId=${this._requestShowId}
.yamlMode=${this._yamlMode}
.config=${this.config}
.isWide=${this.isWide}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-trigger-editor>`
: this.config.type === "condition" &&
(this._yamlMode || !CONDITION_BUILDING_BLOCKS.includes(type))
? html`
<ha-automation-condition-editor
class="sidebar-editor"
.yamlMode=${this._yamlMode}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._closeSidebar}
></ha-automation-sidebar-trigger>
`;
}
if (type === "condition") {
return html`
<ha-automation-sidebar-condition
.hass=${this.hass}
.condition=${this.config.config as Condition}
.yamlMode=${this._yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
.config=${this.config}
.isWide=${this.isWide}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-condition-editor>
`
: this.config.type === "action" &&
(this._yamlMode || !ACTION_BUILDING_BLOCKS.includes(type))
? html`
<ha-automation-action-editor
class="sidebar-editor"
.yamlMode=${this._yamlMode}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._closeSidebar}
></ha-automation-sidebar-condition>
`;
}
if (type === "action") {
return html`
<ha-automation-sidebar-action
.hass=${this.hass}
.action=${this.config.config as Action}
.yamlMode=${this._yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
sidebar
narrow
.config=${this.config}
.isWide=${this.isWide}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-action-editor>
`
: description || nothing}
</div>
</ha-card>
.yamlMode=${this._yamlMode}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._closeSidebar}
></ha-automation-sidebar-action>
`;
}
if (type === "option") {
return html`
<ha-automation-sidebar-option
.hass=${this.hass}
.config=${this.config}
.isWide=${this.isWide}
.disabled=${this.disabled}
@close-sidebar=${this._closeSidebar}
></ha-automation-sidebar-option>
`;
}
if (type === "script-field-selector") {
return html`
<ha-automation-sidebar-script-field-selector
.hass=${this.hass}
.config=${this.config}
.isWide=${this.isWide}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._closeSidebar}
></ha-automation-sidebar-script-field-selector>
`;
}
if (type === "script-field") {
return html`
<ha-automation-sidebar-script-field
.hass=${this.hass}
.config=${this.config}
.isWide=${this.isWide}
.disabled=${this.disabled}
.yamlMode=${this._yamlMode}
@toggle-yaml-mode=${this._toggleYamlMode}
@close-sidebar=${this._closeSidebar}
></ha-automation-sidebar-script-field>
`;
}
private _handleUiModeNotAvailable(ev: CustomEvent) {
this._warnings = handleStructError(this.hass, ev.detail).warnings;
if (!this._yamlMode) {
this._yamlMode = true;
}
return nothing;
}
private _valueChangedSidebar(ev: CustomEvent) {
private _getType() {
if (
(this.config as TriggerSidebarConfig)?.config &&
(isTrigger((this.config as TriggerSidebarConfig)?.config) ||
isTriggerList((this.config as TriggerSidebarConfig)?.config))
) {
return "trigger";
}
if (isCondition((this.config as ConditionSidebarConfig)?.config)) {
return "condition";
}
if (
(this.config as ScriptFieldSidebarConfig)?.config &&
isScriptField((this.config as ScriptFieldSidebarConfig)?.config)
) {
return (this.config as ScriptFieldSidebarConfig)?.config.selector
? "script-field-selector"
: "script-field";
}
// option is always a building block and doesn't have a config
if (this.config && !(this.config as any)?.config) {
return "option";
}
if ((this.config as ActionSidebarConfig)?.config) {
return "action";
}
return undefined;
}
private _closeSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save(ev.detail.value);
if (this.config) {
fireEvent(this, "value-changed", {
value: {
...this.config,
config: ev.detail.value,
},
});
}
}
private _closeSidebar() {
this.config?.close();
}
private _openOverflowMenu(ev: MouseEvent) {
ev.stopPropagation();
ev.preventDefault();
}
private _toggleYamlMode = () => {
this._yamlMode = this.config!.toggleYamlMode();
fireEvent(this, "value-changed", {
@@ -335,10 +172,6 @@ export default class HaAutomationSidebar extends LitElement {
});
};
private _showTriggerId = () => {
this._requestShowId = true;
};
static styles = css`
:host {
height: 100%;
@@ -348,60 +181,6 @@ export default class HaAutomationSidebar extends LitElement {
);
border-radius: var(--ha-card-border-radius);
}
ha-card {
height: 100%;
width: 100%;
border-color: var(--primary-color);
border-width: 2px;
display: block;
}
ha-card.mobile {
border-bottom-right-radius: var(--ha-border-radius-square);
border-bottom-left-radius: var(--ha-border-radius-square);
}
@media all and (max-width: 870px) {
ha-card.mobile {
max-height: 70vh;
max-height: 70dvh;
border-width: 2px 2px 0;
}
ha-card.mobile.yaml {
height: 70vh;
height: 70dvh;
}
}
ha-dialog-header {
border-radius: var(--ha-card-border-radius);
}
.sidebar-editor {
padding-top: 64px;
}
.card-content {
max-height: calc(100% - 80px);
overflow: auto;
}
@media (min-width: 450px) and (min-height: 500px) {
.card-content {
max-height: calc(100% - 104px);
overflow: auto;
}
}
@media all and (max-width: 870px) {
ha-card.mobile .card-content {
max-height: calc(
70vh - 88px - max(var(--safe-area-inset-bottom), 16px)
);
max-height: calc(
70dvh - 88px - max(var(--safe-area-inset-bottom), 16px)
);
}
}
`;
}
@@ -409,4 +188,8 @@ declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar": HaAutomationSidebar;
}
interface HASSDomEvents {
"toggle-yaml-mode": undefined;
}
}

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

@@ -1,7 +1,7 @@
import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { load } from "js-yaml";
import type { CSSResultGroup, PropertyValues } from "lit";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@@ -18,11 +18,6 @@ import {
import { ensureArray } from "../../../common/array/ensure-array";
import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
import { fireEvent } from "../../../common/dom/fire_event";
import { constructUrlCurrentPath } from "../../../common/url/construct-url";
import {
extractSearchParam,
removeSearchParam,
} from "../../../common/url/search-params";
import "../../../components/ha-button";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
@@ -31,6 +26,7 @@ import type {
AutomationConfig,
Condition,
ManualAutomationConfig,
SidebarConfig,
Trigger,
} from "../../../data/automation";
import {
@@ -43,15 +39,11 @@ import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
import "./action/ha-automation-action";
import type HaAutomationAction from "./action/ha-automation-action";
import "./condition/ha-automation-condition";
import type HaAutomationCondition from "./condition/ha-automation-condition";
import "./ha-automation-sidebar";
import type { OpenSidebarConfig } from "./ha-automation-sidebar";
import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
import { saveFabStyles } from "./styles";
import "./trigger/ha-automation-trigger";
import type HaAutomationTrigger from "./trigger/ha-automation-trigger";
const baseConfigStruct = object({
alias: optional(string()),
@@ -90,7 +82,7 @@ export class HaManualAutomationEditor extends LitElement {
@state() private _pastedConfig?: ManualAutomationConfig;
@state() private _sidebarConfig?: OpenSidebarConfig;
@state() private _sidebarConfig?: SidebarConfig;
private _previousConfig?: ManualAutomationConfig;
@@ -104,31 +96,6 @@ export class HaManualAutomationEditor extends LitElement {
super.disconnectedCallback();
}
protected firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps);
const expanded = extractSearchParam("expanded");
if (expanded === "1") {
this._clearParam("expanded");
const items = this.shadowRoot!.querySelectorAll<
HaAutomationTrigger | HaAutomationCondition | HaAutomationAction
>("ha-automation-trigger, ha-automation-condition, ha-automation-action");
items.forEach((el) => {
el.updateComplete.then(() => {
el.expandAll();
});
});
}
}
private _clearParam(param: string) {
window.history.replaceState(
null,
"",
constructUrlCurrentPath(removeSearchParam(param))
);
}
private _renderContent() {
return html`
${this.stateObj?.state === "off"
@@ -294,9 +261,7 @@ export class HaManualAutomationEditor extends LitElement {
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.save"
)}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this.saving}
extended
@click=${this._saveAutomation}
@@ -320,13 +285,13 @@ export class HaManualAutomationEditor extends LitElement {
`;
}
private _openSidebar(ev: CustomEvent<OpenSidebarConfig>) {
private _openSidebar(ev: CustomEvent<SidebarConfig>) {
// deselect previous selected row
this._sidebarConfig?.close?.();
this._sidebarConfig = ev.detail;
}
private _sidebarConfigChanged(ev: CustomEvent<{ value: OpenSidebarConfig }>) {
private _sidebarConfigChanged(ev: CustomEvent<{ value: SidebarConfig }>) {
ev.stopPropagation();
if (!this._sidebarConfig) {
return;
@@ -718,7 +683,7 @@ declare global {
}
interface HASSDomEvents {
"open-sidebar": OpenSidebarConfig;
"open-sidebar": SidebarConfig;
"close-sidebar": undefined;
}
}

17
src/panels/config/automation/option/ha-automation-option-row.ts
View File

@@ -23,7 +23,10 @@ import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-menu-item";
import "../../../../components/ha-svg-icon";
import type { Condition } from "../../../../data/automation";
import type {
Condition,
OptionSidebarConfig,
} from "../../../../data/automation";
import { describeCondition } from "../../../../data/automation_i18n";
import { fullEntitiesContext } from "../../../../data/context";
import type { EntityRegistryEntry } from "../../../../data/entity_registry";
@@ -345,9 +348,6 @@ export default class HaAutomationOptionRow extends LitElement {
}
fireEvent(this, "open-sidebar", {
save: () => {
// nothing to save for an option in the sidebar
},
close: () => {
this._selected = false;
fireEvent(this, "close-sidebar");
@@ -356,15 +356,8 @@ export default class HaAutomationOptionRow extends LitElement {
this._renameOption();
},
toggleYamlMode: () => false, // no yaml mode for options
disable: () => {
// option cannot be disabled
},
delete: this._removeOption,
config: {},
type: "option",
uiSupported: true,
yamlMode: false,
});
} satisfies OptionSidebarConfig);
this._selected = true;
}

3
src/panels/config/automation/option/ha-automation-option.ts
View File

@@ -133,7 +133,10 @@ export default class HaAutomationOption extends LitElement {
if (!this.optionsInSidebar) {
row.expand();
}
if (this.narrow) {
row.scrollIntoView();
}
row.focus();
});
}

189
src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts Normal file
View File

@@ -0,0 +1,189 @@
import {
mdiDelete,
mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox,
mdiStopCircleOutline,
} from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { LocalizeKeys } from "../../../../common/translations/localize";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-md-menu-item";
import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
import type { ActionSidebarConfig } from "../../../../data/automation";
import type { RepeatAction } from "../../../../data/script";
import type { HomeAssistant } from "../../../../types";
import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
import { getAutomationActionType } from "../action/ha-automation-action-row";
import { getRepeatType } from "../action/types/ha-automation-action-repeat";
import "../trigger/ha-automation-trigger-editor";
import "./ha-automation-sidebar-card";
@customElement("ha-automation-sidebar-action")
export default class HaAutomationSidebarAction extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public config!: ActionSidebarConfig;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@state() private _warnings?: string[];
@query(".sidebar-editor")
public editor?: HaAutomationConditionEditor;
protected willUpdate(changedProperties) {
if (changedProperties.has("config")) {
this._warnings = undefined;
if (this.config) {
this.yamlMode = this.config.yamlMode;
if (this.yamlMode) {
this.editor?.yamlEditor?.setValue(this.config.config);
}
}
}
}
protected render() {
const disabled =
this.disabled ||
("enabled" in this.config.config && this.config.config.enabled === false);
const actionType = getAutomationActionType(this.config.config);
const type =
actionType !== "repeat"
? actionType
: `repeat_${getRepeatType((this.config.config as RepeatAction).repeat)}`;
const isBuildingBlock = ACTION_BUILDING_BLOCKS.includes(type || "");
const subtitle = this.hass.localize(
"ui.panel.config.automation.editor.actions.action"
);
const title =
this.hass.localize(
`ui.panel.config.automation.editor.actions.type.${type}.label` as LocalizeKeys
) || type;
const description = isBuildingBlock
? this.hass.localize(
`ui.panel.config.automation.editor.actions.type.${type}.description.picker` as LocalizeKeys
)
: "";
return html`<ha-automation-sidebar-card
.hass=${this.hass}
.isWide=${this.isWide}
.yamlMode=${this.yamlMode}
.warnings=${this._warnings}
>
<span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.rename}
.disabled=${!!disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this._toggleYamlMode}
.disabled=${!this.config.uiSupported || !!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider
slot="menu-items"
role="separator"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
${this.hass.localize(
`ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
)}
<ha-svg-icon
slot="start"
.path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.delete}
.disabled=${this.disabled}
class="warning"
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
${description ||
html`<ha-automation-action-editor
class="sidebar-editor"
.hass=${this.hass}
.action=${this.config.config}
.yamlMode=${this.yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
sidebar
narrow
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-action-editor>`}
</ha-automation-sidebar-card>`;
}
private _handleUiModeNotAvailable(ev: CustomEvent) {
this._warnings = handleStructError(this.hass, ev.detail).warnings;
if (!this.yamlMode) {
this.yamlMode = true;
}
}
private _valueChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
if (this.config) {
fireEvent(this, "value-changed", {
value: {
...this.config,
config: ev.detail.value,
},
});
}
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
static styles = css`
.sidebar-editor {
padding-top: 64px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar-action": HaAutomationSidebarAction;
}
}

151
src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts Normal file
View File

@@ -0,0 +1,151 @@
import { mdiClose, mdiDotsVertical } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/ha-card";
import "../../../../components/ha-dialog-header";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-md-menu-item";
import type { HomeAssistant } from "../../../../types";
import "../ha-automation-editor-warning";
export interface SidebarOverflowMenuEntry {
clickAction: () => void;
disabled?: boolean;
label: string;
icon?: string;
danger?: boolean;
}
export type SidebarOverflowMenu = (SidebarOverflowMenuEntry | "separator")[];
@customElement("ha-automation-sidebar-card")
export default class HaAutomationSidebarCard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@property({ attribute: false }) public warnings?: string[];
protected render() {
return html`
<ha-card
outlined
class=${classMap({
mobile: !this.isWide,
yaml: this.yamlMode,
})}
>
<ha-dialog-header>
<ha-icon-button
slot="navigationIcon"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
@click=${this._closeSidebar}
></ha-icon-button>
<slot slot="title" name="title"></slot>
<slot slot="subtitle" name="subtitle"></slot>
<slot name="overflow-menu" slot="actionItems">
<ha-md-button-menu
@click=${this._openOverflowMenu}
@keydown=${stopPropagation}
@closed=${stopPropagation}
positioning="fixed"
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<slot name="menu-items"></slot>
</ha-md-button-menu>
</slot>
</ha-dialog-header>
${this.warnings
? html`<ha-automation-editor-warning
.localize=${this.hass.localize}
.warnings=${this.warnings}
>
</ha-automation-editor-warning>`
: nothing}
<div class="card-content">
<slot></slot>
</div>
</ha-card>
`;
}
private _closeSidebar() {
fireEvent(this, "close-sidebar");
}
private _openOverflowMenu(ev: MouseEvent) {
ev.stopPropagation();
ev.preventDefault();
}
static styles = css`
ha-card {
height: 100%;
width: 100%;
border-color: var(--primary-color);
border-width: 2px;
display: block;
}
ha-card.mobile {
border-bottom-right-radius: var(--ha-border-radius-square);
border-bottom-left-radius: var(--ha-border-radius-square);
}
@media all and (max-width: 870px) {
ha-card.mobile {
max-height: 70vh;
max-height: 70dvh;
border-width: 2px 2px 0;
}
ha-card.mobile.yaml {
height: 70vh;
height: 70dvh;
}
}
ha-dialog-header {
border-radius: var(--ha-card-border-radius);
}
.card-content {
max-height: calc(100% - 80px);
overflow: auto;
}
@media (min-width: 450px) and (min-height: 500px) {
.card-content {
max-height: calc(100% - 104px);
overflow: auto;
}
}
@media all and (max-width: 870px) {
ha-card.mobile .card-content {
max-height: calc(
70vh - 88px - max(var(--safe-area-inset-bottom), 16px)
);
max-height: calc(
70dvh - 88px - max(var(--safe-area-inset-bottom), 16px)
);
}
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar-card": HaAutomationSidebarCard;
}
}

176
src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts Normal file
View File

@@ -0,0 +1,176 @@
import {
mdiDelete,
mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox,
mdiStopCircleOutline,
} from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { ConditionSidebarConfig } from "../../../../data/automation";
import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
import type { HomeAssistant } from "../../../../types";
import "../condition/ha-automation-condition-editor";
import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor";
import "./ha-automation-sidebar-card";
@customElement("ha-automation-sidebar-condition")
export default class HaAutomationSidebarCondition extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public config!: ConditionSidebarConfig;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@state() private _warnings?: string[];
@query(".sidebar-editor")
public editor?: HaAutomationConditionEditor;
protected willUpdate(changedProperties) {
if (changedProperties.has("config")) {
this._warnings = undefined;
if (this.config) {
this.yamlMode = this.config.yamlMode;
if (this.yamlMode) {
this.editor?.yamlEditor?.setValue(this.config.config);
}
}
}
}
protected render() {
const disabled =
this.disabled ||
("enabled" in this.config.config && this.config.config.enabled === false);
const type = this.config.config.condition;
const isBuildingBlock = CONDITION_BUILDING_BLOCKS.includes(type);
const subtitle = this.hass.localize(
"ui.panel.config.automation.editor.conditions.condition"
);
const title =
this.hass.localize(
`ui.panel.config.automation.editor.conditions.type.${type}.label`
) || type;
const description = isBuildingBlock
? this.hass.localize(
`ui.panel.config.automation.editor.conditions.type.${type}.description.picker`
)
: "";
return html`<ha-automation-sidebar-card
.hass=${this.hass}
.isWide=${this.isWide}
.yamlMode=${this.yamlMode}
.warnings=${this._warnings}
>
<span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.rename}
.disabled=${!!disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this._toggleYamlMode}
.disabled=${!this.config.uiSupported || !!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider
slot="menu-items"
role="separator"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
${this.hass.localize(
`ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
)}
<ha-svg-icon
slot="start"
.path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.delete}
.disabled=${this.disabled}
class="warning"
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
${description ||
html`<ha-automation-condition-editor
class="sidebar-editor"
.hass=${this.hass}
.condition=${this.config.config}
.yamlMode=${this.yamlMode}
.uiSupported=${this.config.uiSupported}
@value-changed=${this._valueChangedSidebar}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-condition-editor> `}
</ha-automation-sidebar-card>`;
}
private _handleUiModeNotAvailable(ev: CustomEvent) {
this._warnings = handleStructError(this.hass, ev.detail).warnings;
if (!this.yamlMode) {
this.yamlMode = true;
}
}
private _valueChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
if (this.config) {
fireEvent(this, "value-changed", {
value: {
...this.config,
config: ev.detail.value,
},
});
}
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
static styles = css`
.sidebar-editor {
padding-top: 64px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar-condition": HaAutomationSidebarCondition;
}
}

84
src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts Normal file
View File

@@ -0,0 +1,84 @@
import { mdiDelete, mdiRenameBox } from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import type { OptionSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types";
import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
import "./ha-automation-sidebar-card";
@customElement("ha-automation-sidebar-option")
export default class HaAutomationSidebarOption extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public config!: OptionSidebarConfig;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@property({ type: Boolean }) public disabled = false;
@query(".sidebar-editor")
public editor?: HaAutomationConditionEditor;
protected render() {
const disabled = this.disabled;
const subtitle = this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.label"
);
const title = this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.option_label"
);
const description = this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.option_description"
);
return html`<ha-automation-sidebar-card
.hass=${this.hass}
.isWide=${this.isWide}
>
<span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.rename}
.disabled=${!!disabled}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider
slot="menu-items"
role="separator"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.delete}
.disabled=${this.disabled}
class="warning"
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.choose.remove_option"
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
${description}
</ha-automation-sidebar-card>`;
}
static styles = css`
.sidebar-editor {
padding-top: 64px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar-option": HaAutomationSidebarOption;
}
}

130
src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts Normal file
View File

@@ -0,0 +1,130 @@
import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { LocalizeKeys } from "../../../../common/translations/localize";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types";
import "../../script/ha-script-field-selector-editor";
import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
import "./ha-automation-sidebar-card";
@customElement("ha-automation-sidebar-script-field-selector")
export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public config!: ScriptFieldSidebarConfig;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@state() private _warnings?: string[];
@query(".sidebar-editor")
public editor?: HaAutomationConditionEditor;
protected willUpdate(changedProperties) {
if (changedProperties.has("config")) {
this._warnings = undefined;
if (this.config) {
this.yamlMode = this.config.yamlMode;
if (this.yamlMode) {
this.editor?.yamlEditor?.setValue(this.config.config);
}
}
}
}
protected render() {
const subtitle = this.hass.localize(
"ui.panel.config.script.editor.field.field_selector"
);
const title =
this.hass.localize(
`ui.components.selectors.selector.types.${Object.keys(this.config.config.field.selector)[0]}` as LocalizeKeys
) || Object.keys(this.config.config.field.selector)[0];
return html`<ha-automation-sidebar-card
.hass=${this.hass}
.isWide=${this.isWide}
.yamlMode=${this.yamlMode}
.warnings=${this._warnings}
>
<span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this._toggleYamlMode}
.disabled=${!!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.delete}
.disabled=${this.disabled}
class="warning"
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
<ha-script-field-selector-editor
class="sidebar-editor"
.hass=${this.hass}
.field=${this.config.config.field}
.disabled=${this.disabled}
@value-changed=${this._valueChangedSidebar}
.yamlMode=${this.yamlMode}
></ha-script-field-selector-editor>
</ha-automation-sidebar-card>`;
}
private _valueChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.({
...this.config.config.field,
key: this.config.config.key,
...ev.detail.value,
});
if (this.config) {
fireEvent(this, "value-changed", {
value: {
...this.config,
config: {
field: ev.detail.value,
key: this.config.config.key,
excludeKeys: this.config.config.excludeKeys,
selector: true,
},
},
});
}
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
static styles = css`
.sidebar-editor {
padding-top: 64px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar-script-field-selector": HaAutomationSidebarScriptFieldSelector;
}
}

124
src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts Normal file
View File

@@ -0,0 +1,124 @@
import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
import type { HomeAssistant } from "../../../../types";
import "../../script/ha-script-field-editor";
import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
import "./ha-automation-sidebar-card";
@customElement("ha-automation-sidebar-script-field")
export default class HaAutomationSidebarScriptField extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public config!: ScriptFieldSidebarConfig;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@state() private _warnings?: string[];
@query(".sidebar-editor")
public editor?: HaAutomationConditionEditor;
protected willUpdate(changedProperties) {
if (changedProperties.has("config")) {
this._warnings = undefined;
if (this.config) {
this.yamlMode = this.config.yamlMode;
if (this.yamlMode) {
this.editor?.yamlEditor?.setValue(this.config.config);
}
}
}
}
protected render() {
const title = this.hass.localize(
"ui.panel.config.script.editor.field.label"
);
return html`<ha-automation-sidebar-card
.hass=${this.hass}
.isWide=${this.isWide}
.yamlMode=${this.yamlMode}
.warnings=${this._warnings}
>
<span slot="title">${title}</span>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this._toggleYamlMode}
.disabled=${!!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.delete}
.disabled=${this.disabled}
class="warning"
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
<ha-script-field-editor
class="sidebar-editor"
.hass=${this.hass}
.field=${this.config.config.field}
.key=${this.config.config.key}
.excludeKeys=${this.config.config.excludeKeys}
.disabled=${this.disabled}
.yamlMode=${this.yamlMode}
@value-changed=${this._valueChangedSidebar}
></ha-script-field-editor>
</ha-automation-sidebar-card>`;
}
private _valueChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.({
...this.config.config.field,
key: ev.detail.value.key ?? this.config.config.key,
...ev.detail.value,
});
if (this.config) {
fireEvent(this, "value-changed", {
value: {
...this.config,
config: {
field: ev.detail.value,
key: ev.detail.value.key ?? this.config.config.key,
excludeKeys: this.config.config.excludeKeys,
},
},
});
}
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
static styles = css`
.sidebar-editor {
padding-top: 64px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar-script-field": HaAutomationSidebarScriptField;
}
}

196
src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts Normal file
View File

@@ -0,0 +1,196 @@
import {
mdiDelete,
mdiIdentifier,
mdiPlayCircleOutline,
mdiPlaylistEdit,
mdiRenameBox,
mdiStopCircleOutline,
} from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import type { TriggerSidebarConfig } from "../../../../data/automation";
import { isTriggerList } from "../../../../data/trigger";
import type { HomeAssistant } from "../../../../types";
import "../trigger/ha-automation-trigger-editor";
import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
import "./ha-automation-sidebar-card";
@customElement("ha-automation-sidebar-trigger")
export default class HaAutomationSidebarTrigger extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public config!: TriggerSidebarConfig;
@property({ type: Boolean, attribute: "wide" }) public isWide = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@state() private _requestShowId = false;
@state() private _warnings?: string[];
@query(".sidebar-editor")
public editor?: HaAutomationTriggerEditor;
protected willUpdate(changedProperties) {
if (changedProperties.has("config")) {
this._requestShowId = false;
this._warnings = undefined;
if (this.config) {
this.yamlMode = this.config.yamlMode;
if (this.yamlMode) {
this.editor?.yamlEditor?.setValue(this.config.config);
}
}
}
}
protected render() {
const disabled =
this.disabled ||
("enabled" in this.config.config && this.config.config.enabled === false);
const type = isTriggerList(this.config.config)
? "list"
: this.config.config.trigger;
const subtitle = this.hass.localize(
"ui.panel.config.automation.editor.triggers.trigger"
);
const title = this.hass.localize(
`ui.panel.config.automation.editor.triggers.type.${type}.label`
);
return html`
<ha-automation-sidebar-card
.hass=${this.hass}
.isWide=${this.isWide}
.yamlMode=${this.yamlMode}
.warnings=${this._warnings}
>
<span slot="title">${title}</span>
<span slot="subtitle">${subtitle}</span>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.rename}
.disabled=${disabled || type === "list"}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.rename"
)}
<ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
</ha-md-menu-item>
${!this.yamlMode &&
!("id" in this.config.config) &&
!this._requestShowId
? html`<ha-md-menu-item
slot="menu-items"
.clickAction=${this._showTriggerId}
.disabled=${disabled || type === "list"}
>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.edit_id"
)}
<ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
</ha-md-menu-item>`
: nothing}
<ha-md-menu-item
slot="menu-items"
.clickAction=${this._toggleYamlMode}
.disabled=${!this.config.uiSupported || !!this._warnings}
>
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
</ha-md-menu-item>
<ha-md-divider
slot="menu-items"
role="separator"
tabindex="-1"
></ha-md-divider>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.disable}
.disabled=${type === "list"}
>
${this.hass.localize(
`ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
)}
<ha-svg-icon
slot="start"
.path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
></ha-svg-icon>
</ha-md-menu-item>
<ha-md-menu-item
slot="menu-items"
.clickAction=${this.config.delete}
.disabled=${this.disabled}
class="warning"
>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
</ha-md-menu-item>
<ha-automation-trigger-editor
class="sidebar-editor"
.hass=${this.hass}
.trigger=${this.config.config}
@value-changed=${this._valueChangedSidebar}
.uiSupported=${this.config.uiSupported}
.showId=${this._requestShowId}
.yamlMode=${this.yamlMode}
.disabled=${this.disabled}
@ui-mode-not-available=${this._handleUiModeNotAvailable}
></ha-automation-trigger-editor>
</ha-automation-sidebar-card>
`;
}
private _handleUiModeNotAvailable(ev: CustomEvent) {
this._warnings = handleStructError(this.hass, ev.detail).warnings;
if (!this.yamlMode) {
this.yamlMode = true;
}
}
private _valueChangedSidebar(ev: CustomEvent) {
ev.stopPropagation();
this.config?.save?.(ev.detail.value);
if (this.config) {
fireEvent(this, "value-changed", {
value: {
...this.config,
config: ev.detail.value,
},
});
}
}
private _toggleYamlMode = () => {
fireEvent(this, "toggle-yaml-mode");
};
private _showTriggerId = () => {
this._requestShowId = true;
};
static styles = css`
.sidebar-editor {
padding-top: 64px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-sidebar-trigger": HaAutomationSidebarTrigger;
}
}

9
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@@ -34,7 +34,11 @@ import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-button-menu";
import "../../../../components/ha-md-divider";
import "../../../../components/ha-md-menu-item";
import type { AutomationClipboard, Trigger } from "../../../../data/automation";
import type {
AutomationClipboard,
Trigger,
TriggerSidebarConfig,
} from "../../../../data/automation";
import { subscribeTrigger } from "../../../../data/automation";
import { describeTrigger } from "../../../../data/automation_i18n";
import { validateConfig } from "../../../../data/config";
@@ -486,10 +490,9 @@ export default class HaAutomationTriggerRow extends LitElement {
disable: this._onDisable,
delete: this._onDelete,
config: trigger || this.trigger,
type: "trigger",
uiSupported: this._uiSupported(this._getType(trigger || this.trigger)),
yamlMode: this._yamlMode,
});
} satisfies TriggerSidebarConfig);
this._selected = true;
}

2
src/panels/config/automation/trigger/ha-automation-trigger.ts
View File

@@ -180,7 +180,9 @@ export default class HaAutomationTrigger extends LitElement {
} else {
row.expand();
}
if (this.narrow) {
row.scrollIntoView();
}
row.focus();
});
}

43
src/panels/config/script/blueprint-script-editor.ts
View File

@@ -1,14 +1,22 @@
import { html, nothing } from "lit";
import { mdiContentSave } from "@mdi/js";
import { css, html, nothing, type CSSResultGroup } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-fab";
import "../../../components/ha-markdown";
import { fetchBlueprints } from "../../../data/blueprint";
import type { BlueprintScriptConfig } from "../../../data/script";
import { saveFabStyles } from "../automation/styles";
import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
@customElement("blueprint-script-editor")
export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
@property({ attribute: false }) public config!: BlueprintScriptConfig;
@property({ type: Boolean }) public saving = false;
@property({ type: Boolean }) public dirty = false;
protected get _config(): BlueprintScriptConfig {
return this.config;
}
@@ -23,12 +31,45 @@ export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
></ha-markdown>`
: nothing}
${this.renderCard()}
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this.saving}
extended
@click=${this._saveScript}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</ha-fab>
`;
}
private _saveScript() {
fireEvent(this, "save-script");
}
protected async _getBlueprints() {
this._blueprints = await fetchBlueprints(this.hass, "script");
}
static get styles(): CSSResultGroup {
return [
HaBlueprintGenericEditor.styles,
saveFabStyles,
css`
:host {
position: relative;
height: 100%;
min-height: calc(100vh - 85px);
min-height: calc(100dvh - 85px);
}
ha-fab {
position: fixed;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {

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

@@ -358,11 +358,8 @@ export class HaScriptEditor extends SubscribeMixin(
</ha-svg-icon>
</ha-list-item>
</ha-button-menu>
<div
class="content ${classMap({
"yaml-mode": this._mode === "yaml",
})}"
>
<div class=${this._mode === "yaml" ? "yaml-mode" : ""}>
<div class="error-wrapper">
${this._errors || stateObj?.state === UNAVAILABLE
? html`<ha-alert
alert-type="error"
@@ -380,17 +377,21 @@ export class HaScriptEditor extends SubscribeMixin(
></ha-svg-icon>`
: nothing}
</ha-alert>`
: ""}
: nothing}
${this._blueprintConfig
? html`<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.script.editor.confirm_take_control"
)}
<div slot="action" style="display: flex;">
<ha-button appearance="plain" @click=${this._takeControlSave}
<ha-button
appearance="plain"
@click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</ha-button
>
<ha-button appearance="plain" @click=${this._revertBlueprint}
<ha-button
appearance="plain"
@click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</ha-button
>
</div>
@@ -411,6 +412,7 @@ export class HaScriptEditor extends SubscribeMixin(
</ha-button>
</ha-alert>`
: nothing}
</div>
${this._mode === "gui"
? html`
<div
@@ -426,7 +428,10 @@ export class HaScriptEditor extends SubscribeMixin(
.isWide=${this.isWide}
.config=${this._config}
.disabled=${this._readOnly}
.saving=${this._saving}
.dirty=${this._dirty}
@value-changed=${this._valueChanged}
@save-script=${this._handleSaveScript}
></blueprint-script-editor>
`
: html`
@@ -437,8 +442,10 @@ export class HaScriptEditor extends SubscribeMixin(
.config=${this._config}
.disabled=${this._readOnly}
.dirty=${this._dirty}
.saving=${this._saving}
@value-changed=${this._valueChanged}
@editor-save=${this._handleSave}
@editor-save=${this._handleSaveScript}
@save-script=${this._handleSaveScript}
></manual-script-editor>
`}
</div>
@@ -451,25 +458,24 @@ export class HaScriptEditor extends SubscribeMixin(
.readOnly=${this._readOnly}
disable-fullscreen
@value-changed=${this._yamlChanged}
@editor-save=${this._handleSave}
@editor-save=${this._handleSaveScript}
.showErrors=${false}
></ha-yaml-editor>`
: nothing}
</div>
></ha-yaml-editor>
<ha-fab
slot="fab"
class=${classMap({
dirty: !this._readOnly && this._dirty,
})}
.label=${this.hass.localize(
"ui.panel.config.script.editor.save_script"
)}
class=${!this._readOnly && this._dirty ? "dirty" : ""}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this._saving}
extended
@click=${this._handleSave}
@click=${this._handleSaveScript}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</ha-fab>
<ha-svg-icon
slot="icon"
.path=${mdiContentSave}
></ha-svg-icon>
</ha-fab>`
: nothing}
</div>
</hass-subpage>
`;
}
@@ -905,7 +911,7 @@ export class HaScriptEditor extends SubscribeMixin(
});
}
private async _handleSave() {
private async _handleSaveScript() {
if (this._yamlErrors) {
showToast(this, {
message: this._yamlErrors,
@@ -1012,7 +1018,7 @@ export class HaScriptEditor extends SubscribeMixin(
protected supportedShortcuts(): SupportedShortcuts {
return {
s: () => this._handleSave(),
s: () => this._handleSaveScript(),
};
}
@@ -1028,33 +1034,40 @@ export class HaScriptEditor extends SubscribeMixin(
return [
haStyle,
css`
p {
margin-bottom: 0;
}
.errors {
padding: 20px;
font-weight: var(--ha-font-weight-bold);
color: var(--error-color);
}
.yaml-mode {
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 0;
}
.config-container,
manual-script-editor,
blueprint-script-editor,
:not(.yaml-mode) > ha-alert {
blueprint-script-editor {
margin: 0 auto;
max-width: 1040px;
padding: 28px 20px 0;
display: block;
}
.config-container ha-alert {
margin-bottom: 16px;
display: block;
:not(.yaml-mode) > .error-wrapper {
position: absolute;
top: 4px;
z-index: 3;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
:not(.yaml-mode) > .error-wrapper ha-alert {
background-color: var(--card-background-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: var(--ha-border-radius-sm);
}
manual-script-editor {
max-width: 1540px;
padding: 0 12px;
}
ha-yaml-editor {
flex-grow: 1;
--actions-border-radius: 0;
@@ -1063,16 +1076,20 @@ export class HaScriptEditor extends SubscribeMixin(
display: flex;
flex-direction: column;
}
p {
margin-bottom: 0;
}
span[slot="introduction"] a {
color: var(--primary-color);
}
ha-fab {
position: relative;
position: fixed;
right: 16px;
bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s;
}
ha-fab.dirty {
bottom: 0;
bottom: 16px;
}
li[role="separator"] {
border-bottom-color: var(--divider-color);
@@ -1105,4 +1122,8 @@ declare global {
interface HTMLElementTagNameMap {
"ha-script-editor": HaScriptEditor;
}
interface HASSDomEvents {
"save-script": undefined;
}
}

187
src/panels/config/script/ha-script-field-editor.ts Normal file
View File

@@ -0,0 +1,187 @@
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import { slugify } from "../../../common/string/slugify";
import "../../../components/ha-alert";
import "../../../components/ha-form/ha-form";
import type { SchemaUnion } from "../../../components/ha-form/types";
import "../../../components/ha-yaml-editor";
import type { Field } from "../../../data/script";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
@customElement("ha-script-field-editor")
export default class HaScriptFieldEditor extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public key!: string;
@property({ attribute: false, type: Array }) public excludeKeys: string[] =
[];
@property({ attribute: false }) public field!: Field;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@state() private _uiError?: Record<string, string>;
@state() private _yamlError?: undefined | "yaml_error" | "key_not_unique";
private _errorKey?: string;
private _schema = memoizeOne(
() =>
[
{
name: "name",
selector: { text: {} },
},
{
name: "key",
selector: { text: {} },
},
{
name: "description",
selector: { text: {} },
},
{
name: "required",
selector: { boolean: {} },
},
] as const
);
protected render() {
const schema = this._schema();
const data = { ...this.field, key: this._errorKey ?? this.key };
const yamlValue = { [this.key]: this.field };
return html`
${this.yamlMode
? html`${this._yamlError
? html`<ha-alert alert-type="error">
${this.hass.localize(
`ui.panel.config.script.editor.field.${this._yamlError}`
)}
</ha-alert>`
: nothing}
<ha-yaml-editor
.hass=${this.hass}
.defaultValue=${yamlValue}
@value-changed=${this._onYamlChange}
></ha-yaml-editor>`
: html`<ha-form
.schema=${schema}
.data=${data}
.error=${this._uiError}
.hass=${this.hass}
.disabled=${this.disabled}
.computeLabel=${this._computeLabelCallback}
.computeError=${this._computeError}
@value-changed=${this._valueChanged}
></ha-form>`}
`;
}
private _maybeSetKey(value): void {
const nameChanged = value.name !== this.field.name;
const keyChanged = value.key !== this.key;
if (!nameChanged || keyChanged) {
return;
}
const slugifyName = this.field.name
? slugify(this.field.name)
: this.hass.localize("ui.panel.config.script.editor.field.field") ||
"field";
const regex = new RegExp(`^${slugifyName}(_\\d)?$`);
if (regex.test(this.key)) {
let key = !value.name
? this.hass.localize("ui.panel.config.script.editor.field.field") ||
"field"
: slugify(value.name);
if (this.excludeKeys.includes(key)) {
let uniqueKey = key;
let i = 2;
do {
uniqueKey = `${key}_${i}`;
i++;
} while (this.excludeKeys.includes(uniqueKey));
key = uniqueKey;
}
value.key = key;
}
}
private _valueChanged(ev: CustomEvent) {
ev.stopPropagation();
const value = { ...ev.detail.value };
this._maybeSetKey(value);
// Don't allow to set an empty key, or duplicate an existing key.
if (!value.key || this.excludeKeys.includes(value.key)) {
this._uiError = value.key
? {
key: "key_not_unique",
}
: {
key: "key_not_null",
};
this._errorKey = value.key ?? "";
return;
}
this._errorKey = undefined;
this._uiError = undefined;
// If we render the default with an incompatible selector, it risks throwing an exception and not rendering.
// Clear the default when changing the selector type.
if (
Object.keys(this.field.selector)[0] !== Object.keys(value.selector)[0]
) {
delete value.default;
}
fireEvent(this, "value-changed", { value });
}
private _onYamlChange(ev: CustomEvent) {
ev.stopPropagation();
const value = { ...ev.detail.value };
if (typeof value !== "object" || Object.keys(value).length !== 1) {
this._yamlError = "yaml_error";
return;
}
const key = Object.keys(value)[0];
if (this.excludeKeys.includes(key)) {
this._yamlError = "key_not_unique";
return;
}
this._yamlError = undefined;
const newValue = { ...value[key], key };
fireEvent(this, "value-changed", { value: newValue });
}
private _computeLabelCallback = (
schema: SchemaUnion<ReturnType<typeof this._schema>>
): string =>
this.hass.localize(`ui.panel.config.script.editor.field.${schema.name}`);
private _computeError = (error: string) =>
this.hass.localize(`ui.panel.config.script.editor.field.${error}` as any) ||
error;
static styles = haStyle;
}
declare global {
interface HTMLElementTagNameMap {
"ha-script-field-editor": HaScriptFieldEditor;
}
}

388
src/panels/config/script/ha-script-field-row.ts
View File

@@ -1,27 +1,24 @@
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import { mdiDelete, mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
import { mdiDelete, mdiDotsVertical } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import { slugify } from "../../../common/string/slugify";
import "../../../components/ha-alert";
import "../../../components/ha-button-menu";
import { preventDefaultStopPropagation } from "../../../common/dom/prevent_default_stop_propagation";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import type { LocalizeKeys } from "../../../common/translations/localize";
import "../../../components/ha-automation-row";
import "../../../components/ha-card";
import "../../../components/ha-form/ha-form";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-list-item";
import type { SchemaUnion } from "../../../components/ha-form/types";
import "../../../components/ha-icon-button";
import "../../../components/ha-yaml-editor";
import "../../../components/ha-md-button-menu";
import "../../../components/ha-md-menu-item";
import type { ScriptFieldSidebarConfig } from "../../../data/automation";
import type { Field } from "../../../data/script";
import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
const preventDefault = (ev) => ev.preventDefault();
import "./ha-script-field-selector-editor";
@customElement("ha-script-field-row")
export default class HaScriptFieldRow extends LitElement {
@@ -36,61 +33,38 @@ export default class HaScriptFieldRow extends LitElement {
@property({ type: Boolean }) public disabled = false;
@state() private _uiError?: Record<string, string>;
@state() private _yamlError?: undefined | "yaml_error" | "key_not_unique";
@property({ type: Boolean }) public narrow = false;
@state() private _yamlMode = false;
private _errorKey?: string;
@state() private _selected = false;
private _schema = memoizeOne(
(selector: any) =>
[
{
name: "name",
selector: { text: {} },
},
{
name: "key",
selector: { text: {} },
},
{
name: "description",
selector: { text: {} },
},
{
name: "selector",
selector: { selector: {} },
},
{
name: "default",
selector: selector && typeof selector === "object" ? selector : {},
},
{
name: "required",
selector: { boolean: {} },
},
] as const
);
@state() private _collapsed = false;
@state() private _selectorRowSelected = false;
@state() private _selectorRowCollapsed = false;
protected render() {
const schema = this._schema(this.field.selector);
const data = { ...this.field, key: this._errorKey ?? this.key };
const yamlValue = { [this.key]: this.field };
return html`
<ha-card outlined>
<ha-expansion-panel left-chevron>
<ha-automation-row
.disabled=${this.disabled}
@click=${this._toggleSidebar}
.selected=${this._selected}
left-chevron
@toggle-collapsed=${this._toggleCollapse}
.collapsed=${this._collapsed}
>
<h3 slot="header">${this.key}</h3>
<slot name="icons" slot="icons"></slot>
<ha-button-menu
<ha-md-button-menu
slot="icons"
@action=${this._handleAction}
@click=${preventDefault}
fixed
@click=${preventDefaultStopPropagation}
@keydown=${stopPropagation}
@closed=${stopPropagation}
positioning="fixed"
>
<ha-icon-button
slot="trigger"
@@ -98,19 +72,9 @@ export default class HaScriptFieldRow extends LitElement {
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item graphic="icon">
${this.hass.localize(
`ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
)}
<ha-svg-icon
slot="graphic"
.path=${mdiPlaylistEdit}
></ha-svg-icon>
</ha-list-item>
<ha-list-item
<ha-md-menu-item
class="warning"
graphic="icon"
.clickAction=${this._onDelete}
.disabled=${this.disabled}
>
${this.hass.localize(
@@ -121,54 +85,144 @@ export default class HaScriptFieldRow extends LitElement {
slot="graphic"
.path=${mdiDelete}
></ha-svg-icon>
</ha-list-item>
</ha-button-menu>
</ha-md-menu-item>
</ha-md-button-menu>
</ha-automation-row>
</ha-card>
<div
class=${classMap({
"card-content": true,
"selector-row": true,
"parent-selected": this._selected,
hidden: this._collapsed,
})}
>
${this._yamlMode
? html` ${this._yamlError
? html`<ha-alert alert-type="error">
${this.hass.localize(
`ui.panel.config.script.editor.field.${this._yamlError}`
<ha-card>
<ha-automation-row
.selected=${this._selectorRowSelected}
@click=${this._toggleSelectorSidebar}
.collapsed=${this._selectorRowCollapsed}
@toggle-collapsed=${this._toggleSelectorRowCollapse}
.leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
Object.keys(this.field.selector)[0]
)}
</ha-alert>`
: nothing}
<ha-yaml-editor
.hass=${this.hass}
.defaultValue=${yamlValue}
@value-changed=${this._onYamlChange}
></ha-yaml-editor>`
: html`<ha-form
.schema=${schema}
.data=${data}
.error=${this._uiError}
.hass=${this.hass}
.disabled=${this.disabled}
.computeLabel=${this._computeLabelCallback}
.computeError=${this._computeError}
@value-changed=${this._valueChanged}
></ha-form>`}
</div>
</ha-expansion-panel>
>
<h3 slot="header">
${this.hass.localize(
`ui.components.selectors.selector.types.${Object.keys(this.field.selector)[0]}` as LocalizeKeys
)}
${this.hass.localize(
"ui.panel.config.script.editor.field.selector"
)}
</h3>
</ha-automation-row>
</ha-card>
${typeof this.field.selector === "object" &&
SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
Object.keys(this.field.selector)[0]
)
? html`
<ha-script-field-selector-editor
class=${this._selectorRowCollapsed ? "hidden" : ""}
.selected=${this._selectorRowSelected}
.hass=${this.hass}
.field=${this.field}
.disabled=${this.disabled}
indent
@value-changed=${this._selectorValueChanged}
.narrow=${this.narrow}
></ha-script-field-selector-editor>
`
: nothing}
</div>
`;
}
private async _handleAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) {
case 0:
this._yamlMode = !this._yamlMode;
break;
case 1:
this._onDelete();
break;
}
private _toggleCollapse() {
this._collapsed = !this._collapsed;
}
private _onDelete() {
private _toggleSelectorRowCollapse() {
this._selectorRowCollapsed = !this._selectorRowCollapsed;
}
private _toggleSidebar(ev: Event) {
ev?.stopPropagation();
if (this._selected) {
this._selected = false;
fireEvent(this, "close-sidebar");
return;
}
this._selected = true;
this.openSidebar();
}
private _toggleSelectorSidebar(ev: Event) {
ev?.stopPropagation();
if (this._selectorRowSelected) {
this._selectorRowSelected = false;
fireEvent(this, "close-sidebar");
return;
}
this._selectorRowSelected = true;
this.openSidebar(true);
}
private _selectorValueChanged(ev: CustomEvent) {
ev.stopPropagation();
fireEvent(this, "value-changed", {
value: {
...this.field,
key: this.key,
...ev.detail.value,
},
});
}
public openSidebar(selectorEditor = false): void {
if (!selectorEditor) {
this._selected = true;
}
if (this.narrow) {
this.scrollIntoView();
}
fireEvent(this, "open-sidebar", {
save: (value) => {
fireEvent(this, "value-changed", { value });
},
close: () => {
if (selectorEditor) {
this._selectorRowSelected = false;
} else {
this._selected = false;
}
fireEvent(this, "close-sidebar");
},
toggleYamlMode: () => {
this._toggleYamlMode();
return this._yamlMode;
},
delete: this._onDelete,
config: {
field: this.field,
selector: selectorEditor,
key: this.key,
excludeKeys: this.excludeKeys,
},
yamlMode: this._yamlMode,
} satisfies ScriptFieldSidebarConfig);
}
private _toggleYamlMode = () => {
this._yamlMode = !this._yamlMode;
};
private _onDelete = () => {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.script.editor.field_delete_confirm_title"
@@ -181,111 +235,12 @@ export default class HaScriptFieldRow extends LitElement {
destructive: true,
confirm: () => {
fireEvent(this, "value-changed", { value: null });
if (this._selected || this._selectorRowSelected) {
fireEvent(this, "close-sidebar");
}
},
});
}
private _onYamlChange(ev: CustomEvent) {
ev.stopPropagation();
const value = { ...ev.detail.value };
if (typeof value !== "object" || Object.keys(value).length !== 1) {
this._yamlError = "yaml_error";
return;
}
const key = Object.keys(value)[0];
if (this.excludeKeys.includes(key)) {
this._yamlError = "key_not_unique";
return;
}
this._yamlError = undefined;
const newValue = { ...value[key], key };
fireEvent(this, "value-changed", { value: newValue });
}
private _maybeSetKey(value): void {
const nameChanged = value.name !== this.field.name;
const keyChanged = value.key !== this.key;
if (!nameChanged || keyChanged) {
return;
}
const slugifyName = this.field.name
? slugify(this.field.name)
: this.hass.localize("ui.panel.config.script.editor.field.field") ||
"field";
const regex = new RegExp(`^${slugifyName}(_\\d)?$`);
if (regex.test(this.key)) {
let key = !value.name
? this.hass.localize("ui.panel.config.script.editor.field.field") ||
"field"
: slugify(value.name);
if (this.excludeKeys.includes(key)) {
let uniqueKey = key;
let i = 2;
do {
uniqueKey = `${key}_${i}`;
i++;
} while (this.excludeKeys.includes(uniqueKey));
key = uniqueKey;
}
value.key = key;
}
}
private _valueChanged(ev: CustomEvent) {
ev.stopPropagation();
const value = { ...ev.detail.value };
this._maybeSetKey(value);
// Don't allow to set an empty key, or duplicate an existing key.
if (!value.key || this.excludeKeys.includes(value.key)) {
this._uiError = value.key
? {
key: "key_not_unique",
}
: {
key: "key_not_null",
};
this._errorKey = value.key ?? "";
return;
}
this._errorKey = undefined;
this._uiError = undefined;
// If we render the default with an incompatible selector, it risks throwing an exception and not rendering.
// Clear the default when changing the selector type.
if (
Object.keys(this.field.selector)[0] !== Object.keys(value.selector)[0]
) {
delete value.default;
}
fireEvent(this, "value-changed", { value });
}
public expand() {
this.updateComplete.then(() => {
this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
});
}
private _computeLabelCallback = (
schema: SchemaUnion<ReturnType<typeof this._schema>>
): string => {
switch (schema.name) {
default:
return this.hass.localize(
`ui.panel.config.script.editor.field.${schema.name}`
);
}
};
private _computeError = (error: string) =>
this.hass.localize(`ui.panel.config.script.editor.field.${error}` as any) ||
error;
static get styles(): CSSResultGroup {
return [
@@ -299,9 +254,8 @@ export default class HaScriptFieldRow extends LitElement {
opacity: 0.5;
pointer-events: none;
}
ha-expansion-panel {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;
.hidden {
display: none;
}
h3 {
margin: 0;
@@ -341,7 +295,7 @@ export default class HaScriptFieldRow extends LitElement {
);
}
ha-list-item[disabled] {
ha-md-menu-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
.warning ul {
@@ -359,6 +313,18 @@ export default class HaScriptFieldRow extends LitElement {
border-color: var(--state-inactive-color);
box-shadow: var(--shadow-default), var(--shadow-focus);
}
.selector-row {
margin-left: 12px;
padding: 12px 4px 16px 16px;
margin-right: -4px;
border-left: 2px solid var(--ha-color-border-neutral-quiet);
}
.selector-row.parent-selected {
border-color: var(--primary-color);
background-color: var(--ha-color-fill-primary-quiet-resting);
border-top-right-radius: var(--ha-border-radius-xl);
border-bottom-right-radius: var(--ha-border-radius-xl);
}
`,
];
}

167
src/panels/config/script/ha-script-field-selector-editor.ts Normal file
View File

@@ -0,0 +1,167 @@
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import type { LocalizeKeys } from "../../../common/translations/localize";
import "../../../components/ha-alert";
import "../../../components/ha-form/ha-form";
import type { SchemaUnion } from "../../../components/ha-form/types";
import "../../../components/ha-yaml-editor";
import type { Field } from "../../../data/script";
import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
@customElement("ha-script-field-selector-editor")
export default class HaScriptFieldSelectorEditor extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public field!: Field;
@property({ type: Boolean }) public narrow = false;
@property({ type: Boolean, reflect: true }) public selected = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public indent = false;
@property({ type: Boolean, attribute: "yaml-mode" }) public yamlMode = false;
@state() private _uiError?: Record<string, string>;
@state() private _yamlError?: undefined | "yaml_error" | "key_not_unique";
private _schema = memoizeOne(
(selector: any) =>
[
...(!this.indent
? [
{
name: "selector",
selector: { selector: {} },
},
]
: []),
...(selector &&
typeof selector === "object" &&
(this.indent ||
!SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(Object.keys(selector)[0]))
? [
{
name: "default",
selector: !this.indent
? selector
: {
[Object.keys(selector)[0]]: {
...selector[Object.keys(selector)[0]],
optionsInSidebar: true,
},
},
},
]
: []),
] as const
);
protected render() {
const schema = this._schema(this.field.selector);
const data = { selector: this.field.selector, default: this.field.default };
return html`
${this.yamlMode
? html`${this._yamlError
? html`<ha-alert alert-type="error">
${this.hass.localize(
`ui.panel.config.script.editor.field.${this._yamlError}`
)}
</ha-alert>`
: nothing}
<ha-yaml-editor
.hass=${this.hass}
.defaultValue=${data}
@value-changed=${this._onYamlChange}
></ha-yaml-editor>`
: html`<ha-form
.schema=${schema}
.data=${data}
.error=${this._uiError}
.hass=${this.hass}
.disabled=${this.disabled}
.computeLabel=${this._computeLabelCallback}
.computeError=${this._computeError}
@value-changed=${this._valueChanged}
.narrow=${this.narrow}
></ha-form>`}
`;
}
private _valueChanged(ev: CustomEvent) {
ev.stopPropagation();
const value = { ...ev.detail.value };
this._uiError = undefined;
// If we render the default with an incompatible selector, it risks throwing an exception and not rendering.
// Clear the default when changing the selector type.
if (
!this.indent &&
Object.keys(this.field.selector)[0] !== Object.keys(value.selector)[0]
) {
value.default = undefined;
}
fireEvent(this, "value-changed", { value });
}
private _onYamlChange(ev: CustomEvent) {
ev.stopPropagation();
const value = { ...ev.detail.value };
if (typeof value !== "object" || Object.keys(value).length !== 2) {
this._yamlError = "yaml_error";
return;
}
fireEvent(this, "value-changed", { value });
}
private _computeLabelCallback = (
schema: SchemaUnion<ReturnType<typeof this._schema>>
): string =>
this.hass.localize(
`ui.panel.config.script.editor.field.${schema.name}` as LocalizeKeys
) ?? schema.name;
private _computeError = (error: string) =>
this.hass.localize(`ui.panel.config.script.editor.field.${error}` as any) ||
error;
static get styles(): CSSResultGroup {
return [
haStyle,
css`
:host([indent]) ha-form {
display: block;
margin-left: 12px;
padding: 12px 20px 16px 16px;
margin-right: -4px;
border-left: 2px solid var(--ha-color-border-neutral-quiet);
}
:host([selected]) ha-form {
border-color: var(--primary-color);
background-color: var(--ha-color-fill-primary-quiet-resting);
border-top-right-radius: var(--ha-border-radius-xl);
border-bottom-right-radius: var(--ha-border-radius-xl);
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-script-field-selector-editor": HaScriptFieldSelectorEditor;
}
}

8
src/panels/config/script/ha-script-fields.ts
View File

@@ -21,6 +21,8 @@ export default class HaScriptFields extends LitElement {
@property({ attribute: false }) public highlightedFields?: Fields;
@property({ type: Boolean }) public narrow = false;
private _focusLastActionOnChange = false;
protected render() {
@@ -39,6 +41,7 @@ export default class HaScriptFields extends LitElement {
@value-changed=${this._fieldChanged}
.hass=${this.hass}
?highlight=${this.highlightedFields?.[key] !== undefined}
.narrow=${this.narrow}
>
</ha-script-field-row>
`
@@ -71,8 +74,11 @@ export default class HaScriptFields extends LitElement {
"ha-script-field-row:last-of-type"
)!;
row.updateComplete.then(() => {
row.expand();
row.openSidebar();
if (this.narrow) {
row.scrollIntoView();
}
row.focus();
});
}

216
src/panels/config/script/manual-script-editor.ts
View File

@@ -1,8 +1,9 @@
import { mdiHelpCircle } from "@mdi/js";
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
import { load } from "js-yaml";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import {
any,
array,
@@ -13,32 +14,27 @@ import {
optional,
string,
} from "superstruct";
import { ensureArray } from "../../../common/array/ensure-array";
import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
import { fireEvent } from "../../../common/dom/fire_event";
import { constructUrlCurrentPath } from "../../../common/url/construct-url";
import {
extractSearchParam,
removeSearchParam,
} from "../../../common/url/search-params";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";
import "../../../components/ha-markdown";
import type { SidebarConfig } from "../../../data/automation";
import type { Action, Fields, ScriptConfig } from "../../../data/script";
import {
getActionType,
MODES,
normalizeScriptConfig,
} from "../../../data/script";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
import "../automation/action/ha-automation-action";
import type HaAutomationAction from "../automation/action/ha-automation-action";
import "../automation/ha-automation-sidebar";
import { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace";
import { saveFabStyles } from "../automation/styles";
import "./ha-script-fields";
import type HaScriptFields from "./ha-script-fields";
import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
import { showToast } from "../../../util/toast";
import { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace";
import { ensureArray } from "../../../common/array/ensure-array";
const scriptConfigStruct = object({
alias: optional(string()),
@@ -60,6 +56,8 @@ export class HaManualScriptEditor extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public saving = false;
@property({ attribute: false }) public config!: ScriptConfig;
@property({ attribute: false }) public dirty = false;
@@ -71,6 +69,8 @@ export class HaManualScriptEditor extends LitElement {
@state() private _pastedConfig?: ScriptConfig;
@state() private _sidebarConfig?: SidebarConfig;
private _previousConfig?: ScriptConfig;
public addFields() {
@@ -99,41 +99,19 @@ export class HaManualScriptEditor extends LitElement {
}
}
protected firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps);
const expanded = extractSearchParam("expanded");
if (expanded === "1") {
this._clearParam("expanded");
const items = this.shadowRoot!.querySelectorAll<HaAutomationAction>(
"ha-automation-action"
);
items.forEach((el) => {
el.updateComplete.then(() => {
el.expandAll();
});
});
}
}
private _clearParam(param: string) {
window.history.replaceState(
null,
"",
constructUrlCurrentPath(removeSearchParam(param))
);
}
protected render() {
private _renderContent() {
return html`
${this.config.description
${
this.config.description
? html`<ha-markdown
class="description"
breaks
.content=${this.config.description}
></ha-markdown>`
: nothing}
${this.config.fields
: nothing
}
${
this.config.fields
? html`<div class="header">
<h2 id="fields-heading" class="name">
${this.hass.localize(
@@ -165,8 +143,12 @@ export class HaManualScriptEditor extends LitElement {
@value-changed=${this._fieldsChanged}
.hass=${this.hass}
.disabled=${this.disabled}
.narrow=${this.narrow}
@open-sidebar=${this._openSidebar}
@close-sidebar=${this._handleCloseSidebar}
></ha-script-fields>`
: nothing}
: nothing
}
<div class="header">
<h2 id="sequence-heading" class="name">
@@ -191,13 +173,47 @@ export class HaManualScriptEditor extends LitElement {
aria-labelledby="sequence-heading"
.actions=${this.config.sequence || []}
.highlightedActions=${this._pastedConfig?.sequence || []}
.path=${["sequence"]}
@value-changed=${this._sequenceChanged}
@open-sidebar=${this._openSidebar}
@close-sidebar=${this._handleCloseSidebar}
.hass=${this.hass}
.narrow=${this.narrow}
.disabled=${this.disabled}
.disabled=${this.disabled || this.saving}
root
sidebar
></ha-automation-action>
</div>`;
}
protected render() {
return html`
<div class="split-view">
<div class="content-wrapper">
<div class="content">${this._renderContent()}</div>
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
.label=${this.hass.localize("ui.common.save")}
.disabled=${this.saving}
extended
@click=${this._saveScript}
>
<ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
</ha-fab>
</div>
<ha-automation-sidebar
class=${classMap({
sidebar: true,
hidden: !this._sidebarConfig,
overlay: !this.isWide,
})}
.isWide=${this.isWide}
.hass=${this.hass}
.config=${this._sidebarConfig}
@value-changed=${this._sidebarConfigChanged}
.disabled=${this.disabled}
></ha-automation-sidebar>
</div>
`;
}
@@ -406,22 +422,116 @@ export class HaManualScriptEditor extends LitElement {
});
}
private _openSidebar(ev: CustomEvent<SidebarConfig>) {
// deselect previous selected row
this._sidebarConfig?.close?.();
this._sidebarConfig = ev.detail;
}
private _sidebarConfigChanged(ev: CustomEvent<{ value: SidebarConfig }>) {
ev.stopPropagation();
if (!this._sidebarConfig) {
return;
}
this._sidebarConfig = {
...this._sidebarConfig,
...ev.detail.value,
};
}
private _closeSidebar() {
if (this._sidebarConfig) {
const closeRow = this._sidebarConfig?.close;
this._sidebarConfig = undefined;
closeRow?.();
}
}
private _handleCloseSidebar() {
this._sidebarConfig = undefined;
}
private _saveScript() {
this._closeSidebar();
fireEvent(this, "save-script");
}
static get styles(): CSSResultGroup {
return [
haStyle,
saveFabStyles,
css`
:host {
display: block;
}
ha-card {
.split-view {
display: flex;
flex-direction: row;
height: 100%;
position: relative;
gap: 16px;
}
.content-wrapper {
position: relative;
flex: 6;
}
.content {
padding: 32px 16px 64px 0;
height: calc(100vh - 153px);
height: calc(100dvh - 153px);
overflow-y: auto;
overflow-x: hidden;
}
.sidebar {
padding: 12px 0;
flex: 4;
height: calc(100vh - 81px);
height: calc(100dvh - 81px);
width: 40%;
}
.sidebar.hidden {
border-color: transparent;
border-width: 0;
overflow: hidden;
flex: 0;
visibility: hidden;
}
.sidebar.overlay {
position: fixed;
bottom: 0;
right: 0;
height: calc(100% - 64px);
padding: 0;
z-index: 5;
}
@media all and (max-width: 870px) {
.sidebar.overlay {
max-height: 70vh;
max-height: 70dvh;
height: auto;
width: 100%;
box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
}
}
@media all and (max-width: 870px) {
.sidebar.overlay.hidden {
height: 0;
}
}
.sidebar.overlay.hidden {
width: 0;
}
.description {
margin: 0;
}
p {
margin-bottom: 0;
}
.header {
display: flex;
align-items: center;

8
src/translations/en.json
View File

@@ -473,6 +473,8 @@
},
"selector": {
"options": "Selector options",
"type": "Type",
"multiple": "Multiple",
"types": {
"action": "Action",
"area": "Area",
@@ -3780,7 +3782,6 @@
"load_error_not_editable": "Only automations in automations.yaml are editable.",
"load_error_not_deletable": "Only automations in automations.yaml can be deleted.",
"load_error_unknown": "Error loading automation ({err_no}).",
"save": "Save",
"unsaved_confirm_title": "Leave editor?",
"unsaved_confirm_text": "Unsaved changes will be lost.",
"alias": "Name",
@@ -4741,7 +4742,9 @@
"link_help_fields": "Learn more about fields.",
"add_fields": "Add fields",
"add_field": "Add field",
"field": "field"
"field": "field",
"label": "Field",
"field_selector": "Field selector"
},
"field_delete_confirm_title": "Delete field?",
"field_delete_confirm_text": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm_text%]",
@@ -4764,7 +4767,6 @@
"load_error_unknown": "Error loading script ({err_no}).",
"delete_confirm_title": "Delete script?",
"delete_confirm_text": "{name} will be permanently deleted.",
"save_script": "Save script",
"sequence": "Sequence",
"sequence_sentence": "The sequence of actions of this script.",
"link_available_actions": "Learn more about available actions.",