fix(Skeleton): can not register skeleton image component (#11470)

* fix(Skeleton): can not register skeleton image component by default #11469

* chore(skeleton-avatar): migrate skeleton avatar to new folder

* chore: remove duplicate types

* chore(skeleton-image): migrate skeleton image to new folder

* chore(skeleton-paragraph): migrate skeleton paragraph to new folder

* chore(skeleton-title): migrate skeleton title to new folder

packages/vant/src/skeleton-avatar/README.md

@@ -0,0 +1,3 @@
+# SkeletonAvatar
+
+Please refer to [Skeleton docs](/skeleton#skeletonavatar-props)

packages/vant/src/skeleton-avatar/SkeletonAvatar.tsx

@@ -8,8 +8,7 @@ import {
   createNamespace,
 } from '../utils';
 
-// Types
-import type { SkeletonAvatarShape } from './types';
+export type SkeletonAvatarShape = 'square' | 'round';
 
 const [name, bem] = createNamespace('skeleton-avatar');
 

packages/vant/src/skeleton-avatar/index.less

@@ -0,0 +1,22 @@
+:root {
+  --van-skeleton-avatar-size: 32px;
+  --van-skeleton-avatar-background: var(--van-active-color);
+}
+
+.van-skeleton {
+  &-avatar {
+    flex-shrink: 0;
+    width: var(--van-skeleton-avatar-size);
+    height: var(--van-skeleton-avatar-size);
+    margin-right: var(--van-padding-md);
+    background: var(--van-skeleton-avatar-background);
+
+    &--round {
+      border-radius: var(--van-radius-max);
+    }
+  }
+
+  &-avatar + &__content {
+    padding-top: var(--van-padding-xs);
+  }
+}

packages/vant/src/skeleton-avatar/index.ts

@@ -0,0 +1,17 @@
+import { withInstall } from '../utils';
+import _SkeletonAvatar from './SkeletonAvatar';
+
+export const SkeletonAvatar = withInstall(_SkeletonAvatar);
+export default SkeletonAvatar;
+
+export { skeletonAvatarProps } from './SkeletonAvatar';
+export type {
+  SkeletonAvatarProps,
+  SkeletonAvatarShape,
+} from './SkeletonAvatar';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanSkeletonAvatar: typeof SkeletonAvatar;
+  }
+}

packages/vant/src/skeleton-avatar/test/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should skeleton avatar render correctly when change props 1`] = `
+<div class="van-skeleton-avatar van-skeleton-avatar--square"
+     style="width: 50px; height: 50px;"
+>
+</div>
+`;
+
+exports[`should skeleton avatar render correctly without props 1`] = `
+<div class="van-skeleton-avatar van-skeleton-avatar--round">
+</div>
+`;

packages/vant/src/skeleton-avatar/test/index.spec.tsx

@@ -0,0 +1,19 @@
+import { mount } from '../../../test';
+import { SkeletonAvatar } from '..';
+
+test('should skeleton avatar render correctly without props', () => {
+  const wrapper = mount(SkeletonAvatar);
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should skeleton avatar render correctly when change props', () => {
+  const wrapper = mount(SkeletonAvatar, {
+    props: {
+      avatarSize: 50,
+      avatarShape: 'square',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});

packages/vant/src/skeleton-image/README.md

@@ -0,0 +1,3 @@
+# SkeletonImage
+
+Please refer to [Skeleton docs](/skeleton#skeletonimage-props)

packages/vant/src/skeleton-image/SkeletonImage.tsx

@@ -7,13 +7,12 @@ 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-image/index.less

@@ -0,0 +1,26 @@
+:root {
+  --van-skeleton-image-size: 96px;
+  --van-skeleton-image-radius: 24px;
+}
+
+.van-skeleton {
+  &-image {
+    display: flex;
+    width: var(--van-skeleton-image-size);
+    height: var(--van-skeleton-image-size);
+    align-items: center;
+    justify-content: center;
+    background: var(--van-active-color);
+
+    &--round {
+      border-radius: var(--van-skeleton-image-radius);
+    }
+
+    &__icon {
+      width: calc(var(--van-skeleton-image-size) / 2);
+      height: calc(var(--van-skeleton-image-size) / 2);
+      font-size: calc(var(--van-skeleton-image-size) / 2);
+      color: var(--van-gray-5);
+    }
+  }
+}

packages/vant/src/skeleton-image/index.ts

@@ -0,0 +1,14 @@
+import _SkeletonImage from './SkeletonImage';
+import { withInstall } from '../utils';
+
+export const SkeletonImage = withInstall(_SkeletonImage);
+export default SkeletonImage;
+
+export { skeletonImageProps } from './SkeletonImage';
+export type { SkeletonImageProps, SkeletonImageShape } from './SkeletonImage';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanSkeletonImage: typeof SkeletonImage;
+  }
+}

packages/vant/src/skeleton-image/test/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should skeleton image render correctly 1`] = `
+<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>
+`;

packages/vant/src/skeleton-image/test/index.spec.tsx

@@ -0,0 +1,30 @@
+import { mount } from '../../../test';
+import { SkeletonImage } from '..';
+
+test('should skeleton image render correctly', () => {
+  const wrapper = mount(SkeletonImage);
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should skeleton image works with imageSize prop', () => {
+  const wrapper = mount(SkeletonImage, {
+    props: {
+      imageSize: '20rem',
+    },
+  });
+  const dom = wrapper.find('.van-skeleton-image');
+
+  expect(dom.style.width).toBe('20rem');
+  expect(dom.style.height).toBe('20rem');
+});
+
+test('should skeleton image works with imageShape prop', () => {
+  const wrapper = mount(SkeletonImage, {
+    props: {
+      imageShape: 'round',
+    },
+  });
+
+  expect(wrapper.find('.van-skeleton-image--round')).toBeTruthy();
+});

packages/vant/src/skeleton-paragraph/README.md

@@ -0,0 +1,3 @@
+# SkeletonParagraph
+
+Please refer to [Skeleton docs](/skeleton#skeletonparagraph-props)

packages/vant/src/skeleton-paragraph/index.less

@@ -0,0 +1,20 @@
+:root {
+  --van-skeleton-paragraph-height: 16px;
+  --van-skeleton-paragraph-background: var(--van-active-color);
+  --van-skeleton-paragraph-margin-top: var(--van-padding-sm);
+}
+
+.van-skeleton {
+  &-paragraph {
+    height: var(--van-skeleton-paragraph-height);
+    background: var(--van-skeleton-paragraph-background);
+
+    &--round {
+      border-radius: var(--van-radius-max);
+    }
+
+    &:not(:first-child) {
+      margin-top: var(--van-skeleton-paragraph-margin-top);
+    }
+  }
+}

packages/vant/src/skeleton-paragraph/index.ts

@@ -0,0 +1,14 @@
+import _SkeletonParagraph from './SkeletonParagraph';
+import { withInstall } from '../utils';
+
+export const SkeletonParagraph = withInstall(_SkeletonParagraph);
+export default SkeletonParagraph;
+
+export { skeletonParagraphProps, DEFAULT_ROW_WIDTH } from './SkeletonParagraph';
+export type { SkeletonParagraphProps } from './SkeletonParagraph';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanSkeletonParagraph: typeof SkeletonParagraph;
+  }
+}

packages/vant/src/skeleton-paragraph/test/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should skeleton paragraph works 1`] = `
+<div class="van-skeleton-paragraph"
+     style="width: 100%;"
+>
+</div>
+`;
+
+exports[`should skeleton paragraph works with props 1`] = `
+<div class="van-skeleton-paragraph van-skeleton-paragraph--round"
+     style="width: 200rem;"
+>
+</div>
+`;

packages/vant/src/skeleton-paragraph/test/index.spec.tsx

@@ -0,0 +1,19 @@
+import { mount } from '../../../test';
+import { SkeletonParagraph } from '..';
+
+test('should skeleton paragraph works', () => {
+  const wrapper = mount(SkeletonParagraph);
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should skeleton paragraph works with props', () => {
+  const wrapper = mount(SkeletonParagraph, {
+    props: {
+      round: true,
+      rowWidth: '200rem',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});

packages/vant/src/skeleton-title/README.md

@@ -0,0 +1,3 @@
+# SkeletonParagraph
+
+Please refer to [Skeleton docs](/skeleton#skeletontitle-props)

packages/vant/src/skeleton-title/index.less

@@ -0,0 +1,23 @@
+:root {
+  --van-skeleton-title-width: 40%;
+}
+
+.van-skeleton {
+  &-title {
+    height: var(--van-skeleton-paragraph-height);
+    background: var(--van-skeleton-paragraph-background);
+
+    &--round {
+      border-radius: var(--van-radius-max);
+    }
+  }
+
+  &-title {
+    width: var(--van-skeleton-title-width);
+    margin: 0;
+  }
+
+  &-title + &-paragraph {
+    margin-top: 20px;
+  }
+}

packages/vant/src/skeleton-title/index.ts

@@ -0,0 +1,14 @@
+import _SkeletonTitle from './SkeletonTitle';
+import { withInstall } from '../utils';
+
+export const SkeletonTitle = withInstall(_SkeletonTitle);
+export default SkeletonTitle;
+
+export { skeletonTitleProps } from './SkeletonTitle';
+export type { SkeletonTitleProps } from './SkeletonTitle';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanSkeletonTitle: typeof SkeletonTitle;
+  }
+}

packages/vant/src/skeleton-title/test/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should skeleton title works 1`] = `
+<h3 class="van-skeleton-title">
+</h3>
+`;
+
+exports[`should skeleton title works with props 1`] = `
+<h3 class="van-skeleton-title van-skeleton-title--round"
+    style="width: 200rem;"
+>
+</h3>
+`;

packages/vant/src/skeleton-title/test/index.spec.tsx

@@ -0,0 +1,19 @@
+import { mount } from '../../../test';
+import { SkeletonTitle } from '..';
+
+test('should skeleton title works', () => {
+  const wrapper = mount(SkeletonTitle);
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should skeleton title works with props', () => {
+  const wrapper = mount(SkeletonTitle, {
+    props: {
+      round: true,
+      titleWidth: '200rem',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});

packages/vant/src/skeleton/Skeleton.tsx

@@ -12,12 +12,12 @@ import {
 } from '../utils';
 
 // Components
-import SkeletonTitle from './SkeletonTitle';
-import SkeletonAvatar from './SkeletonAvatar';
-import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from './SkeletonParagraph';
+import SkeletonTitle from '../skeleton-title';
+import SkeletonAvatar from '../skeleton-avatar';
+import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from '../skeleton-paragraph';
 
 // Types
-import type { SkeletonAvatarShape } from './types';
+import type { SkeletonAvatarShape } from '../skeleton-avatar';
 
 const [name, bem] = createNamespace('skeleton');
 const DEFAULT_LAST_ROW_WIDTH = '60%';

packages/vant/src/skeleton/demo/index.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import VanSkeleton, {
-  SkeletonImage as VanSkeletonImage,
-  SkeletonParagraph as VanSkeletonParagraph,
-} from '..';
+import VanSkeleton from '..';
+import { SkeletonImage as VanSkeletonImage } from '../../skeleton-image';
+import { SkeletonParagraph as VanSkeletonParagraph } from '../../skeleton-paragraph';
 import VanSwitch from '../../switch';
 import { ref } from 'vue';
 import { cdnURL, useTranslate } from '../../../docs/site';

packages/vant/src/skeleton/index.less

@@ -1,12 +1,4 @@
 :root {
-  --van-skeleton-paragraph-height: 16px;
-  --van-skeleton-paragraph-background: var(--van-active-color);
-  --van-skeleton-paragraph-margin-top: var(--van-padding-sm);
-  --van-skeleton-title-width: 40%;
-  --van-skeleton-avatar-size: 32px;
-  --van-skeleton-avatar-background: var(--van-active-color);
-  --van-skeleton-image-size: 96px;
-  --van-skeleton-image-radius: 24px;
   --van-skeleton-duration: 1.2s;
 }
 
@@ -14,75 +6,14 @@
   display: flex;
   padding: 0 var(--van-padding-md);
 
-  &-avatar {
-    flex-shrink: 0;
-    width: var(--van-skeleton-avatar-size);
-    height: var(--van-skeleton-avatar-size);
-    margin-right: var(--van-padding-md);
-    background: var(--van-skeleton-avatar-background);
-
-    &--round {
-      border-radius: var(--van-radius-max);
-    }
-  }
-
   &__content {
     width: 100%;
   }
 
-  &-avatar + &__content {
-    padding-top: var(--van-padding-xs);
-  }
-
-  &-paragraph,
-  &-title {
-    height: var(--van-skeleton-paragraph-height);
-    background: var(--van-skeleton-paragraph-background);
-
-    &--round {
-      border-radius: var(--van-radius-max);
-    }
-  }
-
-  &-title {
-    width: var(--van-skeleton-title-width);
-    margin: 0;
-  }
-
-  &-paragraph {
-    &:not(:first-child) {
-      margin-top: var(--van-skeleton-paragraph-margin-top);
-    }
-  }
-
-  &-title + &-paragraph {
-    margin-top: 20px;
-  }
-
   &--animate {
     animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out
       infinite;
   }
-
-  &-image {
-    display: flex;
-    width: var(--van-skeleton-image-size);
-    height: var(--van-skeleton-image-size);
-    align-items: center;
-    justify-content: center;
-    background: var(--van-active-color);
-
-    &--round {
-      border-radius: var(--van-skeleton-image-radius);
-    }
-
-    &__icon {
-      width: calc(var(--van-skeleton-image-size) / 2);
-      height: calc(var(--van-skeleton-image-size) / 2);
-      font-size: calc(var(--van-skeleton-image-size) / 2);
-      color: var(--van-gray-5);
-    }
-  }
 }
 
 @keyframes van-skeleton-blink {

packages/vant/src/skeleton/index.ts

@@ -1,15 +1,6 @@
 import _Skeleton from './Skeleton';
-import _SkeletonImage from './SkeletonImage';
-import _SkeletonTitle from './SkeletonTitle';
-import _SkeletonAvatar from './SkeletonAvatar';
-import _SkeletonParagraph from './SkeletonParagraph';
-
 import { withInstall } from '../utils';
 
-export const SkeletonImage = withInstall(_SkeletonImage);
-export const SkeletonTitle = withInstall(_SkeletonTitle);
-export const SkeletonAvatar = withInstall(_SkeletonAvatar);
-export const SkeletonParagraph = withInstall(_SkeletonParagraph);
 export const Skeleton = withInstall(_Skeleton);
 
 export default Skeleton;
@@ -18,34 +9,10 @@ export default Skeleton;
 export { skeletonProps } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
 
-// SkeletonImage
-export { skeletonImageProps } from './SkeletonImage';
-export type { SkeletonImageProps } from './SkeletonImage';
-
-// SkeletonAvatar
-export { skeletonAvatarProps } from './SkeletonAvatar';
-export type { SkeletonAvatarProps } from './SkeletonAvatar';
-
-// SkeletonParagraph
-export { skeletonParagraphProps } from './SkeletonParagraph';
-export type { SkeletonParagraphProps } from './SkeletonParagraph';
-
-// SkeletonTitle
-export { skeletonTitleProps } from './SkeletonTitle';
-export type { SkeletonTitleProps } from './SkeletonTitle';
-
-export type {
-  SkeletonThemeVars,
-  SkeletonImageShape,
-  SkeletonAvatarShape,
-} from './types';
+export type { SkeletonThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {
     VanSkeleton: typeof Skeleton;
-    VanSkeletonImage: typeof SkeletonImage;
-    VanSkeletonTitle: typeof SkeletonTitle;
-    VanSkeletonAvatar: typeof SkeletonAvatar;
-    VanSkeletonParagraph: typeof SkeletonParagraph;
   }
 }

packages/vant/src/skeleton/test/__snapshots__/index.spec.tsx.snap

@@ -43,10 +43,3 @@ exports[`should render with row width array correctly 1`] = `
   </div>
 </div>
 `;
-
-exports[`should skeleton image render correctly 1`] = `
-<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>
-`;

packages/vant/src/skeleton/test/index.spec.tsx

@@ -1,5 +1,5 @@
 import { mount } from '../../../test';
-import { Skeleton, SkeletonImage } from '..';
+import { Skeleton } from '..';
 
 test('should render with row width array correctly', () => {
   const wrapper = mount(Skeleton, {
@@ -78,31 +78,3 @@ test('should allow to disable animation', async () => {
   await wrapper.setProps({ animate: false });
   expect(wrapper.find('.van-skeleton--animate').exists()).toBeFalsy();
 });
-
-test('should skeleton image render correctly', () => {
-  const wrapper = mount(SkeletonImage);
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('should skeleton image works with imageSize prop', () => {
-  const wrapper = mount(SkeletonImage, {
-    props: {
-      imageSize: '20rem',
-    },
-  });
-  const dom = wrapper.find('.van-skeleton-image');
-
-  expect(dom.style.width).toBe('20rem');
-  expect(dom.style.height).toBe('20rem');
-});
-
-test('should skeleton image works with imageShape prop', () => {
-  const wrapper = mount(SkeletonImage, {
-    props: {
-      imageShape: 'round',
-    },
-  });
-
-  expect(wrapper.find('.van-skeleton-image--round')).toBeTruthy();
-});

packages/vant/src/skeleton/types.ts

@@ -1,7 +1,3 @@
-export type SkeletonAvatarShape = 'square' | 'round';
-
-export type SkeletonImageShape = 'square' | 'round';
-
 export type SkeletonThemeVars = {
   skeletonParagraphHeight?: string;
   skeletonParagraphBackground?: string;