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

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

import { defineComponent as l, computed as d, openBlock as m, createElementBlock as p, normalizeStyle as r, unref as n, createVNode as i, withCtx as u, renderSlot as f, createElementVNode as g, toDisplayString as y, createCommentVNode as _ } from "vue";
import { Props as k } from "./index3.js";
import { FSvgIcon as C } from "../../svg-icon/index.js";
import S from "../../_components/svg/index8.js";
const E = l({
  name: "FLoading"
}), V = /* @__PURE__ */ l({
  ...E,
  props: k,
  setup(s) {
    const e = s, a = (o) => {
      e.closeEnd && e.closeEnd(o);
    }, c = d(() => {
      const { background: o, opacity: t } = e;
      return {
        background: o,
        opacity: t
      };
    });
    return (o, t) => o.show ? (m(), p("div", {
      key: 0,
      class: "f-loading",
      style: r(n(c)),
      onClick: a
    }, [
      i(n(C), {
        size: 20,
        class: "f-loading__animation",
        icon: o.icon
      }, {
        default: u(() => [
          f(o.$slots, "icon", {}, () => [
            i(n(S))
          ])
        ]),
        _: 3
      }, 8, ["icon"]),
      g("span", {
        class: "f-loading__title",
        style: r({ fontSize: o.fontSize, color: o.fontColor })
      }, y(o.text || " \u73A9\u547D\u52A0\u8F7D\u4E2D..."), 5)
    ], 4)) : _("", !0);
  }
});
export {
  V as default
};