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: web add Typography API #225

Merged
merged 2 commits into from
Jan 30, 2024
Merged

feat: web add Typography API #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6727d2d
feat: add typography
uyarn Jan 30, 2024
01635a9
feat: generate docs
uyarn Jan 30, 2024
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
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion packages/products/tdesign-react/src/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ReactElement, ReactNode, CSSProperties, FormEvent, DragEvent, Synthetic
// TElement 表示 API 只接受传入组件
export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
// 1. TNode = ReactNode; 2. TNode<T> = (props: T) => ReactNode
export type TNode<T = undefined> = T extends undefined ? ReactNode : ReactNode | ((props: T) => ReactNode);
export type TNode<T = undefined> = T extends undefined ? ReactNode | (() => ReactNode) : ReactNode | ((props: T) => ReactNode);

export type AttachNodeReturnValue = HTMLElement | Element | Document;
export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);
Expand Down
21 changes: 21 additions & 0 deletions packages/products/tdesign-react/src/typography/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { TdTextProps, TdTitleProps, TdParagraphProps } from './type';

export const textDefaultProps: TdTextProps = {
code: false,
delete: false,
disabled: false,
ellipsis: false,
italic: false,
keyboard: false,
mark: false,
strong: false,
underline: false,
};

export const titleDefaultProps: TdTitleProps = { ellipsis: false, level: 'h1' };

export const paragraphDefaultProps: TdParagraphProps = { copyable: false, ellipsis: false };
156 changes: 156 additions & 0 deletions packages/products/tdesign-react/src/typography/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
/* eslint-disable */

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { tooltipProps } from '../tooltip';
import { TNode } from '../common';

export interface TdTextProps {
/**
* 文本内容，同content
*/
children?: TNode;
/**
* 是否添加代码样式
* @default false
*/
code?: boolean;
/**
* 是否添加删除线样式
* @default false
*/
delete?: boolean;
/**
* 是否添加不可用样式
* @default false
*/
disabled?: boolean;
/**
* 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式
* @default false
*/
ellipsis?: boolean | TypographyEllipsis;
/**
* 文本是否为斜体
* @default false
*/
italic?: boolean;
/**
* 是否添加键盘样式
* @default false
*/
keyboard?: boolean;
/**
* 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9
* @default false
*/
mark?: string | boolean;
/**
* 文本是否加粗
* @default false
*/
strong?: boolean;
/**
* 主题
*/
theme?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
/**
* 是否添加下划线样式
* @default false
*/
underline?: boolean;
}

export interface TdTitleProps {
/**
* 段落内容，同 content
*/
children?: TNode;
/**
* 段落内容
*/
content?: TNode;
/**
* 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式
* @default false
*/
ellipsis?: boolean | TypographyEllipsis;
/**
* 标题等级
* @default h1
*/
level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}

export interface TdParagraphProps {
/**
* 段落内容，同 content
*/
children?: TNode;
/**
* 段落内容
*/
content?: TNode;
/**
* 是否可复制，可通过配置参数自定义复制操作的具体功能和样式
* @default false
*/
copyable?: boolean | TypographyCopyable;
/**
* 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式
* @default false
*/
ellipsis?: boolean | TypographyEllipsis;
}

export interface TypographyEllipsis {
/**
* 展开后是否可以重新收起
* @default true
*/
collapsible?: boolean;
/**
* 是否可展开
* @default true
*/
expandable?: boolean;
/**
* 省略配置默认展示行数
* @default 1
*/
row?: number;
/**
* 自定义省略触发元素，一般用于自定义折叠图标
*/
suffix?: TNode<{ expanded: boolean }>;
/**
* 光标在省略图标上出现的tooltip的配置
*/
tooltipProps?: tooltipProps;
/**
* 点击省略按钮的回调
*/
onExpand?: (expanded: boolean) => void;
}

export interface TypographyCopyable {
/**
* 复制的文本内容，默认为全部文本
* @default ''
*/
text?: string;
/**
* 自定义复制触发元素，一般用于自定义复制图标
*/
suffix?: TNode<{ copied: boolean }>;
/**
* 光标在复制图标上出现的tooltip的配置
*/
tooltipProps?: tooltipProps;
/**
* 点击复制按钮的回调
*/
onCopy?: () => void;
}
62 changes: 62 additions & 0 deletions packages/products/tdesign-react/src/typography/typography.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
:: BASE_DOC ::

## API
### Text Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
children | TNode | - | children of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
code | Boolean | false | add code style | N
delete | Boolean | false | add delete line style | N
disabled | Boolean | false | add disabled style | N
ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N
italic | Boolean | false | add italic style | N
keyboard | Boolean | false | add keyboard style | N
mark | String / Boolean | false | add mark style | N
strong | Boolean | false | add bold style | N
theme | String | - | theme of text。options: primary/secondary/success/warning/error | N
underline | Boolean | false | add underline style | N

### Title Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
children | TNode | - | children of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | content of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N
level | String | h1 | level of title。options: h1/h2/h3/h4/h5/h6 | N

### Paragraph Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
children | TNode | - | children of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | content of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
copyable | Boolean / Object | false | add copyable style。Typescript：`boolean \| TypographyCopyable` | N
ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N

### TypographyEllipsis

name | type | default | description | required
-- | -- | -- | -- | --
collapsible | Boolean | true | collapsible after expanding | N
expandable | Boolean | true | expandable | N
row | Number | 1 | default row number of ellipsis | N
suffix | TElement | - | custom element configuration for ellipsis and collapse icon。Typescript：`TNode<{ expanded: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
tooltipProps | Object | - | Configuration of the tooltip that appears on the ellipsis icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
onExpand | Function | | Typescript：`(expanded:boolean) => void`<br/> | N

### TypographyCopyable

name | type | default | description | required
-- | -- | -- | -- | --
text | String | - | copied content | N
suffix | TElement | - | custom element configuration for copy icon。Typescript：`TNode<{ copied: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
tooltipProps | Object | - | Configuration of the tooltip that appears on the copy icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
onCopy | Function | | Typescript：`() => void`<br/> | N
62 changes: 62 additions & 0 deletions packages/products/tdesign-react/src/typography/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
:: BASE_DOC ::

## API
### Text Props

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
children | TNode | - | 文本内容，同content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
code | Boolean | false | 是否添加代码样式 | N
delete | Boolean | false | 是否添加删除线样式 | N
disabled | Boolean | false | 是否添加不可用样式 | N
ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N
italic | Boolean | false | 文本是否为斜体 | N
keyboard | Boolean | false | 是否添加键盘样式 | N
mark | String / Boolean | false | 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9 | N
strong | Boolean | false | 文本是否加粗 | N
theme | String | - | 主题。可选项：primary/secondary/success/warning/error | N
underline | Boolean | false | 是否添加下划线样式 | N

### Title Props

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N
level | String | h1 | 标题等级。可选项：h1/h2/h3/h4/h5/h6 | N

### Paragraph Props

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
copyable | Boolean / Object | false | 是否可复制，可通过配置参数自定义复制操作的具体功能和样式。TS 类型：`boolean \| TypographyCopyable` | N
ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N

### TypographyEllipsis

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
collapsible | Boolean | true | 展开后是否可以重新收起 | N
expandable | Boolean | true | 是否可展开 | N
row | Number | 1 | 省略配置默认展示行数 | N
suffix | TElement | - | 自定义省略触发元素，一般用于自定义折叠图标。TS 类型：`TNode<{ expanded: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
tooltipProps | Object | - | 光标在省略图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
onExpand | Function | | TS 类型：`(expanded:boolean) => void`<br/>点击省略按钮的回调 | N

### TypographyCopyable

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
text | String | - | 复制的文本内容，默认为全部文本 | N
suffix | TElement | - | 自定义复制触发元素，一般用于自定义复制图标。TS 类型：`TNode<{ copied: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
tooltipProps | Object | - | 光标在复制图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
onCopy | Function | | TS 类型：`() => void`<br/>点击复制按钮的回调 | N
29 changes: 29 additions & 0 deletions packages/products/tdesign-vue-next/src/typography/paragraph-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/* eslint-disable */

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { TdParagraphProps } from '../typography/type';
import { PropType } from 'vue';

export default {
/** 段落内容 */
content: {
type: [String, Function] as PropType<TdParagraphProps['content']>,
},
/** 是否可复制，可通过配置参数自定义复制操作的具体功能和样式 */
copyable: {
type: [Boolean, Object] as PropType<TdParagraphProps['copyable']>,
default: false as TdParagraphProps['copyable'],
},
/** 段落内容 */
default: {
type: [String, Function] as PropType<TdParagraphProps['default']>,
},
/** 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 */
ellipsis: {
type: [Boolean, Object] as PropType<TdParagraphProps['ellipsis']>,
default: false as TdParagraphProps['ellipsis'],
},
};
51 changes: 51 additions & 0 deletions packages/products/tdesign-vue-next/src/typography/text-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/* eslint-disable */

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */

import { TdTextProps } from '../typography/type';
import { PropType } from 'vue';

export default {
/** 是否添加代码样式 */
code: Boolean,
/** 文本内容 */
content: {
type: [String, Function] as PropType<TdTextProps['content']>,
},
/** 文本内容 */
default: {
type: [String, Function] as PropType<TdTextProps['default']>,
},
/** 是否添加删除线样式 */
delete: Boolean,
/** 是否添加不可用样式 */
disabled: Boolean,
/** 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式 */
ellipsis: {
type: [Boolean, Object] as PropType<TdTextProps['ellipsis']>,
default: false as TdTextProps['ellipsis'],
},
/** 文本是否为斜体 */
italic: Boolean,
/** 是否添加键盘样式 */
keyboard: Boolean,
/** 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9 */
mark: {
type: [String, Boolean] as PropType<TdTextProps['mark']>,
default: false as TdTextProps['mark'],
},
/** 文本是否加粗 */
strong: Boolean,
/** 主题 */
theme: {
type: String as PropType<TdTextProps['theme']>,
validator(val: TdTextProps['theme']): boolean {
if (!val) return true;
return ['primary', 'secondary', 'success', 'warning', 'error'].includes(val);
},
},
/** 是否添加下划线样式 */
underline: Boolean,
};
Loading
Loading