@veltra/desktop 1.0.0

package/src/components/table/style.scss

@@ -0,0 +1,284 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: table;
+
+@mixin hover {
+  &:hover {
+    @include m.bem($root-name, cell) {
+      background-color: var(--u-table-hover-bg);
+      color: var(--u-table-hover-color);
+    }
+  }
+}
+
+@include m.b($root-name) {
+  --u-table-border-color: #e9e9e9;
+  --u-table-header-bg: #f4f5f7;
+  --u-table-header-color: #{fn.use-var(text-color, title)};
+  --u-table-stripe-bg: #f8fafc;
+  --u-table-stripe-color: inherit;
+  --u-table-hover-bg: #{fn.use-var(bg-color, hover)};
+  --u-table-hover-color: inherit;
+  --u-table-current-bg: #{fn.use-var(bg-color, hover)};
+  --u-table-current-color: inherit;
+  --u-table-checked-bg: var(--u-color-primary-light-9);
+  --u-table-checked-color: inherit;
+
+  @include m.dark() {
+    --u-table-border-color: #404040;
+    --u-table-header-bg: #2a2a2a;
+    --u-table-header-color: #{fn.use-var(text-color, main)};
+    --u-table-stripe-bg: #2a2a2a;
+    --u-table-stripe-color: #{fn.use-var(text-color, main)};
+    --u-table-hover-bg: #333333;
+    --u-table-hover-color: #{fn.use-var(text-color, title)};
+    --u-table-current-bg: #{fn.use-var(bg-color, hover)};
+    --u-table-current-color: inherit;
+    --u-table-checked-bg: var(--u-color-primary-dark-1);
+    --u-table-checked-color: inherit;
+  }
+
+  width: 100%;
+  position: relative;
+  border: 1px solid var(--u-table-border-color);
+  border-bottom: none;
+  overflow: hidden;
+
+  @include m.size using ($size) {
+    border-radius: fn.use-var(radius, $size);
+
+    @include m.bem($root-name, expand-toggle) {
+      font-size: fn.use-var(font-size, main, $size);
+    }
+
+    @include m.bem($root-name, cell) {
+      padding: fn.use-var(gap, $size);
+    }
+  }
+
+  @include m.e(checkbox) {
+    height: 20px;
+  }
+
+  @include m.e(content) {
+    width: fit-content;
+  }
+
+  @include m.e(wrap) {
+    width: 100%;
+    border-spacing: 0;
+    table-layout: fixed;
+    border-collapse: separate;
+  }
+
+  @include m.e(row) {
+    @include hover;
+
+    @include m.is(stripe) {
+      @include m.bem($root-name, cell) {
+        background-color: var(--u-table-stripe-bg);
+        color: var(--u-table-stripe-color);
+      }
+
+      @include hover;
+    }
+
+    @include m.is(expanded) {
+      @include m.bem($root-name, expand-toggle) {
+        & > i {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    @include m.is(current) {
+      & > {
+        @include m.bem($root-name, cell) {
+          background-color: var(--u-table-current-bg);
+          color: var(--u-table-current-color);
+        }
+      }
+    }
+
+    @include m.is(checked) {
+      & > {
+        @include m.bem($root-name, cell) {
+          background-color: var(--u-table-checked-bg);
+          color: var(--u-table-checked-color);
+        }
+      }
+    }
+  }
+
+  @include m.e(expand-toggle, expand-all) {
+    margin-right: fn.use-var(gap, small);
+
+    & > i {
+      transition: transform 0.25s;
+    }
+  }
+
+  @include m.is(all-expanded) {
+    @include m.bem($root-name, expand-all) {
+      & > i {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  @include m.is(border) {
+    border-right: none;
+    @include m.bem($root-name, cell) {
+      border-right: 1px solid var(--u-table-border-color);
+      margin-right: -1px;
+    }
+  }
+
+  @include m.e(expand-space) {
+    display: inline-block;
+    font-size: 0;
+    margin-right: fn.use-var(gap, small);
+    height: 1px;
+    width: fn.use-var(form-component-height, small);
+  }
+
+  @include m.e(head) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    user-select: none;
+
+    &:hover {
+      @include m.bem($root-name, cell) {
+        box-shadow:
+          -1px 0px var(--u-table-border-color) inset,
+          0px -1px var(--u-table-border-color) inset;
+      }
+    }
+
+    @include m.is(multistage) {
+      @include m.bem($root-name, cell) {
+        border-right: 1px solid var(--u-table-border-color);
+        margin-right: -1px;
+        border-bottom: 1px solid var(--u-table-border-color);
+        margin-bottom: -1px;
+      }
+    }
+  }
+
+  @include m.e(head) {
+    @include m.bem($root-name, cell) {
+      background-color: var(--u-table-header-bg);
+      font-weight: normal;
+      color: var(--u-table-header-color);
+    }
+  }
+
+  @include m.e(resize-handle) {
+    position: absolute;
+    width: 4px;
+    height: 100%;
+    right: 0px;
+    top: 0;
+    cursor: col-resize;
+  }
+
+  @include m.e(resize-line) {
+    pointer-events: none;
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    top: 0;
+    z-index: 1;
+    background-color: var(--u-table-border-color);
+  }
+
+  @include m.e(body) {
+    will-change: transform;
+  }
+
+  @include m.e(empty) {
+    position: sticky;
+    left: 50%;
+    transform: translate(-50%);
+  }
+
+  @include m.e(foot) {
+    position: sticky;
+    left: 0;
+    bottom: 0;
+
+    // 表脚与表体之间的分隔线，使用负边距避免叠加
+    @include m.bem($root-name, cell) {
+      border-top: 1px solid var(--u-table-border-color);
+
+      margin-top: -1px;
+    }
+  }
+
+  @include m.e(cell) {
+    background-color: fn.use-var(bg-color, top);
+    word-break: break-all;
+    border-bottom: 1px solid var(--u-table-border-color);
+    margin-bottom: -1px;
+
+    position: relative;
+    line-height: 1;
+
+    @each $position in (left, center, right) {
+      @include m.is($position) {
+        text-align: $position;
+      }
+    }
+
+    @include m.is(fixed-left, fixed-right) {
+      position: sticky;
+      z-index: 1;
+    }
+
+    @include m.is(fixed-left) {
+      @include m.is(last-fixed) {
+        &::after {
+          content: '';
+          position: absolute;
+          right: -10px;
+          top: 0;
+          width: 10px;
+          height: 100%;
+          pointer-events: none;
+          box-shadow: 10px 0 10px -10px fn.use-var(shadow-color) inset;
+        }
+      }
+    }
+
+    @include m.is(fixed-right) {
+      @include m.is(first-fixed) {
+        &::before {
+          content: '';
+          position: absolute;
+          left: -10px;
+          top: 0;
+          width: 10px;
+          height: 100%;
+          pointer-events: none;
+          box-shadow: -10px 0 10px -10px fn.use-var(shadow-color) inset;
+        }
+      }
+    }
+  }
+
+  @include m.e(resizer) {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  @include m.is(text-ellipsis) {
+    @include m.bem($root-name, cell) {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}

package/src/components/table/style.ts

@@ -0,0 +1,8 @@
+import '../scroll/style'
+import '../button/style'
+import '../icon/style'
+import '../tip/style'
+import '../checkbox/style'
+import '../radio/style'
+import '../empty/style'
+import './style.scss'

package/src/components/table/table-body.vue

@@ -0,0 +1,82 @@
+<template>
+  <tbody :class="cls.e('body')" ref="bodyRef">
+    <template v-for="{ row, index, stripeIndex } of tableRows" :key="row.uid">
+      <UExpandTableRow v-if="row.isExpandRow" :row="row" :data-index="index" />
+      <UTableRow
+        v-else
+        :row="row"
+        :data-index="index"
+        :class="[bem.is('current', row.isCurrent), getStripeCls(stripeIndex)]"
+      />
+    </template>
+
+    <!-- 空 -->
+    <tr v-if="!rows.length" :class="cls.e('row')">
+      <td :colspan="leafColumns.length">
+        <slot name="empty">
+          <UEmpty :class="cls.e('empty')" />
+        </slot>
+      </td>
+    </tr>
+
+    <slot></slot>
+  </tbody>
+</template>
+
+<script lang="ts" setup>
+import { bem, setStyles } from '@veltra/utils'
+import { computed, inject, shallowRef, watch } from 'vue'
+
+import { UEmpty } from '../empty'
+import { TableDIKey } from './di'
+import { UTableRow, UExpandTableRow } from './table-row'
+
+defineOptions({
+  name: 'TableBody'
+})
+
+const { cls, rows, virtualList, columnConfig, tableProps, virtualEnabled } = inject(TableDIKey)!
+const { leafColumns } = columnConfig
+
+const getStripeCls = computed(() => {
+  return tableProps.stripe ? (index: number) => bem.is('stripe', index % 2 === 1) : () => ''
+})
+
+const tableRows = computed(() => {
+  if (!virtualEnabled.value) {
+    return rows.value.map((row, index) => {
+      return {
+        row,
+        stripeIndex: row.index,
+        index
+      }
+    })
+  }
+
+  // 虚拟列表
+  return virtualList.value.map((item) => {
+    return {
+      row: rows.value[item.index]!,
+      stripeIndex: rows.value[item.index]!.index,
+      index: item.index
+    }
+  })
+})
+
+const bodyRef = shallowRef<HTMLElement>()
+
+function setBodyTransform(transformY: number) {
+  bodyRef.value &&
+    setStyles(bodyRef.value, {
+      transform: `translate3d(0, ${transformY}px, 0)`
+    })
+}
+
+watch(virtualList, (list) => {
+  setBodyTransform(list[0]?.start ?? 0)
+})
+
+defineExpose({
+  setBodyTransform
+})
+</script>

package/src/components/table/table-cell.vue

@@ -0,0 +1,33 @@
+<template>
+  <td
+    :class="getCellClass(column)"
+    :style="{ left: withUnit(left, 'px'), right: withUnit(right, 'px') }"
+    :rowspan="rowspan"
+    :colspan="colspan"
+    v-if="rowspan !== 0 && colspan !== 0"
+  >
+    <slot />
+  </td>
+</template>
+
+<script lang="ts" setup>
+import { withUnit } from '@veltra/utils'
+import { inject } from 'vue'
+
+import { TableDIKey } from './di'
+import type { ColumnNode } from './node/col'
+
+defineOptions({
+  name: 'TableCell'
+})
+
+const { column } = defineProps<{
+  column: ColumnNode
+  left?: number
+  right?: number
+  rowspan?: number
+  colspan?: number
+}>()
+
+const { getCellClass } = inject(TableDIKey)!
+</script>

package/src/components/table/table-foot.vue

@@ -0,0 +1,97 @@
+<template>
+  <tfoot v-if="tableSlots.foot || showSummary" :class="cls.e('foot')">
+    <tr v-if="showSummary">
+      <td
+        v-if="leafColumns[0]"
+        :class="getCellClass(leafColumns[0])"
+        :style="{
+          right: withUnit(leafColumns[0].style.right, 'px'),
+          left: withUnit(leafColumns[0].style.left, 'px')
+        }"
+      >
+        合计:
+      </td>
+      <td
+        v-for="column of leafColumns.slice(1)"
+        :class="getCellClass(column)"
+        :key="column.key"
+        :style="{
+          right: withUnit(column.style.right, 'px'),
+          left: withUnit(column.style.left, 'px')
+        }"
+      >
+        <u-node-render :content="getColumnSummaryNode(column)" />
+      </td>
+    </tr>
+    <slot />
+  </tfoot>
+</template>
+
+<script lang="ts" setup>
+import { $n } from '@cat-kit/core'
+import { withUnit } from '@veltra/utils'
+import type { RenderReturn } from '@veltra/utils/types/helper'
+import { computed, inject } from 'vue'
+
+import { UNodeRender } from '../node-render'
+import { TableDIKey } from './di'
+import type { ColumnNode } from './node/col'
+
+defineOptions({
+  name: 'TableFoot'
+})
+
+const { cls, columnConfig, rows, checkedRows, tableSlots, getCellClass } = inject(TableDIKey)!
+
+const { leafColumns } = columnConfig
+
+const showSummary = computed(() => {
+  return leafColumns.value.some((col) => !!col.data.summary)
+})
+
+function computeSummary(key: string) {
+  let sum = 0
+  let i = 0
+
+  while (i < rows.value.length) {
+    sum = $n.plus(sum, rows.value[i]!.data[key] ?? 0)
+    if (isNaN(sum)) return sum
+    i++
+  }
+
+  return sum
+}
+
+const summaryRow = computed<Record<string, any>>(() => {
+  return leafColumns.value.reduce((acc, column) => {
+    if (column.data.summary) {
+      acc[column.key] = computeSummary(column.key)
+    }
+    return acc
+  }, {})
+})
+
+function getColumnSummaryNode(column: ColumnNode): RenderReturn {
+  const { summary } = column.data
+
+  if (!summary) return null
+
+  let total = summaryRow.value[column.key]
+
+  if (typeof summary === 'function') {
+    return summary({
+      total,
+      rows: rows.value,
+      checkedRows: checkedRows.value,
+      column
+    })
+  }
+  return total
+}
+
+defineExpose({
+  getSummaryRow(): Record<string, any> {
+    return summaryRow.value
+  }
+})
+</script>

package/src/components/table/table-head.tsx

@@ -0,0 +1,50 @@
+import { bem, withUnit } from '@veltra/utils'
+import { defineComponent, inject, type DefineComponent } from 'vue'
+
+import { TableDIKey, TableResizeKey } from './di'
+
+const TableHead: DefineComponent = defineComponent({
+  name: 'TableHead',
+  setup() {
+    const { cls, columnConfig, getHeaderSlotsNode, getHeaderCellClass } = inject(TableDIKey)!
+    const { headers } = columnConfig
+    const handleCls = cls.e('resize-handle')
+
+    const { handleResizeMousedown, headerRef } = inject(TableResizeKey)!
+
+    return () => (
+      <thead
+        class={[cls.e('head'), bem.is('multistage', headers.value.length > 1)]}
+        ref={headerRef}
+      >
+        {headers.value.map((header, headerIndex) => (
+          <tr>
+            {header.map((column) => (
+              <th
+                class={getHeaderCellClass(column)}
+                key={column.key}
+                colspan={column.leafs}
+                rowspan={column.children?.length ? undefined : headers.value.length - headerIndex}
+                style={{
+                  left: withUnit(column.style.left, 'px'),
+                  right: withUnit(column.style.right, 'px')
+                }}
+              >
+                {getHeaderSlotsNode({ column })}
+
+                {column.isLeaf && column.resizable ? (
+                  <span
+                    class={handleCls}
+                    onMousedown={(e) => handleResizeMousedown(e, column)}
+                  ></span>
+                ) : null}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+    )
+  }
+})
+
+export default TableHead

package/src/components/table/table-row.tsx

@@ -0,0 +1,142 @@
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { defineComponent, type DefineComponent, type VNodeRef } from 'vue'
+import { inject } from 'vue'
+import type { JSX } from 'vue/jsx-runtime'
+
+import type { TableRow as ITableRow } from '../../types'
+import { UButton } from '../button'
+import { UIcon } from '../icon'
+import { TableDIKey } from './di'
+import UTabelCell from './table-cell.vue'
+
+export const UTableRow: DefineComponent<{ row: ITableRow }> = defineComponent({
+  name: 'TableRow',
+
+  props: ['row'],
+
+  setup(props) {
+    const { row } = props
+
+    const {
+      cls,
+      columnConfig,
+      getColumnSlotsNode,
+      toggleTreeRowExpand,
+      getCellCtx,
+      handleRowClick,
+      handleCellClick,
+      tableProps,
+      measureElement
+    } = inject(TableDIKey)!
+
+    const { columns, expandColumn } = columnConfig
+
+    return () => {
+      const _expandColumn = expandColumn.value
+
+      let expandCell: JSX.Element | null = null
+      if (_expandColumn) {
+        const expandCtx = getCellCtx(row, _expandColumn)
+        const cellSpan = tableProps.mergeCell?.(expandCtx)
+
+        if (!cellSpan || (cellSpan.colspan && cellSpan.rowspan)) {
+          const marginLeft = tableProps.tree ? (row.depth - 1) * 14 : 0
+          expandCell = (
+            <UTabelCell
+              column={_expandColumn}
+              left={_expandColumn.style.left}
+              right={_expandColumn.style.right}
+              key={row.uid + _expandColumn.key}
+              {...tableProps.mergeCell?.(expandCtx)}
+            >
+              {!row.isLeaf || (tableProps.expandable && !row.isExpandRow) ? (
+                <UButton
+                  text
+                  class={cls.e('expand-toggle')}
+                  type='primary'
+                  size='small'
+                  circle
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    toggleTreeRowExpand(row)
+                  }}
+                  style={`margin-left: ${marginLeft}px`}
+                >
+                  <UIcon>
+                    <ArrowRight />
+                  </UIcon>
+                </UButton>
+              ) : (
+                <i class={cls.e('expand-space')} style={`margin-left: ${marginLeft}px`}></i>
+              )}
+
+              {getColumnSlotsNode(expandCtx)}
+            </UTabelCell>
+          )
+        }
+      }
+
+      return (
+        <tr
+          class={[cls.e('row'), bem.is('expanded', row.expanded), bem.is('checked', row.checked)]}
+          onClick={(e) => handleRowClick(row, e)}
+          ref={measureElement as VNodeRef}
+          key={row.uid}
+        >
+          {expandCell}
+
+          {columns.value.map((column) => {
+            const cellCtx = getCellCtx(row, column)
+            const cellSpan = tableProps.mergeCell?.(cellCtx)
+            if (cellSpan && (!cellSpan.colspan || !cellSpan.rowspan)) {
+              return null
+            }
+
+            const cellNode = getColumnSlotsNode(cellCtx)
+
+            return (
+              <UTabelCell
+                column={column}
+                left={column.style.left}
+                right={column.style.right}
+                key={row.uid + column.key}
+                // @ts-ignore
+                onClick={(e) => handleCellClick(row, column, e)}
+                {...cellSpan}
+              >
+                {cellNode}
+              </UTabelCell>
+            )
+          })}
+        </tr>
+      )
+    }
+  }
+})
+
+export const UExpandTableRow = defineComponent({
+  name: 'ExpandTableRow',
+  props: ['row'],
+  setup(props) {
+    const { getExpandRowSlotsNode, cls, measureElement, columnConfig } = inject(TableDIKey)!
+    const { leafColumns } = columnConfig
+
+    return () => {
+      const { row } = props
+      const node = getExpandRowSlotsNode({
+        row,
+        index: row.index,
+        columns: leafColumns.value,
+        rowData: row.data
+      })
+      return (
+        <tr class={cls.e('row')} ref={measureElement as VNodeRef}>
+          <td colspan={leafColumns.value.length} class={cls.e('cell')}>
+            {node}
+          </td>
+        </tr>
+      )
+    }
+  }
+})