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

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

import { defineComponent as y, useSlots as $, ref as l, computed as c, onMounted as A, openBlock as a, createElementBlock as i, normalizeClass as d, unref as s, normalizeStyle as p, createBlock as b, withCtx as w, renderSlot as _, toDisplayString as z, withDirectives as D, vShow as I, createElementVNode as B } from "vue";
import { Props as L } from "./index3.js";
import { loadImage as N } from "../../_utils/index2.js";
import { isString as g, isNumber as P, sizeChange as E } from "../../_utils/index3.js";
import { FSvgIcon as M } from "../../svg-icon/index.js";
import { useFilterProps as V } from "../../_hooks/use-filter-props/index.js";
import "../../_hooks/use-message/index.js";
import "../../loading-bar/src/index2.js";
const j = {
  key: 1,
  class: "f-avatar__text"
}, q = ["alt"], G = { class: "f-avatar__error-text" }, H = y({
  name: "FAvatar"
}), X = /* @__PURE__ */ y({
  ...H,
  props: L,
  setup(k) {
    const r = k, S = $(), f = l(!0), u = l(r.lazy), m = l(
      null
    ), h = c(() => {
      const { round: o, size: t, fit: e } = r;
      return [
        "f-avatar__img",
        {
          "f-avatar__round": o,
          [`f-avatar__${t}`]: g(t),
          [`f-avatar__${e}`]: e
        }
      ];
    }), C = c(() => {
      const { size: o, round: t } = r;
      return [
        "f-avatar",
        {
          "f-avatar__round": t,
          [`f-avatar__${o}`]: g(o)
        }
      ];
    }), v = c(() => {
      const { background: o, size: t, fontColor: e, fontSize: n } = r;
      return {
        "--f-avatar-size": P(t) ? t + "px" : "",
        "--f-avatar-background-color": o,
        "--f-avatar-font-color": e,
        "--f-avatar-font-size": E(n)
      };
    }), F = () => {
      const o = m.value, t = (n) => {
        f.value = n, u.value = n;
      }, e = V(r, [
        "src",
        "errSrc",
        "rootMargin",
        "lazy",
        "load",
        "error"
      ]);
      N(o, e, t);
    };
    return A(() => {
      !S.icon && !r.icon && !r.text && F();
    }), (o, t) => f.value ? (a(), i("div", {
      key: 0,
      role: "img",
      class: d(s(C)),
      style: p(s(v))
    }, [
      o.$slots.icon || o.icon ? (a(), b(s(M), {
        key: 0,
        size: o.fontSize,
        color: o.fontColor,
        icon: o.icon
      }, {
        default: w(() => [
          _(o.$slots, "icon")
        ]),
        _: 3
      }, 8, ["size", "color", "icon"])) : o.text ? (a(), i("span", j, z(o.text), 1)) : D((a(), i("img", {
        key: 2,
        ref_key: "FAvatarImg",
        ref: m,
        src: "",
        class: d(s(h)),
        alt: o.alt
      }, null, 10, q)), [
        [I, u.value]
      ])
    ], 6)) : (a(), i("div", {
      key: 1,
      class: "f-avatar__error",
      style: p(s(v))
    }, [
      _(o.$slots, "error", {}, () => [
        B("span", G, z(o.alt || "\u52A0\u8F7D\u5931\u8D25"), 1)
      ])
    ], 4));
  }
});
export {
  X as default
};