@opensig/opendesign/lib/avatar/OAvatar.vue.js

"use strict";
const vue = require("vue");
const icons = require("../_utils/icons.js");
const types = require("./types.js");
const utils = require("./utils.js");
const _hoisted_1 = ["src"];
const _hoisted_2 = { key: 1 };
const _hoisted_3 = {
  key: 3,
  class: "o-avatar-trigger-icon"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OAvatar",
  props: types.avatarProps,
  emits: ["click", "error", "load"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const hasError = vue.ref(false);
    const isLoaded = vue.ref(false);
    const showText = vue.computed(() => props.name && !props.url);
    const showDefault = vue.computed(() => !props.url && !props.name);
    const outerStyle = vue.computed(() => {
      const style = {};
      if (props.size) {
        style["--avatar-size"] = utils.normalizeSize(props.size);
      }
      if (showText.value) {
        style["--avatar-bg"] = props.background || `var(--o-color-auxiliary${Math.floor(Math.random() * 8) + 1})`;
      } else if (!showDefault.value && !hasError.value) {
        style["--avatar-bg"] = `var(--o-color-fill2)`;
      }
      return style;
    });
    const handleImgLoad = () => {
      isLoaded.value = true;
      emit("load");
    };
    const handleImgError = () => {
      hasError.value = true;
      emit("error");
    };
    const onClick = (e) => {
      if (props.clickable) {
        emit("click", e);
      }
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          style: vue.normalizeStyle(outerStyle.value),
          class: vue.normalizeClass([
            "o-avatar",
            "o-avatar-circle",
            {
              "o-avatar-img": isLoaded.value,
              "o-avatar-default": !showText.value && !isLoaded.value,
              "o-avatar-text": showText.value,
              "o-avatar-clickable": props.clickable
            }
          ]),
          onClick
        },
        [
          _ctx.url && !hasError.value ? (vue.openBlock(), vue.createElementBlock("img", {
            key: 0,
            src: _ctx.url,
            style: vue.normalizeStyle({ objectFit: props.objectFit }),
            alt: "avatar",
            onLoad: handleImgLoad,
            onError: handleImgError
          }, null, 44, _hoisted_1)) : showText.value ? vue.renderSlot(_ctx.$slots, "name", { key: 1 }, () => {
            var _a;
            return [
              props.nameFormatter ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.nameFormatter({ name: props.name })), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(
                "span",
                _hoisted_2,
                vue.toDisplayString((_a = props.name) == null ? void 0 : _a[0]),
                1
                /* TEXT */
              ))
            ];
          }) : showDefault.value || hasError.value ? (vue.openBlock(), vue.createBlock(vue.unref(icons.IconAvatar), {
            key: 2,
            class: "o-avatar-default-icon"
          })) : vue.createCommentVNode("v-if", true),
          props.clickable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
            vue.renderSlot(_ctx.$slots, "trigger-icon", {}, () => [
              vue.createVNode(vue.unref(icons.IconEdit))
            ])
          ])) : vue.createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
module.exports = _sfc_main;