iobroker.webui 1.31.6 → 1.32.0

package/README.md

@@ -133,6 +133,9 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.32.0 (2025-08-20)
+- Support css prop suggestions
+
 ### 1.31.6 (2025-08-19)
 - Test one more release
 

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.31.6",
+    "version": "1.32.0",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,19 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.32.0": {
+        "en": "Support css prop suggestions",
+        "de": "Support css prop Vorschläge",
+        "ru": "Поддержка предложений css",
+        "pt": "Suportar sugestões de suporte para css",
+        "nl": "Ondersteuning css prop suggesties",
+        "fr": "Soutien css prop suggestions",
+        "it": "Support css prop suggerimenti",
+        "es": "Sugerencias de apoyo css",
+        "pl": "Support sugestie css prop",
+        "uk": "Підтримка пропозицій css",
+        "zh-cn": "支持 css 道具建议"
+      },
       "1.31.6": {
         "en": "Test one more release",
         "de": "Testen Sie eine weitere Freigabe",
@@ -106,19 +119,6 @@
         "pl": "usuń nod 18 z działań github",
         "uk": "remove nod 18 від github дії",
         "zh-cn": "从 github 动作中删除点头 18"
-      },
-      "1.31.0": {
-        "en": "update packages\nscript support for properties",
-        "de": "update-pakete\nscript-unterstützung für eigenschaften",
-        "ru": "обновление пакетов\nподдержка скриптов для свойств",
-        "pt": "atualizar pacotes\nsuporte de script para propriedades",
-        "nl": "pakketten bijwerken\nscriptondersteuning voor eigenschappen",
-        "fr": "mettre à jour les paquets\nsupport de script pour les propriétés",
-        "it": "pacchetti di aggiornamento\nsupporto script per le proprietà",
-        "es": "actualizar paquetes\nsoporte de script para propiedades",
-        "pl": "aktualizacja pakietów\nobsługa skryptów dla właściwości",
-        "uk": "оновлення пакетів\nпідтримка сценаріїв властивостей",
-        "zh-cn": "更新软件包\n属性的脚本支持"
       }
     },
     "icon": "logo.png",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.31.6",
+  "version": "1.32.0",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -60,11 +60,11 @@
     "@node-projects/node-html-parser-esm": "^6.2.0",
     "@node-projects/propertygrid.webcomponent": "^1.4.1",
     "@node-projects/splitview.webcomponent": "^1.0.1",
-    "@node-projects/web-component-designer": "^0.1.260",
+    "@node-projects/web-component-designer": "^0.1.261",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.33",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.11",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.11",
-    "@node-projects/web-component-designer-visualization-addons": "^0.1.127",
+    "@node-projects/web-component-designer-visualization-addons": "^0.1.128",
     "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.33",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",

package/www/dist/frontend/generated/Properties.json

@@ -255,11 +255,12 @@
                     "type": "string"
                 },
                 "source": {
-                    "description": "signal - read the value from a Signal\nproperty - read the value from a property of the customControl (not usable in screens)\nevent - read the value of a property of the event object\nparameter - a parameter you hand over\ncontext - a value of the context\ncomplexString - a string with signals (contained in {})\ncomplexSignal - read the value from a signal wich name is build here (it can contain other signals in {})\nexpression - js expression, 'ctx' is context object",
+                    "description": "signal - read the value from a Signal\nproperty - read the value from a property of the customControl (not usable in screens)\nevent - read the value of a property of the event object\nparameter - a parameter you hand over\ncontext - a value of the context\ncomplexString - a string with signals (contained in {})\ncomplexSignal - read the value from a signal wich name is build here (it can contain other signals in {})\nexpression - js expression, 'ctx' is context object\nelementProperty - a property defined on the element raising the event",
                     "enum": [
                         "complexSignal",
                         "complexString",
                         "context",
+                        "elementProperty",
                         "event",
                         "expression",
                         "parameter",

package/www/index.html

@@ -218,7 +218,7 @@
     </button>
     <button data-command="save" title="save" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
     <div style="margin-left: 30px;">
-      webui - 1.31.6 - 6bb1b00
+      webui - 1.32.0 - 009880e
     </div>
     <button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
         src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>

package/www/node_modules/@node-projects/web-component-designer/dist/elements/helper/CssUnitConverter.js

@@ -1,4 +1,4 @@
-//unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh
+//unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh, vi, ic, ric
 const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'fr'];
 const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i');
 export function convertCssUnitToPixel(cssValue, target, percentTarget) {

package/www/node_modules/@node-projects/web-component-designer/dist/elements/helper/Helper.js

@@ -54,11 +54,11 @@ export function arraysEqual(a, b) {
     return true;
 }
 let nullObject;
-export function deepValue(obj, path, returnNullObject = false) {
+export function deepValue(obj, path, returnNullObject = false, splitter = '.') {
     if (path === undefined || path === null) {
         return obj;
     }
-    const pathParts = path.split('.');
+    const pathParts = path.split(splitter);
     for (let i = 0; i < pathParts.length; i++) {
         if (obj != null) {
             obj = obj[pathParts[i]];
@@ -69,11 +69,11 @@ export function deepValue(obj, path, returnNullObject = false) {
     }
     return obj;
 }
-export function setDeepValue(obj, path, value) {
+export function setDeepValue(obj, path, value, splitter = '.') {
     if (path === undefined || path === null) {
         return;
     }
-    const pathParts = path.split('.');
+    const pathParts = path.split(splitter);
     for (let i = 0; i < pathParts.length - 1; i++) {
         if (obj != null) {
             let newObj = obj[pathParts[i]];

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -4,16 +4,16 @@ import { ValueType } from '../ValueType.js';
 import { NodeType } from '../../../item/NodeType.js';
 import cssProperties from "./CssProperties.json" with { type: 'json' };
 import { BindingTarget } from '../../../item/BindingTarget.js';
-import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
 import { PropertiesHelper } from './PropertiesHelper.js';
 import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { CssPropertiesService } from './CssPropertiesService.js';
 const localName = '<local>';
-export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
+export class CssCurrentPropertiesService extends CssPropertiesService {
     getRefreshMode(designItem) {
         return RefreshMode.fullOnValueChange;
     }
     constructor() {
-        super();
+        super(null);
         this.name = 'styles';
     }
     isHandledElement(designItem) {
@@ -22,6 +22,9 @@ export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
     async getProperty(designItem, name) {
         return { name: name, type: 'string', service: this, propertyType: PropertyType.cssValue };
     }
+    getPropertyNameSuggestions(designItems) {
+        return Object.keys(cssProperties).map(x => PropertiesHelper.camelToDashCase(x));
+    }
     async getProperties(designItem) {
         if (!designItem || designItem.nodeType != NodeType.Element)
             return [];

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/propertiesService/services/CssProperties.json

@@ -223,7 +223,9 @@
     "colorScheme": {},
     "columnCount": {},
     "columnFill": {},
-    "columnGap": {},
+    "columnGap": {
+        "type": "length"
+    },
     "columnRule": {},
     "columnRuleColor": {
         "type": "color"
@@ -316,6 +318,7 @@
             "wrap-reverse"
         ]
     },
+    "fieldSizing": {},
     "float": {
         "type": "list",
         "values": [
@@ -340,6 +343,7 @@
     "fontOpticalSizing": {},
     "fontPalette": {},
     "fontSize": {},
+    "fontSizeAdjust": {},
     "fontStretch": {},
     "fontStyle": {},
     "fontSynthesis": {},
@@ -354,7 +358,9 @@
     "fontVariationSettings": {},
     "fontWeight": {},
     "forcedColorAdjust": {},
-    "gap": {},
+    "gap": {
+        "type": "length"
+    },
     "grid": {},
     "gridArea": {},
     "gridAutoColumns": {},
@@ -362,12 +368,18 @@
     "gridAutoRows": {},
     "gridColumn": {},
     "gridColumnEnd": {},
-    "gridColumnGap": {},
+    "gridColumnGap": {
+        "type": "length"
+    },
     "gridColumnStart": {},
-    "gridGap": {},
+    "gridGap": {
+        "type": "length"
+    },
     "gridRow": {},
     "gridRowEnd": {},
-    "gridRowGap": {},
+    "gridRowGap": {
+        "type": "length"
+    },
     "gridRowStart": {},
     "gridTemplate": {},
     "gridTemplateAreas": {},
@@ -598,7 +610,8 @@
             "static",
             "relative",
             "absolute",
-            "fixed"
+            "fixed",
+            "anchor"
         ]
     },
     "prefix": {},
@@ -608,11 +621,24 @@
     "resize": {},
     "right": {},
     "rotate": {},
-    "rowGap": {},
+    "rowGap": {
+        "type": "length"
+    },
+    "rubyAlign": {},
     "rubyPosition": {},
     "rx": {},
     "ry": {},
     "scale": {},
+    "scrollbarColor": {},
+    "scrollbarGutter": {
+        "type": "list",
+        "values": [
+            "auto",
+            "stable",
+            "stable both-edges"
+        ]
+    },
+    "scrollbarWidth": {},
     "scrollBehavior": {},
     "scrollMargin": {},
     "scrollMarginBlock": {},
@@ -639,11 +665,18 @@
     "scrollSnapAlign": {},
     "scrollSnapStop": {},
     "scrollSnapType": {},
-    "scrollbarGutter": {},
     "shapeImageThreshold": {},
     "shapeMargin": {},
     "shapeOutside": {},
-    "shapeRendering": {},
+    "shapeRendering": {
+        "type": "list",
+        "values": [
+            "auto",
+            "optimizeSpeed",
+            "crispEdges",
+            "geometricPrecision"
+        ]
+    },
     "size": {},
     "sizeAdjust": {},
     "speak": {},
@@ -681,12 +714,7 @@
             "center",
             "justify",
             "justify-all",
-            "match-parent",
-            "inherit",
-            "initial",
-            "revert",
-            "revert-layer",
-            "unset"
+            "match-parent"
         ]
     },
     "textAlignLast": {},
@@ -715,6 +743,23 @@
     "textTransform": {},
     "textUnderlineOffset": {},
     "textUnderlinePosition": {},
+    "textWrap": {},
+    "textWrapMode": {
+        "type": "list",
+        "values": [
+            "wrap",
+            "nowrap"
+        ]
+    },
+    "textWrapStyle": {
+        "type": "list",
+        "values": [
+            "auto",
+            "balance",
+            "pretty",
+            "stable"
+        ]
+    },
     "top": {},
     "touchAction": {},
     "transform": {},
@@ -723,6 +768,7 @@
     "transformStyle": {},
     "transition": {},
     "transitionDelay": {},
+    "transitionBehavior": {},
     "transitionDuration": {},
     "transitionProperty": {},
     "transitionTimingFunction": {},

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -21,6 +21,7 @@ export class CssPropertiesService extends AbstractCssPropertiesService {
             "box-shadow",
             "opacity",
             "position",
+            "align-content",
         ],
         "font": [
             "font-family",
@@ -41,12 +42,13 @@ export class CssPropertiesService extends AbstractCssPropertiesService {
         "position",
         "grid-template-columns",
         "grid-template-rows",
+        "gap",
         "column-gap",
         "row-gap",
         "align-content",
         "justify-content",
         "align-items",
-        "justify-items",
+        "justify-items"
     ];
     gridChild = [
         "grid-row",
@@ -62,7 +64,8 @@ export class CssPropertiesService extends AbstractCssPropertiesService {
         "flex-wrap",
         "align-content",
         "justify-content",
-        "align-items"
+        "align-items",
+        "gap"
     ];
     flexChild = [
         "align-self",
@@ -113,6 +116,7 @@ export class CssPropertiesService extends AbstractCssPropertiesService {
             default:
                 return {
                     name,
+                    //attributeName: PropertiesHelper.camelToDashCase(name),
                     type: cssProperties[camelName]?.type ?? 'string',
                     values: cssProperties[camelName]?.values ? [...cssProperties[camelName]?.values, 'initial', 'inherit', 'unset'] : ['initial', 'inherit', 'unset'],
                     service: this,

package/www/node_modules/@node-projects/web-component-designer/dist/elements/widgets/designerView/extensions/PositionExtension.js

@@ -14,6 +14,7 @@ export class PositionExtension extends AbstractExtension {
     }
     _oldValues = [];
     refresh() {
+        //TODO: show wich position is docked (no dashed line, but full). klick on value disables or enables docking? Disabling enables parent side, enabling both removes width or height.
         const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.parent.element);
         if (this._valuesHaveChanges(this.designerCanvas.scaleFactor, itemRect.x, itemRect.y, itemParentRect.x, itemParentRect.y, itemRect.height, itemRect.width, itemParentRect.height, itemParentRect.width)) {

package/www/node_modules/@node-projects/web-component-designer/dist/elements/widgets/designerView/extensions/ResizeExtension.js

@@ -44,7 +44,6 @@ export class ResizeExtension extends AbstractExtension {
         this.refresh(cache, event);
     }
     refresh(cache, event) {
-        //#region Resizer circles
         let transformedCornerPoints = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0];
         if (!transformedCornerPoints)
             return;
@@ -62,7 +61,6 @@ export class ResizeExtension extends AbstractExtension {
             this._circle8 = this._drawResizerOverlay((transformedCornerPoints.p2.x + (transformedCornerPoints.p3.x - transformedCornerPoints.p2.x) / 2), (transformedCornerPoints.p2.y + (transformedCornerPoints.p3.y - transformedCornerPoints.p2.y) / 2), 'e-resize', this._circle8);
             this._circle7 = this._drawResizerOverlay(transformedCornerPoints.p3.x, transformedCornerPoints.p3.y, 'se-resize', this._circle7);
         }
-        //#endregion Circles
     }
     _drawResizerOverlay(x, y, cursor, oldCircle) {
         let circle = this._drawCircle(x, y, this.designerCanvas.serviceContainer.options.resizerPixelSize / this.designerCanvas.zoomFactor, 'svg-primary-resizer', oldCircle);
@@ -78,6 +76,9 @@ export class ResizeExtension extends AbstractExtension {
     _pointerActionTypeResize(circle, event, actionMode) {
         event.stopPropagation();
         const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event);
+        //TODO: calculate new position and size in the extension
+        //aply the values with the position service
+        //don't switch from left positioning to right and so on...
         switch (event.type) {
             case EventNames.PointerDown:
                 const cx = parseFloat(circle.getAttribute('cx'));
@@ -89,12 +90,10 @@ export class ResizeExtension extends AbstractExtension {
                 this._actionModeStarted = actionMode;
                 this._initialComputedTransformOrigins = [];
                 this._initialTransformOrigins = [];
-                //#region Calc elements' dimension
                 const transformBackup = this.extendedItem.element.style.transform;
                 this.extendedItem.element.style.transform = '';
                 let rect = this.extendedItem.element.getBoundingClientRect();
                 this.extendedItem.element.style.transform = transformBackup;
-                //#endregion Calc element's dimension
                 let contentBoxOffset = { x: 0, y: 0 };
                 if (getComputedStyle(this.extendedItem.element).boxSizing == 'content-box') {
                     contentBoxOffset = getContentBoxContentOffsets(this.extendedItem.element);

package/www/node_modules/@node-projects/web-component-designer/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -11,6 +11,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _propertiesService;
     _designItems;
     _lastClassType;
+    _addCounter = 0;
     propertyGroupHover;
     propertyGroupClick;
     propertyContextMenuProvider;
@@ -213,8 +214,11 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                 if (p.type == 'addNew') {
                     let input = editor.element;
                     input.disabled = true;
+                    input.id = "addNew_input_" + (++this._addCounter);
                     let label = document.createElement("input");
                     label.value = p.name;
+                    label.type = "text";
+                    label.id = "addNew_label_" + this._addCounter;
                     label.onkeyup = e => {
                         if (e.key == 'Enter' && label.value) {
                             p.name = label.value;
@@ -223,6 +227,18 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                             input.focus();
                         }
                     };
+                    if (p.service.getPropertyNameSuggestions) {
+                        const sug = p.service.getPropertyNameSuggestions(null); //TODO: design items?
+                        const dl = document.createElement("datalist");
+                        dl.id = "addNew_" + this._addCounter + "_datalist";
+                        for (let s of sug) {
+                            const op = document.createElement("option");
+                            op.value = s;
+                            dl.append(op);
+                        }
+                        this._div.appendChild(dl);
+                        label.setAttribute('list', dl.id);
+                    }
                     this._div.appendChild(label);
                 }
                 else {
@@ -238,6 +254,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                     }
                     else {
                         let label = document.createElement("input");
+                        label.id = 'label_' + p.name;
                         let input = editor.element;
                         label.value = p.name;
                         label.onkeyup = async (e) => {
@@ -253,7 +270,8 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                         this._div.appendChild(label);
                     }
                 }
-                editor.element.id = p.name;
+                if (p.name)
+                    editor.element.id = p.name;
                 this._div.appendChild(editor.element);
                 this._propertyMap.set(p, { isSetElement: rect, editor: editor });
             }

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/components/SimpleScriptEditor.js

@@ -207,7 +207,7 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
     }
     //Converter from TypscriptJsonSchema to our Property list...
     async addPossibleCommands() {
-        let commands = Object.keys(this.scriptCommandsTypeInfo.definitions);
+        let commands = Object.keys(this.scriptCommandsTypeInfo.definitions).filter(x => this.scriptCommandsTypeInfo.definitions[x].type == 'object');
         for (let c of commands) {
             if (c == 'ScriptCommands')
                 continue;

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/interfaces/IScriptMultiplexValue.js

@@ -8,6 +8,7 @@ export class IScriptMultiplexValue {
     * complexString - a string with signals (contained in {})
     * complexSignal - read the value from a signal wich name is build here (it can contain other signals in {})
     * expression - js expression, 'ctx' is context object
+    * elementProperty - a property defined on the element raising the event
     */
     source;
     /**

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/scripting/ScriptSystem.js

@@ -1,4 +1,4 @@
-import { sleep } from "@node-projects/web-component-designer/dist/elements/helper/Helper.js";
+import { deepValue, setDeepValue, sleep } from "@node-projects/web-component-designer/dist/elements/helper/Helper.js";
 import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper.js";
 import { parseBindingString } from "../helpers/BindingsHelper.js";
 import Long from 'long';
@@ -83,10 +83,10 @@ export class ScriptSystem {
     }
     async getValueFromTarget(target, name, context) {
         if (target === 'property') {
-            return context.root[name];
+            return deepValue(context.root, name);
         }
         else if (target === 'elementProperty') {
-            return context.element[name];
+            return deepValue(context.element, name);
         }
         else {
             return (await this._visualizationHandler.getState(this.getSignalName(name, context)))?.val;
@@ -94,10 +94,10 @@ export class ScriptSystem {
     }
     async setValueOnTarget(target, name, context, value) {
         if (target === 'property') {
-            context.root[name] = value;
+            setDeepValue(context.root, name, value);
         }
         else if (target === 'elementProperty') {
-            context.element[name] = value;
+            setDeepValue(context.element, name, value);
         }
         else {
             await this._visualizationHandler.setState(this.getSignalName(name, context), value);
@@ -349,7 +349,10 @@ export class ScriptSystem {
         if (typeof value === 'object') {
             switch (value.source) {
                 case 'property': {
-                    return outerContext.root[value.name];
+                    return deepValue(outerContext.root, value.name);
+                }
+                case 'elementProperty': {
+                    return deepValue(outerContext.element, value.name);
                 }
                 case 'signal': {
                     let sng = await this._visualizationHandler.getState(this.getSignalName(value.name, outerContext));
@@ -358,15 +361,14 @@ export class ScriptSystem {
                 case 'event': {
                     let obj = outerContext.event;
                     if (value.name)
-                        obj = ScriptSystem.extractPart(obj, value.name);
+                        obj = deepValue(obj, value.name);
                     return obj;
                 }
                 case 'parameter': {
                     return outerContext.parameters[value.name];
                 }
                 case 'context': {
-                    const obj = ScriptSystem.extractPart(outerContext, value.name);
-                    return obj;
+                    return deepValue(outerContext, value.name);
                 }
                 case 'complexString': {
                     let text = value.name;
@@ -427,13 +429,6 @@ export class ScriptSystem {
             return outerContext.relativeSignalsPath + name;
         return name;
     }
-    static extractPart(obj, propertyPath) {
-        let retVal = obj;
-        for (let p of propertyPath.split('.')) {
-            retVal = retVal?.[p];
-        }
-        return retVal;
-    }
     createScriptContext(root, event, element, parameters, relativeSignalsPath) {
         return { root, event, element, parameters, relativeSignalsPath };
     }