@dialpad/dialtone/dist/vue3/lib/feed-item-row/feed-item-row.js

Dialpad's Dialtone design system monorepo

import { hasSlotContent as e } from "../../common/utils/index.js";
import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import n from "../../common/mixins/modal.js";
import r from "../avatar/avatar.js";
import i from "../badge/badge.js";
import a from "../lazy-show/lazy-show.js";
import o from "../list-item/list-item.js";
import { DEFAULT_FEED_ROW_STATE as s, FEED_ROW_STATE_BACKGROUND_COLOR as c } from "./feed-item-row-constants.js";
import { createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, mergeProps as h, openBlock as g, renderSlot as _, resolveComponent as v, toDisplayString as y, toHandlers as b, vShow as x, withCtx as S, withDirectives as C } from "vue";
import { DtIconUser as w } from "@dialpad/dialtone-icons/vue3";
//#region recipes/conversation_view/feed_item_row/feed_item_row.vue
var T = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeFeedItemRow",
	components: {
		DtAvatar: r,
		DtLazyShow: a,
		DtListItem: o,
		DtBadge: i,
		DtIconUser: w
	},
	mixins: [n],
	inheritAttrs: !1,
	props: {
		avatarSeed: {
			type: String,
			default: null
		},
		showHeader: {
			type: Boolean,
			default: !1
		},
		avatarImageUrl: {
			type: String,
			default: ""
		},
		displayName: {
			type: String,
			default: ""
		},
		noInitials: {
			type: Boolean,
			default: !1
		},
		time: {
			type: String,
			default: ""
		},
		shortTime: {
			type: String,
			default: ""
		},
		labelText: {
			type: String,
			default: ""
		},
		isActive: {
			type: Boolean,
			default: !1
		},
		state: {
			type: String,
			default: s,
			validator: (e) => Object.keys(c).includes(e)
		}
	},
	emits: [
		"hover",
		"focus",
		"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 === "NORMAL" },
				{ "d-recipe-feed-item-row__state-transition": this.transitionActive },
				c[this.state]
			];
		},
		hasAttachmentContent() {
			return e(this.$slots.attachment);
		}
	},
	watch: { state: {
		immediate: !0,
		handler: function(e) {
			e !== "NORMAL" && (this.transitionActive = !0);
		}
	} },
	methods: {
		transitionComplete() {
			this.state === "NORMAL" && (this.transitionActive = !1);
		},
		trapFocus(e) {
			this.focusTrappedTabPress(e);
		},
		setFocus(e) {
			this.$emit("focus", e);
		},
		setHover(e) {
			this.$emit("hover", e);
		}
	}
}, E = {
	key: 0,
	class: "d-recipe-feed-item-row__avatar-container"
}, D = { class: "d-recipe-feed-item-row__content" }, O = {
	key: 0,
	"data-qa": "dt-recipe-feed-item-row--header",
	class: "d-recipe-feed-item-row__header"
}, k = { class: "d-recipe-feed-item-row__header-name" }, A = { class: "d-recipe-feed-item-row__header-time" }, j = { "data-qa": "dt-recipe-feed-item-row--content" }, M = {
	key: 1,
	"data-qa": "dt-recipe-feed-item-row--attachment",
	class: "d-recipe-feed-item-row__attachment"
}, N = {
	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"
}, F = {
	"data-qa": "dt-recipe-feed-item-row--menu",
	class: "d-recipe-feed-item-row__menu"
};
function I(e, t, n, r, i, a) {
	let o = v("dt-icon-user"), s = v("dt-avatar"), c = v("dt-badge"), w = v("dt-lazy-show"), T = v("dt-list-item");
	return g(), l(T, h({
		ref: "FeedItemRef",
		"navigation-type": "none"
	}, e.$attrs, {
		class: a.listItemClasses,
		"data-qa": "dt-recipe-feed-item-row"
	}, b(a.feedListeners)), {
		left: S(() => [n.showHeader ? (g(), d("div", E, [_(e.$slots, "avatar", {}, () => [m(s, {
			"full-name": n.displayName,
			"image-src": n.avatarImageUrl,
			"image-alt": "",
			seed: n.avatarSeed
		}, p({ _: 2 }, [n.noInitials ? {
			name: "icon",
			fn: S(({ iconSize: e }) => [m(o, { size: e }, null, 8, ["size"])]),
			key: "0"
		} : void 0]), 1032, [
			"full-name",
			"image-src",
			"seed"
		])])])) : u("", !0), n.showHeader ? u("", !0) : C((g(), d("span", {
			key: 1,
			class: "d-recipe-feed-item-row__left-time",
			"data-qa": "dt-recipe-feed-item-row--left-time"
		}, y(n.shortTime), 513)), [[x, n.isActive]])]),
		bottom: S(() => [
			e.$slots.reactions ? (g(), d("div", N, [_(e.$slots, "reactions")])) : u("", !0),
			e.$slots.threading ? (g(), d("div", P, [_(e.$slots, "threading")])) : u("", !0),
			C(f("div", F, [m(w, {
				appear: !0,
				transition: "fade",
				show: n.isActive
			}, {
				default: S(() => [_(e.$slots, "menu")]),
				_: 3
			}, 8, ["show"])], 512), [[x, n.isActive]])
		]),
		default: S(() => [f("article", D, [
			n.showHeader ? (g(), d("div", O, [
				_(e.$slots, "displayName", {}, () => [f("p", k, y(n.displayName), 1)]),
				f("time", A, y(n.time), 1),
				n.labelText ? (g(), l(c, {
					key: 0,
					text: n.labelText
				}, null, 8, ["text"])) : u("", !0)
			])) : u("", !0),
			f("span", j, [_(e.$slots, "default")]),
			a.hasAttachmentContent ? (g(), d("div", M, [_(e.$slots, "attachment")])) : u("", !0)
		])]),
		_: 3
	}, 16, ["class"]);
}
var L = /* @__PURE__ */ t(T, [["render", I]]);
//#endregion
export { L as default };

//# sourceMappingURL=feed-item-row.js.map