easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-segmented.js

@@ -1,215 +1,283 @@
-var _ = Object.defineProperty;
-var C = (t) => {
-  throw TypeError(t);
+import { E as w } from "../core/EaBase.ts.js";
+import { a as h, C as z, q as E, p as g, l as y } from "../core/decorator.js";
+import { h as u } from "../utils/h.ts.js";
+import { h as P } from "../utils/html.ts.js";
+import { E as A } from "../utils/Enum.ts.js";
+import { s as S } from "../css/ea-segmented.style.js";
+import { c as T } from "../utils/bem.ts.js";
+class b extends Event {
+  constructor(i) {
+    super("change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = i;
+  }
+}
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (e, i, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? O(i, s) : i, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (t = (r ? l(i, s, t) : l(t)) || t);
+  return r && t && I(i, s, t), t;
 };
-var k = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var m = (t, s, e) => k(t, typeof s != "symbol" ? s + "" : s, e), f = (t, s, e) => s.has(t) || C("Cannot " + e);
-var n = (t, s, e) => (f(t, s, "read from private field"), e ? e.call(t) : s.get(t)), c = (t, s, e) => s.has(t) ? C("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), y = (t, s, e, a) => (f(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e), w = (t, s, e) => (f(t, s, "access private method"), e);
-import { B as S } from "./Base.js";
-import { s as A } from "../css/ea-segmented.style.js";
-import { E as u } from "../utils/Utils.js";
-var o, r, b, E, v, d;
-class $ extends S {
+const v = "ea-segmented", c = T(v);
+let k = 0, n = class extends w {
   constructor() {
-    super();
-    c(this, b);
-    /** @type {HTMLElement} */
-    c(this, o);
-    /** @type {AbortController} */
-    c(this, r);
-    m(this, "propsState", this.properties({
-      options: {
-        props: !0,
-        type: Array,
-        default: [],
-        observer: (e) => {
-          this.hasAttribute("name") || (this.setAttribute(
-            "name",
-            this.tagName + "-" + u.String.randomString()
-          ), console.warn(`[${this.tagName}] name attribute is required.`, this)), w(this, b, E).call(this, e);
-        }
-      },
-      propsConfiguration: {
-        props: !0,
-        type: Object,
-        default: {
-          label: "label",
-          value: "value",
-          disabled: "disabled"
-        },
-        observer: (e) => {
-        }
-      }
-    }));
-    m(this, "state", this.properties({
-      value: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          n(this, d).call(this, e);
-        }
-      },
-      size: {
-        type: ["large", "default", "small"],
-        default: "",
-        observer: (e) => {
-          this.updateContainerClasslist(), n(this, d).call(this, this.value);
-        }
-      },
-      direction: {
-        type: ["horizontal", "vertical"],
-        default: "",
-        observer: (e) => {
-          this.updateContainerClasslist(), n(this, d).call(this, this.value);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      block: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
+    super(...arguments), this.options = [], this.propsConfiguration = {
+      label: "label",
+      value: "value",
+      disabled: "disabled"
+    }, this.value = "", this.size = "", this.direction = "", this.disabled = !1, this.block = !1, this.name = "";
+  }
+  updateContainerClasslist() {
+    const e = c(
+      { [this.size]: !!this.size },
+      { [this.direction]: !!this.direction, block: this.block }
+    );
+    return this._container && (this._container.className = e), e;
+  }
+  html() {
+    return `
+      <div class='${c()}' part='container'></div>
+    `;
+  }
+  /** 获取非禁用的选项列表 */
+  _getEnabledItems() {
+    return this._container ? Array.from(
+      this._container.querySelectorAll(".ea-segmented__item")
+    ).filter((e) => !e.hasAttribute("aria-disabled")) : [];
+  }
+  /** 更新 aria-activedescendant 指向当前选中项 */
+  _updateActiveDescendant() {
+    var s;
+    if (!this._container) return;
+    const e = this._container.querySelectorAll(".ea-segmented__item"), i = Array.from(e).find(
+      (r) => r.getAttribute("aria-checked") === "true"
+    );
+    i != null && i.id ? this.setAttribute("aria-activedescendant", i.id) : (s = e[0]) != null && s.id && this.setAttribute("aria-activedescendant", e[0].id);
+  }
+  /** 渲染选项列表 */
+  _renderOptions(e) {
+    if (!this._container) return;
+    const i = this.propsConfiguration, s = e.map((t) => {
+      const a = typeof t == "string", l = a ? t : t[i.label], d = a ? t : t[i.value], p = a ? this.disabled : t[i.disabled] || this.disabled, f = a ? this.value === t : t.checked || this.value === t[i.value], C = [
+        c.e("item"),
+        p ? "is-disabled" : "",
+        f ? "is-checked" : ""
+      ].filter(Boolean).join(" "), m = {
+        part: "input",
+        type: "radio",
+        name: this.name,
+        id: l || d,
+        value: d
+      };
+      p && (m.disabled = !0), f && (m.checked = !0);
+      const _ = {
+        part: "item",
+        for: l || d,
+        id: `${v}-item-${++k}`,
+        role: "radio",
+        "aria-checked": String(f)
+      };
+      return p && (_["aria-disabled"] = "true"), u(
+        "label",
+        C,
+        _,
+        [
+          u("input", c.e("original"), m, ""),
+          u(
+            "span",
+            c.e("label"),
+            {
+              part: "label"
+            },
+            l || d
+          )
+        ]
+      );
+    }).join(""), r = u(
+      "span",
+      c.e("indicator"),
+      { part: "indicator" },
+      null
+    );
+    this._container.innerHTML = P(
+      [s, r].join("")
+    ), this._updateIndicatorPosition(this.value), this._updateActiveDescendant();
+  }
+  _handleChange(e) {
+    e.stopPropagation();
+    const i = e.target.value;
+    this.value = i, this.dispatchEvent(new b({ value: i }));
+  }
+  _handleKeydown(e) {
+    if (this.disabled) return;
+    const i = this._getEnabledItems();
+    if (!i.length) return;
+    const s = i.findIndex(
+      (t) => t.getAttribute("aria-checked") === "true"
+    );
+    let r = s;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault(), r = s < i.length - 1 ? s + 1 : 0;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault(), r = s > 0 ? s - 1 : i.length - 1;
+        break;
+      case " ":
+        if (e.preventDefault(), s < 0 && i[0]) {
+          const t = i[0].querySelector(
+            ".ea-segmented__original"
+          );
+          t && (this.value = t.value, this.dispatchEvent(
+            new b({ value: t.value })
+          ));
         }
-      }
-    }));
-    /**
-     * change 事件
-     * @param {Event} e
-     */
-    c(this, v, (e) => {
-      const a = e.target.value;
-      this.value = a, this.emit("change", { detail: { value: a } });
-    });
-    /**
-     * 更新指示器位置
-     * @param {string} value
-     */
-    c(this, d, (e = this.value) => {
-      var a;
-      ((a = this.options) != null && a.includes(e) || this.options.some((g) => g[this.propsConfiguration.value] === e)) && [
-        ...n(this, o).querySelectorAll(".ea-segmented__item")
-      ].forEach((h) => {
-        const l = h.querySelector(".ea-segmented__original");
-        if (h.classList.toggle("is-checked", (l == null ? void 0 : l.value) === e), (l == null ? void 0 : l.value) === e) {
-          const p = h.getBoundingClientRect();
+        return;
+      default:
+        return;
+    }
+    if (r !== s && i[r]) {
+      const t = i[r].querySelector(
+        ".ea-segmented__original"
+      );
+      t && (this.value = t.value, this.dispatchEvent(
+        new b({ value: t.value })
+      ));
+    }
+  }
+  /**
+   * 更新选中指示器位置
+   * @param value 当前选中值
+   */
+  _updateIndicatorPosition(e = this.value) {
+    this._container && requestAnimationFrame(() => {
+      var i, s;
+      this._container && ((i = this.options) != null && i.includes(e) || (s = this.options) != null && s.some(
+        (r) => r[this.propsConfiguration.value] === e
+      )) && [
+        ...this._container.querySelectorAll(".ea-segmented__item")
+      ].forEach((t) => {
+        const a = t.querySelector(
+          ".ea-segmented__original"
+        ), l = (a == null ? void 0 : a.value) === e;
+        if (t.classList.toggle("is-checked", l), t.setAttribute("aria-checked", String(l)), (a == null ? void 0 : a.value) === e) {
+          const d = t.getBoundingClientRect();
           this.style.setProperty(
             "--ea-segmented-indicator-width",
-            `${p.width}px`
+            `${d.width}px`
           ), this.style.setProperty(
             "--ea-segmented-indicator-height",
-            `${p.height}px`
+            `${d.height}px`
           ), this.style.setProperty(
             "--ea-segmented-indicator-position-x",
-            `${h.offsetLeft}px`
+            `${t.offsetLeft}px`
           ), this.style.setProperty(
             "--ea-segmented-indicator-position-y",
-            `${h.offsetTop}px`
+            `${t.offsetTop}px`
           );
         }
       });
     });
-    this.stylesheet = A, this.$render();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "value", "size", "direction", "block"];
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-segmented",
-      {
-        ["--" + this.size]: this.size
-      },
-      {
-        [this.direction]: this.direction,
-        block: this.block
-      }
-    );
-    return n(this, o).className = e, e;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-segmented' part='container'></div>
-    `, y(this, o, this.shadowRoot.querySelector(".ea-segmented")), this.updateContainerClasslist();
+  $mount() {
+    this.setAttribute("role", "radiogroup"), this.tabIndex = 0, this.updateContainerClasslist(), this.options && this.options.length > 0 && this._renderOptions(this.options), this._container && typeof ResizeObserver < "u" && (this._resizeObserver = new ResizeObserver(() => {
+      this._resizeTimer && clearTimeout(this._resizeTimer), this._resizeTimer = window.setTimeout(() => {
+        this._resizeTimer = void 0, this._updateIndicatorPosition(this.value);
+      }, 16);
+    }), this._resizeObserver.observe(this._container));
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  $beforeUnmounted() {
+  $beforeUnmount() {
     var e;
-    (e = n(this, r)) == null || e.abort();
+    this._resizeTimer && (clearTimeout(this._resizeTimer), this._resizeTimer = void 0), (e = this._resizeObserver) == null || e.disconnect(), this._resizeObserver = void 0;
   }
-}
-o = new WeakMap(), r = new WeakMap(), b = new WeakSet(), /**
- * 渲染选项列表
- * @param {Array<{label: string, value: string, disabled: Boolean}> | Array<String>} options
- */
-E = function(e) {
-  var p;
-  (p = n(this, r)) == null || p.abort(), y(this, r, new AbortController());
-  const a = this.propsConfiguration, g = e.map(
-    (i) => u.EaElement.h(
-      "label",
-      null,
-      {
-        class: [
-          "ea-segmented__item",
-          i[a.disabled] || this.disabled ? "is-disabled" : "",
-          i.checked || this.value === (i.value || i) ? "is-checked" : ""
-        ],
-        part: "item",
-        for: i[a.label] || i[a.value] || i
-      },
-      [
-        u.EaElement.h(
-          "input",
-          "ea-segmented__original",
-          {
-            part: "input",
-            type: "radio",
-            name: this.name || this.getAttrString("name"),
-            id: i[a.label] || i[a.value] || i,
-            value: i[a.value] || i,
-            checked: i.checked,
-            disabled: i[a.disabled] || this.disabled
-          },
-          ""
-        ),
-        u.EaElement.h(
-          "span",
-          "ea-segmented__label",
-          {
-            part: "label",
-            "aria-label": i[a.label] || i[a.value] || i
-          },
-          i[a.label] || i[a.value] || i
-        )
-      ]
-    )
-  ).join(""), h = u.EaElement.h(
-    "span",
-    "ea-segmented__indicator",
-    { part: "indicator" },
-    null
-  ), l = () => {
-    n(this, d).call(this, this.value);
-  };
-  n(this, o).innerHTML = [g, h].join(""), n(this, d).call(this, this.value), n(this, o).addEventListener("change", n(this, v), {
-    signal: n(this, r).signal
-  }), window.addEventListener("resize", l, {
-    signal: n(this, r).signal
-  });
-}, v = new WeakMap(), d = new WeakMap();
-window.customElements.get("ea-segmented") || window.customElements.define("ea-segmented", $);
+};
+o([
+  E(".ea-segmented")
+], n.prototype, "_container", 2);
+o([
+  g({
+    type: Array,
+    default: [],
+    observer(e) {
+      this.hasAttribute("name") || (this.setAttribute(
+        "name",
+        this.tagName + "-" + Math.random().toString(36).substring(2, 15)
+      ), console.warn(`[${this.tagName}] name attribute is required.`, this)), this._renderOptions(e);
+    }
+  })
+], n.prototype, "options", 2);
+o([
+  g({
+    type: Object,
+    default: { label: "label", value: "value", disabled: "disabled" }
+  })
+], n.prototype, "propsConfiguration", 2);
+o([
+  h({
+    type: String,
+    default: "",
+    observer(e) {
+      this._updateIndicatorPosition(e), this._updateActiveDescendant();
+    }
+  })
+], n.prototype, "value", 2);
+o([
+  h({
+    type: A(["large", "default", "small"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateIndicatorPosition(this.value);
+    }
+  })
+], n.prototype, "size", 2);
+o([
+  h({
+    type: A(["horizontal", "vertical"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateIndicatorPosition(this.value);
+    }
+  })
+], n.prototype, "direction", 2);
+o([
+  h({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-disabled", map: (e) => String(e) },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "disabled", 2);
+o([
+  h({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "block", 2);
+o([
+  h({
+    type: String,
+    default: ""
+  })
+], n.prototype, "name", 2);
+o([
+  y("change", ".ea-segmented")
+], n.prototype, "_handleChange", 1);
+o([
+  y("keydown")
+], n.prototype, "_handleKeydown", 1);
+n = o([
+  z(v, { styles: [S] })
+], n);
+const L = n;
 export {
-  $ as EaSegmented
+  n as EaSegmented,
+  L as default
 };