@jcdecor/vue 0.1.0 → 0.1.6

package/dist/chat.js

@@ -1,7 +1,7 @@
-import { d as e } from "./themeDefaults-Ckd05FUY.js";
+import { v as e } from "./themeDefaults-C4raY1h-.js";
 import { ActionIcon as t, Avatar as n, Badge as r, Box as i, FileButton as a, Indicator as o, Loader as s, Pill as c, ScrollArea as l, TextInput as u, Textarea as d, resolveNode as f } from "@mantine-vue/core";
 import { Comment as p, Fragment as m, Text as h, computed as g, defineComponent as _, h as v, isVNode as y, onBeforeUnmount as b, onMounted as x, ref as S, watch as C } from "vue";
-import { IconAlertCircle as w, IconArrowLeft as T, IconCheck as E, IconChecks as D, IconFile as O, IconPaperclip as k, IconSearch as A, IconSend2 as j } from "@tabler/icons-vue";
+import { IconAlertCircle as w, IconArrowLeft as T, IconCheck as E, IconChecks as D, IconFile as O, IconPaperclip as ee, IconPlayerStopFilled as k, IconSearch as A, IconSend2 as j } from "@tabler/icons-vue";
 import { useUncontrolled as M } from "@mantine-vue/hooks";
 //#region src/chat/utils.ts
 var N = 864e5;
@@ -91,10 +91,14 @@ var U = {
 	"jc-typing": "jc-Chat-jc-typing-1v69c",
 	composer: "jc-Chat-composer-1prlw",
 	composerInput: "jc-Chat-composerInput-6e0s5",
+	composerSection: "jc-Chat-composerSection-vwcwi",
 	composerFiles: "jc-Chat-composerFiles-6ca43",
 	conversations: "jc-Chat-conversations-1y7fv",
 	conversationSearch: "jc-Chat-conversationSearch-1etgc",
+	conversationItem: "jc-Chat-conversationItem-mtadk",
 	conversation: "jc-Chat-conversation-19ssj",
+	conversationIcon: "jc-Chat-conversationIcon-mta17",
+	conversationActions: "jc-Chat-conversationActions-vy3my",
 	conversationBody: "jc-Chat-conversationBody-mt5sx",
 	conversationTop: "jc-Chat-conversationTop-1ob6a",
 	conversationName: "jc-Chat-conversationName-mtd6l",
@@ -172,6 +176,10 @@ var K = new Intl.DateTimeFormat("pt-BR", {
 		system: {
 			type: Boolean,
 			default: !1
+		},
+		variant: {
+			type: String,
+			default: "bubble"
 		}
 	},
 	setup(t, { slots: r }) {
@@ -181,7 +189,7 @@ var K = new Intl.DateTimeFormat("pt-BR", {
 				class: U.system,
 				role: "status"
 			}, () => a);
-			let { own: o, author: s, status: c, position: l, createdAt: u, attachments: d } = t, f = l === "single" || l === "last", p = l === "single" || l === "first", m = u ? K.format(P(u)) : null, h = o ? null : v("div", { class: U.avatarSlot }, t.showAvatar && f && s ? [v(n, {
+			let { own: o, author: s, status: c, position: l, createdAt: u, attachments: d } = t, f = l === "single" || l === "last", p = l === "single" || l === "first", m = u ? K.format(P(u)) : null, h = o ? null : v("div", { class: U.avatarSlot }, t.showAvatar && (t.variant === "plain" ? p : f) && r.avatar ? r.avatar() : t.showAvatar && (t.variant === "plain" ? p : f) && s ? [v(n, {
 				src: s.avatar,
 				name: z(s.name),
 				color: s.color ?? "initials",
@@ -224,7 +232,8 @@ var K = new Intl.DateTimeFormat("pt-BR", {
 					own: o,
 					position: l,
 					status: c
-				}
+				},
+				"data-variant": t.variant === "plain" ? "plain" : void 0
 			}, () => [h, v("div", { class: U.bubbleColumn }, [
 				t.showAuthor && p && s && !o ? v("div", { class: U.author }, s.name) : null,
 				g,
@@ -295,6 +304,7 @@ var Y = _({
 			default: void 0
 		},
 		empty: V,
+		footer: V,
 		renderContent: {
 			type: Function,
 			default: void 0
@@ -315,7 +325,7 @@ var Y = _({
 				behavior: o ? "smooth" : "auto"
 			}), o = !0;
 		}
-		function f() {
+		function p() {
 			s?.disconnect(), s = null;
 			let t = n;
 			t && r && e.autoScroll && typeof ResizeObserver < "u" && (s = new ResizeObserver(() => {
@@ -323,49 +333,53 @@ var Y = _({
 			}), s.observe(r));
 		}
 		x(() => {
-			d(), f();
+			d(), p();
 		}), C(() => [
 			e.messages.length,
 			e.messages[e.messages.length - 1]?.id,
 			e.typing?.length,
 			e.autoScroll,
 			e.currentUserId
-		], d, { flush: "post" }), C(() => e.autoScroll, f, { flush: "post" }), b(() => s?.disconnect());
-		let p = { rootRef: (e) => {
+		], d, { flush: "post" }), C(() => e.autoScroll, p, { flush: "post" }), b(() => s?.disconnect());
+		let m = { rootRef: (e) => {
 			n = e;
-		} }, m = (e) => {
+		} }, h = (e) => {
 			r = e;
-		}, h = ({ y: e }) => {
+		}, _ = ({ y: e }) => {
 			let t = n;
 			t && (a = t.scrollHeight - t.clientHeight - e < X);
 		};
 		return () => {
-			let n = (n) => t.content ? t.content({ message: n }) : e.renderContent ? e.renderContent(n) : n.text, r = e.messages.length === 0 ? t.empty ? t.empty() : typeof e.empty == "function" ? e.empty() : e.empty : null, a = u.value.map((t) => {
-				if (t.type === "separator") return v("div", {
-					key: t.key,
+			let n = (n) => t.content ? t.content({ message: n }) : e.renderContent ? e.renderContent(n) : n.text, r = e.messages.length === 0 ? t.empty ? t.empty() : typeof e.empty == "function" ? e.empty() : e.empty : null, a = u.value.map((r) => {
+				if (r.type === "separator") return v("div", {
+					key: r.key,
 					class: U.separator,
 					role: "separator"
-				}, t.label);
-				let { message: r, position: i } = t, a = r.authorId === e.currentUserId, o = n(r);
+				}, r.label);
+				let { message: i, position: a } = r, o = i.authorId === e.currentUserId, s = n(i);
 				return v(q, {
-					key: t.key,
-					own: a,
-					system: r.system,
-					author: c.value[r.authorId],
+					key: r.key,
+					own: o,
+					system: i.system,
+					variant: i.variant,
+					author: c.value[i.authorId],
 					showAuthor: e.showAuthors,
-					createdAt: r.createdAt,
-					status: a ? r.status : void 0,
-					attachments: r.attachments,
-					position: i,
-					"data-group-start": i === "single" || i === "first" || void 0
-				}, { default: () => o });
+					createdAt: i.createdAt,
+					status: o ? i.status : void 0,
+					attachments: i.attachments,
+					position: a,
+					"data-group-start": a === "single" || a === "first" || void 0
+				}, t.avatar ? {
+					default: () => s,
+					avatar: () => t.avatar({ message: i })
+				} : { default: () => s });
 			});
 			return v(l, {
 				h: e.h,
-				viewportProps: p,
-				onScrollPositionChange: h
+				viewportProps: m,
+				onScrollPositionChange: _
 			}, () => v(i, {
-				rootRef: m,
+				rootRef: h,
 				class: U.thread,
 				role: "log",
 				"aria-live": "polite",
@@ -373,6 +387,7 @@ var Y = _({
 			}, () => [
 				r,
 				...a,
+				t.footer || e.footer != null ? f(e.footer, t.footer) : null,
 				e.typing && e.typing.length > 0 ? v(Y, {
 					names: e.typing,
 					mt: "sm",
@@ -416,6 +431,23 @@ var Y = _({
 		sendLabel: {
 			type: String,
 			default: "Enviar"
+		},
+		rightSection: V,
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		stopLabel: {
+			type: String,
+			default: "Interromper"
+		},
+		sendDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		onStop: {
+			type: Function,
+			default: void 0
 		}
 	},
 	emits: {
@@ -428,40 +460,40 @@ var Y = _({
 			defaultValue: n.defaultValue,
 			finalValue: "",
 			onChange: (e) => r("update:modelValue", e)
-		}), u = S([]), p = g(() => !n.disabled && (s.value.trim().length > 0 || u.value.length > 0)), m = () => {
+		}), u = S([]), p = g(() => !n.disabled && !n.sendDisabled && !n.loading && (s.value.trim().length > 0 || u.value.length > 0)), m = () => n.leftSection != null || !!o.leftSection, h = () => n.rightSection != null || !!o.rightSection, _ = () => {
 			p.value && (r("send", {
 				text: s.value.trim(),
 				files: u.value
 			}), l(""), u.value = []);
-		}, h = (e) => {
-			e.key === "Enter" && !e.shiftKey && !e.isComposing && (e.preventDefault(), m());
-		}, _ = (e) => {
-			u.value = u.value.filter((t, n) => n !== e);
 		}, y = (e) => {
+			e.key === "Enter" && !e.shiftKey && !e.isComposing && (e.preventDefault(), _());
+		}, b = (e) => {
+			u.value = u.value.filter((t, n) => n !== e);
+		}, x = (e) => {
 			u.value = [...u.value, ...Array.isArray(e) ? e : e ? [e] : []];
 		};
 		return () => v(i, null, () => [u.value.length > 0 ? v("div", { class: U.composerFiles }, u.value.map((e, t) => v(c, {
 			key: `${e.name}-${t}`,
 			withRemoveButton: !0,
-			onRemove: () => _(t)
+			onRemove: () => b(t)
 		}, () => e.name))) : null, v("div", { class: U.composer }, [
-			f(n.leftSection, o.leftSection),
+			m() ? v("div", { class: U.composerSection }, [f(n.leftSection, o.leftSection)]) : null,
 			n.allowAttachments ? v(a, {
 				multiple: !0,
 				accept: n.accept,
 				disabled: n.disabled,
-				onChange: y
+				onChange: x
 			}, { default: (n) => v(e, { label: "Anexar arquivo" }, () => v(t, {
 				...n,
 				size: "lg",
 				variant: "subtle",
 				"aria-label": "Anexar arquivo"
-			}, () => v(k, { size: 20 }))) }) : null,
+			}, () => v(ee, { size: 20 }))) }) : null,
 			v(d, {
 				class: U.composerInput,
 				modelValue: s.value,
 				"onUpdate:modelValue": (e) => l(e),
-				onKeydown: h,
+				onKeydown: y,
 				placeholder: n.placeholder,
 				disabled: n.disabled,
 				autosize: !0,
@@ -470,17 +502,25 @@ var Y = _({
 				radius: "lg",
 				"aria-label": n.placeholder
 			}),
-			v(t, {
+			h() ? v("div", { class: U.composerSection }, [f(n.rightSection, o.rightSection)]) : null,
+			n.loading && n.onStop ? v(e, { label: n.stopLabel }, () => v(t, {
+				size: 44,
+				radius: "xl",
+				variant: "light",
+				color: "danger",
+				onClick: () => n.onStop?.(),
+				"aria-label": n.stopLabel
+			}, () => v(k, { size: 18 }))) : v(t, {
 				size: 44,
 				radius: "xl",
 				variant: "filled",
-				onClick: m,
+				onClick: _,
 				disabled: !p.value,
 				"aria-label": n.sendLabel
 			}, () => v(j, { size: 20 }))
 		])]);
 	}
-}), ee = _({
+}), te = _({
 	name: "ConversationList",
 	props: {
 		conversations: {
@@ -507,15 +547,10 @@ var Y = _({
 			let t = s.value.trim().toLocaleLowerCase("pt-BR");
 			return t ? e.conversations.filter((e) => e.name.toLocaleLowerCase("pt-BR").includes(t) || e.lastMessage?.toLocaleLowerCase("pt-BR").includes(t)) : e.conversations;
 		}), d = (i) => {
-			let a = i.unread ?? 0, s = i.id === e.activeId;
-			return v("button", {
-				key: i.id,
+			let s = i.unread ?? 0, c = i.id === e.activeId, l = v("button", {
 				type: "button",
-				role: "listitem",
 				class: U.conversation,
-				"data-active": s || void 0,
-				"data-unread": a > 0 || void 0,
-				"aria-current": s ? "true" : void 0,
+				"aria-current": c ? "true" : void 0,
 				onClick: () => t("select", i)
 			}, [v(o, {
 				color: "evergreen",
@@ -524,25 +559,32 @@ var Y = _({
 				size: 10,
 				withBorder: !0,
 				disabled: !i.online
-			}, () => v(n, {
+			}, () => a.icon ? v("span", { class: U.conversationIcon }, a.icon({ conversation: i })) : v(n, {
 				src: i.avatar,
 				name: z(i.name),
 				color: i.color ?? "initials",
 				size: 40
 			})), v("div", { class: U.conversationBody }, [
 				v("div", { class: U.conversationTop }, [v("span", { class: U.conversationName }, i.name), i.lastMessageAt === void 0 ? null : v("span", { class: U.conversationTime }, L(i.lastMessageAt))]),
-				v("div", { class: U.conversationBottom }, [v("span", { class: U.conversationPreview }, i.lastMessage), a > 0 ? v(r, {
+				v("div", { class: U.conversationBottom }, [v("span", { class: U.conversationPreview }, i.lastMessage), s > 0 ? v(r, {
 					size: "sm",
 					variant: "filled",
-					circle: a < 10,
+					circle: s < 10,
 					"aria-label": `${i.unread} não lidas`
-				}, () => a > 99 ? "99+" : String(a)) : null]),
+				}, () => s > 99 ? "99+" : String(s)) : null]),
 				i.tag ? v(r, {
 					size: "xs",
 					color: "obsidian",
 					mt: 6
 				}, () => i.tag) : null
 			])]);
+			return v("div", {
+				key: i.id,
+				role: "listitem",
+				class: U.conversationItem,
+				"data-active": c || void 0,
+				"data-unread": s > 0 || void 0
+			}, [l, a.actions ? v("div", { class: U.conversationActions }, a.actions({ conversation: i })) : null]);
 		};
 		return () => v(i, { class: U.conversations }, () => [e.searchable ? v("div", { class: U.conversationSearch }, [v(u, {
 			size: "sm",
@@ -560,7 +602,7 @@ var Y = _({
 			fz: "sm"
 		}, () => a.empty || e.empty != null ? f(e.empty, a.empty) : "Nenhuma conversa encontrada") : null, ...c.value.map(d)]))]);
 	}
-}), te = _({
+}), ne = _({
 	name: "ChatHeader",
 	props: {
 		title: V,
@@ -615,7 +657,7 @@ var Y = _({
 			]);
 		};
 	}
-}), $ = (e) => typeof e == "number" ? `${e}px` : e, ne = _({
+}), $ = (e) => typeof e == "number" ? `${e}px` : e, re = _({
 	name: "ChatLayout",
 	props: {
 		sidebar: V,
@@ -656,6 +698,6 @@ var Y = _({
 	}
 });
 //#endregion
-export { Q as ChatComposer, te as ChatHeader, ne as ChatLayout, q as ChatMessage, Z as ChatThread, ee as ConversationList, Y as TypingIndicator, R as buildThread, I as dayLabel, B as formatBytes, z as initialsName, L as shortTimeLabel };
+export { Q as ChatComposer, ne as ChatHeader, re as ChatLayout, q as ChatMessage, Z as ChatThread, te as ConversationList, Y as TypingIndicator, R as buildThread, I as dayLabel, B as formatBytes, z as initialsName, L as shortTimeLabel };
 
 //# sourceMappingURL=chat.js.map