easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-button.js

@@ -1,266 +1,309 @@
-var m = Object.defineProperty;
-var b = (e) => {
-  throw TypeError(e);
+import { E as y } from "../core/EaBase.ts.js";
+import { q as u, a as r, C as m, l as b } from "../core/decorator.js";
+import { E as f } from "../utils/Enum.ts.js";
+import { V as _ } from "../core/constants.js";
+import { s as A } from "../css/ea-button.style.js";
+import "./ea-icon.js";
+import { c as g } from "../utils/bem.ts.js";
+import { s as $ } from "../css/ea-button-group.style.js";
+var E = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, o, n) => {
+  for (var a = n > 1 ? void 0 : n ? w(e, o) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (a = (n ? h(e, o, a) : h(a)) || a);
+  return n && a && E(e, o, a), a;
 };
-var y = (e, s, t) => s in e ? m(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var c = (e, s, t) => y(e, typeof s != "symbol" ? s + "" : s, t), p = (e, s, t) => s.has(e) || b("Cannot " + t);
-var a = (e, s, t) => (p(e, s, "read from private field"), t ? t.call(e) : s.get(e)), u = (e, s, t) => s.has(e) ? b("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, r) => (p(e, s, "write to private field"), r ? r.call(e, t) : s.set(e, t), t);
-import { F as C } from "../core/FormBase.js";
-import { s as g } from "../css/ea-button.style.js";
-import { B as v } from "./Base.js";
-import { s as A } from "../css/ea-button-group.style.js";
-var o, l, n, h;
-class w extends C {
+const v = "ea-button", p = g(v);
+let i = class extends y {
   constructor() {
-    super();
-    /** @type {HTMLButtonElement | HTMLLinkElement} */
-    u(this, o);
-    /** @type {HTMLIconElement} */
-    u(this, l);
-    /** @type {AbortController} */
-    u(this, n);
-    /**
-     * @typedef {Object} state
-     * @property {boolean} disabled
-     * @property {string} type
-     * @property {string} text
-     * @property {boolean} plain
-     * @property {boolean} round
-     * @property {boolean} circle
-     * @property {boolean} link
-     * @property {string} href
-     * @property {string} size
-     * @property {boolean} loading
-     * @property {string} icon
-     */
-    /** @type {state} */
-    c(this, "state", this.properties({
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      type: {
-        type: ["normal", "primary", "success", "warning", "danger"],
-        default: "normal",
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      text: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      plain: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      round: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      circle: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      link: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.$render(), a(this, o).href = this.getAttribute("href"), this.updateContainerClasslist();
-        }
-      },
-      href: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          this.updateContainerClasslist(), a(this, o).setAttribute("href", t);
-        }
-      },
-      size: {
-        type: ["small", "medium", "large"],
-        default: "medium",
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      loading: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var r;
-          if (t = t === "true" || t === !0, this.toggleAttribute("disabled", t), t) {
-            const i = document.createElement("ea-icon");
-            i.id = "ea-loading-icon", i.setAttribute("name", "spinner"), i.toggleAttribute("spin", !0), i.setAttribute("size", this.size), i.setAttribute("part", "loading-icon"), a(this, o).insertBefore(i, a(this, o).firstChild);
-          } else {
-            const i = (r = a(this, o)) == null ? void 0 : r.querySelectorAll("#ea-loading-icon");
-            (i == null ? void 0 : i.length) > 0 && (i == null || i.forEach((f) => f.remove()));
-          }
-          this.updateContainerClasslist();
-        }
-      },
-      icon: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          a(this, l).setAttribute("name", t), a(this, l).setAttribute("size", this.size), this.updateContainerClasslist();
-        }
-      },
-      "button-type": {
-        type: ["button", "submit", "reset"],
-        default: "button",
-        observer: (t) => {
-          a(this, o).type = t;
-        }
-      }
-    }));
-    /**
-     * @param {KeyboardEvent} e
-     */
-    u(this, h, (t) => {
-      t.key === "Enter" && this.click();
-    });
-    this.stylesheet = g, this.$render();
+    super(...arguments), this.disabled = !1, this.variant = "normal", this.text = !1, this.plain = !1, this.round = !1, this.circle = !1, this.link = !1, this.href = "", this.size = "medium", this.loading = !1, this.icon = "", this.type = "button", this.target = "", this.rel = "", this.download = "", this.toggle = !1;
   }
-  static get observedAttributes() {
-    return [
-      "disabled",
-      "type",
-      "button-type",
-      // 暂定为原生 type 属性
-      "text",
-      "plain",
-      "round",
-      "circle",
-      "link",
-      "href",
-      "size",
-      "loading",
-      "icon"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    var r;
-    const t = this.computedClasslist(
-      "ea-button",
+    const t = !!this.icon, e = this.disabled || this.loading, o = p(
       {
-        ["--" + this.type]: this.type,
-        "--disabled": this.disabled || this.loading,
-        "--text": this.text || this.link,
-        "--plain": this.plain,
-        "--round": this.round,
-        "--circle": this.circle,
-        ["--" + this.size]: this.size
+        [this.variant]: !0,
+        text: this.text || this.link,
+        plain: this.plain,
+        round: this.round,
+        circle: this.circle,
+        link: this.link,
+        [this.size]: !0
       },
-      { icon: (r = this.icon) == null ? void 0 : r.length }
+      { icon: t, loading: this.loading, disabled: e }
     );
-    return a(this, o).className = t, t;
+    return this._container && (this._container.className = o), o;
+  }
+  /** 重新渲染容器（link 切换时替换 button/a 标签） */
+  _renderContainer() {
+    const t = this._container;
+    if (!t) return;
+    const e = this.link ? "a" : "button";
+    if (t.tagName.toLowerCase() === e) return;
+    const o = document.createElement("template");
+    o.innerHTML = this.html();
+    const n = o.content.firstElementChild;
+    n && t.replaceWith(n);
   }
-  $render() {
-    const t = this.getAttrBoolean("link") ? "a" : "button";
-    this.shadowRoot.innerHTML = `
-      <${t} class="ea-button" part="container" tabindex="-1">
-        <ea-icon class="ea-button__icon" part="icon"></ea-icon>
+  /** 渲染模板 */
+  html() {
+    const t = this.link ? "a" : "button", e = this.link && this.href ? `href="${this.href}"` : "", o = this.link && this.target ? `target="${this.target}"` : "", n = this.link && this.rel ? `rel="${this.rel}"` : "", a = this.link && this.hasAttribute("download") ? `download="${this.download}"` : "", l = this.link ? "" : `type="${this.type}"`;
+    return `
+      <${t} class="${p()}" part="container" ${e} ${o} ${n} ${a} ${l}>
+        <ea-icon class="${p.e("loading-icon")}" name="spinner" spin part="loading-icon"></ea-icon>
+        <ea-icon class="${p.e("icon")}" part="icon"></ea-icon>
         <slot></slot>
       </${t}>
-    `, d(this, o, this.shadowRoot.querySelector(".ea-button")), d(this, l, this.shadowRoot.querySelector(".ea-button__icon")), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = a(this, n)) == null || t.abort(), d(this, n, new AbortController()), this.addEventListener("keypress", a(this, h), {
-      signal: a(this, n).signal
-    }), this.addEventListener("click", (r) => {
-      if (this["button-type"] === "submit") {
-        const i = this.getForm();
-        i && (r.preventDefault(), i.dispatchEvent(new Event("submit")));
-      } else if (this["button-type"] === "reset") {
-        const i = this.getForm();
-        i && (r.preventDefault(), i.reset());
-      }
-    });
+  _handleKeyDown(t) {
+    var e;
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), (e = this._container) == null || e.click());
   }
-  $beforeUnmounted() {
-    var t;
-    (t = a(this, n)) == null || t.abort();
+  _handleClick(t) {
+    if (this.type === "submit") {
+      const e = this.closest("form");
+      e && (t.preventDefault(), e.dispatchEvent(new Event("submit")));
+    } else if (this.type === "reset") {
+      const e = this.closest("form");
+      e && (t.preventDefault(), e.reset());
+    }
   }
-}
-o = new WeakMap(), l = new WeakMap(), n = new WeakMap(), h = new WeakMap();
-window.customElements.get("ea-button") || window.customElements.define("ea-button", w);
-class E extends v {
-  constructor() {
-    super();
-    /**
-     * @typedef {object} Properties
-     * @property {boolean} disabled
-     * @property {string} size
-     * @property {string} type
-     */
-    /** @type {Properties}   */
-    c(this, "state", this.properties({
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.querySelectorAll("ea-button").forEach((r) => {
-            r.setAttribute("disabled", t);
-          });
-        }
-      },
-      size: {
-        type: ["small", "normal", "large"],
-        default: "normal",
-        observer: (t) => {
-          this.querySelectorAll("ea-button").forEach((r) => {
-            r.setAttribute("size", t);
-          });
-        }
-      },
-      type: {
-        type: ["primary", "success", "warning", "danger", "normal"],
-        default: "normal",
-        observer: (t) => {
-          this.querySelectorAll("ea-button").forEach((r) => {
-            r.setAttribute("type", t);
-          });
-        }
-      }
-    }));
-    this.stylesheet = A, this.$render();
+  /** 同步链接属性到容器（处理 observer 在 _container 不存在时遗漏的情况） */
+  _syncLinkAttributes() {
+    if (!this._container || !this.link) return;
+    const t = this._container;
+    this.href && (t.href = this.href), this.target && (t.target = this.target), this.rel && (t.rel = this.rel), this.hasAttribute("download") && (t.download = this.download);
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "disabled", "size", "type"];
+  $mount() {
+    this.updateContainerClasslist(), this._syncLinkAttributes();
   }
-  $render() {
-    this.shadowRoot.innerHTML = this.html(`
-      <div class="ea-button-group">
+};
+s([
+  u(p.cb())
+], i.prototype, "_container", 2);
+s([
+  u(p.ce("icon"))
+], i.prototype, "_icon", 2);
+s([
+  u(p.ce("loading-icon"))
+], i.prototype, "_loadingIcon", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-disabled", map: (t) => String(t) },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "disabled", 2);
+s([
+  r({
+    type: f([..._, "normal"]),
+    default: "normal",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "variant", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "text", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "plain", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "round", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "circle", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this._renderContainer(), this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "link", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this.updateContainerClasslist(), this._container && t && (this._container.href = t);
+    }
+  })
+], i.prototype, "href", 2);
+s([
+  r({
+    type: ["small", "medium", "large"],
+    default: "medium",
+    observer() {
+      this._loadingIcon && this._loadingIcon.setAttribute("size", this.size), this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "size", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    a11y: { ariaAttr: "aria-busy", map: (t) => String(t) },
+    observer(t) {
+      this.toggleAttribute("disabled", t === !0), this._loadingIcon && this._loadingIcon.setAttribute("size", this.size), this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "loading", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._icon && (this._icon.setAttribute("name", t), this._icon.setAttribute("size", this.size)), this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "icon", 2);
+s([
+  r({
+    type: f(["button", "submit", "reset"]),
+    default: "button",
+    observer(t) {
+      this._container && !this.link && this._container.setAttribute("type", t);
+    }
+  })
+], i.prototype, "type", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && this.link && (this._container.target = t);
+    }
+  })
+], i.prototype, "target", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && this.link && (this._container.rel = t);
+    }
+  })
+], i.prototype, "rel", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && this.link && (this._container.download = t);
+    }
+  })
+], i.prototype, "download", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-pressed",
+      map: (t) => String(t)
+    }
+  })
+], i.prototype, "toggle", 2);
+s([
+  b("keydown")
+], i.prototype, "_handleKeyDown", 1);
+s([
+  b("click")
+], i.prototype, "_handleClick", 1);
+i = s([
+  m(v, { styles: [A] })
+], i);
+var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, d = (t, e, o, n) => {
+  for (var a = n > 1 ? void 0 : n ? B(e, o) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (a = (n ? h(e, o, a) : h(a)) || a);
+  return n && a && k(e, o, a), a;
+};
+const C = "ea-button-group", S = g(C);
+let c = class extends y {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.size = "medium", this.variant = "normal";
+  }
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class="${S()}" part="container">
         <slot></slot>
       </div>
-    `);
+    `;
   }
-  async connectedCallback() {
-    super.connectedCallback();
-  }
-}
-window.customElements.get("ea-button-group") || window.customElements.define("ea-button-group", E);
+};
+d([
+  u("slot")
+], c.prototype, "_defaultSlot", 2);
+d([
+  r({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      var e;
+      (e = this._defaultSlot) == null || e.assignedElements().forEach((o) => {
+        o.tagName === "EA-BUTTON" && o.toggleAttribute("disabled", t);
+      });
+    }
+  })
+], c.prototype, "disabled", 2);
+d([
+  r({
+    type: ["small", "medium", "large"],
+    default: "medium",
+    observer(t) {
+      this.querySelectorAll("ea-button").forEach((e) => {
+        e.setAttribute("size", t);
+      });
+    }
+  })
+], c.prototype, "size", 2);
+d([
+  r({
+    type: f([..._, "normal"]),
+    default: "normal",
+    observer(t) {
+      this.querySelectorAll("ea-button").forEach((e) => {
+        e.setAttribute("variant", t);
+      });
+    }
+  })
+], c.prototype, "variant", 2);
+c = d([
+  m(C, { styles: [$] })
+], c);
+const j = { EaButton: i, EaButtonGroup: c };
 export {
-  w as EaButton,
-  E as EaButtonGroup
+  i as EaButton,
+  c as EaButtonGroup,
+  j as default
 };

package/dist/components/ea-calendar.js

@@ -1,10 +1,12 @@
-import { E } from "./ea-calendar2.js";
-import "./Base.js";
+import "../core/EaBase.ts.js";
+import "../core/decorator.js";
+import "../utils/html.ts.js";
+import "../utils/Enum.ts.js";
+import "../utils/I18nManager.ts.js";
+import { E as f, a as l } from "./ea-calendar2.js";
 import "../css/ea-calendar.style.js";
-import "./ea-button.js";
-import "./ea-select.js";
-import "../utils/I18nManager.js";
-import "../utils/Utils.js";
+import "../utils/bem.ts.js";
 export {
-  E as EaCalendar
+  f as EaCalendar,
+  l as default
 };