@uzum-tech/ui 1.8.0 → 1.8.1

package/dist/index.js

@@ -58045,6 +58045,12 @@
       ChatMessageType2["MARK"] = "mark";
       return ChatMessageType2;
     })(ChatMessageType || {});
+    var ChatMarkType = /* @__PURE__ */(ChatMarkType2 => {
+      ChatMarkType2["SYSTEM"] = "system";
+      ChatMarkType2["EVENT"] = "event";
+      ChatMarkType2["DIVIDER"] = "divider";
+      return ChatMarkType2;
+    })(ChatMarkType || {});
     const chatInjectionKey = createInjectionKey("chat");
 
     var commonVars = {
@@ -59740,7 +59746,6 @@
   max-height: 100%;
   min-height: 0;
   display: flex;
-  overflow: hidden;
   box-sizing: border-box;
   .u-list-item__text {
     grid-template-columns: 1fr !important;
@@ -59749,7 +59754,6 @@
     height: 100%;
     max-height: 100%;
     min-height: 0;
-    overflow: hidden;
   }
 `, [cB("chat-sidebar", `
     max-width: 388px;
@@ -59760,7 +59764,6 @@
     background-color: var(--u-sidebar-background-color);
     border: 1px solid var(--u-sidebar-border-color);
     border-radius: 20px;
-    overflow: hidden;
   `, [cE("header", `
       flex-shrink: 0;
     `), cE("header-container", `
@@ -59874,7 +59877,6 @@
       `), cE("item-status sup", `
         padding: 2px 6px 2px 5px;
         height: 22px;
-        --u-color: var(--u-unread-notification-background-color);
       `), cE("item-status-icon", `
         color: var(--u-sidebar-item-time-color);
       `, [cM("read", `
@@ -59896,7 +59898,6 @@
           height: 100%;
           max-height: 100%;
           min-height: 0;
-          overflow: hidden;
         `, [cE("header", `
             border-bottom: 1px solid var(--u-border-color);
             width: 100%;
@@ -59912,7 +59913,7 @@
             color: var(--u-unread-notification-text-color);
             padding: 6px 12px;
             text-align: center;
-            font-size: 12px;
+            font-size: 14px;
             font-weight: 500;
             margin: 8px 0;
             display: flex;
@@ -59946,8 +59947,19 @@
               color: var(--u-date-separator-color);
               padding: 4px 12px;
               border-radius: 12px;
-              font-size: 12px;
+              font-size: 14px;
               font-weight: 500;
+            `)]), cE("mark", `
+            display: flex;
+            justify-content: center;
+            margin: 12px 0;
+            width: 100%;
+          `, [c$1("span", `
+              padding: 6px 12px;
+              border-radius: 8px;
+              color: var(--u-text-color-secondary);
+              background-color: var(--u-date-separator-background-color);
+              text-align: center;
             `)]), cE("message", `
             display: flex;
             margin-bottom: 8px;
@@ -60063,13 +60075,6 @@
           `), cE("input", `
             flex: 1;
             margin-right: 4px;
-            --u-color: #F3F4F6 !important;
-            --u-color-focus: #F3F4F6 !important;
-            --u-border: none !important;
-            --u-border-focus: none !important;
-            --u-border-hover: none !important;
-            --u-box-shadow: none !important;
-            --u-box-shadow-focus: none !important;
           `), cE("attach-btn", `
             margin-left: 4px;
             flex-shrink: 0;
@@ -60086,6 +60091,40 @@
     background-color: var(--u-attachment-background-color-other);
   `)]);
 
+    const chatInputLight = {
+      ...inputLight,
+      self(vars) {
+        const originalInputSelf = self$1e(vars);
+        const {
+          elementsTertiary
+        } = vars;
+        return {
+          ...originalInputSelf,
+          color: elementsTertiary,
+          colorFocus: elementsTertiary,
+          border: "none",
+          borderFocus: "none",
+          borderHover: "none",
+          boxShadow: "none",
+          boxShadowFocus: "none"
+        };
+      }
+    };
+    const chatBadgeLight = {
+      ...badgeLight,
+      self(vars) {
+        const originalBadgeSelf = self$19(vars);
+        const {
+          brandPrimary400,
+          elementsSecondary
+        } = vars;
+        return {
+          ...originalBadgeSelf,
+          color: brandPrimary400,
+          textColor: elementsSecondary
+        };
+      }
+    };
     const self$6 = vars => {
       const {
         borderRadiusLarge,
@@ -60135,7 +60174,7 @@
         unreadNotificationTextColor: elementsSecondary,
         typingIndicatorColor: textSecondary,
         dateSeparatorColor: textTertiary,
-        dateSeparatorBackgroundColor: elementsTertiary,
+        dateSeparatorBackgroundColor: "transparent",
         borderRadius: borderRadiusLarge,
         errorColor: staticRed
       };
@@ -60144,11 +60183,11 @@
       name: "Chat",
       common: derived,
       peers: {
-        Input: inputLight,
+        Input: chatInputLight,
         Empty: emptyLight,
         Select: selectLight,
         Avatar: avatarLight,
-        Badge: badgeLight,
+        Badge: chatBadgeLight,
         Button: buttonLight,
         Icon: iconLight,
         List: listLight,
@@ -60235,17 +60274,10 @@
     var UChatListItems = vue.defineComponent({
       name: "ChatListItems",
       props: chatListItemsProps,
-      emits: ["chat-select"],
-      setup(props, { slots, emit }) {
+      setup(props, { slots }) {
+        const UChat = vue.inject(chatInjectionKey, null);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme(
-          "Chat",
-          "-chat",
-          style$12,
-          chatLight,
-          props,
-          mergedClsPrefixRef
-        );
+        const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$12, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale("Chat");
         const cssVarsRef = vue.computed(() => {
           const {
@@ -60307,7 +60339,6 @@
           () => props.typingText ?? localeRef.value.typingText
         );
         const handleChatSelect = (chatId) => {
-          emit("chat-select", chatId);
           props.onChatSelect?.(chatId);
         };
         const renderChatItem = (item) => {
@@ -60333,7 +60364,9 @@
                 {
                   size: "medium",
                   src: typeof item.avatar === "string" ? item.avatar : void 0,
-                  ...props.avatarProps
+                  ...props.avatarProps,
+                  theme: themeRef.value.peers.Avatar,
+                  themeOverrides: themeRef.value.peerOverrides.Avatar
                 },
                 {
                   default: () => typeof item.avatar === "function" ? item.avatar() : typeof item.title === "string" ? item.title.charAt(0)?.toUpperCase() : "?"
@@ -60393,14 +60426,18 @@
                         class: [
                           `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon`,
                           `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon--${item.messageStatus}`
-                        ]
+                        ],
+                        theme: themeRef.value.peers.Icon,
+                        themeOverrides: themeRef.value.peerOverrides.Icon
                       }
                     ) : null),
                     !lastMessageIsOwn && hasUnreadIncoming && /* @__PURE__ */ vue.h(
                       UBadge,
                       {
                         value: displayUnreadCount,
-                        ...props.badgeProps
+                        ...props.badgeProps,
+                        theme: themeRef.value.peers.Badge,
+                        themeOverrides: themeRef.value.peerOverrides.Badge
                       }
                     )
                   )
@@ -60411,6 +60448,7 @@
         };
         return {
           mergedClsPrefixRef,
+          mergedTheme: themeRef,
           renderChatItem,
           cssVars: cssVarsRef,
           themeClass: themeClassHandle?.themeClass,
@@ -60422,26 +60460,49 @@
         const { mergedClsPrefixRef, renderChatItem } = this;
         const content = (() => {
           if (this.loading) {
-            return /* @__PURE__ */ vue.h(UList, { loading: true }, {
-              default: () => Array.from({ length: this.loadingCount || 10 }).map(
-                (_, index) => /* @__PURE__ */ vue.h(
-                  UListItem,
-                  {
-                    key: index,
-                    avatar: { icon: PersonOutline },
-                    description: { text: "Loading..." },
-                    header: { text: "Loading..." }
-                  }
+            return /* @__PURE__ */ vue.h(
+              UList,
+              {
+                loading: true,
+                theme: this.mergedTheme.peers.List,
+                themeOverrides: this.mergedTheme.peerOverrides.List
+              },
+              {
+                default: () => Array.from({ length: this.loadingCount || 10 }).map(
+                  (_, index) => /* @__PURE__ */ vue.h(
+                    UListItem,
+                    {
+                      key: index,
+                      avatar: { icon: PersonOutline },
+                      description: { text: "Loading..." },
+                      header: { text: "Loading..." }
+                    }
+                  )
                 )
-              )
-            });
+              }
+            );
           }
           if (this.chatItems?.length) {
-            return /* @__PURE__ */ vue.h(UList, { showIcon: false }, {
-              default: () => this.chatItems?.map((item) => renderChatItem(item))
-            });
+            return /* @__PURE__ */ vue.h(
+              UList,
+              {
+                showIcon: false,
+                theme: this.mergedTheme.peers.List,
+                themeOverrides: this.mergedTheme.peerOverrides.List
+              },
+              {
+                default: () => this.chatItems?.map((item) => renderChatItem(item))
+              }
+            );
           }
-          return /* @__PURE__ */ vue.h(UEmpty, { ...this.emptyProps });
+          return /* @__PURE__ */ vue.h(
+            UEmpty,
+            {
+              ...this.emptyProps,
+              theme: this.mergedTheme.peers.Empty,
+              themeOverrides: this.mergedTheme.peerOverrides.Empty
+            }
+          );
         })();
         return /* @__PURE__ */ vue.h(
           "div",
@@ -60485,6 +60546,7 @@
         const { slots } = this;
         const {
           mergedClsPrefixRef,
+          mergedThemeRef,
           chatItemsRef,
           chatItemsLoadingRef,
           chatItemsLoadingCountRef,
@@ -60513,7 +60575,15 @@
                 {
                   class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main`
                 },
-                slots.sidebarHeaderMain?.() || /* @__PURE__ */ vue.h(USelect, { round: true, size: "small" })
+                slots.sidebarHeaderMain?.() || /* @__PURE__ */ vue.h(
+                  USelect,
+                  {
+                    round: true,
+                    size: "tiny",
+                    theme: mergedThemeRef.value.peers.Select,
+                    themeOverrides: mergedThemeRef.value.peerOverrides.Select
+                  }
+                )
               ), /* @__PURE__ */ vue.h(
                 "div",
                 {
@@ -64450,17 +64520,10 @@
     var UChatMessages = vue.defineComponent({
       name: "ChatMessages",
       props: chatMessagesProps,
-      emits: ["message-retry"],
-      setup(props, { slots, emit }) {
+      setup(props, { slots }) {
+        const UChat = vue.inject(chatInjectionKey, null);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme(
-          "Chat",
-          "-chat",
-          style$12,
-          chatLight,
-          props,
-          mergedClsPrefixRef
-        );
+        const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$12, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale("Chat");
         const cssVarsRef = vue.computed(() => {
           const {
@@ -64549,7 +64612,6 @@
           ).length;
         });
         const handleMessageRetry = (message) => {
-          emit("message-retry", message);
           props.onMessageRetry?.(message);
         };
         const renderDateSeparator = (date) => {
@@ -64565,6 +64627,20 @@
             /* @__PURE__ */ vue.h("span", null, count, " ", mergedUnreadNotificationTextRef.value)
           );
         };
+        const renderMarkMessage = (message) => {
+          const markTypeClass = message.markType === ChatMarkType.SYSTEM ? "system" : message.markType === ChatMarkType.EVENT ? "event" : "divider";
+          return /* @__PURE__ */ vue.h(
+            "div",
+            {
+              key: message.id,
+              class: [
+                `${mergedClsPrefixRef.value}-chat-main__mark`,
+                `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
+              ]
+            },
+            message.content && /* @__PURE__ */ vue.h("span", null, message.content)
+          );
+        };
         const renderMessage = (message) => {
           const isOwn = message.isOwn;
           const attachments = message.attachment ? Array.isArray(message.attachment) ? message.attachment : [message.attachment] : [];
@@ -64641,7 +64717,9 @@
                   {
                     size: 16,
                     component: statusIconMapper[MessageStatus.RETRY],
-                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`
+                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`,
+                    theme: themeRef.value.peers.Icon,
+                    themeOverrides: themeRef.value.peerOverrides.Icon
                   }
                 ),
                 /* @__PURE__ */ vue.h(
@@ -64672,7 +64750,9 @@
                       `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(
                     message.status
                   )}`
-                    ]
+                    ],
+                    theme: themeRef.value.peers.Icon,
+                    themeOverrides: themeRef.value.peerOverrides.Icon
                   }
                 )
               ))
@@ -64759,7 +64839,9 @@
         };
         return {
           mergedClsPrefixRef,
+          mergedTheme: themeRef,
           renderMessage,
+          renderMarkMessage,
           renderTypingIndicator,
           renderSkeletonMessage,
           renderDateSeparator,
@@ -64774,6 +64856,7 @@
         const {
           mergedClsPrefixRef,
           renderMessage,
+          renderMarkMessage,
           renderTypingIndicator,
           renderSkeletonMessage,
           renderDateSeparator,
@@ -64879,7 +64962,11 @@
                 if (item.type === "unread-notification") {
                   return renderUnreadNotification();
                 }
-                return renderMessage(item);
+                const message = item;
+                if (message.type === ChatMessageType.MARK) {
+                  return renderMarkMessage(message);
+                }
+                return renderMessage(message);
               }
             ), isTyping && renderTypingIndicator())
           )
@@ -64894,6 +64981,7 @@
       setup(_, { slots }) {
         const {
           mergedClsPrefixRef,
+          mergedThemeRef,
           selectedChatRef,
           messagesRef,
           typingChatIdsRef,
@@ -65030,7 +65118,9 @@
               UText,
               {
                 variant: "heading-s-bold",
-                class: `${mergedClsPrefixRef.value}-chat-main__header-title`
+                class: `${mergedClsPrefixRef.value}-chat-main__header-title`,
+                theme: mergedThemeRef.value.peers.Typography,
+                themeOverrides: mergedThemeRef.value.peerOverrides.Typography
               },
               {
                 default: () => selectedChatRef.value?.title || "Select a chat"
@@ -65051,12 +65141,23 @@
                       circle: true,
                       size: "large",
                       ...headerButtonPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                       onClick: () => onChatShare?.value?.()
                     },
                     {
-                      default: () => /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, {
-                        default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
-                      })
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon,
+                        {
+                          size: 20,
+                          ...headerIconPropsRef.value,
+                          theme: mergedThemeRef.value.peers.Icon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.Icon
+                        },
+                        {
+                          default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ vue.h(
@@ -65066,12 +65167,23 @@
                       circle: true,
                       size: "large",
                       ...headerButtonPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                       onClick: () => onUserProfile?.value?.()
                     },
                     {
-                      default: () => /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, {
-                        default: () => /* @__PURE__ */ vue.h(PersonNote, null)
-                      })
+                      default: () => /* @__PURE__ */ vue.h(
+                        UIcon,
+                        {
+                          size: 20,
+                          ...headerIconPropsRef.value,
+                          theme: mergedThemeRef.value.peers.Icon,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.Icon
+                        },
+                        {
+                          default: () => /* @__PURE__ */ vue.h(PersonNote, null)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ vue.h(
@@ -65081,6 +65193,8 @@
                       size: "large",
                       round: true,
                       ...headerButtonPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Button,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                       onClick: () => onChatClose?.value?.()
                     },
                     {
@@ -65232,6 +65346,8 @@
                         size: "large",
                         class: `${mergedClsPrefixRef.value}-chat-main__attach-btn`,
                         ...footerButtonPropsRef.value,
+                        theme: mergedThemeRef.value.peers.Button,
+                        themeOverrides: mergedThemeRef.value.peerOverrides.Button,
                         onClick: handleClick
                       },
                       {
@@ -65239,7 +65355,9 @@
                           UIcon,
                           {
                             size: 24,
-                            ...footerIconPropsRef.value
+                            ...footerIconPropsRef.value,
+                            theme: mergedThemeRef.value.peers.Icon,
+                            themeOverrides: mergedThemeRef.value.peerOverrides.Icon
                           },
                           {
                             default: () => /* @__PURE__ */ vue.h(AttachIcon, null)
@@ -65255,6 +65373,8 @@
                       placeholder: inputPlaceholderRef.value,
                       class: `${mergedClsPrefixRef.value}-chat-main__input`,
                       ...footerInputPropsRef.value,
+                      theme: mergedThemeRef.value.peers.Input,
+                      themeOverrides: mergedThemeRef.value.peerOverrides.Input,
                       onUpdateValue: (value) => {
                         inputValue.value = value;
                         if (selectedChatRef.value) {
@@ -65708,6 +65828,7 @@
         );
         vue.provide(chatInjectionKey, {
           mergedClsPrefixRef,
+          mergedThemeRef: themeRef,
           chatItemsRef: vue.toRef(props, "chatItems"),
           selectedChatIdRef: mergedSelectedChatIdRef,
           selectedChatRef,
@@ -129355,6 +129476,9 @@
 
     var components = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        ChatMarkType: ChatMarkType,
+        ChatMessageType: ChatMessageType,
+        MessageStatus: MessageStatus,
         NA: a,
         NP: p,
         UActionCard: ActionCard,
@@ -129645,7 +129769,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.8.0";
+    var version = "1.8.1";
 
     function create({
       componentPrefix = "U",
@@ -130450,6 +130574,9 @@
       };
     }
 
+    exports.ChatMarkType = ChatMarkType;
+    exports.ChatMessageType = ChatMessageType;
+    exports.MessageStatus = MessageStatus;
     exports.NA = a;
     exports.NP = p;
     exports.UActionCard = ActionCard;