Notify item component about resizing

Author: IvanSafonov

README.md

@@ -80,6 +80,7 @@ npm run serve
 * `itemHeight`: approximate item height in pixels. it's used only at first rendering
 * `itemComponent`: vue js item component
 * `renderViewports`: height of the rendered part relative to viewport height. For example, if it's set to 5 and window inner height is 400, it will render 800 pixels before and after visible part of the list
+* `onItemResize`: the name of the item component function that is called on item resize
 
 ## Events
 
@@ -101,12 +102,6 @@ These properties are passed to the item component, all are optional.
 * `index (Number)`: index of the item in the itemsData array
 * `data (Object)`: data of the item from itemsData array
 
-## Methods
-
-These methods can be called by the ListScroller, all are optional.
-
-* `onResize()`: called after item resizing
-
 # Similar projects
 
 * [vue-virtual-scroll-list](https://github.com/tangbc/vue-virtual-scroll-list)

src/listscroller.vue

@@ -28,6 +28,8 @@ export default {
     itemComponent: { type: [Object, Function], required: true },
     // Height of rendered part relative to viewport height
     renderViewports: { type: Number, default: 3 },
+    // The name of the item component function that is called on item resize
+    onItemResize: String,
   },
 
   data() {
@@ -177,7 +179,7 @@ export default {
             this.heights.set(idx, newHeight)
             changed = true
           }
-          if (el.__vue__.onResize) el.__vue__.onResize()
+          if (this.onItemResize) el.__vue__[this.onItemResize]()
         }
       })
 

tests/item.vue

@@ -8,5 +8,8 @@ export default {
     data: Object,
     index: Number,
   },
+  methods: {
+    resized() {},
+  },
 }
 </script>

tests/listscroller.test.js

@@ -370,13 +370,6 @@ describe('ListScroller component', () => {
       await wrapper.vm.$nextTick()
       expect(wrapper.element).toMatchSnapshot()
     })
-
-    it('calls onResize method after item resize', async () => {
-      const item = wrapper.findAllComponents(Item).at(0).vm
-      item.onResize = jest.fn()
-      updateSizes(12)
-      expect(item.onResize).toBeCalledTimes(1)
-    })
   })
 
   describe('with smaller real item height', () => {
@@ -489,6 +482,27 @@ describe('ListScroller component', () => {
     })
   })
 
+  describe('onItemResize method', () => {
+    let wrapper
+    beforeEach(() => {
+      wrapper = mount(ScrollerMock, {
+        propsData: {
+          itemComponent: Item,
+          itemsData,
+          itemHeight: 20,
+          onItemResize: 'resized',
+        },
+      })
+    })
+
+    it('called after item resize', async () => {
+      const item = wrapper.findAllComponents(Item).at(0).vm
+      item.resized = jest.fn()
+      updateSizes(12)
+      expect(item.resized).toBeCalledTimes(1)
+    })
+  })
+
   it('gets item height from dom', () => {
     const wrapper = mount(ListScroller, {
       propsData: {