primevue/virtualscroller/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/virtualscroller/BaseVirtualScroller.vue","../../src/virtualscroller/VirtualScroller.vue","../../src/virtualscroller/VirtualScroller.vue?vue&type=template&id=0bb37710&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport VirtualScrollerStyle from 'primevue/virtualscroller/style';\n\nexport default {\n    name: 'BaseVirtualScroller',\n    extends: BaseComponent,\n    props: {\n        id: {\n            type: String,\n            default: null\n        },\n        style: null,\n        class: null,\n        items: {\n            type: Array,\n            default: null\n        },\n        itemSize: {\n            type: [Number, Array],\n            default: 0\n        },\n        scrollHeight: null,\n        scrollWidth: null,\n        orientation: {\n            type: String,\n            default: 'vertical'\n        },\n        numToleratedItems: {\n            type: Number,\n            default: null\n        },\n        delay: {\n            type: Number,\n            default: 0\n        },\n        resizeDelay: {\n            type: Number,\n            default: 10\n        },\n        lazy: {\n            type: Boolean,\n            default: false\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        },\n        loaderDisabled: {\n            type: Boolean,\n            default: false\n        },\n        columns: {\n            type: Array,\n            default: null\n        },\n        loading: {\n            type: Boolean,\n            default: false\n        },\n        showSpacer: {\n            type: Boolean,\n            default: true\n        },\n        showLoader: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        inline: {\n            type: Boolean,\n            default: false\n        },\n        step: {\n            type: Number,\n            default: 0\n        },\n        appendOnly: {\n            type: Boolean,\n            default: false\n        },\n        autoSize: {\n            type: Boolean,\n            default: false\n        }\n    },\n    style: VirtualScrollerStyle,\n    provide() {\n        return {\n            $pcVirtualScroller: this,\n            $parentInstance: this\n        };\n    },\n    beforeMount() {\n        VirtualScrollerStyle.loadCSS({ nonce: this.$primevueConfig?.csp?.nonce });\n    }\n};\n</script>\n","<template>\n    <template v-if=\"!disabled\">\n        <div :ref=\"elementRef\" :class=\"containerClass\" :tabindex=\"tabindex\" :style=\"style\" @scroll=\"onScroll\" v-bind=\"ptmi('root')\">\n            <slot\n                name=\"content\"\n                :styleClass=\"contentClass\"\n                :items=\"loadedItems\"\n                :getItemOptions=\"getOptions\"\n                :loading=\"d_loading\"\n                :getLoaderOptions=\"getLoaderOptions\"\n                :itemSize=\"itemSize\"\n                :rows=\"loadedRows\"\n                :columns=\"loadedColumns\"\n                :contentRef=\"contentRef\"\n                :spacerStyle=\"spacerStyle\"\n                :contentStyle=\"contentStyle\"\n                :vertical=\"isVertical()\"\n                :horizontal=\"isHorizontal()\"\n                :both=\"isBoth()\"\n            >\n                <div :ref=\"contentRef\" :class=\"contentClass\" :style=\"contentStyle\" v-bind=\"ptm('content')\">\n                    <template v-for=\"(item, index) of loadedItems\" :key=\"index\">\n                        <slot name=\"item\" :item=\"item\" :options=\"getOptions(index)\"></slot>\n                    </template>\n                </div>\n            </slot>\n            <div v-if=\"showSpacer\" class=\"p-virtualscroller-spacer\" :style=\"spacerStyle\" v-bind=\"ptm('spacer')\"></div>\n            <div v-if=\"!loaderDisabled && showLoader && d_loading\" :class=\"loaderClass\" v-bind=\"ptm('loader')\">\n                <template v-if=\"$slots && $slots.loader\">\n                    <template v-for=\"(_, index) of loaderArr\" :key=\"index\">\n                        <slot name=\"loader\" :options=\"getLoaderOptions(index, isBoth() && { numCols: d_numItemsInViewport.cols })\"></slot>\n                    </template>\n                </template>\n                <slot name=\"loadingicon\">\n                    <SpinnerIcon spin class=\"p-virtualscroller-loading-icon\" v-bind=\"ptm('loadingIcon')\" />\n                </slot>\n            </div>\n        </div>\n    </template>\n    <template v-else>\n        <slot></slot>\n        <slot name=\"content\" :items=\"items\" :rows=\"items\" :columns=\"loadedColumns\"></slot>\n    </template>\n</template>\n\n<script>\nimport { findSingle, getHeight, getWidth, isVisible } from '@primeuix/utils/dom';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport BaseVirtualScroller from './BaseVirtualScroller.vue';\n\nexport default {\n    name: 'VirtualScroller',\n    extends: BaseVirtualScroller,\n    inheritAttrs: false,\n    emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],\n    data() {\n        const both = this.isBoth();\n\n        return {\n            first: both ? { rows: 0, cols: 0 } : 0,\n            last: both ? { rows: 0, cols: 0 } : 0,\n            page: both ? { rows: 0, cols: 0 } : 0,\n            numItemsInViewport: both ? { rows: 0, cols: 0 } : 0,\n            lastScrollPos: both ? { top: 0, left: 0 } : 0,\n            d_numToleratedItems: this.numToleratedItems,\n            d_loading: this.loading,\n            loaderArr: [],\n            spacerStyle: {},\n            contentStyle: {}\n        };\n    },\n    element: null,\n    content: null,\n    lastScrollPos: null,\n    scrollTimeout: null,\n    resizeTimeout: null,\n    defaultWidth: 0,\n    defaultHeight: 0,\n    defaultContentWidth: 0,\n    defaultContentHeight: 0,\n    isRangeChanged: false,\n    lazyLoadState: {},\n    resizeListener: null,\n    resizeObserver: null,\n    initialized: false,\n    watch: {\n        numToleratedItems(newValue) {\n            this.d_numToleratedItems = newValue;\n        },\n        loading(newValue, oldValue) {\n            if (this.lazy && newValue !== oldValue && newValue !== this.d_loading) {\n                this.d_loading = newValue;\n            }\n        },\n        items: {\n            handler(newValue, oldValue) {\n                if (!oldValue || oldValue.length !== (newValue || []).length) {\n                    this.init();\n                    this.calculateAutoSize();\n                }\n            },\n            deep: true\n        },\n        itemSize() {\n            this.init();\n            this.calculateAutoSize();\n        },\n        orientation() {\n            this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;\n        },\n        scrollHeight() {\n            this.init();\n            this.calculateAutoSize();\n        },\n        scrollWidth() {\n            this.init();\n            this.calculateAutoSize();\n        }\n    },\n    mounted() {\n        this.viewInit();\n\n        this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;\n        this.lazyLoadState = this.lazyLoadState || {};\n    },\n    updated() {\n        !this.initialized && this.viewInit();\n    },\n    unmounted() {\n        this.unbindResizeListener();\n\n        this.initialized = false;\n    },\n    methods: {\n        viewInit() {\n            if (isVisible(this.element)) {\n                this.setContentEl(this.content);\n                this.init();\n                this.calculateAutoSize();\n                this.bindResizeListener();\n\n                this.defaultWidth = getWidth(this.element);\n                this.defaultHeight = getHeight(this.element);\n                this.defaultContentWidth = getWidth(this.content);\n                this.defaultContentHeight = getHeight(this.content);\n                this.initialized = true;\n            }\n        },\n        init() {\n            if (!this.disabled) {\n                this.setSize();\n                this.calculateOptions();\n                this.setSpacerSize();\n            }\n        },\n        isVertical() {\n            return this.orientation === 'vertical';\n        },\n        isHorizontal() {\n            return this.orientation === 'horizontal';\n        },\n        isBoth() {\n            return this.orientation === 'both';\n        },\n        scrollTo(options) {\n            //this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0;\n            this.element && this.element.scrollTo(options);\n        },\n        scrollToIndex(index, behavior = 'auto') {\n            const both = this.isBoth();\n            const horizontal = this.isHorizontal();\n            const valid = both ? index.every((i) => i > -1) : index > -1;\n\n            if (valid) {\n                const first = this.first;\n                const { scrollTop = 0, scrollLeft = 0 } = this.element;\n                const { numToleratedItems } = this.calculateNumItems();\n                const contentPos = this.getContentPosition();\n                const itemSize = this.itemSize;\n                const calculateFirst = (_index = 0, _numT) => (_index <= _numT ? 0 : _index);\n                const calculateCoord = (_first, _size, _cpos) => _first * _size + _cpos;\n                const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });\n                let newFirst = both ? { rows: 0, cols: 0 } : 0;\n                let isRangeChanged = false,\n                    isScrollChanged = false;\n\n                if (both) {\n                    newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) };\n                    scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top));\n                    isScrollChanged = this.lastScrollPos.top !== scrollTop || this.lastScrollPos.left !== scrollLeft;\n                    isRangeChanged = newFirst.rows !== first.rows || newFirst.cols !== first.cols;\n                } else {\n                    newFirst = calculateFirst(index, numToleratedItems);\n                    horizontal ? scrollTo(calculateCoord(newFirst, itemSize, contentPos.left), scrollTop) : scrollTo(scrollLeft, calculateCoord(newFirst, itemSize, contentPos.top));\n                    isScrollChanged = this.lastScrollPos !== (horizontal ? scrollLeft : scrollTop);\n                    isRangeChanged = newFirst !== first;\n                }\n\n                this.isRangeChanged = isRangeChanged;\n                isScrollChanged && (this.first = newFirst);\n            }\n        },\n        scrollInView(index, to, behavior = 'auto') {\n            if (to) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n                const valid = both ? index.every((i) => i > -1) : index > -1;\n\n                if (valid) {\n                    const { first, viewport } = this.getRenderedRange();\n                    const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });\n                    const isToStart = to === 'to-start';\n                    const isToEnd = to === 'to-end';\n\n                    if (isToStart) {\n                        if (both) {\n                            if (viewport.first.rows - first.rows > index[0]) {\n                                scrollTo(viewport.first.cols * this.itemSize[1], (viewport.first.rows - 1) * this.itemSize[0]);\n                            } else if (viewport.first.cols - first.cols > index[1]) {\n                                scrollTo((viewport.first.cols - 1) * this.itemSize[1], viewport.first.rows * this.itemSize[0]);\n                            }\n                        } else {\n                            if (viewport.first - first > index) {\n                                const pos = (viewport.first - 1) * this.itemSize;\n\n                                horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);\n                            }\n                        }\n                    } else if (isToEnd) {\n                        if (both) {\n                            if (viewport.last.rows - first.rows <= index[0] + 1) {\n                                scrollTo(viewport.first.cols * this.itemSize[1], (viewport.first.rows + 1) * this.itemSize[0]);\n                            } else if (viewport.last.cols - first.cols <= index[1] + 1) {\n                                scrollTo((viewport.first.cols + 1) * this.itemSize[1], viewport.first.rows * this.itemSize[0]);\n                            }\n                        } else {\n                            if (viewport.last - first <= index + 1) {\n                                const pos = (viewport.first + 1) * this.itemSize;\n\n                                horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);\n                            }\n                        }\n                    }\n                }\n            } else {\n                this.scrollToIndex(index, behavior);\n            }\n        },\n        getRenderedRange() {\n            const calculateFirstInViewport = (_pos, _size) => Math.floor(_pos / (_size || _pos));\n\n            let firstInViewport = this.first;\n            let lastInViewport = 0;\n\n            if (this.element) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n                const { scrollTop, scrollLeft } = this.element;\n\n                if (both) {\n                    firstInViewport = { rows: calculateFirstInViewport(scrollTop, this.itemSize[0]), cols: calculateFirstInViewport(scrollLeft, this.itemSize[1]) };\n                    lastInViewport = { rows: firstInViewport.rows + this.numItemsInViewport.rows, cols: firstInViewport.cols + this.numItemsInViewport.cols };\n                } else {\n                    const scrollPos = horizontal ? scrollLeft : scrollTop;\n\n                    firstInViewport = calculateFirstInViewport(scrollPos, this.itemSize);\n                    lastInViewport = firstInViewport + this.numItemsInViewport;\n                }\n            }\n\n            return {\n                first: this.first,\n                last: this.last,\n                viewport: {\n                    first: firstInViewport,\n                    last: lastInViewport\n                }\n            };\n        },\n        calculateNumItems() {\n            const both = this.isBoth();\n            const horizontal = this.isHorizontal();\n            const itemSize = this.itemSize;\n            const contentPos = this.getContentPosition();\n            const contentWidth = this.element ? this.element.offsetWidth - contentPos.left : 0;\n            const contentHeight = this.element ? this.element.offsetHeight - contentPos.top : 0;\n            const calculateNumItemsInViewport = (_contentSize, _itemSize) => Math.ceil(_contentSize / (_itemSize || _contentSize));\n            const calculateNumToleratedItems = (_numItems) => Math.ceil(_numItems / 2);\n            const numItemsInViewport = both\n                ? { rows: calculateNumItemsInViewport(contentHeight, itemSize[0]), cols: calculateNumItemsInViewport(contentWidth, itemSize[1]) }\n                : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, itemSize);\n\n            const numToleratedItems = this.d_numToleratedItems || (both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));\n\n            return { numItemsInViewport, numToleratedItems };\n        },\n        calculateOptions() {\n            const both = this.isBoth();\n            const first = this.first;\n            const { numItemsInViewport, numToleratedItems } = this.calculateNumItems();\n            const calculateLast = (_first, _num, _numT, _isCols = false) => this.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);\n            const last = both\n                ? { rows: calculateLast(first.rows, numItemsInViewport.rows, numToleratedItems[0]), cols: calculateLast(first.cols, numItemsInViewport.cols, numToleratedItems[1], true) }\n                : calculateLast(first, numItemsInViewport, numToleratedItems);\n\n            this.last = last;\n            this.numItemsInViewport = numItemsInViewport;\n            this.d_numToleratedItems = numToleratedItems;\n            this.$emit('update:numToleratedItems', this.d_numToleratedItems);\n\n            if (this.showLoader) {\n                this.loaderArr = both ? Array.from({ length: numItemsInViewport.rows }).map(() => Array.from({ length: numItemsInViewport.cols })) : Array.from({ length: numItemsInViewport });\n            }\n\n            if (this.lazy) {\n                Promise.resolve().then(() => {\n                    this.lazyLoadState = {\n                        first: this.step ? (both ? { rows: 0, cols: first.cols } : 0) : first,\n                        last: Math.min(this.step ? this.step : last, this.items?.length || 0)\n                    };\n\n                    this.$emit('lazy-load', this.lazyLoadState);\n                });\n            }\n        },\n        calculateAutoSize() {\n            if (this.autoSize && !this.d_loading) {\n                Promise.resolve().then(() => {\n                    if (this.content) {\n                        const both = this.isBoth();\n                        const horizontal = this.isHorizontal();\n                        const vertical = this.isVertical();\n\n                        this.content.style.minHeight = this.content.style.minWidth = 'auto';\n                        this.content.style.position = 'relative';\n                        this.element.style.contain = 'none';\n\n                        /*const [contentWidth, contentHeight] = [getWidth(this.content), getHeight(this.content)];\n\n                        contentWidth !== this.defaultContentWidth && (this.element.style.width = '');\n                        contentHeight !== this.defaultContentHeight && (this.element.style.height = '');*/\n\n                        const [width, height] = [getWidth(this.element), getHeight(this.element)];\n\n                        (both || horizontal) && (this.element.style.width = width < this.defaultWidth ? width + 'px' : this.scrollWidth || this.defaultWidth + 'px');\n                        (both || vertical) && (this.element.style.height = height < this.defaultHeight ? height + 'px' : this.scrollHeight || this.defaultHeight + 'px');\n\n                        this.content.style.minHeight = this.content.style.minWidth = '';\n                        this.content.style.position = '';\n                        this.element.style.contain = '';\n                    }\n                });\n            }\n        },\n        getLast(last = 0, isCols) {\n            return this.items ? Math.min(isCols ? (this.columns || this.items[0])?.length || 0 : this.items?.length || 0, last) : 0;\n        },\n        getContentPosition() {\n            if (this.content) {\n                const style = getComputedStyle(this.content);\n                const left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);\n                const right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);\n                const top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);\n                const bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);\n\n                return { left, right, top, bottom, x: left + right, y: top + bottom };\n            }\n\n            return { left: 0, right: 0, top: 0, bottom: 0, x: 0, y: 0 };\n        },\n        setSize() {\n            if (this.element) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n                const parentElement = this.element.parentElement;\n                const width = this.scrollWidth || `${this.element.offsetWidth || parentElement.offsetWidth}px`;\n                const height = this.scrollHeight || `${this.element.offsetHeight || parentElement.offsetHeight}px`;\n                const setProp = (_name, _value) => (this.element.style[_name] = _value);\n\n                if (both || horizontal) {\n                    setProp('height', height);\n                    setProp('width', width);\n                } else {\n                    setProp('height', height);\n                }\n            }\n        },\n        setSpacerSize() {\n            const items = this.items;\n\n            if (items) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n                const contentPos = this.getContentPosition();\n                const setProp = (_name, _value, _size, _cpos = 0) => (this.spacerStyle = { ...this.spacerStyle, ...{ [`${_name}`]: (_value || []).length * _size + _cpos + 'px' } });\n\n                if (both) {\n                    setProp('height', items, this.itemSize[0], contentPos.y);\n                    setProp('width', this.columns || items[1], this.itemSize[1], contentPos.x);\n                } else {\n                    horizontal ? setProp('width', this.columns || items, this.itemSize, contentPos.x) : setProp('height', items, this.itemSize, contentPos.y);\n                }\n            }\n        },\n        setContentPosition(pos) {\n            if (this.content && !this.appendOnly) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n                const first = pos ? pos.first : this.first;\n                const calculateTranslateVal = (_first, _size) => _first * _size;\n                const setTransform = (_x = 0, _y = 0) => (this.contentStyle = { ...this.contentStyle, ...{ transform: `translate3d(${_x}px, ${_y}px, 0)` } });\n\n                if (both) {\n                    setTransform(calculateTranslateVal(first.cols, this.itemSize[1]), calculateTranslateVal(first.rows, this.itemSize[0]));\n                } else {\n                    const translateVal = calculateTranslateVal(first, this.itemSize);\n\n                    horizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);\n                }\n            }\n        },\n        onScrollPositionChange(event) {\n            const target = event.target;\n            const both = this.isBoth();\n            const horizontal = this.isHorizontal();\n            const contentPos = this.getContentPosition();\n            const calculateScrollPos = (_pos, _cpos) => (_pos ? (_pos > _cpos ? _pos - _cpos : _pos) : 0);\n            const calculateCurrentIndex = (_pos, _size) => Math.floor(_pos / (_size || _pos));\n\n            const calculateTriggerIndex = (_currentIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {\n                return _currentIndex <= _numT ? _numT : _isScrollDownOrRight ? _last - _num - _numT : _first + _numT - 1;\n            };\n\n            const calculateFirst = (_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight, _isCols) => {\n                if (_currentIndex <= _numT) return 0;\n                const firstValue = Math.max(0, _isScrollDownOrRight ? (_currentIndex < _triggerIndex ? _first : _currentIndex - _numT) : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);\n                const maxFirst = this.getLast(firstValue, _isCols);\n                if (firstValue > maxFirst) return maxFirst - _num;\n                else return firstValue;\n            };\n\n            const calculateLast = (_currentIndex, _first, _last, _num, _numT, _isCols) => {\n                let lastValue = _first + _num + 2 * _numT;\n\n                if (_currentIndex >= _numT) {\n                    lastValue += _numT + 1;\n                }\n\n                return this.getLast(lastValue, _isCols);\n            };\n\n            const scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);\n            const scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);\n\n            let newFirst = both ? { rows: 0, cols: 0 } : 0;\n            let newLast = this.last;\n            let isRangeChanged = false;\n            let newScrollPos = this.lastScrollPos;\n\n            if (both) {\n                const isScrollDown = this.lastScrollPos.top <= scrollTop;\n                const isScrollRight = this.lastScrollPos.left <= scrollLeft;\n\n                if (!this.appendOnly || (this.appendOnly && (isScrollDown || isScrollRight))) {\n                    const currentIndex = { rows: calculateCurrentIndex(scrollTop, this.itemSize[0]), cols: calculateCurrentIndex(scrollLeft, this.itemSize[1]) };\n                    const triggerIndex = {\n                        rows: calculateTriggerIndex(currentIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),\n                        cols: calculateTriggerIndex(currentIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight)\n                    };\n\n                    newFirst = {\n                        rows: calculateFirst(currentIndex.rows, triggerIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),\n                        cols: calculateFirst(currentIndex.cols, triggerIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight, true)\n                    };\n                    newLast = {\n                        rows: calculateLast(currentIndex.rows, newFirst.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0]),\n                        cols: calculateLast(currentIndex.cols, newFirst.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], true)\n                    };\n\n                    isRangeChanged = newFirst.rows !== this.first.rows || newLast.rows !== this.last.rows || newFirst.cols !== this.first.cols || newLast.cols !== this.last.cols || this.isRangeChanged;\n                    newScrollPos = { top: scrollTop, left: scrollLeft };\n                }\n            } else {\n                const scrollPos = horizontal ? scrollLeft : scrollTop;\n                const isScrollDownOrRight = this.lastScrollPos <= scrollPos;\n\n                if (!this.appendOnly || (this.appendOnly && isScrollDownOrRight)) {\n                    const currentIndex = calculateCurrentIndex(scrollPos, this.itemSize);\n                    const triggerIndex = calculateTriggerIndex(currentIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);\n\n                    newFirst = calculateFirst(currentIndex, triggerIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);\n                    newLast = calculateLast(currentIndex, newFirst, this.last, this.numItemsInViewport, this.d_numToleratedItems);\n                    isRangeChanged = newFirst !== this.first || newLast !== this.last || this.isRangeChanged;\n                    newScrollPos = scrollPos;\n                }\n            }\n\n            return {\n                first: newFirst,\n                last: newLast,\n                isRangeChanged,\n                scrollPos: newScrollPos\n            };\n        },\n        onScrollChange(event) {\n            const { first, last, isRangeChanged, scrollPos } = this.onScrollPositionChange(event);\n\n            if (isRangeChanged) {\n                const newState = { first, last };\n\n                this.setContentPosition(newState);\n\n                this.first = first;\n                this.last = last;\n                this.lastScrollPos = scrollPos;\n\n                this.$emit('scroll-index-change', newState);\n\n                if (this.lazy && this.isPageChanged(first)) {\n                    const lazyLoadState = {\n                        first: this.step ? Math.min(this.getPageByFirst(first) * this.step, (this.items?.length || 0) - this.step) : first,\n                        last: Math.min(this.step ? (this.getPageByFirst(first) + 1) * this.step : last, this.items?.length || 0)\n                    };\n                    const isLazyStateChanged = this.lazyLoadState.first !== lazyLoadState.first || this.lazyLoadState.last !== lazyLoadState.last;\n\n                    isLazyStateChanged && this.$emit('lazy-load', lazyLoadState);\n                    this.lazyLoadState = lazyLoadState;\n                }\n            }\n        },\n        onScroll(event) {\n            this.$emit('scroll', event);\n\n            if (this.delay) {\n                if (this.scrollTimeout) {\n                    clearTimeout(this.scrollTimeout);\n                }\n\n                if (this.isPageChanged()) {\n                    if (!this.d_loading && this.showLoader) {\n                        const { isRangeChanged } = this.onScrollPositionChange(event);\n                        const changed = isRangeChanged || (this.step ? this.isPageChanged() : false);\n\n                        changed && (this.d_loading = true);\n                    }\n\n                    this.scrollTimeout = setTimeout(() => {\n                        this.onScrollChange(event);\n\n                        if (this.d_loading && this.showLoader && (!this.lazy || this.loading === undefined)) {\n                            this.d_loading = false;\n                            this.page = this.getPageByFirst();\n                        }\n                    }, this.delay);\n                }\n            } else {\n                this.onScrollChange(event);\n            }\n        },\n        onResize() {\n            if (this.resizeTimeout) {\n                clearTimeout(this.resizeTimeout);\n            }\n\n            this.resizeTimeout = setTimeout(() => {\n                if (isVisible(this.element)) {\n                    const both = this.isBoth();\n                    const vertical = this.isVertical();\n                    const horizontal = this.isHorizontal();\n                    const [width, height] = [getWidth(this.element), getHeight(this.element)];\n                    const [isDiffWidth, isDiffHeight] = [width !== this.defaultWidth, height !== this.defaultHeight];\n                    const reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;\n\n                    if (reinit) {\n                        this.d_numToleratedItems = this.numToleratedItems;\n                        this.defaultWidth = width;\n                        this.defaultHeight = height;\n                        this.defaultContentWidth = getWidth(this.content);\n                        this.defaultContentHeight = getHeight(this.content);\n\n                        this.init();\n                    }\n                }\n            }, this.resizeDelay);\n        },\n        bindResizeListener() {\n            if (!this.resizeListener) {\n                this.resizeListener = this.onResize.bind(this);\n\n                window.addEventListener('resize', this.resizeListener);\n                window.addEventListener('orientationchange', this.resizeListener);\n\n                this.resizeObserver = new ResizeObserver(() => {\n                    this.onResize();\n                });\n                this.resizeObserver.observe(this.element);\n            }\n        },\n        unbindResizeListener() {\n            if (this.resizeListener) {\n                window.removeEventListener('resize', this.resizeListener);\n                window.removeEventListener('orientationchange', this.resizeListener);\n                this.resizeListener = null;\n            }\n\n            if (this.resizeObserver) {\n                this.resizeObserver.disconnect();\n                this.resizeObserver = null;\n            }\n        },\n        getOptions(renderedIndex) {\n            const count = (this.items || []).length;\n            const index = this.isBoth() ? this.first.rows + renderedIndex : this.first + renderedIndex;\n\n            return {\n                index,\n                count,\n                first: index === 0,\n                last: index === count - 1,\n                even: index % 2 === 0,\n                odd: index % 2 !== 0\n            };\n        },\n        getLoaderOptions(index, extOptions) {\n            let count = this.loaderArr.length;\n\n            return {\n                index,\n                count,\n                first: index === 0,\n                last: index === count - 1,\n                even: index % 2 === 0,\n                odd: index % 2 !== 0,\n                ...extOptions\n            };\n        },\n        getPageByFirst(first) {\n            return Math.floor(((first ?? this.first) + this.d_numToleratedItems * 4) / (this.step || 1));\n        },\n        isPageChanged(first) {\n            return this.step && !this.lazy ? this.page !== this.getPageByFirst(first ?? this.first) : true;\n        },\n        setContentEl(el) {\n            this.content = el || this.content || findSingle(this.element, '[data-pc-section=\"content\"]');\n        },\n        elementRef(el) {\n            this.element = el;\n        },\n        contentRef(el) {\n            this.content = el;\n        }\n    },\n    computed: {\n        containerClass() {\n            return [\n                'p-virtualscroller',\n                this.class,\n                {\n                    'p-virtualscroller-inline': this.inline,\n                    'p-virtualscroller-both p-both-scroll': this.isBoth(),\n                    'p-virtualscroller-horizontal p-horizontal-scroll': this.isHorizontal()\n                }\n            ];\n        },\n        contentClass() {\n            return [\n                'p-virtualscroller-content',\n                {\n                    'p-virtualscroller-loading': this.d_loading\n                }\n            ];\n        },\n        loaderClass() {\n            return [\n                'p-virtualscroller-loader',\n                {\n                    'p-virtualscroller-loader-mask': !this.$slots.loader\n                }\n            ];\n        },\n        loadedItems() {\n            if (this.items && !this.d_loading) {\n                if (this.isBoth()) return this.items.slice(this.appendOnly ? 0 : this.first.rows, this.last.rows).map((item) => (this.columns ? item : item.slice(this.appendOnly ? 0 : this.first.cols, this.last.cols)));\n                else if (this.isHorizontal() && this.columns) return this.items;\n                else return this.items.slice(this.appendOnly ? 0 : this.first, this.last);\n            }\n\n            return [];\n        },\n        loadedRows() {\n            return this.d_loading ? (this.loaderDisabled ? this.loaderArr : []) : this.loadedItems;\n        },\n        loadedColumns() {\n            if (this.columns) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n\n                if (both || horizontal) {\n                    return this.d_loading && this.loaderDisabled ? (both ? this.loaderArr[0] : this.loaderArr) : this.columns.slice(both ? this.first.cols : this.first, both ? this.last.cols : this.last);\n                }\n            }\n\n            return this.columns;\n        }\n    },\n    components: {\n        SpinnerIcon: SpinnerIcon\n    }\n};\n</script>\n","<template>\n    <template v-if=\"!disabled\">\n        <div :ref=\"elementRef\" :class=\"containerClass\" :tabindex=\"tabindex\" :style=\"style\" @scroll=\"onScroll\" v-bind=\"ptmi('root')\">\n            <slot\n                name=\"content\"\n                :styleClass=\"contentClass\"\n                :items=\"loadedItems\"\n                :getItemOptions=\"getOptions\"\n                :loading=\"d_loading\"\n                :getLoaderOptions=\"getLoaderOptions\"\n                :itemSize=\"itemSize\"\n                :rows=\"loadedRows\"\n                :columns=\"loadedColumns\"\n                :contentRef=\"contentRef\"\n                :spacerStyle=\"spacerStyle\"\n                :contentStyle=\"contentStyle\"\n                :vertical=\"isVertical()\"\n                :horizontal=\"isHorizontal()\"\n                :both=\"isBoth()\"\n            >\n                <div :ref=\"contentRef\" :class=\"contentClass\" :style=\"contentStyle\" v-bind=\"ptm('content')\">\n                    <template v-for=\"(item, index) of loadedItems\" :key=\"index\">\n                        <slot name=\"item\" :item=\"item\" :options=\"getOptions(index)\"></slot>\n                    </template>\n                </div>\n            </slot>\n            <div v-if=\"showSpacer\" class=\"p-virtualscroller-spacer\" :style=\"spacerStyle\" v-bind=\"ptm('spacer')\"></div>\n            <div v-if=\"!loaderDisabled && showLoader && d_loading\" :class=\"loaderClass\" v-bind=\"ptm('loader')\">\n                <template v-if=\"$slots && $slots.loader\">\n                    <template v-for=\"(_, index) of loaderArr\" :key=\"index\">\n                        <slot name=\"loader\" :options=\"getLoaderOptions(index, isBoth() && { numCols: d_numItemsInViewport.cols })\"></slot>\n                    </template>\n                </template>\n                <slot name=\"loadingicon\">\n                    <SpinnerIcon spin class=\"p-virtualscroller-loading-icon\" v-bind=\"ptm('loadingIcon')\" />\n                </slot>\n            </div>\n        </div>\n    </template>\n    <template v-else>\n        <slot></slot>\n        <slot name=\"content\" :items=\"items\" :rows=\"items\" :columns=\"loadedColumns\"></slot>\n    </template>\n</template>\n\n<script>\nimport { findSingle, getHeight, getWidth, isVisible } from '@primeuix/utils/dom';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport BaseVirtualScroller from './BaseVirtualScroller.vue';\n\nexport default {\n    name: 'VirtualScroller',\n    extends: BaseVirtualScroller,\n    inheritAttrs: false,\n    emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],\n    data() {\n        const both = this.isBoth();\n\n        return {\n            first: both ? { rows: 0, cols: 0 } : 0,\n            last: both ? { rows: 0, cols: 0 } : 0,\n            page: both ? { rows: 0, cols: 0 } : 0,\n            numItemsInViewport: both ? { rows: 0, cols: 0 } : 0,\n            lastScrollPos: both ? { top: 0, left: 0 } : 0,\n            d_numToleratedItems: this.numToleratedItems,\n            d_loading: this.loading,\n            loaderArr: [],\n            spacerStyle: {},\n            contentStyle: {}\n        };\n    },\n    element: null,\n    content: null,\n    lastScrollPos: null,\n    scrollTimeout: null,\n    resizeTimeout: null,\n    defaultWidth: 0,\n    defaultHeight: 0,\n    defaultContentWidth: 0,\n    defaultContentHeight: 0,\n    isRangeChanged: false,\n    lazyLoadState: {},\n    resizeListener: null,\n    resizeObserver: null,\n    initialized: false,\n    watch: {\n        numToleratedItems(newValue) {\n            this.d_numToleratedItems = newValue;\n        },\n        loading(newValue, oldValue) {\n            if (this.lazy && newValue !== oldValue && newValue !== this.d_loading) {\n                this.d_loading = newValue;\n            }\n        },\n        items: {\n            handler(newValue, oldValue) {\n                if (!oldValue || oldValue.length !== (newValue || []).length) {\n                    this.init();\n                    this.calculateAutoSize();\n                }\n            },\n            deep: true\n        },\n        itemSize() {\n            this.init();\n            this.calculateAutoSize();\n        },\n        orientation() {\n            this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;\n        },\n        scrollHeight() {\n            this.init();\n            this.calculateAutoSize();\n        },\n        scrollWidth() {\n            this.init();\n            this.calculateAutoSize();\n        }\n    },\n    mounted() {\n        this.viewInit();\n\n        this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;\n        this.lazyLoadState = this.lazyLoadState || {};\n    },\n    updated() {\n        !this.initialized && this.viewInit();\n    },\n    unmounted() {\n        this.unbindResizeListener();\n\n        this.initialized = false;\n    },\n    methods: {\n        viewInit() {\n            if (isVisible(this.element)) {\n                this.setContentEl(this.content);\n                this.init();\n                this.calculateAutoSize();\n                this.bindResizeListener();\n\n                this.defaultWidth = getWidth(this.element);\n                this.defaultHeight = getHeight(this.element);\n                this.defaultContentWidth = getWidth(this.content);\n                this.defaultContentHeight = getHeight(this.content);\n                this.initialized = true;\n            }\n        },\n        init() {\n            if (!this.disabled) {\n                this.setSize();\n                this.calculateOptions();\n                this.setSpacerSize();\n            }\n        },\n        isVertical() {\n            return this.orientation === 'vertical';\n        },\n        isHorizontal() {\n            return this.orientation === 'horizontal';\n        },\n        isBoth() {\n            return this.orientation === 'both';\n        },\n        scrollTo(options) {\n            //this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0;\n            this.element && this.element.scrollTo(options);\n        },\n        scrollToIndex(index, behavior = 'auto') {\n            const both = this.isBoth();\n            const horizontal = this.isHorizontal();\n            const valid = both ? index.every((i) => i > -1) : index > -1;\n\n            if (valid) {\n                const first = this.first;\n                const { scrollTop = 0, scrollLeft = 0 } = this.element;\n                const { numToleratedItems } = this.calculateNumItems();\n                const contentPos = this.getContentPosition();\n                const itemSize = this.itemSize;\n                const calculateFirst = (_index = 0, _numT) => (_index <= _numT ? 0 : _index);\n                const calculateCoord = (_first, _size, _cpos) => _first * _size + _cpos;\n                const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });\n                let newFirst = both ? { rows: 0, cols: 0 } : 0;\n                let isRangeChanged = false,\n                    isScrollChanged = false;\n\n                if (both) {\n                    newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) };\n                    scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top));\n                    isScrollChanged = this.lastScrollPos.top !== scrollTop || this.lastScrollPos.left !== scrollLeft;\n                    isRangeChanged = newFirst.rows !== first.rows || newFirst.cols !== first.cols;\n                } else {\n                    newFirst = calculateFirst(index, numToleratedItems);\n                    horizontal ? scrollTo(calculateCoord(newFirst, itemSize, contentPos.left), scrollTop) : scrollTo(scrollLeft, calculateCoord(newFirst, itemSize, contentPos.top));\n                    isScrollChanged = this.lastScrollPos !== (horizontal ? scrollLeft : scrollTop);\n                    isRangeChanged = newFirst !== first;\n                }\n\n                this.isRangeChanged = isRangeChanged;\n                isScrollChanged && (this.first = newFirst);\n            }\n        },\n        scrollInView(index, to, behavior = 'auto') {\n            if (to) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n                const valid = both ? index.every((i) => i > -1) : index > -1;\n\n                if (valid) {\n                    const { first, viewport } = this.getRenderedRange();\n                    const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });\n                    const isToStart = to === 'to-start';\n                    const isToEnd = to === 'to-end';\n\n                    if (isToStart) {\n                        if (both) {\n                            if (viewport.first.rows - first.rows > index[0]) {\n                                scrollTo(viewport.first.cols * this.itemSize[1], (viewport.first.rows - 1) * this.itemSize[0]);\n                            } else if (viewport.first.cols - first.cols > index[1]) {\n                                scrollTo((viewport.first.cols - 1) * this.itemSize[1], viewport.first.rows * this.itemSize[0]);\n                            }\n                        } else {\n                            if (viewport.first - first > index) {\n                                const pos = (viewport.first - 1) * this.itemSize;\n\n                                horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);\n                            }\n                        }\n                    } else if (isToEnd) {\n                        if (both) {\n                            if (viewport.last.rows - first.rows <= index[0] + 1) {\n                                scrollTo(viewport.first.cols * this.itemSize[1], (viewport.first.rows + 1) * this.itemSize[0]);\n                            } else if (viewport.last.cols - first.cols <= index[1] + 1) {\n                                scrollTo((viewport.first.cols + 1) * this.itemSize[1], viewport.first.rows * this.itemSize[0]);\n                            }\n                        } else {\n                            if (viewport.last - first <= index + 1) {\n                                const pos = (viewport.first + 1) * this.itemSize;\n\n                                horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);\n                            }\n                        }\n                    }\n                }\n            } else {\n                this.scrollToIndex(index, behavior);\n            }\n        },\n        getRenderedRange() {\n            const calculateFirstInViewport = (_pos, _size) => Math.floor(_pos / (_size || _pos));\n\n            let firstInViewport = this.first;\n            let lastInViewport = 0;\n\n            if (this.element) {\n                const both = this.isBoth();\n                const horizontal = this.isHorizontal();\n                const { scrollTop, scrollLeft } = this.element;\n\n                if (both) {\n                    firstInViewport = { rows: calculateFirstInViewport(scrollTop, this.itemSize[0]), cols: calculateFirstInViewport(scrollLeft, this.itemSize[1]) };\n                    lastInViewport = { rows: firstInViewport.rows + this.numItemsInViewport.rows, cols: firstInViewport.cols + this.numItemsInViewport.cols };\n                } else {\n                    const scrollPos = horizontal ? scrollLeft : scrollTop;\n\n                    firstInViewport = calculateFirstInViewport(scrollPos, this.itemSize);\n                    lastInViewport = firstInViewport + this.numItemsInViewport;\n                }\n            }\n\n            return {\n                first: this.first,\n                last: this.last,\n                viewport: {\n                    first: firstInViewport,\n                    last: lastInViewport\n                }\n            };\n        },\n        calculateNumItems() {\n            const both = this.isBoth();\n            const horizontal = this.isHorizontal();\n            const itemSize = this.itemSize;\n            const contentPos = this.getContentPosition();\n            const contentWidth = this.element ? this.element.offsetWidth - contentPos.left : 0;\n            const contentHeight = this.element ? this.element.offsetHeight - contentPos.top : 0;\n            const calculateNumItemsInViewport = (_contentSize, _itemSize) => Math.ceil(_contentSize / (_itemSize || _contentSize));\n            const calculateNumToleratedItems = (_numItems) => Math.ceil(_numItems / 2);\n            const numItemsInViewport = both\n                ? { rows: calculateNumItemsInViewport(contentHeight, itemSize[0]), cols: calculateNumItemsInViewport(contentWidth, itemSize[1]) }\n                : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, itemSize);\n\n            const numToleratedItems = this.d_numToleratedItems || (both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));\n\n            return { numItemsInViewport, numToleratedItems };\n        },\n        calculateOptions() {\n            const both = this.isBoth();\n            const first = this.first;\n            const { numItemsInViewport, numToleratedItems } = this.calculateNumItems();\n            const calculateLast = (_first, _num, _numT, _isCols = false) => this.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);\n            const last = both\n                ? { rows: calculateLast(first.rows, numItemsInViewport.rows, numToleratedItems[0]), cols: calculateLast(first.cols, numItemsInViewport.cols, numToleratedItems[1], true) }\n                : calculateLast(first, numItemsInViewport, numToleratedItems)