Socket
Socket
Sign inDemoInstall

vue3-lottie

Package Overview
Dependencies
23
Maintainers
1
Versions
61
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.2-beta to 3.1.0-beta.0

dist/src/index.d.ts
dist/src/types.d.ts
dist/src/vue3-lottie.d.ts
dist/vue3-lottie.cjs.js
LICENSE

14

dist/index.d.ts

@@ -1,11 +0,3 @@

import { App } from 'vue';
import Vue3Lottie from './vue3-lottie.vue';
export { Vue3Lottie };
export declare function install(app: App, options: {
name: string;
}): void;
declare const plugin: {
version: string;
install: typeof install;
};
export default plugin;
export * from './src/index'
import vue3lottie from './src/index'
export default vue3lottie

1420

dist/vue3-lottie.es.js

@@ -1,3 +0,1044 @@

import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle } from "vue";
import * as LottiePlayer from "@lottiefiles/lottie-player";
(function(){"use strict";try{if(typeof document!="undefined"){var t=document.createElement("style");t.appendChild(document.createTextNode(".lottie-animation-container{width:var(--lottie-animation-container-width);height:var(--lottie-animation-container-height);background-color:var(--lottie-animation-container-background-color);overflow:hidden;margin:var(--lottie-animation-margin)}.lottie-animation-container svg{transform:scale(var(--lottie-animation-scale))}")),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, normalizeStyle } from "vue";
import Lottie from "lottie-web";
var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
var freeGlobal$1 = freeGlobal;
var freeSelf = typeof self == "object" && self && self.Object === Object && self;
var root = freeGlobal$1 || freeSelf || Function("return this")();
var root$1 = root;
var Symbol$1 = root$1.Symbol;
var Symbol$2 = Symbol$1;
var objectProto$e = Object.prototype;
var hasOwnProperty$b = objectProto$e.hasOwnProperty;
var nativeObjectToString$1 = objectProto$e.toString;
var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
function getRawTag(value) {
var isOwn = hasOwnProperty$b.call(value, symToStringTag$1), tag = value[symToStringTag$1];
try {
value[symToStringTag$1] = void 0;
var unmasked = true;
} catch (e) {
}
var result = nativeObjectToString$1.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag$1] = tag;
} else {
delete value[symToStringTag$1];
}
}
return result;
}
var objectProto$d = Object.prototype;
var nativeObjectToString = objectProto$d.toString;
function objectToString(value) {
return nativeObjectToString.call(value);
}
var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;
function baseGetTag(value) {
if (value == null) {
return value === void 0 ? undefinedTag : nullTag;
}
return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
}
function isObjectLike(value) {
return value != null && typeof value == "object";
}
var isArray = Array.isArray;
var isArray$1 = isArray;
function isObject(value) {
var type = typeof value;
return value != null && (type == "object" || type == "function");
}
var asyncTag = "[object AsyncFunction]", funcTag$2 = "[object Function]", genTag$1 = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
function isFunction(value) {
if (!isObject(value)) {
return false;
}
var tag = baseGetTag(value);
return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag;
}
var coreJsData = root$1["__core-js_shared__"];
var coreJsData$1 = coreJsData;
var maskSrcKey = function() {
var uid = /[^.]+$/.exec(coreJsData$1 && coreJsData$1.keys && coreJsData$1.keys.IE_PROTO || "");
return uid ? "Symbol(src)_1." + uid : "";
}();
function isMasked(func) {
return !!maskSrcKey && maskSrcKey in func;
}
var funcProto$1 = Function.prototype;
var funcToString$1 = funcProto$1.toString;
function toSource(func) {
if (func != null) {
try {
return funcToString$1.call(func);
} catch (e) {
}
try {
return func + "";
} catch (e) {
}
}
return "";
}
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
var reIsHostCtor = /^\[object .+?Constructor\]$/;
var funcProto = Function.prototype, objectProto$c = Object.prototype;
var funcToString = funcProto.toString;
var hasOwnProperty$a = objectProto$c.hasOwnProperty;
var reIsNative = RegExp("^" + funcToString.call(hasOwnProperty$a).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
function baseIsNative(value) {
if (!isObject(value) || isMasked(value)) {
return false;
}
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
return pattern.test(toSource(value));
}
function getValue(object, key) {
return object == null ? void 0 : object[key];
}
function getNative(object, key) {
var value = getValue(object, key);
return baseIsNative(value) ? value : void 0;
}
var WeakMap = getNative(root$1, "WeakMap");
var WeakMap$1 = WeakMap;
var objectCreate = Object.create;
var baseCreate = function() {
function object() {
}
return function(proto) {
if (!isObject(proto)) {
return {};
}
if (objectCreate) {
return objectCreate(proto);
}
object.prototype = proto;
var result = new object();
object.prototype = void 0;
return result;
};
}();
var baseCreate$1 = baseCreate;
function copyArray(source, array) {
var index2 = -1, length = source.length;
array || (array = Array(length));
while (++index2 < length) {
array[index2] = source[index2];
}
return array;
}
var defineProperty = function() {
try {
var func = getNative(Object, "defineProperty");
func({}, "", {});
return func;
} catch (e) {
}
}();
var defineProperty$1 = defineProperty;
function arrayEach(array, iteratee) {
var index2 = -1, length = array == null ? 0 : array.length;
while (++index2 < length) {
if (iteratee(array[index2], index2, array) === false) {
break;
}
}
return array;
}
var MAX_SAFE_INTEGER$1 = 9007199254740991;
var reIsUint = /^(?:0|[1-9]\d*)$/;
function isIndex(value, length) {
var type = typeof value;
length = length == null ? MAX_SAFE_INTEGER$1 : length;
return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
}
function baseAssignValue(object, key, value) {
if (key == "__proto__" && defineProperty$1) {
defineProperty$1(object, key, {
"configurable": true,
"enumerable": true,
"value": value,
"writable": true
});
} else {
object[key] = value;
}
}
function eq(value, other) {
return value === other || value !== value && other !== other;
}
var objectProto$b = Object.prototype;
var hasOwnProperty$9 = objectProto$b.hasOwnProperty;
function assignValue(object, key, value) {
var objValue = object[key];
if (!(hasOwnProperty$9.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
baseAssignValue(object, key, value);
}
}
function copyObject(source, props, object, customizer) {
var isNew = !object;
object || (object = {});
var index2 = -1, length = props.length;
while (++index2 < length) {
var key = props[index2];
var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
if (newValue === void 0) {
newValue = source[key];
}
if (isNew) {
baseAssignValue(object, key, newValue);
} else {
assignValue(object, key, newValue);
}
}
return object;
}
var MAX_SAFE_INTEGER = 9007199254740991;
function isLength(value) {
return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
function isArrayLike(value) {
return value != null && isLength(value.length) && !isFunction(value);
}
var objectProto$a = Object.prototype;
function isPrototype(value) {
var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto$a;
return value === proto;
}
function baseTimes(n, iteratee) {
var index2 = -1, result = Array(n);
while (++index2 < n) {
result[index2] = iteratee(index2);
}
return result;
}
var argsTag$3 = "[object Arguments]";
function baseIsArguments(value) {
return isObjectLike(value) && baseGetTag(value) == argsTag$3;
}
var objectProto$9 = Object.prototype;
var hasOwnProperty$8 = objectProto$9.hasOwnProperty;
var propertyIsEnumerable$1 = objectProto$9.propertyIsEnumerable;
var isArguments = baseIsArguments(function() {
return arguments;
}()) ? baseIsArguments : function(value) {
return isObjectLike(value) && hasOwnProperty$8.call(value, "callee") && !propertyIsEnumerable$1.call(value, "callee");
};
var isArguments$1 = isArguments;
function stubFalse() {
return false;
}
var freeExports$2 = typeof exports == "object" && exports && !exports.nodeType && exports;
var freeModule$2 = freeExports$2 && typeof module == "object" && module && !module.nodeType && module;
var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2;
var Buffer$1 = moduleExports$2 ? root$1.Buffer : void 0;
var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : void 0;
var isBuffer = nativeIsBuffer || stubFalse;
var isBuffer$1 = isBuffer;
var argsTag$2 = "[object Arguments]", arrayTag$2 = "[object Array]", boolTag$3 = "[object Boolean]", dateTag$3 = "[object Date]", errorTag$2 = "[object Error]", funcTag$1 = "[object Function]", mapTag$5 = "[object Map]", numberTag$3 = "[object Number]", objectTag$3 = "[object Object]", regexpTag$3 = "[object RegExp]", setTag$5 = "[object Set]", stringTag$3 = "[object String]", weakMapTag$2 = "[object WeakMap]";
var arrayBufferTag$3 = "[object ArrayBuffer]", dataViewTag$4 = "[object DataView]", float32Tag$2 = "[object Float32Array]", float64Tag$2 = "[object Float64Array]", int8Tag$2 = "[object Int8Array]", int16Tag$2 = "[object Int16Array]", int32Tag$2 = "[object Int32Array]", uint8Tag$2 = "[object Uint8Array]", uint8ClampedTag$2 = "[object Uint8ClampedArray]", uint16Tag$2 = "[object Uint16Array]", uint32Tag$2 = "[object Uint32Array]";
var typedArrayTags = {};
typedArrayTags[float32Tag$2] = typedArrayTags[float64Tag$2] = typedArrayTags[int8Tag$2] = typedArrayTags[int16Tag$2] = typedArrayTags[int32Tag$2] = typedArrayTags[uint8Tag$2] = typedArrayTags[uint8ClampedTag$2] = typedArrayTags[uint16Tag$2] = typedArrayTags[uint32Tag$2] = true;
typedArrayTags[argsTag$2] = typedArrayTags[arrayTag$2] = typedArrayTags[arrayBufferTag$3] = typedArrayTags[boolTag$3] = typedArrayTags[dataViewTag$4] = typedArrayTags[dateTag$3] = typedArrayTags[errorTag$2] = typedArrayTags[funcTag$1] = typedArrayTags[mapTag$5] = typedArrayTags[numberTag$3] = typedArrayTags[objectTag$3] = typedArrayTags[regexpTag$3] = typedArrayTags[setTag$5] = typedArrayTags[stringTag$3] = typedArrayTags[weakMapTag$2] = false;
function baseIsTypedArray(value) {
return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
}
function baseUnary(func) {
return function(value) {
return func(value);
};
}
var freeExports$1 = typeof exports == "object" && exports && !exports.nodeType && exports;
var freeModule$1 = freeExports$1 && typeof module == "object" && module && !module.nodeType && module;
var moduleExports$1 = freeModule$1 && freeModule$1.exports === freeExports$1;
var freeProcess = moduleExports$1 && freeGlobal$1.process;
var nodeUtil = function() {
try {
var types = freeModule$1 && freeModule$1.require && freeModule$1.require("util").types;
if (types) {
return types;
}
return freeProcess && freeProcess.binding && freeProcess.binding("util");
} catch (e) {
}
}();
var nodeUtil$1 = nodeUtil;
var nodeIsTypedArray = nodeUtil$1 && nodeUtil$1.isTypedArray;
var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
var isTypedArray$1 = isTypedArray;
var objectProto$8 = Object.prototype;
var hasOwnProperty$7 = objectProto$8.hasOwnProperty;
function arrayLikeKeys(value, inherited) {
var isArr = isArray$1(value), isArg = !isArr && isArguments$1(value), isBuff = !isArr && !isArg && isBuffer$1(value), isType = !isArr && !isArg && !isBuff && isTypedArray$1(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
for (var key in value) {
if ((inherited || hasOwnProperty$7.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
result.push(key);
}
}
return result;
}
function overArg(func, transform) {
return function(arg) {
return func(transform(arg));
};
}
var nativeKeys = overArg(Object.keys, Object);
var nativeKeys$1 = nativeKeys;
var objectProto$7 = Object.prototype;
var hasOwnProperty$6 = objectProto$7.hasOwnProperty;
function baseKeys(object) {
if (!isPrototype(object)) {
return nativeKeys$1(object);
}
var result = [];
for (var key in Object(object)) {
if (hasOwnProperty$6.call(object, key) && key != "constructor") {
result.push(key);
}
}
return result;
}
function keys(object) {
return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
}
function nativeKeysIn(object) {
var result = [];
if (object != null) {
for (var key in Object(object)) {
result.push(key);
}
}
return result;
}
var objectProto$6 = Object.prototype;
var hasOwnProperty$5 = objectProto$6.hasOwnProperty;
function baseKeysIn(object) {
if (!isObject(object)) {
return nativeKeysIn(object);
}
var isProto = isPrototype(object), result = [];
for (var key in object) {
if (!(key == "constructor" && (isProto || !hasOwnProperty$5.call(object, key)))) {
result.push(key);
}
}
return result;
}
function keysIn(object) {
return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
}
var nativeCreate = getNative(Object, "create");
var nativeCreate$1 = nativeCreate;
function hashClear() {
this.__data__ = nativeCreate$1 ? nativeCreate$1(null) : {};
this.size = 0;
}
function hashDelete(key) {
var result = this.has(key) && delete this.__data__[key];
this.size -= result ? 1 : 0;
return result;
}
var HASH_UNDEFINED$2 = "__lodash_hash_undefined__";
var objectProto$5 = Object.prototype;
var hasOwnProperty$4 = objectProto$5.hasOwnProperty;
function hashGet(key) {
var data = this.__data__;
if (nativeCreate$1) {
var result = data[key];
return result === HASH_UNDEFINED$2 ? void 0 : result;
}
return hasOwnProperty$4.call(data, key) ? data[key] : void 0;
}
var objectProto$4 = Object.prototype;
var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
function hashHas(key) {
var data = this.__data__;
return nativeCreate$1 ? data[key] !== void 0 : hasOwnProperty$3.call(data, key);
}
var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
function hashSet(key, value) {
var data = this.__data__;
this.size += this.has(key) ? 0 : 1;
data[key] = nativeCreate$1 && value === void 0 ? HASH_UNDEFINED$1 : value;
return this;
}
function Hash(entries) {
var index2 = -1, length = entries == null ? 0 : entries.length;
this.clear();
while (++index2 < length) {
var entry = entries[index2];
this.set(entry[0], entry[1]);
}
}
Hash.prototype.clear = hashClear;
Hash.prototype["delete"] = hashDelete;
Hash.prototype.get = hashGet;
Hash.prototype.has = hashHas;
Hash.prototype.set = hashSet;
function listCacheClear() {
this.__data__ = [];
this.size = 0;
}
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq(array[length][0], key)) {
return length;
}
}
return -1;
}
var arrayProto = Array.prototype;
var splice = arrayProto.splice;
function listCacheDelete(key) {
var data = this.__data__, index2 = assocIndexOf(data, key);
if (index2 < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index2 == lastIndex) {
data.pop();
} else {
splice.call(data, index2, 1);
}
--this.size;
return true;
}
function listCacheGet(key) {
var data = this.__data__, index2 = assocIndexOf(data, key);
return index2 < 0 ? void 0 : data[index2][1];
}
function listCacheHas(key) {
return assocIndexOf(this.__data__, key) > -1;
}
function listCacheSet(key, value) {
var data = this.__data__, index2 = assocIndexOf(data, key);
if (index2 < 0) {
++this.size;
data.push([key, value]);
} else {
data[index2][1] = value;
}
return this;
}
function ListCache(entries) {
var index2 = -1, length = entries == null ? 0 : entries.length;
this.clear();
while (++index2 < length) {
var entry = entries[index2];
this.set(entry[0], entry[1]);
}
}
ListCache.prototype.clear = listCacheClear;
ListCache.prototype["delete"] = listCacheDelete;
ListCache.prototype.get = listCacheGet;
ListCache.prototype.has = listCacheHas;
ListCache.prototype.set = listCacheSet;
var Map = getNative(root$1, "Map");
var Map$1 = Map;
function mapCacheClear() {
this.size = 0;
this.__data__ = {
"hash": new Hash(),
"map": new (Map$1 || ListCache)(),
"string": new Hash()
};
}
function isKeyable(value) {
var type = typeof value;
return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
}
function getMapData(map, key) {
var data = map.__data__;
return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
}
function mapCacheDelete(key) {
var result = getMapData(this, key)["delete"](key);
this.size -= result ? 1 : 0;
return result;
}
function mapCacheGet(key) {
return getMapData(this, key).get(key);
}
function mapCacheHas(key) {
return getMapData(this, key).has(key);
}
function mapCacheSet(key, value) {
var data = getMapData(this, key), size = data.size;
data.set(key, value);
this.size += data.size == size ? 0 : 1;
return this;
}
function MapCache(entries) {
var index2 = -1, length = entries == null ? 0 : entries.length;
this.clear();
while (++index2 < length) {
var entry = entries[index2];
this.set(entry[0], entry[1]);
}
}
MapCache.prototype.clear = mapCacheClear;
MapCache.prototype["delete"] = mapCacheDelete;
MapCache.prototype.get = mapCacheGet;
MapCache.prototype.has = mapCacheHas;
MapCache.prototype.set = mapCacheSet;
function arrayPush(array, values) {
var index2 = -1, length = values.length, offset = array.length;
while (++index2 < length) {
array[offset + index2] = values[index2];
}
return array;
}
var getPrototype = overArg(Object.getPrototypeOf, Object);
var getPrototype$1 = getPrototype;
function stackClear() {
this.__data__ = new ListCache();
this.size = 0;
}
function stackDelete(key) {
var data = this.__data__, result = data["delete"](key);
this.size = data.size;
return result;
}
function stackGet(key) {
return this.__data__.get(key);
}
function stackHas(key) {
return this.__data__.has(key);
}
var LARGE_ARRAY_SIZE = 200;
function stackSet(key, value) {
var data = this.__data__;
if (data instanceof ListCache) {
var pairs = data.__data__;
if (!Map$1 || pairs.length < LARGE_ARRAY_SIZE - 1) {
pairs.push([key, value]);
this.size = ++data.size;
return this;
}
data = this.__data__ = new MapCache(pairs);
}
data.set(key, value);
this.size = data.size;
return this;
}
function Stack(entries) {
var data = this.__data__ = new ListCache(entries);
this.size = data.size;
}
Stack.prototype.clear = stackClear;
Stack.prototype["delete"] = stackDelete;
Stack.prototype.get = stackGet;
Stack.prototype.has = stackHas;
Stack.prototype.set = stackSet;
function baseAssign(object, source) {
return object && copyObject(source, keys(source), object);
}
function baseAssignIn(object, source) {
return object && copyObject(source, keysIn(source), object);
}
var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
var moduleExports = freeModule && freeModule.exports === freeExports;
var Buffer2 = moduleExports ? root$1.Buffer : void 0, allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : void 0;
function cloneBuffer(buffer, isDeep) {
if (isDeep) {
return buffer.slice();
}
var length = buffer.length, result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);
buffer.copy(result);
return result;
}
function arrayFilter(array, predicate) {
var index2 = -1, length = array == null ? 0 : array.length, resIndex = 0, result = [];
while (++index2 < length) {
var value = array[index2];
if (predicate(value, index2, array)) {
result[resIndex++] = value;
}
}
return result;
}
function stubArray() {
return [];
}
var objectProto$3 = Object.prototype;
var propertyIsEnumerable = objectProto$3.propertyIsEnumerable;
var nativeGetSymbols$1 = Object.getOwnPropertySymbols;
var getSymbols = !nativeGetSymbols$1 ? stubArray : function(object) {
if (object == null) {
return [];
}
object = Object(object);
return arrayFilter(nativeGetSymbols$1(object), function(symbol) {
return propertyIsEnumerable.call(object, symbol);
});
};
var getSymbols$1 = getSymbols;
function copySymbols(source, object) {
return copyObject(source, getSymbols$1(source), object);
}
var nativeGetSymbols = Object.getOwnPropertySymbols;
var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) {
var result = [];
while (object) {
arrayPush(result, getSymbols$1(object));
object = getPrototype$1(object);
}
return result;
};
var getSymbolsIn$1 = getSymbolsIn;
function copySymbolsIn(source, object) {
return copyObject(source, getSymbolsIn$1(source), object);
}
function baseGetAllKeys(object, keysFunc, symbolsFunc) {
var result = keysFunc(object);
return isArray$1(object) ? result : arrayPush(result, symbolsFunc(object));
}
function getAllKeys(object) {
return baseGetAllKeys(object, keys, getSymbols$1);
}
function getAllKeysIn(object) {
return baseGetAllKeys(object, keysIn, getSymbolsIn$1);
}
var DataView = getNative(root$1, "DataView");
var DataView$1 = DataView;
var Promise$1 = getNative(root$1, "Promise");
var Promise$2 = Promise$1;
var Set = getNative(root$1, "Set");
var Set$1 = Set;
var mapTag$4 = "[object Map]", objectTag$2 = "[object Object]", promiseTag = "[object Promise]", setTag$4 = "[object Set]", weakMapTag$1 = "[object WeakMap]";
var dataViewTag$3 = "[object DataView]";
var dataViewCtorString = toSource(DataView$1), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$2), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap$1);
var getTag = baseGetTag;
if (DataView$1 && getTag(new DataView$1(new ArrayBuffer(1))) != dataViewTag$3 || Map$1 && getTag(new Map$1()) != mapTag$4 || Promise$2 && getTag(Promise$2.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag$4 || WeakMap$1 && getTag(new WeakMap$1()) != weakMapTag$1) {
getTag = function(value) {
var result = baseGetTag(value), Ctor = result == objectTag$2 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
if (ctorString) {
switch (ctorString) {
case dataViewCtorString:
return dataViewTag$3;
case mapCtorString:
return mapTag$4;
case promiseCtorString:
return promiseTag;
case setCtorString:
return setTag$4;
case weakMapCtorString:
return weakMapTag$1;
}
}
return result;
};
}
var getTag$1 = getTag;
var objectProto$2 = Object.prototype;
var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
function initCloneArray(array) {
var length = array.length, result = new array.constructor(length);
if (length && typeof array[0] == "string" && hasOwnProperty$2.call(array, "index")) {
result.index = array.index;
result.input = array.input;
}
return result;
}
var Uint8Array2 = root$1.Uint8Array;
var Uint8Array$1 = Uint8Array2;
function cloneArrayBuffer(arrayBuffer) {
var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
new Uint8Array$1(result).set(new Uint8Array$1(arrayBuffer));
return result;
}
function cloneDataView(dataView, isDeep) {
var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;
return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);
}
var reFlags = /\w*$/;
function cloneRegExp(regexp) {
var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));
result.lastIndex = regexp.lastIndex;
return result;
}
var symbolProto$1 = Symbol$2 ? Symbol$2.prototype : void 0, symbolValueOf$1 = symbolProto$1 ? symbolProto$1.valueOf : void 0;
function cloneSymbol(symbol) {
return symbolValueOf$1 ? Object(symbolValueOf$1.call(symbol)) : {};
}
function cloneTypedArray(typedArray, isDeep) {
var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
}
var boolTag$2 = "[object Boolean]", dateTag$2 = "[object Date]", mapTag$3 = "[object Map]", numberTag$2 = "[object Number]", regexpTag$2 = "[object RegExp]", setTag$3 = "[object Set]", stringTag$2 = "[object String]", symbolTag$2 = "[object Symbol]";
var arrayBufferTag$2 = "[object ArrayBuffer]", dataViewTag$2 = "[object DataView]", float32Tag$1 = "[object Float32Array]", float64Tag$1 = "[object Float64Array]", int8Tag$1 = "[object Int8Array]", int16Tag$1 = "[object Int16Array]", int32Tag$1 = "[object Int32Array]", uint8Tag$1 = "[object Uint8Array]", uint8ClampedTag$1 = "[object Uint8ClampedArray]", uint16Tag$1 = "[object Uint16Array]", uint32Tag$1 = "[object Uint32Array]";
function initCloneByTag(object, tag, isDeep) {
var Ctor = object.constructor;
switch (tag) {
case arrayBufferTag$2:
return cloneArrayBuffer(object);
case boolTag$2:
case dateTag$2:
return new Ctor(+object);
case dataViewTag$2:
return cloneDataView(object, isDeep);
case float32Tag$1:
case float64Tag$1:
case int8Tag$1:
case int16Tag$1:
case int32Tag$1:
case uint8Tag$1:
case uint8ClampedTag$1:
case uint16Tag$1:
case uint32Tag$1:
return cloneTypedArray(object, isDeep);
case mapTag$3:
return new Ctor();
case numberTag$2:
case stringTag$2:
return new Ctor(object);
case regexpTag$2:
return cloneRegExp(object);
case setTag$3:
return new Ctor();
case symbolTag$2:
return cloneSymbol(object);
}
}
function initCloneObject(object) {
return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate$1(getPrototype$1(object)) : {};
}
var mapTag$2 = "[object Map]";
function baseIsMap(value) {
return isObjectLike(value) && getTag$1(value) == mapTag$2;
}
var nodeIsMap = nodeUtil$1 && nodeUtil$1.isMap;
var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;
var isMap$1 = isMap;
var setTag$2 = "[object Set]";
function baseIsSet(value) {
return isObjectLike(value) && getTag$1(value) == setTag$2;
}
var nodeIsSet = nodeUtil$1 && nodeUtil$1.isSet;
var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
var isSet$1 = isSet;
var CLONE_DEEP_FLAG$1 = 1, CLONE_FLAT_FLAG = 2, CLONE_SYMBOLS_FLAG$1 = 4;
var argsTag$1 = "[object Arguments]", arrayTag$1 = "[object Array]", boolTag$1 = "[object Boolean]", dateTag$1 = "[object Date]", errorTag$1 = "[object Error]", funcTag = "[object Function]", genTag = "[object GeneratorFunction]", mapTag$1 = "[object Map]", numberTag$1 = "[object Number]", objectTag$1 = "[object Object]", regexpTag$1 = "[object RegExp]", setTag$1 = "[object Set]", stringTag$1 = "[object String]", symbolTag$1 = "[object Symbol]", weakMapTag = "[object WeakMap]";
var arrayBufferTag$1 = "[object ArrayBuffer]", dataViewTag$1 = "[object DataView]", float32Tag = "[object Float32Array]", float64Tag = "[object Float64Array]", int8Tag = "[object Int8Array]", int16Tag = "[object Int16Array]", int32Tag = "[object Int32Array]", uint8Tag = "[object Uint8Array]", uint8ClampedTag = "[object Uint8ClampedArray]", uint16Tag = "[object Uint16Array]", uint32Tag = "[object Uint32Array]";
var cloneableTags = {};
cloneableTags[argsTag$1] = cloneableTags[arrayTag$1] = cloneableTags[arrayBufferTag$1] = cloneableTags[dataViewTag$1] = cloneableTags[boolTag$1] = cloneableTags[dateTag$1] = cloneableTags[float32Tag] = cloneableTags[float64Tag] = cloneableTags[int8Tag] = cloneableTags[int16Tag] = cloneableTags[int32Tag] = cloneableTags[mapTag$1] = cloneableTags[numberTag$1] = cloneableTags[objectTag$1] = cloneableTags[regexpTag$1] = cloneableTags[setTag$1] = cloneableTags[stringTag$1] = cloneableTags[symbolTag$1] = cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;
cloneableTags[errorTag$1] = cloneableTags[funcTag] = cloneableTags[weakMapTag] = false;
function baseClone(value, bitmask, customizer, key, object, stack) {
var result, isDeep = bitmask & CLONE_DEEP_FLAG$1, isFlat = bitmask & CLONE_FLAT_FLAG, isFull = bitmask & CLONE_SYMBOLS_FLAG$1;
if (customizer) {
result = object ? customizer(value, key, object, stack) : customizer(value);
}
if (result !== void 0) {
return result;
}
if (!isObject(value)) {
return value;
}
var isArr = isArray$1(value);
if (isArr) {
result = initCloneArray(value);
if (!isDeep) {
return copyArray(value, result);
}
} else {
var tag = getTag$1(value), isFunc = tag == funcTag || tag == genTag;
if (isBuffer$1(value)) {
return cloneBuffer(value, isDeep);
}
if (tag == objectTag$1 || tag == argsTag$1 || isFunc && !object) {
result = isFlat || isFunc ? {} : initCloneObject(value);
if (!isDeep) {
return isFlat ? copySymbolsIn(value, baseAssignIn(result, value)) : copySymbols(value, baseAssign(result, value));
}
} else {
if (!cloneableTags[tag]) {
return object ? value : {};
}
result = initCloneByTag(value, tag, isDeep);
}
}
stack || (stack = new Stack());
var stacked = stack.get(value);
if (stacked) {
return stacked;
}
stack.set(value, result);
if (isSet$1(value)) {
value.forEach(function(subValue) {
result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));
});
} else if (isMap$1(value)) {
value.forEach(function(subValue, key2) {
result.set(key2, baseClone(subValue, bitmask, customizer, key2, value, stack));
});
}
var keysFunc = isFull ? isFlat ? getAllKeysIn : getAllKeys : isFlat ? keysIn : keys;
var props = isArr ? void 0 : keysFunc(value);
arrayEach(props || value, function(subValue, key2) {
if (props) {
key2 = subValue;
subValue = value[key2];
}
assignValue(result, key2, baseClone(subValue, bitmask, customizer, key2, value, stack));
});
return result;
}
var CLONE_DEEP_FLAG = 1, CLONE_SYMBOLS_FLAG = 4;
function cloneDeep(value) {
return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
}
var HASH_UNDEFINED = "__lodash_hash_undefined__";
function setCacheAdd(value) {
this.__data__.set(value, HASH_UNDEFINED);
return this;
}
function setCacheHas(value) {
return this.__data__.has(value);
}
function SetCache(values) {
var index2 = -1, length = values == null ? 0 : values.length;
this.__data__ = new MapCache();
while (++index2 < length) {
this.add(values[index2]);
}
}
SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
SetCache.prototype.has = setCacheHas;
function arraySome(array, predicate) {
var index2 = -1, length = array == null ? 0 : array.length;
while (++index2 < length) {
if (predicate(array[index2], index2, array)) {
return true;
}
}
return false;
}
function cacheHas(cache, key) {
return cache.has(key);
}
var COMPARE_PARTIAL_FLAG$3 = 1, COMPARE_UNORDERED_FLAG$1 = 2;
function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$3, arrLength = array.length, othLength = other.length;
if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
return false;
}
var arrStacked = stack.get(array);
var othStacked = stack.get(other);
if (arrStacked && othStacked) {
return arrStacked == other && othStacked == array;
}
var index2 = -1, result = true, seen = bitmask & COMPARE_UNORDERED_FLAG$1 ? new SetCache() : void 0;
stack.set(array, other);
stack.set(other, array);
while (++index2 < arrLength) {
var arrValue = array[index2], othValue = other[index2];
if (customizer) {
var compared = isPartial ? customizer(othValue, arrValue, index2, other, array, stack) : customizer(arrValue, othValue, index2, array, other, stack);
}
if (compared !== void 0) {
if (compared) {
continue;
}
result = false;
break;
}
if (seen) {
if (!arraySome(other, function(othValue2, othIndex) {
if (!cacheHas(seen, othIndex) && (arrValue === othValue2 || equalFunc(arrValue, othValue2, bitmask, customizer, stack))) {
return seen.push(othIndex);
}
})) {
result = false;
break;
}
} else if (!(arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {
result = false;
break;
}
}
stack["delete"](array);
stack["delete"](other);
return result;
}
function mapToArray(map) {
var index2 = -1, result = Array(map.size);
map.forEach(function(value, key) {
result[++index2] = [key, value];
});
return result;
}
function setToArray(set) {
var index2 = -1, result = Array(set.size);
set.forEach(function(value) {
result[++index2] = value;
});
return result;
}
var COMPARE_PARTIAL_FLAG$2 = 1, COMPARE_UNORDERED_FLAG = 2;
var boolTag = "[object Boolean]", dateTag = "[object Date]", errorTag = "[object Error]", mapTag = "[object Map]", numberTag = "[object Number]", regexpTag = "[object RegExp]", setTag = "[object Set]", stringTag = "[object String]", symbolTag = "[object Symbol]";
var arrayBufferTag = "[object ArrayBuffer]", dataViewTag = "[object DataView]";
var symbolProto = Symbol$2 ? Symbol$2.prototype : void 0, symbolValueOf = symbolProto ? symbolProto.valueOf : void 0;
function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
switch (tag) {
case dataViewTag:
if (object.byteLength != other.byteLength || object.byteOffset != other.byteOffset) {
return false;
}
object = object.buffer;
other = other.buffer;
case arrayBufferTag:
if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array$1(object), new Uint8Array$1(other))) {
return false;
}
return true;
case boolTag:
case dateTag:
case numberTag:
return eq(+object, +other);
case errorTag:
return object.name == other.name && object.message == other.message;
case regexpTag:
case stringTag:
return object == other + "";
case mapTag:
var convert = mapToArray;
case setTag:
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$2;
convert || (convert = setToArray);
if (object.size != other.size && !isPartial) {
return false;
}
var stacked = stack.get(object);
if (stacked) {
return stacked == other;
}
bitmask |= COMPARE_UNORDERED_FLAG;
stack.set(object, other);
var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);
stack["delete"](object);
return result;
case symbolTag:
if (symbolValueOf) {
return symbolValueOf.call(object) == symbolValueOf.call(other);
}
}
return false;
}
var COMPARE_PARTIAL_FLAG$1 = 1;
var objectProto$1 = Object.prototype;
var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
var isPartial = bitmask & COMPARE_PARTIAL_FLAG$1, objProps = getAllKeys(object), objLength = objProps.length, othProps = getAllKeys(other), othLength = othProps.length;
if (objLength != othLength && !isPartial) {
return false;
}
var index2 = objLength;
while (index2--) {
var key = objProps[index2];
if (!(isPartial ? key in other : hasOwnProperty$1.call(other, key))) {
return false;
}
}
var objStacked = stack.get(object);
var othStacked = stack.get(other);
if (objStacked && othStacked) {
return objStacked == other && othStacked == object;
}
var result = true;
stack.set(object, other);
stack.set(other, object);
var skipCtor = isPartial;
while (++index2 < objLength) {
key = objProps[index2];
var objValue = object[key], othValue = other[key];
if (customizer) {
var compared = isPartial ? customizer(othValue, objValue, key, other, object, stack) : customizer(objValue, othValue, key, object, other, stack);
}
if (!(compared === void 0 ? objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack) : compared)) {
result = false;
break;
}
skipCtor || (skipCtor = key == "constructor");
}
if (result && !skipCtor) {
var objCtor = object.constructor, othCtor = other.constructor;
if (objCtor != othCtor && ("constructor" in object && "constructor" in other) && !(typeof objCtor == "function" && objCtor instanceof objCtor && typeof othCtor == "function" && othCtor instanceof othCtor)) {
result = false;
}
}
stack["delete"](object);
stack["delete"](other);
return result;
}
var COMPARE_PARTIAL_FLAG = 1;
var argsTag = "[object Arguments]", arrayTag = "[object Array]", objectTag = "[object Object]";
var objectProto = Object.prototype;
var hasOwnProperty = objectProto.hasOwnProperty;
function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
var objIsArr = isArray$1(object), othIsArr = isArray$1(other), objTag = objIsArr ? arrayTag : getTag$1(object), othTag = othIsArr ? arrayTag : getTag$1(other);
objTag = objTag == argsTag ? objectTag : objTag;
othTag = othTag == argsTag ? objectTag : othTag;
var objIsObj = objTag == objectTag, othIsObj = othTag == objectTag, isSameTag = objTag == othTag;
if (isSameTag && isBuffer$1(object)) {
if (!isBuffer$1(other)) {
return false;
}
objIsArr = true;
objIsObj = false;
}
if (isSameTag && !objIsObj) {
stack || (stack = new Stack());
return objIsArr || isTypedArray$1(object) ? equalArrays(object, other, bitmask, customizer, equalFunc, stack) : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
}
if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
var objIsWrapped = objIsObj && hasOwnProperty.call(object, "__wrapped__"), othIsWrapped = othIsObj && hasOwnProperty.call(other, "__wrapped__");
if (objIsWrapped || othIsWrapped) {
var objUnwrapped = objIsWrapped ? object.value() : object, othUnwrapped = othIsWrapped ? other.value() : other;
stack || (stack = new Stack());
return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
}
}
if (!isSameTag) {
return false;
}
stack || (stack = new Stack());
return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
}
function baseIsEqual(value, other, bitmask, customizer, stack) {
if (value === other) {
return true;
}
if (value == null || other == null || !isObjectLike(value) && !isObjectLike(other)) {
return value !== value && other !== other;
}
return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
}
function isEqual(value, other) {
return baseIsEqual(value, other);
}
var vue3Lottie_vue_vue_type_style_index_0_lang = "";

@@ -65,25 +1106,36 @@ var _export_sfc = (sfc, props) => {

},
showControls: {
noMargin: {
type: Boolean,
default: false
},
scale: {
type: Number,
default: 1
},
renderer: {
type: String,
default: "svg"
},
rendererSettings: {
type: Object,
default: () => ({})
},
assetsPath: {
type: String,
default: ""
}
},
emits: {
onLoad: null,
onReady: null,
onError: null,
onPlay: null,
onPause: null,
onStop: null,
onComplete: null,
onLoopComplete: null,
onComplete: null,
onEnterFrame: null
onEnterFrame: null,
onSegmentStart: null,
onAnimationLoaded: null
},
setup(props, { emit: emits }) {
let lottie_player = ref(null);
let lottieAnimation = null;
const elementid = ref("");
let direction = ref(1);
let loopCounter = ref(0);
let direction = 1;
const checkIfContainerExists = (elementID) => {
if (document.querySelector(`[data-id="${elementID}" ]`) !== null) {
if (document.querySelector(`[data-id="${elementID}"]`) !== null) {
return true;

@@ -94,4 +1146,11 @@ } else {

};
const loadLottie = async () => {
let animationData = props.animationData;
const loadLottie = async (element) => {
let autoPlay = props.autoPlay;
if (props.playOnHover) {
autoPlay = false;
}
let animationData = {};
if (isEqual(props.animationData, {}) === false) {
animationData = cloneDeep(props.animationData);
}
if (props.animationLink != "") {

@@ -107,123 +1166,73 @@ try {

}
lottie_player.value.load(animationData);
if (!props.autoPlay) {
lottie_player.value.seek(0);
lottie_player.value.pause();
let loop = props.loop;
if (typeof loop === "number") {
if (loop > 0) {
loop = loop - 1;
}
}
if (props.playOnHover) {
lottie_player.value.seek(0);
lottie_player.value.pause();
}
if (props.delay > 0) {
lottie_player.value.seek(0);
lottie_player.value.pause();
autoPlay = false;
}
const lottieAnimationConfig = {
container: element,
renderer: props.renderer,
loop,
autoplay: autoPlay,
animationData,
assetsPath: props.assetsPath
};
if (isEqual(props.rendererSettings, {}) === false) {
lottieAnimationConfig.rendererSettings = props.rendererSettings;
}
if (props.scale !== 1) {
lottieAnimationConfig.rendererSettings = __spreadProps(__spreadValues({}, lottieAnimationConfig.rendererSettings), {
viewBoxOnly: true
});
}
lottieAnimation = Lottie.loadAnimation(lottieAnimationConfig);
setTimeout(() => {
if (props.direction === "reverse") {
lottie_player.value.seek(getDuration() - 1);
lottie_player.value.setDirection(-1);
direction.value = -1;
}
if (props.direction === "normal") {
lottie_player.value.setDirection(1);
direction.value = 1;
}
if (props.autoPlay) {
if (props.playOnHover) {
lottie_player.value.seek(0);
lottie_player.value.pause();
autoPlay = props.autoPlay;
if (props.playOnHover) {
lottieAnimation == null ? void 0 : lottieAnimation.pause();
} else {
if (autoPlay) {
lottieAnimation == null ? void 0 : lottieAnimation.play();
} else {
lottie_player.value.play();
lottieAnimation == null ? void 0 : lottieAnimation.pause();
}
}
emits("onAnimationLoaded");
}, props.delay);
lottie_player.value.setSpeed(props.speed);
lottieAnimation.setSpeed(props.speed);
if (props.direction === "reverse") {
lottieAnimation.setDirection(-1);
}
if (props.direction === "normal") {
lottieAnimation.setDirection(1);
}
if (props.pauseAnimation) {
lottie_player.value.pause();
lottieAnimation.pause();
} else {
if (props.playOnHover) {
lottie_player.value.pause();
lottieAnimation.pause();
}
}
lottie_player.value.addEventListener("load", () => {
emits("onLoad");
});
lottie_player.value.addEventListener("error", () => {
emits("onError");
});
lottie_player.value.addEventListener("ready", () => {
emits("onReady");
});
lottie_player.value.addEventListener("play", () => {
if (props.loop === true || typeof props.loop === "number")
;
else {
emits("onPlay");
lottieAnimation.addEventListener("loopComplete", () => {
if (props.direction === "alternate") {
lottieAnimation == null ? void 0 : lottieAnimation.stop();
direction = direction === -1 ? 1 : -1;
lottieAnimation == null ? void 0 : lottieAnimation.setDirection(direction);
lottieAnimation == null ? void 0 : lottieAnimation.play();
}
emits("onLoopComplete");
});
lottie_player.value.addEventListener("pause", () => {
if (props.loop === true || typeof props.loop === "number")
;
else {
emits("onPause");
}
lottieAnimation.addEventListener("complete", () => {
emits("onComplete");
});
lottie_player.value.addEventListener("stop", () => {
if (typeof props.loop === "number")
;
else {
emits("onStop");
}
lottieAnimation.addEventListener("enterFrame", () => {
emits("onEnterFrame");
});
lottie_player.value.addEventListener("complete", () => {
if (props.direction === "alternate") {
lottie_player.value.pause();
direction.value = direction.value * -1;
lottie_player.value.setDirection(direction.value);
lottie_player.value.play();
if (typeof props.loop === "number") {
loopCounter.value++;
if (loopCounter.value < props.loop) {
emits("onLoopComplete");
} else {
loopCounter.value = 0;
lottie_player.value.pause();
emits("onLoopComplete");
emits("onComplete");
}
}
} else {
if (props.loop === true) {
if (direction.value == -1) {
lottie_player.value.seek(getDuration() - 1);
} else {
lottie_player.value.stop();
}
emits("onLoopComplete");
if (!props.autoPlay) {
lottie_player.value.seek(0);
lottie_player.value.pause();
} else {
lottie_player.value.play();
}
} else if (typeof props.loop === "number") {
loopCounter.value++;
if (loopCounter.value < props.loop) {
lottie_player.value.stop();
emits("onLoopComplete");
lottie_player.value.play();
} else {
loopCounter.value = 0;
lottie_player.value.pause();
emits("onComplete");
}
} else {
lottie_player.value.pause();
emits("onComplete");
}
}
lottieAnimation.addEventListener("segmentStart", () => {
emits("onSegmentStart");
});
lottie_player.value.addEventListener("frame", () => {
emits("onEnterFrame");
});
};

@@ -242,3 +1251,5 @@ const getCurrentStyle = computed(() => {

"--lottie-animation-container-height": height,
"--lottie-animation-container-background-color": props.backgroundColor
"--lottie-animation-container-background-color": props.backgroundColor,
"--lottie-animation-margin": props.noMargin ? "0" : "0 auto",
"--lottie-animation-scale": props.scale != 1 ? props.scale : ""
};

@@ -248,32 +1259,27 @@ return cssVariables;

const hoverStarted = () => {
if (lottie_player.value && props.pauseOnHover) {
lottie_player.value.pause();
emits("onPause");
if (lottieAnimation && props.pauseOnHover) {
lottieAnimation.pause();
}
if (lottie_player.value && props.playOnHover) {
lottie_player.value.play();
emits("onPlay");
if (lottieAnimation && props.playOnHover) {
lottieAnimation.play();
}
};
const hoverEnded = () => {
if (lottie_player.value && props.pauseOnHover) {
lottie_player.value.play();
emits("onPlay");
if (lottieAnimation && props.pauseOnHover) {
lottieAnimation.play();
}
if (lottie_player.value && props.playOnHover) {
lottie_player.value.pause();
emits("onPause");
if (lottieAnimation && props.playOnHover) {
lottieAnimation.pause();
}
};
watch(props, () => {
watch(() => props.pauseAnimation, () => {
if ((props.pauseOnHover || props.playOnHover) && props.pauseAnimation) {
console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover or playOnHover");
console.error("If you are using pauseAnimation prop for Vue3-Lottie, please remove the props pauseOnHover and playOnHover");
return;
}
if (!props.pauseOnHover && !props.playOnHover) {
if (lottie_player.value && props.pauseAnimation) {
lottie_player.value.pause();
emits("onPause");
} else if (lottie_player.value && !props.pauseAnimation) {
lottie_player.value.play();
emits("onPlay");
if (lottieAnimation) {
if (props.pauseAnimation) {
lottieAnimation.pause();
} else {
lottieAnimation.play();
}

@@ -283,19 +1289,21 @@ }

const play = () => {
if (lottie_player.value) {
lottie_player.value.play();
emits("onPlay");
if (lottieAnimation) {
lottieAnimation.play();
}
};
const pause = () => {
if (lottie_player.value) {
lottie_player.value.pause();
emits("onPause");
if (lottieAnimation) {
lottieAnimation.pause();
}
};
const stop = () => {
if (lottie_player.value) {
lottie_player.value.stop();
emits("onStop");
if (lottieAnimation) {
lottieAnimation.stop();
}
};
const destroy = () => {
if (lottieAnimation) {
lottieAnimation.destroy();
}
};
const setSpeed = (speed = 1) => {

@@ -305,22 +1313,45 @@ if (speed <= 0) {

}
if (lottie_player.value) {
lottie_player.value.setSpeed(speed);
if (lottieAnimation) {
lottieAnimation.setSpeed(speed);
}
};
const setDirection = (direction_) => {
if (lottie_player.value) {
if (direction_ === "forward") {
lottie_player.value.setDirection(1);
direction.value = 1;
} else if (direction_ === "reverse") {
lottie_player.value.setDirection(-1);
direction.value = -1;
const setDirection = (direction2) => {
if (lottieAnimation) {
if (direction2 === "forward") {
lottieAnimation.setDirection(1);
} else if (direction2 === "reverse") {
lottieAnimation.setDirection(-1);
}
}
};
const getDuration = () => {
if (lottie_player.value) {
return lottie_player.value.getLottie().totalFrames;
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 updateDocumentData = (documentData, index2 = 0) => {
if (lottieAnimation) {
lottieAnimation.renderer.elements[index2].updateDocumentData(documentData);
}
};
const makeid = (length) => {

@@ -339,3 +1370,3 @@ var result = "";

}
if (props.animationLink === "" && props.animationData === {}) {
if (props.animationLink === "" && isEqual(props.animationData, {})) {
throw new Error("You must provide either animationLink or animationData");

@@ -348,3 +1379,3 @@ }

if (element) {
loadLottie();
loadLottie(element);
}

@@ -363,40 +1394,35 @@ }

getCurrentStyle,
LottiePlayer,
lottie_player,
direction,
loopCounter,
play,
pause,
stop,
destroy,
setSpeed,
setDirection,
goToAndStop,
goToAndPlay,
playSegments,
setSubFrame,
getDuration,
setDirection,
setSpeed,
stop,
pause,
play
updateDocumentData
};
}
});
const _hoisted_1 = ["data-id", "controls"];
const _hoisted_1 = ["data-id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", null, [
createElementVNode("lottie-player", {
"data-id": _ctx.elementid,
ref: "lottie_player",
controls: _ctx.$props.showControls,
style: normalizeStyle(_ctx.getCurrentStyle),
class: "lottie-animation-container",
onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverStarted && _ctx.hoverStarted(...args)),
onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.hoverEnded && _ctx.hoverEnded(...args))
}, null, 44, _hoisted_1)
]);
return openBlock(), createElementBlock("div", {
"data-id": _ctx.elementid,
class: "lottie-animation-container",
style: normalizeStyle(_ctx.getCurrentStyle),
onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverStarted && _ctx.hoverStarted(...args)),
onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.hoverEnded && _ctx.hoverEnded(...args))
}, null, 44, _hoisted_1);
}
var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
function install(app, options) {
const finalOptions = Object.assign({}, {
name: "Vue3Lottie"
}, options);
app.component(`${finalOptions.name}`, Vue3Lottie);
}
const plugin = {
version: "3.0.2-beta",
install
var index = {
install(app, options) {
var _a;
const name = (_a = options == null ? void 0 : options.name) != null ? _a : "Vue3Lottie";
app.component(name, Vue3Lottie);
}
};
export { Vue3Lottie, plugin as default, install };
export { Vue3Lottie, index as default };

57

package.json
{
"name": "vue3-lottie",
"version": "3.0.2-beta",
"version": "3.1.0-beta.0",
"license": "MIT",
"author": "Sanjay Soundarajan <info@sanjaysoundarajan.dev> (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 ."
},
"type": "module",
"dependencies": {
"@lottiefiles/lottie-player": "^1.5.6",
"lottie-web": "^5.8.1"
"lodash-es": "^4.17.21",
"lottie-web": "5.12.2"
},

@@ -21,4 +15,3 @@ "peerDependencies": {

"files": [
"dist",
"dist/*.css"
"dist/*"
],

@@ -33,3 +26,3 @@ "repository": {

},
"main": "dist/vue3-lottie.umd.js",
"main": "dist/vue3-lottie.cjs.js",
"module": "dist/vue3-lottie.es.js",

@@ -39,16 +32,21 @@ "types": "dist/index.d.ts",

".": {
"types": "./dist/index.d.ts",
"import": "./dist/vue3-lottie.es.js",
"require": "./dist/vue3-lottie.umd.js"
},
"./dist/style.css": "./dist/style.css"
"require": "./dist/vue3-lottie.cjs.js"
}
},
"devDependencies": {
"@babel/types": "^7.17.0",
"@types/node": "^17.0.18",
"@vitejs/plugin-vue": "^2.2.0",
"typescript": "^4.5.5",
"vite": "^2.8.4",
"vue": "^3.2.31",
"vue-tsc": "^0.31.4",
"vue-typegen": "^0.2.0"
"@babel/types": "7.22.10",
"@types/lodash-es": "4.17.8",
"@types/node": "18.17.5",
"@vitejs/plugin-vue": "2.3.4",
"@vue/compiler-sfc": "^3.3.4",
"typescript": "5.0.4",
"vite": "2.9.16",
"vite-plugin-css-injected-by-js": "^3.1.1",
"vite-plugin-dts": "^2.3.0",
"vite-plugin-vue-type-imports": "^0.2.4",
"vue": "3.3.4",
"vue-tsc": "0.40.13",
"vue-typegen": "0.2.0"
},

@@ -66,3 +64,10 @@ "bugs": {

"lottie"
]
}
],
"scripts": {
"dev": "vite build --watch",
"build": "vite build",
"dev: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 ."
}
}

225

README.md
# Vue 3 Lottie
[![npm](https://img.shields.io/npm/v/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Downloads](https://img.shields.io/npm/dt/vue3-lottie)](https://www.npmjs.com/package/vue3-lottie) [![Stars](https://img.shields.io/github/stars/megasanjay/vue3-lottie.svg?style=flat-square)](https://github.com/megasanjay/vue3-lottie/stargazers) [![License](https://img.shields.io/npm/l/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/blob/main/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/megasanjay/vue3-lottie)](https://github.com/megasanjay/vue3-lottie/issues)
Add Lottie animations to your Vue 3 or Nuxt 3 application.
`vue3-lottie` was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. `vue3-lottie` is a vue wrapper around the `lottie-player` library with a few additional features.
---
# Demos
<p align="center">
<a href="#">
<img src="hi.gif" width="150" height="150" />
</a>
View the live demos here: [https://vue3-lottie.vercel.app/examples.html](https://vue3-lottie.vercel.app/examples.html)
<p align="center">
<a href="https://www.npmjs.com/package/vue3-lottie">
<img src="https://img.shields.io/npm/v/vue3-lottie" />
</a>
<a href="https://www.npmjs.com/package/vue3-lottie">
<img src="https://img.shields.io/npm/dm/vue3-lottie" />
</a>
<a href="https://github.com/megasanjay/vue3-lottie/stargazers">
<img src="https://img.shields.io/github/stars/megasanjay/vue3-lottie.svg?style=flat-square" />
</a>
<a href="https://github.com/megasanjay/vue3-lottie/blob/main/LICENSE">
<img src="https://img.shields.io/npm/l/vue3-lottie" >
</a>
<a href="https://github.com/megasanjay/vue3-lottie/issues">
<img src="https://img.shields.io/github/issues/megasanjay/vue3-lottie" />
</a>
<br/>
<br/>
<a href="https://vue3-lottie.vercel.app/"><strong>Explore the documentation »</strong></a>
</p>
</p>
# Upgrade to v3.x
`vue3-lottie` was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. `vue3-lottie` is a vue wrapper around the `lottie-web` library with a few additional features.
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).
## Demos
# Installation
View the live demos here: [https://vue3-lottie.vercel.app](https://vue3-lottie.vercel.app)
## Upgrade to v3.x
If you are using version 2.x of `vue3-lottie` you should upgrade to version 3.x. You can do this by running the [Installation and Usage](#installation-and-usage) command below. This add better support for Typescript. There is also a change with the `dist/style.css` import (it's been removed) so take a look at the [new documentation](https://vue3-lottie.vercel.app/introduction/v3) for instructions on how to migrate to this package.
## Installation and Usage
### Vue 3
- You can install `vue3-lottie` over `yarn` or `npm`. `lottie-web` is a dependency of `vue3-lottie` and should be automatically installed when you install `vue3-lottie`.
If you are using npm:

@@ -29,31 +62,49 @@

# Installation and Usage
- Register the component in your Vue 3 application.
## Vue 3
The most common use case is to register the component globally.
- You can install `vue3-lottie` over `yarn` or `npm`. `lottie-web` is a dependency of `vue3-lottie` and should be automatically installed when you install `vue3-lottie`.
```js
// main.js
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'
```bash
yarn add vue3-lottie@latest
createApp(App).use(Vue3Lottie).mount('#app')
```
```bash
npm install vue3-lottie@latest --save
If you get an error with TS, try `use(Vue3Lottie, { name: "Vue3Lottie" })`
To define global components for [Volar type-checking](https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage) you will need to add:
```ts
// components.d.ts
declare module '@vue/runtime-core' {
export interface GlobalComponents {
LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']
}
}
export {}
```
- Register the component in your Vue 3 application.
If needed rename component to use:
The most common use case is to register the component globally.
```ts
app.use(Vue3Lottie, { name: 'LottieAnimation' }) // use in template <LottieAnimation />
```
- `name` string (default: 'Vue3Lottie') - set custom component name
Alternatively you can also import the component locally.
```js
// main.js
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
createApp(App).use(Vue3Lottie).mount('#app')
export default {
components: {
Vue3Lottie,
},
}
```
Alternatively you can import the component locally.
You can then use the component in your template

@@ -67,5 +118,4 @@ ```vue

import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
const AstronautJSON = require('./astronaut.json')
import AstronautJSON from './astronaut.json'

@@ -85,20 +135,26 @@ export default {

## Nuxt 3
### Nuxt 3
This is still experimental. Will be updated soon.
- You can install `vue3-lottie` over `yarn` or `npm`. `lottie-web` is a dependency of `vue3-lottie` and should be automatically installed when you install `vue3-lottie`.
```bash
yarn add vue3-lottie@latest
```
If you are using npm:
```bash
```shell
npm install vue3-lottie@latest --save
```
If you are using yarn:
```shell
yarn add vue3-lottie@latest
```
- Create a folder called **`plugins`** at the root of your project.
- Create a file named **`vue3-lottie.client.js`** inside the _plugins_ directory.
- Add the following code to the **`vue3-lottie.client.js`** file.
- Create a file named **`Vue3Lottie.client.ts`** inside the _plugins_ directory.
- Add the following code to the **`Vue3Lottie.client.ts`** file.
```js
import { Vue3Lottie } from 'vue3-lottie'
```ts
import Vue3Lottie from 'vue3-lottie'

@@ -110,45 +166,47 @@ export default defineNuxtPlugin((nuxtApp) => {

- Import the css file required by the component into your **`app.vue`** file.
If you get an error with TS, try `use(Vue3Lottie, { name: "Vue3Lottie" })`
```js
import 'vue3-lottie/dist/style.css'
This should register as a global component that you can call anywhere in your app under the <Vue3Lottie> tag.
I would recommend using a `<client-only>` parent tag to ensure that the animation only loads in on the client side.
```vue
<client-only>
<Vue3Lottie
animationLink="https://assets10.lottiefiles.com/packages/lf20_soCRuE.json"
:height="200"
:width="200"
/>
</client-only>
```
# Props and options
## Props and options
More detailed explanations are provided in the [documentation](https://vue3-lottie.vercel.app/guide.html).
More detailed explanations are provided in the [documentation](https://vue3-lottie.vercel.app).
| Prop | Type | Default Value | Description |
| --------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------- |
| animationData | Object | {} | The lottie animation data provided as a JSON object |
| animationLink | String | '' | A URL link to the Lottie animation data (eg: `Lottie Animation URL` on lottiefiles.com) |
| width | Number or String | "100%" | Width of the lottie animation container (Numbers correspond to pixel values) |
| height | Number or String | "100%" | Height of the lottie animation container (Numbers correspond to pixel values) |
| speed | Number | "1" | Speed of the lottie animation |
| direction | String | "forward" | Animation play direction |
| loop | Number or Boolean | true | The number of instances that the lottie animation should run (true is infinite) |
| autoPlay | Boolean | true | Start animation on component load |
| delay | Number | 0 | Delay the animation play state by some milliseconds |
| pauseAnimation | Boolean | false | Prop to pass reactive variables so that you can control animation pause and play |
| pauseOnHover | Boolean | false | Whether to pause the animation on hover |
| playOnHover | Boolean | false | Whether to play the animation when you hover |
| backgroundColor | String | transparent | Background color of the container |
| showControls | Boolean | false | Show the lottie-player controls |
| Prop | Type | Default Value | Description |
| ---------------- | ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ |
| animationData | Object | {} | The lottie animation data provided as a JSON object |
| animationLink | String | '' | A URL link to the Lottie animation data (eg: `Lottie Animation URL` on lottiefiles.com) |
| width | Number or String | "100%" | Width of the lottie animation container (Numbers correspond to pixel values) |
| height | Number or String | "100%" | Height of the lottie animation container (Numbers correspond to pixel values) |
| speed | Number | "1" | Speed of the lottie animation |
| direction | String | "forward" | Animation play direction |
| loop | Number or Boolean | true | The number of instances that the lottie animation should run (true is infinite) |
| autoPlay | Boolean | true | Start animation on component load |
| delay | Number | 0 | Delay the animation play state by some milliseconds |
| pauseAnimation | Boolean | false | Prop to pass reactive variables so that you can control animation pause and play |
| pauseOnHover | Boolean | false | Whether to pause the animation on hover |
| playOnHover | Boolean | false | Whether to play the animation when you hover |
| backgroundColor | String | transparent | Background color of the container |
| noMargin | Boolean | false | Prevent the lottie from auto centering in the container. This gives you better control on placement within your UI |
| scale | Number | 1 | Scale the animation (might cause blurriness) |
| assetsPath | String | "" | URL to the image asset you need to use in your Lottie animation |
| renderer | String | "svg" | Set the renderer |
| rendererSettings | Object | {} | Options for if you want to use an existing canvas to draw (can be ignored on most cases) |
# Events
## Events
A few events are emitted from the component. Look at the [Demos](https://vue3-lottie.vercel.app/examples.html#listening-to-events) for examples.
A few events are emitted from the component. Look at the [Demos](#demos) for examples.
- onLoad
- This event is fired when your animation data is loaded.
- onReady
- This event is fired when your animation data is loaded and player is ready.
- onError
- This event is fired when an animation source cannot be parsed, fails to load or has format errors.
- onPlay
- This event is fired when the animation starts playing.
- onPause
- This event is fired when the animation is paused.
- onStop
- This event is fired when the animation is stopped.
- onComplete

@@ -160,6 +218,10 @@ - If your animation has a finite amount of loops you can use this event to know when the animation has completed.

- This event is fired every frame of the animation. There will be 60 events fired per second if your lottie animation runs at 60fps.
- onSegmentStart
- This event is fired when the animation enters a segment.
- onAnimationLoaded
- This event is fired when the animation has loaded. This should let you know when you can start referencing the methods for the component.
# Methods
## Methods
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.
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.

@@ -178,9 +240,24 @@ - play

- You can call this method to change the direction of your animation.
- getDuration()
- You can call this method to get the total number of frames of your animation.
- getDuration(inFrames)
- You can call this method to get the duration of your animation.
- goToAndStop(frameNumber, isFrames)
- You can call this method to go to a specific frame of your animation. The animation will be stopped at the end of this call.
- goToAndPlay(frameNumber, isFrames)
- You can call this method to go to a specific frame of your animation. The animation will be played from this frame.
- playSegments(segments, forceFlag)
- You can call this method to play a specific segment of your animation.
- setSubFrame(subFrame)
- 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.
# Credits
## Credits
A big thank you goes to [@reslear](https://github.com/reslear) for adding Typescript support to this library. Go check out his profile and give him a follow!
- [@DamianGlowala](https://github.com/DamianGlowala) - PR [#29](https://github.com/megasanjay/vue3-lottie/pull/29) - Fix `watch` function
- [@Doyeon Eum](https://lottiefiles.com/vjb2ortjmml37359) - For the hero [image](https://lottiefiles.com/20574-mongryong-hi) in this repo.
- [@Tafel](https://github.com/tafelnl) - PR[#296](https://github.com/megasanjay/vue3-lottie/pull/296) - Update lodash to the tree-shakeable versions
- [@TartanLeGrand](https://github.com/TartanLeGrand) - PR[#307](https://github.com/megasanjay/vue3-lottie/pull/307) - Add the `assetsPath` prop to the component
![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg) ![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
dist/style.css
dist/vue3-lottie.umd.js
dist/vue3-lottie.vue.d.ts
SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc