vant 3.2.5 → 3.3.0

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: _utils.numericProp,
-    iconColor: String,
-    iconPrefix: 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

@@ -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,3 +1,17 @@
+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: {

package/lib/icon/Icon.js

@@ -15,21 +15,24 @@ var [name, bem] = (0, _utils.createNamespace)('icon');
 
 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,
-    tag: (0, _utils.makeStringProp)('i'),
-    name: String,
-    size: _utils.numericProp,
-    badge: _utils.numericProp,
-    color: String,
-    classPrefix: String
-  },
+  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

@@ -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,5 +1,34 @@
-import { PropType } from 'vue';
+import { PropType, ExtractPropTypes } from 'vue';
 export declare type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+declare const imageProps: {
+    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: 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;
@@ -56,8 +85,8 @@ declare const _default: import("vue").DefineComponent<{
     alt?: string | undefined;
     src?: string | 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;

package/lib/image/Image.js

@@ -12,31 +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: _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')
-  },
+  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)();
@@ -44,15 +46,10 @@ var _default = (0, _vue.defineComponent)({
       $Lazyload
     } = (0, _vue.getCurrentInstance)().proxy;
     var style = (0, _vue.computed)(() => {
-      var style = {};
-
-      if ((0, _utils.isDef)(props.width)) {
-        style.width = (0, _utils.addUnit)(props.width);
-      }
-
-      if ((0, _utils.isDef)(props.height)) {
-        style.height = (0, _utils.addUnit)(props.height);
-      }
+      var style = {
+        width: (0, _utils.addUnit)(props.width),
+        height: (0, _utils.addUnit)(props.height)
+      };
 
       if ((0, _utils.isDef)(props.radius)) {
         style.overflow = 'hidden';
@@ -77,28 +74,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);
     };
@@ -107,13 +91,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)]);
       }
     };
 
@@ -143,17 +127,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

@@ -54,8 +54,8 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
     alt?: string | undefined;
     src?: string | 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;
@@ -68,4 +68,4 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
     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;

package/lib/image-preview/ImagePreview.d.ts

@@ -1,7 +1,7 @@
 import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 import { PopupCloseIconPosition } from '../popup';
-declare const props: {
+declare const imagePreviewProps: {
     show: BooleanConstructor;
     loop: {
         type: BooleanConstructor;
@@ -54,7 +54,7 @@ declare const props: {
         default: PopupCloseIconPosition;
     };
 };
-export declare type ImagePreviewProps = ExtractPropTypes<typeof props>;
+export declare type ImagePreviewProps = ExtractPropTypes<typeof imagePreviewProps>;
 declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
     loop: {

package/lib/image-preview/ImagePreview.js

@@ -25,7 +25,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('image-preview');
-var props = {
+var popupProps = ['show', 'transition', 'overlayStyle', 'closeOnPopstate'];
+var imagePreviewProps = {
   show: Boolean,
   loop: _utils.truthProp,
   images: (0, _utils.makeArrayProp)(),
@@ -48,15 +49,15 @@ var props = {
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props,
+  props: imagePreviewProps,
   emits: ['scale', 'close', 'closed', 'change', 'update:show'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var swipeRef = (0, _vue.ref)();
-    var windowSize = (0, _use.useWindowSize)();
     var state = (0, _vue.reactive)({
       active: 0,
       rootWidth: 0,
@@ -77,8 +78,7 @@ var _default = (0, _vue.defineComponent)({
     var updateShow = show => emit('update:show', show);
 
     var emitClose = () => {
-      (0, _utils.callInterceptor)({
-        interceptor: props.beforeClose,
+      (0, _utils.callInterceptor)(props.beforeClose, {
         args: [state.active],
         done: () => updateShow(false)
       });
@@ -138,7 +138,7 @@ var _default = (0, _vue.defineComponent)({
         return (0, _vue.createVNode)(_icon.Icon, {
           "role": "button",
           "name": props.closeIcon,
-          "class": bem('close-icon', props.closeIconPosition),
+          "class": [bem('close-icon', props.closeIconPosition), _utils.HAPTICS_FEEDBACK],
           "onClick": emitClose
         }, null);
       }
@@ -156,7 +156,7 @@ var _default = (0, _vue.defineComponent)({
       swipeTo
     });
     (0, _vue.onMounted)(resize);
-    (0, _vue.watch)([windowSize.width, windowSize.height], resize);
+    (0, _vue.watch)([_utils.windowWidth, _utils.windowHeight], resize);
     (0, _vue.watch)(() => props.startPosition, value => setActive(+value));
     (0, _vue.watch)(() => props.show, value => {
       var {
@@ -182,10 +182,9 @@ var _default = (0, _vue.defineComponent)({
     return () => (0, _vue.createVNode)(_popup.Popup, (0, _vue.mergeProps)({
       "class": [bem(), props.className],
       "overlayClass": bem('overlay'),
-      "onClosed": onClosed
-    }, (0, _utils.pick)(props, ['show', 'transition', 'overlayStyle', 'closeOnPopstate']), {
-      'onUpdate:show': updateShow
-    }), {
+      "onClosed": onClosed,
+      "onUpdate:show": updateShow
+    }, (0, _utils.pick)(props, popupProps)), {
       default: () => [renderClose(), renderImages(), renderIndex(), renderCover()]
     });
   }

package/lib/image-preview/ImagePreviewItem.js

@@ -34,9 +34,10 @@ var _default = (0, _vue.defineComponent)({
   },
   emits: ['scale', 'close'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      emit
+    } = _ref;
     var state = (0, _vue.reactive)({
       scale: 1,
       moveX: 0,

package/lib/image-preview/function-call.js

@@ -52,15 +52,19 @@ function initInstance() {
       };
 
       return () => (0, _vue.createVNode)(_ImagePreview.default, (0, _vue.mergeProps)(state, {
-        onClosed,
-        'onUpdate:show': toggle
+        "onClosed": onClosed,
+        "onUpdate:show": toggle
       }), null);
     }
 
   }));
 }
 
-var ImagePreview = (options, startPosition = 0) => {
+var ImagePreview = function (options, startPosition) {
+  if (startPosition === void 0) {
+    startPosition = 0;
+  }
+
   /* istanbul ignore if */
   if (!_utils.inBrowser) {
     return;

package/lib/image-preview/index.css

@@ -1 +1 @@
-:root{--van-image-preview-index-text-color:var(--van-white);--van-image-preview-index-font-size:var(--van-font-size-md);--van-image-preview-index-line-height:var(--van-line-height-md);--van-image-preview-index-text-shadow:0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background-color:rgba(0, 0, 0, 0.9);--van-image-preview-close-icon-size:22px;--van-image-preview-close-icon-color:var(--van-gray-5);--van-image-preview-close-icon-active-color:var(--van-gray-6);--van-image-preview-close-icon-margin:var(--van-padding-md);--van-image-preview-close-icon-z-index:1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%,0)}.van-image-preview__overlay{background-color:var(--van-image-preview-overlay-background-color)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size);cursor:pointer}.van-image-preview__close-icon:active{color:var(--van-image-preview-close-icon-active-color)}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}
+:root{--van-image-preview-index-text-color:var(--van-white);--van-image-preview-index-font-size:var(--van-font-size-md);--van-image-preview-index-line-height:var(--van-line-height-md);--van-image-preview-index-text-shadow:0 1px 1px var(--van-gray-8);--van-image-preview-overlay-background-color:rgba(0, 0, 0, 0.9);--van-image-preview-close-icon-size:22px;--van-image-preview-close-icon-color:var(--van-gray-5);--van-image-preview-close-icon-margin:var(--van-padding-md);--van-image-preview-close-icon-z-index:1}.van-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transform:none}.van-image-preview__swipe{height:100%}.van-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.van-image-preview__cover{position:absolute;top:0;left:0}.van-image-preview__image{width:100%;transition-property:transform}.van-image-preview__image--vertical{width:auto;height:100%}.van-image-preview__image img{-webkit-user-drag:none}.van-image-preview__image .van-image__error{top:30%;height:40%}.van-image-preview__image .van-image__error-icon{font-size:36px}.van-image-preview__image .van-image__loading{background-color:transparent}.van-image-preview__index{position:absolute;top:var(--van-padding-md);left:50%;color:var(--van-image-preview-index-text-color);font-size:var(--van-image-preview-index-font-size);line-height:var(--van-image-preview-index-line-height);text-shadow:var(--van-image-preview-index-text-shadow);transform:translate(-50%,0)}.van-image-preview__overlay{background:var(--van-image-preview-overlay-background-color)}.van-image-preview__close-icon{position:absolute;z-index:var(--van-image-preview-close-icon-z-index);color:var(--van-image-preview-close-icon-color);font-size:var(--van-image-preview-close-icon-size);cursor:pointer}.van-image-preview__close-icon--top-left{top:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--top-right{top:var(--van-image-preview-close-icon-margin);right:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-left{bottom:var(--van-image-preview-close-icon-margin);left:var(--van-image-preview-close-icon-margin)}.van-image-preview__close-icon--bottom-right{right:var(--van-image-preview-close-icon-margin);bottom:var(--van-image-preview-close-icon-margin)}

package/lib/image-preview/index.less

@@ -8,7 +8,6 @@
   --van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
   --van-image-preview-close-icon-size: @image-preview-close-icon-size;
   --van-image-preview-close-icon-color: @image-preview-close-icon-color;
-  --van-image-preview-close-icon-active-color: @image-preview-close-icon-active-color;
   --van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
   --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
 }
@@ -81,7 +80,7 @@
   }
 
   &__overlay {
-    background-color: var(--van-image-preview-overlay-background-color);
+    background: var(--van-image-preview-overlay-background-color);
   }
 
   &__close-icon {
@@ -91,10 +90,6 @@
     font-size: var(--van-image-preview-close-icon-size);
     cursor: pointer;
 
-    &:active {
-      color: var(--van-image-preview-close-icon-active-color);
-    }
-
     &--top-left {
       top: var(--van-image-preview-close-icon-margin);
       left: var(--van-image-preview-close-icon-margin);

package/lib/image-preview/var.less

@@ -7,6 +7,5 @@
 @image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
 @image-preview-close-icon-size: 22px;
 @image-preview-close-icon-color: var(--van-gray-5);
-@image-preview-close-icon-active-color: var(--van-gray-6);
 @image-preview-close-icon-margin: var(--van-padding-md);
 @image-preview-close-icon-z-index: 1;

package/lib/index-anchor/IndexAnchor.d.ts

@@ -1,3 +1,8 @@
+import { ExtractPropTypes } from 'vue';
+declare const indexAnchorProps: {
+    index: (NumberConstructor | StringConstructor)[];
+};
+export declare type IndexAnchorProps = ExtractPropTypes<typeof indexAnchorProps>;
 declare const _default: import("vue").DefineComponent<{
     index: (NumberConstructor | 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<{

package/lib/index-anchor/IndexAnchor.js

@@ -18,16 +18,18 @@ var _useExpose = require("../composables/use-expose");
 // Utils
 // Composables
 var [name, bem] = (0, _utils.createNamespace)('index-anchor');
+var indexAnchorProps = {
+  index: _utils.numericProp
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    index: _utils.numericProp
-  },
+  props: indexAnchorProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var state = (0, _vue.reactive)({
       top: 0,
       left: null,

package/lib/index-anchor/index.css

@@ -1 +1 @@
-:root{--van-index-anchor-z-index:1;--van-index-anchor-padding:0 var(--van-padding-md);--van-index-anchor-text-color:var(--van-text-color);--van-index-anchor-font-weight:var(--van-font-weight-bold);--van-index-anchor-font-size:var(--van-font-size-md);--van-index-anchor-line-height:32px;--van-index-anchor-background-color:transparent;--van-index-anchor-sticky-text-color:var(--van-danger-color);--van-index-anchor-sticky-background-color:var(--van-white)}.van-index-anchor{z-index:var(--van-index-anchor-z-index);box-sizing:border-box;padding:var(--van-index-anchor-padding);color:var(--van-index-anchor-text-color);font-weight:var(--van-index-anchor-font-weight);font-size:var(--van-index-anchor-font-size);line-height:var(--van-index-anchor-line-height);background-color:var(--van-index-anchor-background-color)}.van-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--van-index-anchor-sticky-text-color);background-color:var(--van-index-anchor-sticky-background-color)}
+:root{--van-index-anchor-z-index:1;--van-index-anchor-padding:0 var(--van-padding-md);--van-index-anchor-text-color:var(--van-text-color);--van-index-anchor-font-weight:var(--van-font-weight-bold);--van-index-anchor-font-size:var(--van-font-size-md);--van-index-anchor-line-height:32px;--van-index-anchor-background-color:transparent;--van-index-anchor-sticky-text-color:var(--van-danger-color);--van-index-anchor-sticky-background-color:var(--van-background-color-light)}.van-index-anchor{z-index:var(--van-index-anchor-z-index);box-sizing:border-box;padding:var(--van-index-anchor-padding);color:var(--van-index-anchor-text-color);font-weight:var(--van-index-anchor-font-weight);font-size:var(--van-index-anchor-font-size);line-height:var(--van-index-anchor-line-height);background:var(--van-index-anchor-background-color)}.van-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--van-index-anchor-sticky-text-color);background:var(--van-index-anchor-sticky-background-color)}

package/lib/index-anchor/index.d.ts

@@ -6,3 +6,4 @@ export declare const IndexAnchor: import("../utils").WithInstall<import("vue").D
     index?: string | number | undefined;
 }>, {}>>;
 export default IndexAnchor;
+export type { IndexAnchorProps } from './IndexAnchor';

package/lib/index-anchor/index.less

@@ -20,7 +20,7 @@
   font-weight: var(--van-index-anchor-font-weight);
   font-size: var(--van-index-anchor-font-size);
   line-height: var(--van-index-anchor-line-height);
-  background-color: var(--van-index-anchor-background-color);
+  background: var(--van-index-anchor-background-color);
 
   &--sticky {
     position: fixed;
@@ -28,6 +28,6 @@
     right: 0;
     left: 0;
     color: var(--van-index-anchor-sticky-text-color);
-    background-color: var(--van-index-anchor-sticky-background-color);
+    background: var(--van-index-anchor-sticky-background-color);
   }
 }

package/lib/index-anchor/var.less

@@ -8,4 +8,4 @@
 @index-anchor-line-height: 32px;
 @index-anchor-background-color: transparent;
 @index-anchor-sticky-text-color: var(--van-danger-color);
-@index-anchor-sticky-background-color: var(--van-white);
+@index-anchor-sticky-background-color: var(--van-background-color-light);

package/lib/index-bar/IndexBar.d.ts

@@ -1,7 +1,7 @@
 import { PropType, InjectionKey, ExtractPropTypes } from 'vue';
 import { IndexBarProvide } from './types';
 declare function genAlphabet(): string[];
-declare const props: {
+declare const indexBarProps: {
     sticky: {
         type: BooleanConstructor;
         default: true;
@@ -18,7 +18,7 @@ declare const props: {
         default: typeof genAlphabet;
     };
 };
-export declare type IndexBarProps = ExtractPropTypes<typeof props>;
+export declare type IndexBarProps = ExtractPropTypes<typeof indexBarProps>;
 export declare const INDEX_BAR_KEY: InjectionKey<IndexBarProvide>;
 declare const _default: import("vue").DefineComponent<{
     sticky: {