vant 3.2.8 → 3.3.0

package/es/lazyload/vue-lazyload/listener.js

@@ -0,0 +1,241 @@
+import { useRect } from '@vant/use';
+import { loadImageAsync } from './util';
+import { noop } from '../../utils';
+export default class ReactiveListener {
+  constructor(_ref) {
+    var {
+      el,
+      src,
+      error,
+      loading,
+      bindType,
+      $parent,
+      options,
+      cors,
+      elRenderer,
+      imageCache
+    } = _ref;
+    this.el = el;
+    this.src = src;
+    this.error = error;
+    this.loading = loading;
+    this.bindType = bindType;
+    this.attempt = 0;
+    this.cors = cors;
+    this.naturalHeight = 0;
+    this.naturalWidth = 0;
+    this.options = options;
+    this.$parent = $parent;
+    this.elRenderer = elRenderer;
+    this.imageCache = imageCache;
+    this.performanceData = {
+      loadStart: 0,
+      loadEnd: 0
+    };
+    this.filter();
+    this.initState();
+    this.render('loading', false);
+  }
+  /*
+   * init listener state
+   * @return
+   */
+
+
+  initState() {
+    if ('dataset' in this.el) {
+      this.el.dataset.src = this.src;
+    } else {
+      this.el.setAttribute('data-src', this.src);
+    }
+
+    this.state = {
+      loading: false,
+      error: false,
+      loaded: false,
+      rendered: false
+    };
+  }
+  /*
+   * record performance
+   * @return
+   */
+
+
+  record(event) {
+    this.performanceData[event] = Date.now();
+  }
+  /*
+   * update image listener data
+   * @param  {String} image uri
+   * @param  {String} loading image uri
+   * @param  {String} error image uri
+   * @return
+   */
+
+
+  update(_ref2) {
+    var {
+      src,
+      loading,
+      error
+    } = _ref2;
+    var oldSrc = this.src;
+    this.src = src;
+    this.loading = loading;
+    this.error = error;
+    this.filter();
+
+    if (oldSrc !== this.src) {
+      this.attempt = 0;
+      this.initState();
+    }
+  }
+  /*
+   *  check el is in view
+   * @return {Boolean} el is in view
+   */
+
+
+  checkInView() {
+    var rect = useRect(this.el);
+    return rect.top < window.innerHeight * this.options.preLoad && rect.bottom > this.options.preLoadTop && rect.left < window.innerWidth * this.options.preLoad && rect.right > 0;
+  }
+  /*
+   * listener filter
+   */
+
+
+  filter() {
+    Object.keys(this.options.filter).forEach(key => {
+      this.options.filter[key](this, this.options);
+    });
+  }
+  /*
+   * render loading first
+   * @params cb:Function
+   * @return
+   */
+
+
+  renderLoading(cb) {
+    this.state.loading = true;
+    loadImageAsync({
+      src: this.loading,
+      cors: this.cors
+    }, () => {
+      this.render('loading', false);
+      this.state.loading = false;
+      cb();
+    }, () => {
+      // handler `loading image` load failed
+      cb();
+      this.state.loading = false;
+      if (process.env.NODE_ENV !== 'production' && !this.options.silent) console.warn("[@vant/lazyload] load failed with loading image(" + this.loading + ")");
+    });
+  }
+  /*
+   * try load image and  render it
+   * @return
+   */
+
+
+  load(onFinish) {
+    if (onFinish === void 0) {
+      onFinish = noop;
+    }
+
+    if (this.attempt > this.options.attempt - 1 && this.state.error) {
+      if (process.env.NODE_ENV !== 'production' && !this.options.silent) {
+        console.log("[@vant/lazyload] " + this.src + " tried too more than " + this.options.attempt + " times");
+      }
+
+      onFinish();
+      return;
+    }
+
+    if (this.state.rendered && this.state.loaded) return;
+
+    if (this.imageCache.has(this.src)) {
+      this.state.loaded = true;
+      this.render('loaded', true);
+      this.state.rendered = true;
+      return onFinish();
+    }
+
+    this.renderLoading(() => {
+      var _this$options$adapter, _this$options$adapter2;
+
+      this.attempt++;
+      (_this$options$adapter = (_this$options$adapter2 = this.options.adapter).beforeLoad) == null ? void 0 : _this$options$adapter.call(_this$options$adapter2, this, this.options);
+      this.record('loadStart');
+      loadImageAsync({
+        src: this.src,
+        cors: this.cors
+      }, data => {
+        this.naturalHeight = data.naturalHeight;
+        this.naturalWidth = data.naturalWidth;
+        this.state.loaded = true;
+        this.state.error = false;
+        this.record('loadEnd');
+        this.render('loaded', false);
+        this.state.rendered = true;
+        this.imageCache.add(this.src);
+        onFinish();
+      }, err => {
+        !this.options.silent && console.error(err);
+        this.state.error = true;
+        this.state.loaded = false;
+        this.render('error', false);
+      });
+    });
+  }
+  /*
+   * render image
+   * @param  {String} state to render // ['loading', 'src', 'error']
+   * @param  {String} is form cache
+   * @return
+   */
+
+
+  render(state, cache) {
+    this.elRenderer(this, state, cache);
+  }
+  /*
+   * output performance data
+   * @return {Object} performance data
+   */
+
+
+  performance() {
+    var state = 'loading';
+    var time = 0;
+
+    if (this.state.loaded) {
+      state = 'loaded';
+      time = (this.performanceData.loadEnd - this.performanceData.loadStart) / 1000;
+    }
+
+    if (this.state.error) state = 'error';
+    return {
+      src: this.src,
+      state,
+      time
+    };
+  }
+  /*
+   * $destroy
+   * @return
+   */
+
+
+  $destroy() {
+    this.el = null;
+    this.src = null;
+    this.error = null;
+    this.loading = null;
+    this.bindType = null;
+    this.attempt = 0;
+  }
+
+}

package/es/lazyload/vue-lazyload/util.js

@@ -0,0 +1,183 @@
+import { inBrowser } from '@vant/use';
+export var hasIntersectionObserver = inBrowser && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+export var modeType = {
+  event: 'event',
+  observer: 'observer'
+};
+export function remove(arr, item) {
+  if (!arr.length) return;
+  var index = arr.indexOf(item);
+  if (index > -1) return arr.splice(index, 1);
+}
+export function getBestSelectionFromSrcset(el, scale) {
+  if (el.tagName !== 'IMG' || !el.getAttribute('data-srcset')) return;
+  var options = el.getAttribute('data-srcset');
+  var container = el.parentNode;
+  var containerWidth = container.offsetWidth * scale;
+  var spaceIndex;
+  var tmpSrc;
+  var tmpWidth;
+  options = options.trim().split(',');
+  var result = options.map(item => {
+    item = item.trim();
+    spaceIndex = item.lastIndexOf(' ');
+
+    if (spaceIndex === -1) {
+      tmpSrc = item;
+      tmpWidth = 999998;
+    } else {
+      tmpSrc = item.substr(0, spaceIndex);
+      tmpWidth = parseInt(item.substr(spaceIndex + 1, item.length - spaceIndex - 2), 10);
+    }
+
+    return [tmpWidth, tmpSrc];
+  });
+  result.sort((a, b) => {
+    if (a[0] < b[0]) {
+      return 1;
+    }
+
+    if (a[0] > b[0]) {
+      return -1;
+    }
+
+    if (a[0] === b[0]) {
+      if (b[1].indexOf('.webp', b[1].length - 5) !== -1) {
+        return 1;
+      }
+
+      if (a[1].indexOf('.webp', a[1].length - 5) !== -1) {
+        return -1;
+      }
+    }
+
+    return 0;
+  });
+  var bestSelectedSrc = '';
+  var tmpOption;
+
+  for (var i = 0; i < result.length; i++) {
+    tmpOption = result[i];
+    bestSelectedSrc = tmpOption[1];
+    var next = result[i + 1];
+
+    if (next && next[0] < containerWidth) {
+      bestSelectedSrc = tmpOption[1];
+      break;
+    } else if (!next) {
+      bestSelectedSrc = tmpOption[1];
+      break;
+    }
+  }
+
+  return bestSelectedSrc;
+}
+export var getDPR = function (scale) {
+  if (scale === void 0) {
+    scale = 1;
+  }
+
+  return inBrowser ? window.devicePixelRatio || scale : scale;
+};
+export function supportWebp() {
+  if (!inBrowser) return false;
+  var support = true;
+
+  try {
+    var elem = document.createElement('canvas');
+
+    if (elem.getContext && elem.getContext('2d')) {
+      support = elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+    }
+  } catch (err) {
+    support = false;
+  }
+
+  return support;
+}
+export function throttle(action, delay) {
+  var timeout = null;
+  var lastRun = 0;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (timeout) {
+      return;
+    }
+
+    var elapsed = Date.now() - lastRun;
+
+    var runCallback = () => {
+      lastRun = Date.now();
+      timeout = false;
+      action.apply(this, args);
+    };
+
+    if (elapsed >= delay) {
+      runCallback();
+    } else {
+      timeout = setTimeout(runCallback, delay);
+    }
+  };
+}
+export function on(el, type, func) {
+  el.addEventListener(type, func, {
+    capture: false,
+    passive: true
+  });
+}
+export function off(el, type, func) {
+  el.removeEventListener(type, func, false);
+}
+export var loadImageAsync = (item, resolve, reject) => {
+  var image = new Image();
+
+  if (!item || !item.src) {
+    return reject(new Error('image src is required'));
+  }
+
+  image.src = item.src;
+
+  if (item.cors) {
+    image.crossOrigin = item.cors;
+  }
+
+  image.onload = () => resolve({
+    naturalHeight: image.naturalHeight,
+    naturalWidth: image.naturalWidth,
+    src: image.src
+  });
+
+  image.onerror = e => reject(e);
+};
+export class ImageCache {
+  constructor(_ref) {
+    var {
+      max
+    } = _ref;
+    this.options = {
+      max: max || 100
+    };
+    this.caches = [];
+  }
+
+  has(key) {
+    return this.caches.indexOf(key) > -1;
+  }
+
+  add(key) {
+    if (this.has(key)) return;
+    this.caches.push(key);
+
+    if (this.caches.length > this.options.max) {
+      this.free();
+    }
+  }
+
+  free() {
+    this.caches.shift();
+  }
+
+}

package/es/list/List.js

@@ -95,7 +95,9 @@ export default defineComponent({
 
         if (text) {
           return _createVNode("div", {
+            "role": "button",
             "class": bem('error-text'),
+            "tabindex": 0,
             "onClick": clickErrorText
           }, [text]);
         }
@@ -114,7 +116,7 @@ export default defineComponent({
       }
     };
 
-    watch([() => props.loading, () => props.finished, () => props.error], check);
+    watch(() => [props.loading, props.finished, props.error], check);
 
     if (tabStatus) {
       watch(tabStatus, tabActive => {

package/es/number-keyboard/NumberKeyboardKey.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, defineComponent } from 'vue';
-import { numericProp, createNamespace } from '../utils';
+import { numericProp, createNamespace, preventDefault } from '../utils';
 import { useTouch } from '../composables/use-touch';
 import { Loading } from '../loading';
 var [name, bem] = createNamespace('key');
@@ -9,7 +9,7 @@ var CollapseIcon = _createVNode("svg", {
   "class": bem('collapse-icon'),
   "viewBox": "0 0 30 24"
 }, [_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)]);
 
@@ -17,7 +17,7 @@ var DeleteIcon = _createVNode("svg", {
   "class": bem('delete-icon'),
   "viewBox": "0 0 32 22"
 }, [_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)]);
 
@@ -59,7 +59,7 @@ export default defineComponent({
         // eliminate tap delay on safari
         // see: https://github.com/youzan/vant/issues/6836
         if (!slots.default) {
-          event.preventDefault();
+          preventDefault(event);
         }
 
         active.value = false;

package/es/pagination/Pagination.js

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
-import { computed, watch, defineComponent } from 'vue';
-import { BORDER, makeStringProp, makeNumberProp, makeNumericProp, createNamespace } from '../utils';
+import { computed, watchEffect, defineComponent } from 'vue';
+import { clamp, makeStringProp, makeNumberProp, makeNumericProp, createNamespace, BORDER_SURROUND } from '../utils';
 var [name, bem, t] = createNamespace('pagination');
 
 var makePage = (number, text, active) => ({
@@ -46,12 +46,7 @@ export default defineComponent({
       var {
         modelValue,
         forceEllipses
-      } = props;
-
-      if (props.mode !== 'multi') {
-        return items;
-      } // Default page limits
-
+      } = props; // Default page limits
 
       var startPage = 1;
       var endPage = pageCount;
@@ -90,59 +85,82 @@ export default defineComponent({
       return items;
     });
 
-    var select = (page, emitChange) => {
-      page = Math.min(count.value, Math.max(1, page));
+    var updateModelValue = (value, emitChange) => {
+      value = 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
 
-    watch(() => props.modelValue, value => {
-      select(value);
-    }, {
-      immediate: true
-    });
-
-    var renderDesc = () => {
-      if (props.mode !== 'multi') {
-        return _createVNode("li", {
-          "class": bem('page-desc')
-        }, [slots.pageDesc ? slots.pageDesc() : props.modelValue + "/" + count.value]);
-      }
-    };
 
-    return () => {
-      var value = props.modelValue;
-      var simple = props.mode !== 'multi';
+    watchEffect(() => updateModelValue(props.modelValue));
 
-      var onSelect = value => () => select(value, true);
+    var renderDesc = () => _createVNode("li", {
+      "class": bem('page-desc')
+    }, [slots.pageDesc ? slots.pageDesc() : props.modelValue + "/" + count.value]);
 
-      return _createVNode("ul", {
-        "class": bem({
-          simple
-        })
-      }, [_createVNode("li", {
-        "class": [bem('item', {
-          disabled: value === 1
-        }), bem('prev'), BORDER],
-        "onClick": onSelect(value - 1)
-      }, [slots['prev-text'] ? slots['prev-text']() : props.prevText || t('prev')]), pages.value.map(page => _createVNode("li", {
+    var renderPrevButton = () => {
+      var {
+        mode,
+        modelValue
+      } = props;
+      var slot = slots['prev-text'];
+      var disabled = modelValue === 1;
+      return _createVNode("li", {
         "class": [bem('item', {
-          active: page.active
-        }), bem('page'), BORDER],
-        "onClick": onSelect(page.number)
-      }, [slots.page ? slots.page(page) : page.text])), renderDesc(), _createVNode("li", {
+          disabled,
+          border: mode === 'simple',
+          prev: true
+        }), BORDER_SURROUND]
+      }, [_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 _createVNode("li", {
         "class": [bem('item', {
-          disabled: value === count.value
-        }), bem('next'), BORDER],
-        "onClick": onSelect(value + 1)
-      }, [slots['next-text'] ? slots['next-text']() : props.nextText || t('next')])]);
+          disabled,
+          border: mode === 'simple',
+          next: true
+        }), BORDER_SURROUND]
+      }, [_createVNode("button", {
+        "type": "button",
+        "disabled": disabled,
+        "onClick": () => updateModelValue(modelValue + 1)
+      }, [slot ? slot() : props.nextText || t('next')])]);
     };
+
+    var renderPages = () => pages.value.map(page => _createVNode("li", {
+      "class": [bem('item', {
+        active: page.active,
+        page: true
+      }), BORDER_SURROUND]
+    }, [_createVNode("button", {
+      "type": "button",
+      "aria-current": page.active || undefined,
+      "onClick": () => updateModelValue(page.number)
+    }, [slots.page ? slots.page(page) : page.text])]));
+
+    return () => _createVNode("nav", {
+      "role": "navigation",
+      "class": bem()
+    }, [_createVNode("ul", {
+      "class": bem('items')
+    }, [renderPrevButton(), props.mode === 'simple' ? renderDesc() : renderPages(), renderNextButton()])]);
   }
 
 });

package/es/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-background-color-light);--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)}