easy-component-ui 2.1.1 → 3.0.0

package/dist/components/ea-radio.js

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

package/dist/components/ea-rate.js

@@ -0,0 +1,241 @@
+var A = Object.defineProperty;
+var _ = (s) => {
+  throw TypeError(s);
+};
+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 {
+  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 icon="icon-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;
+      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);
+      }, 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);
+      };
+      e(this, r).addEventListener("mousemove", t, {
+        signal: e(this, u).signal
+      }), e(this, r).addEventListener("mouseout", a, {
+        signal: e(this, u).signal
+      });
+    });
+    /**
+     * 通过监听父元素的点击事件，设置子元素的选中状态
+     */
+    n(this, g, (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} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist(
+      "ea-rate",
+      {
+        ["--" + 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}
+   */
+  get validationTarget() {
+    return this;
+  }
+  /**
+   * 更新表单验证状态
+   */
+  updateValidity() {
+    this.required && !this.value ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "请选择一个评分",
+      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
+    });
+  }
+  $beforeUnmounted() {
+    var t, a;
+    (t = e(this, d)) == null || t.abort(), (a = e(this, u)) == null || a.abort();
+  }
+}
+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);
+export {
+  R as EaRate
+};

package/dist/components/ea-result.js

@@ -0,0 +1,100 @@
+var b = Object.defineProperty;
+var h = (e) => {
+  throw TypeError(e);
+};
+var m = (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) => m(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)), r = (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 y } from "./Base.js";
+import { s as v } from "../css/ea-result.style.js";
+import { t as w } from "../utils/Variables.js";
+var l, a, n, u, c;
+class f extends y {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, l);
+    /** @type {HTMLElement} */
+    r(this, a);
+    /** @type {HTMLElement} */
+    r(this, n);
+    /** @type {HTMLElement} */
+    r(this, u);
+    /** @type {HTMLElement} */
+    r(this, c);
+    p(this, "state", this.properties({
+      type: {
+        type: ["primary", "success", "warning", "info", "error"],
+        default: "",
+        observer: (t) => {
+          i(this, a).setAttribute("icon", `icon-${w[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) => {
+          i(this, a).setAttribute("icon", t);
+        }
+      }
+    }));
+    this.stylesheet = v, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "type", "title", "sub-title", "icon"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist("ea-result", {
+      ["--" + this.type]: this.type
+    });
+    return i(this, l).className = t, t;
+  }
+  $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>
+      </div>
+    `, o(this, l, this.shadowRoot.querySelector(".ea-result")), o(this, a, 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();
+  }
+}
+l = new WeakMap(), a = new WeakMap(), n = new WeakMap(), u = new WeakMap(), c = new WeakMap();
+window.customElements.get("ea-result") || window.customElements.define("ea-result", f);
+export {
+  f as EaResult
+};