select-pagination-element-plus 0.0.1

package/README.md

@@ -0,0 +1,143 @@
+# SelectPagination (Element Plus)
+
+[中文文档](./README.zh-CN.md)
+
+`SelectPagination` is a Vue 3 + Element Plus `<el-select>` wrapper that supports remote search + paginated loading (infinite load) with optional cache and value echo (detail API).
+
+## Features
+
+- Remote search + pagination (`api`, `pageKey`, `sizeKey`, `keyword`, `responsePath`)
+- Infinite loading via `IntersectionObserver` (no scroll listener / no Element Plus internal class dependency)
+- Optional cache (`enableCache`, `cacheKey`)
+- Optional “value echo” (`detailApi`)
+- Supports single / multiple select
+- Footer slot to fully customize “loading / no more / load more”
+
+## Requirements
+
+- Vue 3
+- Element Plus
+
+## Install
+
+Replace `YOUR_PACKAGE_NAME` with your published npm package name.
+
+```bash
+npm i YOUR_PACKAGE_NAME
+```
+
+## Basic Usage
+
+```vue
+<template>
+  <SelectPagination v-model="value" :api="fetchUsers" placeholder="Type to search" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SelectPagination from 'YOUR_PACKAGE_NAME'
+
+const value = ref('')
+
+const fetchUsers = async (params: any) => {
+  // params = { page, size, name, ...yourExtraParams }
+  // Must return an object that contains { content, totalElements } at responsePath (default: data.data)
+  return {
+    data: {
+      data: {
+        content: [
+          { id: 'u-1', label: 'User 1', value: 'u-1' },
+          { id: 'u-2', label: 'User 2', value: 'u-2' }
+        ],
+        totalElements: 2
+      }
+    }
+  }
+}
+</script>
+```
+
+## API Response Format
+
+By default `responsePath = "data.data"`, which should point to an object like:
+
+```ts
+{
+  content: any[]
+  totalElements: number
+}
+```
+
+If your backend returns a different shape, set `responsePath` accordingly.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| modelValue | `string \| number \| any[]` | `''` | v-model |
+| isRemote | `boolean` | `true` | Enables Element Plus remote mode (`:remote`) |
+| api | `(params) => any` or `() => (params) => any` | - | Fetch list API |
+| apiAsync | `boolean` | `false` | If `true`, treat `api` as a factory (`() => apiFn`) |
+| params | `object \| () => object` | `{}` | Extra query params merged into request |
+| labelField | `string` | `'label'` | Option label field |
+| valueField | `string` | `'value'` | Option value field |
+| pageSize | `number` | `10` | Page size |
+| pageKey | `string` | `'page'` | Page number param key |
+| sizeKey | `string` | `'size'` | Page size param key |
+| keyword | `string` | `'name'` | Search keyword param key |
+| responsePath | `string` | `'data.data'` | Path to `{ content, totalElements }` |
+| enableCache | `boolean` | `true` | Cache options/paging/keyword |
+| cacheKey | `string` | `''` | Cache namespace; if empty, generated from `api.name + params` |
+| changeDetail | `boolean` | `false` | Emit selected option detail(s) |
+| detailApi | `(value) => any` | `null` | Fetch option detail for echo |
+| initOptions | `any[]` | `[]` | Initial options appended into options list |
+| popperClass | `string` | `''` | Extra popper class (scoped styles rely on `select-pagination-popper`) |
+| footerSentinelId | `string` | `''` | Custom sentinel element id for infinite loading |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| update:modelValue | `any` | v-model update |
+| change | `any` | same as Element Plus change |
+| change-detail | `any \| any[] \| null` | selected option detail(s) when `changeDetail = true` |
+
+## Slots
+
+### footer
+
+Slot props:
+
+- `loading`: `boolean`
+- `hasMore`: `boolean`
+- `options`: `any[]`
+- `loadMore`: `() => void`
+
+Example:
+
+```vue
+<SelectPagination v-model="value" :api="fetchUsers" footer-sentinel-id="user-select-footer">
+  <template #footer="{ loading, hasMore, loadMore }">
+    <div v-if="loading" style="padding: 8px 0; text-align: center">Loading...</div>
+    <div v-else-if="!hasMore" style="padding: 8px 0; text-align: center">No more</div>
+    <div v-else style="padding: 8px 0; text-align: center; cursor: pointer" @click="loadMore">
+      Click to load more
+    </div>
+  </template>
+</SelectPagination>
+```
+
+## Exposed Methods
+
+Access via template ref:
+
+- `loadData(isReset?: boolean)`
+- `clearCache()`
+- `restoreCache()`
+- `updateValue(val)`
+- `loadEchoData()`
+- `setPage(page: number)`
+- `setOptions(options: any[])`
+- `options` (ref)
+- `currentPage` (ref)
+

package/README.zh-CN.md

@@ -0,0 +1,143 @@
+# SelectPagination（Element Plus）
+
+[English](./README.md)
+
+`SelectPagination` 是一个基于 Vue 3 + Element Plus 的 `<el-select>` 封装组件，支持远程搜索 + 分页加载（无限滚动/触底加载），并提供可选缓存与回显能力（detailApi）。
+
+## 特性
+
+- 远程搜索 + 分页（`api`, `pageKey`, `sizeKey`, `keyword`, `responsePath`）
+- 使用 `IntersectionObserver` 实现触底加载（不绑定 scroll 事件 / 不依赖 Element Plus 内部 class）
+- 可选缓存（`enableCache`, `cacheKey`）
+- 可选回显（`detailApi`）
+- 支持单选 / 多选
+- `footer` slot 可完全自定义“加载中/没有更多/加载更多”
+
+## 环境要求
+
+- Vue 3
+- Element Plus
+
+## 安装
+
+把 `YOUR_PACKAGE_NAME` 替换成你发布到 npm 的包名。
+
+```bash
+npm i YOUR_PACKAGE_NAME
+```
+
+## 基础使用
+
+```vue
+<template>
+  <SelectPagination v-model="value" :api="fetchUsers" placeholder="输入关键词搜索" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SelectPagination from 'YOUR_PACKAGE_NAME'
+
+const value = ref('')
+
+const fetchUsers = async (params: any) => {
+  // params = { page, size, name, ...你额外的 params }
+  // 必须在 responsePath（默认：data.data）对应的位置返回 { content, totalElements }
+  return {
+    data: {
+      data: {
+        content: [
+          { id: 'u-1', label: '用户 1', value: 'u-1' },
+          { id: 'u-2', label: '用户 2', value: 'u-2' }
+        ],
+        totalElements: 2
+      }
+    }
+  }
+}
+</script>
+```
+
+## 接口返回格式
+
+默认 `responsePath = "data.data"`，该路径需要指向如下对象：
+
+```ts
+{
+  content: any[]
+  totalElements: number
+}
+```
+
+如果你的后端返回结构不同，调整 `responsePath` 即可。
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| modelValue | `string \| number \| any[]` | `''` | v-model |
+| isRemote | `boolean` | `true` | 是否启用 Element Plus 的 remote 模式（`:remote`） |
+| api | `(params) => any` 或 `() => (params) => any` | - | 拉取列表数据的 API |
+| apiAsync | `boolean` | `false` | 为 `true` 时，`api` 视为工厂函数（`() => apiFn`） |
+| params | `object \| () => object` | `{}` | 额外查询参数（会合并进请求参数） |
+| labelField | `string` | `'label'` | label 字段名 |
+| valueField | `string` | `'value'` | value 字段名 |
+| pageSize | `number` | `10` | 每页数量 |
+| pageKey | `string` | `'page'` | 页码参数名 |
+| sizeKey | `string` | `'size'` | 每页大小参数名 |
+| keyword | `string` | `'name'` | 搜索关键词参数名 |
+| responsePath | `string` | `'data.data'` | 响应中 `{ content, totalElements }` 的路径 |
+| enableCache | `boolean` | `true` | 是否启用缓存 |
+| cacheKey | `string` | `''` | 缓存命名空间；为空时由 `api.name + params` 生成 |
+| changeDetail | `boolean` | `false` | 是否在 change 时额外返回选中项详情 |
+| detailApi | `(value) => any` | `null` | 回显用详情接口（通过 value 拉取对应 option 数据） |
+| initOptions | `any[]` | `[]` | 初始 options，会合并进 options 列表 |
+| popperClass | `string` | `''` | 额外 popper class（组件样式基于 `select-pagination-popper` 作用域） |
+| footerSentinelId | `string` | `''` | 自定义 footer sentinel 的 DOM id（用于触底加载定位） |
+
+## 事件
+
+| 事件 | 参数 | 说明 |
+| --- | --- | --- |
+| update:modelValue | `any` | v-model 更新 |
+| change | `any` | 选中值变化 |
+| change-detail | `any \| any[] \| null` | `changeDetail = true` 时返回选中项详情（单选/多选） |
+
+## Slots
+
+### footer
+
+slot 参数：
+
+- `loading`: `boolean`
+- `hasMore`: `boolean`
+- `options`: `any[]`
+- `loadMore`: `() => void`
+
+示例：
+
+```vue
+<SelectPagination v-model="value" :api="fetchUsers" footer-sentinel-id="user-select-footer">
+  <template #footer="{ loading, hasMore, loadMore }">
+    <div v-if="loading" style="padding: 8px 0; text-align: center">加载中...</div>
+    <div v-else-if="!hasMore" style="padding: 8px 0; text-align: center">没有更多了</div>
+    <div v-else style="padding: 8px 0; text-align: center; cursor: pointer" @click="loadMore">
+      点击加载更多
+    </div>
+  </template>
+</SelectPagination>
+```
+
+## 暴露方法（ref）
+
+通过组件 ref 访问：
+
+- `loadData(isReset?: boolean)`
+- `clearCache()`
+- `restoreCache()`
+- `updateValue(val)`
+- `loadEchoData()`
+- `setPage(page: number)`
+- `setOptions(options: any[])`
+- `options`（ref）
+- `currentPage`（ref）
+

package/dist/SelectPagination.vue.d.ts

@@ -0,0 +1,215 @@
+import { PropType } from 'vue';
+type ApiParams = Record<string, any>;
+type ApiFunction = (params: ApiParams) => any;
+type ApiFactory = () => ApiFunction | Promise<ApiFunction>;
+type ApiProp = ApiFunction | ApiFactory;
+type ParamsSource = ApiParams | (() => ApiParams);
+type DetailApiFunction = (value: any) => any;
+declare var __VLS_16: {
+    loading: boolean;
+    hasMore: boolean;
+    options: any[];
+    loadMore: () => void;
+};
+type __VLS_Slots = {} & {
+    footer?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    isRemote: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<string | number | Array<any>>;
+        default: string;
+    };
+    api: {
+        type: PropType<ApiProp>;
+        required: false;
+    };
+    apiAsync: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    params: {
+        type: PropType<ParamsSource>;
+        default: () => {};
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pageKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    sizeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    responsePath: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cacheKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    changeDetail: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    detailApi: {
+        type: PropType<DetailApiFunction | null>;
+        default: null;
+    };
+    initOptions: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    footerSentinelId: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    loadData: (isReset?: boolean) => Promise<void>;
+    clearCache: () => void;
+    restoreCache: () => boolean;
+    updateValue: (val: any) => void;
+    loadEchoData: () => Promise<void>;
+    options: import("vue").Ref<any[], any[]>;
+    currentPage: import("vue").Ref<number, number>;
+    setPage: (page: number) => void;
+    setOptions: (newOptions: any[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    change: (...args: any[]) => void;
+    "change-detail": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isRemote: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<string | number | Array<any>>;
+        default: string;
+    };
+    api: {
+        type: PropType<ApiProp>;
+        required: false;
+    };
+    apiAsync: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    params: {
+        type: PropType<ParamsSource>;
+        default: () => {};
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    pageKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    sizeKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    responsePath: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableCache: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cacheKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    changeDetail: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    detailApi: {
+        type: PropType<DetailApiFunction | null>;
+        default: null;
+    };
+    initOptions: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    popperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    footerSentinelId: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onChange-detail"?: ((...args: any[]) => any) | undefined;
+}>, {
+    isRemote: boolean;
+    modelValue: string | number | any[];
+    apiAsync: boolean;
+    params: ParamsSource;
+    labelField: string;
+    valueField: string;
+    pageSize: number;
+    pageKey: string;
+    sizeKey: string;
+    keyword: string;
+    responsePath: string;
+    enableCache: boolean;
+    cacheKey: string;
+    changeDetail: boolean;
+    detailApi: DetailApiFunction | null;
+    initOptions: any[];
+    popperClass: string;
+    footerSentinelId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),le=require("lodash-es"),ne={style:{width:"100%"}},oe=["id"],re={key:0,class:"loading-more"},se={key:1,class:"no-more"},ie="select-pagination-popper",ue=a.defineComponent({__name:"SelectPagination",props:{isRemote:{type:Boolean,default:!0},modelValue:{type:[String,Number,Array],default:""},api:{type:Function,required:!1},apiAsync:{type:Boolean,default:!1},params:{type:[Object,Function],default:()=>({})},labelField:{type:String,default:"label"},valueField:{type:String,default:"value"},pageSize:{type:Number,default:10},pageKey:{type:String,default:"page"},sizeKey:{type:String,default:"size"},keyword:{type:String,default:"name"},responsePath:{type:String,default:"data.data"},enableCache:{type:Boolean,default:!0},cacheKey:{type:String,default:""},changeDetail:{type:Boolean,default:!1},detailApi:{type:Function,default:null},initOptions:{type:Array,default:()=>[]},popperClass:{type:String,default:""},footerSentinelId:{type:String,default:""}},emits:["update:modelValue","change","change-detail"],setup(v,{expose:C,emit:y}){var K;const V=new Map,t=v,g=y,_=a.useAttrs(),z=((K=a.getCurrentInstance())==null?void 0:K.uid)??Date.now(),I=a.computed(()=>t.footerSentinelId||`select-pagination-footer-${z}`),T=a.computed(()=>{const e=_["popper-class"]??_.popperClass;return typeof e=="string"?e:""}),L=a.computed(()=>[T.value,t.popperClass,ie].filter(Boolean).join(" ")),k=e=>{if(S.value=!0,g("update:modelValue",e),g("change",e),e&&t.changeDetail){let l=null;Array.isArray(e)?l=r.value.filter(n=>e.find(o=>n[d.value]===o)):l=r.value.find(n=>n[d.value]===e),g("change-detail",l)}},r=a.ref([]),s=a.ref(!1),i=a.ref(!0),c=a.ref(1),m=a.ref(""),D=a.ref(!1),S=a.ref(!1),B=V,O=()=>{var n;if(t.cacheKey)return t.cacheKey;const e=((n=t==null?void 0:t.api)==null?void 0:n.name)||"anonymous",l=JSON.stringify(t.params);return`${e}_${btoa(l)}`},R=()=>{if(!t.enableCache)return;const e=O();B.set(e,{options:[...r.value],currentPage:c.value,hasMore:i.value,keyword:m.value})},P=()=>{if(!t.enableCache)return!1;const e=O(),l=B.get(e);return l?(r.value=[...l.options],c.value=l.currentPage,i.value=l.hasMore,m.value=l.keyword,!0):!1},b=()=>{if(!t.enableCache)return;const e=O();B.delete(e)},j=a.computed(()=>t.labelField),d=a.computed(()=>t.valueField),U=(e,l)=>l.split(".").reduce((n,o)=>{if(n!=null)return n[o]},e),E=a.computed(()=>t.isRemote&&typeof t.api=="function");let p=null,h=null;const A=()=>{h&&(h.disconnect(),h=null),p=null},H=e=>{if(!e)return null;let l=e.parentElement;for(;l;){const o=window.getComputedStyle(l).overflowY;if((o==="auto"||o==="scroll"||o==="overlay")&&l.scrollHeight>l.clientHeight)return l;l=l.parentElement}return null},Y=async()=>{if(A(),!E.value)return;await a.nextTick();const e=document.getElementById(I.value);e&&(p=H(e),h=new IntersectionObserver(l=>{const n=l[0];n!=null&&n.isIntersecting&&E.value&&(s.value||i.value&&f())},{root:p,rootMargin:"0px 0px 120px 0px",threshold:0}),h.observe(e))},J=(e=!0)=>{r.value=e&&t.initOptions&&t.initOptions.length>0?[...t.initOptions]:[],c.value=1,i.value=!0,m.value="",s.value=!1},f=async(e=!1)=>{if(s.value)return;let l=0;e||p&&(l=p.scrollTop),e&&(r.value=[],c.value=1,i.value=!0,b()),s.value=!0;try{const o={...(typeof t.params=="function"?t.params():t.params)||{},[t.pageKey]:c.value,[t.sizeKey]:t.pageSize,[t.keyword]:m.value};if(!t.api)return;const u=await(t.apiAsync?await t.api():t.api)(o),F=U(u,t.responsePath);if(F){const q=F.content??[],ee=F.totalElements??0,te=r.value.length;if(e)r.value=q||[];else{const ae=W(q||[]);r.value=[...r.value,...ae]}i.value=r.value.length<ee,i.value&&c.value++,R(),!e&&p&&te>0&&(await a.nextTick(),requestAnimationFrame(()=>{p&&(p.scrollTop=l)}))}else console.error("响应数据格式不正确",u)}catch(n){console.error("加载数据失败",n)}finally{s.value=!1}},w=a.ref(!1),G=e=>{w.value||m.value!==e&&(m.value=e,f(!0))},Q=e=>{e?(!P()&&r.value.length===0&&f(!0),Y()):A()},M=async()=>{const e=Array.isArray(t.modelValue)?t.modelValue.length>0:!!t.modelValue;if(!(!t.detailApi||!e||D.value))try{s.value=!0;let l=[];if(Array.isArray(t.modelValue)){for(const n of t.modelValue)if(n){const o=await t.detailApi(n);o&&o.data&&l.push(o.data)}}else{let o=await t.detailApi(t.modelValue);for(;o&&!o.id&&o.data;)o=o.data;o&&o.id&&(l=[o])}l.length>0&&(r.value=[...l,...r.value]),D.value=!0}catch(l){console.error("加载回显数据失败",l)}finally{s.value=!1}},W=e=>{const l=new Set(r.value.map(n=>n[d.value]));return e.filter(n=>!l.has(n[d.value]))},X=async()=>{t.initOptions&&t.initOptions.length>0&&(r.value=[...t.initOptions]),P()||(await M(),t.modelValue&&r.value.length===0&&await f(!0))};a.onMounted(()=>{X()}),a.watch(()=>t.api,(e,l)=>{e!==l&&(J(!0),b(),l&&!e&&(g("update:modelValue",""),g("change","")),t.modelValue&&e&&f(!0))},{immediate:!1}),a.watch(()=>t.params,(e,l)=>{le.isEqual(e,l)||(b(),t.initOptions&&t.initOptions.length>0&&(r.value=[...t.initOptions]),f(!0),_.multiple?k([]):k(""))},{deep:!0}),a.watch(()=>t.modelValue,async(e,l)=>{e&&e!==l&&t.detailApi&&!S.value&&await M(),S.value&&(S.value=!1)},{immediate:!1});const N=()=>{!s.value&&i.value&&f()},Z=()=>{w.value&&(w.value=!1)};return a.watch(()=>t.initOptions,e=>{if(e&&e.length>0){const l=new Set(r.value.map(o=>o[d.value])),n=e.filter(o=>!l.has(o[d.value]));r.value=[...n,...r.value]}},{immediate:!0,deep:!0}),C({loadData:f,clearCache:b,restoreCache:P,updateValue:k,loadEchoData:M,options:r,currentPage:c,setPage:e=>{c.value=e},setOptions:e=>{r.value=[...e]}}),a.onBeforeUnmount(()=>{A()}),(e,l)=>{const n=a.resolveComponent("el-option"),o=a.resolveComponent("el-select"),x=a.resolveDirective("loading");return a.withDirectives((a.openBlock(),a.createElementBlock("div",ne,[a.createVNode(o,a.mergeProps({"model-value":v.modelValue,"onUpdate:modelValue":k},e.$attrs,{"popper-class":L.value,"remote-method":G,filterable:!0,remote:v.isRemote,onVisibleChange:Q,onCompositionstart:l[0]||(l[0]=u=>w.value=!0),onCompositionend:Z,clearable:"","remote-show-suffix":""}),{default:a.withCtx(()=>[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(r.value,u=>(a.openBlock(),a.createBlock(n,{key:u[d.value]??u.id,label:u[j.value],value:u[d.value],disabled:u.disabled},null,8,["label","value","disabled"]))),128)),a.createElementVNode("div",{id:I.value},[a.renderSlot(e.$slots,"footer",{loading:s.value,hasMore:i.value,options:r.value,loadMore:N},()=>[E.value&&r.value.length>0?(a.openBlock(),a.createElementBlock(a.Fragment,{key:0},[s.value?(a.openBlock(),a.createElementBlock("div",re,"加载中...")):i.value?(a.openBlock(),a.createElementBlock("div",{key:2,class:"more-hint",onClick:N},[...l[1]||(l[1]=[a.createElementVNode("span",{class:"more-text"},"点击或下拉加载更多",-1)])])):(a.openBlock(),a.createElementBlock("div",se,"没有更多数据"))],64)):a.createCommentVNode("",!0)],!0)],8,oe)]),_:3},16,["model-value","popper-class","remote"])])),[[x,s.value]])}}}),ce=(v,C)=>{const y=v.__vccOpts||v;for(const[V,t]of C)y[V]=t;return y},$=ce(ue,[["__scopeId","data-v-88571e50"]]);exports.SelectPagination=$;exports.default=$;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import SelectPagination from './SelectPagination.vue';
+export { SelectPagination };
+export default SelectPagination;

package/dist/index.js

@@ -0,0 +1,287 @@
+import { defineComponent as ce, useAttrs as de, getCurrentInstance as pe, computed as h, ref as f, onMounted as fe, watch as k, onBeforeUnmount as ve, resolveComponent as T, resolveDirective as me, withDirectives as ge, openBlock as v, createElementBlock as y, createVNode as he, mergeProps as ye, withCtx as Ce, Fragment as U, renderList as be, createBlock as Se, createElementVNode as j, renderSlot as we, createCommentVNode as Ve, nextTick as H } from "vue";
+import { isEqual as Oe } from "lodash-es";
+const _e = { style: { width: "100%" } }, ke = ["id"], Pe = {
+  key: 0,
+  class: "loading-more"
+}, Ae = {
+  key: 1,
+  class: "no-more"
+}, Me = "select-pagination-popper", xe = /* @__PURE__ */ ce({
+  __name: "SelectPagination",
+  props: {
+    isRemote: { type: Boolean, default: !0 },
+    modelValue: {
+      type: [String, Number, Array],
+      default: ""
+    },
+    api: { type: Function, required: !1 },
+    apiAsync: { type: Boolean, default: !1 },
+    params: {
+      type: [Object, Function],
+      default: () => ({})
+    },
+    labelField: { type: String, default: "label" },
+    valueField: { type: String, default: "value" },
+    pageSize: { type: Number, default: 10 },
+    pageKey: { type: String, default: "page" },
+    sizeKey: { type: String, default: "size" },
+    keyword: { type: String, default: "name" },
+    responsePath: { type: String, default: "data.data" },
+    enableCache: { type: Boolean, default: !0 },
+    cacheKey: { type: String, default: "" },
+    changeDetail: { type: Boolean, default: !1 },
+    detailApi: {
+      type: Function,
+      default: null
+    },
+    initOptions: { type: Array, default: () => [] },
+    popperClass: { type: String, default: "" },
+    footerSentinelId: { type: String, default: "" }
+  },
+  emits: ["update:modelValue", "change", "change-detail"],
+  setup(m, { expose: P, emit: S }) {
+    var L;
+    const A = /* @__PURE__ */ new Map(), t = m, C = S, M = de(), Y = ((L = pe()) == null ? void 0 : L.uid) ?? Date.now(), $ = h(
+      () => t.footerSentinelId || `select-pagination-footer-${Y}`
+    ), J = h(() => {
+      const e = M["popper-class"] ?? M.popperClass;
+      return typeof e == "string" ? e : "";
+    }), G = h(() => [J.value, t.popperClass, Me].filter(Boolean).join(" ")), w = (e) => {
+      if (V.value = !0, C("update:modelValue", e), C("change", e), e && t.changeDetail) {
+        let a = null;
+        Array.isArray(e) ? a = o.value.filter((l) => e.find((n) => l[c.value] === n)) : a = o.value.find((l) => l[c.value] === e), C("change-detail", a);
+      }
+    }, o = f([]), r = f(!1), s = f(!0), u = f(1), g = f(""), z = f(!1), V = f(!1), x = A, I = () => {
+      var l;
+      if (t.cacheKey)
+        return t.cacheKey;
+      const e = ((l = t == null ? void 0 : t.api) == null ? void 0 : l.name) || "anonymous", a = JSON.stringify(t.params);
+      return `${e}_${btoa(a)}`;
+    }, Q = () => {
+      if (!t.enableCache) return;
+      const e = I();
+      x.set(e, {
+        options: [...o.value],
+        currentPage: u.value,
+        hasMore: s.value,
+        keyword: g.value
+      });
+    }, E = () => {
+      if (!t.enableCache) return !1;
+      const e = I(), a = x.get(e);
+      return a ? (o.value = [...a.options], u.value = a.currentPage, s.value = a.hasMore, g.value = a.keyword, !0) : !1;
+    }, O = () => {
+      if (!t.enableCache) return;
+      const e = I();
+      x.delete(e);
+    }, W = h(() => t.labelField), c = h(() => t.valueField), X = (e, a) => a.split(".").reduce((l, n) => {
+      if (l != null)
+        return l[n];
+    }, e), F = h(() => t.isRemote && typeof t.api == "function");
+    let d = null, b = null;
+    const B = () => {
+      b && (b.disconnect(), b = null), d = null;
+    }, Z = (e) => {
+      if (!e) return null;
+      let a = e.parentElement;
+      for (; a; ) {
+        const n = window.getComputedStyle(a).overflowY;
+        if ((n === "auto" || n === "scroll" || n === "overlay") && a.scrollHeight > a.clientHeight) return a;
+        a = a.parentElement;
+      }
+      return null;
+    }, ee = async () => {
+      if (B(), !F.value) return;
+      await H();
+      const e = document.getElementById($.value);
+      e && (d = Z(e), b = new IntersectionObserver(
+        (a) => {
+          const l = a[0];
+          l != null && l.isIntersecting && F.value && (r.value || s.value && p());
+        },
+        {
+          root: d,
+          rootMargin: "0px 0px 120px 0px",
+          threshold: 0
+        }
+      ), b.observe(e));
+    }, te = (e = !0) => {
+      o.value = e && t.initOptions && t.initOptions.length > 0 ? [...t.initOptions] : [], u.value = 1, s.value = !0, g.value = "", r.value = !1;
+    }, p = async (e = !1) => {
+      if (r.value) return;
+      let a = 0;
+      e || d && (a = d.scrollTop), e && (o.value = [], u.value = 1, s.value = !0, O()), r.value = !0;
+      try {
+        const n = {
+          ...(typeof t.params == "function" ? t.params() : t.params) || {},
+          [t.pageKey]: u.value,
+          [t.sizeKey]: t.pageSize,
+          [t.keyword]: g.value
+        };
+        if (!t.api) return;
+        const i = await (t.apiAsync ? await t.api() : t.api)(n), K = X(i, t.responsePath);
+        if (K) {
+          const R = K.content ?? [], se = K.totalElements ?? 0, ie = o.value.length;
+          if (e)
+            o.value = R || [];
+          else {
+            const ue = ne(R || []);
+            o.value = [...o.value, ...ue];
+          }
+          s.value = o.value.length < se, s.value && u.value++, Q(), !e && d && ie > 0 && (await H(), requestAnimationFrame(() => {
+            d && (d.scrollTop = a);
+          }));
+        } else
+          console.error("响应数据格式不正确", i);
+      } catch (l) {
+        console.error("加载数据失败", l);
+      } finally {
+        r.value = !1;
+      }
+    }, _ = f(!1), ae = (e) => {
+      _.value || g.value !== e && (g.value = e, p(!0));
+    }, le = (e) => {
+      e ? (!E() && o.value.length === 0 && p(!0), ee()) : B();
+    }, D = async () => {
+      const e = Array.isArray(t.modelValue) ? t.modelValue.length > 0 : !!t.modelValue;
+      if (!(!t.detailApi || !e || z.value))
+        try {
+          r.value = !0;
+          let a = [];
+          if (Array.isArray(t.modelValue)) {
+            for (const l of t.modelValue)
+              if (l) {
+                const n = await t.detailApi(l);
+                n && n.data && a.push(n.data);
+              }
+          } else {
+            let n = await t.detailApi(t.modelValue);
+            for (; n && !n.id && n.data; )
+              n = n.data;
+            n && n.id && (a = [n]);
+          }
+          a.length > 0 && (o.value = [...a, ...o.value]), z.value = !0;
+        } catch (a) {
+          console.error("加载回显数据失败", a);
+        } finally {
+          r.value = !1;
+        }
+    }, ne = (e) => {
+      const a = new Set(o.value.map((l) => l[c.value]));
+      return e.filter((l) => !a.has(l[c.value]));
+    }, oe = async () => {
+      t.initOptions && t.initOptions.length > 0 && (o.value = [...t.initOptions]), E() || (await D(), t.modelValue && o.value.length === 0 && await p(!0));
+    };
+    fe(() => {
+      oe();
+    }), k(
+      () => t.api,
+      (e, a) => {
+        e !== a && (te(!0), O(), a && !e && (C("update:modelValue", ""), C("change", "")), t.modelValue && e && p(!0));
+      },
+      { immediate: !1 }
+    ), k(
+      () => t.params,
+      (e, a) => {
+        Oe(e, a) || (O(), t.initOptions && t.initOptions.length > 0 && (o.value = [...t.initOptions]), p(!0), M.multiple ? w([]) : w(""));
+      },
+      { deep: !0 }
+    ), k(
+      () => t.modelValue,
+      async (e, a) => {
+        e && e !== a && t.detailApi && !V.value && await D(), V.value && (V.value = !1);
+      },
+      { immediate: !1 }
+    );
+    const q = () => {
+      !r.value && s.value && p();
+    }, re = () => {
+      _.value && (_.value = !1);
+    };
+    return k(
+      () => t.initOptions,
+      (e) => {
+        if (e && e.length > 0) {
+          const a = new Set(o.value.map((n) => n[c.value])), l = e.filter(
+            (n) => !a.has(n[c.value])
+          );
+          o.value = [...l, ...o.value];
+        }
+      },
+      { immediate: !0, deep: !0 }
+    ), P({
+      loadData: p,
+      clearCache: O,
+      restoreCache: E,
+      updateValue: w,
+      loadEchoData: D,
+      options: o,
+      currentPage: u,
+      setPage: (e) => {
+        u.value = e;
+      },
+      setOptions: (e) => {
+        o.value = [...e];
+      }
+    }), ve(() => {
+      B();
+    }), (e, a) => {
+      const l = T("el-option"), n = T("el-select"), N = me("loading");
+      return ge((v(), y("div", _e, [
+        he(n, ye({
+          "model-value": m.modelValue,
+          "onUpdate:modelValue": w
+        }, e.$attrs, {
+          "popper-class": G.value,
+          "remote-method": ae,
+          filterable: !0,
+          remote: m.isRemote,
+          onVisibleChange: le,
+          onCompositionstart: a[0] || (a[0] = (i) => _.value = !0),
+          onCompositionend: re,
+          clearable: "",
+          "remote-show-suffix": ""
+        }), {
+          default: Ce(() => [
+            (v(!0), y(U, null, be(o.value, (i) => (v(), Se(l, {
+              key: i[c.value] ?? i.id,
+              label: i[W.value],
+              value: i[c.value],
+              disabled: i.disabled
+            }, null, 8, ["label", "value", "disabled"]))), 128)),
+            j("div", { id: $.value }, [
+              we(e.$slots, "footer", {
+                loading: r.value,
+                hasMore: s.value,
+                options: o.value,
+                loadMore: q
+              }, () => [
+                F.value && o.value.length > 0 ? (v(), y(U, { key: 0 }, [
+                  r.value ? (v(), y("div", Pe, "加载中...")) : s.value ? (v(), y("div", {
+                    key: 2,
+                    class: "more-hint",
+                    onClick: q
+                  }, [...a[1] || (a[1] = [
+                    j("span", { class: "more-text" }, "点击或下拉加载更多", -1)
+                  ])])) : (v(), y("div", Ae, "没有更多数据"))
+                ], 64)) : Ve("", !0)
+              ], !0)
+            ], 8, ke)
+          ]),
+          _: 3
+        }, 16, ["model-value", "popper-class", "remote"])
+      ])), [
+        [N, r.value]
+      ]);
+    };
+  }
+}), Ie = (m, P) => {
+  const S = m.__vccOpts || m;
+  for (const [A, t] of P)
+    S[A] = t;
+  return S;
+}, Ne = /* @__PURE__ */ Ie(xe, [["__scopeId", "data-v-88571e50"]]);
+export {
+  Ne as SelectPagination,
+  Ne as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.loading-more[data-v-88571e50],.no-more[data-v-88571e50],.more-hint[data-v-88571e50]{padding:8px 0;font-size:12px;color:#909399;text-align:center;background-color:#fff;border-top:rgba(144,147,153,.1) solid 1px}.more-hint[data-v-88571e50]{font-size:12px;color:#409eff;cursor:pointer;transition:background-color .3s}.more-hint[data-v-88571e50]:hover{background-color:#f5f7fa}.more-text[data-v-88571e50]{display:inline-block;padding:2px 0}[data-v-88571e50] .select-pagination-popper .el-scrollbar__wrap{max-height:274px;overflow:auto;scroll-behavior:smooth;transition:height .2s ease}[data-v-88571e50] .select-pagination-popper .el-scrollbar__view{padding-bottom:8px}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "select-pagination-element-plus",
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "README.zh-CN.md"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly --declarationDir dist",
+    "typecheck": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.0.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.5",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "element-plus": "^2.7.8",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.6"
+  }
+}
+