@progress/kendo-vue-animation/AnimationChild.mjs

Kendo UI for Vue Animation package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as D, ref as A, h as o, Transition as F } from "vue";
import L from "./util.mjs";
import { getDefaultSlots as N } from "@progress/kendo-vue-common";
const n = L.styles, k = /* @__PURE__ */ D({
  props: {
    in: Boolean,
    transitionName: {
      type: String,
      required: !0
    },
    transitionStyle: Object,
    componentChildClassName: [Array],
    className: String,
    appear: {
      type: Boolean,
      default: !0
    },
    enter: {
      type: Boolean,
      default: !0
    },
    exit: {
      type: Boolean,
      default: !0
    },
    transitionEnterDuration: Number,
    transitionExitDuration: Number,
    mountOnEnter: Boolean,
    unmountOnExit: Boolean,
    animationEnteringStyle: Object,
    animationEnteredStyle: Object,
    animationExitingStyle: Object,
    animationExitedStyle: Object,
    onBeforeenter: Function,
    onEntering: Function,
    onEntered: Function,
    onExit: Function,
    onExiting: Function,
    onExited: Function
  },
  created: function() {
    this.animationStep = "";
  },
  setup: function() {
    return {
      elementRef: A(null)
    };
  },
  mounted() {
    this._element = this.elementRef || null;
  },
  computed: {
    element() {
      return this._element;
    }
  },
  methods: {
    handleBeforeEnter(e) {
      this.$emit("beforeenter", {
        animatedElement: e,
        target: this
      });
    },
    handleEnter(e) {
      this.animationStep = "entering", this.$emit("entering", {
        animatedElement: e,
        target: this
      });
    },
    handleAfterEnter(e) {
      this.animationStep = "entered", this.$emit("entered", {
        animatedElement: e,
        target: this
      });
    },
    handleBeforeLeave(e) {
      this.$emit("exit", {
        animatedElement: e,
        target: this
      });
    },
    handleLeave(e) {
      this.animationStep = "exiting", this.$emit("exiting", {
        animatedElement: e,
        target: this
      });
    },
    handleAfterLeave(e) {
      this.animationStep = "exited", this.$emit("exited", {
        animatedElement: e,
        target: this
      });
    }
  },
  render() {
    const {
      appear: e,
      enter: s,
      exit: l,
      transitionName: t,
      transitionEnterDuration: m,
      transitionExitDuration: h,
      className: O,
      componentChildClassName: d,
      mountOnEnter: b,
      unmountOnExit: j,
      animationEnteringStyle: u,
      animationEnteredStyle: p,
      animationExitingStyle: c,
      animationExitedStyle: E,
      ...T
    } = this.$props, f = N(this), r = e, x = F, $ = [d, n["child-animation-container"]];
    let i = s ? m : 0, a = l ? h : 0;
    const S = {
      transitionDelay: "0ms",
      transitionDuration: r ? `${i}ms` : `${a}ms`,
      ...this.$props.transitionStyle
    }, g = {
      entering: {
        transitionDuration: `${i}ms`,
        ...u
      },
      entered: {
        ...p
      },
      exiting: {
        transitionDuration: `${a}ms`,
        ...c
      },
      exited: {
        ...E
      }
    };
    let y = [S, g[this.animationStep]];
    const v = {
      enter: i,
      leave: a
    }, C = [r ? o("div", {
      style: y,
      class: $,
      ref: (B) => {
        this.elementRef = B;
      }
    }, [f]) : null];
    return o(x, {
      duration: v,
      name: t,
      appear: e,
      appearFromClass: n[`${t}-appear`] || `${t}-appear`,
      enterFromClass: n[`${t}-enter`] || `${t}-enter`,
      leaveFromClass: n[`${t}-exit`] || `${t}-exit`,
      appearToClass: n[`${t}-appear-active`] || `${t}-appear-active`,
      enterToClass: n[`${t}-enter-active`] || `${t}-enter-active`,
      leaveToClass: n[`${t}-exit-active`] || `${t}-exit-active`,
      onBeforeEnter: this.handleBeforeEnter,
      onEnter: this.handleEnter,
      onAfterEnter: this.handleAfterEnter,
      onBeforeLeave: this.handleBeforeLeave,
      onLeave: this.handleLeave,
      onAfterLeave: this.handleAfterLeave
    }, () => C);
  }
});
export {
  k as AnimationChild
};