@uzum-tech/ui 1.7.2 → 1.8.1

package/es/chat/src/ChatListItems.js

@@ -0,0 +1,188 @@
+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';
+import { UBadge } from '../../badge';
+import { UIcon } from '../../icon';
+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';
+const statusIconMapper = {
+    [MessageStatus.READ]: CheckmarkDoneSharp,
+    [MessageStatus.PENDING]: MdTime,
+    [MessageStatus.RETRY]: Refresh,
+    [MessageStatus.UNREAD]: CheckmarkDoneSharp
+};
+export const chatListItemsProps = Object.assign(Object.assign({}, useTheme.props), { chatItems: {
+        type: Array,
+        default: () => []
+    }, selectedChatId: {
+        type: [String, Number, Symbol],
+        default: undefined
+    }, typingChatIds: {
+        type: Array,
+        default: () => []
+    }, typingText: {
+        type: String,
+        default: undefined
+    }, loading: {
+        type: Boolean,
+        default: false
+    }, loadingCount: {
+        type: Number,
+        default: 10
+    }, emptyProps: {
+        type: Object,
+        default: undefined
+    }, avatarProps: {
+        type: Object,
+        default: undefined
+    }, badgeProps: {
+        type: Object,
+        default: undefined
+    }, onChatSelect: {
+        type: Function,
+        default: undefined
+    }, notificationsShown: {
+        type: Object,
+        default: () => new Set()
+    } });
+export default defineComponent({
+    name: 'ChatListItems',
+    props: chatListItemsProps,
+    setup(props, { slots }) {
+        var _a;
+        const UChat = inject(chatInjectionKey, null);
+        const { mergedClsPrefixRef } = useConfig(props);
+        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;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-color-primary': brandPrimary500,
+                '--u-color-success': staticGreen,
+                '--u-color-error': staticRed,
+                '--u-text-color-base': textPrimary,
+                '--u-text-color-secondary': textSecondary,
+                '--u-text-color-disabled': textTertiary,
+                '--u-background-color': backgroundColor,
+                '--u-border-color': borderColor,
+                '--u-sidebar-background-color': sidebarBackgroundColor,
+                '--u-sidebar-border-color': sidebarBorderColor,
+                '--u-sidebar-item-background-color': sidebarItemBackgroundColor,
+                '--u-sidebar-item-background-color-hover': sidebarItemBackgroundColorHover,
+                '--u-sidebar-item-background-color-selected': sidebarItemBackgroundColorSelected,
+                '--u-sidebar-item-text-color': sidebarItemTextColor,
+                '--u-sidebar-item-text-color-selected': sidebarItemTextColorSelected,
+                '--u-sidebar-item-subtitle-color': sidebarItemSubtitleColor,
+                '--u-sidebar-item-time-color': sidebarItemTimeColor,
+                '--u-unread-notification-background-color': unreadNotificationBackgroundColor,
+                '--u-border-radius': borderRadius
+            };
+        });
+        const themeClassHandle = useThemeClass('chat-list-items', computed(() => ''), cssVarsRef, props);
+        const mergedTypingTextRef = computed(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
+        const handleChatSelect = (chatId) => {
+            var _a;
+            (_a = props.onChatSelect) === null || _a === void 0 ? void 0 : _a.call(props, chatId);
+        };
+        const renderChatItem = (item) => {
+            var _a, _b;
+            const isSelected = props.selectedChatId === item.id;
+            const isTyping = (_b = (_a = props.typingChatIds) === null || _a === void 0 ? void 0 : _a.includes(item.id)) !== null && _b !== void 0 ? _b : false;
+            return (h(UListItem, { key: item.id, showIcon: false, onClick: () => {
+                    handleChatSelect(item.id);
+                }, class: [
+                    `${mergedClsPrefixRef.value}-chat-sidebar__item`,
+                    isSelected &&
+                        `${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, { theme: themeRef.value.peers.Avatar, themeOverrides: themeRef.value.peerOverrides.Avatar }), {
+                    default: () => {
+                        var _a;
+                        return typeof item.avatar === 'function'
+                            ? item.avatar()
+                            : typeof item.title === 'string'
+                                ? (_a = item.title.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()
+                                : '?';
+                    }
+                })),
+                header: () => (h("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
+                description: () => (h("span", { class: [
+                        `${mergedClsPrefixRef.value}-chat-sidebar__item-subtitle`,
+                        isTyping && 'typing'
+                    ], style: {
+                        display: 'block',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        minWidth: 0,
+                        maxWidth: '100%'
+                    } }, isTyping
+                    ? mergedTypingTextRef.value
+                    : typeof item.subtitle === 'string'
+                        ? item.subtitle
+                        : typeof item.subtitle === 'function'
+                            ? item.subtitle()
+                            : item.subtitle)),
+                suffix: () => {
+                    const displayUnreadCount = item.unreadCount || 0;
+                    const hasUnreadIncoming = displayUnreadCount > 0;
+                    const lastMessageIsOwn = item.lastMessageIsOwn;
+                    return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-indicators` },
+                        h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-time` }, item.datetime),
+                        h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-status` },
+                            lastMessageIsOwn &&
+                                (slots.chatItemStatus ? (slots.chatItemStatus(item)) : item.messageStatus &&
+                                    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}`
+                                    ], 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,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const { mergedClsPrefixRef, renderChatItem } = this;
+        const content = (() => {
+            var _a;
+            if (this.loading) {
+                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, 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, { 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: {
+                    border: 'none',
+                    borderRadius: '0',
+                    padding: '0',
+                    maxWidth: '100%',
+                    background: 'transparent'
+                } },
+                h("div", { class: `${mergedClsPrefixRef}-chat-sidebar__content`, style: {
+                        padding: '0'
+                    } }, content))));
+    }
+});