Update cookcli-card.js

dist/cookcli-card.js

@@ -33,10 +33,6 @@
  */
 
 class CookCliCard extends HTMLElement {
-  static getConfigElement() {
-    return document.createElement("cookcli-card-editor");
-  }
-
   static getStubConfig() {
     return { title: "Recettes" };
   }
@@ -183,67 +179,82 @@ class CookCliCard extends HTMLElement {
   }
 }
 
-class CookCliCardEditor extends LitElement {
+class CookCliCardEditor extends HTMLElement {
   setConfig(config) {
     this._config = config || {};
   }
 
-  configChanged(newConfig) {
+  set hass(hass) {
-    const event = new Event("config-changed", {
+    this._hass = hass;
+  }
+
+  // Définit le schéma du formulaire (une entrée par champ configurable)
+  get _schema() {
+    return [
+      {
+        name: "title",
+        selector: { text: {} },
+      },
+      {
+        name: "dashboard_path",
+        selector: { text: {} },
+        helper: "Laisser vide pour naviguer dans le dashboard courant",
+      },
+      {
+        name: "entry_id",
+        selector: { text: {} },
+        helper: "Optionnel — ID d'entrée si plusieurs serveurs CookCLI",
+      },
+    ];
+  }
+
+  // Fournit les libellés des champs
+  _computeLabel(schema) {
+    const labels = {
+      title: "Titre",
+      dashboard_path: "Chemin du dashboard",
+      entry_id: "Entry ID",
+    };
+    return labels[schema.name] || schema.name;
+  }
+
+  // Gère les changements dans le formulaire
+  _valueChanged(ev) {
+    if (!this._config || !this._hass) {
+      return;
+    }
+    const newConfig = { ...this._config, ...ev.detail.value };
+
+    this._config = newConfig;
+
+    const event = new CustomEvent("config-changed", {
+      detail: { config: newConfig },
       bubbles: true,
       composed: true,
     });
-    event.detail = { config: newConfig };
     this.dispatchEvent(event);
   }
 
-  static getConfigForm() {
+  render() {
-    return {
+    if (!this._hass) return;
-      schema: [
+
-        {
+    this.innerHTML = `
-          name: "title",
+      <ha-form
-          selector: { text: {} },
+        .hass=${this._hass}
-        },
+        .data=${this._config}
-        {
+        .schema=${this._schema}
-          name: "dashboard_path",
+        .computeLabel=${this._computeLabel.bind(this)}
-          selector: { text: {} },
+        @value-changed=${this._valueChanged.bind(this)}
-          helper: "Laisser vide pour naviguer dans le dashboard courant",
+      ></ha-form>
-        },
+    `;
-        {
-          name: "entry_id",
-          selector: { text: {} },
-          helper: "Optionnel — ID d'entrée si plusieurs serveurs CookCLI",
-        },
-      ],
-      computeLabel: (schema) => {
-        const labels = {
-          title: "Titre",
-          dashboard_path: "Chemin du dashboard",
-          entry_id: "Entry ID",
-        };
-        return labels[schema.name] || schema.name;
-      },
-      computeHelper: (schema) => {
-        switch (schema.name) {
-          case "entity":
-            return "This text describes the function of the entity selector";
-          case "unit":
-            return "The unit of measurement for this card";
-        }
-        return undefined;
-      },
-      assertConfig: (config) => {
-        if (config.other_option) {
-          throw new Error("'other_option' is unexpected.");
-        }
-      },
-    };
   }
 
+  connectedCallback() {
+    this.render();
+  }
 }
 
 customElements.define("cookcli-card", CookCliCard);
-customElements.define("cookcli-card-editor", CookCliCardEditor);
 
 window.customCards = window.customCards || [];
 window.customCards.push({