@uzum-tech/ui 1.8.2 → 1.9.1

package/dist/index.js

@@ -771,6 +771,16 @@
       return /^\d+$/.test(value) ? `${value}px` : value;
     };
 
+    function rtlInset(inset) {
+      const {
+        left,
+        right,
+        top,
+        bottom
+      } = getMargin(inset);
+      return `${top} ${left} ${bottom} ${right}`;
+    }
+
     function ampCount(selector) {
       let cnt = 0;
       for (let i = 0; i < selector.length; ++i) {
@@ -3017,7 +3027,7 @@
       if (typeof selector === 'string') {
         return document.querySelector(selector);
       }
-      return selector();
+      return selector() || null;
     }
 
     var VLazyTeleport = vue.defineComponent({
@@ -3109,8 +3119,11 @@
     };
     const keepOffsetDirection = {
       top: true,
+      // top++
       bottom: false,
+      // top--
       left: true,
+      // left++
       right: false // left--
     };
     const cssPositionToOppositeAlign = {
@@ -4281,6 +4294,7 @@
 
     let maybeTouch;
     function ensureMaybeTouch() {
+      if (typeof document === 'undefined') return false;
       if (maybeTouch === undefined) {
         if ('matchMedia' in window) {
           maybeTouch = window.matchMedia('(pointer:coarse)').matches;
@@ -4292,12 +4306,139 @@
     }
     let wheelScale;
     function ensureWheelScale() {
+      if (typeof document === 'undefined') return 1;
       if (wheelScale === undefined) {
         wheelScale = 'chrome' in window ? window.devicePixelRatio : 1;
       }
       return wheelScale;
     }
 
+    const xScrollInjextionKey = 'VVirtualListXScroll';
+
+    function setupXScroll({
+      columnsRef,
+      renderColRef,
+      renderItemWithColsRef
+    }) {
+      const listWidthRef = vue.ref(0);
+      const scrollLeftRef = vue.ref(0);
+      const xFinweckTreeRef = vue.computed(() => {
+        const columns = columnsRef.value;
+        if (columns.length === 0) {
+          return null;
+        }
+        const ft = new FinweckTree(columns.length, 0);
+        columns.forEach((column, index) => {
+          ft.add(index, column.width);
+        });
+        return ft;
+      });
+      const startIndexRef = useMemo(() => {
+        const xFinweckTree = xFinweckTreeRef.value;
+        if (xFinweckTree !== null) {
+          return Math.max(xFinweckTree.getBound(scrollLeftRef.value) - 1, 0);
+        } else {
+          return 0;
+        }
+      });
+      const getLeft = index => {
+        const xFinweckTree = xFinweckTreeRef.value;
+        if (xFinweckTree !== null) {
+          return xFinweckTree.sum(index);
+        } else {
+          return 0;
+        }
+      };
+      const endIndexRef = useMemo(() => {
+        const xFinweckTree = xFinweckTreeRef.value;
+        if (xFinweckTree !== null) {
+          return Math.min(xFinweckTree.getBound(scrollLeftRef.value + listWidthRef.value) + 1, columnsRef.value.length - 1);
+        } else {
+          return 0;
+        }
+      });
+      vue.provide(xScrollInjextionKey, {
+        startIndexRef,
+        endIndexRef,
+        columnsRef,
+        renderColRef,
+        renderItemWithColsRef,
+        getLeft
+      });
+      return {
+        listWidthRef,
+        scrollLeftRef
+      };
+    }
+
+    const VirtualListRow = vue.defineComponent({
+      name: 'VirtualListRow',
+      props: {
+        index: {
+          type: Number,
+          required: true
+        },
+        item: {
+          type: Object,
+          required: true
+        }
+      },
+      setup() {
+        const {
+          startIndexRef,
+          endIndexRef,
+          columnsRef,
+          getLeft,
+          renderColRef,
+          renderItemWithColsRef
+        } =
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        vue.inject(xScrollInjextionKey);
+        return {
+          startIndex: startIndexRef,
+          endIndex: endIndexRef,
+          columns: columnsRef,
+          renderCol: renderColRef,
+          renderItemWithCols: renderItemWithColsRef,
+          getLeft
+        };
+      },
+      render() {
+        const {
+          startIndex,
+          endIndex,
+          columns,
+          renderCol,
+          renderItemWithCols,
+          getLeft,
+          item
+        } = this;
+        if (renderItemWithCols != null) {
+          return renderItemWithCols({
+            itemIndex: this.index,
+            startColIndex: startIndex,
+            endColIndex: endIndex,
+            allColumns: columns,
+            item,
+            getLeft
+          });
+        }
+        if (renderCol != null) {
+          const items = [];
+          for (let i = startIndex; i <= endIndex; ++i) {
+            const column = columns[i];
+            items.push(renderCol({
+              column,
+              left: getLeft(i),
+              item
+            }));
+          }
+          return items;
+        }
+        return null;
+      }
+    });
+
     /* eslint-disable no-void */
     /* eslint-disable @typescript-eslint/restrict-plus-operands */
     const styles$1 = c('.v-vl', {
@@ -4320,6 +4461,12 @@
           type: Boolean,
           default: true
         },
+        columns: {
+          type: Array,
+          default: () => []
+        },
+        renderCol: Function,
+        renderItemWithCols: Function,
         items: {
           type: Array,
           default: () => []
@@ -4392,7 +4539,7 @@
           // remount
           scrollTo({
             top: scrollTopRef.value,
-            left: scrollLeft
+            left: scrollLeftRef.value
           });
         });
         vue.onDeactivated(() => {
@@ -4401,6 +4548,17 @@
             activateStateInitialized = true;
           }
         });
+        const totalWidthRef = useMemo(() => {
+          if (props.renderCol == null && props.renderItemWithCols == null) {
+            return undefined;
+          }
+          if (props.columns.length === 0) return undefined;
+          let width = 0;
+          props.columns.forEach(column => {
+            width += column.width;
+          });
+          return width;
+        });
         const keyIndexMapRef = vue.computed(() => {
           const map = new Map();
           const {
@@ -4411,6 +4569,14 @@
           });
           return map;
         });
+        const {
+          scrollLeftRef,
+          listWidthRef
+        } = setupXScroll({
+          columnsRef: vue.toRef(props, 'columns'),
+          renderColRef: vue.toRef(props, 'renderCol'),
+          renderItemWithColsRef: vue.toRef(props, 'renderItemWithCols')
+        });
         const listElRef = vue.ref(null);
         const listHeightRef = vue.ref(undefined);
         const keyToHeightOffset = new Map();
@@ -4431,7 +4597,6 @@
           return ft;
         });
         const finweckTreeUpdateTrigger = vue.ref(0);
-        let scrollLeft = 0;
         const scrollTopRef = vue.ref(0);
         const startIndexRef = useMemo(() => {
           return Math.max(finweckTreeRef.value.getBound(scrollTopRef.value - depx(props.paddingTop)) - 1, 0);
@@ -4618,8 +4783,15 @@
           // List is HTMLElement
           if (isHideByVShow(entry.target)) return;
           // If height is same, return
-          if (entry.contentRect.height === listHeightRef.value) return;
+          if (props.renderCol == null && props.renderItemWithCols == null) {
+            if (entry.contentRect.height === listHeightRef.value) return;
+          } else {
+            if (entry.contentRect.height === listHeightRef.value && entry.contentRect.width === listWidthRef.value) {
+              return;
+            }
+          }
           listHeightRef.value = entry.contentRect.height;
+          listWidthRef.value = entry.contentRect.width;
           const {
             onResize
           } = props;
@@ -4633,7 +4805,7 @@
           // https://github.com/TuSimple/naive-ui/issues/811
           if (listEl == null) return;
           scrollTopRef.value = listEl.scrollTop;
-          scrollLeft = listEl.scrollLeft;
+          scrollLeftRef.value = listEl.scrollLeft;
         }
         function isHideByVShow(el) {
           let cursor = el;
@@ -4658,6 +4830,7 @@
             finweckTreeUpdateTrigger.value;
             return [props.itemsStyle, {
               boxSizing: 'content-box',
+              width: pxfy(totalWidthRef.value),
               height: itemResizable ? '' : height,
               minHeight: itemResizable ? height : '',
               paddingTop: pxfy(props.paddingTop),
@@ -4706,24 +4879,40 @@
               class: 'v-vl-visible-items',
               style: this.visibleItemsStyle
             }, this.visibleItemsProps), {
-              default: () => this.viewportItems.map(item => {
-                const key = item[keyField];
-                const index = keyToIndex.get(key);
-                const itemVNode = this.$slots.default({
-                  item,
-                  index
-                })[0];
-                if (itemResizable) {
-                  return vue.h(VResizeObserver, {
-                    key,
-                    onResize: entry => this.handleItemResize(key, entry)
-                  }, {
-                    default: () => itemVNode
-                  });
-                }
-                itemVNode.key = key;
-                return itemVNode;
-              })
+              default: () => {
+                const {
+                  renderCol,
+                  renderItemWithCols
+                } = this;
+                return this.viewportItems.map(item => {
+                  const key = item[keyField];
+                  const index = keyToIndex.get(key);
+                  const renderedCols = renderCol != null ? vue.h(VirtualListRow, {
+                    index,
+                    item
+                  }) : undefined;
+                  const renderedItemWithCols = renderItemWithCols != null ? vue.h(VirtualListRow, {
+                    index,
+                    item
+                  }) : undefined;
+                  const itemVNode = this.$slots.default({
+                    item,
+                    renderedCols,
+                    renderedItemWithCols,
+                    index
+                  })[0];
+                  if (itemResizable) {
+                    return vue.h(VResizeObserver, {
+                      key,
+                      onResize: entry => this.handleItemResize(key, entry)
+                    }, {
+                      default: () => itemVNode
+                    });
+                  }
+                  itemVNode.key = key;
+                  return itemVNode;
+                });
+              }
             })]) : (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]);
           }
         });
@@ -4790,6 +4979,7 @@
         getCounter: Function,
         getTail: Function,
         updateCounter: Function,
+        onUpdateCount: Function,
         onUpdateOverflow: Function
       },
       setup(props, {
@@ -4797,7 +4987,7 @@
       }) {
         const selfRef = vue.ref(null);
         const counterRef = vue.ref(null);
-        function deriveCounter() {
+        function deriveCounter(options) {
           const {
             value: self
           } = selfRef;
@@ -4816,6 +5006,13 @@
           const {
             children
           } = self;
+          if (options.showAllItemsBeforeCalculate) {
+            for (const child of children) {
+              if (child.hasAttribute(hiddenAttr)) {
+                child.removeAttribute(hiddenAttr);
+              }
+            }
+          }
           const containerWidth = self.offsetWidth;
           const childWidths = [];
           const tail = slots.tail ? getTail === null || getTail === void 0 ? void 0 : getTail() : null;
@@ -4862,6 +5059,10 @@
                       tail.style.maxWidth = '';
                     }
                   }
+                  const {
+                    onUpdateCount
+                  } = props;
+                  if (onUpdateCount) onUpdateCount(restCount);
                   break;
                 }
               }
@@ -4888,7 +5089,9 @@
           anchorMetaName: cssrAnchorMetaName$1,
           ssr: ssrAdapter
         });
-        vue.onMounted(deriveCounter);
+        vue.onMounted(() => deriveCounter({
+          showAllItemsBeforeCalculate: false
+        }));
         // besides onMounted, other case should be manually triggered, or we shoud watch items
         return {
           selfRef,
@@ -4901,7 +5104,9 @@
           $slots
         } = this;
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        vue.nextTick(this.sync);
+        vue.nextTick(() => this.sync({
+          showAllItemsBeforeCalculate: false
+        }));
         // It shouldn't have border
         return vue.h('div', {
           class: 'v-overflow',
@@ -4969,7 +5174,6 @@
           return !!element.href && element.rel !== 'ignore';
         case 'INPUT':
           return element.type !== 'hidden' && element.type !== 'file';
-        case 'BUTTON':
         case 'SELECT':
         case 'TEXTAREA':
           return true;
@@ -4989,8 +5193,8 @@
           default: true
         },
         onEsc: Function,
-        initialFocusTo: String,
-        finalFocusTo: String,
+        initialFocusTo: [String, Function],
+        finalFocusTo: [String, Function],
         returnFocusOnDeactivated: {
           type: Boolean,
           default: true
@@ -15202,6 +15406,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -15337,6 +15543,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -15473,6 +15681,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -15613,6 +15823,8 @@
         typingText: "\u041F\u0435\u0447\u0430\u0442\u0430\u0435\u0442...",
         retryText: "\u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C",
         closeButtonText: "\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0447\u0430\u0442",
+        shareButtonTooltip: "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F \u0447\u0430\u0442\u043E\u043C",
+        profileButtonTooltip: "\u041F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C \u043F\u0440\u043E\u0444\u0438\u043B\u044C",
         unreadNotificationText: "\u043D\u043E\u0432\u044B\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439"
       }
     };
@@ -15749,6 +15961,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -15887,6 +16101,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16025,6 +16241,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16164,6 +16382,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16299,6 +16519,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16438,6 +16660,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16575,6 +16799,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16710,6 +16936,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16849,6 +17077,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -16987,6 +17217,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -17126,6 +17358,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -17262,6 +17496,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -17400,6 +17636,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -17535,6 +17773,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -17674,6 +17914,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -17809,6 +18051,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -17945,6 +18189,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -18082,6 +18328,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -18217,6 +18465,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -18352,6 +18602,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -18487,6 +18739,8 @@
         typingText: "Typing...",
         retryText: "Resend",
         closeButtonText: "Close chat",
+        shareButtonTooltip: "Share chat",
+        profileButtonTooltip: "View profile",
         unreadNotificationText: "new messages"
       }
     };
@@ -31510,12 +31764,27 @@
       }
     });
 
+    const commonVars$8 = {
+      railInsetHorizontalBottom: "auto 2px 4px 2px",
+      railInsetHorizontalTop: "4px 2px auto 2px",
+      railInsetVerticalRight: "2px 4px 2px auto",
+      railInsetVerticalLeft: "2px auto 2px 4px",
+      railColor: "transparent"
+    };
+
     const self$1m = vars => {
       const {
         scrollbarColor,
-        scrollbarColorHover
+        scrollbarColorHover,
+        scrollbarHeight,
+        scrollbarWidth,
+        scrollbarBorderRadius
       } = vars;
       return {
+        ...commonVars$8,
+        height: scrollbarHeight,
+        width: scrollbarWidth,
+        borderRadius: scrollbarBorderRadius,
         color: scrollbarColor,
         colorHover: scrollbarColorHover
       };
@@ -31585,50 +31854,60 @@
         width: 0;
         height: 0;
         display: none;
-      `), c$1(">", [cB("scrollbar-content", `
+      `), c$1(">", [
+    // We can't set overflow hidden since it affects positioning.
+    cB("scrollbar-content", `
           box-sizing: border-box;
           min-width: 100%;
         `)])])]), c$1(">, +", [cB("scrollbar-rail", `
       position: absolute;
       pointer-events: none;
       user-select: none;
+      background: var(--u-scrollbar-rail-color);
       -webkit-user-select: none;
     `, [cM("horizontal", `
-        left: 2px;
-        right: 2px;
-        bottom: 4px;
         height: var(--u-scrollbar-height);
       `, [c$1(">", [cE("scrollbar", `
             height: var(--u-scrollbar-height);
             border-radius: var(--u-scrollbar-border-radius);
             right: 0;
-          `)])]), cM("vertical", `
-        right: 4px;
-        top: 2px;
-        bottom: 2px;
+          `)])]), cM("horizontal--top", `
+        top: var(--u-scrollbar-rail-top-horizontal-top);  
+        right: var(--u-scrollbar-rail-right-horizontal-top);  
+        bottom: var(--u-scrollbar-rail-bottom-horizontal-top);  
+        left: var(--u-scrollbar-rail-left-horizontal-top);  
+      `), cM("horizontal--bottom", `
+        top: var(--u-scrollbar-rail-top-horizontal-bottom);  
+        right: var(--u-scrollbar-rail-right-horizontal-bottom);  
+        bottom: var(--u-scrollbar-rail-bottom-horizontal-bottom);  
+        left: var(--u-scrollbar-rail-left-horizontal-bottom);  
+      `), cM("vertical", `
         width: var(--u-scrollbar-width);
       `, [c$1(">", [cE("scrollbar", `
             width: var(--u-scrollbar-width);
             border-radius: var(--u-scrollbar-border-radius);
             bottom: 0;
-          `)])]), cM("disabled", [c$1(">", [cE("scrollbar", {
-      pointerEvents: "none"
-    })])]), c$1(">", [cE("scrollbar", `
+          `)])]), cM("vertical--left", `
+        top: var(--u-scrollbar-rail-top-vertical-left);  
+        right: var(--u-scrollbar-rail-right-vertical-left);  
+        bottom: var(--u-scrollbar-rail-bottom-vertical-left);  
+        left: var(--u-scrollbar-rail-left-vertical-left);  
+      `), cM("vertical--right", `
+        top: var(--u-scrollbar-rail-top-vertical-right);  
+        right: var(--u-scrollbar-rail-right-vertical-right);  
+        bottom: var(--u-scrollbar-rail-bottom-vertical-right);  
+        left: var(--u-scrollbar-rail-left-vertical-right);  
+      `), cM("disabled", [c$1(">", [cE("scrollbar", "pointer-events: none;")])]), c$1(">", [cE("scrollbar", `
+          z-index: 1;
           position: absolute;
           cursor: pointer;
           pointer-events: all;
           background-color: var(--u-scrollbar-color);
           transition: background-color .2s var(--u-scrollbar-bezier);
-        `, [fadeInTransition(), c$1("&:hover", {
-      backgroundColor: "var(--u-scrollbar-color-hover)"
-    })])])])])]);
+        `, [fadeInTransition(), c$1("&:hover", "background-color: var(--u-scrollbar-color-hover);")])])])])]);
 
     const scrollbarProps$1 = {
       ...useTheme.props,
-      size: {
-        type: Number,
-        default: 5
-      },
       duration: {
         type: Number,
         default: 0
@@ -31649,7 +31928,7 @@
       content: Function,
       containerClass: String,
       containerStyle: [String, Object],
-      contentClass: String,
+      contentClass: [String, Array],
       contentStyle: [String, Object],
       horizontalRailStyle: [String, Object],
       verticalRailStyle: [String, Object],
@@ -31657,7 +31936,15 @@
       onWheel: Function,
       onResize: Function,
       internalOnUpdateScrollLeft: Function,
-      internalHoistYRail: Boolean
+      internalHoistYRail: Boolean,
+      yPlacement: {
+        type: String,
+        default: "right"
+      },
+      xPlacement: {
+        type: String,
+        default: "bottom"
+      }
     };
     const Scrollbar$1 = vue.defineComponent({
       name: "Scrollbar",
@@ -31690,6 +31977,14 @@
         let memoMouseX = 0;
         let memoMouseY = 0;
         const isIos = useIsIos();
+        const themeRef = useTheme(
+          "Scrollbar",
+          "-scrollbar",
+          style$1C,
+          scrollbarLight,
+          props,
+          mergedClsPrefixRef
+        );
         const yBarSizeRef = vue.computed(() => {
           const { value: containerHeight } = containerHeightRef;
           const { value: contentHeight } = contentHeightRef;
@@ -31699,7 +31994,7 @@
           } else {
             return Math.min(
               containerHeight,
-              yRailSize * containerHeight / contentHeight + props.size * 1.5
+              yRailSize * containerHeight / contentHeight + depx(themeRef.value.self.width) * 1.5
             );
           }
         });
@@ -31713,7 +32008,7 @@
           if (containerWidth === null || contentWidth === null || xRailSize === null) {
             return 0;
           } else {
-            return xRailSize * containerWidth / contentWidth + props.size * 1.5;
+            return xRailSize * containerWidth / contentWidth + depx(themeRef.value.self.height) * 1.5;
           }
         });
         const xBarSizePxRef = vue.computed(() => {
@@ -31728,7 +32023,9 @@
             return 0;
           } else {
             const heightDiff = contentHeight - containerHeight;
-            if (!heightDiff) return 0;
+            if (!heightDiff) {
+              return 0;
+            }
             return containerScrollTop / heightDiff * (yRailSize - yBarSizeRef.value);
           }
         });
@@ -31744,7 +32041,9 @@
             return 0;
           } else {
             const widthDiff = contentWidth - containerWidth;
-            if (!widthDiff) return 0;
+            if (!widthDiff) {
+              return 0;
+            }
             return containerScrollLeft / widthDiff * (xRailSize - xBarSizeRef.value);
           }
         });
@@ -31771,34 +32070,22 @@
         });
         const mergedContainerRef = vue.computed(() => {
           const { container } = props;
-          if (container) return container();
+          if (container) {
+            return container();
+          }
           return containerRef.value;
         });
         const mergedContentRef = vue.computed(() => {
           const { content } = props;
-          if (content) return content();
-          return contentRef.value;
-        });
-        const activateState = useReactivated(() => {
-          if (!props.container) {
-            scrollTo({
-              top: containerScrollTopRef.value,
-              left: containerScrollLeftRef.value
-            });
+          if (content) {
+            return content();
           }
+          return contentRef.value;
         });
-        const handleContentResize = () => {
-          if (activateState.isDeactivated) return;
-          sync();
-        };
-        const handleContainerResize = (e) => {
-          if (activateState.isDeactivated) return;
-          const { onResize } = props;
-          if (onResize) onResize(e);
-          sync();
-        };
         const scrollTo = (options, y) => {
-          if (!props.scrollable) return;
+          if (!props.scrollable) {
+            return;
+          }
           if (typeof options === "number") {
             scrollToPosition(options, y ?? 0, 0, false, "auto");
             return;
@@ -31826,10 +32113,38 @@
             scrollToPosition(0, 0, 0, false, behavior);
           }
         };
+        const activateState = useReactivated(() => {
+          if (!props.container) {
+            scrollTo({
+              top: containerScrollTopRef.value,
+              left: containerScrollLeftRef.value
+            });
+          }
+        });
+        const handleContentResize = () => {
+          if (activateState.isDeactivated) {
+            return;
+          }
+          sync();
+        };
+        const handleContainerResize = (e) => {
+          if (activateState.isDeactivated) {
+            return;
+          }
+          const { onResize } = props;
+          if (onResize) {
+            onResize(e);
+          }
+          sync();
+        };
         const scrollBy = (options, y) => {
-          if (!props.scrollable) return;
+          if (!props.scrollable) {
+            return;
+          }
           const { value: container } = mergedContainerRef;
-          if (!container) return;
+          if (!container) {
+            return;
+          }
           if (typeof options === "object") {
             container.scrollBy(options);
           } else {
@@ -31838,7 +32153,9 @@
         };
         function scrollToPosition(left, top, elSize, debounce, behavior) {
           const { value: container } = mergedContainerRef;
-          if (!container) return;
+          if (!container) {
+            return;
+          }
           if (debounce) {
             const { scrollTop, offsetHeight } = container;
             if (top > scrollTop) {
@@ -31900,7 +32217,9 @@
         }
         function handleScroll(e) {
           const { onScroll } = props;
-          if (onScroll) onScroll(e);
+          if (onScroll) {
+            onScroll(e);
+          }
           syncScrollState();
         }
         function syncScrollState() {
@@ -31950,7 +32269,9 @@
           }
         }
         function sync() {
-          if (!props.scrollable) return;
+          if (!props.scrollable) {
+            return;
+          }
           if (props.useUnifiedContainer) {
             syncUnifiedContainer();
           } else {
@@ -31973,7 +32294,9 @@
           memoMouseX = rtlEnabledRef?.value ? window.innerWidth - e.clientX : e.clientX;
         }
         function handleXScrollMouseMove(e) {
-          if (!xBarPressed) return;
+          if (!xBarPressed) {
+            return;
+          }
           if (xBarVanishTimerId !== void 0) {
             window.clearTimeout(xBarVanishTimerId);
           }
@@ -31983,7 +32306,9 @@
           const { value: containerWidth } = containerWidthRef;
           const { value: contentWidth } = contentWidthRef;
           const { value: xBarSize } = xBarSizeRef;
-          if (containerWidth === null || contentWidth === null) return;
+          if (containerWidth === null || contentWidth === null) {
+            return;
+          }
           const dX = rtlEnabledRef?.value ? window.innerWidth - e.clientX - memoMouseX : e.clientX - memoMouseX;
           const dScrollLeft = dX * (contentWidth - containerWidth) / (containerWidth - xBarSize);
           const toScrollLeftUpperBound = contentWidth - containerWidth;
@@ -31994,7 +32319,9 @@
           if (container) {
             container.scrollLeft = toScrollLeft * (rtlEnabledRef?.value ? -1 : 1);
             const { internalOnUpdateScrollLeft } = props;
-            if (internalOnUpdateScrollLeft) internalOnUpdateScrollLeft(toScrollLeft);
+            if (internalOnUpdateScrollLeft) {
+              internalOnUpdateScrollLeft(toScrollLeft);
+            }
           }
         }
         function handleXScrollMouseUp(e) {
@@ -32018,7 +32345,9 @@
           memoMouseY = e.clientY;
         }
         function handleYScrollMouseMove(e) {
-          if (!yBarPressed) return;
+          if (!yBarPressed) {
+            return;
+          }
           if (xBarVanishTimerId !== void 0) {
             window.clearTimeout(xBarVanishTimerId);
           }
@@ -32028,7 +32357,9 @@
           const { value: containerHeight } = containerHeightRef;
           const { value: contentHeight } = contentHeightRef;
           const { value: yBarSize } = yBarSizeRef;
-          if (containerHeight === null || contentHeight === null) return;
+          if (containerHeight === null || contentHeight === null) {
+            return;
+          }
           const dY = e.clientY - memoMouseY;
           const dScrollTop = dY * (contentHeight - containerHeight) / (containerHeight - yBarSize);
           const toScrollTopUpperBound = contentHeight - containerHeight;
@@ -32077,7 +32408,9 @@
           }
         });
         vue.onMounted(() => {
-          if (props.container) return;
+          if (props.container) {
+            return;
+          }
           sync();
         });
         vue.onBeforeUnmount(() => {
@@ -32090,31 +32423,74 @@
           off("mousemove", window, handleYScrollMouseMove, true);
           off("mouseup", window, handleYScrollMouseUp, true);
         });
-        const themeRef = useTheme(
-          "Scrollbar",
-          "-scrollbar",
-          style$1C,
-          scrollbarLight,
-          props,
-          mergedClsPrefixRef
-        );
         const cssVarsRef = vue.computed(() => {
           const {
-            common: {
-              cubicBezierEaseInOut,
-              scrollbarBorderRadius,
-              scrollbarHeight,
-              scrollbarWidth
-            },
-            self: { color, colorHover }
+            common: { cubicBezierEaseInOut },
+            self: {
+              color,
+              colorHover,
+              height,
+              width,
+              borderRadius,
+              railInsetHorizontalTop,
+              railInsetHorizontalBottom,
+              railInsetVerticalRight,
+              railInsetVerticalLeft,
+              railColor
+            }
           } = themeRef.value;
+          const {
+            top: railTopHorizontalTop,
+            right: railRightHorizontalTop,
+            bottom: railBottomHorizontalTop,
+            left: railLeftHorizontalTop
+          } = getMargin(railInsetHorizontalTop);
+          const {
+            top: railTopHorizontalBottom,
+            right: railRightHorizontalBottom,
+            bottom: railBottomHorizontalBottom,
+            left: railLeftHorizontalBottom
+          } = getMargin(railInsetHorizontalBottom);
+          const {
+            top: railTopVerticalRight,
+            right: railRightVerticalRight,
+            bottom: railBottomVerticalRight,
+            left: railLeftVerticalRight
+          } = getMargin(
+            rtlEnabledRef?.value ? rtlInset(railInsetVerticalRight) : railInsetVerticalRight
+          );
+          const {
+            top: railTopVerticalLeft,
+            right: railRightVerticalLeft,
+            bottom: railBottomVerticalLeft,
+            left: railLeftVerticalLeft
+          } = getMargin(
+            rtlEnabledRef?.value ? rtlInset(railInsetVerticalLeft) : railInsetVerticalLeft
+          );
           return {
             "--u-scrollbar-bezier": cubicBezierEaseInOut,
             "--u-scrollbar-color": color,
             "--u-scrollbar-color-hover": colorHover,
-            "--u-scrollbar-border-radius": scrollbarBorderRadius,
-            "--u-scrollbar-width": scrollbarWidth,
-            "--u-scrollbar-height": scrollbarHeight
+            "--u-scrollbar-border-radius": borderRadius,
+            "--u-scrollbar-width": width,
+            "--u-scrollbar-height": height,
+            "--u-scrollbar-rail-top-horizontal-top": railTopHorizontalTop,
+            "--u-scrollbar-rail-right-horizontal-top": railRightHorizontalTop,
+            "--u-scrollbar-rail-bottom-horizontal-top": railBottomHorizontalTop,
+            "--u-scrollbar-rail-left-horizontal-top": railLeftHorizontalTop,
+            "--u-scrollbar-rail-top-horizontal-bottom": railTopHorizontalBottom,
+            "--u-scrollbar-rail-right-horizontal-bottom": railRightHorizontalBottom,
+            "--u-scrollbar-rail-bottom-horizontal-bottom": railBottomHorizontalBottom,
+            "--u-scrollbar-rail-left-horizontal-bottom": railLeftHorizontalBottom,
+            "--u-scrollbar-rail-top-vertical-right": railTopVerticalRight,
+            "--u-scrollbar-rail-right-vertical-right": railRightVerticalRight,
+            "--u-scrollbar-rail-bottom-vertical-right": railBottomVerticalRight,
+            "--u-scrollbar-rail-left-vertical-right": railLeftVerticalRight,
+            "--u-scrollbar-rail-top-vertical-left": railTopVerticalLeft,
+            "--u-scrollbar-rail-right-vertical-left": railRightVerticalLeft,
+            "--u-scrollbar-rail-bottom-vertical-left": railBottomVerticalLeft,
+            "--u-scrollbar-rail-left-vertical-left": railLeftVerticalLeft,
+            "--u-scrollbar-rail-color": railColor
           };
         });
         const themeClassHandle = inlineThemeDisabled ? useThemeClass("scrollbar", void 0, cssVarsRef, props) : void 0;
@@ -32161,22 +32537,29 @@
           mergedClsPrefix,
           triggerDisplayManually,
           rtlEnabled,
-          internalHoistYRail
+          internalHoistYRail,
+          yPlacement,
+          xPlacement,
+          xScrollable
         } = this;
-        if (!this.scrollable) return $slots.default?.();
+        if (!this.scrollable) {
+          return $slots.default?.();
+        }
         const triggerIsNone = this.trigger === "none";
-        const createYRail = (style2) => {
+        const createYRail = (className, style2) => {
           return /* @__PURE__ */ vue.h(
             "div",
             {
               ref: "yRailRef",
               class: [
                 `${mergedClsPrefix}-scrollbar-rail`,
-                `${mergedClsPrefix}-scrollbar-rail--vertical`
+                `${mergedClsPrefix}-scrollbar-rail--vertical`,
+                `${mergedClsPrefix}-scrollbar-rail--vertical--${yPlacement}`,
+                className
               ],
               "data-scrollbar-rail": true,
               style: [style2 || "", this.verticalRailStyle],
-              "aria-hiddens": true
+              "aria-hidden": true
             },
             vue.h(
               triggerIsNone ? Wrapper : vue.Transition,
@@ -32248,14 +32631,15 @@
                   )
                 })
               ),
-              internalHoistYRail ? null : createYRail(void 0),
-              this.xScrollable && /* @__PURE__ */ vue.h(
+              internalHoistYRail ? null : createYRail(void 0, void 0),
+              xScrollable && /* @__PURE__ */ vue.h(
                 "div",
                 {
                   ref: "xRailRef",
                   class: [
                     `${mergedClsPrefix}-scrollbar-rail`,
-                    `${mergedClsPrefix}-scrollbar-rail--horizontal`
+                    `${mergedClsPrefix}-scrollbar-rail--horizontal`,
+                    `${mergedClsPrefix}-scrollbar-rail--horizontal--${xPlacement}`
                   ],
                   style: this.horizontalRailStyle,
                   "data-scrollbar-rail": true,
@@ -32287,7 +32671,7 @@
           default: createChildren
         });
         if (internalHoistYRail) {
-          return /* @__PURE__ */ vue.h(vue.Fragment, null, scrollbarNode, createYRail(this.cssVars));
+          return /* @__PURE__ */ vue.h(vue.Fragment, null, scrollbarNode, createYRail(this.themeClass, this.cssVars));
         } else {
           return scrollbarNode;
         }
@@ -35786,7 +36170,9 @@
             if (patternInputEl) {
               patternInputEl.style.width = `${patternInputMirrorEl.offsetWidth}px`;
               if (props.maxTagCount !== "responsive") {
-                overflowRef.value?.sync();
+                overflowRef.value?.sync({
+                  showAllItemsBeforeCalculate: false
+                });
               }
             }
           }
@@ -39739,7 +40125,8 @@
         Input: inputLight,
         Button: buttonLight,
         TimePicker: timePickerLight,
-        Scrollbar: scrollbarLight
+        Scrollbar: scrollbarLight,
+        Select: internalSelectionLight
       },
       self: self$Q
     });
@@ -39751,7 +40138,8 @@
         Input: inputDark,
         Button: buttonDark,
         TimePicker: timePickerDark,
-        Scrollbar: scrollbarDark
+        Scrollbar: scrollbarDark,
+        Select: internalSelectionDark
       },
       self: self$Q
     };
@@ -59115,6 +59503,36 @@
       }
     });
 
+    const scrollbarProps = {
+      ...useTheme.props,
+      trigger: String,
+      xScrollable: Boolean,
+      onScroll: Function,
+      size: Number
+    };
+    const Scrollbar = vue.defineComponent({
+      name: "Scrollbar",
+      props: scrollbarProps,
+      setup() {
+        const scrollbarInstRef = vue.ref(null);
+        const exposedMethods = {
+          scrollTo: (...args) => {
+            scrollbarInstRef.value?.scrollTo(args[0], args[1]);
+          },
+          scrollBy: (...args) => {
+            scrollbarInstRef.value?.scrollBy(args[0], args[1]);
+          }
+        };
+        return {
+          ...exposedMethods,
+          scrollbarInstRef
+        };
+      },
+      render() {
+        return /* @__PURE__ */ vue.h(Scrollbar$1, { ref: "scrollbarInstRef", ...this.$props }, this.$slots);
+      }
+    });
+
     var style$13 = c$1([cB("align-start", `
     align-self: self-start;
   `), cB("align-center", `
@@ -59802,11 +60220,11 @@
       gap: 8px;
     `), cE("content", `
       flex: 1;
-      overflow-y: auto;
       min-height: 0;
-      padding: 16px;
-      padding-top: 8px;
-    `), cE("item", `
+    `, [c$1(".u-scrollbar-content", `
+        padding: 16px;
+        padding-top: 8px;
+      `)]), cE("item", `
        padding: 12px 16px;
        width: 100%;
        cursor: pointer;
@@ -59928,8 +60346,19 @@
           `), 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);
@@ -60564,10 +60993,10 @@
     var ChatSidebar = vue.defineComponent({
       name: "ChatSidebar",
       setup(props, { slots }) {
-        return { slots };
-      },
-      render() {
-        const { slots } = this;
+        const sidebarContentRef = vue.ref();
+        const lastScrollTop = vue.ref(0);
+        const scrollTopFired = vue.ref(false);
+        const scrollBottomFired = vue.ref(false);
         const {
           mergedClsPrefixRef,
           mergedThemeRef,
@@ -60581,9 +61010,35 @@
           listItemAvatarPropsRef,
           listItemBadgePropsRef,
           notificationsShownSetRef,
-          handleChatSelect
+          handleChatSelect,
+          onChatItemsScrollToTop,
+          onChatItemsScrollToBottom
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         } = vue.inject(chatInjectionKey);
+        const handleSidebarScroll = (e) => {
+          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;
+            onChatItemsScrollToTop?.value?.();
+          }
+          if (nearBottom && scrollDirection === "down" && !scrollBottomFired.value) {
+            scrollBottomFired.value = true;
+            onChatItemsScrollToBottom?.value?.();
+          }
+          lastScrollTop.value = scrollTop;
+        };
         const renderListHeader = () => {
           return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` }, /* @__PURE__ */ vue.h(
             UFlex,
@@ -60618,55 +61073,56 @@
             }
           ));
         };
-        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` }, renderListHeader(), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` }, /* @__PURE__ */ vue.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
-          }
-        )));
-      }
-    });
-
-    const scrollbarProps = {
-      ...useTheme.props,
-      trigger: String,
-      xScrollable: Boolean,
-      onScroll: Function,
-      size: Number
-    };
-    const Scrollbar = vue.defineComponent({
-      name: "Scrollbar",
-      props: scrollbarProps,
-      setup() {
-        const scrollbarInstRef = vue.ref(null);
-        const exposedMethods = {
-          scrollTo: (...args) => {
-            scrollbarInstRef.value?.scrollTo(args[0], args[1]);
-          },
-          scrollBy: (...args) => {
-            scrollbarInstRef.value?.scrollBy(args[0], args[1]);
-          }
-        };
         return {
-          ...exposedMethods,
-          scrollbarInstRef
+          slots,
+          sidebarContentRef,
+          renderListHeader,
+          handleSidebarScroll,
+          mergedClsPrefixRef,
+          mergedThemeRef,
+          chatItemsRef,
+          chatItemsLoadingRef,
+          chatItemsLoadingCountRef,
+          listEmptyPropsRef,
+          selectedChatIdRef,
+          typingChatIdsRef,
+          typingTextRef,
+          listItemAvatarPropsRef,
+          listItemBadgePropsRef,
+          notificationsShownSetRef,
+          handleChatSelect
         };
       },
       render() {
-        return /* @__PURE__ */ vue.h(Scrollbar$1, { ref: "scrollbarInstRef", ...this.$props }, this.$slots);
+        return /* @__PURE__ */ vue.h("div", { class: `${this.mergedClsPrefixRef}-chat-sidebar` }, this.renderListHeader(), /* @__PURE__ */ vue.h(
+          Scrollbar,
+          {
+            ref: "sidebarContentRef",
+            class: `${this.mergedClsPrefixRef}-chat-sidebar__content`,
+            onScroll: this.handleSidebarScroll
+          },
+          {
+            default: () => /* @__PURE__ */ vue.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
+              }
+            )
+          }
+        ));
       }
     });
 
@@ -64425,22 +64881,22 @@
         }
       },
       setup(props, { slots }) {
-        const getThumbnailUrl = (att) => {
-          const url = [att.preview, att.thumbnail].find(
+        const getThumbnailUrl = (attachment) => {
+          const url = [attachment.preview, attachment.thumbnail].find(
             (value) => typeof value === "string"
           );
           return url ?? null;
         };
         const renderAttachment = () => {
           const fileList = props.attachments.map(
-            (att, index) => ({
+            (attachment, index) => ({
               id: `${String(props.message.id)}-attachment-${index}`,
-              name: att.name,
-              status: att.status || "finished",
-              percentage: att.percentage ?? null,
-              url: att.url ?? null,
-              thumbnailUrl: getThumbnailUrl(att),
-              type: att.type ?? null,
+              name: attachment.name,
+              status: attachment.status || "finished",
+              percentage: attachment.percentage ?? null,
+              url: attachment.url ?? null,
+              thumbnailUrl: getThumbnailUrl(attachment),
+              type: attachment.type ?? null,
               file: null,
               batchId: null
             })
@@ -64458,10 +64914,10 @@
               } : void 0,
               showRemoveButton: false,
               showDownloadButton: props.attachments.some(
-                (att) => att.status === "finished"
+                (attachment) => attachment.status === "finished" && attachment.url && attachment.url !== "#"
               ),
               showRetryButton: props.attachments.some(
-                (att) => att.status === "error"
+                (attachment) => attachment.status === "error"
               ),
               ...props.uploadProps
             },
@@ -64469,10 +64925,10 @@
               default: () => /* @__PURE__ */ vue.h(UUploadFileList, null, {
                 "upload-file-title": slots["upload-file-title"] ? ({ file }) => slots["upload-file-title"]?.(file) : void 0,
                 "upload-file-subtitle": slots["upload-file-subtitle"] ? ({ file }) => slots["upload-file-subtitle"]?.(file) : ({ file }) => {
-                  const att = props.attachments.find(
-                    (a) => a.name === file.name
+                  const attachment = props.attachments.find(
+                    (attachment2) => attachment2.name === file.name
                   );
-                  return /* @__PURE__ */ vue.h("span", { style: { fontSize: "12px", color: "#999" } }, att?.size || file.file?.size);
+                  return /* @__PURE__ */ vue.h("span", { style: { fontSize: "12px", color: "#999" } }, attachment?.size || file.file?.size);
                 }
               })
             }
@@ -65005,7 +65461,6 @@
       }
     });
 
-    const SCROLL_DELAY = 50;
     const SENDING_DELAY = 100;
     var ChatMainArea = vue.defineComponent({
       name: "ChatMainArea",
@@ -65020,6 +65475,11 @@
           messagesLoadingCountRef,
           headerButtonPropsRef,
           headerIconPropsRef,
+          headerShareButtonPropsRef,
+          headerProfileButtonPropsRef,
+          headerCloseButtonPropsRef,
+          headerShareIconPropsRef,
+          headerProfileIconPropsRef,
           messageUploadPropsRef,
           footerInputPropsRef,
           footerButtonPropsRef,
@@ -65029,21 +65489,29 @@
           retryTextRef,
           typingTextRef,
           closeButtonTextRef,
+          shareButtonTooltipRef,
+          profileButtonTooltipRef,
           unreadNotificationTextRef,
           notificationsShownSetRef,
           unreadCountsBeforeReadRef,
           markNotificationShown,
           handleMessageSend,
           handleMessageRetry,
+          handleFooterInputChange,
           onChatClose,
           onChatShare,
-          onUserProfile
+          onUserProfile,
+          onMessagesScrollToTop,
+          onMessagesScrollToBottom
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         } = vue.inject(chatInjectionKey);
         const messagesBodyRef = vue.ref();
         const inputRef = vue.ref();
         const inputValue = vue.ref("");
         const attachmentFileList = vue.ref([]);
+        const lastScrollTop = vue.ref(0);
+        const scrollTopFired = vue.ref(false);
+        const scrollBottomFired = vue.ref(false);
         const unreadMessagesCount = vue.computed(() => {
           if (!messagesRef.value) return 0;
           return messagesRef.value.filter(
@@ -65055,6 +65523,7 @@
         const unreadCountOnOpen = vue.ref(0);
         const chatInputs = vue.ref({});
         const lastMessageId = vue.ref(null);
+        const shouldScrollOnLoad = vue.ref(false);
         vue.watch(
           selectedChatRef,
           (newChat, oldChat) => {
@@ -65063,6 +65532,10 @@
               const unreadBeforeRead = unreadCountsBeforeReadRef.value[newChat.id] || 0;
               unreadCountOnOpen.value = unreadBeforeRead;
               lastMessageId.value = null;
+              lastScrollTop.value = 0;
+              scrollTopFired.value = false;
+              scrollBottomFired.value = false;
+              shouldScrollOnLoad.value = true;
               if (unreadBeforeRead > 0 && !notificationsShownSetRef.value.has(newChat.id)) {
                 hasUnreadMessages.value = true;
                 showNotificationManually.value = true;
@@ -65071,12 +65544,6 @@
                 hasUnreadMessages.value = false;
                 showNotificationManually.value = false;
               }
-              void vue.nextTick(() => {
-                scrollToBottom();
-              });
-              setTimeout(() => {
-                scrollToBottom();
-              }, SCROLL_DELAY);
             }
           },
           { immediate: true }
@@ -65090,16 +65557,15 @@
             }
             const currentLastMessage = newMessages[newMessages.length - 1];
             const currentLastId = currentLastMessage?.id;
-            if (currentLastId !== lastMessageId.value && lastMessageId.value !== null) {
+            const hasLastMessageChanged = currentLastId !== lastMessageId.value;
+            if (hasLastMessageChanged && currentLastMessage && !currentLastMessage.isOwn && currentLastMessage.status === MessageStatus.UNREAD) {
+              unreadCountOnOpen.value = unreadMessagesCount.value;
+            }
+            if (shouldScrollOnLoad.value && newMessages.length > 0) {
+              shouldScrollOnLoad.value = false;
               void vue.nextTick(() => {
                 scrollToBottom();
               });
-              setTimeout(() => {
-                scrollToBottom();
-              }, SCROLL_DELAY);
-              if (currentLastMessage && !currentLastMessage.isOwn && currentLastMessage.status === MessageStatus.UNREAD) {
-                unreadCountOnOpen.value = unreadMessagesCount.value;
-              }
             }
             lastMessageId.value = currentLastId ?? null;
           },
@@ -65114,17 +65580,38 @@
             notificationsShownSetRef.value = newSet;
           }
         });
+        vue.watch(inputValue, (newValue) => {
+          if (selectedChatRef.value) {
+            handleFooterInputChange(newValue, selectedChatRef.value.id);
+          }
+        });
         const showUnreadNotification = vue.computed(() => {
           return hasUnreadMessages.value && showNotificationManually.value;
         });
-        vue.onMounted(() => {
-          void vue.nextTick(() => {
-            scrollToBottom();
-          });
-          setTimeout(() => {
-            scrollToBottom();
-          }, SCROLL_DELAY);
-        });
+        const handleMessagesScroll = (e) => {
+          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;
+            onMessagesScrollToTop?.value?.();
+          }
+          if (nearBottom && scrollDirection === "down" && !scrollBottomFired.value) {
+            scrollBottomFired.value = true;
+            onMessagesScrollToBottom?.value?.();
+          }
+          lastScrollTop.value = scrollTop;
+        };
         const scrollToBottom = () => {
           const el = messagesBodyRef.value;
           if (!el) return;
@@ -65144,7 +65631,7 @@
           }
         };
         const renderHeader = () => {
-          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h(UFlex, { justify: "space-between", align: "flex-start" }, {
+          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h(UFlex, { justify: "space-between", align: "flex-start", wrap: false }, {
             default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
               UText,
               {
@@ -65154,7 +65641,7 @@
                 themeOverrides: mergedThemeRef.value.peerOverrides.Typography
               },
               {
-                default: () => selectedChatRef.value?.title || "Select a chat"
+                default: () => selectedChatRef.value?.title ?? ""
               }
             ), /* @__PURE__ */ vue.h(
               UFlex,
@@ -65164,75 +65651,115 @@
                 class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
               },
               {
-                default: () => resolveSlot(slots.headerActions, () => [
-                  /* @__PURE__ */ vue.h(
-                    Button,
-                    {
-                      secondary: true,
-                      circle: true,
-                      size: "large",
-                      ...headerButtonPropsRef.value,
-                      theme: mergedThemeRef.value.peers.Button,
-                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                      onClick: () => onChatShare?.value?.()
-                    },
-                    {
-                      default: () => /* @__PURE__ */ vue.h(
-                        UIcon,
-                        {
-                          size: 20,
-                          ...headerIconPropsRef.value,
-                          theme: mergedThemeRef.value.peers.Icon,
-                          themeOverrides: mergedThemeRef.value.peerOverrides.Icon
-                        },
-                        {
-                          default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ vue.h(
-                    Button,
-                    {
-                      secondary: true,
-                      circle: true,
-                      size: "large",
-                      ...headerButtonPropsRef.value,
-                      theme: mergedThemeRef.value.peers.Button,
-                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                      onClick: () => onUserProfile?.value?.()
-                    },
-                    {
-                      default: () => /* @__PURE__ */ vue.h(
-                        UIcon,
+                default: () => resolveSlot(slots.headerActions, () => {
+                  const shareButtonProps = {
+                    ...headerButtonPropsRef.value,
+                    ...headerShareButtonPropsRef.value
+                  };
+                  const profileButtonProps = {
+                    ...headerButtonPropsRef.value,
+                    ...headerProfileButtonPropsRef.value
+                  };
+                  const closeButtonProps = {
+                    ...headerButtonPropsRef.value,
+                    ...headerCloseButtonPropsRef.value
+                  };
+                  const shareIconProps = {
+                    ...headerIconPropsRef.value,
+                    ...headerShareIconPropsRef.value
+                  };
+                  const profileIconProps = {
+                    ...headerIconPropsRef.value,
+                    ...headerProfileIconPropsRef.value
+                  };
+                  const buttons = [];
+                  if (shareButtonProps.disabled !== true) {
+                    buttons.push(
+                      /* @__PURE__ */ vue.h(UTooltip, null, {
+                        trigger: () => /* @__PURE__ */ vue.h(
+                          Button,
+                          {
+                            secondary: true,
+                            circle: true,
+                            size: "large",
+                            ...shareButtonProps,
+                            theme: mergedThemeRef.value.peers.Button,
+                            themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                            onClick: () => onChatShare?.value?.()
+                          },
+                          {
+                            default: () => /* @__PURE__ */ vue.h(
+                              UIcon,
+                              {
+                                size: 20,
+                                ...shareIconProps,
+                                theme: mergedThemeRef.value.peers.Icon,
+                                themeOverrides: mergedThemeRef.value.peerOverrides.Icon
+                              },
+                              {
+                                default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
+                              }
+                            )
+                          }
+                        ),
+                        default: () => shareButtonTooltipRef.value
+                      })
+                    );
+                  }
+                  if (profileButtonProps.disabled !== true) {
+                    buttons.push(
+                      /* @__PURE__ */ vue.h(UTooltip, null, {
+                        trigger: () => /* @__PURE__ */ vue.h(
+                          Button,
+                          {
+                            secondary: true,
+                            circle: true,
+                            size: "large",
+                            ...profileButtonProps,
+                            theme: mergedThemeRef.value.peers.Button,
+                            themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                            onClick: () => onUserProfile?.value?.()
+                          },
+                          {
+                            default: () => /* @__PURE__ */ vue.h(
+                              UIcon,
+                              {
+                                size: 20,
+                                ...profileIconProps,
+                                theme: mergedThemeRef.value.peers.Icon,
+                                themeOverrides: mergedThemeRef.value.peerOverrides.Icon
+                              },
+                              {
+                                default: () => /* @__PURE__ */ vue.h(PersonNote, null)
+                              }
+                            )
+                          }
+                        ),
+                        default: () => profileButtonTooltipRef.value
+                      })
+                    );
+                  }
+                  if (closeButtonProps.disabled !== true) {
+                    buttons.push(
+                      /* @__PURE__ */ vue.h(
+                        Button,
                         {
-                          size: 20,
-                          ...headerIconPropsRef.value,
-                          theme: mergedThemeRef.value.peers.Icon,
-                          themeOverrides: mergedThemeRef.value.peerOverrides.Icon
+                          type: "primary",
+                          size: "large",
+                          round: true,
+                          ...closeButtonProps,
+                          theme: mergedThemeRef.value.peers.Button,
+                          themeOverrides: mergedThemeRef.value.peerOverrides.Button,
+                          onClick: () => onChatClose?.value?.()
                         },
                         {
-                          default: () => /* @__PURE__ */ vue.h(PersonNote, null)
+                          default: () => closeButtonTextRef.value
                         }
                       )
-                    }
-                  ),
-                  /* @__PURE__ */ vue.h(
-                    Button,
-                    {
-                      type: "primary",
-                      size: "large",
-                      round: true,
-                      ...headerButtonPropsRef.value,
-                      theme: mergedThemeRef.value.peers.Button,
-                      themeOverrides: mergedThemeRef.value.peerOverrides.Button,
-                      onClick: () => onChatClose?.value?.()
-                    },
-                    {
-                      default: () => closeButtonTextRef.value
-                    }
-                  )
-                ])
+                    );
+                  }
+                  return buttons;
+                })
               }
             ))
           }));
@@ -65288,12 +65815,6 @@
               chatInputs.value[selectedChatRef.value.id] = "";
               hasUnreadMessages.value = false;
               showNotificationManually.value = false;
-              void vue.nextTick(() => {
-                scrollToBottom();
-              });
-              setTimeout(() => {
-                scrollToBottom();
-              }, SCROLL_DELAY);
             } finally {
               setTimeout(() => {
                 isSending.value = false;
@@ -65337,12 +65858,6 @@
                 handleMessageSend("", attachments);
                 pendingFiles.value = [];
                 attachmentFileList.value = [];
-                void vue.nextTick(() => {
-                  scrollToBottom();
-                });
-                setTimeout(() => {
-                  scrollToBottom();
-                }, SCROLL_DELAY);
               }
             }, SENDING_DELAY);
           }
@@ -65434,6 +65949,7 @@
           inputRef,
           inputValue,
           handleSendMessage,
+          handleMessagesScroll,
           scrollToBottom
         };
       },
@@ -65443,7 +65959,8 @@
           Scrollbar,
           {
             ref: "messagesBodyRef",
-            class: `${mergedClsPrefixRef.value}-chat-main__body`
+            class: `${mergedClsPrefixRef.value}-chat-main__body`,
+            onScroll: this.handleMessagesScroll
           },
           {
             default: () => this.renderMessages()
@@ -65518,6 +66035,26 @@
         type: Object,
         default: void 0
       },
+      headerShareButtonProps: {
+        type: Object,
+        default: void 0
+      },
+      headerProfileButtonProps: {
+        type: Object,
+        default: void 0
+      },
+      headerCloseButtonProps: {
+        type: Object,
+        default: void 0
+      },
+      headerShareIconProps: {
+        type: Object,
+        default: void 0
+      },
+      headerProfileIconProps: {
+        type: Object,
+        default: void 0
+      },
       messageSenderAvatarProps: {
         type: Object,
         default: void 0
@@ -65566,6 +66103,14 @@
         type: String,
         default: void 0
       },
+      shareButtonTooltip: {
+        type: String,
+        default: void 0
+      },
+      profileButtonTooltip: {
+        type: String,
+        default: void 0
+      },
       unreadNotificationText: {
         type: String,
         default: void 0
@@ -65618,7 +66163,7 @@
         type: Function,
         default: void 0
       },
-      onLoadMoreChats: {
+      onFooterInputChange: {
         type: Function,
         default: void 0
       },
@@ -65633,6 +66178,22 @@
       onSendError: {
         type: Function,
         default: void 0
+      },
+      onChatItemsScrollToTop: {
+        type: Function,
+        default: void 0
+      },
+      onChatItemsScrollToBottom: {
+        type: Function,
+        default: void 0
+      },
+      onMessagesScrollToTop: {
+        type: Function,
+        default: void 0
+      },
+      onMessagesScrollToBottom: {
+        type: Function,
+        default: void 0
       }
     };
     var Chat = vue.defineComponent({
@@ -65645,12 +66206,16 @@
         "attachment-upload",
         "mark-messages-read",
         "filter-change",
-        "load-more-chats",
+        "footer-input-change",
         "network-error",
         "upload-error",
-        "send-error"
+        "send-error",
+        "chat-items-scroll-to-top",
+        "chat-items-scroll-to-bottom",
+        "messages-scroll-to-top",
+        "messages-scroll-to-bottom"
       ],
-      setup(props, { slots, emit }) {
+      setup(props, { slots, emit, expose }) {
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme(
           "Chat",
@@ -65813,30 +66378,24 @@
         };
         const handleMessageRetry = (message) => {
           emit("message-retry", message);
-          props.onMessageRetry?.(message);
         };
         const markMessagesAsRead = (chatId) => {
           emit("mark-messages-read", chatId);
         };
         const handleFilterChange = (filter) => {
           emit("filter-change", filter);
-          props.onFilterChange?.(filter);
         };
-        const handleLoadMoreChats = (offset, limit) => {
-          emit("load-more-chats", { offset, limit });
-          props.onLoadMoreChats?.(offset, limit);
+        const handleFooterInputChange = (value, chatId) => {
+          emit("footer-input-change", value, chatId);
         };
         const handleNetworkError = (error) => {
           emit("network-error", error);
-          props.onNetworkError?.(error);
         };
         const handleUploadError = (error) => {
           emit("upload-error", error);
-          props.onUploadError?.(error);
         };
         const handleSendError = (error) => {
           emit("send-error", error);
-          props.onSendError?.(error);
         };
         const mergedInputPlaceholderRef = vue.computed(() => {
           const placeholder = props.footerInputProps?.placeholder;
@@ -65854,6 +66413,12 @@
         const mergedCloseButtonTextRef = vue.computed(
           () => props.closeButtonText ?? localeRef.value.closeButtonText
         );
+        const mergedShareButtonTooltipRef = vue.computed(
+          () => props.shareButtonTooltip ?? localeRef.value.shareButtonTooltip
+        );
+        const mergedProfileButtonTooltipRef = vue.computed(
+          () => props.profileButtonTooltip ?? localeRef.value.profileButtonTooltip
+        );
         const mergedUnreadNotificationTextRef = vue.computed(
           () => props.unreadNotificationText ?? localeRef.value.unreadNotificationText
         );
@@ -65877,6 +66442,11 @@
           emptyPropsRef: vue.toRef(props, "emptyProps"),
           headerButtonPropsRef: vue.toRef(props, "headerButtonProps"),
           headerIconPropsRef: vue.toRef(props, "headerIconProps"),
+          headerShareButtonPropsRef: vue.toRef(props, "headerShareButtonProps"),
+          headerProfileButtonPropsRef: vue.toRef(props, "headerProfileButtonProps"),
+          headerCloseButtonPropsRef: vue.toRef(props, "headerCloseButtonProps"),
+          headerShareIconPropsRef: vue.toRef(props, "headerShareIconProps"),
+          headerProfileIconPropsRef: vue.toRef(props, "headerProfileIconProps"),
           messageSenderAvatarPropsRef: vue.toRef(props, "messageSenderAvatarProps"),
           messageUploadPropsRef: vue.toRef(props, "messageUploadProps"),
           messageButtonPropsRef: vue.toRef(props, "messageButtonProps"),
@@ -65889,6 +66459,8 @@
           retryTextRef: mergedRetryTextRef,
           typingTextRef: mergedTypingTextRef,
           closeButtonTextRef: mergedCloseButtonTextRef,
+          shareButtonTooltipRef: mergedShareButtonTooltipRef,
+          profileButtonTooltipRef: mergedProfileButtonTooltipRef,
           unreadNotificationTextRef: mergedUnreadNotificationTextRef,
           notificationsShownSetRef: notificationsShownSet,
           unreadCountsBeforeReadRef: unreadCountsBeforeRead,
@@ -65898,20 +66470,36 @@
           handleMessageRetry,
           markMessagesAsRead,
           handleFilterChange,
-          handleLoadMoreChats,
+          handleFooterInputChange,
           handleNetworkError,
           handleUploadError,
           handleSendError,
           onChatClose: vue.toRef(props, "onChatClose"),
           onChatShare: vue.toRef(props, "onChatShare"),
-          onUserProfile: vue.toRef(props, "onUserProfile")
+          onUserProfile: vue.toRef(props, "onUserProfile"),
+          onChatItemsScrollToTop: vue.toRef(props, "onChatItemsScrollToTop"),
+          onChatItemsScrollToBottom: vue.toRef(props, "onChatItemsScrollToBottom"),
+          onMessagesScrollToTop: vue.toRef(props, "onMessagesScrollToTop"),
+          onMessagesScrollToBottom: vue.toRef(props, "onMessagesScrollToBottom")
+        });
+        const mainAreaRef = vue.ref(null);
+        const scrollToBottom = () => {
+          mainAreaRef.value?.scrollToBottom();
+        };
+        const sendMessage = (content, attachments) => {
+          handleMessageSend(content, attachments);
+        };
+        expose({
+          scrollToBottom,
+          sendMessage
         });
         return {
           mergedClsPrefix: mergedClsPrefixRef,
           mergedTheme: themeRef,
           cssVars: cssVarsRef,
           themeClass: themeClassHandle?.themeClass,
-          onRender: themeClassHandle?.onRender
+          onRender: themeClassHandle?.onRender,
+          mainAreaRef
         };
       },
       render() {
@@ -65936,7 +66524,7 @@
                 sidebarHeaderActions: $slots.sidebarHeaderActions
               })
             ]), this.selectedChatId && resolveSlot($slots.default, () => [
-              /* @__PURE__ */ vue.h(ChatMainArea, null, {
+              /* @__PURE__ */ vue.h(ChatMainArea, { ref: "mainAreaRef" }, {
                 headerActions: $slots.headerActions
               })
             ]))
@@ -104853,6 +105441,7 @@
         default: void 0
       },
       clearable: Boolean,
+      round: Boolean,
       updateValueOnClose: Boolean,
       defaultValue: [Number, Array],
       defaultFormattedValue: [String, Array],
@@ -104902,6 +105491,10 @@
       defaultCalendarStartTime: Number,
       defaultCalendarEndTime: Number,
       bindCalendarMonths: Boolean,
+      triggerPreset: {
+        type: String,
+        default: "input"
+      },
       "onUpdate:show": [Function, Array],
       onUpdateShow: [Function, Array],
       "onUpdate:formattedValue": [Function, Array],
@@ -105815,84 +106408,137 @@
           /* @__PURE__ */ vue.h(Binder, null, {
             default: () => [
               /* @__PURE__ */ vue.h(VTarget, null, {
-                default: () => this.isRange ? /* @__PURE__ */ vue.h(
-                  UInput,
-                  {
-                    ref: "inputInstRef",
-                    status: this.mergedStatus,
-                    value: [this.displayStartTime, this.displayEndTime],
-                    placeholder: [
-                      this.localizedStartPlaceholder,
-                      this.localizedEndPlaceholder
-                    ],
-                    textDecoration: [
-                      this.isStartValueInvalid ? "line-through" : "",
-                      this.isEndValueInvalid ? "line-through" : ""
-                    ],
-                    pair: true,
-                    onUpdateValue: this.handleRangeUpdateValue,
-                    theme: this.mergedTheme.peers.Input,
-                    themeOverrides: this.mergedTheme.peerOverrides.Input,
-                    internalForceFocus: this.mergedShow,
-                    internalDeactivateOnEnter: true,
-                    ...commonInputProps
-                  },
-                  {
-                    separator: () => this.separator === void 0 ? resolveSlot($slots.separator, () => [
-                      /* @__PURE__ */ vue.h(
-                        UBaseIcon,
-                        {
-                          clsPrefix: mergedClsPrefix,
-                          class: `${mergedClsPrefix}-date-picker-icon`
-                        },
-                        {
-                          default: () => /* @__PURE__ */ vue.h(ToIcon, null)
-                        }
-                      )
-                    ]) : this.separator,
-                    [clearable ? "clear-icon-placeholder" : "suffix"]: () => resolveSlot($slots["date-icon"], () => [
-                      /* @__PURE__ */ vue.h(
+                default: () => {
+                  if ($slots.trigger) {
+                    return $slots.trigger({
+                      open: this.handleTriggerClick,
+                      value: this.displayTime || this.localizedPlacehoder
+                    });
+                  }
+                  if (this.triggerPreset === "select") {
+                    return /* @__PURE__ */ vue.h(
+                      UInternalSelection,
+                      {
+                        ref: "inputInstRef",
+                        selectedOption: this.displayTime ? {
+                          label: this.displayTime,
+                          value: this.displayTime
+                        } : null,
+                        round: this.round,
+                        status: this.mergedStatus,
+                        clsPrefix: mergedClsPrefix,
+                        bordered: this.mergedBordered,
+                        size: this.mergedSize,
+                        theme: this.mergedTheme.peers.Select,
+                        themeOverrides: this.mergedTheme.peerOverrides.Select,
+                        placeholder: this.localizedPlacehoder,
+                        active: this.mergedShow,
+                        clearable: this.clearable,
+                        disabled: this.mergedDisabled,
+                        onFocus: this.handleInputFocus,
+                        onBlur: this.handleInputBlur,
+                        onClick: this.handleTriggerClick,
+                        onClear: this.handleClear
+                      },
+                      {
+                        arrow: () => this.$slots.arrow?.()
+                      }
+                    );
+                  }
+                  if (this.triggerPreset === "button") {
+                    return /* @__PURE__ */ vue.h(
+                      Button,
+                      {
+                        round: this.round,
+                        size: this.mergedSize,
+                        theme: this.mergedTheme.peers.Button,
+                        themeOverrides: this.mergedTheme.peerOverrides.Button,
+                        onClick: this.handleTriggerClick
+                      },
+                      this.displayTime || this.localizedPlacehoder
+                    );
+                  }
+                  return this.isRange ? /* @__PURE__ */ vue.h(
+                    UInput,
+                    {
+                      ref: "inputInstRef",
+                      round: this.round,
+                      status: this.mergedStatus,
+                      value: [this.displayStartTime, this.displayEndTime],
+                      placeholder: [
+                        this.localizedStartPlaceholder,
+                        this.localizedEndPlaceholder
+                      ],
+                      textDecoration: [
+                        this.isStartValueInvalid ? "line-through" : "",
+                        this.isEndValueInvalid ? "line-through" : ""
+                      ],
+                      pair: true,
+                      onUpdateValue: this.handleRangeUpdateValue,
+                      theme: this.mergedTheme.peers.Input,
+                      themeOverrides: this.mergedTheme.peerOverrides.Input,
+                      internalForceFocus: this.mergedShow,
+                      internalDeactivateOnEnter: true,
+                      ...commonInputProps
+                    },
+                    {
+                      separator: () => this.separator === void 0 ? resolveSlot($slots.separator, () => [
+                        /* @__PURE__ */ vue.h(
+                          UBaseIcon,
+                          {
+                            clsPrefix: mergedClsPrefix,
+                            class: `${mergedClsPrefix}-date-picker-icon`
+                          },
+                          {
+                            default: () => /* @__PURE__ */ vue.h(ToIcon, null)
+                          }
+                        )
+                      ]) : this.separator,
+                      [clearable ? "clear-icon-placeholder" : "suffix"]: () => resolveSlot($slots["date-icon"], () => [
+                        /* @__PURE__ */ vue.h(
+                          UBaseIcon,
+                          {
+                            clsPrefix: mergedClsPrefix,
+                            class: `${mergedClsPrefix}-date-picker-icon`
+                          },
+                          {
+                            default: () => /* @__PURE__ */ vue.h(DateIcon, null)
+                          }
+                        )
+                      ])
+                    }
+                  ) : /* @__PURE__ */ vue.h(
+                    UInput,
+                    {
+                      ref: "inputInstRef",
+                      round: this.round,
+                      status: this.mergedStatus,
+                      value: this.displayTime,
+                      placeholder: this.localizedPlacehoder,
+                      textDecoration: this.isValueInvalid && !this.isRange ? "line-through" : "",
+                      onUpdateValue: this.handleSingleUpdateValue,
+                      theme: this.mergedTheme.peers.Input,
+                      themeOverrides: this.mergedTheme.peerOverrides.Input,
+                      internalForceFocus: this.mergedShow,
+                      internalDeactivateOnEnter: true,
+                      ...commonInputProps
+                    },
+                    {
+                      [clearable ? "clear-icon-placeholder" : "suffix"]: () => /* @__PURE__ */ vue.h(
                         UBaseIcon,
                         {
                           clsPrefix: mergedClsPrefix,
                           class: `${mergedClsPrefix}-date-picker-icon`
                         },
                         {
-                          default: () => /* @__PURE__ */ vue.h(DateIcon, null)
+                          default: () => resolveSlot($slots["date-icon"], () => [
+                            /* @__PURE__ */ vue.h(DateIcon, null)
+                          ])
                         }
                       )
-                    ])
-                  }
-                ) : /* @__PURE__ */ vue.h(
-                  UInput,
-                  {
-                    ref: "inputInstRef",
-                    status: this.mergedStatus,
-                    value: this.displayTime,
-                    placeholder: this.localizedPlacehoder,
-                    textDecoration: this.isValueInvalid && !this.isRange ? "line-through" : "",
-                    onUpdateValue: this.handleSingleUpdateValue,
-                    theme: this.mergedTheme.peers.Input,
-                    themeOverrides: this.mergedTheme.peerOverrides.Input,
-                    internalForceFocus: this.mergedShow,
-                    internalDeactivateOnEnter: true,
-                    ...commonInputProps
-                  },
-                  {
-                    [clearable ? "clear-icon-placeholder" : "suffix"]: () => /* @__PURE__ */ vue.h(
-                      UBaseIcon,
-                      {
-                        clsPrefix: mergedClsPrefix,
-                        class: `${mergedClsPrefix}-date-picker-icon`
-                      },
-                      {
-                        default: () => resolveSlot($slots["date-icon"], () => [
-                          /* @__PURE__ */ vue.h(DateIcon, null)
-                        ])
-                      }
-                    )
-                  }
-                )
+                    }
+                  );
+                }
               }),
               /* @__PURE__ */ vue.h(
                 VFollower,
@@ -106041,6 +106687,14 @@
 
     const descriptionsProps = {
       ...useTheme.props,
+      skeletonProps: {
+        type: Object,
+        default: () => ({
+          width: "50%",
+          height: "25px",
+          round: true
+        })
+      },
       title: String,
       column: {
         type: Number,
@@ -106064,6 +106718,7 @@
         default: "medium"
       },
       bordered: Boolean,
+      loadingSkeleton: Boolean,
       labelStyle: [Object, String],
       contentStyle: [Object, String]
     };
@@ -106158,6 +106813,8 @@
           labelAlign,
           size,
           bordered,
+          loadingSkeleton,
+          skeletonProps,
           title,
           cssVars,
           mergedClsPrefix,
@@ -106202,7 +106859,7 @@
                     colspan: 1,
                     style: labelStyle
                   },
-                  itemLabel
+                  loadingSkeleton ? /* @__PURE__ */ vue.h(UBaseSkeleton, { ...skeletonProps }) : itemLabel
                 ),
                 /* @__PURE__ */ vue.h(
                   "td",
@@ -106211,7 +106868,7 @@
                     colspan: isLastIteration ? (compitableColumn - memorizedSpan) * 2 + 1 : itemSpan * 2 - 1,
                     style: contentStyle
                   },
-                  itemChildren
+                  loadingSkeleton ? /* @__PURE__ */ vue.h(UBaseSkeleton, { ...skeletonProps }) : itemChildren
                 )
               );
             } else {
@@ -106228,7 +106885,7 @@
                       class: `${mergedClsPrefix}-descriptions-table-content__label`,
                       style: labelStyle
                     },
-                    [
+                    loadingSkeleton ? /* @__PURE__ */ vue.h(UBaseSkeleton, { ...skeletonProps }) : [
                       ...itemLabel,
                       separator && /* @__PURE__ */ vue.h("span", { class: `${mergedClsPrefix}-descriptions-separator` }, separator)
                     ]
@@ -106239,7 +106896,7 @@
                       class: `${mergedClsPrefix}-descriptions-table-content__content`,
                       style: contentStyle
                     },
-                    itemChildren
+                    loadingSkeleton ? /* @__PURE__ */ vue.h(UBaseSkeleton, { ...skeletonProps }) : itemChildren
                   )
                 )
               );
@@ -106254,7 +106911,7 @@
                   colspan,
                   style: labelStyle
                 },
-                itemLabel
+                loadingSkeleton ? /* @__PURE__ */ vue.h(UBaseSkeleton, { ...skeletonProps }) : itemLabel
               )
             );
             state.secondRow.push(
@@ -106265,7 +106922,7 @@
                   colspan,
                   style: contentStyle
                 },
-                itemChildren
+                loadingSkeleton ? /* @__PURE__ */ vue.h(UBaseSkeleton, { ...skeletonProps }) : itemChildren
               )
             );
           }
@@ -112471,6 +113128,78 @@
       }
     });
 
+    const infiniteScrollProps = {
+      distance: {
+        type: Number,
+        default: 0
+      },
+      onLoad: Function,
+      scrollbarProps: Object
+    };
+    var InfiniteScroll = vue.defineComponent({
+      name: "InfiniteScroll",
+      props: infiniteScrollProps,
+      setup(props) {
+        const scrollbarInstRef = vue.ref(null);
+        let loading = false;
+        const handleCheckBottom = async () => {
+          const { value: scrollbarInst } = scrollbarInstRef;
+          if (scrollbarInst) {
+            const { containerRef } = scrollbarInst;
+            const scrollHeight = containerRef?.scrollHeight;
+            const clientHeight = containerRef?.clientHeight;
+            const scrollTop = containerRef?.scrollTop;
+            if (containerRef && scrollHeight !== void 0 && clientHeight !== void 0 && scrollTop !== void 0) {
+              if (scrollTop + clientHeight >= scrollHeight - props.distance) {
+                loading = true;
+                try {
+                  await props.onLoad?.();
+                } catch {
+                }
+                loading = false;
+              }
+            }
+          }
+        };
+        const handleScroll = () => {
+          if (loading) {
+            return;
+          }
+          void handleCheckBottom();
+        };
+        const handleWheel = (e) => {
+          if (e.deltaY <= 0) {
+            return;
+          }
+          if (loading) {
+            return;
+          }
+          void handleCheckBottom();
+        };
+        return {
+          scrollbarInstRef,
+          handleScroll,
+          handleWheel
+        };
+      },
+      render() {
+        return /* @__PURE__ */ vue.h(
+          XScrollbar,
+          {
+            ...this.scrollbarProps,
+            ref: "scrollbarInstRef",
+            onWheel: this.handleWheel,
+            onScroll: this.handleScroll
+          },
+          {
+            default: () => {
+              return resolveSlot(this.$slots.default, () => []);
+            }
+          }
+        );
+      }
+    });
+
     function parse(value) {
       if (value === void 0 || value === null || typeof value === "string" && value.trim() === "") {
         return null;
@@ -128862,6 +129591,134 @@
       }
     });
 
+    const virtualListProps = {
+      scrollbarProps: Object,
+      items: {
+        type: Array,
+        default: () => []
+      },
+      itemSize: {
+        type: Number,
+        required: true
+      },
+      itemResizable: Boolean,
+      itemsStyle: [String, Object],
+      visibleItemsTag: {
+        type: [String, Object],
+        default: "div"
+      },
+      visibleItemsProps: Object,
+      ignoreItemResize: Boolean,
+      onScroll: Function,
+      onWheel: Function,
+      onResize: Function,
+      defaultScrollKey: [Number, String],
+      defaultScrollIndex: Number,
+      keyField: {
+        type: String,
+        default: "key"
+      },
+      paddingTop: {
+        type: [Number, String],
+        default: 0
+      },
+      paddingBottom: {
+        type: [Number, String],
+        default: 0
+      }
+    };
+    var VirtualList = vue.defineComponent({
+      name: "VirtualList",
+      props: virtualListProps,
+      setup(props) {
+        const scrollbarInstRef = vue.ref(null);
+        const virtualListInstRef = vue.ref(null);
+        function syncScrollbar() {
+          const { value: scrollbarInst } = scrollbarInstRef;
+          if (scrollbarInst) {
+            scrollbarInst.sync();
+          }
+        }
+        function handleScroll(e) {
+          syncScrollbar();
+          props.onScroll?.(e);
+        }
+        function handleResize(e) {
+          syncScrollbar();
+          props.onResize?.(e);
+        }
+        function handleWheel(e) {
+          props.onWheel?.(e);
+        }
+        function scrollTo(options, y) {
+          if (typeof options === "number") {
+            virtualListInstRef.value?.scrollTo(options, y ?? 0);
+          } else {
+            virtualListInstRef.value?.scrollTo(options);
+          }
+        }
+        function getScrollContainer() {
+          return virtualListInstRef.value?.listElRef;
+        }
+        function getScrollContent() {
+          return virtualListInstRef.value?.itemsElRef;
+        }
+        return {
+          scrollTo,
+          scrollbarInstRef,
+          virtualListInstRef,
+          getScrollContainer,
+          getScrollContent,
+          handleScroll,
+          handleResize,
+          handleWheel
+        };
+      },
+      render() {
+        return /* @__PURE__ */ vue.h(
+          XScrollbar,
+          {
+            ...this.scrollbarProps,
+            ref: "scrollbarInstRef",
+            container: this.getScrollContainer,
+            content: this.getScrollContent
+          },
+          {
+            default: () => {
+              return /* @__PURE__ */ vue.h(
+                VVirtualList,
+                {
+                  ref: "virtualListInstRef",
+                  showScrollbar: false,
+                  items: this.items,
+                  itemSize: this.itemSize,
+                  itemResizable: this.itemResizable,
+                  itemsStyle: this.itemsStyle,
+                  visibleItemsTag: this.visibleItemsTag,
+                  visibleItemsProps: this.visibleItemsProps,
+                  ignoreItemResize: this.ignoreItemResize,
+                  keyField: this.keyField,
+                  defaultScrollKey: this.defaultScrollKey,
+                  defaultScrollIndex: this.defaultScrollIndex,
+                  paddingTop: this.paddingTop,
+                  paddingBottom: this.paddingBottom,
+                  onScroll: this.handleScroll,
+                  onResize: this.handleResize,
+                  onWheel: this.handleWheel
+                },
+                {
+                  default: ({
+                    item,
+                    index
+                  }) => this.$slots.default?.({ item, index })
+                }
+              );
+            }
+          }
+        );
+      }
+    });
+
     var style$1 = c$1([cB("watermark-container", `
     position: relative;
   `, [cNotM("selectable", `
@@ -129535,6 +130392,7 @@
         MessageStatus: MessageStatus,
         NA: a,
         NP: p,
+        NVirtualList: VirtualList,
         UActionCard: ActionCard,
         UAffix: UAffix,
         UAlert: Alert,
@@ -129609,6 +130467,7 @@
         UIconWrapper: UIconWrapper,
         UImage: Image$1,
         UImageGroup: UImageGroup,
+        UInfiniteScroll: InfiniteScroll,
         UInput: UInput,
         UInputGroup: UInputGroup,
         UInputGroupLabel: InputGroupLabel,
@@ -129752,6 +130611,7 @@
         iconWrapperProps: iconWrapperProps,
         imageGroupProps: imageGroupProps,
         imageProps: imageProps,
+        infiniteScrollProps: infiniteScrollProps,
         inputGroupLabelProps: inputGroupLabelProps,
         inputGroupProps: inputGroupProps,
         inputNumberProps: inputNumberProps,
@@ -129820,10 +130680,11 @@
         useLoadingBar: useLoadingBar,
         useMessage: useMessage,
         useNotification: useNotification,
+        virtualListProps: virtualListProps,
         watermarkProps: watermarkProps
     });
 
-    var version = "1.8.2";
+    var version = "1.9.1";
 
     function create({
       componentPrefix = "U",
@@ -130633,6 +131494,7 @@
     exports.MessageStatus = MessageStatus;
     exports.NA = a;
     exports.NP = p;
+    exports.NVirtualList = VirtualList;
     exports.UActionCard = ActionCard;
     exports.UAffix = UAffix;
     exports.UAlert = Alert;
@@ -130707,6 +131569,7 @@
     exports.UIconWrapper = UIconWrapper;
     exports.UImage = Image$1;
     exports.UImageGroup = UImageGroup;
+    exports.UInfiniteScroll = InfiniteScroll;
     exports.UInput = UInput;
     exports.UInputGroup = UInputGroup;
     exports.UInputGroupLabel = InputGroupLabel;
@@ -130927,6 +131790,7 @@
     exports.idID = idID;
     exports.imageGroupProps = imageGroupProps;
     exports.imageProps = imageProps;
+    exports.infiniteScrollProps = infiniteScrollProps;
     exports.inputDark = inputDark;
     exports.inputGroupLabelProps = inputGroupLabelProps;
     exports.inputGroupProps = inputGroupProps;
@@ -131087,6 +131951,7 @@
     exports.useThemeVars = useThemeVars;
     exports.version = version;
     exports.viVN = viVN;
+    exports.virtualListProps = virtualListProps;
     exports.watermarkDark = watermarkDark;
     exports.watermarkProps = watermarkProps;
     exports.zhCN = zhCN;