vant 3.2.6 → 3.3.1

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.d.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes } from 'vue';
 import type { ListDirection } from './types';
-declare const props: {
+declare const listProps: {
     error: BooleanConstructor;
     offset: {
         type: (NumberConstructor | StringConstructor)[];
@@ -20,7 +20,7 @@ declare const props: {
         default: true;
     };
 };
-export declare type ListProps = ExtractPropTypes<typeof props>;
+export declare type ListProps = ExtractPropTypes<typeof listProps>;
 declare const _default: import("vue").DefineComponent<{
     error: BooleanConstructor;
     offset: {

package/es/list/List.js

@@ -10,7 +10,7 @@ import { useTabStatus } from '../composables/use-tab-status'; // Components
 import { Loading } from '../loading'; // Types
 
 var [name, bem, t] = createNamespace('list');
-var props = {
+var listProps = {
   error: Boolean,
   offset: makeNumericProp(300),
   loading: Boolean,
@@ -23,13 +23,14 @@ var props = {
 };
 export default defineComponent({
   name,
-  props,
+  props: listProps,
   emits: ['load', 'update:error', 'update:loading'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     // use sync innerLoading state to avoid repeated loading in some edge cases
     var loading = ref(false);
     var root = ref();
@@ -94,7 +95,9 @@ export default defineComponent({
 
         if (text) {
           return _createVNode("div", {
+            "role": "button",
             "class": bem('error-text'),
+            "tabindex": 0,
             "onClick": clickErrorText
           }, [text]);
         }
@@ -113,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/list/index.css

@@ -1 +1 @@
-:root{--van-list-text-color:var(--van-gray-6);--van-list-text-font-size:var(--van-font-size-md);--van-list-text-line-height:50px;--van-list-loading-icon-size:16px}.van-list__error-text,.van-list__finished-text,.van-list__loading{color:var(--van-list-text-color);font-size:var(--van-list-text-font-size);line-height:var(--van-list-text-line-height);text-align:center}.van-list__placeholder{height:0;pointer-events:none}.van-list__loading-icon .van-loading__spinner{width:var(--van-list-loading-icon-size);height:var(--van-list-loading-icon-size)}
+:root{--van-list-text-color:var(--van-text-color-2);--van-list-text-font-size:var(--van-font-size-md);--van-list-text-line-height:50px;--van-list-loading-icon-size:16px}.van-list__error-text,.van-list__finished-text,.van-list__loading{color:var(--van-list-text-color);font-size:var(--van-list-text-font-size);line-height:var(--van-list-text-line-height);text-align:center}.van-list__placeholder{height:0;pointer-events:none}.van-list__loading-icon .van-loading__spinner{width:var(--van-list-loading-icon-size);height:var(--van-list-loading-icon-size)}

package/es/list/var.less

@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@list-text-color: var(--van-gray-6);
+@list-text-color: var(--van-text-color-2);
 @list-text-font-size: var(--van-font-size-md);
 @list-text-line-height: 50px;
 @list-loading-icon-size: 16px;

package/es/loading/Loading.d.ts

@@ -1,4 +1,17 @@
+import { ExtractPropTypes } from 'vue';
 export declare type LoadingType = 'circular' | 'spinner';
+declare const loadingProps: {
+    size: (NumberConstructor | StringConstructor)[];
+    type: {
+        type: import("vue").PropType<LoadingType>;
+        default: LoadingType;
+    };
+    color: StringConstructor;
+    vertical: BooleanConstructor;
+    textSize: (NumberConstructor | StringConstructor)[];
+    textColor: StringConstructor;
+};
+export declare type LoadingProps = ExtractPropTypes<typeof loadingProps>;
 declare const _default: import("vue").DefineComponent<{
     size: (NumberConstructor | StringConstructor)[];
     type: {

package/es/loading/Loading.js

@@ -16,20 +16,22 @@ var CircularIcon = _createVNode("svg", {
   "fill": "none"
 }, null)]);
 
+var loadingProps = {
+  size: numericProp,
+  type: makeStringProp('circular'),
+  color: String,
+  vertical: Boolean,
+  textSize: numericProp,
+  textColor: String
+};
 export default defineComponent({
   name,
-  props: {
-    size: numericProp,
-    type: makeStringProp('circular'),
-    color: String,
-    vertical: Boolean,
-    textSize: numericProp,
-    textColor: String
-  },
+  props: loadingProps,
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var spinnerStyle = computed(() => extend({
       color: props.color
     }, getSizeStyle(props.size)));

package/es/loading/index.css

@@ -1 +1 @@
-:root{--van-loading-text-color:var(--van-gray-6);--van-loading-text-font-size:var(--van-font-size-md);--van-loading-spinner-color:var(--van-gray-5);--van-loading-spinner-size:30px;--van-loading-spinner-animation-duration:0.8s}.van-loading{position:relative;color:var(--van-loading-spinner-color);font-size:0;vertical-align:middle}.van-loading__spinner{position:relative;display:inline-block;width:var(--van-loading-spinner-size);max-width:100%;height:var(--van-loading-spinner-size);max-height:100%;vertical-align:middle;animation:van-rotate var(--van-loading-spinner-animation-duration) linear infinite}.van-loading__spinner--spinner{animation-timing-function:steps(12)}.van-loading__spinner--circular{animation-duration:2s}.van-loading__line{position:absolute;top:0;left:0;width:100%;height:100%}.van-loading__line::before{display:block;width:2px;height:25%;margin:0 auto;background-color:currentColor;border-radius:40%;content:' '}.van-loading__circular{display:block;width:100%;height:100%}.van-loading__circular circle{animation:van-circular 1.5s ease-in-out infinite;stroke:currentColor;stroke-width:3;stroke-linecap:round}.van-loading__text{display:inline-block;margin-left:var(--van-padding-xs);color:var(--van-loading-text-color);font-size:var(--van-loading-text-font-size);vertical-align:middle}.van-loading--vertical{display:flex;flex-direction:column;align-items:center}.van-loading--vertical .van-loading__text{margin:var(--van-padding-xs) 0 0}@keyframes van-circular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}100%{stroke-dasharray:90,150;stroke-dashoffset:-120}}.van-loading__line--1{transform:rotate(30deg);opacity:1}.van-loading__line--2{transform:rotate(60deg);opacity:.9375}.van-loading__line--3{transform:rotate(90deg);opacity:.875}.van-loading__line--4{transform:rotate(120deg);opacity:.8125}.van-loading__line--5{transform:rotate(150deg);opacity:.75}.van-loading__line--6{transform:rotate(180deg);opacity:.6875}.van-loading__line--7{transform:rotate(210deg);opacity:.625}.van-loading__line--8{transform:rotate(240deg);opacity:.5625}.van-loading__line--9{transform:rotate(270deg);opacity:.5}.van-loading__line--10{transform:rotate(300deg);opacity:.4375}.van-loading__line--11{transform:rotate(330deg);opacity:.375}.van-loading__line--12{transform:rotate(360deg);opacity:.3125}
+:root{--van-loading-text-color:var(--van-text-color-2);--van-loading-text-font-size:var(--van-font-size-md);--van-loading-spinner-color:var(--van-gray-5);--van-loading-spinner-size:30px;--van-loading-spinner-animation-duration:0.8s}.van-loading{position:relative;color:var(--van-loading-spinner-color);font-size:0;vertical-align:middle}.van-loading__spinner{position:relative;display:inline-block;width:var(--van-loading-spinner-size);max-width:100%;height:var(--van-loading-spinner-size);max-height:100%;vertical-align:middle;animation:van-rotate var(--van-loading-spinner-animation-duration) linear infinite}.van-loading__spinner--spinner{animation-timing-function:steps(12)}.van-loading__spinner--circular{animation-duration:2s}.van-loading__line{position:absolute;top:0;left:0;width:100%;height:100%}.van-loading__line::before{display:block;width:2px;height:25%;margin:0 auto;background-color:currentColor;border-radius:40%;content:' '}.van-loading__circular{display:block;width:100%;height:100%}.van-loading__circular circle{animation:van-circular 1.5s ease-in-out infinite;stroke:currentColor;stroke-width:3;stroke-linecap:round}.van-loading__text{display:inline-block;margin-left:var(--van-padding-xs);color:var(--van-loading-text-color);font-size:var(--van-loading-text-font-size);vertical-align:middle}.van-loading--vertical{display:flex;flex-direction:column;align-items:center}.van-loading--vertical .van-loading__text{margin:var(--van-padding-xs) 0 0}@keyframes van-circular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}100%{stroke-dasharray:90,150;stroke-dashoffset:-120}}.van-loading__line--1{transform:rotate(30deg);opacity:1}.van-loading__line--2{transform:rotate(60deg);opacity:.9375}.van-loading__line--3{transform:rotate(90deg);opacity:.875}.van-loading__line--4{transform:rotate(120deg);opacity:.8125}.van-loading__line--5{transform:rotate(150deg);opacity:.75}.van-loading__line--6{transform:rotate(180deg);opacity:.6875}.van-loading__line--7{transform:rotate(210deg);opacity:.625}.van-loading__line--8{transform:rotate(240deg);opacity:.5625}.van-loading__line--9{transform:rotate(270deg);opacity:.5}.van-loading__line--10{transform:rotate(300deg);opacity:.4375}.van-loading__line--11{transform:rotate(330deg);opacity:.375}.van-loading__line--12{transform:rotate(360deg);opacity:.3125}

package/es/loading/index.d.ts

@@ -28,4 +28,4 @@ export declare const Loading: import("../utils").WithInstall<import("vue").Defin
     vertical: boolean;
 }>>;
 export default Loading;
-export type { LoadingType } from './Loading';
+export type { LoadingType, LoadingProps } from './Loading';

package/es/loading/var.less

@@ -1,6 +1,6 @@
 @import '../style/var.less';
 
-@loading-text-color: var(--van-gray-6);
+@loading-text-color: var(--van-text-color-2);
 @loading-text-font-size: var(--van-font-size-md);
 @loading-spinner-color: var(--van-gray-5);
 @loading-spinner-size: 30px;

package/es/locale/index.js

@@ -17,7 +17,11 @@ export var Locale = {
     });
   },
 
-  add(newMessages = {}) {
+  add(newMessages) {
+    if (newMessages === void 0) {
+      newMessages = {};
+    }
+
     deepAssign(messages, newMessages);
   }
 

package/es/nav-bar/NavBar.d.ts

@@ -1,3 +1,19 @@
+import { ExtractPropTypes } from 'vue';
+declare const navBarProps: {
+    title: StringConstructor;
+    fixed: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    leftText: StringConstructor;
+    rightText: StringConstructor;
+    leftArrow: BooleanConstructor;
+    placeholder: BooleanConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+};
+export declare type NavBarProps = ExtractPropTypes<typeof navBarProps>;
 declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
     fixed: BooleanConstructor;

package/es/nav-bar/NavBar.js

@@ -1,31 +1,33 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, defineComponent } from 'vue'; // Utils
 
-import { truthProp, numericProp, BORDER_BOTTOM, getZIndexStyle, createNamespace } from '../utils'; // Composables
+import { truthProp, numericProp, BORDER_BOTTOM, getZIndexStyle, createNamespace, HAPTICS_FEEDBACK } from '../utils'; // Composables
 
 import { usePlaceholder } from '../composables/use-placeholder'; // Components
 
 import { Icon } from '../icon';
 var [name, bem] = createNamespace('nav-bar');
+var navBarProps = {
+  title: String,
+  fixed: Boolean,
+  zIndex: numericProp,
+  border: truthProp,
+  leftText: String,
+  rightText: String,
+  leftArrow: Boolean,
+  placeholder: Boolean,
+  safeAreaInsetTop: Boolean
+};
 export default defineComponent({
   name,
-  props: {
-    title: String,
-    fixed: Boolean,
-    zIndex: numericProp,
-    border: truthProp,
-    leftText: String,
-    rightText: String,
-    leftArrow: Boolean,
-    placeholder: Boolean,
-    safeAreaInsetTop: Boolean
-  },
+  props: navBarProps,
   emits: ['click-left', 'click-right'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    var {
+      emit,
+      slots
+    } = _ref;
     var navBarRef = ref();
     var renderPlaceholder = usePlaceholder(navBarRef, bem);
 
@@ -78,12 +80,12 @@ export default defineComponent({
       }, [_createVNode("div", {
         "class": bem('content')
       }, [hasLeft && _createVNode("div", {
-        "class": bem('left'),
+        "class": [bem('left'), HAPTICS_FEEDBACK],
         "onClick": onClickLeft
       }, [renderLeft()]), _createVNode("div", {
         "class": [bem('title'), 'van-ellipsis']
       }, [slots.title ? slots.title() : title]), hasRight && _createVNode("div", {
-        "class": bem('right'),
+        "class": [bem('right'), HAPTICS_FEEDBACK],
         "onClick": onClickRight
       }, [renderRight()])])]);
     };

package/es/nav-bar/index.css

@@ -1 +1 @@
-:root{--van-nav-bar-height:46px;--van-nav-bar-background-color:var(--van-white);--van-nav-bar-arrow-size:16px;--van-nav-bar-icon-color:var(--van-primary-color);--van-nav-bar-text-color:var(--van-primary-color);--van-nav-bar-title-font-size:var(--van-font-size-lg);--van-nav-bar-title-text-color:var(--van-text-color);--van-nav-bar-z-index:1}.van-nav-bar{position:relative;z-index:var(--van-nav-bar-z-index);line-height:var(--van-line-height-lg);text-align:center;background:var(--van-nav-bar-background-color);-webkit-user-select:none;user-select:none}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.van-nav-bar .van-icon{color:var(--van-nav-bar-icon-color)}.van-nav-bar__content{position:relative;display:flex;align-items:center;height:var(--van-nav-bar-height)}.van-nav-bar__arrow{margin-right:var(--van-padding-base);font-size:var(--van-nav-bar-arrow-size)}.van-nav-bar__title{max-width:60%;margin:0 auto;color:var(--van-nav-bar-title-text-color);font-weight:var(--van-font-weight-bold);font-size:var(--van-nav-bar-title-font-size)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 var(--van-padding-md);font-size:var(--van-font-size-md);cursor:pointer}.van-nav-bar__left:active,.van-nav-bar__right:active{opacity:var(--van-active-opacity)}.van-nav-bar__left{left:0}.van-nav-bar__right{right:0}.van-nav-bar__text{color:var(--van-nav-bar-text-color)}
+:root{--van-nav-bar-height:46px;--van-nav-bar-background-color:var(--van-background-color-light);--van-nav-bar-arrow-size:16px;--van-nav-bar-icon-color:var(--van-primary-color);--van-nav-bar-text-color:var(--van-primary-color);--van-nav-bar-title-font-size:var(--van-font-size-lg);--van-nav-bar-title-text-color:var(--van-text-color);--van-nav-bar-z-index:1}.van-nav-bar{position:relative;z-index:var(--van-nav-bar-z-index);line-height:var(--van-line-height-lg);text-align:center;background:var(--van-nav-bar-background-color);-webkit-user-select:none;user-select:none}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.van-nav-bar .van-icon{color:var(--van-nav-bar-icon-color)}.van-nav-bar__content{position:relative;display:flex;align-items:center;height:var(--van-nav-bar-height)}.van-nav-bar__arrow{margin-right:var(--van-padding-base);font-size:var(--van-nav-bar-arrow-size)}.van-nav-bar__title{max-width:60%;margin:0 auto;color:var(--van-nav-bar-title-text-color);font-weight:var(--van-font-weight-bold);font-size:var(--van-nav-bar-title-font-size)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 var(--van-padding-md);font-size:var(--van-font-size-md);cursor:pointer}.van-nav-bar__left{left:0}.van-nav-bar__right{right:0}.van-nav-bar__text{color:var(--van-nav-bar-text-color)}