@lottiefiles/dotlottie-vue 0.1.0 → 0.1.2

package/README.md

@@ -17,9 +17,10 @@
   * [What is dotLottie?](#what-is-dotlottie)
 * [Installation](#installation)
 * [Usage](#usage)
+* [Live Examples](#live-examples)
 * [APIs](#apis)
   * [DotLottieVue Props](#dotlottievue-props)
-  * [Listening to DotLottie Events](#listening-to-dotlottie-events)
+  * [Listening to Events](#listening-to-events)
 * [Development](#development)
   * [Setup](#setup)
   * [Dev](#dev)
@@ -53,6 +54,10 @@ import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 </template>
 ```
 
+## Live Examples
+
+* <a href="https://codepen.io/lottiefiles/pen/yLwgeoJ" target="_blank">Basic Example</a>
+
 ## APIs
 
 ### DotLottieVue Props
@@ -70,9 +75,17 @@ import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 | `renderConfig`          | RenderConfig          |          | `{}`                  | Configuration for rendering the animation.                                                                                                                                                                                                         |
 | `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. |
 
-### Listening to [DotLottie](../web/README.md) Events
+#### RenderConfig
 
-```vue
+The `renderConfig` object accepts the following properties:
+
+| Property name      | Type   | Required | Default                       | Description             |
+| ------------------ | ------ | :------: | ----------------------------- | ----------------------- |
+| `devicePixelRatio` | number |          | window\.devicePixelRatio \| 1 | The device pixel ratio. |
+
+### Listening to Events
+
+```javascript
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
@@ -96,15 +109,7 @@ onMounted(() => {
 </template>
 ```
 
-> Refer to [DotLottie](../web/README.md) Events sections to know more about all available events.
-
-#### RenderConfig
-
-The `renderConfig` object accepts the following properties:
-
-| Property name      | Type   | Required | Default                       | Description             |
-| ------------------ | ------ | :------: | ----------------------------- | ----------------------- |
-| `devicePixelRatio` | number |          | window\.devicePixelRatio \| 1 | The device pixel ratio. |
+> Refer to [dotlottie-web](../web/README.md) Events sections to know more about all available events.
 
 ## Development
 

package/dist/dotlottie.js

@@ -1,7 +1,8 @@
 import { DotLottie } from '@lottiefiles/dotlottie-web';
 import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
 
-const DotLottieVue = defineComponent({
+// src/dotlottie.ts
+var DotLottieVue = defineComponent({
   props: {
     autoplay: { type: Boolean, required: false },
     backgroundColor: { type: String, required: false },

package/dist/index.js

@@ -1 +1,128 @@
-export * from './dotlottie';
+import { DotLottie } from '@lottiefiles/dotlottie-web';
+import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
+
+// src/dotlottie.ts
+var DotLottieVue = defineComponent({
+  props: {
+    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 },
+    segments: { type: Array, required: false },
+    speed: { type: Number, required: false },
+    src: { type: String, required: false },
+    useFrameInterpolation: { type: Boolean, required: false }
+  },
+  setup(props, { attrs, expose }) {
+    const canvas = ref(void 0);
+    const { backgroundColor, loop, mode, segments, speed, useFrameInterpolation } = toRefs(props);
+    let dotLottie = null;
+    let intersectionObserver = null;
+    let resizeObserver = null;
+    watch(
+      () => backgroundColor?.value,
+      (newVal) => {
+        if (dotLottie && typeof newVal !== "undefined") {
+          dotLottie.setBackgroundColor(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(
+      () => segments?.value,
+      (newVal) => {
+        if (dotLottie && Array.isArray(newVal) && newVal.length === 2) {
+          dotLottie.setSegments(newVal[0], newVal[1]);
+        }
+      }
+    );
+    watch(
+      () => speed?.value,
+      (newVal) => {
+        if (dotLottie && typeof newVal !== "undefined") {
+          dotLottie.setSpeed(newVal);
+        }
+      }
+    );
+    watch(
+      () => useFrameInterpolation?.value,
+      (newVal) => {
+        if (dotLottie && typeof newVal !== "undefined") {
+          dotLottie.setUseFrameInterpolation(newVal);
+        }
+      }
+    );
+    function getIntersectionObserver() {
+      return new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              dotLottie?.unfreeze();
+            } else {
+              dotLottie?.freeze();
+            }
+          });
+        },
+        {
+          threshold: 0
+        }
+      );
+    }
+    function getResizeObserver() {
+      return new ResizeObserver((entries) => {
+        entries.forEach(() => {
+          dotLottie?.resize();
+        });
+      });
+    }
+    function onVisibilityChange() {
+      if (document.hidden) {
+        dotLottie?.freeze();
+      } else {
+        dotLottie?.unfreeze();
+      }
+    }
+    onMounted(() => {
+      if (!canvas.value)
+        return;
+      dotLottie = new DotLottie({
+        canvas: canvas.value,
+        ...props
+      });
+      intersectionObserver = getIntersectionObserver();
+      resizeObserver = getResizeObserver();
+      intersectionObserver.observe(canvas.value);
+      resizeObserver.observe(canvas.value);
+      document.addEventListener("visibilitychange", onVisibilityChange);
+    });
+    onBeforeUnmount(() => {
+      resizeObserver?.disconnect();
+      intersectionObserver?.disconnect();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      dotLottie?.destroy();
+    });
+    expose({
+      getDotLottieInstance: () => dotLottie
+    });
+    return () => h("div", { ...attrs }, h("canvas", { style: "height: 100%; width: 100%", ref: canvas }));
+  }
+});
+
+export { DotLottieVue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lottiefiles/dotlottie-vue",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Vue wrapper around the dotlottie-web library",
   "repository": {
@@ -38,7 +38,7 @@
     "vue": "^3.3.4"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "0.11.1"
+    "@lottiefiles/dotlottie-web": "0.12.1"
   },
   "devDependencies": {
     "@vue/runtime-dom": "^3.4.6",