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

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

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

src/card/card.en-US.md

@@ -18,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-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
+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
+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

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-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

src/card/card.tsx

@@ -59,6 +59,7 @@ export default defineComponent({
     const showCover = computed(() => props.cover || slots.cover);
     const showLoading = computed(() => props.loading || slots.loading);
     const showContent = computed(() => props.content || slots.content || props.default || slots.default);
+    const loadingProps = computed(() => props.loadingProps || {});
 
     // 是否展示头部区域
     const isHeaderRender = computed(
@@ -118,7 +119,7 @@ export default defineComponent({
       );
 
       if (showLoading.value) {
-        return renderTNodeJSX('loading') || <TLoading>{content}</TLoading>;
+        return renderTNodeJSX('loading') || <TLoading {...loadingProps.value}>{content}</TLoading>;
       }
       return content;
     };

src/card/props.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '..';
 import { TdCardProps } from './type';
 import { PropType } from 'vue';
 
@@ -52,7 +53,12 @@ export default {
   /** 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容 */
   loading: {
     type: [Boolean, Function] as PropType<TdCardProps['loading']>,
-    default: false,
+    default: false as TdCardProps['loading'],
+  },
+  /** 透传加载组件(Loading)全部属性 */
+  loadingProps: {
+    type: Object as PropType<TdCardProps['loadingProps']>,
+    default: {} 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/unit/snap/__snapshots__/csr.test.js.snap

@@ -27339,6 +27339,78 @@ 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
+          </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/unit/snap/__snapshots__/ssr.test.js.snap

@@ -154,6 +154,8 @@ exports[`ssr snapshot test > ssr test ./src/card/_example/bordered.vue 1`] = `"<
 
 exports[`ssr snapshot test > ssr test ./src/card/_example/bordered-none.vue 1`] = `"<div 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)\\" data-v-3afd352c>操作</a><!--]--></div><!----></div><!----><div class=\\"t-card__body\\"><!--[-->仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。 <!--]--></div><!----></div></div>"`;
 
+exports[`ssr snapshot test > ssr 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</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\\" style=\\"\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\" size=\\"medium\\"><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 > ssr test ./src/card/_example/footer.vue 1`] = `"<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 class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\" style=\\"\\"><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 class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\" style=\\"\\"><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 class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\" style=\\"\\"><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 > ssr test ./src/card/_example/footer-actions.vue 1`] = `"<div 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 class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-thumb-up\\" style=\\"\\"><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 class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\" style=\\"\\"><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 class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\" style=\\"\\"><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 style=\\"margin-right:8px;\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-heart\\" style=\\"\\"><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 style=\\"margin-right:8px;\\" class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chat\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M1.5 2h21v16H6.88L1.5 22.7V2zm2 2v14.3L6.12 16H20.5V4h-17z\\"></path></svg><!--]--></span></button><button class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-share\\" style=\\"\\"><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 class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\" style=\\"\\"><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-avatar--circle\\" style=\\"\\"><div class=\\"t-image__wrapper t-image__wrapper--shape-square\\" fallback referrerpolicy=\\"strict-origin-when-cross-origin\\" style=\\"\\"><!----><!----><!----><img src=\\"https://tdesign.gtimg.com/site/avatar-boy.jpg\\" class=\\"t-image t-image--fit-fill t-image--position-center\\" alt referrerpolicy=\\"strict-origin-when-cross-origin\\"><div class=\\"t-image__loading\\"><div class=\\"t-space t-space-align-center t-space-vertical\\" style=\\"gap:8px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-image\\" style=\\"font-size:24px;\\"><path fill=\\"currentColor\\" d=\\"M2 2h20v20H2V2zm2 18h13.59L9 11.41l-5 5V20zm16-.41V4H4v9.59l5-5 11 11zM15.55 7a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z\\"></path></svg></div><!----><!--]--><!--[--><div class=\\"t-space-item\\">图片加载中</div><!----><!--]--><!--]--></div></div><!----><!----></div></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"\\"><span style=\\"transform:;\\"><!--[-->Q<!--]--></span></div><div class=\\"t-avatar t-avatar--circle t-avatar__collapse\\" style=\\"\\"><span style=\\"transform:;\\"><!--[-->+3<!--]--></span></div><!--]--><!--]--><!--]--></div><!--]--></div><div class=\\"t-card__actions\\"><!--[--><!--[--><button class=\\"t-button t-button--variant-text t-button--theme-default t-button--shape-square\\" type=\\"button\\" href tabindex=\\"0\\"><span class=\\"t-button__text\\"><!--[--><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-more\\" style=\\"\\"><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>"`;