easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-image.js

@@ -0,0 +1,327 @@
+var C = Object.defineProperty;
+var S = (s) => {
+  throw TypeError(s);
+};
+var N = (s, i, e) => i in s ? C(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
+var p = (s, i, e) => N(s, typeof i != "symbol" ? i + "" : i, e), E = (s, i, e) => i.has(s) || S("Cannot " + e);
+var t = (s, i, e) => (E(s, i, "read from private field"), e ? e.call(s) : i.get(s)), a = (s, i, e) => i.has(s) ? S("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), n = (s, i, e, o) => (E(s, i, "write to private field"), o ? o.call(s, e) : i.set(s, e), e);
+import { B as A } from "./Base.js";
+import { s as D } from "../css/ea-image.style.js";
+var m, l, w, v, r, u, d, h, c, g;
+class _ extends A {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, m);
+    /** @type {HTMLImageElement} */
+    a(this, l);
+    /** @type {HTMLElement} */
+    a(this, w);
+    /** @type {HTMLElement} */
+    a(this, v);
+    /** @type {EaImagePreview} */
+    a(this, r);
+    /** @type {HTMLSlotElement} */
+    a(this, u);
+    /** @type {HTMLSlotElement} */
+    a(this, d);
+    /** @type {AbortController} */
+    a(this, h);
+    a(this, c, {
+      /** @type {"loading" | "error" | "success"} */
+      imageStatus: "loading",
+      previewQueue: []
+    });
+    p(this, "state", this.properties({
+      src: {
+        type: String,
+        default: "",
+        observer: async (e) => {
+          const o = new Image();
+          if (this.updateContainerClasslist(), this.lazy) {
+            const f = new IntersectionObserver((b) => {
+              b[0].intersectionRatio <= 0 || (f.disconnect(), o.src = this.src);
+            });
+            f.observe(this);
+          } else
+            o.src = e;
+          o.onload = () => {
+            t(this, l).setAttribute("src", e), t(this, c).imageStatus = "success", this.updateContainerClasslist(), this.emit("load");
+          }, o.onerror = () => {
+            t(this, c).imageStatus = "error", this.updateContainerClasslist(), this.emit("error");
+          };
+        }
+      },
+      width: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!CSS.supports("width", e))
+            return console.warn(
+              `[EaImage] The width value ${e} is not supported.`
+            );
+          this.style.setProperty("--ea-image-width", e);
+        }
+      },
+      height: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!CSS.supports("height", e))
+            return console.warn(
+              `[EaImage] The height value ${e} is not supported.`
+            );
+          this.style.setProperty("--ea-image-height", e);
+        }
+      },
+      fit: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!CSS.supports("object-fit", e))
+            return console.warn(
+              `[EaImage] The object-fit value ${e} is not supported.`
+            );
+          this.style.setProperty("--ea-image-fit", e);
+        }
+      },
+      alt: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, l).alt = e;
+        }
+      },
+      loading: {
+        type: ["lazy", "eager"],
+        default: "eager",
+        observer: (e) => {
+          t(this, l).setAttribute("loading", e);
+        }
+      },
+      referrerpolicy: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, l).setAttribute("referrerpolicy", e);
+        }
+      },
+      crossorigin: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, l).setAttribute("sizes", e);
+        }
+      },
+      lazy: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      preview: {
+        type: Boolean,
+        default: !1,
+        observer: async (e) => {
+          e && await import("./ea-image-preview.js");
+        }
+      },
+      "hide-on-click-modal": {
+        type: Boolean,
+        default: !1,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["hide-on-click-modal"] = e);
+        }
+      },
+      "z-index": {
+        type: Number,
+        default: 2e3,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["z-index"] = e);
+        }
+      },
+      "initial-index": {
+        type: Number,
+        default: 0,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["initial-index"] = e);
+        }
+      },
+      "close-on-press-escape": {
+        type: Boolean,
+        default: !0,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["close-on-press-escape"] = e);
+        }
+      },
+      infinite: {
+        type: Boolean,
+        default: !0,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r).infinite = e);
+        }
+      },
+      "zoom-rate": {
+        type: Number,
+        default: 1.2,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["zoom-rate"] = e);
+        }
+      },
+      scale: {
+        type: Number,
+        default: 1,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r).scale = e);
+        }
+      },
+      "min-scale": {
+        type: Number,
+        default: 0.2,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["min-scale"] = e);
+        }
+      },
+      "max-scale": {
+        type: Number,
+        default: 7,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["max-scale"] = e);
+        }
+      },
+      "show-progress": {
+        type: Boolean,
+        default: !1,
+        observer: async (e) => {
+          this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, r)["show-progress"] = e);
+        }
+      }
+    }));
+    p(this, "propState", this.properties({
+      previewSrcList: {
+        props: !0,
+        type: Array,
+        default: () => [],
+        /** @param {String[]} newVal */
+        observer: async (e) => {
+          if (!this.preview)
+            return console.warn("[EaImage] Preview is not enabled.");
+          await customElements.whenDefined("ea-image-preview"), t(this, r).urlList = e;
+        }
+      }
+    }));
+    /**
+     * 处理 slotchange 事件，动态设置 slot 属性以传递给 ea-image-preview
+     * @param {HTMLSlotElement} slotElement
+     * @param {string} slotName
+     */
+    a(this, g, (e, o) => {
+      e.assignedNodes({ flatten: !0 }).some(
+        (y) => y.nodeType === Node.ELEMENT_NODE || y.nodeType === Node.TEXT_NODE && y.textContent.trim()
+      ) ? e.setAttribute("slot", o) : e.removeAttribute("slot");
+    });
+    /**
+     * 设置当前项
+     * @param {Number} index
+     */
+    p(this, "setActiveItem", (e) => {
+      this.preview && t(this, r).setActiveItem(e);
+    });
+    /**
+     * 重置预览器的所有状态
+     */
+    p(this, "reset", () => {
+      this.preview && t(this, r).reset();
+    });
+    /**
+     * 显示预览（ea-image-preview）
+     */
+    p(this, "showPreview", () => {
+      t(this, r).visible = !0;
+    });
+    this.stylesheet = D, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "width",
+      "height",
+      "src",
+      "fit",
+      "alt",
+      "referrerpolicy",
+      "crossorigin",
+      "loading",
+      "lazy",
+      "preview",
+      "hide-on-click-modal",
+      "z-index",
+      "initial-index",
+      "close-on-press-escape",
+      "infinite",
+      "zoom-rate",
+      "scale",
+      "min-scale",
+      "max-scale",
+      "show-progress"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist("ea-image", {
+      [`--${t(this, c).imageStatus}`]: t(this, c).imageStatus
+    });
+    return t(this, m).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-image' part='container'>
+        <img class='ea-image__image' part='image' />
+        <section class='ea-image__error' part='error'>
+          <slot name='error'>FAILED</slot>
+        </section>
+        <section class='ea-image__placeholder' part='placeholder'>
+          <slot name='placeholder'></slot>
+        </section>
+      </div>
+      <ea-image-preview class="ea-image-preview" part='preview'>
+        <slot name='progress'></slot>
+        <slot name='toolbar'></slot>
+      </ea-image-preview>
+    `, n(this, m, this.shadowRoot.querySelector(".ea-image")), n(this, l, this.shadowRoot.querySelector(".ea-image__image")), n(this, w, this.shadowRoot.querySelector(".ea-image__error")), n(this, v, this.shadowRoot.querySelector(".ea-image__placeholder")), n(this, r, this.shadowRoot.querySelector(".ea-image-preview")), n(this, u, this.shadowRoot.querySelector('slot[name="progress"]')), n(this, d, this.shadowRoot.querySelector('slot[name="toolbar"]'));
+  }
+  async connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = t(this, h)) == null || e.abort(), n(this, h, new AbortController()), this.getAttribute("src") || this.setAttribute("src", ""), t(this, u).addEventListener(
+      "slotchange",
+      () => t(this, g).call(this, t(this, u), "progress"),
+      {
+        signal: t(this, h).signal
+      }
+    ), t(this, d).addEventListener(
+      "slotchange",
+      () => t(this, g).call(this, t(this, d), "toolbar"),
+      {
+        signal: t(this, h).signal
+      }
+    ), this.preview && (await customElements.whenDefined("ea-image-preview"), t(this, m).addEventListener(
+      "click",
+      () => {
+        this.showPreview();
+      },
+      { signal: t(this, h).signal }
+    ));
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, h)) == null || e.abort();
+  }
+}
+m = new WeakMap(), l = new WeakMap(), w = new WeakMap(), v = new WeakMap(), r = new WeakMap(), u = new WeakMap(), d = new WeakMap(), h = new WeakMap(), c = new WeakMap(), g = new WeakMap();
+window.customElements.get("ea-image") || window.customElements.define("ea-image", _);
+export {
+  _ as EaImage
+};

package/dist/components/ea-infinite-scroll.js

@@ -0,0 +1,109 @@
+var p = Object.defineProperty;
+var u = (t) => {
+  throw TypeError(t);
+};
+var m = (t, s, e) => s in t ? p(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var b = (t, s, e) => m(t, typeof s != "symbol" ? s + "" : s, e), f = (t, s, e) => s.has(t) || u("Cannot " + e);
+var i = (t, s, e) => (f(t, s, "read from private field"), e ? e.call(t) : s.get(t)), n = (t, s, e) => s.has(t) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), d = (t, s, e, c) => (f(t, s, "write to private field"), c ? c.call(t, e) : s.set(t, e), e);
+import { B as v } from "./Base.js";
+import { s as g } from "../css/ea-infinite-scroll.style.js";
+var a, l, r, o;
+class w extends v {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    n(this, a);
+    /** @type {HTMLElement} */
+    n(this, l);
+    /** @type {AbortController} */
+    n(this, r);
+    n(this, o, {
+      /** @type {IntersectionObserver | null} */
+      observer: null
+    });
+    b(this, "state", this.properties({
+      status: {
+        type: ["finished", "loading", "noMore"],
+        default: "finished",
+        /** @param {"loading" | "finished" | "noMore"} newVal */
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      distance: {
+        type: Number,
+        default: 0,
+        observer: () => {
+        }
+      }
+    }));
+    this.stylesheet = g, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "distance", "status"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-infinite-scroll",
+      {},
+      {
+        [this.status]: this.status
+      }
+    );
+    return i(this, a).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <section class='ea-infinite-scroll' part='container'>
+        <slot></slot>
+        <div class='ea-infinite-scroll__placeholder' part='placeholder'></div>
+        <section class='ea-infinite-scroll__loading' part='loading'>
+          <slot name='loading'></slot>
+        </section>
+        <section class='ea-infinite-scroll__noMore' part='noMore'>
+          <slot name='noMore'></slot>
+        </section>
+      </section>
+    `, d(this, a, this.shadowRoot.querySelector(".ea-infinite-scroll")), d(this, l, this.shadowRoot.querySelector(
+      ".ea-infinite-scroll__placeholder"
+    ));
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = i(this, r)) == null || e.abort(), d(this, r, new AbortController()), i(this, o).observer = new IntersectionObserver(
+      (c) => {
+        this.status === "finished" && c.forEach(async (h) => {
+          h.isIntersecting && (i(this, o).observer.unobserve(h.target), this.status = "loading", this.emit("loadmore", {
+            detail: {
+              finished: () => {
+                this.status = "finished", i(this, o).observer.observe(h.target);
+              },
+              noMore: () => {
+                this.status = "noMore", i(this, o).observer.observe(h.target);
+              }
+            },
+            bubbles: !0
+          }));
+        });
+      },
+      {
+        rootMargin: this.distance + "px"
+      }
+    ), i(this, o).observer.observe(i(this, l)), this.shadowRoot.addEventListener("slotchange", () => {
+      this.emit("slotchange", { bubbles: !0, composed: !0 });
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = i(this, r)) == null || e.abort(), i(this, o).observer.disconnect();
+  }
+}
+a = new WeakMap(), l = new WeakMap(), r = new WeakMap(), o = new WeakMap();
+window.customElements.get("ea-infinite-scroll") || window.customElements.define("ea-infinite-scroll", w);
+export {
+  w as EaInfiniteScroll
+};