- add support for header and footer

Author: derpdead

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-windowing",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Set of components used for virtualizing DOM",
   "main": "dist/vue-windowing.ssr.js",
   "browser": "dist/vue-windowing.esm.js",

src/components/ExpandingList.vue

@@ -3,6 +3,9 @@
         :items="flattenedItems"
         :render-ahead="renderAhead"
         :estimated-height="estimatedHeight">
+        <template #header>
+            <slot name="header" />
+        </template>
         <template #item="{ item, index}">
             <div
                 v-if="typeof headers[item] !== 'undefined'"
@@ -17,6 +20,9 @@
                 :index="index"
                 :item="item" />
         </template>
+        <template #footer>
+            <slot name="footer" />
+        </template>
     </VirtualScroll>
 </template>
 

src/components/NestedList.vue

@@ -3,6 +3,9 @@
         :items="flattenedItems"
         :render-ahead="renderAhead"
         :estimated-height="estimatedHeight">
+        <template #header>
+            <slot name="header" />
+        </template>
         <template #item="{ item, index}">
             <slot
                 v-if="parents[index]"
@@ -14,6 +17,9 @@
                 :index="index"
                 :item="item" />
         </template>
+        <template #footer>
+            <slot name="footer" />
+        </template>
     </VirtualScroll>
 </template>
 

src/components/VirtualScroll.vue

@@ -4,6 +4,7 @@
             class="virtual-scroll"
             ref="root"
             @scroll="onScroll">
+            <slot name="header" />
             <div
                 :style="viewportStyle"
                 class="virtual-scroll__viewport">
@@ -23,6 +24,7 @@
                     </AutoHeightMeasurer>
                 </div>
             </div>
+            <slot name="footer" />
         </div>
     </ResizeObserver>
 </template>
@@ -183,7 +185,7 @@ export default {
 
 <style lang="scss" scoped>
 .virtual-scroll {
-    height: 100%;
+    position: relative;
     overflow: auto;
 
     &__spacer {
@@ -197,4 +199,9 @@ export default {
         overflow: hidden;
     }
 }
+
+.test {
+    position: sticky;
+    top: 0;
+}
 </style>