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(g,{expose:m}){const r=g,n=e.ref(!1),o=e.ref(!1),a=e.ref(),s=e.ref(!1),u=e.ref(!1),i=e.ref(!1),t=e.ref(!1),{colorPalettes:d}=k.useInject("LoadingBar"),h=e.computed(()=>r.colorLoading===void 0?d.value[5]:r.colorLoading),p=e.computed(()=>r.colorFinish===void 0?d.value[5]:r.colorFinish);e.watch(o,l=>{l&&!n.value&&(n.value=!0)},{immediate:!0});async function f(){o.value=!1,i.value=!1,t.value=!1,s.value=!0,await e.nextTick(),s.value=!1}async function c(l=0,v=80,S="starting"){u.value=!0,await f(),!i.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-${S}`,a.value.style.transition="",a.value.style.maxWidth=`${v}%`))}async function y(){i.value||t.value||(u.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,o.value=!1))}function b(){if(!(i.value||t.value))if(!o.value)c(100,100,"error").then(()=>{t.value=!0});else{if(t.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 w(){t.value&&(o.value=!1)}async function B(){await f()}return m({start:c,finish:y,error:b}),(l,v)=>(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(()=>[n.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: ${p.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]]):e.createCommentVNode("",!0)]),_:1},8,["css"])],8,["disabled","to"]))}});exports.default=C;