easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-segmented.js

@@ -0,0 +1,215 @@
+var _ = Object.defineProperty;
+var C = (t) => {
+  throw TypeError(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 {
+  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();
+        }
+      }
+    }));
+    /**
+     * 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();
+          this.style.setProperty(
+            "--ea-segmented-indicator-width",
+            `${p.width}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-height",
+            `${p.height}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-position-x",
+            `${h.offsetLeft}px`
+          ), this.style.setProperty(
+            "--ea-segmented-indicator-position-y",
+            `${h.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();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = n(this, r)) == null || e.abort();
+  }
+}
+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", $);
+export {
+  $ as EaSegmented
+};