easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-rate.js

@@ -1,205 +1,141 @@
-var A = Object.defineProperty;
-var _ = (s) => {
-  throw TypeError(s);
+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;
 };
-var S = (s, i, t) => i in s ? A(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var C = (s, i, t) => S(s, typeof i != "symbol" ? i + "" : i, t), x = (s, i, t) => i.has(s) || _("Cannot " + t);
-var e = (s, i, t) => (x(s, i, "read from private field"), t ? t.call(s) : i.get(s)), n = (s, i, t) => i.has(s) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), b = (s, i, t, a) => (x(s, i, "write to private field"), a ? a.call(s, t) : i.set(s, t), t);
-import { F as V } from "../core/FormBase.js";
-import { s as L } from "../css/ea-rate.style.js";
-import { E as M } from "../utils/Variables.js";
-var r, p, d, u, v, c, m, y, f, g;
-class R extends V {
+const m = "ea-rate", d = f(m);
+let n = class extends y {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    n(this, r);
-    /** @type {HTMLElement} */
-    n(this, p);
-    /** @type {AbortController} */
-    n(this, d, new AbortController());
-    /** @type {AbortController} */
-    n(this, u, new AbortController());
-    C(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          e(this, p).textContent = t;
-        }
-      },
-      value: {
-        type: Number,
-        default: 0,
-        observer: (t) => {
-          this.setValue(t), e(this, c).call(this, t - 1);
-        }
-      },
-      max: {
-        type: Number,
-        default: 5,
-        observer: () => {
-        }
-      },
-      size: {
-        type: M,
-        default: "",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      readonly: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    C(this, "funcStates", this.properties({
-      getSymbol: {
-        props: !0,
-        type: Function,
-        rawFunction: !0,
-        /**
-         * 获取图标
-         * @param {string} [value]
-         * @param {boolean} [isSelected]
-         * @returns {string}
-         */
-        default: () => () => '<ea-icon name="star" part="icon"></ea-icon>',
-        /** @param {Function} cb */
-        observer: (t) => {
-          !t || typeof t != "function" || (e(this, r).innerHTML = e(this, v).call(this, t), e(this, c).call(this, this.value - 1));
-        }
-      }
-    }));
-    /**
-     * 渲染 rate 元素
-     * @param {(value: Number, isSelected: Boolean) => String} renderer
-     * @param {Number} activeValue
-     * @return {String}
-     */
-    n(this, v, (t, a = this.value, h = this.max) => {
-      if (!t) return;
-      const l = Array.from({ length: h }).map(
-        (o, E) => `
-          <span class='ea-rate__symbol' part='symbol-wrap'>
-              ${t(E, a)}
-          </span>`
-      ).join("");
-      return e(this, r).innerHTML = l, l;
-    });
-    /**
-     * 设置 rate 元素选中状态
-     * @param {Number} index
-     */
-    n(this, c, (t = this.value - 1) => {
-      [...e(this, r).children].forEach((h, l) => {
-        h.classList.toggle("is-selected", l <= t);
-      });
-    });
-    /**
-     * 取消 rate 元素选中状态
-     * @param {Number} [currentValue]
-     */
-    n(this, m, (t = this.value - 1) => {
-      [...e(this, r).children].forEach((h, l) => {
-        h.classList.toggle("is-selected", l <= t);
-      });
-    });
-    /**
-     * 触发 hover 事件
-     * @param {Number} [value]
-     * @param {HTMLElement} [target]
-     */
-    n(this, y, (t = this.value, a = null) => {
-      this.emit("hover", {
-        detail: {
-          value: t,
-          target: a
-        }
-      });
-    });
-    /**
-     * 当鼠标移入父元素时，设置子元素的选中状态
-     */
-    n(this, f, () => {
-      var h;
+    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;
-      (h = e(this, u)) == null || h.abort(), b(this, u, new AbortController());
-      const t = (l) => {
-        const o = l.target.closest(".ea-rate__symbol"), w = [...e(this, r).children].indexOf(o);
-        e(this, c).call(this, w), o && e(this, y).call(this, w, o);
+      (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 = () => {
-        const l = this.hasAttribute("value") ? this.value - 1 : null, o = this.children[l];
-        e(this, m).call(this), e(this, y).call(this, l, o);
+        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);
       };
-      e(this, r).addEventListener("mousemove", t, {
-        signal: e(this, u).signal
-      }), e(this, r).addEventListener("mouseout", a, {
-        signal: e(this, u).signal
+      this._container.addEventListener("mousemove", t, {
+        signal: this._hoverAbortController.signal
+      }), this._container.addEventListener("mouseout", a, {
+        signal: this._hoverAbortController.signal
       });
-    });
-    /**
-     * 通过监听父元素的点击事件，设置子元素的选中状态
-     */
-    n(this, g, (t) => {
+    }, this._handleClick = (t) => {
       if (this.readonly || this.disabled) return;
-      const a = t.target.closest(".ea-rate__symbol"), o = [...e(this, r).children].indexOf(a) + 1;
-      this.value === o ? (this.value = 0, e(this, m).call(this, 0)) : this.value = o, this.emit("change", { detail: { value: o } });
-    });
-    this.stylesheet = L, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "label",
-      "value",
-      "max",
-      "size",
-      "readonly",
-      "disabled"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+      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 = this.computedClasslist(
-      "ea-rate",
+    const t = d(
       {
-        ["--" + this.size]: this.size
+        [this.size]: !!this.size
       },
       {
         disabled: this.disabled
       }
     );
-    return e(this, r).className = t, t;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <label class="ea-rate__label" part="label"></label>
-      <div class='ea-rate' part='container'></div>
-    `, b(this, p, this.shadowRoot.querySelector(".ea-rate__label")), b(this, r, this.shadowRoot.querySelector(".ea-rate")), e(this, v).call(this, this.getSymbol), this.updateContainerClasslist();
-  }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
+    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 },
@@ -207,35 +143,118 @@ class R extends V {
       this
     ) : this.internals.setValidity({}, "", this);
   }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean} 如果字段有效返回 true，否则返回 false
-   */
   checkValidity() {
     return this.updateValidity(), this.internals.checkValidity();
   }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean} 如果字段有效返回 true，否则返回 false
-   */
   reportValidity() {
     return this.updateValidity(), this.internals.reportValidity();
   }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = e(this, d)) == null || t.abort(), b(this, d, new AbortController()), e(this, r).addEventListener("mouseover", e(this, f), {
-      signal: e(this, d).signal
-    }), e(this, r).addEventListener("click", e(this, g), {
-      signal: e(this, d).signal
-    });
+  $mount() {
+    this.setAttribute("role", "radiogroup"), this._renderRateEl(this.getSymbol, this.value), this.updateContainerClasslist(), this._setRateStatus(this.value - 1);
   }
-  $beforeUnmounted() {
-    var t, a;
-    (t = e(this, d)) == null || t.abort(), (a = e(this, u)) == null || a.abort();
+  $updateLocalization(t) {
+    c.locale = t, this._renderRateEl(this.getSymbol, this.value), this._setRateStatus(this.value - 1);
   }
-}
-r = new WeakMap(), p = new WeakMap(), d = new WeakMap(), u = new WeakMap(), v = new WeakMap(), c = new WeakMap(), m = new WeakMap(), y = new WeakMap(), f = new WeakMap(), g = new WeakMap();
-window.customElements.get("ea-rate") || window.customElements.define("ea-rate", R);
+  $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 {
-  R as EaRate
+  n as EaRate,
+  O as default
 };

package/dist/components/ea-result.js

@@ -1,100 +1,102 @@
-var b = Object.defineProperty;
-var h = (e) => {
-  throw TypeError(e);
-};
-var y = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var p = (e, s, t) => y(e, typeof s != "symbol" ? s + "" : s, t), _ = (e, s, t) => s.has(e) || h("Cannot " + t);
-var i = (e, s, t) => (_(e, s, "read from private field"), t ? t.call(e) : s.get(e)), a = (e, s, t) => s.has(e) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), o = (e, s, t, d) => (_(e, s, "write to private field"), d ? d.call(e, t) : s.set(e, t), t);
-import { B as v } from "./Base.js";
+import { E as m } from "../core/EaBase.ts.js";
+import { q as n, a as l, C as _ } from "../core/decorator.js";
+import { E as d } from "../utils/Enum.ts.js";
+import { V as b, b as v } from "../core/constants.js";
 import { s as f } from "../css/ea-result.style.js";
-import { t as m } from "../utils/Variables.js";
-var l, r, n, u, c;
-class w extends v {
+import "./ea-icon.js";
+import { c as y } from "../utils/bem.ts.js";
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (i, o, p, r) => {
+  for (var a = r > 1 ? void 0 : r ? S(o, p) : o, c = i.length - 1, u; c >= 0; c--)
+    (u = i[c]) && (a = (r ? u(o, p, a) : u(a)) || a);
+  return r && a && C(o, p, a), a;
+};
+const h = "ea-result", t = y(h);
+let e = class extends m {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    a(this, l);
-    /** @type {HTMLElement} */
-    a(this, r);
-    /** @type {HTMLElement} */
-    a(this, n);
-    /** @type {HTMLElement} */
-    a(this, u);
-    /** @type {HTMLElement} */
-    a(this, c);
-    p(this, "state", this.properties({
-      type: {
-        type: ["primary", "success", "warning", "info", "error"],
-        default: "",
-        observer: (t) => {
-          i(this, r).setAttribute("name", m[t]), this.updateContainerClasslist();
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          i(this, n).textContent = t;
-        }
-      },
-      "sub-title": {
-        type: String,
-        default: "",
-        observer: (t) => {
-          i(this, u).textContent = t;
-        }
-      },
-      icon: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          t ? i(this, r).setAttribute("name", t) : i(this, r).setAttribute("name", m[this.type]);
-        }
-      }
-    }));
-    this.stylesheet = f, this.$render();
+    super(...arguments), this.variant = "", this.heading = "", this.subTitle = "", this.icon = "";
+  }
+  /** 更新图标，icon 属性优先于 variant 默认图标 */
+  _updateIcon() {
+    const i = this.icon || v[this.variant] || "";
+    this._icon.setAttribute("name", i);
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "type", "title", "sub-title", "icon"];
+  /** 更新标题内容，设置 slot 的 fallback */
+  _updateHeading() {
+    this._titleSlot && (this._titleSlot.textContent = this.heading);
+  }
+  /** 更新副标题内容，设置 slot 的 fallback */
+  _updateSubTitle() {
+    this._subTitleSlot && (this._subTitleSlot.textContent = this.subTitle);
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const t = this.computedClasslist("ea-result", {
-      ["--" + this.type]: this.type
-    });
-    return i(this, l).className = t, t;
+    const i = t({ [this.variant]: !!this.variant });
+    return this._container && (this._container.className = i), i;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-result' part='container'>
-        <div class="ea-result__icon ea-result__icon-wrap" part="icon-wrap">
-          <slot name="icon">
-            <ea-icon class="ea-result__icon ea-result__default-icon" part="icon"></ea-icon>
-          </slot>
-        </div>
-        <div class="ea-result__title" part="title">
-          <slot name="title"></slot>
-        </div>
-        <div class="ea-result__sub-title" part="sub-title">
-          <slot name="sub-title"></slot>
-        </div>
-        <div class="ea-result__extra" part="extra">
-          <slot name="extra"></slot>
-        </div>
+  html() {
+    return `
+      <div class="${t()}" part="container" role="status">
+        <div class="${t.e("icon-wrap")}" part="icon-wrap"><slot name="icon"><ea-icon class="${t.e("icon")}" part="icon"></ea-icon></slot></div>
+        <h3 class="${t.e("title")}" part="title"><slot name="title"></slot></h3>
+        <div class="${t.e("sub-title")}" part="sub-title"><slot name="sub-title"></slot></div>
+        <div class="${t.e("extra")}" part="extra"><slot name="extra"></slot></div>
       </div>
-    `, o(this, l, this.shadowRoot.querySelector(".ea-result")), o(this, r, this.shadowRoot.querySelector(".ea-result__default-icon")), o(this, n, this.shadowRoot.querySelector(".ea-result__title slot")), o(this, u, this.shadowRoot.querySelector(
-      ".ea-result__sub-title slot"
-    )), o(this, c, this.shadowRoot.querySelector(".ea-result__extra slot"));
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-l = new WeakMap(), r = new WeakMap(), n = new WeakMap(), u = new WeakMap(), c = new WeakMap();
-window.customElements.get("ea-result") || window.customElements.define("ea-result", w);
+};
+s([
+  n(t.cb())
+], e.prototype, "_container", 2);
+s([
+  n(`${t.ce("icon-wrap")} ea-icon`)
+], e.prototype, "_icon", 2);
+s([
+  n(`${t.ce("title")} slot[name="title"]`)
+], e.prototype, "_titleSlot", 2);
+s([
+  n(`${t.ce("sub-title")} slot[name="sub-title"]`)
+], e.prototype, "_subTitleSlot", 2);
+s([
+  l({
+    type: d(b),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateIcon();
+    }
+  })
+], e.prototype, "variant", 2);
+s([
+  l({
+    type: String,
+    default: "",
+    observer() {
+      this._updateHeading();
+    }
+  })
+], e.prototype, "heading", 2);
+s([
+  l({
+    type: String,
+    default: "",
+    observer() {
+      this._updateSubTitle();
+    }
+  })
+], e.prototype, "subTitle", 2);
+s([
+  l({
+    type: String,
+    default: "",
+    observer() {
+      this._updateIcon();
+    }
+  })
+], e.prototype, "icon", 2);
+e = s([
+  _(h, { styles: [f] })
+], e);
 export {
-  w as EaResult
+  e as EaResult
 };