@neatui/vue 4.8.1 → 5.0.0

package/src/components/loader/TableLoader/TableLoader.vue

@@ -1,14 +1,30 @@
 <template>
-  <div class="full" ui-scroll=":x :y">
+  <div
+    ref="scrollRef"
+    class="full"
+    ui-scroll=":x :y"
+    :scroll-side-l="scrollSide.l"
+    :scroll-side-r="scrollSide.r"
+    :style="virtualEnabled ? { overflowAnchor: 'none' } : undefined"
+    @scroll.passive="onScroll"
+  >
     <!-- 桌面端 -->
-    <table ui-hide="<pad" :ui-table="theme" ref="tableRef">
+    <table v-if="showTable" :ui-hide="layout === 'auto' ? '<pad' : undefined" :ui-table="theme" ref="tableRef">
       <thead class="table-head-fixed">
         <tr>
-          <th v-if="selected" min-width col-fixed="1">
+          <th v-if="selected" :ref="(el: any) => bindFixedCell(el, '__select')" min-width col-fixed="1" :col-fixed-side="fixedSide('__select')" :style="fixedStyle('__select')">
             <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="all" /><span></span></label>
           </th>
           <template v-for="(col, idx) in state.table" :key="idx">
-            <th v-if="!col.__close" v-bind="colSizeAttrs(col)" :col-fixed="col.fixed" :col-fixed-side="col.fixed || 'l'" :data-field="col.field">
+            <th
+              v-if="!col.__close"
+              :ref="col.fixed ? (el: any) => bindFixedCell(el, col.field) : undefined"
+              v-bind="colSizeAttrs(col)"
+              :col-fixed="col.fixed"
+              :col-fixed-side="fixedSide(col.field)"
+              :style="fixedStyle(col.field)"
+              :data-field="col.field"
+            >
               <slot :name="`thead-${col.field}`" :col="col" :idx="idx">
                 <div :class="!slots.operate && idx === state.__last ? 'ar' : ''" v-bind="col.thead">
                   <span class="ux-none" ui-flex="row rm" v-if="col.order === 0 || col.order === 1 || col.order === 2" @click="fSetOrder(col)">
@@ -43,7 +59,14 @@
               </slot>
             </th>
           </template>
-          <th v-if="slots.operate" col-fixed="r" class="fs-sl nowrap ar">
+          <th
+            v-if="slots.operate"
+            :ref="(el: any) => bindFixedCell(el, '__operate')"
+            col-fixed="r"
+            :col-fixed-side="fixedSide('__operate')"
+            :style="fixedStyle('__operate')"
+            class="fs-sl nowrap ar"
+          >
             <div ui-flex="row rm">
               <span>{{ words['operate'] || '操作' }}</span>
               <IFollowView v-if="tools" class="lh-xs" tipBoxClass="n-no">
@@ -74,8 +97,17 @@
       </thead>
       <tbody :ui-tbody-load="state.load">
         <template v-if="lists.length">
-          <tr v-for="(item, idx) in lists" :key="idx" v-bind="rows.attrs" v-on="event(rows.event, item, 'td')">
-            <td v-if="selected" col-fixed="1" min-width>
+          <tr v-if="virtualSlice.padTop" class="table-virtual-pad" aria-hidden="true">
+            <td :colspan="columnCount" :style="virtualPadStyle(virtualSlice.padTop)"></td>
+          </tr>
+          <tr
+            v-for="{ item, idx } in virtualSlice.rows"
+            :key="rowKeyOf(item, idx)"
+            :ref="virtualEnabled ? (el: any) => bindVirtualRow(el, item) : undefined"
+            v-bind="rows.attrs"
+            v-on="event(rows.event, item, 'td')"
+          >
+            <td v-if="selected" col-fixed="1" min-width :col-fixed-side="fixedSide('__select')" :style="fixedStyle('__select')">
               <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="item.__selected" /><span></span></label>
             </td>
             <template v-for="(col, cid) in state.table" :key="cid">
@@ -84,23 +116,29 @@
                 :class="`${!slots.operate && cid === state.__last ? 'ar' : ''}`"
                 v-bind="colSizeAttrs(col)"
                 :col-fixed="col.fixed"
-                :col-fixed-side="col.fixed || 'l'"
+                :col-fixed-side="fixedSide(col.field)"
+                :style="fixedStyle(col.field)"
                 :data-field="col.field"
               >
                 <slot :name="col.field" :col="col" :item="item" :idx="idx"><TableRender :node="col" :data="item" /></slot>
               </td>
             </template>
-            <td v-if="slots.operate" col-fixed="r" class="ar"><slot name="operate" :item="item" :idx="idx"></slot></td>
+            <td v-if="slots.operate" col-fixed="r" class="ar" :col-fixed-side="fixedSide('__operate')" :style="fixedStyle('__operate')">
+              <slot name="operate" :item="item" :idx="idx"></slot>
+            </td>
+          </tr>
+          <tr v-if="virtualSlice.padBottom" class="table-virtual-pad" aria-hidden="true">
+            <td :colspan="columnCount" :style="virtualPadStyle(virtualSlice.padBottom)"></td>
           </tr>
         </template>
       </tbody>
     </table>
     <!-- 移动端 -->
-    <div ui-hide=">mob">
+    <div v-if="showList" :ui-hide="layout === 'auto' ? '>mob' : undefined">
       <ul>
         <li class="bg-fore r-sm my-sl nx-ms ny-sl" ui-flex="row xm">
           <div>
-            <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="all" /><span>全选</span></label>
+            <label v-if="selected" class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="all" /><span>全选</span></label>
           </div>
           <div>
             <IFollowView>
@@ -120,7 +158,7 @@
             </IFollowView>
           </div>
         </li>
-        <li v-for="(item, idx) in lists" :key="idx" class="bg-fore r-sm my-sl n-ms">
+        <li v-for="(item, idx) in lists" :key="rowKeyOf(item, idx)" class="bg-fore r-sm my-sl n-ms">
           <table>
             <tbody>
               <template v-for="(col, idx) in state.table" :key="idx">
@@ -146,12 +184,12 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, onMounted, reactive, watch, ref, nextTick, onUnmounted, useSlots } from 'vue';
+  import { computed, nextTick, onMounted, reactive, watch, ref, onUnmounted, useSlots, getCurrentInstance } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import IDraggable from '../../basic/IDraggable.vue';
   import { IFollowView, Icon } from '../../basic';
-  import { itable } from '@fekit/itable';
   import TableRender from './TableRender.vue';
+  import { firstRowEndingAfter, virtualOffsets, virtualRange } from './virtual';
   import { isFunction, isObject, hasOwnProp, deepcopy, env } from '@fekit/utils';
 
   const route = useRoute();
@@ -166,7 +204,7 @@
     label: string | (() => string);
     field: string | (() => string);
     width?: 'min' | 'max' | string | (() => string);
-    fixed?: string | (() => string);
+    fixed?: string | number | boolean | (() => string);
     paths?: string | (() => string);
     thead?: Record<string, any> | ((data: any) => Record<string, any>);
     tbody?: Record<string, any> | ((data: any) => Record<string, any>);
@@ -185,7 +223,7 @@
     __order?: 0 | 1 | 2 | number;
     __sort?: number;
     close?: boolean | number | 'always';
-    fixed?: string | number;
+    fixed?: string | number | boolean;
     thead?: any;
     field: any;
     label: any;
@@ -202,6 +240,11 @@
       event?: { [key: string]: any };
     };
     allSelected?: boolean;
+    layout?: 'auto' | 'table' | 'list';
+    /** 行的稳定标识：字段名或函数，默认用下标 */
+    rowKey?: string | ((item: any, idx: number) => string | number);
+    /** 虚拟滚动（仅表格形态）：只渲染可视区附近的行，需要容器限定高度 */
+    virtual?: boolean | { estimate?: number; overscan?: number };
   }
   // 外部入参
   const props: any = withDefaults(defineProps<Props>(), {
@@ -213,6 +256,32 @@
     rows: () => ({ attrs: {}, event: {} }),
     theme: '@b sz:l',
     allSelected: false,
+    layout: 'auto',
+    virtual: false,
+  });
+
+  /**
+   * 桌面表格与移动列表只渲染一套：两套都渲染再用 CSS 隐藏，
+   * 隐藏的那套照样要为每行每列创建组件和 DOM，大表开销翻倍。
+   * auto 模式下，服务端渲染和客户端激活时仍两套都出（交给 ui-hide），保证结构一致；
+   * 挂载后按与 ui-hide 相同的断点（<800px 为移动端）只保留一套。
+   */
+  const mobileQuery = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(max-width: 799px)') : null;
+  // 激活（hydration）时组件的 vnode 已指向服务端 DOM，这时不能提前裁掉任何一套
+  const hydrating = !!getCurrentInstance()?.vnode.el;
+  const isMobile = ref<boolean | null>(mobileQuery && !hydrating ? mobileQuery.matches : null);
+  const onMobileChange = (event: MediaQueryListEvent) => {
+    isMobile.value = event.matches;
+  };
+  const showTable = computed(() => props.layout === 'table' || (props.layout !== 'list' && isMobile.value !== true));
+  const showList = computed(() => props.layout === 'list' || (props.layout !== 'table' && isMobile.value !== false));
+  onMounted(() => {
+    if (!mobileQuery) return;
+    isMobile.value = mobileQuery.matches;
+    mobileQuery.addEventListener?.('change', onMobileChange);
+  });
+  onUnmounted(() => {
+    mobileQuery?.removeEventListener?.('change', onMobileChange);
   });
 
   // 内部数据
@@ -233,7 +302,7 @@
   const name = computed(() => 'confs' + route.path?.replace(/\//g, '_')) || '';
 
   const colSizeAttrs = (col: TableColumn) => {
-    const raw = isFunction(col.width) ? col.width() : col.width;
+    const raw = typeof col.width === 'function' ? col.width() : col.width;
     const width = raw == null ? '' : String(raw).trim();
     const attrs: Record<string, any> = {};
     if (width === 'min' || (!width && col.fixed)) attrs['min-width'] = '';
@@ -242,23 +311,27 @@
     return attrs;
   };
 
-  // 全选状态
+  // 全选状态。未开启多选时不读也不写 __selected，避免往业务数据里塞字段、对每行建依赖
   const all = computed({
     get() {
-      return props.lists.every((item: any) => item.__selected === true);
+      if (!props.selected) return false;
+      return props.lists.length > 0 && props.lists.every((item: any) => item.__selected === true);
     },
     set(value: boolean) {
+      if (!props.selected) return;
       props.lists.forEach((item: any) => {
         item.__selected = value;
       });
     },
   });
 
-  // 向内同步
+  // 向内同步：只在与当前状态不一致时改写。
+  // 挂载时 allSelected=false 不能把预选的行清掉；
+  // v-model:allSelected 下取消单行会回传 false，也不能借此清空其余行
   watch(
     () => props.allSelected,
     (v) => {
-      all.value = v;
+      if (props.selected && v !== all.value) all.value = v;
     },
     { immediate: true },
   );
@@ -278,6 +351,9 @@
       state.__last = 0;
       state.table = deepcopy(props.table || [])
         ?.map((col: TableColumn, idx: number) => {
+          // fixed: true 等同左固定（否则排序时不会被归到左侧）
+          if (col.fixed === true) col.fixed = 'l';
+
           // 标题处理
           if (isFunction(col.label)) {
             col.label = col.label(props.lists);
@@ -356,24 +432,254 @@
   );
 
   const tableRef: any = ref(null);
-  onMounted(() => {
-    nextTick(() => {
-      if (tableRef.value) {
-        itable.listen(tableRef.value);
-      }
+  const scrollRef = ref<HTMLElement | null>(null);
+
+  /**
+   * 固定列：sticky 由 CSS 负责，这里只算多个固定列叠放时的 left / right 偏移，
+   * 并只给紧挨滚动区的那一列（左侧最后一列、右侧第一列）标 col-fixed-side 显示阴影。
+   * 列宽取自 ResizeObserver 条目，不调用 getBoundingClientRect，不强制重排。
+   * 原先由 @fekit/itable 完成：全局单例（多个表格互相覆盖）、按列位置而非 fixed 值判断左右，
+   * 并在回调里逐列 getBoundingClientRect。
+   */
+  const fixedWidths = reactive<Record<string, number>>({});
+  const fixedCells = new Map<string, Element>();
+  const fixedKeyOf = new WeakMap<Element, string>();
+  let fixedObserver: ResizeObserver | undefined;
+  const bindFixedCell = (el: Element | null, key: string) => {
+    const previous = fixedCells.get(key);
+    if (previous === el) return;
+    if (previous) {
+      fixedObserver?.unobserve(previous);
+      fixedCells.delete(key);
+    }
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    fixedObserver ||= new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const cellKey = fixedKeyOf.get(entry.target);
+        if (!cellKey) return;
+        const box = entry.borderBoxSize?.[0];
+        const width = box ? box.inlineSize : (entry.target as HTMLElement).offsetWidth;
+        if (Math.abs((fixedWidths[cellKey] || 0) - width) > 0.5) fixedWidths[cellKey] = width;
+      });
+      updateScrollSide();
+    });
+    fixedKeyOf.set(el, key);
+    fixedCells.set(key, el);
+    fixedObserver.observe(el);
+  };
+  const fixedLayout = computed(() => {
+    const cells: Array<{ key: string; side: 'l' | 'r' | '' }> = [];
+    if (props.selected) cells.push({ key: '__select', side: 'l' });
+    state.table.forEach((col) => {
+      if (col.__close) return;
+      cells.push({ key: col.field, side: col.fixed ? (col.fixed === 'r' ? 'r' : 'l') : '' });
     });
+    if (slots.operate) cells.push({ key: '__operate', side: 'r' });
+    const offsets: Record<string, { left?: string; right?: string }> = {};
+    const sides: Record<string, 'l' | 'r'> = {};
+    let left = 0;
+    let lastLeft = '';
+    cells.forEach(({ key, side }) => {
+      if (side !== 'l') return;
+      offsets[key] = { left: `${left}px` };
+      left += fixedWidths[key] || 0;
+      lastLeft = key;
+    });
+    let right = 0;
+    let firstRight = '';
+    [...cells].reverse().forEach(({ key, side }) => {
+      if (side !== 'r') return;
+      offsets[key] = { right: `${right}px` };
+      right += fixedWidths[key] || 0;
+      firstRight = key;
+    });
+    if (lastLeft) sides[lastLeft] = 'l';
+    if (firstRight) sides[firstRight] = 'r';
+    return { offsets, sides };
   });
+  const fixedStyle = (key: string) => fixedLayout.value.offsets[key];
+  const fixedSide = (key: string) => fixedLayout.value.sides[key];
+
+  // 滚到最左 / 最右时隐藏对应一侧固定列的阴影（样式见 [scroll-side-l / r]）
+  const scrollSide = reactive({ l: '1', r: '1' });
+  let sideFrame = 0;
+  const updateScrollSide = () => {
+    const el = scrollRef.value;
+    if (!el) return;
+    const overflowing = el.scrollWidth > el.clientWidth;
+    const l = !overflowing || el.scrollLeft <= 0 ? '1' : '0';
+    const r = !overflowing || el.scrollLeft + el.clientWidth >= el.scrollWidth - 1 ? '1' : '0';
+    if (scrollSide.l !== l) scrollSide.l = l;
+    if (scrollSide.r !== r) scrollSide.r = r;
+  };
+  const onScroll = () => {
+    onVirtualScroll();
+    if (sideFrame) return;
+    sideFrame = requestAnimationFrame(() => {
+      sideFrame = 0;
+      updateScrollSide();
+    });
+  };
+  // 容器或表格尺寸变化（窗口缩放、列显隐、数据变化）都可能改变是否出现横向滚动
+  let sideObserver: ResizeObserver | undefined;
   watch(
-    () => state.table,
-    () => {
-      nextTick(() => {
-        itable.listen(tableRef.value);
+    [scrollRef, tableRef],
+    ([area, table]) => {
+      sideObserver?.disconnect();
+      if (typeof ResizeObserver === 'undefined' || !area) return;
+      sideObserver ||= new ResizeObserver(updateScrollSide);
+      sideObserver.observe(area);
+      if (table) sideObserver.observe(table);
+    },
+    { flush: 'post', immediate: true },
+  );
+  onUnmounted(() => {
+    if (sideFrame) cancelAnimationFrame(sideFrame);
+    fixedObserver?.disconnect();
+    sideObserver?.disconnect();
+    fixedCells.clear();
+  });
+
+  // 行标识
+  const rowKeyOf = (item: any, idx: number) => {
+    const key = props.rowKey;
+    if (isFunction(key)) return key(item, idx);
+    if (key && item && typeof item === 'object') return item[key] ?? idx;
+    return idx;
+  };
+
+  /**
+   * 虚拟滚动：上下用占位行撑出滚动高度，只渲染可视区附近的行。
+   * 行高各不相同（单元格可能换行、放表单控件），按行对象缓存实测高度，
+   * 没测过的按已测平均值估算；行对象不变则删行、排序后缓存仍有效。
+   */
+  const virtualEnabled = computed(() => !!props.virtual);
+  const virtualEstimate = computed(() => (isObject(props.virtual) && props.virtual.estimate) || 48);
+  const virtualOverscan = computed(() => (isObject(props.virtual) && props.virtual.overscan) || 600);
+  const scrollTop = ref(0);
+  // 拿到容器真实高度前先按一屏估算
+  const viewportHeight = ref(800);
+  const rowHeights = new WeakMap<object, number>();
+  const rowHeightsVersion = ref(0);
+  let measuredTotal = 0;
+  let measuredCount = 0;
+  const estimatedRowHeight = () => (measuredCount ? measuredTotal / measuredCount : virtualEstimate.value);
+
+  const columnCount = computed(
+    () => (props.selected ? 1 : 0) + state.table.filter((col) => !col.__close).length + (slots.operate ? 1 : 0),
+  );
+  const virtualPadStyle = (height: number) => ({ height: `${height}px`, padding: 0, border: 0, background: 'transparent' });
+
+  const virtualOffsetsAll = computed(() => {
+    void rowHeightsVersion.value;
+    const estimate = estimatedRowHeight();
+    return virtualOffsets(props.lists.map((item: any) => (item && typeof item === 'object' && rowHeights.get(item)) || estimate));
+  });
+  const virtualSlice = computed(() => {
+    if (!virtualEnabled.value) {
+      return { rows: props.lists.map((item: any, idx: number) => ({ item, idx })), padTop: 0, padBottom: 0 };
+    }
+    const offsets = virtualOffsetsAll.value;
+    const { start, end } = virtualRange(offsets, scrollTop.value, viewportHeight.value, virtualOverscan.value);
+    const rows = [];
+    for (let idx = start; idx < end; idx += 1) rows.push({ item: props.lists[idx], idx });
+    return { rows, padTop: offsets[start] || 0, padBottom: Math.max(0, offsets[offsets.length - 1] - (offsets[end] || 0)) };
+  });
+
+  let scrollFrame = 0;
+  const onVirtualScroll = () => {
+    if (!virtualEnabled.value || scrollFrame) return;
+    scrollFrame = requestAnimationFrame(() => {
+      scrollFrame = 0;
+      if (scrollRef.value) scrollTop.value = scrollRef.value.scrollTop;
+    });
+  };
+
+  // 行高取自 ResizeObserver 条目（布局之后回调，不强制重排）
+  const rowItems = new WeakMap<Element, object>();
+  let rowObserver: ResizeObserver | undefined;
+  const onRowResize = (entries: ResizeObserverEntry[]) => {
+    if (!virtualEnabled.value) return;
+    const before = virtualOffsetsAll.value;
+    let changed = false;
+    for (const entry of entries) {
+      const item = rowItems.get(entry.target);
+      if (!item) continue;
+      const box = entry.borderBoxSize?.[0];
+      const height = box ? box.blockSize : entry.contentRect.height;
+      if (!height) continue;
+      const previous = rowHeights.get(item);
+      if (previous !== undefined && Math.abs(previous - height) < 0.5) continue;
+      if (previous === undefined) measuredCount += 1;
+      measuredTotal += height - (previous ?? 0);
+      rowHeights.set(item, height);
+      changed = true;
+    }
+    if (!changed) return;
+    rowHeightsVersion.value += 1;
+    // 实测值和平均估算都会让上方偏移变化，按视口顶部那一行锚定补偿滚动位置，避免正在看的内容跳动
+    const el = scrollRef.value;
+    if (!el || el.scrollTop <= 0) return;
+    const anchor = firstRowEndingAfter(before, el.scrollTop);
+    const shift = virtualOffsetsAll.value[anchor] - before[anchor];
+    if (Math.abs(shift) < 0.5) return;
+    // 等占位行按新高度渲染后再改 scrollTop，否则可能被旧的滚动高度截断
+    nextTick(() => {
+      el.scrollTop += shift;
+      scrollTop.value = el.scrollTop;
+    });
+  };
+  // 按元素记录行对象：未设 rowKey 时同一个 <tr> 会被复用给别的行，按行对象反查会漏掉仍在显示的元素
+  const observedRows = new Set<Element>();
+  let pruneQueued = false;
+  const pruneRows = () => {
+    pruneQueued = false;
+    // 关掉虚拟滚动时 <tr> 还在文档里但不再绑定，也要一并释放
+    for (const row of observedRows) {
+      if (row.isConnected && virtualEnabled.value) continue;
+      rowObserver?.unobserve(row);
+      rowItems.delete(row);
+      observedRows.delete(row);
+    }
+  };
+  const bindVirtualRow = (el: Element | null, item: any) => {
+    // 卸载时 ref 回调拿到 null，元素此刻还在文档里，等更新完再清理
+    if (!el) {
+      if (!pruneQueued) {
+        pruneQueued = true;
+        nextTick(pruneRows);
+      }
+      return;
+    }
+    if (!item || typeof item !== 'object' || rowItems.get(el) === item || typeof ResizeObserver === 'undefined') return;
+    rowObserver ||= new ResizeObserver(onRowResize);
+    rowItems.set(el, item);
+    // 重新 observe 会立即回调一次，换了行对象的元素也能测到新行的高度
+    rowObserver.unobserve(el);
+    rowObserver.observe(el);
+    observedRows.add(el);
+  };
+
+  let viewportObserver: ResizeObserver | undefined;
+  watch(
+    [virtualEnabled, scrollRef],
+    ([enabled, el]) => {
+      viewportObserver?.disconnect();
+      viewportObserver = undefined;
+      if (!enabled || !el || typeof ResizeObserver === 'undefined') return;
+      scrollTop.value = el.scrollTop;
+      viewportObserver = new ResizeObserver(([entry]) => {
+        if (entry?.contentRect.height) viewportHeight.value = entry.contentRect.height;
       });
+      viewportObserver.observe(el);
     },
-    { deep: true },
+    { flush: 'post', immediate: true },
   );
   onUnmounted(() => {
-    itable.remove();
+    if (scrollFrame) cancelAnimationFrame(scrollFrame);
+    viewportObserver?.disconnect();
+    rowObserver?.disconnect();
+    observedRows.clear();
   });
 
   // 设置字段升降序

package/src/components/loader/TableLoader/virtual.ts

@@ -0,0 +1,27 @@
+/** 每行顶部的累计偏移，末尾多一项为总高度 */
+export const virtualOffsets = (heights: ArrayLike<number>) => {
+  const offsets = new Float64Array(heights.length + 1);
+  for (let i = 0; i < heights.length; i += 1) offsets[i + 1] = offsets[i] + heights[i];
+  return offsets;
+};
+
+/** 第一个底边越过 y 的行 */
+export const firstRowEndingAfter = (offsets: Float64Array, y: number) => {
+  let low = 0;
+  let high = offsets.length - 1;
+  while (low < high) {
+    const mid = (low + high) >> 1;
+    if (offsets[mid + 1] > y) high = mid;
+    else low = mid + 1;
+  }
+  return low;
+};
+
+/** 可视区（上下各留 overscan 像素）内的行区间 [start, end) */
+export const virtualRange = (offsets: Float64Array, scrollTop: number, viewport: number, overscan: number) => {
+  const count = offsets.length - 1;
+  if (count <= 0) return { start: 0, end: 0 };
+  const start = Math.min(count - 1, firstRowEndingAfter(offsets, Math.max(0, scrollTop - overscan)));
+  const end = Math.max(start + 1, Math.min(count, firstRowEndingAfter(offsets, scrollTop + viewport + overscan) + 1));
+  return { start, end };
+};

package/src/components/loader/index.ts

@@ -1,4 +1,6 @@
 import FormLoader from './FormLoader/FormLoader.vue';
+export { registerField } from './FormLoader/FormRender.vue';
+export type { FormValue, FormItem, FormArray, FormRule, FormContext, FormArrayContext, FormLinkage, FormError, FormValidateResult, FormLoaderExpose, FieldEntry } from './FormLoader/FormRender.vue';
 import LimitLoader from './LimitLoader';
 export * from './TableLoader/index';
 import TableLoader from './TableLoader/TableLoader.vue';

package/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference path="./shims-vue.d.ts" />
+
 // 数据
 export * from './store/frame';
 export * from './utils/theme';

package/.prettierrc

@@ -1,12 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": true,
-  "arrowParens": "always",
-  "trailingComma": "all",
-  "singleQuote": true,
-  "printWidth": 180,
-  "tabWidth": 2,
-  "bracketSameLine": false,
-  "vueIndentScriptAndStyle": true,
-  "htmlWhitespaceSensitivity": "ignore"
-}

package/rollup.config.js

@@ -1,75 +0,0 @@
-const resolve = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-const vue = require('rollup-plugin-vue');
-const postcss = require('rollup-plugin-postcss');
-const typescript = require('@rollup/plugin-typescript');
-const ts = require('typescript');
-const path = require('path');
-const { pathToFileURL } = require('url');
-const { terser } = require('rollup-plugin-terser');
-const scss = require('postcss-scss');
-
-const vueTypeScript = () => ({
-  name: 'vue-typescript',
-  transform(code, id) {
-    if (!/\.vue\?.*type=script.*lang\.ts$/.test(id)) return null;
-
-    const result = ts.transpileModule(code, {
-      fileName: id,
-      compilerOptions: {
-        target: ts.ScriptTarget.ESNext,
-        module: ts.ModuleKind.ESNext,
-        sourceMap: true
-      }
-    });
-
-    return {
-      code: result.outputText,
-      map: result.sourceMapText ? JSON.parse(result.sourceMapText) : null
-    };
-  }
-});
-
-module.exports = {
-  input: 'src/components/loader/index.ts',
-  output: {
-    file: 'dist/bundle.js',
-    format: 'es',
-    inlineDynamicImports: true,
-    sourcemap: true
-  },
-  plugins: [
-    resolve({
-      extensions: ['.js', '.ts', '.vue']
-    }),
-    commonjs(),
-    vue({
-      css: false,
-      compileTemplate: true,
-      preprocessStyles: true,
-      preprocessOptions: {
-        scss: {
-          importers: [
-            {
-              findFileUrl(url) {
-                if (url !== '@neatui/css') return null;
-                return pathToFileURL(path.resolve(__dirname, '../css/neatui.scss'));
-              }
-            }
-          ]
-        }
-      }
-    }),
-    vueTypeScript(),
-    postcss({
-      extensions: ['.css', '.scss'],
-      extract: true,
-      minimize: true,
-      syntax: scss
-    }),
-    typescript({
-      tsconfig: './tsconfig.json'
-    }),
-    terser()
-  ]
-};

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/shims-vue.d.ts"],
-  "exclude": ["node_modules"]
-}