@uzum-tech/ui 1.8.0 → 1.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +198 -71
- package/dist/index.prod.js +2 -2
- package/es/chat/index.d.ts +2 -1
- package/es/chat/index.js +1 -0
- package/es/chat/src/Chat.js +1 -0
- package/es/chat/src/ChatListItems.d.ts +1759 -4
- package/es/chat/src/ChatListItems.js +13 -12
- package/es/chat/src/ChatMessages.d.ts +1760 -4
- package/es/chat/src/ChatMessages.js +27 -10
- package/es/chat/src/ChatParts/MainArea.js +10 -10
- package/es/chat/src/ChatParts/Sidebar.js +2 -2
- package/es/chat/src/interface.d.ts +4 -0
- package/es/chat/src/styles/index.cssr.js +13 -14
- package/es/chat/styles/light.d.ts +1 -1
- package/es/chat/styles/light.js +15 -3
- package/es/version.d.ts +1 -1
- package/es/version.js +1 -1
- package/lib/chat/index.d.ts +2 -1
- package/lib/chat/index.js +5 -1
- package/lib/chat/src/Chat.js +1 -0
- package/lib/chat/src/ChatListItems.d.ts +1759 -4
- package/lib/chat/src/ChatListItems.js +11 -10
- package/lib/chat/src/ChatMessages.d.ts +1760 -4
- package/lib/chat/src/ChatMessages.js +25 -8
- package/lib/chat/src/ChatParts/MainArea.js +10 -10
- package/lib/chat/src/ChatParts/Sidebar.js +2 -2
- package/lib/chat/src/interface.d.ts +4 -0
- package/lib/chat/src/styles/index.cssr.js +13 -14
- package/lib/chat/styles/light.d.ts +1 -1
- package/lib/chat/styles/light.js +15 -3
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
- package/web-types.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { h, defineComponent, computed, Fragment } from 'vue';
|
|
2
|
-
import { MessageStatus } from './interface';
|
|
1
|
+
import { h, defineComponent, computed, inject, Fragment } from 'vue';
|
|
2
|
+
import { MessageStatus, ChatMessageType, ChatMarkType, chatInjectionKey } from './interface';
|
|
3
3
|
import ChatAttachmentComponent from './ChatParts/ChatAttachment';
|
|
4
4
|
import { UIcon } from '../../icon';
|
|
5
5
|
import { USkeleton } from '../../skeleton';
|
|
@@ -53,10 +53,11 @@ export const chatMessagesProps = Object.assign(Object.assign({}, useTheme.props)
|
|
|
53
53
|
export default defineComponent({
|
|
54
54
|
name: 'ChatMessages',
|
|
55
55
|
props: chatMessagesProps,
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
setup(props, { slots }) {
|
|
57
|
+
var _a;
|
|
58
|
+
const UChat = inject(chatInjectionKey, null);
|
|
58
59
|
const { mergedClsPrefixRef } = useConfig(props);
|
|
59
|
-
const themeRef = useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
|
|
60
|
+
const themeRef = (_a = UChat === null || UChat === void 0 ? void 0 : UChat.mergedThemeRef) !== null && _a !== void 0 ? _a : useTheme('Chat', '-chat', style, chatLight, props, mergedClsPrefixRef);
|
|
60
61
|
const { localeRef } = useLocale('Chat');
|
|
61
62
|
const cssVarsRef = computed(() => {
|
|
62
63
|
const { common: { cubicBezierEaseInOut, brandPrimary500, staticGreen, staticRed, textPrimary, textSecondary, textTertiary }, self: { backgroundColor, borderColor, mainBackgroundColor, headerBackgroundColor, headerBorderColor, headerTitleColor, messageBubbleBackgroundColorOwn, messageBubbleBackgroundColorOther, messageBubbleTextColorOwn, messageBubbleTextColorOther, messageTimeColor, messageStatusColor, attachmentBackgroundColorOwn, attachmentBackgroundColorOther, unreadNotificationBackgroundColor, unreadNotificationTextColor, typingIndicatorColor, dateSeparatorColor, dateSeparatorBackgroundColor, borderRadius, errorColor } } = themeRef.value;
|
|
@@ -101,7 +102,6 @@ export default defineComponent({
|
|
|
101
102
|
});
|
|
102
103
|
const handleMessageRetry = (message) => {
|
|
103
104
|
var _a;
|
|
104
|
-
emit('message-retry', message);
|
|
105
105
|
(_a = props.onMessageRetry) === null || _a === void 0 ? void 0 : _a.call(props, message);
|
|
106
106
|
};
|
|
107
107
|
const renderDateSeparator = (date) => {
|
|
@@ -117,6 +117,17 @@ export default defineComponent({
|
|
|
117
117
|
" ",
|
|
118
118
|
mergedUnreadNotificationTextRef.value)));
|
|
119
119
|
};
|
|
120
|
+
const renderMarkMessage = (message) => {
|
|
121
|
+
const markTypeClass = message.markType === ChatMarkType.SYSTEM
|
|
122
|
+
? 'system'
|
|
123
|
+
: message.markType === ChatMarkType.EVENT
|
|
124
|
+
? 'event'
|
|
125
|
+
: 'divider';
|
|
126
|
+
return (h("div", { key: message.id, class: [
|
|
127
|
+
`${mergedClsPrefixRef.value}-chat-main__mark`,
|
|
128
|
+
`${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
|
|
129
|
+
] }, message.content && h("span", null, message.content)));
|
|
130
|
+
};
|
|
120
131
|
const renderMessage = (message) => {
|
|
121
132
|
const isOwn = message.isOwn;
|
|
122
133
|
const attachments = message.attachment
|
|
@@ -157,7 +168,7 @@ export default defineComponent({
|
|
|
157
168
|
] }, message.status === MessageStatus.RETRY ? (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry`, onClick: () => {
|
|
158
169
|
handleMessageRetry(message);
|
|
159
170
|
}, style: { cursor: 'pointer' } },
|
|
160
|
-
h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon
|
|
171
|
+
h(UIcon, { size: 16, component: statusIconMapper[MessageStatus.RETRY], class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`, theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }),
|
|
161
172
|
h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text` }, mergedRetryTextRef.value))) : (h(Fragment, null,
|
|
162
173
|
h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, message.timestamp),
|
|
163
174
|
isOwn && message.status && (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-status` }, slots.messageStatus
|
|
@@ -165,7 +176,7 @@ export default defineComponent({
|
|
|
165
176
|
: statusIconMapper[message.status] && (h(UIcon, { size: 16, component: statusIconMapper[message.status], class: [
|
|
166
177
|
`${mergedClsPrefixRef.value}-chat-main__message-status-icon`,
|
|
167
178
|
`${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(message.status)}`
|
|
168
|
-
] }))))))))));
|
|
179
|
+
], theme: themeRef.value.peers.Icon, themeOverrides: themeRef.value.peerOverrides.Icon }))))))))));
|
|
169
180
|
};
|
|
170
181
|
const renderTypingIndicator = () => {
|
|
171
182
|
return (h("div", { class: [
|
|
@@ -210,7 +221,9 @@ export default defineComponent({
|
|
|
210
221
|
};
|
|
211
222
|
return {
|
|
212
223
|
mergedClsPrefixRef,
|
|
224
|
+
mergedTheme: themeRef,
|
|
213
225
|
renderMessage,
|
|
226
|
+
renderMarkMessage,
|
|
214
227
|
renderTypingIndicator,
|
|
215
228
|
renderSkeletonMessage,
|
|
216
229
|
renderDateSeparator,
|
|
@@ -223,7 +236,7 @@ export default defineComponent({
|
|
|
223
236
|
render() {
|
|
224
237
|
var _a, _b, _c;
|
|
225
238
|
(_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
226
|
-
const { mergedClsPrefixRef, renderMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
|
|
239
|
+
const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
|
|
227
240
|
if (this.loading) {
|
|
228
241
|
return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
|
|
229
242
|
h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
|
|
@@ -301,7 +314,11 @@ export default defineComponent({
|
|
|
301
314
|
if (item.type === 'unread-notification') {
|
|
302
315
|
return renderUnreadNotification();
|
|
303
316
|
}
|
|
304
|
-
|
|
317
|
+
const message = item;
|
|
318
|
+
if (message.type === ChatMessageType.MARK) {
|
|
319
|
+
return renderMarkMessage(message);
|
|
320
|
+
}
|
|
321
|
+
return renderMessage(message);
|
|
305
322
|
}),
|
|
306
323
|
isTyping && renderTypingIndicator()))));
|
|
307
324
|
}
|
|
@@ -24,7 +24,7 @@ const SENDING_DELAY = 100;
|
|
|
24
24
|
export default defineComponent({
|
|
25
25
|
name: 'ChatMainArea',
|
|
26
26
|
setup(_, { slots }) {
|
|
27
|
-
const { mergedClsPrefixRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, onChatClose, onChatShare, onUserProfile
|
|
27
|
+
const { mergedClsPrefixRef, mergedThemeRef, selectedChatRef, messagesRef, typingChatIdsRef, messagesLoadingRef, messagesLoadingCountRef, headerButtonPropsRef, headerIconPropsRef, messageUploadPropsRef, footerInputPropsRef, footerButtonPropsRef, footerUploadPropsRef, footerIconPropsRef, inputPlaceholderRef, retryTextRef, typingTextRef, closeButtonTextRef, unreadNotificationTextRef, notificationsShownSetRef, unreadCountsBeforeReadRef, markNotificationShown, handleMessageSend, handleMessageRetry, onChatClose, onChatShare, onUserProfile
|
|
28
28
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
29
29
|
} = inject(chatInjectionKey);
|
|
30
30
|
const messagesBodyRef = ref();
|
|
@@ -131,22 +131,22 @@ export default defineComponent({
|
|
|
131
131
|
return (h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` },
|
|
132
132
|
h(UFlex, { justify: "space-between", align: "flex-start" }, {
|
|
133
133
|
default: () => (h(Fragment, null,
|
|
134
|
-
h(UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title
|
|
134
|
+
h(UText, { variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
|
|
135
135
|
default: () => { var _a; return ((_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) || 'Select a chat'; }
|
|
136
136
|
}),
|
|
137
137
|
h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
|
|
138
138
|
default: () => resolveSlot(slots.headerActions, () => [
|
|
139
|
-
h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
|
|
140
|
-
default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
|
|
139
|
+
h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatShare === null || onChatShare === void 0 ? void 0 : onChatShare.value) === null || _a === void 0 ? void 0 : _a.call(onChatShare); } }), {
|
|
140
|
+
default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
|
|
141
141
|
default: () => h(ArrowHookUpRight, null)
|
|
142
142
|
}))
|
|
143
143
|
}),
|
|
144
|
-
h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
|
|
145
|
-
default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value), {
|
|
144
|
+
h(UButton, Object.assign({ secondary: true, circle: true, size: "large" }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onUserProfile === null || onUserProfile === void 0 ? void 0 : onUserProfile.value) === null || _a === void 0 ? void 0 : _a.call(onUserProfile); } }), {
|
|
145
|
+
default: () => (h(UIcon, Object.assign({ size: 20 }, headerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
|
|
146
146
|
default: () => h(PersonNote, null)
|
|
147
147
|
}))
|
|
148
148
|
}),
|
|
149
|
-
h(UButton, Object.assign({ type: "primary", size: "large", round: true }, headerButtonPropsRef.value, { onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
|
|
149
|
+
h(UButton, Object.assign({ type: "primary", size: "large", round: true }, headerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: () => { var _a; return (_a = onChatClose === null || onChatClose === void 0 ? void 0 : onChatClose.value) === null || _a === void 0 ? void 0 : _a.call(onChatClose); } }), {
|
|
150
150
|
default: () => closeButtonTextRef.value
|
|
151
151
|
})
|
|
152
152
|
])
|
|
@@ -257,13 +257,13 @@ export default defineComponent({
|
|
|
257
257
|
default: () => (h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__input-container` }, {
|
|
258
258
|
default: () => (h(Fragment, null,
|
|
259
259
|
h(UUploadTrigger, { abstract: true }, {
|
|
260
|
-
default: ({ handleClick }) => (h(UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { onClick: handleClick }), {
|
|
261
|
-
default: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value), {
|
|
260
|
+
default: ({ handleClick }) => (h(UButton, Object.assign({ secondary: true, size: "large", class: `${mergedClsPrefixRef.value}-chat-main__attach-btn` }, footerButtonPropsRef.value, { theme: mergedThemeRef.value.peers.Button, themeOverrides: mergedThemeRef.value.peerOverrides.Button, onClick: handleClick }), {
|
|
261
|
+
default: () => (h(UIcon, Object.assign({ size: 24 }, footerIconPropsRef.value, { theme: mergedThemeRef.value.peers.Icon, themeOverrides: mergedThemeRef.value.peerOverrides.Icon }), {
|
|
262
262
|
default: () => h(AttachIcon, null)
|
|
263
263
|
}))
|
|
264
264
|
}))
|
|
265
265
|
}),
|
|
266
|
-
h(UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { onUpdateValue: (value) => {
|
|
266
|
+
h(UInput, Object.assign({ ref: "inputRef", value: inputValue.value, placeholder: inputPlaceholderRef.value, class: `${mergedClsPrefixRef.value}-chat-main__input` }, footerInputPropsRef.value, { theme: mergedThemeRef.value.peers.Input, themeOverrides: mergedThemeRef.value.peerOverrides.Input, onUpdateValue: (value) => {
|
|
267
267
|
inputValue.value = value;
|
|
268
268
|
if (selectedChatRef.value) {
|
|
269
269
|
chatInputs.value[selectedChatRef.value.id] = value;
|
|
@@ -10,7 +10,7 @@ export default defineComponent({
|
|
|
10
10
|
},
|
|
11
11
|
render() {
|
|
12
12
|
const { slots } = this;
|
|
13
|
-
const { mergedClsPrefixRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
|
|
13
|
+
const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
|
|
14
14
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
15
15
|
} = inject(chatInjectionKey);
|
|
16
16
|
const renderListHeader = () => {
|
|
@@ -19,7 +19,7 @@ export default defineComponent({
|
|
|
19
19
|
default: () => {
|
|
20
20
|
var _a, _b;
|
|
21
21
|
return (h(Fragment, null,
|
|
22
|
-
h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || (h(USelect, { round: true, size: "
|
|
22
|
+
h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main` }, ((_a = slots.sidebarHeaderMain) === null || _a === void 0 ? void 0 : _a.call(slots)) || (h(USelect, { round: true, size: "tiny", theme: mergedThemeRef.value.peers.Select, themeOverrides: mergedThemeRef.value.peerOverrides.Select }))),
|
|
23
23
|
h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions` }, (_b = slots.sidebarHeaderActions) === null || _b === void 0 ? void 0 : _b.call(slots))));
|
|
24
24
|
}
|
|
25
25
|
})));
|
|
@@ -6,6 +6,8 @@ import type { IconProps } from '../../icon';
|
|
|
6
6
|
import type { BadgeProps } from '../../badge';
|
|
7
7
|
import { EmptyProps } from '../../empty';
|
|
8
8
|
import { InputProps } from '../../input';
|
|
9
|
+
import type { ChatTheme } from '../styles';
|
|
10
|
+
import type { MergedTheme } from '../../_mixins';
|
|
9
11
|
export declare enum MessageStatus {
|
|
10
12
|
READ = "read",
|
|
11
13
|
UNREAD = "unread",
|
|
@@ -69,6 +71,7 @@ export interface ChatMessageData {
|
|
|
69
71
|
uploadProps?: Partial<UploadProps>;
|
|
70
72
|
senderAvatar?: string | (() => VNodeChild);
|
|
71
73
|
senderName?: string | (() => VNodeChild);
|
|
74
|
+
markType?: ChatMarkType;
|
|
72
75
|
}
|
|
73
76
|
export interface ChatMessageProps {
|
|
74
77
|
id: ChatId;
|
|
@@ -241,6 +244,7 @@ export interface ChatListInst {
|
|
|
241
244
|
}
|
|
242
245
|
export declare const chatInjectionKey: InjectionKey<{
|
|
243
246
|
mergedClsPrefixRef: Ref<string>;
|
|
247
|
+
mergedThemeRef: Ref<MergedTheme<ChatTheme>>;
|
|
244
248
|
chatItemsRef: Ref<ChatListItemData[] | undefined>;
|
|
245
249
|
selectedChatIdRef: Ref<ChatId | undefined>;
|
|
246
250
|
selectedChatRef: Ref<ChatListItemData | undefined>;
|
|
@@ -4,7 +4,6 @@ export default cB('chat', `
|
|
|
4
4
|
max-height: 100%;
|
|
5
5
|
min-height: 0;
|
|
6
6
|
display: flex;
|
|
7
|
-
overflow: hidden;
|
|
8
7
|
box-sizing: border-box;
|
|
9
8
|
.u-list-item__text {
|
|
10
9
|
grid-template-columns: 1fr !important;
|
|
@@ -13,7 +12,6 @@ export default cB('chat', `
|
|
|
13
12
|
height: 100%;
|
|
14
13
|
max-height: 100%;
|
|
15
14
|
min-height: 0;
|
|
16
|
-
overflow: hidden;
|
|
17
15
|
}
|
|
18
16
|
`, [cB('chat-sidebar', `
|
|
19
17
|
max-width: 388px;
|
|
@@ -24,7 +22,6 @@ export default cB('chat', `
|
|
|
24
22
|
background-color: var(--u-sidebar-background-color);
|
|
25
23
|
border: 1px solid var(--u-sidebar-border-color);
|
|
26
24
|
border-radius: 20px;
|
|
27
|
-
overflow: hidden;
|
|
28
25
|
`, [cE('header', `
|
|
29
26
|
flex-shrink: 0;
|
|
30
27
|
`), cE('header-container', `
|
|
@@ -138,7 +135,6 @@ export default cB('chat', `
|
|
|
138
135
|
`), cE('item-status sup', `
|
|
139
136
|
padding: 2px 6px 2px 5px;
|
|
140
137
|
height: 22px;
|
|
141
|
-
--u-color: var(--u-unread-notification-background-color);
|
|
142
138
|
`), cE('item-status-icon', `
|
|
143
139
|
color: var(--u-sidebar-item-time-color);
|
|
144
140
|
`, [cM('read', `
|
|
@@ -160,7 +156,6 @@ export default cB('chat', `
|
|
|
160
156
|
height: 100%;
|
|
161
157
|
max-height: 100%;
|
|
162
158
|
min-height: 0;
|
|
163
|
-
overflow: hidden;
|
|
164
159
|
`, [cE('header', `
|
|
165
160
|
border-bottom: 1px solid var(--u-border-color);
|
|
166
161
|
width: 100%;
|
|
@@ -176,7 +171,7 @@ export default cB('chat', `
|
|
|
176
171
|
color: var(--u-unread-notification-text-color);
|
|
177
172
|
padding: 6px 12px;
|
|
178
173
|
text-align: center;
|
|
179
|
-
font-size:
|
|
174
|
+
font-size: 14px;
|
|
180
175
|
font-weight: 500;
|
|
181
176
|
margin: 8px 0;
|
|
182
177
|
display: flex;
|
|
@@ -210,8 +205,19 @@ export default cB('chat', `
|
|
|
210
205
|
color: var(--u-date-separator-color);
|
|
211
206
|
padding: 4px 12px;
|
|
212
207
|
border-radius: 12px;
|
|
213
|
-
font-size:
|
|
208
|
+
font-size: 14px;
|
|
214
209
|
font-weight: 500;
|
|
210
|
+
`)]), cE('mark', `
|
|
211
|
+
display: flex;
|
|
212
|
+
justify-content: center;
|
|
213
|
+
margin: 12px 0;
|
|
214
|
+
width: 100%;
|
|
215
|
+
`, [c('span', `
|
|
216
|
+
padding: 6px 12px;
|
|
217
|
+
border-radius: 8px;
|
|
218
|
+
color: var(--u-text-color-secondary);
|
|
219
|
+
background-color: var(--u-date-separator-background-color);
|
|
220
|
+
text-align: center;
|
|
215
221
|
`)]), cE('message', `
|
|
216
222
|
display: flex;
|
|
217
223
|
margin-bottom: 8px;
|
|
@@ -327,13 +333,6 @@ export default cB('chat', `
|
|
|
327
333
|
`), cE('input', `
|
|
328
334
|
flex: 1;
|
|
329
335
|
margin-right: 4px;
|
|
330
|
-
--u-color: #F3F4F6 !important;
|
|
331
|
-
--u-color-focus: #F3F4F6 !important;
|
|
332
|
-
--u-border: none !important;
|
|
333
|
-
--u-border-focus: none !important;
|
|
334
|
-
--u-border-hover: none !important;
|
|
335
|
-
--u-box-shadow: none !important;
|
|
336
|
-
--u-box-shadow-focus: none !important;
|
|
337
336
|
`), cE('attach-btn', `
|
|
338
337
|
margin-left: 4px;
|
|
339
338
|
flex-shrink: 0;
|
|
@@ -35,7 +35,6 @@ export declare const self: (vars: ThemeCommonVars) => {
|
|
|
35
35
|
borderRadius: string;
|
|
36
36
|
errorColor: string;
|
|
37
37
|
};
|
|
38
|
-
export type ChatThemeVars = ReturnType<typeof self>;
|
|
39
38
|
declare const chatLight: import("../../_mixins").Theme<"Chat", {
|
|
40
39
|
backgroundColor: string;
|
|
41
40
|
borderColor: string;
|
|
@@ -686,4 +685,5 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
|
|
|
686
685
|
}, any>;
|
|
687
686
|
}>;
|
|
688
687
|
export default chatLight;
|
|
688
|
+
export type ChatThemeVars = ReturnType<typeof self>;
|
|
689
689
|
export type ChatTheme = typeof chatLight;
|
package/es/chat/styles/light.js
CHANGED
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
import { inputLight } from '../../input/styles';
|
|
2
|
+
import { self as inputSelf } from '../../input/styles/light';
|
|
2
3
|
import { emptyLight } from '../../empty/styles';
|
|
3
4
|
import { selectLight } from '../../select/styles';
|
|
4
5
|
import { avatarLight } from '../../avatar/styles';
|
|
5
6
|
import { badgeLight } from '../../badge/styles';
|
|
7
|
+
import { self as badgeSelf } from '../../badge/styles/light';
|
|
6
8
|
import { buttonLight } from '../../button/styles';
|
|
7
9
|
import { iconLight } from '../../icon/styles';
|
|
8
10
|
import { listLight } from '../../list/styles';
|
|
9
11
|
import { typographyLight } from '../../typography/styles';
|
|
10
12
|
import { commonLight } from '../../_styles/common';
|
|
11
13
|
import { createTheme } from '../../_mixins';
|
|
14
|
+
const chatInputLight = Object.assign(Object.assign({}, inputLight), { self(vars) {
|
|
15
|
+
const originalInputSelf = inputSelf(vars);
|
|
16
|
+
const { elementsTertiary } = vars;
|
|
17
|
+
return Object.assign(Object.assign({}, originalInputSelf), { color: elementsTertiary, colorFocus: elementsTertiary, border: 'none', borderFocus: 'none', borderHover: 'none', boxShadow: 'none', boxShadowFocus: 'none' });
|
|
18
|
+
} });
|
|
19
|
+
const chatBadgeLight = Object.assign(Object.assign({}, badgeLight), { self(vars) {
|
|
20
|
+
const originalBadgeSelf = badgeSelf(vars);
|
|
21
|
+
const { brandPrimary400, elementsSecondary } = vars;
|
|
22
|
+
return Object.assign(Object.assign({}, originalBadgeSelf), { color: brandPrimary400, textColor: elementsSecondary });
|
|
23
|
+
} });
|
|
12
24
|
export const self = (vars) => {
|
|
13
25
|
const { borderRadiusLarge, elementsQuaternary, elementsTertiary, textTertiary, textPrimary, textSecondary, surfacePrimary, brandPrimary500, brandPrimary400, transparencySecondary, elementsSecondary, elementsDarkQuinary, staticRed, staticWhite } = vars;
|
|
14
26
|
return {
|
|
@@ -43,7 +55,7 @@ export const self = (vars) => {
|
|
|
43
55
|
unreadNotificationTextColor: elementsSecondary,
|
|
44
56
|
typingIndicatorColor: textSecondary,
|
|
45
57
|
dateSeparatorColor: textTertiary,
|
|
46
|
-
dateSeparatorBackgroundColor:
|
|
58
|
+
dateSeparatorBackgroundColor: 'transparent',
|
|
47
59
|
borderRadius: borderRadiusLarge,
|
|
48
60
|
errorColor: staticRed
|
|
49
61
|
};
|
|
@@ -52,11 +64,11 @@ const chatLight = createTheme({
|
|
|
52
64
|
name: 'Chat',
|
|
53
65
|
common: commonLight,
|
|
54
66
|
peers: {
|
|
55
|
-
Input:
|
|
67
|
+
Input: chatInputLight,
|
|
56
68
|
Empty: emptyLight,
|
|
57
69
|
Select: selectLight,
|
|
58
70
|
Avatar: avatarLight,
|
|
59
|
-
Badge:
|
|
71
|
+
Badge: chatBadgeLight,
|
|
60
72
|
Button: buttonLight,
|
|
61
73
|
Icon: iconLight,
|
|
62
74
|
List: listLight,
|
package/es/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "1.8.
|
|
1
|
+
declare const _default: "1.8.1";
|
|
2
2
|
export default _default;
|
package/es/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '1.8.
|
|
1
|
+
export default '1.8.1';
|
package/lib/chat/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { default as UChat } from './src/Chat';
|
|
2
2
|
export { default as UChatListItems } from './src/ChatListItems';
|
|
3
3
|
export { default as UChatMessages } from './src/ChatMessages';
|
|
4
|
-
export type { ChatId,
|
|
4
|
+
export type { ChatId, ChatProps, ChatListItemProps, ChatMessageProps, ChatMarkProps, ChatHeaderProps, ChatFooterProps, ChatListHeaderProps, ChatSlots, ChatListItemSlots, ChatMessageSlots, ChatMarkSlots, ChatHeaderSlots, ChatFooterSlots, ChatListItemData, ChatMessageData, ChatAttachment, OnChatSelect, OnMessageSend, OnAttachmentUpload, OnFilterChange, OnLoadMoreChats, OnNetworkError, OnUploadError, OnSendError, ChatInst, ChatListInst, chatInjectionKey } from './src/interface';
|
|
5
|
+
export { MessageStatus, ChatMessageType, ChatMarkType } from './src/interface';
|
|
5
6
|
export type { ChatListItemsProps } from './src/ChatListItems';
|
|
6
7
|
export type { ChatMessagesProps } from './src/ChatMessages';
|
package/lib/chat/index.js
CHANGED
|
@@ -3,10 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.UChatMessages = exports.UChatListItems = exports.UChat = void 0;
|
|
6
|
+
exports.ChatMarkType = exports.ChatMessageType = exports.MessageStatus = exports.UChatMessages = exports.UChatListItems = exports.UChat = void 0;
|
|
7
7
|
var Chat_1 = require("./src/Chat");
|
|
8
8
|
Object.defineProperty(exports, "UChat", { enumerable: true, get: function () { return __importDefault(Chat_1).default; } });
|
|
9
9
|
var ChatListItems_1 = require("./src/ChatListItems");
|
|
10
10
|
Object.defineProperty(exports, "UChatListItems", { enumerable: true, get: function () { return __importDefault(ChatListItems_1).default; } });
|
|
11
11
|
var ChatMessages_1 = require("./src/ChatMessages");
|
|
12
12
|
Object.defineProperty(exports, "UChatMessages", { enumerable: true, get: function () { return __importDefault(ChatMessages_1).default; } });
|
|
13
|
+
var interface_1 = require("./src/interface");
|
|
14
|
+
Object.defineProperty(exports, "MessageStatus", { enumerable: true, get: function () { return interface_1.MessageStatus; } });
|
|
15
|
+
Object.defineProperty(exports, "ChatMessageType", { enumerable: true, get: function () { return interface_1.ChatMessageType; } });
|
|
16
|
+
Object.defineProperty(exports, "ChatMarkType", { enumerable: true, get: function () { return interface_1.ChatMarkType; } });
|
package/lib/chat/src/Chat.js
CHANGED
|
@@ -323,6 +323,7 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
323
323
|
const mergedUnreadNotificationTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
|
|
324
324
|
(0, vue_1.provide)(interface_1.chatInjectionKey, {
|
|
325
325
|
mergedClsPrefixRef,
|
|
326
|
+
mergedThemeRef: themeRef,
|
|
326
327
|
chatItemsRef: (0, vue_1.toRef)(props, 'chatItems'),
|
|
327
328
|
selectedChatIdRef: mergedSelectedChatIdRef,
|
|
328
329
|
selectedChatRef,
|