iobroker.mywebui 1.42.40 → 1.42.41

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.40",
+    "version": "1.42.41",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -29,6 +29,13 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.42.41": {
+        "en": "improvement: dynamic properties now work on Lit/package widgets at runtime too (accessors + -changed events applied by ScreenViewer); events tab lists -changed events of dynamic properties; added webui-demo-widget sample package",
+        "az": "təkmilləşdirmə: dinamik property-lər artıq runtime-da Lit/package widget-lərdə də işləyir (accessor-lar + -changed event-ləri ScreenViewer tərəfindən tətbiq olunur); events tabı dinamik property-lərin -changed event-lərini göstərir; webui-demo-widget nümunə paketi əlavə olundu",
+        "tr": "iyileştirme: dinamik property'ler artık runtime'da Lit/package widget'larda da çalışıyor (accessor'lar + -changed event'leri ScreenViewer tarafından uygulanıyor); events sekmesi dinamik property'lerin -changed event'lerini listeliyor; webui-demo-widget örnek paketi eklendi",
+        "ru": "улучшение: динамические свойства теперь работают и на Lit/package виджетах во время выполнения (аксессоры + события -changed применяются ScreenViewer); вкладка events показывает события -changed динамических свойств; добавлен пример пакета webui-demo-widget",
+        "de": "Verbesserung: dynamische Properties funktionieren zur Laufzeit jetzt auch bei Lit/Package-Widgets (Accessoren + -changed-Events durch ScreenViewer); Events-Tab listet -changed-Events dynamischer Properties; webui-demo-widget Beispielpaket hinzugefügt"
+      },
       "1.42.40": {
         "en": "feature: per-instance dynamic properties for custom controls (add/edit name, type, default via properties tab) and extended Lit widget property support (Array/Object/converter types, webuiProperties metadata for signal/color/screen/enum editors)",
         "az": "yenilik: custom control-lar üçün instance-əsaslı dinamik property-lər (properties tabından ad, tip, default əlavə/redaktə) və Lit widget-lər üçün genişləndirilmiş property dəstəyi (Array/Object/converter tipləri, signal/color/screen/enum editorları üçün webuiProperties metadata)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.40",
+  "version": "1.42.41",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/runtime/CustomControls.js

@@ -3,6 +3,7 @@ import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 import { visibilityService } from "./VisibilityService.js";
 import { scanAndApplyAnimations, scanAndApplyEffects, cleanupAnimations, cleanupEffects } from "./AnimationService.js";
+import { applyDynamicProperties, applyDynamicPropertiesToTree } from "./DynamicElementProperties.js";
 export const webuiCustomControlPrefix = 'webui-';
 export const webuiCustomControlSymbol = Symbol('webuiCustomControlSymbol');
 export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
@@ -109,51 +110,11 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
     }
     // defines accessors for the per-instance dynamic properties declared in the
     // 'dynamic-property-defs' attribute: [ { "name": "kamran", "type": "string", "default": "x" }, ... ]
-    // so they behave like normal control properties (bindings refresh + changed events)
+    // so they behave like normal control properties (bindings refresh + changed events).
+    // also applies dynamic properties to elements inside the control template (e.g. Lit widgets)
     _setupDynamicProperties() {
-        let defs;
-        try {
-            const v = this.getAttribute('dynamic-property-defs');
-            if (!v)
-                return;
-            defs = JSON.parse(v);
-        }
-        catch (e) {
-            console.warn('invalid dynamic-property-defs attribute', e);
-            return;
-        }
-        if (!Array.isArray(defs))
-            return;
-        for (const def of defs) {
-            const name = def?.name;
-            if (!name)
-                continue;
-            if (!Object.getOwnPropertyDescriptor(this, name)) {
-                Object.defineProperty(this, name, {
-                    get() {
-                        return this['_' + name];
-                    },
-                    set(newValue) {
-                        if (this['_' + name] !== newValue && (!Number.isNaN(this['_' + name]) || !Number.isNaN(newValue))) {
-                            this['_' + name] = newValue;
-                            this._bindingsRefresh(name);
-                            this.dispatchEvent(new CustomEvent(PropertiesHelper.camelToDashCase(name) + '-changed', { detail: { newValue } }));
-                        }
-                    },
-                    enumerable: true,
-                    configurable: true,
-                });
-            }
-            const attr = this.getAttribute(PropertiesHelper.camelToDashCase(name));
-            let value = attr ?? def.default;
-            if (value != null) {
-                if (def.type === 'number')
-                    value = parseFloat(value);
-                else if (def.type === 'boolean')
-                    value = value === '' || value === true || value === 'true';
-                this['_' + name] = value;
-            }
-        }
+        applyDynamicProperties(this);
+        applyDynamicPropertiesToTree(this.shadowRoot);
     }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];

package/www/dist/frontend/runtime/DynamicElementProperties.js

@@ -0,0 +1,97 @@
+import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
+
+// runtime support for per-instance dynamic properties (any element, incl. Lit/package widgets):
+// reads the 'dynamic-property-defs' attribute and defines accessors on the instance so the
+// properties dispatch '<name>-changed' events and refresh webui bindings on change.
+export const dynamicDefsAttributeName = 'dynamic-property-defs';
+
+export function parseDynamicDefs(element) {
+    try {
+        const v = element.getAttribute(dynamicDefsAttributeName);
+        if (v) {
+            const parsed = JSON.parse(v);
+            if (Array.isArray(parsed))
+                return parsed.filter(x => x && x.name);
+        }
+    }
+    catch (e) {
+        console.warn('invalid ' + dynamicDefsAttributeName + ' attribute', e, element);
+    }
+    return [];
+}
+
+function findPrototypeAccessor(element, name) {
+    let proto = Object.getPrototypeOf(element);
+    while (proto && proto !== HTMLElement.prototype) {
+        const desc = Object.getOwnPropertyDescriptor(proto, name);
+        if (desc)
+            return desc;
+        proto = Object.getPrototypeOf(proto);
+    }
+    return null;
+}
+
+export function applyDynamicProperties(element) {
+    const defs = parseDynamicDefs(element);
+    for (const def of defs) {
+        const name = def.name;
+        if (Object.getOwnPropertyDescriptor(element, name))
+            continue;
+        // if the element already has an accessor for this name (e.g. a Lit reactive
+        // property), route values through it so the widget keeps reacting, but still
+        // dispatch the '-changed' event webui bindings listen to
+        const protoDesc = findPrototypeAccessor(element, name);
+        if (protoDesc && (protoDesc.get || protoDesc.set)) {
+            Object.defineProperty(element, name, {
+                get() {
+                    return protoDesc.get ? protoDesc.get.call(this) : undefined;
+                },
+                set(newValue) {
+                    const oldValue = protoDesc.get ? protoDesc.get.call(this) : undefined;
+                    if (oldValue !== newValue) {
+                        protoDesc.set?.call(this, newValue);
+                        this._bindingsRefresh?.(name);
+                        this.dispatchEvent(new CustomEvent(PropertiesHelper.camelToDashCase(name) + '-changed', { detail: { newValue } }));
+                    }
+                },
+                enumerable: true,
+                configurable: true,
+            });
+        }
+        else {
+            Object.defineProperty(element, name, {
+                get() {
+                    return this['_' + name];
+                },
+                set(newValue) {
+                    if (this['_' + name] !== newValue && (!Number.isNaN(this['_' + name]) || !Number.isNaN(newValue))) {
+                        this['_' + name] = newValue;
+                        this._bindingsRefresh?.(name);
+                        this.dispatchEvent(new CustomEvent(PropertiesHelper.camelToDashCase(name) + '-changed', { detail: { newValue } }));
+                    }
+                },
+                enumerable: true,
+                configurable: true,
+            });
+        }
+        const attr = element.getAttribute(PropertiesHelper.camelToDashCase(name));
+        let value = attr ?? def.default;
+        if (value != null) {
+            if (def.type === 'number')
+                value = parseFloat(value);
+            else if (def.type === 'boolean')
+                value = value === '' || value === true || value === 'true';
+            if (protoDesc)
+                element[name] = value;
+            else
+                element['_' + name] = value;
+        }
+    }
+}
+
+export function applyDynamicPropertiesToTree(root) {
+    if (root instanceof Element && root.hasAttribute(dynamicDefsAttributeName))
+        applyDynamicProperties(root);
+    for (const el of root.querySelectorAll('[' + dynamicDefsAttributeName + ']'))
+        applyDynamicProperties(el);
+}

package/www/dist/frontend/runtime/ScreenViewer.js

@@ -7,6 +7,7 @@ import { isFirefox } from "@gokturk413/web-component-designer/dist/elements/help
 import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 import { visibilityService } from "./VisibilityService.js";
 import { scanAndApplyAnimations, scanAndApplyEffects, cleanupAnimations, cleanupEffects, ensureGSAP } from "./AnimationService.js";
+import { applyDynamicPropertiesToTree } from "./DynamicElementProperties.js";
 window.ensureGSAP = ensureGSAP;
 let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorAppend {
     static { ScreenViewer_1 = this; }
@@ -313,6 +314,8 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
                 get() { return el.style.pointerEvents === 'none'; }
             });
         }
+        // dynamic per-instance properties (incl. Lit/package widgets) must exist before bindings
+        applyDynamicPropertiesToTree(this._rootShadow);
         const res = window.appShell.bindingsHelper.applyAllBindings(this._rootShadow, this.relativeSignalsPath, this);
         if (this._iobBindings)
             this._iobBindings.push(...res);

package/www/dist/frontend/services/IobrokerWebuiCustomControlEventsService.js

@@ -1,17 +1,22 @@
 import { EventsService, PropertiesHelper } from "@gokturk413/web-component-designer";
 import { BaseCustomControl, webuiCustomControlSymbol } from "../runtime/CustomControls.js";
+import { readDynamicDefs } from "./DynamicPropertiesHelper.js";
 export class IobrokerWebuiCustomControlEventsService {
     isHandledElementFromEventsService(designItem) {
-        return designItem.element instanceof BaseCustomControl;
+        return designItem.element instanceof BaseCustomControl || designItem.element.hasAttribute?.('dynamic-property-defs');
     }
     getPossibleEvents(designItem) {
         const evt = [];
-        let control = designItem.element.constructor[webuiCustomControlSymbol].control;
-        for (const pname in control.properties) {
+        let control = designItem.element.constructor[webuiCustomControlSymbol]?.control;
+        for (const pname in control?.properties) {
             if (control.properties[pname].internal)
                 continue;
             evt.push({ name: PropertiesHelper.camelToDashCase(pname) + '-changed' });
         }
+        // changed events of the per-instance dynamic properties (dynamic-property-defs attribute)
+        for (const def of readDynamicDefs(designItem.element)) {
+            evt.push({ name: PropertiesHelper.camelToDashCase(def.name) + '-changed' });
+        }
         return [...evt, ...EventsService._simpleMouseEvents, ...EventsService._pointerEvents, ...EventsService._allElements, ...EventsService._focusableEvents];
     }
     getEvent(designItem, name) {