From 8dcfb5c29a139cefff8d6900922631db8b5e86bf Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 5 Nov 2022 21:38:15 +0800
Subject: [PATCH] fix(Skeleton): round prop not work for title (#11225)

---
 packages/vant/src/skeleton/README.md          | 23 +++++++-------
 packages/vant/src/skeleton/README.zh-CN.md    | 21 ++++++-------
 packages/vant/src/skeleton/Skeleton.tsx       |  9 ++++--
 .../{Avatar.tsx => SkeletonAvatar.tsx}        |  5 ++--
 .../skeleton/{Image.tsx => SkeletonImage.tsx} |  5 ++--
 .../{Paragraph.tsx => SkeletonParagraph.tsx}  |  0
 .../skeleton/{Title.tsx => SkeletonTitle.tsx} |  0
 packages/vant/src/skeleton/demo/index.vue     | 13 ++------
 packages/vant/src/skeleton/index.less         | 11 +++----
 packages/vant/src/skeleton/index.ts           | 30 +++++++++++--------
 .../test/__snapshots__/demo.spec.ts.snap      |  4 +--
 .../vant/src/skeleton/test/index.spec.tsx     |  2 +-
 packages/vant/src/skeleton/types.ts           |  4 +++
 13 files changed, 65 insertions(+), 62 deletions(-)
 rename packages/vant/src/skeleton/{Avatar.tsx => SkeletonAvatar.tsx} (91%)
 rename packages/vant/src/skeleton/{Image.tsx => SkeletonImage.tsx} (92%)
 rename packages/vant/src/skeleton/{Paragraph.tsx => SkeletonParagraph.tsx} (100%)
 rename packages/vant/src/skeleton/{Title.tsx => SkeletonTitle.tsx} (100%)

diff --git a/packages/vant/src/skeleton/README.md b/packages/vant/src/skeleton/README.md
index 921f07a15..df70ccda6 100644
--- a/packages/vant/src/skeleton/README.md
+++ b/packages/vant/src/skeleton/README.md
@@ -12,18 +12,18 @@ Register component globally via `app.use`, refer to [Component Registration](#/e
 import { createApp } from 'vue';
 import {
   Skeleton,
-  VanSkeletonTitle,
-  VanSkeletonImage,
-  VanSkeletonAvatar,
-  VanSkeletonParagraph,
+  SkeletonTitle,
+  SkeletonImage,
+  SkeletonAvatar,
+  SkeletonParagraph,
 } from 'vant';
 
 const app = createApp();
 app.use(Skeleton);
-app.use(VanSkeletonTitle);
-app.use(VanSkeletonImage);
-app.use(VanSkeletonAvatar);
-app.use(VanSkeletonParagraph);
+app.use(SkeletonTitle);
+app.use(SkeletonImage);
+app.use(SkeletonAvatar);
+app.use(SkeletonParagraph);
 ```
 
 ## Usage
@@ -68,14 +68,14 @@ export default {
 
 ### Custom Content
 
-Using `template` slots to display custom content.
+Using `template` slots to custom skeleton content.
 
 ```html
 <van-skeleton>
   <template #template>
-    <div class="template-slot">
+    <div :style="{ display: 'flex', width: '100%' }">
       <van-skeleton-image />
-      <div :style="{ flex: 1 }">
+      <div :style="{ flex: 1, marginLeft: '16px' }">
         <van-skeleton-paragraph row-width="60%" />
         <van-skeleton-paragraph />
         <van-skeleton-paragraph />
@@ -148,6 +148,7 @@ import type {
   SkeletonImageProps,
   SkeletonTitleProps,
   SkeletonAvatarShape,
+  SkeletonImageShape,
   SkeletonParagraphProps,
 } from 'vant';
 ```
diff --git a/packages/vant/src/skeleton/README.zh-CN.md b/packages/vant/src/skeleton/README.zh-CN.md
index d243e3726..3542072f4 100644
--- a/packages/vant/src/skeleton/README.zh-CN.md
+++ b/packages/vant/src/skeleton/README.zh-CN.md
@@ -12,18 +12,18 @@
 import { createApp } from 'vue';
 import {
   Skeleton,
-  VanSkeletonTitle,
-  VanSkeletonImage,
-  VanSkeletonAvatar,
-  VanSkeletonParagraph,
+  SkeletonTitle,
+  SkeletonImage,
+  SkeletonAvatar,
+  SkeletonParagraph,
 } from 'vant';
 
 const app = createApp();
 app.use(Skeleton);
-app.use(VanSkeletonTitle);
-app.use(VanSkeletonImage);
-app.use(VanSkeletonAvatar);
-app.use(VanSkeletonParagraph);
+app.use(SkeletonTitle);
+app.use(SkeletonImage);
+app.use(SkeletonAvatar);
+app.use(SkeletonParagraph);
 ```
 
 ## 代码演示
@@ -79,9 +79,9 @@ export default {
 ```html
 <van-skeleton>
   <template #template>
-    <div class="template-slot">
+    <div :style="{ display: 'flex', width: '100%' }">
       <van-skeleton-image />
-      <div :style="{ flex: 1 }">
+      <div :style="{ flex: 1, marginLeft: '16px' }">
         <van-skeleton-paragraph row-width="60%" />
         <van-skeleton-paragraph />
         <van-skeleton-paragraph />
@@ -153,6 +153,7 @@ import type {
   SkeletonProps,
   SkeletonImageProps,
   SkeletonTitleProps,
+  SkeletonImageShape,
   SkeletonAvatarShape,
   SkeletonParagraphProps,
 } from 'vant';
diff --git a/packages/vant/src/skeleton/Skeleton.tsx b/packages/vant/src/skeleton/Skeleton.tsx
index 55368c00b..39d1f1f53 100644
--- a/packages/vant/src/skeleton/Skeleton.tsx
+++ b/packages/vant/src/skeleton/Skeleton.tsx
@@ -12,9 +12,12 @@ import {
 } from '../utils';
 
 // Components
-import SkeletonTitle from './Title';
-import SkeletonAvatar, { type SkeletonAvatarShape } from './Avatar';
-import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from './Paragraph';
+import SkeletonTitle from './SkeletonTitle';
+import SkeletonAvatar from './SkeletonAvatar';
+import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from './SkeletonParagraph';
+
+// Types
+import type { SkeletonAvatarShape } from './types';
 
 const [name, bem] = createNamespace('skeleton');
 const DEFAULT_LAST_ROW_WIDTH = '60%';
diff --git a/packages/vant/src/skeleton/Avatar.tsx b/packages/vant/src/skeleton/SkeletonAvatar.tsx
similarity index 91%
rename from packages/vant/src/skeleton/Avatar.tsx
rename to packages/vant/src/skeleton/SkeletonAvatar.tsx
index 3c489d017..3f1f0a23f 100644
--- a/packages/vant/src/skeleton/Avatar.tsx
+++ b/packages/vant/src/skeleton/SkeletonAvatar.tsx
@@ -8,9 +8,10 @@ import {
   createNamespace,
 } from '../utils';
 
-const [name, bem] = createNamespace('skeleton-avatar');
+// Types
+import type { SkeletonAvatarShape } from './types';
 
-export type SkeletonAvatarShape = 'square' | 'round';
+const [name, bem] = createNamespace('skeleton-avatar');
 
 export const skeletonAvatarProps = {
   avatarSize: numericProp,
diff --git a/packages/vant/src/skeleton/Image.tsx b/packages/vant/src/skeleton/SkeletonImage.tsx
similarity index 92%
rename from packages/vant/src/skeleton/Image.tsx
rename to packages/vant/src/skeleton/SkeletonImage.tsx
index 237159dfb..bab553dae 100644
--- a/packages/vant/src/skeleton/Image.tsx
+++ b/packages/vant/src/skeleton/SkeletonImage.tsx
@@ -7,12 +7,13 @@ import {
   createNamespace,
 } from '../utils';
 
+// Types
+import type { SkeletonImageShape } from './types';
+
 import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('skeleton-image');
 
-export type SkeletonImageShape = 'square' | 'round';
-
 export const skeletonImageProps = {
   imageSize: numericProp,
   imageShape: makeStringProp<SkeletonImageShape>('square'),
diff --git a/packages/vant/src/skeleton/Paragraph.tsx b/packages/vant/src/skeleton/SkeletonParagraph.tsx
similarity index 100%
rename from packages/vant/src/skeleton/Paragraph.tsx
rename to packages/vant/src/skeleton/SkeletonParagraph.tsx
diff --git a/packages/vant/src/skeleton/Title.tsx b/packages/vant/src/skeleton/SkeletonTitle.tsx
similarity index 100%
rename from packages/vant/src/skeleton/Title.tsx
rename to packages/vant/src/skeleton/SkeletonTitle.tsx
diff --git a/packages/vant/src/skeleton/demo/index.vue b/packages/vant/src/skeleton/demo/index.vue
index 5b9643c7e..5d4083861 100644
--- a/packages/vant/src/skeleton/demo/index.vue
+++ b/packages/vant/src/skeleton/demo/index.vue
@@ -49,9 +49,9 @@ const show = ref(false);
   <demo-block :title="t('customContent')">
     <van-skeleton>
       <template #template>
-        <div class="template-slot">
+        <div :style="{ display: 'flex', width: '100%' }">
           <van-skeleton-image />
-          <div :style="{ flex: 1 }">
+          <div :style="{ flex: 1, marginLeft: '16px' }">
             <van-skeleton-paragraph row-width="60%" />
             <van-skeleton-paragraph />
             <van-skeleton-paragraph />
@@ -98,14 +98,5 @@ const show = ref(false);
       margin-right: var(--van-padding-md);
     }
   }
-
-  .template-slot {
-    display: flex;
-    width: 100%;
-
-    .van-skeleton-image {
-      margin-right: var(--van-padding-md);
-    }
-  }
 }
 </style>
diff --git a/packages/vant/src/skeleton/index.less b/packages/vant/src/skeleton/index.less
index 3a7e9bc3e..b64c87890 100644
--- a/packages/vant/src/skeleton/index.less
+++ b/packages/vant/src/skeleton/index.less
@@ -38,6 +38,10 @@
   &-title {
     height: var(--van-skeleton-paragraph-height);
     background: var(--van-skeleton-paragraph-background);
+
+    &--round {
+      border-radius: var(--van-radius-max);
+    }
   }
 
   &-title {
@@ -60,13 +64,6 @@
       infinite;
   }
 
-  &--round {
-    .van-skeleton-paragraph,
-    .van-skeleton-title {
-      border-radius: var(--van-radius-max);
-    }
-  }
-
   &-image {
     display: flex;
     width: var(--van-skeleton-image-size);
diff --git a/packages/vant/src/skeleton/index.ts b/packages/vant/src/skeleton/index.ts
index 644ab7c6e..288ba64df 100644
--- a/packages/vant/src/skeleton/index.ts
+++ b/packages/vant/src/skeleton/index.ts
@@ -1,8 +1,8 @@
 import _Skeleton from './Skeleton';
-import _SkeletonImage from './Image';
-import _SkeletonTitle from './Title';
-import _SkeletonAvatar from './Avatar';
-import _SkeletonParagraph from './Paragraph';
+import _SkeletonImage from './SkeletonImage';
+import _SkeletonTitle from './SkeletonTitle';
+import _SkeletonAvatar from './SkeletonAvatar';
+import _SkeletonParagraph from './SkeletonParagraph';
 
 import { withInstall } from '../utils';
 
@@ -19,22 +19,26 @@ export { skeletonProps } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
 
 // SkeletonImage
-export { skeletonImageProps } from './Image';
-export type { SkeletonImageProps, SkeletonImageShape } from './Image';
+export { skeletonImageProps } from './SkeletonImage';
+export type { SkeletonImageProps } from './SkeletonImage';
 
 // SkeletonAvatar
-export { skeletonAvatarProps } from './Avatar';
-export type { SkeletonAvatarProps, SkeletonAvatarShape } from './Avatar';
+export { skeletonAvatarProps } from './SkeletonAvatar';
+export type { SkeletonAvatarProps } from './SkeletonAvatar';
 
 // SkeletonParagraph
-export { skeletonParagraphProps } from './Paragraph';
-export type { SkeletonParagraphProps } from './Paragraph';
+export { skeletonParagraphProps } from './SkeletonParagraph';
+export type { SkeletonParagraphProps } from './SkeletonParagraph';
 
 // SkeletonTitle
-export { skeletonTitleProps } from './Title';
-export type { SkeletonTitleProps } from './Title';
+export { skeletonTitleProps } from './SkeletonTitle';
+export type { SkeletonTitleProps } from './SkeletonTitle';
 
-export type { SkeletonThemeVars } from './types';
+export type {
+  SkeletonThemeVars,
+  SkeletonImageShape,
+  SkeletonAvatarShape,
+} from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {
diff --git a/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap
index 0e57be29d..9299850f0 100644
--- a/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap
@@ -75,12 +75,12 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-skeleton van-skeleton--animate">
-    <div class="template-slot">
+    <div style="display: flex; width: 100%;">
       <div class="van-skeleton-image van-skeleton-image--square">
         <i class="van-badge__wrapper van-icon van-icon-photo van-skeleton-image__icon">
         </i>
       </div>
-      <div style="flex: 1;">
+      <div style="flex: 1; margin-left: 16px;">
         <div class="van-skeleton-paragraph"
              style="width: 60%;"
         >
diff --git a/packages/vant/src/skeleton/test/index.spec.tsx b/packages/vant/src/skeleton/test/index.spec.tsx
index 0e2788b72..5b490aa9c 100644
--- a/packages/vant/src/skeleton/test/index.spec.tsx
+++ b/packages/vant/src/skeleton/test/index.spec.tsx
@@ -97,7 +97,7 @@ test('should skeleton image works with imageSize prop', () => {
   expect(dom.style.height).toBe('20rem');
 });
 
-test('should skeleton image worsk with imageShape prop', () => {
+test('should skeleton image works with imageShape prop', () => {
   const wrapper = mount(VanSkeletonImage, {
     props: {
       imageShape: 'round',
diff --git a/packages/vant/src/skeleton/types.ts b/packages/vant/src/skeleton/types.ts
index 373302dab..dbfce5193 100644
--- a/packages/vant/src/skeleton/types.ts
+++ b/packages/vant/src/skeleton/types.ts
@@ -1,3 +1,7 @@
+export type SkeletonAvatarShape = 'square' | 'round';
+
+export type SkeletonImageShape = 'square' | 'round';
+
 export type SkeletonThemeVars = {
   skeletonParagraphHeight?: string;
   skeletonParagraphBackground?: string;