vue-progress-circle/dist/vue-progress-circle.umd.min.js

Circle progress component for vue 3

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue-progress-circle"]=t(require("vue")):e["vue-progress-circle"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){var t={456:function(e,t,r){"use strict";r.r(t);var o=r(601),n=r.n(o),a=r(314),l=r.n(a),i=l()(n());i.push([e.id,".progress-circle-container{position:relative}.progress-circle-inner{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}",""]),t["default"]=i},314:function(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",o="undefined"!==typeof t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),o&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),o&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,o,n,a){"string"===typeof e&&(e=[[null,e,void 0]]);var l={};if(o)for(var i=0;i<this.length;i++){var u=this[i][0];null!=u&&(l[u]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);o&&l[c[0]]||("undefined"!==typeof a&&("undefined"===typeof c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),r&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=r):c[2]=r),n&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=n):c[4]="".concat(n)),t.push(c))}},t}},601:function(e){"use strict";e.exports=function(e){return e[1]}},827:function(e,t,r){var o=r(456);o.__esModule&&(o=o.default),"string"===typeof o&&(o=[[e.id,o,""]]),o.locals&&(e.exports=o.locals);var n=r(548).A;n("3db8b41c",o,!0,{sourceMap:!1,shadowMode:!1})},548:function(e,t,r){"use strict";function o(e,t){for(var r=[],o={},n=0;n<t.length;n++){var a=t[n],l=a[0],i=a[1],u=a[2],s=a[3],c={id:e+":"+n,css:i,media:u,sourceMap:s};o[l]?o[l].parts.push(c):r.push(o[l]={id:l,parts:[c]})}return r}r.d(t,{A:function(){return v}});var n="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!n)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},l=n&&(document.head||document.getElementsByTagName("head")[0]),i=null,u=0,s=!1,c=function(){},d=null,p="data-vue-ssr-id",f="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(e,t,r,n){s=r,d=n||{};var l=o(e,t);return m(l),function(t){for(var r=[],n=0;n<l.length;n++){var i=l[n],u=a[i.id];u.refs--,r.push(u)}t?(l=o(e,t),m(l)):l=[];for(n=0;n<r.length;n++){u=r[n];if(0===u.refs){for(var s=0;s<u.parts.length;s++)u.parts[s]();delete a[u.id]}}}}function m(e){for(var t=0;t<e.length;t++){var r=e[t],o=a[r.id];if(o){o.refs++;for(var n=0;n<o.parts.length;n++)o.parts[n](r.parts[n]);for(;n<r.parts.length;n++)o.parts.push(y(r.parts[n]));o.parts.length>r.parts.length&&(o.parts.length=r.parts.length)}else{var l=[];for(n=0;n<r.parts.length;n++)l.push(y(r.parts[n]));a[r.id]={id:r.id,refs:1,parts:l}}}}function h(){var e=document.createElement("style");return e.type="text/css",l.appendChild(e),e}function y(e){var t,r,o=document.querySelector("style["+p+'~="'+e.id+'"]');if(o){if(s)return c;o.parentNode.removeChild(o)}if(f){var n=u++;o=i||(i=h()),t=x.bind(null,o,n,!1),r=x.bind(null,o,n,!0)}else o=h(),t=S.bind(null,o),r=function(){o.parentNode.removeChild(o)};return t(e),function(o){if(o){if(o.css===e.css&&o.media===e.media&&o.sourceMap===e.sourceMap)return;t(e=o)}else r()}}var g=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}();function x(e,t,r,o){var n=r?"":o.css;if(e.styleSheet)e.styleSheet.cssText=g(t,n);else{var a=document.createTextNode(n),l=e.childNodes;l[t]&&e.removeChild(l[t]),l.length?e.insertBefore(a,l[t]):e.appendChild(a)}}function S(e,t){var r=t.css,o=t.media,n=t.sourceMap;if(o&&e.setAttribute("media",o),d.ssrId&&e.setAttribute(p,t.id),n&&(r+="\n/*# sourceURL="+n.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{while(e.firstChild)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}},274:function(t){"use strict";t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={id:e,exports:{}};return t[e](a,a.exports,o),a.exports}!function(){o.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return o.d(t,{a:t}),t}}(),function(){o.d=function(e,t){for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){o.p=""}();var n={};return function(){"use strict";if(o.r(n),o.d(n,{ProgressCircle:function(){return f},default:function(){return h},install:function(){return v}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(o.p=t[1])}var r=o(274);const a=["width","height"],l=["id","fx","fy","cx","cy","r"],i=["stop-color"],u=["stop-color"],s=["r","cx","cy","fill","stroke","stroke-dasharray"],c=["transform","r","cx","cy","fill","stroke","stroke-dasharray","stroke-dashoffset"];var d={__name:"ProgressCircle",props:{diameter:{type:Number,default:100},totalSteps:{type:Number,required:!0,default:10},completedSteps:{type:Number,required:!0,default:0},startColor:{type:String,default:"#FF0000"},stopColor:{type:String,default:"#0000FF"},circleWidth:{type:Number,default:10},animationDuration:{type:Number,default:1e3},circleColor:{type:String,default:"#000000"},innerDisplay:{type:String,default:"slot"},percentColor:{type:String,default:"inherit"},innerColor:{type:String,default:"transparent"},circleOrigin:{type:String,default:"top"},reverseRotation:{type:Boolean,default:!1},afterMountDelay:{type:Number,default:0}},setup(e){const t=e,o=(0,r.ref)({fx:1,fy:.5,cx:.5,cy:.5,r:.65}),n=(0,r.ref)(null),d=(0,r.ref)(0),p=(0,r.ref)(0),f=(0,r.ref)(1e3/60),v=(0,r.ref)(""),m=(0,r.computed)((()=>t.diameter/2)),h=(0,r.computed)((()=>t.diameter-2*t.circleWidth)),y=(0,r.computed)((()=>Math.PI*h.value)),g=(0,r.computed)((()=>M.value*t.completedSteps)),x=(0,r.computed)((()=>Math.round(g.value))),S=(0,r.computed)((()=>2*Math.PI/t.totalSteps)),b=(0,r.computed)((()=>t.animationDuration/f.value)),k=(0,r.computed)((()=>S.value/b.value)),w=(0,r.computed)((()=>h.value/2)),C=(0,r.computed)((()=>{switch(t.circleOrigin){case"bottom":return 90;case"right":return 0;case"left":return 180}return 270})),M=(0,r.computed)((()=>0===t.totalSteps?0:100/t.totalSteps)),N=(0,r.computed)((()=>({height:`${t.diameter}px`,width:`${t.diameter}px`}))),E=(0,r.computed)((()=>({height:`${t.diameter}px`,width:`${t.diameter}px`,strokeWidth:`${t.circleWidth}px`,strokeDashoffset:p.value,transition:`stroke-dashoffset ${t.animationDuration}ms linear`}))),$=(0,r.computed)((()=>({height:`${t.diameter}px`,width:`${t.diameter}px`,strokeWidth:`${t.circleWidth}px`}))),j=(0,r.computed)((()=>({fontSize:t.diameter/2+"px",color:`${t.percentColor}`,display:"block"}))),B=(0,r.computed)((()=>({width:`${h.value}px`}))),D=e=>{const t=.5,r=t+t*Math.cos(e),o=t+t*Math.sin(e);return{x:r,y:o}},_=()=>{const e=D(d.value);o.value.fx=e.x,o.value.fy=e.y},O=()=>{d.value=t.completedSteps*S.value,_()},P=(e=!0)=>{if(p.value=(100-g.value)/100*y.value,t.reverseRotation&&(p.value=-p.value),n.value&&clearInterval(n.value),!e)return void O();const r=(t.completedSteps-1)*S.value;let o=(d.value-r)/k.value;const a=Math.abs(o-b.value)/b.value,l=o<b.value;n.value=setInterval((()=>{l&&o>=b.value||!l&&o<b.value?clearInterval(n.value):(d.value=r+k.value*o,_(),o+=l?a:-a)}),f.value)};return(0,r.watch)((()=>t.totalSteps),((e,t)=>{P(!0)})),(0,r.watch)((()=>t.completedSteps),((e,t)=>{P(!0)})),(0,r.watch)((()=>t.diameter),((e,t)=>{P(!0)})),(0,r.watch)((()=>t.circleWidth),((e,t)=>{P(!0)})),(0,r.watch)((()=>t.reverseRotation),((e,t)=>{P(!1)})),(0,r.onMounted)((()=>{v.value="progresscircle_"+Math.random().toString(36).substring(2,9),t.afterMountDelay?(p.value=y.value,t.reverseRotation&&(p.value=-p.value),setTimeout((()=>{P(!1)}),t.afterMountDelay)):P(!1)})),(t,n)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"progress-circle-container",style:(0,r.normalizeStyle)(N.value)},[(0,r.createElementVNode)("div",{class:"progress-circle-inner",style:(0,r.normalizeStyle)(B.value)},["percent"===e.innerDisplay?((0,r.openBlock)(),(0,r.createElementBlock)("span",{key:0,style:(0,r.normalizeStyle)(j.value)},(0,r.toDisplayString)(x.value),5)):(0,r.renderSlot)(t.$slots,"default",{key:1})],4),((0,r.openBlock)(),(0,r.createElementBlock)("svg",{class:"progress-circle-bar",width:e.diameter,height:e.diameter,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[(0,r.createElementVNode)("defs",null,[(0,r.createElementVNode)("radialGradient",{id:"radial-gradient"+v.value,fx:o.value.fx,fy:o.value.fy,cx:o.value.cx,cy:o.value.cy,r:o.value.r},[(0,r.createElementVNode)("stop",{offset:"50%","stop-color":e.startColor},null,8,i),(0,r.createElementVNode)("stop",{offset:"100%","stop-color":e.stopColor},null,8,u)],8,l)]),(0,r.createElementVNode)("circle",{r:w.value,cx:m.value,cy:m.value,fill:e.innerColor,stroke:e.circleColor,"stroke-dasharray":y.value,"stroke-dashoffset":"0","stroke-linecap":"round",style:(0,r.normalizeStyle)($.value)},null,12,s),(0,r.createElementVNode)("circle",{transform:"rotate("+C.value+", "+m.value+","+m.value+")",r:w.value,cx:m.value,cy:m.value,fill:e.innerColor,stroke:"url(#radial-gradient"+v.value+")","stroke-dasharray":y.value,"stroke-dashoffset":y.value,"stroke-linecap":"round",style:(0,r.normalizeStyle)(E.value)},null,12,c)],8,a))],4))}};const p=d;var f=p;o(827);const v=e=>{e.component("progress-circle",f)};var m=v,h=m}(),n}()}));