@dialpad/dialtone-vue/dist/lib/avatar/avatar.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return !!this.$slots.overlayIcon;\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return this.$scopedSlots.icon && this.$scopedSlots.icon();\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e"],"mappings":"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"}