@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
131 lines (130 loc) • 3.49 kB
JavaScript
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtCollapsibleLazyShow",
/******************
* 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;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("transition", _vm._g({ attrs: { "appear": _vm.appear, "enter-active-class": "d-collapsible__enter-active", "leave-active-class": "d-collapsible__leave-active", "css": _vm.isCSSEnabled }, on: { "before-enter": _vm.beforeEnter, "enter": _vm.enter, "after-enter": _vm.afterEnter, "before-leave": _vm.beforeLeave, "leave": _vm.leave, "after-leave": _vm.afterLeave } }, _vm.$listeners), [_c(_vm.elementType, _vm._g({ directives: [{ name: "show", rawName: "v-show", value: _vm.show, expression: "show" }], tag: "component" }, _vm.$listeners), [_vm.initialized ? _vm._t("default") : _vm._e()], 2)], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtCollapsibleLazyShow = __component__.exports;
export {
DtCollapsibleLazyShow as default
};
//# sourceMappingURL=collapsible_lazy_show.vue.js.map