easy-component-ui 3.0.12 → 3.0.14

package/dist/components/ea-segmented.js

@@ -1,215 +0,0 @@
-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
-};