easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-descriptions.js

@@ -0,0 +1,474 @@
+var O = Object.defineProperty;
+var T = (s) => {
+  throw TypeError(s);
+};
+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 {
+  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();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "label",
+      "colspan",
+      "rowspan",
+      "align",
+      "label-align",
+      "width",
+      "label-width",
+      "label-part",
+      "content-part"
+    ];
+  }
+  $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'>
+          <slot></slot>
+        </span>
+      </div>
+    `, h(this, C, this.shadowRoot.querySelector(".ea-descriptions-item__label"));
+  }
+  connectedCallback() {
+    super.connectedCallback(), o(this, c, I).call(this);
+  }
+  $beforeUnmounted() {
+    i(this, g) && (i(this, g).disconnect(), h(this, g, 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 {
+  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] = {
+            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);
+    });
+    /**
+     * 获取 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",
+        {
+          part: "row",
+          style: [
+            t.align ? `--ea-descriptions-align: ${t.align};` : ""
+          ].join(" ")
+        },
+        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",
+        {
+          part: "row"
+        },
+        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);
+    });
+    /**
+     * 监听子元素变化
+     * @param {Event} e
+     */
+    r(this, D, (t) => {
+      t.stopImmediatePropagation(), o(this, f, E).call(this);
+    });
+    this.stylesheet = V, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "column",
+      "title",
+      "border",
+      "direction",
+      "size",
+      "label-width"
+    ];
+  }
+  /**
+   * 获取 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() {
+    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"));
+  }
+  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
+    });
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = i(this, w)) == null || t.abort();
+  }
+}
+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);
+export {
+  G as EaDescriptions,
+  F as EaDescriptionsItem
+};