feat: add typography

TDesignOteam · Jan 30, 2024 · 6727d2d · 6727d2d
1 parent fc9d225
commit 6727d2d
Show file tree

Hide file tree

Showing 22 changed files with 921 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,9 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTextProps, TdTitleProps } from './type';
+
+export const textDefaultProps: TdTextProps = { code: false };
+
+export const titleDefaultProps: TdTitleProps = { level: 'h1' };
diff --git a/packages/products/tdesign-react/src/typography/type.ts b/packages/products/tdesign-react/src/typography/type.ts
@@ -0,0 +1,46 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdTextProps {
+  /**
+   * 文本内容，同content
+   */
+  children?: TNode;
+  /**
+   * 是否添加代码样式
+   * @default false
+   */
+  code?: boolean;
+}
+
+export interface TdTitleProps {
+  /**
+   * 段落内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 段落内容
+   */
+  content?: TNode;
+  /**
+   * 标题等级
+   * @default h1
+   */
+  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export interface TdParagraphProps {
+  /**
+   * 段落内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 段落内容
+   */
+  content?: TNode;
+}
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,31 @@
+:: 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
+
+### 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
+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
diff --git a/packages/products/tdesign-react/src/typography/typography.md b/packages/products/tdesign-react/src/typography/typography.md
@@ -0,0 +1,31 @@
+:: 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
+
+### 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
+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
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,19 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdParagraphProps } from '../typography/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 段落内容 */
+  content: {
+    type: [String, Function] as PropType<TdParagraphProps['content']>,
+  },
+  /** 段落内容 */
+  default: {
+    type: [String, Function] as PropType<TdParagraphProps['default']>,
+  },
+};
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,21 @@
+/* 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']>,
+  },
+};
diff --git a/packages/products/tdesign-vue-next/src/typography/title-props.ts b/packages/products/tdesign-vue-next/src/typography/title-props.ts
@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTitleProps } from '../typography/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 段落内容 */
+  content: {
+    type: [String, Function] as PropType<TdTitleProps['content']>,
+  },
+  /** 标题内容 */
+  default: {
+    type: [String, Function] as PropType<TdTitleProps['default']>,
+  },
+  /** 标题等级 */
+  level: {
+    type: String as PropType<TdTitleProps['level']>,
+    default: 'h1' as TdTitleProps['level'],
+    validator(val: TdTitleProps['level']): boolean {
+      if (!val) return true;
+      return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(val);
+    },
+  },
+};
diff --git a/packages/products/tdesign-vue-next/src/typography/type.ts b/packages/products/tdesign-vue-next/src/typography/type.ts
@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdTextProps {
+  /**
+   * 是否添加代码样式
+   * @default false
+   */
+  code?: boolean;
+  /**
+   * 文本内容
+   */
+  content?: string | TNode;
+  /**
+   * 文本内容
+   */
+  default?: string | TNode;
+}
+
+export interface TdTitleProps {
+  /**
+   * 段落内容
+   */
+  content?: string | TNode;
+  /**
+   * 标题内容
+   */
+  default?: string | TNode;
+  /**
+   * 标题等级
+   * @default h1
+   */
+  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export interface TdParagraphProps {
+  /**
+   * 段落内容
+   */
+  content?: string | TNode;
+  /**
+   * 段落内容
+   */
+  default?: string | TNode;
+}
diff --git a/packages/products/tdesign-vue-next/src/typography/typography.en-US.md b/packages/products/tdesign-vue-next/src/typography/typography.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### Text Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+code | Boolean | false | add code style | N
+content | String / Slot / Function | - | content of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | default slot of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+
+### Title Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | content of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | default slot of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+level | String | h1 | level of title。options: h1/h2/h3/h4/h5/h6 | N
+
+### Paragraph Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | content of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | default slot of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
diff --git a/packages/products/tdesign-vue-next/src/typography/typography.md b/packages/products/tdesign-vue-next/src/typography/typography.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### Text Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+code | Boolean | false | 是否添加代码样式 | N
+content | String / Slot / Function | - | 文本内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 文本内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+
+### Title Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 标题内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+level | String | h1 | 标题等级。可选项：h1/h2/h3/h4/h5/h6 | N
+
+### Paragraph Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
diff --git a/packages/products/tdesign-vue/src/typography/paragraph-props.ts b/packages/products/tdesign-vue/src/typography/paragraph-props.ts
@@ -0,0 +1,19 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdParagraphProps } from '../typography/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 段落内容 */
+  content: {
+    type: [String, Function] as PropType<TdParagraphProps['content']>,
+  },
+  /** 段落内容 */
+  default: {
+    type: [String, Function] as PropType<TdParagraphProps['default']>,
+  },
+};
diff --git a/packages/products/tdesign-vue/src/typography/text-props.ts b/packages/products/tdesign-vue/src/typography/text-props.ts
@@ -0,0 +1,21 @@
+/* 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']>,
+  },
+};
diff --git a/packages/products/tdesign-vue/src/typography/title-props.ts b/packages/products/tdesign-vue/src/typography/title-props.ts
@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTitleProps } from '../typography/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 段落内容 */
+  content: {
+    type: [String, Function] as PropType<TdTitleProps['content']>,
+  },
+  /** 标题内容 */
+  default: {
+    type: [String, Function] as PropType<TdTitleProps['default']>,
+  },
+  /** 标题等级 */
+  level: {
+    type: String as PropType<TdTitleProps['level']>,
+    default: 'h1' as TdTitleProps['level'],
+    validator(val: TdTitleProps['level']): boolean {
+      if (!val) return true;
+      return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(val);
+    },
+  },
+};