@v-c/virtual-list 0.0.1 → 1.0.0

package/dist/hooks/useOriginScroll.js

@@ -1,17 +1,21 @@
-import { ref as s } from "vue";
-function m(r, i, a, f) {
-  const e = s(!1);
-  let l = null;
-  function t() {
-    l && clearTimeout(l), e.value = !0, l = setTimeout(() => {
-      e.value = !1;
-    }, 50);
-  }
-  return (c, u, n = !1) => {
-    const o = c ? u < 0 && a.value || u > 0 && f.value : u < 0 && r.value || u > 0 && i.value;
-    return n && o ? (l && clearTimeout(l), e.value = !1) : (!o || e.value) && t(), !e.value && o;
-  };
+import { ref } from "vue";
+function useOriginScroll(isScrollAtTop, isScrollAtBottom, isScrollAtLeft, isScrollAtRight) {
+	const lockRef = ref(false);
+	let lockTimeout = null;
+	function lockScroll() {
+		if (lockTimeout) clearTimeout(lockTimeout);
+		lockRef.value = true;
+		lockTimeout = setTimeout(() => {
+			lockRef.value = false;
+		}, 50);
+	}
+	return (isHorizontal, delta, smoothOffset = false) => {
+		const originScroll = isHorizontal ? delta < 0 && isScrollAtLeft.value || delta > 0 && isScrollAtRight.value : delta < 0 && isScrollAtTop.value || delta > 0 && isScrollAtBottom.value;
+		if (smoothOffset && originScroll) {
+			if (lockTimeout) clearTimeout(lockTimeout);
+			lockRef.value = false;
+		} else if (!originScroll || lockRef.value) lockScroll();
+		return !lockRef.value && originScroll;
+	};
 }
-export {
-  m as default
-};
+export { useOriginScroll as default };

package/dist/hooks/useScrollDrag.cjs

@@ -1 +1,83 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("vue");function b(n){return Math.floor(n**.5)}function S(n,r){return("touches"in n?n.touches[0]:n)[r?"pageX":"pageY"]-window[r?"scrollX":"scrollY"]}function h(n,r,w){let o=null,t=null,c=!1,u=null,i=0;const d=()=>{u!==null&&(cancelAnimationFrame(u),u=null)},f=()=>{d(),u=requestAnimationFrame(()=>{w(i),f()})},l=()=>{c=!1,d()},E=s=>{if(s.target.draggable||s.button!==0)return;const e=s;e._virtualHandled||(e._virtualHandled=!0,c=!0)},L=s=>{if(c&&o){const e=S(s,!1),{top:v,bottom:a}=o.getBoundingClientRect();if(e<=v){const g=v-e;i=-b(g),f()}else if(e>=a){const g=e-a;i=b(g),f()}else d()}},m=()=>{o&&(o.removeEventListener("mousedown",E),o=null),t&&(t.removeEventListener("mouseup",l),t.removeEventListener("mousemove",L),t.removeEventListener("dragend",l),t=null),l()};p.onUnmounted(m),p.watch([n,r],([s,e],v,a)=>{s&&e?(o=e,t=e.ownerDocument,o.addEventListener("mousedown",E),t.addEventListener("mouseup",l),t.addEventListener("mousemove",L),t.addEventListener("dragend",l),a(()=>{m()})):m()},{immediate:!0})}exports.default=h;exports.getPageXY=S;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+function smoothScrollOffset(offset) {
+	return Math.floor(offset ** .5);
+}
+function getPageXY(e, horizontal) {
+	return ("touches" in e ? e.touches[0] : e)[horizontal ? "pageX" : "pageY"] - window[horizontal ? "scrollX" : "scrollY"];
+}
+function useScrollDrag(inVirtual, componentRef, onScrollOffset) {
+	let cachedElement = null;
+	let cachedDocument = null;
+	let mouseDownLock = false;
+	let rafId = null;
+	let offset = 0;
+	const stopScroll = () => {
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	};
+	const continueScroll = () => {
+		stopScroll();
+		rafId = requestAnimationFrame(() => {
+			onScrollOffset(offset);
+			continueScroll();
+		});
+	};
+	const clearDragState = () => {
+		mouseDownLock = false;
+		stopScroll();
+	};
+	const onMouseDown = (e) => {
+		if (e.target.draggable || e.button !== 0) return;
+		const event = e;
+		if (!event._virtualHandled) {
+			event._virtualHandled = true;
+			mouseDownLock = true;
+		}
+	};
+	const onMouseMove = (e) => {
+		if (mouseDownLock && cachedElement) {
+			const mouseY = getPageXY(e, false);
+			const { top, bottom } = cachedElement.getBoundingClientRect();
+			if (mouseY <= top) {
+				offset = -smoothScrollOffset(top - mouseY);
+				continueScroll();
+			} else if (mouseY >= bottom) {
+				offset = smoothScrollOffset(mouseY - bottom);
+				continueScroll();
+			} else stopScroll();
+		}
+	};
+	const teardown = () => {
+		if (cachedElement) {
+			cachedElement.removeEventListener("mousedown", onMouseDown);
+			cachedElement = null;
+		}
+		if (cachedDocument) {
+			cachedDocument.removeEventListener("mouseup", clearDragState);
+			cachedDocument.removeEventListener("mousemove", onMouseMove);
+			cachedDocument.removeEventListener("dragend", clearDragState);
+			cachedDocument = null;
+		}
+		clearDragState();
+	};
+	(0, vue.onUnmounted)(teardown);
+	(0, vue.watch)([inVirtual, componentRef], ([enabled, ele], _prev, onCleanup) => {
+		if (enabled && ele) {
+			cachedElement = ele;
+			cachedDocument = ele.ownerDocument;
+			cachedElement.addEventListener("mousedown", onMouseDown);
+			cachedDocument.addEventListener("mouseup", clearDragState);
+			cachedDocument.addEventListener("mousemove", onMouseMove);
+			cachedDocument.addEventListener("dragend", clearDragState);
+			onCleanup(() => {
+				teardown();
+			});
+		} else teardown();
+	}, { immediate: true });
+}
+exports.default = useScrollDrag;
+exports.getPageXY = getPageXY;

package/dist/hooks/useScrollDrag.js

@@ -1,51 +1,80 @@
-import { onUnmounted as h, watch as D } from "vue";
-function L(n) {
-  return Math.floor(n ** 0.5);
+import { onUnmounted, watch } from "vue";
+function smoothScrollOffset(offset) {
+	return Math.floor(offset ** .5);
 }
-function b(n, l) {
-  return ("touches" in n ? n.touches[0] : n)[l ? "pageX" : "pageY"] - window[l ? "scrollX" : "scrollY"];
+function getPageXY(e, horizontal) {
+	return ("touches" in e ? e.touches[0] : e)[horizontal ? "pageX" : "pageY"] - window[horizontal ? "scrollX" : "scrollY"];
 }
-function M(n, l, p) {
-  let o = null, t = null, c = !1, u = null, i = 0;
-  const d = () => {
-    u !== null && (cancelAnimationFrame(u), u = null);
-  }, m = () => {
-    d(), u = requestAnimationFrame(() => {
-      p(i), m();
-    });
-  }, r = () => {
-    c = !1, d();
-  }, w = (s) => {
-    if (s.target.draggable || s.button !== 0)
-      return;
-    const e = s;
-    e._virtualHandled || (e._virtualHandled = !0, c = !0);
-  }, E = (s) => {
-    if (c && o) {
-      const e = b(s, !1), { top: v, bottom: a } = o.getBoundingClientRect();
-      if (e <= v) {
-        const g = v - e;
-        i = -L(g), m();
-      } else if (e >= a) {
-        const g = e - a;
-        i = L(g), m();
-      } else
-        d();
-    }
-  }, f = () => {
-    o && (o.removeEventListener("mousedown", w), o = null), t && (t.removeEventListener("mouseup", r), t.removeEventListener("mousemove", E), t.removeEventListener("dragend", r), t = null), r();
-  };
-  h(f), D(
-    [n, l],
-    ([s, e], v, a) => {
-      s && e ? (o = e, t = e.ownerDocument, o.addEventListener("mousedown", w), t.addEventListener("mouseup", r), t.addEventListener("mousemove", E), t.addEventListener("dragend", r), a(() => {
-        f();
-      })) : f();
-    },
-    { immediate: !0 }
-  );
+function useScrollDrag(inVirtual, componentRef, onScrollOffset) {
+	let cachedElement = null;
+	let cachedDocument = null;
+	let mouseDownLock = false;
+	let rafId = null;
+	let offset = 0;
+	const stopScroll = () => {
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	};
+	const continueScroll = () => {
+		stopScroll();
+		rafId = requestAnimationFrame(() => {
+			onScrollOffset(offset);
+			continueScroll();
+		});
+	};
+	const clearDragState = () => {
+		mouseDownLock = false;
+		stopScroll();
+	};
+	const onMouseDown = (e) => {
+		if (e.target.draggable || e.button !== 0) return;
+		const event = e;
+		if (!event._virtualHandled) {
+			event._virtualHandled = true;
+			mouseDownLock = true;
+		}
+	};
+	const onMouseMove = (e) => {
+		if (mouseDownLock && cachedElement) {
+			const mouseY = getPageXY(e, false);
+			const { top, bottom } = cachedElement.getBoundingClientRect();
+			if (mouseY <= top) {
+				offset = -smoothScrollOffset(top - mouseY);
+				continueScroll();
+			} else if (mouseY >= bottom) {
+				offset = smoothScrollOffset(mouseY - bottom);
+				continueScroll();
+			} else stopScroll();
+		}
+	};
+	const teardown = () => {
+		if (cachedElement) {
+			cachedElement.removeEventListener("mousedown", onMouseDown);
+			cachedElement = null;
+		}
+		if (cachedDocument) {
+			cachedDocument.removeEventListener("mouseup", clearDragState);
+			cachedDocument.removeEventListener("mousemove", onMouseMove);
+			cachedDocument.removeEventListener("dragend", clearDragState);
+			cachedDocument = null;
+		}
+		clearDragState();
+	};
+	onUnmounted(teardown);
+	watch([inVirtual, componentRef], ([enabled, ele], _prev, onCleanup) => {
+		if (enabled && ele) {
+			cachedElement = ele;
+			cachedDocument = ele.ownerDocument;
+			cachedElement.addEventListener("mousedown", onMouseDown);
+			cachedDocument.addEventListener("mouseup", clearDragState);
+			cachedDocument.addEventListener("mousemove", onMouseMove);
+			cachedDocument.addEventListener("dragend", clearDragState);
+			onCleanup(() => {
+				teardown();
+			});
+		} else teardown();
+	}, { immediate: true });
 }
-export {
-  M as default,
-  b as getPageXY
-};
+export { useScrollDrag as default, getPageXY };

package/dist/hooks/useScrollTo.cjs

@@ -0,0 +1,97 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
+__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
+var MAX_TIMES = 10;
+function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
+	const scrollRef = (0, vue.shallowRef)();
+	const syncState = (0, vue.shallowRef)(null);
+	(0, vue.watch)([syncState, containerRef], () => {
+		if (syncState.value && syncState.value.times < MAX_TIMES) {
+			if (!containerRef.value) {
+				syncState.value = { ...syncState.value };
+				return;
+			}
+			collectHeight();
+			const { targetAlign, originAlign, index, offset } = syncState.value;
+			const height = containerRef.value.clientHeight;
+			let needCollectHeight = false;
+			let newTargetAlign = targetAlign ?? null;
+			let targetTop = null;
+			if (height) {
+				const mergedAlign = targetAlign || originAlign;
+				let stackTop = 0;
+				let itemTop = 0;
+				let itemBottom = 0;
+				const maxLen = Math.min(data.value.length - 1, index);
+				for (let i = 0; i <= maxLen; i += 1) {
+					const key = getKey(data.value[i]);
+					itemTop = stackTop;
+					const cacheHeight = heights.get(key);
+					itemBottom = itemTop + (cacheHeight === void 0 ? itemHeight.value : cacheHeight);
+					stackTop = itemBottom;
+				}
+				let leftHeight = mergedAlign === "top" ? offset : height - offset;
+				for (let i = maxLen; i >= 0; i -= 1) {
+					const key = getKey(data.value[i]);
+					const cacheHeight = heights.get(key);
+					if (cacheHeight === void 0) {
+						needCollectHeight = true;
+						break;
+					}
+					leftHeight -= cacheHeight;
+					if (leftHeight <= 0) break;
+				}
+				switch (mergedAlign) {
+					case "top":
+						targetTop = itemTop - offset;
+						break;
+					case "bottom":
+						targetTop = itemBottom - height + offset;
+						break;
+					default: {
+						const { scrollTop } = containerRef.value;
+						const scrollBottom = scrollTop + height;
+						if (itemTop < scrollTop) newTargetAlign = "top";
+						else if (itemBottom > scrollBottom) newTargetAlign = "bottom";
+					}
+				}
+				if (targetTop !== null) syncScrollTop(targetTop);
+				if (targetTop !== syncState.value.lastTop) needCollectHeight = true;
+			}
+			if (needCollectHeight) syncState.value = {
+				...syncState.value,
+				times: syncState.value.times + 1,
+				targetAlign: newTargetAlign,
+				lastTop: targetTop
+			};
+		} else if (process.env.NODE_ENV !== "production" && syncState.value?.times === MAX_TIMES) (0, __v_c_util.warning)(false, "Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.");
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return (arg) => {
+		if (arg === null || arg === void 0) {
+			triggerFlash();
+			return;
+		}
+		__v_c_util_dist_raf.default.cancel(scrollRef.value);
+		if (typeof arg === "number") syncScrollTop(arg);
+		else if (arg && typeof arg === "object") {
+			let index;
+			const { align } = arg;
+			if ("index" in arg) ({index} = arg);
+			else index = data.value.findIndex((item) => getKey(item) === arg.key);
+			const { offset = 0 } = arg;
+			syncState.value = {
+				times: 0,
+				index,
+				offset,
+				originAlign: align
+			};
+		}
+	};
+}
+exports.default = useScrollTo;

package/dist/hooks/useScrollTo.d.ts

@@ -0,0 +1,19 @@
+import { Key } from '@v-c/util/dist/type';
+import { Ref } from 'vue';
+import { GetKey } from '../interface.ts';
+import { default as CacheMap } from '../utils/CacheMap.ts';
+export type ScrollAlign = 'top' | 'bottom' | 'auto';
+export interface ScrollPos {
+    left?: number;
+    top?: number;
+}
+export type ScrollTarget = {
+    index: number;
+    align?: ScrollAlign;
+    offset?: number;
+} | {
+    key: Key;
+    align?: ScrollAlign;
+    offset?: number;
+};
+export default function useScrollTo(containerRef: Ref<HTMLDivElement>, data: Ref<any[]>, heights: CacheMap, itemHeight: Ref<number>, getKey: GetKey<any>, collectHeight: () => void, syncScrollTop: (newTop: number) => void, triggerFlash: () => void): (arg: number | ScrollTarget) => void;

package/dist/hooks/useScrollTo.js

@@ -0,0 +1,94 @@
+import { shallowRef, watch } from "vue";
+import { warning } from "@v-c/util";
+import raf from "@v-c/util/dist/raf";
+var MAX_TIMES = 10;
+function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
+	const scrollRef = shallowRef();
+	const syncState = shallowRef(null);
+	watch([syncState, containerRef], () => {
+		if (syncState.value && syncState.value.times < MAX_TIMES) {
+			if (!containerRef.value) {
+				syncState.value = { ...syncState.value };
+				return;
+			}
+			collectHeight();
+			const { targetAlign, originAlign, index, offset } = syncState.value;
+			const height = containerRef.value.clientHeight;
+			let needCollectHeight = false;
+			let newTargetAlign = targetAlign ?? null;
+			let targetTop = null;
+			if (height) {
+				const mergedAlign = targetAlign || originAlign;
+				let stackTop = 0;
+				let itemTop = 0;
+				let itemBottom = 0;
+				const maxLen = Math.min(data.value.length - 1, index);
+				for (let i = 0; i <= maxLen; i += 1) {
+					const key = getKey(data.value[i]);
+					itemTop = stackTop;
+					const cacheHeight = heights.get(key);
+					itemBottom = itemTop + (cacheHeight === void 0 ? itemHeight.value : cacheHeight);
+					stackTop = itemBottom;
+				}
+				let leftHeight = mergedAlign === "top" ? offset : height - offset;
+				for (let i = maxLen; i >= 0; i -= 1) {
+					const key = getKey(data.value[i]);
+					const cacheHeight = heights.get(key);
+					if (cacheHeight === void 0) {
+						needCollectHeight = true;
+						break;
+					}
+					leftHeight -= cacheHeight;
+					if (leftHeight <= 0) break;
+				}
+				switch (mergedAlign) {
+					case "top":
+						targetTop = itemTop - offset;
+						break;
+					case "bottom":
+						targetTop = itemBottom - height + offset;
+						break;
+					default: {
+						const { scrollTop } = containerRef.value;
+						const scrollBottom = scrollTop + height;
+						if (itemTop < scrollTop) newTargetAlign = "top";
+						else if (itemBottom > scrollBottom) newTargetAlign = "bottom";
+					}
+				}
+				if (targetTop !== null) syncScrollTop(targetTop);
+				if (targetTop !== syncState.value.lastTop) needCollectHeight = true;
+			}
+			if (needCollectHeight) syncState.value = {
+				...syncState.value,
+				times: syncState.value.times + 1,
+				targetAlign: newTargetAlign,
+				lastTop: targetTop
+			};
+		} else if (process.env.NODE_ENV !== "production" && syncState.value?.times === MAX_TIMES) warning(false, "Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.");
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return (arg) => {
+		if (arg === null || arg === void 0) {
+			triggerFlash();
+			return;
+		}
+		raf.cancel(scrollRef.value);
+		if (typeof arg === "number") syncScrollTop(arg);
+		else if (arg && typeof arg === "object") {
+			let index;
+			const { align } = arg;
+			if ("index" in arg) ({index} = arg);
+			else index = data.value.findIndex((item) => getKey(item) === arg.key);
+			const { offset = 0 } = arg;
+			syncState.value = {
+				times: 0,
+				index,
+				offset,
+				originAlign: align
+			};
+		}
+	};
+}
+export { useScrollTo as default };

package/dist/index.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./List.cjs");exports.default=e.default;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_List = require("./List.cjs");
+var src_default = require_List.default;
+exports.default = src_default;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 import { default as List } from './List';
-export type { ListProps, ListRef, ScrollConfig, ScrollInfo } from './List';
+export type { ListProps, ListRef, ScrollConfig, ScrollInfo, ScrollTo } from './List';
 export default List;

package/dist/index.js

@@ -1,4 +1,3 @@
-import o from "./List.js";
-export {
-  o as default
-};
+import List_default from "./List.js";
+var src_default = List_default;
+export { src_default as default };

package/dist/interface.cjs

@@ -1 +0,0 @@
-"use strict";

package/dist/interface.d.ts

@@ -1,4 +1,4 @@
-import { Key } from '../../util/src/type';
+import { Key } from '@v-c/util/dist/type';
 import { CSSProperties, VNode } from 'vue';
 export type RenderFunc<T> = (item: T, index: number, props: {
     style: CSSProperties;

package/dist/interface.js

@@ -1 +0,0 @@
-

package/dist/utils/CacheMap.cjs

@@ -1 +1,25 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class t{maps;id=0;diffRecords=new Map;constructor(){this.maps=Object.create(null)}set(e,s){this.diffRecords.set(e,this.maps[e]),this.maps[e]=s,this.id+=1}get(e){return this.maps[e]}resetRecord(){this.diffRecords.clear()}getRecord(){return this.diffRecords}}exports.default=t;
+Object.defineProperty(exports, "__esModule", { value: true });
+var CacheMap = class {
+	maps;
+	id = 0;
+	diffRecords = /* @__PURE__ */ new Map();
+	constructor() {
+		this.maps = Object.create(null);
+	}
+	set(key, value) {
+		this.diffRecords.set(key, this.maps[key]);
+		this.maps[key] = value;
+		this.id += 1;
+	}
+	get(key) {
+		return this.maps[key];
+	}
+	resetRecord() {
+		this.diffRecords.clear();
+	}
+	getRecord() {
+		return this.diffRecords;
+	}
+};
+var CacheMap_default = CacheMap;
+exports.default = CacheMap_default;

package/dist/utils/CacheMap.d.ts

@@ -1,4 +1,4 @@
-import { Key } from '../../../util/src/type';
+import { Key } from '@v-c/util/dist/type';
 declare class CacheMap {
     maps: Record<string, number>;
     id: number;

package/dist/utils/CacheMap.js

@@ -1,29 +1,24 @@
-class r {
-  maps;
-  // Used for cache key
-  // `useMemo` no need to update if `id` not change
-  id = 0;
-  diffRecords = /* @__PURE__ */ new Map();
-  constructor() {
-    this.maps = /* @__PURE__ */ Object.create(null);
-  }
-  set(s, t) {
-    this.diffRecords.set(s, this.maps[s]), this.maps[s] = t, this.id += 1;
-  }
-  get(s) {
-    return this.maps[s];
-  }
-  /**
-   * CacheMap will record the key changed.
-   * To help to know what's update in the next render.
-   */
-  resetRecord() {
-    this.diffRecords.clear();
-  }
-  getRecord() {
-    return this.diffRecords;
-  }
-}
-export {
-  r as default
+var CacheMap = class {
+	maps;
+	id = 0;
+	diffRecords = /* @__PURE__ */ new Map();
+	constructor() {
+		this.maps = Object.create(null);
+	}
+	set(key, value) {
+		this.diffRecords.set(key, this.maps[key]);
+		this.maps[key] = value;
+		this.id += 1;
+	}
+	get(key) {
+		return this.maps[key];
+	}
+	resetRecord() {
+		this.diffRecords.clear();
+	}
+	getRecord() {
+		return this.diffRecords;
+	}
 };
+var CacheMap_default = CacheMap;
+export { CacheMap_default as default };

package/dist/utils/isFirefox.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=typeof navigator=="object"&&/Firefox/i.test(navigator.userAgent);exports.default=e;
+Object.defineProperty(exports, "__esModule", { value: true });
+var isFF = typeof navigator === "object" && /Firefox/i.test(navigator.userAgent);
+var isFirefox_default = isFF;
+exports.default = isFirefox_default;

package/dist/utils/isFirefox.js

@@ -1,4 +1,2 @@
-const t = typeof navigator == "object" && /Firefox/i.test(navigator.userAgent);
-export {
-  t as default
-};
+var isFirefox_default = typeof navigator === "object" && /Firefox/i.test(navigator.userAgent);
+export { isFirefox_default as default };

package/dist/utils/scrollbarUtil.cjs

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=20;function S(t=0,i=0){let e=t/i*t;return isNaN(e)&&(e=0),e=Math.max(e,o),Math.floor(e)}exports.getSpinSize=S;
+var MIN_SIZE = 20;
+function getSpinSize(containerSize = 0, scrollRange = 0) {
+	let baseSize = containerSize / scrollRange * containerSize;
+	if (isNaN(baseSize)) baseSize = 0;
+	baseSize = Math.max(baseSize, MIN_SIZE);
+	return Math.floor(baseSize);
+}
+exports.getSpinSize = getSpinSize;

package/dist/utils/scrollbarUtil.js

@@ -1,7 +1,8 @@
-function i(e = 0, a = 0) {
-  let t = e / a * e;
-  return isNaN(t) && (t = 0), t = Math.max(t, 20), Math.floor(t);
+var MIN_SIZE = 20;
+function getSpinSize(containerSize = 0, scrollRange = 0) {
+	let baseSize = containerSize / scrollRange * containerSize;
+	if (isNaN(baseSize)) baseSize = 0;
+	baseSize = Math.max(baseSize, MIN_SIZE);
+	return Math.floor(baseSize);
 }
-export {
-  i as getSpinSize
-};
+export { getSpinSize };

package/docs/animate.less

@@ -0,0 +1,31 @@
+.motion {
+  transition: all 0.3s;
+}
+
+.item {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 16px;
+  overflow: hidden;
+  line-height: 31px;
+  position: relative;
+
+  &:hover {
+    background: rgba(255, 0, 0, 0.1);
+  }
+
+  &::after {
+    content: '';
+    border-bottom: 1px solid gray;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  button {
+    vertical-align: text-top;
+    margin-right: 8px;
+  }
+}