@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
198 lines (197 loc) • 6.69 kB
JavaScript
import { DEFAULT_FEED_ROW_STATE as i, FEED_ROW_STATE_BACKGROUND_COLOR as s } from "./feed-item-row-constants.js";
import o from "../../common/mixins/modal.js";
import { DtIconUser as n } from "@dialpad/dialtone-icons/vue2";
import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../badge/badge.js";
import m from "../list-item/list-item.js";
import l from "../lazy-show/lazy-show.js";
import f from "../avatar/avatar.js";
const p = {
name: "DtRecipeFeedItemRow",
components: {
DtAvatar: f,
DtLazyShow: l,
DtListItem: m,
DtBadge: c,
DtIconUser: n
},
mixins: [o],
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: i,
validator: (a) => Object.keys(s).includes(a)
}
},
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 {
...this.$listeners,
mouseenter: () => this.setHover(!0),
mouseleave: () => this.setHover(!1),
focusin: () => this.setFocus(!0),
focusout: () => this.setFocus(!1),
transitionend: () => this.transitionComplete(),
keydown: (a) => {
switch (a.code) {
case "Tab":
this.trapFocus(a);
break;
}
this.$emit("keydown", a);
}
};
},
listItemClasses() {
return [
"d-recipe-feed-item-row",
{ "d-recipe-feed-item-row--active": this.isActive && this.state === i },
{ "d-recipe-feed-item-row__state-transition": this.transitionActive },
s[this.state]
];
}
},
watch: {
state: {
immediate: !0,
handler: function(a) {
a !== i && (this.transitionActive = !0);
}
}
},
methods: {
transitionComplete() {
this.state === i && (this.transitionActive = !1);
},
trapFocus(a) {
this.focusTrappedTabPress(a);
},
setFocus(a) {
this.$emit("focus", a);
},
setHover(a) {
this.$emit("hover", a);
}
}
};
var _ = function() {
var e = this, t = e._self._c;
return t("dt-list-item", e._g(e._b({ ref: "FeedItemRef", class: e.listItemClasses, attrs: { "navigation-type": "none", "data-qa": "dt-recipe-feed-item-row" }, scopedSlots: e._u([{ key: "left", fn: function() {
return [e.showHeader ? t("div", { staticClass: "d-recipe-feed-item-row__avatar-container" }, [e._t("avatar", function() {
return [t("dt-avatar", { attrs: { "full-name": e.displayName, "image-src": e.avatarImageUrl, "image-alt": "", seed: e.avatarSeed }, scopedSlots: e._u([e.noInitials ? { key: "icon", fn: function({ iconSize: r }) {
return [t("dt-icon-user", { attrs: { size: r } })];
} } : null], null, !0) })];
})], 2) : e._e(), e.showHeader ? e._e() : t("span", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__left-time", attrs: { "data-qa": "dt-recipe-feed-item-row--left-time" } }, [e._v(" " + e._s(e.shortTime) + " ")])];
}, proxy: !0 }, { key: "bottom", fn: function() {
return [e.$slots.reactions ? t("div", { staticClass: "d-recipe-feed-item-row__reactions", attrs: { "data-qa": "dt-recipe-feed-item-row--reactions" } }, [e._t("reactions")], 2) : e._e(), e.$slots.threading ? t("div", { staticClass: "d-recipe-feed-item-row__threading" }, [e._t("threading")], 2) : e._e(), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__menu", attrs: { "data-qa": "dt-recipe-feed-item-row--menu" } }, [t("dt-lazy-show", { attrs: { appear: !0, transition: "fade", show: e.isActive } }, [e._t("menu")], 2)], 1)];
}, proxy: !0 }], null, !0) }, "dt-list-item", e.$attrs, !1), e.feedListeners), [t("article", { staticClass: "d-recipe-feed-item-row__content" }, [e.showHeader ? t("div", { staticClass: "d-recipe-feed-item-row__header", attrs: { "data-qa": "dt-recipe-feed-item-row--header" } }, [e._t("displayName", function() {
return [t("p", { staticClass: "d-recipe-feed-item-row__header-name" }, [e._v(" " + e._s(e.displayName) + " ")])];
}), t("time", { staticClass: "d-recipe-feed-item-row__header-time" }, [e._v(" " + e._s(e.time) + " ")]), e.labelText ? t("dt-badge", { attrs: { text: e.labelText } }) : e._e()], 2) : e._e(), t("span", { attrs: { "data-qa": "dt-recipe-feed-item-row--content" } }, [e._t("default")], 2), e.$slots.attachment ? t("div", { staticClass: "d-recipe-feed-item-row__attachment", attrs: { "data-qa": "dt-recipe-feed-item-row--attachment" } }, [e._t("attachment")], 2) : e._e()])]);
}, u = [], h = /* @__PURE__ */ d(
p,
_,
u
);
const x = h.exports;
export {
x as default
};
//# sourceMappingURL=feed-item-row.js.map