vant 3.2.8 → 3.3.0

package/es/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/es/lazyload/vue-lazyload/index.js

@@ -0,0 +1,46 @@
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ */
+import Lazy from './lazy';
+import LazyComponent from './lazy-component';
+import LazyContainer from './lazy-container';
+import LazyImage from './lazy-image';
+export var Lazyload = {
+  /*
+   * install function
+   * @param  {App} app
+   * @param  {object} options lazyload options
+   */
+  install(app, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var LazyClass = Lazy();
+    var lazy = new LazyClass(options);
+    var lazyContainer = new LazyContainer({
+      lazy
+    });
+    app.config.globalProperties.$Lazyload = lazy;
+
+    if (options.lazyComponent) {
+      app.component('LazyComponent', LazyComponent(lazy));
+    }
+
+    if (options.lazyImage) {
+      app.component('LazyImage', LazyImage(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)
+    });
+  }
+
+};

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

@@ -0,0 +1,53 @@
+import { h } from 'vue';
+import { inBrowser, useRect } from '@vant/use';
+export default (lazy => ({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  emits: ['show'],
+
+  render() {
+    return 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 = useRect(this.$el);
+      return 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;
+    }
+
+  }
+}));

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

@@ -0,0 +1,98 @@
+/* eslint-disable max-classes-per-file */
+
+/* eslint-disable prefer-object-spread */
+import { remove } from './util';
+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;
+  }
+
+}
+
+export default 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();
+    remove(this.queue, container);
+  }
+
+}

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

@@ -0,0 +1,115 @@
+import { useRect } from '@vant/use';
+import { loadImageAsync } from './util';
+import { noop } from '../../utils';
+export 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 = 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 = 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;
+      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;
+      });
+    }
+
+  }
+}));