zartui 3.0.1 → 3.0.3

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

@@ -0,0 +1,378 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_use = require("@zartui/use");
+var import_util = require("./util");
+var import_utils = require("../../utils");
+var import_listener = __toESM(require("./listener"));
+const DEFAULT_URL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+const DEFAULT_EVENTS = [
+  "scroll",
+  "wheel",
+  "mousewheel",
+  "resize",
+  "animationend",
+  "transitionend",
+  "touchmove"
+];
+const DEFAULT_OBSERVER_OPTIONS = {
+  rootMargin: "0px",
+  threshold: 0
+};
+function stdin_default() {
+  return class Lazy {
+    constructor({
+      preLoad,
+      error,
+      throttleWait,
+      preLoadTop,
+      dispatchEvent,
+      loading,
+      attempt,
+      silent = true,
+      scale,
+      listenEvents,
+      filter,
+      adapter,
+      observer,
+      observerOptions
+    }) {
+      this.mode = import_util.modeType.event;
+      this.listeners = [];
+      this.targetIndex = 0;
+      this.targets = [];
+      this.options = {
+        silent,
+        dispatchEvent: !!dispatchEvent,
+        throttleWait: throttleWait || 200,
+        preLoad: preLoad || 1.3,
+        preLoadTop: preLoadTop || 0,
+        error: error || DEFAULT_URL,
+        loading: loading || DEFAULT_URL,
+        attempt: attempt || 3,
+        scale: scale || (0, import_util.getDPR)(scale),
+        ListenEvents: listenEvents || DEFAULT_EVENTS,
+        supportWebp: (0, import_util.supportWebp)(),
+        filter: filter || {},
+        adapter: adapter || {},
+        observer: !!observer,
+        observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS
+      };
+      this.initEvent();
+      this.imageCache = new import_util.ImageCache({ max: 200 });
+      this.lazyLoadHandler = (0, import_util.throttle)(
+        this.lazyLoadHandler.bind(this),
+        this.options.throttleWait
+      );
+      this.setMode(this.options.observer ? import_util.modeType.observer : import_util.modeType.event);
+    }
+    config(options = {}) {
+      Object.assign(this.options, options);
+    }
+    performance() {
+      return this.listeners.map((item) => item.performance());
+    }
+    addLazyBox(vm) {
+      this.listeners.push(vm);
+      if (import_use.inBrowser) {
+        this.addListenerTarget(window);
+        this.observer && this.observer.observe(vm.el);
+        if (vm.$el && vm.$el.parentNode) {
+          this.addListenerTarget(vm.$el.parentNode);
+        }
+      }
+    }
+    add(el, binding, vnode) {
+      if (this.listeners.some((item) => item.el === el)) {
+        this.update(el, binding);
+        return (0, import_vue.nextTick)(this.lazyLoadHandler);
+      }
+      const value = this.valueFormatter(binding.value);
+      let { src } = value;
+      (0, import_vue.nextTick)(() => {
+        src = (0, import_util.getBestSelectionFromSrcset)(el, this.options.scale) || src;
+        this.observer && this.observer.observe(el);
+        const container = Object.keys(binding.modifiers)[0];
+        let $parent;
+        if (container) {
+          $parent = vnode.context.$refs[container];
+          $parent = $parent ? $parent.$el || $parent : document.getElementById(container);
+        }
+        if (!$parent) {
+          $parent = (0, import_use.getScrollParent)(el);
+        }
+        const newListener = new import_listener.default({
+          bindType: binding.arg,
+          $parent,
+          el,
+          src,
+          loading: value.loading,
+          error: value.error,
+          cors: value.cors,
+          elRenderer: this.elRenderer.bind(this),
+          options: this.options,
+          imageCache: this.imageCache
+        });
+        this.listeners.push(newListener);
+        if (import_use.inBrowser) {
+          this.addListenerTarget(window);
+          this.addListenerTarget($parent);
+        }
+        this.lazyLoadHandler();
+        (0, import_vue.nextTick)(() => this.lazyLoadHandler());
+      });
+    }
+    update(el, binding, vnode) {
+      const value = this.valueFormatter(binding.value);
+      let { src } = value;
+      src = (0, import_util.getBestSelectionFromSrcset)(el, this.options.scale) || src;
+      const exist = this.listeners.find((item) => item.el === el);
+      if (!exist) {
+        this.add(el, binding, vnode);
+      } else {
+        exist.update({
+          src,
+          error: value.error,
+          loading: value.loading
+        });
+      }
+      if (this.observer) {
+        this.observer.unobserve(el);
+        this.observer.observe(el);
+      }
+      this.lazyLoadHandler();
+      (0, import_vue.nextTick)(() => this.lazyLoadHandler());
+    }
+    remove(el) {
+      if (!el)
+        return;
+      this.observer && this.observer.unobserve(el);
+      const existItem = this.listeners.find((item) => item.el === el);
+      if (existItem) {
+        this.removeListenerTarget(existItem.$parent);
+        this.removeListenerTarget(window);
+        (0, import_util.remove)(this.listeners, existItem);
+        existItem.$destroy();
+      }
+    }
+    removeComponent(vm) {
+      if (!vm)
+        return;
+      (0, import_util.remove)(this.listeners, vm);
+      this.observer && this.observer.unobserve(vm.el);
+      if (vm.$parent && vm.$el.parentNode) {
+        this.removeListenerTarget(vm.$el.parentNode);
+      }
+      this.removeListenerTarget(window);
+    }
+    setMode(mode) {
+      if (!import_util.hasIntersectionObserver && mode === import_util.modeType.observer) {
+        mode = import_util.modeType.event;
+      }
+      this.mode = mode;
+      if (mode === import_util.modeType.event) {
+        if (this.observer) {
+          this.listeners.forEach((listener) => {
+            this.observer.unobserve(listener.el);
+          });
+          this.observer = null;
+        }
+        this.targets.forEach((target) => {
+          this.initListen(target.el, true);
+        });
+      } else {
+        this.targets.forEach((target) => {
+          this.initListen(target.el, false);
+        });
+        this.initIntersectionObserver();
+      }
+    }
+    addListenerTarget(el) {
+      if (!el)
+        return;
+      let target = this.targets.find((target2) => target2.el === el);
+      if (!target) {
+        target = {
+          el,
+          id: ++this.targetIndex,
+          childrenCount: 1,
+          listened: true
+        };
+        this.mode === import_util.modeType.event && this.initListen(target.el, true);
+        this.targets.push(target);
+      } else {
+        target.childrenCount++;
+      }
+      return this.targetIndex;
+    }
+    removeListenerTarget(el) {
+      this.targets.forEach((target, index) => {
+        if (target.el === el) {
+          target.childrenCount--;
+          if (!target.childrenCount) {
+            this.initListen(target.el, false);
+            this.targets.splice(index, 1);
+            target = null;
+          }
+        }
+      });
+    }
+    initListen(el, start) {
+      this.options.ListenEvents.forEach(
+        (evt) => (start ? import_util.on : import_util.off)(el, evt, this.lazyLoadHandler)
+      );
+    }
+    initEvent() {
+      this.Event = {
+        listeners: {
+          loading: [],
+          loaded: [],
+          error: []
+        }
+      };
+      this.$on = (event, func) => {
+        if (!this.Event.listeners[event])
+          this.Event.listeners[event] = [];
+        this.Event.listeners[event].push(func);
+      };
+      this.$once = (event, func) => {
+        const on2 = (...args) => {
+          this.$off(event, on2);
+          func.apply(this, args);
+        };
+        this.$on(event, on2);
+      };
+      this.$off = (event, func) => {
+        if (!func) {
+          if (!this.Event.listeners[event])
+            return;
+          this.Event.listeners[event].length = 0;
+          return;
+        }
+        (0, import_util.remove)(this.Event.listeners[event], func);
+      };
+      this.$emit = (event, context, inCache) => {
+        if (!this.Event.listeners[event])
+          return;
+        this.Event.listeners[event].forEach((func) => func(context, inCache));
+      };
+    }
+    lazyLoadHandler() {
+      const freeList = [];
+      this.listeners.forEach((listener) => {
+        if (!listener.el || !listener.el.parentNode) {
+          freeList.push(listener);
+        }
+        const catIn = listener.checkInView();
+        if (!catIn)
+          return;
+        listener.load();
+      });
+      freeList.forEach((item) => {
+        (0, import_util.remove)(this.listeners, item);
+        item.$destroy();
+      });
+    }
+    initIntersectionObserver() {
+      if (!import_util.hasIntersectionObserver) {
+        return;
+      }
+      this.observer = new IntersectionObserver(
+        this.observerHandler.bind(this),
+        this.options.observerOptions
+      );
+      if (this.listeners.length) {
+        this.listeners.forEach((listener) => {
+          this.observer.observe(listener.el);
+        });
+      }
+    }
+    observerHandler(entries) {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.listeners.forEach((listener) => {
+            if (listener.el === entry.target) {
+              if (listener.state.loaded)
+                return this.observer.unobserve(listener.el);
+              listener.load();
+            }
+          });
+        }
+      });
+    }
+    elRenderer(listener, state, cache) {
+      if (!listener.el)
+        return;
+      const { el, bindType } = listener;
+      let src;
+      switch (state) {
+        case "loading":
+          src = listener.loading;
+          break;
+        case "error":
+          src = listener.error;
+          break;
+        default:
+          ({ src } = listener);
+          break;
+      }
+      if (bindType) {
+        el.style[bindType] = 'url("' + src + '")';
+      } else if (el.getAttribute("src") !== src) {
+        el.setAttribute("src", src);
+      }
+      el.setAttribute("lazy", state);
+      this.$emit(state, listener, cache);
+      this.options.adapter[state] && this.options.adapter[state](listener, this.options);
+      if (this.options.dispatchEvent) {
+        const event = new CustomEvent(state, {
+          detail: listener
+        });
+        el.dispatchEvent(event);
+      }
+    }
+    valueFormatter(value) {
+      let src = value;
+      let { loading, error } = this.options;
+      if ((0, import_utils.isObject)(value)) {
+        if (process.env.NODE_ENV !== "production" && !value.src && !this.options.silent) {
+          console.error("[@zartui/lazyload] miss src with " + value);
+        }
+        ({ src } = value);
+        loading = value.loading || this.options.loading;
+        error = value.error || this.options.error;
+      }
+      return {
+        src,
+        loading,
+        error
+      };
+    }
+  };
+}

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

@@ -0,0 +1,192 @@
+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("@zartui/use");
+var import_util = require("./util");
+var import_utils = require("../../utils");
+class ReactiveListener {
+  constructor({
+    el,
+    src,
+    error,
+    loading,
+    bindType,
+    $parent,
+    options,
+    cors,
+    elRenderer,
+    imageCache
+  }) {
+    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);
+  }
+  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(event) {
+    this.performanceData[event] = Date.now();
+  }
+  update({ src, loading, error }) {
+    const oldSrc = this.src;
+    this.src = src;
+    this.loading = loading;
+    this.error = error;
+    this.filter();
+    if (oldSrc !== this.src) {
+      this.attempt = 0;
+      this.initState();
+    }
+  }
+  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;
+  }
+  filter() {
+    Object.keys(this.options.filter).forEach((key) => {
+      this.options.filter[key](this, this.options);
+    });
+  }
+  renderLoading(cb) {
+    this.state.loading = true;
+    (0, import_util.loadImageAsync)(
+      {
+        src: this.loading,
+        cors: this.cors
+      },
+      () => {
+        this.render("loading", false);
+        this.state.loading = false;
+        cb();
+      },
+      () => {
+        cb();
+        this.state.loading = false;
+        if (process.env.NODE_ENV !== "production" && !this.options.silent)
+          console.warn(
+            `[@zartui/lazyload] load failed with loading image(${this.loading})`
+          );
+      }
+    );
+  }
+  load(onFinish = import_utils.noop) {
+    if (this.attempt > this.options.attempt - 1 && this.state.error) {
+      if (process.env.NODE_ENV !== "production" && !this.options.silent) {
+        console.log(
+          `[@zartui/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 _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)(
+        {
+          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(state, cache) {
+    this.elRenderer(this, state, cache);
+  }
+  performance() {
+    let state = "loading";
+    let time = 0;
+    if (this.state.loaded) {
+      state = "loaded";
+      time = (this.performanceData.loadEnd - this.performanceData.loadStart) / 1e3;
+    }
+    if (this.state.error)
+      state = "error";
+    return {
+      src: this.src,
+      state,
+      time
+    };
+  }
+  $destroy() {
+    this.el = null;
+    this.src = null;
+    this.error = null;
+    this.loading = null;
+    this.bindType = null;
+    this.attempt = 0;
+  }
+}