2 lines
2.0 KiB
JavaScript
2 lines
2.0 KiB
JavaScript
|
globalThis.Component.register("Toast",t=>{t.toast=new bootstrap.Toast(t,{autohide:t.state.delay>0}),globalThis.Util.copyFunction(t,t.toast,"show","hide"),t.addEventListener("show.bs.toast",()=>{if(t.state.delay>0){let e;const s=()=>{t.state.left=t.state.delay/1e3,e=setInterval(()=>{(!t.isConnected||--t.state.left<=0)&&clearInterval(e)},1e3)};s(),t.addEventListener("mouseenter",()=>{clearInterval(e),t.state.left=void 0}),t.addEventListener("mouseleave",s)}})},globalThis.Util.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 <template $if="this.state?.left !== undefined"><span class="small text-dim ms-2" $text="${this.state?.left}s"></span></template>\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"><template $each="this.state?.buttons || [\'{#Close#}\']"><button type="button" $class="btn btn-sm btn-${this.state?.type} mt-2" data-bs-dismiss="toast" $onclick="this.result=index+1" $text="item"></button></template></div>\n </div>\n</div>\n'),globalThis.Util.makeDom('<div toast-container="default" class="position-fixed bottom-0 end-0 overflow-auto" style="z-index:3000;max-height:80%"></div>')),globalThis.Toast={show(t,e={}){const s=e.delay??5e3,a=document.createElement("Toast");return a.state={delay:s,left:s?s/1e3:void 0,type:e.type||"primary",message:t,buttons:e.buttons??["{#Close#}"]},globalThis.$(`[toast-container="${e.container||"default"}"]`).appendChild(a),Promise.resolve().then(()=>(a.show(),a))},confirm(t,e={}){return new Promise(s=>this.show(t,{buttons:["{#Confirm#}"],...e}).then(t=>{t.addEventListener("hidden.bs.toast",()=>s(1===t.result),{once:!0})}).catch(()=>s(!1)))}};
|