docs(skeleton): update doc

src/skeleton/_example-composition/theme.vue

@@ -1,16 +1,12 @@
 <template>
-  <t-row class="t-skeleton-demo">
-    <t-col v-for="(theme, index) in themes" :key="`theme-${index}`">
-      <section class="t-skeleton-demo-card">
-        <div class="header">
-          {{ theme.label }}
-        </div>
-        <div class="content">
-          <t-skeleton :theme="theme.value"></t-skeleton>
-        </div>
-      </section>
-    </t-col>
-  </t-row>
+  <div class="t-skeleton-demo">
+    <div v-for="(theme, index) in themes" :key="`theme-${index}`" class="t-skeleton-demo-card">
+      <div class="header">{{ theme.label }}</div>
+      <div class="content">
+        <t-skeleton :theme="theme.value"></t-skeleton>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

src/skeleton/_example/theme.vue

@@ -1,16 +1,12 @@
 <template>
-  <t-row class="t-skeleton-demo">
-    <t-col v-for="(theme, index) in themes" :key="`theme-${index}`">
-      <section class="t-skeleton-demo-card">
-        <div class="header">
-          {{ theme.label }}
-        </div>
-        <div class="content">
-          <t-skeleton :theme="theme.value"></t-skeleton>
-        </div>
-      </section>
-    </t-col>
-  </t-row>
+  <div class="t-skeleton-demo">
+    <div v-for="(theme, index) in themes" :key="`theme-${index}`" class="t-skeleton-demo-card">
+      <div class="header">{{ theme.label }}</div>
+      <div class="content">
+        <t-skeleton :theme="theme.value"></t-skeleton>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

src/skeleton/_usage/index.vue

@@ -2,7 +2,7 @@
 <template>
   <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
     <template #skeleton="{ configProps }">
-      <t-skeleton v-bind="configProps">
+      <t-skeleton v-bind="configProps" style="width: inherit" class="t-skeleton-live-demo">
         <div class="t-skeleton-demo-paragraph">
           <p>
             骨架屏组件，是指当网络较慢时，在页面真实数据加载之前，给用户展示出页面的大致结构。
@@ -32,3 +32,8 @@ function onPanelChange(panel) {
   usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
 }
 </script>
+<style>
+.t-skeleton-live-demo .t-skeleton__row {
+  justify-content: center;
+}
+</style>

src/skeleton/props.ts

@@ -2,20 +2,34 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-26 15:04:09
  * */
 
 import { TdSkeletonProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画 */
+  /** 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画 */
   animation: {
     type: String as PropType<TdSkeletonProps['animation']>,
+    default: 'none' as TdSkeletonProps['animation'],
     validator(val: TdSkeletonProps['animation']): boolean {
-      return ['gradient', 'flashed'].includes(val);
+      if (!val) return true;
+      return ['gradient', 'flashed', 'none'].includes(val);
     },
   },
+  /** 加载完成的内容 */
+  content: {
+    type: [String, Function] as PropType<TdSkeletonProps['content']>,
+  },
+  /** 加载完成的内容，同 content */
+  default: {
+    type: [String, Function] as PropType<TdSkeletonProps['default']>,
+  },
+  /** 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 */
+  delay: {
+    type: Number,
+    default: 0,
+  },
   /** 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 */
   loading: {
     type: Boolean,
@@ -28,13 +42,10 @@ export default {
   /** 快捷定义骨架图风格，有基础、头像组合等，具体参看代码示例 */
   theme: {
     type: String as PropType<TdSkeletonProps['theme']>,
+    default: 'text' as TdSkeletonProps['theme'],
     validator(val: TdSkeletonProps['theme']): boolean {
+      if (!val) return true;
       return ['text', 'avatar', 'paragraph', 'avatar-text', 'tab', 'article'].includes(val);
     },
   },
-  /** 延迟显示加载效果的事件，用于放置请求速度过快引起的家在闪烁，单位：毫秒 */
-  delay: {
-    type: Number,
-    default: 0,
-  },
 };

src/skeleton/skeleton.en-US.md

@@ -1,12 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Skeleton Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-animation | String | none | options：gradient/flashed/none | N
+animation | String | none | options: gradient/flashed/none | N
+content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 delay | Number | 0 | \- | N
 loading | Boolean | true | \- | N
-rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/skeleton/type.ts) | N
-theme | String | text | options：text/avatar/paragraph/avatar-text/tab/article | N
+rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/skeleton/type.ts) | N
+theme | String | text | options: text/avatar/paragraph/avatar-text/tab/article | N

src/skeleton/skeleton.md

@@ -1,12 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Skeleton Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
-delay | Number | 0 | 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
+content | String / Slot / Function | - | 加载完成的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 加载完成的内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
-rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/skeleton/type.ts) | N
+rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | 快捷定义骨架图风格，有基础、头像组合等，具体参看代码示例。可选项：text/avatar/paragraph/avatar-text/tab/article | N

src/skeleton/skeleton.tsx

@@ -142,7 +142,7 @@ export default mixins(classPrefixMixins).extend({
     }
 
     const children = [];
-    if (this.theme) {
+    if (this.theme && !this.rowCol) {
       children.push(this.renderRowCol(ThemeMap[this.theme]));
     }
     if (this.rowCol) {

src/skeleton/type.ts

@@ -2,38 +2,46 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-26 15:04:09
  * */
 
 import { TNode } from '../common';
 
 export interface TdSkeletonProps {
   /**
-   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画
+   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画
+   * @default none
    */
-  animation?: 'gradient' | 'flashed';
+  animation?: 'gradient' | 'flashed' | 'none';
+  /**
+   * 加载完成的内容
+   */
+  content?: string | TNode;
+  /**
+   * 加载完成的内容，同 content
+   */
+  default?: string | TNode;
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * @default 0
+   */
+  delay?: number;
   /**
    * 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容
+   * @default true
    */
   loading?: boolean;
   /**
    * 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等
-   * @default [1, 1, 1, { width: '70%' }]
    */
   rowCol?: SkeletonRowCol;
   /**
    * 快捷定义骨架图风格，有基础、头像组合等，具体参看代码示例
    * @default text
    */
   theme?: 'text' | 'avatar' | 'paragraph' | 'avatar-text' | 'tab' | 'article';
-  /**
-   * 延迟显示加载效果的事件，用于放置请求速度过快引起的家在闪烁，单位：毫秒
-   * @default 0
-   */
-  delay?: number;
 }
 
-export type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>;
+export type SkeletonRowCol = Array<number | SkeletonRowColObj | Array<SkeletonRowColObj>>;
 
 export interface SkeletonRowColObj {
   width?: string;