iobroker.mywebui 1.56.1 → 1.58.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 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}"}
+{"properties": {"caption": {"type": "string", "default": ""}, "icon": {"type": "string", "default": ""}, "bgColor": {"type": "color", "default": ""}}, "settings": {"width": "100%", "height": "48px"}, "html": "<div id=\"bar\" class=\"bar\"><img id=\"barIcon\" class=\"bar-icon\" alt=\"\" style=\"display:none;\"/><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 16px 0 60px;color:#fff;box-sizing:border-box;background:var(--bar-bg,linear-gradient(90deg,#1e3c72 0%,#2a5298 100%));box-shadow:0 2px 12px rgba(0,0,0,.25);}\n.bar-icon{height:30px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}\n.bar-cap{font-size:17px;font-weight:600;letter-spacing:.3px;}", "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 cfg = (window.IOB && window.IOB.config && window.IOB.config.appBar) || {};\n    const upd = () => {\n        const bar=instance._getDomElement('bar'), ic=instance._getDomElement('barIcon'), cap=instance._getDomElement('barCap');\n        const bg = instance.bgColor || cfg.bgColor;\n        if(bg) instance.style.setProperty('--bar-bg', bg);\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 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}"}
+{"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": "48px"}, "html": "<div id=\"mi\" class=\"mi\"><span id=\"miIcon\" class=\"mi-icon\">▸</span><img id=\"miImg\" class=\"mi-img\" alt=\"\" style=\"display:none;\"/><span id=\"miLabel\" class=\"mi-label\"></span></div>", "style": ":host{display:block;color:inherit;}\n.mi{display:flex;align-items:center;gap:13px;margin:4px 10px;padding:10px 13px;cursor:pointer;white-space:nowrap;overflow:hidden;border-radius:10px;border:1px solid transparent;background:var(--mi-bg,rgba(255,255,255,.06));color:var(--mi-fg,rgba(255,255,255,.9));transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;box-sizing:border-box;}\n.mi:hover{background:var(--mi-hover,rgba(255,255,255,.14));border-color:rgba(255,255,255,.18);transform:translateX(2px);}\n.mi.selected{background:var(--mi-active,linear-gradient(135deg,rgba(33,150,243,.38),rgba(33,150,243,.16)));border-color:var(--mi-active-border,rgba(33,150,243,.55));box-shadow:0 2px 10px rgba(33,150,243,.22);}\n.mi.selected .mi-label{color:var(--mi-active-fg,#fff);}\n.mi.selected .mi-icon{background:var(--mi-active-fg,rgba(255,255,255,.9));color:var(--mi-active-icon,#1976d2);}\n.mi-img{width:24px;height:24px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}\n.mi-icon{width:26px;height:26px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.13);font-size:13px;line-height:1;}\n.mi-label{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;letter-spacing:.2px;}\n.mi.compact{margin:5px auto;padding:9px 0;justify-content:center;gap:0;width:44px;}\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'), ic=instance._getDomElement('miIcon'), lbl=instance._getDomElement('miLabel'), mi=instance._getDomElement('mi');\n        const hasImg = !!instance.image;\n        if(img){ if(hasImg){ img.src=resolveImg(instance.image); img.style.display=''; } else img.style.display='none'; }\n        if(ic){ ic.style.display = hasImg ? 'none' : ''; ic.textContent = (instance.title||instance.screenName||'?').trim().charAt(0).toUpperCase() || '▸'; }\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}"}

package/default-controls/controls/navigation/sidebar.control

@@ -1 +1 @@
-{"properties": {}, "settings": {"width": "220px", "height": "100%"}, "html": "<div id=\"sb\" class=\"sb\"><div id=\"sbHdr\" class=\"sb-hdr\"></div><div id=\"sbItems\" class=\"sb-items\"></div></div>", "style": ":host{display:block;width:100%;height:100%;background:var(--nav-bg,#1b1b1b);color:var(--nav-fg,#ddd);box-sizing:border-box;}\n.sb{display:flex;flex-direction:column;height:100%;width:100%;}\n.sb-hdr{padding:12px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap;overflow:hidden;}\n.sb-items{flex:1;overflow:auto;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const IOB = window.IOB;\n    const cfg = (IOB && IOB.config && IOB.config.navigation) || {};\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    const sb=instance._getDomElement('sb'), hdr=instance._getDomElement('sbHdr'), items=instance._getDomElement('sbItems');\n    if (hdr){ hdr.textContent=cfg.menuHeaderText||''; hdr.style.display=cfg.menuHeaderText?'':'none'; if(cfg.menuHeaderTextColor) hdr.style.color=cfg.menuHeaderTextColor; }\n    if (sb){ if(cfg.bgColor) instance.style.setProperty('--nav-bg',cfg.bgColor); if(cfg.textColor) instance.style.setProperty('--nav-fg',cfg.textColor); }\n\n    let state='expanded'; const ICONS_W=56; let burger=null; let hasItems=false;\n    const navWidth = cfg.menuWidth ? (/^\\d+$/.test(String(cfg.menuWidth))?cfg.menuWidth+'px':String(cfg.menuWidth)) : '220px';\n    const setActive=(name)=>{ if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>{ mi.selected=(mi.screenName===name); }); };\n    const navTo=(name)=>{ if(IOB&&IOB.changeView) IOB.changeView.emit(name); setActive(name); if(cfg.hideAfterSelection) setState('hidden'); };\n\n    async function loadEntries(){\n        if(!IOB||!IOB.getAllNames) return [];\n        const names=await IOB.getAllNames('screen').catch(()=>[]);\n        const list=[];\n        for(const n of names){ const o=await IOB.getWebuiObject('screen',n).catch(()=>null); const nv=o&&o.settings&&o.settings.navigation; if(nv&&nv.show) list.push({name:n,title:nv.title||n,order:parseFloat(nv.order)||0,image:nv.image||''}); }\n        list.sort((a,b)=>a.order-b.order); return list;\n    }\n    async function render(){\n        const list=await loadEntries(); hasItems=list.length>0;\n        if(items){ items.innerHTML='';\n            for(const e of list){ const mi=document.createElement('webui-navigation-menu-item'); mi.screenName=e.name; mi.title=e.title; mi.image=e.image; mi.addEventListener('menuitemclick',()=>navTo(e.name)); items.appendChild(mi); }\n        }\n        if(!isDesigner && hasItems && !cfg.hideMenu) applyRuntimeLayout(); else if(!isDesigner) { const v=document.getElementById('viewer'); if(v){ v.style.left='0'; v.style.width='100%'; } instance.style.display='none'; }\n    }\n    function applyRuntimeLayout(){\n        const ab=document.getElementById('__nav-appbar-host'); const top=ab?ab.offsetHeight:0;\n        instance.style.cssText=`position:fixed;left:0;bottom:0;top:${top}px;z-index:99999;overflow:hidden;transition:width .2s,transform .2s;background:${cfg.bgColor||'#1b1b1b'};color:${cfg.textColor||'#ddd'};`;\n        if(!burger){ burger=document.createElement('div'); burger.textContent='☰'; const inBar=top>0; burger.style.cssText=`position:fixed;top:${inBar?0:8}px;left:${inBar?0:8}px;z-index:100002;width:${inBar?top:40}px;height:${inBar?top:40}px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;${inBar?'':'border-radius:6px;'}background:${cfg.showButtonBg||(inBar?'transparent':'rgba(0,0,0,.45)')};color:${cfg.showButtonColor||'#fff'};`; burger.onclick=cycle; document.body.appendChild(burger); }\n        setState(state);\n    }\n    function setState(s){\n        state=s; const v=document.getElementById('viewer'); const top=parseInt(instance.style.top)||0; let left='0px';\n        const compact=(state==='icons');\n        if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>mi.compact=compact);\n        if(state==='expanded'){ instance.style.width=navWidth; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display=cfg.menuHeaderText?'':'none'; left=navWidth; }\n        else if(state==='icons'){ instance.style.width=ICONS_W+'px'; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display='none'; left=ICONS_W+'px'; }\n        else { instance.style.transform='translateX(-110%)'; left='0px'; }\n        if(v){ v.style.left=left; v.style.width=`calc(100% - ${left})`; v.style.top=top+'px'; v.style.height=`calc(100% - ${top}px)`; }\n    }\n    function cycle(){ const o=['expanded','icons','hidden']; let n=o[(o.indexOf(state)+1)%o.length]; if(n==='hidden'&&cfg.doNotHideCompletely)n='icons'; setState(n); }\n\n    render();\n    if(IOB&&IOB.changeView) IOB.changeView.on(v=>setActive(v));\n    const sv=document.getElementById('viewer'); if(sv&&sv.screenName) setActive(sv.screenName);\n}"}
+{"properties": {}, "settings": {"width": "220px", "height": "100%"}, "html": "<div id=\"sb\" class=\"sb\"><div id=\"sbHdr\" class=\"sb-hdr\"></div><div id=\"sbItems\" class=\"sb-items\"></div></div>", "style": ":host{display:block;width:100%;height:100%;box-sizing:border-box;}\n.sb{display:flex;flex-direction:column;height:100%;width:100%;background:var(--sb-bg,linear-gradient(180deg,#1e3c72 0%,#2a5298 100%));color:var(--sb-fg,rgba(255,255,255,.9));box-shadow:2px 0 18px rgba(0,0,0,.28);box-sizing:border-box;}\n.sb-hdr{padding:18px 16px 14px;font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--sb-hdr-fg,#fff);border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;}\n.sb-items{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;}\n.sb-items::-webkit-scrollbar{width:6px;}\n.sb-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const IOB = window.IOB;\n    const cfg = (IOB && IOB.config && IOB.config.navigation) || {};\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    const hdr=instance._getDomElement('sbHdr'), items=instance._getDomElement('sbItems');\n    if(cfg.bgColor) instance.style.setProperty('--sb-bg', cfg.bgColor);\n    if(cfg.textColor){ instance.style.setProperty('--sb-fg', cfg.textColor); instance.style.setProperty('--mi-fg', cfg.textColor); }\n    if(cfg.menuHeaderTextColor) instance.style.setProperty('--sb-hdr-fg', cfg.menuHeaderTextColor);\n    if(cfg.bgColorSelected){ instance.style.setProperty('--mi-active', cfg.bgColorSelected); instance.style.setProperty('--mi-active-icon', cfg.bgColorSelected); }\n    if(cfg.textColorSelected) instance.style.setProperty('--mi-active-fg', cfg.textColorSelected);\n    if(hdr){ hdr.textContent=cfg.menuHeaderText||''; hdr.style.display=cfg.menuHeaderText?'':'none'; }\n    let state='expanded'; const ICONS_W=64; let burger=null; let hasItems=false;\n    const navWidth = cfg.menuWidth ? (/^\\d+$/.test(String(cfg.menuWidth))?cfg.menuWidth+'px':String(cfg.menuWidth)) : '220px';\n    const setActive=(name)=>{ if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>{ mi.selected=(mi.screenName===name); }); };\n    const navTo=(name)=>{ if(IOB&&IOB.changeView) IOB.changeView.emit(name); setActive(name); if(cfg.hideAfterSelection) setState('hidden'); };\n    async function loadEntries(){\n        if(!IOB||!IOB.getAllNames) return [];\n        const names=await IOB.getAllNames('screen').catch(()=>[]);\n        const list=[];\n        for(const n of names){ const o=await IOB.getWebuiObject('screen',n).catch(()=>null); const nv=o&&o.settings&&o.settings.navigation; if(nv&&nv.show) list.push({name:n,title:nv.title||n,order:parseFloat(nv.order)||0,image:nv.image||''}); }\n        list.sort((a,b)=>a.order-b.order); return list;\n    }\n    async function render(){\n        const list=await loadEntries(); hasItems=list.length>0;\n        if(items){ items.innerHTML='';\n            for(const e of list){ const mi=document.createElement('webui-navigation-menu-item'); mi.screenName=e.name; mi.title=e.title; mi.image=e.image; mi.addEventListener('menuitemclick',()=>navTo(e.name)); items.appendChild(mi); }\n        }\n        if(!isDesigner){ if(hasItems && !cfg.hideMenu) applyRuntimeLayout(); else { const v=document.getElementById('viewer'); if(v){ v.style.left='0'; v.style.width='100%'; } instance.style.display='none'; } }\n    }\n    function applyRuntimeLayout(){\n        const ab=document.getElementById('__nav-appbar-host'); const top=ab?ab.offsetHeight:0;\n        instance.style.position='fixed'; instance.style.left='0'; instance.style.bottom='0'; instance.style.top=top+'px';\n        instance.style.zIndex='99999'; instance.style.overflow='hidden'; instance.style.transition='width .2s ease,transform .2s ease';\n        if(!burger){ burger=document.createElement('div'); burger.id='__nav-burger'; burger.textContent='☰'; const inBar=top>0; burger.style.cssText='position:fixed;top:'+(inBar?0:8)+'px;left:'+(inBar?0:8)+'px;z-index:100002;width:'+(inBar?top:42)+'px;height:'+(inBar?top:42)+'px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;'+(inBar?'':'border-radius:8px;')+'background:'+(cfg.showButtonBg||(inBar?'transparent':'rgba(0,0,0,.45)'))+';color:'+(cfg.showButtonColor||'#fff')+';transition:background .15s;'; burger.onclick=cycle; document.body.appendChild(burger); }\n        setState(state);\n    }\n    function setState(s){\n        state=s; const v=document.getElementById('viewer'); const top=parseInt(instance.style.top)||0; let left='0px';\n        const compact=(state==='icons');\n        if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>mi.compact=compact);\n        if(state==='expanded'){ instance.style.width=navWidth; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display=cfg.menuHeaderText?'':'none'; left=navWidth; }\n        else if(state==='icons'){ instance.style.width=ICONS_W+'px'; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display='none'; left=ICONS_W+'px'; }\n        else { instance.style.transform='translateX(-110%)'; left='0px'; }\n        if(v){ v.style.left=left; v.style.width='calc(100% - '+left+')'; v.style.top=top+'px'; v.style.height='calc(100% - '+top+'px)'; }\n    }\n    function cycle(){ const o=['expanded','icons','hidden']; let n=o[(o.indexOf(state)+1)%o.length]; if(n==='hidden'&&cfg.doNotHideCompletely)n='icons'; setState(n); }\n    render();\n    if(IOB&&IOB.changeView) IOB.changeView.on(v=>setActive(v));\n    const sv=document.getElementById('viewer'); if(sv&&sv.screenName) setActive(sv.screenName);\n}"}