Socket
Socket
Sign inDemoInstall

vue3-lottie

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-lottie - npm Package Compare versions

Comparing version 1.5.0-beta to 1.5.1-beta

dist/index.d.ts

2

dist/vue3-lottie.es.js

@@ -265,5 +265,5 @@ import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeStyle } from "vue";

const plugin = {
version: "1.5.0-beta",
version: "1.5.1-beta",
install
};
export { Vue3Lottie, plugin as default, install };

@@ -1,1 +0,1 @@

(function(i,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],a):(i=typeof globalThis!="undefined"?globalThis:i||self,a(i["vue3-lottie"]={},i.Vue,i.Lottie))})(this,function(i,a,h){"use strict";function p(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var g=p(h),D="",O=(e,n)=>{const t=e.__vccOpts||e;for(const[d,f]of n)t[d]=f;return t};const L=a.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:n}){let t=a.ref(null);const d=a.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=g.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()),n("onLoopComplete")}),t.addEventListener("complete",()=>{n("onComplete")}),t.addEventListener("enterFrame",()=>{n("onEnterFrame")}),t.addEventListener("segmentStart",()=>{n("onSegmentStart")})},w=a.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}}),C=()=>{t&&e.pauseOnHover&&t.pause(),t&&e.playOnHover&&t.play()},k=()=>{t&&e.pauseOnHover&&t.play(),t&&e.playOnHover&&t.pause()};a.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 E=r=>{for(var o="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<r;c++)o+=l.charAt(Math.floor(Math.random()*u));return o},A=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 a.onMounted(async()=>{d.value=E(20),A(d.value)}),{elementid:d,hoverEnded:k,hoverStarted:C,getCurrentStyle:w}}}),S=["data-id"];function b(e,n,t,d,f,v){return a.openBlock(),a.createElementBlock("div",{"data-id":e.elementid,class:"lottie-animation-container",style:a.normalizeStyle(e.getCurrentStyle),onMouseenter:n[0]||(n[0]=(...s)=>e.hoverStarted&&e.hoverStarted(...s)),onMouseleave:n[1]||(n[1]=(...s)=>e.hoverEnded&&e.hoverEnded(...s))},null,44,S)}var m=O(L,[["render",b],["__scopeId","data-v-eaf20924"]]);function H(e,n=""){e.component(`${n}Lottie`,m)}function y(e,n){const t=Object.assign({},{installComponents:!0,componentsPrefix:""},n);t.installComponents&&H(e,t.componentsPrefix)}const _={version:"1.5.0-beta",install:y};i.Vue3Lottie=m,i.default=_,i.install=y,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
(function(i,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("vue"),require("lottie-web")):typeof define=="function"&&define.amd?define(["exports","vue","lottie-web"],a):(i=typeof globalThis!="undefined"?globalThis:i||self,a(i["vue3-lottie"]={},i.Vue,i.Lottie))})(this,function(i,a,h){"use strict";function p(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var g=p(h),D="",O=(e,n)=>{const t=e.__vccOpts||e;for(const[d,f]of n)t[d]=f;return t};const L=a.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:n}){let t=a.ref(null);const d=a.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=g.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()),n("onLoopComplete")}),t.addEventListener("complete",()=>{n("onComplete")}),t.addEventListener("enterFrame",()=>{n("onEnterFrame")}),t.addEventListener("segmentStart",()=>{n("onSegmentStart")})},w=a.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}}),C=()=>{t&&e.pauseOnHover&&t.pause(),t&&e.playOnHover&&t.play()},k=()=>{t&&e.pauseOnHover&&t.play(),t&&e.playOnHover&&t.pause()};a.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 E=r=>{for(var o="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",u=l.length,c=0;c<r;c++)o+=l.charAt(Math.floor(Math.random()*u));return o},A=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 a.onMounted(async()=>{d.value=E(20),A(d.value)}),{elementid:d,hoverEnded:k,hoverStarted:C,getCurrentStyle:w}}}),S=["data-id"];function b(e,n,t,d,f,v){return a.openBlock(),a.createElementBlock("div",{"data-id":e.elementid,class:"lottie-animation-container",style:a.normalizeStyle(e.getCurrentStyle),onMouseenter:n[0]||(n[0]=(...s)=>e.hoverStarted&&e.hoverStarted(...s)),onMouseleave:n[1]||(n[1]=(...s)=>e.hoverEnded&&e.hoverEnded(...s))},null,44,S)}var m=O(L,[["render",b],["__scopeId","data-v-eaf20924"]]);function H(e,n=""){e.component(`${n}Lottie`,m)}function y(e,n){const t=Object.assign({},{installComponents:!0,componentsPrefix:""},n);t.installComponents&&H(e,t.componentsPrefix)}const _={version:"1.5.1-beta",install:y};i.Vue3Lottie=m,i.default=_,i.install=y,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
{
"name": "vue3-lottie",
"version": "1.5.0-beta",
"version": "1.5.1-beta",
"license": "MIT",

@@ -8,4 +8,3 @@ "author": "Sanjay Soundarajan <info@sanjaysoundarajan.dev> (https://sanjaysoundarajan.dev)",

"dev": "vue-cli-service serve dev/serve.ts",
"build:vite": "vite build",
"build": "vite build && vue-typegen gen -s src -o dist",
"build": "vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s ./src -o ./dist",
"prepublishOnly": "npm run build",

@@ -19,3 +18,4 @@ "lint": "eslint \"{packages,playground}/**/*.{ts,tsx,vue,js,jsx,html}\"",

"peerDependencies": {
"vue": "^3.2"
"vue": "^3.2",
"lottie-web": "^5.8.1"
},

@@ -22,0 +22,0 @@ "files": [

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc