vant 3.2.6 → 3.3.1

package/lib/index.d.ts

@@ -90,4 +90,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.2.6";
+export const version: "3.3.1";

package/lib/index.js

@@ -782,7 +782,7 @@ Object.keys(_uploader).forEach(function (key) {
   if (key in exports && exports[key] === _uploader[key]) return;
   exports[key] = _uploader[key];
 });
-var version = '3.2.6';
+var version = '3.3.1';
 exports.version = version;
 
 function install(app) {

package/lib/lazyload/index.d.ts

@@ -1,3 +1,3 @@
-import { Lazyload } from '@vant/lazyload';
+import { Lazyload } from './vue-lazyload';
 export default Lazyload;
 export { Lazyload };

package/lib/lazyload/index.js

@@ -3,8 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _lazyload = require("@vant/lazyload");
+var _vueLazyload = require("./vue-lazyload");
 
-exports.Lazyload = _lazyload.Lazyload;
-var _default = _lazyload.Lazyload;
+exports.Lazyload = _vueLazyload.Lazyload;
+var _default = _vueLazyload.Lazyload;
 exports.default = _default;

package/lib/lazyload/vue-lazyload/index.d.ts

@@ -0,0 +1,55 @@
+import type { App } from 'vue';
+
+declare type ListenEvent =
+  | 'scroll'
+  | 'wheel'
+  | 'mousewheel'
+  | 'resize'
+  | 'animationend'
+  | 'transitionend'
+  | 'touchmove';
+
+// eslint-disable-next-line
+declare type Callback = (listener: any, options: LazyloadOptions) => void;
+
+declare type Filter = {
+  webp?: Callback;
+  progressive?: Callback;
+};
+
+declare type Adapter = {
+  error?: Callback;
+  loaded?: Callback;
+  loading?: Callback;
+};
+
+export declare type LazyloadOptions = {
+  error?: string;
+  filter?: Filter;
+  silent?: boolean;
+  adapter?: Adapter;
+  loading?: string;
+  attempt?: number;
+  preLoad?: number;
+  observer?: boolean;
+  lazyImage?: boolean;
+  throttleWait?: number;
+  listenEvents?: ListenEvent[];
+  dispatchEvent?: boolean;
+  lazyComponent?: boolean;
+  observerOptions?: IntersectionObserverInit;
+};
+
+export declare const Lazyload: {
+  install(app: App, options?: LazyloadOptions): void;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $Lazyload: {
+      $on: (event: string, handler: Callback) => void;
+      $off: (event: string, handler?: Callback) => void;
+      $once: (event: string, handler: Callback) => void;
+    };
+  }
+}

package/lib/lazyload/vue-lazyload/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Lazyload = void 0;
+
+var _lazy = _interopRequireDefault(require("./lazy"));
+
+var _lazyComponent = _interopRequireDefault(require("./lazy-component"));
+
+var _lazyContainer = _interopRequireDefault(require("./lazy-container"));
+
+var _lazyImage = _interopRequireDefault(require("./lazy-image"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ */
+var Lazyload = {
+  /*
+   * install function
+   * @param  {App} app
+   * @param  {object} options lazyload options
+   */
+  install(app, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var LazyClass = (0, _lazy.default)();
+    var lazy = new LazyClass(options);
+    var lazyContainer = new _lazyContainer.default({
+      lazy
+    });
+    app.config.globalProperties.$Lazyload = lazy;
+
+    if (options.lazyComponent) {
+      app.component('LazyComponent', (0, _lazyComponent.default)(lazy));
+    }
+
+    if (options.lazyImage) {
+      app.component('LazyImage', (0, _lazyImage.default)(lazy));
+    }
+
+    app.directive('lazy', {
+      beforeMount: lazy.add.bind(lazy),
+      updated: lazy.update.bind(lazy),
+      unmounted: lazy.remove.bind(lazy)
+    });
+    app.directive('lazy-container', {
+      beforeMount: lazyContainer.bind.bind(lazyContainer),
+      updated: lazyContainer.update.bind(lazyContainer),
+      unmounted: lazyContainer.unbind.bind(lazyContainer)
+    });
+  }
+
+};
+exports.Lazyload = Lazyload;

package/lib/lazyload/vue-lazyload/lazy-component.js

@@ -0,0 +1,62 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _use = require("@vant/use");
+
+var _default = lazy => ({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  emits: ['show'],
+
+  render() {
+    return (0, _vue.h)(this.tag, this.show && this.$slots.default ? this.$slots.default() : null);
+  },
+
+  data() {
+    return {
+      el: null,
+      state: {
+        loaded: false
+      },
+      show: false
+    };
+  },
+
+  mounted() {
+    this.el = this.$el;
+    lazy.addLazyBox(this);
+    lazy.lazyLoadHandler();
+  },
+
+  beforeUnmount() {
+    lazy.removeComponent(this);
+  },
+
+  methods: {
+    checkInView() {
+      var rect = (0, _use.useRect)(this.$el);
+      return _use.inBrowser && rect.top < window.innerHeight * lazy.options.preLoad && rect.bottom > 0 && rect.left < window.innerWidth * lazy.options.preLoad && rect.right > 0;
+    },
+
+    load() {
+      this.show = true;
+      this.state.loaded = true;
+      this.$emit('show', this);
+    },
+
+    destroy() {
+      return this.$destroy;
+    }
+
+  }
+});
+
+exports.default = _default;

package/lib/lazyload/vue-lazyload/lazy-container.js

@@ -0,0 +1,106 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _util = require("./util");
+
+/* eslint-disable max-classes-per-file */
+
+/* eslint-disable prefer-object-spread */
+var defaultOptions = {
+  selector: 'img'
+};
+
+class LazyContainer {
+  constructor(_ref) {
+    var {
+      el,
+      binding,
+      vnode,
+      lazy
+    } = _ref;
+    this.el = null;
+    this.vnode = vnode;
+    this.binding = binding;
+    this.options = {};
+    this.lazy = lazy;
+    this.queue = [];
+    this.update({
+      el,
+      binding
+    });
+  }
+
+  update(_ref2) {
+    var {
+      el,
+      binding
+    } = _ref2;
+    this.el = el;
+    this.options = Object.assign({}, defaultOptions, binding.value);
+    var imgs = this.getImgs();
+    imgs.forEach(el => {
+      this.lazy.add(el, Object.assign({}, this.binding, {
+        value: {
+          src: 'dataset' in el ? el.dataset.src : el.getAttribute('data-src'),
+          error: ('dataset' in el ? el.dataset.error : el.getAttribute('data-error')) || this.options.error,
+          loading: ('dataset' in el ? el.dataset.loading : el.getAttribute('data-loading')) || this.options.loading
+        }
+      }), this.vnode);
+    });
+  }
+
+  getImgs() {
+    return Array.from(this.el.querySelectorAll(this.options.selector));
+  }
+
+  clear() {
+    var imgs = this.getImgs();
+    imgs.forEach(el => this.lazy.remove(el));
+    this.vnode = null;
+    this.binding = null;
+    this.lazy = null;
+  }
+
+}
+
+class LazyContainerManager {
+  constructor(_ref3) {
+    var {
+      lazy
+    } = _ref3;
+    this.lazy = lazy;
+    this.queue = [];
+  }
+
+  bind(el, binding, vnode) {
+    var container = new LazyContainer({
+      el,
+      binding,
+      vnode,
+      lazy: this.lazy
+    });
+    this.queue.push(container);
+  }
+
+  update(el, binding, vnode) {
+    var container = this.queue.find(item => item.el === el);
+    if (!container) return;
+    container.update({
+      el,
+      binding,
+      vnode
+    });
+  }
+
+  unbind(el) {
+    var container = this.queue.find(item => item.el === el);
+    if (!container) return;
+    container.clear();
+    (0, _util.remove)(this.queue, container);
+  }
+
+}
+
+exports.default = LazyContainerManager;

package/lib/lazyload/vue-lazyload/lazy-image.js

@@ -0,0 +1,125 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _use = require("@vant/use");
+
+var _util = require("./util");
+
+var _utils = require("../../utils");
+
+var _default = lazyManager => ({
+  props: {
+    src: [String, Object],
+    tag: {
+      type: String,
+      default: 'img'
+    }
+  },
+
+  render(h) {
+    return h(this.tag, {
+      attrs: {
+        src: this.renderSrc
+      }
+    }, this.$slots.default);
+  },
+
+  data() {
+    return {
+      el: null,
+      options: {
+        src: '',
+        error: '',
+        loading: '',
+        attempt: lazyManager.options.attempt
+      },
+      state: {
+        loaded: false,
+        error: false,
+        attempt: 0
+      },
+      renderSrc: ''
+    };
+  },
+
+  watch: {
+    src() {
+      this.init();
+      lazyManager.addLazyBox(this);
+      lazyManager.lazyLoadHandler();
+    }
+
+  },
+
+  created() {
+    this.init();
+    this.renderSrc = this.options.loading;
+  },
+
+  mounted() {
+    this.el = this.$el;
+    lazyManager.addLazyBox(this);
+    lazyManager.lazyLoadHandler();
+  },
+
+  beforeUnmount() {
+    lazyManager.removeComponent(this);
+  },
+
+  methods: {
+    init() {
+      var {
+        src,
+        loading,
+        error
+      } = lazyManager.valueFormatter(this.src);
+      this.state.loaded = false;
+      this.options.src = src;
+      this.options.error = error;
+      this.options.loading = loading;
+      this.renderSrc = this.options.loading;
+    },
+
+    checkInView() {
+      var rect = (0, _use.useRect)(this.$el);
+      return rect.top < window.innerHeight * lazyManager.options.preLoad && rect.bottom > 0 && rect.left < window.innerWidth * lazyManager.options.preLoad && rect.right > 0;
+    },
+
+    load(onFinish) {
+      if (onFinish === void 0) {
+        onFinish = _utils.noop;
+      }
+
+      if (this.state.attempt > this.options.attempt - 1 && this.state.error) {
+        if (process.env.NODE_ENV !== 'production' && !lazyManager.options.silent) {
+          console.log("[@vant/lazyload] " + this.options.src + " tried too more than " + this.options.attempt + " times");
+        }
+
+        onFinish();
+        return;
+      }
+
+      var {
+        src
+      } = this.options;
+      (0, _util.loadImageAsync)({
+        src
+      }, _ref => {
+        var {
+          src
+        } = _ref;
+        this.renderSrc = src;
+        this.state.loaded = true;
+      }, () => {
+        this.state.attempt++;
+        this.renderSrc = this.options.error;
+        this.state.error = true;
+      });
+    }
+
+  }
+});
+
+exports.default = _default;