Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue3-radial-progress

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-radial-progress - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

7

dist/RadialProgressBar.esm.js

@@ -166,3 +166,4 @@ import { defineComponent, reactive, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, createElementVNode, renderSlot } from 'vue';

const incrementer = Math.abs(i - totalPoints.value) / totalPoints.value;
const isMoveForward = i < totalPoints.value;
const isMoveForward = i < totalPoints.value; // @ts-ignore
gradientAnimation.value = setInterval(() => {

@@ -279,7 +280,7 @@ if (isMoveForward && i >= totalPoints.value || !isMoveForward && i < totalPoints.value) {

var css_248z = "\n.vrp__wrapper[data-v-386f6e2c] {\r\n position: relative;\n}\n.vrp__inner[data-v-386f6e2c] {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n border-radius: 50%;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\n}\r\n";
var css_248z = "\n.vrp__wrapper[data-v-48af5b34] {\r\n position: relative;\n}\n.vrp__inner[data-v-48af5b34] {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n border-radius: 50%;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\n}\r\n";
styleInject(css_248z);
script.render = render;
script.__scopeId = "data-v-386f6e2c";
script.__scopeId = "data-v-48af5b34";

@@ -286,0 +287,0 @@ // IIFE injects install function into component, allowing component

2

dist/RadialProgressBar.min.js

@@ -1,1 +0,1 @@

var RadialProgressBar=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,a,o=[],i=!0,u=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);i=!0);}catch(e){u=!0,a=e}finally{try{i||null==r.return||r.return()}finally{if(u)throw a}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var n=e.defineComponent({props:{diameter:{type:Number,required:!1,default:200},totalSteps:{type:Number,required:!0,default:10},completedSteps:{type:Number,required:!0,default:0},startColor:{type:String,required:!1,default:"#00C58E"},stopColor:{type:String,required:!1,default:"#00E0A1"},innerStrokeColor:{type:String,required:!1,default:"#2F495E"},strokeWidth:{type:Number,required:!1,default:10},innerStrokeWidth:{type:Number,required:!1,default:10},strokeLinecap:{type:String,required:!1,default:"round"},animateSpeed:{type:Number,required:!1,default:1e3},fps:{type:Number,required:!1,default:60},timingFunc:{type:String,required:!1,default:"linear"},isClockwise:{type:Boolean,required:!1,default:!0}},setup:function(t){var r=e.reactive({fx:.99,fy:.5,cx:.5,cy:.5,r:.65}),n=e.ref(0),a=e.ref(0),o=e.ref(null),i=e.computed((function(){return t.diameter/2})),u=e.computed((function(){return t.diameter-2*t.innerStrokeWidth})),l=e.computed((function(){return Math.PI*u.value})),c=e.computed((function(){return 0===t.totalSteps?0:100/t.totalSteps})),d=e.computed((function(){return c.value*t.completedSteps})),s=e.computed((function(){return 2*Math.PI/t.totalSteps})),f=e.computed((function(){return 100/t.fps})),p=e.computed((function(){return t.animateSpeed/f.value})),m=e.computed((function(){return s.value/p.value})),y=e.computed((function(){return u.value/2})),v=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px")}})),h=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.strokeWidth,"px"),strokeDashoffset:n.value,transition:"stroke-dashoffset ".concat(t.animateSpeed,"ms ").concat(t.timingFunc)}})),S=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.innerStrokeWidth,"px")}})),g=e.computed((function(){return{width:"".concat(u.value,"px")}}));return e.watch((function(){return[t.diameter,t.totalSteps,t.completedSteps,t.strokeWidth]}),(function(){n.value=(100-d.value)/100*l.value*function(){return t.isClockwise?1:-1}(),o.value&&clearInterval(o.value);var e=(t.completedSteps-1)*s.value,i=(a.value-e)/m.value,u=Math.abs(i-p.value)/p.value,c=i<p.value;o.value=setInterval((function(){var t;c&&i>=p.value||!c&&i<p.value?o.value&&clearInterval(o.value):(a.value=e+m.value*i,t=function(e){var t=.5,r=t+t*Math.cos(e),n=t+t*Math.sin(e);return{x:r,y:n}}(a.value),t.x&&t.y&&(r.fx=t.x,r.fy=t.y),i+=c?u:-u)}),f.value)}),{immediate:!0}),{gradientAnimation:o,innerCircleRadius:y,strokeDashoffset:n,innerCircleStyle:g,containerStyle:v,circumference:l,progressStyle:h,currentAngle:a,strokeStyle:S,gradient:r,radius:i}}}),a=["width","height"],o=["fx","fy","cx","cy","r"],i=["stop-color"],u=["stop-color"],l=["r","cx","cy","stroke","stroke-dasharray","stroke-linecap"],c=["transform","r","cx","cy","stroke-dasharray","stroke-dashoffset","stroke-linecap"];!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.vrp__wrapper[data-v-386f6e2c] {\r\n position: relative;\n}\n.vrp__inner[data-v-386f6e2c] {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n border-radius: 50%;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\n}\r\n"),n.render=function(t,r,n,d,s,f){return e.openBlock(),e.createElementBlock("div",{class:"vrp__wrapper",style:e.normalizeStyle(t.containerStyle)},[e.createElementVNode("div",{class:"vrp__inner",style:e.normalizeStyle(t.innerCircleStyle)},[e.renderSlot(t.$slots,"default")],4),(e.openBlock(),e.createElementBlock("svg",{width:t.diameter,height:t.diameter,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("defs",null,[e.createElementVNode("radialGradient",{id:"radial-gradient",fx:t.gradient.fx,fy:t.gradient.fy,cx:t.gradient.cx,cy:t.gradient.cy,r:t.gradient.r},[e.createElementVNode("stop",{offset:"30%","stop-color":t.startColor},null,8,i),e.createElementVNode("stop",{offset:"100%","stop-color":t.stopColor},null,8,u)],8,o)]),e.createElementVNode("circle",{r:t.innerCircleRadius,cx:t.radius,cy:t.radius,fill:"transparent",stroke:t.innerStrokeColor,"stroke-dasharray":t.circumference,"stroke-dashoffset":"0","stroke-linecap":t.strokeLinecap,style:e.normalizeStyle(t.strokeStyle)},null,12,l),e.createElementVNode("circle",{transform:"rotate(270, "+t.radius+","+t.radius+")",r:t.innerCircleRadius,cx:t.radius,cy:t.radius,fill:"transparent",stroke:"url('#radial-gradient')","stroke-dasharray":t.circumference,"stroke-dashoffset":t.circumference,"stroke-linecap":t.strokeLinecap,style:e.normalizeStyle(t.progressStyle)},null,12,c)],8,a))],4)},n.__scopeId="data-v-386f6e2c";var d=function(){var e=n;return e.install=function(t){t.component("RadialProgressBar",e)},e}(),s=Object.freeze({__proto__:null,default:d});return Object.entries(s).forEach((function(e){var r=t(e,2),n=r[0],a=r[1];"default"!==n&&(d[n]=a)})),d}(Vue);
var RadialProgressBar=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,a,o=[],i=!0,u=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);i=!0);}catch(e){u=!0,a=e}finally{try{i||null==r.return||r.return()}finally{if(u)throw a}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var n=e.defineComponent({props:{diameter:{type:Number,required:!1,default:200},totalSteps:{type:Number,required:!0,default:10},completedSteps:{type:Number,required:!0,default:0},startColor:{type:String,required:!1,default:"#00C58E"},stopColor:{type:String,required:!1,default:"#00E0A1"},innerStrokeColor:{type:String,required:!1,default:"#2F495E"},strokeWidth:{type:Number,required:!1,default:10},innerStrokeWidth:{type:Number,required:!1,default:10},strokeLinecap:{type:String,required:!1,default:"round"},animateSpeed:{type:Number,required:!1,default:1e3},fps:{type:Number,required:!1,default:60},timingFunc:{type:String,required:!1,default:"linear"},isClockwise:{type:Boolean,required:!1,default:!0}},setup:function(t){var r=e.reactive({fx:.99,fy:.5,cx:.5,cy:.5,r:.65}),n=e.ref(0),a=e.ref(0),o=e.ref(null),i=e.computed((function(){return t.diameter/2})),u=e.computed((function(){return t.diameter-2*t.innerStrokeWidth})),l=e.computed((function(){return Math.PI*u.value})),c=e.computed((function(){return 0===t.totalSteps?0:100/t.totalSteps})),d=e.computed((function(){return c.value*t.completedSteps})),s=e.computed((function(){return 2*Math.PI/t.totalSteps})),f=e.computed((function(){return 100/t.fps})),p=e.computed((function(){return t.animateSpeed/f.value})),m=e.computed((function(){return s.value/p.value})),y=e.computed((function(){return u.value/2})),v=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px")}})),h=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.strokeWidth,"px"),strokeDashoffset:n.value,transition:"stroke-dashoffset ".concat(t.animateSpeed,"ms ").concat(t.timingFunc)}})),S=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.innerStrokeWidth,"px")}})),g=e.computed((function(){return{width:"".concat(u.value,"px")}}));return e.watch((function(){return[t.diameter,t.totalSteps,t.completedSteps,t.strokeWidth]}),(function(){n.value=(100-d.value)/100*l.value*function(){return t.isClockwise?1:-1}(),o.value&&clearInterval(o.value);var e=(t.completedSteps-1)*s.value,i=(a.value-e)/m.value,u=Math.abs(i-p.value)/p.value,c=i<p.value;o.value=setInterval((function(){var t;c&&i>=p.value||!c&&i<p.value?o.value&&clearInterval(o.value):(a.value=e+m.value*i,t=function(e){var t=.5,r=t+t*Math.cos(e),n=t+t*Math.sin(e);return{x:r,y:n}}(a.value),t.x&&t.y&&(r.fx=t.x,r.fy=t.y),i+=c?u:-u)}),f.value)}),{immediate:!0}),{gradientAnimation:o,innerCircleRadius:y,strokeDashoffset:n,innerCircleStyle:g,containerStyle:v,circumference:l,progressStyle:h,currentAngle:a,strokeStyle:S,gradient:r,radius:i}}}),a=["width","height"],o=["fx","fy","cx","cy","r"],i=["stop-color"],u=["stop-color"],l=["r","cx","cy","stroke","stroke-dasharray","stroke-linecap"],c=["transform","r","cx","cy","stroke-dasharray","stroke-dashoffset","stroke-linecap"];!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.vrp__wrapper[data-v-48af5b34] {\r\n position: relative;\n}\n.vrp__inner[data-v-48af5b34] {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n border-radius: 50%;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\n}\r\n"),n.render=function(t,r,n,d,s,f){return e.openBlock(),e.createElementBlock("div",{class:"vrp__wrapper",style:e.normalizeStyle(t.containerStyle)},[e.createElementVNode("div",{class:"vrp__inner",style:e.normalizeStyle(t.innerCircleStyle)},[e.renderSlot(t.$slots,"default")],4),(e.openBlock(),e.createElementBlock("svg",{width:t.diameter,height:t.diameter,version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("defs",null,[e.createElementVNode("radialGradient",{id:"radial-gradient",fx:t.gradient.fx,fy:t.gradient.fy,cx:t.gradient.cx,cy:t.gradient.cy,r:t.gradient.r},[e.createElementVNode("stop",{offset:"30%","stop-color":t.startColor},null,8,i),e.createElementVNode("stop",{offset:"100%","stop-color":t.stopColor},null,8,u)],8,o)]),e.createElementVNode("circle",{r:t.innerCircleRadius,cx:t.radius,cy:t.radius,fill:"transparent",stroke:t.innerStrokeColor,"stroke-dasharray":t.circumference,"stroke-dashoffset":"0","stroke-linecap":t.strokeLinecap,style:e.normalizeStyle(t.strokeStyle)},null,12,l),e.createElementVNode("circle",{transform:"rotate(270, "+t.radius+","+t.radius+")",r:t.innerCircleRadius,cx:t.radius,cy:t.radius,fill:"transparent",stroke:"url('#radial-gradient')","stroke-dasharray":t.circumference,"stroke-dashoffset":t.circumference,"stroke-linecap":t.strokeLinecap,style:e.normalizeStyle(t.progressStyle)},null,12,c)],8,a))],4)},n.__scopeId="data-v-48af5b34";var d=function(){var e=n;return e.install=function(t){t.component("RadialProgressBar",e)},e}(),s=Object.freeze({__proto__:null,default:d});return Object.entries(s).forEach((function(e){var r=t(e,2),n=r[0],a=r[1];"default"!==n&&(d[n]=a)})),d}(Vue);

7

dist/RadialProgressBar.ssr.js

@@ -250,3 +250,4 @@ 'use strict';var vue=require('vue');function _slicedToArray(arr, i) {

var incrementer = Math.abs(i - totalPoints.value) / totalPoints.value;
var isMoveForward = i < totalPoints.value;
var isMoveForward = i < totalPoints.value; // @ts-ignore
gradientAnimation.value = setInterval(function () {

@@ -356,5 +357,5 @@ if (isMoveForward && i >= totalPoints.value || !isMoveForward && i < totalPoints.value) {

}
}var css_248z = "\n.vrp__wrapper[data-v-386f6e2c] {\r\n position: relative;\n}\n.vrp__inner[data-v-386f6e2c] {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n border-radius: 50%;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\n}\r\n";
}var css_248z = "\n.vrp__wrapper[data-v-48af5b34] {\r\n position: relative;\n}\n.vrp__inner[data-v-48af5b34] {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n border-radius: 50%;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\n}\r\n";
styleInject(css_248z);script.render = render;
script.__scopeId = "data-v-386f6e2c";// Default export is installable instance of component.
script.__scopeId = "data-v-48af5b34";// Default export is installable instance of component.
// IIFE injects install function into component, allowing component

@@ -361,0 +362,0 @@ // to be registered via Vue.use() as well as Vue.component(),

9

dist/types/src/RadialProgressBar.vue.d.ts

@@ -1,2 +0,1 @@

/// <reference types="node" />
import { PropType } from "vue";

@@ -71,9 +70,3 @@ import { StrokeLinecap, Style } from "./types";

}, {
gradientAnimation: import("vue").Ref<{
hasRef: () => boolean;
refresh: () => NodeJS.Timer;
[Symbol.toPrimitive]: () => number;
ref: () => NodeJS.Timer;
unref: () => NodeJS.Timer;
} | null>;
gradientAnimation: import("vue").Ref<number | null>;
innerCircleRadius: import("vue").ComputedRef<number>;

@@ -80,0 +73,0 @@ strokeDashoffset: import("vue").Ref<number>;

2

package.json
{
"name": "vue3-radial-progress",
"version": "1.0.3",
"version": "1.0.4",
"description": "A smart and light radial progress bar component for Vue 3.",

@@ -5,0 +5,0 @@ "author": "Jairo Blatt <jairoblatt@gmail.com>",

src/RadialProgressBar.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc