@hoci/components 0.8.0 → 0.8.1

package/dist/index.cjs

@@ -1266,7 +1266,7 @@ function notUndefined(value, msg) {
     return value;
   }
 }
-const approxEqual = (a, b) => Math.abs(a - b) <= 1;
+const approxEqual = (a, b) => Math.abs(a - b) < 1.01;
 const debounce = (targetWindow, fn, ms) => {
   let timeoutId;
   return function(...args) {
@@ -1397,7 +1397,6 @@ class Virtualizer {
     this.scrollElement = null;
     this.targetWindow = null;
     this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
     this.measurementsCache = [];
     this.itemSizeCache = /* @__PURE__ */ new Map();
     this.pendingMeasuredCacheIndexes = [];
@@ -1813,7 +1812,7 @@ class Virtualizer {
       } else if (align === "end") {
         toOffset -= size;
       }
-      const maxOffset = this.getTotalSize() - size;
+      const maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
       return Math.max(Math.min(maxOffset, toOffset), 0);
     };
     this.getOffsetForIndex = (index, align = "auto") => {
@@ -1840,14 +1839,7 @@ class Virtualizer {
       ];
     };
     this.isDynamicMode = () => this.elementsCache.size > 0;
-    this.cancelScrollToIndex = () => {
-      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
-        this.scrollToIndexTimeoutId = null;
-      }
-    };
     this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-      this.cancelScrollToIndex();
       if (behavior === "smooth" && this.isDynamicMode()) {
         console.warn(
           "The `smooth` scroll behavior is not fully supported with dynamic size."
@@ -1859,39 +1851,52 @@ class Virtualizer {
       });
     };
     this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      this.cancelScrollToIndex();
       if (behavior === "smooth" && this.isDynamicMode()) {
         console.warn(
           "The `smooth` scroll behavior is not fully supported with dynamic size."
         );
       }
-      const offsetAndAlign = this.getOffsetForIndex(index, initialAlign);
-      if (!offsetAndAlign) return;
-      const [offset, align] = offsetAndAlign;
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
-        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-          this.scrollToIndexTimeoutId = null;
-          const elementInDOM = this.elementsCache.has(
-            this.options.getItemKey(index)
-          );
-          if (elementInDOM) {
-            const [latestOffset] = notUndefined(
-              this.getOffsetForIndex(index, align)
-            );
-            const currentScrollOffset = this.getScrollOffset();
-            if (!approxEqual(latestOffset, currentScrollOffset)) {
-              this.scrollToIndex(index, { align, behavior });
-            }
-          } else {
-            this.scrollToIndex(index, { align, behavior });
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      let attempts = 0;
+      const maxAttempts = 10;
+      const tryScroll = (currentAlign) => {
+        if (!this.targetWindow) return;
+        const offsetInfo = this.getOffsetForIndex(index, currentAlign);
+        if (!offsetInfo) {
+          console.warn("Failed to get offset for index:", index);
+          return;
+        }
+        const [offset, align] = offsetInfo;
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.targetWindow.requestAnimationFrame(() => {
+          const currentOffset = this.getScrollOffset();
+          const afterInfo = this.getOffsetForIndex(index, align);
+          if (!afterInfo) {
+            console.warn("Failed to get offset for index:", index);
+            return;
+          }
+          if (!approxEqual(afterInfo[0], currentOffset)) {
+            scheduleRetry(align);
           }
         });
-      }
+      };
+      const scheduleRetry = (align) => {
+        if (!this.targetWindow) return;
+        attempts++;
+        if (attempts < maxAttempts) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("Schedule retry", attempts, maxAttempts);
+          }
+          this.targetWindow.requestAnimationFrame(() => tryScroll(align));
+        } else {
+          console.warn(
+            `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
+          );
+        }
+      };
+      tryScroll(initialAlign);
     };
     this.scrollBy = (delta, { behavior } = {}) => {
-      this.cancelScrollToIndex();
       if (behavior === "smooth" && this.isDynamicMode()) {
         console.warn(
           "The `smooth` scroll behavior is not fully supported with dynamic size."

package/dist/index.d.cts

@@ -60,11 +60,11 @@ declare const HiAffix: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
 }>> & Readonly<{}>, {
+    as: string;
     fixedClass: string;
     offset: number;
     position: "top" | "bottom";
     zIndex: number;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -131,9 +131,9 @@ declare const HiFileUpload: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    multiple: boolean;
-    modelValue: File | File[];
     as: string;
+    modelValue: File | File[];
+    multiple: boolean;
     accept: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
@@ -192,9 +192,9 @@ declare const HiIcon: vue.DefineComponent<vue.ExtractPropTypes<{
         default: () => "auto";
     };
 }>> & Readonly<{}>, {
-    mask: boolean | "auto";
-    color: string;
     as: string;
+    color: string;
+    mask: boolean | "auto";
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -248,10 +248,10 @@ declare const HiItem: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onReject?: ((...args: any[]) => any) | undefined;
 }>, {
+    as: string;
     value: any;
     disabled: boolean;
     keepAlive: boolean;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiPopover: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -332,14 +332,14 @@ declare const HiPopover: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
 }>, {
+    as: string;
     offset: number;
-    visible: boolean;
     disabled: boolean;
+    visible: boolean;
     placement: _hoci_core.Placement;
     triggerEvent: _hoci_core.TriggerEvent;
     lazy: boolean;
     teleport: string | boolean | HTMLElement;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -386,7 +386,7 @@ declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue" | "reject")[], "change" | "load" | "unload" | "update:modelValue" | "reject", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "update:modelValue" | "unload" | "reject")[], "change" | "load" | "update:modelValue" | "unload" | "reject", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     as: {
         type: StringConstructor;
         default: string;
@@ -432,18 +432,18 @@ declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     onLoad?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onReject?: ((...args: any[]) => any) | undefined;
     onUnload?: ((...args: any[]) => any) | undefined;
+    onReject?: ((...args: any[]) => any) | undefined;
 }>, {
-    multiple: number | boolean | [number, (number | undefined)?];
+    as: string;
     modelValue: any;
+    multiple: number | boolean | [number, (number | undefined)?];
     activeClass: string | string[] | Record<string, boolean>;
     itemClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
     unactiveClass: string | string[] | Record<string, boolean>;
     clearable: boolean;
     defaultValue: any;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiSwitch: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -509,9 +509,9 @@ declare const HiSwitch: vue.DefineComponent<vue.ExtractPropTypes<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onReject?: ((...args: any[]) => any) | undefined;
 }>, {
-    disabled: boolean;
-    modelValue: boolean;
     as: string;
+    modelValue: boolean;
+    disabled: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiTabPane: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -685,8 +685,9 @@ declare const HiTabs: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<_hoci_shared.ActivateEvent>;
     };
 }>> & Readonly<{}>, {
-    multiple: number | boolean | [number, (number | undefined)?];
+    as: string;
     modelValue: any;
+    multiple: number | boolean | [number, (number | undefined)?];
     activeClass: string | string[] | Record<string, boolean>;
     itemClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
@@ -694,7 +695,6 @@ declare const HiTabs: vue.DefineComponent<vue.ExtractPropTypes<{
     clearable: boolean;
     defaultValue: any;
     keepAlive: boolean | KeepAliveProps;
-    as: string;
     headerAs: string;
     contentAs: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
@@ -778,11 +778,11 @@ declare const HiVirtualList: vue.DefineComponent<vue.ExtractPropTypes<{
     onScrollEnd?: (() => any) | undefined;
     onScrollStart?: (() => any) | undefined;
 }>, {
+    as: string;
     horizontal: boolean;
+    options: _tanstack_virtual_core.PartialKeys<VirtualizerOptions<HTMLElement, HTMLElement>, "observeElementRect" | "observeElementOffset" | "scrollToFn" | "getScrollElement">;
     count: number;
     estimateSize: number | ((index: number) => number);
-    options: _tanstack_virtual_core.PartialKeys<VirtualizerOptions<HTMLElement, HTMLElement>, "observeElementRect" | "observeElementOffset" | "scrollToFn" | "getScrollElement">;
-    as: string;
     wrapperAs: string;
     wrapperStyle: CSSProperties;
     wrapperClass: string | string[] | Record<string, boolean>;

package/dist/index.d.mts

@@ -60,11 +60,11 @@ declare const HiAffix: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
 }>> & Readonly<{}>, {
+    as: string;
     fixedClass: string;
     offset: number;
     position: "top" | "bottom";
     zIndex: number;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -131,9 +131,9 @@ declare const HiFileUpload: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    multiple: boolean;
-    modelValue: File | File[];
     as: string;
+    modelValue: File | File[];
+    multiple: boolean;
     accept: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
@@ -192,9 +192,9 @@ declare const HiIcon: vue.DefineComponent<vue.ExtractPropTypes<{
         default: () => "auto";
     };
 }>> & Readonly<{}>, {
-    mask: boolean | "auto";
-    color: string;
     as: string;
+    color: string;
+    mask: boolean | "auto";
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -248,10 +248,10 @@ declare const HiItem: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onReject?: ((...args: any[]) => any) | undefined;
 }>, {
+    as: string;
     value: any;
     disabled: boolean;
     keepAlive: boolean;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiPopover: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -332,14 +332,14 @@ declare const HiPopover: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
 }>, {
+    as: string;
     offset: number;
-    visible: boolean;
     disabled: boolean;
+    visible: boolean;
     placement: _hoci_core.Placement;
     triggerEvent: _hoci_core.TriggerEvent;
     lazy: boolean;
     teleport: string | boolean | HTMLElement;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -386,7 +386,7 @@ declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue" | "reject")[], "change" | "load" | "unload" | "update:modelValue" | "reject", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "update:modelValue" | "unload" | "reject")[], "change" | "load" | "update:modelValue" | "unload" | "reject", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     as: {
         type: StringConstructor;
         default: string;
@@ -432,18 +432,18 @@ declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     onLoad?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onReject?: ((...args: any[]) => any) | undefined;
     onUnload?: ((...args: any[]) => any) | undefined;
+    onReject?: ((...args: any[]) => any) | undefined;
 }>, {
-    multiple: number | boolean | [number, (number | undefined)?];
+    as: string;
     modelValue: any;
+    multiple: number | boolean | [number, (number | undefined)?];
     activeClass: string | string[] | Record<string, boolean>;
     itemClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
     unactiveClass: string | string[] | Record<string, boolean>;
     clearable: boolean;
     defaultValue: any;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiSwitch: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -509,9 +509,9 @@ declare const HiSwitch: vue.DefineComponent<vue.ExtractPropTypes<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onReject?: ((...args: any[]) => any) | undefined;
 }>, {
-    disabled: boolean;
-    modelValue: boolean;
     as: string;
+    modelValue: boolean;
+    disabled: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiTabPane: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -685,8 +685,9 @@ declare const HiTabs: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<_hoci_shared.ActivateEvent>;
     };
 }>> & Readonly<{}>, {
-    multiple: number | boolean | [number, (number | undefined)?];
+    as: string;
     modelValue: any;
+    multiple: number | boolean | [number, (number | undefined)?];
     activeClass: string | string[] | Record<string, boolean>;
     itemClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
@@ -694,7 +695,6 @@ declare const HiTabs: vue.DefineComponent<vue.ExtractPropTypes<{
     clearable: boolean;
     defaultValue: any;
     keepAlive: boolean | KeepAliveProps;
-    as: string;
     headerAs: string;
     contentAs: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
@@ -778,11 +778,11 @@ declare const HiVirtualList: vue.DefineComponent<vue.ExtractPropTypes<{
     onScrollEnd?: (() => any) | undefined;
     onScrollStart?: (() => any) | undefined;
 }>, {
+    as: string;
     horizontal: boolean;
+    options: _tanstack_virtual_core.PartialKeys<VirtualizerOptions<HTMLElement, HTMLElement>, "observeElementRect" | "observeElementOffset" | "scrollToFn" | "getScrollElement">;
     count: number;
     estimateSize: number | ((index: number) => number);
-    options: _tanstack_virtual_core.PartialKeys<VirtualizerOptions<HTMLElement, HTMLElement>, "observeElementRect" | "observeElementOffset" | "scrollToFn" | "getScrollElement">;
-    as: string;
     wrapperAs: string;
     wrapperStyle: CSSProperties;
     wrapperClass: string | string[] | Record<string, boolean>;

package/dist/index.d.ts

@@ -60,11 +60,11 @@ declare const HiAffix: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
 }>> & Readonly<{}>, {
+    as: string;
     fixedClass: string;
     offset: number;
     position: "top" | "bottom";
     zIndex: number;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -131,9 +131,9 @@ declare const HiFileUpload: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    multiple: boolean;
-    modelValue: File | File[];
     as: string;
+    modelValue: File | File[];
+    multiple: boolean;
     accept: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
@@ -192,9 +192,9 @@ declare const HiIcon: vue.DefineComponent<vue.ExtractPropTypes<{
         default: () => "auto";
     };
 }>> & Readonly<{}>, {
-    mask: boolean | "auto";
-    color: string;
     as: string;
+    color: string;
+    mask: boolean | "auto";
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -248,10 +248,10 @@ declare const HiItem: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onReject?: ((...args: any[]) => any) | undefined;
 }>, {
+    as: string;
     value: any;
     disabled: boolean;
     keepAlive: boolean;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiPopover: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -332,14 +332,14 @@ declare const HiPopover: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
 }>, {
+    as: string;
     offset: number;
-    visible: boolean;
     disabled: boolean;
+    visible: boolean;
     placement: _hoci_core.Placement;
     triggerEvent: _hoci_core.TriggerEvent;
     lazy: boolean;
     teleport: string | boolean | HTMLElement;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -386,7 +386,7 @@ declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue" | "reject")[], "change" | "load" | "unload" | "update:modelValue" | "reject", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "update:modelValue" | "unload" | "reject")[], "change" | "load" | "update:modelValue" | "unload" | "reject", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     as: {
         type: StringConstructor;
         default: string;
@@ -432,18 +432,18 @@ declare const HiSelection: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     onLoad?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onReject?: ((...args: any[]) => any) | undefined;
     onUnload?: ((...args: any[]) => any) | undefined;
+    onReject?: ((...args: any[]) => any) | undefined;
 }>, {
-    multiple: number | boolean | [number, (number | undefined)?];
+    as: string;
     modelValue: any;
+    multiple: number | boolean | [number, (number | undefined)?];
     activeClass: string | string[] | Record<string, boolean>;
     itemClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
     unactiveClass: string | string[] | Record<string, boolean>;
     clearable: boolean;
     defaultValue: any;
-    as: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiSwitch: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -509,9 +509,9 @@ declare const HiSwitch: vue.DefineComponent<vue.ExtractPropTypes<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onReject?: ((...args: any[]) => any) | undefined;
 }>, {
-    disabled: boolean;
-    modelValue: boolean;
     as: string;
+    modelValue: boolean;
+    disabled: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 declare const HiTabPane: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -685,8 +685,9 @@ declare const HiTabs: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<_hoci_shared.ActivateEvent>;
     };
 }>> & Readonly<{}>, {
-    multiple: number | boolean | [number, (number | undefined)?];
+    as: string;
     modelValue: any;
+    multiple: number | boolean | [number, (number | undefined)?];
     activeClass: string | string[] | Record<string, boolean>;
     itemClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
@@ -694,7 +695,6 @@ declare const HiTabs: vue.DefineComponent<vue.ExtractPropTypes<{
     clearable: boolean;
     defaultValue: any;
     keepAlive: boolean | KeepAliveProps;
-    as: string;
     headerAs: string;
     contentAs: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
@@ -778,11 +778,11 @@ declare const HiVirtualList: vue.DefineComponent<vue.ExtractPropTypes<{
     onScrollEnd?: (() => any) | undefined;
     onScrollStart?: (() => any) | undefined;
 }>, {
+    as: string;
     horizontal: boolean;
+    options: _tanstack_virtual_core.PartialKeys<VirtualizerOptions<HTMLElement, HTMLElement>, "observeElementRect" | "observeElementOffset" | "scrollToFn" | "getScrollElement">;
     count: number;
     estimateSize: number | ((index: number) => number);
-    options: _tanstack_virtual_core.PartialKeys<VirtualizerOptions<HTMLElement, HTMLElement>, "observeElementRect" | "observeElementOffset" | "scrollToFn" | "getScrollElement">;
-    as: string;
     wrapperAs: string;
     wrapperStyle: CSSProperties;
     wrapperClass: string | string[] | Record<string, boolean>;

package/dist/index.mjs

@@ -1264,7 +1264,7 @@ function notUndefined(value, msg) {
     return value;
   }
 }
-const approxEqual = (a, b) => Math.abs(a - b) <= 1;
+const approxEqual = (a, b) => Math.abs(a - b) < 1.01;
 const debounce = (targetWindow, fn, ms) => {
   let timeoutId;
   return function(...args) {
@@ -1395,7 +1395,6 @@ class Virtualizer {
     this.scrollElement = null;
     this.targetWindow = null;
     this.isScrolling = false;
-    this.scrollToIndexTimeoutId = null;
     this.measurementsCache = [];
     this.itemSizeCache = /* @__PURE__ */ new Map();
     this.pendingMeasuredCacheIndexes = [];
@@ -1811,7 +1810,7 @@ class Virtualizer {
       } else if (align === "end") {
         toOffset -= size;
       }
-      const maxOffset = this.getTotalSize() - size;
+      const maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
       return Math.max(Math.min(maxOffset, toOffset), 0);
     };
     this.getOffsetForIndex = (index, align = "auto") => {
@@ -1838,14 +1837,7 @@ class Virtualizer {
       ];
     };
     this.isDynamicMode = () => this.elementsCache.size > 0;
-    this.cancelScrollToIndex = () => {
-      if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
-        this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
-        this.scrollToIndexTimeoutId = null;
-      }
-    };
     this.scrollToOffset = (toOffset, { align = "start", behavior } = {}) => {
-      this.cancelScrollToIndex();
       if (behavior === "smooth" && this.isDynamicMode()) {
         console.warn(
           "The `smooth` scroll behavior is not fully supported with dynamic size."
@@ -1857,39 +1849,52 @@ class Virtualizer {
       });
     };
     this.scrollToIndex = (index, { align: initialAlign = "auto", behavior } = {}) => {
-      index = Math.max(0, Math.min(index, this.options.count - 1));
-      this.cancelScrollToIndex();
       if (behavior === "smooth" && this.isDynamicMode()) {
         console.warn(
           "The `smooth` scroll behavior is not fully supported with dynamic size."
         );
       }
-      const offsetAndAlign = this.getOffsetForIndex(index, initialAlign);
-      if (!offsetAndAlign) return;
-      const [offset, align] = offsetAndAlign;
-      this._scrollToOffset(offset, { adjustments: void 0, behavior });
-      if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
-        this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
-          this.scrollToIndexTimeoutId = null;
-          const elementInDOM = this.elementsCache.has(
-            this.options.getItemKey(index)
-          );
-          if (elementInDOM) {
-            const [latestOffset] = notUndefined(
-              this.getOffsetForIndex(index, align)
-            );
-            const currentScrollOffset = this.getScrollOffset();
-            if (!approxEqual(latestOffset, currentScrollOffset)) {
-              this.scrollToIndex(index, { align, behavior });
-            }
-          } else {
-            this.scrollToIndex(index, { align, behavior });
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      let attempts = 0;
+      const maxAttempts = 10;
+      const tryScroll = (currentAlign) => {
+        if (!this.targetWindow) return;
+        const offsetInfo = this.getOffsetForIndex(index, currentAlign);
+        if (!offsetInfo) {
+          console.warn("Failed to get offset for index:", index);
+          return;
+        }
+        const [offset, align] = offsetInfo;
+        this._scrollToOffset(offset, { adjustments: void 0, behavior });
+        this.targetWindow.requestAnimationFrame(() => {
+          const currentOffset = this.getScrollOffset();
+          const afterInfo = this.getOffsetForIndex(index, align);
+          if (!afterInfo) {
+            console.warn("Failed to get offset for index:", index);
+            return;
+          }
+          if (!approxEqual(afterInfo[0], currentOffset)) {
+            scheduleRetry(align);
           }
         });
-      }
+      };
+      const scheduleRetry = (align) => {
+        if (!this.targetWindow) return;
+        attempts++;
+        if (attempts < maxAttempts) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("Schedule retry", attempts, maxAttempts);
+          }
+          this.targetWindow.requestAnimationFrame(() => tryScroll(align));
+        } else {
+          console.warn(
+            `Failed to scroll to index ${index} after ${maxAttempts} attempts.`
+          );
+        }
+      };
+      tryScroll(initialAlign);
     };
     this.scrollBy = (delta, { behavior } = {}) => {
-      this.cancelScrollToIndex();
       if (behavior === "smooth" && this.isDynamicMode()) {
         console.warn(
           "The `smooth` scroll behavior is not fully supported with dynamic size."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/components",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "",
   "author": "Chizuki <chizukicn@outlook.com>",
   "license": "MIT",
@@ -30,8 +30,8 @@
   "dependencies": {
     "maybe-types": "^0.2.0",
     "tslx": "^0.1.1",
-    "@hoci/core": "0.8.0",
-    "@hoci/shared": "0.8.0"
+    "@hoci/core": "0.8.1",
+    "@hoci/shared": "0.8.1"
   },
   "scripts": {
     "build": "unbuild",