package.json

@@ -24,6 +24,7 @@
     "eslint": "^8.31.0",
     "husky": "^8.0.1",
     "nano-staged": "^0.8.0",
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2"
   }
 }

packages/create-vant-cli-app/generators/vue3/.gitignore.tpl

@@ -15,5 +15,5 @@ test/coverage
 es
 lib
 dist
-**/site-dist
+site
 changelog.generated.md

packages/create-vant-cli-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vant-cli-app",
-  "version": "2.1.1",
+  "version": "2.1.0",
   "description": "Create Vant CLI App",
   "main": "lib/index.js",
   "bin": {
@@ -33,7 +33,6 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "release-it": "^15.4.1",
-    "rimraf": "^4.0.4",
     "typescript": "^4.8.2"
   },
   "dependencies": {

packages/vant-area-data/package.json

@@ -38,7 +38,6 @@
   "devDependencies": {
     "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
-    "rimraf": "^4.0.4",
     "typescript": "^4.8.2"
   },
   "release-it": {

packages/vant-cli/package.json

@@ -44,7 +44,6 @@
     "@types/less": "^3.0.3",
     "@types/lodash": "^4.14.191",
     "@types/markdown-it": "^12.2.3",
-    "rimraf": "^4.0.4",
     "vue": "^3.2.45"
   },
   "dependencies": {

packages/vant-compat/package.json

@@ -41,7 +41,6 @@
     "vue": "^3.2.45",
     "esbuild": "^0.16.10",
     "release-it": "^15.1.1",
-    "rimraf": "^4.0.4",
     "typescript": "^4.7.4"
   },
   "release-it": {

packages/vant-popperjs/package.json

@@ -40,7 +40,6 @@
     "@popperjs/core": "^2.11.6",
     "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
-    "rimraf": "^4.0.4",
     "typescript": "^4.8.2"
   },
   "release-it": {

packages/vant-use/package.json

@@ -39,7 +39,6 @@
   "devDependencies": {
     "esbuild": "^0.16.10",
     "release-it": "^15.4.1",
-    "rimraf": "^4.0.4",
     "typescript": "^4.8.2",
     "vue": "^3.2.45"
   },

packages/vant/src/config-provider/README.md

@@ -262,6 +262,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 --van-text-color: var(--van-gray-8);
 --van-text-color-2: var(--van-gray-6);
 --van-text-color-3: var(--van-gray-5);
+--van-link-color: #576b95;
 --van-active-color: var(--van-gray-2);
 --van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;

packages/vant/src/config-provider/README.zh-CN.md

@@ -262,6 +262,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 --van-text-color: var(--van-gray-8);
 --van-text-color-2: var(--van-gray-6);
 --van-text-color-3: var(--van-gray-5);
+--van-link-color: #576b95;
 --van-active-color: var(--van-gray-2);
 --van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;

packages/vant/src/number-keyboard/README.md

@@ -231,7 +231,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-number-keyboard-title-height | _34px_ | - |
 | --van-number-keyboard-title-font-size | _var(--van-font-size-lg)_ | - |
 | --van-number-keyboard-close-padding | _0 var(--van-padding-md)_ | - |
-| --van-number-keyboard-close-color | _var(--van-primary-color)_ | - |
+| --van-number-keyboard-close-color | _var(--van-link-color)_ | - |
 | --van-number-keyboard-close-font-size | _var(--van-font-size-md)_ | - |
 | --van-number-keyboard-button-text-color | _var(--van-white)_ | - |
 | --van-number-keyboard-button-background | _var(--van-primary-color)_ | - |

packages/vant/src/number-keyboard/README.zh-CN.md

@@ -238,7 +238,7 @@ import type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';
 | --van-number-keyboard-title-height      | _34px_                     | -    |
 | --van-number-keyboard-title-font-size   | _var(--van-font-size-lg)_  | -    |
 | --van-number-keyboard-close-padding     | _0 var(--van-padding-md)_  | -    |
-| --van-number-keyboard-close-color       | _var(--van-primary-color)_ | -    |
+| --van-number-keyboard-close-color       | _var(--van-link-color)_    | -    |
 | --van-number-keyboard-close-font-size   | _var(--van-font-size-md)_  | -    |
 | --van-number-keyboard-button-text-color | _var(--van-white)_         | -    |
 | --van-number-keyboard-button-background | _var(--van-primary-color)_ | -    |

packages/vant/src/number-keyboard/index.less

@@ -9,7 +9,7 @@
   --van-number-keyboard-title-height: 34px;
   --van-number-keyboard-title-font-size: var(--van-font-size-lg);
   --van-number-keyboard-close-padding: 0 var(--van-padding-md);
-  --van-number-keyboard-close-color: var(--van-primary-color);
+  --van-number-keyboard-close-color: var(--van-link-color);
   --van-number-keyboard-close-font-size: var(--van-font-size-md);
   --van-number-keyboard-button-text-color: var(--van-white);
   --van-number-keyboard-button-background: var(--van-primary-color);

packages/vant/src/picker/README.md

@@ -434,7 +434,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-picker-title-line-height | _var(--van-line-height-md)_ | - |
 | --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
 | --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
-| --van-picker-confirm-action-color | _var(--van-primary-color)_ | - |
+| --van-picker-confirm-action-color | _var(--van-link-color)_ | - |
 | --van-picker-cancel-action-color | _var(--van-text-color-2)_ | - |
 | --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
 | --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |

packages/vant/src/picker/README.zh-CN.md

@@ -455,7 +455,7 @@ pickerRef.value?.confirm();
 | --van-picker-title-line-height       | _var(--van-line-height-md)_ | -    |
 | --van-picker-action-padding          | _0 var(--van-padding-md)_   | -    |
 | --van-picker-action-font-size        | _var(--van-font-size-md)_   | -    |
-| --van-picker-confirm-action-color    | _var(--van-primary-color)_  | -    |
+| --van-picker-confirm-action-color    | _var(--van-link-color)_     | -    |
 | --van-picker-cancel-action-color     | _var(--van-text-color-2)_   | -    |
 | --van-picker-option-padding          | _0 var(--van-padding-base)_ | -    |
 | --van-picker-option-font-size        | _var(--van-font-size-lg)_   | -    |

packages/vant/src/picker/index.less

@@ -5,7 +5,7 @@
   --van-picker-title-line-height: var(--van-line-height-md);
   --van-picker-action-padding: 0 var(--van-padding-md);
   --van-picker-action-font-size: var(--van-font-size-md);
-  --van-picker-confirm-action-color: var(--van-primary-color);
+  --van-picker-confirm-action-color: var(--van-link-color);
   --van-picker-cancel-action-color: var(--van-text-color-2);
   --van-picker-option-font-size: var(--van-font-size-lg);
   --van-picker-option-padding: 0 var(--van-padding-base);

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

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

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

@@ -1,22 +0,0 @@
-: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

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-: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

@@ -1,14 +0,0 @@
-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

@@ -1,8 +0,0 @@
-// 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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,20 +0,0 @@
-: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

@@ -1,14 +0,0 @@
-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

@@ -1,15 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-: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

@@ -1,14 +0,0 @@
-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

@@ -1,13 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-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 '../skeleton-title';
-import SkeletonAvatar from '../skeleton-avatar';
-import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from '../skeleton-paragraph';
+import SkeletonTitle from './SkeletonTitle';
+import SkeletonAvatar from './SkeletonAvatar';
+import SkeletonParagraph, { DEFAULT_ROW_WIDTH } from './SkeletonParagraph';
 
 // Types
-import type { SkeletonAvatarShape } from '../skeleton-avatar';
+import type { SkeletonAvatarShape } from './types';
 
 const [name, bem] = createNamespace('skeleton');
 const DEFAULT_LAST_ROW_WIDTH = '60%';

packages/vant/src/skeleton/SkeletonAvatar.tsx

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

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

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

packages/vant/src/skeleton/index.less

@@ -1,4 +1,12 @@
 :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;
 }
 
@@ -6,14 +14,75 @@
   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,6 +1,15 @@
 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;
@@ -9,10 +18,34 @@ export default Skeleton;
 export { skeletonProps } from './Skeleton';
 export type { SkeletonProps } from './Skeleton';
 
-export type { SkeletonThemeVars } from './types';
+// 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';
 
 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,3 +43,10 @@ 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 } from '..';
+import { Skeleton, SkeletonImage } from '..';
 
 test('should render with row width array correctly', () => {
   const wrapper = mount(Skeleton, {
@@ -78,3 +78,31 @@ 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,3 +1,7 @@
+export type SkeletonAvatarShape = 'square' | 'round';
+
+export type SkeletonImageShape = 'square' | 'round';
+
 export type SkeletonThemeVars = {
   skeletonParagraphHeight?: string;
   skeletonParagraphBackground?: string;

packages/vant/src/style/css-variables.less

@@ -29,6 +29,7 @@
   --van-text-color: var(--van-gray-8);
   --van-text-color-2: var(--van-gray-6);
   --van-text-color-3: var(--van-gray-5);
+  --van-link-color: #576b95;
   --van-active-color: var(--van-gray-2);
   --van-active-opacity: 0.6;
   --van-disabled-opacity: 0.5;

pnpm-lock.yaml

@@ -10,6 +10,7 @@ importers:
       husky: ^8.0.1
       nano-staged: ^0.8.0
       prettier: ^2.7.1
+      rimraf: ^3.0.2
     devDependencies:
       '@vant/cli': link:packages/vant-cli
       '@vant/eslint-config': link:packages/vant-eslint-config
@@ -17,6 +18,7 @@ importers:
       husky: 8.0.2
       nano-staged: 0.8.0
       prettier: 2.7.1
+      rimraf: 3.0.2
 
   packages/create-vant-cli-app:
     specifiers:
@@ -27,7 +29,6 @@ importers:
       fs-extra: ^10.1.0
       picocolors: ^1.0.0
       release-it: ^15.4.1
-      rimraf: ^4.0.4
       typescript: ^4.8.2
     dependencies:
       consola: 2.15.3
@@ -38,7 +39,6 @@ importers:
     devDependencies:
       '@types/fs-extra': 9.0.13
       release-it: 15.5.0
-      rimraf: 4.0.4
       typescript: 4.9.3
 
   packages/vant:
@@ -76,12 +76,10 @@ importers:
     specifiers:
       esbuild: ^0.16.10
       release-it: ^15.4.1
-      rimraf: ^4.0.4
       typescript: ^4.8.2
     devDependencies:
       esbuild: 0.16.10
       release-it: 15.5.0
-      rimraf: 4.0.4
       typescript: 4.9.3
 
   packages/vant-cli:
@@ -126,7 +124,6 @@ importers:
       postcss-load-config: ^3.1.4
       prettier: ^2.7.1
       release-it: ^15.4.1
-      rimraf: ^4.0.4
       terser: ^5.16.1
       transliteration: ^2.3.5
       typescript: ^4.8.2
@@ -182,7 +179,6 @@ importers:
       '@types/less': 3.0.3
       '@types/lodash': 4.14.191
       '@types/markdown-it': 12.2.3
-      rimraf: 4.0.4
       vue: 3.2.45
 
   packages/vant-compat:
@@ -190,7 +186,6 @@ importers:
       '@vue/runtime-core': ^3.2.27
       esbuild: ^0.16.10
       release-it: ^15.1.1
-      rimraf: ^4.0.4
       typescript: ^4.7.4
       vant: workspace:*
       vue: ^3.2.45
@@ -198,7 +193,6 @@ importers:
       '@vue/runtime-core': 3.2.45
       esbuild: 0.16.10
       release-it: 15.5.0
-      rimraf: 4.0.4
       typescript: 4.9.3
       vant: link:../vant
       vue: 3.2.45
@@ -239,13 +233,11 @@ importers:
       '@popperjs/core': ^2.11.6
       esbuild: ^0.16.10
       release-it: ^15.4.1
-      rimraf: ^4.0.4
       typescript: ^4.8.2
     devDependencies:
       '@popperjs/core': 2.11.6
       esbuild: 0.16.10
       release-it: 15.5.0
-      rimraf: 4.0.4
       typescript: 4.9.3
 
   packages/vant-touch-emulator:
@@ -255,13 +247,11 @@ importers:
     specifiers:
       esbuild: ^0.16.10
       release-it: ^15.4.1
-      rimraf: ^4.0.4
       typescript: ^4.8.2
       vue: ^3.2.45
     devDependencies:
       esbuild: 0.16.10
       release-it: 15.5.0
-      rimraf: 4.0.4
       typescript: 4.9.3
       vue: 3.2.45
 
@@ -5717,12 +5707,6 @@ packages:
     dependencies:
       glob: 7.2.3
 
-  /rimraf/4.0.4:
-    resolution: {integrity: sha512-R0hoVr9xTwemarQjoWlNt/nb5dEGVTBhVdkRmEX2zEkT8T6onH0XKiGjuaC7rNNj/gYzY2p4NVRJ3sjO1ascHQ==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dev: true
-
   /rollup/3.8.1:
     resolution: {integrity: sha512-4yh9eMW7byOroYcN8DlF9P/2jCpu6txVIHjEqquQVSx7DI0RgyCCN3tjrcy4ra6yVtV336aLBB3v2AarYAxePQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}