@koi-design/uxd-ui 14.0.13 → 14.0.15

package/es/components/Table/Table.type.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.type.mjs","sources":["../../../../src/components/Table/Table.type.ts"],"sourcesContent":["import type { Component, ComputedRef, CSSProperties, ExtractPropTypes, PropType, Ref, Slot, Slots, VNodeChild } from 'vue';\nimport type { JSX } from 'vue/jsx-runtime';\nimport { normalSizeMap } from '../../utils/globalType';\nimport { oneOf } from '../../utils/propsValidators';\nimport type { EmitFn, NormalSizeMap } from '../../utils/globalType';\nimport type { TableLocal } from '../locale/default';\nimport type { PaginationProps } from '../Pagination/Pagination.type';\nimport type Table from './Table.vue';\nimport type { RowData } from './hooks/useDraggable';\n\nexport type ColumnFixed = boolean | 'left' | 'right';\nexport type ColumnAlign = 'left' | 'right' | 'center';\nexport type ColumnSortOrder = 'ascend' | 'descend';\nexport type ColumnSortFn = (a: any, b: any) => number;\nexport interface ColumnFilter {\n  label: string;\n  value: string | number;\n}\nexport type ColumnFilterFn = (value: string | number, row: any) => boolean;\nexport interface ColumnSlotParams {\n  row: any;\n  index: number;\n  rowKey: string | number;\n  pagination: Partial<PaginationProps>;\n  column: InnerColumn;\n}\n\nexport interface TableColProps {\n  width: string;\n  key: string;\n  fixed: boolean;\n  minWidth: string;\n  resizeWidth: string;\n}\n\nexport interface ColumnFilterSlotParams {\n  selectedKeys: (string | number)[];\n  setSelectedKeys: (keys: (string | number)[]) => void;\n  confirm: () => void;\n  column: InnerColumn;\n}\n\nexport interface TableColumnSkeleton {\n  type: 'circle' | 'rect' | 'text' | 'p' | 'image';\n  style: CSSProperties;\n}\nexport interface TableColumn {\n  key: string;\n  title?: string;\n  dataIndex?: string;\n  width?: number | string;\n  minWidth?: number;\n  children?: TableColumn[];\n  fixed?: ColumnFixed;\n  align?: ColumnAlign;\n  ellipsis?: boolean;\n  sortable?: boolean | 'custom';\n  sortOrder?: ColumnSortOrder;\n  sortDirections?: ColumnSortOrder[];\n  sortFn?: ColumnSortFn;\n  filterable?: boolean;\n  filters?: ColumnFilter[];\n  filterFn?: ColumnFilterFn;\n  filterIcon?: string | Component;\n  filterIconStyle?: CSSProperties;\n  filterMultiple?: boolean;\n  filteredValue?: (string | number)[];\n  onFilterDropdownVisibleChange?: (visible: boolean) => void;\n  slot?: string;\n  titleSlot?: string;\n  filterSlot?: string;\n  render?: (param: ColumnSlotParams) => VNodeChild | JSX.Element;\n  titleRender?: (column: TableColumn) => VNodeChild | JSX.Element;\n  filterRender?: (param: ColumnFilterSlotParams) => VNodeChild | JSX.Element;\n  resizable?: boolean;\n  customCell?: (row: any, index: number) => Record<string, any>;\n  className?: string;\n  hideSummary?: boolean;\n  summarySlot?: string;\n  summaryRender?: (sum?: number) => VNodeChild | JSX.Element;\n  customSummaryCell?: () => Record<string, any>;\n  autoSummary?: boolean;\n  tips?: string;\n  skeleton?: TableColumnSkeleton[];\n\n  // draggable?: boolean;\n  // handleDragStart?: (event: MouseEvent, param: ColumnSlotParams) => void;\n  // render?: (param: ColumnSlotParams, handleDragStart?: (event: MouseEvent, DragParam: ColumnSlotParams) => void) => VNodeChild | JSX.Element;\n}\n\nexport interface InnerColumn extends TableColumn {\n  _index?: number;\n  rowSpan?: number;\n  colSpan?: number;\n  children?: InnerColumn[];\n  type?: string;\n  summaryRender?: (sum?: number) => VNodeChild | JSX.Element;\n  left?: number;\n  right?: number;\n  lastLeft?: boolean;\n  firstRight?: boolean;\n  _isRightEdge?: boolean;\n}\n\nexport type SelectionType = 'checkbox' | 'radio';\nexport interface SelectionMenu {\n  key: string;\n  text: string;\n  onSelect?: (rows: any[]) => void;\n}\nexport interface SelectionConfig {\n  selectedKeys: (string | number)[] | undefined;\n  type?: SelectionType;\n  setSelectionProps?: (row: any, index: any) => Record<string, any>;\n  selectionMenus?: SelectionMenu[];\n  hideDefaultMenus?: boolean;\n  onChange?: (keys: (string | number)[], selectedRows: any[]) => void;\n  onSelect?: (data: any, checked: boolean, selectedRows: any[], event: any) => void;\n  onSelectMultiple?: (checked: boolean, selectedRows: any[], changeRows: any[]) => void;\n  onSelectAll?: (checked: boolean, selectedRows: any[], changeRows: any[]) => void;\n  onSelectInvert?: (keys: (string | number)[]) => void;\n  columnWidth?: number;\n  fixed?: ColumnFixed;\n  showCheckAll?: boolean;\n}\n\nexport interface DraggableConfig {\n  fixed?: ColumnFixed;\n  onDragDrop: (sourceRowKey: string | number, targetRowKey: string | number) => void;\n}\n\nexport type PaginationPosition = 'top' | 'bottom' | 'both' | undefined;\nexport type PaginationAlign = 'left' | 'right' | undefined;\nexport interface PaginationConfig extends Partial<PaginationProps> {\n  position: PaginationPosition;\n  align: PaginationAlign;\n}\n\nexport interface InnerDataItem {\n  _index: number;\n  _key: string | number;\n  _isSkeleton?: boolean;\n  dataRef: Record<string, any>;\n  children?: InnerColumn[];\n}\n\nexport type RowClassName = (row: Record<string, any>, index: number) => string;\nexport type GetRowKey = (row: Record<string, any>, index: number) => string | number;\n\nexport const tableProps = {\n  data: {\n    type: Array as PropType<Record<string, any>[]>,\n    default: () => [] as Record<string, any>[]\n  },\n  columns: {\n    type: Array as PropType<TableColumn[]>,\n    default: () => [] as TableColumn[]\n  },\n  border: {\n    type: Boolean,\n    default: false\n  },\n  showHeader: {\n    type: Boolean,\n    default: true\n  },\n  width: {\n    type: [Number, String]\n  },\n  maxHeight: {\n    type: [Number, String]\n  },\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  size: {\n    type: String as PropType<NormalSizeMap>,\n    default: 'default',\n    validator: oneOf(normalSizeMap)\n  },\n  disabledHover: {\n    type: Boolean,\n    default: false\n  },\n  rowKey: {\n    type: [Function, String] as PropType<string | GetRowKey>,\n    default: 'key'\n  },\n  rowClassName: {\n    type: Function as PropType<RowClassName>\n  },\n  expandIcon: {\n    type: String\n  },\n  defaultExpandAllRows: {\n    type: Boolean,\n    default: false\n  },\n  expandedRowKeys: {\n    type: Array as PropType<string[]>\n  },\n  treeIconColumnIndex: {\n    type: Number\n  },\n  defaultShowAllChildren: {\n    type: Boolean,\n    default: false\n  },\n  showChildrenRowKeys: {\n    type: Array as PropType<string[]>\n  },\n  indentSize: {\n    type: Number,\n    default: 20\n  },\n  selection: {\n    type: Object as PropType<SelectionConfig>\n  },\n  locale: {\n    type: Object as PropType<TableLocal>\n  },\n  stripe: {\n    type: Boolean,\n    default: false\n  },\n  showPagination: {\n    type: Boolean,\n    default: false\n  },\n  pagination: {\n    type: Object as PropType<PaginationConfig>\n  },\n  showSummary: {\n    type: Boolean,\n    default: false\n  },\n  expandFix: {\n    type: Boolean,\n    default: false\n  },\n  expandIndent: {\n    type: Boolean,\n    default: true\n  },\n  draggable: {\n    type: Object as PropType<DraggableConfig>\n  },\n  headerSticky: {\n    type: Number,\n    default: undefined as undefined\n  },\n  variant: {\n    type: String as PropType<'surface' | 'ghost' | 'border'>,\n    default: 'ghost'\n  },\n  radius: {\n    type: Boolean,\n    default: false\n  },\n  loadingType: {\n    type: String as PropType<'spinner' | 'skeleton'>,\n    default: 'spinner'\n  },\n  skeletonRows: {\n    type: Number,\n    default: 3\n  }\n};\nexport type TableProps = ExtractPropTypes<typeof tableProps>;\n\nexport type SaveRef = (key: string) => (el: any) => void;\nexport type TableRefs = Record<string, any>;\nexport interface ExpandParams {\n  row: any;\n  rowKey: string | number;\n  async?: boolean;\n  done?: () => void;\n  tree?: boolean;\n}\nexport interface TableContext {\n  prefixCls: ComputedRef<string>;\n  locale: ComputedRef<TableLocal>;\n  data: ComputedRef<InnerDataItem[]>;\n  saveRef: SaveRef;\n  tableRefs: TableRefs;\n  showResizeLine: Ref<boolean>;\n  props: {\n    showHeader: Ref<boolean>;\n    maxHeight: Ref<string | number | undefined>;\n    expandIcon: Ref<string | undefined>;\n    rowClassName: Ref<RowClassName>;\n    indentSize: Ref<number>;\n    emptyText: ComputedRef<string>;\n    showSummary: Ref<boolean>;\n    disabledHover: Ref<boolean>;\n    expandIndent: Ref<boolean>;\n    headerSticky: Ref<number | undefined>;\n    loading: Ref<boolean>;\n    width: Ref<string | number | undefined>;\n  };\n  slots: Slots;\n  expand: {\n    expandedRowRender: ComputedRef<Slot | undefined>;\n    expandedRowKeys: Ref<(string | number)[]>;\n    showChildrenRowKeys: Ref<(string | number)[]>;\n    isRowExpanded: (rowKey: string | number, tree: boolean) => boolean;\n    expandIconColumnIndex: ComputedRef<number>;\n    handleExpandChange: ({ row, rowKey, async, done, tree }: ExpandParams, e: Event) => void;\n    isTreeTable: ComputedRef<boolean>;\n  };\n  size: {\n    tableWidth: Ref<number>;\n    resizeColumns: Ref<InnerColumn[]>;\n    // sizesMap: Record<string, number>;\n    isScrollX: ComputedRef<boolean>;\n    setResizeWidth: (column: InnerColumn, width: number) => void;\n    handleColumnResize: (columnWidth: number, changeWidth: number, column: InnerColumn, event: Event) => void;\n    debouncedHandleResize: any;\n  };\n  fixed: {\n    isColumnFixed: ComputedRef<boolean>;\n    currentHoverKey: Ref<string | number | null>;\n  };\n  draggable: {\n    setRowRefs: (val: RowData) => void;\n  };\n  rowEvents: {\n    onRowMouseEnter: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowMouseLeave: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowClick: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowDoubleClick: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowContextMenu: (data: Record<string, any>, index: number, e: Event) => void;\n  };\n  headerEvents: {\n    onHeaderCellClick: (column: InnerColumn, e: any) => void;\n  };\n  filterAndSorter: {\n    hasAction: (column: InnerColumn) => boolean;\n    hasSorters: (column: InnerColumn) => boolean;\n    hasFilters: (column: InnerColumn) => boolean;\n    isSortColumn: (column: InnerColumn) => boolean;\n    isAscend: (column: InnerColumn) => boolean;\n    isDescend: (column: InnerColumn) => boolean;\n    hasAscend: (column: InnerColumn) => boolean;\n    hasDescend: (column: InnerColumn) => boolean;\n    toggleSortOrder: (column: InnerColumn) => void;\n    setColumnFilter: (column: InnerColumn, selectedKeys: (string | number)[]) => void;\n  };\n  isSummary: boolean;\n  pagination: PaginationProps;\n}\n\nconst rowEmitFn = (data: Record<string, any>, index: number, e: Event) => typeof data === 'object' && typeof index === 'number' && e instanceof Event;\nexport const tableEmits = {\n  'row-mouseenter': rowEmitFn,\n  'row-mouseleave': rowEmitFn,\n  'row-click': rowEmitFn,\n  'row-doubleclick': rowEmitFn,\n  'row-contextmenu': rowEmitFn,\n  'header-click': (column: TableColumn, e: Event) => typeof column === 'object' && e instanceof Event,\n  'column-resize': (columnWidth: number, changeWidth: number, column: InnerColumn, event: Event) =>\n    typeof columnWidth === 'number' && typeof changeWidth === 'number' && typeof column === 'object' && event instanceof Event,\n  expand: (expanded: boolean, row: Record<string, any>, type: string) =>\n    typeof expanded === 'boolean' && typeof row === 'object' && typeof type === 'string',\n  'async-expand': (row: any, done: (() => void) | undefined, keys: (string | number)[]) =>\n    typeof row === 'object' && Array.isArray(keys) && typeof done === 'function',\n  change: (\n    pagination: PaginationProps,\n    sort: { column: TableColumn | null; order: ColumnSortOrder | null },\n    filter: Record<string, (string | number)[]> | null\n  ) => !(pagination === null && sort === null && filter === null)\n};\n\nexport type TableEmits = typeof tableEmits;\nexport type TableEmit = EmitFn<TableEmits>;\nexport type TableInstanceType = InstanceType<typeof Table>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.type.mjs","sources":["../../../../src/components/Table/Table.type.ts"],"sourcesContent":["import type { Component, ComputedRef, CSSProperties, ExtractPropTypes, PropType, Ref, Slot, Slots, VNodeChild } from 'vue';\nimport type { JSX } from 'vue/jsx-runtime';\nimport { normalSizeMap } from '../../utils/globalType';\nimport { oneOf } from '../../utils/propsValidators';\nimport type { EmitFn, NormalSizeMap } from '../../utils/globalType';\nimport type { TableLocal } from '../locale/default';\nimport type { PaginationProps } from '../Pagination/Pagination.type';\nimport type Table from './Table.vue';\nimport type { RowData } from './hooks/useDraggable';\n\nexport type ColumnFixed = boolean | 'left' | 'right';\nexport type ColumnAlign = 'left' | 'right' | 'center';\nexport type ColumnSortOrder = 'ascend' | 'descend';\nexport type ColumnSortFn = (a: any, b: any) => number;\nexport interface ColumnFilter {\n  label: string;\n  value: string | number;\n}\nexport type ColumnFilterFn = (value: string | number, row: any) => boolean;\nexport interface ColumnSlotParams {\n  row: any;\n  index: number;\n  rowKey: string | number;\n  pagination: Partial<PaginationProps>;\n  column: InnerColumn;\n}\n\nexport interface TableColProps {\n  width: string;\n  key: string;\n  fixed: boolean;\n  minWidth: string;\n  resizeWidth: string;\n}\n\nexport interface ColumnFilterSlotParams {\n  selectedKeys: (string | number)[];\n  setSelectedKeys: (keys: (string | number)[]) => void;\n  confirm: () => void;\n  column: InnerColumn;\n}\n\nexport interface TableColumnSkeleton {\n  type: 'circle' | 'rect' | 'text' | 'p' | 'image';\n  style: CSSProperties;\n}\nexport interface TableColumn {\n  key: string;\n  title?: string;\n  dataIndex?: string;\n  width?: number | string;\n  minWidth?: number;\n  children?: TableColumn[];\n  fixed?: ColumnFixed;\n  align?: ColumnAlign;\n  ellipsis?: boolean;\n  sortable?: boolean | 'custom';\n  sortOrder?: ColumnSortOrder;\n  sortDirections?: ColumnSortOrder[];\n  sortFn?: ColumnSortFn;\n  filterable?: boolean;\n  filters?: ColumnFilter[];\n  filterFn?: ColumnFilterFn;\n  filterIcon?: string | Component;\n  filterIconStyle?: CSSProperties;\n  filterMultiple?: boolean;\n  filteredValue?: (string | number)[];\n  onFilterDropdownVisibleChange?: (visible: boolean) => void;\n  slot?: string;\n  titleSlot?: string;\n  filterSlot?: string;\n  render?: (param: ColumnSlotParams) => VNodeChild | JSX.Element;\n  titleRender?: (column: TableColumn) => VNodeChild | JSX.Element;\n  filterRender?: (param: ColumnFilterSlotParams) => VNodeChild | JSX.Element;\n  resizable?: boolean;\n  customCell?: (row: any, index: number) => Record<string, any>;\n  className?: string;\n  hideSummary?: boolean;\n  summarySlot?: string;\n  summaryRender?: (sum?: number) => VNodeChild | JSX.Element;\n  customSummaryCell?: () => Record<string, any>;\n  autoSummary?: boolean;\n  tips?: string;\n  skeleton?: TableColumnSkeleton[];\n\n  // draggable?: boolean;\n  // handleDragStart?: (event: MouseEvent, param: ColumnSlotParams) => void;\n  // render?: (param: ColumnSlotParams, handleDragStart?: (event: MouseEvent, DragParam: ColumnSlotParams) => void) => VNodeChild | JSX.Element;\n}\n\nexport interface InnerColumn extends TableColumn {\n  _index?: number;\n  rowSpan?: number;\n  colSpan?: number;\n  children?: InnerColumn[];\n  type?: string;\n  summaryRender?: (sum?: number) => VNodeChild | JSX.Element;\n  left?: number;\n  right?: number;\n  lastLeft?: boolean;\n  firstRight?: boolean;\n  _isRightEdge?: boolean;\n}\n\nexport type SelectionType = 'checkbox' | 'radio';\nexport interface SelectionMenu {\n  key: string;\n  text: string;\n  onSelect?: (rows: any[]) => void;\n}\nexport interface SelectionConfig {\n  selectedKeys: (string | number)[] | undefined;\n  type?: SelectionType;\n  setSelectionProps?: (row: any, index: any) => Record<string, any>;\n  selectionMenus?: SelectionMenu[];\n  hideDefaultMenus?: boolean;\n  onChange?: (keys: (string | number)[], selectedRows: any[]) => void;\n  onSelect?: (data: any, checked: boolean, selectedRows: any[], event: any) => void;\n  onSelectMultiple?: (checked: boolean, selectedRows: any[], changeRows: any[]) => void;\n  onSelectAll?: (checked: boolean, selectedRows: any[], changeRows: any[]) => void;\n  onSelectInvert?: (keys: (string | number)[]) => void;\n  columnWidth?: number;\n  fixed?: ColumnFixed;\n  showCheckAll?: boolean;\n}\n\nexport interface DraggableConfig {\n  fixed?: ColumnFixed;\n  onDragDrop: (sourceRowKey: string | number, targetRowKey: string | number) => void;\n}\n\nexport type PaginationPosition = 'top' | 'bottom' | 'both' | undefined;\nexport type PaginationAlign = 'left' | 'right' | undefined;\nexport interface PaginationConfig extends Partial<PaginationProps> {\n  position: PaginationPosition;\n  align: PaginationAlign;\n}\n\nexport interface InnerDataItem {\n  _index: number;\n  _key: string | number;\n  _isSkeleton?: boolean;\n  dataRef: Record<string, any>;\n  children?: InnerColumn[];\n}\n\nexport type RowClassName = (row: Record<string, any>, index: number) => string;\nexport type GetRowKey = (row: Record<string, any>, index: number) => string | number;\n\nexport const tableProps = {\n  data: {\n    type: Array as PropType<Record<string, any>[]>,\n    default: () => [] as Record<string, any>[]\n  },\n  columns: {\n    type: Array as PropType<TableColumn[]>,\n    default: () => [] as TableColumn[]\n  },\n  border: {\n    type: Boolean,\n    default: false\n  },\n  showHeader: {\n    type: Boolean,\n    default: true\n  },\n  width: {\n    type: [Number, String]\n  },\n  maxHeight: {\n    type: [Number, String]\n  },\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  size: {\n    type: String as PropType<NormalSizeMap>,\n    default: 'default',\n    validator: oneOf(normalSizeMap)\n  },\n  disabledHover: {\n    type: Boolean,\n    default: false\n  },\n  rowKey: {\n    type: [Function, String] as PropType<string | GetRowKey>,\n    default: 'key'\n  },\n  rowClassName: {\n    type: Function as PropType<RowClassName>\n  },\n  expandIcon: {\n    type: String\n  },\n  defaultExpandAllRows: {\n    type: Boolean,\n    default: false\n  },\n  expandedRowKeys: {\n    type: Array as PropType<string[]>\n  },\n  treeIconColumnIndex: {\n    type: Number\n  },\n  defaultShowAllChildren: {\n    type: Boolean,\n    default: false\n  },\n  showChildrenRowKeys: {\n    type: Array as PropType<string[]>\n  },\n  indentSize: {\n    type: Number,\n    default: 20\n  },\n  selection: {\n    type: Object as PropType<SelectionConfig>\n  },\n  locale: {\n    type: Object as PropType<TableLocal>\n  },\n  stripe: {\n    type: Boolean,\n    default: false\n  },\n  showPagination: {\n    type: Boolean,\n    default: false\n  },\n  pagination: {\n    type: Object as PropType<PaginationConfig>\n  },\n  showSummary: {\n    type: Boolean,\n    default: false\n  },\n  expandFix: {\n    type: Boolean,\n    default: false\n  },\n  expandIndent: {\n    type: Boolean,\n    default: true\n  },\n  draggable: {\n    type: Object as PropType<DraggableConfig>\n  },\n  headerSticky: {\n    type: Number,\n    default: undefined as undefined\n  },\n  variant: {\n    type: String as PropType<'surface' | 'ghost' | 'border'>,\n    default: 'ghost'\n  },\n  radius: {\n    type: Boolean,\n    default: false\n  },\n  loadingType: {\n    type: String as PropType<'spinner' | 'skeleton'>,\n    default: 'spinner'\n  },\n  skeletonRows: {\n    type: Number,\n    default: 3\n  }\n};\nexport type TableProps = ExtractPropTypes<typeof tableProps>;\n\nexport type SaveRef = (key: string) => (el: any) => void;\nexport type TableRefs = Record<string, any>;\nexport interface ExpandParams {\n  row: any;\n  rowKey: string | number;\n  async?: boolean;\n  done?: () => void;\n  tree?: boolean;\n}\nexport interface TableContext {\n  prefixCls: ComputedRef<string>;\n  locale: ComputedRef<TableLocal>;\n  data: ComputedRef<InnerDataItem[]>;\n  saveRef: SaveRef;\n  tableRefs: TableRefs;\n  showResizeLine: Ref<boolean>;\n  props: {\n    showHeader: Ref<boolean>;\n    maxHeight: Ref<string | number | undefined>;\n    expandIcon: Ref<string | undefined>;\n    rowClassName: Ref<RowClassName>;\n    indentSize: Ref<number>;\n    emptyText: ComputedRef<string>;\n    showSummary: Ref<boolean>;\n    disabledHover: Ref<boolean>;\n    expandIndent: Ref<boolean>;\n    headerSticky: Ref<number | undefined>;\n    loading: Ref<boolean>;\n    width: Ref<string | number | undefined>;\n  };\n  slots: Slots;\n  expand: {\n    expandedRowRender: ComputedRef<Slot | undefined>;\n    expandedRowKeys: Ref<(string | number)[]>;\n    showChildrenRowKeys: Ref<(string | number)[]>;\n    isRowExpanded: (rowKey: string | number, tree: boolean) => boolean;\n    expandIconColumnIndex: ComputedRef<number>;\n    handleExpandChange: ({ row, rowKey, async, done, tree }: ExpandParams, e: Event) => void;\n    isTreeTable: ComputedRef<boolean>;\n  };\n  size: {\n    tableWidth: Ref<number>;\n    resizeColumns: Ref<InnerColumn[]>;\n    columnWidths: Ref<Record<string, number>>;\n    syncColumnWidth: (width: number, column: InnerColumn) => void;\n    // sizesMap: Record<string, number>;\n    isScrollX: ComputedRef<boolean>;\n    setResizeWidth: (column: InnerColumn, width: number) => void;\n    handleColumnResize: (columnWidth: number, changeWidth: number, column: InnerColumn, event: Event) => void;\n    debouncedHandleResize: any;\n  };\n  fixed: {\n    isColumnFixed: ComputedRef<boolean>;\n    currentHoverKey: Ref<string | number | null>;\n  };\n  draggable: {\n    setRowRefs: (val: RowData) => void;\n  };\n  rowEvents: {\n    onRowMouseEnter: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowMouseLeave: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowClick: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowDoubleClick: (data: Record<string, any>, index: number, e: Event) => void;\n    onRowContextMenu: (data: Record<string, any>, index: number, e: Event) => void;\n  };\n  headerEvents: {\n    onHeaderCellClick: (column: InnerColumn, e: any) => void;\n  };\n  filterAndSorter: {\n    hasAction: (column: InnerColumn) => boolean;\n    hasSorters: (column: InnerColumn) => boolean;\n    hasFilters: (column: InnerColumn) => boolean;\n    isSortColumn: (column: InnerColumn) => boolean;\n    isAscend: (column: InnerColumn) => boolean;\n    isDescend: (column: InnerColumn) => boolean;\n    hasAscend: (column: InnerColumn) => boolean;\n    hasDescend: (column: InnerColumn) => boolean;\n    toggleSortOrder: (column: InnerColumn) => void;\n    setColumnFilter: (column: InnerColumn, selectedKeys: (string | number)[]) => void;\n  };\n  isSummary: boolean;\n  pagination: PaginationProps;\n}\n\nconst rowEmitFn = (data: Record<string, any>, index: number, e: Event) => typeof data === 'object' && typeof index === 'number' && e instanceof Event;\nexport const tableEmits = {\n  'row-mouseenter': rowEmitFn,\n  'row-mouseleave': rowEmitFn,\n  'row-click': rowEmitFn,\n  'row-doubleclick': rowEmitFn,\n  'row-contextmenu': rowEmitFn,\n  'header-click': (column: TableColumn, e: Event) => typeof column === 'object' && e instanceof Event,\n  'column-resize': (columnWidth: number, changeWidth: number, column: InnerColumn, event: Event) =>\n    typeof columnWidth === 'number' && typeof changeWidth === 'number' && typeof column === 'object' && event instanceof Event,\n  expand: (expanded: boolean, row: Record<string, any>, type: string) =>\n    typeof expanded === 'boolean' && typeof row === 'object' && typeof type === 'string',\n  'async-expand': (row: any, done: (() => void) | undefined, keys: (string | number)[]) =>\n    typeof row === 'object' && Array.isArray(keys) && typeof done === 'function',\n  change: (\n    pagination: PaginationProps,\n    sort: { column: TableColumn | null; order: ColumnSortOrder | null },\n    filter: Record<string, (string | number)[]> | null\n  ) => !(pagination === null && sort === null && filter === null)\n};\n\nexport type TableEmits = typeof tableEmits;\nexport type TableEmit = EmitFn<TableEmits>;\nexport type TableInstanceType = InstanceType<typeof Table>;\n"],"names":[],"mappings":"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"}

package/es/components/Table/Table.vue.d.ts

@@ -458,15 +458,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         type: import("vue").PropType<InnerColumn[]>;
                         default: () => InnerColumn[];
                     };
+                    isHeadTable: {
+                        type: BooleanConstructor;
+                        default: boolean;
+                    };
                 }>, {
                     cols: import("vue").ComputedRef<import("./Table.type").TableColProps[]>;
+                    getWidth: (col: import("./Table.type").TableColProps) => string;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     columns: {
                         type: import("vue").PropType<InnerColumn[]>;
                         default: () => InnerColumn[];
                     };
+                    isHeadTable: {
+                        type: BooleanConstructor;
+                        default: boolean;
+                    };
                 }>> & Readonly<{}>, {
                     columns: InnerColumn[];
+                    isHeadTable: boolean;
                 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
                 TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     columns: {
@@ -4787,7 +4797,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             cellRef: import("vue").Ref<any, any>;
                             ellipsisSpanRef: import("vue").Ref<any, any>;
                             isOverflow: import("vue").Ref<boolean, boolean>;
-                            debouncedHandleResize: import("../../utils/tools").DebounceReturn;
+                            checkWidth: ({ target, width }: {
+                                target: HTMLElement;
+                                width: number;
+                            }) => void;
                         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                             prefixCls: {
                                 type: StringConstructor;
@@ -6086,7 +6099,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                                 cellRef: import("vue").Ref<any, any>;
                                 ellipsisSpanRef: import("vue").Ref<any, any>;
                                 isOverflow: import("vue").Ref<boolean, boolean>;
-                                debouncedHandleResize: import("../../utils/tools").DebounceReturn;
+                                checkWidth: ({ target, width }: {
+                                    target: HTMLElement;
+                                    width: number;
+                                }) => void;
                             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                                 prefixCls: {
                                     type: StringConstructor;
@@ -7403,15 +7419,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         type: import("vue").PropType<InnerColumn[]>;
                         default: () => InnerColumn[];
                     };
+                    isHeadTable: {
+                        type: BooleanConstructor;
+                        default: boolean;
+                    };
                 }>, {
                     cols: import("vue").ComputedRef<import("./Table.type").TableColProps[]>;
+                    getWidth: (col: import("./Table.type").TableColProps) => string;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     columns: {
                         type: import("vue").PropType<InnerColumn[]>;
                         default: () => InnerColumn[];
                     };
+                    isHeadTable: {
+                        type: BooleanConstructor;
+                        default: boolean;
+                    };
                 }>> & Readonly<{}>, {
                     columns: InnerColumn[];
+                    isHeadTable: boolean;
                 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
                 TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     columns: {
@@ -11732,7 +11758,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             cellRef: import("vue").Ref<any, any>;
                             ellipsisSpanRef: import("vue").Ref<any, any>;
                             isOverflow: import("vue").Ref<boolean, boolean>;
-                            debouncedHandleResize: import("../../utils/tools").DebounceReturn;
+                            checkWidth: ({ target, width }: {
+                                target: HTMLElement;
+                                width: number;
+                            }) => void;
                         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                             prefixCls: {
                                 type: StringConstructor;
@@ -13031,7 +13060,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                                 cellRef: import("vue").Ref<any, any>;
                                 ellipsisSpanRef: import("vue").Ref<any, any>;
                                 isOverflow: import("vue").Ref<boolean, boolean>;
-                                debouncedHandleResize: import("../../utils/tools").DebounceReturn;
+                                checkWidth: ({ target, width }: {
+                                    target: HTMLElement;
+                                    width: number;
+                                }) => void;
                             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                                 prefixCls: {
                                     type: StringConstructor;

package/es/components/Table/TableBox.vue.d.ts

@@ -121,15 +121,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     type: PropType<import("./Table.type").InnerColumn[]>;
                     default: () => import("./Table.type").InnerColumn[];
                 };
+                isHeadTable: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>, {
                 cols: import("vue").ComputedRef<import("./Table.type").TableColProps[]>;
+                getWidth: (col: import("./Table.type").TableColProps) => string;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 columns: {
                     type: PropType<import("./Table.type").InnerColumn[]>;
                     default: () => import("./Table.type").InnerColumn[];
                 };
+                isHeadTable: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>> & Readonly<{}>, {
                 columns: import("./Table.type").InnerColumn[];
+                isHeadTable: boolean;
             }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
             TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 columns: {
@@ -4450,7 +4460,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         cellRef: import("vue").Ref<any, any>;
                         ellipsisSpanRef: import("vue").Ref<any, any>;
                         isOverflow: import("vue").Ref<boolean, boolean>;
-                        debouncedHandleResize: import("../../utils").DebounceReturn;
+                        checkWidth: ({ target, width }: {
+                            target: HTMLElement;
+                            width: number;
+                        }) => void;
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         prefixCls: {
                             type: StringConstructor;
@@ -5749,7 +5762,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             cellRef: import("vue").Ref<any, any>;
                             ellipsisSpanRef: import("vue").Ref<any, any>;
                             isOverflow: import("vue").Ref<boolean, boolean>;
-                            debouncedHandleResize: import("../../utils").DebounceReturn;
+                            checkWidth: ({ target, width }: {
+                                target: HTMLElement;
+                                width: number;
+                            }) => void;
                         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                             prefixCls: {
                                 type: StringConstructor;
@@ -7066,15 +7082,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     type: PropType<import("./Table.type").InnerColumn[]>;
                     default: () => import("./Table.type").InnerColumn[];
                 };
+                isHeadTable: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>, {
                 cols: import("vue").ComputedRef<import("./Table.type").TableColProps[]>;
+                getWidth: (col: import("./Table.type").TableColProps) => string;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 columns: {
                     type: PropType<import("./Table.type").InnerColumn[]>;
                     default: () => import("./Table.type").InnerColumn[];
                 };
+                isHeadTable: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>> & Readonly<{}>, {
                 columns: import("./Table.type").InnerColumn[];
+                isHeadTable: boolean;
             }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
             TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 columns: {
@@ -11395,7 +11421,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         cellRef: import("vue").Ref<any, any>;
                         ellipsisSpanRef: import("vue").Ref<any, any>;
                         isOverflow: import("vue").Ref<boolean, boolean>;
-                        debouncedHandleResize: import("../../utils").DebounceReturn;
+                        checkWidth: ({ target, width }: {
+                            target: HTMLElement;
+                            width: number;
+                        }) => void;
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         prefixCls: {
                             type: StringConstructor;
@@ -12694,7 +12723,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             cellRef: import("vue").Ref<any, any>;
                             ellipsisSpanRef: import("vue").Ref<any, any>;
                             isOverflow: import("vue").Ref<boolean, boolean>;
-                            debouncedHandleResize: import("../../utils").DebounceReturn;
+                            checkWidth: ({ target, width }: {
+                                target: HTMLElement;
+                                width: number;
+                            }) => void;
                         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                             prefixCls: {
                                 type: StringConstructor;

package/es/components/Table/hooks/useTableResize.d.ts

@@ -11,4 +11,6 @@ export default function useTableResize(updatedColumns: Ref<InnerColumn[]>, table
     resetScrollX: () => void;
     clearResizeTimer: () => void;
     setResizeWidth: (column: InnerColumn, width: number) => void;
+    syncColumnWidth: (width: number, column: InnerColumn) => void;
+    columnWidths: Ref<Record<string, number>, Record<string, number>>;
 };

package/es/components/Table/hooks/useTableResize.mjs

@@ -18,6 +18,7 @@ function getWidth(width, tableWidth) {
 function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
   const tableWidth = ref(void 0);
   const resizeColumns = shallowRef([]);
+  const columnWidths = ref({});
   const syncColumnsWidth = () => {
     const { bodyTable } = tableRefs;
     if (!bodyTable || bodyTable.getWidth() === void 0) {
@@ -35,6 +36,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       tableWidth.value = void 0;
     }
   };
+  const syncColumnWidth = (width, column) => {
+    columnWidths.value[getColumnKey(column)] = width;
+  };
   let syncHeightTimer = null;
   const scrollPosition = ref("left");
   const setScrollPositionClass = () => {
@@ -73,6 +77,7 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       _column.width = width;
     }
     resizeColumns.value = columns;
+    syncColumnWidth(width, _column);
   };
   const isScrollX = computed(() => {
     const { table } = tableRefs;
@@ -106,7 +111,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     setScrollPositionClass,
     resetScrollX,
     clearResizeTimer,
-    setResizeWidth
+    setResizeWidth,
+    syncColumnWidth,
+    columnWidths
   };
 }
 

package/es/components/Table/hooks/useTableResize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTableResize.mjs","sources":["../../../../../src/components/Table/hooks/useTableResize.ts"],"sourcesContent":["import { computed, ref, shallowRef } from 'vue';\nimport type { ComputedRef, Ref } from 'vue';\nimport { getLeafColumns, getColumnKey } from '../utils';\n// import { shallowequal } from '../../../utils/tools';\nimport type { InnerColumn, TableProps, TableRefs } from '../Table.type';\n\nexport function getWidth(width: string | number, tableWidth: number) {\n  let _width = 0;\n  if (typeof width === 'number') {\n    _width = width;\n  } else if (/^\\d*px$/.test(width)) {\n    _width = Number(width.replace('px', ''));\n  } else if (/^[\\d.]*%$/.test(width)) {\n    const percent = Number(width.replace('%', ''));\n    if (!Number.isNaN(percent)) {\n      _width = Math.floor((percent / 100) * tableWidth);\n    }\n  }\n  return _width;\n}\nexport default function useTableResize(\n  updatedColumns: Ref<InnerColumn[]>,\n  tableRefs: TableRefs,\n  prefixCls: Ref<string>,\n  isColumnFixed: ComputedRef<boolean>,\n  props: TableProps\n) {\n  const tableWidth = ref<number | undefined>(undefined);\n  const resizeColumns = shallowRef<InnerColumn[]>([]);\n\n  const syncColumnsWidth = () => {\n    const { bodyTable } = tableRefs;\n    if (!bodyTable || (bodyTable as any).getWidth() === undefined) {\n      return;\n    }\n    // const wrapWidth = props.border ? bodyTable.clientWidth - 1 : bodyTable.clientWidth;\n    const wrapWidth = (bodyTable as any).getWidth();\n\n    const columns = getLeafColumns(updatedColumns.value);\n\n    const totalWidth = columns.reduce((sum, col) => sum + getWidth(col.width ?? col.minWidth, wrapWidth), 0);\n    if (totalWidth > wrapWidth) {\n      tableWidth.value = totalWidth;\n    } else {\n      tableWidth.value = undefined;\n    }\n  };\n\n  let syncHeightTimer: any = null;\n  const scrollPosition = ref('left');\n\n  const setScrollPositionClass = () => {\n    const { bodyTable } = tableRefs;\n    const bodyDom = (bodyTable as any).wrapRef;\n    if (!bodyDom) {\n      return;\n    }\n\n    const scrollToLeft = bodyDom.scrollLeft === 0;\n    const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;\n    if (scrollToLeft && scrollToRight) {\n      scrollPosition.value = 'both';\n    } else if (scrollToLeft) {\n      scrollPosition.value = 'left';\n    } else if (scrollToRight) {\n      scrollPosition.value = 'right';\n    } else {\n      scrollPosition.value = 'middle';\n    }\n  };\n  const handleResize = () => {\n    syncColumnsWidth();\n\n    if (isColumnFixed.value) {\n      syncHeightTimer = setTimeout(() => {\n        // syncFixedTableRowHeight();\n        setScrollPositionClass();\n      }, 0);\n    }\n    setTimeout(() => {\n      (tableRefs.bodyTable as any).update();\n    }, 0);\n  };\n\n  const setResizeWidth = (column: InnerColumn, width: number) => {\n    const columns = getLeafColumns(updatedColumns.value);\n    const _column = columns.find((c) => c === column || getColumnKey(c) === getColumnKey(column));\n    if (_column) {\n      _column.width = width;\n    }\n    resizeColumns.value = columns;\n  };\n  const isScrollX = computed(() => {\n    const { table } = tableRefs;\n    if (table) {\n      const wrapWidth = props.border ? table.offsetWidth - 1 : table.offsetWidth;\n      return tableWidth.value && tableWidth.value > wrapWidth;\n    }\n    return false;\n  });\n\n  const resetScrollX = () => {\n    const { bodyTable, headTable } = tableRefs;\n    if (bodyTable) {\n      (bodyTable as any).setScrollLeft(0);\n    }\n    if (headTable) {\n      (headTable as any).setScrollLeft(0);\n    }\n  };\n  const clearResizeTimer = () => {\n    if (syncHeightTimer) {\n      clearTimeout(syncHeightTimer);\n      syncHeightTimer = null;\n    }\n  };\n  return {\n    // sizesMap,\n    tableWidth,\n    isScrollX,\n    scrollPosition,\n    resizeColumns,\n    handleResize,\n    setScrollPositionClass,\n    resetScrollX,\n    clearResizeTimer,\n    setResizeWidth\n  };\n}\n"],"names":[],"mappings":";;;SAMgB,SAAS,OAAwB,YAAoB;AACnE,MAAI,SAAS;AACb,MAAI,OAAO,UAAU,UAAU;AAC7B,aAAS;AAAA,aACA,UAAU,KAAK,KAAK,GAAG;AAChC,aAAS,OAAO,MAAM,QAAQ,MAAM,EAAE,CAAC;AAAA,aAC9B,YAAY,KAAK,KAAK,GAAG;AAClC,UAAM,UAAU,OAAO,MAAM,QAAQ,KAAK,EAAE,CAAC;AAC7C,QAAI,CAAC,OAAO,MAAM,OAAO,GAAG;AAC1B,eAAS,KAAK,MAAO,UAAU,MAAO,UAAU;AAAA;AAClD;AAEF,SAAO;AACT;SACwB,eACtB,gBACA,WACA,WACA,eACA,OACA;AACA,QAAM,aAAa,IAAwB,MAAS;AACpD,QAAM,gBAAgB,WAA0B,EAAE;AAElD,QAAM,mBAAmB,MAAM;AAC7B,UAAM,EAAE,cAAc;AACtB,QAAI,CAAC,aAAc,UAAkB,eAAe,QAAW;AAC7D;AAAA;AAGF,UAAM,YAAa,UAAkB;AAErC,UAAM,UAAU,eAAe,eAAe,KAAK;AAEnD,UAAM,aAAa,QAAQ,OAAO,CAAC,KAAK,QAAK;AAxCjD;AAwCoD,mBAAM,UAAS,SAAI,UAAJ,YAAa,IAAI,UAAU,SAAS;AAAA,OAAG,CAAC;AACvG,QAAI,aAAa,WAAW;AAC1B,iBAAW,QAAQ;AAAA,WACd;AACL,iBAAW,QAAQ;AAAA;AACrB;AAGF,MAAI,kBAAuB;AAC3B,QAAM,iBAAiB,IAAI,MAAM;AAEjC,QAAM,yBAAyB,MAAM;AACnC,UAAM,EAAE,cAAc;AACtB,UAAM,UAAW,UAAkB;AACnC,QAAI,CAAC,SAAS;AACZ;AAAA;AAGF,UAAM,eAAe,QAAQ,eAAe;AAC5C,UAAM,gBAAgB,QAAQ,aAAa,KAAK,QAAQ,SAAS,GAAG,wBAAwB,QAAQ,QAAQ,wBAAwB;AACpI,QAAI,gBAAgB,eAAe;AACjC,qBAAe,QAAQ;AAAA,eACd,cAAc;AACvB,qBAAe,QAAQ;AAAA,eACd,eAAe;AACxB,qBAAe,QAAQ;AAAA,WAClB;AACL,qBAAe,QAAQ;AAAA;AACzB;AAEF,QAAM,eAAe,MAAM;AACzB;AAEA,QAAI,cAAc,OAAO;AACvB,wBAAkB,WAAW,MAAM;AAEjC;AAAuB,SACtB,CAAC;AAAA;AAEN,eAAW,MAAM;AACf,MAAC,UAAU,UAAkB;AAAO,OACnC,CAAC;AAAA;AAGN,QAAM,iBAAiB,CAAC,QAAqB,UAAkB;AAC7D,UAAM,UAAU,eAAe,eAAe,KAAK;AACnD,UAAM,UAAU,QAAQ,KAAK,CAAC,MAAM,MAAM,UAAU,aAAa,CAAC,MAAM,aAAa,MAAM,CAAC;AAC5F,QAAI,SAAS;AACX,cAAQ,QAAQ;AAAA;AAElB,kBAAc,QAAQ;AAAA;AAExB,QAAM,YAAY,SAAS,MAAM;AAC/B,UAAM,EAAE,UAAU;AAClB,QAAI,OAAO;AACT,YAAM,YAAY,MAAM,SAAS,MAAM,cAAc,IAAI,MAAM;AAC/D,aAAO,WAAW,SAAS,WAAW,QAAQ;AAAA;AAEhD,WAAO;AAAA,GACR;AAED,QAAM,eAAe,MAAM;AACzB,UAAM,EAAE,WAAW,cAAc;AACjC,QAAI,WAAW;AACb,MAAC,UAAkB,cAAc,CAAC;AAAA;AAEpC,QAAI,WAAW;AACb,MAAC,UAAkB,cAAc,CAAC;AAAA;AACpC;AAEF,QAAM,mBAAmB,MAAM;AAC7B,QAAI,iBAAiB;AACnB,mBAAa,eAAe;AAC5B,wBAAkB;AAAA;AACpB;AAEF,SAAO;AAAA,IAEL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEJ;;;;"}
+{"version":3,"file":"useTableResize.mjs","sources":["../../../../../src/components/Table/hooks/useTableResize.ts"],"sourcesContent":["import { computed, ref, shallowRef } from 'vue';\nimport type { ComputedRef, Ref } from 'vue';\nimport { getLeafColumns, getColumnKey } from '../utils';\n// import { shallowequal } from '../../../utils/tools';\nimport type { InnerColumn, TableProps, TableRefs } from '../Table.type';\n\nexport function getWidth(width: string | number, tableWidth: number) {\n  let _width = 0;\n  if (typeof width === 'number') {\n    _width = width;\n  } else if (/^\\d*px$/.test(width)) {\n    _width = Number(width.replace('px', ''));\n  } else if (/^[\\d.]*%$/.test(width)) {\n    const percent = Number(width.replace('%', ''));\n    if (!Number.isNaN(percent)) {\n      _width = Math.floor((percent / 100) * tableWidth);\n    }\n  }\n  return _width;\n}\nexport default function useTableResize(\n  updatedColumns: Ref<InnerColumn[]>,\n  tableRefs: TableRefs,\n  prefixCls: Ref<string>,\n  isColumnFixed: ComputedRef<boolean>,\n  props: TableProps\n) {\n  const tableWidth = ref<number | undefined>(undefined);\n  const resizeColumns = shallowRef<InnerColumn[]>([]);\n  const columnWidths = ref<Record<string, number>>({});\n\n  const syncColumnsWidth = () => {\n    const { bodyTable } = tableRefs;\n    if (!bodyTable || (bodyTable as any).getWidth() === undefined) {\n      return;\n    }\n    // const wrapWidth = props.border ? bodyTable.clientWidth - 1 : bodyTable.clientWidth;\n    const wrapWidth = (bodyTable as any).getWidth();\n\n    const columns = getLeafColumns(updatedColumns.value);\n\n    const totalWidth = columns.reduce((sum, col) => sum + getWidth(col.width ?? col.minWidth, wrapWidth), 0);\n    if (totalWidth > wrapWidth) {\n      tableWidth.value = totalWidth;\n    } else {\n      tableWidth.value = undefined;\n    }\n  };\n\n  const syncColumnWidth = (width: number, column: InnerColumn) => {\n    columnWidths.value[getColumnKey(column)] = width;\n  };\n\n  let syncHeightTimer: any = null;\n  const scrollPosition = ref('left');\n\n  const setScrollPositionClass = () => {\n    const { bodyTable } = tableRefs;\n    const bodyDom = (bodyTable as any).wrapRef;\n    if (!bodyDom) {\n      return;\n    }\n\n    const scrollToLeft = bodyDom.scrollLeft === 0;\n    const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;\n    if (scrollToLeft && scrollToRight) {\n      scrollPosition.value = 'both';\n    } else if (scrollToLeft) {\n      scrollPosition.value = 'left';\n    } else if (scrollToRight) {\n      scrollPosition.value = 'right';\n    } else {\n      scrollPosition.value = 'middle';\n    }\n  };\n  const handleResize = () => {\n    syncColumnsWidth();\n\n    if (isColumnFixed.value) {\n      syncHeightTimer = setTimeout(() => {\n        // syncFixedTableRowHeight();\n        setScrollPositionClass();\n      }, 0);\n    }\n    setTimeout(() => {\n      (tableRefs.bodyTable as any).update();\n    }, 0);\n  };\n\n  const setResizeWidth = (column: InnerColumn, width: number) => {\n    const columns = getLeafColumns(updatedColumns.value);\n    const _column = columns.find((c) => c === column || getColumnKey(c) === getColumnKey(column));\n    if (_column) {\n      _column.width = width;\n    }\n    resizeColumns.value = columns;\n    syncColumnWidth(width, _column);\n  };\n  const isScrollX = computed(() => {\n    const { table } = tableRefs;\n    if (table) {\n      const wrapWidth = props.border ? table.offsetWidth - 1 : table.offsetWidth;\n      return tableWidth.value && tableWidth.value > wrapWidth;\n    }\n    return false;\n  });\n\n  const resetScrollX = () => {\n    const { bodyTable, headTable } = tableRefs;\n    if (bodyTable) {\n      (bodyTable as any).setScrollLeft(0);\n    }\n    if (headTable) {\n      (headTable as any).setScrollLeft(0);\n    }\n  };\n  const clearResizeTimer = () => {\n    if (syncHeightTimer) {\n      clearTimeout(syncHeightTimer);\n      syncHeightTimer = null;\n    }\n  };\n  return {\n    // sizesMap,\n    tableWidth,\n    isScrollX,\n    scrollPosition,\n    resizeColumns,\n    handleResize,\n    setScrollPositionClass,\n    resetScrollX,\n    clearResizeTimer,\n    setResizeWidth,\n    syncColumnWidth,\n    columnWidths\n  };\n}\n"],"names":[],"mappings":"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"}

package/es/components/Table/tableUnits/ColGroup.mjs

@@ -8,11 +8,15 @@ const _sfc_main = defineComponent({
     columns: {
       type: Array,
       default: () => []
+    },
+    isHeadTable: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
     const {
-      size: { resizeColumns }
+      size: { resizeColumns, columnWidths }
     } = inject("tableContext", {});
     const cols = computed(() => {
       let rst = [];
@@ -33,8 +37,15 @@ const _sfc_main = defineComponent({
       );
       return rst;
     });
+    const getWidth = (col) => {
+      if (props.isHeadTable) {
+        return `${columnWidths.value[col.key]}px`;
+      }
+      return col.resizeWidth ? col.resizeWidth : col.width;
+    };
     return {
-      cols
+      cols,
+      getWidth
     };
   }
 });
@@ -43,7 +54,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.cols, (col) => {
       return openBlock(), createElementBlock("col", {
         key: col.key,
-        style: normalizeStyle({ width: col.resizeWidth ? col.resizeWidth : col.width, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
+        style: normalizeStyle({ width: _ctx.getWidth(col), minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
       }, null, 4);
     }), 128))
   ]);

package/es/components/Table/tableUnits/ColGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColGroup.mjs","sources":["../../../../../src/components/Table/tableUnits/ColGroup.vue"],"sourcesContent":["<template>\n  <colgroup>\n    <col\n      v-for=\"col in cols\"\n      :key=\"col.key\"\n      :style=\"{ width: col.resizeWidth ? col.resizeWidth : col.width, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : '' }\"\n    />\n  </colgroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, inject } from 'vue';\nimport type { PropType } from 'vue';\nimport type { TableColProps, InnerColumn, TableContext } from '../Table.type';\nimport { getColumnKey, getLeafColumns } from '../utils';\n\nexport default defineComponent({\n  name: 'TableColGroup',\n  props: {\n    columns: {\n      type: Array as PropType<InnerColumn[]>,\n      default: () => [] as InnerColumn[]\n    }\n  },\n  setup(props) {\n    const {\n      size: { resizeColumns }\n    } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const cols = computed(() => {\n      let rst: TableColProps[] = [];\n      rst = rst.concat(\n        getLeafColumns(props.columns).map((col) => {\n          const { fixed } = col;\n          const colKey = getColumnKey(col);\n          const resizeWidth = resizeColumns.value.find((x) => x.key === colKey)?.width;\n          return {\n            width: typeof col.width === 'number' ? `${col.width}px` : col.width,\n            minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth,\n            key: colKey,\n            fixed: !!fixed,\n            resizeWidth: resizeWidth ? `${resizeWidth}px` : undefined\n          } as any;\n        })\n      );\n      return rst;\n    });\n    return {\n      cols\n    };\n  }\n});\n</script>\n"],"names":["_createElementBlock","_Fragment","_normalizeStyle"],"mappings":";;;;AAgBA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,MAAM;AAAC;AAClB;AACF,EACA,MAAM,OAAO;UACL;AAAA,MACJ,MAAM,EAAE;AAAc,QACpB,OAAqB,gBAAgB,EAAkB;UAErD,OAAO,SAAS,MAAM;UACtB,MAAuB;YACrB,IAAI;AAAA,QACR,eAAe,MAAM,OAAO,EAAE,IAAI,CAAC,QAAQ;AArBnD;gBAsBgB,EAAE,UAAU;gBACZ,SAAS,aAAa,GAAG;gBACzB,eAAc,mBAAc,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,MAAhD,mBAAmD;iBAChE;AAAA,YACL,OAAO,OAAO,IAAI,UAAU,WAAW,GAAG,IAAI,YAAY,IAAI;AAAA,YAC9D,UAAU,OAAO,IAAI,aAAa,WAAW,GAAG,IAAI,eAAe,IAAI;AAAA,YACvE,KAAK;AAAA,YACL,OAAO,CAAC,CAAC;AAAA,YACT,aAAa,cAAc,GAAG,kBAAkB;AAAA;AAClD,SACD;AAAA;aAEI;AAAA,KACR;WACM;AAAA,MACL;AAAA;AACF;AAEJ,CAAC;;sBAlDCA,mBAMW;sBALTA,mBAIEC,2BAHc,WAAI,CAAX,QAAG;0BADZD,mBAIE;QAFC,KAAK,IAAI;AAAA,QACT,OAAKE,wBAAW,IAAI,cAAc,IAAI,cAAc,IAAI,OAAK,UAAY,IAAI,UAAQ,UAAY,IAAI,QAAQ,IAAI,QAAK;;;;;;;;;"}
+{"version":3,"file":"ColGroup.mjs","sources":["../../../../../src/components/Table/tableUnits/ColGroup.vue"],"sourcesContent":["<template>\n  <colgroup>\n    <col v-for=\"col in cols\" :key=\"col.key\" :style=\"{ width: getWidth(col), minWidth: col.minWidth, maxWidth: col.fixed ? col.width : '' }\" />\n  </colgroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, inject } from 'vue';\nimport type { PropType } from 'vue';\nimport type { TableColProps, InnerColumn, TableContext } from '../Table.type';\nimport { getColumnKey, getLeafColumns } from '../utils';\n\nexport default defineComponent({\n  name: 'TableColGroup',\n  props: {\n    columns: {\n      type: Array as PropType<InnerColumn[]>,\n      default: () => [] as InnerColumn[]\n    },\n    isHeadTable: {\n      type: Boolean,\n      default: false\n    }\n  },\n  setup(props) {\n    const {\n      size: { resizeColumns, columnWidths }\n    } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const cols = computed(() => {\n      let rst: TableColProps[] = [];\n      rst = rst.concat(\n        getLeafColumns(props.columns).map((col) => {\n          const { fixed } = col;\n          const colKey = getColumnKey(col);\n          const resizeWidth = resizeColumns.value.find((x) => x.key === colKey)?.width;\n          return {\n            width: typeof col.width === 'number' ? `${col.width}px` : col.width,\n            minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth,\n            key: colKey,\n            fixed: !!fixed,\n            resizeWidth: resizeWidth ? `${resizeWidth}px` : undefined\n          } as any;\n        })\n      );\n      return rst;\n    });\n\n    const getWidth = (col: TableColProps) => {\n      if (props.isHeadTable) {\n        return `${columnWidths.value[col.key]}px`;\n      }\n      return col.resizeWidth ? col.resizeWidth : col.width;\n    };\n\n    return {\n      cols,\n      getWidth\n    };\n  }\n});\n</script>\n"],"names":["_createElementBlock","_Fragment","_normalizeStyle"],"mappings":";;;;AAYA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,MAAM;AAAC;AAClB,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AACX;AACF,EACA,MAAM,OAAO;UACL;AAAA,MACJ,MAAM,EAAE,eAAe;AAAa,QAClC,OAAqB,gBAAgB,EAAkB;UAErD,OAAO,SAAS,MAAM;UACtB,MAAuB;YACrB,IAAI;AAAA,QACR,eAAe,MAAM,OAAO,EAAE,IAAI,CAAC,QAAQ;AAzBnD;gBA0BgB,EAAE,UAAU;gBACZ,SAAS,aAAa,GAAG;gBACzB,eAAc,mBAAc,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,MAAhD,mBAAmD;iBAChE;AAAA,YACL,OAAO,OAAO,IAAI,UAAU,WAAW,GAAG,IAAI,YAAY,IAAI;AAAA,YAC9D,UAAU,OAAO,IAAI,aAAa,WAAW,GAAG,IAAI,eAAe,IAAI;AAAA,YACvE,KAAK;AAAA,YACL,OAAO,CAAC,CAAC;AAAA,YACT,aAAa,cAAc,GAAG,kBAAkB;AAAA;AAClD,SACD;AAAA;aAEI;AAAA,KACR;UAEK,WAAW,CAAC,QAAuB;UACnC,MAAM,aAAa;eACd,GAAG,aAAa,MAAM,IAAI;AAAA;aAE5B,IAAI,cAAc,IAAI,cAAc,IAAI;AAAA;WAG1C;AAAA,MACL;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;sBA3DCA,mBAEW;sBADTA,mBAA0IC,2BAAvH,WAAI,CAAX,QAAG;0BAAfD,mBAA0I;QAAhH,KAAK,IAAI;AAAA,QAAM,OAAKE,wBAAW,cAAS,GAAG,aAAa,IAAI,UAAQ,UAAY,IAAI,QAAQ,IAAI,QAAK;;;;;;;;;"}

package/es/components/Table/tableUnits/ColGroup.vue.d.ts

@@ -5,14 +5,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<InnerColumn[]>;
         default: () => InnerColumn[];
     };
+    isHeadTable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     cols: import("vue").ComputedRef<TableColProps[]>;
+    getWidth: (col: TableColProps) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     columns: {
         type: PropType<InnerColumn[]>;
         default: () => InnerColumn[];
     };
+    isHeadTable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     columns: InnerColumn[];
+    isHeadTable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/components/Table/tableUnits/ExpandRows.vue.d.ts

@@ -205,7 +205,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             cellRef: import("vue").Ref<any, any>;
             ellipsisSpanRef: import("vue").Ref<any, any>;
             isOverflow: import("vue").Ref<boolean, boolean>;
-            debouncedHandleResize: import("../../../utils").DebounceReturn;
+            checkWidth: ({ target, width }: {
+                target: HTMLElement;
+                width: number;
+            }) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             prefixCls: {
                 type: StringConstructor;

package/es/components/Table/tableUnits/TableBody.vue.d.ts

@@ -170,7 +170,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             cellRef: import("vue").Ref<any, any>;
             ellipsisSpanRef: import("vue").Ref<any, any>;
             isOverflow: import("vue").Ref<boolean, boolean>;
-            debouncedHandleResize: import("../../../utils").DebounceReturn;
+            checkWidth: ({ target, width }: {
+                target: HTMLElement;
+                width: number;
+            }) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             prefixCls: {
                 type: StringConstructor;
@@ -1469,7 +1472,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 cellRef: import("vue").Ref<any, any>;
                 ellipsisSpanRef: import("vue").Ref<any, any>;
                 isOverflow: import("vue").Ref<boolean, boolean>;
-                debouncedHandleResize: import("../../../utils").DebounceReturn;
+                checkWidth: ({ target, width }: {
+                    target: HTMLElement;
+                    width: number;
+                }) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 prefixCls: {
                     type: StringConstructor;

package/es/components/Table/tableUnits/TableCell.mjs

@@ -8,7 +8,6 @@ import '../../../utils/index.mjs';
 import ResizeObserver from '../../base/ResizeObserver.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { getStyle } from '../../../utils/dom.mjs';
-import { debounce } from '../../../utils/tools.mjs';
 
 const USkeletonItem = USkeleton.Item;
 const _sfc_main = defineComponent({
@@ -60,6 +59,7 @@ const _sfc_main = defineComponent({
       props: { indentSize },
       expand: { handleExpandChange, isRowExpanded },
       filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
+      size: { syncColumnWidth },
       pagination
     } = inject("tableContext", {});
     const cellRef = ref();
@@ -147,8 +147,10 @@ const _sfc_main = defineComponent({
           }
         }
       });
+      if (props.index === 0) {
+        syncColumnWidth(width, props.column);
+      }
     };
-    const debouncedHandleResize = debounce((args) => checkWidth(args), 100);
     return {
       tablePrefixCls,
       isRender,
@@ -169,7 +171,7 @@ const _sfc_main = defineComponent({
       cellRef,
       ellipsisSpanRef,
       isOverflow,
-      debouncedHandleResize
+      checkWidth
     };
   }
 });
@@ -180,7 +182,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Render = resolveComponent("Render");
   const _component_UTooltip = resolveComponent("UTooltip");
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
-  return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+  return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.checkWidth }, {
     default: withCtx(() => {
       var _a;
       return [

package/es/components/Table/tableUnits/TableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","sources":["../../../../../src/components/Table/tableUnits/TableCell.vue"],"sourcesContent":["<template>\n  <ResizeObserver @resize=\"debouncedHandleResize\">\n    <td\n      v-if=\"showCell\"\n      ref=\"cellRef\"\n      v-bind=\"tdProps\"\n      :class=\"{\n      [`${prefixCls}-cell-custom`]: !!(tdProps as any)?.class,\n      [`${column.className}`]: !!column.className,\n      [`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,\n      [`${prefixCls}-cell-break-word`]: !!column.width,\n      [`${tablePrefixCls}-column-has-actions`]: hasAction(column),\n      [`${tablePrefixCls}-column-has-sorters`]: hasSorters(column),\n      [`${tablePrefixCls}-column-has-filters`]: hasFilters(column),\n      [`${tablePrefixCls}-column-sort`]: isSortColumn(column)\n    }\"\n      :style=\"tdStyle\"\n    >\n      <USkeleton v-if=\"skeleton\" :class=\"`${prefixCls}-skeleton-wrap`\" active>\n        <template v-if=\"column.skeleton\">\n          <USkeletonItem\n            v-for=\"(_, ski) in Array(column.skeleton.length)\"\n            :key=\"ski\"\n            :type=\"column.skeleton[ski].type\"\n            :style=\"column.skeleton[ski].style\"\n          />\n        </template>\n        <USkeletonItem v-else type=\"text\" style=\"width: 50%\" />\n      </USkeleton>\n      <template v-else>\n        <template v-if=\"expandIcon\">\n          <span :class=\"`${prefixCls}-indent indent-level-${indent}`\" :style=\"{ paddingLeft: `${indentSize * indent}px` }\" />\n          <ExpandIcon\n            need-indent-spaced\n            :expandable=\"!!(data as any).children\"\n            :need-loading=\"(data as any).children === true\"\n            :row-key=\"rowKey\"\n            :expanded=\"isRowExpanded(rowKey, true)\"\n            @expand=\"handleExpand\"\n            @async-expand=\"handleAsyncExpand\"\n          />\n        </template>\n        <Render\n          v-if=\"isRender\"\n          :render=\"\n            () => {\n              return renderFn?.({\n                row: data,\n                index,\n                rowKey,\n                pagination,\n                column\n              });\n            }\n          \"\n        />\n        <template v-else>\n          <template v-if=\"column.ellipsis && displayCell\">\n            <UTooltip :title=\"displayCell.toString()\" :disabled=\"!isOverflow\" :mouse-enter-delay=\"0.5\">\n              <span ref=\"ellipsisSpanRef\">\n                {{ displayCell }}\n              </span>\n            </UTooltip>\n          </template>\n          <template v-else>\n            {{ displayCell }}\n          </template>\n        </template>\n      </template>\n    </td>\n  </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, watch, ref, nextTick } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { get } from 'lodash-unified';\nimport UTooltip from '@uxd-ui/components/Tooltip';\nimport USkeleton from '@uxd-ui/components/Skeleton';\nimport Render from '../../base/Render';\nimport ExpandIcon from './ExpandIcon.vue';\nimport type { InnerColumn, TableContext } from '../Table.type';\nimport { debounce, getStyle } from '../../../utils';\nimport ResizeObserver from '../../base/ResizeObserver';\n\nconst USkeletonItem = USkeleton.Item;\n\nexport default defineComponent({\n  name: 'TableCell',\n  components: {\n    Render,\n    ExpandIcon,\n    UTooltip,\n    USkeleton,\n    USkeletonItem,\n    ResizeObserver\n  },\n  props: {\n    prefixCls: {\n      type: String\n    },\n    column: {\n      type: Object as PropType<InnerColumn>,\n      required: true\n    },\n    data: {\n      type: Object as PropType<Record<string, any>>,\n      required: true\n    },\n    rowKey: {\n      type: [String, Number],\n      required: true\n    },\n    index: {\n      type: Number,\n      required: true\n    },\n    indent: {\n      type: Number,\n      default: 20\n    },\n    expandIcon: {\n      type: Boolean,\n      default: false\n    },\n    skeleton: {\n      type: Boolean,\n      default: false\n    }\n  },\n  setup(props) {\n    const {\n      prefixCls: tablePrefixCls,\n      props: { indentSize },\n      expand: { handleExpandChange, isRowExpanded },\n      filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },\n      // size: { sizesMap },\n      pagination\n    } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const cellRef = ref();\n    const ellipsisSpanRef = ref();\n    const isOverflow = ref(false);\n    const isMinWidth = ref(false);\n\n    const renderFn = computed(() => {\n      const { render } = props.column;\n      return render || null;\n    });\n\n    const isRender = computed(() => {\n      return renderFn.value !== null;\n    });\n\n    const displayCell = computed(() => {\n      const { key, dataIndex } = props.column;\n      const record = props.data;\n      return get(record, dataIndex || key);\n    });\n\n    const tdProps = ref({});\n    const showCell = ref(true);\n\n    watch(\n      () => [props.column, props.data, props.index],\n      () => {\n        const { customCell } = props.column;\n        const attrs = {} as Record<string, any>;\n        // if (ellipsis && !render) {\n        //   attrs.title = displayCell.value;\n        // }\n        if (customCell) {\n          const { data, index } = props;\n          const _props = customCell(data, index);\n          const { colSpan, rowSpan } = _props;\n          showCell.value = colSpan !== 0 && rowSpan !== 0;\n          Object.keys(_props).forEach((key) => {\n            attrs[key] = _props[key];\n          });\n        }\n        tdProps.value = attrs;\n      },\n      { immediate: true }\n    );\n\n    const tdStyle = computed(() => {\n      const style = {} as CSSProperties;\n      const { align, left, right } = props.column;\n      if (align) {\n        style.textAlign = align;\n      }\n      if (left !== undefined) {\n        style.left = `${left}px`;\n      }\n      if (right !== undefined) {\n        style.right = `${right}px`;\n      }\n      if (isMinWidth.value) {\n        style.width = `${props.column.minWidth}px`;\n      }\n      return style;\n    });\n\n    const handleExpand = (e: any) => {\n      handleExpandChange({ row: props.data, rowKey: props.rowKey, tree: true }, e);\n    };\n\n    const handleAsyncExpand = (e: any, done: () => void) => {\n      handleExpandChange(\n        {\n          row: props.data,\n          rowKey: props.rowKey,\n          async: true,\n          tree: true,\n          done\n        },\n        e\n      );\n    };\n\n    const checkWidth = ({ target, width }: { target: HTMLElement; width: number }) => {\n      nextTick(() => {\n        if (ellipsisSpanRef.value) {\n          const cell = target;\n          const padding = (Number.parseInt(getStyle(cell, 'paddingLeft')) || 0) + (Number.parseInt(getStyle(cell, 'paddingRight')) || 0);\n          const span = ellipsisSpanRef.value;\n          const range = document.createRange();\n          range.setStart(span, 0);\n          range.setEnd(span, span.childNodes.length);\n          const rangeWidth = range.getBoundingClientRect().width;\n\n          // const cellWidth = Number(getStyle(cell, 'width'));\n          if (rangeWidth + padding > width) {\n            isOverflow.value = true;\n          } else {\n            isOverflow.value = false;\n          }\n        }\n      });\n    };\n\n    // onMounted(() => {\n    //   checkOverflow(cellRef.value);\n    // });\n\n    const debouncedHandleResize = debounce((args: any) => checkWidth(args), 100);\n\n    return {\n      tablePrefixCls,\n      isRender,\n      renderFn,\n      displayCell,\n      tdProps,\n      tdStyle,\n      indentSize,\n      handleExpand,\n      handleAsyncExpand,\n      isRowExpanded,\n      showCell,\n      hasAction,\n      hasSorters,\n      hasFilters,\n      isSortColumn,\n      pagination,\n      cellRef,\n      ellipsisSpanRef,\n      isOverflow,\n      debouncedHandleResize\n    };\n  }\n});\n</script>\n"],"names":["_createBlock","_createElementBlock","_mergeProps","_normalizeClass","_Fragment","_normalizeStyle","_createElementVNode","_createVNode","_a"],"mappings":"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"}
+{"version":3,"file":"TableCell.mjs","sources":["../../../../../src/components/Table/tableUnits/TableCell.vue"],"sourcesContent":["<template>\n  <ResizeObserver @resize=\"checkWidth\">\n    <td\n      v-if=\"showCell\"\n      ref=\"cellRef\"\n      v-bind=\"tdProps\"\n      :class=\"{\n      [`${prefixCls}-cell-custom`]: !!(tdProps as any)?.class,\n      [`${column.className}`]: !!column.className,\n      [`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,\n      [`${prefixCls}-cell-break-word`]: !!column.width,\n      [`${tablePrefixCls}-column-has-actions`]: hasAction(column),\n      [`${tablePrefixCls}-column-has-sorters`]: hasSorters(column),\n      [`${tablePrefixCls}-column-has-filters`]: hasFilters(column),\n      [`${tablePrefixCls}-column-sort`]: isSortColumn(column)\n    }\"\n      :style=\"tdStyle\"\n    >\n      <USkeleton v-if=\"skeleton\" :class=\"`${prefixCls}-skeleton-wrap`\" active>\n        <template v-if=\"column.skeleton\">\n          <USkeletonItem\n            v-for=\"(_, ski) in Array(column.skeleton.length)\"\n            :key=\"ski\"\n            :type=\"column.skeleton[ski].type\"\n            :style=\"column.skeleton[ski].style\"\n          />\n        </template>\n        <USkeletonItem v-else type=\"text\" style=\"width: 50%\" />\n      </USkeleton>\n      <template v-else>\n        <template v-if=\"expandIcon\">\n          <span :class=\"`${prefixCls}-indent indent-level-${indent}`\" :style=\"{ paddingLeft: `${indentSize * indent}px` }\" />\n          <ExpandIcon\n            need-indent-spaced\n            :expandable=\"!!(data as any).children\"\n            :need-loading=\"(data as any).children === true\"\n            :row-key=\"rowKey\"\n            :expanded=\"isRowExpanded(rowKey, true)\"\n            @expand=\"handleExpand\"\n            @async-expand=\"handleAsyncExpand\"\n          />\n        </template>\n        <Render\n          v-if=\"isRender\"\n          :render=\"\n            () => {\n              return renderFn?.({\n                row: data,\n                index,\n                rowKey,\n                pagination,\n                column\n              });\n            }\n          \"\n        />\n        <template v-else>\n          <template v-if=\"column.ellipsis && displayCell\">\n            <UTooltip :title=\"displayCell.toString()\" :disabled=\"!isOverflow\" :mouse-enter-delay=\"0.5\">\n              <span ref=\"ellipsisSpanRef\">\n                {{ displayCell }}\n              </span>\n            </UTooltip>\n          </template>\n          <template v-else>\n            {{ displayCell }}\n          </template>\n        </template>\n      </template>\n    </td>\n  </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, watch, ref, nextTick } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { get } from 'lodash-unified';\nimport UTooltip from '@uxd-ui/components/Tooltip';\nimport USkeleton from '@uxd-ui/components/Skeleton';\nimport Render from '../../base/Render';\nimport ExpandIcon from './ExpandIcon.vue';\nimport type { InnerColumn, TableContext } from '../Table.type';\nimport { getStyle } from '../../../utils';\nimport ResizeObserver from '../../base/ResizeObserver';\n\nconst USkeletonItem = USkeleton.Item;\n\nexport default defineComponent({\n  name: 'TableCell',\n  components: {\n    Render,\n    ExpandIcon,\n    UTooltip,\n    USkeleton,\n    USkeletonItem,\n    ResizeObserver\n  },\n  props: {\n    prefixCls: {\n      type: String\n    },\n    column: {\n      type: Object as PropType<InnerColumn>,\n      required: true\n    },\n    data: {\n      type: Object as PropType<Record<string, any>>,\n      required: true\n    },\n    rowKey: {\n      type: [String, Number],\n      required: true\n    },\n    index: {\n      type: Number,\n      required: true\n    },\n    indent: {\n      type: Number,\n      default: 20\n    },\n    expandIcon: {\n      type: Boolean,\n      default: false\n    },\n    skeleton: {\n      type: Boolean,\n      default: false\n    }\n  },\n  setup(props) {\n    const {\n      prefixCls: tablePrefixCls,\n      props: { indentSize },\n      expand: { handleExpandChange, isRowExpanded },\n      filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },\n      // size: { sizesMap },\n      size: { syncColumnWidth },\n      pagination\n    } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const cellRef = ref();\n    const ellipsisSpanRef = ref();\n    const isOverflow = ref(false);\n    const isMinWidth = ref(false);\n\n    const renderFn = computed(() => {\n      const { render } = props.column;\n      return render || null;\n    });\n\n    const isRender = computed(() => {\n      return renderFn.value !== null;\n    });\n\n    const displayCell = computed(() => {\n      const { key, dataIndex } = props.column;\n      const record = props.data;\n      return get(record, dataIndex || key);\n    });\n\n    const tdProps = ref({});\n    const showCell = ref(true);\n\n    watch(\n      () => [props.column, props.data, props.index],\n      () => {\n        const { customCell } = props.column;\n        const attrs = {} as Record<string, any>;\n        // if (ellipsis && !render) {\n        //   attrs.title = displayCell.value;\n        // }\n        if (customCell) {\n          const { data, index } = props;\n          const _props = customCell(data, index);\n          const { colSpan, rowSpan } = _props;\n          showCell.value = colSpan !== 0 && rowSpan !== 0;\n          Object.keys(_props).forEach((key) => {\n            attrs[key] = _props[key];\n          });\n        }\n        tdProps.value = attrs;\n      },\n      { immediate: true }\n    );\n\n    const tdStyle = computed(() => {\n      const style = {} as CSSProperties;\n      const { align, left, right } = props.column;\n      if (align) {\n        style.textAlign = align;\n      }\n      if (left !== undefined) {\n        style.left = `${left}px`;\n      }\n      if (right !== undefined) {\n        style.right = `${right}px`;\n      }\n      if (isMinWidth.value) {\n        style.width = `${props.column.minWidth}px`;\n      }\n      return style;\n    });\n\n    const handleExpand = (e: any) => {\n      handleExpandChange({ row: props.data, rowKey: props.rowKey, tree: true }, e);\n    };\n\n    const handleAsyncExpand = (e: any, done: () => void) => {\n      handleExpandChange(\n        {\n          row: props.data,\n          rowKey: props.rowKey,\n          async: true,\n          tree: true,\n          done\n        },\n        e\n      );\n    };\n\n    const checkWidth = ({ target, width }: { target: HTMLElement; width: number }) => {\n      nextTick(() => {\n        if (ellipsisSpanRef.value) {\n          const cell = target;\n          const padding = (Number.parseInt(getStyle(cell, 'paddingLeft')) || 0) + (Number.parseInt(getStyle(cell, 'paddingRight')) || 0);\n          const span = ellipsisSpanRef.value;\n          const range = document.createRange();\n          range.setStart(span, 0);\n          range.setEnd(span, span.childNodes.length);\n          const rangeWidth = range.getBoundingClientRect().width;\n\n          // const cellWidth = Number(getStyle(cell, 'width'));\n          if (rangeWidth + padding > width) {\n            isOverflow.value = true;\n          } else {\n            isOverflow.value = false;\n          }\n        }\n      });\n      if (props.index === 0) {\n        syncColumnWidth(width, props.column);\n      }\n    };\n\n    // onMounted(() => {\n    //   checkOverflow(cellRef.value);\n    // });\n\n    return {\n      tablePrefixCls,\n      isRender,\n      renderFn,\n      displayCell,\n      tdProps,\n      tdStyle,\n      indentSize,\n      handleExpand,\n      handleAsyncExpand,\n      isRowExpanded,\n      showCell,\n      hasAction,\n      hasSorters,\n      hasFilters,\n      isSortColumn,\n      pagination,\n      cellRef,\n      ellipsisSpanRef,\n      isOverflow,\n      checkWidth\n    };\n  }\n});\n</script>\n"],"names":["_createBlock","_createElementBlock","_mergeProps","_normalizeClass","_Fragment","_normalizeStyle","_createElementVNode","_createVNode","_a"],"mappings":"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"}

package/es/components/Table/tableUnits/TableCell.vue.d.ts

@@ -52,7 +52,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     cellRef: import("vue").Ref<any, any>;
     ellipsisSpanRef: import("vue").Ref<any, any>;
     isOverflow: import("vue").Ref<boolean, boolean>;
-    debouncedHandleResize: import("../../../utils").DebounceReturn;
+    checkWidth: ({ target, width }: {
+        target: HTMLElement;
+        width: number;
+    }) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     prefixCls: {
         type: StringConstructor;

package/es/components/Table/tableUnits/TableRow.vue.d.ts

@@ -151,7 +151,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         cellRef: import("vue").Ref<any, any>;
         ellipsisSpanRef: import("vue").Ref<any, any>;
         isOverflow: import("vue").Ref<boolean, boolean>;
-        debouncedHandleResize: import("../../../utils").DebounceReturn;
+        checkWidth: ({ target, width }: {
+            target: HTMLElement;
+            width: number;
+        }) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         prefixCls: {
             type: StringConstructor;