packages/vant-cli/src/common/constant.ts

@@ -15,6 +15,9 @@ function findRootDir(dir: string): string {
   return findRootDir(parentDir);
 }
 
+// Colors
+export const GREEN = '#07c160';
+
 // Root paths
 export const CWD = process.cwd();
 export const ROOT = findRootDir(CWD);
@@ -26,6 +29,7 @@ export const SITE_DIST_DIR = join(ROOT, 'site-dist');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
 export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
+export const CACHE_DIR = join(ROOT, 'node_modules/.cache');
 
 // Relative paths
 export const DIST_DIR = join(__dirname, '../../dist');
@@ -43,6 +47,7 @@ export const SITE_DESKTOP_SHARED_FILE = join(
 export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
 
 // Config files
+export const BABEL_CONFIG_FILE = join(CONFIG_DIR, 'babel.config.js');
 export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js');
 export const JEST_SETUP_FILE = join(CONFIG_DIR, 'jest.setup.js');
 export const JEST_CONFIG_FILE = join(CONFIG_DIR, 'jest.config.js');

packages/vant-lazyload/package.json

@@ -25,9 +25,6 @@
     "@babel/core": "^7.12.9",
     "release-it": "^14.2.2"
   },
-  "dependencies": {
-    "@vant/use": "^1.3.1"
-  },
   "release-it": {
     "git": {
       "tag": false,

packages/vant-lazyload/src/lazy-component.js

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import { inBrowser } from '@vant/use';
+import { inBrowser } from './util';
 
 export default (lazy) => ({
   props: {

packages/vant-lazyload/src/lazy-container.js

@@ -1,6 +1,5 @@
 /* eslint-disable max-classes-per-file */
-/* eslint-disable prefer-object-spread */
-import { remove } from './util';
+import { find, remove } from './util';
 
 const defaultOptions = {
   selector: 'img',
@@ -75,13 +74,13 @@ export default class LazyContainerManager {
   }
 
   update(el, binding, vnode) {
-    const container = this._queue.find((item) => item.el === el);
+    const container = find(this._queue, (item) => item.el === el);
     if (!container) return;
     container.update({ el, binding, vnode });
   }
 
   unbind(el) {
-    const container = this._queue.find((item) => item.el === el);
+    const container = find(this._queue, (item) => item.el === el);
     if (!container) return;
     container.clear();
     remove(this._queue, container);

packages/vant-lazyload/src/lazy-image.js

@@ -1,5 +1,4 @@
-import { inBrowser } from '@vant/use';
-import { loadImageAsync, noop } from './util';
+import { inBrowser, loadImageAsync, noop } from './util';
 
 export default (lazyManager) => ({
   props: {

packages/vant-lazyload/src/lazy.js

@@ -1,12 +1,14 @@
 import { nextTick } from 'vue';
-import { inBrowser, getScrollParent } from '@vant/use';
 import {
+  inBrowser,
+  CustomEvent,
   remove,
-  on,
-  off,
+  find,
+  _,
   throttle,
   supportWebp,
   getDPR,
+  scrollParent,
   getBestSelectionFromSrcset,
   isObject,
   hasIntersectionObserver,
@@ -146,7 +148,7 @@ export default function () {
         }
 
         if (!$parent) {
-          $parent = getScrollParent(el);
+          $parent = scrollParent(el);
         }
 
         const newListener = new ReactiveListener({
@@ -185,7 +187,7 @@ export default function () {
       let { src } = value;
       src = getBestSelectionFromSrcset(el, this.options.scale) || src;
 
-      const exist = this.ListenerQueue.find((item) => item.el === el);
+      const exist = find(this.ListenerQueue, (item) => item.el === el);
       if (!exist) {
         this.add(el, binding, vnode);
       } else {
@@ -211,7 +213,7 @@ export default function () {
     remove(el) {
       if (!el) return;
       this._observer && this._observer.unobserve(el);
-      const existItem = this.ListenerQueue.find((item) => item.el === el);
+      const existItem = find(this.ListenerQueue, (item) => item.el === el);
       if (existItem) {
         this._removeListenerTarget(existItem.$parent);
         this._removeListenerTarget(window);
@@ -272,7 +274,7 @@ export default function () {
      */
     _addListenerTarget(el) {
       if (!el) return;
-      let target = this.TargetQueue.find((target) => target.el === el);
+      let target = find(this.TargetQueue, (target) => target.el === el);
       if (!target) {
         target = {
           el,
@@ -314,7 +316,7 @@ export default function () {
      */
     _initListen(el, start) {
       this.options.ListenEvents.forEach((evt) =>
-        (start ? on : off)(el, evt, this.lazyLoadHandler)
+        _[start ? 'on' : 'off'](el, evt, this.lazyLoadHandler)
       );
     }
 

packages/vant-lazyload/src/listener.js

@@ -32,6 +32,7 @@ export default class ReactiveListener {
     this.elRenderer = elRenderer;
     this._imageCache = imageCache;
     this.performanceData = {
+      init: Date.now(),
       loadStart: 0,
       loadEnd: 0,
     };

packages/vant-lazyload/src/util.js

@@ -1,4 +1,4 @@
-import { inBrowser } from '@vant/use';
+const inBrowser = typeof window !== 'undefined';
 
 export const hasIntersectionObserver =
   inBrowser &&
@@ -11,13 +11,32 @@ export const modeType = {
   observer: 'observer',
 };
 
-export function remove(arr, item) {
+// CustomEvent polyfill
+const CustomEvent = (function () {
+  if (!inBrowser) return;
+  if (typeof window.CustomEvent === 'function') return window.CustomEvent;
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    const evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(
+      event,
+      params.bubbles,
+      params.cancelable,
+      params.detail
+    );
+    return evt;
+  }
+  CustomEvent.prototype = window.Event.prototype;
+  return CustomEvent;
+})();
+
+function remove(arr, item) {
   if (!arr.length) return;
   const index = arr.indexOf(item);
   if (index > -1) return arr.splice(index, 1);
 }
 
-export function getBestSelectionFromSrcset(el, scale) {
+function getBestSelectionFromSrcset(el, scale) {
   if (el.tagName !== 'IMG' || !el.getAttribute('data-srcset')) return;
 
   let options = el.getAttribute('data-srcset');
@@ -82,10 +101,21 @@ export function getBestSelectionFromSrcset(el, scale) {
   return bestSelectedSrc;
 }
 
-export const getDPR = (scale = 1) =>
+function find(arr, fn) {
+  let item;
+  for (let i = 0, len = arr.length; i < len; i++) {
+    if (fn(arr[i])) {
+      item = arr[i];
+      break;
+    }
+  }
+  return item;
+}
+
+const getDPR = (scale = 1) =>
   inBrowser ? window.devicePixelRatio || scale : scale;
 
-export function supportWebp() {
+function supportWebp() {
   if (!inBrowser) return false;
 
   let support = true;
@@ -103,7 +133,7 @@ export function supportWebp() {
   return support;
 }
 
-export function throttle(action, delay) {
+function throttle(action, delay) {
   let timeout = null;
   let lastRun = 0;
   return function (...args) {
@@ -124,18 +154,42 @@ export function throttle(action, delay) {
   };
 }
 
-export function on(el, type, func) {
-  el.addEventListener(type, func, {
-    capture: false,
-    passive: true,
-  });
+function testSupportsPassive() {
+  if (!inBrowser) return;
+  let support = false;
+  try {
+    const opts = Object.defineProperty({}, 'passive', {
+      // eslint-disable-next-line getter-return
+      get() {
+        support = true;
+      },
+    });
+    window.addEventListener('test', null, opts);
+  } catch (e) {
+    //
+  }
+  return support;
 }
 
-export function off(el, type, func) {
-  el.removeEventListener(type, func, false);
-}
+const supportsPassive = testSupportsPassive();
 
-export const loadImageAsync = (item, resolve, reject) => {
+const _ = {
+  on(el, type, func, capture = false) {
+    if (supportsPassive) {
+      el.addEventListener(type, func, {
+        capture,
+        passive: true,
+      });
+    } else {
+      el.addEventListener(type, func, capture);
+    }
+  },
+  off(el, type, func, capture = false) {
+    el.removeEventListener(type, func, capture);
+  },
+};
+
+const loadImageAsync = (item, resolve, reject) => {
   const image = new Image();
 
   if (!item || !item.src) {
@@ -148,23 +202,61 @@ export const loadImageAsync = (item, resolve, reject) => {
     image.crossOrigin = item.cors;
   }
 
-  image.onload = () =>
+  image.onload = function () {
     resolve({
       naturalHeight: image.naturalHeight,
       naturalWidth: image.naturalWidth,
       src: image.src,
     });
+  };
 
-  image.onerror = (e) => reject(e);
+  image.onerror = function (e) {
+    reject(e);
+  };
 };
 
-export function isObject(obj) {
+const style = (el, prop) =>
+  typeof getComputedStyle !== 'undefined'
+    ? getComputedStyle(el, null).getPropertyValue(prop)
+    : el.style[prop];
+
+const overflow = (el) =>
+  style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x');
+
+const scrollParent = (el) => {
+  if (!inBrowser) return;
+  if (!(el instanceof HTMLElement)) {
+    return window;
+  }
+
+  let parent = el;
+
+  while (parent) {
+    if (parent === document.body || parent === document.documentElement) {
+      break;
+    }
+
+    if (!parent.parentNode) {
+      break;
+    }
+
+    if (/(scroll|auto)/.test(overflow(parent))) {
+      return parent;
+    }
+
+    parent = parent.parentNode;
+  }
+
+  return window;
+};
+
+function isObject(obj) {
   return obj !== null && typeof obj === 'object';
 }
 
-export function noop() {}
+function noop() {}
 
-export class ImageCache {
+class ImageCache {
   constructor({ max }) {
     this.options = {
       max: max || 100,
@@ -188,3 +280,20 @@ export class ImageCache {
     this._caches.shift();
   }
 }
+
+export {
+  ImageCache,
+  inBrowser,
+  CustomEvent,
+  remove,
+  find,
+  noop,
+  _,
+  isObject,
+  throttle,
+  supportWebp,
+  getDPR,
+  scrollParent,
+  loadImageAsync,
+  getBestSelectionFromSrcset,
+};

packages/vant-lazyload/yarn.lock

@@ -397,11 +397,6 @@
   dependencies:
     "@types/node" "*"
 
-"@vant/use@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.nlark.com/@vant/use/download/@vant/use-1.3.1.tgz?cache=0&sync_timestamp=1632302722581&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.3.1.tgz#8609fc7f86713df0c4ace7109eee6df2f3bd9a0f"
-  integrity sha1-hgn8f4ZxPfDErOcQnu5t8vO9mg8=
-
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/ansi-align/download/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"

packages/vant-use/src/useEventListener/index.ts

@@ -2,6 +2,22 @@ import { Ref, watch, isRef, unref, onUnmounted, onDeactivated } from 'vue';
 import { onMountedOrActivated } from '../onMountedOrActivated';
 import { inBrowser } from '../utils';
 
+// eslint-disable-next-line
+export let supportsPassive = false;
+
+if (inBrowser) {
+  try {
+    const opts = {};
+    Object.defineProperty(opts, 'passive', {
+      get() {
+        supportsPassive = true;
+      },
+    });
+    window.addEventListener('test-passive', null as any, opts);
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+}
+
 type TargetRef = EventTarget | Ref<EventTarget | undefined>;
 
 export type UseEventListenerOptions = {
@@ -27,7 +43,11 @@ export function useEventListener(
     const element = unref(target);
 
     if (element && !attached) {
-      element.addEventListener(type, listener, { capture, passive });
+      element.addEventListener(
+        type,
+        listener,
+        supportsPassive ? { capture, passive } : capture
+      );
       attached = true;
     }
   };

packages/vant-use/src/utils.ts

@@ -1,9 +1,5 @@
 export const inBrowser = typeof window !== 'undefined';
 
-// Keep forward compatible
-// should be removed in next major version
-export const supportsPassive = true;
-
 export function raf(fn: FrameRequestCallback): number {
   return inBrowser ? requestAnimationFrame(fn) : -1;
 }

packages/vant/src/calendar/Calendar.tsx

@@ -415,7 +415,8 @@ export default defineComponent({
             );
 
             if (disabledDay) {
-              select([startDay, getPrevDay(disabledDay)]);
+              const lastAbledEndDay = getPrevDay(disabledDay);
+              select([startDay, lastAbledEndDay]);
             } else {
               select([startDay, date], true);
             }
@@ -527,9 +528,9 @@ export default defineComponent({
           showTitle={props.showTitle}
           showSubtitle={props.showSubtitle}
           firstDayOfWeek={dayOffset.value}
-          onClick-subtitle={(event: MouseEvent) =>
-            emit('click-subtitle', event)
-          }
+          onClick-subtitle={(event: MouseEvent) => {
+            emit('click-subtitle', event);
+          }}
         />
         <div ref={bodyRef} class={bem('body')} onScroll={onScroll}>
           {months.value.map(renderMonth)}
@@ -541,7 +542,9 @@ export default defineComponent({
     watch(() => props.show, init);
     watch(
       () => [props.type, props.minDate, props.maxDate],
-      () => reset(getInitialDate(currentDate.value))
+      () => {
+        reset(getInitialDate(currentDate.value));
+      }
     );
     watch(
       () => props.defaultDate,

packages/vant/src/cascader/Cascader.tsx

@@ -24,7 +24,7 @@ export type CascaderOption = {
 
 type CascaderTab = {
   options: CascaderOption[];
-  selected: CascaderOption | null;
+  selectedOption: CascaderOption | null;
 };
 
 export type CascaderFieldNames = {
@@ -111,7 +111,7 @@ export default defineComponent({
           state.tabs = selectedOptions.map((option) => {
             const tab = {
               options: optionsCursor,
-              selected: option,
+              selectedOption: option,
             };
 
             const next = optionsCursor.find(
@@ -127,7 +127,7 @@ export default defineComponent({
           if (optionsCursor) {
             state.tabs.push({
               options: optionsCursor,
-              selected: null,
+              selectedOption: null,
             });
           }
 
@@ -142,7 +142,7 @@ export default defineComponent({
       state.tabs = [
         {
           options: props.options,
-          selected: null,
+          selectedOption: null,
         },
       ];
     };
@@ -152,7 +152,7 @@ export default defineComponent({
         return;
       }
 
-      state.tabs[tabIndex].selected = option;
+      state.tabs[tabIndex].selectedOption = option;
 
       if (state.tabs.length > tabIndex + 1) {
         state.tabs = state.tabs.slice(0, tabIndex + 1);
@@ -161,7 +161,7 @@ export default defineComponent({
       if (option[childrenKey]) {
         const nextTab = {
           options: option[childrenKey],
-          selected: null,
+          selectedOption: null,
         };
 
         if (state.tabs[tabIndex + 1]) {
@@ -176,7 +176,7 @@ export default defineComponent({
       }
 
       const selectedOptions = state.tabs
-        .map((tab) => tab.selected)
+        .map((tab) => tab.selectedOption)
         .filter(Boolean);
 
       const eventParams = {
@@ -260,19 +260,19 @@ export default defineComponent({
     );
 
     const renderTab = (tab: CascaderTab, tabIndex: number) => {
-      const { options, selected } = tab;
-      const title = selected
-        ? selected[textKey]
+      const { options, selectedOption } = tab;
+      const title = selectedOption
+        ? selectedOption[textKey]
         : props.placeholder || t('select');
 
       return (
         <Tab
           title={title}
           titleClass={bem('tab', {
-            unselected: !selected,
+            unselected: !selectedOption,
           })}
         >
-          {renderOptions(options, selected, tabIndex)}
+          {renderOptions(options, selectedOption, tabIndex)}
         </Tab>
       );
     };
@@ -298,7 +298,9 @@ export default defineComponent({
       () => props.modelValue,
       (value) => {
         if (value || value === 0) {
-          const values = state.tabs.map((tab) => tab.selected?.[valueKey]);
+          const values = state.tabs.map(
+            (tab) => tab.selectedOption?.[valueKey]
+          );
           if (values.includes(value)) {
             return;
           }

packages/vant/src/composables/use-lock-scroll.ts

@@ -1,5 +1,9 @@
 import { Ref, watch, onBeforeUnmount, onDeactivated } from 'vue';
-import { getScrollParent, onMountedOrActivated } from '@vant/use';
+import {
+  getScrollParent,
+  supportsPassive,
+  onMountedOrActivated,
+} from '@vant/use';
 import { useTouch } from './use-touch';
 import { preventDefault } from '../utils';
 
@@ -41,7 +45,11 @@ export function useLockScroll(
 
   const lock = () => {
     document.addEventListener('touchstart', touch.start);
-    document.addEventListener('touchmove', onTouchMove, { passive: false });
+    document.addEventListener(
+      'touchmove',
+      onTouchMove,
+      supportsPassive ? { passive: false } : false
+    );
 
     if (!totalLockCount) {
       document.body.classList.add(BODY_LOCK_CLASS);

packages/vant/src/picker/PickerColumn.tsx

@@ -29,8 +29,10 @@ const MOMENTUM_LIMIT_DISTANCE = 15;
 const [name, bem] = createNamespace('picker-column');
 
 function getElementTranslateY(element: Element) {
-  const { transform } = window.getComputedStyle(element);
+  const style = window.getComputedStyle(element);
+  const transform = style.transform || style.webkitTransform;
   const translateY = transform.slice(7, transform.length - 1).split(', ')[5];
+
   return Number(translateY);
 }
 
@@ -314,30 +316,36 @@ export default defineComponent({
 
     watch(
       () => props.defaultIndex,
-      (value) => setIndex(value)
+      (value) => {
+        setIndex(value);
+      }
     );
 
-    return () => (
-      <div
-        class={[bem(), props.className]}
-        onTouchstart={onTouchStart}
-        onTouchmove={onTouchMove}
-        onTouchend={onTouchEnd}
-        onTouchcancel={onTouchEnd}
-      >
-        <ul
-          ref={wrapper}
-          style={{
-            transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`,
-            transitionDuration: `${state.duration}ms`,
-            transitionProperty: state.duration ? 'all' : 'none',
-          }}
-          class={bem('wrapper')}
-          onTransitionend={stopMomentum}
+    return () => {
+      const wrapperStyle = {
+        transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`,
+        transitionDuration: `${state.duration}ms`,
+        transitionProperty: state.duration ? 'all' : 'none',
+      };
+
+      return (
+        <div
+          class={[bem(), props.className]}
+          onTouchstart={onTouchStart}
+          onTouchmove={onTouchMove}
+          onTouchend={onTouchEnd}
+          onTouchcancel={onTouchEnd}
         >
-          {renderOptions()}
-        </ul>
-      </div>
-    );
+          <ul
+            ref={wrapper}
+            style={wrapperStyle}
+            class={bem('wrapper')}
+            onTransitionend={stopMomentum}
+          >
+            {renderOptions()}
+          </ul>
+        </div>
+      );
+    };
   },
 });