@opensig/opendesign/es/avatar/OAvatar.vue.mjs

import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, normalizeStyle, renderSlot, createBlock, createCommentVNode, resolveDynamicComponent, toDisplayString, unref, createVNode } from "vue";
import { IconAvatar, IconEdit } from "../_utils/icons.mjs";
import { avatarProps } from "./types.mjs";
import { normalizeSize } from "./utils.mjs";
const _hoisted_1 = ["src"];
const _hoisted_2 = { key: 1 };
const _hoisted_3 = {
  key: 3,
  class: "o-avatar-trigger-icon"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OAvatar",
  props: avatarProps,
  emits: ["click", "error", "load"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const hasError = ref(false);
    const isLoaded = ref(false);
    const showText = computed(() => props.name && !props.url);
    const showDefault = computed(() => !props.url && !props.name);
    const outerStyle = computed(() => {
      const style = {};
      if (props.size) {
        style["--avatar-size"] = 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 openBlock(), createElementBlock(
        "div",
        {
          style: normalizeStyle(outerStyle.value),
          class: 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 ? (openBlock(), createElementBlock("img", {
            key: 0,
            src: _ctx.url,
            style: normalizeStyle({ objectFit: props.objectFit }),
            alt: "avatar",
            onLoad: handleImgLoad,
            onError: handleImgError
          }, null, 44, _hoisted_1)) : showText.value ? renderSlot(_ctx.$slots, "name", { key: 1 }, () => {
            var _a;
            return [
              props.nameFormatter ? (openBlock(), createBlock(resolveDynamicComponent(props.nameFormatter({ name: props.name })), { key: 0 })) : (openBlock(), createElementBlock(
                "span",
                _hoisted_2,
                toDisplayString((_a = props.name) == null ? void 0 : _a[0]),
                1
                /* TEXT */
              ))
            ];
          }) : showDefault.value || hasError.value ? (openBlock(), createBlock(unref(IconAvatar), {
            key: 2,
            class: "o-avatar-default-icon"
          })) : createCommentVNode("v-if", true),
          props.clickable ? (openBlock(), createElementBlock("div", _hoisted_3, [
            renderSlot(_ctx.$slots, "trigger-icon", {}, () => [
              createVNode(unref(IconEdit))
            ])
          ])) : createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
export {
  _sfc_main as default
};