niuma-ui 1.0.0 → 1.0.2

package/src/composables/useRsTableColumnVirtual.ts

@@ -0,0 +1,180 @@
+/**
+ * RsTable 横向列虚拟：冻结列始终渲染，中间 fluid 列按 scrollLeft 切片。
+ *
+ * 列宽拖拽 DOM 直写仍在 RsTable；本 composable 只消费已算好的列宽 getter。
+ */
+
+import { computed, type ComputedRef, type Ref } from 'vue'
+import {
+  resolveColumnPixelWidth,
+  sliceVirtualColumns,
+  type RsTableColumn,
+  type RsTableRowData,
+} from '../components/table-utils'
+
+/** ComputedRef / Ref / getter 均可（抽离后 RsTable 常直接传入 ref） */
+type Source<T> = ComputedRef<T> | Ref<T> | (() => T)
+
+/** 统一读取 ComputedRef / Ref / getter */
+function read<T>(source: Source<T>): T {
+  if (typeof source === 'function') return (source as () => T)()
+  return (source as Ref<T> | ComputedRef<T>).value
+}
+
+/** 前缀列固定宽度（与 CSS / resizable 合计一致） */
+export const RS_TABLE_PREFIX_COL_WIDTH = {
+  drag: 40,
+  expand: 40,
+  select: 40,
+  status: 52,
+} as const
+
+/**
+ * 计算前缀列总宽（拖拽/展开/选择/序号或 gutter）。
+ * 供列布局合计与列宽拖拽 DOM 直写共用，避免两处公式漂移。
+ */
+export function measureRsTablePrefixWidth(flags: {
+  showRowDragHandle?: boolean
+  detailExpandable?: boolean
+  showSelectColumn?: boolean
+  showEditGutterColumn?: boolean
+  showIndexColumn?: boolean
+  gutterWidth?: number
+  indexWidth?: number
+}): number {
+  let sum = 0
+  if (flags.showRowDragHandle) sum += RS_TABLE_PREFIX_COL_WIDTH.drag
+  if (flags.detailExpandable) sum += RS_TABLE_PREFIX_COL_WIDTH.expand
+  if (flags.showSelectColumn) sum += RS_TABLE_PREFIX_COL_WIDTH.select
+  if (flags.showEditGutterColumn) sum += flags.gutterWidth ?? 0
+  else if (flags.showIndexColumn) sum += flags.indexWidth ?? 0
+  return sum
+}
+
+export interface UseRsTableColumnVirtualOptions<T extends RsTableRowData> {
+  displayColumns: Source<RsTableColumn<T>[]>
+  /** virtualColumns prop：true / false / 'auto' */
+  virtualColumns: Source<boolean | 'auto' | undefined>
+  virtualColumnsAutoThreshold: Source<number | undefined>
+  virtualColumnOverscan: Source<number | undefined>
+  /** 列宽拖拽中强制关闭列虚拟，避免切片与 DOM 直写打架 */
+  isColumnResizing: Source<boolean>
+  scrollLeft: Source<number>
+  measuredViewportWidth: Source<number>
+  columnWidths: Source<Record<string, number>>
+  showRowDragHandle: Source<boolean>
+  detailExpandable: Source<boolean>
+  showSelectColumn: Source<boolean>
+  showEditGutterColumn: Source<boolean>
+  showIndexColumn: Source<boolean>
+  showRowStatusColumn: Source<boolean>
+  resolvedGutterWidth: Source<number>
+  resolvedIndexWidth: Source<number>
+}
+
+/**
+ * 横向列虚拟切片状态。
+ *
+ * @returns left/right/fluid 列分组、virtualColumnsEnabled、visibleDataColumns、左右 pad
+ */
+export function useRsTableColumnVirtual<T extends RsTableRowData>(
+  options: UseRsTableColumnVirtualOptions<T>,
+) {
+  const leftFixedDataColumns = computed(() =>
+    read(options.displayColumns).filter((c) => c.fixed === 'left'),
+  )
+  const rightFixedDataColumns = computed(() =>
+    read(options.displayColumns).filter((c) => c.fixed === 'right'),
+  )
+  const fluidDataColumns = computed(() =>
+    read(options.displayColumns).filter((c) => !c.fixed),
+  )
+
+  const dataColumnWidth = (column: RsTableColumn<T>): number =>
+    resolveColumnPixelWidth(column, read(options.columnWidths))
+
+  /**
+   * 启用规则：
+   * - false → 关
+   * - 列宽拖拽中 → 关
+   * - true → fluid 列非空即开
+   * - auto → fluid 列数 >= threshold
+   */
+  const virtualColumnsEnabled = computed(() => {
+    if (read(options.virtualColumns) === false) return false
+    if (read(options.isColumnResizing)) return false
+    if (read(options.virtualColumns) === true) return fluidDataColumns.value.length > 0
+    const threshold = read(options.virtualColumnsAutoThreshold) ?? 0
+    return threshold > 0 && fluidDataColumns.value.length >= threshold
+  })
+
+  /** 左侧前缀 + 左冻结列总宽，用于把 scrollLeft 映射到 fluid 区 */
+  const fluidLeadingOffset = computed(() => {
+    let sum = 0
+    if (read(options.showRowDragHandle)) sum += RS_TABLE_PREFIX_COL_WIDTH.drag
+    if (read(options.detailExpandable)) sum += RS_TABLE_PREFIX_COL_WIDTH.expand
+    if (read(options.showSelectColumn)) sum += RS_TABLE_PREFIX_COL_WIDTH.select
+    if (read(options.showEditGutterColumn)) sum += read(options.resolvedGutterWidth)
+    else if (read(options.showIndexColumn)) sum += read(options.resolvedIndexWidth)
+    if (read(options.showRowStatusColumn)) sum += RS_TABLE_PREFIX_COL_WIDTH.status
+    for (const col of leftFixedDataColumns.value) sum += dataColumnWidth(col)
+    return sum
+  })
+
+  const columnVirtualSlice = computed(() => {
+    const fluidCount = fluidDataColumns.value.length
+    if (!virtualColumnsEnabled.value) {
+      return {
+        columns: read(options.displayColumns),
+        paddingLeft: 0,
+        paddingRight: 0,
+        startIndex: 0,
+        endIndex: fluidCount,
+        fluidCount,
+      }
+    }
+    const viewport = Math.max(read(options.measuredViewportWidth) || 320, 120)
+    const midScroll = Math.max(0, read(options.scrollLeft) - fluidLeadingOffset.value)
+    const midViewport = Math.max(120, viewport - Math.min(viewport - 40, fluidLeadingOffset.value))
+    const sliced = sliceVirtualColumns(fluidDataColumns.value, {
+      scrollLeft: midScroll,
+      viewportWidth: midViewport,
+      getWidth: dataColumnWidth,
+      overscan: read(options.virtualColumnOverscan) ?? 2,
+    })
+    return {
+      columns: [
+        ...leftFixedDataColumns.value,
+        ...sliced.columns,
+        ...rightFixedDataColumns.value,
+      ],
+      paddingLeft: sliced.paddingLeft,
+      paddingRight: sliced.paddingRight,
+      startIndex: sliced.startIndex,
+      endIndex: sliced.endIndex,
+      fluidCount,
+    }
+  })
+
+  const visibleDataColumns = computed(() => columnVirtualSlice.value.columns)
+  const columnPadLeft = computed(() => columnVirtualSlice.value.paddingLeft)
+  const columnPadRight = computed(() => columnVirtualSlice.value.paddingRight)
+
+  return {
+    leftFixedDataColumns,
+    rightFixedDataColumns,
+    fluidDataColumns,
+    dataColumnWidth,
+    virtualColumnsEnabled,
+    fluidLeadingOffset,
+    columnVirtualSlice,
+    visibleDataColumns,
+    columnPadLeft,
+    columnPadRight,
+  }
+}
+
+/** useRsTableColumnVirtual 返回值类型 */
+export type RsTableColumnVirtualApi<T extends RsTableRowData> = ReturnType<
+  typeof useRsTableColumnVirtual<T>
+>

package/src/composables/useRsTableColumns.ts

@@ -0,0 +1,200 @@
+/**
+ * RsTable 列模型编排：顺序、列筛选、宽度与 displayColumns。
+ *
+ * 从 RsTable.vue 抽离，保持受控 / 非受控 API 与原先行为一致。
+ * 不负责虚拟列切片、列拖拽排序的 DOM 交互（仍由 RsTable 编排）。
+ */
+
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
+import {
+  createInitialColumnWidths,
+  resolveColumnOrder,
+  resolveOrderedColumns,
+  type RsTableColumn,
+  type RsTableRowData,
+} from '../components/table-utils'
+
+/** 列相关事件（与 RsTable emit 子集对齐） */
+export interface UseRsTableColumnsEmit {
+  (e: 'update:columnOrder', value: string[]): void
+  (e: 'columnOrderChange', value: string[]): void
+  (e: 'update:columnFilters', value: Record<string, string>): void
+  (e: 'columnFiltersChange', value: Record<string, string>): void
+}
+
+/**
+ * useRsTableColumns 入参。
+ * 多数字段支持 ComputedRef 或 getter，便于在 RsTable 内直接绑定 props。
+ */
+export interface UseRsTableColumnsOptions<T extends RsTableRowData> {
+  /** 原始列定义（未排序） */
+  columns: ComputedRef<RsTableColumn<T>[]> | (() => RsTableColumn<T>[])
+  /** 受控列顺序；undefined 表示非受控 */
+  columnOrder: ComputedRef<string[] | undefined> | (() => string[] | undefined)
+  /** 非受控初始列顺序 */
+  defaultColumnOrder: string[]
+  /** 受控列筛选；undefined 表示非受控 */
+  columnFilters: ComputedRef<Record<string, string> | undefined> | (() => Record<string, string> | undefined)
+  /** 非受控初始列筛选 */
+  defaultColumnFilters: Record<string, string>
+  /** 初始列宽（像素） */
+  initialColumnWidths: ComputedRef<Record<string, number> | undefined> | (() => Record<string, number> | undefined)
+  /** 是否允许拖拽改列宽 */
+  resizable: ComputedRef<boolean> | (() => boolean)
+  /** 列布局：auto 自适应；fixed 固定表布局 */
+  columnLayout: ComputedRef<'auto' | 'fixed'> | (() => 'auto' | 'fixed')
+  /** 是否树表（影响展开列固定） */
+  treeMode: ComputedRef<boolean> | (() => boolean)
+  /** 树表是否固定展开列到左侧 */
+  treeFixExpandColumn: ComputedRef<boolean> | (() => boolean)
+  /** 树表展开列 key */
+  treeExpandColumnKey: ComputedRef<string | null> | (() => string | null)
+  emit: UseRsTableColumnsEmit
+}
+
+/** 统一读取 ComputedRef / getter */
+function read<T>(source: ComputedRef<T> | (() => T)): T {
+  return typeof source === 'function' ? (source as () => T)() : source.value
+}
+
+/**
+ * 列顺序 / 列筛选 / 列宽 / displayColumns。
+ *
+ * @returns
+ * - `columnOrderState` / `columnFiltersState`：受控或非受控读写
+ * - `displayColumns`：按顺序排列；树表可将展开列钉为 fixed-left
+ * - `resolvedColumnWidths` / `useStableColumnWidths`：拖拽列宽与稳定布局判定
+ * - `updateColumnFilter` / `columnFilterValue`：表头筛选写入与读取
+ */
+export function useRsTableColumns<T extends RsTableRowData>(options: UseRsTableColumnsOptions<T>) {
+  const internalColumnOrder = ref<string[]>([...options.defaultColumnOrder])
+  const internalColumnFilters = ref<Record<string, string>>({ ...options.defaultColumnFilters })
+  const internalColumnWidths = ref<Record<string, number>>({})
+
+  const isColumnOrderControlled = computed(() => read(options.columnOrder) !== undefined)
+
+  /** 当前列 key 顺序；受控时写回 update:columnOrder */
+  const columnOrderState = computed({
+    get: () => {
+      if (isColumnOrderControlled.value) {
+        return read(options.columnOrder) ?? []
+      }
+      if (internalColumnOrder.value.length) {
+        return internalColumnOrder.value
+      }
+      return resolveColumnOrder(read(options.columns))
+    },
+    set: (value: string[]) => {
+      if (isColumnOrderControlled.value) options.emit('update:columnOrder', value)
+      else internalColumnOrder.value = value
+      options.emit('columnOrderChange', value)
+    },
+  })
+
+  const isColumnFiltersControlled = computed(() => read(options.columnFilters) !== undefined)
+
+  /** 当前列筛选 map（列 key → 查询串） */
+  const columnFiltersState = computed(() => read(options.columnFilters) ?? internalColumnFilters.value)
+
+  /**
+   * 更新单列筛选值。
+   * 空串会删除该 key；同时发出 update:columnFilters / columnFiltersChange。
+   */
+  function updateColumnFilter(key: string, value: string) {
+    const next = { ...columnFiltersState.value }
+    if (value.trim()) next[key] = value
+    else delete next[key]
+    if (isColumnFiltersControlled.value) options.emit('update:columnFilters', next)
+    else internalColumnFilters.value = next
+    options.emit('columnFiltersChange', next)
+  }
+
+  /** 读取单列当前筛选文案（无则空串） */
+  function columnFilterValue(key: string): string {
+    return columnFiltersState.value[key] ?? ''
+  }
+
+  /**
+   * 渲染用列列表：先按 columnOrder 排序；
+   * 树表且 fixExpandColumn 时，将展开列强制 fixed=left（已有 fixed 则不动）。
+   */
+  const displayColumns = computed(() => {
+    const ordered = resolveOrderedColumns(read(options.columns), columnOrderState.value)
+    if (!read(options.treeMode) || !read(options.treeFixExpandColumn)) return ordered
+    const expandKey = read(options.treeExpandColumnKey)
+    if (!expandKey) return ordered
+    return ordered.map((column) => {
+      if (column.key !== expandKey || column.fixed) return column
+      return { ...column, fixed: 'left' as const }
+    })
+  })
+
+  /** 持久化列宽（像素）；拖拽过程中由 RsTable 另用 DOM 直写避免整表重渲 */
+  const resolvedColumnWidths = computed({
+    get: () => internalColumnWidths.value,
+    set: (value: Record<string, number>) => {
+      internalColumnWidths.value = value
+    },
+  })
+
+  /**
+   * 是否启用「稳定列宽」布局（resizable 下避免松手回弹）。
+   * fixed 布局，或每一列都有显式 width / 已测宽时为 true。
+   */
+  const useStableColumnWidths = computed(() => {
+    if (!read(options.resizable)) return false
+    if (read(options.columnLayout) === 'fixed') return true
+    const widths = internalColumnWidths.value
+    return displayColumns.value.every((col) => {
+      return typeof widths[col.key] === 'number' || col.width !== undefined
+    })
+  })
+
+  /**
+   * 按当前 columns 重建内部列宽：保留已有测量值，合并 initialColumnWidths。
+   * columns 变化时由 watch 调用。
+   */
+  function syncInternalColumnWidths(columns: RsTableColumn<T>[]): void {
+    const preserved: Record<string, number> = {}
+    for (const column of columns) {
+      const width = internalColumnWidths.value[column.key]
+      if (typeof width === 'number') preserved[column.key] = width
+    }
+    internalColumnWidths.value = createInitialColumnWidths(
+      columns,
+      { ...(read(options.initialColumnWidths) ?? {}), ...preserved },
+      { forceAll: read(options.resizable) && useStableColumnWidths.value },
+    )
+  }
+
+  watch(
+    () => read(options.columns),
+    (columns) => {
+      syncInternalColumnWidths(columns)
+      // 非受控：在保留已有顺序的前提下与新 columns 对齐
+      if (!isColumnOrderControlled.value) {
+        internalColumnOrder.value = resolveColumnOrder(columns, internalColumnOrder.value)
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    internalColumnOrder,
+    internalColumnFilters,
+    internalColumnWidths,
+    isColumnOrderControlled,
+    columnOrderState,
+    isColumnFiltersControlled,
+    columnFiltersState,
+    displayColumns,
+    resolvedColumnWidths,
+    useStableColumnWidths,
+    syncInternalColumnWidths,
+    updateColumnFilter,
+    columnFilterValue,
+  }
+}
+
+/** useRsTableColumns 返回值类型 */
+export type RsTableColumnsApi<T extends RsTableRowData> = ReturnType<typeof useRsTableColumns<T>>

package/src/composables/useRsTableContextMenu.ts

@@ -0,0 +1,257 @@
+/**
+ * RsTable 右键菜单：上下文状态、默认复制项、捕获阶段预填。
+ *
+ * 选择联动（右键选中行）通过回调注入，避免 composable 直接持有 Engine。
+ */
+
+import { ref, watch, type ComputedRef, type Ref } from 'vue'
+import type { RsContextMenuItem } from '../components/context-menu-utils'
+import {
+  buildDefaultTableContextMenuItems,
+  resolveTableCellCopyText,
+  resolveTableRowCopyText,
+  TABLE_CTX_COPY_CELL,
+  TABLE_CTX_COPY_ROW,
+} from '../components/table/table-context-menu'
+import { copyTextToClipboard } from '../utils/rs-clipboard'
+import {
+  resolveRowKey,
+  type RsTableColumn,
+  type RsTableRowData,
+  type RsTableRowEntry,
+  type RsTableRowKey,
+  type RsTableSelectionType,
+} from '../components/table-utils'
+
+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
+}
+
+export interface UseRsTableContextMenuOptions<T extends RsTableRowData> {
+  enabled: ComputedRef<boolean> | (() => boolean)
+  dataRows: ComputedRef<Array<Extract<RsTableRowEntry<T>, { type: 'row' }>>> | (() => Array<Extract<RsTableRowEntry<T>, { type: 'row' }>>)
+  displayColumns: ComputedRef<RsTableColumn<T>[]> | (() => RsTableColumn<T>[])
+  selectedRows: ComputedRef<T[]> | (() => T[])
+  rowKey: ComputedRef<RsTableRowKey<T> | undefined> | (() => RsTableRowKey<T> | undefined)
+  rowKeyByIndex: ComputedRef<Map<number, string>> | (() => Map<number, string>)
+  copyCellLabel: ComputedRef<string> | (() => string)
+  copyRowLabel: ComputedRef<string> | (() => string)
+  contextMenuItems?: (
+    row: T | null,
+    selectedRows: T[],
+  ) => RsContextMenuItem[]
+  /**
+   * Feature 贡献合并：在 props 自定义项之后调用。
+   * 入参为已含默认复制 + 业务自定义的列表，应返回最终列表。
+   */
+  mergeFeatureMenuItems?: (
+    items: RsContextMenuItem[],
+    ctx: { row: T | null; selectedRows: T[] },
+  ) => RsContextMenuItem[]
+  /** 右键时是否选中该行 */
+  shouldSelectOnContextmenu: () => boolean
+  canSelectRow: (entry: Extract<RsTableRowEntry<T>, { type: 'row' }>) => boolean
+  isRowSelected: (entry: Extract<RsTableRowEntry<T>, { type: 'row' }>) => boolean
+  selectionType: () => RsTableSelectionType
+  getSelectedRowKeys: () => string[]
+  setSelectedRowKeys: (keys: string[]) => void
+  selectRowKeys: (
+    current: string[],
+    key: string,
+    type: RsTableSelectionType,
+  ) => string[]
+  getDraft: (rowKey: string, colKey: string) => string | undefined
+  onSelect: (key: string, row: T | null, selected: T[]) => void
+  onRowContextmenu: (row: T, rowIndex: number, event: MouseEvent) => void
+}
+
+/**
+ * 表格右键菜单状态与交互。
+ */
+export function useRsTableContextMenu<T extends RsTableRowData>(
+  options: UseRsTableContextMenuOptions<T>,
+) {
+  /** 当前右键行（null = 表体空白或尚未命中） */
+  const ctxRow = ref<T | null>(null) as Ref<T | null>
+  const ctxRowIndex = ref<number | null>(null)
+  /** 右键命中的数据列 key */
+  const ctxColKey = ref<string | null>(null)
+  const ctxMenuItems = ref<RsContextMenuItem[]>([])
+
+  function rowKeyFor(entry: Extract<RsTableRowEntry<T>, { type: 'row' }>): string {
+    return (
+      read(options.rowKeyByIndex).get(entry.rowIndex) ??
+      entry.treeKey ??
+      resolveRowKey(entry.row, entry.rowIndex, read(options.rowKey))
+    )
+  }
+
+  /**
+   * 重建菜单项：默认复制 + 业务自定义。
+   * 有数据时预置复制项，避免 Trigger 打开瞬间 items 为空拒开。
+   */
+  function refreshCtxMenuItems(): void {
+    if (!read(options.enabled)) {
+      ctxMenuItems.value = []
+      return
+    }
+    const hasDataRows = read(options.dataRows).length > 0
+    const items = buildDefaultTableContextMenuItems({
+      copyCellLabel: read(options.copyCellLabel),
+      copyRowLabel: read(options.copyRowLabel),
+      hasRow: ctxRow.value != null || hasDataRows,
+      hasCell: ctxColKey.value != null || hasDataRows,
+    })
+    const selected = read(options.selectedRows)
+    const custom =
+      options.contextMenuItems?.(ctxRow.value as T | null, selected) ?? []
+    if (custom.length > 0) {
+      if (items.length > 0) {
+        items.push({ key: '__ctx-sep', label: '', separator: true })
+      }
+      items.push(...custom)
+    }
+    const menuCtx = { row: ctxRow.value as T | null, selectedRows: selected }
+    ctxMenuItems.value = options.mergeFeatureMenuItems
+      ? options.mergeFeatureMenuItems(items, menuCtx)
+      : items
+  }
+
+  watch(
+    () => [read(options.enabled), read(options.dataRows).length] as const,
+    () => {
+      refreshCtxMenuItems()
+    },
+    { immediate: true },
+  )
+
+  async function copyCtxCell(): Promise<void> {
+    if (!ctxRow.value || ctxRowIndex.value == null || !ctxColKey.value) return
+    const column = read(options.displayColumns).find((item) => item.key === ctxColKey.value)
+    if (!column) return
+    const key = resolveRowKey(ctxRow.value, ctxRowIndex.value, read(options.rowKey))
+    const text = resolveTableCellCopyText(
+      ctxRow.value,
+      column,
+      ctxRowIndex.value,
+      options.getDraft(key, column.key),
+    )
+    await copyTextToClipboard(text)
+  }
+
+  async function copyCtxRow(): Promise<void> {
+    if (!ctxRow.value || ctxRowIndex.value == null) return
+    const key = resolveRowKey(ctxRow.value, ctxRowIndex.value, read(options.rowKey))
+    const text = resolveTableRowCopyText(
+      ctxRow.value,
+      ctxRowIndex.value,
+      read(options.displayColumns),
+      options.getDraft,
+      key,
+    )
+    await copyTextToClipboard(text)
+  }
+
+  async function onCtxMenuSelect(key: string): Promise<void> {
+    if (key === TABLE_CTX_COPY_CELL) {
+      await copyCtxCell()
+      options.onSelect(key, ctxRow.value as T | null, read(options.selectedRows))
+      return
+    }
+    if (key === TABLE_CTX_COPY_ROW) {
+      await copyCtxRow()
+      options.onSelect(key, ctxRow.value as T | null, read(options.selectedRows))
+      return
+    }
+    options.onSelect(key, ctxRow.value as T | null, read(options.selectedRows))
+  }
+
+  function prepareRowContextmenu(entry: Extract<RsTableRowEntry<T>, { type: 'row' }>): void {
+    if (
+      options.shouldSelectOnContextmenu() &&
+      options.canSelectRow(entry) &&
+      !options.isRowSelected(entry)
+    ) {
+      options.setSelectedRowKeys(
+        options.selectRowKeys(
+          options.getSelectedRowKeys(),
+          rowKeyFor(entry),
+          options.selectionType(),
+        ),
+      )
+    }
+    if (read(options.enabled)) {
+      ctxRow.value = entry.row
+      ctxRowIndex.value = entry.rowIndex
+    }
+  }
+
+  /**
+   * 捕获阶段预填：须早于 ContextMenuTrigger 冒泡打开。
+   */
+  function onContextmenuCapture(event: MouseEvent): void {
+    if (!read(options.enabled)) return
+    const target = event.target as HTMLElement | null
+    if (!target) return
+    const tr = target.closest('tr.rs-table__row') as HTMLElement | null
+    if (!tr) return
+    const rowKeyAttr = tr.getAttribute('data-row-key')
+    if (!rowKeyAttr) return
+    const entry = read(options.dataRows).find(
+      (item) => (item.treeKey ?? read(options.rowKeyByIndex).get(item.rowIndex) ?? '') === rowKeyAttr,
+    )
+    if (!entry) return
+    prepareRowContextmenu(entry)
+    const td = target.closest('td.rs-table__td--data') as HTMLElement | null
+    const colKey = td?.getAttribute('data-col-key')
+    ctxColKey.value = colKey || null
+    refreshCtxMenuItems()
+  }
+
+  function onTableContextmenu(event: MouseEvent): void {
+    if (!read(options.enabled)) return
+    const tr = (event.target as HTMLElement).closest('tr.rs-table__row')
+    if (!tr) {
+      ctxRow.value = null
+      ctxRowIndex.value = null
+      ctxColKey.value = null
+      refreshCtxMenuItems()
+    }
+  }
+
+  function onRowContextmenu(entry: RsTableRowEntry<T>, event: MouseEvent): void {
+    if (entry.type !== 'row') return
+    if ((event.target as HTMLElement).closest('.rs-table__td--data')) return
+    prepareRowContextmenu(entry)
+    ctxColKey.value = null
+    refreshCtxMenuItems()
+    options.onRowContextmenu(entry.row, entry.rowIndex, event)
+  }
+
+  function onCellContextmenu(entry: RsTableRowEntry<T>, colKey: string, event: MouseEvent): void {
+    if (entry.type !== 'row') return
+    prepareRowContextmenu(entry)
+    ctxColKey.value = colKey
+    refreshCtxMenuItems()
+    options.onRowContextmenu(entry.row, entry.rowIndex, event)
+  }
+
+  return {
+    ctxRow,
+    ctxRowIndex,
+    ctxColKey,
+    ctxMenuItems,
+    refreshCtxMenuItems,
+    onCtxMenuSelect,
+    onContextmenuCapture,
+    onTableContextmenu,
+    onRowContextmenu,
+    onCellContextmenu,
+    rowKeyFor,
+  }
+}
+
+export type RsTableContextMenuApi<T extends RsTableRowData> = ReturnType<
+  typeof useRsTableContextMenu<T>
+>