easy-component-ui 2.1.1 → 3.0.0

package/dist/components/ea-table.js

@@ -0,0 +1,1007 @@
+var X = Object.defineProperty;
+var z = (n) => {
+  throw TypeError(n);
+};
+var Y = (n, l, e) => l in n ? X(n, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[l] = e;
+var w = (n, l, e) => Y(n, typeof l != "symbol" ? l + "" : l, e), J = (n, l, e) => l.has(n) || z("Cannot " + e);
+var t = (n, l, e) => (J(n, l, "read from private field"), e ? e.call(n) : l.get(n)), b = (n, l, e) => l.has(n) ? z("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(n) : l.set(n, e), k = (n, l, e, s) => (J(n, l, "write to private field"), s ? s.call(n, e) : l.set(n, e), e);
+import { E } from "../utils/Utils.js";
+import { B as Q } from "./Base.js";
+import "./ea-empty.js";
+import { s as Z } from "../css/ea-table.style.js";
+class ee extends Event {
+  constructor(l) {
+    super("ea-cell-click", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class te extends Event {
+  constructor(l) {
+    super("ea-current-change", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class se extends Event {
+  constructor(l) {
+    super("ea-row-click", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class oe extends Event {
+  constructor(l) {
+    super("ea-select-all", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class ae extends Event {
+  constructor(l) {
+    super("ea-select", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class re extends Event {
+  constructor(l) {
+    super("ea-selection-change", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+const ne = (n) => E.EaElement.h(
+  "colgroup",
+  "ea-table__colgroup",
+  {
+    part: "colgroup"
+  },
+  n.map(
+    (l) => E.EaElement.h("col", "ea-table__col", {
+      width: l.width,
+      part: "col"
+    })
+  )
+), le = (n) => E.EaElement.h(
+  "tfoot",
+  "ea-table__tfoot",
+  {
+    part: "tfoot"
+  },
+  E.EaElement.h(
+    "tr",
+    "ea-table__tr",
+    {
+      part: "tfoot-tr"
+    },
+    n.map(
+      (l) => E.EaElement.h(
+        "td",
+        `ea-table__td ${l.fixed ? ` is-fixed fixed-${l.fixed}` : ""}`,
+        {
+          part: "tfoot-td",
+          "data-scope": l.prop
+        }
+      )
+    )
+  )
+), ie = (n) => E.EaElement.h("span", "ea-table__sort-wrapper", {}, [
+  E.EaElement.h("span", null, {}, n),
+  E.EaElement.h(
+    "span",
+    "ea-table__sort",
+    {},
+    [
+      E.EaElement.h("ea-icon", "ea-table__sort-icon", {
+        part: "asc-icon",
+        icon: "icon-angle-up"
+      }),
+      E.EaElement.h("ea-icon", "ea-table__sort-icon", {
+        part: "desc-icon",
+        icon: "icon-angle-down"
+      })
+    ].join("")
+  )
+]), ce = () => E.EaElement.h(
+  "ea-checkbox",
+  "ea-table__checkbox",
+  {
+    "data-type": "selection",
+    part: "checkbox"
+  },
+  null
+), he = () => "", de = (n) => {
+  const l = (c) => c === "selection" ? ce() : c === "index" ? he() : null, e = (c, p) => c ? ie(p) : null;
+  let s = null;
+  const a = n.label || n.prop || "", r = l(n.type), i = e(n.sortable, a);
+  return r ? s = r : i ? s = i : n.header ? s = n.header : s = a, E.EaElement.h(
+    "th",
+    `ea-table__th${n.fixed ? ` is-fixed fixed-${n.fixed}` : ""}${n.sortable ? " is-sortable" : ""}${n.width ? " is-width" : ""}`.trim(),
+    {
+      part: "thead-th",
+      colspan: n.colspan,
+      rowspan: n.rowspan,
+      style: [n.width ? `--ea-table-cell-width: ${n.width}` : ""],
+      "data-scope": n.prop || ""
+    },
+    s
+  );
+}, ue = (n) => n.map(
+  (l) => E.EaElement.h(
+    "tr",
+    "ea-table__tr is-thead",
+    {
+      part: "thead-tr"
+    },
+    l.map(de)
+  )
+), pe = (n) => {
+  const l = n.reduce((e, s) => (e[s.depth] || (e[s.depth] = []), e[s.depth].push(s), e), []);
+  return E.EaElement.h(
+    "thead",
+    "ea-table__thead",
+    {
+      part: "thead"
+    },
+    ue(l)
+  );
+};
+class be extends Event {
+  constructor(l) {
+    super("ea-sort-change", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class me extends Event {
+  constructor(l) {
+    super("ea-cell-mouse-enter", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class fe extends Event {
+  constructor(l) {
+    super("ea-cell-mouse-leave", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class ge extends Event {
+  constructor(l) {
+    super("ea-cell-dblclick", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class Ee extends Event {
+  constructor(l) {
+    super("ea-row-dblclick", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class ye extends Event {
+  constructor(l) {
+    super("ea-row-contextmenu", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class ve extends Event {
+  constructor(l) {
+    super("ea-cell-contextmenu", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class we extends Event {
+  constructor(l) {
+    super("ea-header-contextmenu", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+class xe extends Event {
+  constructor(l) {
+    super("ea-header-click", { bubbles: !0, composed: !0 }), this.detail = l;
+  }
+}
+var f, S, v, q, g, x, d, N, H, A, M, F, L, I, T, B, C, K, P, D, j, W, U, O, G;
+class Ce extends Q {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    b(this, f);
+    /** @type {HTMLElement} */
+    b(this, S);
+    /** @type {HTMLElement} */
+    b(this, v);
+    /** @type {HTMLElement} */
+    b(this, q);
+    /** @type {AbortController} */
+    b(this, g);
+    b(this, x, {
+      /** @type {AbortController | null} */
+      selectionChangeAbortController: null,
+      /** @type {AbortController | null} */
+      selectAbortController: null
+    });
+    b(this, d, {
+      isDataRendered: !1,
+      currentRow: {
+        target: null,
+        value: {}
+      },
+      /** @type {import("../ea-table-column/index.js").TableColumnCtx[]} */
+      columns: [],
+      originData: [],
+      dataSource: /* @__PURE__ */ new WeakMap(),
+      dataIndex: /* @__PURE__ */ new WeakMap()
+    });
+    w(this, "state", this.properties({
+      stripe: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      border: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      height: {
+        type: String,
+        default: null,
+        observer: (e) => {
+          this.style.setProperty("--ea-table-height", e), this.updateContainerClasslist();
+        }
+      },
+      "max-height": {
+        type: String,
+        default: null,
+        observer: (e) => {
+          this.style.setProperty("--ea-table-max-height", e), this.updateContainerClasslist();
+        }
+      },
+      "highlight-current-row": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      "show-summary": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      }
+    }));
+    w(this, "propStates", this.properties({
+      data: {
+        props: !0,
+        type: Array,
+        default: () => t(this, d).originData,
+        observer: (e) => {
+          this.setData(e);
+        }
+      }
+    }));
+    w(this, "funcStates", this.properties({
+      selectable: {
+        props: !0,
+        type: Function,
+        rawFunction: !0,
+        default: null
+      },
+      indexMethod: {
+        props: !0,
+        type: Function,
+        rawFunction: !0,
+        default: () => (e) => e
+      },
+      summaryMethod: {
+        props: !0,
+        type: Function,
+        rawFunction: !0,
+        default: () => (
+          /** @param {{columns: ColumnOption, data: any[]}} param */
+          (e) => {
+            const { columns: s, data: a } = e, r = [];
+            return s.forEach((i, c) => {
+              if (c === 0) {
+                r[c] = "Sum";
+                return;
+              }
+              const p = a.map((o) => Number(o[i.prop]));
+              p.every((o) => Number.isNaN(o)) ? r[c] = "" : r[c] = p.reduce((o, u) => {
+                const m = Number(u);
+                return Number.isNaN(m) ? o : o + u;
+              }, 0);
+            }), r;
+          }
+        )
+      }
+    }));
+    /**
+     * 渲染表格的基本结构
+     */
+    b(this, N, () => {
+      const e = [...this.querySelectorAll("ea-table-column")].map(
+        (c) => c.getColumnTree
+      );
+      t(this, d).columns = e;
+      const s = ne(e), a = pe(e), r = E.EaElement.h("tbody", "ea-table__tbody", {
+        part: "tbody"
+      }), i = le(e);
+      t(this, f).innerHTML = this.html(`
+      <table>
+        ${s}
+        ${a}
+        ${r}
+        ${i}
+      </table>
+      <slot class="ea-table__empty" name="empty">No Data</slot> 
+    `), k(this, S, this.shadowRoot.querySelector(".ea-table__thead")), k(this, v, this.shadowRoot.querySelector(".ea-table__tbody")), k(this, q, this.shadowRoot.querySelector(".ea-table__tfoot"));
+    });
+    /**
+     * 初始化带有筛选的列
+     */
+    b(this, H, () => {
+      if (![
+        ...t(this, f).querySelectorAll(".ea-table__th.is-sortable")
+      ].length) return;
+      const s = (a) => {
+        const r = a.target.closest(".is-sortable");
+        if (!r) return;
+        const { prop: i, order: c } = r.dataset;
+        if (!i) return;
+        const p = c === "asc" ? "desc" : "asc", o = {
+          asc: r.querySelector('[part="asc-icon"]'),
+          desc: r.querySelector('[part="desc-icon"]')
+        };
+        r.dataset.order = p, r.querySelectorAll(".ea-table__sort-icon").forEach((u) => {
+          u.classList.toggle("is-active", o[p] === u);
+        }), this.sort(i, p);
+      };
+      t(this, S).addEventListener("click", s, {
+        signal: t(this, g).signal
+      });
+    });
+    /**
+     * @param {any[]} dataSource
+     */
+    w(this, "setData", async (e) => {
+      var p;
+      const s = document.createDocumentFragment(), a = document.createElement("tr");
+      a.part = "tbody-tr", a.className = "ea-table__tr";
+      const r = t(this, d).columns.filter(
+        (o) => !o.template || o.template instanceof HTMLTemplateElement
+      ), i = r.some((o) => o.type === "selection"), c = {
+        selection: () => this.html(
+          E.EaElement.h(
+            "ea-checkbox",
+            "ea-table__selection",
+            {
+              "data-type": "selection"
+            },
+            null
+          )
+        ),
+        index: () => this.html(
+          E.EaElement.h(
+            "span",
+            "ea-table__index",
+            {
+              "data-type": "index"
+            },
+            null
+          )
+        )
+      };
+      for (const o in t(this, x))
+        (p = t(this, x)[o]) == null || p.abort(), t(this, x)[o] = new AbortController();
+      if (t(this, d).isDataRendered = !1, t(this, v).innerHTML = "", t(this, d).dataSource = /* @__PURE__ */ new WeakMap(), t(this, d).originData = e, r.forEach((o) => {
+        var y;
+        const u = a, { template: m } = o, h = document.createElement("td");
+        h.part = "tbody-td", h.className = "ea-table__td", h.classList.toggle("is-fixed", o.fixed), h.classList.toggle(`fixed-${o.fixed}`, o.fixed), h.classList.toggle(
+          `ea-table__cell--align-${o.align}`,
+          o.align
+        ), o.width && h.style.setProperty("--ea-table-cell-width", o.width), m ? h.appendChild(m.content.cloneNode(!0)) : o.type ? h.innerHTML = (y = c[o.type]) == null ? void 0 : y.call(c) : h.dataset.scope = o.prop, u.appendChild(h);
+      }), e.forEach((o, u) => {
+        const m = a.cloneNode(!0);
+        if (m.dataset.index = u, typeof this.selectable == "function") {
+          const h = !this.selectable(o);
+          m.querySelector(
+            'ea-checkbox[data-type="selection"]'
+          ).toggleAttribute("disabled", h);
+        }
+        if (r.some((h) => h.type === "index") && typeof this.indexMethod == "function") {
+          const h = m.querySelector(".ea-table__index");
+          h.textContent = this.indexMethod(u);
+        }
+        m.querySelectorAll("[data-scope]").forEach((h) => {
+          const y = h.getAttribute("data-scope"), _ = r.find(($) => $.prop === y);
+          _ ? h.textContent = o[_.prop] : y in o && (h.textContent = o[y]);
+        }), s.appendChild(m), t(this, d).dataSource.set(m, o), o && typeof o == "object" && t(this, d).dataIndex.set(o, m);
+      }), this["show-summary"] && typeof this.summaryMethod == "function") {
+        const o = t(this, q).querySelectorAll(
+          ".ea-table__td[data-scope]"
+        ), u = this.summaryMethod({ columns: r, data: e });
+        o.forEach((m, h) => {
+          m.textContent = u[h];
+        });
+      }
+      t(this, v).appendChild(s), i && t(this, f).addEventListener("change", t(this, G), {
+        signal: t(this, g).signal
+      }), t(this, F).call(this), t(this, D).call(this), this.updateContainerClasslist(), t(this, d).isDataRendered = !0, this.emit("ea-table-data-rendered");
+    });
+    /**
+     * 排序
+     * @param {string} prop
+     * @param {"asc" | "desc"} order
+     */
+    w(this, "sort", (e, s = "asc") => {
+      const a = document.createDocumentFragment(), r = t(this, v).nextElementSibling;
+      a.appendChild(t(this, v)), [...a.querySelectorAll("tr")].sort((c, p) => {
+        const o = t(this, d).dataSource.get(c), u = t(this, d).dataSource.get(p);
+        return s === "asc" ? String(o[e]).localeCompare(u[e]) : String(u[e]).localeCompare(o[e]);
+      }).forEach((c) => {
+        t(this, v).appendChild(c);
+      }), t(this, f).insertBefore(a, r), this.dispatchEvent(
+        new be({
+          prop: e,
+          order: s
+        })
+      );
+    });
+    /**
+     * 设置行样式
+     * @param {Function | String} handler
+     */
+    w(this, "setRowStylePart", (e) => {
+      if (!t(this, d).isDataRendered)
+        return console.warn("[EaTable] Please set data first!", this);
+      const s = [...t(this, v).querySelectorAll("tr")];
+      if (typeof e == "function")
+        s.forEach((a, r) => {
+          const i = e({
+            row: t(this, d).dataSource.get(a),
+            rowIndex: r
+          });
+          i && a.part.add(i);
+        });
+      else if (typeof e == "string") {
+        if (!e) return;
+        s.forEach((a) => {
+          a.part.add(e);
+        });
+      }
+    });
+    /**
+     * 设置当前行是否被选中
+     * @param {any} row
+     * @param {Boolean} selected
+     * @param {boolean} [ignoreSelectable]
+     */
+    w(this, "toggleRowSelection", (e, s, a = !0) => {
+      if (!t(this, d).columns.some(
+        (o) => o.type === "selection"
+      )) return;
+      const i = t(this, d).dataIndex.get(e);
+      if (!i) return;
+      const c = `ea-checkbox[data-type="selection"]${a ? "" : ":not([disabled])"}`, p = i.querySelector(c);
+      p && (s ? p.toggleAttribute("checked", s) : p.toggleAttribute("checked", !p.checked), t(this, M).call(this), t(this, T).call(this));
+    });
+    /**
+     * 清空选择
+     */
+    w(this, "clearSelection", () => {
+      [
+        ...t(this, f).querySelectorAll('ea-checkbox[data-type="selection"]')
+      ].forEach((s) => {
+        s.removeAttribute("checked"), s.removeAttribute("indeterminate");
+      }), t(this, T).call(this);
+    });
+    /**
+     * 获取当前选中的行
+     * @returns {any[]}
+     */
+    b(this, A, () => [
+      ...t(this, v).querySelectorAll(
+        'ea-checkbox[data-type="selection"][checked]'
+      )
+    ].map(
+      (e) => t(this, d).dataSource.get(e.closest('.ea-table__tr[part="tbody-tr"]'))
+    ));
+    /**
+     * 更新选中状态
+     */
+    b(this, M, () => {
+      const e = t(this, S).querySelector(
+        'ea-checkbox[data-type="selection"]'
+      ), s = [
+        ...t(this, v).querySelectorAll(
+          'ea-checkbox[data-type="selection"]:not([disabled])'
+        )
+      ].every((r) => r.hasAttribute("checked")), a = [
+        ...t(this, v).querySelectorAll('ea-checkbox[data-type="selection"]')
+      ].some((r) => r.hasAttribute("checked"));
+      s ? (e.toggleAttribute("checked", !0), e.removeAttribute("indeterminate")) : a ? (e.removeAttribute("checked"), e.toggleAttribute("indeterminate", !0)) : (e.removeAttribute("checked"), e.removeAttribute("indeterminate"));
+    });
+    /**
+     * 处理固定列的位置和阴影（box-shadow）
+     */
+    b(this, F, () => {
+      const e = [...t(this, f).querySelectorAll(".is-fixed")], s = e.filter(
+        (o) => o.classList.contains("fixed-left")
+      ), a = e.filter(
+        (o) => o.classList.contains("fixed-right")
+      ), r = (o) => {
+        const u = o.filter((h) => h.part.contains("thead-th"));
+        if (u.length <= 1) return [o];
+        const m = [];
+        for (let h = 0; h < o.length; h += u.length)
+          m.push(o.slice(h, h + u.length));
+        return m.reduce((h, y) => (y.forEach((_, $) => {
+          h[$] = [...h[$], _];
+        }), h), Array(u.length).fill([]));
+      }, i = (o) => {
+        if (!o.length) return;
+        const u = o.slice(-1)[0];
+        o.forEach((m, h) => {
+          const y = o[h - 1] || [];
+          m.forEach((_) => {
+            u && y[0] && _.style.setProperty(
+              "--ea-table-fixed-x",
+              `${h * y[0].offsetWidth}px`
+            );
+          });
+        }), u.forEach((m) => {
+          m.classList.add("is-last");
+        });
+      }, [c, p] = [
+        r(s),
+        r(a).reverse()
+      ];
+      i(c), i(p);
+    });
+    /**
+     * 设置高亮当前行样式
+     * @param {HTMLTableRowElement} currentRow
+     * @param {HTMLTableRowElement} [oldRow]
+     */
+    b(this, L, (e, s = t(this, d).currentRow.target) => {
+      var a, r;
+      this["highlight-current-row"] && ((a = s == null ? void 0 : s.classList) == null || a.remove("is-current"), (r = e == null ? void 0 : e.classList) == null || r.add("is-current"));
+    });
+    /**
+     * 取消高亮当前行样式
+     * @param {HTMLTableRowElement} currentRow
+     */
+    b(this, I, (e) => {
+      var s;
+      !this["highlight-current-row"] || !e || (s = e == null ? void 0 : e.classList) == null || s.remove("is-current");
+    });
+    /**
+     * 派发选择改变事件
+     */
+    b(this, T, () => {
+      const e = t(this, A).call(this);
+      this.dispatchEvent(
+        new re({
+          newSelection: e
+        })
+      );
+    });
+    /**
+     * 点击事件: 行点击, 单元格点击
+     * @param {MouseEvent} e
+     */
+    b(this, B, (e) => {
+      var i;
+      const s = e.target.closest("tr[part='tbody-tr']");
+      if ((i = t(this, x).selectAbortController) == null || i.abort(), !s) return;
+      const a = () => {
+        var c;
+        (c = t(this, x).selectAbortController) == null || c.abort();
+      }, r = (c) => {
+        var h;
+        const p = c.target.closest("tr[part='tbody-tr']"), o = c.target.closest("td[part='tbody-td']");
+        if (a(), p !== s) return;
+        const u = t(this, d).dataSource.get(s), m = (h = o == null ? void 0 : o.dataset) == null ? void 0 : h.scope;
+        t(this, L).call(this, s, t(this, d).currentRow.target), t(this, d).currentRow.target = s, t(this, d).currentRow.value = u, this.dispatchEvent(
+          new se({
+            target: s,
+            column: m,
+            row: u
+          })
+        ), this.dispatchEvent(
+          new te({
+            target: s,
+            column: m,
+            row: u
+          })
+        ), o && this.dispatchEvent(
+          new ee({
+            cell: o,
+            column: m,
+            row: u
+          })
+        );
+      };
+      t(this, x).selectAbortController = new AbortController(), this.addEventListener("mouseout", a, {
+        once: !0,
+        signal: t(this, x).selectAbortController.signal
+      }), t(this, f).addEventListener("mouseup", r, {
+        once: !0,
+        signal: t(this, x).selectAbortController.signal
+      });
+    });
+    /**
+     * 鼠标相关事件的共同处理逻辑
+     * @param {MouseEvent} e
+     * @param {'body' | 'head'} part
+     * @returns {{
+     *  cell: HTMLTableCellElement;
+     *  row: HTMLTableRowElement;
+     *  data: any;
+     *  columnKey: string;
+     * } | {
+     *  cell: HTMLTableCellElement;
+     *  columnKey: string;
+     * }}
+     */
+    b(this, C, (e, s) => {
+      var o;
+      const a = e.target.closest(`tr[part='t${s}-tr']`);
+      if (!a) return { cell: null, row: null, data: null, columnKey: null };
+      const r = s === "body" ? "td" : "th", i = e.target.closest(`${r}[part='t${s}-${r}']`), c = t(this, d).dataSource.get(a), p = (o = i == null ? void 0 : i.dataset) == null ? void 0 : o.scope;
+      return s === "body" ? (t(this, L).call(this, a, t(this, d).currentRow.target), t(this, d).currentRow.target = a, t(this, d).currentRow.value = c, {
+        cell: i,
+        row: a,
+        data: c,
+        columnKey: p
+      }) : {
+        cell: i,
+        columnKey: p
+      };
+    });
+    /**
+     * 鼠标双击事件: 行双击, 单元格双击
+     * @param {MouseEvent} e
+     */
+    b(this, K, (e) => {
+      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+      s && (this.dispatchEvent(
+        new Ee({
+          target: s,
+          column: i,
+          row: r
+        })
+      ), this.dispatchEvent(
+        new ge({
+          cell: a,
+          column: i,
+          row: r
+        })
+      ));
+    });
+    /**
+     * 鼠标右击事件: 行右击, 单元格右击
+     * @param {MouseEvent} e
+     */
+    b(this, P, (e) => {
+      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+      s && (this.dispatchEvent(
+        new ye({
+          target: s,
+          column: i,
+          row: r
+        })
+      ), this.dispatchEvent(
+        new ve({
+          cell: a,
+          column: i,
+          row: r
+        })
+      ));
+    });
+    /**
+     * 滚动事件: 固定列样式
+     */
+    b(this, D, () => {
+      const e = [...t(this, f).querySelectorAll(".is-fixed")], { scrollLeft: s } = t(this, f), a = Math.floor(t(this, f).scrollWidth - t(this, f).offsetWidth) - 1;
+      s < a ? s ? e.forEach((r) => {
+        r.classList.add("not-origin-position");
+      }) : e.forEach((r) => {
+        r.classList.toggle(
+          "not-origin-position",
+          !r.classList.contains("fixed-left")
+        );
+      }) : e.forEach((r) => {
+        r.classList.toggle(
+          "not-origin-position",
+          !r.classList.contains("fixed-right")
+        );
+      });
+    });
+    /**
+     * 鼠标进入单元格事件
+     * @param {MouseEvent} e
+     */
+    b(this, j, (e) => {
+      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+      s && this.dispatchEvent(
+        new me({
+          column: i,
+          row: r,
+          cell: a
+        })
+      );
+    });
+    /**
+     * 鼠标进入单元格事件
+     * @param {MouseEvent} e
+     */
+    b(this, W, (e) => {
+      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+      s && this.dispatchEvent(
+        new fe({
+          column: i,
+          row: r,
+          cell: a
+        })
+      );
+    });
+    /**
+     * 鼠标点击单元格事件
+     * @param {MouseEvent} e
+     */
+    b(this, U, (e) => {
+      const { cell: s, columnKey: a } = t(this, C).call(this, e, "head");
+      s && this.dispatchEvent(
+        new xe({
+          column: a,
+          cell: s
+        })
+      );
+    });
+    /**
+     * 表头鼠标右键事件
+     * @param {MouseEvent} e
+     */
+    b(this, O, (e) => {
+      const { cell: s, columnKey: a } = t(this, C).call(this, e, "head");
+      s && this.dispatchEvent(
+        new we({
+          column: a,
+          cell: s
+        })
+      );
+    });
+    /**
+     * 当存在 selection 列时，checkbox 的改变事件
+     * @param {Event} e
+     */
+    b(this, G, (e) => {
+      if (e.target.dataset.type !== "selection") return;
+      e.stopImmediatePropagation();
+      const { checked: s } = e.detail;
+      if (e.target.closest(".ea-table__thead")) {
+        const r = [
+          ...t(this, v).querySelectorAll('ea-checkbox[data-type="selection"]')
+        ];
+        e.target.toggleAttribute("checked", e.target.hasAttribute("checked")), r.forEach((c) => {
+          c.hasAttribute("disabled") || c.toggleAttribute("checked", s);
+        });
+        const i = t(this, A).call(this);
+        this.dispatchEvent(new oe({ selection: i }));
+      } else {
+        const r = t(this, A).call(this), i = t(this, d).dataSource.get(
+          e.target.closest('.ea-table__tr[part="tbody-tr"]')
+        );
+        t(this, M).call(this), this.dispatchEvent(
+          new ae({ selection: r, row: i })
+        );
+      }
+      t(this, T).call(this);
+    });
+    this.stylesheet = Z, this.shadowRoot.innerHTML = this.html`
+      <table class='ea-table' part='container'></table>
+      <slot></slot>
+    `, k(this, f, this.shadowRoot.querySelector(".ea-table"));
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "stripe",
+      "border",
+      "height",
+      "max-height",
+      "highlight-current-row",
+      "show-summary"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-table",
+      {},
+      {
+        stripe: this.stripe,
+        border: this.border,
+        "sticky-header": CSS.supports("height", this.height) || CSS.supports("height", this.maxHeight),
+        data: t(this, d).originData.length > 0
+      }
+    );
+    return t(this, f).className = e, e;
+  }
+  async $render() {
+    var e;
+    await customElements.whenDefined("ea-table-column"), (e = t(this, g)) == null || e.abort(), k(this, g, new AbortController()), t(this, N).call(this), t(this, H).call(this), t(this, f).addEventListener("mousedown", t(this, B), {
+      signal: t(this, g).signal
+    }), t(this, f).addEventListener("dblclick", t(this, K), {
+      signal: t(this, g).signal
+    }), t(this, f).addEventListener("contextmenu", t(this, P), {
+      signal: t(this, g).signal
+    }), t(this, S).addEventListener("click", t(this, U), {
+      signal: t(this, g).signal
+    }), t(this, S).addEventListener(
+      "contextmenu",
+      t(this, O),
+      {
+        signal: t(this, g).signal
+      }
+    ), t(this, f).addEventListener("scroll", t(this, D), {
+      signal: t(this, g).signal
+    }), t(this, f).addEventListener("mouseover", t(this, j), {
+      signal: t(this, g).signal
+    }), t(this, f).addEventListener("mouseout", t(this, W), {
+      signal: t(this, g).signal
+    });
+  }
+  /**
+   * 获取当前行数据
+   * @returns {Promise<Object>}
+   */
+  getCurrentRow() {
+    return t(this, d).currentRow;
+  }
+  /**
+   * 设置当前行数据
+   * @param {any} row 当前行数据
+   */
+  setCurrentRow(e) {
+    let s = null, a = null;
+    e && typeof e == "object" && (s = t(this, d).dataIndex.get(e) || null, a = e), s && a ? (t(this, L).call(this, s, t(this, d).currentRow.target), t(this, d).currentRow.target = s, t(this, d).currentRow.value = a) : (t(this, I).call(this, t(this, d).currentRow.target), t(this, d).currentRow.value = null, t(this, d).currentRow.target = null);
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = t(this, g)) == null || e.abort(), k(this, g, new AbortController()), this.$render();
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, g)) == null || e.abort();
+    for (const s in t(this, d))
+      t(this, d)[s] = null;
+  }
+}
+f = new WeakMap(), S = new WeakMap(), v = new WeakMap(), q = new WeakMap(), g = new WeakMap(), x = new WeakMap(), d = new WeakMap(), N = new WeakMap(), H = new WeakMap(), A = new WeakMap(), M = new WeakMap(), F = new WeakMap(), L = new WeakMap(), I = new WeakMap(), T = new WeakMap(), B = new WeakMap(), C = new WeakMap(), K = new WeakMap(), P = new WeakMap(), D = new WeakMap(), j = new WeakMap(), W = new WeakMap(), U = new WeakMap(), O = new WeakMap(), G = new WeakMap();
+window.customElements.get("ea-table") || window.customElements.define("ea-table", Ce);
+var R, V;
+class Se extends Q {
+  constructor() {
+    super();
+    w(this, "state", this.properties({
+      type: {
+        type: ["selection", "index"],
+        default: "",
+        /** @param {"selection" | "index"} newVal */
+        observer: (e) => {
+          e === "selection" && !customElements.get("ea-checkbox") && import("./ea-checkbox.js");
+        }
+      },
+      align: {
+        type: ["left", "center", "right"],
+        default: "left"
+      },
+      label: {
+        type: String,
+        default: ""
+      },
+      prop: {
+        type: String,
+        default: ""
+      },
+      colspan: {
+        type: Number,
+        default: () => this.querySelectorAll("ea-table-column").length || 1
+      },
+      width: {
+        type: String,
+        default: ""
+      },
+      sortable: {
+        type: Boolean,
+        default: !1
+      },
+      fixed: {
+        type: String,
+        default: () => this.hasAttribute("fixed") ? this.getAttribute("fixed") || "left" : null
+      }
+    }));
+    w(this, "propState", this.properties({
+      option: {
+        props: !0,
+        type: Object,
+        default: {}
+      }
+    }));
+    w(this, "funcStates", this.properties({
+      getColumnTree: {
+        props: !0,
+        type: Object,
+        /**
+         * @returns {TableColumnCtx}
+         */
+        default: () => {
+          var p, o;
+          const e = this.closest("ea-table"), s = [...this.querySelectorAll("& > ea-table-column")], a = this.shadowRoot.querySelector('slot[name="header"]'), r = this.shadowRoot.querySelector("#defaultSlot"), i = ["prop", "label", "width", "fixed", "sortable"];
+          let c = null;
+          if (s.length)
+            c = s.map((u) => u.getColumnTree);
+          else if (this.innerHTML) {
+            const u = document.createElement("template"), m = this.html(
+              Array.from(
+                r.assignedNodes(),
+                (h) => {
+                  var y;
+                  return (y = h.outerHTML) == null ? void 0 : y.trim();
+                }
+              ).filter((h) => h).join("")
+            );
+            u.innerHTML = m, c = u;
+          } else
+            c = null;
+          return {
+            label: this.label,
+            prop: this.prop,
+            type: this.type,
+            colspan: this.colspan,
+            rowspan: c ? 1 : t(this, V).call(this, e) - t(this, R).call(this, this, e) + 1,
+            align: this.align,
+            width: this.width,
+            sortable: this.sortable,
+            fixed: this.fixed,
+            depth: t(this, R).call(this, this, e),
+            props: [...this.attributes].filter(
+              (u) => !i.includes(u.name)
+            ),
+            header: ((o = (p = a.assignedNodes()[0]) == null ? void 0 : p.outerHTML) == null ? void 0 : o.trim()) || null,
+            template: c
+          };
+        }
+      }
+    }));
+    /**
+     * 获取当前组件的深度
+     * @param {EaTableColumn} el
+     * @param {import("../ea-table/index.js").EaTable} root
+     * @returns {number}
+     */
+    b(this, R, (e, s) => {
+      let a = 0;
+      for (; e !== s; )
+        e = e.parentElement, a++;
+      return a;
+    });
+    /**
+     * 获取最大深度
+     * @param {import("../ea-table/index.js").EaTable} root
+     * @returns {number}
+     */
+    b(this, V, (e) => {
+      let s = 0;
+      return e.querySelectorAll("ea-table-column").forEach((a) => {
+        s = Math.max(s, t(this, R).call(this, a, e));
+      }), s;
+    });
+    this.shadowRoot.innerHTML = `
+      <slot name="header"></slot>
+      <slot id="defaultSlot"></slot>
+    `;
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "type"];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+R = new WeakMap(), V = new WeakMap();
+window.customElements.get("ea-table-column") || window.customElements.define("ea-table-column", Se);
+export {
+  Ce as EaTable,
+  Se as EaTableColumn
+};