@yh-ui/hooks 0.1.17 → 0.1.21

package/dist/use-virtual-scroll/index.cjs

@@ -7,45 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 exports.useVirtualScroll = useVirtualScroll;
 var _vue = require("vue");
 function useVirtualScroll(options) {
-  const {
-    itemHeight,
-    containerHeight,
-    overscan = 3
-  } = options;
   const containerRef = (0, _vue.ref)(null);
   const scrollTop = (0, _vue.ref)(0);
   const itemsRef = (0, _vue.computed)(() => {
-    const items = options.items;
-    return Array.isArray(items) ? items : items.value;
+    return Array.isArray(options.items) ? options.items : options.items.value;
   });
-  const totalHeight = (0, _vue.computed)(() => itemsRef.value.length * itemHeight);
-  const visibleCount = (0, _vue.computed)(() => Math.ceil(containerHeight / itemHeight));
+  const itemHeightRef = (0, _vue.computed)(() => (0, _vue.unref)(options.itemHeight));
+  const containerHeightRef = (0, _vue.computed)(() => (0, _vue.unref)(options.containerHeight));
+  const overscanRef = (0, _vue.computed)(() => (0, _vue.unref)(options.overscan) ?? 3);
+  const totalHeight = (0, _vue.computed)(() => itemsRef.value.length * itemHeightRef.value);
   const startIndex = (0, _vue.computed)(() => {
-    const items = itemsRef.value;
-    if (items.length === 0) return 0;
-    const start = Math.floor(scrollTop.value / itemHeight);
-    return Math.max(0, start - overscan);
+    if (itemsRef.value.length === 0) return 0;
+    const start = Math.floor(scrollTop.value / itemHeightRef.value);
+    return Math.max(0, start - overscanRef.value);
   });
   const endIndex = (0, _vue.computed)(() => {
-    const items = itemsRef.value;
-    if (items.length === 0) return 0;
-    const start = Math.floor(scrollTop.value / itemHeight);
-    const end = start + visibleCount.value;
-    return Math.min(items.length, end + overscan);
+    if (itemsRef.value.length === 0) return 0;
+    const end = Math.ceil((scrollTop.value + containerHeightRef.value) / itemHeightRef.value);
+    return Math.min(itemsRef.value.length, end + overscanRef.value);
   });
   const visibleItems = (0, _vue.computed)(() => {
-    const items = itemsRef.value;
-    if (items.length === 0) return [];
-    return items.slice(startIndex.value, endIndex.value);
+    return itemsRef.value.slice(startIndex.value, endIndex.value);
   });
-  const offsetY = (0, _vue.computed)(() => startIndex.value * itemHeight);
+  const offsetY = (0, _vue.computed)(() => startIndex.value * itemHeightRef.value);
   const onScroll = event => {
     const target = event.target;
-    scrollTop.value = target.scrollTop;
+    if (target) scrollTop.value = target.scrollTop;
   };
   const scrollToIndex = index => {
     if (containerRef.value) {
-      const targetScrollTop = index * itemHeight;
+      const targetScrollTop = index * itemHeightRef.value;
       containerRef.value.scrollTop = targetScrollTop;
       scrollTop.value = targetScrollTop;
     }
@@ -54,8 +45,8 @@ function useVirtualScroll(options) {
     visibleItems,
     totalHeight,
     offsetY,
-    startIndex: (0, _vue.computed)(() => startIndex.value),
-    endIndex: (0, _vue.computed)(() => endIndex.value),
+    startIndex,
+    endIndex,
     onScroll,
     scrollToIndex,
     containerRef

package/dist/use-virtual-scroll/index.d.ts

@@ -1,17 +1,13 @@
-/**
- * useVirtualScroll - 虚拟滚动 Hook
- * @description 用于大数据量列表的虚拟滚动渲染
- */
 import { type Ref, type ComputedRef } from 'vue';
 export interface VirtualScrollOptions<T = unknown> {
     /** 每项高度 */
-    itemHeight: number;
+    itemHeight: number | Ref<number>;
     /** 容器高度 */
-    containerHeight: number;
+    containerHeight: number | Ref<number>;
     /** 数据列表 */
     items: Ref<T[]> | T[];
     /** 上下额外渲染数量 */
-    overscan?: number;
+    overscan?: number | Ref<number>;
 }
 export interface VirtualScrollReturn<T = unknown> {
     /** 可见项列表 */
@@ -21,9 +17,9 @@ export interface VirtualScrollReturn<T = unknown> {
     /** Y轴偏移量 */
     offsetY: ComputedRef<number>;
     /** 起始索引 */
-    startIndex: Ref<number>;
+    startIndex: ComputedRef<number>;
     /** 结束索引 */
-    endIndex: Ref<number>;
+    endIndex: ComputedRef<number>;
     /** 滚动事件处理 */
     onScroll: (event: Event) => void;
     /** 滚动到指定索引 */

package/dist/use-virtual-scroll/index.mjs

@@ -1,40 +1,35 @@
-import { ref, computed } from "vue";
+import { ref, computed, unref } from "vue";
 export function useVirtualScroll(options) {
-  const { itemHeight, containerHeight, overscan = 3 } = options;
   const containerRef = ref(null);
   const scrollTop = ref(0);
   const itemsRef = computed(() => {
-    const items = options.items;
-    return Array.isArray(items) ? items : items.value;
+    return Array.isArray(options.items) ? options.items : options.items.value;
   });
-  const totalHeight = computed(() => itemsRef.value.length * itemHeight);
-  const visibleCount = computed(() => Math.ceil(containerHeight / itemHeight));
+  const itemHeightRef = computed(() => unref(options.itemHeight));
+  const containerHeightRef = computed(() => unref(options.containerHeight));
+  const overscanRef = computed(() => unref(options.overscan) ?? 3);
+  const totalHeight = computed(() => itemsRef.value.length * itemHeightRef.value);
   const startIndex = computed(() => {
-    const items = itemsRef.value;
-    if (items.length === 0) return 0;
-    const start = Math.floor(scrollTop.value / itemHeight);
-    return Math.max(0, start - overscan);
+    if (itemsRef.value.length === 0) return 0;
+    const start = Math.floor(scrollTop.value / itemHeightRef.value);
+    return Math.max(0, start - overscanRef.value);
   });
   const endIndex = computed(() => {
-    const items = itemsRef.value;
-    if (items.length === 0) return 0;
-    const start = Math.floor(scrollTop.value / itemHeight);
-    const end = start + visibleCount.value;
-    return Math.min(items.length, end + overscan);
+    if (itemsRef.value.length === 0) return 0;
+    const end = Math.ceil((scrollTop.value + containerHeightRef.value) / itemHeightRef.value);
+    return Math.min(itemsRef.value.length, end + overscanRef.value);
   });
   const visibleItems = computed(() => {
-    const items = itemsRef.value;
-    if (items.length === 0) return [];
-    return items.slice(startIndex.value, endIndex.value);
+    return itemsRef.value.slice(startIndex.value, endIndex.value);
   });
-  const offsetY = computed(() => startIndex.value * itemHeight);
+  const offsetY = computed(() => startIndex.value * itemHeightRef.value);
   const onScroll = (event) => {
     const target = event.target;
-    scrollTop.value = target.scrollTop;
+    if (target) scrollTop.value = target.scrollTop;
   };
   const scrollToIndex = (index) => {
     if (containerRef.value) {
-      const targetScrollTop = index * itemHeight;
+      const targetScrollTop = index * itemHeightRef.value;
       containerRef.value.scrollTop = targetScrollTop;
       scrollTop.value = targetScrollTop;
     }
@@ -43,8 +38,8 @@ export function useVirtualScroll(options) {
     visibleItems,
     totalHeight,
     offsetY,
-    startIndex: computed(() => startIndex.value),
-    endIndex: computed(() => endIndex.value),
+    startIndex,
+    endIndex,
     onScroll,
     scrollToIndex,
     containerRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/hooks",
-  "version": "0.1.17",
+  "version": "0.1.21",
   "description": "YH-UI composition hooks",
   "type": "module",
   "sideEffects": false,
@@ -24,8 +24,8 @@
   ],
   "dependencies": {
     "dayjs": "^1.11.19",
-    "@yh-ui/locale": "0.1.17",
-    "@yh-ui/utils": "0.1.17"
+    "@yh-ui/locale": "0.1.21",
+    "@yh-ui/utils": "0.1.21"
   },
   "devDependencies": {
     "vue": "^3.5.27",
@@ -52,6 +52,8 @@
   "license": "MIT",
   "scripts": {
     "build": "unbuild",
-    "dev": "unbuild --stub"
+    "dev": "unbuild --stub",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint ."
   }
 }