@uzum-tech/ui 2.2.1 → 2.3.0

package/es/message-bubble/src/styles/index.cssr.mjs

@@ -0,0 +1,133 @@
+import { c, cB, cE, cM } from "../../../_utils/cssr/index.mjs";
+// vars:
+// --u-bezier
+// --u-message-bubble-background-color-own
+// --u-message-bubble-background-color-other
+// --u-message-bubble-text-color-own
+// --u-message-bubble-text-color-other
+// --u-message-bubble-time-color
+// --u-message-bubble-status-read-color
+// --u-message-bubble-status-success-color
+// --u-message-bubble-attachment-background-color-own
+// --u-message-bubble-attachment-background-color-other
+// --u-message-bubble-error-color
+// --u-message-bubble-border-radius
+// --u-message-bubble-unread-background-color
+// --u-message-bubble-unread-text-color
+// --u-message-bubble-service-text-color
+// --u-message-bubble-service-background-color
+// --u-message-bubble-title-color
+export default cB('message-bubble', `
+ box-sizing: border-box;
+ width: 100%;
+`, [cE('message', `
+ display: flex;
+ margin-bottom: 8px;
+ flex-shrink: 0;
+ width: 100%;
+ `, [cM('own', `
+ justify-content: flex-end;
+ `), cM('other', `
+ justify-content: flex-start;
+ `)]), cE('message-wrapper', `
+ max-width: 70%;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex-shrink: 0;
+ `, [cM('own', `
+ align-items: flex-end;
+ `), cM('other', `
+ align-items: flex-start;
+ `)]), cE('bubble', `
+ border-radius: var(--u-message-bubble-border-radius);
+ font-size: 14px;
+ line-height: 20px;
+ word-wrap: break-word;
+ background-color: var(--u-message-bubble-background-color-other);
+ color: var(--u-message-bubble-text-color-other);
+ border-bottom-left-radius: 6px;
+ width: fit-content;
+ display: flex;
+ flex-direction: column;
+ `, [cM('own', `
+ background-color: var(--u-message-bubble-background-color-own);
+ color: var(--u-message-bubble-text-color-own);
+ border-bottom-left-radius: var(--u-message-bubble-border-radius);
+ border-bottom-right-radius: 6px;
+ `)]), cE('title', `
+ color: var(--u-message-bubble-title-color);
+ padding: 12px 16px 0;
+ white-space: pre-wrap;
+ `), cE('text', `
+ padding: 12px 16px;
+ white-space: pre-wrap;
+ `), cE('text', `
+ padding-top: 8px;
+ `, [c('&&:first-child', `
+ padding-top: 12px;
+ `)]), cE('meta', `
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 11px;
+ color: var(--u-message-bubble-time-color);
+ margin-top: 2px;
+ `, [cM('own', `
+ justify-content: flex-end;
+ `), cM('other', `
+ justify-content: flex-start;
+ `)]), cE('time', `
+ font-size: 11px;
+ color: var(--u-message-bubble-time-color);
+ `), cE('status', `
+ color: var(--u-message-bubble-status-success-color);
+ display: flex;
+ align-items: center;
+ `), cE('status-icon', `
+ color: var(--u-message-bubble-time-color);
+ `, [cM('read', `
+ color: var(--u-message-bubble-status-read-color);
+ `), cM('retry', `
+ color: var(--u-message-bubble-error-color);
+ `)]), cE('retry', `
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ cursor: pointer;
+ `), cE('retry-icon', `
+ color: var(--u-message-bubble-error-color);
+ `), cE('retry-text', `
+ color: var(--u-message-bubble-error-color);
+ font-size: 11px;
+ font-weight: 500;
+ `), cE('service', `
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ margin: 12px 0;
+ `, [c('span', `
+ padding: 6px 12px;
+ border-radius: 8px;
+ color: var(--u-message-bubble-service-text-color);
+ background-color: var(--u-message-bubble-service-background-color);
+ text-align: center;
+ `), cM('unread', `
+ background-color: var(--u-message-bubble-unread-background-color);
+ color: var(--u-message-bubble-unread-text-color);
+ padding: 6px 12px;
+ margin: 8px 0;
+ `, [c('span', `
+ display: inline-block;
+ white-space: nowrap;
+ padding: 0;
+ border-radius: 0;
+ background-color: transparent;
+ color: inherit;
+ `)])]), c('.u-message-bubble__bubble--own .u-upload-file', `
+ background-color: var(--u-message-bubble-attachment-background-color-own);
+ `), c('.u-message-bubble__bubble--other .u-upload-file', `
+ background-color: var(--u-message-bubble-attachment-background-color-other);
+ `), c('.u-upload-file-list .u-upload-file.u-upload-file--text-type', `
+ margin-bottom: 0px;
+ `)]);

package/es/message-bubble/styles/dark.d.ts

@@ -0,0 +1,29 @@
+declare const messageBubbleDark: import("../../_mixins").Theme<"MessageBubble", {
+    messageBubbleBackgroundColorOwn: string;
+    messageBubbleBackgroundColorOther: string;
+    messageBubbleTextColorOwn: string;
+    messageBubbleTextColorOther: string;
+    messageTimeColor: string;
+    messageStatusReadColor: string;
+    messageStatusSuccessColor: string;
+    attachmentBackgroundColorOwn: string;
+    attachmentBackgroundColorOther: string;
+    messageErrorColor: string;
+    messageBorderRadius: string;
+    unreadNotificationBackgroundColor: string;
+    unreadNotificationTextColor: string;
+    serviceMessageTextColor: string;
+    serviceMessageBackgroundColor: string;
+    messageTitleColor: string;
+}, {
+    StatusIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+}>;
+export default messageBubbleDark;
+export type MessageBubbleTheme = typeof messageBubbleDark;

package/es/message-bubble/styles/dark.mjs

@@ -0,0 +1,13 @@
+import { createTheme } from "../../_mixins/index.mjs";
+import { commonDark } from "../../_styles/common/index.mjs";
+import { iconDark } from "../../icon/styles/index.mjs";
+import { self } from "./light.mjs";
+const messageBubbleDark = createTheme({
+  name: 'MessageBubble',
+  common: commonDark,
+  peers: {
+    StatusIcon: iconDark
+  },
+  self: vars => Object.assign({}, self(vars))
+});
+export default messageBubbleDark;

package/es/message-bubble/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as messageBubbleDark } from './dark';
+export { default as messageBubbleLight } from './light';
+export type { MessageBubbleTheme, MessageBubbleThemeVars } from './light';

package/es/message-bubble/styles/index.mjs

@@ -0,0 +1,2 @@
+export { default as messageBubbleDark } from "./dark.mjs";
+export { default as messageBubbleLight } from "./light.mjs";

package/es/message-bubble/styles/light.d.ts

@@ -0,0 +1,49 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+export declare function self(vars: ThemeCommonVars): {
+    messageBubbleBackgroundColorOwn: string;
+    messageBubbleBackgroundColorOther: string;
+    messageBubbleTextColorOwn: string;
+    messageBubbleTextColorOther: string;
+    messageTimeColor: string;
+    messageStatusReadColor: string;
+    messageStatusSuccessColor: string;
+    attachmentBackgroundColorOwn: string;
+    attachmentBackgroundColorOther: string;
+    messageErrorColor: string;
+    messageBorderRadius: string;
+    unreadNotificationBackgroundColor: string;
+    unreadNotificationTextColor: string;
+    serviceMessageTextColor: string;
+    serviceMessageBackgroundColor: string;
+    messageTitleColor: string;
+};
+declare const messageBubbleLight: import("../../_mixins").Theme<"MessageBubble", {
+    messageBubbleBackgroundColorOwn: string;
+    messageBubbleBackgroundColorOther: string;
+    messageBubbleTextColorOwn: string;
+    messageBubbleTextColorOther: string;
+    messageTimeColor: string;
+    messageStatusReadColor: string;
+    messageStatusSuccessColor: string;
+    attachmentBackgroundColorOwn: string;
+    attachmentBackgroundColorOther: string;
+    messageErrorColor: string;
+    messageBorderRadius: string;
+    unreadNotificationBackgroundColor: string;
+    unreadNotificationTextColor: string;
+    serviceMessageTextColor: string;
+    serviceMessageBackgroundColor: string;
+    messageTitleColor: string;
+}, {
+    StatusIcon: import("../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>;
+}>;
+export default messageBubbleLight;
+export type MessageBubbleThemeVars = ReturnType<typeof self>;
+export type MessageBubbleTheme = typeof messageBubbleLight;

package/es/message-bubble/styles/light.mjs

@@ -0,0 +1,44 @@
+import { createTheme } from "../../_mixins/index.mjs";
+import { commonLight } from "../../_styles/common/index.mjs";
+import { iconLight } from "../../icon/styles/index.mjs";
+export function self(vars) {
+  const {
+    borderRadiusLarge,
+    elementsSecondary,
+    elementsTertiary,
+    textPrimary,
+    textSecondary,
+    textTertiary,
+    brandPrimary400,
+    staticGreen,
+    staticRed,
+    staticWhite
+  } = vars;
+  return {
+    messageBubbleBackgroundColorOwn: elementsTertiary,
+    messageBubbleBackgroundColorOther: elementsTertiary,
+    messageBubbleTextColorOwn: textPrimary,
+    messageBubbleTextColorOther: textPrimary,
+    messageTimeColor: textTertiary,
+    messageStatusReadColor: brandPrimary400,
+    messageStatusSuccessColor: staticGreen,
+    attachmentBackgroundColorOwn: staticWhite,
+    attachmentBackgroundColorOther: staticWhite,
+    messageErrorColor: staticRed,
+    messageBorderRadius: borderRadiusLarge,
+    unreadNotificationBackgroundColor: brandPrimary400,
+    unreadNotificationTextColor: elementsSecondary,
+    serviceMessageTextColor: textSecondary,
+    serviceMessageBackgroundColor: 'transparent',
+    messageTitleColor: textPrimary
+  };
+}
+const messageBubbleLight = createTheme({
+  name: 'MessageBubble',
+  common: commonLight,
+  peers: {
+    StatusIcon: iconLight
+  },
+  self
+});
+export default messageBubbleLight;

package/es/styles.d.ts

@@ -47,6 +47,7 @@ export { logDark } from './log/styles';
 export { marqueeDark } from './marquee/styles';
 export { mentionDark } from './mention/styles';
 export { menuDark } from './menu/styles';
+export { messageBubbleDark } from './message-bubble/styles';
 export { messageRtl as unstableMessageRtl } from './message/styles';
 export { messageDark } from './message/styles';
 export { modalDark } from './modal/styles';

package/es/styles.mjs

@@ -48,6 +48,7 @@ export { logDark } from "./log/styles/index.mjs";
 export { marqueeDark } from "./marquee/styles/index.mjs";
 export { mentionDark } from "./mention/styles/index.mjs";
 export { menuDark } from "./menu/styles/index.mjs";
+export { messageBubbleDark } from "./message-bubble/styles/index.mjs";
 export { messageRtl as unstableMessageRtl } from "./message/styles/index.mjs";
 export { messageDark } from "./message/styles/index.mjs";
 export { modalDark } from "./modal/styles/index.mjs";

package/es/themes/dark.mjs

@@ -63,6 +63,7 @@ import { mappingCardDark } from "../mapping-card/styles/index.mjs";
 import { marqueeDark } from "../marquee/styles/index.mjs";
 import { mentionDark } from "../mention/styles/index.mjs";
 import { menuDark } from "../menu/styles/index.mjs";
+import { messageBubbleDark } from "../message-bubble/styles/index.mjs";
 import { messageDark } from "../message/styles/index.mjs";
 import { modalFullscreenDark } from "../modal-fullscreen/styles/index.mjs";
 import { modalDark } from "../modal/styles/index.mjs";
@@ -160,6 +161,7 @@ export const darkTheme = {
   Marquee: marqueeDark,
   Menu: menuDark,
   Mention: mentionDark,
+  MessageBubble: messageBubbleDark,
   Message: messageDark,
   Modal: modalDark,
   Notification: notificationDark,

package/es/themes/light.mjs

@@ -66,6 +66,7 @@ import { mappingCardLight } from "../mapping-card/styles/index.mjs";
 import { marqueeLight } from "../marquee/styles/index.mjs";
 import { mentionLight } from "../mention/styles/index.mjs";
 import { menuLight } from "../menu/styles/index.mjs";
+import { messageBubbleLight } from "../message-bubble/styles/index.mjs";
 import { messageLight } from "../message/styles/index.mjs";
 import { modalFullscreenLight } from "../modal-fullscreen/styles/index.mjs";
 import { modalLight } from "../modal/styles/index.mjs";
@@ -162,6 +163,7 @@ export const lightTheme = {
   Marquee: marqueeLight,
   Menu: menuLight,
   Mention: mentionLight,
+  MessageBubble: messageBubbleLight,
   Message: messageLight,
   Modal: modalLight,
   Notification: notificationLight,

package/es/upload/src/Upload.d.ts

@@ -3112,7 +3112,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly name: string;
     readonly abstract: boolean;
     readonly multiple: boolean;
-    readonly noIcon: boolean;
     readonly directory: boolean;
     readonly directoryDnd: boolean;
     readonly method: string;
@@ -3129,5 +3128,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly listType: ListType;
     readonly shouldUseThumbnailUrl: ShouldUseThumbnailUrl;
     readonly showTrigger: boolean;
+    readonly noIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.2.1";
+declare const _default: "2.3.0";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.2.1';
+export default '2.3.0';

package/lib/chat/index.d.ts

@@ -1,6 +1,8 @@
 export { default as UChat } from './src/Chat';
 export { default as UChatListItems } from './src/ChatListItems';
 export type { ChatListItemsProps } from './src/ChatListItems';
+export { default as UChatMainArea } from './src/ChatMainArea';
+export type { ChatMainAreaProps } from './src/ChatMainArea';
 export { default as UChatMessages } from './src/ChatMessages';
 export type { ChatMessagesProps } from './src/ChatMessages';
 export type { ChatAttachment, ChatFooterProps, ChatFooterSlots, ChatHeaderProps, ChatHeaderSlots, ChatId, chatInjectionKey, ChatInst, ChatListHeaderProps, ChatListInst, ChatListItemData, ChatListItemProps, ChatListItemSlots, ChatMarkProps, ChatMarkSlots, ChatMessageData, ChatMessageProps, ChatMessageSlots, ChatProps, ChatSlots, OnAttachmentUpload, OnChatSelect, OnFilterChange, OnMessageSend, OnNetworkError, OnSendError, OnUploadError } from './src/interface';

package/lib/chat/index.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageStatus = exports.ChatMessageType = exports.ChatMarkType = exports.ChatAttachmentStatus = exports.UChatMessages = exports.UChatListItems = exports.UChat = void 0;
+exports.MessageStatus = exports.ChatMessageType = exports.ChatMarkType = exports.ChatAttachmentStatus = exports.UChatMessages = exports.UChatMainArea = exports.UChatListItems = exports.UChat = void 0;
 var Chat_1 = require("./src/Chat");
 Object.defineProperty(exports, "UChat", { enumerable: true, get: function () { return __importDefault(Chat_1).default; } });
 var ChatListItems_1 = require("./src/ChatListItems");
 Object.defineProperty(exports, "UChatListItems", { enumerable: true, get: function () { return __importDefault(ChatListItems_1).default; } });
+var ChatMainArea_1 = require("./src/ChatMainArea");
+Object.defineProperty(exports, "UChatMainArea", { enumerable: true, get: function () { return __importDefault(ChatMainArea_1).default; } });
 var ChatMessages_1 = require("./src/ChatMessages");
 Object.defineProperty(exports, "UChatMessages", { enumerable: true, get: function () { return __importDefault(ChatMessages_1).default; } });
 var interface_1 = require("./src/interface");