@shopware-ag/meteor-component-library/dist/common/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';
"use strict";
const vue = require("vue");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
const _hoisted_1 = {
  key: 0,
  "data-testid": "mt-avatar-initials"
};
const _sfc_main = /* @__PURE__ */ vue.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 = vue.computed(() => {
      var _a, _b;
      return (((_a = props.firstName) == null ? void 0 : _a[0]) ?? "") + (((_b = props.lastName) == null ? void 0 : _b[0]) ?? "");
    });
    const color = vue.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 vue.openBlock(), vue.createElementBlock("span", {
        class: vue.normalizeClass([
          "mt-avatar",
          `mt-avatar--size-${props.size}`,
          `mt-avatar--color-${color.value}`,
          {
            "mt-avatar--square": props.variant === "square"
          }
        ]),
        style: vue.normalizeStyle({
          "background-image": props.imageUrl ? `url('${props.imageUrl}')` : void 0
        }),
        role: "img",
        alt: ""
      }, [
        vue.renderSlot(_ctx.$slots, "default", {}, () => [
          !props.imageUrl ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(avatarInitials.value), 1)) : vue.createCommentVNode("", true)
        ], true)
      ], 6);
    };
  }
});
const mtAvatar_vue_vue_type_style_index_0_scoped_06d2c9fa_lang = "";
const mtAvatar = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-06d2c9fa"]]);
module.exports = mtAvatar;
//# sourceMappingURL=MtAvatar.js.map