Add maximum number of columns option for section view (#20145)

* Add maximum number of columns option for section view

* Add comment

src/data/lovelace/config/view.ts

@@ -18,6 +18,7 @@ export interface LovelaceBaseViewConfig {
   visible?: boolean | ShowViewConfig[];
   subview?: boolean;
   back_path?: string;
+  max_columns?: number; // Only used for section view, it should move to a section view config type when the views will have dedicated editor.
 }
 
 export interface LovelaceViewConfig extends LovelaceBaseViewConfig {

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -37,7 +37,7 @@ export class HuiViewEditor extends LitElement {
   private _suggestedPath = false;
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc) =>
+    (localize: LocalizeFunc, viewType: string) =>
       [
         { name: "title", selector: { text: {} } },
         {
@@ -68,6 +68,20 @@ export class HuiViewEditor extends LitElement {
             },
           },
         },
+        ...(viewType === SECTION_VIEW_LAYOUT
+          ? ([
+              {
+                name: "max_columns",
+                selector: {
+                  number: {
+                    min: 1,
+                    max: 10,
+                    mode: "slider",
+                  },
+                },
+              },
+            ] as const satisfies HaFormSchema[])
+          : []),
         {
           name: "subview",
           selector: {
@@ -95,13 +109,17 @@ export class HuiViewEditor extends LitElement {
       return nothing;
     }
 
-    const schema = this._schema(this.hass.localize);
+    const schema = this._schema(this.hass.localize, this._type);
 
     const data = {
       ...this._config,
       type: this._type,
     };
 
+    if (data.max_columns === undefined && this._type === SECTION_VIEW_LAYOUT) {
+      data.max_columns = 4;
+    }
+
     return html`
       <ha-form
         .hass=${this.hass}
@@ -117,10 +135,14 @@ export class HuiViewEditor extends LitElement {
   private _valueChanged(ev: CustomEvent): void {
     const config = ev.detail.value as LovelaceViewConfig;
 
-    if (config.type === "masonry") {
+    if (config.type === DEFAULT_VIEW_LAYOUT) {
       delete config.type;
     }
 
+    if (config.type !== SECTION_VIEW_LAYOUT) {
+      delete config.max_columns;
+    }
+
     if (
       this.isNew &&
       !this._suggestedPath &&
@@ -144,6 +166,10 @@ export class HuiViewEditor extends LitElement {
         return this.hass.localize("ui.panel.lovelace.editor.edit_view.type");
       case "subview":
         return this.hass.localize("ui.panel.lovelace.editor.edit_view.subview");
+      case "max_columns":
+        return this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.max_columns"
+        );
       default:
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`

src/panels/lovelace/views/hui-sections-view.ts

@@ -58,6 +58,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     const editMode = this.lovelace.editMode;
 
+    const sectionCount = sectionsConfig.length + (editMode ? 1 : 0);
+    const maxColumnsCount = this._config?.max_columns;
+
     return html`
       ${this.badges.length > 0
         ? html`<div class="badges">${this.badges}</div>`
@@ -73,7 +76,8 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         <div
           class="container"
           style=${styleMap({
-            "--total-count": String(sectionsConfig.length + (editMode ? 1 : 0)),
+            "--max-columns-count": maxColumnsCount,
+            "--total-count": sectionCount,
           })}
         >
           ${repeat(
@@ -232,7 +236,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        --max-column-count: 4;
         --row-gap: var(--ha-view-sections-row-gap, 8px);
         --column-gap: var(--ha-view-sections-column-gap, 32px);
         --column-min-width: var(--ha-view-sections-column-min-width, 320px);
@@ -259,7 +262,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       }
 
       .container {
-        --max-count: min(var(--total-count), var(--max-column-count));
+        --max-count: min(var(--total-count), var(--max-columns-count, 4));
         --max-width: min(
           calc(
             (var(--max-count) + 1) * var(--column-min-width) +

src/translations/en.json

@@ -5355,6 +5355,7 @@
               "sections": "Sections (experimental)"
             },
             "subview": "Subview",
+            "max_columns": "Max number of columns",
             "subview_helper": "Subviews don't appear in tabs and have a back button.",
             "edit_ui": "Edit in visual editor",
             "edit_yaml": "Edit in YAML",