@lottiefiles/dotlottie-vue 0.4.12 → 0.4.13

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 (4) hide show
  1. package/dist/dotlottie.d.ts +0 -12
  2. package/dist/dotlottie.js +7 -47
  3. package/dist/index.js +7 -47
  4. package/package.json +2 -2
package/dist/dotlottie.d.ts CHANGED
@@ -5,7 +5,6 @@ export { DotLottie } from '@lottiefiles/dotlottie-web';
5
5
 
6
6
  interface DotLottieVueProps extends Omit<Config, 'canvas'> {
7
7
  animationId?: string;
8
- autoResizeCanvas?: boolean;
9
8
  playOnHover?: boolean;
10
9
  themeData?: string;
11
10
  themeId?: string;
@@ -62,11 +61,6 @@ declare const DotLottieVue: vue.DefineComponent<{
62
61
  type: StringConstructor;
63
62
  required: false;
64
63
  };
65
- autoResizeCanvas: {
66
- type: BooleanConstructor;
67
- required: false;
68
- default: boolean;
69
- };
70
64
  playOnHover: {
71
65
  type: BooleanConstructor;
72
66
  required: false;
@@ -128,11 +122,6 @@ declare const DotLottieVue: vue.DefineComponent<{
128
122
  type: StringConstructor;
129
123
  required: false;
130
124
  };
131
- autoResizeCanvas: {
132
- type: BooleanConstructor;
133
- required: false;
134
- default: boolean;
135
- };
136
125
  playOnHover: {
137
126
  type: BooleanConstructor;
138
127
  required: false;
@@ -149,7 +138,6 @@ declare const DotLottieVue: vue.DefineComponent<{
149
138
  autoplay: boolean;
150
139
  loop: boolean;
151
140
  useFrameInterpolation: boolean;
152
- autoResizeCanvas: boolean;
153
141
  playOnHover: boolean;
154
142
  }, {}>;
155
143
  type DotLottieVueInstance = InstanceType<typeof DotLottieVue> & DotLottieVueExposed;
package/dist/dotlottie.js CHANGED
@@ -16,27 +16,14 @@ var DotLottieVue = defineComponent({
16
16
  src: { type: String, required: false },
17
17
  useFrameInterpolation: { type: Boolean, required: false },
18
18
  marker: { type: String, required: false },
19
- autoResizeCanvas: { type: Boolean, required: false, default: true },
20
19
  playOnHover: { type: Boolean, required: false },
21
20
  themeData: { type: String, required: false },
22
21
  themeId: { type: String, required: false }
23
22
  },
24
23
  setup(props, { attrs, expose }) {
25
24
  const canvas = ref(void 0);
26
- const {
27
- autoResizeCanvas,
28
- backgroundColor,
29
- loop,
30
- marker,
31
- mode,
32
- playOnHover,
33
- segment,
34
- speed,
35
- useFrameInterpolation
36
- } = toRefs(props);
25
+ const { backgroundColor, loop, marker, mode, playOnHover, segment, speed, useFrameInterpolation } = toRefs(props);
37
26
  let dotLottie = null;
38
- let intersectionObserver = null;
39
- let resizeObserver = null;
40
27
  watch(
41
28
  () => backgroundColor?.value,
42
29
  (newVal) => {
@@ -72,8 +59,12 @@ var DotLottieVue = defineComponent({
72
59
  watch(
73
60
  () => segment?.value,
74
61
  (newVal) => {
75
- if (dotLottie && Array.isArray(newVal) && newVal.length === 2) {
76
- dotLottie.setSegment(newVal[0], newVal[1]);
62
+ if (!dotLottie)
63
+ return;
64
+ const startFrame = newVal?.[0];
65
+ const endFrame = newVal?.[1];
66
+ if (typeof startFrame === "number" && typeof endFrame === "number") {
67
+ dotLottie.setSegment(startFrame, endFrame);
77
68
  }
78
69
  }
79
70
  );
@@ -136,29 +127,6 @@ var DotLottieVue = defineComponent({
136
127
  }
137
128
  }
138
129
  );
139
- function getIntersectionObserver() {
140
- return new IntersectionObserver(
141
- (entries) => {
142
- entries.forEach((entry) => {
143
- if (entry.isIntersecting) {
144
- dotLottie?.unfreeze();
145
- } else {
146
- dotLottie?.freeze();
147
- }
148
- });
149
- },
150
- {
151
- threshold: 0
152
- }
153
- );
154
- }
155
- function getResizeObserver() {
156
- return new ResizeObserver((entries) => {
157
- entries.forEach(() => {
158
- dotLottie?.resize();
159
- });
160
- });
161
- }
162
130
  onMounted(() => {
163
131
  if (!canvas.value)
164
132
  return;
@@ -171,20 +139,12 @@ var DotLottieVue = defineComponent({
171
139
  ...props,
172
140
  autoplay: shouldAutoplay
173
141
  });
174
- intersectionObserver = getIntersectionObserver();
175
- intersectionObserver.observe(canvas.value);
176
- if (typeof autoResizeCanvas?.value === "boolean" && autoResizeCanvas.value) {
177
- resizeObserver = getResizeObserver();
178
- resizeObserver.observe(canvas.value);
179
- }
180
142
  if (playOnHover?.value) {
181
143
  canvas.value.addEventListener("mouseenter", hoverHandler);
182
144
  canvas.value.addEventListener("mouseleave", hoverHandler);
183
145
  }
184
146
  });
185
147
  onBeforeUnmount(() => {
186
- resizeObserver?.disconnect();
187
- intersectionObserver?.disconnect();
188
148
  canvas.value?.addEventListener("mouseenter", hoverHandler);
189
149
  canvas.value?.addEventListener("mouseleave", hoverHandler);
190
150
  dotLottie?.destroy();
package/dist/index.js CHANGED
@@ -16,27 +16,14 @@ var DotLottieVue = defineComponent({
16
16
  src: { type: String, required: false },
17
17
  useFrameInterpolation: { type: Boolean, required: false },
18
18
  marker: { type: String, required: false },
19
- autoResizeCanvas: { type: Boolean, required: false, default: true },
20
19
  playOnHover: { type: Boolean, required: false },
21
20
  themeData: { type: String, required: false },
22
21
  themeId: { type: String, required: false }
23
22
  },
24
23
  setup(props, { attrs, expose }) {
25
24
  const canvas = ref(void 0);
26
- const {
27
- autoResizeCanvas,
28
- backgroundColor,
29
- loop,
30
- marker,
31
- mode,
32
- playOnHover,
33
- segment,
34
- speed,
35
- useFrameInterpolation
36
- } = toRefs(props);
25
+ const { backgroundColor, loop, marker, mode, playOnHover, segment, speed, useFrameInterpolation } = toRefs(props);
37
26
  let dotLottie = null;
38
- let intersectionObserver = null;
39
- let resizeObserver = null;
40
27
  watch(
41
28
  () => backgroundColor?.value,
42
29
  (newVal) => {
@@ -72,8 +59,12 @@ var DotLottieVue = defineComponent({
72
59
  watch(
73
60
  () => segment?.value,
74
61
  (newVal) => {
75
- if (dotLottie && Array.isArray(newVal) && newVal.length === 2) {
76
- dotLottie.setSegment(newVal[0], newVal[1]);
62
+ if (!dotLottie)
63
+ return;
64
+ const startFrame = newVal?.[0];
65
+ const endFrame = newVal?.[1];
66
+ if (typeof startFrame === "number" && typeof endFrame === "number") {
67
+ dotLottie.setSegment(startFrame, endFrame);
77
68
  }
78
69
  }
79
70
  );
@@ -136,29 +127,6 @@ var DotLottieVue = defineComponent({
136
127
  }
137
128
  }
138
129
  );
139
- function getIntersectionObserver() {
140
- return new IntersectionObserver(
141
- (entries) => {
142
- entries.forEach((entry) => {
143
- if (entry.isIntersecting) {
144
- dotLottie?.unfreeze();
145
- } else {
146
- dotLottie?.freeze();
147
- }
148
- });
149
- },
150
- {
151
- threshold: 0
152
- }
153
- );
154
- }
155
- function getResizeObserver() {
156
- return new ResizeObserver((entries) => {
157
- entries.forEach(() => {
158
- dotLottie?.resize();
159
- });
160
- });
161
- }
162
130
  onMounted(() => {
163
131
  if (!canvas.value)
164
132
  return;
@@ -171,20 +139,12 @@ var DotLottieVue = defineComponent({
171
139
  ...props,
172
140
  autoplay: shouldAutoplay
173
141
  });
174
- intersectionObserver = getIntersectionObserver();
175
- intersectionObserver.observe(canvas.value);
176
- if (typeof autoResizeCanvas?.value === "boolean" && autoResizeCanvas.value) {
177
- resizeObserver = getResizeObserver();
178
- resizeObserver.observe(canvas.value);
179
- }
180
142
  if (playOnHover?.value) {
181
143
  canvas.value.addEventListener("mouseenter", hoverHandler);
182
144
  canvas.value.addEventListener("mouseleave", hoverHandler);
183
145
  }
184
146
  });
185
147
  onBeforeUnmount(() => {
186
- resizeObserver?.disconnect();
187
- intersectionObserver?.disconnect();
188
148
  canvas.value?.addEventListener("mouseenter", hoverHandler);
189
149
  canvas.value?.addEventListener("mouseleave", hoverHandler);
190
150
  dotLottie?.destroy();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lottiefiles/dotlottie-vue",
3
- "version": "0.4.12",
3
+ "version": "0.4.13",
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.31.1"
38
+ "@lottiefiles/dotlottie-web": "0.32.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@vue/runtime-dom": "^3.4.6",