@wc-lib/infinite-scroll-list 1.0.0

package/README.md

@@ -0,0 +1,113 @@
+# 无限滚动加载组件 (infinite-scroll-list)
+
+这是一个基于Web Component技术开发的无限滚动加载组件，支持自定义加载状态和无数据状态，适用于各种滚动加载场景。
+
+## 特性
+
+- 使用Web Component技术，可在任何现代浏览器中使用
+- 支持设置触发加载的距离阈值
+- 支持外部控制是否还有下一页
+- 支持自定义加载中和无数据状态的显示
+- 支持在body或任何overflow-y: auto/scroll的容器中使用
+- 自适应父元素大小变化
+- 只在有下一页时触发加载事件，避免重复加载
+
+## 安装
+
+```bash
+# 使用pnpm安装依赖
+pnpm install
+
+# 构建组件
+pnpm build
+```
+
+## 使用方法
+
+### 基本用法
+
+```html
+<infinite-scroll-list
+  id="scrollView"
+  on-end-reached-threshold="100"
+  has-next-page="true"
+>
+  <div id="list-container">
+    <!-- 列表内容 -->
+  </div>
+  
+  <!-- 自定义加载中显示 -->
+  <div slot="loading">正在加载更多数据...</div>
+  
+  <!-- 自定义无数据显示 -->
+  <div slot="no-data">已经到底啦，没有更多数据了！</div>
+</infinite-scroll-list>
+
+<script>
+  const scrollView = document.getElementById('scrollView');
+  scrollView.addEventListener('end-reached', async () => {
+    // 加载更多数据的逻辑
+    // 注意：只有当has-next-page为true时才会触发此事件
+    const moreData = await fetchMoreData();
+    
+    // 更新列表内容
+    updateListContent(moreData);
+    
+    // 如果没有更多数据，更新has-next-page属性
+    if (!hasMoreData) {
+      scrollView.setAttribute('has-next-page', 'false');
+    }
+  });
+</script>
+```
+
+### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| on-end-reached-threshold | Number | 0 | 距离底部多少像素时触发加载事件 |
+| has-next-page | Boolean | false | 是否还有下一页数据 |
+
+### 事件
+
+| 事件名 | 说明 |
+| --- | --- |
+| end-reached | 滚动到底部时触发，只有当has-next-page为true时才会触发 |
+
+### 插槽
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 默认插槽，用于放置列表内容 |
+| loading | 加载中状态的显示内容 |
+| no-data | 没有更多数据时的显示内容 |
+
+## 示例
+
+查看 `example/index.html` 获取完整示例。
+
+## 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 开发模式（监听文件变化自动构建）
+pnpm dev
+
+# 启动示例服务器
+pnpm serve
+```
+
+## 浏览器兼容性
+
+支持所有现代浏览器，包括：
+
+- Chrome
+- Firefox
+- Safari
+- Edge
+
+## 许可证
+
+MIT

package/dist/infinite-scroll-list.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 无限滚动加载组件
+ *
+ * 功能：
+ * 1. 支持传入距离底部的距离参数(on-end-reached-threshold)
+ * 2. 支持外部传入是否还有下一页(has-next-page)
+ * 3. 支持两个slot：loading和no-data
+ * 4. 根据是否有下一页显示对应的slot内容
+ * 5. 支持在body中使用，也支持在父或祖先元素overflow-y: auto的元素中使用
+ * 6. 自适应父元素大小变化
+ * 7. 组件只在has-next-page为true时触发end-reached事件
+ */
+declare const style = "\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.relative {\n  position: relative;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.bottom-0 {\n  bottom: 0px;\n}\n\n.z-\\[-1\\] {\n  z-index: -1;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.hidden {\n  display: none;\n}\n\n.contents {\n  display: contents;\n}\n";
+declare class InfiniteScrollList extends HTMLElement {
+    private _observerRef;
+    private _resizeObserverRef;
+    private _bottomRef;
+    private _onEndReachedThreshold;
+    private _hasNextPage;
+    private _container;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _findScrollContainer;
+    private _intersectionCallback;
+    private _resizeCallback;
+    private _updateSlotVisibility;
+    private _render;
+}

package/dist/infinite-scroll-list.min.js

@@ -0,0 +1,2 @@
+!function(){"use strict";class e extends HTMLElement{constructor(){super(),this._observerRef=null,this._resizeObserverRef=null,this._bottomRef=null,this._onEndReachedThreshold=0,this._hasNextPage=!1,this._container=null,this.attachShadow({mode:"open"}),this._intersectionCallback=this._intersectionCallback.bind(this),this._resizeCallback=this._resizeCallback.bind(this)}static get observedAttributes(){return["on-end-reached-threshold","has-next-page"]}attributeChangedCallback(e,t,s){t!==s&&("on-end-reached-threshold"===e?(this._onEndReachedThreshold=Number(s)||0,this._bottomRef&&(this._bottomRef.style.height=`${this._onEndReachedThreshold}px`)):"has-next-page"===e&&(this._hasNextPage=null!==s&&"false"!==s,this._updateSlotVisibility()))}connectedCallback(){this._onEndReachedThreshold=Number(this.getAttribute("on-end-reached-threshold"))||0,this._hasNextPage="false"!==this.getAttribute("has-next-page"),this._render(),this._observerRef=new IntersectionObserver(this._intersectionCallback,{threshold:0,root:this._findScrollContainer()}),this._bottomRef&&this._observerRef.observe(this._bottomRef),this._resizeObserverRef=new ResizeObserver(this._resizeCallback),this.parentElement&&this._resizeObserverRef.observe(this.parentElement)}disconnectedCallback(){this._observerRef&&(this._observerRef.disconnect(),this._observerRef=null),this._resizeObserverRef&&(this._resizeObserverRef.disconnect(),this._resizeObserverRef=null)}_findScrollContainer(){let e=this.parentElement;for(;e;){const t=window.getComputedStyle(e).overflowY;if("auto"===t||"scroll"===t)return e;e=e.parentElement}return null}_intersectionCallback(e){const[t]=e;t.isIntersecting&&this._hasNextPage&&this.dispatchEvent(new CustomEvent("end-reached",{bubbles:!0,composed:!0}))}_resizeCallback(e){this._observerRef&&(this._observerRef.disconnect(),this._observerRef=new IntersectionObserver(this._intersectionCallback,{threshold:0,root:this._findScrollContainer()}),this._bottomRef&&this._observerRef.observe(this._bottomRef))}_updateSlotVisibility(){const e=this.shadowRoot?.querySelector(".loading-slot"),t=this.shadowRoot?.querySelector(".no-data-slot");e&&t&&(e.className=this._hasNextPage?"loading-slot contents":"loading-slot hidden",t.className=this._hasNextPage?"no-data-slot hidden":"no-data-slot contents")}_render(){if(!this.shadowRoot)return;const e=document.createElement("style");e.textContent="\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.relative {\n  position: relative;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.bottom-0 {\n  bottom: 0px;\n}\n\n.z-\\[-1\\] {\n  z-index: -1;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.hidden {\n  display: none;\n}\n\n.contents {\n  display: contents;\n}\n",this.shadowRoot.appendChild(e),this._container=document.createElement("div"),this._container.setAttribute("part","container"),this._container.className="relative",this._bottomRef=document.createElement("div"),this._bottomRef.className="absolute bottom-0 z-[-1]",this._bottomRef.style.height=`${this._onEndReachedThreshold}px`;const t=document.createElement("slot"),s=document.createElement("div");s.className=this._hasNextPage?"loading-slot contents":"loading-slot hidden";const n=document.createElement("slot");n.setAttribute("name","loading"),s.appendChild(n);const i=document.createElement("div");i.className=this._hasNextPage?"no-data-slot hidden":"no-data-slot contents";const o=document.createElement("slot");o.setAttribute("name","no-data"),i.appendChild(o),this._container.appendChild(this._bottomRef),this._container.appendChild(t),this._container.appendChild(s),this._container.appendChild(i),this.shadowRoot.appendChild(this._container)}}customElements.define("infinite-scroll-list",e)}();
+//# sourceMappingURL=infinite-scroll-list.min.js.map

package/dist/infinite-scroll-list.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll-list.min.js","sources":["../src/infinite-scroll-list.ts"],"sourcesContent":["/**\n * 无限滚动加载组件\n * \n * 功能：\n * 1. 支持传入距离底部的距离参数(on-end-reached-threshold)\n * 2. 支持外部传入是否还有下一页(has-next-page)\n * 3. 支持两个slot：loading和no-data\n * 4. 根据是否有下一页显示对应的slot内容\n * 5. 支持在body中使用，也支持在父或祖先元素overflow-y: auto的元素中使用\n * 6. 自适应父元素大小变化\n * 7. 组件只在has-next-page为true时触发end-reached事件\n */\n\n// 定义组件的样式\nconst style = `\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.relative {\n  position: relative;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.bottom-0 {\n  bottom: 0px;\n}\n\n.z-\\\\[-1\\\\] {\n  z-index: -1;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.hidden {\n  display: none;\n}\n\n.contents {\n  display: contents;\n}\n`;\n\nclass InfiniteScrollList extends HTMLElement {\n  // 私有属性\n  private _observerRef: IntersectionObserver | null = null;\n  private _resizeObserverRef: ResizeObserver | null = null;\n  private _bottomRef: HTMLDivElement | null = null;\n  private _onEndReachedThreshold: number = 0;\n  private _hasNextPage: boolean = false;\n  private _container: HTMLDivElement | null = null;\n\n  constructor() {\n    super();\n    \n    // 创建 Shadow DOM\n    this.attachShadow({ mode: 'open' });\n    \n    // 绑定回调函数，避免this指向问题\n    this._intersectionCallback = this._intersectionCallback.bind(this);\n    this._resizeCallback = this._resizeCallback.bind(this);\n  }\n\n  // 定义观察的属性\n  static get observedAttributes(): string[] {\n    return ['on-end-reached-threshold', 'has-next-page'];\n  }\n\n  // 属性变化时的回调\n  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {\n    if (oldValue === newValue) return;\n    \n    if (name === 'on-end-reached-threshold') {\n      this._onEndReachedThreshold = Number(newValue) || 0;\n      if (this._bottomRef) {\n        this._bottomRef.style.height = `${this._onEndReachedThreshold}px`;\n      }\n    } else if (name === 'has-next-page') {\n      this._hasNextPage = newValue !== null && newValue !== 'false';\n      this._updateSlotVisibility();\n    }\n  }\n\n  // 组件连接到 DOM 时\n  connectedCallback(): void {\n    // 初始化属性默认值\n    this._onEndReachedThreshold = Number(this.getAttribute('on-end-reached-threshold')) || 0;\n    this._hasNextPage = this.getAttribute('has-next-page') !== 'false';\n    \n    // 渲染组件\n    this._render();\n    \n    // 初始化 IntersectionObserver\n    this._observerRef = new IntersectionObserver(this._intersectionCallback, {\n      threshold: 0.0,\n      root: this._findScrollContainer()\n    });\n    \n    if (this._bottomRef) {\n      this._observerRef.observe(this._bottomRef);\n    }\n\n    // 初始化 ResizeObserver 监听父元素大小变化\n    this._resizeObserverRef = new ResizeObserver(this._resizeCallback);\n    if (this.parentElement) {\n      this._resizeObserverRef.observe(this.parentElement);\n    }\n  }\n\n  // 组件从 DOM 断开连接时\n  disconnectedCallback(): void {\n    // 清理 IntersectionObserver\n    if (this._observerRef) {\n      this._observerRef.disconnect();\n      this._observerRef = null;\n    }\n\n    // 清理 ResizeObserver\n    if (this._resizeObserverRef) {\n      this._resizeObserverRef.disconnect();\n      this._resizeObserverRef = null;\n    }\n  }\n\n  // 查找滚动容器\n  private _findScrollContainer(): Element | null {\n    let parent = this.parentElement;\n    \n    while (parent) {\n      const overflowY = window.getComputedStyle(parent).overflowY;\n      if (overflowY === 'auto' || overflowY === 'scroll') {\n        return parent;\n      }\n      parent = parent.parentElement;\n    }\n    \n    return null; // 如果没有找到滚动容器，则返回null，使用默认的viewport\n  }\n\n  // IntersectionObserver 回调\n  private _intersectionCallback(entries: IntersectionObserverEntry[]): void {\n    const [target] = entries;\n    if (!(target.isIntersecting)) return;\n    \n    // 只在有下一页时触发事件\n    if (this._hasNextPage) {\n      // 触发自定义事件\n      this.dispatchEvent(new CustomEvent('end-reached', {\n        bubbles: true,\n        composed: true\n      }));\n    }\n  }\n\n  // ResizeObserver 回调\n  private _resizeCallback(entries: ResizeObserverEntry[]): void {\n    // 当父元素大小变化时，重新初始化观察器\n    if (this._observerRef) {\n      this._observerRef.disconnect();\n      \n      this._observerRef = new IntersectionObserver(this._intersectionCallback, {\n        threshold: 0.0,\n        root: this._findScrollContainer()\n      });\n      \n      if (this._bottomRef) {\n        this._observerRef.observe(this._bottomRef);\n      }\n    }\n  }\n\n  // 更新插槽可见性\n  private _updateSlotVisibility(): void {\n    const loadingSlot = this.shadowRoot?.querySelector('.loading-slot');\n    const noDataSlot = this.shadowRoot?.querySelector('.no-data-slot');\n    \n    if (loadingSlot && noDataSlot) {\n      loadingSlot.className = this._hasNextPage ? 'loading-slot contents' : 'loading-slot hidden';\n      noDataSlot.className = this._hasNextPage ? 'no-data-slot hidden' : 'no-data-slot contents';\n    }\n  }\n\n  // 渲染组件\n  private _render(): void {\n    if (!this.shadowRoot) return;\n    \n    // 添加样式\n    const styleElement = document.createElement('style');\n    styleElement.textContent = style;\n    this.shadowRoot.appendChild(styleElement);\n    \n    // 创建容器\n    this._container = document.createElement('div');\n    this._container.setAttribute('part', 'container');\n    this._container.className = 'relative';\n    \n    // 创建底部观察元素\n    this._bottomRef = document.createElement('div');\n    this._bottomRef.className = 'absolute bottom-0 z-[-1]';\n    this._bottomRef.style.height = `${this._onEndReachedThreshold}px`;\n    \n    // 创建内容插槽\n    const defaultSlot = document.createElement('slot');\n    \n    // 创建加载中插槽\n    const loadingSlot = document.createElement('div');\n    loadingSlot.className = this._hasNextPage ? 'loading-slot contents' : 'loading-slot hidden';\n    \n    const loadingNamedSlot = document.createElement('slot');\n    loadingNamedSlot.setAttribute('name', 'loading');\n    \n    loadingSlot.appendChild(loadingNamedSlot);\n    \n    // 创建无数据插槽\n    const noDataSlot = document.createElement('div');\n    noDataSlot.className = this._hasNextPage ? 'no-data-slot hidden' : 'no-data-slot contents';\n    \n    const noDataNamedSlot = document.createElement('slot');\n    noDataNamedSlot.setAttribute('name', 'no-data');\n    \n    noDataSlot.appendChild(noDataNamedSlot);\n    \n    // 组装组件\n    this._container.appendChild(this._bottomRef);\n    this._container.appendChild(defaultSlot);\n    this._container.appendChild(loadingSlot);\n    this._container.appendChild(noDataSlot);\n    \n    this.shadowRoot.appendChild(this._container);\n  }\n}\n\n// 注册自定义元素\ncustomElements.define('infinite-scroll-list', InfiniteScrollList);\n"],"names":["InfiniteScrollList","HTMLElement","constructor","super","this","_observerRef","_resizeObserverRef","_bottomRef","_onEndReachedThreshold","_hasNextPage","_container","attachShadow","mode","_intersectionCallback","bind","_resizeCallback","observedAttributes","attributeChangedCallback","name","oldValue","newValue","Number","style","height","_updateSlotVisibility","connectedCallback","getAttribute","_render","IntersectionObserver","threshold","root","_findScrollContainer","observe","ResizeObserver","parentElement","disconnectedCallback","disconnect","parent","overflowY","window","getComputedStyle","entries","target","dispatchEvent","CustomEvent","bubbles","composed","loadingSlot","shadowRoot","querySelector","noDataSlot","className","styleElement","document","createElement","textContent","appendChild","setAttribute","defaultSlot","loadingNamedSlot","noDataNamedSlot","customElements","define"],"mappings":"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"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@wc-lib/infinite-scroll-list",
+  "version": "1.0.0",
+  "description": "Web Component for infinite scroll loading",
+  "type": "module",
+  "main": "dist/infinite-scroll-list.min.js",
+  "types": "dist/infinite-scroll-list.d.ts",
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "serve": "http-server -p 8080",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "web-component",
+    "infinite-scroll",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup": "^3.20.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}