@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
84 lines (83 loc) • 2.27 kB
JavaScript
import { openBlock, createBlock, Transition, mergeProps, withCtx, withDirectives, createElementVNode, normalizeProps, guardReactiveProps, renderSlot, createCommentVNode, vShow } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtLazyShow",
inheritAttrs: false,
/******************
* PROPS *
******************/
props: {
/**
* Whether the child slot is shown.
* @values true, false
*/
show: {
type: Boolean,
default: false
},
/**
* A valid Vue enter/leave CSS transition name.
*/
transition: {
type: String,
default: null
},
/**
* Enable/Disable transition animation
* @values true, false
*/
appear: {
type: Boolean,
default: false
}
},
/******************
* DATA *
******************/
data() {
return {
initialized: !!this.show
};
},
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;
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(Transition, mergeProps({
name: $props.transition,
appear: $props.appear
}, _ctx.$attrs, { css: $options.isCSSEnabled }), {
default: withCtx(() => [
withDirectives(createElementVNode("div", normalizeProps(guardReactiveProps(_ctx.$attrs)), [
$data.initialized ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
], 16), [
[vShow, $props.show]
])
]),
_: 3
}, 16, ["name", "appear", "css"]);
}
const DtLazyShow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtLazyShow as default
};
//# sourceMappingURL=lazy_show.vue.js.map