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

Vue component library for Dialpad's design system Dialtone

import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { Transition as t, createBlock as n, createCommentVNode as r, guardReactiveProps as i, mergeProps as a, normalizeProps as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, vShow as u, withCtx as d, withDirectives as f } from "vue";
//#region components/collapsible/collapsible_lazy_show.vue
var p = {
	name: "DtCollapsibleLazyShow",
	inheritAttrs: !1,
	props: {
		show: {
			type: Boolean,
			default: null
		},
		appear: {
			type: Boolean,
			default: !1
		},
		elementType: {
			type: String,
			default: "div"
		}
	},
	data() {
		return { initialized: !!this.show };
	},
	computed: { isCSSEnabled() {
		return process.env.NODE_ENV !== "test";
	} },
	watch: { show: function(e) {
		!e || this.initialized || (this.initialized = !0);
	} },
	methods: {
		beforeEnter(e) {
			requestAnimationFrame(() => {
				e.style.height || (e.style.height = "0px");
			});
		},
		enter(e) {
			requestAnimationFrame(() => {
				requestAnimationFrame(() => {
					e.style.height = `${e.scrollHeight}px`;
				});
			});
		},
		afterEnter(e) {
			e.style.height = null;
		},
		beforeLeave(e) {
			requestAnimationFrame(() => {
				e.style.height || (e.style.height = `${e.offsetHeight}px`);
			});
		},
		leave(e) {
			requestAnimationFrame(() => {
				requestAnimationFrame(() => {
					e.style.height = "0px";
				});
			});
		},
		afterLeave(e) {
			e.style.height = null;
		}
	}
};
function m(e, p, m, h, g, _) {
	return s(), n(t, a({
		appear: m.appear,
		"enter-active-class": "d-collapsible__enter-active",
		"leave-active-class": "d-collapsible__leave-active"
	}, e.$attrs, {
		css: _.isCSSEnabled,
		onBeforeEnter: _.beforeEnter,
		onEnter: _.enter,
		onAfterEnter: _.afterEnter,
		onBeforeLeave: _.beforeLeave,
		onLeave: _.leave,
		onAfterLeave: _.afterLeave
	}), {
		default: d(() => [f((s(), n(l(m.elementType), o(i(e.$attrs)), {
			default: d(() => [g.initialized ? c(e.$slots, "default", { key: 0 }) : r("", !0)]),
			_: 3
		}, 16)), [[u, m.show]])]),
		_: 3
	}, 16, [
		"appear",
		"css",
		"onBeforeEnter",
		"onEnter",
		"onAfterEnter",
		"onBeforeLeave",
		"onLeave",
		"onAfterLeave"
	]);
}
var h = /* @__PURE__ */ e(p, [["render", m]]);
//#endregion
export { h as default };

//# sourceMappingURL=collapsible-lazy-show.js.map