@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
97 lines (96 loc) • 3.35 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const empty_state_constants = require("./empty_state_constants.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const stack = require("../stack/stack.vue.cjs");
const _sfc_main = {
name: "DtEmptyState",
components: {
DtStack: stack.default
},
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
}
},
computed: {
hasIcon() {
return this.$scopedSlots.icon && this.$scopedSlots.icon();
},
hasIllustration() {
return this.$scopedSlots.illustration && this.$scopedSlots.illustration();
},
isSmallSize() {
return this.size === "sm";
},
/**
* Icon will be shown in lg and md size only if illustration is not provided
* Icon will always be shown in sm size
*/
showIcon() {
return this.hasIcon && (!this.hasIllustration || this.isSmallSize);
},
/**
* Illustration will always be shown in lg and md size
* Illustration will not be shown in sm size
*/
showIllustration() {
return this.hasIllustration && !this.isSmallSize;
},
sizeClass() {
return empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS[this.size];
},
emptyStateClasses() {
return ["d-empty-state", this.sizeClass];
},
contentClass() {
return empty_state_constants.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[this.size];
},
headlineClass() {
return empty_state_constants.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[this.size];
},
bodyClass() {
return empty_state_constants.EMPTY_STATE_BODY_SIZE_MODIFIERS[this.size];
}
},
mounted() {
if (!this.bodyText && !this.$slots.body) {
console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dt-stack", { class: _vm.emptyStateClasses }, [_vm.showIllustration ? _c("span", { staticClass: "d-empty-state__illustration" }, [_vm._t("illustration")], 2) : _vm._e(), _vm.showIcon ? _c("span", { staticClass: "d-empty-state__icon" }, [_vm._t("icon", null, { "iconSize": "800" })], 2) : _vm._e(), _c("dt-stack", { class: ["d-empty-state__content", _vm.contentClass], attrs: { "gap": "450" } }, [_c("div", { class: ["d-empty-state__header-text", _vm.headlineClass] }, [_vm._v(" " + _vm._s(_vm.headerText) + " ")]), _vm.bodyText ? _c("p", { class: ["d-empty-state__body-text", _vm.bodyClass] }, [_vm._v(" " + _vm._s(_vm.bodyText) + " ")]) : _vm._e()]), _vm._t("body")], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const empty_state = __component__.exports;
exports.default = empty_state;
//# sourceMappingURL=empty_state.vue.cjs.map