easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-descriptions.js

@@ -1,474 +1,474 @@
-var O = Object.defineProperty;
-var T = (s) => {
-  throw TypeError(s);
+import { E as C } from "../core/EaBase.ts.js";
+import { q as y, a as i, C as $, l as m } from "../core/decorator.js";
+import { E as g } from "../utils/Enum.ts.js";
+import { s as N } from "../css/ea-descriptions-item.style.js";
+import { c as P } from "../utils/bem.ts.js";
+import { h as w } from "../utils/html.ts.js";
+import { h as u } from "../utils/h.ts.js";
+import { s as R } from "../css/ea-descriptions.style.js";
+var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (t, l, e, n) => {
+  for (var r = n > 1 ? void 0 : n ? D(l, e) : l, s = t.length - 1, o; s >= 0; s--)
+    (o = t[s]) && (r = (n ? o(l, e, r) : o(r)) || r);
+  return n && r && T(l, e, r), r;
 };
-var P = (s, l, t) => l in s ? O(s, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[l] = t;
-var M = (s, l, t) => P(s, typeof l != "symbol" ? l + "" : l, t), N = (s, l, t) => l.has(s) || T("Cannot " + t);
-var i = (s, l, t) => (N(s, l, "read from private field"), t ? t.call(s) : l.get(s)), r = (s, l, t) => l.has(s) ? T("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(s) : l.set(s, t), h = (s, l, t, e) => (N(s, l, "write to private field"), e ? e.call(s, t) : l.set(s, t), t), o = (s, l, t) => (N(s, l, "access private method"), t);
-import { B } from "./Base.js";
-import { s as U } from "../css/ea-descriptions-item.style.js";
-import { s as V } from "../css/ea-descriptions.style.js";
-import { E as b } from "../utils/Utils.js";
-var C, g, c, u, I;
-class F extends B {
+const S = "ea-descriptions-item", _ = P(S), E = ["left", "center", "right"];
+let p = class extends C {
   constructor() {
-    super();
-    r(this, c);
-    /** @type {HTMLSpanElement | null} */
-    r(this, C);
-    /** @type {MutationObserver | null} */
-    r(this, g, null);
-    M(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: () => {
-          i(this, C).textContent = this.label, o(this, c, u).call(this);
-        }
-      },
-      colspan: {
-        type: Number,
-        default: 1,
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      },
-      rowspan: {
-        type: Number,
-        default: 1,
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      },
-      align: {
-        type: ["left", "center", "right"],
-        default: "",
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      },
-      "label-align": {
-        type: ["left", "center", "right"],
-        default: "",
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      },
-      width: {
-        type: String,
-        default: "",
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      },
-      "label-width": {
-        type: String,
-        default: "",
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      },
-      "label-part": {
-        type: String,
-        default: "",
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      },
-      "content-part": {
-        type: String,
-        default: "",
-        observer: () => {
-          o(this, c, u).call(this);
-        }
-      }
-    }));
-    this.stylesheet = U, this.$render();
+    super(...arguments), this._contentObserver = null, this.label = "", this.colspan = 1, this.rowspan = 1, this.align = "", this.labelAlign = "", this.width = "", this.labelWidth = "", this.labelPart = "", this.contentPart = "";
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "label",
-      "colspan",
-      "rowspan",
-      "align",
-      "label-align",
-      "width",
-      "label-width",
-      "label-part",
-      "content-part"
-    ];
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const t = _();
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-descriptions-item' part='container'>
-        <span class='ea-descriptions-item__label' part='label'>${this.label}</span>
-        <span class='ea-descriptions-item__content' part='content'>
+  html() {
+    return `
+      <div class='${_()}' part='container'>
+        <span class='${_.e("label")}' part='label'>${this.label}</span>
+        <span class='${_.e("content")}' part='content'>
           <slot></slot>
         </span>
       </div>
-    `, h(this, C, this.shadowRoot.querySelector(".ea-descriptions-item__label"));
+    `;
+  }
+  /** 通知父组件更新 */
+  _notifyParent() {
+    this.emit("ea-descriptions-item-change", {
+      bubbles: !0,
+      composed: !0
+    });
+  }
+  /** 设置内容观察器 */
+  _setupContentObserver() {
+    this._contentObserver = new MutationObserver(() => {
+      this._notifyParent();
+    }), this._contentObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    });
   }
-  connectedCallback() {
-    super.connectedCallback(), o(this, c, I).call(this);
+  $mount() {
+    this._setupContentObserver();
   }
-  $beforeUnmounted() {
-    i(this, g) && (i(this, g).disconnect(), h(this, g, null));
+  $beforeUnmount() {
+    this._contentObserver && (this._contentObserver.disconnect(), this._contentObserver = null);
   }
-}
-C = new WeakMap(), g = new WeakMap(), c = new WeakSet(), u = function() {
-  this.emit("ea-descriptions-item-change", {
-    bubbles: !0,
-    composed: !0
-  });
-}, I = function() {
-  h(this, g, new MutationObserver(() => {
-    o(this, c, u).call(this);
-  })), i(this, g).observe(this, {
-    childList: !0,
-    subtree: !0,
-    characterData: !0
-  });
 };
-window.customElements.get("ea-descriptions-item") || window.customElements.define("ea-descriptions-item", F);
-var S, m, j, q, x, R, w, L, z, A, H, D, f, E;
-class G extends B {
+h([
+  y(_.cb())
+], p.prototype, "_container", 2);
+h([
+  y(_.ce("label"))
+], p.prototype, "_label", 2);
+h([
+  i({
+    type: String,
+    default: "",
+    observer(t) {
+      this._label.textContent = t, this._notifyParent();
+    }
+  })
+], p.prototype, "label", 2);
+h([
+  i({
+    type: Number,
+    default: 1,
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "colspan", 2);
+h([
+  i({
+    type: Number,
+    default: 1,
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "rowspan", 2);
+h([
+  i({
+    type: g(E),
+    default: "",
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "align", 2);
+h([
+  i({
+    type: g(E),
+    default: "",
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "labelAlign", 2);
+h([
+  i({
+    type: String,
+    default: "",
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "width", 2);
+h([
+  i({
+    type: String,
+    default: "",
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "labelWidth", 2);
+h([
+  i({
+    type: String,
+    default: "",
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "labelPart", 2);
+h([
+  i({
+    type: String,
+    default: "",
+    observer() {
+      this._notifyParent();
+    }
+  })
+], p.prototype, "contentPart", 2);
+p = h([
+  $(S, { styles: [N] })
+], p);
+var I = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (t, l, e, n) => {
+  for (var r = n > 1 ? void 0 : n ? A(l, e) : l, s = t.length - 1, o; s >= 0; s--)
+    (o = t[s]) && (r = (n ? o(l, e, r) : o(r)) || r);
+  return n && r && I(l, e, r), r;
+};
+const O = "ea-descriptions", a = P(O), L = ["horizontal", "vertical"], j = ["large", "default", "small"];
+let c = class extends C {
   constructor() {
-    super();
-    r(this, f);
-    /** @type {HTMLElement} */
-    r(this, S);
-    /** @type {HTMLElement} */
-    r(this, m);
-    /** @type {HTMLElement} */
-    r(this, j);
-    /** @type {HTMLElement} */
-    r(this, q);
-    /** @type {HTMLElement} */
-    r(this, x);
-    /** @type {HTMLSlotElement} */
-    r(this, R);
-    /** @type {AbortController | null} */
-    r(this, w);
-    M(this, "state", this.properties({
-      column: {
-        type: Number,
-        default: 3,
-        observer: () => {
-          o(this, f, E).call(this);
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          i(this, j).textContent = t;
-        }
-      },
-      border: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      direction: {
-        type: ["horizontal", "vertical"],
-        default: "horizontal",
-        observer: () => {
-          o(this, f, E).call(this);
-        }
-      },
-      size: {
-        type: ["large", "default", "small"],
-        default: "default",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "label-width": {
-        type: String,
-        default: "",
-        observer: (t) => {
-          this.style.setProperty("--ea-descriptions-label-width", t);
-        }
-      }
-    }));
-    /**
-     * 处理子元素分割，将 HTML 描述转换为行列描述
-     * @param {HTMLElement[]} children 子元素
-     * @param {number} column 列数
-     * @return {Array<Array<Object>>} 分割后的二维数组
-     */
-    r(this, L, (t, e) => {
-      const a = [];
-      return t.forEach((n) => {
-        var k;
-        const d = a.length, v = e % ((k = a[d]) == null ? void 0 : k.length) || 0, _ = {
-          label: n.label,
-          content: n.innerHTML,
-          colspan: n.colspan,
-          rowspan: n.rowspan,
-          align: n.align,
-          "label-align": n["label-align"],
-          width: n.width,
-          "label-width": n["label-width"] || this["label-width"],
-          "label-part": n["label-part"],
-          "content-part": n["content-part"]
-        };
-        for (let p = d; p < d + _.rowspan; p++) {
-          a[p] || (a[p] = []), _.rowspan > 1 && p !== d && (a[p][v] = {
+    super(...arguments), this.column = 3, this.caption = "", this.border = !1, this.direction = "horizontal", this.size = "default", this.labelWidth = "", this._variantRenderer = {
+      normal: (t) => this._renderNormalRow(t),
+      border: (t) => this._renderBorderRow(t),
+      vertical: (t) => this._renderVerticalRow(t)
+    };
+  }
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const t = a(
+      { [this.size]: !0 },
+      { border: this.border, vertical: this.direction === "vertical" }
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  html() {
+    return `
+      <slot id='defaultSlot' part='default-slot'></slot>
+      <table class='${a()}' part='container' aria-labelledby='descriptions-title'>
+        <caption class='${a.e("caption")}' part='caption'>
+          <section class='${a.e("title")}' part='title' id='descriptions-title'>
+            <slot name='header'></slot>
+          </section>
+          <section class='${a.e("extra")}' part='extra'>
+            <slot name='extra'></slot>
+          </section>
+        </caption>
+        <tbody class='${a.e("body")}' part='body'>
+        </tbody>
+      </table>
+    `;
+  }
+  /**
+   * 处理子元素分割，将 HTML 描述转换为行列描述
+   * @param children - 子元素列表
+   * @param column - 每行列数
+   * @returns 行列描述二维数组
+   */
+  _handleChildrenDivide(t, l) {
+    const e = [];
+    return t.forEach((n) => {
+      const r = {
+        label: n.label,
+        content: n.innerHTML,
+        colspan: n.colspan,
+        rowspan: n.rowspan,
+        align: n.align,
+        "label-align": n.labelAlign,
+        width: n.width,
+        "label-width": n.labelWidth || this.labelWidth,
+        "label-part": n.labelPart,
+        "content-part": n.contentPart
+      };
+      let s = e.findIndex((o) => o.reduce((f, v) => f + ((v == null ? void 0 : v.colspan) || 0), 0) + r.colspan <= l);
+      s === -1 && (e.push([]), s = e.length - 1), e[s].push(r);
+      for (let o = 1; o < r.rowspan; o++) {
+        const b = s + o;
+        e[b] || (e[b] = []);
+        for (let f = 0; f < r.colspan; f++)
+          e[b].splice(e[s].indexOf(r) + f, 0, {
             colspan: 1,
             rowspan: 1,
             placeholder: !0
           });
-          for (let y = v; y < v + _.colspan; y++)
-            _.colspan > 1 && y !== v && (a[p][y] = {
-              colspan: 1,
-              rowspan: 1,
-              placeholder: !0
-            });
-        }
-        let $ = a.findIndex((p) => p.length < e);
-        $ = $ === -1 ? d : $, a[d].reduce((p, y) => p + y.colspan, 0) + _.colspan <= e ? a[$].push(_) : a[$][v] = _;
-      }), a.map((n) => n.filter((d) => !d.placeholder)).filter((n) => n.length);
+      }
+    }), e.map((n) => n.filter((r) => !r.placeholder)).filter((n) => n.length > 0);
+  }
+  /**
+   * 获取 Descriptions 组件的样式类型
+   * @returns 样式类型
+   */
+  _getVariant() {
+    return this.direction === "vertical" ? "vertical" : this.border ? "border" : "normal";
+  }
+  /**
+   * 计算单元格样式
+   * @param item - 描述项配置
+   * @param isLabel - 是否为标签单元格
+   * @returns CSS 样式字符串
+   */
+  _getCellStyle(t, l) {
+    const e = [];
+    return t.align && e.push(`--ea-descriptions-align: ${t.align};`), l && (t["label-align"] || t.align) && e.push(
+      `--ea-descriptions-label-align: ${t["label-align"] || t.align};`
+    ), t.width && e.push(`--ea-descriptions-item-width: ${t.width}`), l && t["label-width"] && e.push(`--ea-descriptions-label-width: ${t["label-width"]};`), e.join(" ");
+  }
+  /**
+   * 计算普通模式的 colspan
+   * @param item - 描述项配置
+   * @param index - 当前项在行中的索引
+   * @param row - 当前行
+   * @returns colspan 值或 undefined
+   */
+  _getNormalColspan(t, l, e) {
+    const n = e.reduce((o, b) => o + b.colspan, 0), s = l === e.length - 1 && e.length < this.column && n < this.column;
+    if (t.colspan > 1 || s)
+      return s ? this.column - n + (l < 1 ? 1 : l) : t.colspan;
+  }
+  /**
+   * 渲染标签元素
+   * @param item - 描述项配置
+   * @param tag - HTML 标签名
+   * @param extraClass - 额外类名
+   * @returns HTML 字符串
+   */
+  _renderLabelElement(t, l = "span", e) {
+    const n = e ? `${a.e("label")} ${e}` : a.e("label");
+    return u(
+      l,
+      n,
+      {
+        part: `label cell ${t["label-part"] || ""}`,
+        style: this._getCellStyle(t, !0),
+        role: "rowheader"
+      },
+      t.label
+    );
+  }
+  /**
+   * 渲染内容元素
+   * @param item - 描述项配置
+   * @param tag - HTML 标签名
+   * @param extraClass - 额外类名
+   * @returns HTML 字符串
+   */
+  _renderContentElement(t, l = "span", e) {
+    const n = e ? `${a.e("content")} ${e}` : a.e("content");
+    return u(
+      l,
+      n,
+      {
+        part: `content cell ${t["content-part"] || ""}`,
+        style: this._getCellStyle(t, !1)
+      },
+      w(t.content)
+    );
+  }
+  /**
+   * 渲染表格行
+   * @param cells - 单元格 HTML 数组
+   * @param extraPart - 额外 part 名称
+   * @returns HTML 字符串
+   */
+  _renderTableRow(t, l) {
+    return u(
+      "tr",
+      a.e("row"),
+      { part: l ? `row ${l}` : "row" },
+      t
+    );
+  }
+  /** 普通模式渲染器 */
+  _renderNormalRow(t) {
+    const l = t.map((e, n) => {
+      const r = this._getNormalColspan(e, n, t), s = {
+        part: "col-cell",
+        style: e.width ? `--ea-descriptions-item-width: ${e.width}` : ""
+      };
+      return e.rowspan > 1 && (s.rowspan = e.rowspan), r && (s.colspan = r), u("td", a.e("cell"), s, [
+        this._renderLabelElement(e),
+        this._renderContentElement(e)
+      ]);
     });
-    /**
-     * 获取 Descriptions 组件的样式类型
-     * @return {string} 变体名称
-     */
-    r(this, z, () => this.direction === "vertical" ? "vertical" : this.border ? "border" : "normal");
-    /**
-     * Descriptions 组件的样式类型渲染器
-     */
-    r(this, A, {
-      normal: (t) => b.EaElement.h(
-        "tr",
-        "ea-descriptions__tr",
+    return this._renderTableRow(l);
+  }
+  /** 边框模式渲染器 */
+  _renderBorderRow(t) {
+    const l = t.flatMap((e, n) => {
+      const r = n === t.length - 1, s = t.length < 3 && r, o = u(
+        "td",
+        a.e("label"),
         {
-          part: "row",
-          style: [
-            t.align ? `--ea-descriptions-align: ${t.align};` : ""
-          ].join(" ")
+          part: `label cell ${e["label-part"] || ""}`,
+          colspan: 1,
+          rowspan: e.rowspan,
+          style: this._getCellStyle(e, !0),
+          role: "rowheader"
         },
-        t.map(
-          (e, a) => b.EaElement.h(
-            "td",
-            "ea-descriptions__td",
-            {
-              part: "col-cell",
-              [e.rowspan > 1 ? "rowspan" : ""]: e.rowspan,
-              [e.colspan > 1 || a === t.length - 1 && t.length < this.column ? "colspan" : ""]: a === t.length - 1 && t.length < this.column && t.reduce((n, d) => n + d.colspan, 0) < this.column ? this.column - t.reduce((n, d) => n + d.colspan, 0) + (a < 1 ? 1 : a) : e.colspan,
-              style: [
-                e.width ? `--ea-descriptions-item-width: ${e.width}` : ""
-              ]
-            },
-            [
-              b.EaElement.h(
-                "span",
-                "ea-descriptions__label",
-                {
-                  part: `label cell ${e["label-part"]}`,
-                  tabindex: 1,
-                  style: [
-                    e["label-align"] || e.align ? `--ea-descriptions-label-align: ${e["label-align"] || e.align};` : "",
-                    e["label-width"] ? `--ea-descriptions-label-width: ${e["label-width"]}` : ""
-                  ].join(" ")
-                },
-                e.label
-              ),
-              b.EaElement.h(
-                "span",
-                "ea-descriptions__content",
-                {
-                  part: `content cell ${e["content-part"]}`,
-                  tabindex: 1,
-                  style: [
-                    e.align ? `--ea-descriptions-align: ${e.align};` : ""
-                  ].join(" ").trim()
-                },
-                e.content
-              )
-            ]
-          )
-        )
-      ),
-      border: (t) => b.EaElement.h(
-        "tr",
-        "ea-descriptions__tr",
+        e.label
+      ), b = u(
+        "td",
+        a.e("content"),
         {
-          part: "row"
+          part: `content cell ${e["content-part"] || ""}`,
+          rowspan: e.rowspan,
+          colspan: s ? 6 - (n + 1) : e.colspan || 1,
+          style: this._getCellStyle(e, !1)
         },
-        t.map(
-          (e, a) => [
-            b.EaElement.h(
-              "td",
-              "ea-descriptions__label",
-              {
-                part: `label cell ${e["label-part"]}`,
-                tabindex: 1,
-                colspan: 1,
-                rowspan: e.rowspan,
-                style: [
-                  e.align ? `--ea-descriptions-align: ${e.align};` : "",
-                  e["label-align"] || e.align ? `--ea-descriptions-label-align: ${e["label-align"] || e.align};` : "",
-                  e.width ? `--ea-descriptions-item-width: ${e.width}` : "",
-                  e["label-width"] ? `--ea-descriptions-label-width: ${e["label-width"]}` : ""
-                ].join(" ")
-              },
-              e.label
-            ),
-            b.EaElement.h(
-              "td",
-              "ea-descriptions__content",
-              {
-                part: `content cell ${e["content-part"]}`,
-                tabindex: 1,
-                rowspan: e.rowspan,
-                colspan: t.length < 3 && a === t.length - 1 ? 6 - (a + 1) : e.colspan || 1,
-                style: [
-                  e.align ? `--ea-descriptions-align: ${e.align};` : "",
-                  e.width ? `--ea-descriptions-item-width: ${e.width}` : ""
-                ].join(" ")
-              },
-              e.content
-            )
-          ].join("")
-        )
-      ),
-      vertical: (t) => [
-        b.EaElement.h(
-          "tr",
-          "ea-descriptions__tr",
-          {
-            part: "row row-label"
-          },
-          t.map(
-            (e, a) => b.EaElement.h(
-              "th",
-              "ea-descriptions__label ea-descriptions__th",
-              {
-                part: `label cell ${e["label-part"]}`,
-                tabindex: 1,
-                rowspan: 1,
-                colspan: t.length < 3 && a === t.length - 1 ? 6 - (a + 1) : e.colspan || 1,
-                style: [
-                  e.align ? `--ea-descriptions-align: ${e.align};` : "",
-                  e["label-align"] || e.align ? `--ea-descriptions-label-align: ${e["label-align"] || e.align};` : "",
-                  e.width ? `--ea-descriptions-item-width: ${e.width}` : "",
-                  e["label-width"] ? `--ea-descriptions-label-width: ${e["label-width"]}` : ""
-                ].join(" ")
-              },
-              e.label
-            )
-          )
-        ),
-        b.EaElement.h(
-          "tr",
-          "ea-descriptions__tr",
-          {
-            part: "row row-content"
-          },
-          t.map(
-            (e, a) => b.EaElement.h(
-              "td",
-              "ea-descriptions__content ea-descriptions__td",
-              {
-                part: `content cell ${e["content-part"]}`,
-                tabindex: 1,
-                rowspan: e.rowspan * 2 - 1,
-                colspan: t.length < 3 && a === t.length - 1 ? 6 - (a + 1) : e.colspan || 1,
-                style: [
-                  e.align ? `--ea-descriptions-align: ${e.align};` : "",
-                  e.width ? `--ea-descriptions-item-width: ${e.width}` : ""
-                ].join(" ")
-              },
-              e.content
-            )
-          )
-        )
-      ].join("")
-    });
-    /**
-     * 监听默认插槽变化
-     */
-    r(this, H, () => {
-      o(this, f, E).call(this);
+        w(e.content)
+      );
+      return [o, b];
     });
-    /**
-     * 监听子元素变化
-     * @param {Event} e
-     */
-    r(this, D, (t) => {
-      t.stopImmediatePropagation(), o(this, f, E).call(this);
-    });
-    this.stylesheet = V, this.$render();
+    return this._renderTableRow(l);
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "column",
-      "title",
-      "border",
-      "direction",
-      "size",
-      "label-width"
-    ];
+  /** 垂直模式渲染器 */
+  _renderVerticalRow(t) {
+    const l = (r) => t.length < 3 && r === t.length - 1, e = t.map(
+      (r, s) => u(
+        "th",
+        `${a.e("label")} ${a.e("header")}`,
+        {
+          part: `label cell ${r["label-part"] || ""}`,
+          rowspan: 1,
+          colspan: l(s) ? 6 - (s + 1) : r.colspan || 1,
+          style: this._getCellStyle(r, !0),
+          scope: "row",
+          role: "rowheader"
+        },
+        r.label
+      )
+    ), n = t.map(
+      (r, s) => u(
+        "td",
+        `${a.e("content")} ${a.e("cell")}`,
+        {
+          part: `content cell ${r["content-part"] || ""}`,
+          rowspan: r.rowspan * 2 - 1,
+          colspan: l(s) ? 6 - (s + 1) : r.colspan || 1,
+          style: this._getCellStyle(r, !1)
+        },
+        w(r.content)
+      )
+    );
+    return this._renderTableRow(e, "row-label") + this._renderTableRow(n, "row-content");
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist("ea-descriptions", {
-      "--border": this.border,
-      ["--" + this.size]: this.size
-    });
-    return i(this, S).className = t, t;
+  /** 渲染默认插槽内容 */
+  _render() {
+    const t = [
+      ...this.querySelectorAll(
+        "ea-descriptions-item"
+      )
+    ];
+    this._tbody.innerHTML = this._handleChildrenDivide(t, this.column).map(this._variantRenderer[this._getVariant()].bind(this)).join("");
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <slot id='defaultSlot' part='default-slot'></slot>
-      <table class='ea-descriptions' part='container'>
-        <caption class='ea-descriptions__caption' part='caption'>
-          <section class='ea-descriptions__title' part='title'>
-            <slot name='title'></slot>
-          </section>
-          <section class='ea-descriptions__extra' part='extra'>
-            <slot name='extra'></slot>
-          </section>
-        </caption>
-        <tbody class='ea-descriptions__body' part='body'>
-        </tbody>
-      </table>
-    `, h(this, S, this.shadowRoot.querySelector(".ea-descriptions")), h(this, m, this.shadowRoot.querySelector(".ea-descriptions__caption")), h(this, j, this.shadowRoot.querySelector(
-      ".ea-descriptions__title slot[name='title']"
-    )), h(this, q, this.shadowRoot.querySelector(".ea-descriptions__extra")), h(this, x, this.shadowRoot.querySelector(".ea-descriptions__body")), h(this, R, this.shadowRoot.querySelector("#defaultSlot"));
+  _handleSlotChange() {
+    this._render();
   }
-  async connectedCallback() {
-    var t;
-    super.connectedCallback(), await customElements.whenDefined("ea-descriptions-item"), (t = i(this, w)) == null || t.abort(), h(this, w, new AbortController()), o(this, f, E).call(this), this.addEventListener(
-      "ea-descriptions-item-change",
-      i(this, D),
-      { signal: i(this, w).signal }
-    ), i(this, R).addEventListener("slotchange", i(this, H), {
-      signal: i(this, w).signal
-    });
+  _handleChildChange(t) {
+    t.stopImmediatePropagation(), this._render();
   }
-  $beforeUnmounted() {
-    var t;
-    (t = i(this, w)) == null || t.abort();
+  $mount() {
+    this.updateContainerClasslist(), this._render();
   }
-}
-S = new WeakMap(), m = new WeakMap(), j = new WeakMap(), q = new WeakMap(), x = new WeakMap(), R = new WeakMap(), w = new WeakMap(), L = new WeakMap(), z = new WeakMap(), A = new WeakMap(), H = new WeakMap(), D = new WeakMap(), f = new WeakSet(), /**
- * 渲染默认插槽内容
- */
-E = function() {
-  const t = [...this.querySelectorAll("ea-descriptions-item")];
-  i(this, x).innerHTML = i(this, L).call(this, t, this.column).map(i(this, A)[i(this, z).call(this)]).join("");
 };
-window.customElements.get("ea-descriptions") || window.customElements.define("ea-descriptions", G);
+d([
+  y(a.cb())
+], c.prototype, "_container", 2);
+d([
+  y(`${a.ce("title")} slot[name='header']`)
+], c.prototype, "_captionSlot", 2);
+d([
+  y(a.ce("body"))
+], c.prototype, "_tbody", 2);
+d([
+  i({
+    type: Number,
+    default: 3,
+    observer() {
+      this._render();
+    }
+  })
+], c.prototype, "column", 2);
+d([
+  i({
+    type: String,
+    default: "",
+    observer(t) {
+      this._captionSlot && (this._captionSlot.textContent = t);
+    }
+  })
+], c.prototype, "caption", 2);
+d([
+  i({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this._render();
+    }
+  })
+], c.prototype, "border", 2);
+d([
+  i({
+    type: g(L),
+    default: "horizontal",
+    observer() {
+      this.updateContainerClasslist(), this._render();
+    }
+  })
+], c.prototype, "direction", 2);
+d([
+  i({
+    type: g(j),
+    default: "default",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], c.prototype, "size", 2);
+d([
+  i({
+    type: String,
+    default: "",
+    observer(t) {
+      this.style.setProperty("--ea-descriptions-label-width", t);
+    }
+  })
+], c.prototype, "labelWidth", 2);
+d([
+  m("slotchange", "#defaultSlot")
+], c.prototype, "_handleSlotChange", 1);
+d([
+  m("ea-descriptions-item-change")
+], c.prototype, "_handleChildChange", 1);
+c = d([
+  $(O, { styles: [R] })
+], c);
 export {
-  G as EaDescriptions,
-  F as EaDescriptionsItem
+  c as EaDescriptions,
+  p as EaDescriptionsItem
 };