2 lines
7.1 KiB
JavaScript
2 lines
7.1 KiB
JavaScript
globalThis.Component.register("Nav",t=>{t.vertical=t.hasAttribute("vertical"),t.state.openName=t.state.openName||null,t.state.value=t.state.value||null,t.addEventListener("bind",e=>{t.state.value=e.detail}),t.click=(e,i)=>{e.noselect||i||(t.state.value=e.name,t.dispatchEvent(new CustomEvent("change",{detail:e.name,bubbles:!1}))),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))},t.clickSubitem=e=>{t.state.value=e.name,t.dispatchEvent(new CustomEvent("change",{detail:e.name,bubbles:!1})),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))},t.toggleGroup=e=>{t.state.openName=t.state.openName===e.name?null:e.name,t.dispatchEvent(new CustomEvent("nav",{detail:{item:e,open:t.state.openName===e.name},bubbles:!1}))}},globalThis.Util.makeDom('\n<div $class="${this.vertical ? \'d-flex flex-column border-end h-100 align-self-stretch overflow-visible\' : \'navbar navbar-expand border-bottom\'} bg-body-secondary px-2 ${this.vertical ? \'py-3\' : \'py-1\'} align-items-center ${this.vertical ? \'align-items-start\' : \'\'}" $style="this.vertical ? \'min-height:0;\' : \'\'">\n\t<div class="d-flex align-items-center gap-2">\n <template $if="this.state?.brand?.image">\n <img $src="this.state.brand.image" $class="${this.vertical ? \'mb-2\' : \'mx-1\'}" style="height:30px;width:auto;max-width:300px">\n </template>\n <template $if="this.state?.brand?.icon">\n <i $class="bi bi-${this.state.brand.icon} ${this.vertical ? \'mb-2\' : \'mx-1\'}"></i>\n </template>\n <template $if="this.state?.brand?.label">\n <span $class="${this.vertical ? \'mb-2 fw-bold\' : \'mx-1\'}" style="transform: translateY(3px);" $text="this.state.brand.label"></span>\n </template>\n\t</div>\n\t<div $class="d-flex ${this.vertical ? \'w-100 flex-fill mt-2 flex-column\' : \'ms-2 align-items-center flex-fill\'}" $style="this.vertical ? \'min-height:0; overflow-y:auto; overflow-x:visible;\' : \'\'">\n\t\t<template $each="this.state?.list || []">\n\t\t\t<div $class="${this.vertical ? \'nav nav-pills flex-column w-100 position-relative\' : \'navbar-nav flex-row align-items-center\'} ${!this.vertical && item.type===\'fill\' ? \'flex-fill\' : \'\'}" style="transform: translateY(3px);">\n\t\t\t<template $if="item.type===\'label\'">\n\t\t\t\t<div $class="${this.vertical ? \'small text-uppercase text-body-secondary fw-semibold px-2 py-1 mt-2\' : \'navbar-text small text-uppercase text-body-secondary fw-semibold px-2\'} ${item.class || \'\'}" $text="item.label"></div>\n\t\t\t</template>\n\t\t\t<template $if="item.type===\'button\'">\n\t\t\t\t<button $class="nav-link ${this.state.value===item.name?\'active\':\'\'} ${this.vertical ? \'w-100 text-start py-1 px-2\' : \'\'} ${item.class || \'\'}" $onclick="this.click(item)">\n\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span $class="${this.vertical ? \'text-truncate\' : \'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'}" $text="item.label"></span>\n\t\t\t\t</button>\n\t\t\t\t</template>\n\t\t\t\t<template $if="item.type===\'dropdown\'">\n\t\t\t\t\t<template $if="this.vertical">\n\t\t\t\t\t\t<div class="w-100">\n\t\t\t\t\t\t\t<button type="button" $class="nav-link w-100 text-start py-1 px-2 d-flex align-items-center justify-content-between ${item.class || \'\'}" $onclick="this.toggleGroup(item)">\n\t\t\t\t\t\t\t\t<span class="d-inline-flex align-items-center">\n\t\t\t\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span class="text-truncate" $text="item.label"></span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<i $class="bi ${this.state.openName===item.name?\'bi-chevron-down\':\'bi-chevron-right\'} small ms-2"></i>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<template $if="this.state.openName===item.name">\n\t\t\t\t\t\t\t\t<div class="d-flex flex-column w-100 ps-2 mt-1">\n\t\t\t\t\t\t\t\t\t<template $each="item.items || item.list" as="subitem">\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'label\'">\n\t\t\t\t\t\t\t\t\t\t\t<div $class="small text-uppercase text-body-secondary fw-semibold px-2 py-1 ${subitem.class || \'\'}" $text="subitem.label"></div>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'button\'">\n\t\t\t\t\t\t\t\t\t\t\t<button $class="nav-link w-100 text-start py-1 px-2 ${this.state.value===subitem.name?\'active\':\'\'} ${subitem.class || \'\'}" $onclick="this.clickSubitem(subitem)">\n\t\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'switch\'">\n\t\t\t\t\t\t\t\t\t\t\t<div $class="d-flex align-items-center px-2 py-2 ${subitem.class || \'\'}">\n\t\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template $if="!this.vertical">\n\t\t\t\t\t\t<div class="dropdown">\n\t\t\t\t\t\t\t<button type="button" $class="nav-link dropdown-toggle ${item.class || \'\'}" data-bs-toggle="dropdown">\n\t\t\t\t\t\t\t\t<i $class="bi bi-${item.icon} me-2"></i><span $class="\'d-none d-\' + (this.state?.list?.length>5?\'lg\':\'md\') + \'-inline\'" $text="item.label"></span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<div class="dropdown-menu dropdown-menu-end p-2 bg-body-secondary shadow" $style="\'width: \' + (item.width || 250) + \'px;\'">\n\t\t\t\t\t\t\t\t<template $each="item.items || item.list" as="subitem">\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'label\'">\n\t\t\t\t\t\t\t\t\t\t<div $class="dropdown-header ${subitem.class || \'\'}" $text="subitem.label"></div>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'button\'">\n\t\t\t\t\t\t\t\t\t\t<button $class="dropdown-item ${this.state.value===subitem.name?\'active\':\'\'} ${subitem.class || \'\'}" $onclick="this.clickSubitem(subitem)">\n\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<template $if="subitem.type===\'switch\'">\n\t\t\t\t\t\t\t\t\t\t<div $class="d-flex align-items-center px-3 py-2 ${subitem.class || \'\'}">\n\t\t\t\t\t\t\t\t\t\t\t<i $class="bi bi-${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class="form-switch ms-2"><input class="form-check-input" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t</template>\n\t\t\t</div>\n\t\t</template>\n\t</div>\n</div>\n'));
|