vexip-ui/lib/components/loading/loading.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue"),x=require("@vexip-ui/config"),q=require("@vexip-ui/hooks"),f=require("@vexip-ui/utils"),y=["aria-valuenow"],k=e.defineComponent({name:"Loading",__name:"loading",setup(w,{expose:d}){const r=x.useNameHelper("loading"),{isRtl:p}=q.useRtl(),t=e.ref(!1),i=e.ref(2),n=e.ref("default"),u=e.ref("top"),a=e.ref(0);let s=95;const h=e.computed(()=>({[r.b()]:!0,[r.bs("vars")]:!0,[r.bm(n.value)]:n.value!=="default"})),g=e.computed(()=>({[u.value]:"0",height:`${i.value}px`})),_=e.computed(()=>({transform:`translateX(${(p.value?-1:1)*(a.value-100)/2}%) scaleX(${a.value/100})`}));let c,o,v;d({visible:t,percent:a,startLoading:b}),e.onBeforeUnmount(()=>{clearTimeout(c),clearInterval(o),cancelAnimationFrame(v)});function b(l){a.value===100&&(clearTimeout(c),t.value=!1,a.value=0,n.value="default",i.value=2,u.value="top"),clearInterval(o);const m=()=>{a.value=f.boundRange(l.percent,0,100),n.value=l.state??n.value,i.value=f.boundRange(l.strokeWidth??2,1,10),u.value=l.position??u.value,s=f.boundRange(l.maxPercent??95,a.value,95),a.value===100?c=setTimeout(()=>{t.value=!1},500):o=setInterval(()=>{a.value+=Math.floor(Math.random()*3+1),a.value>=s&&(a.value=s,clearInterval(o))},500)};s=95,v=requestAnimationFrame(()=>{t.value?m():(t.value=!0,v=requestAnimationFrame(m))})}return(l,m)=>(e.openBlock(),e.createBlock(e.Transition,{name:e.unref(r).ns("fade"),appear:""},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(h.value),role:"progressbar",style:e.normalizeStyle(g.value),"aria-valuenow":a.value,"aria-valuemin":"0","aria-valuemax":"100"},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("filler")),style:e.normalizeStyle(_.value)},null,6)],14,y),[[e.vShow,t.value]])]),_:1},8,["name"]))}});module.exports=k;
//# sourceMappingURL=loading.vue2.cjs.map