xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 15.9 kB
Source Map (JSON)
{"version":3,"file":"thead.mjs","sources":["../../src/table/thead.tsx"],"sourcesContent":["import { defineComponent, computed, SetupContext, PropType, ref, Ref, h, CSSProperties } from 'vue';\nimport isFunction from 'lodash/isFunction';\nimport { getColumnFixedStyles } from './hooks/useFixed';\nimport useClassName from './hooks/useClassName';\nimport { BaseTableCol, TableRowData, TdBaseTableProps } from './type';\nimport { renderTitle } from './hooks/useTableHeader';\nimport TEllipsis from './ellipsis';\nimport { formatClassNames } from './utils';\nimport { RowAndColFixedPosition, BaseTableColumns, ThRowspanAndColspan } from './interface';\nimport { AttachNode } from '../common';\n\nexport interface TheadProps {\n classPrefix: string;\n ellipsisOverlayClassName: string;\n // 是否固定表头\n isFixedHeader: boolean;\n maxHeight?: TdBaseTableProps['maxHeight'];\n height?: TdBaseTableProps['height'];\n // 固定列 left/right 具体值\n rowAndColFixedPosition: RowAndColFixedPosition;\n // 虚拟滚动单独渲染表头;表头吸顶单独渲染表头\n thWidthList?: { [colKey: string]: number };\n bordered?: boolean;\n isMultipleHeader?: boolean;\n thDraggable?: boolean;\n spansAndLeafNodes?: {\n rowspanAndColspanMap: ThRowspanAndColspan;\n leafColumns: BaseTableCol<TableRowData>[];\n };\n thList: BaseTableCol<TableRowData>[][];\n columnResizeParams: {\n resizeLineRef: Ref<HTMLDivElement>;\n resizeLineStyle: CSSProperties;\n onColumnMouseover: (e: MouseEvent, col: BaseTableCol<TableRowData>) => void;\n onColumnMousedown: (e: MouseEvent, col: BaseTableCol<TableRowData>, index: number) => void;\n };\n resizable?: Boolean;\n attach?: AttachNode;\n showColumnShadow?: { left: boolean; right: boolean };\n}\n\nexport default defineComponent({\n name: 'XHead',\n\n props: {\n classPrefix: String,\n ellipsisOverlayClassName: String,\n isFixedHeader: Boolean,\n thDraggable: Boolean,\n maxHeight: [String, Number] as PropType<TheadProps['maxHeight']>,\n height: [String, Number] as PropType<TheadProps['height']>,\n rowAndColFixedPosition: Map as PropType<TheadProps['rowAndColFixedPosition']>,\n thWidthList: Object as PropType<TheadProps['thWidthList']>,\n bordered: Boolean,\n isMultipleHeader: Boolean,\n resizable: Boolean,\n attach: [String, Function] as PropType<TheadProps['attach']>,\n spansAndLeafNodes: Object as PropType<TheadProps['spansAndLeafNodes']>,\n thList: Array as PropType<TheadProps['thList']>,\n columnResizeParams: Object as PropType<TheadProps['columnResizeParams']>,\n showColumnShadow: Object as PropType<TheadProps['showColumnShadow']>,\n },\n\n setup(props: TheadProps, { slots }: SetupContext) {\n const theadRef = ref<HTMLHeadElement>();\n const classnames = useClassName();\n const { tableHeaderClasses, tableBaseClass } = classnames;\n const theadClasses = computed(() => [\n tableHeaderClasses.header,\n {\n [tableHeaderClasses.fixed]: Boolean(props.maxHeight || props.height),\n [tableBaseClass.bordered]: props.bordered && props.isMultipleHeader,\n [tableHeaderClasses.multipleHeader]: props.isMultipleHeader,\n },\n ]);\n\n // 单行表格合并\n const colspanSkipMap = computed(() => {\n const map: { [key: string]: boolean } = {};\n const list = props.thList[0];\n for (let i = 0, len = list.length; i < len; i++) {\n const item = list[i];\n if (item.colspan > 1) {\n for (let j = i + 1; j < i + item.colspan; j++) {\n if (list[j]) {\n map[list[j].colKey] = true;\n }\n }\n }\n }\n return map;\n });\n\n const getTableNode = (thead: HTMLElement) => {\n let parent = thead;\n while (parent) {\n parent = parent.parentNode as HTMLElement;\n if (parent?.classList?.contains(`${props.classPrefix}-table`)) {\n break;\n }\n }\n return parent;\n };\n\n return {\n ...classnames,\n colspanSkipMap,\n theadClasses,\n theadRef,\n slots,\n getTableNode,\n };\n },\n\n render() {\n const renderThNodeList = (\n rowAndColFixedPosition: RowAndColFixedPosition,\n thWidthList: TheadProps['thWidthList'],\n ) => {\n // thBorderMap: rowspan 会影响 tr > th 是否为第一列表头,从而影响边框\n const thBorderMap = new Map<any, boolean>();\n const thRowspanAndColspan = this.spansAndLeafNodes.rowspanAndColspanMap;\n return this.thList.map((row, rowIndex) => {\n const thRow = row.map((col: BaseTableColumns[0], index: number) => {\n // 因合并单行表头,跳过\n if (this.colspanSkipMap[col.colKey]) return null;\n const rowspanAndColspan = thRowspanAndColspan.get(col);\n if (index === 0 && rowspanAndColspan.rowspan > 1) {\n for (let j = rowIndex + 1; j < rowIndex + rowspanAndColspan.rowspan; j++) {\n thBorderMap.set(this.thList[j][0], true);\n }\n }\n const thStyles = getColumnFixedStyles(col, index, rowAndColFixedPosition, this.tableColFixedClasses);\n const colParams = {\n col,\n colIndex: index,\n row: {},\n rowIndex: -1,\n };\n const customClasses = formatClassNames(col.className, { ...colParams, type: 'th' });\n const isLeftFixedActive = this.showColumnShadow.left && col.fixed === 'left';\n const isRightFixedActive = this.showColumnShadow.right && col.fixed === 'right';\n const canDragSort = this.thDraggable && !(isLeftFixedActive || isRightFixedActive);\n const thClasses = [\n thStyles.classes,\n customClasses,\n {\n // 受 rowspan 影响,部分 tr > th:first-child 需要补足左边框\n [this.tableHeaderClasses.thBordered]: thBorderMap.get(col),\n [`${this.classPrefix}-table__th-${col.colKey}`]: col.colKey,\n [this.tdAlignClasses[col.align]]: col.align && col.align !== 'left',\n // 允许拖拽的列类名\n [this.tableDraggableClasses.dragSortTh]: canDragSort,\n },\n ];\n const withoutChildren = !col.children?.length;\n const width = withoutChildren && thWidthList?.[col.colKey] ? `${thWidthList?.[col.colKey]}px` : undefined;\n const styles = { ...(thStyles.style || {}), width };\n const innerTh = renderTitle(this.slots, col, index);\n const resizeColumnListener =\n this.resizable || !canDragSort\n ? {\n onMousedown: (e: MouseEvent) => {\n if (this.resizable) {\n this.columnResizeParams?.onColumnMousedown?.(e, col, index);\n }\n if (!canDragSort) {\n const timer = setTimeout(() => {\n const thList = this.theadRef.querySelectorAll('th');\n thList[index]?.removeAttribute('draggable');\n clearTimeout(timer);\n }, 10);\n }\n },\n onMousemove: (e: MouseEvent) => {\n this.resizable && this.columnResizeParams?.onColumnMouseover?.(e, col);\n },\n }\n : {};\n const content = isFunction(col.ellipsisTitle) ? col.ellipsisTitle(h, { col, colIndex: index }) : undefined;\n const isEllipsis = col.ellipsisTitle !== undefined ? Boolean(col.ellipsisTitle) : Boolean(col.ellipsis);\n const attrs = (isFunction(col.attrs) ? col.attrs({ ...colParams, type: 'th' }) : col.attrs) || {};\n if (col.colspan > 1) {\n attrs.colspan = col.colspan;\n }\n return (\n <th\n key={col.colKey}\n data-colkey={col.colKey}\n class={thClasses}\n style={styles}\n {...attrs}\n {...rowspanAndColspan}\n {...resizeColumnListener}\n >\n <div class={this.tableBaseClass.thCellInner}>\n {isEllipsis ? (\n <TEllipsis\n placement=\"bottom\"\n attach={this.attach || (this.theadRef ? () => this.getTableNode(this.theadRef) : undefined)}\n tooltipContent={content && (() => content)}\n tooltipProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}\n overlayClassName={this.ellipsisOverlayClassName}\n classPrefix={this.classPrefix}\n >\n {innerTh}\n </TEllipsis>\n ) : (\n innerTh\n )}\n </div>\n </th>\n );\n });\n return <tr key={rowIndex}>{thRow}</tr>;\n });\n };\n\n return (\n <thead ref=\"theadRef\" class={this.theadClasses}>\n {renderThNodeList(this.rowAndColFixedPosition, this.thWidthList)}\n </thead>\n );\n },\n});\n"],"names":["_isVNode","name","props","classPrefix","ellipsisOverlayClassName","isFixedHeader","thDraggable","maxHeight","height","rowAndColFixedPosition","thWidthList","bordered","isMultipleHeader","resizable","attach","spansAndLeafNodes","thList","columnResizeParams","showColumnShadow","setup","colspanSkipMap","theadClasses","theadRef","slots","getTableNode","thBorderMap","col","colIndex","rowIndex","type","width","onMousedown","onMousemove","_this","isFunction","attrs","_createVNode"],"mappings":"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"}