@dialpad/dialtone/dist/vue3/components/collapsible/collapsible_lazy_show.vue.js

Dialpad's Dialtone design system monorepo

import { openBlock, createBlock, Transition, mergeProps, withCtx, withDirectives, resolveDynamicComponent, normalizeProps, guardReactiveProps, renderSlot, createCommentVNode, vShow } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
  name: "DtCollapsibleLazyShow",
  inheritAttrs: false,
  /******************
   *     PROPS      *
   ******************/
  props: {
    /**
     * Whether the child slot is shown.
     */
    show: {
      type: Boolean,
      default: null
    },
    /**
     * Enable/Disable transition animation
     */
    appear: {
      type: Boolean,
      default: false
    },
    /**
     * 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(newValue) {
      if (!newValue || this.initialized) return;
      this.initialized = true;
    }
  },
  methods: {
    /**
     * @param {HTMLElement} element
     */
    beforeEnter(element) {
      requestAnimationFrame(() => {
        if (!element.style.height) {
          element.style.height = "0px";
        }
      });
    },
    /**
     * @param {HTMLElement} element
     */
    enter(element) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          element.style.height = `${element.scrollHeight}px`;
        });
      });
    },
    /**
     * @param {HTMLElement} element
     */
    afterEnter(element) {
      element.style.height = null;
    },
    /**
     * @param {HTMLElement} element
     */
    beforeLeave(element) {
      requestAnimationFrame(() => {
        if (!element.style.height) {
          element.style.height = `${element.offsetHeight}px`;
        }
      });
    },
    /**
     * @param {HTMLElement} element
     */
    leave(element) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          element.style.height = "0px";
        });
      });
    },
    /**
     * @param {HTMLElement} element
     */
    afterLeave(element) {
      element.style.height = null;
    }
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock(Transition, mergeProps({
    appear: $props.appear,
    "enter-active-class": "d-collapsible__enter-active",
    "leave-active-class": "d-collapsible__leave-active"
  }, _ctx.$attrs, {
    css: $options.isCSSEnabled,
    onBeforeEnter: $options.beforeEnter,
    onEnter: $options.enter,
    onAfterEnter: $options.afterEnter,
    onBeforeLeave: $options.beforeLeave,
    onLeave: $options.leave,
    onAfterLeave: $options.afterLeave
  }), {
    default: withCtx(() => [
      withDirectives((openBlock(), createBlock(resolveDynamicComponent($props.elementType), normalizeProps(guardReactiveProps(_ctx.$attrs)), {
        default: withCtx(() => [
          $data.initialized ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
        ]),
        _: 3
      }, 16)), [
        [vShow, $props.show]
      ])
    ]),
    _: 3
  }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
}
const DtCollapsibleLazyShow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  DtCollapsibleLazyShow as default
};
//# sourceMappingURL=collapsible_lazy_show.vue.js.map