@nguyenshort/vue3-loading-indicator/dist/index.umd.js

Vue 3 Loading Indicator bar. Support typescript, composable API, option API

(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.Vue3Process={},e.Vue))})(this,function(e,t){"use strict";var I=Object.defineProperty,b=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var d=(e,t,o)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,u=(e,t)=>{for(var o in t||(t={}))w.call(t,o)&&d(e,o,t[o]);if(f)for(var o of f(t))L.call(t,o)&&d(e,o,t[o]);return e},p=(e,t)=>b(e,k(t));const o=()=>t.inject("$loading");var V=(()=>`.vue-process-bar[data-v-6c70920e]{position:fixed;z-index:999999}
`)(),_=(n,s)=>{const c=n.__vccOpts||n;for(const[r,a]of s)c[r]=a;return c};const g=t.defineComponent({name:"VueLoadingIndicator"}),m=t.defineComponent(p(u({},g),{setup(n){const s=o(),c=t.computed(()=>({top:0,left:0,right:0,height:`${s==null?void 0:s.config.throttle}px`})),r=t.ref(),a=t.computed(()=>{var i;return((i=r.value)==null?void 0:i.scrollWidth)||0}),l=t.computed(()=>({background:s==null?void 0:s.state.color,height:"100%",width:((s==null?void 0:s.state.process)||0)*a.value/100+"px",transition:`width ${s==null?void 0:s.config.duration}ms, opacity .6s`}));return(i,C)=>(t.openBlock(),t.createBlock(t.Teleport,{to:"body"},[t.unref(s).state.show?(t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"container",ref:r,class:"vue-process-bar",style:t.normalizeStyle(t.unref(c))},[t.createElementVNode("div",{class:"_process",style:t.normalizeStyle(t.unref(l))},null,4)],4)):t.createCommentVNode("",!0)]))}}));var h=_(m,[["__scopeId","data-v-6c70920e"]]);const y={install(n,s){const r=Object.assign({},{color:"#3b66f5",errorColor:"#d50000",duration:200,timeGap:100,throttle:2,skipDuplicate:!0,autoFinish:!0,delay:800},s),a={color:r.color,process:0,type:"normal",show:!1},l=t.reactive({config:r,state:a,start(i){i&&(Object.assign(this.config,i),this.state.color=this.config.color),!(this.config.skipDuplicate&&this.state.show)&&(this.state.show&&this.clear(),this.state.show=!0,this.continue())},finish(){!this.state.show||(clearInterval(this.state.timer),this.state.process=100,this.config.autoFinish&&setTimeout(()=>{this.clear()},this.config.duration+this.config.delay))},fail(){this.state.color=this.config.errorColor,this.finish()},pause(){clearInterval(this.state.timer)},continue(){this.state.timer=setInterval(()=>{this.increase(10),this.state.process>=100&&(this.config.autoFinish?this.finish():clearInterval(this.state.timer))},this.config.timeGap)},clear(){this.state.show=!1,clearInterval(this.state.timer),this.state.timer=null,this.state.process=0,Object.assign(this.config,r),this.state.color=this.config.color},set(i){this.state.process=i},increase(i){this.state.process+i>100?this.set(100):this.set(this.state.process+i)},decrease(i){this.state.process-i<0?this.set(0):this.set(this.state.process-i)}});n.provide("$loading",l),n.component("VueLoadingIndicator",h),n.config.globalProperties.$loading=l}};e.VueLoadingIndicator=h,e.default=y,e.useLoadingIndicator=o,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});