@uzum-tech/ui 1.8.2 → 1.9.1

package/es/chat/src/ChatParts/Sidebar.js

@@ -1,18 +1,47 @@
-import { h, defineComponent, inject, Fragment } from 'vue';
+import { h, defineComponent, inject, Fragment, ref } from 'vue';
 import { chatInjectionKey } from '../interface';
 import { UFlex } from '../../../flex';
 import { USelect } from '../../../select';
+import { UScrollbar } from '../../../scrollbar';
 import UChatListItems from '../ChatListItems';
 export default defineComponent({
     name: 'ChatSidebar',
     setup(props, { slots }) {
-        return { slots };
-    },
-    render() {
-        const { slots } = this;
-        const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect
+        const sidebarContentRef = ref();
+        const lastScrollTop = ref(0);
+        const scrollTopFired = ref(false);
+        const scrollBottomFired = ref(false);
+        const { mergedClsPrefixRef, mergedThemeRef, chatItemsRef, chatItemsLoadingRef, chatItemsLoadingCountRef, listEmptyPropsRef, selectedChatIdRef, typingChatIdsRef, typingTextRef, listItemAvatarPropsRef, listItemBadgePropsRef, notificationsShownSetRef, handleChatSelect, onChatItemsScrollToTop, onChatItemsScrollToBottom
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(chatInjectionKey);
+        const handleSidebarScroll = (e) => {
+            var _a, _b;
+            const target = e.target;
+            if (!target)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = target;
+            const threshold = 5;
+            const scrollDirection = scrollTop > lastScrollTop.value ? 'down' : 'up';
+            const nearTop = scrollTop <= threshold;
+            const nearBottom = scrollHeight - (scrollTop + clientHeight) <= threshold;
+            if (scrollTop > threshold) {
+                scrollTopFired.value = false;
+            }
+            if (scrollHeight - (scrollTop + clientHeight) > threshold) {
+                scrollBottomFired.value = false;
+            }
+            if (nearTop && scrollDirection === 'up' && !scrollTopFired.value) {
+                scrollTopFired.value = true;
+                (_a = onChatItemsScrollToTop === null || onChatItemsScrollToTop === void 0 ? void 0 : onChatItemsScrollToTop.value) === null || _a === void 0 ? void 0 : _a.call(onChatItemsScrollToTop);
+            }
+            if (nearBottom &&
+                scrollDirection === 'down' &&
+                !scrollBottomFired.value) {
+                scrollBottomFired.value = true;
+                (_b = onChatItemsScrollToBottom === null || onChatItemsScrollToBottom === void 0 ? void 0 : onChatItemsScrollToBottom.value) === null || _b === void 0 ? void 0 : _b.call(onChatItemsScrollToBottom);
+            }
+            lastScrollTop.value = scrollTop;
+        };
         const renderListHeader = () => {
             return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` },
                 h(UFlex, { align: "center", justify: "space-between", class: `${mergedClsPrefixRef.value}-chat-sidebar__header-container`, style: { width: '100%' } }, {
@@ -24,11 +53,33 @@ export default defineComponent({
                     }
                 })));
         };
-        return (h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` },
-            renderListHeader(),
-            h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` },
-                h(UChatListItems, { chatItems: chatItemsRef.value, selectedChatId: selectedChatIdRef.value, typingChatIds: typingChatIdsRef.value, typingText: typingTextRef.value, loading: chatItemsLoadingRef.value, loadingCount: chatItemsLoadingCountRef.value, emptyProps: listEmptyPropsRef.value, avatarProps: listItemAvatarPropsRef.value, badgeProps: listItemBadgePropsRef.value, notificationsShown: notificationsShownSetRef.value, onChatSelect: handleChatSelect }, {
-                    chatItemStatus: slots.chatItemStatus
-                }))));
+        return {
+            slots,
+            sidebarContentRef,
+            renderListHeader,
+            handleSidebarScroll,
+            mergedClsPrefixRef,
+            mergedThemeRef,
+            chatItemsRef,
+            chatItemsLoadingRef,
+            chatItemsLoadingCountRef,
+            listEmptyPropsRef,
+            selectedChatIdRef,
+            typingChatIdsRef,
+            typingTextRef,
+            listItemAvatarPropsRef,
+            listItemBadgePropsRef,
+            notificationsShownSetRef,
+            handleChatSelect
+        };
+    },
+    render() {
+        return (h("div", { class: `${this.mergedClsPrefixRef}-chat-sidebar` },
+            this.renderListHeader(),
+            h(UScrollbar, { ref: "sidebarContentRef", class: `${this.mergedClsPrefixRef}-chat-sidebar__content`, onScroll: this.handleSidebarScroll }, {
+                default: () => (h(UChatListItems, { chatItems: this.chatItemsRef, selectedChatId: this.selectedChatIdRef, typingChatIds: this.typingChatIdsRef, typingText: this.typingTextRef, loading: this.chatItemsLoadingRef, loadingCount: this.chatItemsLoadingCountRef, emptyProps: this.listEmptyPropsRef, avatarProps: this.listItemAvatarPropsRef, badgeProps: this.listItemBadgePropsRef, notificationsShown: this.notificationsShownSetRef, onChatSelect: this.handleChatSelect }, {
+                    chatItemStatus: this.slots.chatItemStatus
+                }))
+            })));
     }
 });

package/es/chat/src/interface.d.ts

@@ -137,6 +137,11 @@ export interface ChatProps {
     unreadCount?: number;
     headerButtonProps?: Partial<ButtonProps>;
     headerIconProps?: Partial<IconProps>;
+    headerShareButtonProps?: Partial<ButtonProps>;
+    headerProfileButtonProps?: Partial<ButtonProps>;
+    headerCloseButtonProps?: Partial<ButtonProps>;
+    headerShareIconProps?: Partial<IconProps>;
+    headerProfileIconProps?: Partial<IconProps>;
     messageSenderAvatarProps?: Partial<AvatarProps>;
     messageUploadProps?: Partial<UploadProps>;
     messageButtonProps?: Partial<ButtonProps>;
@@ -149,6 +154,8 @@ export interface ChatProps {
     retryText?: string;
     typingText?: string;
     closeButtonText?: string;
+    shareButtonTooltip?: string;
+    profileButtonTooltip?: string;
     unreadNotificationText?: string;
     chatItemsLoading?: boolean;
     chatItemsLoadingCount?: number;
@@ -159,10 +166,14 @@ export interface ChatProps {
     onMessageRetry?: (message: ChatMessageData) => void;
     onAttachmentUpload?: OnAttachmentUpload;
     onFilterChange?: OnFilterChange;
-    onLoadMoreChats?: OnLoadMoreChats;
+    onFooterInputChange?: (value: string, chatId: ChatId) => void;
     onNetworkError?: OnNetworkError;
     onUploadError?: OnUploadError;
     onSendError?: OnSendError;
+    onChatItemsScrollToTop?: () => void;
+    onChatItemsScrollToBottom?: () => void;
+    onMessagesScrollToTop?: () => void;
+    onMessagesScrollToBottom?: () => void;
 }
 export interface ChatSlots {
     header?: () => VNodeChild;
@@ -218,7 +229,6 @@ export type OnFilterChange = (filter: {
     type: string;
     value: any;
 }) => void;
-export type OnLoadMoreChats = (offset: number, limit: number) => void;
 export type OnNetworkError = (error: {
     code: string;
     message: string;
@@ -274,6 +284,8 @@ export declare const chatInjectionKey: InjectionKey<{
     retryTextRef: Ref<string>;
     typingTextRef: Ref<string>;
     closeButtonTextRef: Ref<string>;
+    shareButtonTooltipRef: Ref<string>;
+    profileButtonTooltipRef: Ref<string>;
     unreadNotificationTextRef: Ref<string>;
     notificationsShownSetRef: Ref<Set<ChatId>>;
     unreadCountsBeforeReadRef: Ref<Record<ChatId, number>>;
@@ -281,12 +293,12 @@ export declare const chatInjectionKey: InjectionKey<{
     handleChatSelect: (chatId: ChatId) => void;
     handleMessageSend: (content: string, attachments?: ChatAttachment[]) => void;
     handleMessageRetry: (message: ChatMessageData) => void;
+    handleFooterInputChange: (value: string, chatId: ChatId) => void;
     markMessagesAsRead?: (chatId: ChatId) => void;
     handleFilterChange: (filter: {
         type: string;
         value: string | number | boolean;
     }) => void;
-    handleLoadMoreChats: (offset: number, limit: number) => void;
     handleNetworkError: (error: {
         code: string;
         message: string;
@@ -302,4 +314,13 @@ export declare const chatInjectionKey: InjectionKey<{
     onChatClose?: Ref<(() => void) | undefined>;
     onChatShare?: Ref<(() => void) | undefined>;
     onUserProfile?: Ref<(() => void) | undefined>;
+    onChatItemsScrollToTop?: Ref<(() => void) | undefined>;
+    onChatItemsScrollToBottom?: Ref<(() => void) | undefined>;
+    onMessagesScrollToTop?: Ref<(() => void) | undefined>;
+    onMessagesScrollToBottom?: Ref<(() => void) | undefined>;
+    headerShareButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerProfileButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerCloseButtonPropsRef: Ref<Partial<ButtonProps> | undefined>;
+    headerShareIconPropsRef: Ref<Partial<IconProps> | undefined>;
+    headerProfileIconPropsRef: Ref<Partial<IconProps> | undefined>;
 }>;

package/es/chat/src/styles/index.cssr.js

@@ -36,11 +36,11 @@ export default cB('chat', `
  gap: 8px;
  `), cE('content', `
  flex: 1;
- overflow-y: auto;
  min-height: 0;
+ `, [c('.u-scrollbar-content', `
  padding: 16px;
  padding-top: 8px;
- `), cE('item', `
+ `)]), cE('item', `
  padding: 12px 16px;
  width: 100%;
  cursor: pointer;
@@ -162,8 +162,19 @@ export default cB('chat', `
  `), cE('header-title', `
  margin-top: 9px;
  color: var(--u-header-title-color);
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+ margin-right: 16px;
  `), cE('header-actions', `
  padding: 4px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
  `), cE('unread-notification', `
  background-color: var(--u-unread-notification-background-color);
  color: var(--u-unread-notification-text-color);

package/es/chat/styles/dark.d.ts

@@ -277,8 +277,16 @@ declare const chatDark: import("../../_mixins").Theme<"Chat", {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;

package/es/chat/styles/light.d.ts

@@ -314,8 +314,16 @@ declare const chatLight: import("../../_mixins").Theme<"Chat", {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;

package/es/components.d.ts

@@ -43,6 +43,7 @@ export * from './grid';
 export * from './icon';
 export * from './icon-wrapper';
 export * from './image';
+export * from './infinite-scroll';
 export * from './input';
 export * from './input-number';
 export * from './input-otp';
@@ -89,6 +90,7 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './virtual-list';
 export * from './watermark';
 export * from './discrete';
 export * from './equation';

package/es/components.js

@@ -43,6 +43,7 @@ export * from './grid';
 export * from './icon';
 export * from './icon-wrapper';
 export * from './image';
+export * from './infinite-scroll';
 export * from './input';
 export * from './input-number';
 export * from './input-otp';
@@ -89,6 +90,7 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './virtual-list';
 export * from './watermark';
 export * from './discrete';
 export * from './equation';

package/es/data-table/src/DataTable.d.ts

@@ -728,8 +728,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -867,8 +875,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -893,8 +909,16 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }>;
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -1652,8 +1676,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -1791,8 +1823,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -1817,8 +1857,16 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }>;
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -2576,8 +2624,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -2715,8 +2771,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -2741,8 +2805,16 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }>;
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -3523,8 +3595,16 @@ declare const _default: import("vue").DefineComponent<{
                         loadingColor: string;
                     }, {
                         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                            height: string;
+                            width: string;
+                            borderRadius: string;
                             color: string;
                             colorHover: string;
+                            railInsetHorizontalBottom: string;
+                            railInsetHorizontalTop: string;
+                            railInsetVerticalRight: string;
+                            railInsetVerticalLeft: string;
+                            railColor: string;
                         }, any>;
                         Empty: import("../../_mixins").Theme<"Empty", {
                             iconSizeSmall: string;
@@ -3662,8 +3742,16 @@ declare const _default: import("vue").DefineComponent<{
                         loadingColor: string;
                     }, {
                         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                            height: string;
+                            width: string;
+                            borderRadius: string;
                             color: string;
                             colorHover: string;
+                            railInsetHorizontalBottom: string;
+                            railInsetHorizontalTop: string;
+                            railInsetVerticalRight: string;
+                            railInsetVerticalLeft: string;
+                            railColor: string;
                         }, any>;
                         Empty: import("../../_mixins").Theme<"Empty", {
                             iconSizeSmall: string;
@@ -3688,8 +3776,16 @@ declare const _default: import("vue").DefineComponent<{
                 }>;
             }>;
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -4008,8 +4104,16 @@ declare const _default: import("vue").DefineComponent<{
                             loadingColor: string;
                         }, {
                             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                                height: string;
+                                width: string;
+                                borderRadius: string;
                                 color: string;
                                 colorHover: string;
+                                railInsetHorizontalBottom: string;
+                                railInsetHorizontalTop: string;
+                                railInsetVerticalRight: string;
+                                railInsetVerticalLeft: string;
+                                railColor: string;
                             }, any>;
                             Empty: import("../../_mixins").Theme<"Empty", {
                                 iconSizeSmall: string;
@@ -4147,8 +4251,16 @@ declare const _default: import("vue").DefineComponent<{
                             loadingColor: string;
                         }, {
                             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                                height: string;
+                                width: string;
+                                borderRadius: string;
                                 color: string;
                                 colorHover: string;
+                                railInsetHorizontalBottom: string;
+                                railInsetHorizontalTop: string;
+                                railInsetVerticalRight: string;
+                                railInsetVerticalLeft: string;
+                                railColor: string;
                             }, any>;
                             Empty: import("../../_mixins").Theme<"Empty", {
                                 iconSizeSmall: string;
@@ -5028,8 +5140,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -5167,8 +5287,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -5193,8 +5321,16 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }>;
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -5952,8 +6088,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -6091,8 +6235,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -6117,8 +6269,16 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }>;
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -6876,8 +7036,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -7015,8 +7183,16 @@ declare const _default: import("vue").DefineComponent<{
                     loadingColor: string;
                 }, {
                     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>;
                     Empty: import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -7041,8 +7217,16 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }>;
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;