@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
84 lines (83 loc) • 2.32 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 = {
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 vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({
name: $props.transition,
appear: $props.appear
}, _ctx.$attrs, { css: $options.isCSSEnabled }), {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("div", vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), [
$data.initialized ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("", true)
], 16), [
[vue.vShow, $props.show]
])
]),
_: 3
}, 16, ["name", "appear", "css"]);
}
const DtLazyShow = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtLazyShow;
//# sourceMappingURL=lazy_show.vue.cjs.map