Merge pull request #3 from Applelo/dev

Version 1.1.0

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

README.md

@@ -71,6 +71,30 @@ By default, Blottie will load the lighter version (`light`) of Lottie for the re
 </template>
 ```
 
+If needed, you can access the lottie player before the lottie `loadAnimation` method. You can use the `before-init` prop allowing you to pass an asynchrone callback with the player as an argument (check the example below).
+
+This is necessary for allowing to use `setLocationHref` to [fix Safari issue](https://github.com/airbnb/lottie-web#issues).
+
+<script setup lang="ts">
+import type { LottiePlayer } from 'lottie-web'
+import { Blottie } from './../..'
+
+const beforeInit = async (player: LottiePlayer) => {
+  console.log(player)
+}
+</script>
+
+<template>
+  <div>
+    <Blottie
+      class="animation"
+      path="vue-js.json"
+      :before-init="beforeInit"
+      :autoplay="true"
+    />
+  </div>
+</template>
+
 An additional prop `container-tag` is available to change the default `div` tag container.
 
 ```vue

demo/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AnimationItem } from 'lottie-web'
+import type { AnimationItem, LottiePlayer } from 'lottie-web'
 import { ref } from 'vue'
 import { Blottie, type BlottieExpose } from './../..'
 import animVueJS from './assets/vue-js.json'
@@ -14,6 +14,10 @@ const onFrame = (anim?: AnimationItem) => {
 const onReady = (anim?: AnimationItem | undefined) => {
   anim?.play()
 }
+
+const beforeInit = async (player: LottiePlayer) => {
+  console.log(player)
+}
 </script>
 
 <template>
@@ -24,6 +28,7 @@ const onReady = (anim?: AnimationItem | undefined) => {
       class="animation"
       path="vue-js.json"
       @enter-frame="onFrame"
+      :before-init="beforeInit"
       :autoplay="true"
       :loop="true"
       renderer="html"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "blottie",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "GPL-3.0",
   "description": "Lottie component for VueJS 3 / Nuxt 3 ",
   "author": "Applelo",
@@ -49,15 +49,17 @@
     "type"
   ],
   "dependencies": {
-    "lottie-web": "^5.10.2",
-    "vue": "^3.2.47"
+    "lottie-web": "^5.10.2"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "@types/node": "^18.13.0",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
+    "@types/node": "^18.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "@vitejs/plugin-vue": "^4.0.0",
-    "cypress": "^12.5.1",
+    "cypress": "^12.6.0",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-define-config": "^1.15.0",
@@ -66,8 +68,9 @@
     "lodash.get": "^4.4.2",
     "prettier": "^2.8.4",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vue-tsc": "^1.0.24"
+    "vite": "^4.1.3",
+    "vue": "^3.2.47",
+    "vue-tsc": "^1.1.4"
   },
   "packageManager": "[email protected]",
   "publishConfig": {