@uzum-tech/ui 1.8.0 → 1.8.2

package/lib/chat/src/ChatListItems.js

@@ -15,6 +15,7 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const styles_1 = require("../styles");
 const _mixins_1 = require("../../_mixins");
 const icons_1 = require("../../_internal/icons");
+const flex_1 = require("../../flex");
 const statusIconMapper = {
     [interface_1.MessageStatus.READ]: icons_1.CheckmarkDoneSharp,
     [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
@@ -58,10 +59,11 @@ exports.chatListItemsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.
 exports.default = (0, vue_1.defineComponent)({
     name: 'ChatListItems',
     props: exports.chatListItemsProps,
-    emits: ['chat-select'],
-    setup(props, { slots, emit }) {
+    setup(props, { slots }) {
+        var _a;
+        const UChat = (0, vue_1.inject)(interface_1.chatInjectionKey, null);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
+        const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : (0, _mixins_1.useTheme)('Chat', '-chat', index_cssr_1.default, styles_1.chatLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Chat');
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, sidebarBackgroundColor, sidebarBorderColor, sidebarItemBackgroundColor, sidebarItemBackgroundColorHover, sidebarItemBackgroundColorSelected, sidebarItemTextColor, sidebarItemTextColorSelected, sidebarItemSubtitleColor, sidebarItemTimeColor, unreadNotificationBackgroundColor, borderRadius } } = themeRef.value;
@@ -92,7 +94,6 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedTypingTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
         const handleChatSelect = (chatId) => {
             var _a;
-            emit('chat-select', chatId);
             (_a = props.onChatSelect) === null || _a === void 0 ? void 0 : _a.call(props, chatId);
         };
         const renderChatItem = (item) => {
@@ -107,7 +108,7 @@ exports.default = (0, vue_1.defineComponent)({
                         `${mergedClsPrefixRef.value}-chat-sidebar__item--selected`,
                     isTyping && `${mergedClsPrefixRef.value}-chat-sidebar__item--typing`
                 ] }, {
-                prefix: () => ((0, vue_1.h)(avatar_1.UAvatar, Object.assign({ size: "medium", src: typeof item.avatar === 'string' ? item.avatar : undefined }, props.avatarProps), {
+                prefix: () => ((0, vue_1.h)(avatar_1.UAvatar, Object.assign({ size: "medium", src: typeof item.avatar === 'string' ? item.avatar : undefined }, props.avatarProps, { theme: themeRef.value.peers.Avatar, themeOverrides: themeRef.value.peerOverrides.Avatar }), {
                     default: () => {
                         var _a;
                         return typeof item.avatar === 'function'
@@ -147,13 +148,14 @@ exports.default = (0, vue_1.defineComponent)({
                                     statusIconMapper[item.messageStatus] ? ((0, vue_1.h)(icon_1.UIcon, { size: 16, component: statusIconMapper[item.messageStatus], class: [
                                         `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon`,
                                         `${mergedClsPrefixRef.value}-chat-sidebar__item-status-icon--${item.messageStatus}`
-                                    ] })) : null),
-                            !lastMessageIsOwn && hasUnreadIncoming && ((0, vue_1.h)(badge_1.UBadge, Object.assign({ value: displayUnreadCount }, props.badgeProps))))));
+                                    ], theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon })) : null),
+                            !lastMessageIsOwn && hasUnreadIncoming && ((0, vue_1.h)(badge_1.UBadge, Object.assign({ value: displayUnreadCount }, props.badgeProps, { theme: themeRef.value.peers.Badge, themeOverrides: themeRef.value.peerOverrides.Badge }))))));
                 }
             }));
         };
         return {
             mergedClsPrefixRef,
+            mergedTheme: themeRef,
             renderChatItem,
             cssVars: cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
@@ -167,16 +169,18 @@ exports.default = (0, vue_1.defineComponent)({
         const content = (() => {
             var _a;
             if (this.loading) {
-                return ((0, vue_1.h)(list_1.UList, { loading: true }, {
+                return ((0, vue_1.h)(list_1.UList, { loading: true, theme: this.mergedTheme.peers.List, themeOverrides: this.mergedTheme.peerOverrides.List }, {
                     default: () => Array.from({ length: this.loadingCount || 10 }).map((_, index) => ((0, vue_1.h)(list_1.UListItem, { key: index, avatar: { icon: icons_1.PersonOutline }, description: { text: 'Loading...' }, header: { text: 'Loading...' } })))
                 }));
             }
             if ((_a = this.chatItems) === null || _a === void 0 ? void 0 : _a.length) {
-                return ((0, vue_1.h)(list_1.UList, { showIcon: false }, {
+                return ((0, vue_1.h)(list_1.UList, { showIcon: false, theme: this.mergedTheme.peers.List, themeOverrides: this.mergedTheme.peerOverrides.List }, {
                     default: () => { var _a; return (_a = this.chatItems) === null || _a === void 0 ? void 0 : _a.map((item) => renderChatItem(item)); }
                 }));
             }
-            return (0, vue_1.h)(empty_1.UEmpty, Object.assign({}, this.emptyProps));
+            return ((0, vue_1.h)(flex_1.UFlex, { justify: "center", align: "center", vertical: true }, {
+                default: () => ((0, vue_1.h)(empty_1.UEmpty, Object.assign({}, this.emptyProps, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })))
+            }));
         })();
         return ((0, vue_1.h)("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-sidebar`, style: {