@tarojs/components-advanced 3.6.0-beta.2 → 3.6.0-beta.4

package/dist/components/virtual-list/vue/list.js

@@ -1,489 +1,450 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import memoizeOne from 'memoize-one';
-import { convertNumber2PX } from '../../../utils/convert';
-import { omit } from '../../../utils/lodash';
-import { cancelTimeout, requestTimeout } from '../../../utils/timer';
-import { IS_SCROLLING_DEBOUNCE_INTERVAL } from '../constants';
-import { getRTLOffsetType } from '../dom-helpers';
-import Preset from '../preset';
-import { defaultItemKey, getRectSize } from '../utils';
-import _render from './render';
-export default {
-  props: {
-    height: {
-      type: [String, Number],
-      required: true
-    },
-    width: {
-      type: [String, Number],
-      required: true
-    },
-    itemCount: {
-      type: Number,
-      required: true
-    },
-    itemData: {
-      type: Array,
-      required: true
-    },
-    itemSize: {
-      type: [Number, Function],
-      required: true
-    },
-    unlimitedSize: {
-      type: Boolean,
-      default: false
-    },
-    position: {
-      type: String,
-      default: 'absolute'
-    },
-    initialScrollOffset: {
-      type: Number,
-      default: 0
-    },
-    innerElementType: {
-      type: String,
-      default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
-    },
-    direction: {
-      type: String,
-      default: 'ltr'
-    },
-    layout: {
-      type: String,
-      default: 'vertical'
-    },
-    overscanCount: {
-      type: Number,
-      default: 1
-    },
-    placeholderCount: {
-      type: Number
-    },
-    useIsScrolling: {
-      type: Boolean,
-      default: false
-    },
-    item: {
-      required: true
-    },
-    itemKey: String,
-    itemTagName: {
-      type: String,
-      default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
+import { convertNumber2PX } from '../../../utils/convert.js';
+import { omit } from '../../../utils/lodash.js';
+import { cancelTimeout, requestTimeout } from '../../../utils/timer.js';
+import { IS_SCROLLING_DEBOUNCE_INTERVAL } from '../constants.js';
+import { getRTLOffsetType } from '../dom-helpers.js';
+import Preset from '../preset.js';
+import { getRectSize, defaultItemKey } from '../utils.js';
+import render from './render.js';
+
+var List = {
+    props: {
+        height: {
+            type: [String, Number],
+            required: true
+        },
+        width: {
+            type: [String, Number],
+            required: true
+        },
+        itemCount: {
+            type: Number,
+            required: true
+        },
+        itemData: {
+            type: Array,
+            required: true
+        },
+        itemSize: {
+            type: [Number, Function],
+            required: true
+        },
+        unlimitedSize: {
+            type: Boolean,
+            default: false
+        },
+        position: {
+            type: String,
+            default: 'absolute'
+        },
+        initialScrollOffset: {
+            type: Number,
+            default: 0
+        },
+        innerElementType: {
+            type: String,
+            default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
+        },
+        direction: {
+            type: String,
+            default: 'ltr'
+        },
+        layout: {
+            type: String,
+            default: 'vertical'
+        },
+        overscanCount: {
+            type: Number,
+            default: 1
+        },
+        placeholderCount: {
+            type: Number
+        },
+        useIsScrolling: {
+            type: Boolean,
+            default: false
+        },
+        item: {
+            required: true
+        },
+        itemKey: String,
+        itemTagName: {
+            type: String,
+            default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
+        },
+        innerTagName: {
+            type: String,
+            default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
+        },
+        outerTagName: {
+            type: String,
+            default: process.env.TARO_ENV === 'h5' ? 'taro-scroll-view-core' : 'scroll-view'
+        },
+        itemElementType: String,
+        outerElementType: String,
+        innerRef: String,
+        outerRef: String,
+        onItemsRendered: Function,
+        onScrollNative: Function,
+        shouldResetStyleCacheOnItemSizeChange: {
+            type: Boolean,
+            default: true
+        },
     },
-    innerTagName: {
-      type: String,
-      default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
+    data() {
+        const preset = new Preset(this.$props, this.refresh);
+        return {
+            itemList: preset.itemList,
+            preset,
+            id: this.$props.id || preset.id,
+            instance: this,
+            isScrolling: false,
+            scrollDirection: 'forward',
+            scrollOffset: typeof this.$props.initialScrollOffset === 'number'
+                ? this.$props.initialScrollOffset
+                : 0,
+            scrollUpdateWasRequested: false,
+            resetIsScrollingTimeoutId: null,
+            refreshCount: 0
+        };
     },
-    outerTagName: {
-      type: String,
-      default: process.env.TARO_ENV === 'h5' ? 'taro-scroll-view-core' : 'scroll-view'
+    methods: {
+        refresh() {
+            this.refreshCount = this.refreshCount + 1;
+        },
+        scrollTo(scrollOffset) {
+            scrollOffset = Math.max(0, scrollOffset);
+            if (this.scrollOffset === scrollOffset) {
+                return;
+            }
+            this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
+            this.scrollOffset = scrollOffset;
+            this.scrollUpdateWasRequested = true;
+            this.$nextTick(this._resetIsScrollingDebounced);
+        },
+        scrollToItem(index, align = 'auto') {
+            const { itemCount } = this.$props;
+            const { scrollOffset } = this.$data;
+            index = Math.max(0, Math.min(index, itemCount - 1));
+            this.scrollTo(this.itemList.getOffsetForIndexAndAlignment(this.$props, index, align, scrollOffset));
+        },
+        _callOnItemsRendered: memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+            return this.$props.onItemsRendered({
+                overscanStartIndex,
+                overscanStopIndex,
+                visibleStartIndex,
+                visibleStopIndex
+            });
+        }),
+        _callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested, detail) {
+            this.$emit('scroll', {
+                scrollDirection,
+                scrollOffset,
+                scrollUpdateWasRequested,
+                detail
+            });
+        }),
+        _callPropsCallbacks() {
+            if (typeof this.$props.onItemsRendered === 'function') {
+                const { itemCount } = this.$props;
+                if (itemCount > 0) {
+                    const [overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex] = this._getRangeToRender();
+                    this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
+                }
+            }
+            this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested, this.preset.field);
+            setTimeout(() => {
+                const [startIndex, stopIndex] = this._getRangeToRender();
+                const isHorizontal = this.preset.isHorizontal;
+                for (let index = startIndex; index <= stopIndex; index++) {
+                    this._getSizeUploadSync(index, isHorizontal);
+                }
+            }, 0);
+        },
+        _getSizeUploadSync(index, isHorizontal) {
+            const ID = `#${this.$data.id}-${index}`;
+            return new Promise((resolve) => {
+                const success = ({ width, height }) => {
+                    const size = isHorizontal ? width : height;
+                    if (!this.itemList.compareSize(index, size)) {
+                        this.itemList.setSize(index, size);
+                        resolve(this.itemList.getSize(index));
+                    }
+                };
+                const fail = () => {
+                    const [startIndex, stopIndex] = this._getRangeToRender();
+                    if (index >= startIndex && index <= stopIndex) {
+                        setTimeout(() => {
+                            getRectSize(ID, success, fail);
+                        }, 100);
+                    }
+                };
+                getRectSize(ID, success, fail);
+            });
+        },
+        _getRangeToRender() {
+            return this.itemList.getRangeToRender(this.$data.scrollDirection, this.$data.scrollOffset, this.$data.isScrolling);
+        },
+        _onScrollHorizontal(event) {
+            const { clientWidth, scrollTop, scrollLeft, scrollHeight, scrollWidth } = event.currentTarget;
+            this.preset.field = {
+                scrollHeight: scrollHeight,
+                scrollWidth: this.itemList.getOffsetSize(),
+                scrollTop: scrollTop,
+                scrollLeft: scrollLeft,
+                clientHeight: scrollHeight,
+                clientWidth: scrollWidth
+            };
+            if (this.$props.onScrollNative) {
+                this.$props.onScrollNative(event);
+            }
+            const diffOffset = this.preset.field.scrollLeft - scrollLeft;
+            if (this.scrollOffset === scrollLeft || this.preset.isShaking(diffOffset)) {
+                return;
+            }
+            let scrollOffset = scrollLeft;
+            if (this.preset.isRtl) {
+                // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+                // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+                // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+                // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+                switch (getRTLOffsetType()) {
+                    case 'negative':
+                        scrollOffset = -scrollLeft;
+                        break;
+                    case 'positive-descending':
+                        scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                        break;
+                }
+            }
+            // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+            scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+            this.preset.field = {
+                scrollWidth: scrollOffset,
+            };
+            this.isScrolling = true;
+            this.scrollDirection = this.scrollOffset < scrollLeft ? 'forward' : 'backward';
+            this.scrollOffset = scrollOffset;
+            this.scrollUpdateWasRequested = false;
+            this.$nextTick(this._resetIsScrollingDebounced);
+        },
+        _onScrollVertical(event) {
+            const { clientHeight, scrollHeight, scrollWidth, scrollTop, scrollLeft } = event.currentTarget;
+            if (this.$props.onScrollNative) {
+                this.$props.onScrollNative(event);
+            }
+            const diffOffset = this.preset.field.scrollTop - scrollTop;
+            if (this.scrollOffset === scrollTop || this.preset.isShaking(diffOffset)) {
+                return;
+            }
+            // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+            const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+            this.preset.field = {
+                scrollHeight: this.itemList.getOffsetSize(),
+                scrollWidth: scrollWidth,
+                scrollTop: scrollOffset,
+                scrollLeft: scrollLeft,
+                clientHeight: clientHeight,
+                clientWidth: scrollWidth,
+                diffOffset: this.preset.field.scrollTop - scrollOffset,
+            };
+            this.isScrolling = true;
+            this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
+            this.scrollOffset = scrollOffset;
+            this.scrollUpdateWasRequested = false;
+            this.$nextTick(this._resetIsScrollingDebounced);
+        },
+        _outerRefSetter(ref) {
+            const { outerRef } = this.$props;
+            this._outerRef = ref;
+            if (typeof outerRef === 'function') {
+                outerRef(ref);
+            }
+            else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('value')) {
+                outerRef.value = ref;
+            }
+        },
+        _resetIsScrollingDebounced() {
+            if (this.resetIsScrollingTimeoutId !== null) {
+                cancelTimeout(this.resetIsScrollingTimeoutId);
+            }
+            this.resetIsScrollingTimeoutId = requestTimeout(this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+        },
+        _resetIsScrolling() {
+            this.resetIsScrollingTimeoutId = null;
+            this.isScrolling = false;
+            this.$nextTick(() => {
+                this.preset.getItemStyleCache(-1, null);
+            });
+        }
     },
-    itemElementType: String,
-    outerElementType: String,
-    innerRef: String,
-    outerRef: String,
-    onItemsRendered: Function,
-    onScrollNative: Function,
-    shouldResetStyleCacheOnItemSizeChange: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data: function data() {
-    var preset = new Preset(this.$props, this.refresh);
-    return {
-      itemList: preset.itemList,
-      preset: preset,
-      id: this.$props.id || preset.id,
-      instance: this,
-      isScrolling: false,
-      scrollDirection: 'forward',
-      scrollOffset: typeof this.$props.initialScrollOffset === 'number' ? this.$props.initialScrollOffset : 0,
-      scrollUpdateWasRequested: false,
-      resetIsScrollingTimeoutId: null,
-      refreshCount: 0
-    };
-  },
-  methods: {
-    refresh: function refresh() {
-      this.refreshCount = this.refreshCount + 1;
+    mounted() {
+        const { initialScrollOffset } = this.$props;
+        if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
+            const outerRef = this._outerRef;
+            if (this.preset.isHorizontal) {
+                outerRef.scrollLeft = initialScrollOffset;
+            }
+            else {
+                outerRef.scrollTop = initialScrollOffset;
+            }
+        }
+        this._callPropsCallbacks();
     },
-    scrollTo: function scrollTo(scrollOffset) {
-      scrollOffset = Math.max(0, scrollOffset);
-      if (this.scrollOffset === scrollOffset) {
-        return;
-      }
-      this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
-      this.scrollOffset = scrollOffset;
-      this.scrollUpdateWasRequested = true;
-      this.$nextTick(this._resetIsScrollingDebounced);
+    updated() {
+        this.preset.update(this.$props);
+        const { scrollOffset, scrollUpdateWasRequested } = this.$data;
+        if (scrollUpdateWasRequested && this._outerRef != null) {
+            const outerRef = this._outerRef;
+            if (this.preset.isHorizontal) {
+                if (this.preset.isRtl) {
+                    // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+                    // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+                    // So we need to determine which browser behavior we're dealing with, and mimic it.
+                    switch (getRTLOffsetType()) {
+                        case 'negative':
+                            outerRef.scrollLeft = -scrollOffset;
+                            break;
+                        case 'positive-ascending':
+                            outerRef.scrollLeft = scrollOffset;
+                            break;
+                        default: {
+                            const { clientWidth, scrollWidth } = outerRef;
+                            outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                            break;
+                        }
+                    }
+                }
+                else {
+                    outerRef.scrollLeft = scrollOffset;
+                }
+            }
+            else {
+                outerRef.scrollTop = scrollOffset;
+            }
+        }
+        this._callPropsCallbacks();
     },
-    scrollToItem: function scrollToItem(index) {
-      var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
-      var itemCount = this.$props.itemCount;
-      var scrollOffset = this.$data.scrollOffset;
-      index = Math.max(0, Math.min(index, itemCount - 1));
-      this.scrollTo(this.itemList.getOffsetForIndexAndAlignment(this.$props, index, align, scrollOffset));
+    beforeDestroy() {
+        if (this.resetIsScrollingTimeoutId !== null) {
+            cancelTimeout(this.resetIsScrollingTimeoutId);
+        }
     },
-    _callOnItemsRendered: memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
-      return this.$props.onItemsRendered({
-        overscanStartIndex: overscanStartIndex,
-        overscanStopIndex: overscanStopIndex,
-        visibleStartIndex: visibleStartIndex,
-        visibleStopIndex: visibleStopIndex
-      });
-    }),
-    _callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested, detail) {
-      this.$emit('scroll', {
-        scrollDirection: scrollDirection,
-        scrollOffset: scrollOffset,
-        scrollUpdateWasRequested: scrollUpdateWasRequested,
-        detail: detail
-      });
-    }),
-    _callPropsCallbacks: function _callPropsCallbacks() {
-      var _this = this;
-      if (typeof this.$props.onItemsRendered === 'function') {
-        var itemCount = this.$props.itemCount;
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const { item, direction, height, innerRef, itemCount, itemData, itemKey = defaultItemKey, layout, useIsScrolling, width } = omit(this.$props, ['innerElementType', 'innerTagName', 'itemElementType', 'itemTagName', 'outerElementType', 'outerTagName', 'position']);
+        const { id, isScrolling, scrollOffset, scrollUpdateWasRequested } = this.$data;
+        const isHorizontal = this.preset.isHorizontal;
+        const placeholderCount = this.preset.placeholderCount;
+        const onScroll = isHorizontal
+            ? this._onScrollHorizontal
+            : this._onScrollVertical;
+        const [startIndex, stopIndex] = this._getRangeToRender();
+        const items = [];
         if (itemCount > 0) {
-          var _this$_getRangeToRend = this._getRangeToRender(),
-            _this$_getRangeToRend2 = _slicedToArray(_this$_getRangeToRend, 4),
-            overscanStartIndex = _this$_getRangeToRend2[0],
-            overscanStopIndex = _this$_getRangeToRend2[1],
-            visibleStartIndex = _this$_getRangeToRend2[2],
-            visibleStopIndex = _this$_getRangeToRend2[3];
-          this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
-        }
-      }
-      this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested, this.preset.field);
-      setTimeout(function () {
-        var _this$_getRangeToRend3 = _this._getRangeToRender(),
-          _this$_getRangeToRend4 = _slicedToArray(_this$_getRangeToRend3, 2),
-          startIndex = _this$_getRangeToRend4[0],
-          stopIndex = _this$_getRangeToRend4[1];
-        var isHorizontal = _this.preset.isHorizontal;
-        for (var index = startIndex; index <= stopIndex; index++) {
-          _this._getSizeUploadSync(index, isHorizontal);
+            const prevPlaceholder = startIndex < placeholderCount ? startIndex : placeholderCount;
+            items.push(new Array(prevPlaceholder).fill(-1).map((_, index) => render(this.preset.itemTagName, {
+                key: itemKey(index + startIndex - prevPlaceholder, itemData),
+                style: { display: 'none' }
+            })));
+            for (let index = startIndex; index <= stopIndex; index++) {
+                const style = this.preset.getItemStyle(index);
+                items.push(render(this.preset.itemTagName, {
+                    key: itemKey(index, itemData),
+                    style
+                }, [
+                    render(item, {
+                        id: `${id}-${index}`,
+                        props: {
+                            id: `${id}-${index}`,
+                            data: itemData,
+                            index,
+                            isScrolling: useIsScrolling ? isScrolling : undefined
+                        }
+                    })
+                ]));
+            }
+            const restCount = itemCount - stopIndex;
+            const postPlaceholder = restCount < placeholderCount ? restCount : placeholderCount;
+            items.push(new Array(postPlaceholder).fill(-1).map((_, index) => render(this.preset.itemTagName, {
+                key: itemKey(1 + index + stopIndex, itemData),
+                style: { display: 'none' }
+            })));
         }
-      }, 0);
-    },
-    _getSizeUploadSync: function _getSizeUploadSync(index, isHorizontal) {
-      var _this2 = this;
-      var ID = "#".concat(this.$data.id, "-").concat(index);
-      return new Promise(function (resolve) {
-        var success = function success(_ref) {
-          var width = _ref.width,
-            height = _ref.height;
-          var size = isHorizontal ? width : height;
-          if (!_this2.itemList.compareSize(index, size)) {
-            _this2.itemList.setSize(index, size);
-            resolve(_this2.itemList.getSize(index));
-          }
+        // Read this value AFTER items have been created,
+        // So their actual sizes (if variable) are taken into consideration.
+        const estimatedTotalSize = convertNumber2PX(this.itemList.getOffsetSize());
+        const outerElementProps = {
+            id,
+            ref: this._outerRefSetter,
+            layout,
+            style: {
+                position: 'relative',
+                height: convertNumber2PX(height),
+                width: convertNumber2PX(width),
+                overflow: 'auto',
+                WebkitOverflowScrolling: 'touch',
+                willChange: 'transform',
+                direction
+            },
+            attrs: {
+                scrollY: layout === 'vertical',
+                scrollX: layout === 'horizontal'
+            },
+            on: {
+                scroll: onScroll
+            }
         };
-        var fail = function fail() {
-          var _this2$_getRangeToRen = _this2._getRangeToRender(),
-            _this2$_getRangeToRen2 = _slicedToArray(_this2$_getRangeToRen, 2),
-            startIndex = _this2$_getRangeToRen2[0],
-            stopIndex = _this2$_getRangeToRen2[1];
-          if (index >= startIndex && index <= stopIndex) {
-            setTimeout(function () {
-              getRectSize(ID, success, fail);
-            }, 100);
-          }
-        };
-        getRectSize(ID, success, fail);
-      });
-    },
-    _getRangeToRender: function _getRangeToRender() {
-      return this.itemList.getRangeToRender(this.$data.scrollDirection, this.$data.scrollOffset, this.$data.isScrolling);
-    },
-    _onScrollHorizontal: function _onScrollHorizontal(event) {
-      var _event$currentTarget = event.currentTarget,
-        clientWidth = _event$currentTarget.clientWidth,
-        scrollTop = _event$currentTarget.scrollTop,
-        scrollLeft = _event$currentTarget.scrollLeft,
-        scrollHeight = _event$currentTarget.scrollHeight,
-        scrollWidth = _event$currentTarget.scrollWidth;
-      this.preset.field = {
-        scrollHeight: scrollHeight,
-        scrollWidth: this.itemList.getOffsetSize(),
-        scrollTop: scrollTop,
-        scrollLeft: scrollLeft,
-        clientHeight: scrollHeight,
-        clientWidth: scrollWidth
-      };
-      if (this.$props.onScrollNative) {
-        this.$props.onScrollNative(event);
-      }
-      var diffOffset = this.preset.field.scrollLeft - scrollLeft;
-      if (this.scrollOffset === scrollLeft || this.preset.isShaking(diffOffset)) {
-        return;
-      }
-      var scrollOffset = scrollLeft;
-      if (this.preset.isRtl) {
-        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
-        // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
-        // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-        switch (getRTLOffsetType()) {
-          case 'negative':
-            scrollOffset = -scrollLeft;
-            break;
-          case 'positive-descending':
-            scrollOffset = scrollWidth - clientWidth - scrollLeft;
-            break;
+        if (isHorizontal) {
+            outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollLeft;
         }
-      }
-
-      // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-      scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
-      this.preset.field = {
-        scrollWidth: scrollOffset
-      };
-      this.isScrolling = true;
-      this.scrollDirection = this.scrollOffset < scrollLeft ? 'forward' : 'backward';
-      this.scrollOffset = scrollOffset;
-      this.scrollUpdateWasRequested = false;
-      this.$nextTick(this._resetIsScrollingDebounced);
-    },
-    _onScrollVertical: function _onScrollVertical(event) {
-      var _event$currentTarget2 = event.currentTarget,
-        clientHeight = _event$currentTarget2.clientHeight,
-        scrollHeight = _event$currentTarget2.scrollHeight,
-        scrollWidth = _event$currentTarget2.scrollWidth,
-        scrollTop = _event$currentTarget2.scrollTop,
-        scrollLeft = _event$currentTarget2.scrollLeft;
-      if (this.$props.onScrollNative) {
-        this.$props.onScrollNative(event);
-      }
-      var diffOffset = this.preset.field.scrollTop - scrollTop;
-      if (this.scrollOffset === scrollTop || this.preset.isShaking(diffOffset)) {
-        return;
-      }
-
-      // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-      var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
-      this.preset.field = {
-        scrollHeight: this.itemList.getOffsetSize(),
-        scrollWidth: scrollWidth,
-        scrollTop: scrollOffset,
-        scrollLeft: scrollLeft,
-        clientHeight: clientHeight,
-        clientWidth: scrollWidth,
-        diffOffset: this.preset.field.scrollTop - scrollOffset
-      };
-      this.isScrolling = true;
-      this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
-      this.scrollOffset = scrollOffset;
-      this.scrollUpdateWasRequested = false;
-      this.$nextTick(this._resetIsScrollingDebounced);
-    },
-    _outerRefSetter: function _outerRefSetter(ref) {
-      var outerRef = this.$props.outerRef;
-      this._outerRef = ref;
-      if (typeof outerRef === 'function') {
-        outerRef(ref);
-      } else if (outerRef != null && _typeof(outerRef) === 'object' && outerRef.hasOwnProperty('value')) {
-        outerRef.value = ref;
-      }
-    },
-    _resetIsScrollingDebounced: function _resetIsScrollingDebounced() {
-      if (this.resetIsScrollingTimeoutId !== null) {
-        cancelTimeout(this.resetIsScrollingTimeoutId);
-      }
-      this.resetIsScrollingTimeoutId = requestTimeout(this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
-    },
-    _resetIsScrolling: function _resetIsScrolling() {
-      var _this3 = this;
-      this.resetIsScrollingTimeoutId = null;
-      this.isScrolling = false;
-      this.$nextTick(function () {
-        _this3.preset.getItemStyleCache(-1, null);
-      });
-    }
-  },
-  mounted: function mounted() {
-    var initialScrollOffset = this.$props.initialScrollOffset;
-    if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
-      var outerRef = this._outerRef;
-      if (this.preset.isHorizontal) {
-        outerRef.scrollLeft = initialScrollOffset;
-      } else {
-        outerRef.scrollTop = initialScrollOffset;
-      }
-    }
-    this._callPropsCallbacks();
-  },
-  updated: function updated() {
-    this.preset.update(this.$props);
-    var _this$$data = this.$data,
-      scrollOffset = _this$$data.scrollOffset,
-      scrollUpdateWasRequested = _this$$data.scrollUpdateWasRequested;
-    if (scrollUpdateWasRequested && this._outerRef != null) {
-      var outerRef = this._outerRef;
-      if (this.preset.isHorizontal) {
-        if (this.preset.isRtl) {
-          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
-          // So we need to determine which browser behavior we're dealing with, and mimic it.
-          switch (getRTLOffsetType()) {
-            case 'negative':
-              outerRef.scrollLeft = -scrollOffset;
-              break;
-            case 'positive-ascending':
-              outerRef.scrollLeft = scrollOffset;
-              break;
-            default:
-              {
-                var clientWidth = outerRef.clientWidth,
-                  scrollWidth = outerRef.scrollWidth;
-                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
-                break;
-              }
-          }
-        } else {
-          outerRef.scrollLeft = scrollOffset;
-        }
-      } else {
-        outerRef.scrollTop = scrollOffset;
-      }
-    }
-    this._callPropsCallbacks();
-  },
-  beforeDestroy: function beforeDestroy() {
-    if (this.resetIsScrollingTimeoutId !== null) {
-      cancelTimeout(this.resetIsScrollingTimeoutId);
-    }
-  },
-  render: function render() {
-    var _this4 = this;
-    var _omit = omit(this.$props, ['innerElementType', 'innerTagName', 'itemElementType', 'itemTagName', 'outerElementType', 'outerTagName', 'position']),
-      item = _omit.item,
-      direction = _omit.direction,
-      height = _omit.height,
-      innerRef = _omit.innerRef,
-      itemCount = _omit.itemCount,
-      itemData = _omit.itemData,
-      _omit$itemKey = _omit.itemKey,
-      itemKey = _omit$itemKey === void 0 ? defaultItemKey : _omit$itemKey,
-      layout = _omit.layout,
-      useIsScrolling = _omit.useIsScrolling,
-      width = _omit.width;
-    var _this$$data2 = this.$data,
-      id = _this$$data2.id,
-      isScrolling = _this$$data2.isScrolling,
-      scrollOffset = _this$$data2.scrollOffset,
-      scrollUpdateWasRequested = _this$$data2.scrollUpdateWasRequested;
-    var isHorizontal = this.preset.isHorizontal;
-    var placeholderCount = this.preset.placeholderCount;
-    var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
-    var _this$_getRangeToRend5 = this._getRangeToRender(),
-      _this$_getRangeToRend6 = _slicedToArray(_this$_getRangeToRend5, 2),
-      startIndex = _this$_getRangeToRend6[0],
-      stopIndex = _this$_getRangeToRend6[1];
-    var items = [];
-    if (itemCount > 0) {
-      var prevPlaceholder = startIndex < placeholderCount ? startIndex : placeholderCount;
-      items.push(new Array(prevPlaceholder).fill(-1).map(function (_, index) {
-        return _render(_this4.preset.itemTagName, {
-          key: itemKey(index + startIndex - prevPlaceholder, itemData),
-          style: {
-            display: 'none'
-          }
-        });
-      }));
-      for (var index = startIndex; index <= stopIndex; index++) {
-        var style = this.preset.getItemStyle(index);
-        items.push(_render(this.preset.itemTagName, {
-          key: itemKey(index, itemData),
-          style: style
-        }, [_render(item, {
-          id: "".concat(id, "-").concat(index),
-          props: {
-            id: "".concat(id, "-").concat(index),
-            data: itemData,
-            index: index,
-            isScrolling: useIsScrolling ? isScrolling : undefined
-          }
-        })]));
-      }
-      var restCount = itemCount - stopIndex;
-      var postPlaceholder = restCount < placeholderCount ? restCount : placeholderCount;
-      items.push(new Array(postPlaceholder).fill(-1).map(function (_, index) {
-        return _render(_this4.preset.itemTagName, {
-          key: itemKey(1 + index + stopIndex, itemData),
-          style: {
-            display: 'none'
-          }
-        });
-      }));
-    }
-
-    // Read this value AFTER items have been created,
-    // So their actual sizes (if variable) are taken into consideration.
-    var estimatedTotalSize = convertNumber2PX(this.itemList.getOffsetSize());
-    var outerElementProps = {
-      id: id,
-      ref: this._outerRefSetter,
-      layout: layout,
-      style: {
-        position: 'relative',
-        height: convertNumber2PX(height),
-        width: convertNumber2PX(width),
-        overflow: 'auto',
-        WebkitOverflowScrolling: 'touch',
-        willChange: 'transform',
-        direction: direction
-      },
-      attrs: {
-        scrollY: layout === 'vertical',
-        scrollX: layout === 'horizontal'
-      },
-      on: {
-        scroll: onScroll
-      }
-    };
-    if (isHorizontal) {
-      outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollLeft;
-    } else {
-      outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
-    }
-    if (this.preset.isRelative) {
-      var _this$$slots$top, _this$$slots, _this$$slots$bottom, _this$$slots2;
-      var pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
-      return _render(this.preset.outerTagName, outerElementProps, [process.env.FRAMEWORK === 'vue3' ? (_this$$slots$top = (_this$$slots = this.$slots).top) === null || _this$$slots$top === void 0 ? void 0 : _this$$slots$top.call(_this$$slots) : this.$slots.top, _render(this.preset.itemTagName, {
-        key: "".concat(id, "-pre"),
-        id: "".concat(id, "-pre"),
-        style: {
-          height: isHorizontal ? '100%' : pre,
-          width: !isHorizontal ? '100%' : pre
+        else {
+            outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
         }
-      }), _render(this.preset.innerTagName, {
-        ref: innerRef,
-        key: "".concat(id, "-inner"),
-        id: "".concat(id, "-inner"),
-        style: {
-          pointerEvents: isScrolling ? 'none' : 'auto',
-          position: 'relative'
+        if (this.preset.isRelative) {
+            const pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
+            return render(this.preset.outerTagName, outerElementProps, [
+                process.env.FRAMEWORK === 'vue3' ? (_b = (_a = this.$slots).top) === null || _b === void 0 ? void 0 : _b.call(_a) : this.$slots.top,
+                render(this.preset.itemTagName, {
+                    key: `${id}-pre`,
+                    id: `${id}-pre`,
+                    style: {
+                        height: isHorizontal ? '100%' : pre,
+                        width: !isHorizontal ? '100%' : pre
+                    }
+                }),
+                render(this.preset.innerTagName, {
+                    ref: innerRef,
+                    key: `${id}-inner`,
+                    id: `${id}-inner`,
+                    style: {
+                        pointerEvents: isScrolling ? 'none' : 'auto',
+                        position: 'relative',
+                    }
+                }, items),
+                process.env.FRAMEWORK === 'vue3' ? (_d = (_c = this.$slots).bottom) === null || _d === void 0 ? void 0 : _d.call(_c) : this.$slots.bottom,
+            ]);
         }
-      }, items), process.env.FRAMEWORK === 'vue3' ? (_this$$slots$bottom = (_this$$slots2 = this.$slots).bottom) === null || _this$$slots$bottom === void 0 ? void 0 : _this$$slots$bottom.call(_this$$slots2) : this.$slots.bottom]);
-    } else {
-      var _this$$slots$top2, _this$$slots3, _this$$slots$bottom2, _this$$slots4;
-      return _render(this.preset.outerTagName, outerElementProps, [process.env.FRAMEWORK === 'vue3' ? (_this$$slots$top2 = (_this$$slots3 = this.$slots).top) === null || _this$$slots$top2 === void 0 ? void 0 : _this$$slots$top2.call(_this$$slots3) : this.$slots.top, _render(this.preset.innerTagName, {
-        ref: innerRef,
-        key: "".concat(id, "-inner"),
-        id: "".concat(id, "-inner"),
-        style: {
-          height: isHorizontal ? '100%' : estimatedTotalSize,
-          pointerEvents: isScrolling ? 'none' : 'auto',
-          position: 'relative',
-          width: !isHorizontal ? '100%' : estimatedTotalSize
+        else {
+            return render(this.preset.outerTagName, outerElementProps, [
+                process.env.FRAMEWORK === 'vue3' ? (_f = (_e = this.$slots).top) === null || _f === void 0 ? void 0 : _f.call(_e) : this.$slots.top,
+                render(this.preset.innerTagName, {
+                    ref: innerRef,
+                    key: `${id}-inner`,
+                    id: `${id}-inner`,
+                    style: {
+                        height: isHorizontal ? '100%' : estimatedTotalSize,
+                        pointerEvents: isScrolling ? 'none' : 'auto',
+                        position: 'relative',
+                        width: !isHorizontal ? '100%' : estimatedTotalSize
+                    }
+                }, items),
+                process.env.FRAMEWORK === 'vue3' ? (_h = (_g = this.$slots).bottom) === null || _h === void 0 ? void 0 : _h.call(_g) : this.$slots.bottom,
+            ]);
         }
-      }, items), process.env.FRAMEWORK === 'vue3' ? (_this$$slots$bottom2 = (_this$$slots4 = this.$slots).bottom) === null || _this$$slots$bottom2 === void 0 ? void 0 : _this$$slots$bottom2.call(_this$$slots4) : this.$slots.bottom]);
     }
-  }
-};
+};
+
+export { List as default };
+//# sourceMappingURL=list.js.map