vue3-lottie - npm Package Compare versions

Comparing version 2.0.1-beta to 2.0.1

dist/vue3-lottie.es.js

@@ -259,5 +259,5 @@ import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeStyle } from "vue";
 const plugin = {
-  version: "2.0.1-beta",
+  version: "2.0.1",
   install
 };
 export { Vue3Lottie, plugin as default, install };

dist/vue3-lottie.umd.js

@@ -1,1 +0,1 @@
-(function(i,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],n):(i=typeof globalThis!="undefined"?globalThis:i||self,n(i["vue3-lottie"]={},i.Vue,i.Lottie))})(this,function(i,n,h){"use strict";function g(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var p=g(h),A="",O=(e,a)=>{const t=e.__vccOpts||e;for(const[d,f]of a)t[d]=f;return t};const L=n.defineComponent({props:{animationData:{type:Object,default:()=>({})},animationLink:{type:String,default:""},loop:{type:[Boolean,Number],default:!0},autoPlay:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},speed:{type:Number,default:1},delay:{type:Number,default:0},direction:{type:String,default:"forward"},pauseOnHover:{type:Boolean,default:!1},playOnHover:{type:Boolean,default:!1},backgroundColor:{type:String,default:"transparent"},pauseAnimation:{type:Boolean,default:!1}},emits:{onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null},setup(e,{emit:a}){let t=n.ref(null);const d=n.ref("");let f=1;const v=r=>document.querySelector(`[data-id="${r}" ]`)!==null,s=async r=>{let o=e.autoPlay;e.playOnHover&&(o=!1);let l={};if(e.animationData!=={}&&(l=JSON.parse(JSON.stringify(e.animationData))),e.animationLink!="")try{l=await(await fetch(e.animationLink)).json()}catch(c){console.error(c);return}let u=e.loop;typeof u=="number"&&u>0&&(u=u-1),e.delay>0&&(o=!1),t=p.default.loadAnimation({container:r,renderer:"svg",loop:u,autoplay:o,animationData:l}),setTimeout(()=>{o=e.autoPlay,e.playOnHover?t.pause():t.play()},e.delay),t.setSpeed(e.speed),e.direction==="reverse"&&t.setDirection(-1),e.direction==="normal"&&t.setDirection(1),(e.pauseAnimation||e.playOnHover)&&t.pause(),t.addEventListener("loopComplete",()=>{e.direction==="alternate"&&(t.stop(),f=f*-1,t.setDirection(f),t.play()),a("onLoopComplete")}),t.addEventListener("complete",()=>{a("onComplete")}),t.addEventListener("enterFrame",()=>{a("onEnterFrame")}),t.addEventListener("segmentStart",()=>{a("onSegmentStart")})},w=n.computed(()=>{let r=e.width,o=e.height;return typeof e.width=="number"&&(r=`${e.width}px`),typeof e.height=="number"&&(o=`${e.height}px`),{"--lottie-animation-container-width":r,"--lottie-animation-container-height":o,"--lottie-animation-container-background-color":e.backgroundColor}}),k=()=>{t&&e.pauseOnHover&&t.pause(),t&&e.playOnHover&&t.play()},E=()=>{t&&e.pauseOnHover&&t.play(),t&&e.playOnHover&&t.pause()};n.watch(e,()=>{(e.pauseOnHover||e.playOnHover)&&!e.pauseAnimation&&console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover or playOnHover"),!e.pauseOnHover&&!e.playOnHover&&(e.pauseAnimation&&t?t.pause():t&&!e.pauseAnimation&&t.play())});const _=r=>{for(var o="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<r;c++)o+=l.charAt(Math.floor(Math.random()*u));return o},C=r=>{if(e.pauseOnHover&&e.playOnHover)throw new Error("You cannot set pauseOnHover and playOnHover for Vue3-Lottie at the same time.");if(e.animationLink===""&&e.animationData==={})throw new Error("You must provide either animationLink or animationData");const o=setInterval(()=>{if(v(r)){clearInterval(o);const l=document.querySelector(`[data-id="${r}" ]`);l&&s(l)}},0)};return n.onMounted(async()=>{d.value=_(20),C(d.value)}),{elementid:d,hoverEnded:E,hoverStarted:k,getCurrentStyle:w}}}),S=["data-id"];function b(e,a,t,d,f,v){return n.openBlock(),n.createElementBlock("div",{"data-id":e.elementid,class:"lottie-animation-container",style:n.normalizeStyle(e.getCurrentStyle),onMouseenter:a[0]||(a[0]=(...s)=>e.hoverStarted&&e.hoverStarted(...s)),onMouseleave:a[1]||(a[1]=(...s)=>e.hoverEnded&&e.hoverEnded(...s))},null,44,S)}var m=O(L,[["render",b]]);function y(e,a){const t=Object.assign({},{name:"Vue3Lottie"},a);e.component(`${t.name}`,m)}const H={version:"2.0.1-beta",install:y};i.Vue3Lottie=m,i.default=H,i.install=y,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+(function(i,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],n):(i=typeof globalThis!="undefined"?globalThis:i||self,n(i["vue3-lottie"]={},i.Vue,i.Lottie))})(this,function(i,n,h){"use strict";function g(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var p=g(h),A="",O=(e,a)=>{const t=e.__vccOpts||e;for(const[d,f]of a)t[d]=f;return t};const L=n.defineComponent({props:{animationData:{type:Object,default:()=>({})},animationLink:{type:String,default:""},loop:{type:[Boolean,Number],default:!0},autoPlay:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},speed:{type:Number,default:1},delay:{type:Number,default:0},direction:{type:String,default:"forward"},pauseOnHover:{type:Boolean,default:!1},playOnHover:{type:Boolean,default:!1},backgroundColor:{type:String,default:"transparent"},pauseAnimation:{type:Boolean,default:!1}},emits:{onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null},setup(e,{emit:a}){let t=n.ref(null);const d=n.ref("");let f=1;const v=r=>document.querySelector(`[data-id="${r}" ]`)!==null,s=async r=>{let o=e.autoPlay;e.playOnHover&&(o=!1);let l={};if(e.animationData!=={}&&(l=JSON.parse(JSON.stringify(e.animationData))),e.animationLink!="")try{l=await(await fetch(e.animationLink)).json()}catch(c){console.error(c);return}let u=e.loop;typeof u=="number"&&u>0&&(u=u-1),e.delay>0&&(o=!1),t=p.default.loadAnimation({container:r,renderer:"svg",loop:u,autoplay:o,animationData:l}),setTimeout(()=>{o=e.autoPlay,e.playOnHover?t.pause():t.play()},e.delay),t.setSpeed(e.speed),e.direction==="reverse"&&t.setDirection(-1),e.direction==="normal"&&t.setDirection(1),(e.pauseAnimation||e.playOnHover)&&t.pause(),t.addEventListener("loopComplete",()=>{e.direction==="alternate"&&(t.stop(),f=f*-1,t.setDirection(f),t.play()),a("onLoopComplete")}),t.addEventListener("complete",()=>{a("onComplete")}),t.addEventListener("enterFrame",()=>{a("onEnterFrame")}),t.addEventListener("segmentStart",()=>{a("onSegmentStart")})},w=n.computed(()=>{let r=e.width,o=e.height;return typeof e.width=="number"&&(r=`${e.width}px`),typeof e.height=="number"&&(o=`${e.height}px`),{"--lottie-animation-container-width":r,"--lottie-animation-container-height":o,"--lottie-animation-container-background-color":e.backgroundColor}}),k=()=>{t&&e.pauseOnHover&&t.pause(),t&&e.playOnHover&&t.play()},E=()=>{t&&e.pauseOnHover&&t.play(),t&&e.playOnHover&&t.pause()};n.watch(e,()=>{(e.pauseOnHover||e.playOnHover)&&!e.pauseAnimation&&console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover or playOnHover"),!e.pauseOnHover&&!e.playOnHover&&(e.pauseAnimation&&t?t.pause():t&&!e.pauseAnimation&&t.play())});const _=r=>{for(var o="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<r;c++)o+=l.charAt(Math.floor(Math.random()*u));return o},C=r=>{if(e.pauseOnHover&&e.playOnHover)throw new Error("You cannot set pauseOnHover and playOnHover for Vue3-Lottie at the same time.");if(e.animationLink===""&&e.animationData==={})throw new Error("You must provide either animationLink or animationData");const o=setInterval(()=>{if(v(r)){clearInterval(o);const l=document.querySelector(`[data-id="${r}" ]`);l&&s(l)}},0)};return n.onMounted(async()=>{d.value=_(20),C(d.value)}),{elementid:d,hoverEnded:E,hoverStarted:k,getCurrentStyle:w}}}),S=["data-id"];function b(e,a,t,d,f,v){return n.openBlock(),n.createElementBlock("div",{"data-id":e.elementid,class:"lottie-animation-container",style:n.normalizeStyle(e.getCurrentStyle),onMouseenter:a[0]||(a[0]=(...s)=>e.hoverStarted&&e.hoverStarted(...s)),onMouseleave:a[1]||(a[1]=(...s)=>e.hoverEnded&&e.hoverEnded(...s))},null,44,S)}var m=O(L,[["render",b]]);function y(e,a){const t=Object.assign({},{name:"Vue3Lottie"},a);e.component(`${t.name}`,m)}const H={version:"2.0.1",install:y};i.Vue3Lottie=m,i.default=H,i.install=y,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package.json

 {
   "name": "vue3-lottie",
-  "version": "2.0.1-beta",
+  "version": "2.0.1",
   "license": "MIT",
-  "author": "",
+  "author": "Sanjay Soundarajan <[e-mail]> (https://sanjaysoundarajan.dev)",
   "scripts": {
@@ -7,0 +7,0 @@ "dev": "vue-cli-service serve dev/serve.ts",

README.md

@@ -16,3 +16,3 @@ # Vue 3 Lottie
 ```shell
-npm install vue3-lottie
+npm install vue3-lottie@latest --save
 ```
@@ -23,3 +23,3 @@
 ```shell
-yarn add vue3-lottie
+yarn add vue3-lottie@latest
 ```
@@ -35,2 +35,3 @@
 import Vue3Lottie from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
 
@@ -43,3 +44,4 @@ createApp(App).use(Vue3Lottie).mount('#app')
 ```js
-import Vue3Lottie from 'vue3-lottie'
+import { Vue3Lottie } from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
 
@@ -61,3 +63,5 @@ export default {
 <script>
-import Vue3Lottie from 'vue3-lottie'
+import { Vue3Lottie } from 'vue3-lottie'
+import 'vue3-lottie/dist/style.css'
+
 import DogJSON from './lotties/dog.json'
@@ -139,2 +143,6 @@
 
+# Credits
+
+A big thank you goes to [@reslear](https://github.com/reslear) for adding Typescript support to this library. Go check out his profile and give him a follow!
+
 ![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg) ![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24677

increased by1.56%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

143

increased by5.93%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes