easy-component-ui 2.1.1 → 3.0.0

package/dist/components/ea-checkbox.js

@@ -0,0 +1,446 @@
+var N = Object.defineProperty;
+var z = (s) => {
+  throw TypeError(s);
+};
+var T = (s, i, e) => i in s ? N(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
+var B = (s, i, e) => T(s, typeof i != "symbol" ? i + "" : i, e), R = (s, i, e) => i.has(s) || z("Cannot " + e);
+var t = (s, i, e) => (R(s, i, "read from private field"), e ? e.call(s) : i.get(s)), a = (s, i, e) => i.has(s) ? z("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), o = (s, i, e, l) => (R(s, i, "write to private field"), l ? l.call(s, e) : i.set(s, e), e);
+import { F as $ } from "../core/FormBase.js";
+import { s as I } from "../css/ea-checkbox.style.js";
+import { s as F } from "../css/ea-checkbox-group.style.js";
+var h, r, x, p, n, g, f, A, V;
+class G extends $ {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, h);
+    /** @type {HTMLElement} */
+    a(this, r);
+    /** @type {HTMLElement} */
+    a(this, x);
+    /** @type {HTMLElement} */
+    a(this, p);
+    /** @type {AbortController} */
+    a(this, n, new AbortController());
+    B(this, "state", this.properties({
+      size: {
+        type: ["small", "default", "large"],
+        default: "",
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      value: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, r).value = e, t(this, g).call(this);
+        }
+      },
+      label: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, p).textContent = e;
+        }
+      },
+      checked: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          t(this, r).checked = e, t(this, g).call(this), this.updateContainerClasslist();
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          t(this, r).disabled = e, this.updateContainerClasslist();
+        }
+      },
+      indeterminate: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      border: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      "limit-disabled": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          t(this, r).disabled = e, this.updateContainerClasslist();
+        }
+      },
+      required: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          t(this, r).toggleAttribute("required", e);
+        }
+      }
+    }));
+    /**
+     * 更新 checkbox 值
+     */
+    a(this, g, () => {
+      this.checked ? this.setValue(this.value || this.hasAttribute("checked"), "value") : this.setValue(null, "value");
+    });
+    /**
+     * 派发 change 事件
+     */
+    a(this, f, () => {
+      this.emit("change", {
+        detail: {
+          value: this.value,
+          checked: !!this.checked
+        },
+        bubbles: !0
+      });
+    });
+    /**
+     * change 事件
+     */
+    a(this, A, () => {
+      this.checked = t(this, r).checked, t(this, f).call(this);
+    });
+    /**
+     * enter 事件
+     */
+    a(this, V, (e) => {
+      e.key === "Enter" && (t(this, r).checked = !this.checked, t(this, f).call(this));
+    });
+    this.stylesheet = I, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "size",
+      "value",
+      "label",
+      "name",
+      "checked",
+      "disabled",
+      "indeterminate",
+      "border",
+      "limit-disabled",
+      "required"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-checkbox",
+      {
+        ["--" + this.size]: this.size
+      },
+      {
+        checked: this.checked,
+        disabled: this.disabled,
+        indeterminate: this.indeterminate,
+        "limit-disabled": this["limit-disabled"],
+        border: this.border
+      }
+    );
+    return t(this, h).className = e, e;
+  }
+  $render() {
+    const e = Math.random().toString(36).substring(2, 15);
+    this.shadowRoot.innerHTML = `
+      <label class="ea-checkbox" part="container" for="${this.getAttribute("id") || e}">
+        <input id="${this.getAttribute("id") || e}" type="checkbox" class="ea-checkbox__orignal" part="orignal" />
+        <span class="ea-checkbox__inner" part="input" tabindex="1"></span>
+        <span class="ea-checkbox__label" part="label" tabindex="1">
+          <slot></slot>
+        </span>
+      </label>
+    `, o(this, h, this.shadowRoot.querySelector(".ea-checkbox")), o(this, p, this.shadowRoot.querySelector(".ea-checkbox__label")), o(this, x, this.shadowRoot.querySelector(".ea-checkbox__inner")), o(this, r, this.shadowRoot.querySelector(".ea-checkbox__orignal"));
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = t(this, n)) == null || e.abort(), o(this, n, new AbortController()), t(this, r).addEventListener("change", t(this, A), {
+      signal: t(this, n).signal
+    }), this.addEventListener("keydown", t(this, V), {
+      signal: t(this, n).signal
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, n)) == null || e.abort();
+  }
+  /**
+   * 获取验证目标元素
+   * @returns {HTMLElement}
+   */
+  get validationTarget() {
+    return t(this, h);
+  }
+  /**
+   * 更新表单验证状态
+   * checkbox 的验证逻辑：当 required 为 true 时，必须处于选中状态
+   */
+  updateValidity() {
+    this.required && !this.checked ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "请勾选此项",
+      t(this, h)
+    ) : this.internals.setValidity({}, "", t(this, h));
+  }
+  /**
+   * 检查表单字段的有效性
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.updateValidity(), this.internals.validity.valid;
+  }
+  /**
+   * 报告表单字段的有效性（显示验证提示）
+   * @returns {boolean}
+   */
+  reportValidity() {
+    return this.updateValidity(), this.internals.reportValidity();
+  }
+}
+h = new WeakMap(), r = new WeakMap(), x = new WeakMap(), p = new WeakMap(), n = new WeakMap(), g = new WeakMap(), f = new WeakMap(), A = new WeakMap(), V = new WeakMap();
+window.customElements.get("ea-checkbox") || window.customElements.define("ea-checkbox", G);
+var u, k, m, d, y, v, w, S, E, C, c, q;
+class H extends $ {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, u);
+    /** @type {HTMLSlotElement} */
+    a(this, k);
+    /** @type {HTMLLabelElement} */
+    a(this, m);
+    /** @type {AbortController} */
+    a(this, d, new AbortController());
+    B(this, "state", this.properties({
+      label: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, m).textContent = e;
+        }
+      },
+      name: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, y).call(this);
+        }
+      },
+      value: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: (e) => {
+          t(this, v).call(this), t(this, c).call(this);
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.querySelectorAll("ea-checkbox").forEach((l) => {
+            l.toggleAttribute("disabled", e);
+          });
+        }
+      },
+      min: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          t(this, c).call(this);
+        }
+      },
+      max: {
+        type: Number,
+        default: 1 / 0,
+        observer: (e) => {
+          t(this, c).call(this);
+        }
+      },
+      size: {
+        type: ["small", "default", "large"],
+        default: "",
+        observer: (e) => {
+          t(this, q).call(this);
+        }
+      },
+      required: {
+        type: Boolean,
+        default: !1
+      }
+    }));
+    /**
+     * 更新子组件的 name 属性，因为没有限制 name 必填
+     */
+    a(this, y, () => {
+      this.querySelectorAll("ea-checkbox").forEach((e) => {
+        e.setAttribute("name", this.name);
+      });
+    });
+    /**
+     * 更新子组件的初始勾选状态
+     */
+    a(this, v, () => {
+      this.querySelectorAll("ea-checkbox").forEach((e) => {
+        const l = this.value.includes(e.getAttribute("value"));
+        e.toggleAttribute("checked", l);
+      });
+    });
+    /**
+     * 更新子组件
+     * @param {Boolean} isChecked
+     * @param {any} updateValue
+     */
+    a(this, w, (e, l) => {
+      e ? this.value.some(
+        (_) => _.value === l
+      ) || this.value.push(l) : this.value = this.value.filter((b) => b !== l);
+    });
+    /**
+     * 更新子组件在带有 Min 下的禁用状态
+     */
+    a(this, S, () => {
+      this.querySelectorAll("ea-checkbox").forEach((e) => {
+        const l = e.hasAttribute("checked");
+        e.toggleAttribute("limit-disabled", l);
+      });
+    });
+    /**
+     * 更新子组件在带有 Max 下的禁用状态
+     */
+    a(this, E, () => {
+      this.querySelectorAll("ea-checkbox").forEach((e) => {
+        const l = e.hasAttribute("checked");
+        e.toggleAttribute("limit-disabled", !l);
+      });
+    });
+    /**
+     * 还原子组件的禁用状态
+     */
+    a(this, C, () => {
+      this.querySelectorAll("ea-checkbox").forEach((e) => {
+        e.toggleAttribute("limit-disabled", !1);
+      });
+    });
+    /**
+     * 更新子组件的禁用状态
+     */
+    a(this, c, () => {
+      this.value.length <= this.min ? t(this, S).call(this) : this.value.length >= this.max ? t(this, E).call(this) : this.max < 1 / 0 && this.min === 0 ? t(this, C).call(this) : t(this, C).call(this);
+    });
+    /**
+     * 更新子组件的尺寸
+     */
+    a(this, q, () => {
+      this.querySelectorAll("ea-checkbox").forEach((e) => {
+        e.setAttribute("size", this.size);
+      });
+    });
+    this.stylesheet = F, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "label",
+      "name",
+      "value",
+      "disabled",
+      "min",
+      "max",
+      "size",
+      "required"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist("ea-checkbox-group", {
+      // ['--' + this.type]: this.type,
+    });
+    return t(this, u).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <label class='ea-checkbox-group__form-label' part='form-label'></label>
+      <div class='ea-checkbox-group' part='container'>
+        <slot></slot>
+      </div>
+    `, o(this, m, this.shadowRoot.querySelector(
+      ".ea-checkbox-group__form-label"
+    )), o(this, u, this.shadowRoot.querySelector(".ea-checkbox-group")), o(this, k, this.shadowRoot.querySelector("slot"));
+  }
+  connectedCallback() {
+    var b;
+    super.connectedCallback(), (b = t(this, d)) == null || b.abort(), o(this, d, new AbortController()), this.name || (this.name = Math.random().toString(36).substring(2, 15));
+    const e = () => {
+      t(this, y).call(this), t(this, v).call(this), t(this, c).call(this);
+    }, l = (_) => {
+      const { checked: L, value: M } = _.detail;
+      t(this, w).call(this, L, M), t(this, c).call(this);
+    };
+    t(this, k).addEventListener("slotchange", e, {
+      signal: t(this, d).signal
+    }), this.addEventListener("change", l, {
+      signal: t(this, d).signal
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, d)) == null || e.abort();
+  }
+  /**
+   * 获取验证目标元素
+   * 返回第一个 ea-checkbox
+   * @returns {HTMLElement}
+   */
+  get validationTarget() {
+    return this.querySelector("ea-checkbox") || t(this, u);
+  }
+  /**
+   * 更新表单验证状态
+   */
+  updateValidity() {
+    const e = Array.isArray(this.value) && this.value.length > 0;
+    this.required && !e ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "请至少选择一个选项",
+      this
+    ) : this.internals.setValidity({}, "", this);
+  }
+  /**
+   * 检查表单字段的有效性
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.updateValidity(), this.internals.validity.valid;
+  }
+  /**
+   * 报告表单字段的有效性（显示验证提示）
+   * @returns {boolean}
+   */
+  reportValidity() {
+    return this.updateValidity(), this.internals.reportValidity();
+  }
+}
+u = new WeakMap(), k = new WeakMap(), m = new WeakMap(), d = new WeakMap(), y = new WeakMap(), v = new WeakMap(), w = new WeakMap(), S = new WeakMap(), E = new WeakMap(), C = new WeakMap(), c = new WeakMap(), q = new WeakMap();
+window.customElements.get("ea-checkbox-group") || window.customElements.define("ea-checkbox-group", H);
+export {
+  G as EaCheckbox,
+  H as EaCheckboxGroup
+};