vant 3.2.5 → 3.3.0

package/lib/number-keyboard/NumberKeyboard.js

@@ -17,37 +17,39 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // Composables
 // Components
 var [name, bem] = (0, _utils.createNamespace)('number-keyboard');
+var numberKeyboardProps = {
+  show: Boolean,
+  title: String,
+  theme: (0, _utils.makeStringProp)('default'),
+  zIndex: _utils.numericProp,
+  teleport: [String, Object],
+  maxlength: (0, _utils.makeNumericProp)(Infinity),
+  modelValue: (0, _utils.makeStringProp)(''),
+  transition: _utils.truthProp,
+  blurOnClose: _utils.truthProp,
+  showDeleteKey: _utils.truthProp,
+  randomKeyOrder: Boolean,
+  closeButtonText: String,
+  deleteButtonText: String,
+  closeButtonLoading: Boolean,
+  hideOnClickOutside: _utils.truthProp,
+  safeAreaInsetBottom: _utils.truthProp,
+  extraKey: {
+    type: [String, Array],
+    default: ''
+  }
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    show: Boolean,
-    title: String,
-    theme: (0, _utils.makeStringProp)('default'),
-    zIndex: _utils.numericProp,
-    teleport: [String, Object],
-    maxlength: (0, _utils.makeNumericProp)(Infinity),
-    modelValue: (0, _utils.makeStringProp)(''),
-    transition: _utils.truthProp,
-    blurOnClose: _utils.truthProp,
-    showDeleteKey: _utils.truthProp,
-    randomKeyOrder: Boolean,
-    closeButtonText: String,
-    deleteButtonText: String,
-    closeButtonLoading: Boolean,
-    hideOnClickOutside: _utils.truthProp,
-    safeAreaInsetBottom: _utils.truthProp,
-    extraKey: {
-      type: [String, Array],
-      default: ''
-    }
-  },
+  props: numberKeyboardProps,
   emits: ['show', 'hide', 'blur', 'input', 'close', 'delete', 'update:modelValue'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var root = (0, _vue.ref)();
 
     var genBasicKeys = () => {
@@ -164,7 +166,7 @@ var _default = (0, _vue.defineComponent)({
         "class": bem('title')
       }, [title]), showClose && (0, _vue.createVNode)("button", {
         "type": "button",
-        "class": bem('close'),
+        "class": [bem('close'), _utils.HAPTICS_FEEDBACK],
         "onClick": onClose
       }, [closeButtonText])]);
     };

package/lib/number-keyboard/NumberKeyboardKey.js

@@ -16,14 +16,14 @@ var CollapseIcon = (0, _vue.createVNode)("svg", {
   "class": bem('collapse-icon'),
   "viewBox": "0 0 30 24"
 }, [(0, _vue.createVNode)("path", {
-  "d": "M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z",
+  "d": "M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z",
   "fill": "currentColor"
 }, null)]);
 var DeleteIcon = (0, _vue.createVNode)("svg", {
   "class": bem('delete-icon'),
   "viewBox": "0 0 32 22"
 }, [(0, _vue.createVNode)("path", {
-  "d": "M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z",
+  "d": "M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z",
   "fill": "currentColor"
 }, null)]);
 
@@ -39,10 +39,11 @@ var _default = (0, _vue.defineComponent)({
   },
   emits: ['press'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var active = (0, _vue.ref)(false);
     var touch = (0, _useTouch.useTouch)();
 
@@ -64,7 +65,7 @@ var _default = (0, _vue.defineComponent)({
         // eliminate tap delay on safari
         // see: https://github.com/youzan/vant/issues/6836
         if (!slots.default) {
-          event.preventDefault();
+          (0, _utils.preventDefault)(event);
         }
 
         active.value = false;

package/lib/number-keyboard/index.css

@@ -1 +1 @@
-:root{--van-number-keyboard-background-color:var(--van-gray-2);--van-number-keyboard-key-height:48px;--van-number-keyboard-key-font-size:28px;--van-number-keyboard-key-active-color:var(--van-gray-3);--van-number-keyboard-key-background-color:var(--van-white);--van-number-keyboard-delete-font-size:var(--van-font-size-lg);--van-number-keyboard-title-color:var(--van-gray-7);--van-number-keyboard-title-height:34px;--van-number-keyboard-title-font-size:var(--van-font-size-lg);--van-number-keyboard-close-padding:0 var(--van-padding-md);--van-number-keyboard-close-color:var(--van-text-link-color);--van-number-keyboard-close-font-size:var(--van-font-size-md);--van-number-keyboard-button-text-color:var(--van-white);--van-number-keyboard-button-background-color:var(--van-primary-color);--van-number-keyboard-z-index:100}.van-number-keyboard{position:fixed;bottom:0;left:0;z-index:var(--van-number-keyboard-z-index);width:100%;padding-bottom:22px;background-color:var(--van-number-keyboard-background-color);-webkit-user-select:none;user-select:none}.van-number-keyboard--with-title{border-radius:20px 20px 0 0}.van-number-keyboard__header{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:content-box;height:var(--van-number-keyboard-title-height);padding-top:6px;color:var(--van-number-keyboard-title-color);font-size:var(--van-number-keyboard-title-font-size)}.van-number-keyboard__title{display:inline-block;font-weight:400}.van-number-keyboard__title-left{position:absolute;left:0}.van-number-keyboard__body{display:flex;padding:6px 0 0 6px}.van-number-keyboard__keys{display:flex;flex:3;flex-wrap:wrap}.van-number-keyboard__close{position:absolute;right:0;height:100%;padding:var(--van-number-keyboard-close-padding);color:var(--van-number-keyboard-close-color);font-size:var(--van-number-keyboard-close-font-size);background-color:transparent;border:none;cursor:pointer}.van-number-keyboard__close:active{opacity:var(--van-active-opacity)}.van-number-keyboard__sidebar{display:flex;flex:1;flex-direction:column}.van-number-keyboard--unfit{padding-bottom:0}.van-key{display:flex;align-items:center;justify-content:center;height:var(--van-number-keyboard-key-height);font-size:var(--van-number-keyboard-key-font-size);line-height:1.5;background-color:var(--van-number-keyboard-key-background-color);border-radius:var(--van-border-radius-lg);cursor:pointer}.van-key--large{position:absolute;top:0;right:6px;bottom:6px;left:0;height:auto}.van-key--blue,.van-key--delete{font-size:var(--van-number-keyboard-delete-font-size)}.van-key--active{background-color:var(--van-number-keyboard-key-active-color)}.van-key--blue{color:var(--van-number-keyboard-button-text-color);background-color:var(--van-number-keyboard-button-background-color)}.van-key--blue.van-key--active{opacity:var(--van-active-opacity)}.van-key__wrapper{position:relative;flex:1;flex-basis:33%;box-sizing:border-box;padding:0 6px 6px 0}.van-key__wrapper--wider{flex-basis:66%}.van-key__delete-icon{width:32px;height:22px}.van-key__collapse-icon{width:30px;height:24px}.van-key__loading-icon{color:var(--van-number-keyboard-button-text-color)}
+:root{--van-number-keyboard-background-color:var(--van-gray-2);--van-number-keyboard-key-height:48px;--van-number-keyboard-key-font-size:28px;--van-number-keyboard-key-active-color:var(--van-gray-3);--van-number-keyboard-key-background-color:var(--van-background-color-light);--van-number-keyboard-delete-font-size:var(--van-font-size-lg);--van-number-keyboard-title-color:var(--van-gray-7);--van-number-keyboard-title-height:34px;--van-number-keyboard-title-font-size:var(--van-font-size-lg);--van-number-keyboard-close-padding:0 var(--van-padding-md);--van-number-keyboard-close-color:var(--van-text-link-color);--van-number-keyboard-close-font-size:var(--van-font-size-md);--van-number-keyboard-button-text-color:var(--van-white);--van-number-keyboard-button-background-color:var(--van-primary-color);--van-number-keyboard-z-index:100}.van-number-keyboard{position:fixed;bottom:0;left:0;z-index:var(--van-number-keyboard-z-index);width:100%;padding-bottom:22px;background:var(--van-number-keyboard-background-color);-webkit-user-select:none;user-select:none}.van-number-keyboard--with-title{border-radius:20px 20px 0 0}.van-number-keyboard__header{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:content-box;height:var(--van-number-keyboard-title-height);padding-top:6px;color:var(--van-number-keyboard-title-color);font-size:var(--van-number-keyboard-title-font-size)}.van-number-keyboard__title{display:inline-block;font-weight:400}.van-number-keyboard__title-left{position:absolute;left:0}.van-number-keyboard__body{display:flex;padding:6px 0 0 6px}.van-number-keyboard__keys{display:flex;flex:3;flex-wrap:wrap}.van-number-keyboard__close{position:absolute;right:0;height:100%;padding:var(--van-number-keyboard-close-padding);color:var(--van-number-keyboard-close-color);font-size:var(--van-number-keyboard-close-font-size);background-color:transparent;border:none;cursor:pointer}.van-number-keyboard__sidebar{display:flex;flex:1;flex-direction:column}.van-number-keyboard--unfit{padding-bottom:0}.van-key{display:flex;align-items:center;justify-content:center;height:var(--van-number-keyboard-key-height);font-size:var(--van-number-keyboard-key-font-size);line-height:1.5;background:var(--van-number-keyboard-key-background-color);border-radius:var(--van-border-radius-lg);cursor:pointer}.van-key--large{position:absolute;top:0;right:6px;bottom:6px;left:0;height:auto}.van-key--blue,.van-key--delete{font-size:var(--van-number-keyboard-delete-font-size)}.van-key--active{background-color:var(--van-number-keyboard-key-active-color)}.van-key--blue{color:var(--van-number-keyboard-button-text-color);background:var(--van-number-keyboard-button-background-color)}.van-key--blue.van-key--active{opacity:var(--van-active-opacity)}.van-key__wrapper{position:relative;flex:1;flex-basis:33%;box-sizing:border-box;padding:0 6px 6px 0}.van-key__wrapper--wider{flex-basis:66%}.van-key__delete-icon{width:32px;height:22px}.van-key__collapse-icon{width:30px;height:24px}.van-key__loading-icon{color:var(--van-number-keyboard-button-text-color)}

package/lib/number-keyboard/index.d.ts

@@ -103,4 +103,4 @@ export declare const NumberKeyboard: import("../utils").WithInstall<import("vue"
     extraKey: string | string[];
 }>>;
 export default NumberKeyboard;
-export type { NumberKeyboardTheme } from './NumberKeyboard';
+export type { NumberKeyboardProps, NumberKeyboardTheme, } from './NumberKeyboard';

package/lib/number-keyboard/index.less

@@ -25,7 +25,7 @@
   z-index: var(--van-number-keyboard-z-index);
   width: 100%;
   padding-bottom: 22px;
-  background-color: var(--van-number-keyboard-background-color);
+  background: var(--van-number-keyboard-background-color);
   user-select: none;
 
   &--with-title {
@@ -75,10 +75,6 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__sidebar {
@@ -99,7 +95,7 @@
   height: var(--van-number-keyboard-key-height);
   font-size: var(--van-number-keyboard-key-font-size);
   line-height: 1.5;
-  background-color: var(--van-number-keyboard-key-background-color);
+  background: var(--van-number-keyboard-key-background-color);
   border-radius: var(--van-border-radius-lg);
   cursor: pointer;
 
@@ -125,7 +121,7 @@
 
   &--blue {
     color: var(--van-number-keyboard-button-text-color);
-    background-color: var(--van-number-keyboard-button-background-color);
+    background: var(--van-number-keyboard-button-background-color);
 
     &.van-key--active {
       opacity: var(--van-active-opacity);

package/lib/number-keyboard/var.less

@@ -3,7 +3,7 @@
 @number-keyboard-background-color: var(--van-gray-2);
 @number-keyboard-key-height: 48px;
 @number-keyboard-key-font-size: 28px;
-@number-keyboard-key-background-color: var(--van-white);
+@number-keyboard-key-background-color: var(--van-background-color-light);
 @number-keyboard-key-active-color: var(--van-gray-3);
 @number-keyboard-delete-font-size: var(--van-font-size-lg);
 @number-keyboard-title-color: var(--van-gray-7);

package/lib/overlay/Overlay.d.ts

@@ -1,4 +1,16 @@
-import { PropType, CSSProperties } from 'vue';
+import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+declare const overlayProps: {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    duration: (NumberConstructor | StringConstructor)[];
+    className: PropType<unknown>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    customStyle: PropType<CSSProperties>;
+};
+export declare type OverlayProps = ExtractPropTypes<typeof overlayProps>;
 declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];

package/lib/overlay/Overlay.js

@@ -10,21 +10,23 @@ var _utils = require("../utils");
 var _useLazyRender = require("../composables/use-lazy-render");
 
 var [name, bem] = (0, _utils.createNamespace)('overlay');
+var overlayProps = {
+  show: Boolean,
+  zIndex: _utils.numericProp,
+  duration: _utils.numericProp,
+  className: _utils.unknownProp,
+  lockScroll: _utils.truthProp,
+  customStyle: Object
+};
 
 var _default = (0, _vue.defineComponent)({
   name,
-  props: {
-    show: Boolean,
-    zIndex: _utils.numericProp,
-    duration: _utils.numericProp,
-    className: _utils.unknownProp,
-    lockScroll: _utils.truthProp,
-    customStyle: Object
-  },
-
-  setup(props, {
-    slots
-  }) {
+  props: overlayProps,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var lazyRender = (0, _useLazyRender.useLazyRender)(() => props.show);
 
     var preventTouchMove = event => {
@@ -48,7 +50,7 @@ var _default = (0, _vue.defineComponent)({
       "name": "van-fade",
       "appear": true
     }, {
-      default: () => [renderOverlay()]
+      default: renderOverlay
     });
   }
 

package/lib/overlay/index.css

@@ -1 +1 @@
-:root{--van-overlay-z-index:1;--van-overlay-background-color:rgba(0, 0, 0, 0.7)}.van-overlay{position:fixed;top:0;left:0;z-index:var(--van-overlay-z-index);width:100%;height:100%;background-color:var(--van-overlay-background-color)}
+:root{--van-overlay-z-index:1;--van-overlay-background-color:rgba(0, 0, 0, 0.7)}.van-overlay{position:fixed;top:0;left:0;z-index:var(--van-overlay-z-index);width:100%;height:100%;background:var(--van-overlay-background-color)}

package/lib/overlay/index.d.ts

@@ -28,3 +28,4 @@ export declare const Overlay: import("../utils").WithInstall<import("vue").Defin
     lockScroll: boolean;
 }>>;
 export default Overlay;
+export type { OverlayProps } from './Overlay';

package/lib/overlay/index.less

@@ -12,5 +12,5 @@
   z-index: var(--van-overlay-z-index);
   width: 100%;
   height: 100%;
-  background-color: var(--van-overlay-background-color);
+  background: var(--van-overlay-background-color);
 }

package/lib/pagination/Pagination.d.ts

@@ -1,4 +1,35 @@
+import { ExtractPropTypes } from 'vue';
 export declare type PaginationMode = 'simple' | 'multi';
+declare const paginationProps: {
+    mode: {
+        type: import("vue").PropType<PaginationMode>;
+        default: PaginationMode;
+    };
+    prevText: StringConstructor;
+    nextText: StringConstructor;
+    pageCount: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalItems: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showPageSize: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    itemsPerPage: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    forceEllipses: BooleanConstructor;
+};
+export declare type PaginationProps = ExtractPropTypes<typeof paginationProps>;
 declare const _default: import("vue").DefineComponent<{
     mode: {
         type: import("vue").PropType<PaginationMode>;

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-color: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;
@@ -29,62 +32,60 @@
     min-width: var(--van-pagination-item-width);
     height: var(--van-pagination-height);
     color: var(--van-pagination-item-default-color);
-    background-color: var(--van-pagination-background-color);
+    background: var(--van-pagination-background-color);
     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);