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

Dialpad's Dialtone design system monorepo

import { createBlock as a, openBlock as n, Transition as l, mergeProps as s, withCtx as i, withDirectives as f, resolveDynamicComponent as h, normalizeProps as c, guardReactiveProps as u, renderSlot as p, createCommentVNode as d, vShow as m } from "vue";
import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const y = {
  name: "DtCollapsibleLazyShow",
  inheritAttrs: !1,
  /******************
   *     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;
    }
  }
};
function E(e, g, r, _, o, t) {
  return n(), a(l, s({
    appear: r.appear,
    "enter-active-class": "d-collapsible__enter-active",
    "leave-active-class": "d-collapsible__leave-active"
  }, e.$attrs, {
    css: t.isCSSEnabled,
    onBeforeEnter: t.beforeEnter,
    onEnter: t.enter,
    onAfterEnter: t.afterEnter,
    onBeforeLeave: t.beforeLeave,
    onLeave: t.leave,
    onAfterLeave: t.afterLeave
  }), {
    default: i(() => [
      f((n(), a(h(r.elementType), c(u(e.$attrs)), {
        default: i(() => [
          o.initialized ? p(e.$slots, "default", { key: 0 }) : d("", !0)
        ]),
        _: 3
      }, 16)), [
        [m, r.show]
      ])
    ]),
    _: 3
  }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
}
const b = /* @__PURE__ */ v(y, [["render", E]]);
export {
  b as default
};
//# sourceMappingURL=collapsible-lazy-show.js.map