@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
283 lines (282 loc) • 7.51 kB
JavaScript
import { DEFAULT_FEED_ROW_STATE as c, FEED_ROW_STATE_BACKGROUND_COLOR as _ } from "./feed-item-row-constants.js";
import A from "../../common/mixins/modal.js";
import { DtIconUser as D } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent as r, createBlock as h, openBlock as a, mergeProps as T, toHandlers as b, withCtx as d, createElementVNode as n, createElementBlock as o, createCommentVNode as i, renderSlot as s, toDisplayString as m, withDirectives as u, createVNode as l, vShow as p, createSlots as C } from "vue";
import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import F from "../badge/badge.js";
import I from "../list-item/list-item.js";
import B from "../lazy-show/lazy-show.js";
import H from "../avatar/avatar.js";
const N = {
compatConfig: { MODE: 3 },
name: "DtRecipeFeedItemRow",
components: {
DtAvatar: H,
DtLazyShow: B,
DtListItem: I,
DtBadge: F,
DtIconUser: D
},
mixins: [A],
inheritAttrs: !1,
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: !1
},
/**
* 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: !1
},
/**
* 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: !1
},
/**
* state for the feed item row. Can be normal, searched & error
*/
state: {
type: String,
default: c,
validator: (e) => Object.keys(_).includes(e)
}
},
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: !1
};
},
computed: {
feedListeners() {
return {
mouseenter: () => this.setHover(!0),
mouseleave: () => this.setHover(!1),
focusin: () => this.setFocus(!0),
focusout: () => this.setFocus(!1),
transitionend: () => this.transitionComplete(),
keydown: (e) => {
switch (e.code) {
case "Tab":
this.trapFocus(e);
break;
}
this.$emit("keydown", e);
}
};
},
listItemClasses() {
return [
"d-recipe-feed-item-row",
{ "d-recipe-feed-item-row--active": this.isActive && this.state === c },
{ "d-recipe-feed-item-row__state-transition": this.transitionActive },
_[this.state]
];
}
},
watch: {
state: {
immediate: !0,
handler: function(e) {
e !== c && (this.transitionActive = !0);
}
}
},
methods: {
transitionComplete() {
this.state === c && (this.transitionActive = !1);
},
trapFocus(e) {
this.focusTrappedTabPress(e);
},
setFocus(e) {
this.$emit("focus", e);
},
setHover(e) {
this.$emit("hover", e);
}
}
}, q = {
key: 0,
class: "d-recipe-feed-item-row__avatar-container"
}, O = { class: "d-recipe-feed-item-row__content" }, R = {
key: 0,
"data-qa": "dt-recipe-feed-item-row--header",
class: "d-recipe-feed-item-row__header"
}, L = { class: "d-recipe-feed-item-row__header-name" }, z = { class: "d-recipe-feed-item-row__header-time" }, U = { "data-qa": "dt-recipe-feed-item-row--content" }, V = {
key: 1,
"data-qa": "dt-recipe-feed-item-row--attachment",
class: "d-recipe-feed-item-row__attachment"
}, M = {
key: 0,
class: "d-recipe-feed-item-row__reactions",
"data-qa": "dt-recipe-feed-item-row--reactions"
}, P = {
key: 1,
class: "d-recipe-feed-item-row__threading"
}, W = {
"data-qa": "dt-recipe-feed-item-row--menu",
class: "d-recipe-feed-item-row__menu"
};
function j(e, G, t, K, $, f) {
const w = r("dt-icon-user"), v = r("dt-avatar"), y = r("dt-badge"), g = r("dt-lazy-show"), k = r("dt-list-item");
return a(), h(k, T({
ref: "FeedItemRef",
"navigation-type": "none"
}, e.$attrs, {
class: f.listItemClasses,
"data-qa": "dt-recipe-feed-item-row"
}, b(f.feedListeners)), {
left: d(() => [
t.showHeader ? (a(), o("div", q, [
s(e.$slots, "avatar", {}, () => [
l(v, {
"full-name": t.displayName,
"image-src": t.avatarImageUrl,
"image-alt": "",
seed: t.avatarSeed
}, C({ _: 2 }, [
t.noInitials ? {
name: "icon",
fn: d(({ iconSize: S }) => [
l(w, { size: S }, null, 8, ["size"])
]),
key: "0"
} : void 0
]), 1032, ["full-name", "image-src", "seed"])
])
])) : i("", !0),
t.showHeader ? i("", !0) : u((a(), o("span", {
key: 1,
class: "d-recipe-feed-item-row__left-time",
"data-qa": "dt-recipe-feed-item-row--left-time"
}, m(t.shortTime), 513)), [
[p, t.isActive]
])
]),
bottom: d(() => [
e.$slots.reactions ? (a(), o("div", M, [
s(e.$slots, "reactions")
])) : i("", !0),
e.$slots.threading ? (a(), o("div", P, [
s(e.$slots, "threading")
])) : i("", !0),
u(n("div", W, [
l(g, {
appear: !0,
transition: "fade",
show: t.isActive
}, {
default: d(() => [
s(e.$slots, "menu")
]),
_: 3
}, 8, ["show"])
], 512), [
[p, t.isActive]
])
]),
default: d(() => [
n("article", O, [
t.showHeader ? (a(), o("div", R, [
s(e.$slots, "displayName", {}, () => [
n("p", L, m(t.displayName), 1)
]),
n("time", z, m(t.time), 1),
t.labelText ? (a(), h(y, {
key: 0,
text: t.labelText
}, null, 8, ["text"])) : i("", !0)
])) : i("", !0),
n("span", U, [
s(e.$slots, "default")
]),
e.$slots.attachment ? (a(), o("div", V, [
s(e.$slots, "attachment")
])) : i("", !0)
])
]),
_: 3
}, 16, ["class"]);
}
const ie = /* @__PURE__ */ E(N, [["render", j]]);
export {
ie as default
};
//# sourceMappingURL=feed-item-row.js.map