Custom Lovelace View Layouts

cast/src/receiver/layout/hc-lovelace.ts

@@ -9,7 +9,6 @@ import {
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
-import "../../../../src/panels/lovelace/views/hui-panel-view";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
@@ -45,22 +44,14 @@ class HcLovelace extends LitElement {
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return this.lovelaceConfig.views[index].panel
-      ? html`
-          <hui-panel-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .config=${this.lovelaceConfig.views[index]}
-          ></hui-panel-view>
-        `
-      : html`
-          <hui-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .index=${index}
-            columns="2"
-          ></hui-view>
-        `;
+    return html`
+      <hui-view
+        .hass=${this.hass}
+        .lovelace=${lovelace}
+        .index=${index}
+        columns="2"
+      ></hui-view>
+    `;
   }
 
   protected updated(changedProps) {

src/data/lovelace.ts

@@ -4,6 +4,12 @@ import {
   HassEventBase,
 } from "home-assistant-js-websocket";
 import { HASSDomEvent } from "../common/dom/fire_event";
+import { HuiErrorCard } from "../panels/lovelace/cards/hui-error-card";
+import {
+  Lovelace,
+  LovelaceBadge,
+  LovelaceCard,
+} from "../panels/lovelace/types";
 import { HomeAssistant } from "../types";
 
 export interface LovelacePanelConfig {
@@ -69,6 +75,7 @@ export interface LovelaceDashboardCreateParams
 export interface LovelaceViewConfig {
   index?: number;
   title?: string;
+  type?: string;
   badges?: Array<string | LovelaceBadgeConfig>;
   cards?: LovelaceCardConfig[];
   path?: string;
@@ -79,6 +86,14 @@ export interface LovelaceViewConfig {
   visible?: boolean | ShowViewConfig[];
 }
 
+export interface LovelaceViewElement extends HTMLElement {
+  hass?: HomeAssistant;
+  lovelace?: Lovelace;
+  index?: number;
+  cards?: Array<LovelaceCard | HuiErrorCard>;
+  badges?: LovelaceBadge[];
+}
+
 export interface ShowViewConfig {
   user?: string;
 }
@@ -91,6 +106,7 @@ export interface LovelaceBadgeConfig {
 export interface LovelaceCardConfig {
   index?: number;
   view_index?: number;
+  layout?: any;
   type: string;
   [key: string]: any;
 }

src/panels/lovelace/create-element/create-element-base.ts

@@ -2,9 +2,12 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import {
   LovelaceBadgeConfig,
   LovelaceCardConfig,
+  LovelaceViewConfig,
+  LovelaceViewElement,
 } from "../../../data/lovelace";
 import { CUSTOM_TYPE_PREFIX } from "../../../data/lovelace_custom_cards";
 import type { HuiErrorCard } from "../cards/hui-error-card";
+import type { ErrorCardConfig } from "../cards/types";
 import { LovelaceElement, LovelaceElementConfig } from "../elements/types";
 import { LovelaceRow, LovelaceRowConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
@@ -14,7 +17,6 @@ import {
   LovelaceCardConstructor,
   LovelaceHeaderFooter,
 } from "../types";
-import type { ErrorCardConfig } from "../cards/types";
 
 const TIMEOUT = 2000;
 
@@ -44,6 +46,11 @@ interface CreateElementConfigTypes {
     element: LovelaceHeaderFooter;
     constructor: unknown;
   };
+  view: {
+    config: LovelaceViewConfig;
+    element: LovelaceViewElement;
+    constructor: unknown;
+  };
 }
 
 export const createErrorCardElement = (config: ErrorCardConfig) => {

src/panels/lovelace/create-element/create-view-element.ts

@@ -0,0 +1,23 @@
+import {
+  LovelaceViewConfig,
+  LovelaceViewElement,
+} from "../../../data/lovelace";
+import "../views/hui-masonry-view";
+import { createLovelaceElement } from "./create-element-base";
+
+const ALWAYS_LOADED_LAYOUTS = new Set(["masonry"]);
+
+const LAZY_LOAD_LAYOUTS = {
+  panel: () => import("../views/hui-panel-view"),
+};
+
+export const createViewElement = (
+  config: LovelaceViewConfig
+): LovelaceViewElement => {
+  return createLovelaceElement(
+    "view",
+    config,
+    ALWAYS_LOADED_LAYOUTS,
+    LAZY_LOAD_LAYOUTS
+  );
+};

src/panels/lovelace/hui-root.ts

@@ -58,17 +58,14 @@ import { swapView } from "./editor/config-util";
 import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovelace-dialog";
 import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog";
 import type { Lovelace } from "./types";
-import "./views/hui-panel-view";
-import type { HUIPanelView } from "./views/hui-panel-view";
-import { HUIView } from "./views/hui-view";
+import "./views/hui-view";
+import type { HUIView } from "./views/hui-view";
 
 class HUIRoot extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public lovelace?: Lovelace;
 
-  @property() public columns?: number;
-
   @property({ type: Boolean }) public narrow = false;
 
   @property() public route?: { path: string; prefix: string };
@@ -396,15 +393,7 @@ class HUIRoot extends LitElement {
     super.updated(changedProperties);
 
     const view = this._viewRoot;
-    const huiView = view.lastChild as HUIView | HUIPanelView;
-
-    if (
-      changedProperties.has("columns") &&
-      huiView &&
-      huiView instanceof HUIView
-    ) {
-      huiView.columns = this.columns;
-    }
+    const huiView = view.lastChild as HUIView;
 
     if (changedProperties.has("hass") && huiView) {
       huiView.hass = this.hass;
@@ -675,15 +664,8 @@ class HUIRoot extends LitElement {
     if (!force && this._viewCache![viewIndex]) {
       view = this._viewCache![viewIndex];
     } else {
-      if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) {
-        view = document.createElement("hui-panel-view");
-        view.config = viewConfig;
-        view.index = viewIndex;
-      } else {
-        view = document.createElement("hui-view");
-        view.columns = this.columns;
-        view.index = viewIndex;
-      }
+      view = document.createElement("hui-view");
+      view.index = viewIndex;
       this._viewCache![viewIndex] = view;
     }