import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import "./styles/avatar.css";
import { nextTick, ref, toRef, watch } from "vue";
import { propsFactory } from "@veno-ui/utils";
import { defineComponent } from "../../utils";
import { Resize } from "../../directives/resize";
import { makePaperProps, usePaper } from "../../composables/paper";
import { Image } from "../image";
import { Icon } from "../icon";
const RADIX = 0.8;
const makeAvatarProps = propsFactory({
  /**
   * @zh 是否在左侧
   */
  start: Boolean,
  /**
   * @zh 是否在右侧
   */
  end: Boolean,
  /**
   * @zh 图像
   */
  image: String,
  /**
   * @zh 图标
   */
  icon: [String, Object],
  /**
   * @zh 文本
   */
  text: String,
  /**
   * @zh 可点击
   */
  link: Boolean,
  ...makePaperProps({
    color: "secondary",
    shape: "circle"
  })
}, "avatar");
const Avatar = defineComponent({
  name: "VeAvatar",
  directives: {
    Resize
  },
  props: makeAvatarProps(),
  setup(props, {
    slots,
    attrs
  }) {
    const {
      paperClasses,
      paperStyles
    } = usePaper(props);
    const rootRef = ref();
    const contentRef = ref();
    function onResize() {
      nextTick(() => {
        if (!rootRef.value || !contentRef.value)
          return;
        const ratio = Math.min(rootRef.value.offsetWidth / contentRef.value.offsetWidth * RADIX, rootRef.value.offsetHeight / contentRef.value.offsetHeight * RADIX, 1);
        contentRef.value.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})`;
      });
    }
    watch(toRef(props, "text"), onResize);
    return () => {
      const hasImage = !!props.image;
      const hasIcon = !!props.icon;
      const hasText = !!props.text;
      const isClickable = props.link || !!(attrs.onClick || attrs.onClickOnce);
      return _withDirectives(_createVNode(props.tag, {
        "class": ["ve-avatar", {
          "ve-avatar--start": props.start,
          "ve-avatar--end": props.end,
          "ve-avatar--icon": props.icon,
          "ve-avatar--link": isClickable
        }, paperClasses.value],
        "style": paperStyles.value,
        "ref": rootRef
      }, {
        default: () => [hasImage && _createVNode(Image, {
          "src": props.image,
          "alt": ""
        }, null), hasIcon && !hasImage && _createVNode(Icon, {
          "icon": props.icon,
          "size": props.size
        }, null), hasText && !hasIcon && !hasImage && _createVNode("span", {
          "class": "ve-avatar__wrapper",
          "ref": contentRef
        }, [props.text]), slots.default?.()]
      }), [[_resolveDirective("resize"), onResize]]);
    };
  }
});
export {
  Avatar,
  makeAvatarProps
};
//# sourceMappingURL=avatar.mjs.map
