easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-alert.js

@@ -1,213 +1,253 @@
-var w = Object.defineProperty;
-var y = (t) => {
-  throw TypeError(t);
+import { E as C } from "../core/EaBase.ts.js";
+import { q as p, a, l as y, C as T, p as v } from "../core/decorator.js";
+import { h as n } from "../utils/html.ts.js";
+import { t as h } from "../utils/timeout.ts.js";
+import { E as _ } from "../utils/Enum.ts.js";
+import { V as A, a as f, b as m } from "../core/constants.js";
+import { s as g } from "../css/ea-alert.style.js";
+import "./ea-icon.js";
+import { c as E } from "../utils/bem.ts.js";
+class $ extends Event {
+  constructor(r) {
+    super("ea-close", { bubbles: !0, composed: !0 }), this.detail = r;
+  }
+}
+class w extends Event {
+  constructor(r) {
+    super("ea-open", { bubbles: !0, composed: !0 }), this.detail = r ?? {};
+  }
+}
+var H = Object.defineProperty, I = Object.getOwnPropertyDescriptor, s = (t, r, c, l) => {
+  for (var o = l > 1 ? void 0 : l ? I(r, c) : r, d = t.length - 1, u; d >= 0; d--)
+    (u = t[d]) && (o = (l ? u(r, c, o) : u(o)) || o);
+  return l && o && H(r, c, o), o;
 };
-var C = (t, s, e) => s in t ? w(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var _ = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), v = (t, s, e) => s.has(t) || y("Cannot " + e);
-var a = (t, s, e) => (v(t, s, "read from private field"), e ? e.call(t) : s.get(t)), i = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), r = (t, s, e, c) => (v(t, s, "write to private field"), c ? c.call(t, e) : s.set(t, e), e);
-import { B as g } from "./Base.js";
-import { s as x } from "../css/ea-alert.style.js";
-import { t as b } from "../utils/timeout.js";
-var l, d, u, m, p, f, n, o, h;
-class L extends g {
+const b = "ea-alert", i = E(b), x = ["light", "dark"];
+let e = class extends C {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    i(this, l);
-    /** @type {HTMLElement} */
-    i(this, d);
-    /** @type {HTMLElement} */
-    i(this, u);
-    /** @type {HTMLSlotElement} */
-    i(this, m);
-    /** @type {HTMLElement} */
-    i(this, p);
-    /** @type {HTMLElement} */
-    i(this, f);
-    /** @type {HTMLElement} */
-    i(this, n);
-    /** @type {AbortController} */
-    i(this, o);
-    _(this, "state", this.properties({
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          a(this, p).innerHTML = e;
-        }
-      },
-      description: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          a(this, f).innerHTML = e || "<slot></slot>";
-        }
-      },
-      type: {
-        type: ["primary", "info", "success", "warning", "error"],
-        default: "info",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      effect: {
-        type: ["light", "dark"],
-        default: "light",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      "close-text": {
-        type: String,
-        default: "",
-        observer: (e) => {
-          try {
-            a(this, n).textContent = e;
-          } catch {
-          }
-        }
-      },
-      closable: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          var c;
-          (c = a(this, o)) == null || c.abort(), a(this, n).innerHTML = e ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" name="xmark" part="close-icon"></ea-icon>' : "", e && (r(this, o, new AbortController()), a(this, n).addEventListener("click", a(this, h), {
-            signal: a(this, o).signal
-          }));
-        }
-      },
-      "show-icon": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          const e = {
-            primary: "circle-info",
-            success: "circle-check",
-            info: "circle-info",
-            warning: "triangle-exclamation",
-            error: "circle-xmark"
-          };
-          a(this, d).innerHTML = `<ea-icon class="ea-alert__icon" name="${e[this.type]}" part="icon"></ea-icon>`;
-        }
-      },
-      center: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "show-after": {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          e = Math.abs(e), a(this, l).classList.toggle("ea-alert--hide", e > 0), b(() => {
-            this.emit("open"), a(this, l).classList.remove("ea-alert--hide");
-          }, e);
-        }
-      },
-      "hide-after": {
-        type: Number,
-        default: 300,
-        observer: (e) => {
-        }
-      },
-      "auto-close": {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          e && this.isMounted && b(() => a(this, h).call(this), this["auto-close"]);
-        }
-      }
-    }));
-    /**
-     * 关闭事件
-     */
-    i(this, h, () => {
-      b(() => {
-        a(this, l).classList.add("ea-alert--before-close");
-        const e = () => {
-          this.emit("close", {
-            detail: {
-              visible: !1
-            }
-          }), this.remove();
-        };
-        a(this, l).addEventListener("transitionend", e, {
-          once: !0
-        });
-      }, this["hide-after"]);
-    });
-    this.$render(), this.stylesheet = x;
+    super(...arguments), this._hasDescription = !1, this._isHidden = !1, this.heading = "", this.description = "", this.variant = f, this.effect = "light", this.closeText = "", this.closable = !0, this.showIcon = !1, this.center = !1, this.showAfter = 0, this.autoClose = 0, this.hideAfter = 0;
+  }
+  /** 更新标题内容，为空时恢复 slot */
+  _updateHeading() {
+    this._alertHeading.innerHTML = n(this.heading) || '<slot name="heading"></slot>';
+  }
+  /** 更新描述内容，为空时恢复 slot */
+  _updateDescription() {
+    this._hasDescription = !!this.description, this._alertDescription.innerHTML = n(this.description) || "<slot></slot>", this.updateContainerClasslist();
   }
-  static get observedAttributes() {
-    return [
-      "title",
-      "description",
-      "type",
-      "effect",
-      "closable",
-      "close-text",
-      "show-icon",
-      "center",
-      "description",
-      "show-after",
-      "hide-after",
-      "auto-close"
-    ];
+  /** 更新图标内容 */
+  _updateIcon() {
+    this._alertIcon.innerHTML = this.showIcon ? n(
+      `<ea-icon class="${i.e("icon")}" name="${m[this.variant]}" part="icon"></ea-icon>`
+    ) : "";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新关闭按钮内容，closable 为 false 时清空，closeText 为空时恢复图标 */
+  _updateCloseBtn() {
+    if (!this.closable) {
+      this._alertCloseBtn.innerHTML = "";
+      return;
+    }
+    this._alertCloseBtn.innerHTML = this.closeText ? n(this.closeText) : n(
+      `<ea-icon class="${i.e("close-icon")}" name="xmark" part="close-icon"></ea-icon>`
+    );
+  }
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const e = this.computedClasslist("ea-alert", {
-      ["--" + this.type]: this.type,
-      ["--" + this.effect]: this.effect,
-      "--center": this.center
-    });
-    return a(this, l).className = e, e;
+    const t = i(
+      { [this.variant]: !0, [this.effect]: !0 },
+      {
+        center: this.center,
+        hide: this._isHidden,
+        "has-description": this._hasDescription
+      }
+    );
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-alert' part='container'>
-        <span class="ea-alert__icon-wrap" part='icon-wrap'>
-          <slot name='icon'></slot>
+  /** 渲染模板 */
+  html() {
+    const t = this.showIcon ? `<ea-icon class="${i.e("icon")}" name="${m[this.variant]}" part="icon"></ea-icon>` : "", r = this.closable ? this.closeText ? n(this.closeText) : `<ea-icon class="${i.e("close-icon")}" name="xmark" part="close-icon"></ea-icon>` : "";
+    return `
+      <div class="${this.updateContainerClasslist()}" part='container'>
+        <span class="${i.e("icon-wrap")}" part='icon-wrap'>
+          <slot name='icon'>${t}</slot>
         </span>
-        <div class="ea-alert__content" part='content-wrap'>
-          <span class="ea-alert__title" part='title'>
-            <slot name="title"></slot>
+        <div class="${i.e("content")}" part='content-wrap'>
+          <span class="${i.e("heading")}" part='heading'>
+            <slot name="heading">${n(this.heading)}</slot>
           </span>
-          <p class="ea-alert__description" part='description'>
-            <slot></slot>
+          <p class="${i.e("description")}" part='description'>
+            <slot>${n(this.description)}</slot>
           </p>
-          <span class="ea-alert__close-btn" part="close-btn">
-            ${this.closable ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" name="xmark" part="close-icon"></ea-icon>' : ""}
-          </span>
         </div>
+        <button type="button" class="${i.e("close-btn")}" part="close-btn" aria-label="Close">${r}</button>
       </div>
-    `, r(this, l, this.shadowRoot.querySelector(".ea-alert")), r(this, d, this.shadowRoot.querySelector(
-      ".ea-alert__icon-wrap slot[name=icon]"
-    )), r(this, u, this.shadowRoot.querySelector(".ea-alert__content")), r(this, p, this.shadowRoot.querySelector(
-      ".ea-alert__title slot[name=title]"
-    )), r(this, f, this.shadowRoot.querySelector(
-      ".ea-alert__description slot"
-    )), r(this, n, this.shadowRoot.querySelector(".ea-alert__close-btn"));
+    `;
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = a(this, o)) == null || e.abort(), this.closable && (r(this, o, new AbortController()), a(this, n).addEventListener("click", a(this, h), {
-      signal: a(this, o).signal
-    }));
+  _handleClose() {
+    if (!this.closable && this.autoClose <= 0) return;
+    const t = () => {
+      var l;
+      this._container.classList.add(i.s("before-close")), (l = this._transitionAbortController) == null || l.abort(), this._transitionAbortController = new AbortController();
+      const r = parseFloat(getComputedStyle(this._container).transitionDuration) || 0.3, c = () => {
+        var o;
+        clearTimeout(this._closeFallbackTimer), (o = this._transitionAbortController) == null || o.abort(), this.dispatchEvent(new $({ visible: !1 })), this.remove();
+      };
+      this._container.addEventListener(
+        "transitionend",
+        (o) => {
+          o.target !== this._container || o.propertyName !== "filter" || c();
+        },
+        { signal: this._transitionAbortController.signal }
+      ), this._closeFallbackTimer = h(
+        c,
+        (r + 0.1) * 1e3
+      );
+    };
+    clearTimeout(this._hideAfterTimer), this.hideAfter > 0 ? this._hideAfterTimer = h(t, this.hideAfter) : t();
   }
-  $beforeUnmounted() {
-    var e;
-    (e = a(this, o)) == null || e.abort();
+  $mount() {
+    this.setAttribute("role", "alert"), this.updateContainerClasslist();
   }
-}
-l = new WeakMap(), d = new WeakMap(), u = new WeakMap(), m = new WeakMap(), p = new WeakMap(), f = new WeakMap(), n = new WeakMap(), o = new WeakMap(), h = new WeakMap();
-window.customElements.get("ea-alert") || window.customElements.define("ea-alert", L);
+  $beforeUnmount() {
+    var t;
+    (t = this._transitionAbortController) == null || t.abort(), clearTimeout(this._closeFallbackTimer), clearTimeout(this._showAfterTimer), clearTimeout(this._autoCloseTimer), clearTimeout(this._hideAfterTimer);
+  }
+};
+s([
+  p(i.cb())
+], e.prototype, "_container", 2);
+s([
+  p(`${i.ce("icon-wrap")} slot[name="icon"]`)
+], e.prototype, "_alertIcon", 2);
+s([
+  p(`${i.ce("heading")} slot[name="heading"]`)
+], e.prototype, "_alertHeading", 2);
+s([
+  p(`${i.ce("description")} slot`)
+], e.prototype, "_alertDescription", 2);
+s([
+  p(i.ce("close-btn"))
+], e.prototype, "_alertCloseBtn", 2);
+s([
+  v({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-alert",
+      map: (t) => t ? "" : null
+    }
+  })
+], e.prototype, "_isHidden", 2);
+s([
+  a({
+    type: String,
+    default: "",
+    observer() {
+      this._updateHeading();
+    }
+  })
+], e.prototype, "heading", 2);
+s([
+  a({
+    type: String,
+    default: "",
+    observer() {
+      this._updateDescription();
+    }
+  })
+], e.prototype, "description", 2);
+s([
+  a({
+    type: _(A),
+    default: f,
+    observer() {
+      this.updateContainerClasslist(), this._updateIcon();
+    }
+  })
+], e.prototype, "variant", 2);
+s([
+  a({
+    type: _(x),
+    default: "light",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "effect", 2);
+s([
+  a({
+    type: String,
+    default: "",
+    observer() {
+      this._updateCloseBtn();
+    }
+  })
+], e.prototype, "closeText", 2);
+s([
+  a({
+    type: Boolean,
+    default: !0,
+    a11y: {
+      ariaAttr: "inert",
+      target: ".ea-alert__close-btn",
+      map: (t) => t ? null : ""
+    },
+    observer() {
+      this._updateCloseBtn();
+    }
+  })
+], e.prototype, "closable", 2);
+s([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this._updateIcon();
+    }
+  })
+], e.prototype, "showIcon", 2);
+s([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], e.prototype, "center", 2);
+s([
+  a({
+    type: Number,
+    default: 0,
+    observer(t) {
+      clearTimeout(this._showAfterTimer), t = Math.abs(t), this._isHidden = t > 0, this.updateContainerClasslist(), this._showAfterTimer = h(() => {
+        this._isHidden = !1, this.dispatchEvent(new w()), this.updateContainerClasslist();
+      }, t);
+    }
+  })
+], e.prototype, "showAfter", 2);
+s([
+  a({
+    type: Number,
+    default: 0,
+    observer(t) {
+      clearTimeout(this._autoCloseTimer), t && (this._autoCloseTimer = h(() => this._handleClose(), t));
+    }
+  })
+], e.prototype, "autoClose", 2);
+s([
+  a({
+    type: Number,
+    default: 0
+  })
+], e.prototype, "hideAfter", 2);
+s([
+  y("click", i.ce("close-btn"))
+], e.prototype, "_handleClose", 1);
+e = s([
+  T(b, { styles: [g] })
+], e);
 export {
-  L as EaAlert
+  e as EaAlert
 };