@uzum-tech/ui 1.8.2 → 1.9.0

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
@@ -31510,12 +31714,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 +31804,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 +31878,7 @@
       content: Function,
       containerClass: String,
       containerStyle: [String, Object],
-      contentClass: String,
+      contentClass: [String, Array],
       contentStyle: [String, Object],
       horizontalRailStyle: [String, Object],
       verticalRailStyle: [String, Object],
@@ -31657,7 +31886,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 +31927,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 +31944,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 +31958,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 +31973,9 @@
             return 0;
           } else {
             const heightDiff = contentHeight - containerHeight;
-            if (!heightDiff) return 0;
+            if (!heightDiff) {
+              return 0;
+            }
             return containerScrollTop / heightDiff * (yRailSize - yBarSizeRef.value);
           }
         });
@@ -31744,7 +31991,9 @@
             return 0;
           } else {
             const widthDiff = contentWidth - containerWidth;
-            if (!widthDiff) return 0;
+            if (!widthDiff) {
+              return 0;
+            }
             return containerScrollLeft / widthDiff * (xRailSize - xBarSizeRef.value);
           }
         });
@@ -31771,34 +32020,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 +32063,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 +32103,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 +32167,9 @@
         }
         function handleScroll(e) {
           const { onScroll } = props;
-          if (onScroll) onScroll(e);
+          if (onScroll) {
+            onScroll(e);
+          }
           syncScrollState();
         }
         function syncScrollState() {
@@ -31950,7 +32219,9 @@
           }
         }
         function sync() {
-          if (!props.scrollable) return;
+          if (!props.scrollable) {
+            return;
+          }
           if (props.useUnifiedContainer) {
             syncUnifiedContainer();
           } else {
@@ -31973,7 +32244,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 +32256,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 +32269,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 +32295,9 @@
           memoMouseY = e.clientY;
         }
         function handleYScrollMouseMove(e) {
-          if (!yBarPressed) return;
+          if (!yBarPressed) {
+            return;
+          }
           if (xBarVanishTimerId !== void 0) {
             window.clearTimeout(xBarVanishTimerId);
           }
@@ -32028,7 +32307,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 +32358,9 @@
           }
         });
         vue.onMounted(() => {
-          if (props.container) return;
+          if (props.container) {
+            return;
+          }
           sync();
         });
         vue.onBeforeUnmount(() => {
@@ -32090,31 +32373,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 +32487,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 +32581,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 +32621,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 +36120,9 @@
             if (patternInputEl) {
               patternInputEl.style.width = `${patternInputMirrorEl.offsetWidth}px`;
               if (props.maxTagCount !== "responsive") {
-                overflowRef.value?.sync();
+                overflowRef.value?.sync({
+                  showAllItemsBeforeCalculate: false
+                });
               }
             }
           }
@@ -112471,6 +112807,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 +129270,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 +130071,7 @@
         MessageStatus: MessageStatus,
         NA: a,
         NP: p,
+        NVirtualList: VirtualList,
         UActionCard: ActionCard,
         UAffix: UAffix,
         UAlert: Alert,
@@ -129609,6 +130146,7 @@
         UIconWrapper: UIconWrapper,
         UImage: Image$1,
         UImageGroup: UImageGroup,
+        UInfiniteScroll: InfiniteScroll,
         UInput: UInput,
         UInputGroup: UInputGroup,
         UInputGroupLabel: InputGroupLabel,
@@ -129752,6 +130290,7 @@
         iconWrapperProps: iconWrapperProps,
         imageGroupProps: imageGroupProps,
         imageProps: imageProps,
+        infiniteScrollProps: infiniteScrollProps,
         inputGroupLabelProps: inputGroupLabelProps,
         inputGroupProps: inputGroupProps,
         inputNumberProps: inputNumberProps,
@@ -129820,10 +130359,11 @@
         useLoadingBar: useLoadingBar,
         useMessage: useMessage,
         useNotification: useNotification,
+        virtualListProps: virtualListProps,
         watermarkProps: watermarkProps
     });
 
-    var version = "1.8.2";
+    var version = "1.9.0";
 
     function create({
       componentPrefix = "U",
@@ -130633,6 +131173,7 @@
     exports.MessageStatus = MessageStatus;
     exports.NA = a;
     exports.NP = p;
+    exports.NVirtualList = VirtualList;
     exports.UActionCard = ActionCard;
     exports.UAffix = UAffix;
     exports.UAlert = Alert;
@@ -130707,6 +131248,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 +131469,7 @@
     exports.idID = idID;
     exports.imageGroupProps = imageGroupProps;
     exports.imageProps = imageProps;
+    exports.infiniteScrollProps = infiniteScrollProps;
     exports.inputDark = inputDark;
     exports.inputGroupLabelProps = inputGroupLabelProps;
     exports.inputGroupProps = inputGroupProps;
@@ -131087,6 +131630,7 @@
     exports.useThemeVars = useThemeVars;
     exports.version = version;
     exports.viVN = viVN;
+    exports.virtualListProps = virtualListProps;
     exports.watermarkDark = watermarkDark;
     exports.watermarkProps = watermarkProps;
     exports.zhCN = zhCN;