vant 3.2.4 → 3.2.8

package/lib/grid/Grid.js

@@ -12,30 +12,28 @@ var _constant = require("../utils/constant");
 var _use = require("@vant/use");
 
 var [name, bem] = (0, _utils.createNamespace)('grid');
-var props = {
+var gridProps = {
   square: Boolean,
   center: _utils.truthProp,
   border: _utils.truthProp,
-  gutter: [Number, String],
+  gutter: _utils.numericProp,
   reverse: Boolean,
-  iconSize: [Number, String],
+  iconSize: _utils.numericProp,
   direction: String,
   clickable: Boolean,
-  columnNum: {
-    type: [Number, String],
-    default: 4
-  }
+  columnNum: (0, _utils.makeNumericProp)(4)
 };
 var GRID_KEY = Symbol(name);
 exports.GRID_KEY = GRID_KEY;
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: gridProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var {
       linkChildren
     } = (0, _use.useChildren)(GRID_KEY);

package/lib/grid/index.d.ts

@@ -47,4 +47,4 @@ export declare const Grid: import("../utils").WithInstall<import("vue").DefineCo
     columnNum: string | number;
 }>>;
 export default Grid;
-export type { GridDirection } from './Grid';
+export type { GridProps, GridDirection } from './Grid';

package/lib/grid-item/GridItem.d.ts

@@ -1,4 +1,5 @@
-declare const _default: import("vue").DefineComponent<{
+import { ExtractPropTypes } from 'vue';
+declare const gridItemProps: {
     to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
     url: StringConstructor;
     replace: BooleanConstructor;
@@ -7,8 +8,21 @@ declare const _default: import("vue").DefineComponent<{
     text: StringConstructor;
     icon: StringConstructor;
     badge: (NumberConstructor | StringConstructor)[];
+    iconColor: StringConstructor;
     iconPrefix: StringConstructor;
+};
+export declare type GridItemProps = ExtractPropTypes<typeof gridItemProps>;
+declare const _default: import("vue").DefineComponent<{
+    to: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    dot: BooleanConstructor;
+    text: StringConstructor;
+    icon: StringConstructor;
+    badge: (NumberConstructor | StringConstructor)[];
     iconColor: StringConstructor;
+    iconPrefix: StringConstructor;
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     to?: unknown;
     url?: unknown;
@@ -17,8 +31,8 @@ declare const _default: import("vue").DefineComponent<{
     text?: unknown;
     icon?: unknown;
     badge?: unknown;
-    iconPrefix?: unknown;
     iconColor?: unknown;
+    iconPrefix?: unknown;
 } & {
     replace: boolean;
     dot: boolean;

package/lib/grid-item/GridItem.js

@@ -21,21 +21,23 @@ var _badge = require("../badge");
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('grid-item');
+var gridItemProps = (0, _utils.extend)({}, _useRoute.routeProps, {
+  dot: Boolean,
+  text: String,
+  icon: String,
+  badge: _utils.numericProp,
+  iconColor: String,
+  iconPrefix: String
+});
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, _useRoute.routeProps, {
-    dot: Boolean,
-    text: String,
-    icon: String,
-    badge: [Number, String],
-    iconPrefix: String,
-    iconColor: String
-  }),
-
-  setup(props, {
-    slots
-  }) {
+  props: gridItemProps,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var {
       parent,
       index
@@ -96,7 +98,7 @@ var _default = (0, _vue.defineComponent)({
           "dot": props.dot,
           "content": props.badge
         }, {
-          default: () => [slots.icon()]
+          default: slots.icon
         });
       }
 

package/lib/grid-item/index.css

@@ -1 +1 @@
-:root{--van-grid-item-content-padding:var(--van-padding-md) var(--van-padding-xs);--van-grid-item-content-background-color:var(--van-white);--van-grid-item-content-active-color:var(--van-active-color);--van-grid-item-icon-size:28px;--van-grid-item-text-color:var(--van-gray-7);--van-grid-item-text-font-size:var(--van-font-size-sm)}.van-grid-item{position:relative;box-sizing:border-box}.van-grid-item--square{height:0}.van-grid-item__icon{font-size:var(--van-grid-item-icon-size)}.van-grid-item__text{color:var(--van-grid-item-text-color);font-size:var(--van-grid-item-text-font-size);line-height:1.5;word-break:break-all}.van-grid-item__icon+.van-grid-item__text{margin-top:var(--van-padding-xs)}.van-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--van-grid-item-content-padding);background-color:var(--van-grid-item-content-background-color)}.van-grid-item__content::after{z-index:1;border-width:0 var(--van-border-width-base) var(--van-border-width-base) 0}.van-grid-item__content--square{position:absolute;top:0;right:0;left:0}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 var(--van-padding-xs)}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 var(--van-padding-xs)}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 var(--van-padding-xs) 0 0}.van-grid-item__content--surround::after{border-width:var(--van-border-width-base)}.van-grid-item__content--clickable{cursor:pointer}.van-grid-item__content--clickable:active{background-color:var(--van-grid-item-content-active-color)}
+:root{--van-grid-item-content-padding:var(--van-padding-md) var(--van-padding-xs);--van-grid-item-content-background-color:var(--van-background-color-light);--van-grid-item-content-active-color:var(--van-active-color);--van-grid-item-icon-size:28px;--van-grid-item-text-color:var(--van-gray-7);--van-grid-item-text-font-size:var(--van-font-size-sm)}.van-grid-item{position:relative;box-sizing:border-box}.van-grid-item--square{height:0}.van-grid-item__icon{font-size:var(--van-grid-item-icon-size)}.van-grid-item__text{color:var(--van-grid-item-text-color);font-size:var(--van-grid-item-text-font-size);line-height:1.5;word-break:break-all}.van-grid-item__icon+.van-grid-item__text{margin-top:var(--van-padding-xs)}.van-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--van-grid-item-content-padding);background:var(--van-grid-item-content-background-color)}.van-grid-item__content::after{z-index:1;border-width:0 var(--van-border-width-base) var(--van-border-width-base) 0}.van-grid-item__content--square{position:absolute;top:0;right:0;left:0}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 var(--van-padding-xs)}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 var(--van-padding-xs)}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 var(--van-padding-xs) 0 0}.van-grid-item__content--surround::after{border-width:var(--van-border-width-base)}.van-grid-item__content--clickable{cursor:pointer}.van-grid-item__content--clickable:active{background-color:var(--van-grid-item-content-active-color)}

package/lib/grid-item/index.d.ts

@@ -7,8 +7,8 @@ export declare const GridItem: import("../utils").WithInstall<import("vue").Defi
     text: StringConstructor;
     icon: StringConstructor;
     badge: (NumberConstructor | StringConstructor)[];
-    iconPrefix: StringConstructor;
     iconColor: StringConstructor;
+    iconPrefix: StringConstructor;
 }, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     to?: unknown;
     url?: unknown;
@@ -17,8 +17,8 @@ export declare const GridItem: import("../utils").WithInstall<import("vue").Defi
     text?: unknown;
     icon?: unknown;
     badge?: unknown;
-    iconPrefix?: unknown;
     iconColor?: unknown;
+    iconPrefix?: unknown;
 } & {
     replace: boolean;
     dot: boolean;
@@ -35,3 +35,4 @@ export declare const GridItem: import("../utils").WithInstall<import("vue").Defi
     dot: boolean;
 }>>;
 export default GridItem;
+export type { GridItemProps } from './GridItem';

package/lib/grid-item/index.less

@@ -39,7 +39,7 @@
     box-sizing: border-box;
     height: 100%;
     padding: var(--van-grid-item-content-padding);
-    background-color: var(--van-grid-item-content-background-color);
+    background: var(--van-grid-item-content-background-color);
 
     &::after {
       z-index: 1;

package/lib/grid-item/var.less

@@ -1,7 +1,7 @@
 @import '../style/var.less';
 
 @grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
-@grid-item-content-background-color: var(--van-white);
+@grid-item-content-background-color: var(--van-background-color-light);
 @grid-item-content-active-color: var(--van-active-color);
 @grid-item-icon-size: 28px;
 @grid-item-text-color: var(--van-gray-7);

package/lib/icon/Icon.d.ts

@@ -1,23 +1,36 @@
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+import { ExtractPropTypes } from 'vue';
+declare const iconProps: {
     dot: BooleanConstructor;
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     name: StringConstructor;
     size: (NumberConstructor | StringConstructor)[];
     badge: (NumberConstructor | StringConstructor)[];
     color: StringConstructor;
     classPrefix: StringConstructor;
+};
+export declare type IconProps = ExtractPropTypes<typeof iconProps>;
+declare const _default: import("vue").DefineComponent<{
+    dot: BooleanConstructor;
     tag: {
-        type: PropType<keyof HTMLElementTagNameMap>;
-        default: string;
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
     };
+    name: StringConstructor;
+    size: (NumberConstructor | StringConstructor)[];
+    badge: (NumberConstructor | StringConstructor)[];
+    color: StringConstructor;
+    classPrefix: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     dot?: unknown;
+    tag?: unknown;
     name?: unknown;
     size?: unknown;
     badge?: unknown;
     color?: unknown;
     classPrefix?: unknown;
-    tag?: unknown;
 } & {
     dot: boolean;
     tag: keyof HTMLElementTagNameMap;

package/lib/icon/Icon.js

@@ -13,28 +13,26 @@ var _ConfigProvider = require("../config-provider/ConfigProvider");
 
 var [name, bem] = (0, _utils.createNamespace)('icon');
 
-function isImage(name) {
-  return name == null ? void 0 : name.includes('/');
-}
+var isImage = name => name == null ? void 0 : name.includes('/');
+
+var iconProps = {
+  dot: Boolean,
+  tag: (0, _utils.makeStringProp)('i'),
+  name: String,
+  size: _utils.numericProp,
+  badge: _utils.numericProp,
+  color: String,
+  classPrefix: String
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    dot: Boolean,
-    name: String,
-    size: [Number, String],
-    badge: [Number, String],
-    color: String,
-    classPrefix: String,
-    tag: {
-      type: String,
-      default: 'i'
-    }
-  },
+  props: iconProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var config = (0, _vue.inject)(_ConfigProvider.CONFIG_PROVIDER_KEY, null);
     var classPrefix = (0, _vue.computed)(() => props.classPrefix || (config == null ? void 0 : config.iconPrefix) || bem());
     return () => {

package/lib/icon/index.d.ts

@@ -1,22 +1,22 @@
 export declare const Icon: import("../utils").WithInstall<import("vue").DefineComponent<{
     dot: BooleanConstructor;
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
     name: StringConstructor;
     size: (NumberConstructor | StringConstructor)[];
     badge: (NumberConstructor | StringConstructor)[];
     color: StringConstructor;
     classPrefix: StringConstructor;
-    tag: {
-        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
-        default: string;
-    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
     dot?: unknown;
+    tag?: unknown;
     name?: unknown;
     size?: unknown;
     badge?: unknown;
     color?: unknown;
     classPrefix?: unknown;
-    tag?: unknown;
 } & {
     dot: boolean;
     tag: keyof HTMLElementTagNameMap;
@@ -31,3 +31,4 @@ export declare const Icon: import("../utils").WithInstall<import("vue").DefineCo
     tag: keyof HTMLElementTagNameMap;
 }>>;
 export default Icon;
+export type { IconProps } from './Icon';

package/lib/image/Image.d.ts

@@ -1,6 +1,6 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 export declare type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-declare const _default: import("vue").DefineComponent<{
+declare const imageProps: {
     src: StringConstructor;
     alt: StringConstructor;
     fit: PropType<ImageFit>;
@@ -14,17 +14,46 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    errorIcon: {
+        type: PropType<string>;
+        default: string;
+    };
     iconPrefix: StringConstructor;
     showLoading: {
         type: BooleanConstructor;
         default: true;
     };
+    loadingIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export declare type ImageProps = ExtractPropTypes<typeof imageProps>;
+declare const _default: import("vue").DefineComponent<{
+    src: StringConstructor;
+    alt: StringConstructor;
+    fit: PropType<ImageFit>;
+    round: BooleanConstructor;
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    radius: (NumberConstructor | StringConstructor)[];
+    lazyLoad: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    showError: {
+        type: BooleanConstructor;
+        default: true;
+    };
     errorIcon: {
-        type: StringConstructor;
+        type: PropType<string>;
         default: string;
     };
+    iconPrefix: StringConstructor;
+    showLoading: {
+        type: BooleanConstructor;
+        default: true;
+    };
     loadingIcon: {
-        type: StringConstructor;
+        type: PropType<string>;
         default: string;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "load")[], "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
@@ -38,26 +67,26 @@ declare const _default: import("vue").DefineComponent<{
     lazyLoad?: unknown;
     iconSize?: unknown;
     showError?: unknown;
+    errorIcon?: unknown;
     iconPrefix?: unknown;
     showLoading?: unknown;
-    errorIcon?: unknown;
     loadingIcon?: unknown;
 } & {
     round: boolean;
     showError: boolean;
     lazyLoad: boolean;
-    showLoading: boolean;
     errorIcon: string;
+    showLoading: boolean;
     loadingIcon: string;
 } & {
-    iconPrefix?: string | undefined;
+    width?: string | number | undefined;
     height?: string | number | undefined;
+    iconPrefix?: string | undefined;
     alt?: string | undefined;
     src?: string | undefined;
-    width?: string | number | undefined;
     iconSize?: string | number | undefined;
-    radius?: string | number | undefined;
     fit?: ImageFit | undefined;
+    radius?: string | number | undefined;
 }> & {
     onLoad?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
@@ -65,8 +94,8 @@ declare const _default: import("vue").DefineComponent<{
     round: boolean;
     showError: boolean;
     lazyLoad: boolean;
-    showLoading: boolean;
     errorIcon: string;
+    showLoading: boolean;
     loadingIcon: string;
 }>;
 export default _default;

package/lib/image/Image.js

@@ -12,37 +12,33 @@ var _icon = require("../icon");
 // Utils
 // Components
 var [name, bem] = (0, _utils.createNamespace)('image');
+var imageProps = {
+  src: String,
+  alt: String,
+  fit: String,
+  round: Boolean,
+  width: _utils.numericProp,
+  height: _utils.numericProp,
+  radius: _utils.numericProp,
+  lazyLoad: Boolean,
+  iconSize: _utils.numericProp,
+  showError: _utils.truthProp,
+  errorIcon: (0, _utils.makeStringProp)('photo-fail'),
+  iconPrefix: String,
+  showLoading: _utils.truthProp,
+  loadingIcon: (0, _utils.makeStringProp)('photo')
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    src: String,
-    alt: String,
-    fit: String,
-    round: Boolean,
-    width: [Number, String],
-    height: [Number, String],
-    radius: [Number, String],
-    lazyLoad: Boolean,
-    iconSize: [Number, String],
-    showError: _utils.truthProp,
-    iconPrefix: String,
-    showLoading: _utils.truthProp,
-    errorIcon: {
-      type: String,
-      default: 'photo-fail'
-    },
-    loadingIcon: {
-      type: String,
-      default: 'photo'
-    }
-  },
+  props: imageProps,
   emits: ['load', 'error'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var error = (0, _vue.ref)(false);
     var loading = (0, _vue.ref)(true);
     var imageRef = (0, _vue.ref)();
@@ -83,28 +79,15 @@ var _default = (0, _vue.defineComponent)({
       emit('error', event);
     };
 
-    var renderLoadingIcon = () => {
-      if (slots.loading) {
-        return slots.loading();
-      }
-
-      return (0, _vue.createVNode)(_icon.Icon, {
-        "size": props.iconSize,
-        "name": props.loadingIcon,
-        "class": bem('loading-icon'),
-        "classPrefix": props.iconPrefix
-      }, null);
-    };
-
-    var renderErrorIcon = () => {
-      if (slots.error) {
-        return slots.error();
+    var renderIcon = (name, className, slot) => {
+      if (slot) {
+        return slot();
       }
 
       return (0, _vue.createVNode)(_icon.Icon, {
+        "name": name,
         "size": props.iconSize,
-        "name": props.errorIcon,
-        "class": bem('error-icon'),
+        "class": className,
         "classPrefix": props.iconPrefix
       }, null);
     };
@@ -113,13 +96,13 @@ var _default = (0, _vue.defineComponent)({
       if (loading.value && props.showLoading) {
         return (0, _vue.createVNode)("div", {
           "class": bem('loading')
-        }, [renderLoadingIcon()]);
+        }, [renderIcon(props.loadingIcon, bem('loading-icon'), slots.loading)]);
       }
 
       if (error.value && props.showError) {
         return (0, _vue.createVNode)("div", {
           "class": bem('error')
-        }, [renderErrorIcon()]);
+        }, [renderIcon(props.errorIcon, bem('error-icon'), slots.error)]);
       }
     };
 
@@ -149,17 +132,21 @@ var _default = (0, _vue.defineComponent)({
       }, attrs), null);
     };
 
-    var onLazyLoaded = ({
-      el
-    }) => {
+    var onLazyLoaded = _ref2 => {
+      var {
+        el
+      } = _ref2;
+
       if (el === imageRef.value && loading.value) {
         onLoad();
       }
     };
 
-    var onLazyLoadError = ({
-      el
-    }) => {
+    var onLazyLoadError = _ref3 => {
+      var {
+        el
+      } = _ref3;
+
       if (el === imageRef.value && !error.value) {
         onError();
       }

package/lib/image/index.css

@@ -1 +1 @@
-:root{--van-image-placeholder-text-color:var(--van-gray-6);--van-image-placeholder-font-size:var(--van-font-size-md);--van-image-placeholder-background-color:var(--van-background-color);--van-image-loading-icon-size:32px;--van-image-loading-icon-color:var(--van-gray-4);--van-image-error-icon-size:32px;--van-image-error-icon-color:var(--van-gray-4)}.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:var(--van-border-radius-max)}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-image-placeholder-text-color);font-size:var(--van-image-placeholder-font-size);background-color:var(--van-image-placeholder-background-color)}.van-image__loading-icon{color:var(--van-image-loading-icon-color);font-size:var(--van-image-loading-icon-size)}.van-image__error-icon{color:var(--van-image-error-icon-color);font-size:var(--van-image-error-icon-size)}
+:root{--van-image-placeholder-text-color:var(--van-text-color-2);--van-image-placeholder-font-size:var(--van-font-size-md);--van-image-placeholder-background-color:var(--van-background-color);--van-image-loading-icon-size:32px;--van-image-loading-icon-color:var(--van-gray-4);--van-image-error-icon-size:32px;--van-image-error-icon-color:var(--van-gray-4)}.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:var(--van-border-radius-max)}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-image-placeholder-text-color);font-size:var(--van-image-placeholder-font-size);background:var(--van-image-placeholder-background-color)}.van-image__loading-icon{color:var(--van-image-loading-icon-color);font-size:var(--van-image-loading-icon-size)}.van-image__error-icon{color:var(--van-image-error-icon-color);font-size:var(--van-image-error-icon-size)}

package/lib/image/index.d.ts

@@ -12,17 +12,17 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
         type: BooleanConstructor;
         default: true;
     };
+    errorIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     iconPrefix: StringConstructor;
     showLoading: {
         type: BooleanConstructor;
         default: true;
     };
-    errorIcon: {
-        type: StringConstructor;
-        default: string;
-    };
     loadingIcon: {
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
         default: string;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "load")[], "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<{
@@ -36,26 +36,26 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
     lazyLoad?: unknown;
     iconSize?: unknown;
     showError?: unknown;
+    errorIcon?: unknown;
     iconPrefix?: unknown;
     showLoading?: unknown;
-    errorIcon?: unknown;
     loadingIcon?: unknown;
 } & {
     round: boolean;
     showError: boolean;
     lazyLoad: boolean;
-    showLoading: boolean;
     errorIcon: string;
+    showLoading: boolean;
     loadingIcon: string;
 } & {
-    iconPrefix?: string | undefined;
+    width?: string | number | undefined;
     height?: string | number | undefined;
+    iconPrefix?: string | undefined;
     alt?: string | undefined;
     src?: string | undefined;
-    width?: string | number | undefined;
     iconSize?: string | number | undefined;
-    radius?: string | number | undefined;
     fit?: import("./Image").ImageFit | undefined;
+    radius?: string | number | undefined;
 }> & {
     onLoad?: ((...args: any[]) => any) | undefined;
     onError?: ((...args: any[]) => any) | undefined;
@@ -63,9 +63,9 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
     round: boolean;
     showError: boolean;
     lazyLoad: boolean;
-    showLoading: boolean;
     errorIcon: string;
+    showLoading: boolean;
     loadingIcon: string;
 }>>;
 export default Image;
-export type { ImageFit } from './Image';
+export type { ImageFit, ImageProps } from './Image';

package/lib/image/index.less

@@ -42,7 +42,7 @@
     justify-content: center;
     color: var(--van-image-placeholder-text-color);
     font-size: var(--van-image-placeholder-font-size);
-    background-color: var(--van-image-placeholder-background-color);
+    background: var(--van-image-placeholder-background-color);
   }
 
   &__loading-icon {

package/lib/image/var.less

@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@image-placeholder-text-color: var(--van-gray-6);
+@image-placeholder-text-color: var(--van-text-color-2);
 @image-placeholder-font-size: var(--van-font-size-md);
 @image-placeholder-background-color: var(--van-background-color);
 @image-loading-icon-size: 32px;