@lottiefiles/dotlottie-vue 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE +16 -0
  2. package/README.md +127 -0
  3. package/dist/dotlottie.d.ts +96 -0
  4. package/dist/dotlottie.js +127 -0
  5. package/dist/index.d.ts +3 -0
  6. package/dist/index.js +1 -0
  7. package/package.json +61 -0
package/LICENSE ADDED
@@ -0,0 +1,16 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023 LottieFiles.com
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
6
+ documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
7
+ rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
8
+ persons to whom the Software is furnished to do so, subject to the following conditions:
9
+
10
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
11
+ Software.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
14
+ WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
15
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
16
+ OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,127 @@
1
+ # @lottiefiles/dotlottie-vue
2
+
3
+ ![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-vue)
4
+ ![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Fdotlottie-vue)
5
+ ![npm](https://img.shields.io/npm/dt/%40lottiefiles/dotlottie-vue)
6
+ ![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-vue)
7
+
8
+ <p align="center">
9
+ <img src="https://user-images.githubusercontent.com/23125742/201124166-c2a0bc2a-018b-463b-b291-944fb767b5c2.png" />
10
+ </p>
11
+
12
+ > 🚧 **Beta Alert:** We're still refining! The APIs in this package may undergo changes.
13
+
14
+ ## Contents
15
+
16
+ * [Introduction](#introduction)
17
+ * [What is dotLottie?](#what-is-dotlottie)
18
+ * [Installation](#installation)
19
+ * [Usage](#usage)
20
+ * [APIs](#apis)
21
+ * [DotLottieVue Props](#dotlottievue-props)
22
+ * [Listening to DotLottie Events](#listening-to-dotlottie-events)
23
+ * [Development](#development)
24
+ * [Setup](#setup)
25
+ * [Dev](#dev)
26
+ * [Build](#build)
27
+
28
+ ## Introduction
29
+
30
+ A Vue library for rendering [lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://dotlottie.io) animations in the browser.
31
+
32
+ ### What is dotLottie?
33
+
34
+ dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".
35
+
36
+ [Learn more about dotLottie](https://dotlottie.io/).
37
+
38
+ ## Installation
39
+
40
+ ```bash
41
+ npm install @lottiefiles/dotlottie-vue
42
+ ```
43
+
44
+ ## Usage
45
+
46
+ ```vue
47
+ <script setup>
48
+ import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
49
+ </script>
50
+
51
+ <template>
52
+ <DotLottieVue style="height: 500px; width: 500px" autoplay loop src="https://path-to-lottie.lottie" />
53
+ </template>
54
+ ```
55
+
56
+ ## APIs
57
+
58
+ ### DotLottieVue Props
59
+
60
+ | Property name | Type | Required | Default | Description |
61
+ | ----------------------- | --------------------- | :------: | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
62
+ | `autoplay` | boolean | | false | Auto-starts the animation on load. |
63
+ | `loop` | boolean | | false | Determines if the animation should loop. |
64
+ | `src` | string | | undefined | URL to the animation data (`.json` or `.lottie`). |
65
+ | `speed` | number | | 1 | Animation playback speed. 1 is regular speed. |
66
+ | `data` | string \| ArrayBuffer | | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
67
+ | `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse". |
68
+ | `backgroundColor` | string | | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"), |
69
+ | `segments` | \[number, number] | | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
70
+ | `renderConfig` | RenderConfig | | `{}` | Configuration for rendering the animation. |
71
+ | `useFrameInterpolation` | boolean | | false | Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true. |
72
+
73
+ ### Listening to [DotLottie](../web/README.md) Events
74
+
75
+ ```vue
76
+ <script setup>
77
+ import { onMounted, ref, watch } from 'vue';
78
+ import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
79
+ const playerRef = ref(null);
80
+
81
+ onMounted(() => {
82
+ if (playerRef.value) {
83
+ const dotLottie = playerRef.value.getDotLottieInstance();
84
+ dotLottie.addEventListener('pause', () => {
85
+ console.log('paused')
86
+ });
87
+ dotlottie.addEventListener('frame', ({ currentFrame }) => {
88
+ console.log('Frame:', currentFrame)
89
+ });
90
+ }
91
+ })
92
+ </script>
93
+
94
+ <template>
95
+ <DotLottieVue autoplay loop ref="playerRef" src="path-to-lottie.lottie" />
96
+ </template>
97
+ ```
98
+
99
+ > Refer to [DotLottie](../web/README.md) Events sections to know more about all available events.
100
+
101
+ #### RenderConfig
102
+
103
+ The `renderConfig` object accepts the following properties:
104
+
105
+ | Property name | Type | Required | Default | Description |
106
+ | ------------------ | ------ | :------: | ----------------------------- | ----------------------- |
107
+ | `devicePixelRatio` | number | | window\.devicePixelRatio \| 1 | The device pixel ratio. |
108
+
109
+ ## Development
110
+
111
+ ### Setup
112
+
113
+ ```bash
114
+ pnpm install
115
+ ```
116
+
117
+ ### Dev
118
+
119
+ ```bash
120
+ pnpm dev
121
+ ```
122
+
123
+ ### Build
124
+
125
+ ```bash
126
+ pnpm build
127
+ ```
package/dist/dotlottie.d.ts ADDED
@@ -0,0 +1,96 @@
1
+ import * as vue from 'vue';
2
+ import { VNode } from 'vue';
3
+ import { Config, Mode } from '@lottiefiles/dotlottie-web';
4
+ export { DotLottie } from '@lottiefiles/dotlottie-web';
5
+
6
+ interface DotLottieVueProps extends Omit<Config, 'canvas'> {
7
+ }
8
+ declare const DotLottieVue: vue.DefineComponent<{
9
+ autoplay: {
10
+ type: BooleanConstructor;
11
+ required: false;
12
+ };
13
+ backgroundColor: {
14
+ type: StringConstructor;
15
+ required: false;
16
+ };
17
+ data: {
18
+ type: (StringConstructor | ArrayBufferConstructor)[];
19
+ required: false;
20
+ };
21
+ loop: {
22
+ type: BooleanConstructor;
23
+ required: false;
24
+ };
25
+ mode: {
26
+ type: () => Mode;
27
+ required: false;
28
+ };
29
+ renderConfig: {
30
+ type: ObjectConstructor;
31
+ required: false;
32
+ };
33
+ segments: {
34
+ type: () => [number, number];
35
+ required: false;
36
+ };
37
+ speed: {
38
+ type: NumberConstructor;
39
+ required: false;
40
+ };
41
+ src: {
42
+ type: StringConstructor;
43
+ required: false;
44
+ };
45
+ useFrameInterpolation: {
46
+ type: BooleanConstructor;
47
+ required: false;
48
+ };
49
+ }, () => VNode, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
50
+ autoplay: {
51
+ type: BooleanConstructor;
52
+ required: false;
53
+ };
54
+ backgroundColor: {
55
+ type: StringConstructor;
56
+ required: false;
57
+ };
58
+ data: {
59
+ type: (StringConstructor | ArrayBufferConstructor)[];
60
+ required: false;
61
+ };
62
+ loop: {
63
+ type: BooleanConstructor;
64
+ required: false;
65
+ };
66
+ mode: {
67
+ type: () => Mode;
68
+ required: false;
69
+ };
70
+ renderConfig: {
71
+ type: ObjectConstructor;
72
+ required: false;
73
+ };
74
+ segments: {
75
+ type: () => [number, number];
76
+ required: false;
77
+ };
78
+ speed: {
79
+ type: NumberConstructor;
80
+ required: false;
81
+ };
82
+ src: {
83
+ type: StringConstructor;
84
+ required: false;
85
+ };
86
+ useFrameInterpolation: {
87
+ type: BooleanConstructor;
88
+ required: false;
89
+ };
90
+ }>>, {
91
+ autoplay: boolean;
92
+ loop: boolean;
93
+ useFrameInterpolation: boolean;
94
+ }, {}>;
95
+
96
+ export { DotLottieVue, type DotLottieVueProps };
package/dist/dotlottie.js ADDED
@@ -0,0 +1,127 @@
1
+ import { DotLottie } from '@lottiefiles/dotlottie-web';
2
+ import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
3
+
4
+ const DotLottieVue = defineComponent({
5
+ props: {
6
+ autoplay: { type: Boolean, required: false },
7
+ backgroundColor: { type: String, required: false },
8
+ data: { type: [String, ArrayBuffer], required: false },
9
+ loop: { type: Boolean, required: false },
10
+ mode: { type: String, required: false },
11
+ renderConfig: { type: Object, required: false },
12
+ segments: { type: Array, required: false },
13
+ speed: { type: Number, required: false },
14
+ src: { type: String, required: false },
15
+ useFrameInterpolation: { type: Boolean, required: false }
16
+ },
17
+ setup(props, { attrs, expose }) {
18
+ const canvas = ref(void 0);
19
+ const { backgroundColor, loop, mode, segments, speed, useFrameInterpolation } = toRefs(props);
20
+ let dotLottie = null;
21
+ let intersectionObserver = null;
22
+ let resizeObserver = null;
23
+ watch(
24
+ () => backgroundColor?.value,
25
+ (newVal) => {
26
+ if (dotLottie && typeof newVal !== "undefined") {
27
+ dotLottie.setBackgroundColor(newVal);
28
+ }
29
+ }
30
+ );
31
+ watch(
32
+ () => loop?.value,
33
+ (newVal) => {
34
+ if (dotLottie && typeof newVal !== "undefined") {
35
+ dotLottie.setLoop(newVal);
36
+ }
37
+ }
38
+ );
39
+ watch(
40
+ () => mode?.value,
41
+ (newVal) => {
42
+ if (dotLottie && typeof newVal !== "undefined") {
43
+ dotLottie.setMode(newVal);
44
+ }
45
+ }
46
+ );
47
+ watch(
48
+ () => segments?.value,
49
+ (newVal) => {
50
+ if (dotLottie && Array.isArray(newVal) && newVal.length === 2) {
51
+ dotLottie.setSegments(newVal[0], newVal[1]);
52
+ }
53
+ }
54
+ );
55
+ watch(
56
+ () => speed?.value,
57
+ (newVal) => {
58
+ if (dotLottie && typeof newVal !== "undefined") {
59
+ dotLottie.setSpeed(newVal);
60
+ }
61
+ }
62
+ );
63
+ watch(
64
+ () => useFrameInterpolation?.value,
65
+ (newVal) => {
66
+ if (dotLottie && typeof newVal !== "undefined") {
67
+ dotLottie.setUseFrameInterpolation(newVal);
68
+ }
69
+ }
70
+ );
71
+ function getIntersectionObserver() {
72
+ return new IntersectionObserver(
73
+ (entries) => {
74
+ entries.forEach((entry) => {
75
+ if (entry.isIntersecting) {
76
+ dotLottie?.unfreeze();
77
+ } else {
78
+ dotLottie?.freeze();
79
+ }
80
+ });
81
+ },
82
+ {
83
+ threshold: 0
84
+ }
85
+ );
86
+ }
87
+ function getResizeObserver() {
88
+ return new ResizeObserver((entries) => {
89
+ entries.forEach(() => {
90
+ dotLottie?.resize();
91
+ });
92
+ });
93
+ }
94
+ function onVisibilityChange() {
95
+ if (document.hidden) {
96
+ dotLottie?.freeze();
97
+ } else {
98
+ dotLottie?.unfreeze();
99
+ }
100
+ }
101
+ onMounted(() => {
102
+ if (!canvas.value)
103
+ return;
104
+ dotLottie = new DotLottie({
105
+ canvas: canvas.value,
106
+ ...props
107
+ });
108
+ intersectionObserver = getIntersectionObserver();
109
+ resizeObserver = getResizeObserver();
110
+ intersectionObserver.observe(canvas.value);
111
+ resizeObserver.observe(canvas.value);
112
+ document.addEventListener("visibilitychange", onVisibilityChange);
113
+ });
114
+ onBeforeUnmount(() => {
115
+ resizeObserver?.disconnect();
116
+ intersectionObserver?.disconnect();
117
+ document.removeEventListener("visibilitychange", onVisibilityChange);
118
+ dotLottie?.destroy();
119
+ });
120
+ expose({
121
+ getDotLottieInstance: () => dotLottie
122
+ });
123
+ return () => h("div", { ...attrs }, h("canvas", { style: "height: 100%; width: 100%", ref: canvas }));
124
+ }
125
+ });
126
+
127
+ export { DotLottieVue };
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { DotLottieVue, DotLottieVueProps } from './dotlottie.js';
2
+ export { DotLottie } from '@lottiefiles/dotlottie-web';
3
+ import 'vue';
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from './dotlottie';
package/package.json ADDED
@@ -0,0 +1,61 @@
1
+ {
2
+ "name": "@lottiefiles/dotlottie-vue",
3
+ "version": "0.1.0",
4
+ "type": "module",
5
+ "description": "Vue wrapper around the dotlottie-web library",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/LottieFiles/dotlottie-web.git",
9
+ "directory": "packages/vue"
10
+ },
11
+ "homepage": "https://github.com/LottieFiles/dotlottie-web#readme",
12
+ "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",
13
+ "author": "LottieFiles",
14
+ "contributors": [
15
+ "Abdelrahman Ashraf <a.theashraf@gmail.com>"
16
+ ],
17
+ "license": "MIT",
18
+ "engines": {
19
+ "node": ">=18"
20
+ },
21
+ "main": "dist/index.js",
22
+ "module": "dist/index.js",
23
+ "types": "dist/index.d.ts",
24
+ "files": [
25
+ "dist"
26
+ ],
27
+ "keywords": [
28
+ "dotlottie",
29
+ "lottie",
30
+ "player",
31
+ "animation",
32
+ "web",
33
+ "canvas",
34
+ "javascript",
35
+ "vue"
36
+ ],
37
+ "peerDependencies": {
38
+ "vue": "^3.3.4"
39
+ },
40
+ "dependencies": {
41
+ "@lottiefiles/dotlottie-web": "0.11.1"
42
+ },
43
+ "devDependencies": {
44
+ "@vue/runtime-dom": "^3.4.6",
45
+ "@vue/tsconfig": "^0.5.1",
46
+ "cross-env": "7.0.3",
47
+ "tsup": "8.0.1",
48
+ "typescript": "5.0.4"
49
+ },
50
+ "publishConfig": {
51
+ "access": "public"
52
+ },
53
+ "scripts": {
54
+ "build": "tsup",
55
+ "dev": "tsup --watch",
56
+ "lint": "eslint --fix .",
57
+ "stats:eslint": "cross-env TIMING=1 eslint .",
58
+ "stats:ts": "tsc -p tsconfig.build.json --extendedDiagnostics",
59
+ "type-check": "tsc --noEmit"
60
+ }
61
+ }