@lottiefiles/dotlottie-vue 0.11.11 → 0.11.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.
- package/dist/dotlottie.d.ts +15 -15
- package/dist/dotlottie.d.ts.map +1 -1
- package/dist/dotlottie.js +1 -2
- package/dist/dotlottie.js.map +1 -1
- package/dist/index.js +1 -2
- package/package.json +5 -5
package/dist/dotlottie.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as _lottiefiles_dotlottie_web0 from "@lottiefiles/dotlottie-web";
|
|
1
|
+
import * as _$_lottiefiles_dotlottie_web0 from "@lottiefiles/dotlottie-web";
|
|
2
2
|
import { Config, DotLottie } from "@lottiefiles/dotlottie-web";
|
|
3
|
-
import * as vue from "vue";
|
|
3
|
+
import * as _$vue from "vue";
|
|
4
4
|
import { VNode } from "vue";
|
|
5
5
|
|
|
6
6
|
//#region src/dotlottie.d.ts
|
|
@@ -11,47 +11,47 @@ interface DotLottieVueProps extends Omit<Config, 'canvas'> {
|
|
|
11
11
|
interface DotLottieVueExposed {
|
|
12
12
|
getDotLottieInstance: () => DotLottie | null;
|
|
13
13
|
}
|
|
14
|
-
declare const DotLottieVue: vue.DefineComponent<{
|
|
14
|
+
declare const DotLottieVue: _$vue.DefineComponent<{
|
|
15
15
|
playOnHover?: boolean | undefined;
|
|
16
16
|
themeData?: string | undefined;
|
|
17
17
|
animationId?: string | undefined;
|
|
18
18
|
autoplay?: boolean | undefined;
|
|
19
19
|
backgroundColor?: string | undefined;
|
|
20
|
-
data?: _lottiefiles_dotlottie_web0.Data | undefined;
|
|
21
|
-
layout?: _lottiefiles_dotlottie_web0.Layout | undefined;
|
|
20
|
+
data?: _$_lottiefiles_dotlottie_web0.Data | undefined;
|
|
21
|
+
layout?: _$_lottiefiles_dotlottie_web0.Layout | undefined;
|
|
22
22
|
loop?: boolean | undefined;
|
|
23
23
|
loopCount?: number | undefined;
|
|
24
24
|
marker?: string | undefined;
|
|
25
|
-
mode?: _lottiefiles_dotlottie_web0.Mode | undefined;
|
|
26
|
-
renderConfig?: _lottiefiles_dotlottie_web0.RenderConfig | undefined;
|
|
25
|
+
mode?: _$_lottiefiles_dotlottie_web0.Mode | undefined;
|
|
26
|
+
renderConfig?: _$_lottiefiles_dotlottie_web0.RenderConfig | undefined;
|
|
27
27
|
segment?: [number, number] | undefined;
|
|
28
28
|
speed?: number | undefined;
|
|
29
29
|
src?: string | undefined;
|
|
30
|
-
stateMachineConfig?: _lottiefiles_dotlottie_web0.StateMachineConfig | undefined;
|
|
30
|
+
stateMachineConfig?: _$_lottiefiles_dotlottie_web0.StateMachineConfig | undefined;
|
|
31
31
|
stateMachineId?: string | undefined;
|
|
32
32
|
themeId?: string | undefined;
|
|
33
33
|
useFrameInterpolation?: boolean | undefined;
|
|
34
|
-
}, () => VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
|
|
34
|
+
}, () => VNode, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{
|
|
35
35
|
playOnHover?: boolean | undefined;
|
|
36
36
|
themeData?: string | undefined;
|
|
37
37
|
animationId?: string | undefined;
|
|
38
38
|
autoplay?: boolean | undefined;
|
|
39
39
|
backgroundColor?: string | undefined;
|
|
40
|
-
data?: _lottiefiles_dotlottie_web0.Data | undefined;
|
|
41
|
-
layout?: _lottiefiles_dotlottie_web0.Layout | undefined;
|
|
40
|
+
data?: _$_lottiefiles_dotlottie_web0.Data | undefined;
|
|
41
|
+
layout?: _$_lottiefiles_dotlottie_web0.Layout | undefined;
|
|
42
42
|
loop?: boolean | undefined;
|
|
43
43
|
loopCount?: number | undefined;
|
|
44
44
|
marker?: string | undefined;
|
|
45
|
-
mode?: _lottiefiles_dotlottie_web0.Mode | undefined;
|
|
46
|
-
renderConfig?: _lottiefiles_dotlottie_web0.RenderConfig | undefined;
|
|
45
|
+
mode?: _$_lottiefiles_dotlottie_web0.Mode | undefined;
|
|
46
|
+
renderConfig?: _$_lottiefiles_dotlottie_web0.RenderConfig | undefined;
|
|
47
47
|
segment?: [number, number] | undefined;
|
|
48
48
|
speed?: number | undefined;
|
|
49
49
|
src?: string | undefined;
|
|
50
|
-
stateMachineConfig?: _lottiefiles_dotlottie_web0.StateMachineConfig | undefined;
|
|
50
|
+
stateMachineConfig?: _$_lottiefiles_dotlottie_web0.StateMachineConfig | undefined;
|
|
51
51
|
stateMachineId?: string | undefined;
|
|
52
52
|
themeId?: string | undefined;
|
|
53
53
|
useFrameInterpolation?: boolean | undefined;
|
|
54
|
-
}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
54
|
+
}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
|
|
55
55
|
type DotLottieVueInstance = InstanceType<typeof DotLottieVue> & DotLottieVueExposed;
|
|
56
56
|
declare const setWasmUrl: (url: string) => void;
|
|
57
57
|
//#endregion
|
package/dist/dotlottie.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dotlottie.d.ts","names":[],"sources":["../src/dotlottie.ts"],"mappings":";;;;;;UAkBiB,iBAAA,SAA0B,IAAA,CAAK,MAAA;EAC9C,WAAA;EACA,SAAA;AAAA;AAAA,UAGQ,mBAAA;EACR,oBAAA,QAA4B,SAAA;AAAA;AAAA,cAGjB,YAAA,
|
|
1
|
+
{"version":3,"file":"dotlottie.d.ts","names":[],"sources":["../src/dotlottie.ts"],"mappings":";;;;;;UAkBiB,iBAAA,SAA0B,IAAA,CAAK,MAAA;EAC9C,WAAA;EACA,SAAA;AAAA;AAAA,UAGQ,mBAAA;EACR,oBAAA,QAA4B,SAAA;AAAA;AAAA,cAGjB,YAAA,QAAY,eAAA;;;;;;SAmSvB,6BAAA,CAAA,IAAA;;;;;;;;;;;;;;SA1QwE,KAAA,cAAK,KAAA,CAAA,qBAAA,EAAA,KAAA,CAAA,qBAAA,cAAA,KAAA,CAAA,WAAA,EAAA,QAAA;;;;;;SAAA,6BAAA,CAAA,IAAA;;;;;;;;;;;;;;;KA4QnE,oBAAA,GAAuB,YAAA,QAAoB,YAAA,IAAgB,mBAAA;AAAA,cAE1D,UAAA,GAAc,GAAA"}
|
package/dist/dotlottie.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { DotLottie } from "@lottiefiles/dotlottie-web";
|
|
2
2
|
import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
|
|
3
|
-
|
|
4
3
|
//#region src/dotlottie.ts
|
|
5
4
|
const DotLottieVue = defineComponent({
|
|
6
5
|
props: {
|
|
@@ -204,7 +203,7 @@ const DotLottieVue = defineComponent({
|
|
|
204
203
|
const setWasmUrl = (url) => {
|
|
205
204
|
DotLottie.setWasmUrl(url);
|
|
206
205
|
};
|
|
207
|
-
|
|
208
206
|
//#endregion
|
|
209
207
|
export { DotLottieVue, setWasmUrl };
|
|
208
|
+
|
|
210
209
|
//# sourceMappingURL=dotlottie.js.map
|
package/dist/dotlottie.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dotlottie.js","names":[],"sources":["../src/dotlottie.ts"],"sourcesContent":["import { type Config, DotLottie } from '@lottiefiles/dotlottie-web';\nimport {\n computed,\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n type PropType,\n type Ref,\n ref,\n type SetupContext,\n toRefs,\n type VNode,\n watch,\n} from 'vue';\n\nexport type { DotLottie };\n\nexport interface DotLottieVueProps extends Omit<Config, 'canvas'> {\n playOnHover?: boolean;\n themeData?: string;\n}\n\ninterface DotLottieVueExposed {\n getDotLottieInstance: () => DotLottie | null;\n}\n\nexport const DotLottieVue = defineComponent({\n props: {\n animationId: { type: String as PropType<DotLottieVueProps['animationId']>, required: false },\n autoplay: { type: Boolean as PropType<DotLottieVueProps['autoplay']>, required: false },\n backgroundColor: { type: String as PropType<DotLottieVueProps['backgroundColor']>, required: false },\n data: { type: [String, ArrayBuffer] as PropType<DotLottieVueProps['data']>, required: false },\n loop: { type: Boolean as PropType<DotLottieVueProps['loop']>, required: false },\n mode: { type: String as PropType<DotLottieVueProps['mode']>, required: false },\n renderConfig: { type: Object as PropType<DotLottieVueProps['renderConfig']>, required: false },\n segment: {\n type: Array as unknown as PropType<[number, number]>,\n required: false,\n },\n speed: { type: Number as PropType<DotLottieVueProps['speed']>, required: false },\n src: { type: String as PropType<DotLottieVueProps['src']>, required: false },\n useFrameInterpolation: { type: Boolean as PropType<DotLottieVueProps['useFrameInterpolation']>, required: false },\n marker: { type: String as PropType<DotLottieVueProps['marker']>, required: false },\n playOnHover: { type: Boolean as PropType<DotLottieVueProps['playOnHover']>, required: false },\n themeData: { type: String as PropType<DotLottieVueProps['themeData']>, required: false },\n themeId: { type: String as PropType<DotLottieVueProps['themeId']>, required: false },\n layout: { type: Object as PropType<DotLottieVueProps['layout']>, required: false },\n stateMachineId: { type: String as PropType<DotLottieVueProps['stateMachineId']>, required: false },\n stateMachineConfig: { type: Object as PropType<DotLottieVueProps['stateMachineConfig']>, required: false },\n },\n\n setup(props: DotLottieVueProps, { attrs, expose }: SetupContext): () => VNode {\n const canvas: Ref<HTMLCanvasElement | undefined> = ref(undefined);\n const {\n animationId,\n backgroundColor,\n data,\n layout,\n loop,\n marker,\n mode,\n playOnHover,\n renderConfig,\n segment,\n speed,\n src,\n stateMachineConfig,\n stateMachineId,\n themeId,\n useFrameInterpolation,\n } = toRefs(props);\n let dotLottie: DotLottie | null = null;\n const shouldAutoplay = computed(() => {\n let _shouldAutoplay = props.autoplay;\n\n if (typeof playOnHover?.value !== 'undefined' && playOnHover.value) {\n _shouldAutoplay = false;\n }\n\n return _shouldAutoplay;\n });\n\n /**\n * Wrap dotLottie-web's load function\n */\n const load: DotLottie['load'] = (config = {}) => {\n if (dotLottie === null) {\n return;\n }\n\n dotLottie.load({\n animationId: animationId?.value,\n backgroundColor: backgroundColor?.value,\n data: data?.value,\n layout: layout?.value,\n loop: loop?.value,\n marker: marker?.value,\n mode: mode?.value,\n autoplay: shouldAutoplay.value,\n renderConfig: renderConfig?.value,\n segment: segment?.value,\n speed: speed?.value,\n src: src?.value,\n stateMachineConfig: stateMachineConfig?.value,\n stateMachineId: stateMachineId?.value,\n themeId: themeId?.value,\n useFrameInterpolation: useFrameInterpolation?.value,\n ...config,\n });\n };\n\n // Prop change\n watch(\n () => backgroundColor?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setBackgroundColor(newVal);\n }\n },\n );\n watch(\n () => marker?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setMarker(newVal);\n }\n },\n );\n watch(\n () => loop?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setLoop(newVal);\n }\n },\n );\n watch(\n () => mode?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setMode(newVal);\n }\n },\n );\n watch(\n () => segment?.value,\n (newVal) => {\n if (!dotLottie) return;\n\n const startFrame = newVal?.[0];\n const endFrame = newVal?.[1];\n\n if (typeof startFrame === 'number' && typeof endFrame === 'number') {\n dotLottie.setSegment(startFrame, endFrame);\n }\n },\n );\n watch(\n () => speed?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setSpeed(newVal);\n }\n },\n );\n watch(\n () => useFrameInterpolation?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setUseFrameInterpolation(newVal);\n }\n },\n );\n watch(\n () => animationId?.value,\n (newVal) => {\n if (dotLottie?.isLoaded && typeof newVal !== 'undefined' && newVal !== dotLottie.activeAnimationId) {\n dotLottie.loadAnimation(newVal);\n }\n },\n );\n watch(\n () => props.themeData,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setThemeData(newVal);\n }\n },\n );\n watch(\n () => themeId?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setTheme(newVal);\n }\n },\n );\n\n function hoverHandler(event: MouseEvent): void {\n if (event.type === 'mouseenter') {\n dotLottie?.play();\n } else {\n dotLottie?.pause();\n }\n }\n\n watch(\n () => playOnHover?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined' && newVal) {\n canvas.value?.addEventListener('mouseenter', hoverHandler);\n canvas.value?.addEventListener('mouseleave', hoverHandler);\n } else {\n canvas.value?.removeEventListener('mouseenter', hoverHandler);\n canvas.value?.removeEventListener('mouseleave', hoverHandler);\n }\n },\n );\n watch(\n () => layout?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setLayout(newVal);\n }\n },\n { deep: true },\n );\n\n watch(\n () => renderConfig?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setRenderConfig(newVal);\n }\n },\n { deep: true },\n );\n\n watch(\n () => data?.value,\n (newVal) => {\n const isStrOrObject = typeof newVal === 'object' || typeof newVal === 'string';\n\n if (dotLottie && isStrOrObject) {\n load({\n data: newVal,\n });\n }\n },\n { deep: true },\n );\n\n watch(\n () => src?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n load({\n src: newVal,\n });\n }\n },\n );\n\n watch(\n () => stateMachineId?.value,\n (newVal) => {\n if (dotLottie?.isLoaded) {\n if (typeof newVal === 'string' && newVal) {\n const smLoaded = dotLottie.stateMachineLoad(newVal);\n\n if (smLoaded) {\n dotLottie.stateMachineStart();\n }\n } else {\n dotLottie.stateMachineStop();\n }\n }\n },\n );\n\n watch(\n () => stateMachineConfig?.value,\n (newVal) => {\n if (dotLottie) {\n dotLottie.stateMachineSetConfig(newVal ?? null);\n }\n },\n { deep: true },\n );\n\n onMounted(() => {\n if (!canvas.value) return;\n\n dotLottie = new DotLottie({\n canvas: canvas.value,\n ...props,\n autoplay: shouldAutoplay.value,\n });\n\n if (playOnHover?.value) {\n canvas.value.addEventListener('mouseenter', hoverHandler);\n canvas.value.addEventListener('mouseleave', hoverHandler);\n }\n });\n\n onBeforeUnmount(() => {\n canvas.value?.removeEventListener('mouseenter', hoverHandler);\n canvas.value?.removeEventListener('mouseleave', hoverHandler);\n dotLottie?.destroy();\n });\n\n expose({\n getDotLottieInstance: (): DotLottie | null => dotLottie,\n } as DotLottieVueExposed);\n\n return () => h('div', { ...attrs }, h('canvas', { style: 'height: 100%; width: 100%', ref: canvas }));\n },\n});\n\nexport type DotLottieVueInstance = InstanceType<typeof DotLottieVue> & DotLottieVueExposed;\n\nexport const setWasmUrl = (url: string): void => {\n DotLottie.setWasmUrl(url);\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dotlottie.js","names":[],"sources":["../src/dotlottie.ts"],"sourcesContent":["import { type Config, DotLottie } from '@lottiefiles/dotlottie-web';\nimport {\n computed,\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n type PropType,\n type Ref,\n ref,\n type SetupContext,\n toRefs,\n type VNode,\n watch,\n} from 'vue';\n\nexport type { DotLottie };\n\nexport interface DotLottieVueProps extends Omit<Config, 'canvas'> {\n playOnHover?: boolean;\n themeData?: string;\n}\n\ninterface DotLottieVueExposed {\n getDotLottieInstance: () => DotLottie | null;\n}\n\nexport const DotLottieVue = defineComponent({\n props: {\n animationId: { type: String as PropType<DotLottieVueProps['animationId']>, required: false },\n autoplay: { type: Boolean as PropType<DotLottieVueProps['autoplay']>, required: false },\n backgroundColor: { type: String as PropType<DotLottieVueProps['backgroundColor']>, required: false },\n data: { type: [String, ArrayBuffer] as PropType<DotLottieVueProps['data']>, required: false },\n loop: { type: Boolean as PropType<DotLottieVueProps['loop']>, required: false },\n mode: { type: String as PropType<DotLottieVueProps['mode']>, required: false },\n renderConfig: { type: Object as PropType<DotLottieVueProps['renderConfig']>, required: false },\n segment: {\n type: Array as unknown as PropType<[number, number]>,\n required: false,\n },\n speed: { type: Number as PropType<DotLottieVueProps['speed']>, required: false },\n src: { type: String as PropType<DotLottieVueProps['src']>, required: false },\n useFrameInterpolation: { type: Boolean as PropType<DotLottieVueProps['useFrameInterpolation']>, required: false },\n marker: { type: String as PropType<DotLottieVueProps['marker']>, required: false },\n playOnHover: { type: Boolean as PropType<DotLottieVueProps['playOnHover']>, required: false },\n themeData: { type: String as PropType<DotLottieVueProps['themeData']>, required: false },\n themeId: { type: String as PropType<DotLottieVueProps['themeId']>, required: false },\n layout: { type: Object as PropType<DotLottieVueProps['layout']>, required: false },\n stateMachineId: { type: String as PropType<DotLottieVueProps['stateMachineId']>, required: false },\n stateMachineConfig: { type: Object as PropType<DotLottieVueProps['stateMachineConfig']>, required: false },\n },\n\n setup(props: DotLottieVueProps, { attrs, expose }: SetupContext): () => VNode {\n const canvas: Ref<HTMLCanvasElement | undefined> = ref(undefined);\n const {\n animationId,\n backgroundColor,\n data,\n layout,\n loop,\n marker,\n mode,\n playOnHover,\n renderConfig,\n segment,\n speed,\n src,\n stateMachineConfig,\n stateMachineId,\n themeId,\n useFrameInterpolation,\n } = toRefs(props);\n let dotLottie: DotLottie | null = null;\n const shouldAutoplay = computed(() => {\n let _shouldAutoplay = props.autoplay;\n\n if (typeof playOnHover?.value !== 'undefined' && playOnHover.value) {\n _shouldAutoplay = false;\n }\n\n return _shouldAutoplay;\n });\n\n /**\n * Wrap dotLottie-web's load function\n */\n const load: DotLottie['load'] = (config = {}) => {\n if (dotLottie === null) {\n return;\n }\n\n dotLottie.load({\n animationId: animationId?.value,\n backgroundColor: backgroundColor?.value,\n data: data?.value,\n layout: layout?.value,\n loop: loop?.value,\n marker: marker?.value,\n mode: mode?.value,\n autoplay: shouldAutoplay.value,\n renderConfig: renderConfig?.value,\n segment: segment?.value,\n speed: speed?.value,\n src: src?.value,\n stateMachineConfig: stateMachineConfig?.value,\n stateMachineId: stateMachineId?.value,\n themeId: themeId?.value,\n useFrameInterpolation: useFrameInterpolation?.value,\n ...config,\n });\n };\n\n // Prop change\n watch(\n () => backgroundColor?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setBackgroundColor(newVal);\n }\n },\n );\n watch(\n () => marker?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setMarker(newVal);\n }\n },\n );\n watch(\n () => loop?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setLoop(newVal);\n }\n },\n );\n watch(\n () => mode?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setMode(newVal);\n }\n },\n );\n watch(\n () => segment?.value,\n (newVal) => {\n if (!dotLottie) return;\n\n const startFrame = newVal?.[0];\n const endFrame = newVal?.[1];\n\n if (typeof startFrame === 'number' && typeof endFrame === 'number') {\n dotLottie.setSegment(startFrame, endFrame);\n }\n },\n );\n watch(\n () => speed?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setSpeed(newVal);\n }\n },\n );\n watch(\n () => useFrameInterpolation?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setUseFrameInterpolation(newVal);\n }\n },\n );\n watch(\n () => animationId?.value,\n (newVal) => {\n if (dotLottie?.isLoaded && typeof newVal !== 'undefined' && newVal !== dotLottie.activeAnimationId) {\n dotLottie.loadAnimation(newVal);\n }\n },\n );\n watch(\n () => props.themeData,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setThemeData(newVal);\n }\n },\n );\n watch(\n () => themeId?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setTheme(newVal);\n }\n },\n );\n\n function hoverHandler(event: MouseEvent): void {\n if (event.type === 'mouseenter') {\n dotLottie?.play();\n } else {\n dotLottie?.pause();\n }\n }\n\n watch(\n () => playOnHover?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined' && newVal) {\n canvas.value?.addEventListener('mouseenter', hoverHandler);\n canvas.value?.addEventListener('mouseleave', hoverHandler);\n } else {\n canvas.value?.removeEventListener('mouseenter', hoverHandler);\n canvas.value?.removeEventListener('mouseleave', hoverHandler);\n }\n },\n );\n watch(\n () => layout?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setLayout(newVal);\n }\n },\n { deep: true },\n );\n\n watch(\n () => renderConfig?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n dotLottie.setRenderConfig(newVal);\n }\n },\n { deep: true },\n );\n\n watch(\n () => data?.value,\n (newVal) => {\n const isStrOrObject = typeof newVal === 'object' || typeof newVal === 'string';\n\n if (dotLottie && isStrOrObject) {\n load({\n data: newVal,\n });\n }\n },\n { deep: true },\n );\n\n watch(\n () => src?.value,\n (newVal) => {\n if (dotLottie && typeof newVal !== 'undefined') {\n load({\n src: newVal,\n });\n }\n },\n );\n\n watch(\n () => stateMachineId?.value,\n (newVal) => {\n if (dotLottie?.isLoaded) {\n if (typeof newVal === 'string' && newVal) {\n const smLoaded = dotLottie.stateMachineLoad(newVal);\n\n if (smLoaded) {\n dotLottie.stateMachineStart();\n }\n } else {\n dotLottie.stateMachineStop();\n }\n }\n },\n );\n\n watch(\n () => stateMachineConfig?.value,\n (newVal) => {\n if (dotLottie) {\n dotLottie.stateMachineSetConfig(newVal ?? null);\n }\n },\n { deep: true },\n );\n\n onMounted(() => {\n if (!canvas.value) return;\n\n dotLottie = new DotLottie({\n canvas: canvas.value,\n ...props,\n autoplay: shouldAutoplay.value,\n });\n\n if (playOnHover?.value) {\n canvas.value.addEventListener('mouseenter', hoverHandler);\n canvas.value.addEventListener('mouseleave', hoverHandler);\n }\n });\n\n onBeforeUnmount(() => {\n canvas.value?.removeEventListener('mouseenter', hoverHandler);\n canvas.value?.removeEventListener('mouseleave', hoverHandler);\n dotLottie?.destroy();\n });\n\n expose({\n getDotLottieInstance: (): DotLottie | null => dotLottie,\n } as DotLottieVueExposed);\n\n return () => h('div', { ...attrs }, h('canvas', { style: 'height: 100%; width: 100%', ref: canvas }));\n },\n});\n\nexport type DotLottieVueInstance = InstanceType<typeof DotLottieVue> & DotLottieVueExposed;\n\nexport const setWasmUrl = (url: string): void => {\n DotLottie.setWasmUrl(url);\n};\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lottiefiles/dotlottie-vue",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.13",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Vue wrapper around the dotlottie-web library",
|
|
6
6
|
"repository": {
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"vue": "^3.3.4"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@lottiefiles/dotlottie-web": "0.
|
|
38
|
+
"@lottiefiles/dotlottie-web": "0.72.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@vue/runtime-dom": "^3.4.6",
|
|
42
|
-
"@vue/tsconfig": "^0.
|
|
43
|
-
"tsdown": "^0.
|
|
44
|
-
"typescript": "
|
|
42
|
+
"@vue/tsconfig": "^0.9.1",
|
|
43
|
+
"tsdown": "^0.21.10",
|
|
44
|
+
"typescript": "6.0.3"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public",
|