@shopware-ag/meteor-component-library/dist/esm/MtAvatar.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-avatar.css';
import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, toDisplayString, createCommentVNode } from "vue";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
const _hoisted_1 = {
  key: 0,
  "data-testid": "mt-avatar-initials"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "mt-avatar",
  props: {
    size: { default: "m" },
    firstName: { default: void 0 },
    lastName: { default: void 0 },
    imageUrl: { default: void 0 },
    variant: { default: "circle" }
  },
  setup(__props) {
    const colors = ["orange", "pink", "yellow", "purple", "red", "blue", "green"];
    const props = __props;
    const avatarInitials = computed(() => {
      var _a, _b;
      return (((_a = props.firstName) == null ? void 0 : _a[0]) ?? "") + (((_b = props.lastName) == null ? void 0 : _b[0]) ?? "");
    });
    const color = computed(() => {
      var _a, _b;
      const nameLength = (((_a = props.firstName) == null ? void 0 : _a.length) ?? 0) + (((_b = props.lastName) == null ? void 0 : _b.length) ?? 0);
      return colors[nameLength % colors.length];
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", {
        class: normalizeClass([
          "mt-avatar",
          `mt-avatar--size-${props.size}`,
          `mt-avatar--color-${color.value}`,
          {
            "mt-avatar--square": props.variant === "square"
          }
        ]),
        style: normalizeStyle({
          "background-image": props.imageUrl ? `url('${props.imageUrl}')` : void 0
        }),
        role: "img",
        alt: ""
      }, [
        renderSlot(_ctx.$slots, "default", {}, () => [
          !props.imageUrl ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(avatarInitials.value), 1)) : createCommentVNode("", true)
        ], true)
      ], 6);
    };
  }
});
const mtAvatar_vue_vue_type_style_index_0_scoped_06d2c9fa_lang = "";
const mtAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-06d2c9fa"]]);
export {
  mtAvatar as default
};
//# sourceMappingURL=MtAvatar.js.map