vue3-lottie - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

dist/vue3-lottie.es.js

@@ -203,2 +203,64 @@ import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeStyle } from "vue";
     });
+    const play = () => {
+      if (lottieAnimation) {
+        lottieAnimation.play();
+      }
+    };
+    const pause = () => {
+      if (lottieAnimation) {
+        lottieAnimation.pause();
+      }
+    };
+    const stop = () => {
+      if (lottieAnimation) {
+        lottieAnimation.stop();
+      }
+    };
+    const destroy = () => {
+      if (lottieAnimation) {
+        lottieAnimation.destroy();
+      }
+    };
+    const setSpeed = (speed = 1) => {
+      if (speed <= 0) {
+        throw new Error("Speed must be greater than 0");
+      }
+      if (lottieAnimation) {
+        lottieAnimation.setSpeed(speed);
+      }
+    };
+    const setDirection = (direction2) => {
+      if (lottieAnimation) {
+        if (direction2 === "forward") {
+          lottieAnimation.setDirection(1);
+        } else if (direction2 === "reverse") {
+          lottieAnimation.setDirection(-1);
+        }
+      }
+    };
+    const goToAndStop = (frame, isFrame = true) => {
+      if (lottieAnimation) {
+        lottieAnimation.goToAndStop(frame, isFrame);
+      }
+    };
+    const goToAndPlay = (frame, isFrame = true) => {
+      if (lottieAnimation) {
+        lottieAnimation.goToAndPlay(frame, isFrame);
+      }
+    };
+    const playSegments = (segments, forceFlag = false) => {
+      if (lottieAnimation) {
+        lottieAnimation.playSegments(segments, forceFlag);
+      }
+    };
+    const setSubFrame = (useSubFrame = true) => {
+      if (lottieAnimation) {
+        lottieAnimation.setSubframe(useSubFrame);
+      }
+    };
+    const getDuration = (inFrames = true) => {
+      if (lottieAnimation) {
+        return lottieAnimation.getDuration(inFrames);
+      }
+    };
     const makeid = (length) => {
@@ -238,3 +300,14 @@ var result = "";
       hoverStarted,
-      getCurrentStyle
+      getCurrentStyle,
+      play,
+      pause,
+      stop,
+      destroy,
+      setSpeed,
+      setDirection,
+      goToAndStop,
+      goToAndPlay,
+      playSegments,
+      setSubFrame,
+      getDuration
     };
@@ -261,5 +334,5 @@ }
 const plugin = {
-  version: "2.0.2",
+  version: "2.1.0",
   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.2",install:y};i.Vue3Lottie=m,i.default=H,i.install=y,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
+(function(r,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],o):(r=typeof globalThis!="undefined"?globalThis:r||self,o(r["vue3-lottie"]={},r.Vue,r.Lottie))})(this,function(r,o,h){"use strict";function g(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var p=g(h),F="",S=(e,i)=>{const t=e.__vccOpts||e;for(const[s,f]of i)t[s]=f;return t};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}},emits:{onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null},setup(e,{emit:i}){let t=o.ref(null);const s=o.ref("");let f=1;const v=n=>document.querySelector(`[data-id="${n}" ]`)!==null,d=async n=>{let a=e.autoPlay;e.playOnHover&&(a=!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&&(a=!1),t=p.default.loadAnimation({container:n,renderer:"svg",loop:u,autoplay:a,animationData:l}),setTimeout(()=>{a=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()),i("onLoopComplete")}),t.addEventListener("complete",()=>{i("onComplete")}),t.addEventListener("enterFrame",()=>{i("onEnterFrame")}),t.addEventListener("segmentStart",()=>{i("onSegmentStart")})},H=o.computed(()=>{let n=e.width,a=e.height;return typeof e.width=="number"&&(n=`${e.width}px`),typeof e.height=="number"&&(a=`${e.height}px`),{"--lottie-animation-container-width":n,"--lottie-animation-container-height":a,"--lottie-animation-container-background-color":e.backgroundColor}}),D=()=>{t&&e.pauseOnHover&&t.pause(),t&&e.playOnHover&&t.play()},E=()=>{t&&e.pauseOnHover&&t.play(),t&&e.playOnHover&&t.pause()};o.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 k=()=>{t&&t.play()},A=()=>{t&&t.pause()},_=()=>{t&&t.stop()},C=()=>{t&&t.destroy()},j=(n=1)=>{if(n<=0)throw new Error("Speed must be greater than 0");t&&t.setSpeed(n)},T=n=>{t&&(n==="forward"?t.setDirection(1):n==="reverse"&&t.setDirection(-1))},V=(n,a=!0)=>{t&&t.goToAndStop(n,a)},$=(n,a=!0)=>{t&&t.goToAndPlay(n,a)},B=(n,a=!1)=>{t&&t.playSegments(n,a)},M=(n=!0)=>{t&&t.setSubframe(n)},N=(n=!0)=>{if(t)return t.getDuration(n)},P=n=>{for(var a="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<n;c++)a+=l.charAt(Math.floor(Math.random()*u));return a},q=n=>{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 a=setInterval(()=>{if(v(n)){clearInterval(a);const l=document.querySelector(`[data-id="${n}" ]`);l&&d(l)}},0)};return o.onMounted(async()=>{s.value=P(20),q(s.value)}),{elementid:s,hoverEnded:E,hoverStarted:D,getCurrentStyle:H,play:k,pause:A,stop:_,destroy:C,setSpeed:j,setDirection:T,goToAndStop:V,goToAndPlay:$,playSegments:B,setSubFrame:M,getDuration:N}}}),L=["data-id"];function b(e,i,t,s,f,v){return o.openBlock(),o.createElementBlock("div",{"data-id":e.elementid,class:"lottie-animation-container",style:o.normalizeStyle(e.getCurrentStyle),onMouseenter:i[0]||(i[0]=(...d)=>e.hoverStarted&&e.hoverStarted(...d)),onMouseleave:i[1]||(i[1]=(...d)=>e.hoverEnded&&e.hoverEnded(...d))},null,44,L)}var m=S(O,[["render",b]]);function y(e,i){const t=Object.assign({},{name:"Vue3Lottie"},i);e.component(`${t.name}`,m)}const w={version:"2.1.0",install:y};r.Vue3Lottie=m,r.default=w,r.install=y,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

dist/vue3-lottie.vue.d.ts

@@ -76,2 +76,13 @@ import { PropType } from 'vue';
     getCurrentStyle: any;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    destroy: () => void;
+    setSpeed: (speed?: number) => void;
+    setDirection: (direction: 'forward' | 'reverse') => void;
+    goToAndStop: (frame: number, isFrame?: Boolean) => void;
+    goToAndPlay: (frame: number, isFrame?: Boolean) => void;
+    playSegments: (segments: Array<number>, forceFlag?: Boolean) => void;
+    setSubFrame: (useSubFrame?: Boolean) => void;
+    getDuration: (inFrames?: Boolean) => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -78,0 +89,0 @@ onComplete: any;

package.json

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

README.md

@@ -83,3 +83,3 @@ # Vue 3 Lottie
 
-More detailed explanations are provided in the documentation.
+More detailed explanations are provided in the [documentation](https://vue3-lottie.vercel.app/guide.html).
 
@@ -86,0 +86,0 @@ | Prop             | Type              | Default Value | Description                                                                              |

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

Improved metrics

Total package byte prevSize

27948

increased by11.71%

Lines of code

530

increased by19.37%

No dependency changes