@lottiefiles/dotlottie-vue/dist/dotlottie.js

Vue wrapper around the dotlottie-web library

import { DotLottie } from '@lottiefiles/dotlottie-web';
import { defineComponent, ref, toRefs, computed, watch, onMounted, onBeforeUnmount, h } from 'vue';

// src/dotlottie.ts
var DotLottieVue = defineComponent({
  props: {
    animationId: { type: String, required: false },
    autoplay: { type: Boolean, required: false },
    backgroundColor: { type: String, required: false },
    data: { type: [String, ArrayBuffer], required: false },
    loop: { type: Boolean, required: false },
    mode: { type: String, required: false },
    renderConfig: { type: Object, required: false },
    segment: {
      type: Array,
      required: false
    },
    speed: { type: Number, required: false },
    src: { type: String, required: false },
    useFrameInterpolation: { type: Boolean, required: false },
    marker: { type: String, required: false },
    playOnHover: { type: Boolean, required: false },
    themeData: { type: String, required: false },
    themeId: { type: String, required: false },
    layout: { type: Object, required: false }
  },
  setup(props, { attrs, expose }) {
    const canvas = ref(void 0);
    const {
      animationId,
      backgroundColor,
      data,
      layout,
      loop,
      marker,
      mode,
      playOnHover,
      renderConfig,
      segment,
      speed,
      src,
      themeId,
      useFrameInterpolation
    } = toRefs(props);
    let dotLottie = null;
    const shouldAutoplay = computed(() => {
      let _shouldAutoplay = props.autoplay;
      if (typeof playOnHover?.value !== "undefined" && playOnHover.value) {
        _shouldAutoplay = false;
      }
      return _shouldAutoplay;
    });
    const load = (config = {}) => {
      if (dotLottie === null) {
        return;
      }
      dotLottie.load({
        animationId: animationId?.value,
        backgroundColor: backgroundColor?.value,
        data: data?.value,
        layout: layout?.value,
        loop: loop?.value,
        marker: marker?.value,
        mode: mode?.value,
        autoplay: shouldAutoplay.value,
        renderConfig: renderConfig?.value,
        segment: segment?.value,
        speed: speed?.value,
        src: src?.value,
        themeId: themeId?.value,
        useFrameInterpolation: useFrameInterpolation?.value,
        ...config
      });
    };
    watch(
      () => backgroundColor?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setBackgroundColor(newVal);
        }
      }
    );
    watch(
      () => marker?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setMarker(newVal);
        }
      }
    );
    watch(
      () => loop?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setLoop(newVal);
        }
      }
    );
    watch(
      () => mode?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setMode(newVal);
        }
      }
    );
    watch(
      () => segment?.value,
      (newVal) => {
        if (!dotLottie)
          return;
        const startFrame = newVal?.[0];
        const endFrame = newVal?.[1];
        if (typeof startFrame === "number" && typeof endFrame === "number") {
          dotLottie.setSegment(startFrame, endFrame);
        }
      }
    );
    watch(
      () => speed?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setSpeed(newVal);
        }
      }
    );
    watch(
      () => useFrameInterpolation?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setUseFrameInterpolation(newVal);
        }
      }
    );
    watch(
      () => animationId?.value,
      (newVal) => {
        if (dotLottie && dotLottie.isLoaded && typeof newVal !== "undefined" && newVal !== dotLottie.activeAnimationId) {
          dotLottie.loadAnimation(newVal);
        }
      }
    );
    watch(
      () => props.themeData,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setTheme(newVal);
        }
      }
    );
    watch(
      () => themeId?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setTheme(newVal);
        }
      }
    );
    function hoverHandler(event) {
      if (event.type === "mouseenter") {
        dotLottie?.play();
      } else {
        dotLottie?.pause();
      }
    }
    watch(
      () => playOnHover?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined" && newVal) {
          canvas.value?.addEventListener("mouseenter", hoverHandler);
          canvas.value?.addEventListener("mouseleave", hoverHandler);
        } else {
          canvas.value?.removeEventListener("mouseenter", hoverHandler);
          canvas.value?.removeEventListener("mouseleave", hoverHandler);
        }
      }
    );
    watch(
      () => layout?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setLayout(newVal);
        }
      },
      { deep: true }
    );
    watch(
      () => renderConfig?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          dotLottie.setRenderConfig(newVal);
        }
      },
      { deep: true }
    );
    watch(
      () => data?.value,
      (newVal) => {
        const isStrOrObject = typeof newVal === "object" || typeof newVal === "string";
        if (dotLottie && isStrOrObject) {
          load({
            data: newVal
          });
        }
      },
      { deep: true }
    );
    watch(
      () => src?.value,
      (newVal) => {
        if (dotLottie && typeof newVal !== "undefined") {
          load({
            src: newVal
          });
        }
      }
    );
    onMounted(() => {
      if (!canvas.value)
        return;
      dotLottie = new DotLottie({
        canvas: canvas.value,
        ...props,
        autoplay: shouldAutoplay.value
      });
      if (playOnHover?.value) {
        canvas.value.addEventListener("mouseenter", hoverHandler);
        canvas.value.addEventListener("mouseleave", hoverHandler);
      }
    });
    onBeforeUnmount(() => {
      canvas.value?.addEventListener("mouseenter", hoverHandler);
      canvas.value?.addEventListener("mouseleave", hoverHandler);
      dotLottie?.destroy();
    });
    expose({
      getDotLottieInstance: () => dotLottie
    });
    return () => h("div", { ...attrs }, h("canvas", { style: "height: 100%; width: 100%", ref: canvas }));
  }
});
var setWasmUrl = (url) => {
  DotLottie.setWasmUrl(url);
};

export { DotLottieVue, setWasmUrl };