easy-component-ui 2.1.1 → 3.0.1

package/dist/components/ea-descriptions.js

@@ -0,0 +1,411 @@
+var z = Object.defineProperty;
+var x = (l) => {
+  throw TypeError(l);
+};
+var A = (l, s, t) => s in l ? z(l, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[s] = t;
+var S = (l, s, t) => A(l, typeof s != "symbol" ? s + "" : s, t), R = (l, s, t) => s.has(l) || x("Cannot " + t);
+var d = (l, s, t) => (R(l, s, "read from private field"), t ? t.call(l) : s.get(l)), c = (l, s, t) => s.has(l) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(l) : s.set(l, t), b = (l, s, t, e) => (R(l, s, "write to private field"), e ? e.call(l, t) : s.set(l, t), t);
+import { B as q } from "./Base.js";
+import { s as L } from "../css/ea-descriptions-item.style.js";
+import { s as N } from "../css/ea-descriptions.style.js";
+import { E as i } from "../utils/Utils.js";
+class k extends q {
+  constructor() {
+    super();
+    S(this, "state", this.properties({
+      label: {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      colspan: {
+        type: Number,
+        default: 1,
+        observer: () => {
+        }
+      },
+      rowspan: {
+        type: Number,
+        default: 1,
+        observer: () => {
+        }
+      },
+      align: {
+        type: ["left", "center", "right"],
+        default: "",
+        observer: () => {
+        }
+      },
+      "label-align": {
+        type: ["left", "center", "right"],
+        default: "",
+        observer: () => {
+        }
+      },
+      width: {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      "label-width": {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      "label-part": {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      "content-part": {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      }
+    }));
+    this.stylesheet = L, 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'>
+        <slot></slot>
+      </div>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.emit("ea-descriptions-item-ready", {
+      bubbles: !0,
+      composed: !0
+    });
+  }
+}
+window.customElements.get("ea-descriptions-item") || window.customElements.define("ea-descriptions-item", k);
+var w, f, y, E, _, v, $, C;
+class H extends q {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    c(this, w);
+    /** @type {HTMLElement} */
+    c(this, f);
+    /** @type {HTMLElement} */
+    c(this, y);
+    /** @type {HTMLElement} */
+    c(this, E);
+    /** @type {HTMLElement} */
+    c(this, _);
+    S(this, "state", this.properties({
+      column: {
+        type: Number,
+        default: 3,
+        observer: () => {
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          d(this, y).textContent = t;
+        }
+      },
+      border: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      direction: {
+        type: ["horizontal", "vertical"],
+        default: "horizontal",
+        observer: () => {
+        }
+      },
+      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>>} 分割后的二维数组
+     */
+    c(this, v, (t, e) => {
+      const a = [];
+      return t.forEach((n) => {
+        var j;
+        const r = a.length, u = e % ((j = a[r]) == null ? void 0 : j.length) || 0, p = {
+          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 o = r; o < r + p.rowspan; o++) {
+          a[o] || (a[o] = []), p.rowspan > 1 && o !== r && (a[o][u] = {
+            colspan: 1,
+            rowspan: 1,
+            placeholder: !0
+          });
+          for (let h = u; h < u + p.colspan; h++)
+            p.colspan > 1 && h !== u && (a[o][h] = {
+              colspan: 1,
+              rowspan: 1,
+              placeholder: !0
+            });
+        }
+        let g = a.findIndex((o) => o.length < e);
+        g = g === -1 ? r : g, a[r].reduce((o, h) => o + h.colspan, 0) + p.colspan <= e ? a[g].push(p) : a[g][u] = p;
+      }), a.map((n) => n.filter((r) => !r.placeholder)).filter((n) => n.length);
+    });
+    /**
+     * 获取 Descriptions 组件的样式类型
+     * @return {string} 变体名称
+     */
+    c(this, $, () => this.direction === "vertical" ? "vertical" : this.border ? "border" : "normal");
+    /**
+     * Descriptions 组件的样式类型渲染器
+     */
+    c(this, C, {
+      normal: (t) => i.EaElement.h(
+        "tr",
+        "ea-descriptions__tr",
+        {
+          part: "row",
+          style: [
+            t.align ? `--ea-descriptions-align: ${t.align};` : ""
+          ].join(" ")
+        },
+        t.map(
+          (e, a) => i.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, r) => n + r.colspan, 0) < this.column ? this.column - t.reduce((n, r) => n + r.colspan, 0) + (a < 1 ? 1 : a) : e.colspan,
+              style: [
+                e.width ? `--ea-descriptions-item-width: ${e.width}` : ""
+              ]
+            },
+            [
+              i.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
+              ),
+              i.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) => i.EaElement.h(
+        "tr",
+        "ea-descriptions__tr",
+        {
+          part: "row"
+        },
+        t.map(
+          (e, a) => [
+            i.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
+            ),
+            i.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) => [
+        i.EaElement.h(
+          "tr",
+          "ea-descriptions__tr",
+          {
+            part: "row row-label"
+          },
+          t.map(
+            (e, a) => i.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
+            )
+          )
+        ),
+        i.EaElement.h(
+          "tr",
+          "ea-descriptions__tr",
+          {
+            part: "row row-content"
+          },
+          t.map(
+            (e, a) => i.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("")
+    });
+    this.stylesheet = N, 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 d(this, w).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <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>
+    `, b(this, w, this.shadowRoot.querySelector(".ea-descriptions")), b(this, f, this.shadowRoot.querySelector(".ea-descriptions__caption")), b(this, y, this.shadowRoot.querySelector(".ea-descriptions__title")), b(this, E, this.shadowRoot.querySelector(".ea-descriptions__extra")), b(this, _, this.shadowRoot.querySelector(".ea-descriptions__body"));
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    const t = [...this.querySelectorAll("ea-descriptions-item")];
+    await Promise.all([
+      t.map(
+        (e) => i.EaElement.addAsyncEventListener(
+          e,
+          "ea-descriptions-item-ready"
+        )
+      )
+    ]), d(this, _).innerHTML = d(this, v).call(this, t, this.column).map(d(this, C)[d(this, $).call(this)]).join("");
+  }
+}
+w = new WeakMap(), f = new WeakMap(), y = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), v = new WeakMap(), $ = new WeakMap(), C = new WeakMap();
+window.customElements.get("ea-descriptions") || window.customElements.define("ea-descriptions", H);
+export {
+  H as EaDescriptions,
+  k as EaDescriptionsItem
+};

package/dist/components/ea-dialog.js

@@ -0,0 +1,249 @@
+var _ = Object.defineProperty;
+var v = (t) => {
+  throw TypeError(t);
+};
+var S = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var u = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || v("Cannot " + e);
+var o = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), a = (t, s, e) => s.has(t) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), l = (t, s, e, d) => (w(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
+import { EaOverlay as E } from "./ea-overlay.js";
+import { s as B } from "../css/ea-dialog.style.js";
+import { t as C } from "../utils/timeout.js";
+var n, h, c, p, r, i, b, f, g;
+class A extends E {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, n);
+    /** @type {HTMLElement} */
+    a(this, h);
+    /** @type {HTMLElement} */
+    a(this, c);
+    /** @type {HTMLElement} */
+    a(this, p);
+    /** @type {HTMLElement} */
+    a(this, r);
+    /** @type {AbortController} */
+    a(this, i);
+    u(this, "state", this.properties({
+      visible: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          if (!e && this["before-close"] && this.status !== this.visible)
+            return o(this, f).call(this);
+          e ? C(() => {
+            this.focus();
+          }, 0) : C(() => {
+            this.blur();
+          }, 0), this.status = e;
+        }
+      },
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          o(this, p) && (o(this, p).textContent = e);
+        }
+      },
+      width: {
+        type: String,
+        default: "50%",
+        observer: (e) => {
+          this.style.setProperty("--ea-overlay-content-width", e);
+        }
+      },
+      top: {
+        type: String,
+        default: "50%",
+        observer: (e) => {
+          this.style.setProperty("--ea-overlay-content-top", e);
+        }
+      },
+      center: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          o(this, n).className = this.updateContainerClasslist();
+        }
+      },
+      fullscreen: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          o(this, n).className = this.updateContainerClasslist();
+        }
+      },
+      "append-to-body": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      "append-to": {
+        type: String,
+        default: "body",
+        observer: () => {
+        }
+      },
+      "show-close": {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          o(this, r).style.display = e ? "block" : "none";
+        }
+      },
+      "modal-penetrable": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      draggable: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          o(this, n).className = this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 通过 append-to 属性，将组件插入到指定元素中
+     */
+    a(this, b, () => {
+      this.getAttrString("append-to") && this["append-to"] ? document.querySelector(this["append-to"]).appendChild(this) : this["append-to-body"] && document.body.appendChild(this);
+    });
+    /**
+     * 重置 dialog 位置
+     */
+    u(this, "resetPosition", () => {
+      o(this, h).style.left = "var(--ea-overlay-content-left)", o(this, h).style.top = "var(--ea-overlay-content-top)";
+    });
+    /**
+     * 打开 dialog
+     */
+    u(this, "show", () => {
+      this.visible = !0;
+    });
+    /**
+     * 关闭 dialog
+     */
+    u(this, "hide", () => {
+      this.visible = !1;
+    });
+    /**
+     * 触发 before-close 事件
+     */
+    a(this, f, () => {
+      this["before-close"] ? this.emit("before-close", {
+        detail: {
+          done: () => this.status = !1
+        }
+      }) : this.status = !1;
+    });
+    a(this, g, (e) => {
+      if (!o(this, c).contains(e.target) || o(this, c) !== e.target)
+        return;
+      const d = new AbortController(), m = this.shadowRoot.querySelector(
+        ".ea-overlay__content"
+      );
+      window.addEventListener(
+        "mousemove",
+        (y) => {
+          m.style.left = y.clientX + "px", m.style.top = y.clientY + "px";
+        },
+        {
+          signal: d.signal
+        }
+      ), window.addEventListener(
+        "mouseup",
+        () => {
+          d.abort();
+        },
+        { signal: d.signal }
+      );
+    });
+    const e = this.shadowRoot.querySelector(".ea-overlay__content");
+    e.innerHTML = `
+      <div class='ea-dialog-main' part='container'>
+        <header class='ea-dialog-main__header' part='header'>
+          <slot name="header">
+            <span class='ea-dialog-main__title' part='title'></span>
+            <ea-icon class='ea-dialog-main__close-icon' icon='icon-cancel' part='close-icon'></ea-icon>          
+          </slot>
+        </header>
+        <main class='ea-dialog-main__content' part='content'>
+            <slot></slot>
+        </main>
+        <footer class='ea-dialog-main__footer' part='footer'>
+            <slot name='footer'></slot>
+        </footer>
+      </div>
+    `, l(this, n, this.shadowRoot.querySelector(".ea-overlay")), l(this, h, e), l(this, c, this.shadowRoot.querySelector(".ea-dialog-main__header")), l(this, p, this.shadowRoot.querySelector(".ea-dialog-main__title")), l(this, r, this.shadowRoot.querySelector(
+      ".ea-dialog-main__close-icon"
+    )), o(this, b).call(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "visible",
+      "title",
+      "width",
+      "fullscreen",
+      "top",
+      "modal",
+      "center",
+      "append-to-body",
+      "append-to",
+      //   "lock-scroll",
+      //   "open-delay",
+      //   "close-delay",
+      "close-on-click-modal",
+      "close-on-press-escape",
+      "show-close",
+      "close-icon",
+      "before-close",
+      //   "destroy-on-close",
+      "z-index",
+      "modal-penetrable",
+      "draggable"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return `${super.updateContainerClasslist()} ${this.computedClasslist(
+      "ea-dialog",
+      {
+        "--center": this.center,
+        "--draggable": this.draggable,
+        "--fullscreen": this.fullscreen
+      },
+      {
+        dialog: !0,
+        "modal-penetrable": this["modal-penetrable"] && !this.modal
+      }
+    )}`;
+  }
+  connectedCallback() {
+    l(this, i, new AbortController()), this["close-on-click-modal"] = this.getAttrBoolean(
+      "close-on-click-modal",
+      !0
+    ), this.setAttribute("role", "dialog"), super.connectedCallback(), this.assignedStyle(B), this.addEventListener("closed", this.hide, {
+      signal: o(this, i).signal
+    }), this["show-close"] && o(this, r) && o(this, r).addEventListener("click", o(this, f), {
+      signal: o(this, i).signal
+    }), this.draggable && !this.fullscreen && this.shadowRoot.addEventListener("mousedown", o(this, g), {
+      signal: o(this, i).signal
+    });
+  }
+  $beforeUnmounted() {
+    o(this, i).abort();
+  }
+}
+n = new WeakMap(), h = new WeakMap(), c = new WeakMap(), p = new WeakMap(), r = new WeakMap(), i = new WeakMap(), b = new WeakMap(), f = new WeakMap(), g = new WeakMap();
+window.customElements.get("ea-dialog") || window.customElements.define("ea-dialog", A);
+export {
+  A as EaDialog
+};