easy-component-ui 3.0.13 → 3.0.14

package/dist/components/ea-descriptions.js

@@ -1,474 +0,0 @@
-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
-};