vue3-lottie - npm Package Compare versions

Comparing version 2.2.5 to 2.3.0

dist/vue3-lottie.es.js

@@ -272,2 +272,7 @@ import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeStyle } from "vue";
     };
+    const updateDocumentData = (documentData, index = 0) => {
+      if (lottieAnimation) {
+        lottieAnimation.renderer.elements[index].updateDocumentData(documentData);
+      }
+    };
     const makeid = (length) => {
@@ -318,3 +323,4 @@ var result = "";
       setSubFrame,
-      getDuration
+      getDuration,
+      updateDocumentData
     };
@@ -341,5 +347,5 @@ }
 const plugin = {
-  version: "2.2.5",
+  version: "2.3.0",
   install
 };
 export { Vue3Lottie, plugin as default, install };

dist/vue3-lottie.umd.js

@@ -1,1 +0,1 @@
-(function(r,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],i):(r=typeof globalThis!="undefined"?globalThis:r||self,i(r["vue3-lottie"]={},r.Vue,r.Lottie))})(this,function(r,i,h){"use strict";function p(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var g=p(h),F="",S=(t,o)=>{const e=t.__vccOpts||t;for(const[s,d]of o)e[s]=d;return e};const L=i.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,onAnimationLoaded:null},setup(t,{emit:o}){let e=i.ref(null);const s=i.ref("");let d=1;const v=n=>document.querySelector(`[data-id="${n}" ]`)!==null,f=async n=>{let a=t.autoPlay;t.playOnHover&&(a=!1);let l={};if(t.animationData!=={}&&(l=JSON.parse(JSON.stringify(t.animationData))),t.animationLink!="")try{l=await(await fetch(t.animationLink)).json()}catch(c){console.error(c);return}let u=t.loop;typeof u=="number"&&u>0&&(u=u-1),t.delay>0&&(a=!1),e=g.default.loadAnimation({container:n,renderer:"svg",loop:u,autoplay:a,animationData:l}),setTimeout(()=>{a=t.autoPlay,t.playOnHover?e.pause():a?e.play():e.pause(),o("onAnimationLoaded")},t.delay),e.setSpeed(t.speed),t.direction==="reverse"&&e.setDirection(-1),t.direction==="normal"&&e.setDirection(1),(t.pauseAnimation||t.playOnHover)&&e.pause(),e.addEventListener("loopComplete",()=>{t.direction==="alternate"&&(e.stop(),d=d*-1,e.setDirection(d),e.play()),o("onLoopComplete")}),e.addEventListener("complete",()=>{o("onComplete")}),e.addEventListener("enterFrame",()=>{o("onEnterFrame")}),e.addEventListener("segmentStart",()=>{o("onSegmentStart")})},H=i.computed(()=>{let n=t.width,a=t.height;return typeof t.width=="number"&&(n=`${t.width}px`),typeof t.height=="number"&&(a=`${t.height}px`),{"--lottie-animation-container-width":n,"--lottie-animation-container-height":a,"--lottie-animation-container-background-color":t.backgroundColor}}),A=()=>{e&&t.pauseOnHover&&e.pause(),e&&t.playOnHover&&e.play()},D=()=>{e&&t.pauseOnHover&&e.play(),e&&t.playOnHover&&e.pause()};i.watch(()=>t.pauseAnimation,()=>{if((t.pauseOnHover||t.playOnHover)&&t.pauseAnimation){console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover and playOnHover");return}e&&(t.pauseAnimation?e.pause():e.play())});const E=()=>{e&&e.play()},k=()=>{e&&e.pause()},_=()=>{e&&e.stop()},C=()=>{e&&e.destroy()},j=(n=1)=>{if(n<=0)throw new Error("Speed must be greater than 0");e&&e.setSpeed(n)},T=n=>{e&&(n==="forward"?e.setDirection(1):n==="reverse"&&e.setDirection(-1))},V=(n,a=!0)=>{e&&e.goToAndStop(n,a)},$=(n,a=!0)=>{e&&e.goToAndPlay(n,a)},B=(n,a=!1)=>{e&&e.playSegments(n,a)},M=(n=!0)=>{e&&e.setSubframe(n)},N=(n=!0)=>{if(e)return e.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(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 a=setInterval(()=>{if(v(n)){clearInterval(a);const l=document.querySelector(`[data-id="${n}" ]`);l&&f(l)}},0)};return i.onMounted(async()=>{s.value=P(20),q(s.value)}),{elementid:s,hoverEnded:D,hoverStarted:A,getCurrentStyle:H,play:E,pause:k,stop:_,destroy:C,setSpeed:j,setDirection:T,goToAndStop:V,goToAndPlay:$,playSegments:B,setSubFrame:M,getDuration:N}}}),O=["data-id"];function b(t,o,e,s,d,v){return i.openBlock(),i.createElementBlock("div",{"data-id":t.elementid,class:"lottie-animation-container",style:i.normalizeStyle(t.getCurrentStyle),onMouseenter:o[0]||(o[0]=(...f)=>t.hoverStarted&&t.hoverStarted(...f)),onMouseleave:o[1]||(o[1]=(...f)=>t.hoverEnded&&t.hoverEnded(...f))},null,44,O)}var m=S(L,[["render",b]]);function y(t,o){const e=Object.assign({},{name:"Vue3Lottie"},o);t.component(`${e.name}`,m)}const w={version:"2.2.5",install:y};r.Vue3Lottie=m,r.default=w,r.install=y,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+(function(r,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],i):(r=typeof globalThis!="undefined"?globalThis:r||self,i(r["vue3-lottie"]={},r.Vue,r.Lottie))})(this,function(r,i,p){"use strict";function h(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var g=h(p),I="",S=(t,o)=>{const e=t.__vccOpts||t;for(const[s,d]of o)e[s]=d;return e};const L=i.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,onAnimationLoaded:null},setup(t,{emit:o}){let e=i.ref(null);const s=i.ref("");let d=1;const v=n=>document.querySelector(`[data-id="${n}" ]`)!==null,f=async n=>{let a=t.autoPlay;t.playOnHover&&(a=!1);let l={};if(t.animationData!=={}&&(l=JSON.parse(JSON.stringify(t.animationData))),t.animationLink!="")try{l=await(await fetch(t.animationLink)).json()}catch(c){console.error(c);return}let u=t.loop;typeof u=="number"&&u>0&&(u=u-1),t.delay>0&&(a=!1),e=g.default.loadAnimation({container:n,renderer:"svg",loop:u,autoplay:a,animationData:l}),setTimeout(()=>{a=t.autoPlay,t.playOnHover?e.pause():a?e.play():e.pause(),o("onAnimationLoaded")},t.delay),e.setSpeed(t.speed),t.direction==="reverse"&&e.setDirection(-1),t.direction==="normal"&&e.setDirection(1),(t.pauseAnimation||t.playOnHover)&&e.pause(),e.addEventListener("loopComplete",()=>{t.direction==="alternate"&&(e.stop(),d=d*-1,e.setDirection(d),e.play()),o("onLoopComplete")}),e.addEventListener("complete",()=>{o("onComplete")}),e.addEventListener("enterFrame",()=>{o("onEnterFrame")}),e.addEventListener("segmentStart",()=>{o("onSegmentStart")})},D=i.computed(()=>{let n=t.width,a=t.height;return typeof t.width=="number"&&(n=`${t.width}px`),typeof t.height=="number"&&(a=`${t.height}px`),{"--lottie-animation-container-width":n,"--lottie-animation-container-height":a,"--lottie-animation-container-background-color":t.backgroundColor}}),H=()=>{e&&t.pauseOnHover&&e.pause(),e&&t.playOnHover&&e.play()},A=()=>{e&&t.pauseOnHover&&e.play(),e&&t.playOnHover&&e.pause()};i.watch(()=>t.pauseAnimation,()=>{if((t.pauseOnHover||t.playOnHover)&&t.pauseAnimation){console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover and playOnHover");return}e&&(t.pauseAnimation?e.pause():e.play())});const E=()=>{e&&e.play()},k=()=>{e&&e.pause()},_=()=>{e&&e.stop()},C=()=>{e&&e.destroy()},j=(n=1)=>{if(n<=0)throw new Error("Speed must be greater than 0");e&&e.setSpeed(n)},T=n=>{e&&(n==="forward"?e.setDirection(1):n==="reverse"&&e.setDirection(-1))},V=(n,a=!0)=>{e&&e.goToAndStop(n,a)},$=(n,a=!0)=>{e&&e.goToAndPlay(n,a)},B=(n,a=!1)=>{e&&e.playSegments(n,a)},M=(n=!0)=>{e&&e.setSubframe(n)},N=(n=!0)=>{if(e)return e.getDuration(n)},P=(n,a=0)=>{e&&e.renderer.elements[a].updateDocumentData(n)},q=n=>{for(var a="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<n;c++)a+=l.charAt(Math.floor(Math.random()*u));return a},F=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 a=setInterval(()=>{if(v(n)){clearInterval(a);const l=document.querySelector(`[data-id="${n}" ]`);l&&f(l)}},0)};return i.onMounted(async()=>{s.value=q(20),F(s.value)}),{elementid:s,hoverEnded:A,hoverStarted:H,getCurrentStyle:D,play:E,pause:k,stop:_,destroy:C,setSpeed:j,setDirection:T,goToAndStop:V,goToAndPlay:$,playSegments:B,setSubFrame:M,getDuration:N,updateDocumentData:P}}}),O=["data-id"];function b(t,o,e,s,d,v){return i.openBlock(),i.createElementBlock("div",{"data-id":t.elementid,class:"lottie-animation-container",style:i.normalizeStyle(t.getCurrentStyle),onMouseenter:o[0]||(o[0]=(...f)=>t.hoverStarted&&t.hoverStarted(...f)),onMouseleave:o[1]||(o[1]=(...f)=>t.hoverEnded&&t.hoverEnded(...f))},null,44,O)}var m=S(L,[["render",b]]);function y(t,o){const e=Object.assign({},{name:"Vue3Lottie"},o);t.component(`${e.name}`,m)}const w={version:"2.3.0",install:y};r.Vue3Lottie=m,r.default=w,r.install=y,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/vue3-lottie.vue.d.ts

@@ -87,2 +87,3 @@ import { PropType } from 'vue';
     getDuration: (inFrames?: Boolean) => any;
+    updateDocumentData: (documentData: any, index?: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -89,0 +90,0 @@ onComplete: any;

package.json

 {
   "name": "vue3-lottie",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "license": "MIT",
   "author": "Sanjay Soundarajan <[e-mail]> (https://sanjaysoundarajan.dev)",
+  "scripts": {
+    "dev": "vue-cli-service serve dev/serve.ts",
+    "build": "vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s ./src -o ./dist",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint \"{packages,playground}/**/*.{ts,tsx,vue,js,jsx,html}\"",
+    "prettier": "npx prettier --write ."
+  },
   "dependencies": {
@@ -35,9 +42,9 @@ "lottie-web": "^5.8.1"
   "devDependencies": {
-    "@babel/types": "7.18.4",
+    "@babel/types": "7.18.10",
     "@types/node": "17.0.19",
-    "@vitejs/plugin-vue": "2.3.3",
-    "typescript": "4.7.3",
-    "vite": "2.9.9",
-    "vue": "3.2.36",
-    "vue-tsc": "0.35.2",
+    "@vitejs/plugin-vue": "2.3.4",
+    "typescript": "4.7.4",
+    "vite": "2.9.15",
+    "vue": "3.2.37",
+    "vue-tsc": "0.40.1",
     "vue-typegen": "0.2.0"
@@ -56,9 +63,3 @@ },
     "lottie"
-  ],
-  "scripts": {
-    "dev": "vue-cli-service serve dev/serve.ts",
-    "build": "vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s ./src -o ./dist",
-    "lint": "eslint \"{packages,playground}/**/*.{ts,tsx,vue,js,jsx,html}\"",
-    "prettier": "npx prettier --write ."
-  }
+  ]
 }

README.md

@@ -203,2 +203,4 @@ # Vue 3 Lottie
   - You can call this method to set the subframe value.
+- updateDocumentData(documentData, index)
+  - This method updates text on text layers. Refer to the [official docs](https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData) for how to use this method.
 
@@ -205,0 +207,0 @@ # Credits

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

30840

increased by2.31%

Lines of code

547

increased by1.3%

Number of lines in readme file

213

increased by0.95%

No dependency changes