@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
100 lines (99 loc) • 3.91 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const common_utils = require("../../common/utils.cjs");
const empty_state_constants = require("./empty_state_constants.cjs");
const stack = require("../stack/stack.vue.cjs");
const _hoisted_1 = {
key: 0,
class: "d-empty-state__illustration"
};
const _hoisted_2 = {
key: 1,
class: "d-empty-state__icon"
};
const _sfc_main = {
__name: "empty_state",
props: {
/**
* The empty state size.
* @values 'sm', 'md', 'lg'
*/
size: {
type: String,
default: "lg",
validator: (s) => Object.keys(empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS).includes(s)
},
/**
* Header text
* @type {String}
*/
headerText: {
type: String,
required: true
},
/**
* Body text
* @type {String}
*/
bodyText: {
type: String,
default: null
}
},
setup(__props) {
const slots = vue.useSlots();
const props = __props;
const hasIcon = vue.computed(() => {
return common_utils.hasSlotContent(slots.icon);
});
const hasIllustration = vue.computed(() => common_utils.hasSlotContent(slots.illustration));
const isSmallSize = vue.computed(() => props.size === "sm");
const showIcon = vue.computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));
const showIllustration = vue.computed(() => hasIllustration.value && !isSmallSize.value);
const sizeClass = vue.computed(() => empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS[props.size]);
const emptyStateClasses = vue.computed(() => ["d-empty-state", sizeClass.value]);
const contentClass = vue.computed(() => empty_state_constants.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);
const headlineClass = vue.computed(() => empty_state_constants.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);
const bodyClass = vue.computed(() => empty_state_constants.EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);
vue.onMounted(() => {
if (!props.bodyText && !common_utils.hasSlotContent(slots.body)) {
console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(stack.default), {
class: vue.normalizeClass(emptyStateClasses.value)
}, {
default: vue.withCtx(() => [
showIllustration.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "illustration")
])) : vue.createCommentVNode("", true),
showIcon.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "icon", { iconSize: "800" })
])) : vue.createCommentVNode("", true),
vue.createVNode(vue.unref(stack.default), {
gap: "450",
class: vue.normalizeClass(["d-empty-state__content", contentClass.value])
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(["d-empty-state__header-text", headlineClass.value])
}, vue.toDisplayString(__props.headerText), 3),
__props.bodyText ? (vue.openBlock(), vue.createElementBlock("p", {
key: 0,
class: vue.normalizeClass(["d-empty-state__body-text", bodyClass.value])
}, vue.toDisplayString(__props.bodyText), 3)) : vue.createCommentVNode("", true)
]),
_: 1
}, 8, ["class"]),
vue.renderSlot(_ctx.$slots, "body")
]),
_: 3
}, 8, ["class"]);
};
}
};
const _sfc_main$1 = _sfc_main;
exports.default = _sfc_main$1;
//# sourceMappingURL=empty_state.vue.cjs.map