easy-component-ui 3.0.12 → 3.0.14

package/dist/components/ea-progress.js

@@ -1,286 +0,0 @@
-var S = Object.defineProperty;
-var k = (t) => {
-  throw TypeError(t);
-};
-var P = (t, s, e) => s in t ? S(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var C = (t, s, e) => P(t, typeof s != "symbol" ? s + "" : s, e), m = (t, s, e) => s.has(t) || k("Cannot " + e);
-var r = (t, s, e) => (m(t, s, "read from private field"), e ? e.call(t) : s.get(t)), p = (t, s, e) => s.has(t) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, i) => (m(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e), d = (t, s, e) => (m(t, s, "access private method"), e);
-import { B } from "./Base.js";
-import { s as A } from "../css/ea-progress.style.js";
-const $ = `
-<svg viewBox="0 0 100 100">
-    <circle class="ea-progress__track" part="track" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
-    <circle class="ea-progress__path" part="path" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
-</svg>
-<section class="ea-progress__percentage-wrapper" part="percentage">
-    <slot class="ea-progress__percentage"></slot>
-</section>
-`, q = `
-<svg viewBox="0 0 100 100">
-    <mask id="myMask">
-        <rect class="mask" width="100%" height="20%" fill="white" />
-    </mask>
-    <clipPath id="myClip">
-        <rect class="mask" />
-    </clipPath>
-    <circle class="ea-progress__track" part="track" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
-    <circle class="ea-progress__path" part="path" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
-</svg>
-<section class="ea-progress__percentage-wrapper" part="percentage">
-    <slot class="ea-progress__percentage"></slot>
-</section>
-`;
-var a, g, o, u, n, y, c, w, b;
-class R extends B {
-  constructor() {
-    super();
-    p(this, c);
-    /** @type {HTMLElement} */
-    p(this, a);
-    /** @type {HTMLElement} */
-    p(this, g);
-    /** @type {HTMLElement} */
-    p(this, o);
-    /** @type {HTMLElement} */
-    p(this, u);
-    /** @type {HTMLElement} */
-    p(this, n);
-    C(this, "propState", this.properties({
-      color: {
-        props: !0,
-        type: {
-          Array: () => {
-            var e, i;
-            return ((i = (e = this.props) == null ? void 0 : e.color) == null ? void 0 : i.length) > 0;
-          },
-          Function: () => {
-            var e;
-            return typeof ((e = this.props) == null ? void 0 : e.color) == "function";
-          },
-          String: () => {
-            var e;
-            return typeof this.getAttribute("color") == "string" || typeof ((e = this.props) == null ? void 0 : e.color) == "string";
-          }
-        },
-        default: () => this.getAttribute("color") || "",
-        observer: (e) => {
-          r(this, y).call(this, e, e);
-        }
-      }
-    }));
-    C(this, "state", this.properties({
-      percentage: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          d(this, c, b).call(this, e);
-        }
-      },
-      type: {
-        type: ["line", "circle", "dashboard"],
-        default: "line",
-        observer: () => {
-          this.$render(), this.updateContainerClasslist(), d(this, c, b).call(this);
-        }
-      },
-      status: {
-        type: ["success", "exception", "warning"],
-        default: "",
-        observer: () => {
-          this.updateContainerClasslist(), d(this, c, w).call(this);
-        }
-      },
-      "stroke-width": {
-        type: String,
-        default: "8px",
-        observer: (e) => {
-          if (!CSS.supports("width", e))
-            return console.warn(
-              `[EaProgress] The width value ${e} is not supported.`
-            );
-          r(this, a).style.setProperty("--ea-progress-stroke-width", e);
-        }
-      },
-      "text-inside": {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          try {
-            e ? r(this, o).appendChild(r(this, n)) : r(this, u).appendChild(r(this, n));
-          } catch {
-          }
-          this.updateContainerClasslist();
-        }
-      },
-      indeterminate: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      duration: {
-        type: Number,
-        default: 3,
-        observer: (e) => {
-          r(this, a).style.setProperty(
-            "--ea-progress-animation-duration",
-            `${e}s`
-          );
-        }
-      },
-      striped: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "striped-flow": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: String,
-        default: "126px",
-        observer: (e) => {
-          this.type !== "line" && r(this, a).style.setProperty("--ea-progress-size", e);
-        }
-      },
-      "show-text": {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 处理颜色变化
-     * @param {string | string[] | function} color 颜色值或函数
-     * @param {number} [percentage] 百分比
-     */
-    p(this, y, (e, i = this.percentage) => {
-      if (!(!e || typeof e > "u"))
-        if (Array.isArray(e)) {
-          let l = e[0];
-          for (let f = 0; f < e.length; f++) {
-            const _ = e[f];
-            if (i <= _.percentage) {
-              l = _;
-              break;
-            }
-          }
-          r(this, o).style.setProperty("--ea-progress-path-color", l == null ? void 0 : l.color);
-        } else typeof e == "string" ? r(this, o).style.setProperty("--ea-progress-path-color", e) : typeof e == "function" && r(this, o).style.setProperty(
-          "--ea-progress-path-color",
-          e(i)
-        );
-    });
-    this.stylesheet = A, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "type",
-      "percentage",
-      "status",
-      "stroke-width",
-      "text-inside",
-      "indeterminate",
-      "duration",
-      "striped",
-      "striped-flow",
-      // "width",
-      "show-text"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-progress",
-      {
-        ["--" + this.status]: this.status,
-        "--text-inside": this["text-inside"],
-        "--striped": this.striped
-      },
-      {
-        [this.type]: this.type,
-        indeterminate: this.indeterminate && this.type === "line",
-        "striped-flow": this["striped-flow"],
-        "show-text": this["show-text"]
-      }
-    );
-    return r(this, a).className = e, e;
-  }
-  $render() {
-    const e = {
-      line: `
-        <div class='ea-progress' part='container'>
-          <section class="ea-progress__track" part="track">
-            <section class="ea-progress__path" part="path"></section>
-          </section>
-          <section class="ea-progress__percentage-wrapper" part="percentage">
-            <slot class="ea-progress__percentage"></slot>
-          </section>
-        </div>
-      `,
-      circle: $,
-      dashboard: q
-    };
-    this.shadowRoot.innerHTML = `
-      <div class='ea-progress' part='container'>
-        ${e[this.type]}
-      </div>
-    `, h(this, a, this.shadowRoot.querySelector(".ea-progress")), h(this, g, this.shadowRoot.querySelector(".ea-progress__track")), h(this, o, this.shadowRoot.querySelector(".ea-progress__path")), h(this, u, this.shadowRoot.querySelector(
-      ".ea-progress__percentage-wrapper"
-    )), h(this, n, this.shadowRoot.querySelector(".ea-progress__percentage")), this.updateContainerClasslist();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-}
-a = new WeakMap(), g = new WeakMap(), o = new WeakMap(), u = new WeakMap(), n = new WeakMap(), y = new WeakMap(), c = new WeakSet(), /**
- * 更新状态文本/图标
- */
-w = function() {
-  const e = {
-    success: "icon-ok-circled",
-    warning: "icon-attention-circled",
-    exception: "icon-cancel-circled"
-  };
-  ["success", "exception", "warning"].includes(this.status) && !this["text-inside"] ? r(this, n).innerHTML = `<ea-icon class="ea-progress__status" icon="${e[this.status]}" part="status-icon"></ea-icon>` : r(this, n).textContent = this.percentage + "%";
-}, /**
- * 更新进度条百分比
- * @param {number} [newVal] 新的百分比值
- */
-b = function(e = this.percentage) {
-  if (e < 0) return this.percentage = 0;
-  if (e > 100) return this.percentage = 100;
-  const i = this.querySelector("[data-percentage]"), l = {
-    line: () => e + "%",
-    circle: () => 302 * ((100 - e) / 100) + "px",
-    dashboard: () => {
-      const _ = 49 - Number(this["stroke-width"].replace("px", "")) / 2, x = 2 * Math.PI * _, v = (100 - e) / 100;
-      return r(this, o).style.strokeDasharray = x * (270 / 360) + "px", r(this, g).style.strokeDasharray = x * (270 / 360) + "px", x * (270 / 360) * v + "px";
-    }
-  };
-  r(this, a).style.setProperty(
-    "--ea-progress-percentage",
-    l[this.type]()
-  ), d(this, c, w).call(this), i && (i.textContent = this.percentage), r(this, y).call(this, this.color, e), this.emit("change", {
-    detail: {
-      percentage: e
-    }
-  });
-};
-window.customElements.get("ea-progress") || window.customElements.define("ea-progress", R);
-export {
-  R as EaProgress
-};

package/dist/components/ea-radio.js

@@ -1,364 +0,0 @@
-var V = Object.defineProperty;
-var _ = (s) => {
-  throw TypeError(s);
-};
-var z = (s, i, e) => i in s ? V(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
-var E = (s, i, e) => z(s, typeof i != "symbol" ? i + "" : i, e), k = (s, i, e) => i.has(s) || _("Cannot " + e);
-var t = (s, i, e) => (k(s, i, "read from private field"), e ? e.call(s) : i.get(s)), r = (s, i, e) => i.has(s) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, a) => (k(s, i, "write to private field"), a ? a.call(s, e) : i.set(s, e), e);
-import { F as q } from "../core/FormBase.js";
-import { s as $ } from "../css/ea-radio.style.js";
-import { E as w } from "../utils/Variables.js";
-import { s as B } from "../css/ea-radio-group.style.js";
-var b, u, p, o, h, S;
-class G extends q {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, b);
-    /** @type {HTMLElement} */
-    r(this, u);
-    /** @type {HTMLElement} */
-    r(this, p);
-    /** @type {HTMLInputElement} */
-    r(this, o);
-    /** @type {AbortController} */
-    r(this, h);
-    E(this, "state", this.properties({
-      size: {
-        type: w,
-        default: "",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      checked: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, u).toggleAttribute("checked", e), t(this, o).checked = e, e ? this.setValue(this.value) : this.removeValue(), this.updateContainerClasslist();
-        }
-      },
-      name: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, u).setAttribute("for", e), t(this, o).setAttribute("id", e), t(this, o).setAttribute("name", e);
-        }
-      },
-      value: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, o).setAttribute("value", e);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, o).disabled = e, this.updateContainerClasslist();
-        }
-      },
-      border: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      label: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, p).textContent = e;
-        }
-      }
-    }));
-    /**
-     * radio change 事件
-     * @param {Event} e
-     */
-    r(this, S, (e) => {
-      e.stopImmediatePropagation(), this.closest("ea-radio-group") || document.querySelectorAll(
-        `ea-radio[name="${this.name}"]`
-      ).forEach((n) => {
-        n.toggleAttribute("checked", n === this);
-      }), this.emit("change", {
-        detail: {
-          value: this.value
-        },
-        bubbles: !0
-      });
-    });
-    this.stylesheet = $, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "size",
-      "checked",
-      "name",
-      "value",
-      "disabled",
-      "border",
-      "label"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-radio",
-      {
-        [`--${this.size}`]: this.size
-      },
-      {
-        checked: this.checked,
-        disabled: this.disabled,
-        border: this.border
-      }
-    );
-    return t(this, b).className = e, e;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <label class="ea-radio" part="container" role="radio">
-        <span class="ea-radio__input" part="input-wrap">
-          <span class="ea-radio__inner" part="input"></span>
-          <input class="ea-radio__original" type="radio" />
-        </span>
-        <span class="ea-radio__label" part="label-wrap">
-          <slot></slot>
-        </span>
-      </label>
-    `, l(this, b, this.shadowRoot.querySelector(".ea-radio")), l(this, u, this.shadowRoot.querySelector(".ea-radio__label")), l(this, p, this.shadowRoot.querySelector(".ea-radio__label slot")), l(this, o, this.shadowRoot.querySelector(".ea-radio__original"));
-  }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = t(this, h)) == null || e.abort(), l(this, h, new AbortController()), this.name || this.setAttribute("name", Math.random().toString(36).substring(2, 15)), t(this, o).addEventListener("change", t(this, S), {
-      signal: t(this, h).signal
-    });
-  }
-  $beforeUnmounted() {
-    var e;
-    (e = t(this, h)) == null || e.abort();
-  }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLInputElement}
-   */
-  get validationTarget() {
-    return t(this, o);
-  }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean} 如果字段有效返回 true，否则返回 false
-   */
-  checkValidity() {
-    return t(this, o).checkValidity();
-  }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean} 如果字段有效返回 true，否则返回 false
-   */
-  reportValidity() {
-    return t(this, o).reportValidity();
-  }
-}
-b = new WeakMap(), u = new WeakMap(), p = new WeakMap(), o = new WeakMap(), h = new WeakMap(), S = new WeakMap();
-window.customElements.get("ea-radio") || window.customElements.define("ea-radio", G);
-var c, g, f, d, m, y, v, C, A;
-class x extends q {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, c);
-    /** @type {HTMLSlotElement} */
-    r(this, g);
-    /** @type {HTMLLabelElement} */
-    r(this, f);
-    /** @type {AbortController} */
-    r(this, d);
-    E(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, f).textContent = e;
-        }
-      },
-      name: {
-        type: String,
-        default: "",
-        observer: () => {
-          t(this, m).call(this);
-        }
-      },
-      value: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, y).call(this, e), this.setValue(e);
-        }
-      },
-      border: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, v).call(this, e);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, C).call(this, e);
-        }
-      },
-      size: {
-        type: w,
-        default: "default",
-        observer: (e) => {
-          t(this, A).call(this, e);
-        }
-      },
-      required: {
-        type: Boolean,
-        default: !1
-      }
-    }));
-    /**
-     * 更新 radios name 属性
-     */
-    r(this, m, () => {
-      this.querySelectorAll("ea-radio").forEach((e) => {
-        e.setAttribute("name", this.name);
-      });
-    });
-    /**
-     * 更新当前选项
-     * @param {any} currentValue
-     */
-    r(this, y, (e) => {
-      this.querySelectorAll("ea-radio").forEach((a) => {
-        const n = a.getAttribute("value");
-        a.toggleAttribute("checked", e === n);
-      });
-    });
-    /**
-     * 更新 radios border 属性
-     * @param {Boolean} isBorder
-     */
-    r(this, v, (e) => {
-      this.querySelectorAll("ea-radio").forEach((a) => {
-        a.toggleAttribute("border", e);
-      });
-    });
-    /**
-     * 更新 radios disabled 属性
-     * @param {Boolean} isDisabled
-     */
-    r(this, C, (e) => {
-      this.querySelectorAll("ea-radio").forEach((a) => {
-        a.toggleAttribute("disabled", e);
-      });
-    });
-    /**
-     * 批量更新 radios size 属性
-     * @param {'large' | 'default' | 'small'} size
-     */
-    r(this, A, (e) => {
-      this.querySelectorAll("ea-radio").forEach((a) => {
-        a.getAttribute("size") || a.setAttribute("size", e);
-      });
-    });
-    this.stylesheet = B, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "label",
-      "name",
-      "value",
-      "border",
-      "disabled",
-      "size",
-      "required"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    return this.computedClasslist("ea-radio-group", {});
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <label class='ea-radio-group__form-label' part='form-label'></label>
-      <div class='ea-radio-group' part='container' role='radiogroup'>
-        <slot></slot>
-      </div>
-    `, l(this, f, this.shadowRoot.querySelector(".ea-radio-group__form-label")), l(this, c, this.shadowRoot.querySelector(".ea-radio-group")), l(this, g, t(this, c).querySelector("slot"));
-  }
-  connectedCallback() {
-    var n;
-    super.connectedCallback(), (n = t(this, d)) == null || n.abort(), l(this, d, new AbortController());
-    const e = (R) => {
-      this.value = R.detail.value;
-    }, a = () => {
-      t(this, y).call(this, this.value), this.name && t(this, m).call(this), this.border && t(this, v).call(this, this.border), this.disabled && t(this, C).call(this, this.disabled), this.size && t(this, A).call(this, this.size);
-    };
-    this.addEventListener("change", e, {
-      signal: t(this, d).signal
-    }), t(this, g).addEventListener("slotchange", a, {
-      signal: t(this, d).signal
-    });
-  }
-  $beforeUnmounted() {
-    var e;
-    (e = t(this, d)) == null || e.abort();
-  }
-  /**
-   * 获取验证目标元素
-   * 返回当前选中的 ea-radio，如果没有选中则返回第一个 ea-radio
-   * @returns {HTMLElement}
-   */
-  get validationTarget() {
-    const e = this.querySelector("ea-radio[checked]");
-    return e || this.querySelector("ea-radio") || t(this, c);
-  }
-  /**
-   * 更新表单验证状态
-   */
-  updateValidity() {
-    const e = this.value !== "" && this.value != null;
-    this.required && !e ? this.internals.setValidity(
-      { valueMissing: !0 },
-      "请选择一个选项",
-      this
-    ) : this.internals.setValidity({}, "", this);
-  }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
-  checkValidity() {
-    return this.updateValidity(), this.internals.validity.valid;
-  }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
-  reportValidity() {
-    return this.updateValidity(), this.internals.reportValidity();
-  }
-}
-c = new WeakMap(), g = new WeakMap(), f = new WeakMap(), d = new WeakMap(), m = new WeakMap(), y = new WeakMap(), v = new WeakMap(), C = new WeakMap(), A = new WeakMap();
-window.customElements.get("ea-radio-group") || window.customElements.define("ea-radio-group", x);
-export {
-  G as EaRadio,
-  x as EaRadioGroup
-};