@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
301 lines (300 loc) • 9.64 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const feed_item_row_constants = require("./feed_item_row_constants.cjs");
const modal = require("../../../common/mixins/modal.cjs");
const vue3 = require("@dialpad/dialtone-icons/vue3");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const avatar = require("../../../components/avatar/avatar.vue.cjs");
const lazy_show = require("../../../components/lazy_show/lazy_show.vue.cjs");
const list_item = require("../../../components/list_item/list_item.vue.cjs");
const badge = require("../../../components/badge/badge.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeFeedItemRow",
components: {
DtAvatar: avatar.default,
DtLazyShow: lazy_show.default,
DtListItem: list_item.default,
DtBadge: badge.default,
DtIconUser: vue3.DtIconUser
},
mixins: [modal.default],
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: feed_item_row_constants.DEFAULT_FEED_ROW_STATE,
validator: (state) => Object.keys(feed_item_row_constants.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 {
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 === feed_item_row_constants.DEFAULT_FEED_ROW_STATE },
{ "d-recipe-feed-item-row__state-transition": this.transitionActive },
feed_item_row_constants.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]
];
}
},
watch: {
state: {
immediate: true,
handler: function(newState, oldState) {
if (newState !== feed_item_row_constants.DEFAULT_FEED_ROW_STATE) {
this.transitionActive = true;
}
}
}
},
methods: {
transitionComplete() {
if (this.state === feed_item_row_constants.DEFAULT_FEED_ROW_STATE) {
this.transitionActive = false;
}
},
trapFocus(e) {
this.focusTrappedTabPress(e);
},
setFocus(bool) {
this.$emit("focus", bool);
},
setHover(bool) {
this.$emit("hover", bool);
}
}
};
const _hoisted_1 = {
key: 0,
class: "d-recipe-feed-item-row__avatar-container"
};
const _hoisted_2 = { class: "d-recipe-feed-item-row__content" };
const _hoisted_3 = {
key: 0,
"data-qa": "dt-recipe-feed-item-row--header",
class: "d-recipe-feed-item-row__header"
};
const _hoisted_4 = { class: "d-recipe-feed-item-row__header-name" };
const _hoisted_5 = { class: "d-recipe-feed-item-row__header-time" };
const _hoisted_6 = { "data-qa": "dt-recipe-feed-item-row--content" };
const _hoisted_7 = {
key: 1,
"data-qa": "dt-recipe-feed-item-row--attachment",
class: "d-recipe-feed-item-row__attachment"
};
const _hoisted_8 = {
key: 0,
class: "d-recipe-feed-item-row__reactions",
"data-qa": "dt-recipe-feed-item-row--reactions"
};
const _hoisted_9 = {
key: 1,
class: "d-recipe-feed-item-row__threading"
};
const _hoisted_10 = {
"data-qa": "dt-recipe-feed-item-row--menu",
class: "d-recipe-feed-item-row__menu"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_user = vue.resolveComponent("dt-icon-user");
const _component_dt_avatar = vue.resolveComponent("dt-avatar");
const _component_dt_badge = vue.resolveComponent("dt-badge");
const _component_dt_lazy_show = vue.resolveComponent("dt-lazy-show");
const _component_dt_list_item = vue.resolveComponent("dt-list-item");
return vue.openBlock(), vue.createBlock(_component_dt_list_item, vue.mergeProps({
ref: "FeedItemRef",
"navigation-type": "none"
}, _ctx.$attrs, {
class: $options.listItemClasses,
"data-qa": "dt-recipe-feed-item-row"
}, vue.toHandlers($options.feedListeners)), {
left: vue.withCtx(() => [
$props.showHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "avatar", {}, () => [
vue.createVNode(_component_dt_avatar, {
"full-name": $props.displayName,
"image-src": $props.avatarImageUrl,
"image-alt": "",
seed: $props.avatarSeed
}, vue.createSlots({ _: 2 }, [
$props.noInitials ? {
name: "icon",
fn: vue.withCtx(({ iconSize }) => [
vue.createVNode(_component_dt_icon_user, { size: iconSize }, null, 8, ["size"])
]),
key: "0"
} : void 0
]), 1032, ["full-name", "image-src", "seed"])
])
])) : vue.createCommentVNode("", true),
!$props.showHeader ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: "d-recipe-feed-item-row__left-time",
"data-qa": "dt-recipe-feed-item-row--left-time"
}, vue.toDisplayString($props.shortTime), 513)), [
[vue.vShow, $props.isActive]
]) : vue.createCommentVNode("", true)
]),
bottom: vue.withCtx(() => [
_ctx.$slots.reactions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
vue.renderSlot(_ctx.$slots, "reactions")
])) : vue.createCommentVNode("", true),
_ctx.$slots.threading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
vue.renderSlot(_ctx.$slots, "threading")
])) : vue.createCommentVNode("", true),
vue.withDirectives(vue.createElementVNode("div", _hoisted_10, [
vue.createVNode(_component_dt_lazy_show, {
appear: true,
transition: "fade",
show: $props.isActive
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "menu")
]),
_: 3
}, 8, ["show"])
], 512), [
[vue.vShow, $props.isActive]
])
]),
default: vue.withCtx(() => [
vue.createElementVNode("article", _hoisted_2, [
$props.showHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "displayName", {}, () => [
vue.createElementVNode("p", _hoisted_4, vue.toDisplayString($props.displayName), 1)
]),
vue.createElementVNode("time", _hoisted_5, vue.toDisplayString($props.time), 1),
$props.labelText ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
key: 0,
text: $props.labelText
}, null, 8, ["text"])) : vue.createCommentVNode("", true)
])) : vue.createCommentVNode("", true),
vue.createElementVNode("span", _hoisted_6, [
vue.renderSlot(_ctx.$slots, "default")
]),
_ctx.$slots.attachment ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
vue.renderSlot(_ctx.$slots, "attachment")
])) : vue.createCommentVNode("", true)
])
]),
_: 3
}, 16, ["class"]);
}
const feed_item_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = feed_item_row;
//# sourceMappingURL=feed_item_row.vue.cjs.map