easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-infinite-scroll.js

@@ -1,109 +1,163 @@
-var p = Object.defineProperty;
-var u = (t) => {
-  throw TypeError(t);
+import { E as f } from "../core/EaBase.ts.js";
+import { q as h, a as u, l as d, C as b } from "../core/decorator.js";
+import { E as _ } from "../utils/Enum.ts.js";
+import { s as m } from "../css/ea-infinite-scroll.style.js";
+import { c as g } from "../utils/bem.ts.js";
+class v extends Event {
+  constructor(e) {
+    super("ea-loadmore", { bubbles: !0, composed: !0 }), this.detail = e;
+  }
+}
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, e, s, a) => {
+  for (var n = a > 1 ? void 0 : a ? E(e, s) : e, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (n = (a ? c(e, s, n) : c(n)) || n);
+  return a && n && A(e, s, n), n;
 };
-var m = (t, s, e) => s in t ? p(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var b = (t, s, e) => m(t, typeof s != "symbol" ? s + "" : s, e), f = (t, s, e) => s.has(t) || u("Cannot " + e);
-var i = (t, s, e) => (f(t, s, "read from private field"), e ? e.call(t) : s.get(t)), n = (t, s, e) => s.has(t) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), d = (t, s, e, c) => (f(t, s, "write to private field"), c ? c.call(t, e) : s.set(t, e), e);
-import { B as v } from "./Base.js";
-import { s as g } from "../css/ea-infinite-scroll.style.js";
-var a, l, r, o;
-class w extends v {
+const p = "ea-infinite-scroll", i = g(p);
+let r = class extends f {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    n(this, a);
-    /** @type {HTMLElement} */
-    n(this, l);
-    /** @type {AbortController} */
-    n(this, r);
-    n(this, o, {
-      /** @type {IntersectionObserver | null} */
-      observer: null
-    });
-    b(this, "state", this.properties({
-      status: {
-        type: ["finished", "loading", "noMore"],
-        default: "finished",
-        /** @param {"loading" | "finished" | "noMore"} newVal */
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      distance: {
-        type: Number,
-        default: 0,
-        observer: () => {
-        }
-      }
-    }));
-    this.stylesheet = g, this.$render();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "distance", "status"];
+    super(...arguments), this._observer = null, this.status = "finished", this.distance = 0, this.label = "";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-infinite-scroll",
+    const t = i(
       {},
       {
-        [this.status]: this.status
+        [this.status]: this.status !== "finished"
       }
     );
-    return i(this, a).className = e, e;
+    return this._container && (this._container.className = t), t;
+  }
+  /** 更新子元素的 feed article a11y 属性 */
+  _updateArticleAttributes() {
+    if (!this._defaultSlot) return;
+    const t = this._defaultSlot.assignedElements(), e = t.length;
+    t.forEach((s, a) => {
+      s.hasAttribute("role") || s.setAttribute("role", "article"), s.setAttribute("tabindex", "0"), s.setAttribute("aria-posinset", String(a + 1)), s.setAttribute("aria-setsize", String(e));
+    });
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <section class='ea-infinite-scroll' part='container'>
-        <slot></slot>
-        <div class='ea-infinite-scroll__placeholder' part='placeholder'></div>
-        <section class='ea-infinite-scroll__loading' part='loading'>
-          <slot name='loading'></slot>
+  html() {
+    return `
+      <section class="${i()}" part="container">
+        <section class="${i.e("content")}" part="content">
+          <slot></slot>
         </section>
-        <section class='ea-infinite-scroll__noMore' part='noMore'>
-          <slot name='noMore'></slot>
+        <div class="${i.e("placeholder")}" part="placeholder"></div>
+        <section class="${i.e("loading")}" part="loading">
+          <slot name="loading"></slot>
+        </section>
+        <section class="${i.e("noMore")}" part="noMore">
+          <slot name="noMore"></slot>
         </section>
       </section>
-    `, d(this, a, this.shadowRoot.querySelector(".ea-infinite-scroll")), d(this, l, this.shadowRoot.querySelector(
-      ".ea-infinite-scroll__placeholder"
+    `;
+  }
+  /** 检查焦点 article 是否接近末尾，触发加载 */
+  _handleArticleFocus(t) {
+    if (this.status !== "finished" || !this._defaultSlot) return;
+    const e = this._defaultSlot.assignedElements(), s = e.indexOf(t);
+    if (s === -1) return;
+    const a = Math.max(1, Math.ceil(e.length * 0.1));
+    s >= e.length - a && this._triggerLoadmore();
+  }
+  /** 触发加载更多 */
+  _triggerLoadmore() {
+    this.status === "finished" && (this.status = "loading", this.updateContainerClasslist(), this.dispatchEvent(
+      new v({
+        finished: () => {
+          var t;
+          this.status = "finished", this.updateContainerClasslist(), (t = this._observer) == null || t.observe(this._placeholder);
+        },
+        noMore: () => {
+          var t;
+          this.status = "noMore", this.updateContainerClasslist(), (t = this._observer) == null || t.observe(this._placeholder);
+        }
+      })
     ));
   }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = i(this, r)) == null || e.abort(), d(this, r, new AbortController()), i(this, o).observer = new IntersectionObserver(
-      (c) => {
-        this.status === "finished" && c.forEach(async (h) => {
-          h.isIntersecting && (i(this, o).observer.unobserve(h.target), this.status = "loading", this.emit("loadmore", {
-            detail: {
-              finished: () => {
-                this.status = "finished", i(this, o).observer.observe(h.target);
-              },
-              noMore: () => {
-                this.status = "noMore", i(this, o).observer.observe(h.target);
-              }
-            },
-            bubbles: !0
-          }));
+  _handleFocusin(t) {
+    const e = t.target;
+    e.closest('[role="article"]') && this._handleArticleFocus(e.closest('[role="article"]'));
+  }
+  _handleSlotchange() {
+    this.emit("ea-infinite-scroll-slotchange", {
+      bubbles: !0,
+      composed: !0
+    }), this.emit("slotchange", { bubbles: !0, composed: !0 }), this._updateArticleAttributes();
+  }
+  /** 重新创建 IntersectionObserver */
+  _recreateObserver() {
+    var t;
+    this._placeholder && ((t = this._observer) == null || t.disconnect(), this._observer = new IntersectionObserver(
+      (e) => {
+        this.status === "finished" && e.forEach((s) => {
+          s.isIntersecting && (this._observer.unobserve(s.target), this._triggerLoadmore());
         });
       },
       {
         rootMargin: this.distance + "px"
       }
-    ), i(this, o).observer.observe(i(this, l)), this.shadowRoot.addEventListener("slotchange", () => {
-      this.emit("slotchange", { bubbles: !0, composed: !0 });
-    });
+    ), this._observer.observe(this._placeholder));
   }
-  $beforeUnmounted() {
-    var e;
-    (e = i(this, r)) == null || e.abort(), i(this, o).observer.disconnect();
+  $mount() {
+    this.hasAttribute("role") || this.setAttribute("role", "feed"), this.updateContainerClasslist(), this._recreateObserver(), this._updateArticleAttributes();
   }
-}
-a = new WeakMap(), l = new WeakMap(), r = new WeakMap(), o = new WeakMap();
-window.customElements.get("ea-infinite-scroll") || window.customElements.define("ea-infinite-scroll", w);
+  $beforeUnmount() {
+    var t;
+    (t = this._observer) == null || t.disconnect(), this._observer = null;
+  }
+};
+o([
+  h(i.cb())
+], r.prototype, "_container", 2);
+o([
+  h(i.ce("placeholder"))
+], r.prototype, "_placeholder", 2);
+o([
+  h("slot:not([name])")
+], r.prototype, "_defaultSlot", 2);
+o([
+  u({
+    type: _(["finished", "loading", "noMore"]),
+    default: "finished",
+    a11y: {
+      ariaAttr: "aria-busy",
+      map: (t) => t === "loading" ? "true" : null
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], r.prototype, "status", 2);
+o([
+  u({
+    type: Number,
+    default: 0,
+    observer() {
+      this._recreateObserver();
+    }
+  })
+], r.prototype, "distance", 2);
+o([
+  u({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      map: (t) => t || null
+    }
+  })
+], r.prototype, "label", 2);
+o([
+  d("focusin")
+], r.prototype, "_handleFocusin", 1);
+o([
+  d("slotchange", i.ce("content"))
+], r.prototype, "_handleSlotchange", 1);
+r = o([
+  b(p, { styles: [m] })
+], r);
+const x = r;
 export {
-  w as EaInfiniteScroll
+  r as EaInfiniteScroll,
+  x as default
 };