easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-table.js

@@ -1,57 +1,58 @@
-var X = Object.defineProperty;
-var z = (n) => {
-  throw TypeError(n);
+var it = Object.defineProperty;
+var ot = (o) => {
+  throw TypeError(o);
 };
-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);
+var ct = (o, r, t) => r in o ? it(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var x = (o, r, t) => ct(o, typeof r != "symbol" ? r + "" : r, t), at = (o, r, t) => r.has(o) || ot("Cannot " + t);
+var e = (o, r, t) => (at(o, r, "read from private field"), t ? t.call(o) : r.get(o)), p = (o, r, t) => r.has(o) ? ot("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(o) : r.set(o, t), C = (o, r, t, s) => (at(o, r, "write to private field"), s ? s.call(o, t) : r.set(o, t), t), S = (o, r, t) => (at(o, r, "access private method"), t);
 import { E } from "../utils/Utils.js";
-import { B as Q } from "./Base.js";
+import { B as rt } 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;
+import { s as ht } from "../css/ea-table.style.js";
+import { s as dt } from "../css/ea-table-column.style.js";
+class ut extends Event {
+  constructor(r) {
+    super("ea-cell-click", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class te extends Event {
-  constructor(l) {
-    super("ea-current-change", { bubbles: !0, composed: !0 }), this.detail = l;
+class pt extends Event {
+  constructor(r) {
+    super("ea-current-change", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class se extends Event {
-  constructor(l) {
-    super("ea-row-click", { bubbles: !0, composed: !0 }), this.detail = l;
+class bt extends Event {
+  constructor(r) {
+    super("ea-row-click", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class oe extends Event {
-  constructor(l) {
-    super("ea-select-all", { bubbles: !0, composed: !0 }), this.detail = l;
+class mt extends Event {
+  constructor(r) {
+    super("ea-select-all", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class ae extends Event {
-  constructor(l) {
-    super("ea-select", { bubbles: !0, composed: !0 }), this.detail = l;
+class ft extends Event {
+  constructor(r) {
+    super("ea-select", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class re extends Event {
-  constructor(l) {
-    super("ea-selection-change", { bubbles: !0, composed: !0 }), this.detail = l;
+class gt extends Event {
+  constructor(r) {
+    super("ea-selection-change", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-const ne = (n) => E.EaElement.h(
+const Et = (o) => E.EaElement.h(
   "colgroup",
   "ea-table__colgroup",
   {
     part: "colgroup"
   },
-  n.map(
-    (l) => E.EaElement.h("col", "ea-table__col", {
-      width: l.width,
+  o.map(
+    (r) => E.EaElement.h("col", "ea-table__col", {
+      width: r.width,
       part: "col"
     })
   )
-), le = (n) => E.EaElement.h(
+), yt = (o) => E.EaElement.h(
   "tfoot",
   "ea-table__tfoot",
   {
@@ -63,19 +64,19 @@ const ne = (n) => E.EaElement.h(
     {
       part: "tfoot-tr"
     },
-    n.map(
-      (l) => E.EaElement.h(
+    o.map(
+      (r) => E.EaElement.h(
         "td",
-        `ea-table__td ${l.fixed ? ` is-fixed fixed-${l.fixed}` : ""}`,
+        `ea-table__td ${r.fixed ? ` is-fixed fixed-${r.fixed}` : ""}`,
         {
           part: "tfoot-td",
-          "data-scope": l.prop
+          "data-scope": r.prop
         }
       )
     )
   )
-), ie = (n) => E.EaElement.h("span", "ea-table__sort-wrapper", {}, [
-  E.EaElement.h("span", null, {}, n),
+), vt = (o) => E.EaElement.h("span", "ea-table__sort-wrapper", {}, [
+  E.EaElement.h("span", null, {}, o),
   E.EaElement.h(
     "span",
     "ea-table__sort",
@@ -83,15 +84,17 @@ const ne = (n) => E.EaElement.h(
     [
       E.EaElement.h("ea-icon", "ea-table__sort-icon", {
         part: "asc-icon",
-        icon: "icon-angle-up"
+        name: "angle-up",
+        size: "small"
       }),
       E.EaElement.h("ea-icon", "ea-table__sort-icon", {
         part: "desc-icon",
-        icon: "icon-angle-down"
+        name: "angle-down",
+        size: "small"
       })
     ].join("")
   )
-]), ce = () => E.EaElement.h(
+]), wt = () => E.EaElement.h(
   "ea-checkbox",
   "ea-table__checkbox",
   {
@@ -99,108 +102,119 @@ const ne = (n) => E.EaElement.h(
     part: "checkbox"
   },
   null
-), he = () => "", de = (n) => {
-  const l = (c) => c === "selection" ? ce() : c === "index" ? he() : null, e = (c, p) => c ? ie(p) : null;
+), xt = () => "", Ct = (o) => {
+  const r = (c) => c === "selection" ? wt() : c === "index" ? xt() : null, t = (c, u) => c ? vt(u) : 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(
+  const n = o.label || o.prop || "", l = r(o.type), i = t(o.sortable, n);
+  return l ? s = l : i ? s = i : o.header ? s = o.header : s = n, E.EaElement.h(
     "th",
-    `ea-table__th${n.fixed ? ` is-fixed fixed-${n.fixed}` : ""}${n.sortable ? " is-sortable" : ""}${n.width ? " is-width" : ""}`.trim(),
+    `ea-table__th${o.fixed ? ` is-fixed fixed-${o.fixed}` : ""}${o.sortable ? " is-sortable" : ""}${o.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 || ""
+      colspan: o.colspan,
+      rowspan: o.rowspan,
+      style: [o.width ? `--ea-table-cell-width: ${o.width}` : ""],
+      "data-scope": o.prop || "",
+      "data-prop": o.prop || "",
+      "data-order": "asc"
     },
     s
   );
-}, ue = (n) => n.map(
-  (l) => E.EaElement.h(
+}, St = (o) => o.map(
+  (r) => E.EaElement.h(
     "tr",
     "ea-table__tr is-thead",
     {
       part: "thead-tr"
     },
-    l.map(de)
+    r.map(Ct)
   )
-), pe = (n) => {
-  const l = n.reduce((e, s) => (e[s.depth] || (e[s.depth] = []), e[s.depth].push(s), e), []);
+), _t = (o) => {
+  const r = o.reduce((t, s) => (t[s.depth] || (t[s.depth] = []), t[s.depth].push(s), t), []);
   return E.EaElement.h(
     "thead",
     "ea-table__thead",
     {
       part: "thead"
     },
-    ue(l)
+    St(r)
   );
 };
-class be extends Event {
-  constructor(l) {
-    super("ea-sort-change", { bubbles: !0, composed: !0 }), this.detail = l;
+class kt extends Event {
+  constructor(r) {
+    super("ea-sort-change", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class me extends Event {
-  constructor(l) {
-    super("ea-cell-mouse-enter", { bubbles: !0, composed: !0 }), this.detail = l;
+class At extends Event {
+  constructor(r) {
+    super("ea-cell-mouse-enter", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class fe extends Event {
-  constructor(l) {
-    super("ea-cell-mouse-leave", { bubbles: !0, composed: !0 }), this.detail = l;
+class Lt extends Event {
+  constructor(r) {
+    super("ea-cell-mouse-leave", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class ge extends Event {
-  constructor(l) {
-    super("ea-cell-dblclick", { bubbles: !0, composed: !0 }), this.detail = l;
+class Tt extends Event {
+  constructor(r) {
+    super("ea-cell-dblclick", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class Ee extends Event {
-  constructor(l) {
-    super("ea-row-dblclick", { bubbles: !0, composed: !0 }), this.detail = l;
+class Rt extends Event {
+  constructor(r) {
+    super("ea-row-dblclick", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class ye extends Event {
-  constructor(l) {
-    super("ea-row-contextmenu", { bubbles: !0, composed: !0 }), this.detail = l;
+class qt extends Event {
+  constructor(r) {
+    super("ea-row-contextmenu", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class ve extends Event {
-  constructor(l) {
-    super("ea-cell-contextmenu", { bubbles: !0, composed: !0 }), this.detail = l;
+class Dt extends Event {
+  constructor(r) {
+    super("ea-cell-contextmenu", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class we extends Event {
-  constructor(l) {
-    super("ea-header-contextmenu", { bubbles: !0, composed: !0 }), this.detail = l;
+class $t extends Event {
+  constructor(r) {
+    super("ea-header-contextmenu", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-class xe extends Event {
-  constructor(l) {
-    super("ea-header-click", { bubbles: !0, composed: !0 }), this.detail = l;
+class Mt extends Event {
+  constructor(r) {
+    super("ea-header-click", { bubbles: !0, composed: !0 }), this.detail = r;
   }
 }
-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 {
+class Nt extends Event {
+  constructor(r) {
+    super("ea-template-cell-click", { bubbles: !0, composed: !0 }), this.detail = r;
+  }
+}
+var f, T, w, H, I, F, g, k, h, B, K, D, P, W, j, U, $, z, L, G, J, O, Q, V, X, Y, Z, tt, et;
+class Ht extends rt {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    b(this, f);
+    p(this, f);
     /** @type {HTMLElement} */
-    b(this, S);
+    p(this, T);
     /** @type {HTMLElement} */
-    b(this, v);
+    p(this, w);
     /** @type {HTMLElement} */
-    b(this, q);
+    p(this, H);
+    /** @type {HTMLSlotElement} */
+    p(this, I);
+    /** @type {HTMLElement} */
+    p(this, F);
     /** @type {AbortController} */
-    b(this, g);
-    b(this, x, {
+    p(this, g);
+    p(this, k, {
       /** @type {AbortController | null} */
       selectionChangeAbortController: null,
       /** @type {AbortController | null} */
       selectAbortController: null
     });
-    b(this, d, {
+    p(this, h, {
       isDataRendered: !1,
       currentRow: {
         target: null,
@@ -212,7 +226,7 @@ class Ce extends Q {
       dataSource: /* @__PURE__ */ new WeakMap(),
       dataIndex: /* @__PURE__ */ new WeakMap()
     });
-    w(this, "state", this.properties({
+    x(this, "state", this.properties({
       stripe: {
         type: Boolean,
         default: !1,
@@ -230,15 +244,15 @@ class Ce extends Q {
       height: {
         type: String,
         default: null,
-        observer: (e) => {
-          this.style.setProperty("--ea-table-height", e), this.updateContainerClasslist();
+        observer: (t) => {
+          this.style.setProperty("--ea-table-height", t), this.updateContainerClasslist();
         }
       },
       "max-height": {
         type: String,
         default: null,
-        observer: (e) => {
-          this.style.setProperty("--ea-table-max-height", e), this.updateContainerClasslist();
+        observer: (t) => {
+          this.style.setProperty("--ea-table-max-height", t), this.updateContainerClasslist();
         }
       },
       "highlight-current-row": {
@@ -254,17 +268,17 @@ class Ce extends Q {
         }
       }
     }));
-    w(this, "propStates", this.properties({
+    x(this, "propStates", this.properties({
       data: {
         props: !0,
         type: Array,
-        default: () => t(this, d).originData,
-        observer: (e) => {
-          this.setData(e);
+        default: () => e(this, h).originData,
+        observer: (t) => {
+          e(this, h).originData = t, this.setData(t);
         }
       }
     }));
-    w(this, "funcStates", this.properties({
+    x(this, "funcStates", this.properties({
       selectable: {
         props: !0,
         type: Function,
@@ -275,7 +289,7 @@ class Ce extends Q {
         props: !0,
         type: Function,
         rawFunction: !0,
-        default: () => (e) => e
+        default: () => (t) => t
       },
       summaryMethod: {
         props: !0,
@@ -283,19 +297,19 @@ class Ce extends Q {
         rawFunction: !0,
         default: () => (
           /** @param {{columns: ColumnOption, data: any[]}} param */
-          (e) => {
-            const { columns: s, data: a } = e, r = [];
+          (t) => {
+            const { columns: s, data: n } = t, l = [];
             return s.forEach((i, c) => {
               if (c === 0) {
-                r[c] = "Sum";
+                l[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;
+              const u = n.map((a) => Number(a[i.prop]));
+              u.every((a) => Number.isNaN(a)) ? l[c] = "" : l[c] = u.reduce((a, b) => {
+                const m = Number(b);
+                return Number.isNaN(m) ? a : a + b;
               }, 0);
-            }), r;
+            }), l;
           }
         )
       }
@@ -303,58 +317,49 @@ class Ce extends Q {
     /**
      * 渲染表格的基本结构
      */
-    b(this, N, () => {
-      const e = [...this.querySelectorAll("ea-table-column")].map(
-        (c) => c.getColumnTree
+    p(this, B, () => {
+      const t = [...this.querySelectorAll("ea-table-column")].map(
+        (a) => a.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"));
+      e(this, h).columns = t;
+      const s = Et(t), n = _t(t), l = yt(t), i = this.shadowRoot.querySelector(".ea-table__colgroup"), c = this.shadowRoot.querySelector(".ea-table__thead"), u = this.shadowRoot.querySelector(".ea-table__tfoot");
+      i && (i.innerHTML = s), c && (c.innerHTML = n), u && (u.innerHTML = l);
     });
     /**
      * 初始化带有筛选的列
      */
-    b(this, H, () => {
+    p(this, K, () => {
       if (![
-        ...t(this, f).querySelectorAll(".ea-table__th.is-sortable")
+        ...e(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;
+      const s = (n) => {
+        const l = n.target.closest(".is-sortable");
+        if (!l) return;
+        const { prop: i, order: c } = l.dataset;
         if (!i) return;
-        const p = c === "asc" ? "desc" : "asc", o = {
-          asc: r.querySelector('[part="asc-icon"]'),
-          desc: r.querySelector('[part="desc-icon"]')
+        const u = c === "asc" ? "desc" : "asc", a = {
+          asc: l.querySelector('[part="asc-icon"]'),
+          desc: l.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);
+        l.setAttribute("data-order", u), l.querySelectorAll(".ea-table__sort-icon").forEach((b) => {
+          b.classList.toggle("is-active", a[u] === b);
+        }), this.sort(i, u);
       };
-      t(this, S).addEventListener("click", s, {
-        signal: t(this, g).signal
+      e(this, T).addEventListener("click", s, {
+        signal: e(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 = {
+    x(this, "setData", async (t) => {
+      var u;
+      await customElements.whenDefined("ea-table"), await customElements.whenDefined("ea-table-column"), e(this, h).columns.length === 0 && (e(this, B).call(this), e(this, K).call(this));
+      const s = document.createDocumentFragment(), n = document.createElement("tr");
+      n.part = "tbody-tr", n.className = "ea-table__tr";
+      const l = e(this, h).columns.filter(
+        (a) => !a.template || a.template instanceof HTMLTemplateElement
+      ), i = l.some((a) => a.type === "selection"), c = {
         selection: () => this.html(
           E.EaElement.h(
             "ea-checkbox",
@@ -376,58 +381,64 @@ class Ce extends Q {
           )
         )
       };
-      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);
+      for (const a in e(this, k))
+        (u = e(this, k)[a]) == null || u.abort(), e(this, k)[a] = new AbortController();
+      if (e(this, h).isDataRendered = !1, e(this, w).innerHTML = "", e(this, h).dataSource = /* @__PURE__ */ new WeakMap(), e(this, h).originData = t, l.forEach((a) => {
+        var v;
+        const b = n, { template: m } = a, d = document.createElement("td");
+        if (d.part = "tbody-td", d.className = "ea-table__td", d.classList.toggle("is-fixed", a.fixed), d.classList.toggle(`fixed-${a.fixed}`, a.fixed), d.classList.toggle(
+          `ea-table__cell--align-${a.align}`,
+          a.align
+        ), a.width && d.style.setProperty("--ea-table-cell-width", a.width), m) {
+          const A = m.content.cloneNode(!0);
+          A.querySelectorAll("*").forEach((nt) => {
+            nt.setAttribute("data-template-cell", "");
+          }), d.appendChild(A);
+        } else a.type ? d.innerHTML = (v = c[a.type]) == null ? void 0 : v.call(c) : d.setAttribute("data-scope", a.prop);
+        b.appendChild(d);
+      }), t.forEach((a, b) => {
+        const m = n.cloneNode(!0);
+        if (m.setAttribute("data-index", b), typeof this.selectable == "function") {
+          const d = !this.selectable(a);
           m.querySelector(
             'ea-checkbox[data-type="selection"]'
-          ).toggleAttribute("disabled", h);
+          ).toggleAttribute("disabled", d);
         }
-        if (r.some((h) => h.type === "index") && typeof this.indexMethod == "function") {
-          const h = m.querySelector(".ea-table__index");
-          h.textContent = this.indexMethod(u);
+        if (l.some((d) => d.type === "index") && typeof this.indexMethod == "function") {
+          const d = m.querySelector(".ea-table__index");
+          d.textContent = this.indexMethod(b);
         }
-        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);
+        m.querySelectorAll("[data-scope]").forEach((d) => {
+          const v = d.getAttribute("data-scope"), A = l.find((N) => N.prop === v);
+          A ? d.textContent = a[A.prop] : v in a && (d.textContent = a[v]);
+        }), s.appendChild(m), e(this, h).dataSource.set(m, a), a && typeof a == "object" && e(this, h).dataIndex.set(a, m);
       }), this["show-summary"] && typeof this.summaryMethod == "function") {
-        const o = t(this, q).querySelectorAll(
+        const a = e(this, H).querySelectorAll(
           ".ea-table__td[data-scope]"
-        ), u = this.summaryMethod({ columns: r, data: e });
-        o.forEach((m, h) => {
-          m.textContent = u[h];
+        ), b = this.summaryMethod({ columns: l, data: t });
+        a.forEach((m, d) => {
+          m.textContent = b[d];
         });
       }
-      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");
+      e(this, w).appendChild(s), i && e(this, f).addEventListener("change", e(this, et), {
+        signal: e(this, g).signal
+      }), e(this, W).call(this), e(this, O).call(this), this.updateContainerClasslist(), e(this, h).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]);
+    x(this, "sort", (t, s = "asc") => {
+      const n = document.createDocumentFragment(), l = e(this, w).nextElementSibling;
+      n.appendChild(e(this, w)), [...n.querySelectorAll("tr")].sort((c, u) => {
+        const a = e(this, h).dataSource.get(c), b = e(this, h).dataSource.get(u);
+        return s === "asc" ? String(a[t]).localeCompare(b[t]) : String(b[t]).localeCompare(a[t]);
       }).forEach((c) => {
-        t(this, v).appendChild(c);
-      }), t(this, f).insertBefore(a, r), this.dispatchEvent(
-        new be({
-          prop: e,
+        e(this, w).appendChild(c);
+      }), e(this, f).insertBefore(n, l), this.dispatchEvent(
+        new kt({
+          prop: t,
           order: s
         })
       );
@@ -436,22 +447,25 @@ class Ce extends Q {
      * 设置行样式
      * @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
+    x(this, "setRowStylePart", async (t) => {
+      e(this, h).isDataRendered || await E.EaElement.addAsyncEventListener(
+        this,
+        "ea-table-data-rendered",
+        !0
+      );
+      const s = [...e(this, w).querySelectorAll("tr")];
+      if (typeof t == "function")
+        s.forEach((n, l) => {
+          const i = t({
+            row: e(this, h).dataSource.get(n),
+            rowIndex: l
           });
-          i && a.part.add(i);
+          i && n.part.add(i);
         });
-      else if (typeof e == "string") {
-        if (!e) return;
-        s.forEach((a) => {
-          a.part.add(e);
+      else if (typeof t == "string") {
+        if (!t) return;
+        s.forEach((n) => {
+          n.part.add(t);
         });
       }
     });
@@ -461,113 +475,113 @@ class Ce extends Q {
      * @param {Boolean} selected
      * @param {boolean} [ignoreSelectable]
      */
-    w(this, "toggleRowSelection", (e, s, a = !0) => {
-      if (!t(this, d).columns.some(
-        (o) => o.type === "selection"
+    x(this, "toggleRowSelection", (t, s, n = !0) => {
+      if (!e(this, h).columns.some(
+        (a) => a.type === "selection"
       )) return;
-      const i = t(this, d).dataIndex.get(e);
+      const i = e(this, h).dataIndex.get(t);
       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));
+      const c = `ea-checkbox[data-type="selection"]${n ? "" : ":not([disabled])"}`, u = i.querySelector(c);
+      u && (s ? u.toggleAttribute("checked", s) : u.toggleAttribute("checked", !u.checked), e(this, P).call(this), e(this, $).call(this));
     });
     /**
      * 清空选择
      */
-    w(this, "clearSelection", () => {
+    x(this, "clearSelection", () => {
       [
-        ...t(this, f).querySelectorAll('ea-checkbox[data-type="selection"]')
+        ...e(this, f).querySelectorAll('ea-checkbox[data-type="selection"]')
       ].forEach((s) => {
         s.removeAttribute("checked"), s.removeAttribute("indeterminate");
-      }), t(this, T).call(this);
+      }), e(this, $).call(this);
     });
     /**
      * 获取当前选中的行
      * @returns {any[]}
      */
-    b(this, A, () => [
-      ...t(this, v).querySelectorAll(
+    p(this, D, () => [
+      ...e(this, w).querySelectorAll(
         'ea-checkbox[data-type="selection"][checked]'
       )
     ].map(
-      (e) => t(this, d).dataSource.get(e.closest('.ea-table__tr[part="tbody-tr"]'))
+      (t) => e(this, h).dataSource.get(t.closest('.ea-table__tr[part="tbody-tr"]'))
     ));
     /**
      * 更新选中状态
      */
-    b(this, M, () => {
-      const e = t(this, S).querySelector(
+    p(this, P, () => {
+      const t = e(this, T).querySelector(
         'ea-checkbox[data-type="selection"]'
       ), s = [
-        ...t(this, v).querySelectorAll(
+        ...e(this, w).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"));
+      ].every((l) => l.hasAttribute("checked")), n = [
+        ...e(this, w).querySelectorAll('ea-checkbox[data-type="selection"]')
+      ].some((l) => l.hasAttribute("checked"));
+      s ? (t.toggleAttribute("checked", !0), t.removeAttribute("indeterminate")) : n ? (t.removeAttribute("checked"), t.toggleAttribute("indeterminate", !0)) : (t.removeAttribute("checked"), t.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];
+    p(this, W, () => {
+      const t = [...e(this, f).querySelectorAll(".is-fixed")], s = t.filter(
+        (a) => a.classList.contains("fixed-left")
+      ), n = t.filter(
+        (a) => a.classList.contains("fixed-right")
+      ), l = (a) => {
+        const b = a.filter((d) => d.part.contains("thead-th"));
+        if (b.length <= 1) return [a];
         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(
+        for (let d = 0; d < a.length; d += b.length)
+          m.push(a.slice(d, d + b.length));
+        return m.reduce((d, v) => (v.forEach((A, N) => {
+          d[N] = [...d[N], A];
+        }), d), Array(b.length).fill([]));
+      }, i = (a) => {
+        if (!a.length) return;
+        const b = a.slice(-1)[0];
+        a.forEach((m, d) => {
+          const v = a[d - 1] || [];
+          m.forEach((A) => {
+            b && v[0] && A.style.setProperty(
               "--ea-table-fixed-x",
-              `${h * y[0].offsetWidth}px`
+              `${d * v[0].offsetWidth}px`
             );
           });
-        }), u.forEach((m) => {
+        }), b.forEach((m) => {
           m.classList.add("is-last");
         });
-      }, [c, p] = [
-        r(s),
-        r(a).reverse()
+      }, [c, u] = [
+        l(s),
+        l(n).reverse()
       ];
-      i(c), i(p);
+      i(c), i(u);
     });
     /**
      * 设置高亮当前行样式
      * @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"));
+    p(this, j, (t, s = e(this, h).currentRow.target) => {
+      var n, l;
+      this["highlight-current-row"] && ((n = s == null ? void 0 : s.classList) == null || n.remove("is-current"), (l = t == null ? void 0 : t.classList) == null || l.add("is-current"));
     });
     /**
      * 取消高亮当前行样式
      * @param {HTMLTableRowElement} currentRow
      */
-    b(this, I, (e) => {
+    p(this, U, (t) => {
       var s;
-      !this["highlight-current-row"] || !e || (s = e == null ? void 0 : e.classList) == null || s.remove("is-current");
+      !this["highlight-current-row"] || !t || (s = t == null ? void 0 : t.classList) == null || s.remove("is-current");
     });
     /**
      * 派发选择改变事件
      */
-    b(this, T, () => {
-      const e = t(this, A).call(this);
+    p(this, $, () => {
+      const t = e(this, D).call(this);
       this.dispatchEvent(
-        new re({
-          newSelection: e
+        new gt({
+          newSelection: t
         })
       );
     });
@@ -575,44 +589,57 @@ class Ce extends Q {
      * 点击事件: 行点击, 单元格点击
      * @param {MouseEvent} e
      */
-    b(this, B, (e) => {
+    p(this, z, (t) => {
       var i;
-      const s = e.target.closest("tr[part='tbody-tr']");
-      if ((i = t(this, x).selectAbortController) == null || i.abort(), !s) return;
-      const a = () => {
+      const s = t.target.closest("tr[part='tbody-tr']");
+      if ((i = e(this, k).selectAbortController) == null || i.abort(), !s) return;
+      const n = () => {
         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({
+        (c = e(this, k).selectAbortController) == null || c.abort();
+      }, l = (c) => {
+        const u = c.target.closest("tr[part='tbody-tr']"), a = c.target.closest("td[part='tbody-td']");
+        if (n(), u !== s) return;
+        const b = e(this, h).dataSource.get(s), m = a == null ? void 0 : a.getAttribute("data-scope");
+        if (e(this, j).call(this, s, e(this, h).currentRow.target), e(this, h).currentRow.target = s, e(this, h).currentRow.value = b, this.dispatchEvent(
+          new bt({
             target: s,
             column: m,
-            row: u
+            row: b
           })
         ), this.dispatchEvent(
-          new te({
+          new pt({
             target: s,
             column: m,
-            row: u
-          })
-        ), o && this.dispatchEvent(
-          new ee({
-            cell: o,
-            column: m,
-            row: u
+            row: b
           })
-        );
+        ), a) {
+          this.dispatchEvent(
+            new ut({
+              cell: a,
+              column: m,
+              row: b
+            })
+          );
+          const d = c.target.closest("[data-template-cell]");
+          if (d) {
+            const v = Number(s.getAttribute("data-index"));
+            this.dispatchEvent(
+              new Nt({
+                target: d,
+                rowData: b,
+                rowIndex: v,
+                originalEvent: c
+              })
+            );
+          }
+        }
       };
-      t(this, x).selectAbortController = new AbortController(), this.addEventListener("mouseout", a, {
+      e(this, k).selectAbortController = new AbortController(), this.addEventListener("mouseout", n, {
         once: !0,
-        signal: t(this, x).selectAbortController.signal
-      }), t(this, f).addEventListener("mouseup", r, {
+        signal: e(this, k).selectAbortController.signal
+      }), e(this, f).addEventListener("mouseup", l, {
         once: !0,
-        signal: t(this, x).selectAbortController.signal
+        signal: e(this, k).selectAbortController.signal
       });
     });
     /**
@@ -629,38 +656,37 @@ class Ce extends Q {
      *  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, {
+    p(this, L, (t, s) => {
+      const n = t.target.closest(`tr[part='t${s}-tr']`);
+      if (!n) return { cell: null, row: null, data: null, columnKey: null };
+      const l = s === "body" ? "td" : "th", i = t.target.closest(`${l}[part='t${s}-${l}']`), c = e(this, h).dataSource.get(n), u = i == null ? void 0 : i.getAttribute("data-scope");
+      return s === "body" ? {
         cell: i,
-        row: a,
+        row: n,
         data: c,
-        columnKey: p
-      }) : {
+        columnKey: u
+      } : {
         cell: i,
-        columnKey: p
+        columnKey: u
       };
     });
     /**
      * 鼠标双击事件: 行双击, 单元格双击
      * @param {MouseEvent} e
      */
-    b(this, K, (e) => {
-      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+    p(this, G, (t) => {
+      const { row: s, cell: n, data: l, columnKey: i } = e(this, L).call(this, t, "body");
       s && (this.dispatchEvent(
-        new Ee({
+        new Rt({
           target: s,
           column: i,
-          row: r
+          row: l
         })
       ), this.dispatchEvent(
-        new ge({
-          cell: a,
+        new Tt({
+          cell: n,
           column: i,
-          row: r
+          row: l
         })
       ));
     });
@@ -668,38 +694,38 @@ class Ce extends Q {
      * 鼠标右击事件: 行右击, 单元格右击
      * @param {MouseEvent} e
      */
-    b(this, P, (e) => {
-      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+    p(this, J, (t) => {
+      const { row: s, cell: n, data: l, columnKey: i } = e(this, L).call(this, t, "body");
       s && (this.dispatchEvent(
-        new ye({
+        new qt({
           target: s,
           column: i,
-          row: r
+          row: l
         })
       ), this.dispatchEvent(
-        new ve({
-          cell: a,
+        new Dt({
+          cell: n,
           column: i,
-          row: r
+          row: l
         })
       ));
     });
     /**
      * 滚动事件: 固定列样式
      */
-    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(
+    p(this, O, () => {
+      const t = [...e(this, f).querySelectorAll(".is-fixed")], { scrollLeft: s } = e(this, f), n = Math.floor(e(this, f).scrollWidth - e(this, f).offsetWidth) - 1;
+      s < n ? s ? t.forEach((l) => {
+        l.classList.add("not-origin-position");
+      }) : t.forEach((l) => {
+        l.classList.toggle(
           "not-origin-position",
-          !r.classList.contains("fixed-left")
+          !l.classList.contains("fixed-left")
         );
-      }) : e.forEach((r) => {
-        r.classList.toggle(
+      }) : t.forEach((l) => {
+        l.classList.toggle(
           "not-origin-position",
-          !r.classList.contains("fixed-right")
+          !l.classList.contains("fixed-right")
         );
       });
     });
@@ -707,13 +733,13 @@ class Ce extends Q {
      * 鼠标进入单元格事件
      * @param {MouseEvent} e
      */
-    b(this, j, (e) => {
-      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+    p(this, Q, (t) => {
+      const { row: s, cell: n, data: l, columnKey: i } = e(this, L).call(this, t, "body");
       s && this.dispatchEvent(
-        new me({
+        new At({
           column: i,
-          row: r,
-          cell: a
+          row: l,
+          cell: n
         })
       );
     });
@@ -721,13 +747,13 @@ class Ce extends Q {
      * 鼠标进入单元格事件
      * @param {MouseEvent} e
      */
-    b(this, W, (e) => {
-      const { row: s, cell: a, data: r, columnKey: i } = t(this, C).call(this, e, "body");
+    p(this, V, (t) => {
+      const { row: s, cell: n, data: l, columnKey: i } = e(this, L).call(this, t, "body");
       s && this.dispatchEvent(
-        new fe({
+        new Lt({
           column: i,
-          row: r,
-          cell: a
+          row: l,
+          cell: n
         })
       );
     });
@@ -735,11 +761,11 @@ class Ce extends Q {
      * 鼠标点击单元格事件
      * @param {MouseEvent} e
      */
-    b(this, U, (e) => {
-      const { cell: s, columnKey: a } = t(this, C).call(this, e, "head");
+    p(this, X, (t) => {
+      const { cell: s, columnKey: n } = e(this, L).call(this, t, "head");
       s && this.dispatchEvent(
-        new xe({
-          column: a,
+        new Mt({
+          column: n,
           cell: s
         })
       );
@@ -748,46 +774,65 @@ class Ce extends Q {
      * 表头鼠标右键事件
      * @param {MouseEvent} e
      */
-    b(this, O, (e) => {
-      const { cell: s, columnKey: a } = t(this, C).call(this, e, "head");
+    p(this, Y, (t) => {
+      const { cell: s, columnKey: n } = e(this, L).call(this, t, "head");
       s && this.dispatchEvent(
-        new we({
-          column: a,
+        new $t({
+          column: n,
           cell: s
         })
       );
     });
+    /**
+     * 监听默认插槽变化
+     */
+    p(this, Z, () => {
+      this.$render(), e(this, h).originData.length > 0 && this.setData(e(this, h).originData);
+    });
+    /**
+     * 监听子元素变化
+     * @param {Event} e
+     */
+    p(this, tt, (t) => {
+      t.stopImmediatePropagation(), this.$render(), e(this, h).originData.length > 0 && this.setData(e(this, h).originData);
+    });
     /**
      * 当存在 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"]')
+    p(this, et, (t) => {
+      if (t.target.getAttribute("data-type") !== "selection") return;
+      t.stopImmediatePropagation();
+      const { checked: s } = t.detail;
+      if (t.target.closest(".ea-table__thead")) {
+        const l = [
+          ...e(this, w).querySelectorAll('ea-checkbox[data-type="selection"]')
         ];
-        e.target.toggleAttribute("checked", e.target.hasAttribute("checked")), r.forEach((c) => {
+        t.target.toggleAttribute("checked", t.target.hasAttribute("checked")), l.forEach((c) => {
           c.hasAttribute("disabled") || c.toggleAttribute("checked", s);
         });
-        const i = t(this, A).call(this);
-        this.dispatchEvent(new oe({ selection: i }));
+        const i = e(this, D).call(this);
+        this.dispatchEvent(new mt({ 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"]')
+        const l = e(this, D).call(this), i = e(this, h).dataSource.get(
+          t.target.closest('.ea-table__tr[part="tbody-tr"]')
         );
-        t(this, M).call(this), this.dispatchEvent(
-          new ae({ selection: r, row: i })
+        e(this, P).call(this), this.dispatchEvent(
+          new ft({ selection: l, row: i })
         );
       }
-      t(this, T).call(this);
+      e(this, $).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"));
+    this.stylesheet = ht, this.shadowRoot.innerHTML = this.html(`
+      <slot id='defaultSlot' part='default-slot'></slot>
+      <table class='ea-table' part='container'>
+        <colgroup class='ea-table__colgroup' part='colgroup'></colgroup>
+        <thead class='ea-table__thead' part='thead'></thead>
+        <tbody class='ea-table__tbody' part='tbody'></tbody>
+        <tfoot class='ea-table__tfoot' part='tfoot'></tfoot>
+      </table>
+      <slot class="ea-table__empty" name="empty">No Data</slot>
+    `), C(this, f, this.shadowRoot.querySelector(".ea-table")), C(this, I, this.shadowRoot.querySelector("#defaultSlot")), C(this, T, this.shadowRoot.querySelector(".ea-table__thead")), C(this, w, this.shadowRoot.querySelector(".ea-table__tbody")), C(this, H, this.shadowRoot.querySelector(".ea-table__tfoot")), C(this, F, this.shadowRoot.querySelector(".ea-table__empty"));
   }
   static get observedAttributes() {
     return [
@@ -805,40 +850,48 @@ class Ce extends Q {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
+    const t = 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
+        data: e(this, h).originData.length > 0
       }
     );
-    return t(this, f).className = e, e;
+    return e(this, f).className = t, e(this, F).className = this.computedClasslist(
+      "ea-table__empty",
+      {},
+      {
+        data: e(this, h).originData.length > 0
+      }
+    ), t;
   }
   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(
+    var t;
+    await customElements.whenDefined("ea-table-column"), (t = e(this, g)) == null || t.abort(), C(this, g, new AbortController()), e(this, B).call(this), e(this, K).call(this), this.addEventListener("ea-table-column-change", e(this, tt), {
+      signal: e(this, g).signal
+    }), e(this, f).addEventListener("mousedown", e(this, z), {
+      signal: e(this, g).signal
+    }), e(this, f).addEventListener("dblclick", e(this, G), {
+      signal: e(this, g).signal
+    }), e(this, f).addEventListener("contextmenu", e(this, J), {
+      signal: e(this, g).signal
+    }), e(this, T).addEventListener("click", e(this, X), {
+      signal: e(this, g).signal
+    }), e(this, T).addEventListener(
       "contextmenu",
-      t(this, O),
+      e(this, Y),
       {
-        signal: t(this, g).signal
+        signal: e(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
+    ), e(this, f).addEventListener("scroll", e(this, O), {
+      signal: e(this, g).signal
+    }), e(this, f).addEventListener("mouseover", e(this, Q), {
+      signal: e(this, g).signal
+    }), e(this, f).addEventListener("mouseout", e(this, V), {
+      signal: e(this, g).signal
     });
   }
   /**
@@ -846,79 +899,114 @@ class Ce extends Q {
    * @returns {Promise<Object>}
    */
   getCurrentRow() {
-    return t(this, d).currentRow;
+    return e(this, h).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);
+  setCurrentRow(t) {
+    let s = null, n = null;
+    t && typeof t == "object" && (s = e(this, h).dataIndex.get(t) || null, n = t), s && n ? (e(this, j).call(this, s, e(this, h).currentRow.target), e(this, h).currentRow.target = s, e(this, h).currentRow.value = n) : (e(this, U).call(this, e(this, h).currentRow.target), e(this, h).currentRow.value = null, e(this, h).currentRow.target = null);
   }
   connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = t(this, g)) == null || e.abort(), k(this, g, new AbortController()), this.$render();
+    var t;
+    super.connectedCallback(), (t = e(this, g)) == null || t.abort(), C(this, g, new AbortController()), this.$render(), e(this, I).addEventListener("slotchange", e(this, Z), {
+      signal: e(this, g).signal
+    });
   }
   $beforeUnmounted() {
-    var e;
-    (e = t(this, g)) == null || e.abort();
-    for (const s in t(this, d))
-      t(this, d)[s] = null;
+    var t;
+    (t = e(this, g)) == null || t.abort();
+    for (const s in e(this, h))
+      e(this, h)[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 {
+f = new WeakMap(), T = new WeakMap(), w = new WeakMap(), H = new WeakMap(), I = new WeakMap(), F = new WeakMap(), g = new WeakMap(), k = new WeakMap(), h = new WeakMap(), B = new WeakMap(), K = new WeakMap(), D = new WeakMap(), P = new WeakMap(), W = new WeakMap(), j = new WeakMap(), U = new WeakMap(), $ = new WeakMap(), z = new WeakMap(), L = new WeakMap(), G = new WeakMap(), J = new WeakMap(), O = new WeakMap(), Q = new WeakMap(), V = new WeakMap(), X = new WeakMap(), Y = new WeakMap(), Z = new WeakMap(), tt = new WeakMap(), et = new WeakMap();
+window.customElements.get("ea-table") || window.customElements.define("ea-table", Ht);
+var R, q, M, st, y, _, lt;
+class It extends rt {
   constructor() {
     super();
-    w(this, "state", this.properties({
+    p(this, y);
+    /** @type {HTMLSpanElement | null} */
+    p(this, R);
+    /** @type {MutationObserver | null} */
+    p(this, q, null);
+    x(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");
+        observer: (t) => {
+          t === "selection" && !customElements.get("ea-checkbox") && import("./ea-checkbox.js"), S(this, y, _).call(this);
         }
       },
       align: {
         type: ["left", "center", "right"],
-        default: "left"
+        default: "left",
+        observer: () => {
+          S(this, y, _).call(this);
+        }
       },
       label: {
         type: String,
-        default: ""
+        default: "",
+        observer: () => {
+          e(this, R) && (e(this, R).textContent = `${this.label}[$${this.prop}]`), S(this, y, _).call(this);
+        }
       },
       prop: {
         type: String,
-        default: ""
+        default: "",
+        observer: () => {
+          e(this, R) && (e(this, R).textContent = `${this.label}[$${this.prop}]`), S(this, y, _).call(this);
+        }
       },
       colspan: {
         type: Number,
-        default: () => this.querySelectorAll("ea-table-column").length || 1
+        default: () => this.querySelectorAll("ea-table-column").length || 1,
+        observer: () => {
+          S(this, y, _).call(this);
+        }
       },
       width: {
         type: String,
-        default: ""
+        default: "",
+        observer: () => {
+          S(this, y, _).call(this);
+        }
       },
       sortable: {
         type: Boolean,
-        default: !1
+        default: !1,
+        observer: () => {
+          S(this, y, _).call(this);
+        }
       },
       fixed: {
-        type: String,
-        default: () => this.hasAttribute("fixed") ? this.getAttribute("fixed") || "left" : null
+        type: ["left", "right", "false"],
+        default: () => {
+          if (!this.hasAttribute("fixed")) return null;
+          const t = this.getAttribute("fixed");
+          return t === "false" || t === "null" || t === "" ? "left" : t || "left";
+        },
+        observer: () => {
+          S(this, y, _).call(this);
+        }
       }
     }));
-    w(this, "propState", this.properties({
+    x(this, "propState", this.properties({
       option: {
         props: !0,
         type: Object,
-        default: {}
+        default: {},
+        observer: () => {
+          S(this, y, _).call(this);
+        }
       }
     }));
-    w(this, "funcStates", this.properties({
+    x(this, "funcStates", this.properties({
       getColumnTree: {
         props: !0,
         type: Object,
@@ -926,39 +1014,39 @@ class Se extends Q {
          * @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"];
+          const t = this.closest("ea-table"), s = [...this.querySelectorAll("& > ea-table-column")], n = this.shadowRoot.querySelector('slot[name="header"]'), l = 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;
+          else {
+            const u = Array.from(l.assignedElements() || []).map((a) => {
+              var b;
+              return (b = a.outerHTML) == null ? void 0 : b.trim();
+            }).join("");
+            if (u) {
+              const a = document.createElement("template");
+              a.innerHTML = this.html(u), c = a;
+            } 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,
+            rowspan: c ? 1 : e(this, st).call(this, t) - e(this, M).call(this, this, t) + 1,
             align: this.align,
             width: this.width,
             sortable: this.sortable,
             fixed: this.fixed,
-            depth: t(this, R).call(this, this, e),
+            depth: e(this, M).call(this, this, t),
             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,
+            header: n.assignedElements().map((u) => {
+              var a;
+              return (a = u.outerHTML) == null ? void 0 : a.trim();
+            }).join("") || null,
             template: c
           };
         }
@@ -970,38 +1058,78 @@ class Se extends Q {
      * @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;
+    p(this, M, (t, s) => {
+      let n = 0;
+      for (; t !== s; )
+        t = t.parentElement, n++;
+      return n;
     });
     /**
      * 获取最大深度
      * @param {import("../ea-table/index.js").EaTable} root
      * @returns {number}
      */
-    b(this, V, (e) => {
+    p(this, st, (t) => {
       let s = 0;
-      return e.querySelectorAll("ea-table-column").forEach((a) => {
-        s = Math.max(s, t(this, R).call(this, a, e));
+      return t.querySelectorAll("ea-table-column").forEach((n) => {
+        s = Math.max(s, e(this, M).call(this, n, t));
       }), s;
     });
-    this.shadowRoot.innerHTML = `
-      <slot name="header"></slot>
-      <slot id="defaultSlot"></slot>
-    `;
+    this.stylesheet = dt, this.$render();
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "type"];
+    return [
+      ...super.observedAttributes,
+      "type",
+      "align",
+      "label",
+      "prop",
+      "colspan",
+      "width",
+      "sortable",
+      "fixed"
+    ];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-table-column' part='container'>
+        <header class='ea-table-column__label' part='label'>${this.label}[$${this.prop}]</header>
+        <span class='ea-table-column__content' part='content'>
+          <slot name="header"></slot>
+          <slot id="defaultSlot" part="default-slot"></slot>
+        </span>
+      </div>
+    `, C(this, R, this.shadowRoot.querySelector(".ea-table-column__label"));
   }
   connectedCallback() {
-    super.connectedCallback();
+    super.connectedCallback(), S(this, y, lt).call(this);
+  }
+  $beforeUnmounted() {
+    e(this, q) && (e(this, q).disconnect(), C(this, q, null));
   }
 }
-R = new WeakMap(), V = new WeakMap();
-window.customElements.get("ea-table-column") || window.customElements.define("ea-table-column", Se);
+R = new WeakMap(), q = new WeakMap(), M = new WeakMap(), st = new WeakMap(), y = new WeakSet(), /**
+ * 通知父组件更新
+ */
+_ = function() {
+  this.emit("ea-table-column-change", {
+    bubbles: !0,
+    composed: !0
+  });
+}, /**
+ * 监听默认插槽变化
+ */
+lt = function() {
+  C(this, q, new MutationObserver(() => {
+    S(this, y, _).call(this);
+  })), e(this, q).observe(this, {
+    childList: !0,
+    subtree: !0,
+    characterData: !0
+  });
+};
+window.customElements.get("ea-table-column") || window.customElements.define("ea-table-column", It);
 export {
-  Ce as EaTable,
-  Se as EaTableColumn
+  Ht as EaTable,
+  It as EaTableColumn
 };