@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-table/Footer/index.tsx

@@ -0,0 +1,41 @@
+import { computed, defineComponent, reactive, toRef } from 'vue'
+
+import type { FlattenColumns } from '../context/SummaryContext'
+import { useProvideSummary } from '../context/SummaryContext'
+import { useInjectTable } from '../context/TableContext'
+import type { DefaultRecordType, StickyOffsets } from '../interface'
+import SummaryCell from './Cell'
+import SummaryRow from './Row'
+import Summary from './Summary'
+
+export interface FooterProps<RecordType = DefaultRecordType> {
+  stickyOffsets: StickyOffsets
+  flattenColumns: FlattenColumns<RecordType>
+}
+
+export default defineComponent<FooterProps>({
+  name: 'TableFooter',
+  inheritAttrs: false,
+  props: ['stickyOffsets', 'flattenColumns'] as any,
+  setup(props, { slots }) {
+    const tableContext = useInjectTable()
+    useProvideSummary(
+      reactive({
+        stickyOffsets: toRef(props, 'stickyOffsets'),
+        flattenColumns: toRef(props, 'flattenColumns'),
+        scrollColumnIndex: computed(() => {
+          const lastColumnIndex = props.flattenColumns.length - 1
+          const scrollColumn = props.flattenColumns[lastColumnIndex]
+          return scrollColumn?.scrollbar ? lastColumnIndex : null
+        }),
+      }),
+    )
+    return () => {
+      const { prefixCls } = tableContext
+      return <tfoot class={`${prefixCls}-summary`}>{slots.default?.()}</tfoot>
+    }
+  },
+})
+
+export { SummaryCell, SummaryRow }
+export const FooterComponents = Summary

package/src/vc-table/Header/DragHandle.tsx

@@ -0,0 +1,160 @@
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  onUnmounted,
+  shallowRef,
+  watchEffect,
+} from 'vue'
+import type { PropType } from 'vue'
+
+import type { EventHandler } from '../../_util/EventInterface'
+import raf from '../../_util/raf'
+import supportsPassive from '../../_util/supportsPassive'
+import { useInjectTableContext } from '../../table/context'
+import addEventListenerWrap from '../../vc-util/Dom/addEventListener'
+import devWarning from '../../vc-util/devWarning'
+import type { ColumnType } from '../interface'
+
+const events = {
+  mouse: {
+    start: 'mousedown',
+    move: 'mousemove',
+    stop: 'mouseup',
+  },
+  touch: {
+    start: 'touchstart',
+    move: 'touchmove',
+    stop: 'touchend',
+  },
+}
+type HandleEvent = MouseEvent & TouchEvent
+
+const defaultMinWidth = 50
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'DragHandle',
+  props: {
+    prefixCls: String,
+    width: {
+      type: Number,
+      required: true,
+    },
+    minWidth: {
+      type: Number,
+      default: defaultMinWidth,
+    },
+    maxWidth: {
+      type: Number,
+      default: Infinity,
+    },
+    column: {
+      type: Object as PropType<ColumnType<any>>,
+      default: undefined as ColumnType<any>,
+    },
+  },
+  setup(props) {
+    let startX = 0
+    let moveEvent = { remove: () => {} }
+    let stopEvent = { remove: () => {} }
+    const removeEvents = () => {
+      moveEvent.remove()
+      stopEvent.remove()
+    }
+    onUnmounted(() => {
+      removeEvents()
+    })
+    watchEffect(() => {
+      devWarning(!isNaN(props.width), 'Table', 'width must be a number when use resizable')
+    })
+
+    const { onResizeColumn } = useInjectTableContext()
+    const minWidth = computed(() => {
+      return typeof props.minWidth === 'number' && !isNaN(props.minWidth)
+        ? props.minWidth
+        : defaultMinWidth
+    })
+    const maxWidth = computed(() => {
+      return typeof props.maxWidth === 'number' && !isNaN(props.maxWidth)
+        ? props.maxWidth
+        : Infinity
+    })
+    const instance = getCurrentInstance()
+    let baseWidth = 0
+    const dragging = shallowRef(false)
+    let rafId: number
+    const updateWidth = (e: HandleEvent) => {
+      let pageX = 0
+      if (e.touches) {
+        if (e.touches.length) {
+          // touchmove
+          pageX = e.touches[0].pageX
+        } else {
+          // touchend
+          pageX = e.changedTouches[0].pageX
+        }
+      } else {
+        pageX = e.pageX
+      }
+      const tmpDeltaX = startX - pageX
+      let w = Math.max(baseWidth - tmpDeltaX, minWidth.value)
+      w = Math.min(w, maxWidth.value)
+      raf.cancel(rafId)
+      rafId = raf(() => {
+        onResizeColumn(w, props.column.__originColumn__)
+      })
+    }
+    const handleMove = (e: HandleEvent) => {
+      updateWidth(e)
+    }
+    const handleStop = (e: HandleEvent) => {
+      dragging.value = false
+      updateWidth(e)
+      removeEvents()
+    }
+    const handleStart = (e: HandleEvent, eventsFor: any) => {
+      dragging.value = true
+      removeEvents()
+      baseWidth = instance.vnode.el.parentNode.getBoundingClientRect().width
+      if (e instanceof MouseEvent && e.which !== 1) {
+        return
+      }
+      if (e.stopPropagation) e.stopPropagation()
+      startX = e.touches ? e.touches[0].pageX : e.pageX
+      moveEvent = addEventListenerWrap(document.documentElement, eventsFor.move, handleMove)
+      stopEvent = addEventListenerWrap(document.documentElement, eventsFor.stop, handleStop)
+    }
+    const handleDown: EventHandler = (e: HandleEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+      handleStart(e, events.mouse)
+    }
+    const handleTouchDown: EventHandler = (e: HandleEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+      handleStart(e, events.touch)
+    }
+
+    const handleClick: EventHandler = (e: HandleEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
+    return () => {
+      const { prefixCls } = props
+      const touchEvents = {
+        [supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: (e) => handleTouchDown(e),
+      }
+      return (
+        <div
+          class={`${prefixCls}-resize-handle ${dragging.value ? 'dragging' : ''}`}
+          onMousedown={handleDown}
+          {...touchEvents}
+          onClick={handleClick}
+        >
+          <div class={`${prefixCls}-resize-handle-line`}></div>
+        </div>
+      )
+    }
+  },
+})

package/src/vc-table/Header/Header.tsx

@@ -0,0 +1,128 @@
+import { computed, defineComponent } from 'vue'
+
+import classNames from '../../_util/classNames'
+import { useInjectTable } from '../context/TableContext'
+import type {
+  CellType,
+  ColumnGroupType,
+  ColumnType,
+  ColumnsType,
+  DefaultRecordType,
+  GetComponentProps,
+  StickyOffsets,
+} from '../interface'
+import HeaderRow from './HeaderRow'
+
+function parseHeaderRows<RecordType>(
+  rootColumns: ColumnsType<RecordType>,
+): CellType<RecordType>[][] {
+  const rows: CellType<RecordType>[][] = []
+
+  function fillRowCells(
+    columns: ColumnsType<RecordType>,
+    colIndex: number,
+    rowIndex = 0,
+  ): number[] {
+    // Init rows
+    rows[rowIndex] = rows[rowIndex] || []
+
+    let currentColIndex = colIndex
+    const colSpans: number[] = columns.filter(Boolean).map((column) => {
+      const cell: CellType<RecordType> = {
+        key: column.key,
+        class: classNames(column.className, column.class),
+        // children: column.title,
+        column,
+        colStart: currentColIndex,
+      }
+
+      let colSpan = 1
+
+      const subColumns = (column as ColumnGroupType<RecordType>).children
+      if (subColumns && subColumns.length > 0) {
+        colSpan = fillRowCells(subColumns, currentColIndex, rowIndex + 1).reduce(
+          (total, count) => total + count,
+          0,
+        )
+        cell.hasSubColumns = true
+      }
+
+      if ('colSpan' in column) {
+        ;({ colSpan } = column)
+      }
+
+      if ('rowSpan' in column) {
+        cell.rowSpan = column.rowSpan
+      }
+
+      cell.colSpan = colSpan
+      cell.colEnd = cell.colStart + colSpan - 1
+      rows[rowIndex].push(cell)
+
+      currentColIndex += colSpan
+
+      return colSpan
+    })
+
+    return colSpans
+  }
+
+  // Generate `rows` cell data
+  fillRowCells(rootColumns, 0)
+
+  // Handle `rowSpan`
+  const rowCount = rows.length
+  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+    rows[rowIndex].forEach((cell) => {
+      if (!('rowSpan' in cell) && !cell.hasSubColumns) {
+        cell.rowSpan = rowCount - rowIndex
+      }
+    })
+  }
+
+  return rows
+}
+
+export interface HeaderProps<RecordType = DefaultRecordType> {
+  columns: ColumnsType<RecordType>
+  flattenColumns: readonly ColumnType<RecordType>[]
+  stickyOffsets: StickyOffsets
+  customHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>
+}
+
+export default defineComponent<HeaderProps>({
+  name: 'TableHeader',
+  inheritAttrs: false,
+  props: ['columns', 'flattenColumns', 'stickyOffsets', 'customHeaderRow'] as any,
+  setup(props) {
+    const tableContext = useInjectTable()
+    const rows = computed(() => parseHeaderRows(props.columns))
+    return () => {
+      const { prefixCls, getComponent } = tableContext
+      const { stickyOffsets, flattenColumns, customHeaderRow } = props
+      const WrapperComponent = getComponent(['header', 'wrapper'], 'thead')
+      const trComponent = getComponent(['header', 'row'], 'tr')
+      const thComponent = getComponent(['header', 'cell'], 'th')
+      return (
+        <WrapperComponent class={`${prefixCls}-thead`}>
+          {rows.value.map((row, rowIndex) => {
+            const rowNode = (
+              <HeaderRow
+                key={rowIndex}
+                flattenColumns={flattenColumns}
+                cells={row}
+                stickyOffsets={stickyOffsets}
+                rowComponent={trComponent}
+                cellComponent={thComponent}
+                customHeaderRow={customHeaderRow}
+                index={rowIndex}
+              />
+            )
+
+            return rowNode
+          })}
+        </WrapperComponent>
+      )
+    }
+  },
+})

package/src/vc-table/Header/HeaderRow.tsx

@@ -0,0 +1,112 @@
+import { defineComponent } from 'vue'
+
+import Cell from '../Cell'
+import { useInjectTable } from '../context/TableContext'
+import type {
+  CellType,
+  ColumnType,
+  CustomizeComponent,
+  DefaultRecordType,
+  GetComponentProps,
+  StickyOffsets,
+} from '../interface'
+import { getCellFixedInfo } from '../utils/fixUtil'
+import { getColumnsKey } from '../utils/valueUtil'
+import DragHandleVue from './DragHandle'
+
+export interface RowProps<RecordType = DefaultRecordType> {
+  cells: readonly CellType<RecordType>[]
+  stickyOffsets: StickyOffsets
+  flattenColumns: readonly ColumnType<RecordType>[]
+  rowComponent: CustomizeComponent
+  cellComponent: CustomizeComponent
+  customHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>
+  index: number
+}
+
+export default defineComponent<RowProps>({
+  name: 'HeaderRow',
+  props: [
+    'cells',
+    'stickyOffsets',
+    'flattenColumns',
+    'rowComponent',
+    'cellComponent',
+    'index',
+    'customHeaderRow',
+  ] as any,
+  setup(props: RowProps) {
+    const tableContext = useInjectTable()
+    return () => {
+      const { prefixCls, direction } = tableContext
+      const {
+        cells,
+        stickyOffsets,
+        flattenColumns,
+        rowComponent: RowComponent,
+        cellComponent: CellComponent,
+        customHeaderRow,
+        index,
+      } = props
+
+      let rowProps
+      if (customHeaderRow) {
+        rowProps = customHeaderRow(
+          cells.map((cell) => cell.column),
+          index,
+        )
+      }
+
+      const columnsKey = getColumnsKey(cells.map((cell) => cell.column))
+
+      return (
+        <RowComponent {...rowProps}>
+          {cells.map((cell: CellType, cellIndex) => {
+            const { column } = cell
+            const fixedInfo = getCellFixedInfo(
+              cell.colStart,
+              cell.colEnd,
+              flattenColumns,
+              stickyOffsets,
+              direction,
+            )
+
+            let additionalProps
+            if (column && column.customHeaderCell) {
+              additionalProps = cell.column.customHeaderCell(column)
+            }
+            const col: ColumnType<any> = column
+            return (
+              <Cell
+                {...cell}
+                cellType="header"
+                ellipsis={column.ellipsis}
+                align={column.align}
+                component={CellComponent}
+                prefixCls={prefixCls}
+                key={columnsKey[cellIndex]}
+                {...fixedInfo}
+                additionalProps={additionalProps}
+                rowType="header"
+                column={column}
+                v-slots={{
+                  default: () => column.title,
+                  dragHandle: () =>
+                    col.resizable ? (
+                      <DragHandleVue
+                        prefixCls={prefixCls}
+                        width={col.width as number}
+                        minWidth={col.minWidth}
+                        maxWidth={col.maxWidth}
+                        column={col}
+                      />
+                    ) : null,
+                }}
+              />
+            )
+          })}
+        </RowComponent>
+      )
+    }
+  },
+})

package/src/vc-table/Panel/index.tsx

@@ -0,0 +1,7 @@
+function Panel(_, { slots }) {
+  return <div>{slots.default?.()}</div>
+}
+
+Panel.displayName = 'Panel'
+
+export default Panel