@veltra/desktop 1.0.0

package/src/components/table/table.vue

@@ -0,0 +1,221 @@
+<template>
+  <u-scroll
+    :class="[
+      cls.b,
+      cls.m(size),
+      bem.is('border', border),
+      bem.is('all-expanded', allExpanded),
+      bem.is('text-ellipsis', textEllipsis)
+    ]"
+    ref="scrollRef"
+    :content-class="cls.e('content')"
+    @scroll="handleScroll"
+  >
+    <table :class="cls.e('wrap')">
+      <colgroup ref="colgroupRef">
+        <col
+          v-for="column of leafColumns"
+          :key="column.key"
+          :class="column.fixed"
+          :style="{
+            width: withUnit(column.width, 'px'),
+            minWidth: withUnit(column.minWidth, 'px')
+          }"
+        />
+      </colgroup>
+      <UTableHead />
+
+      <u-table-body ref="tableBody">
+        <slot name="body" :columns="leafColumns" :rows="rows" />
+
+        <template #empty v-if="slots.empty">
+          <slot name="empty" />
+        </template>
+      </u-table-body>
+
+      <!-- 占用空间，用来撑开表格高度 -->
+      <tbody v-if="virtualEnabled" ref="spaceRef" :style="{ width: '1px' }"></tbody>
+
+      <u-table-foot ref="tableFoot">
+        <slot name="foot" :columns="leafColumns" :rows="rows" />
+      </u-table-foot>
+    </table>
+
+    <slot name="append" />
+
+    <div v-if="showResizeLine" :class="cls.e('resize-line')" ref="resizeLineRef"></div>
+
+    <!-- <u-tip v-if="textEllipsis" ref="tip"> </u-tip> -->
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps, useVirtual } from '@veltra/compositions'
+import { bem, setStyles, withUnit } from '@veltra/utils'
+import { computed, nextTick, provide, shallowRef, toRef, useTemplateRef, watch } from 'vue'
+
+import type {
+  TableProps,
+  TableEmits,
+  _TableExposed,
+  TableColumnSlotsScope,
+  ComponentSize,
+  ScrollExposed,
+  TableRowSlotsScope
+} from '../../types'
+import { UScroll } from '../scroll'
+import { TableDIKey } from './di'
+import type { ColumnNode } from './node/col'
+import type { TableRowNode } from './node/row'
+import UTableBody from './table-body.vue'
+import UTableFoot from './table-foot.vue'
+// import { UTip } from '../tip'
+import UTableHead from './table-head'
+import { useCheck } from './use-check'
+import { useColResize } from './use-col-resize'
+import { useColumns } from './use-columns'
+import { useFixedColumns } from './use-fixed-columns'
+import { useRows } from './use-rows'
+import { useTable } from './use-table'
+
+defineOptions({ name: 'Table' })
+
+const props = withDefaults(defineProps<TableProps>(), {
+  tree: false,
+  stripe: true,
+  textOverflow: 'line-break',
+  virtualThreshold: 80
+})
+const emit = defineEmits<TableEmits>()
+
+const slots = defineSlots<{
+  [key: `column:${string}`]: (props: TableColumnSlotsScope) => any
+  [key: `header:${string}`]: (props: { column: ColumnNode }) => any
+  'row:expand'?: (props: TableRowSlotsScope) => any
+  foot?: (props: { columns: ColumnNode[]; rows: TableRowNode[] }) => any
+  body?: (props: { columns: ColumnNode[]; rows: TableRowNode[] }) => any
+  empty?: () => any
+  append?: () => any
+}>()
+
+const cls = bem('table')
+
+const { size } = useFallbackProps([props], { size: 'default' as ComponentSize })
+
+// 行
+const {
+  rows,
+  toggleTreeRowExpand,
+  allExpanded,
+  toggleAllTreeRowExpand,
+  rowForest,
+  handleRowClick,
+  handleCellClick,
+  getRowByData
+} = useRows({ props, emit })
+
+// 选中
+const { createCheckColumn, createSelectColumn, clearChecked, clearSelected, checkedRows } =
+  useCheck({ size, props, rows, rowForest, emit, cls })
+
+// 列
+const columnConfig = useColumns({
+  props,
+  createCheckColumn,
+  createSelectColumn,
+  toggleAllTreeRowExpand,
+  cls
+})
+
+const { leafColumns } = columnConfig
+
+const { handleScroll, leftFixed, rightFixed } = useFixedColumns()
+
+// 在表格中提供的通用方法和属性
+const {
+  getColumnSlotsNode,
+  getExpandRowSlotsNode,
+  getHeaderSlotsNode,
+  getCellClass,
+  getCellCtx,
+  getHeaderCellClass
+} = useTable({ props, cls, leftFixed, rightFixed })
+
+const scrollRef = shallowRef<ScrollExposed>()
+
+const { showResizeLine, resizeLineRef, colgroupRef } = useColResize({ scrollRef, leafColumns })
+
+const virtualCtx = useVirtual({
+  count: computed(() => rows.value.length),
+  scrollEl: computed(() => scrollRef.value?.containerRef ?? null),
+  estimateSize: () => 52,
+  virtualThreshold: toRef(props, 'virtualThreshold')
+})
+
+const { virtualList, totalHeight, virtualEnabled } = virtualCtx
+
+const spaceHeight = computed(() => {
+  if (virtualList.value.length) {
+    return (
+      totalHeight.value -
+      virtualList.value[virtualList.value.length - 1]!.end +
+      virtualList.value[0]!.start
+    )
+  }
+  return totalHeight.value
+})
+
+const spaceRef = shallowRef<HTMLElement>()
+
+watch(
+  spaceHeight,
+  (spaceHeight) => {
+    nextTick(() => {
+      spaceRef.value &&
+        setStyles(spaceRef.value, { height: spaceHeight ? `${spaceHeight}px` : undefined })
+    })
+  },
+  { immediate: true }
+)
+
+const tableBodyRef = useTemplateRef('tableBody')
+watch(
+  () => props.data,
+  () => {
+    tableBodyRef.value?.setBodyTransform(0)
+    scrollRef.value?.scrollTo({ y: 0 })
+  }
+)
+
+// const tipRef = useTemplateRef('tip')
+
+provide(TableDIKey, {
+  tableProps: props,
+  tableSlots: slots,
+  cls,
+  rows,
+  checkedRows,
+  columnConfig,
+  handleRowClick,
+  handleCellClick,
+  getColumnSlotsNode,
+  getExpandRowSlotsNode,
+  getHeaderSlotsNode,
+  getCellClass,
+  getCellCtx,
+  getHeaderCellClass,
+  // tipRef,
+  toggleTreeRowExpand,
+  ...virtualCtx
+})
+
+const tableFootRef = useTemplateRef('tableFoot')
+
+defineExpose<_TableExposed>({
+  el: toRef(() => scrollRef.value?.el),
+  clearChecked,
+  clearSelected,
+  getRowByData,
+  getSummaryRow: () => tableFootRef.value!.getSummaryRow()
+})
+</script>

package/src/components/table/use-check.ts

@@ -0,0 +1,329 @@
+import { dfs, o, type Forest } from '@cat-kit/core'
+import type { BEM } from '@veltra/utils'
+import {
+  computed,
+  createTextVNode,
+  createVNode,
+  nextTick,
+  shallowRef,
+  toRaw,
+  triggerRef,
+  watch,
+  type ComputedRef,
+  type ShallowRef
+} from 'vue'
+
+import type { TableRow, TableColumn, TableEmits, TableProps, ComponentSize } from '../../types'
+import { UCheckbox } from '../checkbox'
+
+interface Options {
+  rows: ShallowRef<TableRow[] | undefined>
+  rowForest: ShallowRef<Forest<Record<string, unknown>, any> | undefined>
+  props: TableProps
+  emit: TableEmits<any>
+  size: ComputedRef<ComponentSize>
+  cls: BEM<'table'>
+}
+
+interface UseCheckReturned {
+  checkedRows: ShallowRef<Set<TableRow>>
+  clearChecked: () => void
+  clearSelected: () => void
+  createCheckColumn: () => TableColumn
+  createSelectColumn: () => TableColumn
+}
+
+export function useCheck(options: Options): UseCheckReturned {
+  const { rows, rowForest, props, emit, size, cls } = options
+
+  const checkedRows = shallowRef(new Set<TableRow>())
+  const selectedRow = shallowRef<TableRow>()
+
+  /** 触发checkedRows的更新 */
+  function triggerCheckedRows() {
+    triggerRef(checkedRows)
+  }
+
+  function clearChecked() {
+    checkedRows.value.forEach((row) => {
+      row.checked = false
+    })
+    checkedRows.value.clear()
+    triggerCheckedRows()
+  }
+
+  function clearSelected() {
+    if (selectedRow.value) {
+      selectedRow.value.checked = false
+      selectedRow.value = undefined
+    }
+  }
+
+  watch([() => props.checkable, () => props.selectable, () => rows.value], () => {
+    clearChecked()
+    clearSelected()
+  })
+
+  watch(selectedRow, (selectedRow) => {
+    if (changedByModel) return
+    changedByEvent = true
+    emit('update:selected', selectedRow?.data ? toRaw(selectedRow.data) : undefined)
+    nextTick(() => {
+      changedByEvent = false
+    })
+  })
+
+  let changedByEvent = false
+  let changedByModel = false
+  watch(checkedRows, (checkedRows) => {
+    if (changedByModel) return
+    changedByEvent = true
+    emit(
+      'update:checked',
+      Array.from(checkedRows).map((row) => toRaw(row.data))
+    )
+    nextTick(() => {
+      changedByEvent = false
+    })
+  })
+
+  let dicts: Map<string | number, TableRow> | undefined = undefined
+
+  // 设置uid -> row 字典，以便于数据重复使用
+  function setDicts() {
+    if (dicts || !rows.value || !props.rowKey) return
+
+    let mapEntries: [string | number, TableRow][] = []
+    let i = 0
+    while (i < rows.value.length) {
+      const row = rows.value[i]!
+
+      mapEntries.push([row.uid, row])
+      i++
+    }
+    dicts = new Map(mapEntries)
+  }
+
+  watch(rows, () => {
+    dicts = undefined
+  })
+
+  watch(
+    [() => props.checked, () => props.rowKey, () => props.checkable, rows],
+    ([checked, rowKey, checkable, rows], [_, __, ___, oRows]) => {
+      if (changedByEvent || !checkable || !rowKey) return
+
+      changedByModel = true
+
+      // 如果没有字典，先建立字典
+      rows !== oRows && setDicts()
+
+      clearChecked()
+
+      checked?.forEach((item) => {
+        const uid = o(item).get(rowKey)
+        if (uid === undefined || uid === null) return
+        const row = dicts?.get(uid as string | number)
+        if (!row) return
+
+        row.checked = true
+        checkedRows.value.add(row)
+      })
+      triggerCheckedRows()
+
+      nextTick(() => {
+        changedByModel = false
+      })
+    },
+    { immediate: true }
+  )
+
+  watch(
+    [() => props.selected, () => props.rowKey, () => props.selectable, rows],
+    ([selected, rowKey, selectable, rows], [_, __, ___, oRows]) => {
+      if (changedByEvent || !selectable || !rowKey) return
+
+      changedByModel = true
+
+      // 如果没有字典，先建立字典(懒建立)
+      rows !== oRows && setDicts()
+
+      if (selected) {
+        const uid = o(selected).get(rowKey)
+        const row =
+          uid === undefined || uid === null ? undefined : dicts?.get(uid as string | number)
+        if (row) {
+          row.checked = true
+          selectedRow.value = row
+        }
+      } else {
+        clearSelected()
+      }
+
+      nextTick(() => {
+        changedByModel = false
+      })
+    },
+    { immediate: true }
+  )
+
+  const allChecked = computed(() => {
+    const rowSize = props.tree ? rowForest.value?.size : rows.value?.length
+    return !!rowSize && rowSize === checkedRows.value.size
+  })
+
+  function handleCheckAllTree(check: boolean) {
+    if (check) {
+      rowForest.value?.dfs((row) => {
+        row.checked = true
+        checkedRows.value.add(row)
+      })
+    } else {
+      rowForest.value?.dfs((row) => {
+        row.checked = false
+      })
+      checkedRows.value.clear()
+    }
+    triggerCheckedRows()
+  }
+
+  function handleCheckAllRows(check: boolean) {
+    if (check) {
+      rows.value?.forEach((row) => {
+        row.checked = true
+        checkedRows.value.add(row)
+      })
+    } else {
+      rows.value?.forEach((row) => {
+        row.checked = false
+      })
+      checkedRows.value.clear()
+    }
+    triggerCheckedRows()
+  }
+
+  function handleCheckAll(check: boolean) {
+    if (props.tree) {
+      handleCheckAllTree(check as boolean)
+    } else {
+      handleCheckAllRows(check as boolean)
+    }
+  }
+
+  function handleCheckRow(row: TableRow, check: boolean) {
+    const cb = check
+      ? (row: TableRow) => checkedRows.value.add(row)
+      : (row: TableRow) => checkedRows.value.delete(row)
+
+    const childrenKey = typeof props.tree === 'string' ? props.tree : 'children'
+    dfs(
+      row as unknown as Record<string, unknown>,
+      (node) => {
+        const r = node as unknown as TableRow
+        r.checked = check
+        cb(r)
+      },
+      childrenKey
+    )
+
+    triggerCheckedRows()
+  }
+
+  const getCheckboxColumnWidth = () => {
+    return size.value === 'large' ? 80 : 60
+  }
+
+  const checkboxClass = cls.e('checkbox')
+  const checkboxClick = (e: Event) => e.stopPropagation()
+
+  function createCheckColumn(): TableColumn {
+    const width = getCheckboxColumnWidth()
+    return {
+      key: '__is_check_column__',
+      name: '',
+      width,
+      minWidth: width,
+      align: 'center',
+      fixed: 'left',
+      resizable: false,
+      nameRender() {
+        const checkboxNode = createVNode(UCheckbox, {
+          modelValue: allChecked.value,
+          'onUpdate:modelValue': handleCheckAll
+        })
+        if (!props.tree) {
+          return checkboxNode
+        }
+
+        // const expandNode = createVNode('i', {
+        //   text: true,
+        //   class: cls.e('expand-space')
+        // })
+        return [checkboxNode]
+      },
+      render(ctx) {
+        const { row } = ctx
+
+        // @ts-ignore
+        return createVNode(UCheckbox, {
+          class: checkboxClass,
+          modelValue: row.checked,
+          'onUpdate:modelValue': (val: boolean) => {
+            handleCheckRow(row, val)
+          },
+          onClick: checkboxClick
+        })
+      }
+    }
+  }
+
+  function handleSelect(row: TableRow, check: boolean) {
+    row.checked = check
+    if (check) {
+      if (selectedRow.value) {
+        selectedRow.value.checked = false
+      }
+      selectedRow.value = row
+    } else {
+      selectedRow.value = undefined
+    }
+  }
+
+  function createSelectColumn(): TableColumn {
+    const width = getCheckboxColumnWidth()
+    return {
+      key: '__is_select_column__',
+      name: '单选',
+      minWidth: width,
+      resizable: false,
+      width,
+      align: 'center',
+      fixed: 'left',
+      nameRender(_ctx) {
+        if (!props.tree) {
+          return '单选'
+        }
+
+        // const expandNode = createVNode('i', {
+        //   text: true,
+        //   class: cls.e('expand-space')
+        // })
+        return [createTextVNode('单选')]
+      },
+
+      render({ row }) {
+        // @ts-ignore
+        return createVNode(UCheckbox, {
+          class: checkboxClass,
+          modelValue: row.checked,
+          'onUpdate:modelValue': (val: boolean) => {
+            handleSelect(row, val)
+          },
+          onClick: checkboxClick
+        })
+      }
+    }
+  }
+
+  return { checkedRows, createCheckColumn, createSelectColumn, clearChecked, clearSelected }
+}

package/src/components/table/use-col-resize.ts

@@ -0,0 +1,125 @@
+import { nextTick, provide, shallowRef, watchEffect, type ShallowRef } from 'vue'
+
+import type { ScrollExposed } from '../../types'
+import { TableResizeKey } from './di'
+import type { ColumnNode } from './node/col'
+
+interface Options {
+  scrollRef: ShallowRef<ScrollExposed | undefined>
+  leafColumns: ShallowRef<ColumnNode[]>
+}
+
+interface UseColResizeReturned {
+  resizeLineRef: ShallowRef<HTMLElement | undefined>
+  colgroupRef: ShallowRef<HTMLElement | undefined>
+  showResizeLine: ShallowRef<boolean>
+  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void
+}
+
+export function useColResize(options: Options): UseColResizeReturned {
+  const { scrollRef, leafColumns } = options
+
+  const showResizeLine = shallowRef(false)
+
+  const resizeLineRef = shallowRef<HTMLElement>()
+  const colgroupRef = shallowRef<HTMLElement>()
+  const headerRef = shallowRef<HTMLElement>()
+
+  /**
+   * 修正列样式
+   */
+  function correctColumnStyle() {
+    // 获取表格容器宽度
+    const containerWidth = scrollRef.value?.containerRef?.clientWidth
+
+    if (!containerWidth || !leafColumns.value.length) return
+
+    // 如果每个列都设置了宽度， 有两种情况
+    // 1. 表格容器宽度大于所有列宽度之和，则将剩下的宽度均匀分布到所有列中
+    // 2. 表格容器宽度小于所有列宽度之和，则什么也不管
+    const allColumnsWidth = leafColumns.value.reduce((acc, cur) => {
+      return acc + (cur.width ?? cur.minWidth!)
+    }, 0)
+
+    if (allColumnsWidth < containerWidth) {
+      const freeWidth = containerWidth - allColumnsWidth
+
+      const allocatableColumns = leafColumns.value.filter((column) => column.resizable !== false)
+
+      const allocatedWidth = freeWidth / allocatableColumns.length
+
+      allocatableColumns.forEach((column) => {
+        column.width = (column.width ?? column.minWidth!) + allocatedWidth
+      })
+    }
+
+    const fixedLeft = leafColumns.value.filter((column) => column.fixed === 'left')
+    const fixedRight = leafColumns.value.filter((column) => column.fixed === 'right')
+
+    fixedLeft.reduce((acc, cur) => {
+      cur.style.left = acc
+      return acc + (cur.width ?? cur.minWidth!)
+    }, 0)
+
+    fixedRight.reduceRight((acc, cur) => {
+      cur.style.right = acc
+      return acc + (cur.width ?? cur.minWidth!)
+    }, 0)
+  }
+
+  watchEffect(correctColumnStyle)
+
+  function updateResizeLine(transformX: number): void {
+    if (!resizeLineRef.value) return
+    resizeLineRef.value.style.transform = `translateX(${transformX}px)`
+  }
+
+  // 表格相对于页面左边缘的偏移量，
+  // 此处作为缓存以减少频繁地调用 getBoundingClientRect 方法
+  let containerLeft = 0
+  let originX = 0
+  let originWidth = 0
+  let currentResizeColumn: ColumnNode | null = null
+
+  function handleResizeMousedown(e: MouseEvent, resizeColumn: ColumnNode): void {
+    const tableEl = scrollRef.value?.el
+    if (!tableEl) return
+
+    showResizeLine.value = true
+    currentResizeColumn = resizeColumn
+    originX = e.pageX
+    originWidth = resizeColumn.width ?? 0
+
+    const { left } = tableEl.getBoundingClientRect()
+    containerLeft = left
+
+    nextTick(() => {
+      updateResizeLine(e.pageX - left)
+    })
+
+    document.addEventListener('mousemove', handleResizeMousemove)
+    document.addEventListener('mouseup', handleResizeMouseup)
+  }
+
+  function handleResizeMousemove(e: MouseEvent): void {
+    updateResizeLine(e.pageX - containerLeft)
+  }
+
+  function handleResizeMouseup(e: MouseEvent): void {
+    currentResizeColumn!.width = Math.max(
+      originWidth + e.pageX - originX,
+      currentResizeColumn!.minWidth!
+    )
+
+    showResizeLine.value = false
+    currentResizeColumn = null
+    correctColumnStyle()
+
+    document.removeEventListener('mouseup', handleResizeMouseup)
+    document.removeEventListener('mousemove', handleResizeMousemove)
+  }
+
+  provide(TableResizeKey, { handleResizeMousedown, headerRef })
+
+  return { resizeLineRef, colgroupRef, showResizeLine, handleResizeMousedown }
+}