feat(card): card组件支持传入loadingProps参数 (#2959)

* feat(card): card组件支持传入loadingProps参数

card组件支持传入loadingProps参数

fix #423

* chore: merge develop

* feat(card): card组件支持传入loadingProps参数

card组件支持传入loadingProps参数

fix #423

* refactor(card): props属性用法优化

* chore: update snapshot

* chore: update snapshot

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>

src/card/_example/custom-loading-props.vue

@@ -0,0 +1,20 @@
+<template>
+  <t-card bordered :title="title" :loading="isLoading" :style="{ width: '400px' }" :loading-props="customProps">
+    {{ infoMessage }}
+  </t-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '自定义loadingProps Card',
+      isLoading: true,
+      customProps: {
+        text: 'TDesign努力加载中...',
+      },
+      infoMessage: '卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。',
+    };
+  },
+};
+</script>

src/card/card.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Card Props
 
 name | type | default | description | required
@@ -17,9 +18,10 @@ header | String / Slot / Function | - | Typescript：`string \| TNode`。[see mo
 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/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/tree/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 | String / Slot / Function | - | card subtitle。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-theme | String | normal | options：normal/poster1/poster2 | 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/blob/develop/src/common.ts) | N

src/card/card.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Card Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -17,6 +18,7 @@ header | String / Slot / Function | - | 卡片顶部内容，优先级高于其
 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/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
 size | String | medium | 尺寸。可选项：medium/small | N
 status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N

src/card/card.tsx

@@ -134,16 +134,7 @@ export default defineComponent({
     },
   },
   render() {
-    if (this.loading) {
-      return renderTNodeJSX(this, 'loading', {
-        defaultNode: (
-          <t-loading>
-            <div class={this.baseCls}></div>
-          </t-loading>
-        ),
-      });
-    }
-    return (
+    const content = (
       <div class={this.baseCls}>
         {this.isHeaderRender ? this.renderHeader() : null}
         {this.showCover ? this.renderCover() : null}
@@ -156,5 +147,12 @@ export default defineComponent({
         )}
       </div>
     );
+
+    if (this.loading) {
+      return renderTNodeJSX(this, 'loading', {
+        defaultNode: <t-loading props={this.loadingProps}>{content}</t-loading>,
+      });
+    }
+    return content;
   },
 });

src/card/props.ts

@@ -54,6 +54,10 @@ export default {
     type: [Boolean, Function] as PropType<TdCardProps['loading']>,
     default: false,
   },
+  /** 透传加载组件(Loading)全部属性 */
+  loadingProps: {
+    type: Object as PropType<TdCardProps['loadingProps']>,
+  },
   /** 是否显示卡片阴影，默认不显示 */
   shadow: Boolean,
   /** 尺寸 */

src/card/type.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '../loading';
 import { TNode } from '../common';
 
 export interface TdCardProps {
@@ -59,6 +60,10 @@ export interface TdCardProps {
    * @default false
    */
   loading?: boolean | TNode;
+  /**
+   * 透传加载组件(Loading)全部属性
+   */
+  loadingProps?: LoadingProps;
   /**
    * 是否显示卡片阴影，默认不显示
    * @default false

test/snap/__snapshots__/csr.test.js.snap

@@ -21208,6 +21208,67 @@ exports[`csr snapshot test > csr test ./src/card/_example/bordered-none.vue 1`]
 </div>
 `;
 
+exports[`csr snapshot test > csr test ./src/card/_example/custom-loading-props.vue 1`] = `
+<div
+  class="t-loading__parent"
+  style="width: 400px;"
+>
+  <div
+    class="t-card t-card--bordered"
+  >
+    <div
+      class="t-card__header"
+    >
+      <div
+        class="t-card__header-wrapper"
+      >
+        <div>
+          <div
+            class="t-card__title"
+          >
+            自定义loadingProps Card
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-card__body"
+    >
+       卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。 
+    </div>
+  </div>
+  <div
+    class="t-loading--center t-size-m t-loading t-loading--full t-loading__overlay"
+  >
+    <svg
+      class="t-loading__gradient t-icon-loading"
+      height="1em"
+      size="medium"
+      version="1.1"
+      viewBox="0 0 12 12"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <foreignobject
+        height="12"
+        width="12"
+        x="0"
+        y="0"
+      >
+        <div
+          class="t-loading__gradient-conic"
+        />
+      </foreignobject>
+    </svg>
+    <div
+      class="t-loading__text"
+    >
+      TDesign努力加载中...
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test ./src/card/_example/footer.vue 1`] = `
 <div
   class="t-card t-card--bordered"

test/snap/__snapshots__/ssr.test.js.snap

@@ -146,6 +146,8 @@ exports[`ssr snapshot test > renders ./src/card/_example/bordered.vue correctly
 
 exports[`ssr snapshot test > renders ./src/card/_example/bordered-none.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"demo-card\\" data-v-3afd352c><div class=\\"t-card t-card--shadow-hover\\" style=\\"width:400px;\\" data-v-3afd352c><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">标题</div></div></div><div class=\\"t-card__actions\\"><a href=\\"javascript:void(0)\\" style=\\"line-height:24px;\\" data-v-3afd352c>操作</a></div></div><div class=\\"t-card__body\\"> 仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。 </div></div></div>"`;
 
+exports[`ssr snapshot test > renders ./src/card/_example/custom-loading-props.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-loading__parent\\" style=\\"width:400px;\\"><div class=\\"t-card t-card--bordered\\"><div class=\\"t-card__header\\"><div class=\\"t-card__header-wrapper\\"><div><div class=\\"t-card__title\\">自定义loadingProps Card</div></div></div></div><div class=\\"t-card__body\\"> 卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。 </div></div><div class=\\"t-loading--center t-size-m t-loading t-loading--full t-loading__overlay\\"><svg viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\" size=\\"medium\\" class=\\"t-loading__gradient t-icon-loading\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><div class=\\"t-loading__text\\">TDesign努力加载中...</div></div></div>"`;
+
 exports[`ssr snapshot test > renders ./src/card/_example/footer.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-card t-card--bordered\\" style=\\"width:400px;\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\"></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--align-middle\\" style=\\"margin-left:0px;margin-right:0px;gap:24px;\\"><div class=\\"t-col\\" style=\\"flex:auto;padding-left:0px;padding-right:0px;display:inline-flex;justify-content:center;\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-col\\" style=\\"flex:auto;padding-left:0px;padding-right:0px;display:inline-flex;justify-content:center;\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-col\\" style=\\"flex:auto;padding-left:0px;padding-right:0px;display:inline-flex;justify-content:center;\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/card/_example/footer-actions.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px;\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\"></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-row t-row--center t-row--align-middle\\" style=\\"margin-left:0px;margin-right:0px;gap:24px;\\"><div class=\\"t-col\\" style=\\"flex:auto;padding-left:0px;padding-right:0px;display:inline-flex;justify-content:center;\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\"><path fill=\\"currentColor\\" d=\\"M10.88 1.38l1.28.22a4 4 0 013.34 3.94V8h5.32a2 2 0 011.97 2.33l-1.66 10A2 2 0 0119.15 22H7V10.8l3.88-9.42zm1.23 2.26L9 11.2V20h10.15l1.67-10H13.5V5.54a2 2 0 00-1.39-1.9zM4 10v12H2V10h2z\\"></path></svg></span></button></div><div class=\\"t-col\\" style=\\"flex:auto;padding-left:0px;padding-right:0px;display:inline-flex;justify-content:center;\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button></div><div class=\\"t-col\\" style=\\"flex:auto;padding-left:0px;padding-right:0px;display:inline-flex;justify-content:center;\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px;\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\"></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" style=\\"margin-right:8px;\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart\\"><path fill=\\"currentColor\\" d=\\"M12 3.82a6.23 6.23 0 018.51 9.09l-5.22 5.22L12 21.42l-7.28-7.28L3.5 12.9A6.23 6.23 0 0112 3.82zM15.3 15.3l3.8-3.8a4.23 4.23 0 10-5.97-5.99L12 6.63 10.88 5.5a4.23 4.23 0 10-5.98 5.98l1.23 1.23L12 18.6l3.28-3.29z\\"></path></svg></span></button><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" style=\\"margin-right:8px;\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg></span></button><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\"><path fill=\\"currentColor\\" d=\\"M16 1.04a4 4 0 11-.86 6.26l-6.28 3.63a3.98 3.98 0 010 2.14l6.28 3.63a4 4 0 11-1 1.73L7.86 14.8a4 4 0 110-5.6l6.28-3.63a4 4 0 011.85-4.53zm3.72 2.46a2 2 0 10-3.46 2 2 2 0 003.46-2zM3.07 12.53a2 2 0 103.86-1.06 2 2 0 00-3.86 1.06zM19 17.77a2 2 0 10-2 3.46 2 2 0 002-3.46z\\"></path></svg></span></button></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-card t-card--bordered\\" style=\\"width:400px;\\"><div class=\\"t-card__cover\\"><img src=\\"https://tdesign.gtimg.com/site/source/card-demo.png\\"></div><div class=\\"t-card__footer\\"><div class=\\"t-card__footer-wrapper\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-size-m t-avatar--circle\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\"><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" alt=\\"\\" class=\\"t-image t-image--fit-fill t-image--position-center\\"><div class=\\"t-image__loading\\"> </div></div></div><div class=\\"t-avatar t-size-m t-avatar--circle\\"><span style=\\"transform:;\\">Q</span></div><div class=\\"t-avatar t-size-m t-avatar--circle t-avatar__collapse\\"><span style=\\"transform:;\\">+3</span></div></div></div><div class=\\"t-card__actions\\"><button type=\\"button\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\"><span class=\\"t-button__text\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\"><path fill=\\"currentColor\\" d=\\"M10.5 3h3v3h-3V3zm0 7.5h3v3h-3v-3zm0 7.5h3v3h-3v-3z\\"></path></svg></span></button></div></div></div></div></div>"`;