easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-switch.js

@@ -1,271 +1,275 @@
-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 { E as b } from "../core/EaFormAssociatedBase.ts.js";
+import { c as g } from "../utils/bem.ts.js";
+import { q as h, a as l, l as d, C as _, p as v } from "../core/decorator.js";
+import { E as y } from "../utils/Enum.ts.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 {
+class p extends Event {
+  constructor(s) {
+    super("change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = s;
+  }
+}
+var V = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (e, s, a, n) => {
+  for (var o = n > 1 ? void 0 : n ? m(s, a) : s, u = e.length - 1, c; u >= 0; u--)
+    (c = e[u]) && (o = (n ? c(s, a, o) : c(o)) || o);
+  return n && o && V(s, a, o), o;
+};
+const f = "ea-switch", r = g(f);
+let t = class extends b {
   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();
+    super(...arguments), this._parsedActiveValue = !0, this._parsedInactiveValue = !1, this.label = "", this.name = "", this.value = !1, this.activeValue = !0, this.inactiveValue = !1, this.size = "default", this.inactiveText = "", this.inactiveColor = "", this.activeText = "", this.activeColor = "", this.disabled = !1, this.required = !1, this.beforeChange = null;
+  }
+  /** 解析属性值为实际类型 */
+  _parseValue(e) {
+    return e === "true" || e === !0 ? !0 : e === "false" || e === !1 ? !1 : typeof e == "number" ? e : typeof e == "string" && e !== "" && !isNaN(Number(e)) ? Number(e) : typeof e == "string" ? e : !1;
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "name",
-      "value",
-      "active-value",
-      "inactive-value",
-      "label",
-      "size",
-      "inactive-text",
-      "inactive-color",
-      "active-text",
-      "active-color",
-      "disabled",
-      "required"
-    ];
+  /** 处理 value 属性变化，同步原生 input 状态和表单值 */
+  _handleValueChange(e) {
+    const a = this._parseValue(e) == this._parsedActiveValue ? this._parsedActiveValue : this._parsedInactiveValue;
+    this._originalInput && (this._originalInput.value = String(a), this._originalInput.checked = a === this._parsedActiveValue), this.setValue(String(a)), this.updateContainerClasslist(), this._syncAriaChecked();
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-switch",
+    const e = r(
+      { [this.size]: !0 },
       {
-        [`--${this.size}`]: this.size
-      },
-      {
-        checked: this.value === this["active-value"],
-        disabled: this.disabled || this.loading,
-        loading: this.loading
+        checked: this._parseValue(this.value) === this._parsedActiveValue,
+        disabled: this.disabled
       }
     );
-    return e(this, n).className = t, t;
+    return this._container && (this._container.className = e), e;
   }
-  $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">
+  html() {
+    const e = this.getAttribute("name") || Math.random().toString(36).substring(2, 15), s = this._parseValue(this.value) === this._parsedActiveValue;
+    return `
+      <label class="${this.updateContainerClasslist()}" part="wrapper" for="${e}">
+        <span class="${r.e("form-label")}" part="label form-label">${this.label}</span>
+        <span class="${r.e("content")}" part="container">
+          <input id="${e}" type="checkbox" class="${r.e("original")}" part="original"
+            name="${e}"
+            ${s ? "checked" : ""}
+            ${this.disabled ? "disabled" : ""}
+            ${this.required ? "required" : ""} />
+          <span class="${r.e("label-left")}" part="label-left" aria-hidden="true">
             <slot name="inactive"></slot>
           </span>
-          <span class="ea-switch__inner" part="switch"></span>
-          <span class="ea-switch__label label-right" part="label-right">
+          <span class="${r.e("inner")}" part="switch"></span>
+          <span class="${r.e("label-right")}" part="label-right" aria-hidden="true">
             <slot name="active"></slot>
           </span>
-        </section>
+        </span>
       </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
-    });
+  _handleChangeEvent(e) {
+    e.stopPropagation();
+    const a = e.target.checked ? this._parsedActiveValue : this._parsedInactiveValue;
+    this.value = String(a), this.dispatchEvent(new p({ value: a }));
+  }
+  _handleClickEvent(e) {
+    !this.beforeChange || typeof this.beforeChange != "function" || (e.preventDefault(), e.stopImmediatePropagation(), this.beforeChange().then(() => {
+      this._originalInput.checked = !this._originalInput.checked;
+      const a = this._originalInput.checked ? this._parsedActiveValue : this._parsedInactiveValue;
+      this.value = String(a), this.dispatchEvent(new p({ value: a }));
+    }).catch(() => {
+    }));
   }
-  $unmounted() {
-    var t, s;
-    (t = e(this, o)) == null || t.abort(), (s = e(this, u)) == null || s.abort();
+  _handleKeydown(e) {
+    if (this.disabled || e.key !== " " && e.key !== "Enter") return;
+    e.preventDefault();
+    const a = this._parseValue(this.value) === this._parsedActiveValue ? this._parsedInactiveValue : this._parsedActiveValue;
+    this.beforeChange && typeof this.beforeChange == "function" ? this.beforeChange().then(() => {
+      this.value = String(a), this.dispatchEvent(new p({ value: a }));
+    }).catch(() => {
+    }) : (this.value = String(a), this.dispatchEvent(new p({ value: a })));
+  }
+  formResetCallback() {
+    this.value = !1, this.setValidity({});
+  }
+  $mount() {
+    this.setAttribute("role", "switch"), this.tabIndex = 0, this.name || this.setAttribute("name", Math.random().toString(36).substring(2, 15)), this._handleValueChange(this.value), this._syncAriaChecked();
+  }
+  /** 同步 aria-checked 状态 */
+  _syncAriaChecked() {
+    const e = this._parseValue(this.value) === this._parsedActiveValue;
+    this.setAttribute("aria-checked", String(e));
+  }
+  $updated() {
+    this.updateContainerClasslist();
   }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
   get validationTarget() {
-    return e(this, n);
+    return this._container;
   }
-  /**
-   * 更新表单验证状态
-   * switch 的验证逻辑：当 required 为 true 时，必须处于选中状态（value 等于 active-value）
-   */
+  /** 更新表单验证状态，required 时必须选中 */
   updateValidity() {
-    const t = this.value === this["active-value"];
-    this.required && !t ? this.internals.setValidity(
+    var a, n;
+    const e = this._container ?? void 0, s = this._parseValue(this.value) === this._parsedActiveValue;
+    this.required && !s ? (a = this.internals) == null || a.setValidity(
       { valueMissing: !0 },
       "请开启此选项",
-      e(this, n)
-    ) : this.internals.setValidity({}, "", e(this, n));
+      e
+    ) : (n = this.internals) == null || n.setValidity({}, "", e);
   }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
   checkValidity() {
-    return this.updateValidity(), this.internals.validity.valid;
+    var e, s;
+    return this.updateValidity(), ((s = (e = this.internals) == null ? void 0 : e.validity) == null ? void 0 : s.valid) ?? !0;
   }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
   reportValidity() {
-    return this.internals.reportValidity();
+    var e;
+    return this.updateValidity(), ((e = this.internals) == null ? void 0 : e.reportValidity()) ?? !0;
   }
-}
-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);
+};
+i([
+  h(r.cb())
+], t.prototype, "_container", 2);
+i([
+  h(r.ce("original"))
+], t.prototype, "_originalInput", 2);
+i([
+  h(r.ce("label-left"))
+], t.prototype, "_labelLeftSlot", 2);
+i([
+  h(r.ce("label-right"))
+], t.prototype, "_labelRightSlot", 2);
+i([
+  h(r.ce("form-label"))
+], t.prototype, "_label", 2);
+i([
+  l({
+    type: String,
+    default: "",
+    observer(e) {
+      this._label && (this._label.textContent = e);
+    }
+  })
+], t.prototype, "label", 2);
+i([
+  l({
+    type: String,
+    default: "",
+    observer(e) {
+      this._container && this._container.setAttribute("for", e), this._originalInput && (this._originalInput.setAttribute("name", e), this._originalInput.setAttribute("id", e));
+    }
+  })
+], t.prototype, "name", 2);
+i([
+  l({
+    type: {
+      Number: (e) => {
+        const s = Number(e);
+        return !isNaN(s) && e !== "";
+      },
+      Boolean: (e) => e === "true" || e === !0 || e === "false" || e === !1 || e === "",
+      String: (e) => typeof e == "string"
+    },
+    default: !1,
+    observer(e) {
+      this._handleValueChange(e);
+    }
+  })
+], t.prototype, "value", 2);
+i([
+  l({
+    type: String,
+    default: "true",
+    observer(e) {
+      this._parsedActiveValue = this._parseValue(e), this._handleValueChange(this.value);
+    }
+  })
+], t.prototype, "activeValue", 2);
+i([
+  l({
+    type: String,
+    default: "false",
+    observer(e) {
+      this._parsedInactiveValue = this._parseValue(e), this._handleValueChange(this.value);
+    }
+  })
+], t.prototype, "inactiveValue", 2);
+i([
+  l({
+    type: y(["large", "default", "small"]),
+    default: "default",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "size", 2);
+i([
+  l({
+    type: String,
+    default: "",
+    observer(e) {
+      this._labelLeftSlot && (this._labelLeftSlot.textContent = e);
+    }
+  })
+], t.prototype, "inactiveText", 2);
+i([
+  l({
+    type: String,
+    default: "",
+    observer(e) {
+      this.style.setProperty("--ea-switch-inactive-bg-color", e);
+    }
+  })
+], t.prototype, "inactiveColor", 2);
+i([
+  l({
+    type: String,
+    default: "",
+    observer(e) {
+      this._labelRightSlot && (this._labelRightSlot.textContent = e);
+    }
+  })
+], t.prototype, "activeText", 2);
+i([
+  l({
+    type: String,
+    default: "",
+    observer(e) {
+      this.style.setProperty("--ea-switch-active-bg-color", e);
+    }
+  })
+], t.prototype, "activeColor", 2);
+i([
+  l({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-disabled", map: (e) => String(e) },
+    observer(e) {
+      this._originalInput && this._originalInput.toggleAttribute("disabled", e), this.updateContainerClasslist();
+    }
+  })
+], t.prototype, "disabled", 2);
+i([
+  l({
+    type: Boolean,
+    default: !1,
+    observer(e) {
+      this._originalInput && this._originalInput.toggleAttribute("required", e);
+    }
+  })
+], t.prototype, "required", 2);
+i([
+  v({
+    type: Function,
+    default: null
+  })
+], t.prototype, "beforeChange", 2);
+i([
+  d("change", r.ce("original"))
+], t.prototype, "_handleChangeEvent", 1);
+i([
+  d("click", r.ce("original"))
+], t.prototype, "_handleClickEvent", 1);
+i([
+  d("keydown")
+], t.prototype, "_handleKeydown", 1);
+t = i([
+  _(f, { styles: [C] })
+], t);
 export {
-  N as EaSwitch
+  t as EaSwitch
 };