maz-ui/components/chunks/MazAvatar.CNx-fB-w.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as I, defineAsyncComponent as p, computed as u, openBlock as r, createBlock as g, resolveDynamicComponent as L, normalizeStyle as k, normalizeClass as v, withCtx as E, createElementVNode as b, createElementBlock as i, Fragment as M, unref as y, mergeProps as P, createCommentVNode as l, renderSlot as f, toDisplayString as h, createVNode as A } from "vue";
import '../assets/MazAvatar.CgztJYCP.css';const D = ["tabindex"], N = ["src", "alt", "loading"], R = { class: "m-avatar__initial" }, V = {
  key: 0,
  class: "m-avatar__caption"
}, q = /* @__PURE__ */ I({
  __name: "MazAvatar",
  props: {
    style: {},
    class: {},
    src: { default: void 0 },
    caption: { default: void 0 },
    href: { default: void 0 },
    to: { default: void 0 },
    alt: { default: "avatar image" },
    target: { default: "_self" },
    size: { default: void 0 },
    bordered: { type: Boolean },
    clickable: { type: Boolean },
    square: { type: Boolean },
    noElevation: { type: Boolean },
    showCaption: { type: Boolean },
    imageHeightFull: { type: Boolean },
    noLoader: { type: Boolean },
    buttonColor: { default: "info" },
    noClickableIcon: { type: Boolean },
    letterCount: { default: void 0 },
    roundedSize: { default: "full" },
    fallbackSrc: { default: void 0 },
    noPhoto: { type: Boolean },
    loading: { default: "intersecting" }
  },
  emits: ["click", "intersecting", "loading", "loaded", "error"],
  setup(n, { emit: s }) {
    const a = n, d = s, c = p(() => import("./MazLazyImg.BtE4rUvl.mjs")), C = p(() => import("./pencil.Z-mPplOz.mjs")), z = u(() => a.to ? "RouterLink" : a.href ? "a" : "div"), m = u(() => !!a.to || !!a.href);
    function S(e, o = a.letterCount) {
      return e.split(" ").map((B) => B[0]).join("").slice(0, o);
    }
    const w = u(() => a.src || !a.src && !a.caption);
    function $(e) {
      if (d("error", e.target), a.fallbackSrc && e.target instanceof HTMLImageElement) {
        const o = new URL(e.target.src), t = new URL(a.fallbackSrc);
        if (o.href === t.href)
          return;
        e.target.src = a.fallbackSrc;
      }
    }
    return (e, o) => (r(), g(L(z.value), {
      style: k([{ fontSize: e.size }, e.style]),
      class: v(["m-avatar m-reset-css", [
        {
          "--has-link": m.value
        },
        a.class
      ]]),
      href: e.href,
      to: e.to,
      target: m.value ? e.target : void 0
    }, {
      default: E(() => [
        b("div", {
          class: v(["m-avatar__wrapper", [
            {
              "--has-shadow": !e.noElevation,
              "--bordered": e.bordered,
              "--clickable": e.clickable,
              "--has-initial": !e.src && e.caption
            },
            `--rounded-${e.square ? "none" : e.roundedSize}`
          ]]),
          tabindex: e.clickable ? 0 : -1
        }, [
          w.value ? (r(), i(
            M,
            { key: 0 },
            [
              e.loading === "intersecting" ? (r(), g(y(c), P({ key: 0 }, e.$attrs, {
                class: "m-avatar__picture maz-w-full maz-max-w-full",
                src: e.src,
                alt: e.alt,
                "no-photo": e.noPhoto,
                "image-height-full": "",
                "no-loader": e.noLoader,
                "fallback-src": e.fallbackSrc,
                onClick: o[0] || (o[0] = (t) => e.clickable ? e.$emit("click", t) : null),
                onError: o[1] || (o[1] = (t) => e.$emit("error", t)),
                onLoaded: o[2] || (o[2] = (t) => e.$emit("loaded", t)),
                onLoading: o[3] || (o[3] = (t) => e.$emit("loading", t)),
                onIntersecting: o[4] || (o[4] = (t) => e.$emit("intersecting", t))
              }), null, 16, ["src", "alt", "no-photo", "no-loader", "fallback-src"])) : (r(), i("img", {
                key: 1,
                class: "m-avatar__picture maz-w-full maz-max-w-full",
                src: e.src ?? e.fallbackSrc,
                alt: e.alt,
                loading: e.loading,
                onError: $
              }, null, 40, N))
            ],
            64
            /* STABLE_FRAGMENT */
          )) : l("v-if", !0),
          e.caption && !e.src ? f(e.$slots, "round-text", { key: 1 }, () => [
            b(
              "span",
              R,
              h(S(e.caption)),
              1
              /* TEXT */
            )
          ], !0) : l("v-if", !0),
          e.clickable ? (r(), i(
            "button",
            {
              key: 2,
              type: "button",
              tabindex: "-1",
              class: "m-avatar__button",
              style: k({
                backgroundColor: e.src ? `var(--maz-color-${e.buttonColor}-alpha)` : `var(--maz-color-${e.buttonColor})`
              }),
              onClick: o[5] || (o[5] = (t) => e.$emit("click", t))
            },
            [
              e.noClickableIcon ? l("v-if", !0) : f(e.$slots, "icon", { key: 0 }, () => [
                A(y(C), { class: "m-avatar__button__icon" })
              ], !0)
            ],
            4
            /* STYLE */
          )) : l("v-if", !0)
        ], 10, D),
        f(e.$slots, "caption", {}, () => [
          e.showCaption && e.caption ? (r(), i(
            "p",
            V,
            h(e.caption),
            1
            /* TEXT */
          )) : l("v-if", !0)
        ], !0)
      ]),
      _: 3
      /* FORWARDED */
    }, 8, ["style", "class", "href", "to", "target"]));
  }
}), F = (n, s) => {
  const a = n.__vccOpts || n;
  for (const [d, c] of s)
    a[d] = c;
  return a;
}, j = /* @__PURE__ */ F(q, [["__scopeId", "data-v-ff05e3ec"]]);
export {
  j as M,
  F as _
};