@indielayer/ui/lib/components/avatar/Avatar.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as f, ref as g, computed as v, watch as y, openBlock as n, createBlock as h, resolveDynamicComponent as w, normalizeStyle as C, unref as r, normalizeClass as S, withCtx as _, createElementBlock as s, createCommentVNode as l, toDisplayString as k, renderSlot as z, createVNode as B } from "vue";
import { useCommon as i } from "../../composables/useCommon.js";
import { useColors as I } from "../../composables/useColors.js";
import { useTheme as N } from "../../composables/useTheme.js";
import { avatarIcon as $ } from "../../common/icons.js";
import b from "../icon/Icon.vue.js";
const A = ["alt", "src"], D = {
  key: 1,
  class: "leading-none"
}, V = {
  ...i.props(),
  ...I.props("primary"),
  tag: {
    type: String,
    default: "div"
  },
  name: String,
  alt: String,
  image: String,
  outlined: Boolean,
  rounded: Boolean
}, E = {
  name: "XAvatar",
  validators: i.validators()
}, F = /* @__PURE__ */ f({
  ...E,
  props: V,
  setup(m) {
    const a = m, o = g(), p = v(() => {
      if (a.name) {
        const e = a.name.match(/\b\w/g) || [];
        return ((e.shift() || "") + (e.pop() || "")).toUpperCase();
      }
      return "";
    });
    typeof window < "u" && Image && y(() => a.image, (e) => {
      if (o.value = void 0, !e)
        return;
      const t = new Image();
      t.onload = () => {
        o.value = a.image;
      }, t.onerror = () => {
      }, t.src = e;
    }, {
      immediate: !0
    });
    const { styles: c, classes: u, className: d } = N("Avatar", {}, a, { source: o });
    return (e, t) => (n(), h(w(e.tag), {
      style: C(r(c)),
      class: S([
        r(d),
        e.$style.avatar,
        r(u).wrapper
      ])
    }, {
      default: _(() => [
        o.value ? (n(), s("img", {
          key: 0,
          alt: e.alt,
          src: e.image,
          class: "absolute top-0 left-0 h-full w-full"
        }, null, 8, A)) : l("", !0),
        e.name ? (n(), s("span", D, k(p.value), 1)) : e.name ? l("", !0) : z(e.$slots, "avatarIcon", { key: 2 }, () => [
          B(b, {
            size: e.size,
            icon: r($)
          }, null, 8, ["size", "icon"])
        ])
      ]),
      _: 3
    }, 8, ["style", "class"]));
  }
});
export {
  F as default
};