Allow data passed from editor to preview

This commit is contained in:
Thomas Lovén 2022-05-31 11:13:41 +00:00
parent 0183e32267
commit 5bc2fd059c
3 changed files with 23 additions and 1 deletions

View File

@ -12,6 +12,8 @@ export class HuiCardPreview extends ReactiveElement {
@property() public config?: LovelaceCardConfig; @property() public config?: LovelaceCardConfig;
@property() public editMode = true;
private _element?: LovelaceCard; private _element?: LovelaceCard;
private get _error() { private get _error() {
@ -81,6 +83,9 @@ export class HuiCardPreview extends ReactiveElement {
this._element.hass = this.hass; this._element.hass = this.hass;
} }
} }
if (changedProperties.has("editMode")) {
this._element!.editMode = this.editMode;
}
} }
private _createCard(configValue: LovelaceCardConfig): void { private _createCard(configValue: LovelaceCardConfig): void {
@ -90,6 +95,7 @@ export class HuiCardPreview extends ReactiveElement {
if (this.hass) { if (this.hass) {
this._element!.hass = this.hass; this._element!.hass = this.hass;
} }
this._element!.editMode = this.editMode;
this.appendChild(this._element!); this.appendChild(this._element!);
} }

View File

@ -43,6 +43,13 @@ declare global {
interface HTMLElementEventMap { interface HTMLElementEventMap {
"reload-lovelace": HASSDomEvent<undefined>; "reload-lovelace": HASSDomEvent<undefined>;
} }
interface HASSDomEvents {
"edit-mode-changed": any;
}
interface HTMLElementEventMap {
"edit-mode-changed": HASSDomEvent<any>;
}
} }
@customElement("hui-dialog-edit-card") @customElement("hui-dialog-edit-card")
@ -77,10 +84,13 @@ export class HuiDialogEditCard
@state() private _isEscapeEnabled = true; @state() private _isEscapeEnabled = true;
@state() private _editMode = true;
public async showDialog(params: EditCardDialogParams): Promise<void> { public async showDialog(params: EditCardDialogParams): Promise<void> {
this._params = params; this._params = params;
this._GUImode = true; this._GUImode = true;
this._guiModeAvailable = true; this._guiModeAvailable = true;
this._editMode = true;
const [view, card] = params.path; const [view, card] = params.path;
this._viewConfig = params.lovelaceConfig.views[view]; this._viewConfig = params.lovelaceConfig.views[view];
this._cardConfig = this._cardConfig =
@ -205,6 +215,7 @@ export class HuiDialogEditCard
.lovelace=${this._params.lovelaceConfig} .lovelace=${this._params.lovelaceConfig}
.value=${this._cardConfig} .value=${this._cardConfig}
@config-changed=${this._handleConfigChanged} @config-changed=${this._handleConfigChanged}
@edit-mode-changed=${this._handleEditModeChanged}
@GUImode-changed=${this._handleGUIModeChanged} @GUImode-changed=${this._handleGUIModeChanged}
@editor-save=${this._save} @editor-save=${this._save}
dialogInitialFocus dialogInitialFocus
@ -214,6 +225,7 @@ export class HuiDialogEditCard
<hui-card-preview <hui-card-preview
.hass=${this.hass} .hass=${this.hass}
.config=${this._cardConfig} .config=${this._cardConfig}
.editMode=${this._editMode}
class=${this._error ? "blur" : ""} class=${this._error ? "blur" : ""}
></hui-card-preview> ></hui-card-preview>
${this._error ${this._error
@ -284,6 +296,10 @@ export class HuiDialogEditCard
this._dirty = true; this._dirty = true;
} }
private _handleEditModeChanged(ev: HASSDomEvent<any>) {
this._editMode = ev.detail ?? true;
}
private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void { private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
ev.stopPropagation(); ev.stopPropagation();
this._GUImode = ev.detail.guiMode; this._GUImode = ev.detail.guiMode;

View File

@ -38,7 +38,7 @@ export interface LovelaceBadge extends HTMLElement {
export interface LovelaceCard extends HTMLElement { export interface LovelaceCard extends HTMLElement {
hass?: HomeAssistant; hass?: HomeAssistant;
isPanel?: boolean; isPanel?: boolean;
editMode?: boolean; editMode?: any;
getCardSize(): number | Promise<number>; getCardSize(): number | Promise<number>;
setConfig(config: LovelaceCardConfig): void; setConfig(config: LovelaceCardConfig): void;
} }