feat: add LoadingProps to Card

TDesignOteam · Nov 28, 2023 · 5124ae4 · 5124ae4
1 parent 98f172d
commit 5124ae4
Show file tree

Hide file tree

Showing 26 changed files with 1,145 additions and 6 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/card/card.en-US.md b/packages/products/tdesign-react/src/card/card.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Card Props
 
 name | type | default | description | required
@@ -20,9 +19,10 @@ header | TNode | - | Typescript：`string \| TNode`。[see more ts definition](h
 headerBordered | Boolean | false | \- | N
 hoverShadow | Boolean | false | \- | N
 loading | TNode | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+loadingProps | Object | - | Loading Component Props。Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N
 shadow | Boolean | false | \- | N
-size | String | medium | options：medium/small | N
+size | String | medium | options: medium/small | N
 status | String | - | \- | N
 subtitle | TNode | - | card subtitle。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-theme | String | normal | options：normal/poster1/poster2 | N
+theme | String | normal | options: normal/poster1/poster2 | N
 title | TNode | - | card title。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/card/card.md b/packages/products/tdesign-react/src/card/card.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Card Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -20,6 +19,7 @@ header | TNode | - | 卡片顶部内容，优先级高于其他所有元素。TS
 headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
 hoverShadow | Boolean | false | hover时是否有阴影 | N
 loading | TNode | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N
 shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
 size | String | medium | 尺寸。可选项：medium/small | N
 status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N

diff --git a/packages/products/tdesign-react/src/card/defaultProps.ts b/packages/products/tdesign-react/src/card/defaultProps.ts
@@ -0,0 +1,15 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCardProps } from './type';
+
+export const cardDefaultProps: TdCardProps = {
+  bordered: true,
+  headerBordered: false,
+  hoverShadow: false,
+  loading: false,
+  shadow: false,
+  size: 'medium',
+  theme: 'normal',
+};
diff --git a/packages/products/tdesign-react/src/card/type.ts b/packages/products/tdesign-react/src/card/type.ts
@@ -0,0 +1,95 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { LoadingProps } from '../loading';
+import { TNode } from '../common';
+
+export interface TdCardProps {
+  /**
+   * 卡片操作区
+   */
+  actions?: TNode;
+  /**
+   * 卡片中的用户头像，仅在海报风格的卡片中有效
+   */
+  avatar?: TNode;
+  /**
+   * 是否有边框
+   * @default true
+   */
+  bordered?: boolean;
+  /**
+   * 卡片内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 卡片内容
+   */
+  content?: TNode;
+  /**
+   * 卡片封面图。值类型为字符串，会自动使用 `img` 标签输出封面图；也可以完全最定义封面图
+   */
+  cover?: TNode;
+  /**
+   * 卡片描述文案
+   */
+  description?: TNode;
+  /**
+   * 卡片底部内容，可完全自定义
+   */
+  footer?: TNode;
+  /**
+   * 卡片顶部内容，优先级高于其他所有元素
+   */
+  header?: TNode;
+  /**
+   * 头部是否带分割线，仅在有header时有效
+   * @default false
+   */
+  headerBordered?: boolean;
+  /**
+   * hover时是否有阴影
+   * @default false
+   */
+  hoverShadow?: boolean;
+  /**
+   * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容
+   * @default false
+   */
+  loading?: TNode;
+  /**
+   * 透传加载组件(Loading)全部属性
+   */
+  loadingProps?: LoadingProps;
+  /**
+   * 是否显示卡片阴影，默认不显示
+   * @default false
+   */
+  shadow?: boolean;
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: 'medium' | 'small';
+  /**
+   * 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ）
+   * @default ''
+   */
+  status?: string;
+  /**
+   * 卡片副标题
+   */
+  subtitle?: TNode;
+  /**
+   * 卡片风格：普通风格、海报风格1（操作区域在顶部）、海报风格2（操作区域在底部）
+   * @default normal
+   */
+  theme?: 'normal' | 'poster1' | 'poster2';
+  /**
+   * 卡片标题
+   */
+  title?: TNode;
+}
diff --git a/packages/products/tdesign-react/src/loading/defaultProps.ts b/packages/products/tdesign-react/src/loading/defaultProps.ts
@@ -0,0 +1,17 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdLoadingProps } from './type';
+
+export const loadingDefaultProps: TdLoadingProps = {
+  attach: '',
+  delay: 0,
+  fullscreen: false,
+  indicator: true,
+  inheritColor: false,
+  loading: true,
+  preventScrollThrough: true,
+  showOverlay: true,
+  size: 'medium',
+};
diff --git a/packages/products/tdesign-react/src/loading/loading.en-US.md b/packages/products/tdesign-react/src/loading/loading.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Loading Props
 
 name | type | default | description | required

diff --git a/packages/products/tdesign-react/src/loading/loading.md b/packages/products/tdesign-react/src/loading/loading.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Loading Props
 
 名称 | 类型 | 默认值 | 说明 | 必传

diff --git a/packages/products/tdesign-react/src/loading/type.ts b/packages/products/tdesign-react/src/loading/type.ts
@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, AttachNode } from '../common';
+
+export interface TdLoadingProps {
+  /**
+   * 挂载元素，默认挂载到组件本身所在的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default ''
+   */
+  attach?: AttachNode;
+  /**
+   * 子元素，同 content
+   */
+  children?: TNode;
+  /**
+   * 子元素
+   */
+  content?: TNode;
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * 是否显示为全屏加载
+   * @default false
+   */
+  fullscreen?: boolean;
+  /**
+   * 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
+   * @default true
+   */
+  indicator?: TNode;
+  /**
+   * 是否继承父元素颜色
+   * @default false
+   */
+  inheritColor?: boolean;
+  /**
+   * 是否处于加载状态
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * 防止滚动穿透，全屏加载模式有效
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 是否需要遮罩层，遮罩层对包裹元素才有效
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 尺寸，示例：small/medium/large/12px/56px/0.3em
+   * @default medium
+   */
+  size?: string;
+  /**
+   * 加载提示文案
+   */
+  text?: TNode;
+  /**
+   * 消息通知层级，样式默认为 3500
+   */
+  zIndex?: number;
+}
+
+export interface LoadingInstance {
+  hide: () => void;
+}
+
+export type LoadingMethod = (options: boolean | TdLoadingProps) => LoadingInstance;
diff --git a/packages/products/tdesign-vue-next/src/card/card.en-US.md b/packages/products/tdesign-vue-next/src/card/card.en-US.md
@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+
+### Card Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+actions | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+avatar | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+bordered | Boolean | true | \- | N
+content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+cover | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+description | String / Slot / Function | - | card description。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+footer | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+header | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+headerBordered | Boolean | false | \- | N
+hoverShadow | Boolean | false | \- | N
+loading | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+loadingProps | Object | - | Loading Component Props。Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/card/type.ts) | N
+shadow | Boolean | false | \- | N
+size | String | medium | options: medium/small | N
+status | String | - | \- | N
+subtitle | String / Slot / Function | - | card subtitle。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | normal | options: normal/poster1/poster2 | N
+title | String / Slot / Function | - | card title。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/card/card.md b/packages/products/tdesign-vue-next/src/card/card.md
@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+
+### Card Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+actions | String / Slot / Function | - | 卡片操作区。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+avatar | String / Slot / Function | - | 卡片中的用户头像，仅在海报风格的卡片中有效。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+bordered | Boolean | true | 是否有边框 | N
+content | String / Slot / Function | - | 卡片内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+cover | String / Slot / Function | - | 卡片封面图。值类型为字符串，会自动使用 `img` 标签输出封面图；也可以完全最定义封面图。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 卡片内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+description | String / Slot / Function | - | 卡片描述文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+footer | String / Slot / Function | - | 卡片底部内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+header | String / Slot / Function | - | 卡片顶部内容，优先级高于其他所有元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
+hoverShadow | Boolean | false | hover时是否有阴影 | N
+loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/card/type.ts) | N
+shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
+size | String | medium | 尺寸。可选项：medium/small | N
+status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N
+subtitle | String / Slot / Function | - | 卡片副标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | normal | 卡片风格：普通风格、海报风格1（操作区域在顶部）、海报风格2（操作区域在底部）。可选项：normal/poster1/poster2 | N
+title | String / Slot / Function | - | 卡片标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N