feat: add updateDocumentData method

README.md

@@ -29,10 +29,7 @@
   </p>
 </p>
 
------
-
-
-
+---
 
 `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.
 
@@ -232,6 +229,8 @@ You can control the animation with the following methods. These methods can be c
   - 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
 

docs/guide.md

@@ -428,3 +428,23 @@ You can call this method to set the subframe value. This method takes a single a
 ```js
 this.$refs.lottieContainer.setSubFrame(true)
 ```
+
+### 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.
+
+- `documentData`: An object with the document data (see below supported properties and meaning)
+- `index`: index of the text keyframe. If the text source is not keyframed, you can skip this argument. If not skipped and the source text is keyframed, it will update the current source.
+
+All supported properties:
+
+- `t`: text value
+- `s`: font size
+- `fc`: fill color - array with RGB values ranging from 0 to 1
+- `lh`: font line height
+- `sc`: stroke color - array with RGB values ranging from 0 to 1
+- `j`: justify
+
+```js
+this.$refs.lottieContainer.updateDocumentData({ t: 'new text', s: 20 }, 0)
+```

packages/playground/vite-project/src/App.vue

@@ -1,14 +1,9 @@
 <template>
   <Vue3Lottie :animationData="DogJSON" :height="300" />
   <Vue3Lottie
-    animationLink="https://assets7.lottiefiles.com/private_files/lf30_0dzl4dgt.json"
+    animationLink="https://assets1.lottiefiles.com/packages/lf20_soCRuE.json"
     :height="300"
-    ref="anim"
-    :autoPlay="false"
-    :delay="0"
-    :loop="1"
   />
-  <button @click="playAnim">Play Animation</button>
   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
 </template>
 
@@ -19,13 +14,6 @@ import HelloWorld from './components/HelloWorld.vue'
 // import 'vue3-lottie/dist/style.css'
 
 import DogJSON from './assets/dog.json'
-import { ref } from 'vue'
-
-const anim = ref(null)
-
-const playAnim = () => {
-  anim.value.play()
-}
 </script>
 
 <style>

packages/vue3-lottie/README.md

@@ -200,6 +200,8 @@ You can control the animation with the following methods. These methods can be c
   - 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
 

packages/vue3-lottie/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-lottie",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "license": "MIT",
   "author": "Sanjay Soundarajan <[email protected]> (https://sanjaysoundarajan.dev)",
   "scripts": {

packages/vue3-lottie/src/vue3-lottie.vue

@@ -382,6 +382,14 @@ export default defineComponent({
       }
     }
 
+    const updateDocumentData = (documentData: any, index: number = 0) => {
+      if (lottieAnimation) {
+        lottieAnimation.renderer.elements[index].updateDocumentData(
+          documentData,
+        )
+      }
+    }
+
     // function to generate random strings for IDs
     const makeid = (length: number) => {
       var result = ''
@@ -444,6 +452,7 @@ export default defineComponent({
       playSegments,
       setSubFrame,
       getDuration,
+      updateDocumentData,
     }
   },
 })