easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-steps.js

@@ -0,0 +1,346 @@
+var $ = Object.defineProperty;
+var q = (s) => {
+  throw TypeError(s);
+};
+var B = (s, i, t) => i in s ? $(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var x = (s, i, t) => B(s, typeof i != "symbol" ? i + "" : i, t), E = (s, i, t) => i.has(s) || q("Cannot " + t);
+var e = (s, i, t) => (E(s, i, "read from private field"), t ? t.call(s) : i.get(s)), o = (s, i, t) => i.has(s) ? q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), n = (s, i, t, r) => (E(s, i, "write to private field"), r ? r.call(s, t) : i.set(s, t), t);
+import { B as R } from "./Base.js";
+import { s as N } from "../css/ea-step.style.js";
+import { s as k } from "../css/ea-steps.style.js";
+var l, p, u, C, c, m, b, S, A;
+class I extends R {
+  constructor() {
+    super();
+    o(this, l);
+    /** @type {HTMLElement} */
+    o(this, u);
+    /** @type {HTMLElement} */
+    o(this, C);
+    /** @type {HTMLElement} */
+    o(this, c);
+    /** @type {HTMLElement} */
+    o(this, m);
+    /** @type {HTMLElement} */
+    o(this, b);
+    /** @type {AbortController} */
+    o(this, S, new AbortController());
+    x(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, m).textContent = t;
+        }
+      },
+      description: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, b).textContent = t;
+        }
+      },
+      icon: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          e(this, c).setAttribute("name", t);
+        }
+      },
+      status: {
+        type: ["", "wait", "process", "finish", "error", "success"],
+        default: "",
+        observer: (t) => {
+          this.updateContainerClasslist(), !this.icon && e(this, A).call(this, t);
+        }
+      },
+      index: {
+        type: Number,
+        default: () => {
+          var r;
+          const t = (r = e(this, l, 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 = e(this, l, p)) != null && t.hasAttribute("simple"));
+        },
+        observer: () => {
+        }
+      },
+      "align-center": {
+        type: Boolean,
+        default: () => {
+          var t;
+          return !!((t = e(this, l, p)) != null && t.hasAttribute("align-center"));
+        },
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      direction: {
+        type: ["vertical", "horizontal"],
+        default: () => {
+          var t;
+          return ((t = e(this, l, p)) == null ? void 0 : t.getAttribute("direction")) || "horizontal";
+        },
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 更新步骤状态
+     * @param {string} status 活动步骤状态
+     */
+    o(this, A, (t = this.status) => {
+      var r;
+      t === ((r = e(this, l, p)) == null ? void 0 : r.getAttribute("finish-status")) ? (e(this, c).setAttribute("name", "check"), e(this, c).textContent = "") : (e(this, c).setAttribute("name", ""), e(this, c).textContent = this.index + 1);
+    });
+    this.stylesheet = N, 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 a;
+          const r = (a = e(this, l, p)) == null ? void 0 : a.querySelectorAll("ea-step");
+          return r ? r.length - 1 === this.index : !1;
+        })(),
+        first: this.index === 0
+      }
+    );
+    return e(this, u) && (e(this, u).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>
+    `, n(this, u, this.shadowRoot.querySelector(".ea-step")), n(this, C, this.shadowRoot.querySelector('slot[name="icon"]')), n(this, c, this.shadowRoot.querySelector(".ea-step__icon")), n(this, m, this.shadowRoot.querySelector('slot[name="title"]')), n(this, b, this.shadowRoot.querySelector(
+      'slot[name="description"]'
+    )), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    e(this, S).abort();
+  }
+}
+l = new WeakSet(), p = function() {
+  try {
+    return this.closest("ea-steps");
+  } catch {
+    return null;
+  }
+}, u = new WeakMap(), C = new WeakMap(), c = new WeakMap(), m = new WeakMap(), b = new WeakMap(), S = new WeakMap(), A = new WeakMap();
+window.customElements.get("ea-step") || window.customElements.define("ea-step", I);
+var f, y, h, v, w, _;
+class L extends R {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, f);
+    /** @type {HTMLSlotElement} */
+    o(this, y);
+    /** @type {AbortController} */
+    o(this, h, new AbortController());
+    x(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) => {
+          e(this, v).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) => {
+          e(this, w).call(this, t), this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 更新步骤状态
+     * @param {number} active
+     */
+    o(this, v, (t) => {
+      [...this.querySelectorAll("ea-step")].forEach((a) => {
+        a.index < t ? a.setAttribute("status", this["finish-status"]) : a.index > t ? a.setAttribute("status", "wait") : a.setAttribute("status", this["process-status"]);
+      });
+    });
+    /**
+     * 更新简单步骤状态
+     * @param {boolean} isSimple
+     */
+    o(this, w, (t = this.simple) => {
+      const r = [...this.querySelectorAll("ea-step")];
+      t ? r.forEach((a) => {
+        var d;
+        try {
+          (d = a.querySelector('[slot="simple-arrow"]')) == null || d.remove();
+        } catch {
+        }
+        try {
+          const g = document.createElement("ea-icon");
+          g.setAttribute("slot", "simple-arrow"), g.setAttribute("name", "angle-right"), g.part = "simple-arrow", a.appendChild(g);
+        } catch {
+        }
+      }) : r.forEach((a) => {
+        var d;
+        try {
+          (d = a.querySelector('[slot="simple-arrow"]')) == null || d.remove();
+        } catch {
+        }
+      });
+    });
+    /**
+     * 处理 slot 变化
+     * 更新所有子 ea-step 组件的 index、first、last 状态和 status
+     */
+    o(this, _, () => {
+      const t = [...this.querySelectorAll("ea-step")];
+      t.forEach((r, a) => {
+        r.index = a, r.toggleAttribute("first", a === 0), r.toggleAttribute("last", a === t.length - 1);
+      }), e(this, v).call(this, this.active), e(this, w).call(this);
+    });
+    this.stylesheet = k, 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 e(this, f).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-steps' part='container'>
+        <slot></slot>
+      </div>
+    `, n(this, f, this.shadowRoot.querySelector(".ea-steps")), n(this, y, this.shadowRoot.querySelector("slot"));
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), (t = e(this, h)) == null || t.abort(), n(this, h, new AbortController()), e(this, y).addEventListener(
+      "slotchange",
+      () => {
+        e(this, _).call(this);
+      },
+      { signal: e(this, h).signal }
+    );
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = e(this, h)) == null || t.abort();
+  }
+}
+f = new WeakMap(), y = new WeakMap(), h = new WeakMap(), v = new WeakMap(), w = new WeakMap(), _ = new WeakMap();
+window.customElements.get("ea-steps") || window.customElements.define("ea-steps", L);
+export {
+  I as EaStep,
+  L 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
+};