vant 3.2.3 → 3.2.7

package/es/share-sheet/ShareSheet.js

@@ -1,12 +1,12 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue'; // Utils
 
-import { truthProp, createNamespace, extend, pick } from '../utils';
+import { pick, extend, truthProp, makeArrayProp, createNamespace, HAPTICS_FEEDBACK } from '../utils';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared'; // Components
 
 import { Popup } from '../popup';
 var PRESET_ICONS = ['qq', 'link', 'weibo', 'wechat', 'poster', 'qrcode', 'weapp-qrcode', 'wechat-moments'];
-var popupKeys = [...popupSharedPropKeys, 'closeOnPopstate', 'safeAreaInsetBottom'];
+var popupInheritKeys = [...popupSharedPropKeys, 'round', 'closeOnPopstate', 'safeAreaInsetBottom'];
 
 function getIconURL(icon) {
   if (PRESET_ICONS.includes(icon)) {
@@ -17,25 +17,26 @@ function getIconURL(icon) {
 }
 
 var [name, bem, t] = createNamespace('share-sheet');
+var shareSheetProps = extend({}, popupSharedProps, {
+  title: String,
+  round: truthProp,
+  options: makeArrayProp(),
+  cancelText: String,
+  description: String,
+  closeOnPopstate: truthProp,
+  safeAreaInsetBottom: truthProp
+});
 export default defineComponent({
   name,
-  props: extend({}, popupSharedProps, {
-    title: String,
-    cancelText: String,
-    description: String,
-    closeOnPopstate: truthProp,
-    safeAreaInsetBottom: truthProp,
-    options: {
-      type: Array,
-      default: () => []
-    }
-  }),
+  props: shareSheetProps,
   emits: ['cancel', 'select', 'update:show'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
+
     var updateShow = value => emit('update:show', value);
 
     var onCancel = () => {
@@ -70,7 +71,7 @@ export default defineComponent({
       return _createVNode("div", {
         "role": "button",
         "tabindex": 0,
-        "class": [bem('option'), className],
+        "class": [bem('option'), className, HAPTICS_FEEDBACK],
         "onClick": () => onSelect(option, index)
       }, [_createVNode("img", {
         "src": getIconURL(icon),
@@ -115,12 +116,10 @@ export default defineComponent({
     };
 
     return () => _createVNode(Popup, _mergeProps({
-      "round": true,
       "class": bem(),
-      "position": "bottom"
-    }, pick(props, popupKeys), {
-      'onUpdate:show': updateShow
-    }), {
+      "position": "bottom",
+      "onUpdate:show": updateShow
+    }, pick(props, popupInheritKeys)), {
       default: () => [renderHeader(), renderRows(), renderCancelButton()]
     });
   }

package/es/share-sheet/index.css

@@ -1 +1 @@
-:root{--van-share-sheet-header-padding:var(--van-padding-sm) var(--van-padding-md) var(--van-padding-base);--van-share-sheet-title-color:var(--van-text-color);--van-share-sheet-title-font-size:var(--van-font-size-md);--van-share-sheet-title-line-height:var(--van-line-height-md);--van-share-sheet-description-color:var(--van-gray-6);--van-share-sheet-description-font-size:var(--van-font-size-sm);--van-share-sheet-description-line-height:16px;--van-share-sheet-icon-size:48px;--van-share-sheet-option-name-color:var(--van-gray-7);--van-share-sheet-option-name-font-size:var(--van-font-size-sm);--van-share-sheet-option-description-color:var(--van-gray-5);--van-share-sheet-option-description-font-size:var(--van-font-size-sm);--van-share-sheet-cancel-button-font-size:var(--van-font-size-lg);--van-share-sheet-cancel-button-height:48px;--van-share-sheet-cancel-button-background:var(--van-white)}.van-share-sheet__header{padding:var(--van-share-sheet-header-padding);text-align:center}.van-share-sheet__title{margin-top:var(--van-padding-xs);color:var(--van-share-sheet-title-color);font-weight:400;font-size:var(--van-share-sheet-title-font-size);line-height:var(--van-share-sheet-title-line-height)}.van-share-sheet__description{display:block;margin-top:var(--van-padding-xs);color:var(--van-share-sheet-description-color);font-size:var(--van-share-sheet-description-font-size);line-height:var(--van-share-sheet-description-line-height)}.van-share-sheet__options{position:relative;display:flex;padding:var(--van-padding-md) 0 var(--van-padding-md) var(--van-padding-xs);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.van-share-sheet__options--border::before{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:0;right:0;left:var(--van-padding-md);border-top:1px solid var(--van-border-color);transform:scaleY(.5)}.van-share-sheet__options::-webkit-scrollbar{height:0}.van-share-sheet__option{display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.van-share-sheet__option:active{opacity:var(--van-active-opacity)}.van-share-sheet__icon{width:var(--van-share-sheet-icon-size);height:var(--van-share-sheet-icon-size);margin:0 var(--van-padding-md)}.van-share-sheet__name{margin-top:var(--van-padding-xs);padding:0 var(--van-padding-base);color:var(--van-share-sheet-option-name-color);font-size:var(--van-share-sheet-option-name-font-size)}.van-share-sheet__option-description{padding:0 var(--van-padding-base);color:var(--van-share-sheet-option-description-color);font-size:var(--van-share-sheet-option-description-font-size)}.van-share-sheet__cancel{display:block;width:100%;padding:0;font-size:var(--van-share-sheet-cancel-button-font-size);line-height:var(--van-share-sheet-cancel-button-height);text-align:center;background:var(--van-share-sheet-cancel-button-background);border:none;cursor:pointer}.van-share-sheet__cancel::before{display:block;height:var(--van-padding-xs);background-color:var(--van-background-color);content:' '}.van-share-sheet__cancel:active{background-color:var(--van-active-color)}
+:root{--van-share-sheet-header-padding:var(--van-padding-sm) var(--van-padding-md) var(--van-padding-base);--van-share-sheet-title-color:var(--van-text-color);--van-share-sheet-title-font-size:var(--van-font-size-md);--van-share-sheet-title-line-height:var(--van-line-height-md);--van-share-sheet-description-color:var(--van-text-color-2);--van-share-sheet-description-font-size:var(--van-font-size-sm);--van-share-sheet-description-line-height:16px;--van-share-sheet-icon-size:48px;--van-share-sheet-option-name-color:var(--van-gray-7);--van-share-sheet-option-name-font-size:var(--van-font-size-sm);--van-share-sheet-option-description-color:var(--van-text-color-3);--van-share-sheet-option-description-font-size:var(--van-font-size-sm);--van-share-sheet-cancel-button-font-size:var(--van-font-size-lg);--van-share-sheet-cancel-button-height:48px;--van-share-sheet-cancel-button-background:var(--van-background-color-light)}.van-share-sheet__header{padding:var(--van-share-sheet-header-padding);text-align:center}.van-share-sheet__title{margin-top:var(--van-padding-xs);color:var(--van-share-sheet-title-color);font-weight:400;font-size:var(--van-share-sheet-title-font-size);line-height:var(--van-share-sheet-title-line-height)}.van-share-sheet__description{display:block;margin-top:var(--van-padding-xs);color:var(--van-share-sheet-description-color);font-size:var(--van-share-sheet-description-font-size);line-height:var(--van-share-sheet-description-line-height)}.van-share-sheet__options{position:relative;display:flex;padding:var(--van-padding-md) 0 var(--van-padding-md) var(--van-padding-xs);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.van-share-sheet__options--border::before{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:0;right:0;left:var(--van-padding-md);border-top:1px solid var(--van-border-color);transform:scaleY(.5)}.van-share-sheet__options::-webkit-scrollbar{height:0}.van-share-sheet__option{display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.van-share-sheet__icon{width:var(--van-share-sheet-icon-size);height:var(--van-share-sheet-icon-size);margin:0 var(--van-padding-md)}.van-share-sheet__name{margin-top:var(--van-padding-xs);padding:0 var(--van-padding-base);color:var(--van-share-sheet-option-name-color);font-size:var(--van-share-sheet-option-name-font-size)}.van-share-sheet__option-description{padding:0 var(--van-padding-base);color:var(--van-share-sheet-option-description-color);font-size:var(--van-share-sheet-option-description-font-size)}.van-share-sheet__cancel{display:block;width:100%;padding:0;font-size:var(--van-share-sheet-cancel-button-font-size);line-height:var(--van-share-sheet-cancel-button-height);text-align:center;background:var(--van-share-sheet-cancel-button-background);border:none;cursor:pointer}.van-share-sheet__cancel::before{display:block;height:var(--van-padding-xs);background-color:var(--van-background-color);content:' '}.van-share-sheet__cancel:active{background-color:var(--van-active-color)}

package/es/share-sheet/index.d.ts

@@ -25,6 +25,14 @@ export declare const ShareSheet: import("../utils").WithInstall<import("vue").De
     };
 } & {
     title: StringConstructor;
+    round: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<(import("./ShareSheet").ShareSheetOption | import("./ShareSheet").ShareSheetOption[])[]>;
+        default: () => never[];
+    };
     cancelText: StringConstructor;
     description: StringConstructor;
     closeOnPopstate: {
@@ -35,10 +43,6 @@ export declare const ShareSheet: import("../utils").WithInstall<import("vue").De
         type: BooleanConstructor;
         default: true;
     };
-    options: {
-        type: import("vue").PropType<import("./ShareSheet").ShareSheetOptions>;
-        default: () => never[];
-    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "update:show" | "cancel")[], "select" | "update:show" | "cancel", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     show?: unknown;
     zIndex?: unknown;
@@ -53,12 +57,14 @@ export declare const ShareSheet: import("../utils").WithInstall<import("vue").De
     transitionAppear?: unknown;
     closeOnClickOverlay?: unknown;
     title?: unknown;
+    round?: unknown;
+    options?: unknown;
     cancelText?: unknown;
     description?: unknown;
     closeOnPopstate?: unknown;
     safeAreaInsetBottom?: unknown;
-    options?: unknown;
 } & {
+    round: boolean;
     safeAreaInsetBottom: boolean;
     overlay: boolean;
     show: boolean;
@@ -67,7 +73,7 @@ export declare const ShareSheet: import("../utils").WithInstall<import("vue").De
     transitionAppear: boolean;
     closeOnClickOverlay: boolean;
     closeOnPopstate: boolean;
-    options: import("./ShareSheet").ShareSheetOptions;
+    options: (import("./ShareSheet").ShareSheetOption | import("./ShareSheet").ShareSheetOption[])[];
 } & {
     description?: string | undefined;
     title?: string | undefined;
@@ -83,6 +89,7 @@ export declare const ShareSheet: import("../utils").WithInstall<import("vue").De
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
 }, {
+    round: boolean;
     safeAreaInsetBottom: boolean;
     overlay: boolean;
     show: boolean;
@@ -91,7 +98,7 @@ export declare const ShareSheet: import("../utils").WithInstall<import("vue").De
     transitionAppear: boolean;
     closeOnClickOverlay: boolean;
     closeOnPopstate: boolean;
-    options: import("./ShareSheet").ShareSheetOptions;
+    options: (import("./ShareSheet").ShareSheetOption | import("./ShareSheet").ShareSheetOption[])[];
 }>>;
 export default ShareSheet;
-export type { ShareSheetOption, ShareSheetOptions } from './ShareSheet';
+export type { ShareSheetProps, ShareSheetOption, ShareSheetOptions, } from './ShareSheet';

package/es/share-sheet/index.less

@@ -64,10 +64,6 @@
     align-items: center;
     cursor: pointer;
     user-select: none;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__icon {

package/es/share-sheet/var.less

@@ -5,14 +5,14 @@
 @share-sheet-title-color: var(--van-text-color);
 @share-sheet-title-font-size: var(--van-font-size-md);
 @share-sheet-title-line-height: var(--van-line-height-md);
-@share-sheet-description-color: var(--van-gray-6);
+@share-sheet-description-color: var(--van-text-color-2);
 @share-sheet-description-font-size: var(--van-font-size-sm);
 @share-sheet-description-line-height: 16px;
 @share-sheet-icon-size: 48px;
 @share-sheet-option-name-color: var(--van-gray-7);
 @share-sheet-option-name-font-size: var(--van-font-size-sm);
-@share-sheet-option-description-color: var(--van-gray-5);
+@share-sheet-option-description-color: var(--van-text-color-3);
 @share-sheet-option-description-font-size: var(--van-font-size-sm);
 @share-sheet-cancel-button-font-size: var(--van-font-size-lg);
 @share-sheet-cancel-button-height: 48px;
-@share-sheet-cancel-button-background: var(--van-white);
+@share-sheet-cancel-button-background: var(--van-background-color-light);

package/es/sidebar/Sidebar.d.ts

@@ -1,9 +1,16 @@
-import { InjectionKey } from 'vue';
+import { InjectionKey, ExtractPropTypes } from 'vue';
 export declare type SidebarProvide = {
     getActive: () => number;
     setActive: (value: number) => void;
 };
 export declare const SIDEBAR_KEY: InjectionKey<SidebarProvide>;
+declare const sidebarProps: {
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+};
+export declare type SidebarProps = ExtractPropTypes<typeof sidebarProps>;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];

package/es/sidebar/Sidebar.js

@@ -1,23 +1,22 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue';
-import { createNamespace } from '../utils';
+import { makeNumericProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 var [name, bem] = createNamespace('sidebar');
 export var SIDEBAR_KEY = Symbol(name);
+var sidebarProps = {
+  modelValue: makeNumericProp(0)
+};
 export default defineComponent({
   name,
-  props: {
-    modelValue: {
-      type: [Number, String],
-      default: 0
-    }
-  },
+  props: sidebarProps,
   emits: ['change', 'update:modelValue'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var {
       linkChildren
     } = useChildren(SIDEBAR_KEY);

package/es/sidebar/index.d.ts

@@ -14,3 +14,4 @@ export declare const Sidebar: import("../utils").WithInstall<import("vue").Defin
     modelValue: string | number;
 }>>;
 export default Sidebar;
+export type { SidebarProps } from './Sidebar';

package/es/sidebar-item/SidebarItem.d.ts

@@ -1,3 +1,15 @@
+import { ExtractPropTypes } from 'vue';
+declare const sidebarItemProps: {
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    title: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
+    disabled: BooleanConstructor;
+};
+export declare type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>;
 declare const _default: import("vue").DefineComponent<{
     to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;

package/es/sidebar-item/SidebarItem.js

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue'; // Utils
 
-import { createNamespace, extend } from '../utils';
+import { extend, numericProp, createNamespace } from '../utils';
 import { SIDEBAR_KEY } from '../sidebar/Sidebar'; // Composables
 
 import { useParent } from '@vant/use';
@@ -9,20 +9,22 @@ import { useRoute, routeProps } from '../composables/use-route'; // Components
 
 import { Badge } from '../badge';
 var [name, bem] = createNamespace('sidebar-item');
+var sidebarItemProps = extend({}, routeProps, {
+  dot: Boolean,
+  title: String,
+  badge: numericProp,
+  disabled: Boolean
+});
 export default defineComponent({
   name,
-  props: extend({}, routeProps, {
-    dot: Boolean,
-    title: String,
-    badge: [Number, String],
-    disabled: Boolean
-  }),
+  props: sidebarItemProps,
   emits: ['click'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var route = useRoute();
     var {
       parent,

package/es/sidebar-item/index.css

@@ -1 +1 @@
-:root{--van-sidebar-font-size:var(--van-font-size-md);--van-sidebar-line-height:var(--van-line-height-md);--van-sidebar-text-color:var(--van-text-color);--van-sidebar-disabled-text-color:var(--van-gray-5);--van-sidebar-padding:20px var(--van-padding-sm);--van-sidebar-active-color:var(--van-active-color);--van-sidebar-background-color:var(--van-background-color);--van-sidebar-selected-font-weight:var(--van-font-weight-bold);--van-sidebar-selected-text-color:var(--van-text-color);--van-sidebar-selected-border-width:4px;--van-sidebar-selected-border-height:16px;--van-sidebar-selected-border-color:var(--van-danger-color);--van-sidebar-selected-background-color:var(--van-white)}.van-sidebar-item{position:relative;display:block;box-sizing:border-box;padding:var(--van-sidebar-padding);overflow:hidden;color:var(--van-sidebar-text-color);font-size:var(--van-sidebar-font-size);line-height:var(--van-sidebar-line-height);background-color:var(--van-sidebar-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-sidebar-item:active{background-color:var(--van-sidebar-active-color)}.van-sidebar-item:not(:last-child)::after{border-bottom-width:1px}.van-sidebar-item__text{word-break:break-all}.van-sidebar-item--select{color:var(--van-sidebar-selected-text-color);font-weight:var(--van-sidebar-selected-font-weight)}.van-sidebar-item--select,.van-sidebar-item--select:active{background-color:var(--van-sidebar-selected-background-color)}.van-sidebar-item--select::before{position:absolute;top:50%;left:0;width:var(--van-sidebar-selected-border-width);height:var(--van-sidebar-selected-border-height);background-color:var(--van-sidebar-selected-border-color);transform:translateY(-50%);content:''}.van-sidebar-item--disabled{color:var(--van-sidebar-disabled-text-color);cursor:not-allowed}.van-sidebar-item--disabled:active{background-color:var(--van-sidebar-background-color)}
+:root{--van-sidebar-font-size:var(--van-font-size-md);--van-sidebar-line-height:var(--van-line-height-md);--van-sidebar-text-color:var(--van-text-color);--van-sidebar-disabled-text-color:var(--van-text-color-3);--van-sidebar-padding:20px var(--van-padding-sm);--van-sidebar-active-color:var(--van-active-color);--van-sidebar-background-color:var(--van-background-color);--van-sidebar-selected-font-weight:var(--van-font-weight-bold);--van-sidebar-selected-text-color:var(--van-text-color);--van-sidebar-selected-border-width:4px;--van-sidebar-selected-border-height:16px;--van-sidebar-selected-border-color:var(--van-danger-color);--van-sidebar-selected-background-color:var(--van-background-color-light)}.van-sidebar-item{position:relative;display:block;box-sizing:border-box;padding:var(--van-sidebar-padding);overflow:hidden;color:var(--van-sidebar-text-color);font-size:var(--van-sidebar-font-size);line-height:var(--van-sidebar-line-height);background:var(--van-sidebar-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-sidebar-item:active{background-color:var(--van-sidebar-active-color)}.van-sidebar-item:not(:last-child)::after{border-bottom-width:1px}.van-sidebar-item__text{word-break:break-all}.van-sidebar-item--select{color:var(--van-sidebar-selected-text-color);font-weight:var(--van-sidebar-selected-font-weight)}.van-sidebar-item--select,.van-sidebar-item--select:active{background-color:var(--van-sidebar-selected-background-color)}.van-sidebar-item--select::before{position:absolute;top:50%;left:0;width:var(--van-sidebar-selected-border-width);height:var(--van-sidebar-selected-border-height);background-color:var(--van-sidebar-selected-border-color);transform:translateY(-50%);content:''}.van-sidebar-item--disabled{color:var(--van-sidebar-disabled-text-color);cursor:not-allowed}.van-sidebar-item--disabled:active{background-color:var(--van-sidebar-background-color)}

package/es/sidebar-item/index.d.ts

@@ -32,3 +32,4 @@ export declare const SidebarItem: import("../utils").WithInstall<import("vue").D
     disabled: boolean;
 }>>;
 export default SidebarItem;
+export type { SidebarItemProps } from './SidebarItem';

package/es/sidebar-item/index.less

@@ -25,7 +25,7 @@
   color: var(--van-sidebar-text-color);
   font-size: var(--van-sidebar-font-size);
   line-height: var(--van-sidebar-line-height);
-  background-color: var(--van-sidebar-background-color);
+  background: var(--van-sidebar-background-color);
   cursor: pointer;
   user-select: none;
 

package/es/sidebar-item/var.less

@@ -3,7 +3,7 @@
 @sidebar-font-size: var(--van-font-size-md);
 @sidebar-line-height: var(--van-line-height-md);
 @sidebar-text-color: var(--van-text-color);
-@sidebar-disabled-text-color: var(--van-gray-5);
+@sidebar-disabled-text-color: var(--van-text-color-3);
 @sidebar-padding: 20px var(--van-padding-sm);
 @sidebar-active-color: var(--van-active-color);
 @sidebar-background-color: var(--van-background-color);
@@ -12,4 +12,4 @@
 @sidebar-selected-border-width: 4px;
 @sidebar-selected-border-height: 16px;
 @sidebar-selected-border-color: var(--van-danger-color);
-@sidebar-selected-background-color: var(--van-white);
+@sidebar-selected-background-color: var(--van-background-color-light);

package/es/skeleton/Skeleton.d.ts

@@ -1,5 +1,10 @@
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+import { PropType, ExtractPropTypes } from 'vue';
+export declare type SkeletonAvatarShape = 'square' | 'round';
+declare const skeletonProps: {
+    row: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     title: BooleanConstructor;
     round: BooleanConstructor;
     avatar: BooleanConstructor;
@@ -13,13 +18,37 @@ declare const _default: import("vue").DefineComponent<{
     };
     avatarSize: (NumberConstructor | StringConstructor)[];
     titleWidth: (NumberConstructor | StringConstructor)[];
+    avatarShape: {
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
+    };
+    rowWidth: {
+        type: PropType<string | number | (string | number)[]>;
+        default: string;
+    };
+};
+export declare type SkeletonProps = ExtractPropTypes<typeof skeletonProps>;
+declare const _default: import("vue").DefineComponent<{
     row: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+    title: BooleanConstructor;
+    round: BooleanConstructor;
+    avatar: BooleanConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    animate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    avatarSize: (NumberConstructor | StringConstructor)[];
+    titleWidth: (NumberConstructor | StringConstructor)[];
     avatarShape: {
-        type: PropType<"round" | "square">;
-        default: string;
+        type: PropType<SkeletonAvatarShape>;
+        default: SkeletonAvatarShape;
     };
     rowWidth: {
         type: PropType<string | number | (string | number)[]>;
@@ -28,6 +57,7 @@ declare const _default: import("vue").DefineComponent<{
 }, () => JSX.Element | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+    row?: unknown;
     title?: unknown;
     round?: unknown;
     avatar?: unknown;
@@ -35,7 +65,6 @@ declare const _default: import("vue").DefineComponent<{
     animate?: unknown;
     avatarSize?: unknown;
     titleWidth?: unknown;
-    row?: unknown;
     avatarShape?: unknown;
     rowWidth?: unknown;
 } & {
@@ -45,7 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     row: string | number;
     avatar: boolean;
-    avatarShape: "round" | "square";
+    avatarShape: SkeletonAvatarShape;
     rowWidth: string | number | (string | number)[];
 } & {
     avatarSize?: string | number | undefined;
@@ -57,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     row: string | number;
     avatar: boolean;
-    avatarShape: "round" | "square";
+    avatarShape: SkeletonAvatarShape;
     rowWidth: string | number | (string | number)[];
 }>;
 export default _default;

package/es/skeleton/Skeleton.js

@@ -1,36 +1,33 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue';
-import { addUnit, truthProp, getSizeStyle, createNamespace } from '../utils';
+import { addUnit, truthProp, numericProp, getSizeStyle, makeStringProp, makeNumericProp, createNamespace } from '../utils';
 var [name, bem] = createNamespace('skeleton');
 var DEFAULT_ROW_WIDTH = '100%';
 var DEFAULT_LAST_ROW_WIDTH = '60%';
+var skeletonProps = {
+  row: makeNumericProp(0),
+  title: Boolean,
+  round: Boolean,
+  avatar: Boolean,
+  loading: truthProp,
+  animate: truthProp,
+  avatarSize: numericProp,
+  titleWidth: numericProp,
+  avatarShape: makeStringProp('round'),
+  rowWidth: {
+    type: [Number, String, Array],
+    default: DEFAULT_ROW_WIDTH
+  }
+};
 export default defineComponent({
   name,
-  props: {
-    title: Boolean,
-    round: Boolean,
-    avatar: Boolean,
-    loading: truthProp,
-    animate: truthProp,
-    avatarSize: [Number, String],
-    titleWidth: [Number, String],
-    row: {
-      type: [Number, String],
-      default: 0
-    },
-    avatarShape: {
-      type: String,
-      default: 'round'
-    },
-    rowWidth: {
-      type: [Number, String, Array],
-      default: DEFAULT_ROW_WIDTH
-    }
-  },
+  props: skeletonProps,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
 
-  setup(props, {
-    slots
-  }) {
     var renderAvatar = () => {
       if (props.avatar) {
         return _createVNode("div", {

package/es/skeleton/index.css

@@ -1 +1 @@
-:root{--van-skeleton-row-height:16px;--van-skeleton-row-background-color:var(--van-active-color);--van-skeleton-row-margin-top:var(--van-padding-sm);--van-skeleton-title-width:40%;--van-skeleton-avatar-size:32px;--van-skeleton-avatar-background-color:var(--van-active-color);--van-skeleton-animation-duration:1.2s}.van-skeleton{display:flex;padding:0 var(--van-padding-md)}.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-color:var(--van-skeleton-avatar-background-color)}.van-skeleton__avatar--round{border-radius:var(--van-border-radius-max)}.van-skeleton__content{width:100%}.van-skeleton__avatar+.van-skeleton__content{padding-top:var(--van-padding-xs)}.van-skeleton__row,.van-skeleton__title{height:var(--van-skeleton-row-height);background-color:var(--van-skeleton-row-background-color)}.van-skeleton__title{width:var(--van-skeleton-title-width);margin:0}.van-skeleton__row:not(:first-child){margin-top:var(--van-skeleton-row-margin-top)}.van-skeleton__title+.van-skeleton__row{margin-top:20px}.van-skeleton--animate{animation:van-skeleton-blink var(--van-skeleton-animation-duration) ease-in-out infinite}.van-skeleton--round .van-skeleton__row,.van-skeleton--round .van-skeleton__title{border-radius:var(--van-border-radius-max)}@keyframes van-skeleton-blink{50%{opacity:.6}}
+:root{--van-skeleton-row-height:16px;--van-skeleton-row-background-color:var(--van-active-color);--van-skeleton-row-margin-top:var(--van-padding-sm);--van-skeleton-title-width:40%;--van-skeleton-avatar-size:32px;--van-skeleton-avatar-background-color:var(--van-active-color);--van-skeleton-animation-duration:1.2s}.van-skeleton{display:flex;padding:0 var(--van-padding-md)}.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-color)}.van-skeleton__avatar--round{border-radius:var(--van-border-radius-max)}.van-skeleton__content{width:100%}.van-skeleton__avatar+.van-skeleton__content{padding-top:var(--van-padding-xs)}.van-skeleton__row,.van-skeleton__title{height:var(--van-skeleton-row-height);background:var(--van-skeleton-row-background-color)}.van-skeleton__title{width:var(--van-skeleton-title-width);margin:0}.van-skeleton__row:not(:first-child){margin-top:var(--van-skeleton-row-margin-top)}.van-skeleton__title+.van-skeleton__row{margin-top:20px}.van-skeleton--animate{animation:van-skeleton-blink var(--van-skeleton-animation-duration) ease-in-out infinite}.van-skeleton--round .van-skeleton__row,.van-skeleton--round .van-skeleton__title{border-radius:var(--van-border-radius-max)}@keyframes van-skeleton-blink{50%{opacity:.6}}

package/es/skeleton/index.d.ts

@@ -1,4 +1,8 @@
 export declare const Skeleton: import("../utils").WithInstall<import("vue").DefineComponent<{
+    row: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     title: BooleanConstructor;
     round: BooleanConstructor;
     avatar: BooleanConstructor;
@@ -12,13 +16,9 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
     };
     avatarSize: (NumberConstructor | StringConstructor)[];
     titleWidth: (NumberConstructor | StringConstructor)[];
-    row: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
     avatarShape: {
-        type: import("vue").PropType<"round" | "square">;
-        default: string;
+        type: import("vue").PropType<import("./Skeleton").SkeletonAvatarShape>;
+        default: import("./Skeleton").SkeletonAvatarShape;
     };
     rowWidth: {
         type: import("vue").PropType<string | number | (string | number)[]>;
@@ -27,6 +27,7 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
 }, () => JSX.Element | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
+    row?: unknown;
     title?: unknown;
     round?: unknown;
     avatar?: unknown;
@@ -34,7 +35,6 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
     animate?: unknown;
     avatarSize?: unknown;
     titleWidth?: unknown;
-    row?: unknown;
     avatarShape?: unknown;
     rowWidth?: unknown;
 } & {
@@ -44,7 +44,7 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
     loading: boolean;
     row: string | number;
     avatar: boolean;
-    avatarShape: "round" | "square";
+    avatarShape: import("./Skeleton").SkeletonAvatarShape;
     rowWidth: string | number | (string | number)[];
 } & {
     avatarSize?: string | number | undefined;
@@ -56,7 +56,8 @@ export declare const Skeleton: import("../utils").WithInstall<import("vue").Defi
     loading: boolean;
     row: string | number;
     avatar: boolean;
-    avatarShape: "round" | "square";
+    avatarShape: import("./Skeleton").SkeletonAvatarShape;
     rowWidth: string | number | (string | number)[];
 }>>;
 export default Skeleton;
+export type { SkeletonProps, SkeletonAvatarShape } from './Skeleton';

package/es/skeleton/index.less

@@ -19,7 +19,7 @@
     width: var(--van-skeleton-avatar-size);
     height: var(--van-skeleton-avatar-size);
     margin-right: var(--van-padding-md);
-    background-color: var(--van-skeleton-avatar-background-color);
+    background: var(--van-skeleton-avatar-background-color);
 
     &--round {
       border-radius: var(--van-border-radius-max);
@@ -37,7 +37,7 @@
   &__row,
   &__title {
     height: var(--van-skeleton-row-height);
-    background-color: var(--van-skeleton-row-background-color);
+    background: var(--van-skeleton-row-background-color);
   }
 
   &__title {