{"version":3,"file":"avatar.vue2.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { ResizeObserver } from '@/components/resize-observer'\nimport { Renderer } from '@/components/renderer'\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { createIconProp, emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { useDisplay } from '@vexip-ui/hooks'\nimport { avatarProps } from './props'\nimport { GROUP_STATE, objectFitValues } from './symbol'\n\nimport type { ComponentSize, StyleType } from '@vexip-ui/config'\n\ndefineOptions({ name: 'Avatar' })\n\nconst _props = defineProps(avatarProps)\nconst props = useProps('avatar', _props, {\n  size: 'default',\n  src: {\n    default: '',\n    static: true,\n  },\n  icon: createIconProp(),\n  circle: false,\n  alt: '',\n  fit: {\n    default: 'cover',\n    validator: value => objectFitValues.includes(value),\n  },\n  srcSet: '',\n  gap: 4,\n  iconScale: 1.4,\n  fallbackSrc: '',\n  color: null,\n  background: null,\n  slots: () => ({}),\n})\n\nconst slots = defineSlots<{\n  default?: () => any,\n  icon?: () => any\n}>()\n\nconst groupState = inject(GROUP_STATE, null)\n\nconst nh = useNameHelper('avatar')\n\nconst loadFail = ref(false)\nconst fallbackFail = ref(false)\n\nconst wrapper = ref<HTMLElement>()\nconst text = useDisplay(() => scaleText(true))\n\nconst size = computed(() => {\n  return groupState?.size ?? props.size\n})\nconst className = computed(() => {\n  return {\n    [nh.b()]: true,\n    [nh.bs('vars')]: true,\n    [nh.bm('inherit')]: props.inherit,\n    [nh.bm(size.value as ComponentSize)]:\n      typeof size.value !== 'number' && size.value !== 'default',\n    [nh.bm('circle')]: props.circle,\n  }\n})\nconst style = computed(() => {\n  const style: StyleType = {\n    [nh.cv('color')]: props.color,\n    [nh.cv('bg-color')]: props.background,\n    [nh.cv('image-fit')]: props.fit,\n  }\n\n  if (typeof size.value === 'number') {\n    style[nh.cv('size')] = `${size.value}px`\n  }\n\n  return style\n})\n\nwatch(\n  () => props.src,\n  () => {\n    loadFail.value = false\n    fallbackFail.value = false\n    scaleText()\n  },\n)\nwatch(\n  () => props.fallbackSrc,\n  () => {\n    fallbackFail.value = false\n    scaleText()\n  },\n)\nwatch(\n  () => props.gap,\n  () => scaleText(),\n)\n\ndefineExpose({ loadFail, fallbackFail })\n\nfunction handleError(event: Event) {\n  loadFail.value = true\n  emitEvent(props.onError, event)\n}\n\nlet lastText: string | null = null\n\nfunction scaleText(force = false) {\n  const avatarEl = wrapper.value\n  const textEl = text.value\n\n  if (avatarEl && textEl && (force || lastText === null || lastText !== textEl.textContent)) {\n    lastText = textEl.textContent\n\n    const { offsetWidth: avatarWidth, offsetHeight: avatarHeight } = avatarEl\n    const { offsetWidth: textWidth, offsetHeight: textHeight } = textEl\n    const padding = props.gap * 2\n\n    const ratio = Math.min(\n      (avatarWidth - padding) / (textWidth || 1),\n      (avatarHeight - padding) / (textHeight || 1),\n      1,\n    )\n\n    textEl.style.transform = `scale(${ratio})`\n  }\n}\n\nfunction handleClick(event: MouseEvent) {\n  emitEvent(props.onClick, event)\n}\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    :class=\"className\"\n    :style=\"style\"\n    @click=\"handleClick\"\n  >\n    <img\n      v-if=\"(props.src || props.srcSet) && !loadFail\"\n      :class=\"nh.be('image')\"\n      :src=\"props.src\"\n      :alt=\"props.alt\"\n      :srcset=\"props.srcSet\"\n      @error=\"handleError\"\n    />\n    <img\n      v-else-if=\"loadFail && props.fallbackSrc && !fallbackFail\"\n      :class=\"nh.be('image')\"\n      :src=\"props.fallbackSrc\"\n      :alt=\"props.alt\"\n      @error=\"fallbackFail = true\"\n    />\n    <template v-else-if=\"icon || slots.icon\">\n      <slot name=\"icon\">\n        <Renderer :renderer=\"props.slots.icon\">\n          <Icon :class=\"nh.be('icon')\" :icon=\"icon\" :scale=\"props.iconScale\"></Icon>\n        </Renderer>\n      </slot>\n    </template>\n    <ResizeObserver v-else :on-resize=\"scaleText\">\n      <span ref=\"text\" :class=\"nh.be('text')\">\n        <slot>\n          <Renderer :renderer=\"props.slots.default\"></Renderer>\n        </slot>\n      </span>\n    </ResizeObserver>\n  </div>\n</template>\n"],"names":["_props","__props","props","useProps","createIconProp","value","objectFitValues","slots","_useSlots","groupState","inject","GROUP_STATE","nh","useNameHelper","loadFail","ref","fallbackFail","wrapper","text","useDisplay","scaleText","size","computed","className","style","watch","__expose","handleError","event","emitEvent","lastText","force","avatarEl","textEl","avatarWidth","avatarHeight","textWidth","textHeight","padding","ratio","handleClick","_createElementBlock","_unref","_normalizeClass","icon","_renderSlot","_ctx","_createVNode","Renderer","Icon","_createBlock","ResizeObserver","_createElementVNode"],"mappings":"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"}