@dialpad/dialtone-vue/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.js

Vue component library for Dialpad's design system Dialtone

import { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from "./feed_item_row_constants.js";
import Modal from "../../../common/mixins/modal.js";
import { DtIconUser } from "@dialpad/dialtone-icons/vue2";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtAvatar from "../../../components/avatar/avatar.vue.js";
import DtLazyShow from "../../../components/lazy_show/lazy_show.vue.js";
import DtListItem from "../../../components/list_item/list_item.vue.js";
import DtBadge from "../../../components/badge/badge.vue.js";
const _sfc_main = {
  name: "DtRecipeFeedItemRow",
  components: {
    DtAvatar,
    DtLazyShow,
    DtListItem,
    DtBadge,
    DtIconUser
  },
  mixins: [Modal],
  inheritAttrs: false,
  props: {
    /**
     * 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
    },
    /**
     * Show avatar, show header text or dont show left time and vice versa
     */
    showHeader: {
      type: Boolean,
      default: false
    },
    /**
     * Optional avatar image url.
     * If not provided it will use extracted initials from displayName.
     */
    avatarImageUrl: {
      type: String,
      default: ""
    },
    /**
     * The display name of the sender
     */
    displayName: {
      type: String,
      default: ""
    },
    /**
     * Initials will never be shown. Instead it will show a "User" icon.
     */
    noInitials: {
      type: Boolean,
      default: false
    },
    /**
     * time string displayed as is.
     * Shown on the header when showHeader is true
     */
    time: {
      type: String,
      default: ""
    },
    /**
     * short time string without AM/PM displayed as is.
     * Shown on the left of feed item when showHeader is false and isActive is true
     */
    shortTime: {
      type: String,
      default: ""
    },
    /**
     * A label displayed next to the displayName. Will not show if empty.
     */
    labelText: {
      type: String,
      default: ""
    },
    /**
     * displays a darkened background on the row.
     */
    isActive: {
      type: Boolean,
      default: false
    },
    /**
     * state for the feed item row. Can be normal, searched & error
     */
    state: {
      type: String,
      default: DEFAULT_FEED_ROW_STATE,
      validator: (state) => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state)
    }
  },
  emits: [
    /**
     * Fires when hovered over feed row
     *
     * @event hover
     * @type {Boolean}
     */
    "hover",
    /**
     * Fires when focused over feed row
     *
     * @event focus
     * @type {Boolean}
     */
    "focus",
    /**
     * Key down event
     *
     * @event keydown
     * @type {KeyboardEvent}
     */
    "keydown"
  ],
  data() {
    return {
      transitionActive: false
    };
  },
  computed: {
    feedListeners() {
      return {
        ...this.$listeners,
        mouseenter: () => this.setHover(true),
        mouseleave: () => this.setHover(false),
        focusin: () => this.setFocus(true),
        focusout: () => this.setFocus(false),
        transitionend: () => this.transitionComplete(),
        keydown: (event) => {
          switch (event.code) {
            case "Tab":
              this.trapFocus(event);
              break;
          }
          this.$emit("keydown", event);
        }
      };
    },
    listItemClasses() {
      return [
        "d-recipe-feed-item-row",
        { "d-recipe-feed-item-row--active": this.isActive && this.state === DEFAULT_FEED_ROW_STATE },
        { "d-recipe-feed-item-row__state-transition": this.transitionActive },
        FEED_ROW_STATE_BACKGROUND_COLOR[this.state]
      ];
    }
  },
  watch: {
    state: {
      immediate: true,
      handler: function(newState, oldState) {
        if (newState !== DEFAULT_FEED_ROW_STATE) {
          this.transitionActive = true;
        }
      }
    }
  },
  methods: {
    transitionComplete() {
      if (this.state === DEFAULT_FEED_ROW_STATE) {
        this.transitionActive = false;
      }
    },
    trapFocus(e) {
      this.focusTrappedTabPress(e);
    },
    setFocus(bool) {
      this.$emit("focus", bool);
    },
    setHover(bool) {
      this.$emit("hover", bool);
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: _vm.listItemClasses, attrs: { "navigation-type": "none", "data-qa": "dt-recipe-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
    return [_vm.showHeader ? _c("div", { staticClass: "d-recipe-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
      return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "seed": _vm.avatarSeed }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function({ iconSize }) {
        return [_c("dt-icon-user", { attrs: { "size": iconSize } })];
      } } : null], null, true) })];
    })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__left-time", attrs: { "data-qa": "dt-recipe-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
  }, proxy: true }, { key: "bottom", fn: function() {
    return [_vm.$slots.reactions ? _c("div", { staticClass: "d-recipe-feed-item-row__reactions", attrs: { "data-qa": "dt-recipe-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "d-recipe-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__menu", attrs: { "data-qa": "dt-recipe-feed-item-row--menu" } }, [_c("dt-lazy-show", { attrs: { "appear": true, "transition": "fade", "show": _vm.isActive } }, [_vm._t("menu")], 2)], 1)];
  }, proxy: true }], null, true) }, "dt-list-item", _vm.$attrs, false), _vm.feedListeners), [_c("article", { staticClass: "d-recipe-feed-item-row__content" }, [_vm.showHeader ? _c("div", { staticClass: "d-recipe-feed-item-row__header", attrs: { "data-qa": "dt-recipe-feed-item-row--header" } }, [_vm._t("displayName", function() {
    return [_c("p", { staticClass: "d-recipe-feed-item-row__header-name" }, [_vm._v(" " + _vm._s(_vm.displayName) + " ")])];
  }), _c("time", { staticClass: "d-recipe-feed-item-row__header-time" }, [_vm._v(" " + _vm._s(_vm.time) + " ")]), _vm.labelText ? _c("dt-badge", { attrs: { "text": _vm.labelText } }) : _vm._e()], 2) : _vm._e(), _c("span", { attrs: { "data-qa": "dt-recipe-feed-item-row--content" } }, [_vm._t("default")], 2), _vm.$slots.attachment ? _c("div", { staticClass: "d-recipe-feed-item-row__attachment", attrs: { "data-qa": "dt-recipe-feed-item-row--attachment" } }, [_vm._t("attachment")], 2) : _vm._e()])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const feed_item_row = __component__.exports;
export {
  feed_item_row as default
};
//# sourceMappingURL=feed_item_row.vue.js.map