iobroker.mywebui 1.56.0 → 1.57.0

package/default-controls/controls/navigation/app-bar.control

@@ -1 +1 @@
-{"properties": {"caption": {"type": "string", "default": ""}, "icon": {"type": "string", "default": ""}, "bgColor": {"type": "color", "default": "#222222"}}, "settings": {"width": "100%", "height": "48px"}, "html": "<div id=\"bar\" class=\"bar\"><img id=\"barIcon\" class=\"bar-icon\" alt=\"\"/><span id=\"barCap\" class=\"bar-cap\"></span></div>", "style": ":host{display:block;width:100%;height:100%;}\n.bar{display:flex;align-items:center;gap:12px;height:100%;padding:0 12px 0 56px;color:#fff;box-sizing:border-box;}\n.bar-icon{height:30px;width:auto;}\n.bar-cap{font-size:16px;font-weight:600;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const cfg = (window.IOB && window.IOB.config && window.IOB.config.appBar) || {};\n    const upd = () => {\n        const bar = instance._getDomElement('bar');\n        const ic  = instance._getDomElement('barIcon');\n        const cap = instance._getDomElement('barCap');\n        if (bar) bar.style.background = instance.bgColor || cfg.bgColor || '#222222';\n        const icon = instance.icon || cfg.icon;\n        if (ic){ if(icon){ ic.src=icon; ic.style.display=''; } else ic.style.display='none'; }\n        if (cap) cap.textContent = instance.caption || cfg.caption || '';\n    };\n    instance._assignEvent('caption-changed', upd);\n    instance._assignEvent('icon-changed', upd);\n    instance._assignEvent('bg-color-changed', upd);\n    upd();\n}"}
+{"properties": {"caption": {"type": "string", "default": ""}, "icon": {"type": "string", "default": ""}, "bgColor": {"type": "color", "default": "#222222"}}, "settings": {"width": "100%", "height": "48px"}, "html": "<div id=\"bar\" class=\"bar\"><img id=\"barIcon\" class=\"bar-icon\" alt=\"\"/><span id=\"barCap\" class=\"bar-cap\"></span></div>", "style": ":host{display:block;width:100%;height:100%;}\n.bar{display:flex;align-items:center;gap:12px;height:100%;padding:0 12px 0 56px;color:#fff;box-sizing:border-box;}\n.bar-icon{height:30px;width:auto;}\n.bar-cap{font-size:16px;font-weight:600;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const cfg = (window.IOB && window.IOB.config && window.IOB.config.appBar) || {};\n    const resolveImg = (img) => { if(!img) return ''; if(/^(https?:|data:|blob:|\\/)/.test(img)) return img; try{ return (window.IOB&&window.IOB.imagePrefix?window.IOB.imagePrefix:'')+img; }catch(e){ return img; } };\n    const upd = () => {\n        const bar = instance._getDomElement('bar');\n        const ic  = instance._getDomElement('barIcon');\n        const cap = instance._getDomElement('barCap');\n        if (bar) bar.style.background = instance.bgColor || cfg.bgColor || '#222222';\n        const icon = instance.icon || cfg.icon;\n        if (ic){ if(icon){ ic.src=resolveImg(icon); ic.style.display=''; } else ic.style.display='none'; }\n        if (cap) cap.textContent = instance.caption || cfg.caption || '';\n    };\n    instance._assignEvent('caption-changed', upd);\n    instance._assignEvent('icon-changed', upd);\n    instance._assignEvent('bg-color-changed', upd);\n    upd();\n}"}

package/default-controls/controls/navigation/menu-item.control

@@ -1 +1 @@
-{"properties": {"screenName": {"type": "string", "default": ""}, "title": {"type": "string", "default": "Item"}, "image": {"type": "string", "default": ""}, "selected": {"type": "boolean", "default": "false"}, "compact": {"type": "boolean", "default": "false"}}, "settings": {"width": "220px", "height": "44px"}, "html": "<div id=\"mi\" class=\"mi\"><img id=\"miImg\" class=\"mi-img\" alt=\"\"/><span id=\"miLabel\" class=\"mi-label\"></span></div>", "style": ":host{display:block;color:inherit;}\n.mi{display:flex;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .12s;box-sizing:border-box;}\n.mi:hover{background:rgba(255,255,255,.08);}\n.mi.selected{background:var(--nav-selected-bg,rgba(255,255,255,.16));}\n.mi-img{width:24px;height:24px;object-fit:contain;flex-shrink:0;}\n.mi-label{overflow:hidden;text-overflow:ellipsis;}\n.mi.compact .mi-label{display:none;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const upd = () => {\n        const img = instance._getDomElement('miImg');\n        const lbl = instance._getDomElement('miLabel');\n        const mi  = instance._getDomElement('mi');\n        if (img){ if(instance.image){ img.src=instance.image; img.style.display=''; } else { img.style.display='none'; } }\n        if (lbl) lbl.textContent = instance.title || instance.screenName || '';\n        if (mi){ mi.classList.toggle('selected', instance.selected===true || instance.selected==='true'); mi.classList.toggle('compact', instance.compact===true || instance.compact==='true'); }\n    };\n    instance._assignEvent('title-changed', upd);\n    instance._assignEvent('image-changed', upd);\n    instance._assignEvent('screen-name-changed', upd);\n    instance._assignEvent('selected-changed', upd);\n    instance._assignEvent('compact-changed', upd);\n    const mi = instance._getDomElement('mi');\n    if (mi) mi.addEventListener('click', () => {\n        if (instance.screenName && window.IOB && window.IOB.changeView) window.IOB.changeView.emit(instance.screenName);\n        instance.dispatchEvent(new CustomEvent('menuitemclick',{bubbles:true,composed:true,detail:{screenName:instance.screenName}}));\n    });\n    upd();\n}"}
+{"properties": {"screenName": {"type": "string", "default": ""}, "title": {"type": "string", "default": "Item"}, "image": {"type": "string", "default": ""}, "selected": {"type": "boolean", "default": "false"}, "compact": {"type": "boolean", "default": "false"}}, "settings": {"width": "220px", "height": "44px"}, "html": "<div id=\"mi\" class=\"mi\"><img id=\"miImg\" class=\"mi-img\" alt=\"\"/><span id=\"miLabel\" class=\"mi-label\"></span></div>", "style": ":host{display:block;color:inherit;}\n.mi{display:flex;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .12s;box-sizing:border-box;}\n.mi:hover{background:rgba(255,255,255,.08);}\n.mi.selected{background:var(--nav-selected-bg,rgba(255,255,255,.16));}\n.mi-img{width:24px;height:24px;object-fit:contain;flex-shrink:0;}\n.mi-label{overflow:hidden;text-overflow:ellipsis;}\n.mi.compact .mi-label{display:none;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const resolveImg = (img) => { if(!img) return ''; if(/^(https?:|data:|blob:|\\/)/.test(img)) return img; try{ return (window.IOB&&window.IOB.imagePrefix?window.IOB.imagePrefix:'')+img; }catch(e){ return img; } };\n    const upd = () => {\n        const img = instance._getDomElement('miImg');\n        const lbl = instance._getDomElement('miLabel');\n        const mi  = instance._getDomElement('mi');\n        if (img){ if(instance.image){ img.src=resolveImg(instance.image); img.style.display=''; } else { img.style.display='none'; } }\n        if (lbl) lbl.textContent = instance.title || instance.screenName || '';\n        if (mi){ mi.classList.toggle('selected', instance.selected===true || instance.selected==='true'); mi.classList.toggle('compact', instance.compact===true || instance.compact==='true'); }\n    };\n    instance._assignEvent('title-changed', upd);\n    instance._assignEvent('image-changed', upd);\n    instance._assignEvent('screen-name-changed', upd);\n    instance._assignEvent('selected-changed', upd);\n    instance._assignEvent('compact-changed', upd);\n    const mi = instance._getDomElement('mi');\n    if (mi) mi.addEventListener('click', () => {\n        if (instance.screenName && window.IOB && window.IOB.changeView) window.IOB.changeView.emit(instance.screenName);\n        instance.dispatchEvent(new CustomEvent('menuitemclick',{bubbles:true,composed:true,detail:{screenName:instance.screenName}}));\n    });\n    upd();\n}"}