vue3-lottie - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

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",
+  version: "2.0.2",
   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",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.2",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",
+  "version": "2.0.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Sanjay Soundarajan <[e-mail]> (https://sanjaysoundarajan.dev)",

README.md

@@ -11,2 +11,6 @@ # Vue 3 Lottie
 
+# Upgrade to v2.x
+
+If you are using version 1.x of `vue3-lottie` you should upgrade to version 2.x. You can do this by running the [Installation](#installation) command below. This adds TS support for the component. There are some new imports so take a look at the [new documentation](https://vue3-lottie.vercel.app/guide.html#usage). 
+
 # Installation
@@ -13,0 +17,0 @@

No alert changes

Improved metrics

Total package byte prevSize

25018

increased by1.38%

Number of lines in readme file

147

increased by2.8%

No dependency changes