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

Dialpad's Dialtone design system monorepo

import { useSlots as x, computed as t, onMounted as D, openBlock as o, createBlock as M, unref as m, normalizeClass as a, withCtx as y, createElementBlock as r, renderSlot as c, createCommentVNode as i, createVNode as k, createElementVNode as O, toDisplayString as S } from "vue";
import { hasSlotContent as d } from "../../common/utils/index.js";
import { EMPTY_STATE_SIZE_MODIFIERS as p, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as g, EMPTY_STATE_HEADLINE_SIZE_MODIFIERS as N, EMPTY_STATE_BODY_SIZE_MODIFIERS as Y } from "./empty-state-constants.js";
import E from "../stack/stack.js";
const A = {
  key: 0,
  class: "d-empty-state__illustration"
}, B = {
  key: 1,
  class: "d-empty-state__icon"
}, V = {
  __name: "empty_state",
  props: {
    /**
      * The empty state size.
      * @values 'sm', 'md', 'lg'
      */
    size: {
      type: String,
      default: "lg",
      validator: (e) => Object.keys(p).includes(e)
    },
    /**
      * Header text
      * @type {String}
      */
    headerText: {
      type: String,
      required: !0
    },
    /**
      * Body text
      * @type {String}
      */
    bodyText: {
      type: String,
      default: null
    }
  },
  setup(e) {
    const l = x(), s = e, T = t(() => d(l.icon)), u = t(() => d(l.illustration)), _ = t(() => s.size === "sm"), I = t(() => T.value && (!u.value || _.value)), h = t(() => u.value && !_.value), v = t(() => p[s.size]), f = t(() => ["d-empty-state", v.value]), b = t(() => g[s.size]), z = t(() => N[s.size]), C = t(() => Y[s.size]);
    return D(() => {
      !s.bodyText && !d(l.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
    }), (n, F) => (o(), M(m(E), {
      class: a(f.value)
    }, {
      default: y(() => [
        h.value ? (o(), r("span", A, [
          c(n.$slots, "illustration")
        ])) : i("", !0),
        I.value ? (o(), r("span", B, [
          c(n.$slots, "icon", { iconSize: "800" })
        ])) : i("", !0),
        k(m(E), {
          gap: "450",
          class: a(["d-empty-state__content", b.value])
        }, {
          default: y(() => [
            O("div", {
              class: a(["d-empty-state__header-text", z.value])
            }, S(e.headerText), 3),
            e.bodyText ? (o(), r("p", {
              key: 0,
              class: a(["d-empty-state__body-text", C.value])
            }, S(e.bodyText), 3)) : i("", !0)
          ]),
          _: 1
        }, 8, ["class"]),
        c(n.$slots, "body")
      ]),
      _: 3
    }, 8, ["class"]));
  }
};
export {
  V as default
};
//# sourceMappingURL=empty-state.js.map