feat: web add Typography API (#225)

* feat: add typography * feat: generate docs
TDesignOteam · Jan 30, 2024 · a8da180 · a8da180
1 parent fc9d225
commit a8da180
Show file tree

Hide file tree

Showing 22 changed files with 2,495 additions and 3 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/common.ts b/packages/products/tdesign-react/src/common.ts
@@ -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);

diff --git a/packages/products/tdesign-react/src/typography/defaultProps.ts b/packages/products/tdesign-react/src/typography/defaultProps.ts
@@ -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 };
diff --git a/packages/products/tdesign-react/src/typography/type.ts b/packages/products/tdesign-react/src/typography/type.ts
@@ -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;
+}
diff --git a/packages/products/tdesign-react/src/typography/typography.en-US.md b/packages/products/tdesign-react/src/typography/typography.en-US.md
@@ -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
diff --git a/packages/products/tdesign-react/src/typography/typography.md b/packages/products/tdesign-react/src/typography/typography.md
@@ -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
diff --git a/packages/products/tdesign-vue-next/src/typography/paragraph-props.ts b/packages/products/tdesign-vue-next/src/typography/paragraph-props.ts
@@ -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'],
+  },
+};
diff --git a/packages/products/tdesign-vue-next/src/typography/text-props.ts b/packages/products/tdesign-vue-next/src/typography/text-props.ts
@@ -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,
+};