2 lines
37 KiB
JavaScript
2 lines
37 KiB
JavaScript
import{Component as t,NewState as e,Util as i,$ as s,Hash as a,RefreshState as n}from"@web/state";const o={get:({url:t,...e})=>o.request({url:t,method:"GET",...e}),post:({url:t,data:e,...i})=>o.request({url:t,method:"POST",data:e,...i}),put:({url:t,data:e,...i})=>o.request({url:t,method:"PUT",data:e,...i}),delete:({url:t,...e})=>o.request({url:t,method:"DELETE",...e}),head:({url:t,...e})=>o.request({url:t,method:"HEAD",...e}),request:async({url:t,method:e="POST",data:i,headers:s={},responseType:a,timeout:n=1e4})=>{var o;const l={method:e=e.toUpperCase(),signal:null==(o=AbortSignal.timeout)?void 0:o.call(AbortSignal,n)};if(void 0!==i&&"GET"!==e&&"HEAD"!==e){if(i instanceof HTMLFormElement&&(i=new FormData(i)),i&&"object"==typeof i&&!(i instanceof FormData)&&!(i instanceof ArrayBuffer||ArrayBuffer.isView(i))&&Object.values(i).some(t=>t instanceof File||t instanceof Blob||t instanceof FileList||Array.isArray(t)&&t.some(t=>t instanceof File||t instanceof Blob))){const t=new FormData;for(const[e,s]of Object.entries(i))s instanceof FileList||Array.isArray(s)?Array.from(s).forEach(i=>t.append(e,i)):null!=s&&t.append(e,s);i=t}i instanceof FormData?delete s["Content-Type"]:"string"==typeof i||i instanceof ArrayBuffer||ArrayBuffer.isView(i)||(i=JSON.stringify(i),s["Content-Type"]||(s["Content-Type"]="application/json")),l.body=i}Object.keys(s).length&&(l.headers=s);const r={error:null,ok:null,status:0,headers:{},responseType:"",result:null};try{const e=await fetch(t,l);if(Object.assign(r,{ok:e.ok,status:e.status,headers:Object.fromEntries(e.headers.entries())}),!a){const t=e.headers.get("Content-Type")||"";a=t.includes("application/json")?"json":/image|video|audio|pdf|zip|octet-stream/.test(t)?"binary":"text",r.responseType=a}!1===r.ok&&(r.error=(r.statusText||"HTTP "+r.status+" error")+" for "+t),r.result="json"===a?await e.json():"binary"===a?await e.arrayBuffer():await e.text()}catch(t){Object.assign(r,{error:t.message||String(t),ok:!1})}return r}},l=t.register("API",t=>{t.request=e({url:"",method:"GET",headers:{},data:null,timeout:1e4,responseType:""}),t.response=e({loading:!1,ok:null,status:null,error:null,headers:{},responseType:"",result:null}),t.result=e(),t.do=(e={})=>new Promise((i,s)=>{const a={...t.request,...e};if(!a.url)throw new Error(".url is required");a.headers={...t.request.headers,...e.headers},t.response.loading=!0,o.request(a).then(e=>{if(Object.keys(e).forEach(i=>{"result"!==i&&(t.response[i]=e[i])}),e.result&&"object"==typeof e.result&&t.result&&"object"==typeof t.result?Object.assign(t.result,e.result):t.result=e.result,t.response.loading=!1,!1===e.ok)throw new Error(e.error);if("object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1})),i(e)}).catch(i=>{var a;!e.noui&&(null==(a=globalThis.UI)?void 0:a.toast)&&UI.toast(i.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:i,bubbles:!0})),s(i)})});let i=null;t.request.__watch(null,()=>{t.hasAttribute("auto")&&t.request.url&&(i||(i=Promise.resolve().then(()=>{t.do(),i=null})))})}),r={};t.register("Modal",t=>{t.modal=new bootstrap.Modal(t),t.addEventListener("bind",e=>{e.detail?t.modal.show():t.modal.hide()}),t.addEventListener("hide.bs.modal",()=>{var e;null==(e=document.activeElement)||e.blur(),t.dispatchEvent(new CustomEvent("change",{bubbles:!1,detail:!1}))}),i.copyFunction(t,t.modal,"show","hide")},i.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n <div class="modal-dialog modal-dialog-centered">\n <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n <div slot-id="header" class="modal-header py-2 px-3 bg-light">\n <h6 $class="modal-title fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></h6>\n <button type="button" class="btn btn-link ms-2 bi bi-x-lg link-reset p-0" style="color:inherit; text-decoration:none" data-bs-dismiss="modal"></button>\n </div>\n <div slot-id="body" class="modal-body p-3"></div>\n <div slot-id="footer" class="modal-footer py-2 px-3 bg-light"></div>\n </div>\n </div>\n</div>\n')),t.register("Dialog",t.getSetupFunction("Modal"),i.makeDom('\n<div class="modal fade" data-bs-backdrop="static">\n <div class="modal-dialog modal-dialog-centered">\n <div $class="modal-content border-${this.state?.type || \'primary\'} border-2 shadow-lg">\n <div $if="this.state?.title" $class="modal-header py-2 px-3 bg-light fw-bold text-${this.state?.type || \'primary\'}" $text="this.state?.title"></div>\n <div slot-id="body" class="modal-body p-4"><div $html="this.state?.message"></div></div>\n <div class="modal-footer py-2 px-3 bg-light">\n <button $each="this.state?.buttons || [\'{#Close#}\']" type="button" $class="btn btn-sm px-3 btn-${index === (this.state?.buttons || []).length - 1 ? (this.state?.type && this.state?.type !== \'body\' ? this.state?.type : \'primary\') : \'outline-secondary border\'}" $onclick="this.result=index+1;this.hide()" $text="${item}"></button>\n </div>\n </div>\n </div>\n</div>\n'));let d=0;r.showDialog=function({title:t="",message:e="",buttons:i=["{#Close#}"],type:s="body"}){const a=document.body.appendChild(document.createElement("Dialog"));return a.style.zIndex=2e3+ ++d,Promise.resolve().then(()=>{Object.assign(a.state,{message:e,title:t,type:s,buttons:i}),a.show()}),new Promise(t=>{a.addEventListener("change",e=>{d--,t(a.result||0),a.remove()})})},r.alert=function(t,e={}){return r.showDialog({message:t,...e})},r.confirm=function(t,e={}){return new Promise(i=>r.showDialog({message:t,buttons:["{#Cancel#}","{#Confirm#}"],...e}).then(t=>i(t>=2)).catch(()=>i(!1)))},t.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),i.copyFunction(t,t.toast,"show","hide"),t.addEventListener("show.bs.toast",()=>{if(t.state.delay>0){let e;const i=()=>{t.state.left=t.state.delay/1e3,e=setInterval(()=>{(!t.isConnected||--t.state.left<=0)&&clearInterval(e)},1e3)};i(),t.addEventListener("mouseenter",()=>{clearInterval(e),t.state.left=void 0}),t.addEventListener("mouseleave",i)}})},i.makeDom('\n<div class="toast align-items-center border-0 m-1">\n <div $class="toast-body rounded p-3 text-bg-${this.state?.type}">\n <div class="d-flex align-items-center">\n <div class="flex-grow-1">\n <span style="white-space:pre-wrap" class="fs-6" $text="this.state?.message"></span>\n <span $if="this.state?.left !== undefined" class="small text-dim ms-2" $text="${this.state?.left}s"></span>\n </div>\n <button type="button" class="btn btn-link ms-3 bi bi-x-lg link-reset" style="color:inherit" data-bs-dismiss="toast"></button>\n </div>\n <div class="d-flex justify-content-end gap-3">\n <button $each="this.state?.buttons || [\'{#Close#}\']" type="button" $class="btn btn-sm btn-${this.state?.type} mt-2" data-bs-dismiss="toast" $onclick="this.result=index+1" $text="item"></button>\n </div>\n </div>\n</div>\n'),i.makeDom('<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>')),r.toast=function(t,e={}){const i=e.delay??5e3,a=document.createElement("Toast");a.state={delay:i,left:i?i/1e3:void 0,type:e.type||"primary",message:t,buttons:e.buttons||[]},s(`[toast-container="${e.container||"default"}"]`).appendChild(a),Promise.resolve().then(()=>a.show())},r.toastConfirm=function(t,e={}){return new Promise(i=>r.toast(t,{buttons:["{#Confirm#}"],...e}).then(t=>i(1===t)).catch(()=>i(!1)))},t.register("AutoForm",t=>{t.state.schema||(t.state.schema=[]),t.vertical=t.hasAttribute("vertical"),t.inline=t.hasAttribute("inline"),t.nobutton=t.hasAttribute("nobutton"),t.request={method:"POST"},t.response={},t.result=null,Object.defineProperty(t,"data",{get:()=>t.state.data,set:i=>{t.state.data=(null==i?void 0:i.__isProxy)?i:e(i||{})}}),t.data=t.data||{},t._thisObj=t,t.form=s(t,"form"),t.submit=(e={})=>{var i,s;if(!t.form.reportValidity())return null==(s=null==(i=globalThis.UI)?void 0:i.toast)?void 0:s.call(i,"{#verify failed#}",{type:"danger"});if(!t.dispatchEvent(new CustomEvent("submit",{detail:t.data,cancelable:!0,bubbles:!1})))return;const a={...t.request,data:t.data,noui:!0,...e};let n=null;if(t.api)n=t.api.do(a);else{if(!t.request.url)return console.warn("{#please config .api or .request.url to auto submit#}");n=o.request(a)}n.then(e=>{if(t.response=e,t.result=e.result,"object"==typeof e.result&&e.result.error)throw new Error(e.result.error);t.dispatchEvent(new CustomEvent("response",{detail:e,bubbles:!1}))}).catch(e=>{var i;(null==(i=globalThis.UI)?void 0:i.toast)&&UI.toast(e.message,{type:"danger"}),t.dispatchEvent(new CustomEvent("error",{detail:e,bubbles:!0}))})}},i.makeDom('\n<div $class="auto-form-root d-flex ${this.inline ? \'auto-form-inline h-100 w-100\' : \'\'}">\n <form $class="w-100 ${this.inline ? \'d-flex align-items-stretch flex-fill h-100\' : (this.vertical ? \'d-flex flex-column flex-fill\' : \'auto-grid-form\')}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">\n <template $each="this.state.schema || []" as="item">\n <div $$if="item.if || \'true\'" style="display:contents">\n <label $if="!this.inline" $name="item.name" class="col-form-label text-muted" $text="item.label"></label>\n <div control-wrapper $class="${this.inline ? \'flex-grow-1 h-100 d-flex align-items-center\' : \'mb-3\'}">\n <input $if="[\'text\', \'password\', \'email\', \'number\', \'date\', \'datetime\', \'file\'].includes(item.type)" $name="item.name" $type="item.type" $.="item.setting || {}" $bind="this.data[item.name]" $class="form-control h-100 ${item.type === \'number\' ? \'text-end\' : \'\'}">\n <select $if="item.type === \'select\'" $name="item.name" $.="item.setting || {}" $bind="this.data[item.name]" class="form-select h-100">\n <option value="" $if="item.placeholder" $text="item.placeholder" disabled></option>\n <option $each="item.options" $value="item.value || item" $text="item.label || item"></option>\n </select>\n <div $if="[\'checkbox\', \'radio\'].includes(item.type)" $class="${this.inline ? \'h-100 d-flex align-items-center px-2 gap-3 justify-content-center w-100 bg-body\' : \'\'}" style="white-space:nowrap; border-radius: 4px;">\n <label $each="item.options || [item.text||item.label||item.name]" as="option" $class="form-check ${item.vertical ? \'\' : \'form-check-inline\'} mb-0 d-flex align-items-center p-0">\n <input $name="item.name" class="form-check-input me-1" $type="item.type" $.="item.setting || {}" $value="item.options?option:\'on\'" $bind="this.data[item.name]">\n <span $if="!this.inline || (item.options && item.options.length > 0)" $text="option" class="form-check-label"></span>\n </label>\n </div>\n <div $if="item.type === \'switch\'" $class="form-check form-switch fs-4 h-100 d-flex align-items-center px-2 m-0 ${this.inline ? \'justify-content-center w-100\' : \'\'}" style="padding-left:0">\n <input $name="item.name" class="form-check-input m-0" type="checkbox" style="cursor:pointer" $bind="this.data[item.name]" $onchange="event.stopPropagation()">\n </div>\n <textarea $if="item.type === \'textarea\'" $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.data[item.name]"></textarea>\n </div>\n </div>\n </template>\n <div $if="!this.inline && !this.nobutton" class="d-flex justify-content-end align-items-baseline gap-3 mt-3" style="grid-column:1/-1">\n <div slot-id="actions"></div>\n <button type="submit" class="btn btn-primary" $text="this.submitlabel || \'{#Submit#}\'"></button>\n </div>\n </form>\n</div>\n'),i.makeDom("<style>\n\t@media (min-width: 576px) { .auto-grid-form {display: grid;grid-template-columns: max-content 1fr} .auto-grid-form .col-form-label {text-align: right; margin-bottom: 1rem;padding-right: 1rem;max-width: 200px} }\n\t.auto-form-inline { background-color: var(--bs-body-bg); }\n\t.auto-form-inline.min-h-100 { min-height: 100%; height: auto; }\n\t.auto-form-inline .form-control, .auto-form-inline .form-select { border-radius: 0; border: none; background-color: transparent !important; min-height: 100%; height: auto; width: 100%; padding: 0 8px; box-shadow: none; color: inherit; }\n\t.auto-form-inline .form-select { background-position: right 4px center; background-size: 12px 10px; padding-right: 20px; }\n\t.auto-form-inline textarea.form-control { padding: 8px; min-height: 100px; height: auto; }\n</style>"));const c=[],u={register:e=>{"undefined"!=typeof document&&("loading"!==document.readyState&&t.getTemplate("AutoForm")?u._addAutoFormComponent(e):c.push(e))},_addAutoFormComponent:e=>{const a=t.getTemplate("AutoForm");if(a){let t=s(a.content,"[control-wrapper]");if(!t){const e=s(a.content,"template");e&&(t=s(e.content,"[control-wrapper]"))}t&&!t.querySelector(e)&&t.appendChild(i.makeDom(`<${e} $if="item.type?.toLowerCase() === '${e.toLowerCase()}'" $name="item.name" $.="item.setting || {}" $bind="thisNode.closest('AutoForm').data[item.name]"></${e}>`))}}};if("undefined"!=typeof document){const t=()=>{c.forEach(t=>u._addAutoFormComponent(t)),c.length=0};"loading"!==document.readyState?setTimeout(t,100):document.addEventListener("DOMContentLoaded",()=>setTimeout(t,100),!0)}t.register("TagsInput",t=>{t.state=e({tags:[]}),t.addEventListener("bind",e=>{t.state.tags=Array.isArray(e.detail)?e.detail:[]}),Object.defineProperty(t,"value",{get:()=>t.state.tags,set:e=>{t.state.tags=Array.isArray(e)?e:[]}})},i.makeDom(`\n<div class="form-control d-flex flex-wrap gap-1 align-items-center w-100" style="cursor:text; min-height: 38px; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 8px !important;">\n <button $each="(this.state && this.state.tags) || []" type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" $onkeydown="${i.getFunctionBody(function(t){var e;["Backspace","Delete"].includes(t.key)&&(t.preventDefault(),(null==(e=this.state)?void 0:e.tags)&&(this.state.tags.splice(index,1),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.state.tags})),Promise.resolve().then(()=>{const t=this.querySelectorAll("button");if(t.length>0)(t[index>0?index-1:0]||t[0]).focus();else{const t=s(this,"input");t&&t.focus()}})))})}" $text="item"></button>\n <input type="text" class="border-0 shadow-none py-0 px-2 flex-grow-1 bg-transparent" placeholder="{#new tag name#}" style="min-width:100px;width:0;outline:none; height: 32px" $onkeydown="${i.getFunctionBody(function(t){var e;if(!t.isComposing&&["Enter",","," "].includes(t.key)){t.preventDefault();const i=thisNode.value.trim();i&&(null==(e=this.state)?void 0:e.tags)&&!this.state.tags.includes(i)&&(this.state.tags.push(i),this.state.tags=this.state.tags,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:this.state.tags}))),thisNode.value=""}})}">\n</div>\n`),i.makeDom("<style>\n\tTagsInput { display: flex; align-items: center; min-height: 100%; width: 100%; background: transparent !important; }\n\tTagsInput button:focus {background-color:var(--bs-btn-hover-bg);color:var(--bs-btn-hover-color)}\n</style>")),u.register("TagsInput"),t.register("DatePicker",t=>{t.state=e({start:"",end:""}),t.addEventListener("bind",e=>{var i,s,a;t.state.start=e.detail||"";const n=t.closest("AutoForm"),o=t.getAttribute("name"),l=null==(s=null==(i=null==n?void 0:n.state)?void 0:i.schema)?void 0:s.find(t=>t.name===o),r=(null==(a=null==l?void 0:l.setting)?void 0:a.rangeEnd)||t.rangeEnd;n&&r&&(t.state.end=n.data[r]||"")}),Object.defineProperty(t,"isRange",{get:()=>{var e,i,s;const a=t.closest("AutoForm"),n=t.getAttribute("name"),o=null==(i=null==(e=null==a?void 0:a.state)?void 0:e.schema)?void 0:i.find(t=>t.name===n);return!(!(null==(s=null==o?void 0:o.setting)?void 0:s.rangeEnd)&&!t.rangeEnd)}}),Object.defineProperty(t,"value",{get:()=>t.state.start,set:e=>{t.state.start=e||""}}),t.updateStart=e=>{t.state.start=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.updateEnd=e=>{var i,s,a;t.state.end=e;const n=t.closest("AutoForm"),o=t.getAttribute("name"),l=null==(s=null==(i=null==n?void 0:n.state)?void 0:i.schema)?void 0:s.find(t=>t.name===o),r=(null==(a=null==l?void 0:l.setting)?void 0:a.rangeEnd)||t.rangeEnd;n&&r&&(n.data[r]=e)}},i.makeDom('\n<div class="d-flex align-items-center gap-1 w-100">\n <input type="date" class="form-control h-100" $bind="this.state.start" $onchange="this.updateStart(thisNode.value)">\n <template $if="this.isRange">\n <span class="text-muted mx-1">-</span>\n <input type="date" class="form-control h-100" $bind="this.state.end" $onchange="this.updateEnd(thisNode.value)">\n </template>\n</div>\n')),t.register("ColorPicker",t=>{t.state=e({value:"#000000"}),t.addEventListener("bind",e=>{t.state.value=e.detail||"#000000"}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||"#000000"}}),t.updateValue=e=>{t.state.value=e,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))}},i.makeDom('\n<div class="d-flex align-items-center gap-2 w-100 h-100">\n <input type="color" class="form-control form-control-color" style="width: 3rem; height: 100%; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n <input type="text" class="form-control h-100" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n</div>\n'));const m=["alarm","archive","arrow-left","arrow-right","bag","bank","basket","bell","bookmark","box","briefcase","calendar","camera","cart","chat","check","chevron-down","chevron-left","chevron-right","chevron-up","clock","cloud","code","collection","command","cpu","credit-card","cup","dash","database","display","door-closed","download","droplet","earbuds","edit","egg","eject","envelope","eraser","eye","file","filter","flag","folder","gear","gem","gift","graph-up","grid","hammer","hand-thumbs-up","heart","house","image","inbox","info-circle","journal","key","laptop","layers","layout-text-sidebar-reverse","lightbulb","link","list","lock","map","mic","moon","mouse","music-note","newspaper","palette","paperclip","pause","pencil","person","phone","pie-chart","play","plus","printer","puzzle","question-circle","reception-4","record","reply","rss","save","search","send","server","share","shield","shop","shuffle","skip-end","skip-start","slash","sliders","smartphone","speaker","speedometer","spellcheck","square","star","stickies","stop","stopwatch","suit-heart","sun","table","tag","tags","telephone","terminal","text-paragraph","thermometer","three-dots","ticket","tools","trash","trophy","truck","tv","umbrella","unlock","upload","vector-pen","wallet","watch","wifi","window","wrench","x","zoom-in","zoom-out","activity","at","award","backspace","badge-3d","badge-4k","badge-8k","badge-ad","badge-ar","badge-cc","badge-hd","badge-tm","badge-vo","badge-vr","badge-wc","bar-chart","battery","bicycle","binoculars","blockquote-left","blockquote-right","book","bookshelf","bootstrap","border-all","border-bottom","border-center","border-inner","border-left","border-middle","border-outer","border-right","border-style","border-top","border-width","bounding-box","box-arrow-down","box-arrow-in-down","box-arrow-in-left","box-arrow-in-right","box-arrow-in-up","box-arrow-left","box-arrow-right","box-arrow-up","box-seam","brightness-alt-high","brightness-alt-low","brightness-high","brightness-low","broadcast","brush","bucket","bug","building","bullseye","calculator","calendar-check","calendar-date","calendar-day","calendar-event","calendar-minus","calendar-month","calendar-plus","calendar-range","calendar-week","calendar-x","calendar2","calendar3","calendar4","camera-reels","camera-video","capslock","card-checklist","card-heading","card-image","card-list","card-text","caret-down","caret-left","caret-right","caret-up","cart-check","cart-dash","cart-plus","cart-x","cash","cash-stack","cast","chat-dots","chat-left","chat-quote","chat-right","chat-square","chat-text","check-all","check-circle","check-square","circle","clipboard","cloud-arrow-down","cloud-arrow-up","cloud-check","cloud-download","cloud-fog","cloud-hail","cloud-lightning","cloud-minus","cloud-moon","cloud-plus","cloud-rain","cloud-slash","cloud-snow","cloud-sun","cloud-upload","clouds","cloudy","code-slash","code-square","collection-play","columns","columns-gap","compass","cone","cone-striped","controller","credit-card-2-back","credit-card-2-front","crop","cup-straw","cursor","dash-circle","dash-square","diagram-2","diagram-3","diamond","dice-1","dice-2","dice-3","dice-4","dice-5","dice-6","disc","discord","distribute-horizontal","distribute-vertical","door-open","dot","droplet-half","easel","egg-fried","emoji-angry","emoji-dizzy","emoji-expressionless","emoji-frown","emoji-heart-eyes","emoji-laughing","emoji-neutral","emoji-smile","emoji-sunglasses","emoji-wink","envelope-open","exclamation","exclamation-circle","exclamation-diamond","exclamation-octagon","exclamation-square","exclamation-triangle","eye-slash","eyedropper","facebook","file-arrow-down","file-arrow-up","file-binary","file-break","file-check","file-code","file-diff","file-earmark","file-excel","file-image","file-lock","file-medical","file-minus","file-music","file-pdf","file-person","file-play","file-plus","file-post","file-ppt","file-richtext","file-slides","file-spreadsheet","file-text","file-word","file-zip","files","film","filter-circle","filter-left","filter-right","filter-square","fingerprint","flower1","flower2","flower3","folder-check","folder-minus","folder-plus","folder-symlink","folder-x","folder2-open","fonts","forward","front","fullscreen","fullscreen-exit","funnel","gear-wide","gender-female","gender-male","gender-trans","geo","geo-alt","github","globe","google","graph-down","grid-1x2","grid-3x2","grid-3x3","grip-horizontal","grip-vertical","hand-index","hand-thumbs-down","handbag","hash","headphones","headset","heart-half","heptagon","hourglass","hourglass-bottom","hourglass-split","hourglass-top","house-door","hr","hurricane","image-alt","images","infinity","input-cursor","instagram","intersect","journal-album","journal-arrow-down","journal-arrow-up","journal-bookmark","journal-check","journal-code","journal-medical","journal-minus","journal-plus","journal-richtext","journal-text","journal-x","journals","justify","kanban","keyboard","ladder","lamp","layers-half","layout-sidebar","layout-split","layout-three-columns","life-preserver","lightbulb-off","lightning","lightning-charge","link-45deg","linkedin","list-check","list-nested","list-ol","list-stars","list-task","list-ul","mailbox","markdown","mask","mastodon","megaphone","menu-app","menu-button","messenger","mic-mute","minecart","minecart-loaded","moisture","mouse2","mouse3","music-note-beamed","music-note-list","music-player","node-minus","node-plus","nut","octagon","option","outlet","paint-bucket","patch-check","patch-exclamation","patch-minus","patch-plus","patch-question","pause-btn","pause-circle","peace","pen","pencil-square","pentagon","person-badge","person-bounding-box","person-circle","person-lines-fill","phone-landscape","phone-vibrate","pie-chart-fill","pin","pin-angle","pin-fill","pin-map","pip","play-btn","play-circle","plug","plus-circle","plus-square","power","question","question-diamond","question-square","rainbow","receipt","receipt-cutoff","reception-0","reception-1","reception-2","reception-3","record-btn","record-circle","record2","recycle","reddit","reply-all","router","rulers","safe","save2","sd-card","segmented-nav","shield-check","shield-exclamation","shield-lock","shield-shaded","shield-slash","shift","signpost","signpost-2","signpost-split","sim","skip-backward","skip-forward","slack","slash-circle","slash-square","smartwatch","snow","snow2","snow3","sort-alpha-down","sort-alpha-up","sort-numeric-down","sort-numeric-up","soundwave","speedometer2","square-half","stack","star-half","stars","stop-btn","stop-circle","suit-club","suit-diamond","suit-spade","sunglasses","sunrise","sunset","symmetry-horizontal","symmetry-vertical","tablet","tablet-landscape","telegram","telephone-forward","telephone-inbound","telephone-outbound","telephone-plus","telephone-x","text-center","text-indent-left","text-indent-right","text-left","text-right","thermometer-half","thermometer-high","thermometer-low","thermometer-snow","thermometer-sun","three-dots-vertical","toggle-off","toggle-on","toggle2-off","toggle2-on","tornado","translate","trash2","tree","truck-flatbed","tsunami","type","type-bold","type-h1","type-h2","type-h3","type-italic","type-strikethrough","type-underline","ui-checks","ui-checks-grid","ui-radios","ui-radios-grid","union","upc","upc-scan","view-list","view-stacked","vinyl","voicemail","volume-down","volume-mute","volume-off","volume-up","vr","wallet2","water","whatsapp","wifi-1","wifi-2","wifi-off","wind","window-dock","window-sidebar","x-circle","x-diamond","x-octagon","x-square","youtube"];t.register("IconPicker",t=>{t.state=e({value:"",search:"",open:!1}),t.addEventListener("bind",e=>{t.state.value=e.detail||""}),Object.defineProperty(t,"value",{get:()=>t.state.value,set:e=>{t.state.value=e||""}}),Object.defineProperty(t,"filteredIcons",{get:()=>{var e;const i=(null==(e=t.state.search)?void 0:e.toLowerCase())||"";return m.filter(t=>t.includes(i))}}),t.selectIcon=e=>{t.state.value=e,t.state.open=!1,t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:e}))},t.toggle=()=>{t.state.open=!t.state.open,t.state.open&&setTimeout(()=>{var e;null==(e=s(t,"input"))||e.focus()},10)};const i=e=>{t.contains(e.target)||(t.state.open=!1)};window.addEventListener("click",i),t.addEventListener("remove",()=>window.removeEventListener("click",i))},i.makeDom('\n<div class="dropdown w-100 h-100">\n <button class="btn btn-outline-secondary dropdown-toggle w-100 h-100 d-flex align-items-center justify-content-between px-2" type="button" $onclick="this.toggle()">\n <span class="d-flex align-items-center overflow-hidden">\n <i $if="this.state.value" $class="bi bi-${this.state.value} me-2"></i>\n <span class="text-truncate" $text="this.state.value || \'{#Select Icon#}\'"></span>\n </span>\n </button>\n <div $class="dropdown-menu p-2 shadow ${this.state.open ? \'show\' : \'\'}" style="width: 300px; max-height: 350px; overflow-y: hidden; display: flex; flex-direction: column; z-index: 1050">\n <input type="text" class="form-control form-control-sm mb-2" placeholder="Search icons..." $bind="this.state.search" $onclick="event.stopPropagation()">\n <div class="d-flex flex-wrap gap-1 overflow-auto p-1" style="flex: 1" $onclick="event.stopPropagation()">\n <template $each="this.filteredIcons" as="icon">\n <button type="button" class="btn btn-sm btn-outline-light text-dark p-2 d-flex align-items-center justify-content-center" $onclick="this.selectIcon(icon)" $title="icon" style="width: 40px; height: 40px">\n <i $class="bi bi-${icon}"></i>\n </button>\n </template>\n <div $if="this.filteredIcons.length === 0" class="text-muted p-2 w-100 text-center">No icons found</div>\n </div>\n </div>\n</div>\n'),i.makeDom("<style>\n IconPicker { display: block; height: 100%; }\n IconPicker .dropdown-menu { left: 0; }\n IconPicker .btn-outline-light:hover { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); }\n</style>")),u.register("DatePicker"),u.register("ColorPicker"),u.register("IconPicker");const p=(t={})=>{const e=new Map,s=new Map;let a=1;const n=i.newAvg();let o=0,l=0,r=0,d=null,c=null,u=!1;const m=t.itemHeight||null;return{reset:(t,i)=>{if(u=!1,e.clear(),s.clear(),n.clear(),r=0,d=null,c=null,!(null==t?void 0:t.length))return[];const p=t.length;a=Math.ceil(Math.sqrt(p))||10;const h=window.getComputedStyle(i);o=parseFloat(h.paddingTop)||0,l=parseFloat(h.rowGap)||0;const b=Math.max(10,Math.ceil((i.clientHeight||100)/(m||32)));return t.slice(0,Math.min(3*b,p))},init:(t,i)=>{if(u)return;const o=t.length;let l=m||n.get()||32;o>0&&"object"==typeof t[0]&&null!==t[0]&&t[0]._itemHeight&&(l=t[0]._itemHeight),n.add(l),null===d&&(d=0,c=0);for(let i=0;i<o;i++)if(!e.has(i)){const s="object"==typeof t[i]&&null!==t[i]&&t[i]._itemHeight?t[i]._itemHeight:l;e.set(i,s)}for(let t=0;t<o;t+=a)s.set(t,Math.min(a,o-t)*l);u=!0,i()},update:(t,i)=>{if(null===d){const t=window.getComputedStyle(i);d=parseFloat(t.marginTop)||0,c=parseFloat(t.marginBottom)||0}0!==t||r||(r=d);const o=i.offsetHeight+d+c+l,u=e.get(t);if(o!==u){e.set(t,o),n.add(o);const i=o-(u||0),l=t-t%a;s.has(l)&&s.set(l,s.get(l)+i)}},calc:(t,i)=>{if(!u||!i)return null;const d=i.length;let c=Math.max(10,Math.ceil((t.clientHeight||100)/(n.get()||32))),m=o+r+l,p=0,h=0,b=0,g=0,f=[];const v=t.scrollTop;for(let t=0;t<d;t++)if(0===h){const n=s.get(t);if(n&&m+n<=v&&t+a<d)m+=n,t+=a-1;else{const s=e.get(t);if(m+s<=v&&t<d-1)m+=s;else{h=1;let s=Math.max(0,t);b=Math.max(0,s-c),g=Math.min(b+3*c,d),t=g-1,f=i.slice(b,g);for(let t=b;t<s;t++)m-=e.get(t)}}}else if(1===h){const i=s.get(t);i?(p+=i,t+=a-1):p+=e.get(t)}return{prevHeight:Math.max(0,m-o-r-l-(b>0?l:0)),postHeight:p>0?Math.max(0,p-2*l):0,renderedList:f,listStartIndex:b}}}};t.register("List",t=>{t.mode=t.getAttribute("mode")||"normal",t.fast=t.hasAttribute("fast"),t.collapsible=t.hasAttribute("collapsible");const s={idfield:"id",labelfield:"label",summaryfield:"summary",groupidfield:"id",grouplabelfield:"label",groupsummaryfield:"summary",groupfield:"group",parentfield:"parent",groupicon:"folder",itemicon:"file"};t.collapsed=e({});const a=()=>{i.updateDefaults(t,s);const e=t.state.list||[],a=[];if("group"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.groupfield]]??(i[s]=[])).push(e)}),(t.state.groups||[]).forEach(e=>{a.push({type:"group",...e});const s=i[e[t.groupidfield]];s&&s.forEach(t=>a.push({type:"item",...t}))})}else if("tree"===t.mode){const i={};e.forEach(e=>{var s;return(i[s=e[t.parentfield]||""]??(i[s]=[])).push(e)});const s=(e,n,o)=>e.forEach(e=>{var l;const r=e[t.idfield],d=!!(null==(l=i[r])?void 0:l.length),c=t.collapsed[r];a.push({type:"item",...e,_level:n,_hasChildren:d,_parents:o}),d&&!c&&s(i[r],n+1,[...o,r])});s(i[""]||[],0,[])}else e.forEach(t=>a.push({type:"item",...t}));t.state._flatList=a};t.state.__watch("list",a);const n=t.fast?p():null;t.state._renderedList=[],t.refresh=()=>{if(!t.fast)return;const e=n.calc(t,t.state._flatList);e&&(t.state.prevHeight=e.prevHeight,t.state.postHeight=e.postHeight,t.state._listStartIndex=e.listStartIndex,t.state._renderedList=e.renderedList)},t.onItemUpdate=(e,i)=>{t.fast&&n.update(e+(t.state._listStartIndex||0),i)},t.state.__watch("_flatList",e=>{t.fast?(t.state._listStartIndex=0,t.state._renderedList=n.reset(e,t)||[],setTimeout(()=>{t.state._flatList===e&&n.init(e,t.refresh)})):t.state._renderedList=e}),t.selectItem=(e,i)=>{t.hasAttribute("auto-select")&&(t.state.selectedItem=t.state.selectedItem===e[t.idfield]?null:e[t.idfield]),t.dispatchEvent(new CustomEvent("itemclick",{bubbles:!1,detail:{item:e,index:i+(t.fast&&t.state._listStartIndex||0)}}))},t.selectGroup=(e,i)=>{t.hasAttribute("auto-select-group")&&(t.state.selectedGroup=t.state.selectedGroup===e[t.groupidfield]?null:e[t.groupidfield]),t.dispatchEvent(new CustomEvent("groupclick",{bubbles:!1,detail:{item:e,index:i}}))},t.toggleCollapse=e=>{t.collapsible&&e._hasChildren&&(t.collapsed[e[t.idfield]]=!t.collapsed[e[t.idfield]],a())},a()},i.makeDom('\n<div class="list-group overflow-auto" onscroll="this.refresh()" style="overflow-anchor:none">\n\t<div $if="this.fast && (this.state?.prevHeight || 0) > 0" $style="height:${this.state?.prevHeight}px;" class="flex-shrink-0"></div>\n\t<template slot-id="item" $each="this.state?._renderedList">\n\t\t<div $onupdate="this.onItemUpdate(index, thisNode)" $class="list-group-item list-group-item-action d-inline-flex align-items-center ps-2 pe-2 ${item.type===\'group\'?(this.state?.selectedGroup===item[this.groupidfield]?\'active\':\'\'):(this.state?.selectedItem===item[this.idfield]?\'active\':\'\')}" $onclick="item.type===\'group\'?this.selectGroup(item,index):this.selectItem(item,index)">\n\t\t\t<template $if="item.type === \'group\'">\n\t\t\t\t<span $if="this.groupicon" $class="bi bi-${this.groupicon} text-body"></span>\n\t\t\t\t<div class="flex-shrink-0 px-1" $text="${item[this.grouplabelfield]}"></div>\n\t\t\t\t<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="${item[this.groupsummaryfield]}"></div>\n\t\t\t\t<div slot-id="group-actions"></div>\n\t\t\t</template>\n\t\t\t<template $if="item.type === \'item\'">\n\t\t\t\t<div $if="this.mode === \'tree\'" $style="width:${item._level * 16 + (this.collapsible ? 16 : 0)}px; cursor:${this.collapsible ? \'pointer\' : \'default\'}" class="text-end text-muted flex-shrink-0" $onclick="event.stopPropagation(); this.toggleCollapse(item)">\n\t\t\t\t\t<i $if="this.collapsible && item._hasChildren" $class="bi ${this.collapsed[item[this.idfield]] ? \'bi-caret-right-fill\' : \'bi-caret-down-fill\'}"></i>\n\t\t\t\t</div>\n\t\t\t\t<span $if="this.mode === \'tree\'" $class="text-muted bi bi-${item._hasChildren ? this.groupicon : this.itemicon}"></span>\n\t\t\t\t<span $if="this.mode !== \'tree\' && this.itemicon" class="bi bi-${this.itemicon} text-body"></span>\n\t\t\t\t<div class="flex-shrink-0 px-1" $text="${item[this.labelfield]}"></div>\n\t\t\t\t<div class="text-muted small flex-fill text-end text-truncate" style="width: 0" $text="${item[this.summaryfield]}"></div>\n\t\t\t\t<div slot-id="item-actions"></div>\n\t\t\t</template>\n\t\t</div>\n\t</template>\n\t<div $if="this.fast && (this.state?.postHeight || 0) > 0" $style="height:${this.state?.postHeight}px;" class="flex-shrink-0"></div>\n</div>\n')),t.register("Nav",t=>{t.click=(e,i)=>{e.noselect||i||(a.nav=e.name),t.dispatchEvent(new CustomEvent("nav",{detail:{item:e},bubbles:!1}))}},i.makeDom('\n<div class="navbar navbar-expand bg-body-secondary px-3 pb-0 border-bottom align-items-center">\n\t<img $if="this.state.brand.image" $src="this.state.brand.image" class="me-2" style="height:30px;width:auto;max-width:300px">\n\t<i $if="this.state.brand.icon" $class="bi bi-${this.state.brand.icon} me-2"></i>\n\t<span $if="this.state.brand.label" class="me-2" $text="this.state.brand.label"></span>\n\t<div class="ms-2"></div>\n\t<div $each="this.state.list" $class="navbar-nav text-truncate ${item.type===\'fill\'?\'flex-fill\':\'\'}">\n\t\t<button $if="item.type===\'button\'" $class="nav-link ${Hash.nav===item.name?\'active\':\'\'}" $onclick="this.click(item)">\n\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</button>\n\t\t<div $if="item.type===\'dropdown\'" class="dropdown">\n\t\t\t<button $class="nav-link ${Hash.nav===item.name?\'active\':\'\'}" data-bs-toggle="dropdown">\n\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</button>\n\t\t\t<div class="dropdown-menu dropdown-menu-end p-3 bg-body-secondary shadow" $style="width: ${item.width || 250}px;">\n\t\t\t\t<template $each="item.list" as="subitem">\n\t\t\t\t\t<button $if="subitem.type===\'button\'" class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">\n\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</button>\n\t\t\t\t\t<div $if="subitem.type===\'switch\'" class="d-flex align-items-center">\n\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<div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n'));let h=!1,b={},g={};const f={start:(t,{onmousemove:e,onmouseup:i})=>{b={x:t.clientX,y:t.clientY,w:0,h:0},g={onmousemove:e,onmouseup:i},h=!0}};"undefined"!=typeof document&&(document.addEventListener("mouseup",t=>{var e;h&&(h=!1,null==(e=g.onmouseup)||e.call(g,{event:t,...b}))}),document.addEventListener("mousemove",t=>{var e;h&&(b.w=t.clientX-b.x,b.h=t.clientY-b.y,null==(e=g.onmousemove)||e.call(g,{event:t,...b}))})),t.register("Resizer",t=>{t.isVertical=t.hasAttribute("vertical");const e=parseInt(t.getAttribute("min"))||10,i=parseInt(t.getAttribute("max"))||1e3,s=t.target||t.previousElementSibling;t.addEventListener("bind",e=>{void 0!==e.detail&&null!==e.detail&&(s.style[t.isVertical?"height":"width"]=e.detail+"px")});const a=(s,a,n)=>{const o=s+(t.isVertical?n:a);return o<e?e:o>i?i:o};t.addEventListener("mousedown",e=>{const i=t.isVertical?s.offsetHeight:s.offsetWidth;f.start(e,{onmousemove:({w:e,h:n})=>{const o=a(i,e,n);s.style[t.isVertical?"height":"width"]=o+"px",t.dispatchEvent(new CustomEvent("resizing",{detail:{oldSize:i,newSize:o},bubbles:!1}))},onmouseup:({w:e,h:s})=>{const n=a(i,e,s);t.dispatchEvent(new CustomEvent("resize",{detail:{oldSize:i,newSize:n},bubbles:!1})),t.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!1}))}})})},i.makeDom("\n<div $class=\"border-${this.isVertical?'top':'start'} flex-shrink-0\" $style=\"${this.isVertical?'height':'width'}:3px;${!this.isVertical?'height':'width'}:100%;cursor:${this.isVertical?'row-resize':'col-resize'}\"></div>\n"));const v=e({exitBlocks:0});globalThis.State=v,"undefined"!=typeof window&&window.addEventListener("beforeunload",t=>{v.exitBlocks>0&&t.preventDefault()});const y=document.documentElement;if(y.hasAttribute("$data-bs-theme")||y.hasAttribute("data-bs-theme")||y.setAttribute("$data-bs-theme","LocalStorage.darkMode?'dark':'light'"),globalThis.HTTP=o,globalThis.UI=r,globalThis.AutoForm=u,globalThis.MouseMover=f,"undefined"!=typeof document){const t=()=>n(document.documentElement);"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",t,!0)}export{l as APIComponent,u as AutoForm,o as HTTP,f as MouseMover,v as State,r as UI,p as VirtualScroll};
|