- improve height calculations; no need to pass rootHeight as a prop.

- improve performance
- allow for multiple nesting for NestedList.vue
- clean code
- update dependencies

Author: derpdead

README.md

@@ -46,8 +46,8 @@ Example:
 ```vue
 <template>
     <VirtualScroll
+        style="height: 200px"
         :items="items"
-        :root-height="rootHeight"
         :render-ahead="renderAhead"
         :estimated-height="estimatedHeight">
         <template #item="{ item, index}">
@@ -61,7 +61,6 @@ export default {
     data() {
         return {
             items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
-            rootHeight: 100,
             renderAhead: 2, // Buffer, +2 at top / bottom in queue
             estimatedHeight: 20, // We need to assume that there is some default height for each row which will be recalculated later
         };       
@@ -79,8 +78,8 @@ Example:
 ```vue
 <template>
     <NestedList
+        style="height: 200px"
         :items="items"
-        :root-height="rootHeight"
         :render-ahead="renderAhead"
         :estimated-height="estimatedHeight">
         <template #group="{ item, index }">
@@ -100,7 +99,6 @@ export default {
                 numberGroup: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
                 stringGroup: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'],
             },
-            rootHeight: 100,
             renderAhead: 2, // Buffer, +2 at top / bottom in queue
             estimatedHeight: 20, // We need to assume that there is some default height for each row which will be recalculated later
         };       
@@ -118,8 +116,8 @@ Example:
 ```vue
 <template>
     <ExpandingList
+        style="height: 200px"
         :items="items"
-        :root-height="rootHeight"
         :render-ahead="renderAhead"
         :estimated-height="estimatedHeight"
         :expanded-group="expandedGroup"
@@ -141,14 +139,13 @@ export default {
                 numberGroup: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
                 stringGroup: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'],
             },
-            rootHeight: 100,
             renderAhead: 2, // Buffer, +2 at top / bottom in queue
             estimatedHeight: 20, // We need to assume that there is some default height for each row which will be recalculated later
             expandedGroup: '',
         };       
     },
     methods: {
-        expandedGroup(group) {
+        onExpandGroup(group) {
             // You may fetch data here and mutate items object
             // this.items[group] = ['a', 'b', 'c', 'd'];
 
@@ -164,7 +161,6 @@ Props:
 | Prop name        | Description           | Default value  |
 | ------------- |:-------------:| -----:|
 | items      | list of items | [] or {} for Nested/Expanding List |
-| rootHeight      | max height of scroll component      |   400 |
 | renderAhead | number of buffered items at the top/bottom      |    2 |
 | estimatedHeight | approximated value of each row height      |    30 |
 | expandedGroup | key of expanded group - only for ExpandingList    |    '' |
@@ -173,7 +169,28 @@ Events:
 
 - expand: click event for group element which toggles between visible state of group items - only for ExpandingList
 
+### Tips
+
+Do not use margin directly for styling node items! Height won't be measured well.
+{: .alert .alert-danger}
+
+Each virtualized component by default will expand height by 100%, to override it and make things happening you either have to set height / max-height of component or by implementing dynamic height content with flexbox / grid. 
+{: .alert .alert-info}
 
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)
+
+<style>
+.alert-info {
+  color: rgb(49,112,143) !important;
+}
+
+.alert-green {
+  color: rgb(60,118,61) !important;
+}
+
+.alert-danger {
+  color: rgb(169,68,66) !important;
+}
+</style>

dev/serve.vue

@@ -127,6 +127,7 @@ export default Vue.extend({
       <div class="horizontal-wrapper">
           <button @click="isVisible = !isVisible">On visibility change</button>
           <ExpandingList
+              style="height: 100px"
               :items="items"
               :expanded-group="expandedGroup"
               @expand="onExpandGroup">
@@ -137,7 +138,7 @@ export default Vue.extend({
                   <li v-text="item" />
               </template>
           </ExpandingList>
-          <VirtualScroll :root-height="100" v-show="isVisible" :items="flatItems">
+          <VirtualScroll style="height: 100px" v-show="isVisible" :items="flatItems">
               <template #item="{ item }">
                   <li v-text="item" />
               </template>