feat: export all items memoized by the grid

Author: rocwang

README.md

@@ -43,15 +43,6 @@ npm install vue-virtual-scroll-grid
 | `tag`                      | The HTML tag used as container element. Default value is `div`                    | `string`                                                       | Optional, any valid HTML tag, defaults to `div`                     |
 | `getKey`                   | The `:key` used on each grid item. Auto-generated, but overwritable via function  | `(internalItem: InternalItem) => number \| string` <sup>1</sup>| Optional, any valid Function that returns a `string` or `number`    |
 
-<sup>1</sup>
-```ts
-interface InternalItem {
-  index: number;
-  value: unknown | undefined;
-  style?: { transform: string; gridArea: string };
-}
-```
-
 Example:
 
 ```vue
@@ -127,6 +118,10 @@ Example:
 </template>
 ```
 
+## Exposed Public Properties
+
+* `allItems`: All items memoized by the grid
+
 ## Scroll Mode
 
 The library uses `grid-auto-flow` CSS property to infer scroll mode. Set it to

src/Grid.vue

@@ -122,7 +122,7 @@ export default defineComponent({
       default: undefined,
     },
   },
-  setup(props) {
+  setup(props, { expose }) {
     // template refs
     const rootRef = ref<HTMLElement | SVGElement | VueInstance>();
     const probeRef = ref<HTMLElement | SVGElement | VueInstance>();
@@ -132,6 +132,7 @@ export default defineComponent({
       buffer$, // the items in the current scanning window
       contentSize$, // the size of the whole list
       scrollAction$, // the value sent to window.scrollTo()
+      allItems$, // all items memoized by the grid
     } = pipeline({
       // streams of prop
       length$: fromProp(props, "length"),
@@ -153,7 +154,7 @@ export default defineComponent({
         scrollAction$.subscribe(({ target, top, left }: ScrollAction) => {
           target.scrollTo({ top, left, behavior: props.scrollBehavior });
         });
-      })
+      }),
     );
 
     const contentSize = useObservable(contentSize$);
@@ -164,16 +165,19 @@ export default defineComponent({
           value + "px",
         ]),
         ["placeContent", "start"],
-      ])
+      ]),
     );
 
     const keyPrefix = ref<string>("");
     watch(
       () => props.pageProvider,
       () => (keyPrefix.value = String(new Date().getTime())),
-      { immediate: true }
+      { immediate: true },
     );
 
+    const allItems = useObservable(allItems$);
+    expose({ allItems });
+
     return {
       rootRef,
       probeRef,

src/demo/App.vue

@@ -4,6 +4,7 @@
 
     <div :class="$style.gridWrapper">
       <Grid
+        ref="grid"
         :length="length"
         :pageSize="pageSize"
         :pageProvider="pageProvider"
@@ -45,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import Grid from "../Grid.vue";
 import Header from "./Header.vue";
 import Control from "./Control.vue";
@@ -63,15 +64,20 @@ import {
 export default defineComponent({
   name: "App",
   components: { Grid, ProductItem, Header, Control },
-  setup: () => ({
-    length,
-    pageSize,
-    pageProvider,
-    scrollMode,
-    scrollTo,
-    scrollBehavior,
-    respectScrollToOnResize,
-  }),
+  setup: () => {
+    const grid = ref(null);
+
+    return {
+      grid,
+      length,
+      pageSize,
+      pageProvider,
+      scrollMode,
+      scrollTo,
+      scrollBehavior,
+      respectScrollToOnResize,
+    };
+  },
 });
 </script>