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"),S=require("../utils/index.cjs"),L=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:{default:"body"}},setup(v,{expose:g}){const t=v,o=e.ref(!1),a=e.ref(),n=e.ref(!1),s=e.ref(!1),r=e.ref(!1),i=e.ref(!1),{colorPalettes:u}=S.useInject("LoadingBar"),h=e.computed(()=>t.colorLoading===void 0?u.value[5]:t.colorLoading),m=e.computed(()=>t.colorFinish===void 0?u.value[5]:t.colorFinish);async function d(){o.value=!1,r.value=!1,i.value=!1,n.value=!0,await e.nextTick(),n.value=!1}async function f(l=0,c=80,B="starting"){s.value=!0,await d(),!r.value&&(o.value=!0,await e.nextTick(),a.value&&(a.value.style.transition="none",a.value.style.maxWidth=`${l}%`,a.value.offsetWidth,a.value.className=`loading-bar loading-bar-${B}`,a.value.style.transition="",a.value.style.maxWidth=`${c}%`))}async function b(){r.value||i.value||(s.value&&await e.nextTick(),r.value=!0,a.value&&(a.value.className="loading-bar loading-bar-finishing",a.value.style.maxWidth="100%",a.value.offsetWidth,o.value=!1))}function y(){if(!(r.value||i.value))if(!o.value)f(100,100,"error").then(()=>{i.value=!0});else{if(i.value=!0,!a.value)return;a.value.className="loading-bar loading-bar-error",a.value.style.maxWidth="100%",a.value.offsetWidth,o.value=!1}}function p(){i.value&&(o.value=!1)}async function w(){await d()}return g({start:f,finish:b,error:y}),(l,c)=>(e.openBlock(),e.createBlock(e.Teleport,{disabled:!l.to,to:l.to||"body"},[e.createVNode(e.Transition,{name:"fade-in",appear:"",onAfterEnter:p,onAfterLeave:w,css:!n.value},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["m-loading-bar-container",l.containerClass]),style:e.normalizeStyle([`
            --loading-bar-size: ${l.loadingBarSize}px;
            --loading-bar-color-loading: ${h.value};
            --loading-bar-color-finish: ${m.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,o.value]])]),_:1},8,["css"])],8,["disabled","to"]))}});exports.default=L;