easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-image-preview.js

@@ -1,532 +1,377 @@
-var Z = Object.defineProperty;
-var H = (r) => {
-  throw TypeError(r);
-};
-var G = (r, n, t) => n in r ? Z(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
-var L = (r, n, t) => G(r, typeof n != "symbol" ? n + "" : n, t), j = (r, n, t) => n.has(r) || H("Cannot " + t);
-var e = (r, n, t) => (j(r, n, "read from private field"), t ? t.call(r) : n.get(r)), o = (r, n, t) => n.has(r) ? H("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t), g = (r, n, t, s) => (j(r, n, "write to private field"), s ? s.call(r, t) : n.set(r, t), t);
-import { EaOverlay as J } from "./ea-overlay.js";
-import { E as K } from "../utils/Utils.js";
+import { EaOverlay as C } from "./ea-overlay.js";
+import { q as x, a as u, p as E, l as v, C as $ } from "../core/decorator.js";
+import { c as A } from "../utils/bem.ts.js";
+import { h as b } from "../utils/html.ts.js";
 import "./ea-image.js";
-import { s as Q } from "../css/ea-image-preview.style.js";
-var v, U, k, S, q, d, Y, C, I, z, R, A, M, N, P, i, c, O, E, _, x, X, $, B, D, T;
-class W extends J {
+import "./ea-icon.js";
+import { s as L } from "../css/ea-image-preview.style.js";
+class S extends Event {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, v);
-    /** @type {HTMLElement} */
-    o(this, U);
-    /** @type {HTMLElement} */
-    o(this, k);
-    /** @type {HTMLElement} */
-    o(this, S);
-    /** @type {HTMLElement} */
-    o(this, q);
-    /** @type {HTMLElement} */
-    o(this, d);
-    /** @type {HTMLElement} */
-    o(this, Y);
-    /** @type {HTMLElement} */
-    o(this, C);
-    /** @type {HTMLElement} */
-    o(this, I);
-    /** @type {HTMLElement} */
-    o(this, z);
-    /** @type {HTMLElement} */
-    o(this, R);
-    /** @type {HTMLElement} */
-    o(this, A);
-    /** @type {HTMLElement} */
-    o(this, M);
-    /** @type {HTMLElement} */
-    o(this, N);
-    /** @type {HTMLElement} */
-    o(this, P);
-    /** @type {AbortController} */
-    o(this, i, {
-      /** @type {AbortController | null} */
-      main: null,
-      /** @type {AbortController | null} */
-      img: null,
-      /** @type {AbortController | null} */
-      clickModal: null,
-      /** @type {AbortController | null} */
-      imgMove: null,
-      /** @type {AbortController | null} */
-      toolbar: null,
-      /** @type {AbortController | null} */
-      switchPrev: null,
-      /** @type {AbortController | null} */
-      switchNext: null,
-      /** @type {AbortController | null} */
-      zoomOut: null,
-      /** @type {AbortController | null} */
-      zoomIn: null,
-      /** @type {AbortController | null} */
-      rotateLeft: null,
-      /** @type {AbortController | null} */
-      rotateRight: null
-    });
-    o(this, c, {
+    super("ea-preview-error", { bubbles: !0, composed: !0 });
+  }
+}
+class I extends Event {
+  constructor(t) {
+    super("ea-switch", { bubbles: !0, composed: !0 }), this.detail = t;
+  }
+}
+class M extends Event {
+  constructor(t) {
+    super("ea-rotate", { bubbles: !0, composed: !0 }), this.detail = t;
+  }
+}
+var N = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, o, r) => {
+  for (var s = r > 1 ? void 0 : r ? P(t, o) : t, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (s = (r ? h(t, o, s) : h(s)) || s);
+  return r && s && N(t, o, s), s;
+};
+const w = "ea-image-preview", a = A(w);
+let i = class extends C {
+  constructor() {
+    super(...arguments), this._states = {
       urlList: [],
-      /** @type {"loading" | "success" | "error"} */
       status: "loading",
       dirtyUpdate: !1,
       isUrlListInit: !1,
-      position: {
-        x: 0,
-        y: 0
-      }
-    });
-    L(this, "state", this.properties({
-      visible: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.status = t, t && this.urlList.length > 0 && (e(this, d).querySelector(
-            ".ea-image-preview__img"
-          ) || e(this, T).call(this, this.index));
-        }
-      },
-      "initial-index": {
-        type: Number,
-        default: 0,
-        observer: (t) => {
-          this.index = t;
-        }
-      },
-      index: {
-        type: Number,
-        default: () => this["initial-index"],
-        observer: (t, s) => {
-          if (e(this, c).dirtyUpdate) return e(this, c).dirtyUpdate = !1;
-          if (this.infinite) {
-            if (!this.urlList.length) return;
-            const a = this.urlList.length - 1;
-            if (t > a) return this.index = 0;
-            if (t < 0) return this.index = a;
-          } else if (t < 0 || t > this.urlList.length - 1)
-            return e(this, c).dirtyUpdate = !0, this.index = s;
-          e(this, T).call(this, t);
-        }
-      },
-      infinite: {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-        }
-      },
-      "append-to-body": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      },
-      zoom: {
-        type: Number,
-        default: 1,
-        observer: () => {
-        }
-      },
-      "zoom-rate": {
-        type: Number,
-        default: 1.2,
-        observer: () => {
-        }
-      },
-      scale: {
-        type: Number,
-        default: 1,
-        observer: (t, s) => {
-          if (t < this["min-scale"] || t > this["max-scale"])
-            return this.scale = s;
-          e(this, d).style.setProperty("--ea-image-preview-scale", t);
-        }
-      },
-      "min-scale": {
-        type: Number,
-        default: 0.2,
-        observer: () => {
-        }
-      },
-      "max-scale": {
-        type: Number,
-        default: 7,
-        observer: () => {
-        }
-      },
-      "close-on-press-escape": {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-        }
-      },
-      "show-progress": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "hide-on-click-modal": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var a;
-          const s = (l) => {
-            !e(this, d).querySelector(".ea-image-preview__img").contains(l.target) && !e(this, k).contains(l.target) && !e(this, S).contains(l.target) && !e(this, q).contains(l.target) && (this.hide(), this.visible = !1);
-          };
-          (a = e(this, i).clickModal) == null || a.abort(), t && (e(this, i).clickModal = new AbortController(), e(this, v).addEventListener("click", s, {
-            signal: e(this, i).clickModal.signal
-          }));
-        }
-      }
-    }));
-    L(this, "propState", this.properties({
-      urlList: {
-        props: !0,
-        type: Array,
-        default: [],
-        /** @param {String[]} newVal */
-        observer: (t) => {
-          e(this, c).isUrlListInit = !1, e(this, c).urlList = t, this.index = this["initial-index"], e(this, c).isUrlListInit = !0;
-        }
-      }
-    }));
-    /**
-     * 处理挂载到目标
-     */
-    o(this, O, () => {
-      this["append-to-body"] && document.body.appendChild(this);
-    });
-    /**
-     * 处理切换
-     * @param {'prev' | 'next'} action
-     */
-    o(this, E, (t) => {
-      t === "prev" ? this.index-- : t === "next" && this.index++;
-    });
-    /**
-     * 处理缩放
-     * @param {'in' | 'out'} action
-     */
-    o(this, _, (t) => {
-      t === "in" ? this.scale = (this.scale * this["zoom-rate"]).toFixed(3) : t === "out" && (this.scale = (this.scale / this["zoom-rate"]).toFixed(3));
-    });
-    /**
-     * 处理旋转
-     * @param {'left' | 'right' | 'reset'} action
-     */
-    o(this, x, (t) => {
-      const s = Number(
-        e(this, d).style.getPropertyValue("--ea-image-preview-rotate").split("deg")[0] || 0
-      );
-      let a = 0;
-      t === "left" ? a = s - 90 : t === "right" && (a = s + 90), e(this, d).style.setProperty(
-        "--ea-image-preview-rotate",
-        a + "deg"
-      ), this.emit("rotate", {
-        detail: {
-          oldVal: s,
-          rotate: a
-        }
-      });
-    });
-    /**
-     * 处理进度
-     * @param {Number} active
-     * @param {Number} total
-     * @returns
-     */
-    o(this, X, (t, s) => {
-      const a = this.querySelector("[slot='progress']"), l = (h, p) => {
-        h.forEach((u) => u.textContent = t), p.forEach((u) => u.textContent = s);
-      };
-      if (a)
-        try {
-          a.assignedNodes().forEach((p) => {
-            const u = p.querySelectorAll("[data-active]"), w = p.querySelectorAll("[data-total]");
-            l(u, w);
-          });
-        } catch {
-          const h = a.querySelectorAll("[data-active]"), p = a.querySelectorAll("[data-total]");
-          l(h, p);
-        }
-      else
-        e(this, R).textContent = `${t} / ${s}`;
-    });
-    /**
-     * 处理图片移动事件
-     * @param {MouseEvent} startE
-     */
-    o(this, $, (t) => {
-      var w;
-      t.preventDefault(), (w = e(this, i).imgMove) == null || w.abort(), e(this, i).imgMove = new AbortController();
-      const s = t.clientX, a = t.clientY, l = e(this, c).position.x, h = e(this, c).position.y, p = (m) => {
-        m.preventDefault();
-        const f = m.clientX - s, y = m.clientY - a, b = l + f, F = h + y;
-        e(this, d).style.setProperty(
-          "--ea-image-preview-img-move-x",
-          `${b}px`
-        ), e(this, d).style.setProperty(
-          "--ea-image-preview-img-move-y",
-          `${F}px`
-        );
-      }, u = (m) => {
-        var b;
-        m.preventDefault();
-        const f = m.clientX - s, y = m.clientY - a;
-        e(this, c).position.x = l + f, e(this, c).position.y = h + y, (b = e(this, i).imgMove) == null || b.abort();
-      };
-      window.addEventListener("mousemove", p, {
-        signal: e(this, i).imgMove.signal
-      }), window.addEventListener("mouseup", u, {
-        signal: e(this, i).imgMove.signal
-      });
-    });
-    /**
-     * 初始化工具栏的事件。
-     * 若用户传入了自定义工具，则优先使用用户元素，否则使用内置元素
-     */
-    o(this, B, () => {
-      var p;
-      let t = this.shadowRoot.querySelector("slot[name='toolbar']");
-      const s = this.closest(".ea-image-preview");
-      s && (t = s.querySelector("slot[name='toolbar']"));
-      for (const u in e(this, i))
-        (p = e(this, i)[u]) == null || p.abort(), e(this, i)[u] = new AbortController();
-      const a = {
-        "switch-prev": e(this, i).switchPrev,
-        "switch-next": e(this, i).switchNext,
-        "zoom-out": e(this, i).zoomOut,
-        "zoom-in": e(this, i).zoomIn,
-        "rotate-anticlockwise": e(this, i).rotateLeft,
-        "rotate-clockwise": e(this, i).rotateRight
-      }, l = {
-        "switch-prev": {
-          el: null,
-          callback: () => {
-            e(this, E).call(this, "prev");
-          }
-        },
-        "switch-next": {
-          el: null,
-          callback: () => {
-            e(this, E).call(this, "next");
-          }
-        },
-        "zoom-out": {
-          el: e(this, M),
-          callback: () => {
-            e(this, _).call(this, "out");
-          }
-        },
-        "zoom-in": {
-          el: e(this, A),
-          callback: () => {
-            e(this, _).call(this, "in");
-          }
-        },
-        "rotate-anticlockwise": {
-          el: e(this, N),
-          callback: () => {
-            e(this, x).call(this, "left");
-          }
-        },
-        "rotate-clockwise": {
-          el: e(this, P),
-          callback: () => {
-            e(this, x).call(this, "right");
-          }
-        }
-      }, h = () => {
-        Object.values(l).forEach((m) => {
-          m.el && (m.el.style.display = "");
-        });
-        const u = t.assignedElements(), w = /* @__PURE__ */ new Map();
-        u.forEach((m) => {
-          m.nodeType === Node.ELEMENT_NODE && m.querySelectorAll("[data-action]").forEach((y) => {
-            const b = y.getAttribute("data-action");
-            b && !w.has(b) && w.set(b, y);
-          });
-        });
-        for (const [m, f] of Object.entries(l)) {
-          const y = w.get(m);
-          y ? (f.el && (f.el.style.display = "none"), y.addEventListener("click", f.callback, {
-            signal: a[m].signal
-          })) : f.el && f.el.addEventListener("click", f.callback, {
-            signal: a[m].signal
-          });
-        }
-      };
-      t.addEventListener("slotchange", h, {
-        signal: e(this, i).toolbar.signal
-      }), setTimeout(() => h(), 0);
-    });
-    /**
-     * 关闭 Preview
-     */
-    o(this, D, () => {
-      this.hide(), this.visible = !1;
-    });
-    /**
-     * 设置当前项
-     * @param {Number} index
-     */
-    L(this, "setActiveItem", (t) => {
-      this.index = t;
-    });
-    /**
-     * 渲染指定索引的图片
-     * @param {number} index - 图片索引
-     */
-    o(this, T, (t) => {
-      var a;
-      const s = this.urlList[t];
-      if (e(this, d).innerHTML = "", s) {
-        (a = e(this, i).img) == null || a.abort(), e(this, i).img = new AbortController(), e(this, d).innerHTML = K.EaElement.h(
-          "ea-image",
-          "ea-image-preview__img",
-          {
-            src: s,
-            fit: "contain"
-          },
-          `
-          <slot name="viewer-error" slot="error"></slot>
-        `
-        );
-        const l = e(this, d).querySelector(".ea-image-preview__img"), h = () => {
-          e(this, c).status = "error", this.classList.remove(
-            "ea-image-preview--success",
-            "ea-image-preview--loading"
-          ), e(this, v).classList.add("ea-image-preview--error"), this.emit("error"), e(this, i).img.abort();
-        }, p = () => {
-          e(this, c).status = "success", e(this, v).classList.remove(
-            "ea-image-preview--error",
-            "ea-image-preview--loading"
-          ), e(this, v).classList.add("ea-image-preview--success"), e(this, i).img.abort();
-        };
-        e(this, X).call(this, t + 1, this.urlList.length), l.addEventListener("error", h, {
-          once: !0,
-          signal: e(this, i).img.signal
-        }), l.addEventListener("load", p, {
-          once: !0,
-          signal: e(this, i).img.signal
-        }), this.visible && e(this, c).isUrlListInit && this.emit("switch", {
-          detail: {
-            index: t,
-            url: s,
-            imgTarget: l
-          }
-        });
-      }
-    });
-    /**
-     * 重置状态
-     */
-    L(this, "reset", () => {
-      this.index = this["initial-index"], this.scale = 1, e(this, x).call(this, "reset"), e(this, c).position = {
-        x: 0,
-        y: 0
-      }, e(this, d).style.setProperty("--ea-image-preview-img-move-x", "0"), e(this, d).style.setProperty("--ea-image-preview-img-move-y", "0");
-    });
-    g(this, v, this.shadowRoot.querySelector(".ea-overlay")), e(this, v).innerHTML = e(this, v).innerHTML + `
-      <header class="ea-image-preview__header" part="header">
-        <ea-icon class="ea-image-preview__icon close-icon" name="xmark" part="icon close-icon"></ea-icon>
+      position: { x: 0, y: 0 }
+    }, this.initialIndex = 0, this.index = 0, this.infinite = !0, this.zoom = 1, this.zoomRate = 1.2, this.scale = 1, this.minScale = 0.2, this.maxScale = 7, this.showProgress = !1, this.urlList = [];
+  }
+  get status() {
+    return this._states.status;
+  }
+  set status(e) {
+    this._states.status = e;
+  }
+  updateContainerClasslist() {
+    const t = `${super.updateContainerClasslist()} ${a(
+      { [this._states.status]: !0 },
+      { "show-progress": this.showProgress }
+    )}`;
+    return this._container && (this._container.className = t), t;
+  }
+  html() {
+    const e = document.createElement("template");
+    e.innerHTML = super.html();
+    const t = e.content.querySelector(".ea-overlay__content"), o = `
+      <header class="${a.e("header")}" part="header">
+        <ea-icon class="${a.e("icon")} ${a.e("close-icon")}" name="xmark" part="icon close-icon"></ea-icon>
       </header>
-      <main class="ea-image-preview__main" part="main">
-        <ea-icon class="ea-image-preview__icon prev-icon" name="angle-left" part="icon prev-icon"></ea-icon>
-        <ea-icon class="ea-image-preview__icon next-icon" name="angle-right" part="icon next-icon"></ea-icon>
+      <main class="${a.e("main")}" part="main">
+        <ea-icon class="${a.e("icon")} ${a.e("prev-icon")}" data-action="switch-prev" name="angle-left" part="icon prev-icon"></ea-icon>
+        <ea-icon class="${a.e("icon")} ${a.e("next-icon")}" data-action="switch-next" name="angle-right" part="icon next-icon"></ea-icon>
       </main>
-      <footer class="ea-image-preview__footer" part="footer">
-        <section class="ea-image-preview__progress" part="progress">
+      <footer class="${a.e("footer")}" part="footer">
+        <section class="${a.e("progress")}" part="progress">
           <slot name="progress"></slot>
         </section>
-        <section class="ea-image-preview__toolbar" part="toolbar">
+        <section class="${a.e("toolbar")}" part="toolbar">
           <slot name="toolbar">
-            <ea-icon class="ea-image-preview__icon zoom-out-icon" name="magnifying-glass-minus" part="icon zoom-out-icon"></ea-icon>
-            <ea-icon class="ea-image-preview__icon zoom-in-icon" name="magnifying-glass-plus" part="icon zoom-in-icon"></ea-icon>
-            <ea-icon class="ea-image-preview__icon rotate-left-icon" name="rotate-left" part="icon rotate-left-icon"></ea-icon>
-            <ea-icon class="ea-image-preview__icon rotate-right-icon" name="rotate-right" part="icon rotate-right-icon"></ea-icon>
+            <ea-icon class="${a.e("icon")} ${a.e("zoom-out-icon")}" data-action="zoom-out" name="magnifying-glass-minus" part="icon zoom-out-icon"></ea-icon>
+            <ea-icon class="${a.e("icon")} ${a.e("zoom-in-icon")}" data-action="zoom-in" name="magnifying-glass-plus" part="icon zoom-in-icon"></ea-icon>
+            <ea-icon class="${a.e("icon")} ${a.e("rotate-left-icon")}" data-action="rotate-anticlockwise" name="rotate-left" part="icon rotate-left-icon"></ea-icon>
+            <ea-icon class="${a.e("icon")} ${a.e("rotate-right-icon")}" data-action="rotate-clockwise" name="rotate-right" part="icon rotate-right-icon"></ea-icon>
           </slot>
         </section>
       </footer>
-    `, g(this, U, this.shadowRoot.querySelector(".ea-overlay__content")), g(this, Y, this.shadowRoot.querySelector(".ea-overlay__mask")), g(this, d, this.shadowRoot.querySelector(".ea-overlay__content")), g(this, C, this.shadowRoot.querySelector(".close-icon")), g(this, I, this.shadowRoot.querySelector(".prev-icon")), g(this, z, this.shadowRoot.querySelector(".next-icon")), g(this, A, this.shadowRoot.querySelector(".zoom-in-icon")), g(this, M, this.shadowRoot.querySelector(".zoom-out-icon")), g(this, N, this.shadowRoot.querySelector(".rotate-left-icon")), g(this, P, this.shadowRoot.querySelector(".rotate-right-icon")), g(this, R, this.shadowRoot.querySelector(
-      ".ea-image-preview__progress slot[name='progress']"
-    )), g(this, k, this.shadowRoot.querySelector(".ea-image-preview__header")), g(this, S, this.shadowRoot.querySelector(".ea-image-preview__main")), g(this, q, this.shadowRoot.querySelector(".ea-image-preview__footer")), e(this, O).call(this);
+    `;
+    return t.insertAdjacentHTML("beforebegin", b(o)), e.innerHTML;
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "visible",
-      "index",
-      "initial-index",
-      "infinite",
-      "zoom-rate",
-      "scale",
-      "min-scale",
-      "max-scale",
-      "close-on-press-escape",
-      "hide-on-click-modal",
-      "show-progress",
-      "append-to-body"
-    ];
+  /** 切换图片到上一张或下一张 */
+  _handleSwitch(e) {
+    e === "prev" ? this.index-- : e === "next" && this.index++;
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = `${super.updateContainerClasslist()} ${this.computedClasslist(
-      "ea-image-preview",
-      {
-        ["--" + e(this, c).status]: e(this, c).status
-      },
-      {
-        "show-progress": this["show-progress"]
-      }
-    )}`;
-    return e(this, v).className = t, t;
+  /** 缩放图片 */
+  _handleZoom(e) {
+    e === "in" ? this.scale = Number((this.scale * this.zoomRate).toFixed(3)) : e === "out" && (this.scale = Number((this.scale / this.zoomRate).toFixed(3)));
+  }
+  /** 旋转图片 */
+  _handleRotate(e) {
+    var r, s;
+    const t = Number(
+      ((r = this._overlayContent) == null ? void 0 : r.style.getPropertyValue("--ea-image-preview-rotate").split("deg")[0]) || 0
+    );
+    let o = 0;
+    e === "left" ? o = t - 90 : e === "right" && (o = t + 90), (s = this._overlayContent) == null || s.style.setProperty(
+      "--ea-image-preview-rotate",
+      o + "deg"
+    ), this.dispatchEvent(
+      new M({
+        oldVal: t,
+        rotate: o
+      })
+    );
   }
-  connectedCallback() {
-    var l;
-    super.connectedCallback(), this.assignedStyle(Q), (l = e(this, i).main) == null || l.abort(), e(this, i).main = new AbortController();
-    const t = () => {
-      e(this, E).call(this, "prev");
-    }, s = () => {
-      e(this, E).call(this, "next");
-    }, a = (h) => {
-      h.preventDefault(), h.deltaY > 0 ? e(this, _).call(this, "out") : e(this, _).call(this, "in");
+  /** 更新进度显示 */
+  _handleProgress(e, t) {
+    var s;
+    const o = this.querySelector("[slot='progress']"), r = (l, h) => {
+      l.forEach((c) => c.textContent = String(e)), h.forEach((c) => c.textContent = String(t));
     };
-    e(this, B).call(this), e(this, C).addEventListener("click", e(this, D), {
-      signal: e(this, i).main.signal
-    }), e(this, I).addEventListener("click", t, {
-      signal: e(this, i).main.signal
-    }), e(this, z).addEventListener("click", s, {
-      signal: e(this, i).main.signal
-    }), e(this, v).addEventListener("wheel", a, {
-      signal: e(this, i).main.signal,
-      passive: !1
-    }), this.addEventListener("closed", this.reset, {
-      signal: e(this, i).main.signal
-    }), e(this, d).addEventListener("mousedown", e(this, $), {
-      signal: e(this, i).main.signal
-    }), this["close-on-press-escape"] && window.addEventListener(
-      "keydown",
-      (h) => {
-        h.key === "Escape" && this.hide();
-      },
-      { signal: e(this, i).main.signal }
+    if (o instanceof HTMLSlotElement)
+      o.assignedNodes({ flatten: !0 }).filter(
+        (c) => c.nodeType === Node.ELEMENT_NODE
+      ).forEach((c) => {
+        const m = c.querySelectorAll("[data-active]"), g = c.querySelectorAll("[data-total]");
+        r(m, g);
+      });
+    else if (o) {
+      const l = o.querySelectorAll("[data-active]"), h = o.querySelectorAll("[data-total]");
+      r(l, h);
+    } else {
+      const l = this._progress || ((s = this.shadowRoot) == null ? void 0 : s.querySelector(".ea-image-preview__progress"));
+      l && (l.textContent = `${e} / ${t}`);
+    }
+  }
+  /** 处理图片拖拽移动 */
+  _onImgMoveEvent(e) {
+    var c;
+    e.preventDefault(), (c = this._imgMoveAbortController) == null || c.abort(), this._imgMoveAbortController = new AbortController();
+    const t = e.clientX, o = e.clientY, r = this._states.position.x, s = this._states.position.y;
+    document.body.style.cursor = "grabbing", document.body.style.userSelect = "none";
+    const l = (m) => {
+      var y, f;
+      m.preventDefault();
+      const g = m.clientX - t, d = m.clientY - o, p = r + g, _ = s + d;
+      (y = this._overlayContent) == null || y.style.setProperty(
+        "--ea-image-preview-img-move-x",
+        `${p}px`
+      ), (f = this._overlayContent) == null || f.style.setProperty(
+        "--ea-image-preview-img-move-y",
+        `${_}px`
+      );
+    }, h = (m) => {
+      var p;
+      m.preventDefault();
+      const g = m.clientX - t, d = m.clientY - o;
+      this._states.position.x = r + g, this._states.position.y = s + d, document.body.style.cursor = "", document.body.style.userSelect = "", (p = this._imgMoveAbortController) == null || p.abort();
+    };
+    window.addEventListener("mousemove", l, {
+      signal: this._imgMoveAbortController.signal
+    }), window.addEventListener("mouseup", h, {
+      signal: this._imgMoveAbortController.signal
+    });
+  }
+  /** 渲染指定索引的图片 */
+  _renderImage(e) {
+    var r;
+    const t = this.urlList[e];
+    if (!this._overlayContent) return;
+    const o = this._overlayContent.querySelector(
+      ".ea-image-preview__img"
     );
+    if (o && o.remove(), t) {
+      (r = this._imgAbortController) == null || r.abort(), this._imgAbortController = new AbortController();
+      const l = this.querySelector('[slot="viewer-error"]') ? '<slot name="viewer-error" slot="error"></slot>' : "", h = `<ea-image class="ea-image-preview__img" src="${t}" fit="contain">${l}</ea-image>`;
+      this._overlayContent.insertAdjacentHTML("afterbegin", b(h));
+      const c = this._overlayContent.querySelector(
+        ".ea-image-preview__img"
+      ), m = () => {
+        var d, p, _;
+        this._states.status = "error", (d = this._container) == null || d.classList.remove(
+          "ea-image-preview--success",
+          "ea-image-preview--loading"
+        ), (p = this._container) == null || p.classList.add("ea-image-preview--error"), this.dispatchEvent(new S()), (_ = this._imgAbortController) == null || _.abort();
+      }, g = () => {
+        var d, p, _;
+        this._states.status = "success", (d = this._container) == null || d.classList.remove(
+          "ea-image-preview--error",
+          "ea-image-preview--loading"
+        ), (p = this._container) == null || p.classList.add("ea-image-preview--success"), (_ = this._imgAbortController) == null || _.abort();
+      };
+      this._handleProgress(e + 1, this.urlList.length), c.addEventListener("error", m, {
+        once: !0,
+        signal: this._imgAbortController.signal
+      }), c.addEventListener("load", g, {
+        once: !0,
+        signal: this._imgAbortController.signal
+      }), this.visible && this._states.isUrlListInit && this.dispatchEvent(
+        new I({
+          index: e,
+          url: t,
+          imgTarget: c
+        })
+      );
+    }
   }
-  $beforeUnmounted() {
-    for (const t of Object.values(e(this, i)))
-      t == null || t.abort();
+  setActiveItem(e) {
+    this.index = e;
   }
-}
-v = new WeakMap(), U = new WeakMap(), k = new WeakMap(), S = new WeakMap(), q = new WeakMap(), d = new WeakMap(), Y = new WeakMap(), C = new WeakMap(), I = new WeakMap(), z = new WeakMap(), R = new WeakMap(), A = new WeakMap(), M = new WeakMap(), N = new WeakMap(), P = new WeakMap(), i = new WeakMap(), c = new WeakMap(), O = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), X = new WeakMap(), $ = new WeakMap(), B = new WeakMap(), D = new WeakMap(), T = new WeakMap();
-window.customElements.get("ea-image-preview") || window.customElements.define("ea-image-preview", W);
+  reset() {
+    var e, t;
+    this.index = this.initialIndex, this.scale = 1, this._handleRotate("reset"), this._states.position = {
+      x: 0,
+      y: 0
+    }, (e = this._overlayContent) == null || e.style.setProperty(
+      "--ea-image-preview-img-move-x",
+      "0px"
+    ), (t = this._overlayContent) == null || t.style.setProperty(
+      "--ea-image-preview-img-move-y",
+      "0px"
+    );
+  }
+  _handleCloseIconClick() {
+    this.hide(), this.visible = !1;
+  }
+  _handleMainClick(e) {
+    var r, s;
+    const t = e.target.closest("[data-action]");
+    if (!t) return;
+    const o = t.getAttribute("data-action");
+    (s = (r = i._actionMap)[o]) == null || s.call(r, this);
+  }
+  _handleToolbarClick(e) {
+    var r, s;
+    const t = e.target.closest("[data-action]");
+    if (!t) return;
+    const o = t.getAttribute("data-action");
+    (s = (r = i._actionMap)[o]) == null || s.call(r, this);
+  }
+  _handleWheel(e) {
+    e.preventDefault(), e.deltaY > 0 ? this._handleZoom("out") : this._handleZoom("in");
+  }
+  _handleImgMouseDown(e) {
+    this._onImgMoveEvent(e);
+  }
+  _handleClosed(e) {
+    e.target === this && this.reset();
+  }
+  $mount() {
+    var e;
+    (e = super.$mount) == null || e.call(this);
+    try {
+      this.setAttribute("role", "dialog");
+    } catch {
+      this.role = "dialog";
+    }
+    this.setAttribute("aria-modal", "true"), this.setAttribute("aria-label", "Image Preview"), this.updateContainerClasslist();
+  }
+  $beforeUnmount() {
+    var e, t, o;
+    (e = super.$beforeUnmount) == null || e.call(this), (t = this._imgAbortController) == null || t.abort(), (o = this._imgMoveAbortController) == null || o.abort();
+  }
+};
+i._idCounter = 0;
+i._actionMap = {
+  "switch-prev": (e) => e._handleSwitch("prev"),
+  "switch-next": (e) => e._handleSwitch("next"),
+  "zoom-out": (e) => e._handleZoom("out"),
+  "zoom-in": (e) => e._handleZoom("in"),
+  "rotate-anticlockwise": (e) => e._handleRotate("left"),
+  "rotate-clockwise": (e) => e._handleRotate("right")
+};
+n([
+  x(".ea-image-preview__progress")
+], i.prototype, "_progress", 2);
+n([
+  u({
+    type: Number,
+    default: 0,
+    observer(e) {
+      this.index = e;
+    }
+  })
+], i.prototype, "initialIndex", 2);
+n([
+  u({
+    type: Number,
+    default: 0,
+    observer(e, t) {
+      if (this._states.dirtyUpdate) return this._states.dirtyUpdate = !1;
+      if (this.infinite) {
+        if (!this.urlList.length) return;
+        const o = this.urlList.length - 1;
+        if (e > o) return this.index = 0;
+        if (e < 0) return this.index = o;
+      } else if (e < 0 || e > this.urlList.length - 1)
+        return this._states.dirtyUpdate = !0, this.index = t;
+      this._renderImage(e);
+    }
+  })
+], i.prototype, "index", 2);
+n([
+  u({
+    type: Boolean,
+    default: !0
+  })
+], i.prototype, "infinite", 2);
+n([
+  u({
+    type: Number,
+    default: 1
+  })
+], i.prototype, "zoom", 2);
+n([
+  u({
+    type: Number,
+    default: 1.2
+  })
+], i.prototype, "zoomRate", 2);
+n([
+  u({
+    type: Number,
+    default: 1,
+    observer(e, t) {
+      var o;
+      if (e < this.minScale || e > this.maxScale)
+        return this.scale = t;
+      (o = this._overlayContent) == null || o.style.setProperty(
+        "--ea-image-preview-scale",
+        String(e)
+      );
+    }
+  })
+], i.prototype, "scale", 2);
+n([
+  u({
+    type: Number,
+    default: 0.2
+  })
+], i.prototype, "minScale", 2);
+n([
+  u({
+    type: Number,
+    default: 7
+  })
+], i.prototype, "maxScale", 2);
+n([
+  u({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "showProgress", 2);
+n([
+  E({
+    type: Array,
+    default: [],
+    observer(e) {
+      this._states.isUrlListInit = !1, this._states.urlList = e, this.index = this.initialIndex, this._states.isUrlListInit = !0;
+    }
+  })
+], i.prototype, "urlList", 2);
+n([
+  v("click", ".ea-image-preview__close-icon")
+], i.prototype, "_handleCloseIconClick", 1);
+n([
+  v("click", ".ea-image-preview__main")
+], i.prototype, "_handleMainClick", 1);
+n([
+  v("click", ".ea-image-preview__toolbar")
+], i.prototype, "_handleToolbarClick", 1);
+n([
+  v("wheel", ".ea-overlay")
+], i.prototype, "_handleWheel", 1);
+n([
+  v("mousedown", ".ea-overlay__content")
+], i.prototype, "_handleImgMouseDown", 1);
+n([
+  v("ea-closed")
+], i.prototype, "_handleClosed", 1);
+i = n([
+  $(w, { styles: [L] })
+], i);
 export {
-  W as EaImagePreview
+  i as EaImagePreview
 };