Skip to content

Commit

Permalink
feat(table): 文本超出提示由 Popup 更为 Tooltip，以便于定制各种提示文本主题色
Browse files Browse the repository at this point in the history
  • Loading branch information
@PDieE
PDieE committed Aug 24, 2022
1 parent 44c7683 commit 2749d10
Show file tree
Hide file tree
Showing 8 changed files with 34 additions and 35 deletions.
6 changes: 3 additions & 3 deletions examples/table/table.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ cell | String / Function | - | use cell to render table cell。Typescript：`str
children | Array | - | grouping table head。Typescript：`Array<BaseTableCol<T>>` | N
className | String / Object / Array / Function | - | cell classnames。Typescript：`ClassName | ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' | 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
colKey | String | - | unique key for column | N
ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript：`boolean | TNode<BaseTableCellParams<T>> | PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
ellipsisTitle | Boolean / Object / Slot / Function | undefined | ellipsis title content。Typescript：`boolean | TNode<BaseTableColParams<T>> | PopupProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
ellipsis | Boolean / Object / Slot / Function | false | ellipsis cell content。Typescript：`boolean | TNode<BaseTableCellParams<T>> | TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
ellipsisTitle | Boolean / Object / Slot / Function | undefined | ellipsis title content。Typescript：`boolean | TNode<BaseTableColParams<T>> | TooltipProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
fixed | String | left | fixed current column to left or right。options：left/right | N
foot | String / Function | - | tfoot content。Typescript：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
minWidth | String / Number | - | add CSS property `min-width` to HTML Element `<col>`，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) support `minWidth` | N
Expand Down Expand Up @@ -280,7 +280,7 @@ component | \- | - | component definition。Typescript：`ComponentType`。[see
defaultEditable | Boolean | false | set default editable once | N
onEdited | Function | - | trigger on finishing editing。Typescript：`(context: { trigger: string; newRowData: T; rowIndex: number }) => void` | N
props | Object | - | props of `edit.component`。Typescript：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject | ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T }` `interface TablePlainObject{ [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
rules | Array | - | form rules。Typescript：`FormRule[]`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
rules | Array | - | form rules。Typescript：`TableEditableCellRules<T>` `type TableEditableCellRules<T> = FormRule[] | ((params: TableEditableCellPropsParams<T>) => FormRule[])`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
showEditIcon | Boolean | true | show edit icon | N

### TableTreeConfig
Expand Down
6 changes: 3 additions & 3 deletions examples/table/table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ cell | String / Function | - | 自定义单元格渲染。值类型为 Function
children | Array | - | 用于多级表头，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>` | N
className | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`ClassName | ((context: CellData<T>) => ClassName)` `interface CellData<T> extends BaseTableCellParams<T> { type: 'th' | 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
colKey | String | - | 渲染列所需字段 | N
ellipsis | Boolean / Object / Slot / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableCellParams<T>> | PopupProps`，[Popup API Documents](./popup?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
ellipsisTitle | Boolean / Object / Slot / Function | undefined | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableColParams<T>> | PopupProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
ellipsis | Boolean / Object / Slot / Function | false | 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableCellParams<T>> | TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
ellipsisTitle | Boolean / Object / Slot / Function | undefined | 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性。TS 类型：`boolean | TNode<BaseTableColParams<T>> | TooltipProps` `interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
fixed | String | left | 固定列显示位置。可选项：left/right | N
foot | String / Function | - | 自定义表尾表尾。值类型为 Function 表示以函数形式渲染表尾内容。值类型为 string 表示使用插槽渲染，插槽名称为 `foot` 值。TS 类型：`string | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
minWidth | String / Number | - | 透传 CSS 属性 `min-width` 到 `<col>` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N
Expand Down Expand Up @@ -280,7 +280,7 @@ component | \- | - | 组件定义，如：`Input` `Select`。对于完全自定
defaultEditable | Boolean | false | 单元格默认状态是否为编辑态 | N
onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: { trigger: string; newRowData: T; rowIndex: number }) => void` | N
props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject | ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T }` `interface TablePlainObject{ [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
rules | Array | - | 校验规则。TS 类型：`FormRule[]`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
rules | Array | - | 校验规则。TS 类型：`TableEditableCellRules<T>` `type TableEditableCellRules<T> = FormRule[] | ((params: TableEditableCellPropsParams<T>) => FormRule[])`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
showEditIcon | Boolean | true | 是否显示编辑图标 | N

### TableTreeConfig
Expand Down
24 changes: 12 additions & 12 deletions src/table/ellipsis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ import debounce from 'lodash/debounce';
import { TNode } from '../common';
import { renderContent } from '../utils/render-tnode';
import { isNodeOverflow } from '../utils/dom';
import TPopup, { PopupProps } from '../popup';
import TTooltip, { TooltipProps } from '../tooltip';
import { useConfig } from '../config-provider/useConfig';

export interface EllipsisProps {
content: string | TNode;
default: string | TNode;
popupContent: string | number | TNode;
placement: PopupProps['placement'];
tooltipContent: string | number | TNode;
placement: TooltipProps['placement'];
attach: () => HTMLElement;
popupProps: PopupProps;
tooltipProps: TooltipProps;
zIndex: number;
}

Expand All @@ -32,15 +32,15 @@ export default defineComponent({
type: [String, Function] as PropType<EllipsisProps['default']>,
},
/** 内容，同 content，可以单独自定义浮层内容，无需和触发元素保持一致 */
popupContent: {
type: [String, Number, Function] as PropType<EllipsisProps['popupContent']>,
tooltipContent: {
type: [String, Number, Function] as PropType<EllipsisProps['tooltipContent']>,
},
/** 浮层位置 */
placement: String as PropType<EllipsisProps['placement']>,
/** 挂载元素 */
attach: Function as PropType<EllipsisProps['attach']>,
/** 透传 Popup 组件属性 */
popupProps: Object as PropType<EllipsisProps['popupProps']>,
/** 透传 Tooltip 组件属性 */
tooltipProps: Object as PropType<EllipsisProps['tooltipProps']>,
zIndex: Number,
},

Expand All @@ -56,7 +56,7 @@ export default defineComponent({
`${classPrefix.value}-text-ellipsis`,
]);

// 当表格数据量大时，不希望默认渲染全量的 Popup，期望在用户 mouseenter 的时候再显示
// 当表格数据量大时，不希望默认渲染全量的 Tooltip，期望在用户 mouseenter 的时候再显示
const onTriggerMouseenter = () => {
if (!root.value) return;
isOverflow.value = isNodeOverflow(root.value);
Expand Down Expand Up @@ -89,14 +89,14 @@ export default defineComponent({
let content = null;
if (this.isOverflow) {
const rProps = {
content: this.popupContent || (() => cellNode),
content: this.tooltipContent || (() => cellNode),
destroyOnClose: true,
zIndex: this.zIndex,
attach: this.attach || (() => this.root),
placement: this.placement,
...(this.popupProps || {}),
...(this.tooltipProps || {}),
};
content = <TPopup props={rProps}>{ellipsisContent}</TPopup>;
content = <TTooltip props={rProps}>{ellipsisContent}</TTooltip>;
} else {
content = ellipsisContent;
}
Expand Down
4 changes: 2 additions & 2 deletions src/table/hooks/useTableHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ export default function useTableHeader(props: TdBaseTableProps) {
<TEllipsis
placement="bottom-right"
attach={attach ? () => attach : undefined}
popupContent={content && (() => content)}
popupProps={typeof ellipsisTitle === 'object' ? ellipsisTitle : undefined}
tooltipContent={content && (() => content)}
tooltipProps={typeof ellipsisTitle === 'object' ? ellipsisTitle : undefined}
>
{title}
</TEllipsis>
Expand Down
7 changes: 2 additions & 5 deletions src/table/primary-table-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export default {
/** 列配置功能中，当前显示的列 */
displayColumns: {
type: Array as PropType<TdPrimaryTableProps['displayColumns']>,
default: undefined,
},
/** 列配置功能中，当前显示的列，非受控属性 */
defaultDisplayColumns: {
Expand Down Expand Up @@ -74,7 +73,7 @@ export default {
/** 展开行 */
expandedRowKeys: {
type: Array as PropType<TdPrimaryTableProps['expandedRowKeys']>,
default: undefined,
default: (): TdPrimaryTableProps['expandedRowKeys'] => [],
},
/** 展开行，非受控属性 */
defaultExpandedRowKeys: {
Expand All @@ -92,7 +91,6 @@ export default {
/** 过滤数据的值 */
filterValue: {
type: Object as PropType<TdPrimaryTableProps['filterValue']>,
default: undefined,
},
/** 过滤数据的值，非受控属性 */
defaultFilterValue: {
Expand All @@ -109,7 +107,7 @@ export default {
/** 选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制 */
selectedRowKeys: {
type: Array as PropType<TdPrimaryTableProps['selectedRowKeys']>,
default: undefined,
default: (): TdPrimaryTableProps['selectedRowKeys'] => [],
},
/** 选中行，控制属性。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制，非受控属性 */
defaultSelectedRowKeys: {
Expand All @@ -119,7 +117,6 @@ export default {
/** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序 */
sort: {
type: [Object, Array] as PropType<TdPrimaryTableProps['sort']>,
default: undefined,
},
/** 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序，非受控属性 */
defaultSort: {
Expand Down
4 changes: 2 additions & 2 deletions src/table/thead.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,8 +143,8 @@ export default defineComponent({
<TEllipsis
placement="bottom"
attach={this.theadRef ? () => this.theadRef : undefined}
popupContent={content && (() => content)}
popupProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}
tooltipContent={content && (() => content)}
tooltipProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}
>
{innerTh}
</TEllipsis>
Expand Down
4 changes: 2 additions & 2 deletions src/table/tr.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,8 @@ export default defineComponent({
<TEllipsis
placement={placement}
attach={this.tableElm ? () => this.tableElm : undefined}
popupContent={content && (() => content)}
popupProps={typeof col.ellipsis === 'object' ? col.ellipsis : undefined}
tooltipContent={content && (() => content)}
tooltipProps={typeof col.ellipsis === 'object' ? col.ellipsis : undefined}
>
{cellNode}
</TEllipsis>
Expand Down
14 changes: 8 additions & 6 deletions src/table/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { AffixProps } from '../affix';
import { LoadingProps } from '../loading';
import { PaginationProps, PageInfo } from '../pagination';
import { PopupProps } from '../popup';
import { TooltipProps } from '../tooltip';
import { CheckboxGroupValue } from '../checkbox';
import { SortableEvent, SortableOptions } from 'sortablejs';
import { CheckboxProps } from '../checkbox';
Expand Down Expand Up @@ -271,14 +271,14 @@ export interface BaseTableCol<T extends TableRowData = TableRowData> {
*/
colKey?: string;
/**
* 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性
* 单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。<br/> 值为 `true`，则浮层默认显示单元格内容；<br/>值类型为 `Function` 则自定义浮层显示内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性
* @default false
*/
ellipsis?: boolean | TNode<BaseTableCellParams<T>> | PopupProps;
ellipsis?: boolean | TNode<BaseTableCellParams<T>> | TooltipProps;
/**
* 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Popup 组件，可用于调整浮层方向等特性
* 表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。<br/>值为 `true`，则浮层默认显示表头全部内容；<br/>值类型为 `Function` 则自定义浮层显示表头内容；<br/>值类型为 `Object`，则自动透传属性到 Tooltip 组件，可用于调整浮层方向等特性
*/
ellipsisTitle?: boolean | TNode<BaseTableColParams<T>> | PopupProps;
ellipsisTitle?: boolean | TNode<BaseTableColParams<T>> | TooltipProps;
/**
* 固定列显示位置
* @default left
Expand Down Expand Up @@ -801,7 +801,7 @@ export interface TableEditableCellConfig<T extends TableRowData = TableRowData>
/**
* 校验规则
*/
rules?: FormRule[];
rules?: TableEditableCellRules<T>;
/**
* 是否显示编辑图标
* @default true
Expand Down Expand Up @@ -1056,3 +1056,5 @@ export interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<
export interface TablePlainObject {
[key: string]: any;
}

export type TableEditableCellRules<T> = FormRule[] | ((params: TableEditableCellPropsParams<T>) => FormRule[]);

0 comments on commit 2749d10

Please sign in to comment.