foucui 1.0.1

package/components/QiuTable/useColumns.ts

@@ -0,0 +1,325 @@
+import type { QiuTableColumnConfig, QiuTableHeaderCell } from './types'
+import { QIU_SPECIAL_COL_TYPES } from './types'
+
+export type LeafColumn = QiuTableColumnConfig & {
+  _key: string
+  _defaultSlot?: (scope: any) => any
+  _headerSlot?: (scope: any) => any
+}
+
+const normalizeSize = (v: string | number) => (typeof v === 'number' ? `${v}px` : String(v))
+
+/** 解析列宽为像素；百分比需传入 containerWidth */
+export function parseWidth(w?: string | number, containerWidth = 0) {
+  if (w == null || w === '') return 0
+  if (typeof w === 'number') return Number.isFinite(w) ? w : 0
+  const s = String(w).trim()
+  if (!s || s === 'auto') return 0
+  if (s.endsWith('%')) {
+    const pct = parseFloat(s)
+    if (!Number.isFinite(pct) || containerWidth <= 0) return 0
+    return (containerWidth * pct) / 100
+  }
+  return parseFloat(s) || 0
+}
+
+export function colStyle(col: LeafColumn) {
+  const style: Record<string, string> = {}
+  if (col.width != null) style.width = normalizeSize(col.width)
+  if (col.minWidth != null) style.minWidth = normalizeSize(col.minWidth)
+  if (col.maxWidth != null) style.maxWidth = normalizeSize(col.maxWidth)
+  return style
+}
+
+export type ColumnSizeHints = {
+  /** 显式 width（固定列宽） */
+  fixedWidth: number
+  minWidth: number
+  maxWidth: number
+  /** 无 width，仅靠 minWidth 参与剩余空间分配 */
+  isFlex: boolean
+}
+
+export function getColumnSizeHints(
+  col: LeafColumn,
+  containerWidth = 0,
+  defaults?: { minWidth?: number; maxWidth?: number }
+): ColumnSizeHints {
+  const defaultMin = defaults?.minWidth ?? 80
+  const defaultMax = defaults?.maxWidth ?? Number.POSITIVE_INFINITY
+  const fixedWidth = parseWidth(col.width, containerWidth)
+  const minWidth = Math.max(
+    parseWidth(col.minWidth, containerWidth) || (fixedWidth ? 0 : defaultMin),
+    48
+  )
+  const maxRaw = parseWidth(col.maxWidth, containerWidth)
+  const maxWidth = maxRaw > 0 ? maxRaw : defaultMax
+  return {
+    fixedWidth,
+    minWidth: fixedWidth ? Math.min(minWidth || fixedWidth, fixedWidth) || 48 : minWidth,
+    maxWidth: Math.max(maxWidth, minWidth || 48),
+    isFlex: fixedWidth <= 0,
+  }
+}
+
+/**
+ * 计算每列最终渲染宽度（对齐 vxe：width 固定；仅 minWidth 的列吃剩余空间）
+ * resized 优先
+ */
+export function computeRenderWidths(
+  leafColumns: LeafColumn[],
+  opts: {
+    containerWidth: number
+    showSelection: boolean
+    showIndex: boolean
+    showRadio?: boolean
+    showExpand?: boolean
+    fit?: boolean
+    resized?: Record<string, number>
+    defaults?: { minWidth?: number; maxWidth?: number }
+  }
+): Record<string, number> {
+  const {
+    containerWidth,
+    showSelection,
+    showIndex,
+    showRadio,
+    showExpand,
+    fit = true,
+    resized = {},
+    defaults,
+  } = opts
+
+  let special = 0
+  if (showExpand) special += 48
+  if (showRadio) special += 48
+  if (showSelection) special += 48
+  if (showIndex) special += 55
+
+  const result: Record<string, number> = {}
+  const flexKeys: string[] = []
+  let fixedSum = 0
+
+  for (const col of leafColumns) {
+    const resizedW = resized[col._key]
+    if (resizedW != null && resizedW > 0) {
+      result[col._key] = resizedW
+      fixedSum += resizedW
+      continue
+    }
+    const hints = getColumnSizeHints(col, containerWidth, defaults)
+    if (!hints.isFlex) {
+      const w = Math.min(Math.max(hints.fixedWidth, hints.minWidth), hints.maxWidth)
+      result[col._key] = w
+      fixedSum += w
+    } else {
+      flexKeys.push(col._key)
+      // 先占位 min，后面再分配剩余
+      result[col._key] = hints.minWidth
+      fixedSum += hints.minWidth
+    }
+  }
+
+  if (fit && flexKeys.length && containerWidth > 0) {
+    let remain = containerWidth - special - fixedSum
+    if (remain > 0) {
+      // 按 minWidth 比例分配剩余
+      const mins = flexKeys.map((k) => {
+        const col = leafColumns.find((c) => c._key === k)!
+        return getColumnSizeHints(col, containerWidth, defaults).minWidth
+      })
+      const minSum = mins.reduce((a, b) => a + b, 0) || flexKeys.length
+      let used = 0
+      flexKeys.forEach((k, i) => {
+        const col = leafColumns.find((c) => c._key === k)!
+        const hints = getColumnSizeHints(col, containerWidth, defaults)
+        const share =
+          i === flexKeys.length - 1
+            ? remain - used
+            : Math.floor((remain * mins[i]) / minSum)
+        used += share
+        const next = Math.min(Math.max(hints.minWidth + share, hints.minWidth), hints.maxWidth)
+        // 之前已计入 minWidth，这里补差值
+        const delta = next - hints.minWidth
+        result[k] = next
+        // remain 已按 share 消费；fixedSum 不需再改
+        void delta
+      })
+    }
+  }
+
+  return result
+}
+
+export function computeTableMinWidth(
+  leafColumns: LeafColumn[],
+  opts: {
+    showSelection: boolean
+    showIndex: boolean
+    showRadio?: boolean
+    showExpand?: boolean
+  },
+  /** 优先用最终渲染宽 / 拖拽宽 */
+  resolveWidth?: (col: LeafColumn) => number | undefined,
+  defaults?: { minWidth?: number; maxWidth?: number }
+) {
+  let min = 0
+  if (opts.showExpand) min += 48
+  if (opts.showRadio) min += 48
+  if (opts.showSelection) min += 48
+  if (opts.showIndex) min += 55
+  for (const col of leafColumns) {
+    const resolved = resolveWidth?.(col)
+    if (resolved != null && resolved > 0) {
+      min += resolved
+      continue
+    }
+    const hints = getColumnSizeHints(col, 0, defaults)
+    min += hints.isFlex ? hints.minWidth : hints.fixedWidth || hints.minWidth || 100
+  }
+  return min
+}
+
+export function leftOffsetForColumn(
+  leafColumns: LeafColumn[],
+  colKey: string,
+  opts: {
+    showSelection: boolean
+    showIndex: boolean
+    showRadio?: boolean
+    showExpand?: boolean
+  },
+  resolveWidth?: (col: LeafColumn) => number
+) {
+  let left = 0
+  if (opts.showExpand) left += 48
+  if (opts.showRadio) left += 48
+  if (opts.showSelection) left += 48
+  if (opts.showIndex) left += 55
+  for (const col of leafColumns) {
+    if (col._key === colKey) break
+    if (col.fixed === 'left' || col.fixed === true) {
+      left +=
+        resolveWidth?.(col) ||
+        parseWidth(col.width) ||
+        parseWidth(col.minWidth) ||
+        120
+    }
+  }
+  return left
+}
+
+export function rightOffsetForColumn(
+  leafColumns: LeafColumn[],
+  colKey: string,
+  resolveWidth?: (col: LeafColumn) => number
+) {
+  let right = 0
+  for (let i = leafColumns.length - 1; i >= 0; i--) {
+    const col = leafColumns[i]
+    if (col._key === colKey) break
+    if (col.fixed === 'right') {
+      right +=
+        resolveWidth?.(col) ||
+        parseWidth(col.width) ||
+        parseWidth(col.minWidth) ||
+        120
+    }
+  }
+  return right
+}
+
+/** 是否左侧固定列中的最后一列（用于阴影） */
+export function isLastFixedLeft(leafColumns: LeafColumn[], colKey: string) {
+  const lefts = leafColumns.filter((c) => c.fixed === 'left' || c.fixed === true)
+  return lefts.length > 0 && lefts[lefts.length - 1]._key === colKey
+}
+
+/** 是否右侧固定列中的第一列（从右往左的最内侧，用于阴影） */
+export function isFirstFixedRight(leafColumns: LeafColumn[], colKey: string) {
+  const rights = leafColumns.filter((c) => c.fixed === 'right')
+  return rights.length > 0 && rights[0]._key === colKey
+}
+
+/** 生成稳定且唯一的列 key（同 prop 多列也不会冲突） */
+export function makeColumnKey(
+  col: QiuTableColumnConfig,
+  index: number,
+  prefix = ''
+): string {
+  const keyBase = col.prop || col.field || col.slot || col.type || 'col'
+  return prefix ? `${prefix}.${keyBase}#${index}` : `${keyBase}#${index}`
+}
+
+export { makeColumnKey as createColumnKey }
+
+/** 扁平化叶子列（跳过仅分组的父列） */
+export function flattenLeafColumns(
+  columns: QiuTableColumnConfig[],
+  prefix = ''
+): LeafColumn[] {
+  const out: LeafColumn[] = []
+  columns.forEach((col, i) => {
+    const key = makeColumnKey(col, i, prefix)
+    if (col.children?.length) {
+      out.push(...flattenLeafColumns(col.children, key))
+      return
+    }
+    if (col.type && QIU_SPECIAL_COL_TYPES.has(col.type) && !col.prop && !col.field && !col.editor) {
+      // 特殊列仍作为叶子
+    }
+    out.push({ ...col, _key: key })
+  })
+  return out
+}
+
+function depthOf(col: QiuTableColumnConfig): number {
+  if (!col.children?.length) return 1
+  return 1 + Math.max(...col.children.map(depthOf))
+}
+
+function leafCount(col: QiuTableColumnConfig): number {
+  if (!col.children?.length) return 1
+  return col.children.reduce((n, c) => n + leafCount(c), 0)
+}
+
+/** 生成多级表头矩阵（每行一组 th） */
+export function buildHeaderRows(
+  columns: QiuTableColumnConfig[],
+  keyPrefix = ''
+): QiuTableHeaderCell[][] {
+  if (!columns.length) return [[]]
+  const maxDepth = Math.max(...columns.map(depthOf), 1)
+  const rows: QiuTableHeaderCell[][] = Array.from({ length: maxDepth }, () => [])
+
+  const walk = (
+    cols: QiuTableColumnConfig[],
+    depth: number,
+    startCol: number,
+    prefix: string
+  ): number => {
+    let cursor = startCol
+    cols.forEach((col, i) => {
+      const key = makeColumnKey(col, i, prefix)
+      const leaves = leafCount(col)
+      const isLeaf = !col.children?.length
+      const rowspan = isLeaf ? maxDepth - depth : 1
+      rows[depth].push({
+        column: { ...col, _key: key },
+        label: col.label || col.title || '',
+        colspan: leaves,
+        rowspan,
+        isLeaf,
+        colIndex: cursor,
+      })
+      if (!isLeaf && col.children) {
+        walk(col.children, depth + 1, cursor, key)
+      }
+      cursor += leaves
+    })
+    return cursor
+  }
+
+  walk(columns, 0, 0, keyPrefix)
+  return rows
+}

package/components/QiuTable/useEdit.ts

@@ -0,0 +1,136 @@
+import { nextTick, ref, type Ref } from 'vue'
+import type { QiuTableColumnConfig, QiuTableEditConfig } from './types'
+import { resolveColumnEditor, resolveColumnProp, resolveEditRender } from './types'
+
+export function useTableEdit(opts: {
+  editable: Ref<boolean> | (() => boolean)
+  editTrigger: Ref<string> | (() => string)
+  editConfig: Ref<QiuTableEditConfig | undefined> | (() => QiuTableEditConfig | undefined)
+  getRowId: (row: any) => string
+  emit: (event: string, payload: any) => void
+}) {
+  const editing = ref<{ rowId: string; prop: string } | null>(null)
+  /** 刚进入编辑时忽略 blur，避免挂载/聚焦过程中立刻提交造成闪一下 */
+  let editGuardUntil = 0
+  const inEditGuard = () => Date.now() < editGuardUntil
+
+  const getEditable = () =>
+    typeof opts.editable === 'function' ? opts.editable() : opts.editable.value
+
+  const getCfg = () =>
+    typeof opts.editConfig === 'function' ? opts.editConfig() : opts.editConfig.value
+
+  const getTrigger = () => {
+    const cfg = getCfg()
+    if (cfg?.trigger) return cfg.trigger
+    return typeof opts.editTrigger === 'function' ? opts.editTrigger() : opts.editTrigger.value
+  }
+
+  const getMode = () => getCfg()?.mode || 'cell'
+  const getAutoClear = () => getCfg()?.autoClear !== false
+  const getShowIcon = () => {
+    const cfg = getCfg()
+    // 可编辑表默认显示表头编辑图标（文字前）；显式 false 才关闭
+    if (cfg?.showIcon === false) return false
+    if (cfg?.showIcon === true) return true
+    return getEditable()
+  }
+
+  const getColEditor = (col: QiuTableColumnConfig) => resolveColumnEditor(col)
+  const getEditRender = (col: QiuTableColumnConfig) => resolveEditRender(col)
+  const getProp = (col: QiuTableColumnConfig) => resolveColumnProp(col)
+
+  const canEditCol = (col: QiuTableColumnConfig) => {
+    if (!getEditable()) return false
+    const er = getEditRender(col)
+    if (er?.enabled === false) return false
+    return !!getColEditor(col) && col.editable !== false && !!getProp(col)
+  }
+
+  const hasAlwaysEditor = (col: QiuTableColumnConfig) => {
+    if (!canEditCol(col)) return false
+    if (getTrigger() === 'always') return true
+    return getColEditor(col) === 'switch'
+  }
+
+  const isInputEditor = (col: QiuTableColumnConfig) => getColEditor(col) === 'input'
+
+  const isEditing = (row: any, col: QiuTableColumnConfig) => {
+    if (!canEditCol(col)) return false
+    if (hasAlwaysEditor(col)) return true
+    if (!editing.value) return false
+    const sameRow = editing.value.rowId === opts.getRowId(row)
+    if (!sameRow) return false
+    if (getMode() === 'row') return true
+    return editing.value.prop === getProp(col)
+  }
+
+  const isInputFill = (row: any, col: QiuTableColumnConfig) =>
+    isEditing(row, col) && isInputEditor(col)
+
+  const startEdit = (row: any, col: QiuTableColumnConfig, focusRoot?: HTMLElement | null) => {
+    if (!canEditCol(col) || hasAlwaysEditor(col)) return
+    const prop = getProp(col)!
+    const rowId = opts.getRowId(row)
+    // 同一单元格重复进入时不要重挂载，避免闪烁
+    if (editing.value?.rowId === rowId && editing.value?.prop === prop) return
+    editGuardUntil = Date.now() + 120
+    editing.value = { rowId, prop }
+    opts.emit('cell-edit-start', { row, column: col })
+    nextTick(() => {
+      const root = focusRoot
+      const active =
+        (root?.querySelector(
+          `.qiu-table__cell.is-editing .qiu-input__inner`
+        ) as HTMLInputElement | null) ||
+        (root?.querySelector(`.qiu-table__cell.is-editing input`) as HTMLInputElement | null) ||
+        (root?.querySelector(
+          `.qiu-table__cell.is-editing .qiu-table__date-input`
+        ) as HTMLInputElement | null)
+      active?.focus?.({ preventScroll: true })
+    })
+  }
+
+  const clearEdit = () => {
+    editing.value = null
+  }
+
+  const commitEdit = (row: any, col: QiuTableColumnConfig, value: any) => {
+    if (inEditGuard()) return
+    const prop = getProp(col)
+    if (prop != null && row[prop] !== value) row[prop] = value
+    // row 模式：blur 不立刻清整行，交给 autoClear / 切行
+    if (getMode() === 'cell') {
+      if (
+        !hasAlwaysEditor(col) &&
+        editing.value?.rowId === opts.getRowId(row) &&
+        editing.value?.prop === prop
+      ) {
+        editing.value = null
+      }
+    }
+    opts.emit('cell-edit-end', { row, column: col, value })
+    opts.emit('edit', { row, column: col, value })
+  }
+
+  return {
+    editing,
+    getColEditor,
+    getEditRender,
+    getProp,
+    canEditCol,
+    hasAlwaysEditor,
+    isInputEditor,
+    isEditing,
+    isInputFill,
+    startEdit,
+    clearEdit,
+    commitEdit,
+    inEditGuard,
+    getTrigger,
+    getMode,
+    getAutoClear,
+    getShowIcon,
+  }
+}
+

package/components/QiuTable/useExtras.ts

@@ -0,0 +1,115 @@
+import { reactive, ref, type Ref } from 'vue'
+
+/** 行展开（非树） */
+export function useExpandRows(opts: { getRowId: (row: any) => string }) {
+  const expanded = ref<Set<string>>(new Set())
+
+  const isRowExpand = (row: any) => expanded.value.has(opts.getRowId(row))
+
+  const toggleRowExpand = (row: any) => {
+    const id = opts.getRowId(row)
+    const next = new Set(expanded.value)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    expanded.value = next
+  }
+
+  const setRowExpand = (rows: any[], checked: boolean) => {
+    const next = new Set(expanded.value)
+    rows.forEach((r) => {
+      const id = opts.getRowId(r)
+      if (checked) next.add(id)
+      else next.delete(id)
+    })
+    expanded.value = next
+  }
+
+  const clearRowExpand = () => {
+    expanded.value = new Set()
+  }
+
+  return { expanded, isRowExpand, toggleRowExpand, setRowExpand, clearRowExpand }
+}
+
+/** 单选 radio */
+export function useRadioRow(opts: { getRowId: (row: any) => string }) {
+  const radioRowId = ref<string | null>(null)
+
+  const isRadioChecked = (row: any) => radioRowId.value === opts.getRowId(row)
+
+  const setRadioRow = (row: any | null) => {
+    radioRowId.value = row ? opts.getRowId(row) : null
+  }
+
+  const clearRadioRow = () => {
+    radioRowId.value = null
+  }
+
+  return { radioRowId, isRadioChecked, setRadioRow, clearRadioRow }
+}
+
+/** keepSource 脏数据追踪 */
+export function useKeepSource(opts: {
+  enabled: () => boolean
+  getRowId: (row: any) => string
+  data: Ref<any[]> | (() => any[])
+}) {
+  const sourceMap = reactive<Record<string, string>>({})
+
+  const getData = () => (typeof opts.data === 'function' ? opts.data() : opts.data.value)
+
+  const snapshot = () => {
+    if (!opts.enabled()) return
+    Object.keys(sourceMap).forEach((k) => delete sourceMap[k])
+    for (const row of getData() || []) {
+      const id = opts.getRowId(row)
+      if (id) sourceMap[id] = JSON.stringify(row)
+    }
+  }
+
+  const isUpdateByRow = (row: any) => {
+    if (!opts.enabled()) return false
+    const id = opts.getRowId(row)
+    const src = sourceMap[id]
+    if (src == null) return false
+    return src !== JSON.stringify(row)
+  }
+
+  const getUpdateRecords = () => {
+    if (!opts.enabled()) return []
+    return (getData() || []).filter((r) => isUpdateByRow(r))
+  }
+
+  const getInsertRecords = () => {
+    if (!opts.enabled()) return []
+    return (getData() || []).filter((r) => {
+      const id = opts.getRowId(r)
+      return id && sourceMap[id] == null
+    })
+  }
+
+  const reloadRow = (row: any) => {
+    const id = opts.getRowId(row)
+    const src = sourceMap[id]
+    if (!src) return
+    Object.assign(row, JSON.parse(src))
+  }
+
+  return { snapshot, isUpdateByRow, getUpdateRecords, getInsertRecords, reloadRow, sourceMap }
+}
+
+export type SortItem = { prop: string; order: 'asc' | 'desc' }
+
+export function compareRows(a: any, b: any, sorts: SortItem[]) {
+  for (const s of sorts) {
+    if (!s.order) continue
+    const av = a[s.prop]
+    const bv = b[s.prop]
+    if (av === bv) continue
+    if (av == null) return 1
+    if (bv == null) return -1
+    const cmp = av > bv ? 1 : -1
+    return s.order === 'asc' ? cmp : -cmp
+  }
+  return 0
+}

package/components/QiuTable/useHistory.ts

@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+
+export type QiuTableHistoryPatch = {
+  rowId: string
+  prop: string
+  oldValue: any
+  newValue: any
+}
+
+/**
+ * 单元格编辑 undo/redo 栈
+ */
+export function useTableHistory(opts: {
+  enabled: () => boolean
+  size?: () => number
+  findRow: (rowId: string) => any | null
+  onApply?: (patch: QiuTableHistoryPatch, direction: 'undo' | 'redo') => void
+}) {
+  const undoStack = ref<QiuTableHistoryPatch[]>([])
+  const redoStack = ref<QiuTableHistoryPatch[]>([])
+
+  const maxSize = () => Math.max(1, opts.size?.() ?? 50)
+
+  const push = (patch: QiuTableHistoryPatch) => {
+    if (!opts.enabled()) return
+    if (patch.oldValue === patch.newValue) return
+    undoStack.value.push(patch)
+    if (undoStack.value.length > maxSize()) undoStack.value.shift()
+    redoStack.value = []
+  }
+
+  const apply = (patch: QiuTableHistoryPatch, value: any, direction: 'undo' | 'redo') => {
+    const row = opts.findRow(patch.rowId)
+    if (!row) return false
+    row[patch.prop] = value
+    opts.onApply?.(patch, direction)
+    return true
+  }
+
+  const undo = () => {
+    if (!opts.enabled()) return false
+    const patch = undoStack.value.pop()
+    if (!patch) return false
+    if (apply(patch, patch.oldValue, 'undo')) {
+      redoStack.value.push(patch)
+      return true
+    }
+    return false
+  }
+
+  const redo = () => {
+    if (!opts.enabled()) return false
+    const patch = redoStack.value.pop()
+    if (!patch) return false
+    if (apply(patch, patch.newValue, 'redo')) {
+      undoStack.value.push(patch)
+      return true
+    }
+    return false
+  }
+
+  const clear = () => {
+    undoStack.value = []
+    redoStack.value = []
+  }
+
+  return {
+    undoStack,
+    redoStack,
+    push,
+    undo,
+    redo,
+    clear,
+    canUndo: () => undoStack.value.length > 0,
+    canRedo: () => redoStack.value.length > 0,
+  }
+}