Fix cursor jump when dragging slider

src/components/ha-grid-size-picker.ts

@@ -68,7 +68,7 @@ export class HaGridSizeEditor extends LitElement {
           .min=${columnMin}
           .max=${columnMax}
           .range=${this.columns}
-          .value=${fullWidth ? this.columns : columnValue}
+          .value=${fullWidth ? this.columns : this.value?.columns}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
           .disabled=${disabledColumns}
@@ -83,7 +83,7 @@ export class HaGridSizeEditor extends LitElement {
           .max=${rowMax}
           .range=${this.rows}
           vertical
-          .value=${rowValue}
+          .value=${autoHeight ? rowMin : this.value?.rows}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
           .disabled=${disabledRows}

src/data/lovelace/config/card.ts

@@ -1,11 +1,16 @@
 import type { Condition } from "../../../panels/lovelace/common/validate-condition";
-import type { LovelaceLayoutOptions } from "../../../panels/lovelace/types";
+import type {
+  LovelaceGridOptions,
+  LovelaceLayoutOptions,
+} from "../../../panels/lovelace/types";
 
 export interface LovelaceCardConfig {
   index?: number;
   view_index?: number;
   view_layout?: any;
+  /** @deprecated Use `grid_options` instead */
   layout_options?: LovelaceLayoutOptions;
+  grid_options?: LovelaceGridOptions;
   type: string;
   [key: string]: any;
   visibility?: Condition[];

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

@@ -5,6 +5,7 @@ import { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../types";
+import { migrateLayoutToGridOptions } from "../common/compute-card-grid-size";
 import { computeCardSize } from "../common/compute-card-size";
 import {
   attachConditionMediaQueriesListeners,
@@ -12,7 +13,7 @@ import {
 } from "../common/validate-condition";
 import { createCardElement } from "../create-element/create-card-element";
 import { createErrorCardConfig } from "../create-element/create-element-base";
-import type { LovelaceCard, LovelaceLayoutOptions } from "../types";
+import type { LovelaceCard, LovelaceGridOptions } from "../types";
 
 declare global {
   interface HASSDomEvents {
@@ -67,20 +68,44 @@ export class HuiCard extends ReactiveElement {
     return 1;
   }
 
-  public getLayoutOptions(): LovelaceLayoutOptions {
+  public getGridOptions(): LovelaceGridOptions {
-    const configOptions = this.config?.layout_options ?? {};
+    const elementOptions = this.getElementGridOptions();
-    if (this._element) {
+    const configOptions = this.getConfigGridOptions();
-      const cardOptions = this._element.getLayoutOptions?.() ?? {};
+    return {
-      return {
+      ...elementOptions,
-        ...cardOptions,
+      ...configOptions,
-        ...configOptions,
+    };
-      };
-    }
-    return configOptions;
   }
 
-  public getElementLayoutOptions(): LovelaceLayoutOptions {
+  // options provided by the element
-    return this._element?.getLayoutOptions?.() ?? {};
+  public getElementGridOptions(): LovelaceGridOptions {
+    if (!this._element) return {};
+
+    if (this._element.getGridOptions) {
+      return this._element.getGridOptions();
+    }
+    if (this._element.getLayoutOptions) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `This card (${this.config?.type}) is using "getLayoutOptions" and it is deprecated, contact the developer to suggest to use "getGridOptions" instead`
+      );
+      const config = migrateLayoutToGridOptions(
+        this._element.getLayoutOptions()
+      );
+      return config;
+    }
+    return {};
+  }
+
+  // options provided by the config
+  public getConfigGridOptions(): LovelaceGridOptions {
+    if (this.config?.grid_options) {
+      return this.config.grid_options;
+    }
+    if (this.config?.layout_options) {
+      return migrateLayoutToGridOptions(this.config.layout_options);
+    }
+    return {};
   }
 
   private _updateElement(config: LovelaceCardConfig) {

src/panels/lovelace/common/compute-card-grid-size.ts

@@ -1,8 +1,34 @@
 import { conditionalClamp } from "../../../common/number/clamp";
-import { LovelaceLayoutOptions } from "../types";
+import { LovelaceGridOptions, LovelaceLayoutOptions } from "../types";
+
+const GRID_COLUMN_MULTIPLIER = 3;
+
+const multiplyBy = <T extends number | string | undefined>(
+  value: T,
+  multiplier: number
+): T => (typeof value === "number" ? ((value * multiplier) as T) : value);
+
+export const migrateLayoutToGridOptions = (
+  options: LovelaceLayoutOptions
+): LovelaceGridOptions => {
+  const gridOptions: LovelaceGridOptions = {
+    columns: multiplyBy(options.grid_columns, GRID_COLUMN_MULTIPLIER),
+    max_columns: multiplyBy(options.grid_max_columns, GRID_COLUMN_MULTIPLIER),
+    min_columns: multiplyBy(options.grid_min_columns, GRID_COLUMN_MULTIPLIER),
+    rows: options.grid_rows,
+    max_rows: options.grid_max_rows,
+    min_rows: options.grid_min_rows,
+  };
+  for (const [key, value] of Object.entries(gridOptions)) {
+    if (value === undefined) {
+      delete gridOptions[key];
+    }
+  }
+  return gridOptions;
+};
 
 export const DEFAULT_GRID_SIZE = {
-  columns: 4,
+  columns: 12,
   rows: "auto",
 } as CardGridSize;
 
@@ -12,14 +38,14 @@ export type CardGridSize = {
 };
 
 export const computeCardGridSize = (
-  options: LovelaceLayoutOptions
+  options: LovelaceGridOptions
 ): CardGridSize => {
-  const rows = options.grid_rows ?? DEFAULT_GRID_SIZE.rows;
+  const rows = options.rows ?? DEFAULT_GRID_SIZE.rows;
-  const columns = options.grid_columns ?? DEFAULT_GRID_SIZE.columns;
+  const columns = options.columns ?? DEFAULT_GRID_SIZE.columns;
-  const minRows = options.grid_min_rows;
+  const minRows = options.min_rows;
-  const maxRows = options.grid_max_rows;
+  const maxRows = options.max_rows;
-  const minColumns = options.grid_min_columns;
+  const minColumns = options.min_columns;
-  const maxColumns = options.grid_max_columns;
+  const maxColumns = options.max_columns;
 
   const clampedRows =
     typeof rows === "string" ? rows : conditionalClamp(rows, minRows, maxRows);

src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list";
 import { mdiCheck, mdiDotsVertical } from "@mdi/js";
 import { css, html, LitElement, nothing, PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -17,7 +17,6 @@ import "../../../../components/ha-slider";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-switch";
 import "../../../../components/ha-yaml-editor";
-import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { haStyle } from "../../../../resources/styles";
@@ -26,8 +25,9 @@ import { HuiCard } from "../../cards/hui-card";
 import {
   CardGridSize,
   computeCardGridSize,
+  migrateLayoutToGridOptions,
 } from "../../common/compute-card-grid-size";
-import { LovelaceLayoutOptions } from "../../types";
+import { LovelaceGridOptions } from "../../types";
 
 @customElement("hui-card-layout-editor")
 export class HuiCardLayoutEditor extends LitElement {
@@ -37,21 +37,16 @@ export class HuiCardLayoutEditor extends LitElement {
 
   @property({ attribute: false }) public sectionConfig!: LovelaceSectionConfig;
 
-  @state() _defaultLayoutOptions?: LovelaceLayoutOptions;
+  @state() _defaultGridOptions?: LovelaceGridOptions;
 
   @state() public _yamlMode = false;
 
   @state() public _uiAvailable = true;
 
-  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
-
   private _cardElement?: HuiCard;
 
   private _mergedOptions = memoizeOne(
-    (
+    (options?: LovelaceGridOptions, defaultOptions?: LovelaceGridOptions) => ({
-      options?: LovelaceLayoutOptions,
-      defaultOptions?: LovelaceLayoutOptions
-    ) => ({
       ...defaultOptions,
       ...options,
     })
@@ -60,19 +55,30 @@ export class HuiCardLayoutEditor extends LitElement {
   private _computeCardGridSize = memoizeOne(computeCardGridSize);
 
   private _isDefault = memoizeOne(
-    (options?: LovelaceLayoutOptions) =>
+    (options?: LovelaceGridOptions) =>
-      options?.grid_columns === undefined && options?.grid_rows === undefined
+      options?.columns === undefined && options?.rows === undefined
   );
 
+  private _configGridOptions = (config: LovelaceCardConfig) => {
+    if (config.grid_options) {
+      return config.grid_options;
+    }
+    if (config.layout_options) {
+      return migrateLayoutToGridOptions(config.layout_options);
+    }
+    return {};
+  };
+
   render() {
+    const configGridOptions = this._configGridOptions(this.config);
     const options = this._mergedOptions(
-      this.config.layout_options,
+      configGridOptions,
-      this._defaultLayoutOptions
+      this._defaultGridOptions
     );
 
     const value = this._computeCardGridSize(options);
 
-    const totalColumns = (this.sectionConfig.column_span ?? 1) * 4;
+    const totalColumns = (this.sectionConfig.column_span ?? 1) * 12;
 
     return html`
       <div class="header">
@@ -130,24 +136,24 @@ export class HuiCardLayoutEditor extends LitElement {
         ? html`
             <ha-yaml-editor
               .hass=${this.hass}
-              .defaultValue=${this.config.layout_options}
+              .defaultValue=${configGridOptions}
               @value-changed=${this._valueChanged}
             ></ha-yaml-editor>
           `
         : html`
             <ha-grid-size-picker
               style=${styleMap({
-                "max-width": `${totalColumns * 45 + 50}px`,
+                "max-width": `${totalColumns * 20 + 50}px`,
               })}
               .columns=${totalColumns}
               .hass=${this.hass}
               .value=${value}
-              .isDefault=${this._isDefault(this.config.layout_options)}
+              .isDefault=${this._isDefault(configGridOptions)}
               @value-changed=${this._gridSizeChanged}
-              .rowMin=${options.grid_min_rows}
+              .rowMin=${options.min_rows}
-              .rowMax=${options.grid_max_rows}
+              .rowMax=${options.max_rows}
-              .columnMin=${options.grid_min_columns}
+              .columnMin=${options.min_columns}
-              .columnMax=${options.grid_max_columns}
+              .columnMax=${options.max_columns}
             ></ha-grid-size-picker>
             <ha-settings-row>
               <span slot="heading" data-for="full-width">
@@ -167,6 +173,19 @@ export class HuiCardLayoutEditor extends LitElement {
               >
               </ha-switch>
             </ha-settings-row>
+            <ha-settings-row>
+              <span slot="heading" data-for="full-width">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.editor.edit_card.layout.precision_mode"
+                )}
+              </span>
+              <span slot="description" data-for="full-width">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.editor.edit_card.layout.precision_mode_helper"
+                )}
+              </span>
+              <ha-switch name="full-precision_mode"> </ha-switch>
+            </ha-settings-row>
           `}
     `;
   }
@@ -180,11 +199,10 @@ export class HuiCardLayoutEditor extends LitElement {
       this._cardElement.config = this.config;
       this._cardElement.addEventListener("card-updated", (ev: Event) => {
         ev.stopPropagation();
-        this._defaultLayoutOptions =
+        this._defaultGridOptions = this._cardElement?.getElementGridOptions();
-          this._cardElement?.getElementLayoutOptions();
       });
       this._cardElement.load();
-      this._defaultLayoutOptions = this._cardElement.getElementLayoutOptions();
+      this._defaultGridOptions = this._cardElement.getElementGridOptions();
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err);
@@ -211,53 +229,49 @@ export class HuiCardLayoutEditor extends LitElement {
       case 1:
         this._yamlMode = true;
         break;
-      case 2:
-        this._reset();
-        break;
     }
   }
 
-  private async _reset() {
-    const newConfig = { ...this.config };
-    delete newConfig.layout_options;
-    this._yamlEditor?.setValue({});
-    fireEvent(this, "value-changed", { value: newConfig });
-  }
-
   private _gridSizeChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     const value = ev.detail.value as CardGridSize;
 
     const newConfig: LovelaceCardConfig = {
       ...this.config,
-      layout_options: {
+      grid_options: {
-        ...this.config.layout_options,
+        ...this.config.grid_options,
-        grid_columns: value.columns,
+        columns: value.columns,
-        grid_rows: value.rows,
+        rows: value.rows,
       },
     };
 
-    if (newConfig.layout_options!.grid_columns === undefined) {
+    this._updateValue(newConfig);
-      delete newConfig.layout_options!.grid_columns;
+  }
-    }
-    if (newConfig.layout_options!.grid_rows === undefined) {
-      delete newConfig.layout_options!.grid_rows;
-    }
-    if (Object.keys(newConfig.layout_options!).length === 0) {
-      delete newConfig.layout_options;
-    }
 
-    fireEvent(this, "value-changed", { value: newConfig });
+  private _updateValue(value: LovelaceCardConfig): void {
+    if (value.grid_options!.columns === undefined) {
+      delete value.grid_options!.columns;
+    }
+    if (value.grid_options!.rows === undefined) {
+      delete value.grid_options!.rows;
+    }
+    if (Object.keys(value.grid_options!).length === 0) {
+      delete value.grid_options;
+    }
+    if (value.layout_options) {
+      delete value.layout_options;
+    }
+    fireEvent(this, "value-changed", { value });
   }
 
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    const options = ev.detail.value as LovelaceLayoutOptions;
+    const options = ev.detail.value as LovelaceGridOptions;
     const newConfig: LovelaceCardConfig = {
       ...this.config,
-      layout_options: options,
+      grid_options: options,
     };
-    fireEvent(this, "value-changed", { value: newConfig });
+    this._updateValue(newConfig);
   }
 
   private _fullWidthChanged(ev): void {
@@ -265,14 +279,12 @@ export class HuiCardLayoutEditor extends LitElement {
     const value = ev.target.checked;
     const newConfig: LovelaceCardConfig = {
       ...this.config,
-      layout_options: {
+      grid_options: {
-        ...this.config.layout_options,
+        ...this.config.grid_options,
-        grid_columns: value
+        columns: value ? "full" : (this._defaultGridOptions?.min_columns ?? 1),
-          ? "full"
-          : (this._defaultLayoutOptions?.grid_min_columns ?? 1),
       },
     };
-    fireEvent(this, "value-changed", { value: newConfig });
+    this._updateValue(newConfig);
   }
 
   static styles = [

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

@@ -4,5 +4,6 @@ export const baseLovelaceCardConfig = object({
   type: string(),
   view_layout: any(),
   layout_options: any(),
+  grid_options: any(),
   visibility: any(),
 });

src/panels/lovelace/sections/hui-grid-section.ts

@@ -84,9 +84,9 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
             (_cardConfig, idx) => {
               const card = this.cards![idx];
               card.layout = "grid";
-              const layoutOptions = card.getLayoutOptions();
+              const gridOptions = card.getGridOptions();
 
-              const { rows, columns } = computeCardGridSize(layoutOptions);
+              const { rows, columns } = computeCardGridSize(gridOptions);
 
               return html`
                 <div
@@ -96,7 +96,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
                     "--row-size": typeof rows === "number" ? rows : undefined,
                   })}
                   class="card ${classMap({
-                    "fit-rows": typeof layoutOptions?.grid_rows === "number",
+                    "fit-rows": typeof rows === "number",
                     "full-width": columns === "full",
                   })}"
                 >
@@ -165,7 +165,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
       haStyle,
       css`
         :host {
-          --base-column-count: 4;
+          --base-column-count: 12;
           --row-gap: var(--ha-section-grid-row-gap, 8px);
           --column-gap: var(--ha-section-grid-column-gap, 8px);
           --row-height: var(--ha-section-grid-row-height, 56px);
@@ -230,8 +230,8 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
 
         .add {
           outline: none;
-          grid-row: span var(--row-size, 1);
+          grid-row: span 1;
-          grid-column: span var(--column-size, 2);
+          grid-column: span 6;
           background: none;
           cursor: pointer;
           border-radius: var(--ha-card-border-radius, 12px);

src/panels/lovelace/types.ts

@@ -51,12 +51,23 @@ export type LovelaceLayoutOptions = {
   grid_max_rows?: number;
 };
 
+export type LovelaceGridOptions = {
+  columns?: number | "full";
+  rows?: number | "auto";
+  max_columns?: number;
+  min_columns?: number;
+  min_rows?: number;
+  max_rows?: number;
+};
+
 export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
   preview?: boolean;
   layout?: string;
   getCardSize(): number | Promise<number>;
+  /** @deprecated Use `getGridOptions` instead */
   getLayoutOptions?(): LovelaceLayoutOptions;
+  getGridOptions?(): LovelaceGridOptions;
   setConfig(config: LovelaceCardConfig): void;
 }
 

src/translations/en.json

@@ -5645,7 +5645,9 @@
             },
             "layout": {
               "full_width": "Full width card",
-              "full_width_helper": "Take up the full width of the section whatever its size"
+              "full_width_helper": "Take up the full width of the section whatever its size",
+              "precision_mode": "Precision mode",
+              "precision_mode_helper": "Change the card width with precision without limits"
             }
           },
           "edit_badge": {