@lottiefiles/dotlottie-vue 0.7.2 → 0.8.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 (3) hide show
  1. package/dist/dotlottie.js +77 -7
  2. package/dist/index.js +77 -7
  3. package/package.json +2 -2
package/dist/dotlottie.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { DotLottie } from '@lottiefiles/dotlottie-web';
2
- import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
2
+ import { defineComponent, ref, toRefs, computed, watch, onMounted, onBeforeUnmount, h } from 'vue';
3
3
 
4
4
  // src/dotlottie.ts
5
5
  var DotLottieVue = defineComponent({
@@ -21,23 +21,57 @@ var DotLottieVue = defineComponent({
21
21
  marker: { type: String, required: false },
22
22
  playOnHover: { type: Boolean, required: false },
23
23
  themeData: { type: String, required: false },
24
- themeId: { type: String, required: false }
24
+ themeId: { type: String, required: false },
25
+ layout: { type: Object, required: false }
25
26
  },
26
27
  setup(props, { attrs, expose }) {
27
28
  const canvas = ref(void 0);
28
29
  const {
29
30
  animationId,
30
31
  backgroundColor,
32
+ data,
33
+ layout,
31
34
  loop,
32
35
  marker,
33
36
  mode,
34
37
  playOnHover,
38
+ renderConfig,
35
39
  segment,
36
40
  speed,
41
+ src,
37
42
  themeId,
38
43
  useFrameInterpolation
39
44
  } = toRefs(props);
40
45
  let dotLottie = null;
46
+ const shouldAutoplay = computed(() => {
47
+ let _shouldAutoplay = props.autoplay;
48
+ if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
49
+ _shouldAutoplay = false;
50
+ }
51
+ return _shouldAutoplay;
52
+ });
53
+ const load = (config = {}) => {
54
+ if (dotLottie === null) {
55
+ return;
56
+ }
57
+ dotLottie.load({
58
+ animationId: animationId?.value,
59
+ backgroundColor: backgroundColor?.value,
60
+ data: data?.value,
61
+ layout: layout?.value,
62
+ loop: loop?.value,
63
+ marker: marker?.value,
64
+ mode: mode?.value,
65
+ autoplay: shouldAutoplay.value,
66
+ renderConfig: renderConfig?.value,
67
+ segment: segment?.value,
68
+ speed: speed?.value,
69
+ src: src?.value,
70
+ themeId: themeId?.value,
71
+ useFrameInterpolation: useFrameInterpolation?.value,
72
+ ...config
73
+ });
74
+ };
41
75
  watch(
42
76
  () => backgroundColor?.value,
43
77
  (newVal) => {
@@ -141,17 +175,53 @@ var DotLottieVue = defineComponent({
141
175
  }
142
176
  }
143
177
  );
178
+ watch(
179
+ () => layout?.value,
180
+ (newVal) => {
181
+ if (dotLottie && typeof newVal !== "undefined") {
182
+ dotLottie.setLayout(newVal);
183
+ }
184
+ },
185
+ { deep: true }
186
+ );
187
+ watch(
188
+ () => renderConfig?.value,
189
+ (newVal) => {
190
+ if (dotLottie && typeof newVal !== "undefined") {
191
+ dotLottie.setRenderConfig(newVal);
192
+ }
193
+ },
194
+ { deep: true }
195
+ );
196
+ watch(
197
+ () => data?.value,
198
+ (newVal) => {
199
+ const isStrOrObject = typeof newVal === "object" || typeof newVal === "string";
200
+ if (dotLottie && isStrOrObject) {
201
+ load({
202
+ data: newVal
203
+ });
204
+ }
205
+ },
206
+ { deep: true }
207
+ );
208
+ watch(
209
+ () => src?.value,
210
+ (newVal) => {
211
+ if (dotLottie && typeof newVal !== "undefined") {
212
+ load({
213
+ src: newVal
214
+ });
215
+ }
216
+ }
217
+ );
144
218
  onMounted(() => {
145
219
  if (!canvas.value)
146
220
  return;
147
- let shouldAutoplay = props.autoplay;
148
- if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
149
- shouldAutoplay = false;
150
- }
151
221
  dotLottie = new DotLottie({
152
222
  canvas: canvas.value,
153
223
  ...props,
154
- autoplay: shouldAutoplay
224
+ autoplay: shouldAutoplay.value
155
225
  });
156
226
  if (playOnHover?.value) {
157
227
  canvas.value.addEventListener("mouseenter", hoverHandler);
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { DotLottie } from '@lottiefiles/dotlottie-web';
2
- import { defineComponent, ref, toRefs, watch, onMounted, onBeforeUnmount, h } from 'vue';
2
+ import { defineComponent, ref, toRefs, computed, watch, onMounted, onBeforeUnmount, h } from 'vue';
3
3
 
4
4
  // src/dotlottie.ts
5
5
  var DotLottieVue = defineComponent({
@@ -21,23 +21,57 @@ var DotLottieVue = defineComponent({
21
21
  marker: { type: String, required: false },
22
22
  playOnHover: { type: Boolean, required: false },
23
23
  themeData: { type: String, required: false },
24
- themeId: { type: String, required: false }
24
+ themeId: { type: String, required: false },
25
+ layout: { type: Object, required: false }
25
26
  },
26
27
  setup(props, { attrs, expose }) {
27
28
  const canvas = ref(void 0);
28
29
  const {
29
30
  animationId,
30
31
  backgroundColor,
32
+ data,
33
+ layout,
31
34
  loop,
32
35
  marker,
33
36
  mode,
34
37
  playOnHover,
38
+ renderConfig,
35
39
  segment,
36
40
  speed,
41
+ src,
37
42
  themeId,
38
43
  useFrameInterpolation
39
44
  } = toRefs(props);
40
45
  let dotLottie = null;
46
+ const shouldAutoplay = computed(() => {
47
+ let _shouldAutoplay = props.autoplay;
48
+ if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
49
+ _shouldAutoplay = false;
50
+ }
51
+ return _shouldAutoplay;
52
+ });
53
+ const load = (config = {}) => {
54
+ if (dotLottie === null) {
55
+ return;
56
+ }
57
+ dotLottie.load({
58
+ animationId: animationId?.value,
59
+ backgroundColor: backgroundColor?.value,
60
+ data: data?.value,
61
+ layout: layout?.value,
62
+ loop: loop?.value,
63
+ marker: marker?.value,
64
+ mode: mode?.value,
65
+ autoplay: shouldAutoplay.value,
66
+ renderConfig: renderConfig?.value,
67
+ segment: segment?.value,
68
+ speed: speed?.value,
69
+ src: src?.value,
70
+ themeId: themeId?.value,
71
+ useFrameInterpolation: useFrameInterpolation?.value,
72
+ ...config
73
+ });
74
+ };
41
75
  watch(
42
76
  () => backgroundColor?.value,
43
77
  (newVal) => {
@@ -141,17 +175,53 @@ var DotLottieVue = defineComponent({
141
175
  }
142
176
  }
143
177
  );
178
+ watch(
179
+ () => layout?.value,
180
+ (newVal) => {
181
+ if (dotLottie && typeof newVal !== "undefined") {
182
+ dotLottie.setLayout(newVal);
183
+ }
184
+ },
185
+ { deep: true }
186
+ );
187
+ watch(
188
+ () => renderConfig?.value,
189
+ (newVal) => {
190
+ if (dotLottie && typeof newVal !== "undefined") {
191
+ dotLottie.setRenderConfig(newVal);
192
+ }
193
+ },
194
+ { deep: true }
195
+ );
196
+ watch(
197
+ () => data?.value,
198
+ (newVal) => {
199
+ const isStrOrObject = typeof newVal === "object" || typeof newVal === "string";
200
+ if (dotLottie && isStrOrObject) {
201
+ load({
202
+ data: newVal
203
+ });
204
+ }
205
+ },
206
+ { deep: true }
207
+ );
208
+ watch(
209
+ () => src?.value,
210
+ (newVal) => {
211
+ if (dotLottie && typeof newVal !== "undefined") {
212
+ load({
213
+ src: newVal
214
+ });
215
+ }
216
+ }
217
+ );
144
218
  onMounted(() => {
145
219
  if (!canvas.value)
146
220
  return;
147
- let shouldAutoplay = props.autoplay;
148
- if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
149
- shouldAutoplay = false;
150
- }
151
221
  dotLottie = new DotLottie({
152
222
  canvas: canvas.value,
153
223
  ...props,
154
- autoplay: shouldAutoplay
224
+ autoplay: shouldAutoplay.value
155
225
  });
156
226
  if (playOnHover?.value) {
157
227
  canvas.value.addEventListener("mouseenter", hoverHandler);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lottiefiles/dotlottie-vue",
3
- "version": "0.7.2",
3
+ "version": "0.8.0",
4
4
  "type": "module",
5
5
  "description": "Vue wrapper around the dotlottie-web library",
6
6
  "repository": {
@@ -35,7 +35,7 @@
35
35
  "vue": "^3.3.4"
36
36
  },
37
37
  "dependencies": {
38
- "@lottiefiles/dotlottie-web": "0.47.0"
38
+ "@lottiefiles/dotlottie-web": "0.48.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@vue/runtime-dom": "^3.4.6",