@dialpad/dialtone/dist/vue2/lib/collapsible/collapsible-lazy-show.js

Dialpad's Dialtone design system monorepo

import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const i = {
  name: "DtCollapsibleLazyShow",
  /******************
   *     PROPS      *
   ******************/
  props: {
    /**
     * Whether the child slot is shown.
     */
    show: {
      type: Boolean,
      default: null
    },
    /**
     * Enable/Disable transition animation
     */
    appear: {
      type: Boolean,
      default: !1
    },
    /**
     * HTML element type (tag name) of the content wrapper element.
     */
    elementType: {
      type: String,
      default: "div"
    }
  },
  /******************
   *      DATA      *
   ******************/
  data() {
    return {
      initialized: !!this.show
    };
  },
  /******************
   *    COMPUTED    *
   ******************/
  computed: {
    /**
     * Set the css property to false when running tests only.
     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
     * transition `css` property
     * @returns {boolean}
     */
    isCSSEnabled() {
      return process.env.NODE_ENV !== "test";
    }
  },
  /******************
   *      WATCH     *
   ******************/
  watch: {
    show: function(e) {
      !e || this.initialized || (this.initialized = !0);
    }
  },
  methods: {
    /**
     * @param {HTMLElement} element
     */
    beforeEnter(e) {
      requestAnimationFrame(() => {
        e.style.height || (e.style.height = "0px");
      });
    },
    /**
     * @param {HTMLElement} element
     */
    enter(e) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          e.style.height = `${e.scrollHeight}px`;
        });
      });
    },
    /**
     * @param {HTMLElement} element
     */
    afterEnter(e) {
      e.style.height = null;
    },
    /**
     * @param {HTMLElement} element
     */
    beforeLeave(e) {
      requestAnimationFrame(() => {
        e.style.height || (e.style.height = `${e.offsetHeight}px`);
      });
    },
    /**
     * @param {HTMLElement} element
     */
    leave(e) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          e.style.height = "0px";
        });
      });
    },
    /**
     * @param {HTMLElement} element
     */
    afterLeave(e) {
      e.style.height = null;
    }
  }
};
var n = function() {
  var t = this, a = t._self._c;
  return a("transition", t._g({ attrs: { appear: t.appear, "enter-active-class": "d-collapsible__enter-active", "leave-active-class": "d-collapsible__leave-active", css: t.isCSSEnabled }, on: { "before-enter": t.beforeEnter, enter: t.enter, "after-enter": t.afterEnter, "before-leave": t.beforeLeave, leave: t.leave, "after-leave": t.afterLeave } }, t.$listeners), [a(t.elementType, t._g({ directives: [{ name: "show", rawName: "v-show", value: t.show, expression: "show" }], tag: "component" }, t.$listeners), [t.initialized ? t._t("default") : t._e()], 2)], 1);
}, s = [], l = /* @__PURE__ */ r(
  i,
  n,
  s
);
const h = l.exports;
export {
  h as default
};
//# sourceMappingURL=collapsible-lazy-show.js.map