vue3-lottie - npm Package Compare versions

Comparing version 3.0.1-beta to 3.0.2-beta

dist/vue3-lottie.es.js

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

dist/vue3-lottie.umd.js

@@ -1,1 +0,1 @@
-(function(u,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue"),require("@lottiefiles/lottie-player")):typeof define=="function"&&define.amd?define(["exports","vue","@lottiefiles/lottie-player"],o):(u=typeof globalThis!="undefined"?globalThis:u||self,o(u["vue3-lottie"]={},u.Vue,u.LottiePlayer))})(this,function(u,o,m){"use strict";function h(t){if(t&&t.__esModule)return t;var a={__proto__:null,[Symbol.toStringTag]:"Module"};return t&&Object.keys(t).forEach(function(e){if(e!=="default"){var r=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(a,e,r.get?r:{enumerable:!0,get:function(){return t[e]}})}}),a.default=t,Object.freeze(a)}var L=h(m),A="",g=(t,a)=>{const e=t.__vccOpts||t;for(const[r,l]of a)e[r]=l;return e};const O=o.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},showControls:{type:Boolean,default:!1}},emits:{onLoad:null,onReady:null,onError:null,onPlay:null,onPause:null,onStop:null,onLoopComplete:null,onComplete:null,onEnterFrame:null},setup(t,{emit:a}){let e=o.ref(null);const r=o.ref("");let l=o.ref(1),v=o.ref(0);const f=n=>document.querySelector(`[data-id="${n}" ]`)!==null,P=async()=>{let n=t.animationData;if(t.animationLink!="")try{n=await(await fetch(t.animationLink)).json()}catch(i){console.error(i);return}e.value.load(n),t.autoPlay||(e.value.seek(0),e.value.pause()),t.playOnHover&&(e.value.seek(0),e.value.pause()),t.delay>0&&(e.value.seek(0),e.value.pause()),setTimeout(()=>{t.direction==="reverse"&&(e.value.seek(d()-1),e.value.setDirection(-1),l.value=-1),t.direction==="normal"&&(e.value.setDirection(1),l.value=1),t.autoPlay&&(t.playOnHover?(e.value.seek(0),e.value.pause()):e.value.play())},t.delay),e.value.setSpeed(t.speed),(t.pauseAnimation||t.playOnHover)&&e.value.pause(),e.value.addEventListener("load",()=>{a("onLoad")}),e.value.addEventListener("error",()=>{a("onError")}),e.value.addEventListener("ready",()=>{a("onReady")}),e.value.addEventListener("play",()=>{t.loop===!0||typeof t.loop=="number"||a("onPlay")}),e.value.addEventListener("pause",()=>{t.loop===!0||typeof t.loop=="number"||a("onPause")}),e.value.addEventListener("stop",()=>{typeof t.loop=="number"||a("onStop")}),e.value.addEventListener("complete",()=>{t.direction==="alternate"?(e.value.pause(),l.value=l.value*-1,e.value.setDirection(l.value),e.value.play(),typeof t.loop=="number"&&(v.value++,v.value<t.loop?a("onLoopComplete"):(v.value=0,e.value.pause(),a("onLoopComplete"),a("onComplete")))):t.loop===!0?(l.value==-1?e.value.seek(d()-1):e.value.stop(),a("onLoopComplete"),t.autoPlay?e.value.play():(e.value.seek(0),e.value.pause())):typeof t.loop=="number"?(v.value++,v.value<t.loop?(e.value.stop(),a("onLoopComplete"),e.value.play()):(v.value=0,e.value.pause(),a("onComplete"))):(e.value.pause(),a("onComplete"))}),e.value.addEventListener("frame",()=>{a("onEnterFrame")})},w=o.computed(()=>{let n=t.width,i=t.height;return typeof t.width=="number"&&(n=`${t.width}px`),typeof t.height=="number"&&(i=`${t.height}px`),{"--lottie-animation-container-width":n,"--lottie-animation-container-height":i,"--lottie-animation-container-background-color":t.backgroundColor}}),H=()=>{e.value&&t.pauseOnHover&&(e.value.pause(),a("onPause")),e.value&&t.playOnHover&&(e.value.play(),a("onPlay"))},_=()=>{e.value&&t.pauseOnHover&&(e.value.play(),a("onPlay")),e.value&&t.playOnHover&&(e.value.pause(),a("onPause"))};o.watch(t,()=>{(t.pauseOnHover||t.playOnHover)&&t.pauseAnimation&&console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover or playOnHover"),!t.pauseOnHover&&!t.playOnHover&&(e.value&&t.pauseAnimation?(e.value.pause(),a("onPause")):e.value&&!t.pauseAnimation&&(e.value.play(),a("onPlay")))});const k=()=>{e.value&&(e.value.play(),a("onPlay"))},C=()=>{e.value&&(e.value.pause(),a("onPause"))},D=()=>{e.value&&(e.value.stop(),a("onStop"))},j=(n=1)=>{if(n<=0)throw new Error("Speed must be greater than 0");e.value&&e.value.setSpeed(n)},M=n=>{e.value&&(n==="forward"?(e.value.setDirection(1),l.value=1):n==="reverse"&&(e.value.setDirection(-1),l.value=-1))},d=()=>{if(e.value)return e.value.getLottie().totalFrames},V=n=>{for(var i="",s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",B=s.length,p=0;p<n;p++)i+=s.charAt(Math.floor(Math.random()*B));return i},$=n=>{if(t.pauseOnHover&&t.playOnHover)throw new Error("You cannot set pauseOnHover and playOnHover for Vue3-Lottie at the same time.");if(t.animationLink===""&&t.animationData==={})throw new Error("You must provide either animationLink or animationData");const i=setInterval(()=>{f(n)&&(clearInterval(i),document.querySelector(`[data-id="${n}" ]`)&&P())},0)};return o.onMounted(async()=>{r.value=V(20),$(r.value)}),{elementid:r,hoverEnded:_,hoverStarted:H,getCurrentStyle:w,LottiePlayer:L,lottie_player:e,direction:l,loopCounter:v,getDuration:d,setDirection:M,setSpeed:j,stop:D,pause:C,play:k}}}),b=["data-id","controls"];function S(t,a,e,r,l,v){return o.openBlock(),o.createElementBlock("div",null,[o.createElementVNode("lottie-player",{"data-id":t.elementid,ref:"lottie_player",controls:t.$props.showControls,style:o.normalizeStyle(t.getCurrentStyle),class:"lottie-animation-container",onMouseenter:a[0]||(a[0]=(...f)=>t.hoverStarted&&t.hoverStarted(...f)),onMouseleave:a[1]||(a[1]=(...f)=>t.hoverEnded&&t.hoverEnded(...f))},null,44,b)])}var y=g(O,[["render",S]]);function c(t,a){const e=Object.assign({},{name:"Vue3Lottie"},a);t.component(`${e.name}`,y)}const E={version:"3.0.1-beta",install:c};u.Vue3Lottie=y,u.default=E,u.install=c,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
+(function(u,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue"),require("@lottiefiles/lottie-player")):typeof define=="function"&&define.amd?define(["exports","vue","@lottiefiles/lottie-player"],o):(u=typeof globalThis!="undefined"?globalThis:u||self,o(u["vue3-lottie"]={},u.Vue,u.LottiePlayer))})(this,function(u,o,m){"use strict";function h(t){if(t&&t.__esModule)return t;var a={__proto__:null,[Symbol.toStringTag]:"Module"};return t&&Object.keys(t).forEach(function(e){if(e!=="default"){var r=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(a,e,r.get?r:{enumerable:!0,get:function(){return t[e]}})}}),a.default=t,Object.freeze(a)}var L=h(m),A="",g=(t,a)=>{const e=t.__vccOpts||t;for(const[r,l]of a)e[r]=l;return e};const O=o.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},showControls:{type:Boolean,default:!1}},emits:{onLoad:null,onReady:null,onError:null,onPlay:null,onPause:null,onStop:null,onLoopComplete:null,onComplete:null,onEnterFrame:null},setup(t,{emit:a}){let e=o.ref(null);const r=o.ref("");let l=o.ref(1),v=o.ref(0);const f=n=>document.querySelector(`[data-id="${n}" ]`)!==null,P=async()=>{let n=t.animationData;if(t.animationLink!="")try{n=await(await fetch(t.animationLink)).json()}catch(i){console.error(i);return}e.value.load(n),t.autoPlay||(e.value.seek(0),e.value.pause()),t.playOnHover&&(e.value.seek(0),e.value.pause()),t.delay>0&&(e.value.seek(0),e.value.pause()),setTimeout(()=>{t.direction==="reverse"&&(e.value.seek(d()-1),e.value.setDirection(-1),l.value=-1),t.direction==="normal"&&(e.value.setDirection(1),l.value=1),t.autoPlay&&(t.playOnHover?(e.value.seek(0),e.value.pause()):e.value.play())},t.delay),e.value.setSpeed(t.speed),(t.pauseAnimation||t.playOnHover)&&e.value.pause(),e.value.addEventListener("load",()=>{a("onLoad")}),e.value.addEventListener("error",()=>{a("onError")}),e.value.addEventListener("ready",()=>{a("onReady")}),e.value.addEventListener("play",()=>{t.loop===!0||typeof t.loop=="number"||a("onPlay")}),e.value.addEventListener("pause",()=>{t.loop===!0||typeof t.loop=="number"||a("onPause")}),e.value.addEventListener("stop",()=>{typeof t.loop=="number"||a("onStop")}),e.value.addEventListener("complete",()=>{t.direction==="alternate"?(e.value.pause(),l.value=l.value*-1,e.value.setDirection(l.value),e.value.play(),typeof t.loop=="number"&&(v.value++,v.value<t.loop?a("onLoopComplete"):(v.value=0,e.value.pause(),a("onLoopComplete"),a("onComplete")))):t.loop===!0?(l.value==-1?e.value.seek(d()-1):e.value.stop(),a("onLoopComplete"),t.autoPlay?e.value.play():(e.value.seek(0),e.value.pause())):typeof t.loop=="number"?(v.value++,v.value<t.loop?(e.value.stop(),a("onLoopComplete"),e.value.play()):(v.value=0,e.value.pause(),a("onComplete"))):(e.value.pause(),a("onComplete"))}),e.value.addEventListener("frame",()=>{a("onEnterFrame")})},w=o.computed(()=>{let n=t.width,i=t.height;return typeof t.width=="number"&&(n=`${t.width}px`),typeof t.height=="number"&&(i=`${t.height}px`),{"--lottie-animation-container-width":n,"--lottie-animation-container-height":i,"--lottie-animation-container-background-color":t.backgroundColor}}),H=()=>{e.value&&t.pauseOnHover&&(e.value.pause(),a("onPause")),e.value&&t.playOnHover&&(e.value.play(),a("onPlay"))},_=()=>{e.value&&t.pauseOnHover&&(e.value.play(),a("onPlay")),e.value&&t.playOnHover&&(e.value.pause(),a("onPause"))};o.watch(t,()=>{(t.pauseOnHover||t.playOnHover)&&t.pauseAnimation&&console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover or playOnHover"),!t.pauseOnHover&&!t.playOnHover&&(e.value&&t.pauseAnimation?(e.value.pause(),a("onPause")):e.value&&!t.pauseAnimation&&(e.value.play(),a("onPlay")))});const k=()=>{e.value&&(e.value.play(),a("onPlay"))},C=()=>{e.value&&(e.value.pause(),a("onPause"))},D=()=>{e.value&&(e.value.stop(),a("onStop"))},j=(n=1)=>{if(n<=0)throw new Error("Speed must be greater than 0");e.value&&e.value.setSpeed(n)},M=n=>{e.value&&(n==="forward"?(e.value.setDirection(1),l.value=1):n==="reverse"&&(e.value.setDirection(-1),l.value=-1))},d=()=>{if(e.value)return e.value.getLottie().totalFrames},V=n=>{for(var i="",s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",B=s.length,p=0;p<n;p++)i+=s.charAt(Math.floor(Math.random()*B));return i},$=n=>{if(t.pauseOnHover&&t.playOnHover)throw new Error("You cannot set pauseOnHover and playOnHover for Vue3-Lottie at the same time.");if(t.animationLink===""&&t.animationData==={})throw new Error("You must provide either animationLink or animationData");const i=setInterval(()=>{f(n)&&(clearInterval(i),document.querySelector(`[data-id="${n}" ]`)&&P())},0)};return o.onMounted(async()=>{r.value=V(20),$(r.value)}),{elementid:r,hoverEnded:_,hoverStarted:H,getCurrentStyle:w,LottiePlayer:L,lottie_player:e,direction:l,loopCounter:v,getDuration:d,setDirection:M,setSpeed:j,stop:D,pause:C,play:k}}}),b=["data-id","controls"];function S(t,a,e,r,l,v){return o.openBlock(),o.createElementBlock("div",null,[o.createElementVNode("lottie-player",{"data-id":t.elementid,ref:"lottie_player",controls:t.$props.showControls,style:o.normalizeStyle(t.getCurrentStyle),class:"lottie-animation-container",onMouseenter:a[0]||(a[0]=(...f)=>t.hoverStarted&&t.hoverStarted(...f)),onMouseleave:a[1]||(a[1]=(...f)=>t.hoverEnded&&t.hoverEnded(...f))},null,44,b)])}var y=g(O,[["render",S]]);function c(t,a){const e=Object.assign({},{name:"Vue3Lottie"},a);t.component(`${e.name}`,y)}const E={version:"3.0.2-beta",install:c};u.Vue3Lottie=y,u.default=E,u.install=c,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package.json

 {
   "name": "vue3-lottie",
-  "version": "3.0.1-beta",
+  "version": "3.0.2-beta",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Sanjay Soundarajan <[e-mail]> (https://sanjaysoundarajan.dev)",

README.md

@@ -9,7 +9,7 @@ # Vue 3 Lottie
 
-View the live demos here: [https://vue3-lottie.vercel.app](https://vue3-lottie.vercel.app)
+View the live demos here: [https://vue3-lottie.vercel.app/examples.html](https://vue3-lottie.vercel.app/examples.html)
 
-# Upgrade to v2.x
+# Upgrade to v3.x
 
-If you are using version 1.x or v2.x of `vue3-lottie` you should upgrade to version 3.x. You can do this by running the [Installation](#installation) command below. There are some new imports so take a look at the [new documentation](https://vue3-lottie.vercel.app/guide.html#usage).
+If you are using version 1.x or v2.x of `vue3-lottie` you should upgrade to version 3.x. You can do this by running the [Installation](#installation) command below. There are some new imports so take a look at the [new documentation](https://vue3-lottie.vercel.app/guide.html).
 
@@ -137,3 +137,3 @@ # Installation
 
-A few events are emitted from the component. Look at the [Demos](#Demos) for examples.
+A few events are emitted from the component. Look at the [Demos](https://vue3-lottie.vercel.app/examples.html#listening-to-events) for examples.
 
@@ -161,3 +161,3 @@ - onLoad
 
-You can control the animation with the following methods. These methods can be called by assigning a `ref` value to the `vue3-lottie` component. Look at the [Demos](#Demos) for examples.
+You can control the animation with the following methods. These methods can be called by assigning a `ref` value to the `vue3-lottie` component. Look at the [Demos](https://vue3-lottie.vercel.app/examples.html#custom-controls) for examples.
 
@@ -164,0 +164,0 @@ - play

No alert changes

Improved metrics

Total package byte prevSize

32976

increased by0.41%

No dependency changes