@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
100 lines (99 loc) • 3.77 kB
JavaScript
import { useSlots, computed, onMounted, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString } from "vue";
import { hasSlotContent } from "../../common/utils.js";
import { EMPTY_STATE_SIZE_MODIFIERS, EMPTY_STATE_CONTENT_SIZE_MODIFIERS, EMPTY_STATE_HEADLINE_SIZE_MODIFIERS, EMPTY_STATE_BODY_SIZE_MODIFIERS } from "./empty_state_constants.js";
import DtStack from "../stack/stack.vue.js";
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_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 = useSlots();
const props = __props;
const hasIcon = computed(() => {
return hasSlotContent(slots.icon);
});
const hasIllustration = computed(() => hasSlotContent(slots.illustration));
const isSmallSize = computed(() => props.size === "sm");
const showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));
const showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);
const sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);
const emptyStateClasses = computed(() => ["d-empty-state", sizeClass.value]);
const contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);
const headlineClass = computed(() => EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);
const bodyClass = computed(() => EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);
onMounted(() => {
if (!props.bodyText && !hasSlotContent(slots.body)) {
console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
}
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(DtStack), {
class: normalizeClass(emptyStateClasses.value)
}, {
default: withCtx(() => [
showIllustration.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
renderSlot(_ctx.$slots, "illustration")
])) : createCommentVNode("", true),
showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
renderSlot(_ctx.$slots, "icon", { iconSize: "800" })
])) : createCommentVNode("", true),
createVNode(unref(DtStack), {
gap: "450",
class: normalizeClass(["d-empty-state__content", contentClass.value])
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["d-empty-state__header-text", headlineClass.value])
}, toDisplayString(__props.headerText), 3),
__props.bodyText ? (openBlock(), createElementBlock("p", {
key: 0,
class: normalizeClass(["d-empty-state__body-text", bodyClass.value])
}, toDisplayString(__props.bodyText), 3)) : createCommentVNode("", true)
]),
_: 1
}, 8, ["class"]),
renderSlot(_ctx.$slots, "body")
]),
_: 3
}, 8, ["class"]);
};
}
};
const _sfc_main$1 = _sfc_main;
export {
_sfc_main$1 as default
};
//# sourceMappingURL=empty_state.vue.js.map