@bprogress/vue/dist/index.umd.js

Utility to create your own NProgress bar like with Vue

(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bprogress/core")):typeof define=="function"&&define.amd?define(["exports","vue","@bprogress/core"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.BProgressVue={},c.Vue,c.BProgressCore))})(this,function(c,e,n){"use strict";const N=Symbol("ProgressContext");function L(){const o=e.inject(N);if(!o)throw new Error("useProgress must be used within a ProgressProvider");return o}const K=e.defineComponent({__name:"progress-provider",props:{color:{},height:{},options:{},spinnerPosition:{},style:{},disableStyle:{type:Boolean},nonce:{}},setup(o){const t=o,{color:l="#0A2FFF",height:s="2px",options:r,spinnerPosition:f="top-right",style:w,disableStyle:V=!1,nonce:D}=e.toRefs(t);r.value&&n.BProgress.configure(r.value||{});const m=e.ref(null),g=e.ref(!1),h=()=>g.value=!0,b=()=>g.value=!1,A=(a=0,u=0,B=!1)=>{B&&h(),m.value=setTimeout(()=>{a>0&&n.BProgress.set(a),n.BProgress.start()},u)},k=(a=0,u=0)=>{setTimeout(()=>{m.value&&clearTimeout(m.value),m.value=setTimeout(()=>{n.BProgress.isStarted()&&(n.BProgress.done(),g.value&&b())},a)},u)},O=a=>n.BProgress.inc(a),T=a=>n.BProgress.dec(a),j=a=>n.BProgress.set(a),_=()=>n.BProgress.pause(),y=()=>n.BProgress.resume(),i=()=>n.BProgress.settings,d={start:A,stop:k,inc:O,dec:T,set:j,pause:_,resume:y,getOptions:i,setOptions:a=>{const u=i(),B=typeof a=="function"?a(u):a,$={...u,...B};n.BProgress.configure($)},isAutoStopDisabled:g,disableAutoStop:h,enableAutoStop:b};e.provide(N,d);const P=e.computed(()=>e.unref(w)||n.css({color:e.unref(l),height:e.unref(s),spinnerPosition:e.unref(f)})),E=e.defineComponent({name:"BProgressStyle",render(){return e.h("style",{nonce:D.value??void 0},P.value)}});return e.onUnmounted(()=>{m.value&&clearTimeout(m.value)}),(a,u)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(a.$slots,"default"),e.unref(V)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(E)),{key:0}))]))}});function q({shallowRouting:o=!1,disableSameURL:t=!0,startPosition:l=0,delay:s=0,stopDelay:r=0,targetPreprocessor:f,disableAnchorClick:w=!1,startOnLoad:V=!1,forcedStopDelay:D=0},m=[]){const g=e.ref([]),h=e.ref(null),{start:b,stop:A,isAutoStopDisabled:k}=L(),O=window.history.pushState;e.onMounted(()=>{V&&b(l,s)}),m.length>0&&e.watch(m,()=>{h.value&&clearTimeout(h.value),h.value=window.setTimeout(()=>{k.value||A()},r)});const T=y=>{var $;const i=y;if(i.defaultPrevented)return;const p=i.currentTarget;if(p.hasAttribute("download"))return;const d=i.target;let P=(d==null?void 0:d.getAttribute("data-prevent-progress"))==="true"||(p==null?void 0:p.getAttribute("data-prevent-progress"))==="true";if(!P){let C=d;for(;C&&C.tagName.toLowerCase()!=="a";){if((($=C.parentElement)==null?void 0:$.getAttribute("data-prevent-progress"))==="true"){P=!0;break}C=C.parentElement}}if(P||n.getAnchorProperty(p,"target")==="_blank"||i.metaKey||i.ctrlKey||i.shiftKey||i.altKey)return;const a=n.getAnchorProperty(p,"href"),u=f?f(new URL(a)):new URL(a),B=new URL(location.href);o&&n.isSameURLWithoutSearch(u,B)&&t||n.isSameURL(u,B)&&t||b(l,s)},j=()=>{const i=Array.from(document.querySelectorAll("a")).filter(p=>{const d=n.getAnchorProperty(p,"href"),P=p.getAttribute("data-disable-progress")==="true",E=d&&!d.startsWith("tel:")&&!d.startsWith("mailto:")&&!d.startsWith("blob:")&&!d.startsWith("javascript:");return!P&&E&&n.getAnchorProperty(p,"target")!=="_blank"});i.forEach(p=>{p.addEventListener("click",T,!0)}),g.value=i};let _=null;e.onMounted(()=>{w||(_=new MutationObserver(j),_.observe(document,{childList:!0,subtree:!0})),window.history.pushState=new Proxy(window.history.pushState,{apply(y,i,p){return k.value||A(r,D),y.apply(i,p)}})}),e.onBeforeUnmount(()=>{_&&_.disconnect(),g.value.forEach(y=>{y.removeEventListener("click",T,!0)}),g.value=[],h.value&&clearTimeout(h.value),window.history.pushState=O})}function S(...o){const t=[],l=s=>{if(s){if(typeof s=="string")s.trim()&&t.push(s);else if(Array.isArray(s))s.forEach(r=>l(r));else if(typeof s=="object")for(const r in s)Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&t.push(r)}};return o.forEach(s=>l(s)),t.join(" ")}const U=e.defineComponent({__name:"bar",props:{classSelector:{},is:{},class:{}},setup(o){const t=o,l=e.useAttrs(),s=e.computed(()=>S(t.classSelector||"bar",t.class));return(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.is||"div"),e.mergeProps(e.unref(l),{class:s.value}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},16,["class"]))}}),W=e.defineComponent({__name:"peg",props:{classSelector:{},is:{},class:{}},setup(o){const t=o,l=e.useAttrs(),s=e.computed(()=>S(t.classSelector||"peg",t.class));return(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.is||"div"),e.mergeProps(e.unref(l),{class:s.value}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},16,["class"]))}}),M=e.defineComponent({__name:"spinner",props:{classSelector:{},is:{},class:{}},setup(o){const t=o,l=e.useAttrs(),s=e.computed(()=>S(t.classSelector||"spinner",t.class));return(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.is||"div"),e.mergeProps(e.unref(l),{class:s.value}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},16,["class"]))}}),R=e.defineComponent({__name:"spinner-icon",props:{classSelector:{},is:{},class:{}},setup(o){const t=o,l=e.useAttrs(),s=e.computed(()=>S(t.classSelector||"spinner-icon",t.class));return(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.is||"div"),e.mergeProps(e.unref(l),{class:s.value}),{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},16,["class"]))}}),F=e.defineComponent({__name:"progress",props:{style:{},is:{},class:{}},setup(o){const t=o,l=e.useAttrs(),s=e.computed(()=>S("bprogress",t.class)),r=e.computed(()=>typeof t.style=="string"?t.style+"; display: none;":typeof t.style=="object"&&t.style!==null?{...t.style,display:"none"}:{display:"none"});return(f,w)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.is||"div"),e.mergeProps(e.unref(l),{class:s.value,style:r.value}),{default:e.withCtx(()=>[e.renderSlot(f.$slots,"default",{},()=>[e.createVNode(U,null,{default:e.withCtx(()=>[e.createVNode(W)]),_:1}),e.createVNode(M,null,{default:e.withCtx(()=>[e.createVNode(R)]),_:1})])]),_:3},16,["class","style"]))}}),H=e.defineComponent({__name:"indeterminate",props:{classSelector:{},is:{},class:{}},setup(o){const t=o,l=e.useAttrs(),s=e.computed(()=>S(t.classSelector||"indeterminate",t.class));return(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.is||"div"),e.mergeProps(e.unref(l),{class:s.value}),{default:e.withCtx(()=>f[0]||(f[0]=[e.createElementVNode("div",{class:"inc"},null,-1),e.createElementVNode("div",{class:"dec"},null,-1)])),_:1},16,["class"]))}});c.Bar=U,c.Indeterminate=H,c.Peg=W,c.Progress=F,c.ProgressProvider=K,c.Spinner=M,c.SpinnerIcon=R,c.progressSymbol=N,c.useAnchorProgress=q,c.useProgress=L,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});