foucui 1.0.1 → 2.0.0

package/components/QiuTable/useColumns.ts

@@ -1,325 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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,
-  }
-}