@dialpad/dialtone-vue/dist/lib/empty-state/empty-state.js

Vue component library for Dialpad's design system Dialtone

import { EMPTY_STATE_BODY_SIZE_MODIFIERS as a, EMPTY_STATE_HEADLINE_SIZE_MODIFIERS as i, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as n, EMPTY_STATE_SIZE_MODIFIERS as o } from "./empty-state-constants.js";
import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import l from "../stack/stack.js";
const _ = {
  name: "DtEmptyState",
  components: {
    DtStack: l
  },
  props: {
    /**
     * The empty state size.
     * @values 'sm', 'md', 'lg'
     */
    size: {
      type: String,
      default: "lg",
      validator: (e) => Object.keys(o).includes(e)
    },
    /**
     * Header text
     * @type {String}
     */
    headerText: {
      type: String,
      required: !0
    },
    /**
     * 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 o[this.size];
    },
    emptyStateClasses() {
      return ["d-empty-state", this.sizeClass];
    },
    contentClass() {
      return n[this.size];
    },
    headlineClass() {
      return i[this.size];
    },
    bodyClass() {
      return a[this.size];
    }
  },
  mounted() {
    !this.bodyText && !this.$slots.body && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
  }
};
var d = function() {
  var t = this, s = t._self._c;
  return s("dt-stack", { class: t.emptyStateClasses }, [t.showIllustration ? s("span", { staticClass: "d-empty-state__illustration" }, [t._t("illustration")], 2) : t._e(), t.showIcon ? s("span", { staticClass: "d-empty-state__icon" }, [t._t("icon", null, { iconSize: "800" })], 2) : t._e(), s("dt-stack", { class: ["d-empty-state__content", t.contentClass], attrs: { gap: "450" } }, [s("div", { class: ["d-empty-state__header-text", t.headlineClass] }, [t._v(" " + t._s(t.headerText) + " ")]), t.bodyText ? s("p", { class: ["d-empty-state__body-text", t.bodyClass] }, [t._v(" " + t._s(t.bodyText) + " ")]) : t._e()]), t._t("body")], 2);
}, c = [], h = /* @__PURE__ */ r(
  _,
  d,
  c
);
const m = h.exports;
export {
  m as default
};
//# sourceMappingURL=empty-state.js.map