18/5/1404 2
This commit is contained in:
-162
@@ -1,162 +0,0 @@
|
||||
import { DotLottie } from '@lottiefiles/dotlottie-web';
|
||||
import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
|
||||
|
||||
// src/dotlottie.ts
|
||||
var DotLottieVue = defineComponent({
|
||||
props: {
|
||||
animationId: { type: String, required: false },
|
||||
autoplay: { type: Boolean, required: false },
|
||||
backgroundColor: { type: String, required: false },
|
||||
data: { type: [String, ArrayBuffer], required: false },
|
||||
loop: { type: Boolean, required: false },
|
||||
mode: { type: String, required: false },
|
||||
renderConfig: { type: Object, required: false },
|
||||
segment: { type: Array, required: false },
|
||||
speed: { type: Number, required: false },
|
||||
src: { type: String, required: false },
|
||||
useFrameInterpolation: { type: Boolean, required: false },
|
||||
marker: { type: String, required: false },
|
||||
playOnHover: { type: Boolean, required: false },
|
||||
themeData: { type: String, required: false },
|
||||
themeId: { type: String, required: false }
|
||||
},
|
||||
setup(props, { attrs, expose }) {
|
||||
const canvas = ref(void 0);
|
||||
const { backgroundColor, loop, marker, mode, playOnHover, segment, speed, useFrameInterpolation } = toRefs(props);
|
||||
let dotLottie = null;
|
||||
watch(
|
||||
() => backgroundColor?.value,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setBackgroundColor(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => marker?.value,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setMarker(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => loop?.value,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setLoop(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => mode?.value,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setMode(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => segment?.value,
|
||||
(newVal) => {
|
||||
if (!dotLottie)
|
||||
return;
|
||||
const startFrame = newVal?.[0];
|
||||
const endFrame = newVal?.[1];
|
||||
if (typeof startFrame === "number" && typeof endFrame === "number") {
|
||||
dotLottie.setSegment(startFrame, endFrame);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => speed?.value,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setSpeed(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => useFrameInterpolation?.value,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setUseFrameInterpolation(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.animationId,
|
||||
(newVal) => {
|
||||
if (dotLottie && dotLottie.isLoaded && typeof newVal !== "undefined" && newVal !== dotLottie.activeAnimationId) {
|
||||
dotLottie.loadAnimation(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.themeData,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setTheme(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.themeId,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined") {
|
||||
dotLottie.setThemeData(newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
function hoverHandler(event) {
|
||||
if (event.type === "mouseenter") {
|
||||
dotLottie?.play();
|
||||
} else {
|
||||
dotLottie?.pause();
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => playOnHover?.value,
|
||||
(newVal) => {
|
||||
if (dotLottie && typeof newVal !== "undefined" && newVal) {
|
||||
canvas.value?.addEventListener("mouseenter", hoverHandler);
|
||||
canvas.value?.addEventListener("mouseleave", hoverHandler);
|
||||
} else {
|
||||
canvas.value?.removeEventListener("mouseenter", hoverHandler);
|
||||
canvas.value?.removeEventListener("mouseleave", hoverHandler);
|
||||
}
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
if (!canvas.value)
|
||||
return;
|
||||
let shouldAutoplay = props.autoplay;
|
||||
if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
|
||||
shouldAutoplay = false;
|
||||
}
|
||||
dotLottie = new DotLottie({
|
||||
canvas: canvas.value,
|
||||
...props,
|
||||
autoplay: shouldAutoplay
|
||||
});
|
||||
if (playOnHover?.value) {
|
||||
canvas.value.addEventListener("mouseenter", hoverHandler);
|
||||
canvas.value.addEventListener("mouseleave", hoverHandler);
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
canvas.value?.addEventListener("mouseenter", hoverHandler);
|
||||
canvas.value?.addEventListener("mouseleave", hoverHandler);
|
||||
dotLottie?.destroy();
|
||||
});
|
||||
expose({
|
||||
getDotLottieInstance: () => dotLottie
|
||||
});
|
||||
return () => h("div", { ...attrs }, h("canvas", { style: "height: 100%; width: 100%", ref: canvas }));
|
||||
}
|
||||
});
|
||||
var setWasmUrl = (url) => {
|
||||
DotLottie.setWasmUrl(url);
|
||||
};
|
||||
|
||||
export { DotLottieVue, setWasmUrl };
|
||||
-59
@@ -1,59 +0,0 @@
|
||||
{
|
||||
"name": "@lottiefiles/dotlottie-vue",
|
||||
"version": "0.6.3",
|
||||
"type": "module",
|
||||
"description": "Vue wrapper around the dotlottie-web library",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/LottieFiles/dotlottie-web.git",
|
||||
"directory": "packages/vue"
|
||||
},
|
||||
"homepage": "https://github.com/LottieFiles/dotlottie-web#readme",
|
||||
"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",
|
||||
"author": "LottieFiles",
|
||||
"contributors": [
|
||||
"Abdelrahman Ashraf <a.theashraf@gmail.com>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"keywords": [
|
||||
"dotlottie",
|
||||
"lottie",
|
||||
"player",
|
||||
"animation",
|
||||
"web",
|
||||
"canvas",
|
||||
"javascript",
|
||||
"vue"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@lottiefiles/dotlottie-web": "0.44.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/runtime-dom": "^3.4.6",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"cross-env": "7.0.3",
|
||||
"tsup": "8.0.1",
|
||||
"typescript": "5.0.4"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"provenance": true
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup",
|
||||
"dev": "tsup --watch",
|
||||
"lint": "eslint --fix .",
|
||||
"stats:eslint": "cross-env TIMING=1 eslint .",
|
||||
"stats:ts": "tsc -p tsconfig.build.json --extendedDiagnostics",
|
||||
"type-check": "tsc --noEmit"
|
||||
}
|
||||
}
|
||||
-28
File diff suppressed because one or more lines are too long
-62
@@ -1,62 +0,0 @@
|
||||
{
|
||||
"name": "@lottiefiles/dotlottie-web",
|
||||
"version": "0.44.0",
|
||||
"type": "module",
|
||||
"description": "Lottie and DotLottie player for the web",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/LottieFiles/dotlottie-web.git",
|
||||
"directory": "packages/web"
|
||||
},
|
||||
"homepage": "https://github.com/LottieFiles/dotlottie-web#readme",
|
||||
"bugs": "https://github.com/LottieFiles/dotlottie-web/issues",
|
||||
"author": "LottieFiles",
|
||||
"contributors": [
|
||||
"Abdelrahman Ashraf <a.theashraf@gmail.com>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist/index.cjs",
|
||||
"module": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"keywords": [
|
||||
"dotlottie",
|
||||
"lottie",
|
||||
"player",
|
||||
"animation",
|
||||
"web",
|
||||
"canvas",
|
||||
"javascript",
|
||||
"thorvg"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.14.11",
|
||||
"@vitest/browser": "2.1.0-beta.5",
|
||||
"@vitest/coverage-istanbul": "2.1.0-beta.5",
|
||||
"cross-env": "7.0.3",
|
||||
"esbuild": "^0.23.0",
|
||||
"esbuild-plugin-replace": "^1.4.0",
|
||||
"playwright": "^1.45.2",
|
||||
"tsup": "8.2.0",
|
||||
"typescript": "5.0.4",
|
||||
"vitest": "2.1.0-beta.5"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"provenance": true
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsup",
|
||||
"dev": "tsup --watch",
|
||||
"lint": "eslint --fix .",
|
||||
"stats:eslint": "cross-env TIMING=1 eslint .",
|
||||
"stats:ts": "tsc -p tsconfig.build.json --extendedDiagnostics",
|
||||
"test": "vitest run --browser.headless",
|
||||
"test:coverage": "vitest run --browser.headless --coverage",
|
||||
"test:node": "vitest run --config ./vitest.config.node.ts",
|
||||
"test:watch": "vitest",
|
||||
"type-check": "tsc --noEmit"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user