persagy-vant 0.0.27 → 0.0.29

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

@@ -1,29 +1,13 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var stdin_exports = {};
-__export(stdin_exports, {
-  default: () => ReactiveListener
-});
-module.exports = __toCommonJS(stdin_exports);
-var import_use = require("@vant/use");
-var import_util = require("./util");
-var import_utils = require("../../utils");
-class ReactiveListener {
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
+import { useRect } from '@vant/use';
+import { loadImageAsync } from './util';
+import { noop } from '../../utils';
+
+export default class ReactiveListener {
   constructor({
     el,
     src,
@@ -34,7 +18,7 @@ class ReactiveListener {
     options,
     cors,
     elRenderer,
-    imageCache
+    imageCache,
   }) {
     this.el = el;
     this.src = src;
@@ -43,37 +27,44 @@ class ReactiveListener {
     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
+      loadEnd: 0,
     };
+
     this.filter();
     this.initState();
-    this.render("loading", false);
+    this.render('loading', false);
   }
+
   /*
    * init listener state
    * @return
    */
   initState() {
-    if ("dataset" in this.el) {
+    if ('dataset' in this.el) {
       this.el.dataset.src = this.src;
     } else {
-      this.el.setAttribute("data-src", this.src);
+      this.el.setAttribute('data-src', this.src);
     }
+
     this.state = {
       loading: false,
       error: false,
       loaded: false,
-      rendered: false
+      rendered: false,
     };
   }
+
   /*
    * record performance
    * @return
@@ -81,6 +72,7 @@ class ReactiveListener {
   record(event) {
     this.performanceData[event] = Date.now();
   }
+
   /*
    * update image listener data
    * @param  {String} image uri
@@ -99,14 +91,21 @@ class ReactiveListener {
       this.initState();
     }
   }
+
   /*
    *  check el is in view
    * @return {Boolean} el is in view
    */
   checkInView() {
-    const rect = (0, import_use.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;
+    const 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
    */
@@ -115,6 +114,7 @@ class ReactiveListener {
       this.options.filter[key](this, this.options);
     });
   }
+
   /*
    * render loading first
    * @params cb:Function
@@ -122,65 +122,70 @@ class ReactiveListener {
    */
   renderLoading(cb) {
     this.state.loading = true;
-    (0, import_util.loadImageAsync)(
+    loadImageAsync(
       {
         src: this.loading,
-        cors: this.cors
+        cors: this.cors,
       },
       () => {
-        this.render("loading", false);
+        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)
+
+        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 = import_utils.noop) {
+  load(onFinish = noop) {
     if (this.attempt > this.options.attempt - 1 && this.state.error) {
-      if (process.env.NODE_ENV !== "production" && !this.options.silent) {
+      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.state.rendered && this.state.loaded) return;
     if (this.imageCache.has(this.src)) {
       this.state.loaded = true;
-      this.render("loaded", true);
+      this.render('loaded', true);
       this.state.rendered = true;
       return onFinish();
     }
+
     this.renderLoading(() => {
-      var _a, _b;
       this.attempt++;
-      (_b = (_a = this.options.adapter).beforeLoad) == null ? void 0 : _b.call(_a, this, this.options);
-      this.record("loadStart");
-      (0, import_util.loadImageAsync)(
+
+      this.options.adapter.beforeLoad?.(this, this.options);
+      this.record('loadStart');
+
+      loadImageAsync(
         {
           src: this.src,
-          cors: this.cors
+          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.record('loadEnd');
+          this.render('loaded', false);
           this.state.rendered = true;
           this.imageCache.add(this.src);
           onFinish();
@@ -189,11 +194,12 @@ class ReactiveListener {
           !this.options.silent && console.error(err);
           this.state.error = true;
           this.state.loaded = false;
-          this.render("error", false);
+          this.render('error', false);
         }
       );
     });
   }
+
   /*
    * render image
    * @param  {String} state to render // ['loading', 'src', 'error']
@@ -203,25 +209,30 @@ class ReactiveListener {
   render(state, cache) {
     this.elRenderer(this, state, cache);
   }
+
   /*
    * output performance data
    * @return {Object} performance data
    */
   performance() {
-    let state = "loading";
+    let state = 'loading';
     let time = 0;
+
     if (this.state.loaded) {
-      state = "loaded";
-      time = (this.performanceData.loadEnd - this.performanceData.loadStart) / 1e3;
+      state = 'loaded';
+      time =
+        (this.performanceData.loadEnd - this.performanceData.loadStart) / 1000;
     }
-    if (this.state.error)
-      state = "error";
+
+    if (this.state.error) state = 'error';
+
     return {
       src: this.src,
       state,
-      time
+      time,
     };
   }
+
   /*
    * $destroy
    * @return

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

@@ -1,61 +1,43 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+/**
+ * This is a fork of [vue-lazyload](https://github.com/hilongjw/vue-lazyload) with Vue 3 support.
+ * license at https://github.com/hilongjw/vue-lazyload/blob/master/LICENSE
+ */
+
+import { inBrowser } from '@vant/use';
+
+export const hasIntersectionObserver =
+  inBrowser &&
+  'IntersectionObserver' in window &&
+  'IntersectionObserverEntry' in window &&
+  'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+
+export const modeType = {
+  event: 'event',
+  observer: 'observer',
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var stdin_exports = {};
-__export(stdin_exports, {
-  ImageCache: () => ImageCache,
-  getBestSelectionFromSrcset: () => getBestSelectionFromSrcset,
-  getDPR: () => getDPR,
-  hasIntersectionObserver: () => hasIntersectionObserver,
-  loadImageAsync: () => loadImageAsync,
-  modeType: () => modeType,
-  off: () => off,
-  on: () => on,
-  remove: () => remove,
-  supportWebp: () => supportWebp,
-  throttle: () => throttle
-});
-module.exports = __toCommonJS(stdin_exports);
-var import_use = require("@vant/use");
-const hasIntersectionObserver = import_use.inBrowser && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
-const modeType = {
-  event: "event",
-  observer: "observer"
-};
-function remove(arr, item) {
-  if (!arr.length)
-    return;
+
+export function remove(arr, item) {
+  if (!arr.length) return;
   const index = arr.indexOf(item);
-  if (index > -1)
-    return arr.splice(index, 1);
+  if (index > -1) return arr.splice(index, 1);
 }
-function getBestSelectionFromSrcset(el, scale) {
-  if (el.tagName !== "IMG" || !el.getAttribute("data-srcset"))
-    return;
-  let options = el.getAttribute("data-srcset");
+
+export function getBestSelectionFromSrcset(el, scale) {
+  if (el.tagName !== 'IMG' || !el.getAttribute('data-srcset')) return;
+
+  let options = el.getAttribute('data-srcset');
   const container = el.parentNode;
   const containerWidth = container.offsetWidth * scale;
+
   let spaceIndex;
   let tmpSrc;
   let tmpWidth;
-  options = options.trim().split(",");
+
+  options = options.trim().split(',');
+
   const result = options.map((item) => {
     item = item.trim();
-    spaceIndex = item.lastIndexOf(" ");
+    spaceIndex = item.lastIndexOf(' ');
     if (spaceIndex === -1) {
       tmpSrc = item;
       tmpWidth = 999998;
@@ -68,6 +50,7 @@ function getBestSelectionFromSrcset(el, scale) {
     }
     return [tmpWidth, tmpSrc];
   });
+
   result.sort((a, b) => {
     if (a[0] < b[0]) {
       return 1;
@@ -76,17 +59,18 @@ function getBestSelectionFromSrcset(el, scale) {
       return -1;
     }
     if (a[0] === b[0]) {
-      if (b[1].indexOf(".webp", b[1].length - 5) !== -1) {
+      if (b[1].indexOf('.webp', b[1].length - 5) !== -1) {
         return 1;
       }
-      if (a[1].indexOf(".webp", a[1].length - 5) !== -1) {
+      if (a[1].indexOf('.webp', a[1].length - 5) !== -1) {
         return -1;
       }
     }
     return 0;
   });
-  let bestSelectedSrc = "";
+  let bestSelectedSrc = '';
   let tmpOption;
+
   for (let i = 0; i < result.length; i++) {
     tmpOption = result[i];
     bestSelectedSrc = tmpOption[1];
@@ -99,27 +83,35 @@ function getBestSelectionFromSrcset(el, scale) {
       break;
     }
   }
+
   return bestSelectedSrc;
 }
-const getDPR = (scale = 1) => import_use.inBrowser ? window.devicePixelRatio || scale : scale;
-function supportWebp() {
-  if (!import_use.inBrowser)
-    return false;
+
+export const getDPR = (scale = 1) =>
+  inBrowser ? window.devicePixelRatio || scale : scale;
+
+export function supportWebp() {
+  if (!inBrowser) return false;
+
   let support = true;
+
   try {
-    const elem = document.createElement("canvas");
-    if (elem.getContext && elem.getContext("2d")) {
-      support = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
+    const 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;
 }
-function throttle(action, delay) {
+
+export function throttle(action, delay) {
   let timeout = null;
   let lastRun = 0;
-  return function(...args) {
+  return function (...args) {
     if (timeout) {
       return;
     }
@@ -136,49 +128,60 @@ function throttle(action, delay) {
     }
   };
 }
-function on(el, type, func) {
+
+export function on(el, type, func) {
   el.addEventListener(type, func, {
     capture: false,
-    passive: true
+    passive: true,
   });
 }
-function off(el, type, func) {
+
+export function off(el, type, func) {
   el.removeEventListener(type, func, false);
 }
-const loadImageAsync = (item, resolve, reject) => {
+
+export const loadImageAsync = (item, resolve, reject) => {
   const image = new Image();
+
   if (!item || !item.src) {
-    return reject(new Error("image src is required"));
+    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.onload = () =>
+    resolve({
+      naturalHeight: image.naturalHeight,
+      naturalWidth: image.naturalWidth,
+      src: image.src,
+    });
+
   image.onerror = (e) => reject(e);
 };
-class ImageCache {
+
+export class ImageCache {
   constructor({ max }) {
     this.options = {
-      max: max || 100
+      max: max || 100,
     };
     this.caches = [];
   }
+
   has(key) {
     return this.caches.indexOf(key) > -1;
   }
+
   add(key) {
-    if (this.has(key))
-      return;
+    if (this.has(key)) return;
     this.caches.push(key);
     if (this.caches.length > this.options.max) {
       this.free();
     }
   }
+
   free() {
     this.caches.shift();
   }

package/lib/list/List.tsx

@@ -0,0 +1,189 @@
+import {
+  ref,
+  watch,
+  nextTick,
+  onUpdated,
+  onMounted,
+  defineComponent,
+  type ExtractPropTypes,
+} from 'vue';
+
+// Utils
+import {
+  isHidden,
+  truthProp,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
+
+// Composables
+import { useRect, useScrollParent, useEventListener } from '@vant/use';
+import { useExpose } from '../composables/use-expose';
+import { useTabStatus } from '../composables/use-tab-status';
+
+// Components
+import { Loading } from '../loading';
+
+// Types
+import type { ListExpose, ListDirection } from './types';
+
+const [name, bem, t] = createNamespace('list');
+
+const listProps = {
+  error: Boolean,
+  offset: makeNumericProp(300),
+  loading: Boolean,
+  finished: Boolean,
+  errorText: String,
+  direction: makeStringProp<ListDirection>('down'),
+  loadingText: String,
+  finishedText: String,
+  immediateCheck: truthProp,
+};
+
+export type ListProps = ExtractPropTypes<typeof listProps>;
+
+export default defineComponent({
+  name,
+
+  props: listProps,
+
+  emits: ['load', 'update:error', 'update:loading'],
+
+  setup(props, { emit, slots }) {
+    // use sync innerLoading state to avoid repeated loading in some edge cases
+    const loading = ref(props.loading);
+    const root = ref<HTMLElement>();
+    const placeholder = ref<HTMLElement>();
+    const tabStatus = useTabStatus();
+    const scrollParent = useScrollParent(root);
+
+    const check = () => {
+      nextTick(() => {
+        if (
+          loading.value ||
+          props.finished ||
+          props.error ||
+          // skip check when inside an inactive tab
+          tabStatus?.value === false
+        ) {
+          return;
+        }
+
+        const { offset, direction } = props;
+        const scrollParentRect = useRect(scrollParent);
+
+        if (!scrollParentRect.height || isHidden(root)) {
+          return;
+        }
+
+        let isReachEdge = false;
+        const placeholderRect = useRect(placeholder);
+
+        if (direction === 'up') {
+          isReachEdge = scrollParentRect.top - placeholderRect.top <= offset;
+        } else {
+          isReachEdge =
+            placeholderRect.bottom - scrollParentRect.bottom <= offset;
+        }
+
+        if (isReachEdge) {
+          loading.value = true;
+          emit('update:loading', true);
+          emit('load');
+        }
+      });
+    };
+
+    const renderFinishedText = () => {
+      if (props.finished) {
+        const text = slots.finished ? slots.finished() : props.finishedText;
+        if (text) {
+          return <div class={bem('finished-text')}>{text}</div>;
+        }
+      }
+    };
+
+    const clickErrorText = () => {
+      emit('update:error', false);
+      check();
+    };
+
+    const renderErrorText = () => {
+      if (props.error) {
+        const text = slots.error ? slots.error() : props.errorText;
+        if (text) {
+          return (
+            <div
+              role="button"
+              class={bem('error-text')}
+              tabindex={0}
+              onClick={clickErrorText}
+            >
+              {text}
+            </div>
+          );
+        }
+      }
+    };
+
+    const renderLoading = () => {
+      if (loading.value && !props.finished) {
+        return (
+          <div class={bem('loading')}>
+            {slots.loading ? (
+              slots.loading()
+            ) : (
+              <Loading class={bem('loading-icon')}>
+                {props.loadingText || t('loading')}
+              </Loading>
+            )}
+          </div>
+        );
+      }
+    };
+
+    watch(() => [props.loading, props.finished, props.error], check);
+
+    if (tabStatus) {
+      watch(tabStatus, (tabActive) => {
+        if (tabActive) {
+          check();
+        }
+      });
+    }
+
+    onUpdated(() => {
+      loading.value = props.loading!;
+    });
+
+    onMounted(() => {
+      if (props.immediateCheck) {
+        check();
+      }
+    });
+
+    useExpose<ListExpose>({ check });
+
+    useEventListener('scroll', check, {
+      target: scrollParent,
+      passive: true,
+    });
+
+    return () => {
+      const Content = slots.default?.();
+      const Placeholder = <div ref={placeholder} class={bem('placeholder')} />;
+
+      return (
+        <div ref={root} role="feed" class={bem()} aria-busy={loading.value}>
+          {props.direction === 'down' ? Content : Placeholder}
+          {renderLoading()}
+          {renderFinishedText()}
+          {renderErrorText()}
+          {props.direction === 'up' ? Content : Placeholder}
+        </div>
+      );
+    };
+  },
+});