t-fighting-design/es/empty/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as i, computed as f, openBlock as o, createElementBlock as t, normalizeStyle as s, createElementVNode as n, renderSlot as m, Fragment as y, createBlock as a, unref as c, toDisplayString as u, createCommentVNode as g } from "vue";
import k from "../../_components/index.js";
import { Props as S } from "./index3.js";
import { FImage as _ } from "../../image/index.js";
const h = { class: "f-empty__pic-wrap" }, v = {
  key: 0,
  class: "f-empty__footer"
}, z = i({
  name: "FEmpty"
}), E = /* @__PURE__ */ i({
  ...z,
  props: S,
  setup(l) {
    const p = l, d = f(
      () => {
        const { contentColor: e, contentSize: r } = p;
        return {
          color: e,
          fontSize: r
        };
      }
    );
    return (e, r) => (o(), t("div", {
      class: "f-empty",
      style: s({ background: e.background })
    }, [
      n("div", h, [
        e.$slots.image ? m(e.$slots, "image", { key: 0 }) : (o(), t(y, { key: 1 }, [
          e.imageSrc ? (o(), a(c(_), {
            key: 0,
            src: e.imageSrc,
            width: e.imageSize
          }, null, 8, ["src", "width"])) : (o(), a(k, { key: 1 }))
        ], 64))
      ]),
      n("span", {
        class: "f-empty__desc",
        style: s(c(d))
      }, u(e.content), 5),
      e.$slots.footer ? (o(), t("div", v, [
        m(e.$slots, "footer")
      ])) : g("", !0)
    ], 4));
  }
});
export {
  E as default
};