New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue3-radial-progress

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-radial-progress - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/types/src/utils.d.ts

21

dist/RadialProgressBar.esm.js
import { defineComponent, reactive, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, createElementVNode, renderSlot } from 'vue';
function randomString() {
return Math.random().toString(16).substring(2);
}
var script = defineComponent({

@@ -97,2 +101,3 @@ props: {

});
const radialGradientId = `rg-${randomString()}`;
const strokeDashoffset = ref(0);

@@ -167,4 +172,3 @@ const currentAngle = ref(0);

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

@@ -185,2 +189,3 @@ if (isMoveForward && i >= totalPoints.value || !isMoveForward && i < totalPoints.value) {

innerCircleRadius,
radialGradientId,
strokeDashoffset,

@@ -201,7 +206,7 @@ innerCircleStyle,

const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fx", "fy", "cx", "cy", "r"];
const _hoisted_2 = ["id", "fx", "fy", "cx", "cy", "r"];
const _hoisted_3 = ["stop-color"];
const _hoisted_4 = ["stop-color"];
const _hoisted_5 = ["r", "cx", "cy", "stroke", "stroke-dasharray", "stroke-linecap"];
const _hoisted_6 = ["transform", "r", "cx", "cy", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap"];
const _hoisted_6 = ["transform", "r", "cx", "cy", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap"];
function render(_ctx, _cache, $props, $setup, $data, $options) {

@@ -220,3 +225,3 @@ return openBlock(), createElementBlock("div", {

}, [createElementVNode("defs", null, [createElementVNode("radialGradient", {
id: "radial-gradient",
id: _ctx.radialGradientId,
fx: _ctx.gradient.fx,

@@ -249,3 +254,3 @@ fy: _ctx.gradient.fy,

fill: "transparent",
stroke: "url('#radial-gradient')",
stroke: `url('#${_ctx.radialGradientId}')`,
"stroke-dasharray": _ctx.circumference,

@@ -285,7 +290,7 @@ "stroke-dashoffset": _ctx.circumference,

var css_248z = "\n.vrp__wrapper[data-v-25717372] {\r\n position: relative;\n}\n.vrp__inner[data-v-25717372] {\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-6a0cf1f6] {\r\n position: relative;\n}\n.vrp__inner[data-v-6a0cf1f6] {\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-25717372";
script.__scopeId = "data-v-6a0cf1f6";

@@ -292,0 +297,0 @@ // IIFE injects install function into component, allowing component

@@ -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-25717372] {\r\n position: relative;\n}\n.vrp__inner[data-v-25717372] {\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-25717372";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="rg-".concat(Math.random().toString(16).substring(2)),a=e.ref(0),o=e.ref(0),i=e.ref(null),u=e.computed((function(){return t.diameter/2})),l=e.computed((function(){return t.diameter-2*t.innerStrokeWidth})),c=e.computed((function(){return Math.PI*l.value})),d=e.computed((function(){return 0===t.totalSteps?0:100/t.totalSteps})),s=e.computed((function(){return d.value*t.completedSteps})),f=e.computed((function(){return 2*Math.PI/t.totalSteps})),p=e.computed((function(){return 100/t.fps})),m=e.computed((function(){return t.animateSpeed/p.value})),y=e.computed((function(){return f.value/m.value})),v=e.computed((function(){return l.value/2})),h=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px")}})),S=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.strokeWidth,"px"),strokeDashoffset:a.value,transition:"stroke-dashoffset ".concat(t.animateSpeed,"ms ").concat(t.timingFunc)}})),g=e.computed((function(){return{height:"".concat(t.diameter,"px"),width:"".concat(t.diameter,"px"),strokeWidth:"".concat(t.innerStrokeWidth,"px")}})),k=e.computed((function(){return{width:"".concat(l.value,"px")}}));return e.watch((function(){return[t.diameter,t.totalSteps,t.completedSteps,t.strokeWidth]}),(function(){a.value=(100-s.value)/100*c.value*function(){return t.isClockwise?1:-1}(),i.value&&clearInterval(i.value);var e=(t.completedSteps-1)*f.value,n=(o.value-e)/y.value,u=Math.abs(n-m.value)/m.value,l=n<m.value;i.value=setInterval((function(){var t;l&&n>=m.value||!l&&n<m.value?i.value&&clearInterval(i.value):(o.value=e+y.value*n,t=function(e){var t=.5,r=t+t*Math.cos(e),n=t+t*Math.sin(e);return{x:r,y:n}}(o.value),t.x&&t.y&&(r.fx=t.x,r.fy=t.y),n+=l?u:-u)}),p.value)}),{immediate:!0}),{gradientAnimation:i,innerCircleRadius:v,radialGradientId:n,strokeDashoffset:a,innerCircleStyle:k,containerStyle:h,circumference:c,progressStyle:S,currentAngle:o,strokeStyle:g,gradient:r,radius:u}}}),a=["width","height"],o=["id","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","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-6a0cf1f6] {\r\n position: relative;\n}\n.vrp__inner[data-v-6a0cf1f6] {\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:t.radialGradientId,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('#".concat(t.radialGradientId,"')"),"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-6a0cf1f6";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);

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

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 randomString() {
return Math.random().toString(16).substring(2);
}var script = vue.defineComponent({

@@ -152,2 +154,3 @@ props: {

});
var radialGradientId = "rg-".concat(randomString());
var strokeDashoffset = vue.ref(0);

@@ -252,4 +255,3 @@ var currentAngle = vue.ref(0);

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

@@ -270,2 +272,3 @@ if (isMoveForward && i >= totalPoints.value || !isMoveForward && i < totalPoints.value) {

innerCircleRadius: innerCircleRadius,
radialGradientId: radialGradientId,
strokeDashoffset: strokeDashoffset,

@@ -283,7 +286,7 @@ innerCircleStyle: innerCircleStyle,

});var _hoisted_1 = ["width", "height"];
var _hoisted_2 = ["fx", "fy", "cx", "cy", "r"];
var _hoisted_2 = ["id", "fx", "fy", "cx", "cy", "r"];
var _hoisted_3 = ["stop-color"];
var _hoisted_4 = ["stop-color"];
var _hoisted_5 = ["r", "cx", "cy", "stroke", "stroke-dasharray", "stroke-linecap"];
var _hoisted_6 = ["transform", "r", "cx", "cy", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap"];
var _hoisted_6 = ["transform", "r", "cx", "cy", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap"];
function render(_ctx, _cache, $props, $setup, $data, $options) {

@@ -302,3 +305,3 @@ return vue.openBlock(), vue.createElementBlock("div", {

}, [vue.createElementVNode("defs", null, [vue.createElementVNode("radialGradient", {
id: "radial-gradient",
id: _ctx.radialGradientId,
fx: _ctx.gradient.fx,

@@ -331,3 +334,3 @@ fy: _ctx.gradient.fy,

fill: "transparent",
stroke: "url('#radial-gradient')",
stroke: "url('#".concat(_ctx.radialGradientId, "')"),
"stroke-dasharray": _ctx.circumference,

@@ -363,5 +366,5 @@ "stroke-dashoffset": _ctx.circumference,

}
}var css_248z = "\n.vrp__wrapper[data-v-25717372] {\r\n position: relative;\n}\n.vrp__inner[data-v-25717372] {\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-6a0cf1f6] {\r\n position: relative;\n}\n.vrp__inner[data-v-6a0cf1f6] {\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-25717372";// Default export is installable instance of component.
script.__scopeId = "data-v-6a0cf1f6";// Default export is installable instance of component.
// IIFE injects install function into component, allowing component

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

@@ -72,2 +72,3 @@ import type { StrokeLinecap, Style } from "./types";

innerCircleRadius: import("vue").ComputedRef<number>;
radialGradientId: string;
strokeDashoffset: import("vue").Ref<number>;

@@ -74,0 +75,0 @@ innerCircleStyle: import("vue").ComputedRef<Style>;

{
"name": "vue3-radial-progress",
"version": "1.1.0",
"version": "1.1.1",
"description": "A smart and light radial progress bar component for Vue 3.",

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

@@ -30,5 +30,3 @@ <img src="https://github.com/jairoblatt/vue3-radial-progress/blob/master/demo/src/assets/demo-1.png" alt="Demo">

// Your app instance here
const app = createApp(App);
app.use(RadialProgress);

@@ -35,0 +33,0 @@

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc