Use media query, remove ui editor for responsive

src/panels/lovelace/common/ha-card-condition-editor.ts

@@ -8,7 +8,6 @@ import "../../../components/ha-yaml-editor";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import "./types/ha-card-condition-state";
-import "./types/ha-card-condition-responsive";
 import { Condition } from "./validate-condition";
 
 @customElement("ha-card-condition-editor")

src/panels/lovelace/common/types/ha-card-condition-responsive.ts

@@ -1,107 +0,0 @@
-import { html, LitElement, PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators";
-import { assert, literal, number, object, optional } from "superstruct";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
-import { HaFormSchema } from "../../../../components/ha-form/types";
-import type { HomeAssistant } from "../../../../types";
-import { ResponsiveCondition } from "../validate-condition";
-
-const responsiveConditionStruct = object({
-  condition: literal("responsive"),
-  max_width: optional(number()),
-  min_width: optional(number()),
-});
-
-const SCHEMA = [
-  {
-    name: "",
-    type: "grid",
-    schema: [
-      {
-        name: "min_width",
-        selector: {
-          number: {
-            mode: "box",
-            step: 1,
-            unit_of_measurement: "px",
-          },
-        },
-      },
-      {
-        name: "max_width",
-        selector: {
-          number: {
-            mode: "box",
-            step: 1,
-            unit_of_measurement: "px",
-          },
-        },
-      },
-    ],
-  },
-] as const satisfies readonly HaFormSchema[];
-
-@customElement("ha-card-condition-responsive")
-export class HaCardConditionResponsive extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public condition!: ResponsiveCondition;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  public static get defaultConfig(): ResponsiveCondition {
-    return { condition: "responsive" };
-  }
-
-  protected willUpdate(changedProperties: PropertyValues): void {
-    if (!changedProperties.has("condition")) {
-      return;
-    }
-    try {
-      assert(this.condition, responsiveConditionStruct);
-    } catch (err: any) {
-      fireEvent(this, "ui-mode-not-available", err);
-    }
-  }
-
-  protected render() {
-    return html`
-      <ha-form
-        .hass=${this.hass}
-        .data=${this.condition}
-        .schema=${SCHEMA}
-        .disabled=${this.disabled}
-        @value-changed=${this._valueChanged}
-        .computeLabel=${this._computeLabelCallback}
-      ></ha-form>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const data = ev.detail.value as ResponsiveCondition;
-    fireEvent(this, "value-changed", { value: data });
-  }
-
-  private _computeLabelCallback = (
-    schema: SchemaUnion<typeof SCHEMA>
-  ): string => {
-    switch (schema.name) {
-      case "min_width":
-      case "max_width":
-        return this.hass.localize(
-          `ui.panel.lovelace.editor.card.conditional.${schema.name}`
-        );
-      default:
-        return "";
-    }
-  };
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-card-condition-responsive": HaCardConditionResponsive;
-  }
-}

src/panels/lovelace/common/validate-condition.ts

@@ -12,8 +12,7 @@ export type StateCondition = {
 
 export type ResponsiveCondition = {
   condition: "responsive";
-  min_width?: number;
-  max_width?: number;
+  media_query?: string;
 };
 
 function checkStateCondition(condition: StateCondition, hass: HomeAssistant) {
@@ -26,23 +25,11 @@ function checkStateCondition(condition: StateCondition, hass: HomeAssistant) {
     : state !== condition.state_not;
 }
 
-export function buildMediaQuery(condition: ResponsiveCondition) {
-  const queries: string[] = [];
-  if (condition.min_width != null) {
-    queries.push(`(min-width: ${condition.min_width}px)`);
-  }
-  if (condition.max_width != null) {
-    queries.push(`(max-width: ${condition.max_width}px)`);
-  }
-  return queries.join(" and ");
-}
-
 function checkResponsiveCondition(
   condition: ResponsiveCondition,
   _hass: HomeAssistant
 ) {
-  const query = buildMediaQuery(condition);
-  return matchMedia(query).matches;
+  return matchMedia(condition.media_query ?? "").matches;
 }
 
 export function checkConditionsMet(
@@ -59,14 +46,14 @@ export function checkConditionsMet(
 }
 
 function valideStateCondition(condition: StateCondition) {
-  return (condition.entity &&
-    (condition.state != null ||
-      condition.state_not != null)) as unknown as boolean;
+  return (
+    !!condition.entity &&
+    (condition.state != null || condition.state_not != null)
+  );
 }
 
 function valideResponsiveCondition(condition: ResponsiveCondition) {
-  return (condition.min_width != null ||
-    condition.max_width != null) as unknown as boolean;
+  return condition.media_query != null;
 }
 
 export function validateConditionalConfig(conditions: Condition[]): boolean {

src/panels/lovelace/components/hui-conditional-base.ts

@@ -4,7 +4,6 @@ import { HomeAssistant } from "../../../types";
 import { ConditionalCardConfig } from "../cards/types";
 import {
   ResponsiveCondition,
-  buildMediaQuery,
   checkConditionsMet,
   validateConditionalConfig,
 } from "../common/validate-condition";
@@ -82,7 +81,9 @@ export class HuiConditionalBase extends ReactiveElement {
       (c) => c.condition === "responsive"
     ) as ResponsiveCondition[];
 
-    const mediaQueries = conditions.map((c) => buildMediaQuery(c));
+    const mediaQueries = conditions
+      .map((c) => c.media_query ?? "")
+      .filter((m) => m !== "");
 
     if (deepEqual(mediaQueries, this._mediaQueries)) return;