vue-amazing-ui/lib/loadingbar/LoadingBar.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("../utils/index.cjs"),C=e.defineComponent({__name:"LoadingBar",props:{containerClass:{default:void 0},containerStyle:{default:()=>({})},loadingBarSize:{default:2},colorLoading:{default:void 0},colorFinish:{default:void 0},colorError:{default:"#ff4d4f"},to:{type:[String,Boolean],default:"body"}},setup(l,{expose:m}){const n=l,u=e.ref(!1),t=e.ref(!1),a=e.ref(),s=e.ref(!1),d=e.ref(!1),i=e.ref(!1),o=e.ref(!1),{colorPalettes:c}=k.useInject("LoadingBar"),h=e.computed(()=>n.colorLoading===void 0?c.value[5]:n.colorLoading),y=e.computed(()=>n.colorFinish===void 0?c.value[5]:n.colorFinish);e.watch(t,r=>{r&&!u.value&&(u.value=!0)},{immediate:!0});async function f(){t.value=!1,i.value=!1,o.value=!1,s.value=!0,await e.nextTick(),s.value=!1}async function v(r=0,g=80,S="starting"){d.value=!0,await f(),!i.value&&(t.value=!0,await e.nextTick(),a.value&&(a.value.style.transition="none",a.value.style.maxWidth=`${r}%`,a.value.offsetWidth,a.value.className=`loading-bar loading-bar-${S}`,a.value.style.transition="",a.value.style.maxWidth=`${g}%`))}async function b(){i.value||o.value||(d.value&&await e.nextTick(),i.value=!0,a.value&&(a.value.className="loading-bar loading-bar-finishing",a.value.style.maxWidth="100%",a.value.offsetWidth,t.value=!1))}function x(){if(!(i.value||o.value))if(!t.value)v(100,100,"error").then(()=>{o.value=!0});else{if(o.value=!0,!a.value)return;a.value.className="loading-bar loading-bar-error",a.value.style.maxWidth="100%",a.value.offsetWidth,t.value=!1}}function w(){o.value&&(t.value=!1)}async function B(){await f()}return m({start:v,finish:b,error:x}),(r,g)=>(e.openBlock(),e.createBlock(e.Teleport,{disabled:l.to===!1,to:l.to===!1?null:l.to},[e.createVNode(e.Transition,{name:"fade-in",appear:"",onAfterEnter:w,onAfterLeave:B,css:!s.value},{default:e.withCtx(()=>[u.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["loading-bar-wrap",l.containerClass]),style:e.normalizeStyle([`
            --loading-bar-size: ${l.loadingBarSize}px;
            --loading-bar-color-loading: ${h.value};
            --loading-bar-color-finish: ${y.value};
            --loading-bar-color-error: ${l.colorError};
          `,l.containerStyle])},[e.createElementVNode("div",{ref_key:"loadingBarRef",ref:a,class:"loading-bar",style:{"max-width":"100%"}},null,512)],6)),[[e.vShow,t.value]]):e.createCommentVNode("",!0)]),_:1},8,["css"])],8,["disabled","to"]))}});exports.default=C;