easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-steps.js

@@ -0,0 +1,312 @@
+var x = Object.defineProperty;
+var g = (e) => {
+  throw TypeError(e);
+};
+var q = (e, s, t) => s in e ? x(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var S = (e, s, t) => q(e, typeof s != "symbol" ? s + "" : s, t), A = (e, s, t) => s.has(e) || g("Cannot " + t);
+var i = (e, s, t) => (A(e, s, "read from private field"), t ? t.call(e) : s.get(e)), a = (e, s, t) => s.has(e) ? g("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), c = (e, s, t, r) => (A(e, s, "write to private field"), r ? r.call(e, t) : s.set(e, t), t);
+import { B as _ } from "./Base.js";
+import { s as E } from "../css/ea-step.style.js";
+import { s as R } from "../css/ea-steps.style.js";
+var n, p, h, y, l, d, m, v;
+class $ extends _ {
+  constructor() {
+    super();
+    a(this, n);
+    /** @type {HTMLElement} */
+    a(this, h);
+    /** @type {HTMLElement} */
+    a(this, y);
+    /** @type {HTMLElement} */
+    a(this, l);
+    /** @type {HTMLElement} */
+    a(this, d);
+    /** @type {HTMLElement} */
+    a(this, m);
+    /** @type {AbortController} */
+    a(this, v, new AbortController());
+    S(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          i(this, d).textContent = t;
+        }
+      },
+      description: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          i(this, m).textContent = t;
+        }
+      },
+      icon: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          i(this, l).setAttribute("icon", t);
+        }
+      },
+      status: {
+        type: ["", "wait", "process", "finish", "error", "success"],
+        default: "",
+        observer: (t) => {
+          var r;
+          this.updateContainerClasslist(), !this.icon && (t === ((r = i(this, n, p)) == null ? void 0 : r.getAttribute("finish-status")) ? (i(this, l).setAttribute("icon", "icon-ok"), i(this, l).textContent = "") : (i(this, l).setAttribute("icon", ""), i(this, l).textContent = this.index + 1));
+        }
+      },
+      index: {
+        type: Number,
+        default: () => {
+          var r;
+          const t = (r = i(this, n, p)) == null ? void 0 : r.querySelectorAll("ea-step");
+          return t ? Array.from(t).indexOf(this) : 0;
+        },
+        observer: () => {
+        }
+      },
+      simple: {
+        type: Boolean,
+        default: () => {
+          var t;
+          return !!((t = i(this, n, p)) != null && t.hasAttribute("simple"));
+        },
+        observer: () => {
+        }
+      },
+      "align-center": {
+        type: Boolean,
+        default: () => {
+          var t;
+          return !!((t = i(this, n, p)) != null && t.hasAttribute("align-center"));
+        },
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      direction: {
+        type: ["vertical", "horizontal"],
+        default: () => {
+          var t;
+          return ((t = i(this, n, p)) == null ? void 0 : t.getAttribute("direction")) || "horizontal";
+        },
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    this.stylesheet = E, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "title",
+      "description",
+      "icon",
+      "status",
+      "index",
+      "active"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist(
+      "ea-step",
+      {
+        ["--" + this.direction]: this.direction
+      },
+      {
+        [this.status]: this.status,
+        "align-center": this["align-center"],
+        icon: this.icon,
+        simple: this.simple,
+        last: (() => {
+          var o;
+          const r = (o = i(this, n, p)) == null ? void 0 : o.querySelectorAll("ea-step");
+          return r ? r.length - 1 === this.index : !1;
+        })(),
+        first: this.index === 0
+      }
+    );
+    return i(this, h) && (i(this, h).className = t), t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-step' part='container'>
+        <section class="ea-step__head" part="head">
+          <div class="ea-step__icon-wrapper" part="icon-wrapper">
+            <slot name="icon">
+              <ea-icon class="ea-step__icon" part="icon"></ea-icon>
+            </slot>
+          </div>
+          <div class="ea-step__tail" part="tail"></div>
+        </section>
+        <section class="ea-step__main" part="main">
+          <div class="ea-step__title" part="title">
+            <slot name="title"></slot>
+          </div>
+          <div class="ea-step__description" part="description">
+            <slot name="description"></slot>
+          </div>
+        </section>
+        <span class="ea-step__simple-arrow" part="simple-arrow">
+          <slot name="simple-arrow"></slot>
+        </span>
+      </div>
+    `, c(this, h, this.shadowRoot.querySelector(".ea-step")), c(this, y, this.shadowRoot.querySelector('slot[name="icon"]')), c(this, l, this.shadowRoot.querySelector(".ea-step__icon")), c(this, d, this.shadowRoot.querySelector('slot[name="title"]')), c(this, m, this.shadowRoot.querySelector(
+      'slot[name="description"]'
+    )), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    i(this, v).abort();
+  }
+}
+n = new WeakSet(), p = function() {
+  try {
+    return this.closest("ea-steps");
+  } catch {
+    return null;
+  }
+}, h = new WeakMap(), y = new WeakMap(), l = new WeakMap(), d = new WeakMap(), m = new WeakMap(), v = new WeakMap();
+window.customElements.get("ea-step") || window.customElements.define("ea-step", $);
+var b, w, C;
+class B extends _ {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, b);
+    /** @type {AbortController} */
+    a(this, w, new AbortController());
+    S(this, "state", this.properties({
+      space: {
+        type: String,
+        default: "50%",
+        observer: (t) => {
+          this.style.setProperty("--ea-step-tail-spacing", t);
+        }
+      },
+      //   TODO: 没写😋
+      // direction: {
+      //   type: ["vertical", "horizontal"],
+      //   default: "horizontal",
+      //   observer: (newVal) => {
+      //     this.updateContainerClasslist();
+      //   },
+      // },
+      active: {
+        type: Number,
+        default: 0,
+        observer: (t) => {
+          i(this, C).call(this, t);
+        }
+      },
+      "process-status": {
+        type: ["wait", "process", "finish", "error", "success"],
+        default: "process",
+        observer: () => {
+        }
+      },
+      "finish-status": {
+        type: ["wait", "process", "finish", "error", "success"],
+        default: "finish",
+        observer: () => {
+        }
+      },
+      "align-center": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      simple: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          const r = [...this.querySelectorAll("ea-step")];
+          t ? r.forEach((o) => {
+            var u;
+            try {
+              (u = o.querySelector('[slot="simple-arrow"]')) == null || u.remove();
+            } catch {
+            }
+            try {
+              const f = document.createElement("ea-icon");
+              f.setAttribute("slot", "simple-arrow"), f.setAttribute("icon", "icon-angle-right"), f.part = "simple-arrow", o.appendChild(f);
+            } catch {
+            }
+          }) : r.forEach((o) => {
+            var u;
+            try {
+              (u = o.querySelector('[slot="simple-arrow"]')) == null || u.remove();
+            } catch {
+            }
+          }), this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 更新步骤状态
+     * @param {number} active
+     */
+    a(this, C, (t) => {
+      [...this.querySelectorAll("ea-step")].forEach((o) => {
+        o.index < t ? o.setAttribute("status", this["finish-status"]) : o.index > t ? o.setAttribute("status", "wait") : o.setAttribute("status", this["process-status"]);
+      });
+    });
+    this.stylesheet = R, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "space",
+      "direction",
+      "active",
+      "process-status",
+      "finish-status",
+      "align-center",
+      "simple"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist(
+      "ea-steps",
+      {
+        // ["--" + this.direction]: this.direction,
+      },
+      {
+        simple: this.simple,
+        "align-center": this["align-center"]
+      }
+    );
+    return i(this, b).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-steps' part='container'>
+        <slot></slot>
+      </div>
+    `, c(this, b, this.shadowRoot.querySelector(".ea-steps"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    i(this, w).abort();
+  }
+}
+b = new WeakMap(), w = new WeakMap(), C = new WeakMap();
+window.customElements.get("ea-steps") || window.customElements.define("ea-steps", B);
+export {
+  $ as EaStep,
+  B as EaSteps
+};

package/dist/components/ea-switch.js

@@ -0,0 +1,271 @@
+var y = Object.defineProperty;
+var m = (i) => {
+  throw TypeError(i);
+};
+var w = (i, a, t) => a in i ? y(i, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[a] = t;
+var p = (i, a, t) => w(i, typeof a != "symbol" ? a + "" : a, t), f = (i, a, t) => a.has(i) || m("Cannot " + t);
+var e = (i, a, t) => (f(i, a, "read from private field"), t ? t.call(i) : a.get(i)), l = (i, a, t) => a.has(i) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, t), h = (i, a, t, s) => (f(i, a, "write to private field"), s ? s.call(i, t) : a.set(i, t), t);
+import { F as S } from "../core/FormBase.js";
+import { s as C } from "../css/ea-switch.style.js";
+import { E as _ } from "../utils/Variables.js";
+var n, r, d, c, v, b, o, u, g;
+class N extends S {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    l(this, n);
+    /** @type {HTMLInputElement} */
+    l(this, r);
+    /** @type {HTMLElement} */
+    l(this, d);
+    /** @type {HTMLElement} */
+    l(this, c);
+    /** @type {HTMLElement} */
+    l(this, v);
+    /** @type {HTMLElement} */
+    l(this, b);
+    /** @type {AbortController} */
+    l(this, o);
+    /** @type {AbortController} */
+    l(this, u);
+    p(this, "state", this.properties({
+      label: {
+        type: String,
+        default: "",
+        observer: async (t) => {
+          e(this, b).textContent = t;
+        }
+      },
+      name: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, n).setAttribute("for", t), e(this, r).setAttribute("name", t), e(this, r).setAttribute("id", t);
+        }
+      },
+      value: {
+        type: {
+          Number: () => this.hasAttribute("active-value") && (this.getAttrNumber("active-value") || this.getAttrNumber("active-value") === 0 || this.getAttrNumber("inactive-value") || this.getAttrNumber("inactive-value") === 0),
+          String: () => this.hasAttribute("active-value") && (this.getAttrString("active-value") || this.getAttrString("active-value") === "" || this.getAttrString("inactive-value") || this.getAttrString("inactive-value") === ""),
+          Boolean: () => this.hasAttribute("active-value") || !this.hasAttribute("active-value") || this.hasAttribute("inactive-value") || !this.hasAttribute("inactive-value")
+        },
+        default: () => !1,
+        observer: (t) => {
+          const s = t === this["active-value"] ? this["active-value"] : this["inactive-value"];
+          e(this, r).value = s, e(this, r).toggleAttribute("checked", s), this.setValue(s), this.updateContainerClasslist();
+        }
+      },
+      "active-value": {
+        type: {
+          Number: () => this.hasAttribute("active-value") && (this.getAttrNumber("active-value") || this.getAttrNumber("active-value") === 0),
+          String: () => this.hasAttribute("active-value") && (this.getAttrString("active-value") || this.getAttrString("active-value") === ""),
+          Boolean: () => this.hasAttribute("active-value") || !this.hasAttribute("active-value")
+        },
+        default: !0,
+        observer: () => {
+        }
+      },
+      "inactive-value": {
+        type: {
+          Number: () => this.hasAttribute("inactive-value") && (this.getAttrNumber("inactive-value") || this.getAttrNumber("inactive-value") === 0),
+          String: () => this.hasAttribute("inactive-value") && (this.getAttrString("inactive-value") || this.getAttrString("inactive-value") === ""),
+          Boolean: () => this.hasAttribute("inactive-value") || !this.hasAttribute("inactive-value")
+        },
+        default: () => !1,
+        observer: () => {
+        }
+      },
+      size: {
+        type: _,
+        default: "default",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      "inactive-text": {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, v).innerText = t;
+        }
+      },
+      "inactive-color": {
+        type: String,
+        default: "",
+        observer: (t) => {
+          this.style.setProperty("--ea-switch-inactive-bg-color", t);
+        }
+      },
+      "active-text": {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, c).innerText = t;
+        }
+      },
+      "active-color": {
+        type: String,
+        default: "",
+        observer: (t) => {
+          this.style.setProperty("--ea-switch-active-bg-color", t);
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          e(this, r).toggleAttribute("disabled", t), this.updateContainerClasslist();
+        }
+      },
+      required: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          e(this, r).toggleAttribute("required", t);
+        }
+      }
+    }));
+    p(this, "funcState", this.properties({
+      beforeChange: {
+        props: !0,
+        type: Function,
+        default: null,
+        /**
+         * @param {() => Promise} cb
+         */
+        observer: (t) => {
+          var s;
+          (s = e(this, u)) == null || s.abort(), h(this, u, new AbortController()), e(this, r).addEventListener(
+            "click",
+            async (A) => {
+              A.preventDefault(), A.stopImmediatePropagation(), t && t().then(() => {
+                e(this, r).checked = !this.value, e(this, r).dispatchEvent(new CustomEvent("change"));
+              }).catch(() => {
+              });
+            },
+            { signal: e(this, u).signal }
+          );
+        }
+      }
+    }));
+    /**
+     * 改变事件
+     * @param {Event} e
+     */
+    l(this, g, (t) => {
+      t.preventDefault(), t.stopPropagation();
+      const s = t.target.checked ? this["active-value"] : this["inactive-value"];
+      this.setAttribute("value", s), this.emit("change", {
+        detail: { value: s },
+        bubbles: !0
+      });
+    });
+    this.stylesheet = C, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "name",
+      "value",
+      "active-value",
+      "inactive-value",
+      "label",
+      "size",
+      "inactive-text",
+      "inactive-color",
+      "active-text",
+      "active-color",
+      "disabled",
+      "required"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist(
+      "ea-switch",
+      {
+        [`--${this.size}`]: this.size
+      },
+      {
+        checked: this.value === this["active-value"],
+        disabled: this.disabled || this.loading,
+        loading: this.loading
+      }
+    );
+    return e(this, n).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <label class="ea-switch-wrapper" part="wrapper">
+        <span class="ea-switch__form-label" part="label form-label"></span>
+        <section class="ea-switch" part="container">
+          <input class="ea-switch__original" type="checkbox" part="original" />
+          <span class="ea-switch__label label-left" part="label-left">
+            <slot name="inactive"></slot>
+          </span>
+          <span class="ea-switch__inner" part="switch"></span>
+          <span class="ea-switch__label label-right" part="label-right">
+            <slot name="active"></slot>
+          </span>
+        </section>
+      </label>
+    `, h(this, b, this.shadowRoot.querySelector(".ea-switch__form-label")), h(this, n, this.shadowRoot.querySelector(".ea-switch")), h(this, r, this.shadowRoot.querySelector(".ea-switch__original")), h(this, d, this.shadowRoot.querySelector(".ea-switch__inner")), h(this, v, this.shadowRoot.querySelector(
+      ".ea-switch__label.label-left > slot[name='inactive']"
+    )), h(this, c, this.shadowRoot.querySelector(
+      ".ea-switch__label.label-right slot[name='active']"
+    )), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), (t = e(this, o)) == null || t.abort(), h(this, o, new AbortController()), this.name || this.setAttribute("name", Math.random().toString(36).substring(2, 15)), this.setValue(
+      e(this, r).checked ? this["active-value"] : this["inactive-value"]
+    ), e(this, r).addEventListener("change", e(this, g), {
+      signal: e(this, o).signal
+    });
+  }
+  $unmounted() {
+    var t, s;
+    (t = e(this, o)) == null || t.abort(), (s = e(this, u)) == null || s.abort();
+  }
+  /**
+   * 获取验证目标元素
+   * @returns {HTMLElement}
+   */
+  get validationTarget() {
+    return e(this, n);
+  }
+  /**
+   * 更新表单验证状态
+   * switch 的验证逻辑：当 required 为 true 时，必须处于选中状态（value 等于 active-value）
+   */
+  updateValidity() {
+    const t = this.value === this["active-value"];
+    this.required && !t ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "请开启此选项",
+      e(this, n)
+    ) : this.internals.setValidity({}, "", e(this, n));
+  }
+  /**
+   * 检查表单字段的有效性
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.updateValidity(), this.internals.validity.valid;
+  }
+  /**
+   * 报告表单字段的有效性（显示验证提示）
+   * @returns {boolean}
+   */
+  reportValidity() {
+    return this.internals.reportValidity();
+  }
+}
+n = new WeakMap(), r = new WeakMap(), d = new WeakMap(), c = new WeakMap(), v = new WeakMap(), b = new WeakMap(), o = new WeakMap(), u = new WeakMap(), g = new WeakMap();
+window.customElements.get("ea-switch") || window.customElements.define("ea-switch", N);
+export {
+  N as EaSwitch
+};