@arrai-innovations/reactive-helpers 20.0.1 → 20.1.1

package/config/listCrud.js

@@ -10,15 +10,16 @@ import { readonly } from "vue";
 
 /**
  * @typedef {object} PaginateInfo
- * @property {number} totalRecords - The total records.
- * @property {number} totalPages - The total pages.
- * @property {number} perPage - The per page.
+ * @property {number} [totalRecords] - The total records.
+ * @property {number} [totalPages] - The total pages.
+ * @property {number} [perPage] - The per page.
+ * @property {number} [page] - The page you are giving us results for.
  */
 
 /**
  * @typedef {(
  *     newObjects:import('../use/listInstance.js').ListObject,
- *     paginationInfo: PaginateInfo|undefined
+ *     paginationInfo?: PaginateInfo,
  * )=>void} PageCallback
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "20.0.1",
+    "version": "20.1.1",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "type": "module",

package/types/config/listCrud.d.ts

@@ -13,17 +13,21 @@ export type PaginateInfo = {
     /**
      * - The total records.
      */
-    totalRecords: number;
+    totalRecords?: number;
     /**
      * - The total pages.
      */
-    totalPages: number;
+    totalPages?: number;
     /**
      * - The per page.
      */
-    perPage: number;
+    perPage?: number;
+    /**
+     * - The page you are giving us results for.
+     */
+    page?: number;
 };
-export type PageCallback = (newObjects: import("../use/listInstance.js").ListObject, paginationInfo: PaginateInfo | undefined) => void;
+export type PageCallback = (newObjects: import("../use/listInstance.js").ListObject, paginationInfo?: PaginateInfo) => void;
 export type ListArgs = {
     /**
      * - The arguments to be passed to the crud handlers.

package/types/config/listCrud.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listCrud.d.ts","sourceRoot":"","sources":["../../config/listCrud.js"],"names":[],"mappings":"AAkHA;;;;GAIG;AACH,8BAFU,QAAQ,CAAC,gBAAgB,CAAC,CAEkB;AAS/C,+CAJI,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,GAEpC,IAAI,CAUhB;AAWM,oCANI,OAAO,KAAK,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,UAAU,CAAC,WAErE;IAAmE,KAAK,GAAhE,OAAO,KAAK,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACrB,QAAQ,GAAnC,gBAAgB;CACxB,QAIF;;;;;kBAzIa,MAAM;;;;gBACN,MAAM;;;;aACN,MAAM;;2BAIP,CACN,UAAU,EAAC,OAAO,wBAAwB,EAAE,UAAU,EACtD,cAAc,EAAE,YAAY,GAAC,SAAS,KACvC,IAAI;;;;;YAKI,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;kBACN,YAAY;;;;;iBACZ,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;;;;;YAMpC,MAAM;;;;SACN,MAAM,EAAE;;;;WACR,MAAM;;;;;iBACN,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;wCAKrC,CACN,0BAA0B,EAAC,OAAO,wBAAwB,EAAE,UAAU,GAAC,MAAM,EAC7E,MAAM,EAAE,QAAQ,GAAC,QAAQ,GAAC,QAAQ,KACnC,IAAI;;;;;YAKI,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;+BACN,yBAAyB;;;;;iBACzB,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;;;;;YAMpC,MAAM;;;;SACN,MAAM,EAAE;;;;WACR,MAAM;;;;YACN,MAAM;;;;;iBACN,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;gCAMvC,QAAQ,KACN,OAAO,gCAAgC,EAAE,uBAAuB,CAAC,IAAI,CAAC;sCAKxE,cAAc,KACZ,OAAO,gCAAgC,EAAE,uBAAuB,CAAC,IAAI,CAAC;yCAKxE,iBAAiB,KACf,OAAO,gCAAgC,EAAE,kBAAkB,CAAC,IAAI,CAAC;yCAKnE,iBAAiB,KACf,OAAO,gCAAgC,EAAE,uBAAuB,CAAC,MAAM,GAAC,MAAM,GAAC,IAAI,CAAC;;;;;WAKnF,UAAU;;;;iBACV,gBAAgB;;;;oBAChB,mBAAmB;;;;gBACnB,mBAAmB;;;;;;UAKnB,MAAM;;;;;;aAKN,MAAM"}
+{"version":3,"file":"listCrud.d.ts","sourceRoot":"","sources":["../../config/listCrud.js"],"names":[],"mappings":"AAmHA;;;;GAIG;AACH,8BAFU,QAAQ,CAAC,gBAAgB,CAAC,CAEkB;AAS/C,+CAJI,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,GAEpC,IAAI,CAUhB;AAWM,oCANI,OAAO,KAAK,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,UAAU,CAAC,WAErE;IAAmE,KAAK,GAAhE,OAAO,KAAK,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACrB,QAAQ,GAAnC,gBAAgB;CACxB,QAIF;;;;;mBA1Ia,MAAM;;;;iBACN,MAAM;;;;cACN,MAAM;;;;WACN,MAAM;;2BAIP,CACN,UAAU,EAAC,OAAO,wBAAwB,EAAE,UAAU,EACtD,cAAc,CAAC,EAAE,YAAY,KAC9B,IAAI;;;;;YAKI,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;kBACN,YAAY;;;;;iBACZ,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;;;;;YAMpC,MAAM;;;;SACN,MAAM,EAAE;;;;WACR,MAAM;;;;;iBACN,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;wCAKrC,CACN,0BAA0B,EAAC,OAAO,wBAAwB,EAAE,UAAU,GAAC,MAAM,EAC7E,MAAM,EAAE,QAAQ,GAAC,QAAQ,GAAC,QAAQ,KACnC,IAAI;;;;;YAKI,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;+BACN,yBAAyB;;;;;iBACzB,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;;;;;YAMpC,MAAM;;;;SACN,MAAM,EAAE;;;;WACR,MAAM;;;;YACN,MAAM;;;;;iBACN,QAAQ,CAAC,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;;gCAMvC,QAAQ,KACN,OAAO,gCAAgC,EAAE,uBAAuB,CAAC,IAAI,CAAC;sCAKxE,cAAc,KACZ,OAAO,gCAAgC,EAAE,uBAAuB,CAAC,IAAI,CAAC;yCAKxE,iBAAiB,KACf,OAAO,gCAAgC,EAAE,kBAAkB,CAAC,IAAI,CAAC;yCAKnE,iBAAiB,KACf,OAAO,gCAAgC,EAAE,uBAAuB,CAAC,MAAM,GAAC,MAAM,GAAC,IAAI,CAAC;;;;;WAKnF,UAAU;;;;iBACV,gBAAgB;;;;oBAChB,mBAAmB;;;;gBACnB,mBAAmB;;;;;;UAKnB,MAAM;;;;;;aAKN,MAAM"}

package/types/use/list.d.ts

@@ -124,7 +124,7 @@ export type ListOptions = {
  * Represents the combined state definitions for all list-related components.
  * This interface aggregates the raw state from multiple list management functionalities.
  */
-export type ListRawState = (import("./listInstance.js").ListInstanceRawState & import("./listSubscription.js").ListSubscriptionRawState & import("./listRelated.js").ListRelatedRawState & import("./listCalculated.js").ListCalculatedRawState & import("./listFilter.js").ListFilterRawState & import("./listSearch.js").ListSearchRawState & import("./listSort.js").ListSortRawState);
+export type ListRawState = ((import("./listInstance.js").ListInstanceRawState | import("./paginatedListInstance.js").PagedListInstanceRawState) & import("./listSubscription.js").ListSubscriptionRawState & import("./listRelated.js").ListRelatedRawState & import("./listCalculated.js").ListCalculatedRawState & import("./listFilter.js").ListFilterRawState & import("./listSearch.js").ListSearchRawState & import("./listSort.js").ListSortRawState);
 /**
  * Represents the reactive state derived from aggregating states of various list-related components.
  * This state is typically used within Vue components for reactivity and access to updated list properties.
@@ -134,7 +134,7 @@ export type ListState = import("vue").UnwrapNestedRefs<ListRawState>;
  * Holds references to instances of all list-related composables, facilitating direct access and management.
  */
 export type ListManaged = {
-    listInstance: import("./listInstance.js").ListInstance;
+    listInstance: import("./listInstance.js").ListInstance | import("./paginatedListInstance.js").PagedListInstance;
     listSubscription: import("./listSubscription.js").ListSubscription;
     listRelated: import("./listRelated.js").ListRelated;
     listCalculated: import("./listCalculated.js").ListCalculated;

package/types/use/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../use/list.js"],"names":[],"mappings":"AAmBA;;;;;;;GAOG;AAEH;;GAEG;AACH;IACI;;;;;OAKG;IACH,qBAHW,MAAM,QACN,MAAM,EAMhB;IADG,aAAgB;CAEvB;AAgHM,sCAPI;IACV,CAAO,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;CAC7B,GACS;IACZ,CAAM,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;CAC5B,CASH;AAcM,6JAJI,WAAW,GACT,WAAW,CAwHvB;;;;;;;;YApPa,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;kBACN,OAAO;;;;uBACP,OAAO;;;;yBACP,OAAO,kBAAkB,EAAE,gBAAgB;;;;4BAC3C,OAAO,qBAAqB,EAAE,mBAAmB;;;;mBACjD,OAAO,iBAAiB,EAAE,uBAAuB;;;;oBACjD,OAAO,iBAAiB,EAAE,wBAAwB;;;;qBAClD,OAAO,iBAAiB,EAAE,eAAe;;;;qBACzC,MAAM;;;;2BACN,MAAM;;;;yBACN,MAAM;;;;kBACN,OAAO,eAAe,EAAE,WAAW,EAAE;;;;;;WAKrC,YAAY;;;;cACZ,OAAO,uBAAuB,EAAE,gBAAgB;;;;WAChD,OAAO;;;;kBACP,OAAO;;;;oCACP,OAAO;;;;oBACP,MAAM;;;;sBACN,MAAM;;;;4BACN,OAAO;;;;;;2BAOR,CACZ,OAAa,mBAAmB,EAAE,oBAAoB,GACtD,OAAa,uBAAuB,EAAE,wBAAwB,GAC9D,OAAa,kBAAkB,EAAE,mBAAmB,GACpD,OAAa,qBAAqB,EAAE,sBAAsB,GAC1D,OAAa,iBAAiB,EAAE,kBAAkB,GAClD,OAAa,iBAAiB,EAAE,kBAAkB,GAClD,OAAa,eAAe,EAAE,gBAAgB,CAC3C;;;;;wBAOS,OAAO,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC;;;;0BAM5C;IACN,YAAY,EAAE,OAAO,mBAAmB,EAAE,YAAY,CAAC;IACvD,gBAAgB,EAAE,OAAO,uBAAuB,EAAE,gBAAgB,CAAC;IACnE,WAAW,EAAE,OAAO,kBAAkB,EAAE,WAAW,CAAC;IACpD,cAAc,EAAE,OAAO,qBAAqB,EAAE,cAAc,CAAC;IAC7D,UAAU,EAAE,OAAO,iBAAiB,EAAE,UAAU,CAAC;IACjD,UAAU,EAAE,OAAO,iBAAiB,EAAE,UAAU,CAAC;IACjD,QAAQ,EAAE,OAAO,eAAe,EAAE,QAAQ,CAAA;CAC7C;;;;4BAMS,CACZ,OAAa,mBAAmB,EAAE,qBAAqB,GAC/C,OAAO,uBAAuB,EAAE,yBAAyB,CAC9D;;;;;;;;;aAcU,WAAW;;;;WACX,SAAS;;;;iBACT,OAAO,KAAK,EAAE,WAAW;;;;;;0BAO1B,aAAa,GAAG,qBAAqB"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../use/list.js"],"names":[],"mappings":"AAmBA;;;;;;;GAOG;AAEH;;GAEG;AACH;IACI;;;;;OAKG;IACH,qBAHW,MAAM,QACN,MAAM,EAMhB;IADG,aAAgB;CAEvB;AAmHM,sCAPI;IACV,CAAO,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;CAC7B,GACS;IACZ,CAAM,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;CAC5B,CASH;AAcM,6JAJI,WAAW,GACT,WAAW,CAwHvB;;;;;;;;YAvPa,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;kBACN,OAAO;;;;uBACP,OAAO;;;;yBACP,OAAO,kBAAkB,EAAE,gBAAgB;;;;4BAC3C,OAAO,qBAAqB,EAAE,mBAAmB;;;;mBACjD,OAAO,iBAAiB,EAAE,uBAAuB;;;;oBACjD,OAAO,iBAAiB,EAAE,wBAAwB;;;;qBAClD,OAAO,iBAAiB,EAAE,eAAe;;;;qBACzC,MAAM;;;;2BACN,MAAM;;;;yBACN,MAAM;;;;kBACN,OAAO,eAAe,EAAE,WAAW,EAAE;;;;;;WAKrC,YAAY;;;;cACZ,OAAO,uBAAuB,EAAE,gBAAgB;;;;WAChD,OAAO;;;;kBACP,OAAO;;;;oCACP,OAAO;;;;oBACP,MAAM;;;;sBACN,MAAM;;;;4BACN,OAAO;;;;;;2BAOR,CACZ,CACA,OAAiB,mBAAmB,EAAE,oBAAoB,GAC1D,OAAiB,4BAA4B,EAAE,yBAAyB,CACjE,GACP,OAAa,uBAAuB,EAAE,wBAAwB,GAC9D,OAAa,kBAAkB,EAAE,mBAAmB,GACpD,OAAa,qBAAqB,EAAE,sBAAsB,GAC1D,OAAa,iBAAiB,EAAE,kBAAkB,GAClD,OAAa,iBAAiB,EAAE,kBAAkB,GAClD,OAAa,eAAe,EAAE,gBAAgB,CAC3C;;;;;wBAOS,OAAO,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC;;;;0BAM5C;IACN,YAAY,EAAE,OAAO,mBAAmB,EAAE,YAAY,GAAG,OAAO,4BAA4B,EAAE,iBAAiB,CAAC;IAChH,gBAAgB,EAAE,OAAO,uBAAuB,EAAE,gBAAgB,CAAC;IACnE,WAAW,EAAE,OAAO,kBAAkB,EAAE,WAAW,CAAC;IACpD,cAAc,EAAE,OAAO,qBAAqB,EAAE,cAAc,CAAC;IAC7D,UAAU,EAAE,OAAO,iBAAiB,EAAE,UAAU,CAAC;IACjD,UAAU,EAAE,OAAO,iBAAiB,EAAE,UAAU,CAAC;IACjD,QAAQ,EAAE,OAAO,eAAe,EAAE,QAAQ,CAAA;CAC7C;;;;4BAMS,CACZ,OAAa,mBAAmB,EAAE,qBAAqB,GAC/C,OAAO,uBAAuB,EAAE,yBAAyB,CAC9D;;;;;;;;;aAcU,WAAW;;;;WACX,SAAS;;;;iBACT,OAAO,KAAK,EAAE,WAAW;;;;;;0BAO1B,aAAa,GAAG,qBAAqB"}

package/types/use/listKeys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listKeys.d.ts","sourceRoot":"","sources":["../../use/listKeys.js"],"names":[],"mappings":"AAAA,6CAgBE;AACF,6CAYE;AAEF,iDAOE;AACF,iDAAoF;AAEpF,4CAQE;AACF,yCAAuC;AAEvC,+CAME;AACF,4CAA0C;AAE1C,2CAWE;AACF,wCAAsC;AAEtC,2CAcE;AACF,wCAAsC;AACtC,yCAWE;AACF,sCAAoC"}
+{"version":3,"file":"listKeys.d.ts","sourceRoot":"","sources":["../../use/listKeys.js"],"names":[],"mappings":"AAAA,6CAiBE;AACF,6CAYE;AAEF,iDAOE;AACF,iDAAoF;AAEpF,4CAQE;AACF,yCAAuC;AAEvC,+CAME;AACF,4CAA0C;AAE1C,2CAWE;AACF,wCAAsC;AAEtC,2CAcE;AACF,wCAAsC;AACtC,yCAWE;AACF,sCAAoC"}

package/types/use/paginatedListInstance.d.ts

@@ -1,21 +1,3 @@
-/**
- * @module use/paginatedListInstance.js
- *
- */
-/**
- * @typedef {object} PagedListListanceOptions
- * @property {boolean} keepOldPages - Whether to keep old pages.
- */
-/**
- * @typedef {object} PagedListInstanceState
- * @property {number} totalRecords - The total records.
- * @property {number} totalPages - The total pages.
- * @property {number} perPage - The per page.
- */
-/**
- * @typedef {object} PagedListInstance
- * @property {import('./listInstance.js').ListInstanceState & PagedListInstanceState} state - The state.
- */
 /**
  *
  * @param {PagedListListanceOptions & import('./listInstance.js').ListInstanceOptions} options - The options.
@@ -28,7 +10,7 @@ export type PagedListListanceOptions = {
      */
     keepOldPages: boolean;
 };
-export type PagedListInstanceState = {
+export type PaginatedRawState = {
     /**
      * - The total records.
      */
@@ -41,11 +23,38 @@ export type PagedListInstanceState = {
      * - The per page.
      */
     perPage: number;
+    /**
+     * - The page to ids map.
+     */
+    pageToIds: Map<number, string[]>;
+};
+export type PaginatedState = import("vue").UnwrapNestedRefs<PaginatedRawState>;
+export type PagedListInstanceStateExtension = {
+    /**
+     * - The total records.
+     */
+    totalRecords: import("vue").Ref<number>;
+    /**
+     * - The total pages.
+     */
+    totalPages: import("vue").Ref<number>;
+    /**
+     * - The per page.
+     */
+    perPage: import("vue").Ref<number>;
+    /**
+     * - The page to ids map.
+     */
+    pageToIds: import("vue").Ref<Map<number, string[]>>;
 };
-export type PagedListInstance = {
+export type PagedListInstanceRawState = import("./listInstance.js").ListInstanceRawState & PagedListInstanceStateExtension;
+export type PagedListInstanceState = typeof reactive;
+export type PagedListRawInstance = {
     /**
      * - The state.
      */
-    state: import("./listInstance.js").ListInstanceState & PagedListInstanceState;
+    state: PagedListInstanceState;
 };
+export type PagedListInstance = import("./listInstance.js").ListInstance & PagedListRawInstance;
+import { reactive } from "vue";
 //# sourceMappingURL=paginatedListInstance.d.ts.map

package/types/use/paginatedListInstance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginatedListInstance.d.ts","sourceRoot":"","sources":["../../use/paginatedListInstance.js"],"names":[],"mappings":"AAEA;;;GAGG;AAEH;;;GAGG;AAEH;;;;;GAKG;AAEH;;;GAGG;AAEH;;;;GAIG;AACH,+EAHW,wBAAwB,GAAG,OAAO,mBAAmB,EAAE,mBAAmB,GACxE,iBAAiB,CA+C7B;;;;;kBAjEa,OAAO;;;;;;kBAKP,MAAM;;;;gBACN,MAAM;;;;aACN,MAAM;;;;;;WAKN,OAAO,mBAAmB,EAAE,iBAAiB,GAAG,sBAAsB"}
+{"version":3,"file":"paginatedListInstance.d.ts","sourceRoot":"","sources":["../../use/paginatedListInstance.js"],"names":[],"mappings":"AA4DA;;;;GAIG;AACH,+EAHW,wBAAwB,GAAG,OAAO,mBAAmB,EAAE,mBAAmB,GACxE,iBAAiB,CA8D7B;;;;;kBAnHa,OAAO;;;;;;kBAKP,MAAM;;;;gBACN,MAAM;;;;aACN,MAAM;;;;eACN,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;;6BAItB,OAAO,KAAK,EAAE,gBAAgB,CAAC,iBAAiB,CAAC;;;;;kBAKhD,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;;;;gBACzB,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;;;;aACzB,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;;;;eACzB,OAAO,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;;wCAIzC,OAAO,mBAAmB,EAAE,oBAAoB,GAAG,+BAA+B;;;;;;WASjF,sBAAsB;;gCAIvB,OAAO,mBAAmB,EAAE,YAAY,GAAG,oBAAoB;yBA9C3C,KAAK"}

package/use/list.js

@@ -80,7 +80,10 @@ export class ListError extends Error {
  * This interface aggregates the raw state from multiple list management functionalities.
  *
  * @typedef {(
- *     import('./listInstance.js').ListInstanceRawState &
+ *     (
+ *         import('./listInstance.js').ListInstanceRawState |
+ *         import('./paginatedListInstance.js').PagedListInstanceRawState
+ *     ) &
  *     import('./listSubscription.js').ListSubscriptionRawState &
  *     import('./listRelated.js').ListRelatedRawState &
  *     import('./listCalculated.js').ListCalculatedRawState &
@@ -101,7 +104,7 @@ export class ListError extends Error {
  * Holds references to instances of all list-related composables, facilitating direct access and management.
  *
  * @typedef {{
- *     listInstance: import('./listInstance.js').ListInstance,
+ *     listInstance: import('./listInstance.js').ListInstance | import('./paginatedListInstance.js').PagedListInstance,
  *     listSubscription: import('./listSubscription.js').ListSubscription,
  *     listRelated: import('./listRelated.js').ListRelated,
  *     listCalculated: import('./listCalculated.js').ListCalculated,

package/use/listKeys.js

@@ -14,6 +14,7 @@ export const listInstanceStateKeys = [
     "totalRecords",
     "totalPages",
     "perPage",
+    "pageToIds",
 ];
 export const listInstanceFunctions = [
     "list",

package/use/paginatedListInstance.js

@@ -1,4 +1,5 @@
 import { useListInstance } from "./listInstance.js";
+import { reactive, toRefs } from "vue";
 
 /**
  * @module use/paginatedListInstance.js
@@ -11,65 +12,115 @@ import { useListInstance } from "./listInstance.js";
  */
 
 /**
- * @typedef {object} PagedListInstanceState
+ * @typedef {object} PaginatedRawState
  * @property {number} totalRecords - The total records.
  * @property {number} totalPages - The total pages.
  * @property {number} perPage - The per page.
+ * @property {Map<number, string[]>} pageToIds - The page to ids map.
  */
 
 /**
- * @typedef {object} PagedListInstance
- * @property {import('./listInstance.js').ListInstanceState & PagedListInstanceState} state - The state.
+ * @typedef {import('vue').UnwrapNestedRefs<PaginatedRawState>} PaginatedState
  */
 
+/**
+ * @typedef {object} PagedListInstanceStateExtension
+ * @property {import('vue').Ref<number>} totalRecords - The total records.
+ * @property {import('vue').Ref<number>} totalPages - The total pages.
+ * @property {import('vue').Ref<number>} perPage - The per page.
+ * @property {import('vue').Ref<Map<number, string[]>>} pageToIds - The page to ids map.
+ */
+
+/**
+ * @typedef {import('./listInstance.js').ListInstanceRawState & PagedListInstanceStateExtension} PagedListInstanceRawState
+ */
+
+/**
+ * @typedef {import('vue').reactive<PagedListInstanceRawState>} PagedListInstanceState
+ */
+
+/**
+ * @typedef {object} PagedListRawInstance
+ * @property {PagedListInstanceState} state - The state.
+ */
+
+/**
+ * @typedef {import('./listInstance.js').ListInstance & PagedListRawInstance} PagedListInstance
+ */
+
+/**
+ * @param {import('./listInstance.js').ListInstance} listInstance - The list instance.
+ * @param {PaginatedState} paginatedState - The paginated state.
+ * @returns {PagedListInstance} - The paged list instance.
+ */
+function makePagedListInstance(listInstance, paginatedState) {
+    Object.assign(listInstance.state, toRefs(paginatedState));
+    return /** @type {PagedListInstance} */ (listInstance);
+}
+
 /**
  *
  * @param {PagedListListanceOptions & import('./listInstance.js').ListInstanceOptions} options - The options.
  * @returns {PagedListInstance} - The paged list instance.
  */
 export function usePagedListInstance({ keepOldPages, ...useListInstanceArgs }) {
-    const listInstance = /** @type {PagedListInstance & import('./listInstance.js').ListInstance} */ (
-        /** @type {unknown} */ (useListInstance({ keepOldPages, ...useListInstanceArgs }))
-    );
+    /** @type {PaginatedState} */
+    const paginatedState = reactive({
+        totalRecords: 0,
+        totalPages: 0,
+        perPage: 0,
+        pageToIds: new Map(),
+    });
 
-    listInstance.state.totalRecords = 0;
-    listInstance.state.totalPages = 0;
-    listInstance.state.perPage = 0;
+    const paginatedListInstance = makePagedListInstance(
+        useListInstance({ keepOldPages, ...useListInstanceArgs }),
+        paginatedState
+    );
 
-    const superClearList = listInstance.clearList;
-    listInstance.clearList = () => {
+    const superClearList = paginatedListInstance.clearList;
+    paginatedListInstance.clearList = () => {
         superClearList();
-        listInstance.state.totalRecords = 0;
-        listInstance.state.totalPages = 0;
-        listInstance.state.perPage = 0;
+        paginatedState.totalRecords = 0;
+        paginatedState.totalPages = 0;
+        paginatedState.perPage = 0;
+        paginatedState.pageToIds.clear();
     };
     if (keepOldPages === undefined) {
         throw new Error("keepOldPages is required");
     }
 
-    listInstance.pageCallback = (newObjects, { totalRecords, totalPages, perPage }) => {
+    paginatedListInstance.pageCallback = (
+        /** @type {import('./listInstance.js').ListObject[]} */ newObjects,
+        /** @type {import('../config/listCrud.js').PaginateInfo} */ { page, totalRecords, totalPages, perPage }
+    ) => {
         // with keepOldPages, you are responsible for clearing the list as needed
         if (!keepOldPages) {
             // display one page at a time, clear the list
-            listInstance.clearList();
+            paginatedListInstance.clearList();
         }
         newObjects.forEach((newObject) => {
-            if (newObject[listInstance.state.pkKey] in listInstance.state.objects) {
-                listInstance.updateListObject(newObject);
+            if (newObject[paginatedListInstance.state.pkKey] in paginatedListInstance.state.objects) {
+                paginatedListInstance.updateListObject(newObject);
             } else {
-                listInstance.addListObject(newObject);
+                paginatedListInstance.addListObject(newObject);
             }
         });
+        if (keepOldPages && page !== undefined) {
+            const pageIds = newObjects.map((obj) => obj[paginatedListInstance.state.pkKey] + "");
+            // webstorm being crazy
+            // noinspection JSUnresolvedReference
+            paginatedState.pageToIds.set(page, pageIds);
+        }
         if (totalRecords !== undefined) {
-            listInstance.state.totalRecords = totalRecords;
+            paginatedState.totalRecords = totalRecords;
         }
         if (totalPages !== undefined) {
-            listInstance.state.totalPages = totalPages;
+            paginatedState.totalPages = totalPages;
         }
         if (perPage !== undefined) {
-            listInstance.state.perPage = perPage;
+            paginatedState.perPage = perPage;
         }
     };
 
-    return listInstance;
+    return paginatedListInstance;
 }