fix(Skeleton): round prop not work for title (#11225)

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';
 ```

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

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%';

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,

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'),

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>

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

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 {

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%;"
         >

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

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;