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

Vue component library for Dialpad's design system Dialtone

import { LEFTBAR_GENERAL_ROW_TYPES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS, LEFTBAR_GENERAL_ROW_ICON_SIZES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR } from "./general_row_constants.js";
import { DtIconPhone, DtIconWaveform } from "@dialpad/dialtone-icons/vue2";
import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
import DtRecipeLeftbarGeneralRowIcon from "./leftbar_general_row_icon.vue.js";
import { safeConcatStrings } from "../../../common/utils.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtBadge from "../../../components/badge/badge.vue.js";
import DtButton from "../../../components/button/button.vue.js";
import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
const _sfc_main = {
  name: "DtRecipeGeneralRow",
  components: {
    DtEmojiTextWrapper,
    DtBadge,
    DtButton,
    DtTooltip,
    DtIconPhone,
    DtIconWaveform,
    DtRecipeLeftbarGeneralRowIcon
  },
  inheritAttrs: false,
  props: {
    /**
     * Determines the icon to show.
     * If type is contact center, the color prop must be provided and will determine the color of the icon
     */
    type: {
      type: String,
      default: "inbox",
      validator: (type) => {
        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);
      }
    },
    /**
     * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
     */
    ariaLabel: {
      type: String,
      default: ""
    },
    /**
     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot
     * you still must input this as it will be displayed as the "title" attribute for the row.
     */
    description: {
      type: String,
      required: true
    },
    /**
     * Determines the color of the contact center icon
     */
    color: {
      type: String,
      default: null,
      validator: (color) => {
        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);
      }
    },
    /**
     * The channel setting, either 'mention' or 'always'.
     * @values 'mention', 'always', null.
     */
    channelSetting: {
      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
    },
    /**
     * Number of unread messages
     */
    unreadCount: {
      type: String,
      default: null
    },
    /**
     * Number of unread mention messages
     */
    unreadMentionCount: {
      type: String,
      default: null
    },
    /**
     * Text shown when the unread count is hovered.
     */
    unreadCountTooltip: {
      type: String,
      default: ""
    },
    /**
     * Determines if the row is selected
     */
    selected: {
      type: Boolean,
      default: false
    },
    /**
     * Gives a faded style to be used when muted
     */
    muted: {
      type: Boolean,
      default: false
    },
    /**
     * Shows styling to represent an active voice chat. This will display over unreadCount.
     */
    activeVoiceChat: {
      type: Boolean,
      default: false
    },
    /**
     * Acronym used to represent "Do not Disturb" state. If entered will display the entered text alongside
     * unreadCount.
     */
    dndText: {
      type: String,
      default: ""
    },
    /**
     * Text shown in tooltip when you hover the dndText
     */
    dndTextTooltip: {
      type: String,
      default: ""
    },
    /**
     * Whether the row should have a call button. Usually only applicable to individual contact rows.
     */
    hasCallButton: {
      type: Boolean,
      default: false
    },
    /**
     * Text shown when the call button is hovered.
     */
    callButtonTooltip: {
      type: String,
      default: ""
    },
    /**
     * Shows an "is typing" animation over the avatar when true.
     */
    isTyping: {
      type: Boolean,
      default: false
    },
    /**
     * Sets the size of the icon.
     */
    iconSize: {
      type: String,
      default: "300",
      validator: (size) => {
        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);
      }
    }
  },
  emits: [
    /**
     * Native click event on the row itself
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click",
    /**
     * Call button clicked
     *
     * @event call
     * @type {PointerEvent | KeyboardEvent}
     */
    "call"
  ],
  data() {
    return {
      actionFocused: false,
      labelWidth: "100%"
    };
  },
  computed: {
    leftbarGeneralRowClasses() {
      return [
        "d-recipe-leftbar-row",
        {
          "d-recipe-leftbar-row--no-action": !this.hasCallButton,
          "d-recipe-leftbar-row--has-unread": this.hasUnreads,
          "d-recipe-leftbar-row__unread-count": this.showUnreadCount || this.showUnreadMentionCount,
          "d-recipe-leftbar-row--selected": this.selected,
          "d-recipe-leftbar-row--muted": this.muted,
          "d-recipe-leftbar-row--action-focused": this.actionFocused
        }
      ];
    },
    getIcon() {
      switch (this.type) {
        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:
          if (this.hasUnreads) return "channel unread";
          break;
        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:
          if (this.hasUnreads) return "locked channel unread";
          break;
      }
      return this.type;
    },
    getAriaLabel() {
      return this.ariaLabel ? this.ariaLabel : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);
    },
    hasActions() {
      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton || this.showUnreadMentionCount;
    },
    showUnreadCount() {
      return !!this.unreadCount && this.hasUnreads;
    },
    showUnreadMentionCount() {
      return !!this.unreadMentionCount && this.hasUnreads;
    },
    hasUnreadCount() {
      return this.unreadCount !== null;
    },
    hasUnreadMentionCount() {
      return this.unreadMentionCount !== null;
    },
    shouldApplyCustomStyleForCountBadge() {
      return this.hasUnreadCount && this.hasUnreadMentionCount;
    },
    /**
     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,
     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).
     * @returns {boolean}
     */
    shouldApplyCustomStyleForMentionOnly() {
      return this.channelSetting === "always" && !this.hasUnreadCount && this.hasUnreadMentionCount;
    }
  },
  watch: {
    $props: {
      immediate: true,
      deep: true,
      async handler() {
        this.validateProps();
        await this.$nextTick();
        this.adjustLabelWidth();
      }
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);
    this.resizeObserver.observe(this.$el);
    this.adjustLabelWidth();
  },
  beforeDestroy: function() {
    this.resizeObserver.disconnect();
  },
  methods: {
    validateProps() {
      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER && !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {
        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);
      }
    },
    adjustLabelWidth() {
      var _a, _b, _c, _d, _e, _f;
      const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
      const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
      const alphaWidth = ((_f = (_e = this.$el) == null ? void 0 : _e.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
      const paddings = 16;
      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + "px";
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("div", { class: _vm.leftbarGeneralRowClasses, attrs: { "data-qa": "dt-recipe-leftbar-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "d-recipe-leftbar-row__primary", attrs: { "data-qa": "data-qa" in _vm.$attrs ? _vm.$attrs["data-qa"] : "d-recipe-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": "href" in _vm.$attrs ? _vm.$attrs.href : "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "d-recipe-leftbar-row__alpha" }, [_vm.isTyping ? _c("div", { staticClass: "d-recipe-leftbar-row__is-typing" }, [_c("span"), _c("span"), _c("span")]) : _vm._t("left", function() {
    return [_c("dt-recipe-leftbar-general-row-icon", { attrs: { "type": _vm.getIcon, "color": _vm.color, "icon-size": _vm.iconSize, "data-qa": "dt-recipe-leftbar-row-icon" } })];
  })], 2), _c("div", { staticClass: "d-recipe-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_vm._t("label", 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.description) + " ")])];
  })], 2)]), _vm.hasActions ? _c("div", { staticClass: "d-recipe-leftbar-row__omega" }, [_vm.dndText ? _c("dt-tooltip", { attrs: { "placement": "top", "message": _vm.dndTextTooltip }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
    return [_c("div", { ref: "d-recipe-leftbar-row-dnd", staticClass: "d-recipe-leftbar-row__dnd", attrs: { "data-qa": "dt-recipe-leftbar-row-dnd" } }, [_vm._v(" " + _vm._s(_vm.dndText) + " ")])];
  }, proxy: true }], null, false, 3247296267) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "d-recipe-leftbar-row__active-voice" }, [_c("dt-icon-waveform", { attrs: { "size": "300" } })], 1) : _vm.showUnreadCount || _vm.showUnreadMentionCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
    return [_vm.showUnreadCount ? _c("dt-badge", { class: ["d-recipe-leftbar-row__unread-badge", {
      "d-recipe-leftbar-row__unread-count-badge": _vm.shouldApplyCustomStyleForCountBadge
    }], attrs: { "kind": "count", "type": "bulletin", "data-qa": "dt-recipe-leftbar-row-unread-badge" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _vm.showUnreadMentionCount ? _c("dt-badge", { class: [
      "d-recipe-leftbar-row__unread-badge",
      { "d-recipe-leftbar-row__unread-mention-count-badge": _vm.shouldApplyCustomStyleForCountBadge },
      { "d-recipe-leftbar-row__unread-mention-only-count-badge": _vm.shouldApplyCustomStyleForMentionOnly }
    ], attrs: { "kind": "count", "type": "bulletin", "data-qa": "dt-recipe-leftbar-row-unread-mention-badge" } }, [_vm._v(" " + _vm._s(_vm.unreadMentionCount) + " ")]) : _vm._e()];
  }, proxy: true }], null, false, 715135836) }) : _vm._e(), _vm.hasCallButton ? _c("div", { staticClass: "d-recipe-leftbar-row__action", attrs: { "data-qa": "dt-recipe-leftbar-row-action" } }, [_c("dt-tooltip", { attrs: { "message": _vm.callButtonTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
    return [_c("dt-button", { staticClass: "d-recipe-leftbar-row__action-button", attrs: { "data-qa": "dt-recipe-leftbar-row-action-call-button", "circle": true, "size": "xs", "kind": "inverted", "aria-label": _vm.callButtonTooltip }, on: { "focus": function($event) {
      _vm.actionFocused = true;
    }, "blur": function($event) {
      _vm.actionFocused = false;
    }, "click": function($event) {
      $event.stopPropagation();
      return _vm.$emit("call", $event);
    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
      return [_c("dt-icon-phone", { attrs: { "size": "200" } })];
    }, proxy: true }], null, false, 2193255039) })];
  }, proxy: true }], null, false, 1396332550) })], 1) : _vm._e()], 1) : _vm._e()]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const DtRecipeGeneralRow = __component__.exports;
export {
  DtRecipeGeneralRow as default
};
//# sourceMappingURL=general_row.vue.js.map