Add vertical and horizontal layout to features

src/panels/lovelace/card-features/hui-card-features.ts

@@ -10,6 +10,7 @@ import {
 import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import type { HuiErrorCard } from "../cards/hui-error-card";
+import { LovelaceCardFeatureLayout } from "../cards/types";
 import { createCardFeatureElement } from "../create-element/create-card-feature-element";
 import type { LovelaceCardFeature } from "../types";
 import type { LovelaceCardFeatureConfig } from "./types";
@@ -22,6 +23,8 @@ export class HuiCardFeatures extends LitElement {
 
   @property({ attribute: false }) public features?: LovelaceCardFeatureConfig[];
 
+  @property({ attribute: false }) public layout?: LovelaceCardFeatureLayout;
+
   @property({ attribute: false }) public color?: string;
 
   private _featuresElements = new WeakMap<
@@ -58,10 +61,15 @@ export class HuiCardFeatures extends LitElement {
     if (!this.features) {
       return nothing;
     }
+
+    const containerClass = this.layout?.type ? ` ${this.layout.type}` : "";
+
     return html`
-      ${this.features.map((featureConf) =>
-        this.renderFeature(featureConf, this.stateObj)
-      )}
+      <div class="container${containerClass}">
+        ${this.features.map((featureConf) =>
+          this.renderFeature(featureConf, this.stateObj)
+        )}
+      </div>
     `;
   }
 
@@ -69,8 +77,21 @@ export class HuiCardFeatures extends LitElement {
     return css`
       :host {
         --feature-color: var(--state-icon-color);
+        --feature-padding: 12px;
+      }
+      .container {
         display: flex;
         flex-direction: column;
+        padding: var(--feature-padding);
+        padding-top: 0px;
+        gap: var(--feature-padding);
+      }
+      .container.horizontal {
+        display: flex;
+        flex-direction: row;
+      }
+      .container.horizontal > * {
+        flex: 1;
       }
     `;
   }

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -208,7 +208,6 @@ class HuiClimateHvacModesCardFeature
         --control-select-button-border-radius: 10px;
       }
       .container {
-        padding: 0 12px 12px 12px;
         width: auto;
       }
     `;

src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts

@@ -216,7 +216,6 @@ class HuiClimatePresetModesCardFeature
         --control-select-button-border-radius: 10px;
       }
       .container {
-        padding: 0 12px 12px 12px;
         width: auto;
       }
     `;

src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts

@@ -94,7 +94,6 @@ class HuiLightBrightnessCardFeature
         --control-slider-border-radius: 10px;
       }
       .container {
-        padding: 0 12px 12px 12px;
         width: auto;
       }
     `;

src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts

@@ -120,7 +120,6 @@ class HuiLightColorTempCardFeature
         --control-slider-border-radius: 10px;
       }
       .container {
-        padding: 0 12px 12px 12px;
         width: auto;
       }
     `;

src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts

@@ -285,7 +285,6 @@ class HuiTargetTemperatureCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;

src/panels/lovelace/cards/hui-tile-card.ts

@@ -428,6 +428,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .color=${this._config.color}
                 .features=${this._config.features}
+                .layout=${this._config.feature_layout}
               ></hui-card-features>
             `
           : nothing}

src/panels/lovelace/cards/types.ts

@@ -24,6 +24,10 @@ export type AlarmPanelCardConfigState =
   | "arm_vacation"
   | "arm_custom_bypass";
 
+export type LovelaceCardFeatureLayout = {
+  type?: "vertical" | "horizontal" | "compact";
+};
+
 export interface AlarmPanelCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string;
@@ -506,4 +510,5 @@ export interface TileCardConfig extends LovelaceCardConfig {
   double_tap_action?: ActionConfig;
   icon_tap_action?: ActionConfig;
   features?: LovelaceCardFeatureConfig[];
+  feature_layout?: LovelaceCardFeatureLayout;
 }

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -3,10 +3,16 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-button";
+import {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-sortable";
@@ -45,7 +51,9 @@ import { supportsUpdateActionsCardFeature } from "../../card-features/hui-update
 import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
 import { supportsWaterHeaterOperationModesCardFeature } from "../../card-features/hui-water-heater-operation-modes-card-feature";
 import { LovelaceCardFeatureConfig } from "../../card-features/types";
+import { LovelaceCardFeatureLayout } from "../../cards/types";
 import { getCardFeatureElementClass } from "../../create-element/create-card-feature-element";
+import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 
 export type FeatureType = LovelaceCardFeatureConfig["type"];
 type SupportsFeature = (stateObj: HassEntity) => boolean;
@@ -142,6 +150,9 @@ declare global {
     "features-changed": {
       features: LovelaceCardFeatureConfig[];
     };
+    "layout-changed": {
+      layout: LovelaceCardFeatureLayout;
+    };
   }
 }
 
@@ -154,6 +165,9 @@ export class HuiCardFeaturesEditor extends LitElement {
   @property({ attribute: false })
   public features?: LovelaceCardFeatureConfig[];
 
+  @property({ attribute: false })
+  public layout?: LovelaceCardFeatureLayout;
+
   @property({ attribute: false })
   public featuresTypes?: FeatureType[];
 
@@ -162,6 +176,37 @@ export class HuiCardFeaturesEditor extends LitElement {
 
   private _featuresKeys = new WeakMap<LovelaceCardFeatureConfig, string>();
 
+  private _optionsSchema = memoizeOne(
+    (_localize: LocalizeFunc) =>
+      [
+        {
+          name: "type",
+          selector: {
+            select: {
+              mode: "dropdown",
+              options: ["vertical", "horizontal", "compact"].map((layout) => ({
+                label: capitalizeFirstLetter(layout),
+                value: layout,
+              })),
+            },
+          },
+        },
+      ] as const satisfies readonly HaFormSchema[]
+  );
+
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._optionsSchema>>
+  ) => {
+    switch (schema.name) {
+      case "type":
+        return "Layout";
+      default:
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+    }
+  };
+)
   private _supportsFeatureType(type: string): boolean {
     if (!this.stateObj) return false;
 
@@ -235,6 +280,14 @@ export class HuiCardFeaturesEditor extends LitElement {
       isCustomType(type)
     );
 
+    const schema = this._optionsSchema(this.hass.localize);
+
+    const data = { ...this.layout };
+
+    if (!data.type) {
+      data.type = "vertical";
+    }
+
     return html`
       <ha-expansion-panel outlined>
         <h3 slot="header">
@@ -251,6 +304,17 @@ export class HuiCardFeaturesEditor extends LitElement {
                 </ha-alert>
               `
             : nothing}
+          ${supportedFeaturesType.length > 0
+            ? html`
+                <ha-form
+                  .hass=${this.hass}
+                  .data=${data}
+                  .schema=${schema}
+                  .computeLabel=${this._computeLabelCallback}
+                  @value-changed=${this._layoutChanged}
+                ></ha-form>
+              `
+            : nothing}
           <ha-sortable
             handle-selector=".handle"
             @item-moved=${this._featureMoved}
@@ -385,11 +449,17 @@ export class HuiCardFeaturesEditor extends LitElement {
 
   private _removeFeature(ev: CustomEvent): void {
     const index = (ev.currentTarget as any).index;
-    const newfeatures = this.features!.concat();
+    const newFeatures = this.features!.concat();
 
-    newfeatures.splice(index, 1);
+    newFeatures.splice(index, 1);
 
-    fireEvent(this, "features-changed", { features: newfeatures });
+    fireEvent(this, "features-changed", { features: newFeatures });
+  }
+
+  private _layoutChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const layout = ev.detail.value;
+    fireEvent(this, "layout-changed", { layout });
   }
 
   private _editFeature(ev: CustomEvent): void {

src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts

@@ -4,7 +4,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import {
-  any,
   array,
   assert,
   assign,
@@ -29,11 +28,15 @@ import {
   LovelaceCardFeatureContext,
 } from "../../card-features/types";
 import { getEntityDefaultTileIconAction } from "../../cards/hui-tile-card";
-import type { TileCardConfig } from "../../cards/types";
+import type {
+  LovelaceCardFeatureLayout,
+  TileCardConfig,
+} from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { cardFeatureConfig } from "../structs/card-feature-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
@@ -93,6 +96,7 @@ const HIDDEN_ATTRIBUTES = [
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
+  cardFeatureConfig,
   object({
     entity: optional(string()),
     name: optional(string()),
@@ -104,7 +108,6 @@ const cardConfigStruct = assign(
     vertical: optional(boolean()),
     tap_action: optional(actionConfigStruct),
     icon_tap_action: optional(actionConfigStruct),
-    features: optional(array(any())),
   })
 );
 
@@ -299,6 +302,8 @@ export class HuiTileCardEditor
         .stateObj=${stateObj}
         .features=${this._config!.features ?? []}
         @features-changed=${this._featuresChanged}
+        .layout=${this._config!.feature_layout}
+        @layout-changed=${this._layoutChanged}
         @edit-detail-element=${this._editDetailElement}
       ></hui-card-features-editor>
     `;
@@ -351,6 +356,21 @@ export class HuiTileCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
+  private _layoutChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const layout = ev.detail.layout as LovelaceCardFeatureLayout;
+    const config: TileCardConfig = {
+      ...this._config,
+      feature_layout: layout,
+    };
+
+    fireEvent(this, "config-changed", { config });
+  }
+
   private subElementChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     if (!this._config || !this.hass) {

src/panels/lovelace/editor/structs/card-feature-struct.ts

@@ -0,0 +1,10 @@
+import { any, array, enums, object, optional } from "superstruct";
+
+export const cardFeatureConfig = object({
+  features: optional(array(any())),
+  feature_layout: optional(
+    object({
+      type: enums(["vertical", "horizontal", "compact"]),
+    })
+  ),
+});