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

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as d, ref as f, computed as g, watch as v, openBlock as n, createBlock as y, resolveDynamicComponent as h, normalizeStyle as w, unref as r, normalizeClass as C, withCtx as S, createElementBlock as s, toDisplayString as _, renderSlot as k, createVNode as z, createCommentVNode 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 A from "../icon/Icon.vue.js";
const D = ["alt", "src"], V = {
  key: 1,
  class: "leading-none"
}, b = {
  ...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__ */ d({
  ...E,
  props: b,
  setup(l) {
    const a = l, o = f(), m = g(() => {
      if (a.name) {
        const e = a.name.match(/\b\w/g) || [];
        return ((e.shift() || "") + (e.pop() || "")).toUpperCase();
      }
      return "";
    });
    typeof window < "u" && Image && v(() => 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: p, className: u } = N("Avatar", {}, a, { source: o });
    return (e, t) => (n(), y(h(e.tag), {
      style: w(r(c)),
      class: C([
        r(u),
        e.$style.avatar,
        r(p).wrapper
      ])
    }, {
      default: S(() => [
        o.value ? (n(), s("img", {
          key: 0,
          alt: e.alt,
          src: e.image,
          class: "h-full w-full"
        }, null, 8, D)) : e.name ? (n(), s("span", V, _(m.value), 1)) : e.name ? B("", !0) : k(e.$slots, "avatarIcon", { key: 2 }, () => [
          z(A, {
            size: e.size,
            icon: r($)
          }, null, 8, ["size", "icon"])
        ])
      ]),
      _: 3
    }, 8, ["style", "class"]));
  }
});
export {
  F as default
};