easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-skeleton.js

@@ -1,191 +1,149 @@
-var q = Object.defineProperty;
-var E = (e) => {
-  throw TypeError(e);
-};
-var x = (e, a, t) => a in e ? q(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
-var w = (e, a, t) => x(e, typeof a != "symbol" ? a + "" : a, t), k = (e, a, t) => a.has(e) || E("Cannot " + t);
-var s = (e, a, t) => (k(e, a, "read from private field"), t ? t.call(e) : a.get(e)), r = (e, a, t) => a.has(e) ? E("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), u = (e, a, t, i) => (k(e, a, "write to private field"), i ? i.call(e, t) : a.set(e, t), t), c = (e, a, t) => (k(e, a, "access private method"), t);
-import { B as S } from "./Base.js";
-import { s as H } from "../css/ea-skeleton.style.js";
-import { E as N } from "../utils/Utils.js";
+import { E as f } from "../core/EaBase.ts.js";
+import { q as u, l as S, C as _, a as m } from "../core/decorator.js";
+import { h as g } from "../utils/html.ts.js";
+import { t as b } from "../utils/timeout.ts.js";
+import { s as E } from "../css/ea-skeleton.style.js";
+import { c as v } from "../utils/bem.ts.js";
+import { E as N } from "../utils/Enum.ts.js";
 import { s as $ } from "../css/ea-skeleton-item.style.js";
-var f, C, h, m, n, l, v, T, A, L, y, p;
-class B extends S {
+var A = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, e, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? M(e, l) : e, i = t.length - 1, r; i >= 0; i--)
+    (r = t[i]) && (s = (a ? r(e, l, s) : r(s)) || s);
+  return a && s && A(e, l, s), s;
+};
+const y = "ea-skeleton", p = v(y);
+let o = class extends f {
   constructor() {
-    super();
-    r(this, l);
-    /** @type {HTMLElement} */
-    r(this, f);
-    /** @type {HTMLSlotElement} */
-    r(this, C);
-    /** @type {HTMLSlotElement} */
-    r(this, h);
-    /** @type {AbortController} */
-    r(this, m);
-    r(this, n, {
-      isChildrenReady: !1,
-      templateNode: null,
-      loadingThrottle: null
-    });
-    w(this, "state", this.properties({
-      rows: {
-        type: Number,
-        default: 4,
-        observer: async (t) => {
-          await c(this, l, v).call(this), s(this, y).call(this, t), s(this, p).call(this, this.animated);
-        }
-      },
-      animated: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await c(this, l, v).call(this), s(this, p).call(this, t);
-        }
-      },
-      count: {
-        type: Number,
-        default: 1,
-        observer: async (t) => {
-          await c(this, l, v).call(this);
-          const i = c(this, l, T).call(this), o = c(this, l, L).call(this, t, i), [d] = i, b = i.length > 1, M = (d == null ? void 0 : d.tagName) === "EA-SKELETON-ITEM";
-          b || M ? (i.forEach((R) => R.remove()), this.appendChild(o)) : (d.innerHTML = "", d.appendChild(o));
-        }
-      },
-      "throttle-leading": {
-        type: Number,
-        default: 0,
-        observer: () => {
-        }
-      },
-      "throttle-trailing": {
-        type: Number,
-        default: 0,
-        observer: () => {
-        }
-      },
-      loading: {
-        type: Boolean,
-        default: !0,
-        observer: (t) => {
-          if (this["throttle-trailing"] || this["throttle-leading"])
-            try {
-              clearTimeout(s(this, n).loadingThrottle), s(this, n).loadingThrottle = null;
-            } catch {
-            }
-          s(this, n).loadingThrottle = N.timeout(
-            () => {
-              this.updateContainerClasslist();
-            },
-            (t ? this["throttle-trailing"] : this["throttle-leading"]) || 0
-          );
-        }
-      }
-    }));
-    /**
-     * 初始化默认骨架屏
-     * @param {Number} rows
-     * @returns
-     */
-    r(this, y, (t = this.rows) => {
-      this.querySelectorAll("ea-skeleton-item").length || (s(this, h).innerHTML = this.html(`
-      ${Array.from({ length: t }).map(
-        () => N.EaElement.h("ea-skeleton-item", null, {
-          variant: "p",
-          animated: this.animated
-        })
-      ).join("")}`));
-    });
-    /**
-     * 更新动画状态
-     * @param {boolean} isAnimated
-     */
-    r(this, p, (t) => {
-      s(this, h).assignedElements().filter((o) => o.tagName.toLocaleLowerCase() === "ea-skeleton-item").concat([...s(this, h).querySelectorAll("ea-skeleton-item")]).forEach((o) => o.toggleAttribute("animated", t));
-    });
-    this.stylesheet = H, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "rows",
-      "animated",
-      "count",
-      "loading",
-      "throttle",
-      "throttle-trailing",
-      "throttle-leading"
-    ];
+    super(...arguments), this.rows = 4, this.animated = !1, this.count = 1, this.throttleLeading = 0, this.throttleTrailing = 0, this.loading = !0, this._loadingThrottle = void 0, this._templateNode = null;
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-skeleton",
-      {},
-      {
-        loading: this.loading
-      }
-    );
-    return s(this, f).className = t, t;
+    const t = p({}, { loading: this.loading });
+    return this._container.className = t, t;
+  }
+  /** 获取模板插槽中的元素，若无则返回插槽元素本身 */
+  _getTemplateElements() {
+    const t = [...this.querySelectorAll("[slot='template']")];
+    return t.length ? t : [this._templateSlot];
+  }
+  /** 克隆模板元素并缓存 */
+  _cloneTemplate(t) {
+    if (this._templateNode) return this._templateNode;
+    const e = document.createDocumentFragment();
+    return t.forEach((l) => e.appendChild(l.cloneNode(!0))), this._templateNode = e, e;
+  }
+  /** 根据 count 渲染多份模板 */
+  _renderTemplates(t, e) {
+    const l = this._cloneTemplate(e), a = document.createDocumentFragment();
+    for (let s = 0; s < t; s++)
+      a.appendChild(l.cloneNode(!0));
+    return a;
+  }
+  /** 初始化默认骨架屏段落 */
+  _initDefaultSkeleton(t = this.rows) {
+    this.querySelectorAll("ea-skeleton-item").length || (this._templateSlot.innerHTML = g(
+      `${Array.from({ length: t }).map(
+        () => `<ea-skeleton-item variant="p" ${this.animated ? "animated" : ""}></ea-skeleton-item>`
+      ).join("")}`
+    ));
+  }
+  /** 同步 animated 状态到所有子 skeleton-item */
+  _updateAnimatedStatus(t) {
+    const e = this._templateSlot.assignedElements();
+    e.filter((a) => a.tagName.toLocaleLowerCase() === "ea-skeleton-item").concat(
+      ...e.map((a) => [...a.querySelectorAll("ea-skeleton-item")])
+    ).concat([...this._templateSlot.querySelectorAll("ea-skeleton-item")]).forEach((a) => a.toggleAttribute("animated", t));
   }
-  async $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-skeleton' part='container'>
-        <slot id="default" part="default-slot"></slot>
-        <slot id="template" name="template" part="template-slot"></slot>
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class="${p()}" part="container" aria-hidden="true" aria-busy="${this.loading}">
+        <slot class="${p.e("default")}" part="default-slot"></slot>
+        <slot class="${p.e("template")}" name="template" part="template-slot"></slot>
       </div>
-    `, u(this, f, this.shadowRoot.querySelector(".ea-skeleton")), u(this, C, this.shadowRoot.querySelector("#default")), u(this, h, this.shadowRoot.querySelector("#template")), this.updateContainerClasslist();
+    `;
   }
-  async connectedCallback() {
-    var i;
-    super.connectedCallback(), (i = s(this, m)) == null || i.abort(), u(this, m, new AbortController());
-    const t = () => {
-      s(this, p).call(this, this.animated);
-    };
-    s(this, y).call(this), s(this, h).addEventListener("slotchange", t, {
-      signal: s(this, m).signal
-    });
+  _handleTemplateSlotChange() {
+    this._updateAnimatedStatus(this.animated);
   }
-  $beforeUnmounted() {
-    var t;
-    (t = s(this, m)) == null || t.abort();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-f = new WeakMap(), C = new WeakMap(), h = new WeakMap(), m = new WeakMap(), n = new WeakMap(), l = new WeakSet(), v = async function() {
-  s(this, n).isChildrenReady || (await customElements.whenDefined("ea-skeleton-item"), s(this, n).isChildrenReady = !0);
-}, /**
- * 获取模板元素
- * @returns {HTMLElement[]}
- */
-T = function() {
-  const t = [...this.querySelectorAll("[slot='template']")];
-  return t.length ? t : [s(this, h)];
-}, /**
- * 克隆模板元素
- * @param {HTMLElement[]} elements
- * @returns {DocumentFragment}
- */
-A = function(t) {
-  if (s(this, n).templateNode) return s(this, n).templateNode;
-  const i = document.createDocumentFragment();
-  return t.forEach((o) => i.appendChild(o.cloneNode(!0))), s(this, n).templateNode = i, i;
-}, /**
- * 渲染模板元素
- * @param {number} count
- * @param {HTMLElement[]} elements
- * @returns {DocumentFragment}
- */
-L = function(t, i) {
-  const o = c(this, l, A).call(this, i), d = document.createDocumentFragment();
-  for (let b = 0; b < t; b++)
-    d.appendChild(o.cloneNode(!0));
-  return d;
-}, y = new WeakMap(), p = new WeakMap();
-window.customElements.get("ea-skeleton") || window.customElements.define("ea-skeleton", B);
-const I = `
-    <svg id="skeletonImagePlaceholder" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" part="image-svg">
+  $mounted() {
+    this._initDefaultSkeleton();
+  }
+  $beforeUnmount() {
+    clearTimeout(this._loadingThrottle), this._loadingThrottle = void 0;
+  }
+};
+n([
+  u(p.cb())
+], o.prototype, "_container", 2);
+n([
+  u(p.ce("template"))
+], o.prototype, "_templateSlot", 2);
+n([
+  m({
+    type: Number,
+    default: 4,
+    observer(t) {
+      this._initDefaultSkeleton(t), this._updateAnimatedStatus(this.animated);
+    }
+  })
+], o.prototype, "rows", 2);
+n([
+  m({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._updateAnimatedStatus(t);
+    }
+  })
+], o.prototype, "animated", 2);
+n([
+  m({
+    type: Number,
+    default: 1,
+    observer(t) {
+      const e = this._getTemplateElements(), l = this._renderTemplates(t, e), [a] = e, s = e.length > 1, i = (a == null ? void 0 : a.tagName) === "EA-SKELETON-ITEM";
+      s || i ? (e.forEach((r) => r.remove()), this.appendChild(l)) : (a.innerHTML = "", a.appendChild(l));
+    }
+  })
+], o.prototype, "count", 2);
+n([
+  m({
+    type: Number,
+    default: 0
+  })
+], o.prototype, "throttleLeading", 2);
+n([
+  m({
+    type: Number,
+    default: 0
+  })
+], o.prototype, "throttleTrailing", 2);
+n([
+  m({
+    type: Boolean,
+    default: !0,
+    observer(t) {
+      clearTimeout(this._loadingThrottle), this._loadingThrottle = b(
+        () => {
+          this.updateContainerClasslist();
+        },
+        (t ? this.throttleTrailing : this.throttleLeading) || 0
+      );
+    }
+  })
+], o.prototype, "loading", 2);
+n([
+  S("slotchange", p.ce("template"))
+], o.prototype, "_handleTemplateSlotChange", 1);
+o = n([
+  _(y, { styles: [E] })
+], o);
+const T = `
+    <svg class="ea-skeleton-item__image-placeholder" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" part="image-svg">
         <path fill="#c0c4cc" d="M0 0h100v100H0z" />
         <path fill="#fff" d="M15 20h70v60H15z" />
         <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
@@ -193,71 +151,72 @@ const I = `
         <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
     </svg>
 `;
-var g;
-class z extends S {
+var w = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (t, e, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? L(e, l) : e, i = t.length - 1, r; i >= 0; i--)
+    (r = t[i]) && (s = (a ? r(e, l, s) : r(s)) || s);
+  return a && s && w(e, l, s), s;
+};
+const C = "ea-skeleton-item", d = v(C), O = [
+  "p",
+  "text",
+  "h1",
+  "h3",
+  "caption",
+  "button",
+  "image",
+  "circle",
+  "rect"
+];
+let c = class extends f {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, g);
-    w(this, "state", this.properties({
-      variant: {
-        type: [
-          "p",
-          "text",
-          "h1",
-          "h3",
-          "caption",
-          "button",
-          "image",
-          "circle",
-          "rect"
-        ],
-        default: "p",
-        observer: (t) => {
-          t === "image" && (s(this, g).innerHTML = I), this.updateContainerClasslist();
-        }
-      },
-      animated: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    this.stylesheet = $, this.$render();
+    super(...arguments), this.variant = "p", this.animated = !1;
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "variant", "animated"];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-skeleton-item",
-      {
-        ["--" + this.variant]: this.variant
-      },
-      {
-        animated: this.animated
-      }
+    const t = d(
+      { [this.variant]: !0 },
+      { animated: this.animated }
     );
-    return s(this, g).className = t, t;
+    return this._container.className = t, t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-skeleton-item' part='container'></div>
-    `, u(this, g, this.shadowRoot.querySelector(".ea-skeleton-item"));
+  /** 渲染模板 */
+  html() {
+    const t = this.variant === "image" ? T : "";
+    return `
+      <div class="${d()}" part="container" aria-hidden="true">${t}</div>
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-g = new WeakMap();
-window.customElements.get("ea-skeleton-item") || window.customElements.define("ea-skeleton-item", z);
+};
+h([
+  u(d.cb())
+], c.prototype, "_container", 2);
+h([
+  m({
+    type: N(O),
+    default: "p",
+    observer(t) {
+      t === "image" ? this._container.innerHTML = g(T) : this._container.innerHTML = "", this.updateContainerClasslist();
+    }
+  })
+], c.prototype, "variant", 2);
+h([
+  m({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], c.prototype, "animated", 2);
+c = h([
+  _(C, { styles: [$] })
+], c);
+const j = { EaSkeleton: o, EaSkeletonItem: c };
 export {
-  B as EaSkeleton,
-  z as EaSkeletonItem
+  o as EaSkeleton,
+  c as EaSkeletonItem,
+  j as default
 };