@extclp/vexip-ui/es/components/avatar/avatar.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

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