chore: v1.0.0-beta.6

Author: Guillaume Chau

dist/vue-virtual-scroller.esm.js

@@ -582,8 +582,21 @@ if (typeof window !== 'undefined') {
   } catch (e) {}
 }
 
-// @vue/component
-var Scroller = {
+var uid = 0;
+
+var RecycleScroller = { render: function render() {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { directives: [{ name: "observe-visibility", rawName: "v-observe-visibility", value: _vm.handleVisibilityChange, expression: "handleVisibilityChange" }], staticClass: "vue-recycle-scroller", class: { ready: _vm.ready, 'page-mode': _vm.pageMode }, on: { "&scroll": function scroll($event) {
+          return _vm.handleScroll($event);
+        } } }, [_vm._t("before-container"), _vm._v(" "), _c('div', { ref: "wrapper", staticClass: "vue-recycle-scroller__item-wrapper", style: { height: _vm.totalHeight + 'px' } }, _vm._l(_vm.pool, function (view) {
+      return _c('div', { key: view.nr.id, staticClass: "vue-recycle-scroller__item-view", class: { hover: _vm.hoverKey === view.nr.key }, style: _vm.ready ? { transform: 'translateY(' + view.top + 'px)' } : null, on: { "mouseenter": function mouseenter($event) {
+            _vm.hoverKey = view.nr.key;
+          }, "mouseleave": function mouseleave($event) {
+            _vm.hoverKey = null;
+          } } }, [_vm._t("default", null, { "item": view.item, "index": view.nr.index, "active": view.nr.used })], 2);
+    }), 0), _vm._v(" "), _vm._t("after-container"), _vm._v(" "), _c('ResizeObserver', { on: { "notify": _vm.handleResize } })], 2);
+  }, staticRenderFns: [],
+  name: 'RecycleScroller',
+
   components: {
     ResizeObserver: ResizeObserver
   },
@@ -593,6 +606,7 @@ var Scroller = {
   },
 
   props: {
+
     items: {
       type: Array,
       required: true
@@ -644,6 +658,16 @@ var Scroller = {
     }
   },
 
+  data: function data() {
+    return {
+      pool: [],
+      totalHeight: 0,
+      ready: false,
+      hoverKey: null
+    };
+  },
+
+
   computed: {
     heights: function heights() {
       if (this.itemHeight === null) {
@@ -666,124 +690,6 @@ var Scroller = {
     }
   },
 
-  beforeDestroy: function beforeDestroy() {
-    this.removeListeners();
-  },
-
-
-  methods: {
-    getListenerTarget: function getListenerTarget() {
-      var target = scrollparent(this.$el);
-      // Fix global scroll target for Chrome and Safari
-      if (target === window.document.documentElement || target === window.document.body) {
-        target = window;
-      }
-      return target;
-    },
-    getScroll: function getScroll() {
-      var el = this.$el;
-      // const wrapper = this.$refs.wrapper
-      var scrollState = void 0;
-
-      if (this.pageMode) {
-        var size = el.getBoundingClientRect();
-        var top = -size.top;
-        var height = window.innerHeight;
-        if (top < 0) {
-          height += top;
-          top = 0;
-        }
-        if (top + height > size.height) {
-          height = size.height - top;
-        }
-        scrollState = {
-          top: top,
-          bottom: top + height
-        };
-      } else {
-        scrollState = {
-          top: el.scrollTop,
-          bottom: el.scrollTop + el.clientHeight
-        };
-      }
-
-      return scrollState;
-    },
-    applyPageMode: function applyPageMode() {
-      if (this.pageMode) {
-        this.addListeners();
-      } else {
-        this.removeListeners();
-      }
-    },
-    addListeners: function addListeners() {
-      this.listenerTarget = this.getListenerTarget();
-      this.listenerTarget.addEventListener('scroll', this.handleScroll, supportsPassive ? {
-        passive: true
-      } : false);
-      this.listenerTarget.addEventListener('resize', this.handleResize);
-    },
-    removeListeners: function removeListeners() {
-      if (!this.listenerTarget) {
-        return;
-      }
-
-      this.listenerTarget.removeEventListener('scroll', this.handleScroll);
-      this.listenerTarget.removeEventListener('resize', this.handleResize);
-
-      this.listenerTarget = null;
-    },
-    scrollToItem: function scrollToItem(index) {
-      var scrollTop = void 0;
-      if (this.itemHeight === null) {
-        scrollTop = index > 0 ? this.heights[index - 1].accumulator : 0;
-      } else {
-        scrollTop = index * this.itemHeight;
-      }
-      this.scrollToPosition(scrollTop);
-    },
-    scrollToPosition: function scrollToPosition(position) {
-      this.$el.scrollTop = position;
-    },
-    itemsLimitError: function itemsLimitError() {
-      var _this = this;
-
-      setTimeout(function () {
-        console.log('It seems the scroller element isn\'t scrolling, so it tries to render all the items at once.', 'Scroller:', _this.$el);
-        console.log('Make sure the scroller has a fixed height and \'overflow-y\' set to \'auto\' so it can scroll correctly and only render the items visible in the scroll viewport.');
-      });
-      throw new Error('Rendered items limit reached');
-    }
-  }
-};
-
-var uid = 0;
-
-var RecycleScroller = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { directives: [{ name: "observe-visibility", rawName: "v-observe-visibility", value: _vm.handleVisibilityChange, expression: "handleVisibilityChange" }], staticClass: "vue-recycle-scroller", class: { ready: _vm.ready, 'page-mode': _vm.pageMode }, on: { "&scroll": function scroll($event) {
-          return _vm.handleScroll($event);
-        } } }, [_vm._t("before-container"), _vm._v(" "), _c('div', { ref: "wrapper", staticClass: "vue-recycle-scroller__item-wrapper", style: { height: _vm.totalHeight + 'px' } }, _vm._l(_vm.pool, function (view) {
-      return _c('div', { key: view.nr.id, staticClass: "vue-recycle-scroller__item-view", class: { hover: _vm.hoverKey === view.nr.key }, style: _vm.ready ? { transform: 'translateY(' + view.top + 'px)' } : null, on: { "mouseenter": function mouseenter($event) {
-            _vm.hoverKey = view.nr.key;
-          }, "mouseleave": function mouseleave($event) {
-            _vm.hoverKey = null;
-          } } }, [_vm._t("default", null, { item: view.item, index: view.nr.index, active: view.nr.used })], 2);
-    }), 0), _vm._v(" "), _vm._t("after-container"), _vm._v(" "), _c('ResizeObserver', { on: { "notify": _vm.handleResize } })], 2);
-  }, staticRenderFns: [],
-  name: 'RecycleScroller',
-
-  mixins: [Scroller],
-
-  data: function data() {
-    return {
-      pool: [],
-      totalHeight: 0,
-      ready: false,
-      hoverKey: null
-    };
-  },
-
-
   watch: {
     items: function items() {
       this.updateVisibleItems(true);
@@ -823,6 +729,9 @@ var RecycleScroller = { render: function render() {
       _this.ready = true;
     });
   },
+  beforeDestroy: function beforeDestroy() {
+    this.removeListeners();
+  },
 
 
   methods: {
@@ -1092,6 +1001,88 @@ var RecycleScroller = { render: function render() {
       return {
         continuous: continuous
       };
+    },
+    getListenerTarget: function getListenerTarget() {
+      var target = scrollparent(this.$el);
+      // Fix global scroll target for Chrome and Safari
+      if (target === window.document.documentElement || target === window.document.body) {
+        target = window;
+      }
+      return target;
+    },
+    getScroll: function getScroll() {
+      var el = this.$el;
+      // const wrapper = this.$refs.wrapper
+      var scrollState = void 0;
+
+      if (this.pageMode) {
+        var size = el.getBoundingClientRect();
+        var top = -size.top;
+        var height = window.innerHeight;
+        if (top < 0) {
+          height += top;
+          top = 0;
+        }
+        if (top + height > size.height) {
+          height = size.height - top;
+        }
+        scrollState = {
+          top: top,
+          bottom: top + height
+        };
+      } else {
+        scrollState = {
+          top: el.scrollTop,
+          bottom: el.scrollTop + el.clientHeight
+        };
+      }
+
+      return scrollState;
+    },
+    applyPageMode: function applyPageMode() {
+      if (this.pageMode) {
+        this.addListeners();
+      } else {
+        this.removeListeners();
+      }
+    },
+    addListeners: function addListeners() {
+      this.listenerTarget = this.getListenerTarget();
+      this.listenerTarget.addEventListener('scroll', this.handleScroll, supportsPassive ? {
+        passive: true
+      } : false);
+      this.listenerTarget.addEventListener('resize', this.handleResize);
+    },
+    removeListeners: function removeListeners() {
+      if (!this.listenerTarget) {
+        return;
+      }
+
+      this.listenerTarget.removeEventListener('scroll', this.handleScroll);
+      this.listenerTarget.removeEventListener('resize', this.handleResize);
+
+      this.listenerTarget = null;
+    },
+    scrollToItem: function scrollToItem(index) {
+      var scrollTop = void 0;
+      if (this.itemHeight === null) {
+        scrollTop = index > 0 ? this.heights[index - 1].accumulator : 0;
+      } else {
+        scrollTop = index * this.itemHeight;
+      }
+      this.scrollToPosition(scrollTop);
+    },
+    scrollToPosition: function scrollToPosition(position) {
+      this.$el.scrollTop = position;
+    },
+    itemsLimitError: function itemsLimitError() {
+      var _this4 = this;
+
+      setTimeout(function () {
+        console.log('It seems the scroller element isn\'t scrolling, so it tries to render all the items at once.', 'Scroller:', _this4.$el);
+        console.log('Make sure the scroller has a fixed height and \'overflow-y\' set to \'auto\' so it can scroll correctly and only render the items visible in the scroll viewport.');
+      });
+      throw new Error('Rendered items limit reached');
     }
   }
 };
@@ -1107,7 +1098,7 @@ var DynamicScroller = { render: function render() {
             active: active,
             itemWithHeight: itemWithHeight
           })];
-        } }]) }, 'RecycleScroller', _vm.$attrs, false), _vm.listeners), [_c('template', { slot: "before-container" }, [_vm._t("before-container")], 2), _vm._v(" "), _c('template', { slot: "after-container" }, [_vm._t("after-container")], 2)], 2);
+        } }], true) }, 'RecycleScroller', _vm.$attrs, false), _vm.listeners), [_vm._v(" "), _c('template', { slot: "before-container" }, [_vm._t("before-container")], 2), _vm._v(" "), _c('template', { slot: "after-container" }, [_vm._t("after-container")], 2)], 2);
   }, staticRenderFns: [],
   name: 'DynamicScroller',
 
@@ -1320,7 +1311,7 @@ var DynamicScrollerItem = {
       }
     },
     active: function active(value) {
-      if (value && this.$_pendingVScrollUpdate) {
+      if (value && this.$_pendingVScrollUpdate === this.id) {
         this.updateSize();
       }
     }
@@ -1331,7 +1322,7 @@ var DynamicScrollerItem = {
 
     if (this.$isServer) return;
 
-    this.$_forceNextVScrollUpdate = false;
+    this.$_forceNextVScrollUpdate = null;
     this.updateWatchData();
 
     var _loop = function _loop(k) {
@@ -1361,16 +1352,16 @@ var DynamicScrollerItem = {
   methods: {
     updateSize: function updateSize() {
       if (this.active && this.vscrollData.active) {
-        if (!this.$_pendingSizeUpdate) {
-          this.$_pendingSizeUpdate = true;
-          this.$_forceNextVScrollUpdate = false;
-          this.$_pendingVScrollUpdate = false;
+        if (this.$_pendingSizeUpdate !== this.id) {
+          this.$_pendingSizeUpdate = this.id;
+          this.$_forceNextVScrollUpdate = null;
+          this.$_pendingVScrollUpdate = null;
           if (this.active && this.vscrollData.active) {
             this.computeSize(this.id);
           }
         }
       } else {
-        this.$_forceNextVScrollUpdate = true;
+        this.$_forceNextVScrollUpdate = this.id;
       }
     },
     getSize: function getSize() {
@@ -1394,9 +1385,9 @@ var DynamicScrollerItem = {
       var force = _ref.force;
 
       if (!this.active && force) {
-        this.$_pendingVScrollUpdate = true;
+        this.$_pendingVScrollUpdate = this.id;
       }
-      if (this.$_forceNextVScrollUpdate || force || !this.height) {
+      if (this.$_forceNextVScrollUpdate === this.id || force || !this.height) {
         this.updateSize();
       }
     },
@@ -1418,7 +1409,7 @@ var DynamicScrollerItem = {
             if (_this3.emitResize) _this3.$emit('resize', _this3.id);
           }
         }
-        _this3.$_pendingSizeUpdate = false;
+        _this3.$_pendingSizeUpdate = null;
       });
     }
   },
@@ -1530,7 +1521,7 @@ function registerComponents(Vue$$1, prefix) {
 
 var plugin = {
   // eslint-disable-next-line no-undef
-  version: "1.0.0-beta.5",
+  version: "1.0.0-beta.6",
   install: function install(Vue$$1, options) {
     var finalOptions = Object.assign({}, {
       installComponents: true,