@dialpad/dialtone-vue/dist/recipes/leftbar/contact_row/contact_row.vue.js

Vue component library for Dialpad's design system Dialtone

import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
import DtAvatar from "../../../components/avatar/avatar.vue.js";
import { safeConcatStrings } from "../../../common/utils.js";
import { DtIconUser } from "@dialpad/dialtone-icons/vue2";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtRecipeGeneralRow from "../general_row/general_row.vue.js";
const _sfc_main = {
  name: "DtRecipeContactRow",
  components: {
    DtAvatar,
    DtRecipeGeneralRow,
    DtEmojiTextWrapper,
    DtIconUser
  },
  inheritAttrs: false,
  props: {
    /**
     * Optional avatar image url.
     * If not provided it will use the initial of the name.
     */
    avatarSrc: {
      type: String,
      default: ""
    },
    /**
     * Determines whether to show the presence indicator for
     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
     * or 'active'. By default, it's null and nothing is shown.
     * defer validation to avatar component.
     * @values null, busy, away, offline, active
     */
    avatarPresence: {
      type: String,
      default: null
    },
    /**
     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
     */
    avatarSeed: {
      type: String,
      default: null
    },
    /**
     * Avatar color to display if `avatarSrc` is empty.
     */
    avatarColor: {
      type: String,
      default: null
    },
    /**
     * Text describing the user's presence, such as "in a meeting"
     */
    presenceText: {
      type: String,
      default: ""
    },
    /**
     * Name of the contact
     */
    name: {
      type: String,
      required: true
    },
    /**
     * Status as set by the user.
     */
    userStatus: {
      type: String,
      default: ""
    },
    /**
     * Gives a faded style to be used when muted
     */
    muted: {
      type: Boolean,
      default: false
    },
    /**
     * Number of unread messages
     */
    unreadCount: {
      type: String,
      default: null
    },
    /**
     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
     * the unread count badge.
     */
    hasUnreads: {
      type: Boolean,
      default: false
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: false
    },
    /**
     * Initials will never be shown. Instead it will show a "User" icon.
     */
    noInitials: {
      type: Boolean,
      default: false
    },
    /**
     * Shows an "is typing" animation over the avatar when true.
     */
    isTyping: {
      type: Boolean,
      default: false
    },
    /**
     * Whether the contact row should display a call button when hovered.
     */
    hasCallButton: {
      type: Boolean,
      default: true
    },
    /**
     * Text shown when the call button is hovered.
     */
    callButtonTooltip: {
      type: String,
      default: ""
    },
    /**
     * Text shown when the unread count is hovered.
     */
    unreadCountTooltip: {
      type: String,
      default: ""
    }
  },
  emits: [
    /**
     * Native click event on the row itself
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * Call button clicked
     *
     * @event call
     * @type {PointerEvent | KeyboardEvent}
     */
    "call"
  ],
  computed: {
    presenceFontColorClass() {
      const presenceFontColors = {
        active: "d-recipe-contact-row--active",
        busy: "d-recipe-contact-row--busy",
        away: "d-recipe-contact-row--away"
      };
      return presenceFontColors[this.avatarPresence];
    },
    contactDescription() {
      return safeConcatStrings([this.name, this.presenceText, this.userStatus]);
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("dt-recipe-general-row", _vm._g(_vm._b({ attrs: { "unread-count": _vm.unreadCount, "description": _vm.contactDescription, "has-unreads": _vm.hasUnreads, "selected": _vm.selected, "has-call-button": _vm.hasCallButton, "muted": _vm.muted, "is-typing": _vm.isTyping, "call-button-tooltip": _vm.callButtonTooltip, "unread-count-tooltip": _vm.unreadCountTooltip, "data-qa": "contact-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
    return [_c("dt-avatar", { attrs: { "full-name": _vm.name, "image-src": _vm.avatarSrc, "color": _vm.avatarColor, "image-alt": "", "size": "sm", "seed": _vm.avatarSeed, "presence": _vm.avatarPresence }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function() {
      return [_c("dt-icon-user", { attrs: { "size": "200" } })];
    }, proxy: true } : null], null, true) })];
  }, proxy: true }, { key: "label", fn: function() {
    return [_c("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _c("div", { staticClass: "d-recipe-leftbar-row__status" }, [_vm.presenceText ? _c("span", { class: ["d-recipe-leftbar-row__meta-context", _vm.presenceFontColorClass], attrs: { "data-qa": "dt-recipe-leftbar-row-presence-text" } }, [_vm._v(" " + _vm._s(_vm.presenceText) + " ")]) : _vm._e(), _vm.userStatus ? _c("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__meta-custom", attrs: { "size": "100", "element-type": "span", "data-qa": "dt-recipe-leftbar-row-user-status" } }, [_vm._v(" " + _vm._s(_vm.userStatus) + " ")]) : _vm._e()], 1)];
  }, proxy: true }]) }, "dt-recipe-general-row", _vm.$attrs, false), _vm.$listeners));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const contact_row = __component__.exports;
export {
  contact_row as default
};
//# sourceMappingURL=contact_row.vue.js.map