@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, createBlock as M, openBlock as o, unref as m, normalizeClass as a, withCtx as y, createElementBlock as r, createCommentVNode as c, createVNode as k, renderSlot as i, 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, [
          i(n.$slots, "illustration")
        ])) : c("", !0),
        I.value ? (o(), r("span", B, [
          i(n.$slots, "icon", { iconSize: "800" })
        ])) : c("", !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)) : c("", !0)
          ]),
          _: 1
        }, 8, ["class"]),
        i(n.$slots, "body")
      ]),
      _: 3
    }, 8, ["class"]));
  }
};
export {
  V as default
};
//# sourceMappingURL=empty-state.js.map