iobroker.mywebui 1.42.39 → 1.42.40

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.42.38",
+    "version": "1.42.40",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",
@@ -29,6 +29,13 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "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)",
+        "tr": "yenilik: custom control'ler için instance bazlı dinamik property'ler (properties sekmesinden ad, tip, varsayılan ekleme/düzenleme) ve Lit widget'lar için genişletilmiş property desteği (Array/Object/converter tipleri, signal/color/screen/enum editörleri için webuiProperties metadata)",
+        "ru": "новое: динамические свойства экземпляров для custom control (добавление/редактирование имени, типа, значения по умолчанию во вкладке properties) и расширенная поддержка свойств Lit-виджетов (типы Array/Object/converter, метаданные webuiProperties для редакторов signal/color/screen/enum)",
+        "de": "Neu: instanzbasierte dynamische Properties für Custom Controls (Name, Typ, Standardwert über den Properties-Tab hinzufügen/bearbeiten) und erweiterte Lit-Widget-Property-Unterstützung (Array/Object/Converter-Typen, webuiProperties-Metadaten für Signal/Color/Screen/Enum-Editoren)"
+      },
       "1.37.30": {
         "en": "cleanup: remove unused grafanaLangSync onMessage handler and helper functions from main.js",
         "az": "təmizlik: istifadəsiz grafanaLangSync onMessage handler və köməkçi funksiyalar main.js-dən silindi",

package/package.json

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

package/www/dist/frontend/config/ConfigureWebcomponentDesigner.js

@@ -14,6 +14,7 @@ import { IobrokerWebuiConfigButtonProvider } from "../services/IobrokerWebuiConf
 import { IobrokerWebuiCustomElementContextMenu } from "../services/IobrokerWebuiCustomElementContextMenu.js";
 import { IobrokerWebuiRefactorService } from "../services/IobrokerWebuiRefactorService.js";
 import { IobrokerWebuiSpecialPropertiesService } from "../services/IobrokerWebuiSpecialPropertiesService.js";
+import { IobrokerWebuiLitPropertiesService } from "../services/IobrokerWebuiLitPropertiesService.js";
 // import { IobrokerWebuiVisibilityPropertiesService } from "../services/IobrokerWebuiVisibilityPropertiesService.js";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { ExpandCollapseContextMenu } from "@gokturk413/web-component-designer-widgets-wunderbaum";
@@ -49,6 +50,7 @@ export function configureDesigner(bindingsHelper) {
     serviceContainer.register('elementsService', new JsonFileElementsService('native', './node_modules/@gokturk413/web-component-designer/config/elements-native.json'));
     serviceContainer.register('propertyService', new IobrokerWebuiPropertiesService());
     serviceContainer.register('propertyService', new IobrokerWebuiSpecialPropertiesService());
+    serviceContainer.register('propertyService', new IobrokerWebuiLitPropertiesService());
     // Visibility is now handled directly in PropertyGrid
     // serviceContainer.register('propertyService', new IobrokerWebuiVisibilityPropertiesService());
     serviceContainer.designViewConfigButtons.push(new IobrokerWebuiConfigButtonProvider());

package/www/dist/frontend/config/IobrokerWebuiDynamicPropsEditor.js

@@ -0,0 +1,159 @@
+import { BasePropertyEditor } from "@gokturk413/web-component-designer";
+import { readDynamicDefs, dynamicPropertyTypes } from "../services/DynamicPropertiesHelper.js";
+
+const notAllowedChars = '!"§$%&/()=?`´-:.,;<>|\\\'#+*°^';
+
+// property grid editor for the 'dynamic-property-defs' attribute.
+// shows a button which opens a dialog to add/remove/edit dynamic properties (name, type, default)
+export class IobrokerWebuiDynamicPropsEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let btn = document.createElement('button');
+        btn.textContent = 'properties...';
+        btn.title = 'add/edit dynamic properties of this instance';
+        btn.style.width = '100%';
+        btn.onclick = () => this._openDialog();
+        this.element = btn;
+    }
+
+    refreshValue(valueType, value) { }
+
+    _openDialog() {
+        const designItem = this.designItems?.[0];
+        if (!designItem)
+            return;
+        const defs = readDynamicDefs(designItem.element).map(x => ({ ...x }));
+
+        const overlay = document.createElement('div');
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100000;display:flex;align-items:center;justify-content:center;';
+        const panel = document.createElement('div');
+        panel.style.cssText = 'background:#1e2d3d;color:#d0d8e0;border:1px solid #3e6db4;min-width:430px;max-width:600px;max-height:80vh;display:flex;flex-direction:column;font-size:12px;font-family:inherit;box-shadow:0 4px 24px rgba(0,0,0,0.6);';
+
+        const header = document.createElement('div');
+        header.textContent = 'dynamic properties';
+        header.style.cssText = 'padding:6px 10px;font-weight:bold;border-bottom:1px solid #3e6db4;color:#7c9cbf;';
+        panel.appendChild(header);
+
+        const headRow = document.createElement('div');
+        headRow.style.cssText = 'display:grid;grid-template-columns:1fr 90px 1fr 1fr 28px;gap:3px;padding:4px 10px 0 10px;color:#7c9cbf;';
+        for (const t of ['name', 'type', 'default', 'enum values', '']) {
+            const d = document.createElement('div');
+            d.textContent = t;
+            headRow.appendChild(d);
+        }
+        panel.appendChild(headRow);
+
+        const list = document.createElement('div');
+        list.style.cssText = 'display:flex;flex-direction:column;gap:3px;padding:4px 10px;overflow-y:auto;flex:1;';
+        panel.appendChild(list);
+
+        const renderRows = () => {
+            list.innerHTML = '';
+            defs.forEach((def, idx) => {
+                const row = document.createElement('div');
+                row.style.cssText = 'display:grid;grid-template-columns:1fr 90px 1fr 1fr 28px;gap:3px;';
+
+                const nameInput = document.createElement('input');
+                nameInput.value = def.name ?? '';
+                nameInput.placeholder = 'propertyName';
+                nameInput.oninput = () => def.name = nameInput.value;
+                row.appendChild(nameInput);
+
+                const typeSelect = document.createElement('select');
+                for (const t of dynamicPropertyTypes) {
+                    const opt = document.createElement('option');
+                    opt.value = t;
+                    opt.textContent = t;
+                    if (def.type === t)
+                        opt.selected = true;
+                    typeSelect.appendChild(opt);
+                }
+                typeSelect.onchange = () => {
+                    def.type = typeSelect.value;
+                    valuesInput.style.visibility = def.type === 'enum' ? 'visible' : 'hidden';
+                };
+                row.appendChild(typeSelect);
+
+                const defInput = document.createElement('input');
+                defInput.value = def.default ?? '';
+                defInput.placeholder = 'default';
+                defInput.oninput = () => def.default = defInput.value;
+                row.appendChild(defInput);
+
+                const valuesInput = document.createElement('input');
+                valuesInput.value = def.values ? JSON.stringify(def.values) : '';
+                valuesInput.placeholder = '["a","b"]';
+                valuesInput.style.visibility = def.type === 'enum' ? 'visible' : 'hidden';
+                valuesInput.oninput = () => {
+                    try { def.values = JSON.parse(valuesInput.value); } catch { }
+                };
+                row.appendChild(valuesInput);
+
+                const delBtn = document.createElement('button');
+                delBtn.textContent = '✕';
+                delBtn.title = 'remove';
+                delBtn.onclick = () => {
+                    defs.splice(idx, 1);
+                    renderRows();
+                };
+                row.appendChild(delBtn);
+                list.appendChild(row);
+            });
+        };
+        renderRows();
+
+        const footer = document.createElement('div');
+        footer.style.cssText = 'display:flex;gap:4px;padding:8px 10px;border-top:1px solid #3e6db4;';
+        const addBtn = document.createElement('button');
+        addBtn.textContent = 'add...';
+        addBtn.onclick = () => {
+            defs.push({ name: '', type: 'string' });
+            renderRows();
+        };
+        const spacer = document.createElement('div');
+        spacer.style.flex = '1';
+        const okBtn = document.createElement('button');
+        okBtn.textContent = 'ok';
+        okBtn.style.minWidth = '60px';
+        okBtn.onclick = async () => {
+            const cleaned = [];
+            const usedNames = new Set();
+            for (const def of defs) {
+                let name = def.name ?? '';
+                for (const c of notAllowedChars)
+                    name = name.replaceAll(c, '');
+                name = name.replaceAll(' ', '');
+                if (!name)
+                    continue;
+                name = name[0].toLowerCase() + name.substring(1);
+                if (usedNames.has(name))
+                    continue;
+                usedNames.add(name);
+                const entry = { name, type: def.type ?? 'string' };
+                if (def.default != null && def.default !== '')
+                    entry.default = def.default;
+                if (def.type === 'enum' && def.values)
+                    entry.values = def.values;
+                cleaned.push(entry);
+            }
+            overlay.remove();
+            await this._valueChanged(cleaned.length ? JSON.stringify(cleaned) : null);
+        };
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = 'cancel';
+        cancelBtn.style.minWidth = '60px';
+        cancelBtn.onclick = () => overlay.remove();
+        footer.appendChild(addBtn);
+        footer.appendChild(spacer);
+        footer.appendChild(okBtn);
+        footer.appendChild(cancelBtn);
+        panel.appendChild(footer);
+
+        overlay.appendChild(panel);
+        overlay.onclick = e => {
+            if (e.target === overlay)
+                overlay.remove();
+        };
+        document.body.appendChild(overlay);
+    }
+}

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

@@ -35,6 +35,7 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
     }
     async connectedCallback() {
         this._parseAttributesToProperties();
+        this._setupDynamicProperties();
         this._bindingsRefresh();
         this.#specialValueHandler = {
             valueProvider: (specialValueName) => {
@@ -106,6 +107,54 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
         cleanupAnimations(this.shadowRoot);
         cleanupEffects(this.shadowRoot);
     }
+    // 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)
+    _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;
+            }
+        }
+    }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];
         this.#eventListeners.push(arrayEl);

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

@@ -0,0 +1,75 @@
+import { PropertyType } from "@gokturk413/web-component-designer";
+import { iobrokerHandler } from "../common/IobrokerHandler.js";
+import { IobrokerWebuiSignalPropertyEditor } from "../config/IobrokerWebuiSignalPropertyEditor.js";
+import { IobrokerWebuiDynamicPropsEditor } from "../config/IobrokerWebuiDynamicPropsEditor.js";
+
+// attribute on the element instance holding the per-instance dynamic property definitions:
+// [ { "name": "kamran", "type": "string", "default": "abc", "values": [...] }, ... ]
+export const dynamicDefsAttributeName = 'dynamic-property-defs';
+
+export const dynamicPropertyTypes = ['string', 'number', 'boolean', 'color', 'date', 'signal', 'screen', 'enum'];
+
+export function readDynamicDefs(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);
+    }
+    return [];
+}
+
+export function convertDynamicDefault(def) {
+    if (def.default == null || def.default === '')
+        return undefined;
+    if (def.type === 'number') {
+        const n = parseFloat(def.default);
+        return Number.isNaN(n) ? undefined : n;
+    }
+    if (def.type === 'boolean')
+        return def.default === true || def.default === 'true';
+    return def.default;
+}
+
+export async function createWebuiTypedProperty(name, prp, service) {
+    if (prp.type === 'color')
+        return { name, type: "color", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'number')
+        return { name, type: "number", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'boolean')
+        return { name, type: "boolean", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'date')
+        return { name, type: "date", service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'enum')
+        return { name, type: "list", values: prp.values, service, propertyType: PropertyType.propertyAndAttribute };
+    if (prp.type === 'signal')
+        return { name, type: "signal", service, propertyType: PropertyType.propertyAndAttribute, createEditor: p => new IobrokerWebuiSignalPropertyEditor(p, window.appShell) };
+    if (prp.type === 'screen') {
+        const screens = await iobrokerHandler.getAllNames('screen');
+        return { name, type: "list", values: screens, service, propertyType: PropertyType.propertyAndAttribute };
+    }
+    return { name, type: "string", service, propertyType: PropertyType.propertyAndAttribute };
+}
+
+// builds the property grid entries for the dynamic properties of a design item:
+// one group 'dynamic' containing the defined properties + the defs editor button
+export async function buildDynamicPropertiesGroup(designItem, service) {
+    const defs = readDynamicDefs(designItem.element);
+    const properties = [];
+    for (const d of defs)
+        properties.push(await createWebuiTypedProperty(d.name, d, service));
+    properties.push({
+        name: 'dynamicPropertyDefs',
+        type: 'string',
+        attributeName: dynamicDefsAttributeName,
+        service,
+        propertyType: PropertyType.attribute,
+        createEditor: p => new IobrokerWebuiDynamicPropsEditor(p)
+    });
+    return { name: 'dynamic', description: 'instance dynamic properties', properties };
+}

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

@@ -0,0 +1,53 @@
+import { Lit2PropertiesService, PropertiesHelper, PropertyType, RefreshMode } from "@gokturk413/web-component-designer";
+import { buildDynamicPropertiesGroup, createWebuiTypedProperty } from "./DynamicPropertiesHelper.js";
+
+// extended properties service for Lit (2/3) widgets:
+//  - supports Array & custom converter properties (edited as string/JSON) which Lit2PropertiesService skips
+//  - supports webui specific types via 'static webuiProperties' metadata on the widget class
+//    (e.g. static webuiProperties = { mySignal: { type: 'signal' }, myColor: { type: 'color' } })
+//  - supports per-instance dynamic properties via the 'dynamic-property-defs' attribute
+export class IobrokerWebuiLitPropertiesService extends Lit2PropertiesService {
+    name = "webuiLit";
+
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
+    }
+
+    async getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        const ctor = designItem.element.constructor;
+        const meta = ctor.webuiProperties ?? {};
+        const properties = [];
+        const handled = new Set();
+        for (const [name, litProperty] of ctor.elementProperties.entries()) {
+            handled.add(name);
+            const m = meta[name];
+            if (m) {
+                properties.push(await createWebuiTypedProperty(name, m, this));
+                continue;
+            }
+            let type = litProperty?.type ?? litProperty;
+            if (type === String)
+                properties.push({ name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (type === Number)
+                properties.push({ name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (type === Boolean)
+                properties.push({ name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (type === Date)
+                properties.push({ name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute });
+            else if (PropertiesHelper.isTypescriptEnum(type))
+                properties.push({ name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute });
+            else
+                // Array, Object and custom converters are edited as string (JSON)
+                properties.push({ name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute });
+        }
+        // webuiProperties entries which are no lit reactive properties
+        for (const name in meta) {
+            if (!handled.has(name))
+                properties.push(await createWebuiTypedProperty(name, meta[name], this));
+        }
+        properties.push(await buildDynamicPropertiesGroup(designItem, this));
+        return properties;
+    }
+}

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

@@ -1,13 +1,18 @@
-import { BaseCustomWebComponentPropertiesService, PropertyType } from "@gokturk413/web-component-designer";
+import { BaseCustomWebComponentPropertiesService, PropertyType, RefreshMode } from "@gokturk413/web-component-designer";
 import { BaseCustomControl, webuiCustomControlSymbol } from "../runtime/CustomControls.js";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { ScreenViewer } from "../runtime/ScreenViewer.js";
 import { IobrokerWebuiSignalPropertyEditor } from "../config/IobrokerWebuiSignalPropertyEditor.js";
+import { buildDynamicPropertiesGroup } from "./DynamicPropertiesHelper.js";
 export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentPropertiesService {
     isHandledElement(designItem) {
         return designItem.element instanceof BaseCustomControl || designItem.element instanceof ScreenViewer;
         ;
     }
+    getRefreshMode(designItem) {
+        // dynamic properties can change with every value change (dynamic-property-defs attribute)
+        return RefreshMode.fullOnValueChange;
+    }
     async getProperties(designItem) {
         if (!this.isHandledElement(designItem))
             return null;
@@ -67,6 +72,7 @@ export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentProper
             for (const [groupName, groupProps] of groupMap) {
                 result.push({ name: groupName, description: '', properties: groupProps });
             }
+            result.push(await buildDynamicPropertiesGroup(designItem, this));
             return result;
         }
         else {