Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(table): 文本超出提示由 Popup 更为 Tooltip，以便于定制各种提示文本主题色 #1497

Merged
merged 5 commits into from
Aug 24, 2022
Merged

feat(table): 文本超出提示由 Popup 更为 Tooltip，以便于定制各种提示文本主题色 #1497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a208fec
feat(table): 文本超出提示由 Popup 更为 Tooltip，以便于定制各种提示文本主题色
PDieE Aug 24, 2022
b9f3cc2
Update ellipsis.tsx
PDieE Aug 24, 2022
ff20010
fix: docs
PDieE Aug 24, 2022
af758d8
fix: type
PDieE Aug 24, 2022
6760dd8
fix: type
PDieE Aug 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/table/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,11 @@ const columns = [
/**
* 1.内容超出时，是否显示省略号。值为 true，则浮层默认显示单元格内容；
* 2.值类型为 Function 则自定义浮层显示内容；
* 3.值类型为 Object，则自动透传属性到 Popup 组件。
* 3.值类型为 Object，则自动透传属性到 Tooltip 组件。
*/
ellipsis: true,

// 透传省略内容浮层 Popup 组件全部特性，示例代码有效，勿删！！！
// 透传省略内容浮层 Tooltip 组件全部特性，示例代码有效，勿删！！！
// ellipsis: { placement: 'bottom', destroyOnClose: false },

// 完全自定义 ellipsis 浮层的样式和内容，示例代码有效，勿删！！！
Expand Down
2 changes: 1 addition & 1 deletion examples/table/demos/fixed-column.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const columns = computed(() => {
title: '详情信息',
width: 120,
fixed: 'right',
// 允许自定义浮层 Popup 全部属性
// 允许自定义浮层 Tooltip 全部属性
ellipsis: { placement: 'bottom-right' },
},
];
Expand Down
6 changes: 3 additions & 3 deletions examples/table/table.en-US.md
View file
Open in desktop
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-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/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-next/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-next/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-next/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
Open in desktop
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-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/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-next/tree/develop/src/table/type.ts) | N
rules | Array | - | 校验规则。TS 类型：`FormRule[]`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,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 '../hooks/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 @@ -30,15 +30,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 @@ -52,7 +52,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 @@ -85,14 +85,14 @@ export default defineComponent({
let content = null;
if (this.isOverflow) {
const rProps = {
content: (this.popupContent as string) || (() => cellNode),
content: (this.tooltipContent as string) || (() => cellNode),
destroyOnClose: true,
zIndex: this.zIndex,
attach: this.attach,
placement: this.placement,
...(this.popupProps as EllipsisProps['popupProps']),
...(this.tooltipProps as EllipsisProps['tooltipProps']),
};
content = <TPopup {...rProps}>{ellipsisContent}</TPopup>;
content = <TTooltip {...rProps}>{ellipsisContent}</TTooltip>;
} else {
content = ellipsisContent;
}
Expand Down
4 changes: 2 additions & 2 deletions src/table/hooks/useTableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,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
4 changes: 2 additions & 2 deletions src/table/thead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,8 @@ export default defineComponent({
<TEllipsis
placement={placement}
attach={tableElement ? () => tableElement : 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
10 changes: 5 additions & 5 deletions src/table/type.ts
View file
Open in desktop
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