@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
150 lines (149 loc) • 4.04 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
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 vue.openBlock(), vue.createBlock(vue.Transition, vue.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: vue.withCtx(() => [
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
default: vue.withCtx(() => [
$data.initialized ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("", true)
]),
_: 3
}, 16)), [
[vue.vShow, $props.show]
])
]),
_: 3
}, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
}
const DtCollapsibleLazyShow = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtCollapsibleLazyShow;
//# sourceMappingURL=collapsible_lazy_show.vue.cjs.map