easy-component-ui 3.0.14 → 4.0.2

package/dist/components/ea-radio.js

@@ -0,0 +1,438 @@
+import { E as y } from "../core/EaFormAssociatedBase.ts.js";
+import { c as m } from "../utils/bem.ts.js";
+import { q as b, a as d, l as p, C as g, c as A } from "../core/decorator.js";
+import { E as C } from "../utils/Enum.ts.js";
+import { s as k } from "../css/ea-radio.style.js";
+import { s as V } from "../css/ea-radio-group.style.js";
+class f extends Event {
+  constructor(t) {
+    super("change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = t;
+  }
+}
+class R extends Event {
+  constructor(t) {
+    super("focus", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = t;
+  }
+}
+class w extends Event {
+  constructor(t) {
+    super("blur", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = t;
+  }
+}
+var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (e, t, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? I(t, a) : t, u = e.length - 1, c; u >= 0; u--)
+    (c = e[u]) && (i = (s ? c(t, a, i) : c(i)) || i);
+  return s && i && $(t, a, i), i;
+};
+const _ = "ea-radio", h = m(_);
+let S = 0, r = class extends y {
+  constructor() {
+    super(...arguments), this._isFocus = !1, this.size = "default", this.value = "", this.label = "", this.checked = !1, this.disabled = !1, this.border = !1, this._dispatchChangeEvent = () => {
+      this.dispatchEvent(
+        new f({
+          value: this.value,
+          checked: !!this.checked
+        })
+      );
+    }, this._handleChangeEvent = (e) => {
+      e.stopPropagation(), this.checked = this._original.checked, this._dispatchChangeEvent();
+    }, this._handleFocusEvent = (e) => {
+      this._isFocus = !0, this.updateContainerClasslist(), this.dispatchEvent(
+        new R({
+          value: this.value,
+          checked: !!this.checked
+        })
+      );
+    }, this._handleBlurEvent = (e) => {
+      this._isFocus = !1, this.updateContainerClasslist(), this.dispatchEvent(
+        new w({
+          value: this.value,
+          checked: !!this.checked
+        })
+      );
+    }, this._handleKeydownEvent = (e) => {
+      this.disabled || this.limitDisabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.checked = !0, this._dispatchChangeEvent());
+    };
+  }
+  updateContainerClasslist() {
+    const e = h(
+      { [this.size]: !0 },
+      {
+        checked: this.checked,
+        disabled: this.disabled,
+        border: this.border,
+        focus: this._isFocus
+      }
+    );
+    return this._container && (this._container.className = e), e;
+  }
+  html() {
+    return `
+      <label class="${this.updateContainerClasslist()}" part="container">
+        <span class="${h.e("input")}" part="input-wrap">
+          <span class="${h.e("inner")}" part="input" tabindex="0"></span>
+          <input class="${h.e("original")}" type="radio" part="original"
+            name="${this.name || ""}"
+            value="${this.value || ""}"
+            ${this.checked ? "checked" : ""}
+            ${this.disabled ? "disabled" : ""} />
+        </span>
+        <span class="${h.e("label")}" part="label">
+          <slot>${this.label || ""}</slot>
+        </span>
+      </label>
+    `;
+  }
+  /** 获取焦点 */
+  focus() {
+    var e;
+    (e = this._innerEl) == null || e.focus();
+  }
+  /** 失去焦点 */
+  blur() {
+    var e;
+    (e = this._innerEl) == null || e.blur();
+  }
+  formResetCallback() {
+    this.checked = !1, this.setValidity({});
+  }
+  $mount() {
+    this.setAttribute("role", "radio"), this.id || (this.id = `${_}-${++S}`), this.updateContainerClasslist();
+  }
+  $updated() {
+    this.updateContainerClasslist();
+  }
+  get validationTarget() {
+    return this._container;
+  }
+  /** 更新表单验证状态，required 时必须选中 */
+  updateValidity() {
+    var t, a;
+    const e = this._container ?? void 0;
+    this.required && !this.checked ? (t = this.internals) == null || t.setValidity(
+      { valueMissing: !0 },
+      "请选择一个选项",
+      e
+    ) : (a = this.internals) == null || a.setValidity({}, "", e);
+  }
+  checkValidity() {
+    var e, t;
+    return this.updateValidity(), ((t = (e = this.internals) == null ? void 0 : e.validity) == null ? void 0 : t.valid) ?? !0;
+  }
+  reportValidity() {
+    var e;
+    return this.updateValidity(), ((e = this.internals) == null ? void 0 : e.reportValidity()) ?? !0;
+  }
+};
+n([
+  b(h.cb())
+], r.prototype, "_container", 2);
+n([
+  b(h.ce("original"))
+], r.prototype, "_original", 2);
+n([
+  b(h.ce("inner"))
+], r.prototype, "_innerEl", 2);
+n([
+  b(h.ce("label"))
+], r.prototype, "_labelSlot", 2);
+n([
+  d({
+    type: C(["small", "default", "large"]),
+    default: "default",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "size", 2);
+n([
+  d({
+    type: String,
+    default: "",
+    observer(e) {
+      this._original && (this._original.value = e);
+    }
+  })
+], r.prototype, "value", 2);
+n([
+  d({
+    type: String,
+    default: "",
+    observer(e) {
+      this._labelSlot && (this._labelSlot.textContent = e);
+    }
+  })
+], r.prototype, "label", 2);
+n([
+  d({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-checked", map: (e) => String(!!e) },
+    observer(e) {
+      this._original && (this._original.checked = e), e ? this.setValue(this.value) : this.removeValue(), this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "checked", 2);
+n([
+  d({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-disabled", map: (e) => String(e) },
+    observer(e) {
+      this._original && (this._original.disabled = e), this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "disabled", 2);
+n([
+  d({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "border", 2);
+n([
+  p("change", h.ce("original"))
+], r.prototype, "_handleChangeEvent", 2);
+n([
+  p("focus", h.ce("inner"))
+], r.prototype, "_handleFocusEvent", 2);
+n([
+  p("blur", h.ce("inner"))
+], r.prototype, "_handleBlurEvent", 2);
+n([
+  p("keydown")
+], r.prototype, "_handleKeydownEvent", 2);
+r = n([
+  g(_, { styles: [k] })
+], r);
+var x = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (e, t, a, s) => {
+  for (var i = s > 1 ? void 0 : s ? B(t, a) : t, u = e.length - 1, c; u >= 0; u--)
+    (c = e[u]) && (i = (s ? c(t, a, i) : c(i)) || i);
+  return s && i && x(t, a, i), i;
+};
+const E = "ea-radio-group", v = m(E);
+let l = class extends y {
+  constructor() {
+    super(...arguments), this.label = "", this.name = "", this.value = "", this.disabled = !1, this.size = "", this.border = !1, this.required = !1, this._updateRadioChildrenName = () => {
+      var e;
+      (e = this._radioItems) == null || e.forEach((t) => {
+        t.setAttribute("name", this.name);
+      });
+    }, this._updateRadioChildrenValue = () => {
+      var e;
+      (e = this._radioItems) == null || e.forEach((t) => {
+        const a = t.getAttribute("value");
+        t.toggleAttribute("checked", this.value === a);
+      });
+    }, this._updateChildrenSize = () => {
+      var e;
+      this.size && ((e = this._radioItems) == null || e.forEach((t) => {
+        t.getAttribute("size") || t.setAttribute("size", this.size);
+      }));
+    }, this._handleSlotChange = () => {
+      this._updateRadioChildrenName(), this._updateRadioChildrenValue(), this._updateActiveDescendant();
+    }, this._handleChange = (e) => {
+      if (!(e instanceof f)) return;
+      const { value: t } = e.detail;
+      this.value = t;
+    }, this._handleKeydown = (e) => {
+      const t = this._getEnabledRadios();
+      if (!t.length) return;
+      const a = t.findIndex(
+        (i) => i.hasAttribute("checked")
+      );
+      let s = a;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), s = a < t.length - 1 ? a + 1 : 0;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), s = a > 0 ? a - 1 : t.length - 1;
+          break;
+        case " ":
+          if (e.preventDefault(), a < 0 && t[0]) {
+            const i = t[0].getAttribute("value") || "";
+            this.value = i, this.dispatchEvent(
+              new f({ value: i, checked: !0 })
+            );
+          }
+          return;
+        default:
+          return;
+      }
+      if (s !== a && t[s]) {
+        const i = t[s].getAttribute("value") || "";
+        this.value = i, this.dispatchEvent(
+          new f({ value: i, checked: !0 })
+        );
+      }
+    };
+  }
+  updateContainerClasslist() {
+    const e = v();
+    return this._container && (this._container.className = e), e;
+  }
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <label class="${v.e("form-label")}" part="form-label"></label>
+        <slot></slot>
+      </div>
+    `;
+  }
+  /** 获取非禁用的 radio 列表 */
+  _getEnabledRadios() {
+    return Array.from(this._radioItems || []).filter(
+      (e) => !e.hasAttribute("disabled")
+    );
+  }
+  /** 更新 aria-activedescendant 指向当前选中或第一个 radio */
+  _updateActiveDescendant() {
+    const e = this._radioItems;
+    if (!e || !e.length) return;
+    const a = Array.from(e).find(
+      (s) => s.hasAttribute("checked")
+    ) || e[0];
+    a != null && a.id && this.setAttribute("aria-activedescendant", a.id);
+  }
+  formResetCallback() {
+    var e;
+    this.value = "", (e = this._radioItems) == null || e.forEach((t) => {
+      t.toggleAttribute("checked", !1);
+    }), this.setValidity({});
+  }
+  $mount() {
+    this.setAttribute("role", "radiogroup"), this.tabIndex = 0, this.name || (this.name = Math.random().toString(36).substring(2, 15)), this.updateContainerClasslist(), this._label && this.label && (this._label.textContent = this.label), queueMicrotask(() => {
+      this._updateRadioChildrenName(), this._updateRadioChildrenValue(), this._updateActiveDescendant();
+    });
+  }
+  get validationTarget() {
+    var t;
+    return (this._radioItems ? Array.from(this._radioItems).find((a) => a.hasAttribute("checked")) : null) || ((t = this._radioItems) == null ? void 0 : t[0]) || this._container;
+  }
+  /** 更新表单验证状态 */
+  updateValidity() {
+    var a, s;
+    const e = this.value !== "" && this.value != null, t = this.validationTarget ?? void 0;
+    this.required && !e ? (a = this.internals) == null || a.setValidity(
+      { valueMissing: !0 },
+      "请选择一个选项",
+      t
+    ) : (s = this.internals) == null || s.setValidity({}, "", t);
+  }
+  checkValidity() {
+    var e, t;
+    return this.updateValidity(), ((t = (e = this.internals) == null ? void 0 : e.validity) == null ? void 0 : t.valid) ?? !0;
+  }
+  reportValidity() {
+    var e;
+    return this.updateValidity(), ((e = this.internals) == null ? void 0 : e.reportValidity()) ?? !0;
+  }
+};
+o([
+  b(v.cb())
+], l.prototype, "_container", 2);
+o([
+  b(v.ce("form-label"))
+], l.prototype, "_label", 2);
+o([
+  A("ea-radio")
+], l.prototype, "_radioItems", 2);
+o([
+  d({
+    type: String,
+    default: "",
+    a11y: { ariaAttr: "aria-label", map: (e) => e || null },
+    observer(e) {
+      this._label && (this._label.textContent = e);
+    }
+  })
+], l.prototype, "label", 2);
+o([
+  d({
+    type: String,
+    default: "",
+    observer() {
+      this._updateRadioChildrenName();
+    }
+  })
+], l.prototype, "name", 2);
+o([
+  d({
+    type: String,
+    default: "",
+    observer() {
+      this._updateRadioChildrenValue(), this.setValue(this.value), this._updateActiveDescendant();
+    }
+  })
+], l.prototype, "value", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    observer(e) {
+      var t;
+      (t = this._radioItems) == null || t.forEach((a) => {
+        a.toggleAttribute("disabled", e);
+      });
+    }
+  })
+], l.prototype, "disabled", 2);
+o([
+  d({
+    type: C(["", "small", "default", "large"]),
+    default: "",
+    observer() {
+      this._updateChildrenSize();
+    }
+  })
+], l.prototype, "size", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    observer(e) {
+      var t;
+      (t = this._radioItems) == null || t.forEach((a) => {
+        a.toggleAttribute("border", e);
+      });
+    }
+  })
+], l.prototype, "border", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-required" }
+  })
+], l.prototype, "required", 2);
+o([
+  p("slotchange", "shadowRoot")
+], l.prototype, "_handleSlotChange", 2);
+o([
+  p("change", void 0, { capture: !0 })
+], l.prototype, "_handleChange", 2);
+o([
+  p("keydown")
+], l.prototype, "_handleKeydown", 2);
+l = o([
+  g(E, { styles: [V] })
+], l);
+export {
+  r as EaRadio,
+  l as EaRadioGroup
+};

package/dist/components/ea-rate.js

@@ -0,0 +1,260 @@
+import { E as y } from "../core/EaFormAssociatedBase.ts.js";
+import { c as f } from "../utils/bem.ts.js";
+import { a as h, C as g, q as _, p as E, l as v } from "../core/decorator.js";
+import { h as A } from "../utils/html.ts.js";
+import { E as C } from "../utils/Enum.ts.js";
+import { i as c } from "../utils/I18nManager.ts.js";
+import { s as x } from "../css/ea-rate.style.js";
+import "./ea-icon.js";
+class p extends Event {
+  constructor(a) {
+    super("change", { bubbles: !0, composed: !0 }), this.detail = a;
+  }
+}
+class S extends Event {
+  constructor(a) {
+    super("ea-hover", { bubbles: !0, composed: !0 }), this.detail = a;
+  }
+}
+var R = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, a, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? w(a, r) : a, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (e = (s ? o(a, r, e) : o(e)) || e);
+  return s && e && R(a, r, e), e;
+};
+const m = "ea-rate", d = f(m);
+let n = class extends y {
+  constructor() {
+    super(...arguments), this._lastHoveredIndex = -1, this.label = "", this.value = 0, this.min = 0, this.max = 5, this.size = "", this.readonly = !1, this.disabled = !1, this.getSymbol = () => '<ea-icon name="star" part="icon"></ea-icon>', this._handleMouseover = () => {
+      var r;
+      if (this.readonly || this.disabled) return;
+      (r = this._hoverAbortController) == null || r.abort(), this._hoverAbortController = new AbortController();
+      const t = (s) => {
+        var b;
+        const i = (b = s.target) == null ? void 0 : b.closest(
+          ".ea-rate__symbol"
+        );
+        if (!i) return;
+        const u = [...this._container.children].indexOf(i);
+        u !== this._lastHoveredIndex && (this._lastHoveredIndex = u, this._setRateStatus(u), this._emitHoverEvent(u, i));
+      }, a = () => {
+        this._lastHoveredIndex = -1, this._unsetRateStatus();
+        const s = this.hasAttribute("value") ? this.value - 1 : null, e = this.hasAttribute("value") ? this._container.children[this.value - 1] : null;
+        this._emitHoverEvent(s, e);
+      };
+      this._container.addEventListener("mousemove", t, {
+        signal: this._hoverAbortController.signal
+      }), this._container.addEventListener("mouseout", a, {
+        signal: this._hoverAbortController.signal
+      });
+    }, this._handleClick = (t) => {
+      if (this.readonly || this.disabled) return;
+      const a = t.target.closest(
+        ".ea-rate__symbol"
+      );
+      if (!a) return;
+      const e = [...this._container.children].indexOf(a) + 1;
+      this.value === e ? this.value = 0 : this.value = e, this.dispatchEvent(new p({ value: e }));
+    }, this._handleKeydown = (t) => {
+      if (this.readonly || this.disabled) return;
+      const a = t.target, r = [...this._container.children], s = r.indexOf(a);
+      let e = s;
+      switch (t.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          t.preventDefault(), e = s < r.length - 1 ? s + 1 : 0;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          t.preventDefault(), e = s > 0 ? s - 1 : r.length - 1;
+          break;
+        case "Home":
+          t.preventDefault(), e = 0;
+          break;
+        case "End":
+          t.preventDefault(), e = r.length - 1;
+          break;
+        case " ":
+          t.preventDefault();
+          const i = s + 1;
+          this.value !== i && (this.value = i, this.dispatchEvent(new p({ value: i })));
+          return;
+        default:
+          return;
+      }
+      e !== s && (this.value = e + 1, r[e].focus(), this.dispatchEvent(new p({ value: e + 1 })));
+    };
+  }
+  updateContainerClasslist() {
+    const t = d(
+      {
+        [this.size]: !!this.size
+      },
+      {
+        disabled: this.disabled
+      }
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  html() {
+    return `
+      <label class="${d.e("label")}" part="label"></label>
+      <div class="${d()}" part="container" role="presentation"></div>
+    `;
+  }
+  /** @param renderer - 图标渲染函数 @param activeValue - 当前选中值 @param length - 评分项数量 */
+  _renderRateEl(t, a = this.value, r = this.max) {
+    if (!(!t || !this._container)) {
+      this._container.innerHTML = "", c.locale = this.locale;
+      for (let s = 0; s < r; s++) {
+        const e = s + 1, i = e === a, o = document.createElement("span");
+        o.className = d.e("symbol"), o.setAttribute("part", "symbol-wrap"), o.setAttribute("role", "radio"), o.setAttribute("aria-checked", String(i)), o.setAttribute(
+          "aria-label",
+          c.t("rate.star", { n: e })
+        ), o.tabIndex = i ? 0 : -1, o.innerHTML = A(t(s, a)), this._container.appendChild(o);
+      }
+    }
+  }
+  /** @param index - 选中截止下标（0-based） */
+  _setRateStatus(t = this.value - 1) {
+    if (!this._container) return;
+    [...this._container.children].forEach((r, s) => {
+      const e = s <= t, i = s === t;
+      r.classList.toggle("is-selected", e), r.setAttribute("aria-checked", String(i)), r.tabIndex = i || t < 0 && s === 0 ? 0 : -1;
+    });
+  }
+  /** @returns 恢复为 value 对应的选中状态 */
+  _unsetRateStatus() {
+    if (!this._container) return;
+    [...this._container.children].forEach((a, r) => {
+      a.classList.toggle("is-selected", r <= this.value - 1);
+    });
+  }
+  /** @param value - 悬停项下标或 null @param target - 悬停目标元素或 null */
+  _emitHoverEvent(t, a = null) {
+    this.dispatchEvent(new S({ value: t, target: a }));
+  }
+  get validationTarget() {
+    return this;
+  }
+  updateValidity() {
+    this.required && !this.value ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "请选择一个评分",
+      this
+    ) : this.internals.setValidity({}, "", this);
+  }
+  checkValidity() {
+    return this.updateValidity(), this.internals.checkValidity();
+  }
+  reportValidity() {
+    return this.updateValidity(), this.internals.reportValidity();
+  }
+  $mount() {
+    this.setAttribute("role", "radiogroup"), this._renderRateEl(this.getSymbol, this.value), this.updateContainerClasslist(), this._setRateStatus(this.value - 1);
+  }
+  $updateLocalization(t) {
+    c.locale = t, this._renderRateEl(this.getSymbol, this.value), this._setRateStatus(this.value - 1);
+  }
+  $beforeUnmount() {
+    var t;
+    (t = this._hoverAbortController) == null || t.abort(), this._hoverAbortController = void 0;
+  }
+};
+l([
+  _(".ea-rate")
+], n.prototype, "_container", 2);
+l([
+  _(".ea-rate__label")
+], n.prototype, "_label", 2);
+l([
+  h({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      map: (t) => t || null
+    },
+    observer(t) {
+      this._label && (this._label.textContent = t);
+    }
+  })
+], n.prototype, "label", 2);
+l([
+  h({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.setValue(t ? t.toString() : null), this._setRateStatus(t - 1);
+    }
+  })
+], n.prototype, "value", 2);
+l([
+  h({
+    type: Number,
+    default: 0
+  })
+], n.prototype, "min", 2);
+l([
+  h({
+    type: Number,
+    default: 5,
+    observer() {
+      this._renderRateEl(this.getSymbol, this.value), this._setRateStatus(this.value - 1);
+    }
+  })
+], n.prototype, "max", 2);
+l([
+  h({
+    type: C(["large", "default", "small"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "size", 2);
+l([
+  h({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-readonly" }
+  })
+], n.prototype, "readonly", 2);
+l([
+  h({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "disabled", 2);
+l([
+  E({
+    type: Function,
+    default: (t, a) => '<ea-icon name="star" part="icon"></ea-icon>',
+    observer(t) {
+      !t || typeof t != "function" || (this._renderRateEl(t, this.value), this._setRateStatus(this.value - 1));
+    }
+  })
+], n.prototype, "getSymbol", 2);
+l([
+  v("mouseover", ".ea-rate")
+], n.prototype, "_handleMouseover", 2);
+l([
+  v("click", ".ea-rate__symbol")
+], n.prototype, "_handleClick", 2);
+l([
+  v("keydown", ".ea-rate__symbol")
+], n.prototype, "_handleKeydown", 2);
+n = l([
+  g(m, { styles: [x] })
+], n);
+const O = n;
+export {
+  n as EaRate,
+  O as default
+};