vant 3.2.6 → 3.3.1

package/lib/pagination/Pagination.js

@@ -15,25 +15,28 @@ var makePage = (number, text, active) => ({
   active
 });
 
+var paginationProps = {
+  mode: (0, _utils.makeStringProp)('multi'),
+  prevText: String,
+  nextText: String,
+  pageCount: (0, _utils.makeNumericProp)(0),
+  modelValue: (0, _utils.makeNumberProp)(0),
+  totalItems: (0, _utils.makeNumericProp)(0),
+  showPageSize: (0, _utils.makeNumericProp)(5),
+  itemsPerPage: (0, _utils.makeNumericProp)(10),
+  forceEllipses: Boolean
+};
+
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    mode: (0, _utils.makeStringProp)('multi'),
-    prevText: String,
-    nextText: String,
-    pageCount: (0, _utils.makeNumericProp)(0),
-    modelValue: (0, _utils.makeNumberProp)(0),
-    totalItems: (0, _utils.makeNumericProp)(0),
-    showPageSize: (0, _utils.makeNumericProp)(5),
-    itemsPerPage: (0, _utils.makeNumericProp)(10),
-    forceEllipses: Boolean
-  },
+  props: paginationProps,
   emits: ['change', 'update:modelValue'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var count = (0, _vue.computed)(() => {
       var {
         pageCount,
@@ -50,12 +53,7 @@ var _default = (0, _vue.defineComponent)({
       var {
         modelValue,
         forceEllipses
-      } = props;
-
-      if (props.mode !== 'multi') {
-        return items;
-      } // Default page limits
-
+      } = props; // Default page limits
 
       var startPage = 1;
       var endPage = pageCount;
@@ -94,59 +92,82 @@ var _default = (0, _vue.defineComponent)({
       return items;
     });
 
-    var select = (page, emitChange) => {
-      page = Math.min(count.value, Math.max(1, page));
+    var updateModelValue = (value, emitChange) => {
+      value = (0, _utils.clamp)(value, 1, count.value);
 
-      if (props.modelValue !== page) {
-        emit('update:modelValue', page);
+      if (props.modelValue !== value) {
+        emit('update:modelValue', value);
 
         if (emitChange) {
-          emit('change', page);
+          emit('change', value);
         }
       }
-    };
+    }; // format modelValue
 
-    (0, _vue.watch)(() => props.modelValue, value => {
-      select(value);
-    }, {
-      immediate: true
-    });
-
-    var renderDesc = () => {
-      if (props.mode !== 'multi') {
-        return (0, _vue.createVNode)("li", {
-          "class": bem('page-desc')
-        }, [slots.pageDesc ? slots.pageDesc() : props.modelValue + "/" + count.value]);
-      }
-    };
 
-    return () => {
-      var value = props.modelValue;
-      var simple = props.mode !== 'multi';
+    (0, _vue.watchEffect)(() => updateModelValue(props.modelValue));
 
-      var onSelect = value => () => select(value, true);
+    var renderDesc = () => (0, _vue.createVNode)("li", {
+      "class": bem('page-desc')
+    }, [slots.pageDesc ? slots.pageDesc() : props.modelValue + "/" + count.value]);
 
-      return (0, _vue.createVNode)("ul", {
-        "class": bem({
-          simple
-        })
-      }, [(0, _vue.createVNode)("li", {
-        "class": [bem('item', {
-          disabled: value === 1
-        }), bem('prev'), _utils.BORDER],
-        "onClick": onSelect(value - 1)
-      }, [slots['prev-text'] ? slots['prev-text']() : props.prevText || t('prev')]), pages.value.map(page => (0, _vue.createVNode)("li", {
+    var renderPrevButton = () => {
+      var {
+        mode,
+        modelValue
+      } = props;
+      var slot = slots['prev-text'];
+      var disabled = modelValue === 1;
+      return (0, _vue.createVNode)("li", {
         "class": [bem('item', {
-          active: page.active
-        }), bem('page'), _utils.BORDER],
-        "onClick": onSelect(page.number)
-      }, [slots.page ? slots.page(page) : page.text])), renderDesc(), (0, _vue.createVNode)("li", {
+          disabled,
+          border: mode === 'simple',
+          prev: true
+        }), _utils.BORDER_SURROUND]
+      }, [(0, _vue.createVNode)("button", {
+        "type": "button",
+        "disabled": disabled,
+        "onClick": () => updateModelValue(modelValue - 1)
+      }, [slot ? slot() : props.prevText || t('prev')])]);
+    };
+
+    var renderNextButton = () => {
+      var {
+        mode,
+        modelValue
+      } = props;
+      var slot = slots['next-text'];
+      var disabled = modelValue === count.value;
+      return (0, _vue.createVNode)("li", {
         "class": [bem('item', {
-          disabled: value === count.value
-        }), bem('next'), _utils.BORDER],
-        "onClick": onSelect(value + 1)
-      }, [slots['next-text'] ? slots['next-text']() : props.nextText || t('next')])]);
+          disabled,
+          border: mode === 'simple',
+          next: true
+        }), _utils.BORDER_SURROUND]
+      }, [(0, _vue.createVNode)("button", {
+        "type": "button",
+        "disabled": disabled,
+        "onClick": () => updateModelValue(modelValue + 1)
+      }, [slot ? slot() : props.nextText || t('next')])]);
     };
+
+    var renderPages = () => pages.value.map(page => (0, _vue.createVNode)("li", {
+      "class": [bem('item', {
+        active: page.active,
+        page: true
+      }), _utils.BORDER_SURROUND]
+    }, [(0, _vue.createVNode)("button", {
+      "type": "button",
+      "aria-current": page.active || undefined,
+      "onClick": () => updateModelValue(page.number)
+    }, [slots.page ? slots.page(page) : page.text])]));
+
+    return () => (0, _vue.createVNode)("nav", {
+      "role": "navigation",
+      "class": bem()
+    }, [(0, _vue.createVNode)("ul", {
+      "class": bem('items')
+    }, [renderPrevButton(), props.mode === 'simple' ? renderDesc() : renderPages(), renderNextButton()])]);
   }
 
 });

package/lib/pagination/index.css

@@ -1 +1 @@
-:root{--van-pagination-height:40px;--van-pagination-font-size:var(--van-font-size-md);--van-pagination-item-width:36px;--van-pagination-item-default-color:var(--van-primary-color);--van-pagination-item-disabled-color:var(--van-gray-7);--van-pagination-item-disabled-background-color:var(--van-background-color);--van-pagination-background-color:var(--van-white);--van-pagination-desc-color:var(--van-gray-7);--van-pagination-disabled-opacity:var(--van-disabled-opacity)}.van-pagination{display:flex;font-size:var(--van-pagination-font-size)}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item::after{border-width:var(--van-border-width-base) 0 var(--van-border-width-base) var(--van-border-width-base)}.van-pagination__item:last-child::after{border-right-width:var(--van-border-width-base)}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__next,.van-pagination__prev{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--disabled,.van-pagination__item--disabled:active{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background-color);cursor:not-allowed;opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page{flex-grow:0}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}.van-pagination--simple .van-pagination__next::after,.van-pagination--simple .van-pagination__prev::after{border-width:var(--van-border-width-base)}
+:root{--van-pagination-height:40px;--van-pagination-font-size:var(--van-font-size-md);--van-pagination-item-width:36px;--van-pagination-item-default-color:var(--van-primary-color);--van-pagination-item-disabled-color:var(--van-gray-7);--van-pagination-item-disabled-background-color:var(--van-background-color);--van-pagination-background-color:var(--van-background-color-light);--van-pagination-desc-color:var(--van-gray-7);--van-pagination-disabled-opacity:var(--van-disabled-opacity)}.van-pagination{font-size:var(--van-pagination-font-size)}.van-pagination__items{display:flex}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item button{flex:1;height:100%;border:none;padding:0;background:0 0}.van-pagination__item button[disabled]{cursor:not-allowed}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item:not(:last-child)::after{border-right-width:0}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item--page{flex-grow:0}.van-pagination__item--next,.van-pagination__item--prev{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--border::after{border-width:var(--van-border-width-base)}.van-pagination__item--disabled{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background-color);opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}

package/lib/pagination/index.d.ts

@@ -60,4 +60,4 @@ export declare const Pagination: import("../utils").WithInstall<import("vue").De
     forceEllipses: boolean;
 }>>;
 export default Pagination;
-export type { PaginationMode } from './Pagination';
+export type { PaginationMode, PaginationProps } from './Pagination';

package/lib/pagination/index.less

@@ -13,9 +13,12 @@
 }
 
 .van-pagination {
-  display: flex;
   font-size: var(--van-pagination-font-size);
 
+  &__items {
+    display: flex;
+  }
+
   &__item,
   &__page-desc {
     display: flex;
@@ -33,58 +36,56 @@
     cursor: pointer;
     user-select: none;
 
+    button {
+      flex: 1;
+      height: 100%;
+      border: none;
+      padding: 0;
+      background: transparent;
+
+      &[disabled] {
+        cursor: not-allowed;
+      }
+    }
+
     &:active {
       color: var(--van-white);
       background-color: var(--van-pagination-item-default-color);
     }
 
-    &::after {
-      border-width: var(--van-border-width-base) 0 var(--van-border-width-base)
-        var(--van-border-width-base);
-    }
-
-    &:last-child::after {
-      border-right-width: var(--van-border-width-base);
+    &:not(:last-child)::after {
+      border-right-width: 0;
     }
 
     &--active {
       color: var(--van-white);
       background-color: var(--van-pagination-item-default-color);
     }
-  }
 
-  &__prev,
-  &__next {
-    padding: 0 var(--van-padding-base);
-    cursor: pointer;
-  }
+    &--page {
+      flex-grow: 0;
+    }
 
-  &__item--disabled {
-    &,
-    &:active {
+    &--prev,
+    &--next {
+      padding: 0 var(--van-padding-base);
+      cursor: pointer;
+    }
+
+    &--border::after {
+      border-width: var(--van-border-width-base);
+    }
+
+    &--disabled {
       color: var(--van-pagination-item-disabled-color);
       background-color: var(--van-pagination-item-disabled-background-color);
-      cursor: not-allowed;
       opacity: var(--van-pagination-disabled-opacity);
     }
   }
 
-  &__page {
-    flex-grow: 0;
-  }
-
   &__page-desc {
     flex: 1;
     height: var(--van-pagination-height);
     color: var(--van-pagination-desc-color);
   }
-
-  &--simple {
-    .van-pagination__prev,
-    .van-pagination__next {
-      &::after {
-        border-width: var(--van-border-width-base);
-      }
-    }
-  }
 }

package/lib/pagination/var.less

@@ -6,6 +6,6 @@
 @pagination-item-default-color: var(--van-primary-color);
 @pagination-item-disabled-color: var(--van-gray-7);
 @pagination-item-disabled-background-color: var(--van-background-color);
-@pagination-background-color: var(--van-white);
+@pagination-background-color: var(--van-background-color-light);
 @pagination-desc-color: var(--van-gray-7);
 @pagination-disabled-opacity: var(--van-disabled-opacity);

package/lib/password-input/PasswordInput.d.ts

@@ -1,3 +1,23 @@
+import { ExtractPropTypes } from 'vue';
+declare const passwordInputProps: {
+    info: StringConstructor;
+    mask: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    value: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    gutter: (NumberConstructor | StringConstructor)[];
+    length: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    focused: BooleanConstructor;
+    errorInfo: StringConstructor;
+};
+export declare type PasswordInputProps = ExtractPropTypes<typeof passwordInputProps>;
 declare const _default: import("vue").DefineComponent<{
     info: StringConstructor;
     mask: {
@@ -29,9 +49,9 @@ declare const _default: import("vue").DefineComponent<{
     value: string;
     focused: boolean;
 } & {
-    errorInfo?: string | undefined;
     gutter?: string | number | undefined;
     info?: string | undefined;
+    errorInfo?: string | undefined;
 }> & {
     onFocus?: ((...args: any[]) => any) | undefined;
 }, {

package/lib/password-input/PasswordInput.js

@@ -8,23 +8,26 @@ var _vue = require("vue");
 var _utils = require("../utils");
 
 var [name, bem] = (0, _utils.createNamespace)('password-input');
+var passwordInputProps = {
+  info: String,
+  mask: _utils.truthProp,
+  value: (0, _utils.makeStringProp)(''),
+  gutter: _utils.numericProp,
+  length: (0, _utils.makeNumericProp)(6),
+  focused: Boolean,
+  errorInfo: String
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    info: String,
-    mask: _utils.truthProp,
-    value: (0, _utils.makeStringProp)(''),
-    gutter: _utils.numericProp,
-    length: (0, _utils.makeNumericProp)(6),
-    focused: Boolean,
-    errorInfo: String
-  },
+  props: passwordInputProps,
   emits: ['focus'],
 
-  setup(props, {
-    emit
-  }) {
+  setup(props, _ref) {
+    var {
+      emit
+    } = _ref;
+
     var onTouchStart = event => {
       event.stopPropagation();
       emit('focus', event);

package/lib/password-input/index.css

@@ -1 +1 @@
-:root{--van-password-input-height:50px;--van-password-input-margin:0 var(--van-padding-md);--van-password-input-font-size:20px;--van-password-input-border-radius:6px;--van-password-input-background-color:var(--van-white);--van-password-input-info-color:var(--van-gray-6);--van-password-input-info-font-size:var(--van-font-size-md);--van-password-input-error-info-color:var(--van-danger-color);--van-password-input-dot-size:10px;--van-password-input-dot-color:var(--van-black);--van-password-input-text-color:var(--van-text-color);--van-password-input-cursor-color:var(--van-text-color);--van-password-input-cursor-width:1px;--van-password-input-cursor-height:40%;--van-password-input-cursor-animation-duration:1s}.van-password-input{position:relative;margin:var(--van-password-input-margin);-webkit-user-select:none;user-select:none}.van-password-input__error-info,.van-password-input__info{margin-top:var(--van-padding-md);font-size:var(--van-password-input-info-font-size);text-align:center}.van-password-input__info{color:var(--van-password-input-info-color)}.van-password-input__error-info{color:var(--van-password-input-error-info-color)}.van-password-input__security{display:flex;width:100%;height:var(--van-password-input-height);cursor:pointer}.van-password-input__security::after{border-radius:var(--van-password-input-border-radius)}.van-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--van-password-input-text-color);font-size:var(--van-password-input-font-size);line-height:1.2;background:var(--van-password-input-background-color)}.van-password-input__security i{position:absolute;top:50%;left:50%;width:var(--van-password-input-dot-size);height:var(--van-password-input-dot-size);background:var(--van-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--van-password-input-cursor-width);height:var(--van-password-input-cursor-height);background:var(--van-password-input-cursor-color);transform:translate(-50%,-50%);animation:var(--van-password-input-cursor-animation-duration) van-cursor-flicker infinite}@keyframes van-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}
+:root{--van-password-input-height:50px;--van-password-input-margin:0 var(--van-padding-md);--van-password-input-font-size:20px;--van-password-input-border-radius:6px;--van-password-input-background-color:var(--van-background-color-light);--van-password-input-info-color:var(--van-text-color-2);--van-password-input-info-font-size:var(--van-font-size-md);--van-password-input-error-info-color:var(--van-danger-color);--van-password-input-dot-size:10px;--van-password-input-dot-color:var(--van-text-color);--van-password-input-text-color:var(--van-text-color);--van-password-input-cursor-color:var(--van-text-color);--van-password-input-cursor-width:1px;--van-password-input-cursor-height:40%;--van-password-input-cursor-animation-duration:1s}.van-password-input{position:relative;margin:var(--van-password-input-margin);-webkit-user-select:none;user-select:none}.van-password-input__error-info,.van-password-input__info{margin-top:var(--van-padding-md);font-size:var(--van-password-input-info-font-size);text-align:center}.van-password-input__info{color:var(--van-password-input-info-color)}.van-password-input__error-info{color:var(--van-password-input-error-info-color)}.van-password-input__security{display:flex;width:100%;height:var(--van-password-input-height);cursor:pointer}.van-password-input__security::after{border-radius:var(--van-password-input-border-radius)}.van-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--van-password-input-text-color);font-size:var(--van-password-input-font-size);line-height:1.2;background:var(--van-password-input-background-color)}.van-password-input__security i{position:absolute;top:50%;left:50%;width:var(--van-password-input-dot-size);height:var(--van-password-input-dot-size);background:var(--van-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--van-password-input-cursor-width);height:var(--van-password-input-cursor-height);background:var(--van-password-input-cursor-color);transform:translate(-50%,-50%);animation:var(--van-password-input-cursor-animation-duration) van-cursor-flicker infinite}@keyframes van-cursor-flicker{from{opacity:0}50%{opacity:1}100%{opacity:0}}

package/lib/password-input/index.d.ts

@@ -29,9 +29,9 @@ export declare const PasswordInput: import("../utils").WithInstall<import("vue")
     value: string;
     focused: boolean;
 } & {
-    errorInfo?: string | undefined;
     gutter?: string | number | undefined;
     info?: string | undefined;
+    errorInfo?: string | undefined;
 }> & {
     onFocus?: ((...args: any[]) => any) | undefined;
 }, {
@@ -41,3 +41,4 @@ export declare const PasswordInput: import("../utils").WithInstall<import("vue")
     focused: boolean;
 }>>;
 export default PasswordInput;
+export type { PasswordInputProps } from './PasswordInput';

package/lib/password-input/var.less

@@ -4,12 +4,12 @@
 @password-input-margin: 0 var(--van-padding-md);
 @password-input-font-size: 20px;
 @password-input-border-radius: 6px;
-@password-input-background-color: var(--van-white);
-@password-input-info-color: var(--van-gray-6);
+@password-input-background-color: var(--van-background-color-light);
+@password-input-info-color: var(--van-text-color-2);
 @password-input-info-font-size: var(--van-font-size-md);
 @password-input-error-info-color: var(--van-danger-color);
 @password-input-dot-size: 10px;
-@password-input-dot-color: var(--van-black);
+@password-input-dot-color: var(--van-text-color);
 @password-input-text-color: var(--van-text-color);
 @password-input-cursor-color: var(--van-text-color);
 @password-input-cursor-width: 1px;

package/lib/picker/Picker.d.ts

@@ -1,6 +1,6 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import type { PickerColumn, PickerOption, PickerFieldNames, PickerToolbarPosition } from './types';
-export declare const pickerProps: {
+export declare const pickerSharedProps: {
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
@@ -24,6 +24,45 @@ export declare const pickerProps: {
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 };
+declare const pickerProps: {
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    itemHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleItemCount: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    columns: {
+        type: PropType<(PickerOption | PickerColumn)[]>;
+        default: () => never[];
+    };
+    valueKey: StringConstructor;
+    defaultIndex: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    toolbarPosition: {
+        type: PropType<PickerToolbarPosition>;
+        default: PickerToolbarPosition;
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+};
 export declare type PickerProps = ExtractPropTypes<typeof pickerProps>;
 declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;

package/lib/picker/Picker.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.pickerProps = exports.default = void 0;
+exports.pickerSharedProps = exports.default = void 0;
 
 var _vue = require("vue");
 
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // Composables
 // Components
 var [name, bem, t] = (0, _utils.createNamespace)('picker');
-var pickerProps = {
+var pickerSharedProps = {
   title: String,
   loading: Boolean,
   readonly: Boolean,
@@ -35,25 +35,28 @@ var pickerProps = {
   cancelButtonText: String,
   confirmButtonText: String
 };
-exports.pickerProps = pickerProps;
+exports.pickerSharedProps = pickerSharedProps;
+var pickerProps = (0, _utils.extend)({}, pickerSharedProps, {
+  columns: (0, _utils.makeArrayProp)(),
+  // @deprecated
+  // should be removed in next major version
+  valueKey: String,
+  defaultIndex: (0, _utils.makeNumericProp)(0),
+  toolbarPosition: (0, _utils.makeStringProp)('top'),
+  columnsFieldNames: Object
+});
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: (0, _utils.extend)({}, pickerProps, {
-    columns: (0, _utils.makeArrayProp)(),
-    // @deprecated
-    // should be removed in next major version
-    valueKey: String,
-    defaultIndex: (0, _utils.makeNumericProp)(0),
-    toolbarPosition: (0, _utils.makeStringProp)('top'),
-    columnsFieldNames: Object
-  }),
+  props: pickerProps,
   emits: ['confirm', 'cancel', 'change'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
+
     if (process.env.NODE_ENV !== 'production') {
       if (slots.default) {
         console.warn('[Vant] Picker: "default" slot is deprecated, please use "toolbar" slot instead.');
@@ -290,7 +293,7 @@ var _default = (0, _vue.defineComponent)({
       var text = props.cancelButtonText || t('cancel');
       return (0, _vue.createVNode)("button", {
         "type": "button",
-        "class": bem('cancel'),
+        "class": [bem('cancel'), _utils.HAPTICS_FEEDBACK],
         "onClick": cancel
       }, [slots.cancel ? slots.cancel() : text]);
     };
@@ -299,7 +302,7 @@ var _default = (0, _vue.defineComponent)({
       var text = props.confirmButtonText || t('confirm');
       return (0, _vue.createVNode)("button", {
         "type": "button",
-        "class": bem('confirm'),
+        "class": [bem('confirm'), _utils.HAPTICS_FEEDBACK],
         "onClick": confirm
       }, [slots.confirm ? slots.confirm() : text]);
     };

package/lib/picker/PickerColumn.js

@@ -53,10 +53,11 @@ var _default = (0, _vue.defineComponent)({
   },
   emits: ['change'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var moving;
     var startOffset;
     var touchStartTime;

package/lib/picker/index.css

@@ -1 +1 @@
-:root{--van-picker-background-color:var(--van-white);--van-picker-toolbar-height:44px;--van-picker-title-font-size:var(--van-font-size-lg);--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-text-link-color);--van-picker-cancel-action-color:var(--van-gray-6);--van-picker-option-font-size:var(--van-font-size-lg);--van-picker-option-padding:0 var(--van-padding-base);--van-picker-option-text-color:var(--van-black);--van-picker-option-disabled-opacity:0.3;--van-picker-loading-icon-color:var(--van-primary-color);--van-picker-loading-mask-color:rgba(255, 255, 255, 0.9)}.van-picker{position:relative;background:var(--van-picker-background-color);-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--van-picker-toolbar-height)}.van-picker__cancel,.van-picker__confirm{height:100%;padding:var(--van-picker-action-padding);font-size:var(--van-picker-action-font-size);background-color:transparent;border:none;cursor:pointer}.van-picker__cancel:active,.van-picker__confirm:active{opacity:var(--van-active-opacity)}.van-picker__confirm{color:var(--van-picker-confirm-action-color)}.van-picker__cancel{color:var(--van-picker-cancel-action-color)}.van-picker__title{max-width:50%;font-weight:var(--van-font-weight-bold);font-size:var(--van-picker-title-font-size);line-height:var(--van-picker-title-line-height);text-align:center}.van-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--van-picker-loading-icon-color);background:var(--van-picker-loading-mask-color)}.van-picker__frame{position:absolute;top:50%;right:var(--van-padding-md);left:var(--van-padding-md);z-index:2;transform:translateY(-50%);pointer-events:none}.van-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.van-picker-column{flex:1;overflow:hidden;font-size:var(--van-picker-option-font-size)}.van-picker-column__wrapper{transition-timing-function:cubic-bezier(0.23,1,0.68,1)}.van-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--van-picker-option-padding);color:var(--van-picker-option-text-color)}.van-picker-column__item--disabled{cursor:not-allowed;opacity:var(--van-picker-option-disabled-opacity)}
+:root{--van-picker-background-color:var(--van-background-color-light);--van-picker-toolbar-height:44px;--van-picker-title-font-size:var(--van-font-size-lg);--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-text-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);--van-picker-option-text-color:var(--van-text-color);--van-picker-option-disabled-opacity:0.3;--van-picker-loading-icon-color:var(--van-primary-color);--van-picker-loading-mask-color:rgba(255, 255, 255, 0.9);--van-picker-mask-color:linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)),linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4))}.van-picker{position:relative;background:var(--van-picker-background-color);-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--van-picker-toolbar-height)}.van-picker__cancel,.van-picker__confirm{height:100%;padding:var(--van-picker-action-padding);font-size:var(--van-picker-action-font-size);background-color:transparent;border:none;cursor:pointer}.van-picker__confirm{color:var(--van-picker-confirm-action-color)}.van-picker__cancel{color:var(--van-picker-cancel-action-color)}.van-picker__title{max-width:50%;font-weight:var(--van-font-weight-bold);font-size:var(--van-picker-title-font-size);line-height:var(--van-picker-title-line-height);text-align:center}.van-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--van-picker-loading-icon-color);background:var(--van-picker-loading-mask-color)}.van-picker__frame{position:absolute;top:50%;right:var(--van-padding-md);left:var(--van-padding-md);z-index:2;transform:translateY(-50%);pointer-events:none}.van-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--van-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.van-picker-column{flex:1;overflow:hidden;font-size:var(--van-picker-option-font-size)}.van-picker-column__wrapper{transition-timing-function:cubic-bezier(0.23,1,0.68,1)}.van-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--van-picker-option-padding);color:var(--van-picker-option-text-color)}.van-picker-column__item--disabled{cursor:not-allowed;opacity:var(--van-picker-option-disabled-opacity)}

package/lib/picker/index.less

@@ -15,6 +15,7 @@
   --van-picker-option-disabled-opacity: @picker-option-disabled-opacity;
   --van-picker-loading-icon-color: @picker-loading-icon-color;
   --van-picker-loading-mask-color: @picker-loading-mask-color;
+  --van-picker-mask-color: @picker-mask-color;
 }
 
 .van-picker {
@@ -37,10 +38,6 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__confirm {
@@ -96,12 +93,7 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(
-        180deg,
-        hsla(0, 0%, 100%, 0.9),
-        hsla(0, 0%, 100%, 0.4)
-      ),
-      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+    background-image: var(--van-picker-mask-color);
     background-repeat: no-repeat;
     background-position: top, bottom;
     // fix rendering failure during animation on safari

package/lib/picker/var.less

@@ -1,16 +1,22 @@
 @import '../style/var.less';
 
-@picker-background-color: var(--van-white);
+@picker-background-color: var(--van-background-color-light);
 @picker-toolbar-height: 44px;
 @picker-title-font-size: var(--van-font-size-lg);
 @picker-title-line-height: var(--van-line-height-md);
 @picker-action-padding: 0 var(--van-padding-md);
 @picker-action-font-size: var(--van-font-size-md);
 @picker-confirm-action-color: var(--van-text-link-color);
-@picker-cancel-action-color: var(--van-gray-6);
+@picker-cancel-action-color: var(--van-text-color-2);
 @picker-option-padding: 0 var(--van-padding-base);
 @picker-option-font-size: var(--van-font-size-lg);
-@picker-option-text-color: var(--van-black);
+@picker-option-text-color: var(--van-text-color);
 @picker-option-disabled-opacity: 0.3;
+@picker-mask-color: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.4)
+  ),
+  linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
 @picker-loading-icon-color: var(--van-primary-color);
 @picker-loading-mask-color: rgba(255, 255, 255, 0.9);