niuma-ui 1.0.0 → 1.0.2

package/src/composables/useRsTableViewProvide.ts

@@ -0,0 +1,263 @@
+/**
+ * 将 Core/Shell/Edit 装配结果安装为实例级 ViewContext。
+ *
+ * 从 RsTable.vue 下沉大块 provide 装配，便于壳层只做接线。
+ * 多表：每次调用 provide 到当前实例树，互不串扰。
+ */
+
+import type { ComputedRef, Ref } from 'vue'
+import { isColumnFilterActive } from '../components/table-utils'
+import type {
+  RsTableColumn,
+  RsTableRowData,
+  RsTableRowDropPosition,
+  RsTableRowEntry,
+  RsTableRowKey,
+  RsTableSelectionType,
+} from '../components/table-utils'
+import type { RsTableCellEditFocusMode, RsTableCellEditTrigger } from '../components/table/table-edit-utils'
+import {
+  createRsTableViewContext,
+  provideRsTableView,
+  type RsTableBodyLabels,
+  type RsTableHeaderLabels,
+  type RsTableViewContext,
+  type RsTableViewStyle,
+} from '../components/table/rs-table-view-context'
+
+type RowEntry<T extends RsTableRowData> = Extract<RsTableRowEntry<T>, { type: 'row' }>
+
+function val<T>(source: Ref<T> | ComputedRef<T> | (() => T)): () => T {
+  if (typeof source === 'function') return source as () => T
+  return () => (source as Ref<T>).value
+}
+
+/** ViewContext 安装所需的状态源（getter / Ref 均可） */
+export interface RsTableViewProvideSources<T extends RsTableRowData> {
+  useFixedColumnLayout: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  showRowDragHandle: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  detailExpandable: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  showSelectColumn: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  showEditGutterColumn: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  showIndexColumn: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  showRowStatusColumn: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  columnPadLeft: Ref<number> | ComputedRef<number> | (() => number)
+  columnPadRight: Ref<number> | ComputedRef<number> | (() => number)
+  visibleDataColumns: Ref<RsTableColumn<T>[]> | ComputedRef<RsTableColumn<T>[]> | (() => RsTableColumn<T>[])
+  prefixWidths: { drag: number; expand: number; select: number; status: number }
+  resolvedGutterWidth: Ref<number> | ComputedRef<number> | (() => number)
+  resolvedIndexWidth: Ref<number> | ComputedRef<number> | (() => number)
+  isRadioSelection: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  selectAllState: Ref<'checked' | 'indeterminate' | 'unchecked'> | ComputedRef<'checked' | 'indeterminate' | 'unchecked'> | (() => 'checked' | 'indeterminate' | 'unchecked')
+  columnDraggable: () => boolean
+  resizable: () => boolean
+  multiSort: () => boolean
+  columnFiltersState: Ref<Record<string, string>> | ComputedRef<Record<string, string>> | (() => Record<string, string>)
+  dragColumnKey: Ref<string | null> | (() => string | null)
+  dropColumnKey: Ref<string | null> | (() => string | null)
+  dragLeadHeaderStyle: Ref<RsTableViewStyle> | ComputedRef<RsTableViewStyle> | (() => RsTableViewStyle)
+  expandLeadHeaderStyle: Ref<RsTableViewStyle> | ComputedRef<RsTableViewStyle> | (() => RsTableViewStyle)
+  selectLeadHeaderStyle: Ref<RsTableViewStyle> | ComputedRef<RsTableViewStyle> | (() => RsTableViewStyle)
+  gutterLeadHeaderStyle: Ref<RsTableViewStyle> | ComputedRef<RsTableViewStyle> | (() => RsTableViewStyle)
+  indexLeadHeaderStyle: Ref<RsTableViewStyle> | ComputedRef<RsTableViewStyle> | (() => RsTableViewStyle)
+  columnHeaderStyleMap: Ref<Map<string, Record<string, string> | undefined>> | ComputedRef<Map<string, Record<string, string> | undefined>> | (() => Map<string, Record<string, string> | undefined>)
+  headerLabels: Ref<RsTableHeaderLabels> | ComputedRef<RsTableHeaderLabels> | (() => RsTableHeaderLabels)
+  loading: () => boolean
+  hasData: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  loadingMore: () => boolean
+  infinite: () => boolean
+  bodyColspan: Ref<number> | ComputedRef<number> | (() => number)
+  emptyContentStyle: Ref<RsTableViewStyle> | ComputedRef<RsTableViewStyle> | (() => RsTableViewStyle)
+  virtualScrollEnabled: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  virtualSlice: Ref<{ paddingTop: number; paddingBottom: number }> | ComputedRef<{ paddingTop: number; paddingBottom: number }> | (() => { paddingTop: number; paddingBottom: number })
+  visibleEntries: Ref<RsTableRowEntry<T>[]> | ComputedRef<RsTableRowEntry<T>[]> | (() => RsTableRowEntry<T>[])
+  rowKey: () => RsTableRowKey<T> | undefined
+  treeMode: Ref<boolean> | ComputedRef<boolean> | (() => boolean)
+  treeIndentPx: Ref<number> | ComputedRef<number> | (() => number)
+  treeExpandColumnKey: Ref<string | null> | ComputedRef<string | null> | (() => string | null)
+  treeLoadingKeySet: Ref<Set<string>> | ComputedRef<Set<string>> | (() => Set<string>)
+  striped: () => boolean
+  selectionType: () => RsTableSelectionType
+  editable: () => boolean
+  editTrigger: () => RsTableCellEditTrigger
+  rowCommit: () => boolean
+  allowNull: () => boolean
+  editFocusMode: () => RsTableCellEditFocusMode
+  nullLabel: () => string
+  dragLeadStyle: Ref<Record<string, string>> | ComputedRef<Record<string, string>> | (() => Record<string, string>)
+  expandLeadStyle: Ref<Record<string, string>> | ComputedRef<Record<string, string>> | (() => Record<string, string>)
+  selectLeadStyle: Ref<Record<string, string>> | ComputedRef<Record<string, string>> | (() => Record<string, string>)
+  indexLeadStyle: Ref<Record<string, string>> | ComputedRef<Record<string, string>> | (() => Record<string, string>)
+  gutterLeadStyle: Ref<Record<string, string>> | ComputedRef<Record<string, string>> | (() => Record<string, string>)
+  columnTdClassMap: Ref<Map<string, string[]>> | ComputedRef<Map<string, string[]>> | (() => Map<string, string[]>)
+  columnStyleMap: Ref<Map<string, Record<string, string> | undefined>> | ComputedRef<Map<string, Record<string, string> | undefined>> | (() => Map<string, Record<string, string> | undefined>)
+  dragRowKeys: Ref<string[]> | (() => string[])
+  dropRowTargetKey: Ref<string | null> | (() => string | null)
+  dropRowPosition: Ref<RsTableRowDropPosition | null> | (() => RsTableRowDropPosition | null)
+  activeEditCellKey: Ref<string> | ComputedRef<string> | (() => string)
+  activeFocusCellKey: Ref<string> | ComputedRef<string> | (() => string)
+  activeErrorMapSize: Ref<number> | ComputedRef<number> | (() => number)
+  activeValidatingMapSize: Ref<number> | ComputedRef<number> | (() => number)
+  stagedMapSize: () => number
+  editingDraft: () => string
+  editingCell: () => { rowKey: string; colKey: string } | null
+  focusCell: () => { rowKey: string; colKey: string } | null
+  bodyLabels: Ref<RsTableBodyLabels> | ComputedRef<RsTableBodyLabels> | (() => RsTableBodyLabels)
+}
+
+export type RsTableViewProvideHandlers<T extends RsTableRowData> = Pick<
+  RsTableViewContext<T>,
+  | 'resolvedDataColumnWidth'
+  | 'columnFilterValue'
+  | 'sortOrderFor'
+  | 'sortPriorityFor'
+  | 'sortIconName'
+  | 'onToggleSelectAll'
+  | 'onColumnDragOver'
+  | 'onColumnDrop'
+  | 'onColumnDragStart'
+  | 'onColumnDragEnd'
+  | 'updateColumnFilter'
+  | 'onHeaderClick'
+  | 'onResizeStart'
+  | 'onHeaderPointerOver'
+  | 'onHeaderPointerOut'
+  | 'rowKeyFor'
+  | 'isRowSelected'
+  | 'isRowIndeterminate'
+  | 'isRowExpanded'
+  | 'isHighlighted'
+  | 'rowEditPending'
+  | 'isExternalRowPending'
+  | 'treeDepthOf'
+  | 'canExpandRow'
+  | 'canSelectRow'
+  | 'isRowDragByRow'
+  | 'isRowDragging'
+  | 'isRowDropTarget'
+  | 'isRowDirty'
+  | 'hasColumnSlot'
+  | 'hasEditSlot'
+  | 'cellTooltipEnabled'
+  | 'cellTooltipMode'
+  | 'cellTooltipText'
+  | 'cellTooltipFallbackTitle'
+  | 'getCellDraft'
+  | 'isCellDirty'
+  | 'getCellError'
+  | 'isCellValidating'
+  | 'onBodyPointerOver'
+  | 'onBodyPointerOut'
+  | 'onRowClick'
+  | 'onRowSelectMouseDown'
+  | 'onCellClick'
+  | 'onCellDblclick'
+  | 'onCellContextmenu'
+  | 'onRowDblclick'
+  | 'onRowContextmenu'
+  | 'onRowDragOver'
+  | 'onRowDragLeave'
+  | 'onRowDrop'
+  | 'onRowDragStart'
+  | 'onRowDragEnd'
+  | 'onToggleExpand'
+  | 'onToggleSelect'
+  | 'onCellStartEdit'
+  | 'onCellCommit'
+  | 'onCellCancel'
+  | 'onCellUpdateDraft'
+  | 'onCellNavigate'
+  | 'onRowCommit'
+  | 'onRowRollback'
+  | 'onGutterCommit'
+>
+
+/**
+ * 装配并 provide ViewContext；返回 ctx（便于测试读 instanceId）。
+ */
+export function useRsTableViewProvide<T extends RsTableRowData>(
+  sources: RsTableViewProvideSources<T>,
+  handlers: RsTableViewProvideHandlers<T>,
+): RsTableViewContext<T> {
+  const ctx = createRsTableViewContext<T>({
+    state: {
+      useFixedColumnLayout: val(sources.useFixedColumnLayout),
+      showRowDragHandle: val(sources.showRowDragHandle),
+      detailExpandable: val(sources.detailExpandable),
+      showSelectColumn: val(sources.showSelectColumn),
+      showEditGutterColumn: val(sources.showEditGutterColumn),
+      showIndexColumn: val(sources.showIndexColumn),
+      showRowStatusColumn: val(sources.showRowStatusColumn),
+      columnPadLeft: val(sources.columnPadLeft),
+      columnPadRight: val(sources.columnPadRight),
+      visibleDataColumns: val(sources.visibleDataColumns),
+      prefixWidths: () => sources.prefixWidths,
+      resolvedGutterWidth: val(sources.resolvedGutterWidth),
+      resolvedIndexWidth: val(sources.resolvedIndexWidth),
+      isRadioSelection: val(sources.isRadioSelection),
+      selectAllState: val(sources.selectAllState),
+      columnDraggable: sources.columnDraggable,
+      resizable: sources.resizable,
+      multiSort: sources.multiSort,
+      columnFiltersState: val(sources.columnFiltersState),
+      dragColumnKey: val(sources.dragColumnKey),
+      dropColumnKey: val(sources.dropColumnKey),
+      dragLeadHeaderStyle: val(sources.dragLeadHeaderStyle),
+      expandLeadHeaderStyle: val(sources.expandLeadHeaderStyle),
+      selectLeadHeaderStyle: val(sources.selectLeadHeaderStyle),
+      gutterLeadHeaderStyle: val(sources.gutterLeadHeaderStyle),
+      indexLeadHeaderStyle: val(sources.indexLeadHeaderStyle),
+      columnHeaderStyleMap: val(sources.columnHeaderStyleMap),
+      headerLabels: val(sources.headerLabels),
+      loading: sources.loading,
+      hasData: val(sources.hasData),
+      loadingMore: sources.loadingMore,
+      infinite: sources.infinite,
+      bodyColspan: val(sources.bodyColspan),
+      emptyContentStyle: val(sources.emptyContentStyle),
+      virtualScrollEnabled: val(sources.virtualScrollEnabled),
+      virtualSlice: val(sources.virtualSlice),
+      visibleEntries: val(sources.visibleEntries),
+      rowKey: sources.rowKey,
+      treeMode: val(sources.treeMode),
+      treeIndentPx: val(sources.treeIndentPx),
+      treeExpandColumnKey: val(sources.treeExpandColumnKey),
+      treeLoadingKeySet: val(sources.treeLoadingKeySet),
+      striped: sources.striped,
+      selectionType: sources.selectionType,
+      editable: sources.editable,
+      editTrigger: sources.editTrigger,
+      rowCommit: sources.rowCommit,
+      allowNull: sources.allowNull,
+      editFocusMode: sources.editFocusMode,
+      nullLabel: sources.nullLabel,
+      dragLeadStyle: val(sources.dragLeadStyle),
+      expandLeadStyle: val(sources.expandLeadStyle),
+      selectLeadStyle: val(sources.selectLeadStyle),
+      indexLeadStyle: val(sources.indexLeadStyle),
+      gutterLeadStyle: val(sources.gutterLeadStyle),
+      columnTdClassMap: val(sources.columnTdClassMap),
+      columnStyleMap: val(sources.columnStyleMap),
+      dragRowKeys: val(sources.dragRowKeys),
+      dropRowTargetKey: val(sources.dropRowTargetKey),
+      dropRowPosition: val(sources.dropRowPosition),
+      activeEditCellKey: val(sources.activeEditCellKey),
+      activeFocusCellKey: val(sources.activeFocusCellKey),
+      activeErrorMapSize: val(sources.activeErrorMapSize),
+      activeValidatingMapSize: val(sources.activeValidatingMapSize),
+      stagedMapSize: sources.stagedMapSize,
+      editingDraft: sources.editingDraft,
+      editingCell: sources.editingCell,
+      focusCell: sources.focusCell,
+      bodyLabels: val(sources.bodyLabels),
+    },
+    handlers: {
+      ...handlers,
+      isColumnFilterActive,
+    },
+  })
+  provideRsTableView(ctx)
+  return ctx
+}
+
+export type { RowEntry }

package/src/composables/useRsTableVirtual.ts

@@ -0,0 +1,154 @@
+/**
+ * RsTable 行虚拟滚动：启用判定、高度前缀和、可视窗口切片。
+ *
+ * 横向列虚拟见 useRsTableColumnVirtual；滚动/视口见 useRsTableScrollLayout。
+ * 本 composable 只消费已算好的 `tableEntries`，不参与 entries 构建，避免循环依赖。
+ */
+
+import { computed, type ComputedRef, type Ref } from 'vue'
+import {
+  buildVirtualHeightModel,
+  getTableTreeChildren,
+  hasTableTreeChildren,
+  resolveTableTreeRowKey,
+  sliceVirtualHeightModel,
+  type RsTableRowData,
+  type RsTableRowEntry,
+  type RsTableRowKey,
+} from '../components/table-utils'
+
+/**
+ * useRsTableVirtual 入参。
+ * `tableEntriesForThreshold` 用于 auto 阈值，不可直接依赖完整 tableEntries（会循环）。
+ */
+export interface UseRsTableVirtualOptions<T extends RsTableRowData> {
+  /** 根数据行数（非树表阈值用） */
+  dataLength: ComputedRef<number> | (() => number)
+  treeMode: ComputedRef<boolean> | (() => boolean)
+  /** 树表当前展开态下的可见条目粗算 */
+  tableEntriesForThreshold: ComputedRef<number> | (() => number)
+  /** virtual prop：true 强制开 / false 强制关 / undefined 走 auto */
+  virtual: ComputedRef<boolean | undefined> | (() => boolean | undefined)
+  /** auto 模式下的行数阈值 */
+  virtualAutoThreshold: ComputedRef<number> | (() => number)
+  /** fill 为 true 时才允许 auto 开启虚拟（需确定视口高度） */
+  fill: ComputedRef<boolean> | (() => boolean)
+  infinite: ComputedRef<boolean> | (() => boolean)
+  /** infinite 时默认开启虚拟；可显式关掉 */
+  virtualOnInfinite: ComputedRef<boolean> | (() => boolean)
+  overscan: ComputedRef<number> | (() => number)
+  expandRowHeight: ComputedRef<number | undefined> | (() => number | undefined)
+  scrollTop: Ref<number>
+  viewportHeight: ComputedRef<number> | (() => number)
+  fixedRowHeight: ComputedRef<number> | (() => number)
+  /** 完整 entry 列表（含 group / expand 伪行） */
+  tableEntries: ComputedRef<RsTableRowEntry<T>[]> | (() => RsTableRowEntry<T>[])
+}
+
+/** 统一读取 ComputedRef / Ref / getter */
+function read<T>(source: ComputedRef<T> | (() => T) | Ref<T>): T {
+  if (typeof source === 'function') return (source as () => T)()
+  return (source as Ref<T> | ComputedRef<T>).value
+}
+
+/**
+ * 树表展开态下的可见行粗算，供 virtual 自动阈值使用。
+ * 仅统计当前 expandedKeys 下可见节点，不做完整 entry 构建。
+ *
+ * @param rows 根节点列表
+ * @param expandedKeys 已展开行 key 集合
+ * @param options 树字段与 rowKey 约定
+ * @returns 可见行数量（含未展开的叶子占位行本身）
+ */
+export function flattenVisibleCountRough<R extends RsTableRowData>(
+  rows: readonly R[],
+  expandedKeys: ReadonlySet<string>,
+  options: {
+    childrenField: string
+    isLeafField: string
+    lazy: boolean
+    rowKey?: RsTableRowKey<R>
+  },
+): number {
+  let count = 0
+  const walk = (items: readonly R[], parentKey: string | null) => {
+    for (let i = 0; i < items.length; i += 1) {
+      const row = items[i] as R
+      count += 1
+      const key = resolveTableTreeRowKey(row, i, parentKey, options.rowKey)
+      if (hasTableTreeChildren(row, options) && expandedKeys.has(key)) {
+        walk(getTableTreeChildren(row, options.childrenField), key)
+      }
+    }
+  }
+  walk(rows, null)
+  return count
+}
+
+/**
+ * 行虚拟滚动状态。
+ *
+ * @returns
+ * - `virtualScrollEnabled`：是否启用行虚拟
+ * - `virtualHeightModel`：前缀高度模型（总高 / 定位）
+ * - `virtualSlice`：当前窗口 entries + 上下 pad
+ * - `visibleEntries`：切片后的 entries（模板渲染用）
+ */
+export function useRsTableVirtual<T extends RsTableRowData>(options: UseRsTableVirtualOptions<T>) {
+  /**
+   * 启用规则：
+   * 1. virtual === true → 开
+   * 2. infinite 且未关闭 virtualOnInfinite → 开
+   * 3. virtual === false → 关
+   * 4. 否则 auto：fill 且行数 >= threshold
+   */
+  const virtualScrollEnabled = computed(() => {
+    if (read(options.virtual) === true) return true
+    if (read(options.infinite) && read(options.virtualOnInfinite) !== false) return true
+    if (read(options.virtual) === false) return false
+    const threshold = read(options.virtualAutoThreshold) ?? 0
+    const rowCount = read(options.treeMode)
+      ? read(options.tableEntriesForThreshold)
+      : read(options.dataLength)
+    return Boolean(read(options.fill) && threshold > 0 && rowCount >= threshold)
+  })
+
+  /** 全量 entries 的高度前缀和模型 */
+  const virtualHeightModel = computed(() =>
+    buildVirtualHeightModel(
+      read(options.tableEntries),
+      read(options.fixedRowHeight),
+      undefined,
+      (read(options.expandRowHeight) ?? undefined) as 80 | undefined,
+    ),
+  )
+
+  /**
+   * 可视切片。未启用虚拟时返回全部 entries，pad 为 0。
+   */
+  const virtualSlice = computed(() => {
+    if (!virtualScrollEnabled.value) {
+      const entries = read(options.tableEntries)
+      return { entries, paddingTop: 0, paddingBottom: 0 }
+    }
+    return sliceVirtualHeightModel(
+      virtualHeightModel.value,
+      options.scrollTop.value,
+      read(options.viewportHeight),
+      read(options.fixedRowHeight),
+      read(options.overscan),
+    )
+  })
+
+  const visibleEntries = computed(() => virtualSlice.value.entries)
+
+  return {
+    virtualScrollEnabled,
+    virtualHeightModel,
+    virtualSlice,
+    visibleEntries,
+  }
+}
+
+/** useRsTableVirtual 返回值类型 */
+export type RsTableVirtualApi<T extends RsTableRowData> = ReturnType<typeof useRsTableVirtual<T>>

package/src/composables/useRsTabsNav.ts

@@ -18,6 +18,8 @@ interface UseRsTabsNavOptions {
   navRef: Ref<HTMLElement | null>
   measureRef: Ref<HTMLElement | null>
   overflowRef: Ref<HTMLElement | null>
+  /** 右侧 #extra 区域，计入下拉溢出预留宽度 */
+  extraRef?: Ref<HTMLElement | null>
   addButtonWidth: number
 }
 
@@ -80,6 +82,8 @@ export function useRsTabsNav(options: UseRsTabsNavOptions) {
       width += options.overflowRef.value?.offsetWidth ?? 76
     }
     if (options.canAdd.value) width += options.addButtonWidth
+    // 顶栏右侧操作区不参与标签折叠预算，需从可用宽度中扣除
+    width += options.extraRef?.value?.offsetWidth ?? 0
     return width
   }
 

package/src/composables/useTableEdit.ts

@@ -33,7 +33,7 @@ export interface RsTableUndoEntry {
 
 export function useTableEdit(options: {
   enabled: () => boolean
-  undoLimit?: () => number
+  undoLimit?: () => number | undefined
 }): {
   editingCell: Ref<RsTableEditingCell | null>
   editingDraft: Ref<string>

package/src/icons/lucide.ts

@@ -34,12 +34,12 @@ const customIconMap = new Map<string, Component>([
 
 /** Vite 构建时收集全部 Lucide 图标，运行时按名称 O(1) 查找 */
 const iconModules = import.meta.glob<{ default: Component }>(
-  '../../node_modules/lucide-vue-next/dist/esm/icons/*.js',
+  '../../node_modules/@lucide/vue/dist/esm/icons/*.mjs',
   { eager: true },
 )
 
 const iconMap = new Map<string, Component>(customIconMap)
-const iconPathPattern = /[/\\]icons[/\\]([^/\\]+)\.js$/
+const iconPathPattern = /[/\\]icons[/\\]([^/\\]+)\.mjs$/
 
 /** Lucide 更名兼容：旧 kebab 名 → 新图标文件名 */
 const iconAliases = new Map<string, string>([