@uzum-tech/ui 1.8.0 → 1.8.2

package/es/chat/src/ChatListItems.js

@@ -1,5 +1,5 @@
-import { h, defineComponent, computed } from 'vue';
-import { MessageStatus } from './interface';
+import { h, defineComponent, computed, inject } from 'vue';
+import { MessageStatus, chatInjectionKey } from './interface';
 import { UEmpty } from '../../empty';
 import { UAvatar } from '../../avatar';
 import { UListItem, UList } from '../../list';
@@ -9,6 +9,7 @@ import style from './styles/index.cssr';
 import { chatLight } from '../styles';
 import { useConfig, useTheme, useThemeClass, useLocale } from '../../_mixins';
 import { CheckmarkDoneSharp, MdTime, PersonOutline, Refresh } from '../../_internal/icons';
+import { UFlex } from '../../flex';
 const statusIconMapper = {
     [MessageStatus.READ]: CheckmarkDoneSharp,
     [MessageStatus.PENDING]: MdTime,
@@ -52,10 +53,11 @@ export const chatListItemsProps = Object.assign(Object.assign({}, useTheme.props
 export default defineComponent({
     name: 'ChatListItems',
     props: chatListItemsProps,
-    emits: ['chat-select'],
-    setup(props, { slots, emit }) {
+    setup(props, { slots }) {
+        var _a;
+        const UChat = inject(chatInjectionKey, null);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
+        const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Chat');
         const cssVarsRef = 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;
@@ -86,7 +88,6 @@ export default defineComponent({
         const mergedTypingTextRef = 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) => {
@@ -101,7 +102,7 @@ export default defineComponent({
                         `${mergedClsPrefixRef.value}-chat-sidebar__item--selected`,
                     isTyping && `${mergedClsPrefixRef.value}-chat-sidebar__item--typing`
                 ] }, {
-                prefix: () => (h(UAvatar, Object.assign({ size: "medium", src: typeof item.avatar === 'string' ? item.avatar : undefined }, props.avatarProps), {
+                prefix: () => (h(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'
@@ -141,13 +142,14 @@ export default defineComponent({
                                     statusIconMapper[item.messageStatus] ? (h(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 && (h(UBadge, Object.assign({ value: displayUnreadCount }, props.badgeProps))))));
+                                    ], theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon })) : null),
+                            !lastMessageIsOwn && hasUnreadIncoming && (h(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,
@@ -161,16 +163,18 @@ export default defineComponent({
         const content = (() => {
             var _a;
             if (this.loading) {
-                return (h(UList, { loading: true }, {
+                return (h(UList, { loading: true, theme: this.mergedTheme.peers.List, themeOverrides: this.mergedTheme.peerOverrides.List }, {
                     default: () => Array.from({ length: this.loadingCount || 10 }).map((_, index) => (h(UListItem, { key: index, avatar: { icon: PersonOutline }, description: { text: 'Loading...' }, header: { text: 'Loading...' } })))
                 }));
             }
             if ((_a = this.chatItems) === null || _a === void 0 ? void 0 : _a.length) {
-                return (h(UList, { showIcon: false }, {
+                return (h(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 h(UEmpty, Object.assign({}, this.emptyProps));
+            return (h(UFlex, { justify: "center", align: "center", vertical: true }, {
+                default: () => (h(UEmpty, Object.assign({}, this.emptyProps, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })))
+            }));
         })();
         return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
             h("div", { class: `${mergedClsPrefixRef}-chat-sidebar`, style: {