108 lines
2.8 KiB
TypeScript
108 lines
2.8 KiB
TypeScript
import {
|
|
html,
|
|
LitElement,
|
|
TemplateResult,
|
|
customElement,
|
|
property,
|
|
} from "lit-element";
|
|
import "@polymer/paper-input/paper-input";
|
|
import "@polymer/paper-input/paper-textarea";
|
|
|
|
import { struct } from "../../common/structs/struct";
|
|
import { EntitiesEditorEvent, EditorTarget } from "../types";
|
|
import { HomeAssistant } from "../../../../types";
|
|
import { LovelaceCardEditor } from "../../types";
|
|
import { fireEvent } from "../../../../common/dom/fire_event";
|
|
import { configElementStyle } from "./config-elements-style";
|
|
import { MarkdownCardConfig } from "../../cards/types";
|
|
|
|
const cardConfigStruct = struct({
|
|
type: "string",
|
|
title: "string?",
|
|
content: "string",
|
|
});
|
|
|
|
@customElement("hui-markdown-card-editor")
|
|
export class HuiMarkdownCardEditor extends LitElement
|
|
implements LovelaceCardEditor {
|
|
@property() public hass?: HomeAssistant;
|
|
|
|
@property() private _config?: MarkdownCardConfig;
|
|
|
|
public setConfig(config: MarkdownCardConfig): void {
|
|
config = cardConfigStruct(config);
|
|
this._config = config;
|
|
}
|
|
|
|
get _title(): string {
|
|
return this._config!.title || "";
|
|
}
|
|
|
|
get _content(): string {
|
|
return this._config!.content || "";
|
|
}
|
|
|
|
protected render(): TemplateResult | void {
|
|
if (!this.hass) {
|
|
return html``;
|
|
}
|
|
|
|
return html`
|
|
${configElementStyle}
|
|
<div class="card-config">
|
|
<paper-input
|
|
.label="${this.hass.localize(
|
|
"ui.panel.lovelace.editor.card.generic.title"
|
|
)} (${this.hass.localize(
|
|
"ui.panel.lovelace.editor.card.config.optional"
|
|
)})"
|
|
.value="${this._title}"
|
|
.configValue="${"title"}"
|
|
@value-changed="${this._valueChanged}"
|
|
></paper-input>
|
|
<paper-textarea
|
|
.label="${this.hass.localize(
|
|
"ui.panel.lovelace.editor.card.markdown.content"
|
|
)} (${this.hass.localize(
|
|
"ui.panel.lovelace.editor.card.config.required"
|
|
)})"
|
|
.value="${this._content}"
|
|
.configValue="${"content"}"
|
|
@value-changed="${this._valueChanged}"
|
|
autocapitalize="none"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
></paper-textarea>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private _valueChanged(ev: EntitiesEditorEvent): void {
|
|
if (!this._config || !this.hass) {
|
|
return;
|
|
}
|
|
const target = ev.target! as EditorTarget;
|
|
|
|
if (this[`_${target.configValue}`] === target.value) {
|
|
return;
|
|
}
|
|
if (target.configValue) {
|
|
if (target.value === "") {
|
|
delete this._config[target.configValue!];
|
|
} else {
|
|
this._config = {
|
|
...this._config,
|
|
[target.configValue!]: target.value,
|
|
};
|
|
}
|
|
}
|
|
fireEvent(this, "config-changed", { config: this._config });
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"hui-markdown-card-editor": HuiMarkdownCardEditor;
|
|
}
|
|
}
|