easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-layout.js

@@ -1,132 +1,140 @@
-var a = Object.defineProperty;
-var l = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var r = (s, t, e) => l(s, typeof t != "symbol" ? t + "" : t, e);
-import { B as o } from "./Base.js";
-import { s as n } from "../css/ea-col.style.js";
-import { s as i } from "../css/ea-row.style.js";
-class p extends o {
+import { E as h } from "../core/EaBase.ts.js";
+import { a as o, C as f } from "../core/decorator.js";
+import { E as c } from "../utils/Enum.ts.js";
+import { s as P } from "../css/ea-row.style.js";
+import { c as g } from "../utils/bem.ts.js";
+import { s as b } from "../css/ea-col.style.js";
+var _ = Object.defineProperty, d = Object.getOwnPropertyDescriptor, n = (t, s, p, r) => {
+  for (var e = r > 1 ? void 0 : r ? d(s, p) : s, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (e = (r ? l(s, p, e) : l(e)) || e);
+  return r && e && _(s, p, e), e;
+};
+const m = "ea-row", $ = g(m), w = [
+  "start",
+  "end",
+  "center",
+  "space-around",
+  "space-between",
+  "space-evenly"
+], S = ["top", "middle", "bottom"];
+let y = class extends h {
   constructor() {
-    super();
-    /**
-     * @typedef {Object} State
-     * @property {Number} span 列数
-     * @property {Number} offset 列偏移
-     * @property {Number} push 列向右移动
-     * @property {Number} pull 列向左移动
-     */
-    /** @type {State} */
-    r(this, "state", this.properties({
-      span: {
-        type: Number,
-        default: 24,
-        observer: (e) => {
-          this.style.setProperty("--ea-col-span", e);
-        }
-      },
-      offset: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          this.style.setProperty("--ea-col-offset", e);
-        }
-      },
-      push: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          this.style.setProperty("--ea-col-push", e);
-        }
-      },
-      pull: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          this.style.setProperty("--ea-col-pull", e);
-        }
-      },
-      tag: {
-        type: String,
-        default: "div",
-        observer: (e) => {
-        }
-      }
-    }));
-    this.stylesheet = n, this.$render();
+    super(...arguments), this.gutter = 0, this.justify = "start", this.align = "top", this.tag = "div";
   }
-  static get observedAttributes() {
-    return ["span", "offset", "push", "pull", "tag"];
+  html() {
+    return `
+      <${this.tag} class="${$()}" part="container">
+        <slot></slot>
+      </${this.tag}>
+    `;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <${this.tag} class="ea-row" part="container">
-                <slot></slot>
-            </${this.tag}>
-        `;
+  $mount() {
+    this.style.setProperty("--ea-row-gutter", this.gutter / 2 + "px"), this.style.setProperty("--ea-row-justify", this.justify), this.style.setProperty("--ea-row-align", this.align);
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-}
-window.customElements.get("ea-col") || window.customElements.define("ea-col", p);
-class u extends o {
+};
+n([
+  o({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.style.setProperty("--ea-row-gutter", t / 2 + "px");
+    }
+  })
+], y.prototype, "gutter", 2);
+n([
+  o({
+    type: c(w),
+    default: "start",
+    observer(t) {
+      this.style.setProperty("--ea-row-justify", t);
+    }
+  })
+], y.prototype, "justify", 2);
+n([
+  o({
+    type: c(S),
+    default: "top",
+    observer(t) {
+      this.style.setProperty("--ea-row-align", t);
+    }
+  })
+], y.prototype, "align", 2);
+n([
+  o({
+    type: String,
+    default: "div"
+  })
+], y.prototype, "tag", 2);
+y = n([
+  f(m, { styles: [P] })
+], y);
+var E = Object.defineProperty, j = Object.getOwnPropertyDescriptor, u = (t, s, p, r) => {
+  for (var e = r > 1 ? void 0 : r ? j(s, p) : s, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (e = (r ? l(s, p, e) : l(e)) || e);
+  return r && e && E(s, p, e), e;
+};
+const v = "ea-col", N = g(v);
+let i = class extends h {
   constructor() {
-    super();
-    /**
-     * @typedef {Object} State
-     * @property {string} gutter - 列类型
-     * @property {string} justify - 列对齐方式
-     * @property {string} align - 列对齐方式
-     */
-    /** @type {State} */
-    r(this, "state", this.properties({
-      gutter: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          this.style.setProperty("--ea-row-gutter", e / 2 + "px");
-        }
-      },
-      justify: {
-        type: [
-          "start",
-          "end",
-          "center",
-          "space-around",
-          "space-between",
-          "space-evenly"
-        ],
-        default: "start",
-        observer: (e) => {
-          this.style.setProperty("--ea-row-justify", e);
-        }
-      },
-      align: {
-        type: ["top", "middle", "bottom"],
-        default: "",
-        observer: (e) => {
-        }
-      },
-      tag: {
-        type: String,
-        default: "div",
-        observer: (e) => {
-        }
-      }
-    }));
-    this.stylesheet = i, this.$render();
-  }
-  static get observedAttributes() {
-    return ["gutter", "justify", "align", "tag"];
+    super(...arguments), this.span = 24, this.offset = 0, this.push = 0, this.pull = 0, this.tag = "div";
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <${this.tag} class="ea-row" part="container">
-                <slot></slot>
-            </${this.tag}>
-        `;
+  html() {
+    return `
+      <${this.tag} class="${N()}" part="container">
+        <slot></slot>
+      </${this.tag}>
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.style.setProperty("--ea-col-span", String(this.span)), this.style.setProperty("--ea-col-offset", String(this.offset)), this.style.setProperty("--ea-col-push", String(this.push)), this.style.setProperty("--ea-col-pull", String(this.pull));
   }
-}
-window.customElements.get("ea-row") || window.customElements.define("ea-row", u);
+};
+u([
+  o({
+    type: Number,
+    default: 24,
+    observer(t) {
+      this.style.setProperty("--ea-col-span", String(t));
+    }
+  })
+], i.prototype, "span", 2);
+u([
+  o({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.style.setProperty("--ea-col-offset", String(t));
+    }
+  })
+], i.prototype, "offset", 2);
+u([
+  o({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.style.setProperty("--ea-col-push", String(t));
+    }
+  })
+], i.prototype, "push", 2);
+u([
+  o({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.style.setProperty("--ea-col-pull", String(t));
+    }
+  })
+], i.prototype, "pull", 2);
+u([
+  o({
+    type: String,
+    default: "div"
+  })
+], i.prototype, "tag", 2);
+i = u([
+  f(v, { styles: [b] })
+], i);
+export {
+  i as EaCol,
+  y as EaRow
+};

package/dist/components/ea-link.js

@@ -1,101 +1,150 @@
-var u = Object.defineProperty;
-var d = (t) => {
-  throw TypeError(t);
+import { E as u } from "../core/EaBase.ts.js";
+import { q as c, a as s, l as _, C as b } from "../core/decorator.js";
+import { E as p } from "../utils/Enum.ts.js";
+import { V as y } from "../core/constants.js";
+import { s as m } from "../css/ea-link.style.js";
+import "./ea-icon.js";
+import { c as v } from "../utils/bem.ts.js";
+var A = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (t, n, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? g(n, o) : n, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (r = (a ? d(n, o, r) : d(r)) || r);
+  return a && r && A(n, o, r), r;
 };
-var p = (t, s, e) => s in t ? u(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), h = (t, s, e) => s.has(t) || d("Cannot " + e);
-var a = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), r = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), l = (t, s, e, o) => (h(t, s, "write to private field"), o ? o.call(t, e) : s.set(t, e), e);
-import { B as m } from "./Base.js";
-import { s as b } from "../css/ea-link.style.js";
-var i, n;
-class y extends m {
+const f = "ea-link", l = v(f), C = ["always", "hover", "never"];
+let e = class extends u {
   constructor() {
-    super();
-    /** @type {HTMLAnchorElement} */
-    r(this, i);
-    /** @type {HTMLElement} */
-    r(this, n);
-    /**
-     * @typedef {Object} LinkState
-     * @property {string} type
-     * @property {Boolean} disabled
-     * @property {Boolean} underline
-     * @property {string} href
-     * @property {string} icon
-     */
-    /** @type {LinkState} */
-    c(this, "state", this.properties({
-      type: {
-        type: ["normal", "primary", "success", "info", "warning", "danger"],
-        default: "normal",
-        observer: (e) => {
-          a(this, i).className = this.updateContainerClasslist();
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          a(this, i).className = this.updateContainerClasslist();
-        }
-      },
-      underline: {
-        type: ["always", "hover", "never"],
-        default: "",
-        observer: (e) => {
-          a(this, i).className = this.updateContainerClasslist();
-        }
-      },
-      href: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          a(this, i).href = e;
-        }
-      },
-      icon: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          a(this, n).setAttribute("name", e), a(this, i).className = this.updateContainerClasslist();
-        }
-      }
-    }));
-    this.stylesheet = b, this.$render();
-  }
-  static get observedAttributes() {
-    return ["type", "disabled", "underline", "href", "icon"];
+    super(...arguments), this.variant = "normal", this.disabled = !1, this.underline = "", this.href = "", this.target = "", this.rel = "", this.download = "", this.icon = "";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    var e;
-    return this.computedClasslist(
-      "ea-link",
+    const t = l(
       {
-        ["--" + this.type]: this.type,
-        ["--underline-" + this.underline]: this.underline,
-        "--disabled": this.disabled
+        [this.variant]: !0,
+        [`underline-${this.underline}`]: !!this.underline
       },
-      { icon: (e = this.icon) == null ? void 0 : e.length }
+      { disabled: this.disabled, icon: !!this.icon }
     );
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <a class="ea-link" part="container" tabindex="-1">
-        <ea-icon class="ea-link__icon" part="icon"></ea-icon>
+  /** 同步原生链接属性到容器 */
+  _syncLinkAttributes() {
+    this._container && (this.href && (this._container.href = this.href), this.target && (this._container.target = this.target), this.rel && (this._container.rel = this.rel), this.hasAttribute("download") && (this._container.download = this.download));
+  }
+  /** disabled 时或无 href 时更新 tabindex */
+  _updateTabindex() {
+    this._container && (this.disabled ? this._container.setAttribute("tabindex", "-1") : this.href ? this._container.removeAttribute("tabindex") : this._container.setAttribute("tabindex", "0"));
+  }
+  /** 无 href 时添加 role="link" 保持链接语义 */
+  _updateLinkRole() {
+    this._container && (this.href ? this._container.removeAttribute("role") : this._container.setAttribute("role", "link"));
+  }
+  /** 渲染模板 */
+  html() {
+    const t = this.href ? `href="${this.href}"` : "", n = this.target ? `target="${this.target}"` : "", o = this.rel ? `rel="${this.rel}"` : "", a = this.hasAttribute("download") ? `download="${this.download}"` : "", r = this.href ? "" : 'role="link"', h = this.disabled ? 'tabindex="-1"' : this.href ? "" : 'tabindex="0"';
+    return `
+      <a class="${this.updateContainerClasslist()}" part="container" ${t} ${n} ${o} ${a} ${r} ${h}>
+        <ea-icon class="${l.e("icon")}" part="icon"></ea-icon>
         <slot></slot>
       </a>
-    `, l(this, i, this.shadowRoot.querySelector(".ea-link")), l(this, n, this.shadowRoot.querySelector(".ea-link__icon"));
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.updateContainerClasslist(), this._syncLinkAttributes(), this._updateTabindex(), this._updateLinkRole();
   }
-}
-i = new WeakMap(), n = new WeakMap();
-window.customElements.get("ea-link") || window.customElements.define("ea-link", y);
+  _handleKeydown(t) {
+    this.disabled || t.key === "Enter" && !this.href && this._container.click();
+  }
+};
+i([
+  c(l.cb())
+], e.prototype, "_container", 2);
+i([
+  c(l.ce("icon"))
+], e.prototype, "_icon", 2);
+i([
+  s({
+    type: p([...y, "normal"]),
+    default: "normal",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "variant", 2);
+i([
+  s({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.updateContainerClasslist(), this._updateTabindex();
+    }
+  })
+], e.prototype, "disabled", 2);
+i([
+  s({
+    type: p(C),
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "underline", 2);
+i([
+  s({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && (this._container.href = t), this._updateLinkRole(), this._updateTabindex();
+    }
+  })
+], e.prototype, "href", 2);
+i([
+  s({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && (this._container.target = t);
+    }
+  })
+], e.prototype, "target", 2);
+i([
+  s({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && (this._container.rel = t);
+    }
+  })
+], e.prototype, "rel", 2);
+i([
+  s({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && (this._container.download = t);
+    }
+  })
+], e.prototype, "download", 2);
+i([
+  s({
+    type: String,
+    default: "",
+    observer(t) {
+      this._icon && this._icon.setAttribute("name", t), this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "icon", 2);
+i([
+  _("keydown", l.cb())
+], e.prototype, "_handleKeydown", 1);
+e = i([
+  b(f, { styles: [m] })
+], e);
+const T = e;
 export {
-  y as EaLink
+  e as EaLink,
+  T as default
 };

package/dist/components/ea-loading.js

@@ -0,0 +1,198 @@
+import { E as u } from "../core/EaBase.ts.js";
+import { q as c, C as f, a as d } from "../core/decorator.js";
+import { h as y } from "../utils/html.ts.js";
+import { s as m } from "../css/ea-loading.style.js";
+import "./ea-icon.js";
+import { c as g } from "../utils/bem.ts.js";
+class b {
+  constructor(t) {
+    this._includeTypes = [
+      "lock",
+      "text",
+      "spinner",
+      "background",
+      "spinnerSize"
+    ], this._defaultOptions = {
+      lock: !1,
+      text: "",
+      spinner: "spinner",
+      background: "hsla(0, 0%, 100%, 0.9)",
+      spinnerSize: 0,
+      target: "body"
+    };
+    const e = Object.assign({}, this._defaultOptions, t), n = this._includeTypes.reduce(
+      (a, p) => (e[p] !== void 0 && (a[p] = e[p]), a),
+      {}
+    ), i = this._renderer(n, e.target);
+    this.instance = i, this._appendToHandler(i, e.target), i.loading = !0;
+  }
+  _renderer(t, e) {
+    const n = document.createElement("ea-loading");
+    (e && e !== "body" && typeof e != "string" ? !0 : typeof e == "string" && e !== "body") || (n.fullscreen = !0);
+    for (const a in t)
+      n[a] = t[a];
+    return n;
+  }
+  _appendToHandler(t, e) {
+    if (!e || e === "body") {
+      document.body.appendChild(t);
+      return;
+    }
+    if (e instanceof HTMLElement)
+      e.style.position = "relative", e.appendChild(t);
+    else if (typeof e == "string") {
+      const n = document.querySelector(e);
+      n ? (n.style.position = "relative", n.appendChild(t)) : document.body.appendChild(t);
+    } else
+      console.warn(
+        `[EaLoading] TypeError: ${e} is not a valid element or selector.`
+      ), document.body.appendChild(t);
+  }
+  close() {
+    this.instance.loading = !1;
+    const t = this.instance.parentElement;
+    this.instance.remove(), t && t !== document.body && (t.querySelector("ea-loading") || t.style.removeProperty("position"));
+  }
+}
+const _ = (s = {}) => new b(s);
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (s, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? x(t, e) : t, a = s.length - 1, p; a >= 0; a--)
+    (p = s[a]) && (i = (n ? p(t, e, i) : p(i)) || i);
+  return n && i && v(t, e, i), i;
+};
+const h = "ea-loading", l = g(h);
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.loading = !1, this.spinner = "spinner", this.spinnerSize = 0, this.background = "hsla(0, 0%, 100%, 0.9)", this.text = "", this.fullscreen = !1, this.lock = !1;
+  }
+  /** 更新加载文本内容和可见性 */
+  _updateText() {
+    this._textEl && (this._textEl.textContent = this.text, this._textEl.style.display = this.text ? "" : "none");
+  }
+  /** 处理滚动锁定 */
+  _handleLock() {
+    this.fullscreen && this.loading && this.lock ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+  }
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const s = l(
+      { fullscreen: this.fullscreen && this.loading },
+      { loading: this.loading }
+    );
+    return this._container && (this._container.className = s), s;
+  }
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <div class="${l.e("mask")}" part="mask">
+          <slot name="spinner">
+            <ea-icon class="${l.e("spinner")}" name="${this.spinner}" spin part="spinner"></ea-icon>
+          </slot>
+          <div class="${l.e("text")}" part="text">${y(this.text)}</div>
+        </div>
+        <div class="${l.e("content")}" part="content-wrap">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  /** 关闭加载 */
+  close() {
+    this.loading = !1, this.emit("ea-close");
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._updateText(), this._handleLock(), this.background !== "hsla(0, 0%, 100%, 0.9)" && this.style.setProperty("--ea-loading-background", this.background), this.spinnerSize > 0 && this.style.setProperty(
+      "--ea-loading-spinner-size",
+      `${this.spinnerSize}px`
+    );
+  }
+  $beforeUnmount() {
+    this.lock && (document.body.style.overflow = "");
+  }
+};
+r([
+  c(l.cb())
+], o.prototype, "_container", 2);
+r([
+  c(l.ce("spinner"))
+], o.prototype, "_spinnerIcon", 2);
+r([
+  c(l.ce("text"))
+], o.prototype, "_textEl", 2);
+r([
+  d({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-loading__content",
+      map: (s) => s ? "" : null
+    },
+    observer() {
+      this.updateContainerClasslist(), this._handleLock();
+    }
+  })
+], o.prototype, "loading", 2);
+r([
+  d({
+    type: String,
+    default: "spinner",
+    observer(s) {
+      this._spinnerIcon && this._spinnerIcon.setAttribute("name", s);
+    }
+  })
+], o.prototype, "spinner", 2);
+r([
+  d({
+    type: Number,
+    default: 0,
+    observer(s) {
+      s > 0 ? this.style.setProperty("--ea-loading-spinner-size", `${s}px`) : this.style.removeProperty("--ea-loading-spinner-size");
+    }
+  })
+], o.prototype, "spinnerSize", 2);
+r([
+  d({
+    type: String,
+    default: "hsla(0, 0%, 100%, 0.9)",
+    observer(s) {
+      this.style.setProperty("--ea-loading-background", s);
+    }
+  })
+], o.prototype, "background", 2);
+r([
+  d({
+    type: String,
+    default: "",
+    observer() {
+      this._updateText();
+    }
+  })
+], o.prototype, "text", 2);
+r([
+  d({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this._handleLock();
+    }
+  })
+], o.prototype, "fullscreen", 2);
+r([
+  d({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this._handleLock();
+    }
+  })
+], o.prototype, "lock", 2);
+o = r([
+  f(h, { styles: [m] })
+], o);
+window.$loading = _;
+export {
+  o as EaLoading,
+  _ as EaLoadingService
+};