primevue 3.22.4 → 3.24.0

package/core/core.js

@@ -582,21 +582,24 @@ this.primevue.utils = (function (exports) {
         },
 
         isClickable(element) {
-            const targetNode = element.nodeName;
-            const parentNode = element.parentElement && element.parentElement.nodeName;
-
-            return (
-                targetNode == 'INPUT' ||
-                targetNode == 'BUTTON' ||
-                targetNode == 'A' ||
-                parentNode == 'INPUT' ||
-                parentNode == 'BUTTON' ||
-                parentNode == 'A' ||
-                this.hasClass(element, 'p-button') ||
-                this.hasClass(element.parentElement, 'p-button') ||
-                this.hasClass(element.parentElement, 'p-checkbox') ||
-                this.hasClass(element.parentElement, 'p-radiobutton')
-            );
+            if (element) {
+                const targetNode = element.nodeName;
+                const parentNode = element.parentElement && element.parentElement.nodeName;
+
+                return (
+                    targetNode === 'INPUT' ||
+                    targetNode === 'TEXTAREA' ||
+                    targetNode === 'BUTTON' ||
+                    targetNode === 'A' ||
+                    parentNode === 'INPUT' ||
+                    parentNode === 'TEXTAREA' ||
+                    parentNode === 'BUTTON' ||
+                    parentNode === 'A' ||
+                    !!element.closest('.p-button, .p-checkbox, .p-radiobutton')
+                );
+            }
+
+            return false;
         },
 
         applyStyle(element, style) {
@@ -817,15 +820,10 @@ this.primevue.utils = (function (exports) {
         },
 
         reorderArray(value, from, to) {
-            let target;
-
             if (value && from !== to) {
                 if (to >= value.length) {
-                    target = to - value.length;
-
-                    while (target-- + 1) {
-                        value.push(undefined);
-                    }
+                    to %= value.length;
+                    from %= value.length;
                 }
 
                 value.splice(to, 0, value.splice(from, 1)[0]);
@@ -1668,7 +1666,6 @@ this.primevue.config = (function (exports, api, vue) {
                 nextPageLabel: 'Next Page',
                 prevPageLabel: 'Previous Page',
                 rowsPerPageLabel: 'Rows per page',
-                previousPageLabel: 'Previous Page',
                 jumpToPageDropdownLabel: 'Jump to Page Dropdown',
                 jumpToPageInputLabel: 'Jump to Page Input',
                 selectRow: 'Row Selected',
@@ -1718,11 +1715,30 @@ this.primevue.config = (function (exports, api, vue) {
         return PrimeVue;
     }
 
+    function switchTheme(currentTheme, newTheme, linkElementId, callback) {
+        const linkElement = document.getElementById(linkElementId);
+        const cloneLinkElement = linkElement.cloneNode(true);
+        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+
+        cloneLinkElement.setAttribute('id', linkElementId + '-clone');
+        cloneLinkElement.setAttribute('href', newThemeUrl);
+        cloneLinkElement.addEventListener('load', () => {
+            linkElement.remove();
+            cloneLinkElement.setAttribute('id', linkElementId);
+
+            if (callback) {
+                callback();
+            }
+        });
+        linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+    }
+
     var PrimeVue = {
         install: (app, options) => {
             let configOptions = options ? { ...defaultOptions, ...options } : { ...defaultOptions };
             const PrimeVue = {
-                config: vue.reactive(configOptions)
+                config: vue.reactive(configOptions),
+                changeTheme: switchTheme
             };
 
             app.config.globalProperties.$primevue = PrimeVue;
@@ -2402,7 +2418,7 @@ this.primevue.focustrap = (function (utils) {
 })(primevue.utils);
 
 this.primevue = this.primevue || {};
-this.primevue.virtualscroller = (function (vue) {
+this.primevue.virtualscroller = (function (utils, vue) {
     'use strict';
 
     var script = {
@@ -2437,6 +2453,10 @@ this.primevue.virtualscroller = (function (vue) {
                 type: Number,
                 default: 0
             },
+            resizeDelay: {
+                type: Number,
+                default: 10
+            },
             lazy: {
                 type: Boolean,
                 default: false
@@ -2468,12 +2488,29 @@ this.primevue.virtualscroller = (function (vue) {
             tabindex: {
                 type: Number,
                 default: 0
+            },
+            inline: {
+                type: Boolean,
+                default: false
+            },
+            step: {
+                type: Number,
+                default: 0
+            },
+            appendOnly: {
+                type: Boolean,
+                default: false
+            },
+            autoSize: {
+                type: Boolean,
+                default: false
             }
         },
         data() {
             return {
                 first: this.isBoth() ? { rows: 0, cols: 0 } : 0,
                 last: this.isBoth() ? { rows: 0, cols: 0 } : 0,
+                page: this.isBoth() ? { rows: 0, cols: 0 } : 0,
                 numItemsInViewport: this.isBoth() ? { rows: 0, cols: 0 } : 0,
                 lastScrollPos: this.isBoth() ? { top: 0, left: 0 } : 0,
                 d_numToleratedItems: this.numToleratedItems,
@@ -2487,6 +2524,15 @@ this.primevue.virtualscroller = (function (vue) {
         content: null,
         lastScrollPos: null,
         scrollTimeout: null,
+        resizeTimeout: null,
+        defaultWidth: 0,
+        defaultHeight: 0,
+        defaultContentWidth: 0,
+        defaultContentHeight: 0,
+        isRangeChanged: false,
+        lazyLoadState: {},
+        resizeListener: null,
+        initialized: false,
         watch: {
             numToleratedItems(newValue) {
                 this.d_numToleratedItems = newValue;
@@ -2497,22 +2543,59 @@ this.primevue.virtualscroller = (function (vue) {
             items(newValue, oldValue) {
                 if (!oldValue || oldValue.length !== (newValue || []).length) {
                     this.init();
+                    this.calculateAutoSize();
                 }
             },
+            itemSize() {
+                this.init();
+                this.calculateAutoSize();
+            },
             orientation() {
                 this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;
+            },
+            scrollHeight() {
+                this.init();
+                this.calculateAutoSize();
+            },
+            scrollWidth() {
+                this.init();
+                this.calculateAutoSize();
             }
         },
         mounted() {
-            this.init();
+            this.viewInit();
 
             this.lastScrollPos = this.isBoth() ? { top: 0, left: 0 } : 0;
+            this.lazyLoadState = this.lazyLoadState || {};
+        },
+        updated() {
+            !this.initialized && this.viewInit();
+        },
+        unmounted() {
+            this.unbindResizeListener();
+
+            this.initialized = false;
         },
         methods: {
+            viewInit() {
+                if (utils.DomHandler.isVisible(this.element)) {
+                    this.setContentEl(this.content);
+                    this.init();
+                    this.bindResizeListener();
+
+                    this.defaultWidth = utils.DomHandler.getWidth(this.element);
+                    this.defaultHeight = utils.DomHandler.getHeight(this.element);
+                    this.defaultContentWidth = utils.DomHandler.getWidth(this.content);
+                    this.defaultContentHeight = utils.DomHandler.getHeight(this.content);
+                    this.initialized = true;
+                }
+            },
             init() {
-                this.setSize();
-                this.calculateOptions();
-                this.setSpacerSize();
+                if (!this.disabled) {
+                    this.setSize();
+                    this.calculateOptions();
+                    this.setSpacerSize();
+                }
             },
             isVertical() {
                 return this.orientation === 'vertical';
@@ -2524,31 +2607,34 @@ this.primevue.virtualscroller = (function (vue) {
                 return this.orientation === 'both';
             },
             scrollTo(options) {
-                this.element && this.element.scrollTo(options);
+                this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0;
+                this.element?.scrollTo(options);
             },
             scrollToIndex(index, behavior = 'auto') {
                 const both = this.isBoth();
                 const horizontal = this.isHorizontal();
                 const first = this.first;
                 const { numToleratedItems } = this.calculateNumItems();
+                const contentPos = this.getContentPosition();
                 const itemSize = this.itemSize;
                 const calculateFirst = (_index = 0, _numT) => (_index <= _numT ? 0 : _index);
-                const calculateCoord = (_first, _size) => _first * _size;
+                const calculateCoord = (_first, _size, _cpos) => _first * _size + _cpos;
                 const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });
+                let newFirst = both ? { rows: 0, cols: 0 } : 0;
+                let isRangeChanged = false;
 
                 if (both) {
-                    const newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) };
-
-                    if (newFirst.rows !== first.rows || newFirst.cols !== first.cols) {
-                        scrollTo(calculateCoord(newFirst.cols, itemSize[1]), calculateCoord(newFirst.rows, itemSize[0]));
-                    }
+                    newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) };
+                    scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top));
+                    isRangeChanged = newFirst.rows !== first.rows || newFirst.cols !== first.cols;
                 } else {
-                    const newFirst = calculateFirst(index, numToleratedItems);
-
-                    if (newFirst !== first) {
-                        horizontal ? scrollTo(calculateCoord(newFirst, itemSize), 0) : scrollTo(0, calculateCoord(newFirst, itemSize));
-                    }
+                    newFirst = calculateFirst(index, numToleratedItems);
+                    horizontal ? scrollTo(calculateCoord(newFirst, itemSize, contentPos.left), 0) : scrollTo(0, calculateCoord(newFirst, itemSize, contentPos.top));
+                    isRangeChanged = newFirst !== first;
                 }
+
+                this.isRangeChanged = isRangeChanged;
+                this.first = newFirst;
             },
             scrollInView(index, to, behavior = 'auto') {
                 if (to) {
@@ -2601,8 +2687,7 @@ this.primevue.virtualscroller = (function (vue) {
                 if (this.element) {
                     const both = this.isBoth();
                     const horizontal = this.isHorizontal();
-                    const scrollTop = this.element.scrollTop;
-                    const scrollLeft = this.element.scrollLeft;
+                    const { scrollTop, scrollLeft } = this.element.scrollTop;
 
                     if (both) {
                         firstInViewport = { rows: calculateFirstInViewport(scrollTop, this.itemSize[0]), cols: calculateFirstInViewport(scrollLeft, this.itemSize[1]) };
@@ -2645,7 +2730,7 @@ this.primevue.virtualscroller = (function (vue) {
                 const both = this.isBoth();
                 const first = this.first;
                 const { numItemsInViewport, numToleratedItems } = this.calculateNumItems();
-                const calculateLast = (_first, _num, _numT, _isCols) => this.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
+                const calculateLast = (_first, _num, _numT, _isCols = false) => this.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
                 const last = both
                     ? { rows: calculateLast(first.rows, numItemsInViewport.rows, numToleratedItems[0]), cols: calculateLast(first.cols, numItemsInViewport.cols, numToleratedItems[1], true) }
                     : calculateLast(first, numItemsInViewport, numToleratedItems);
@@ -2660,23 +2745,55 @@ this.primevue.virtualscroller = (function (vue) {
                 }
 
                 if (this.lazy) {
-                    this.$emit('lazy-load', { first, last });
+                    Promise.resolve().then(() => {
+                        this.lazyLoadState = {
+                            first: this.step ? (both ? { rows: 0, cols: first.cols } : 0) : first,
+                            last: Math.min(this.step ? this.step : last, this.items.length)
+                        };
+
+                        this.$emit('lazy-load', this.lazyLoadState);
+                    });
                 }
             },
-            getLast(last = 0, isCols) {
-                if (this.items) {
-                    return Math.min(isCols ? (this.columns || this.items[0]).length : this.items.length, last);
-                }
+            calculateAutoSize() {
+                if (this.autoSize && !this.d_loading) {
+                    Promise.resolve().then(() => {
+                        if (this.content) {
+                            const both = this.isBoth();
+                            const horizontal = this.isHorizontal();
+                            const vertical = this.isVertical();
 
-                return 0;
+                            this.content.style.minHeight = this.content.style.minWidth = 'auto';
+                            this.content.style.position = 'relative';
+                            this.element.style.contain = 'none';
+
+                            const [contentWidth, contentHeight] = [utils.DomHandler.getWidth(this.content), utils.DomHandler.getHeight(this.content)];
+
+                            contentWidth !== this.defaultContentWidth && (this.element.style.width = '');
+                            contentHeight !== this.defaultContentHeight && (this.element.style.height = '');
+
+                            const [width, height] = [utils.DomHandler.getWidth(this.element), utils.DomHandler.getHeight(this.element)];
+
+                            (both || horizontal) && (this.element.style.width = width < this.defaultWidth ? width + 'px' : this.scrollWidth || this.defaultWidth + 'px');
+                            (both || vertical) && (this.element.style.height = height < this.defaultHeight ? height + 'px' : this.scrollHeight || this.defaultHeight + 'px');
+
+                            this.content.style.minHeight = this.content.style.minWidth = '';
+                            this.content.style.position = '';
+                            this.element.style.contain = '';
+                        }
+                    });
+                }
+            },
+            getLast(last = 0, isCols) {
+                return this.items ? Math.min(isCols ? (this.columns || this.items[0]).length : this.items.length, last) : 0;
             },
             getContentPosition() {
                 if (this.content) {
                     const style = getComputedStyle(this.content);
-                    const left = parseInt(style.paddingLeft, 10) + Math.max(parseInt(style.left, 10), 0);
-                    const right = parseInt(style.paddingRight, 10) + Math.max(parseInt(style.right, 10), 0);
-                    const top = parseInt(style.paddingTop, 10) + Math.max(parseInt(style.top, 10), 0);
-                    const bottom = parseInt(style.paddingBottom, 10) + Math.max(parseInt(style.bottom, 10), 0);
+                    const left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);
+                    const right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);
+                    const top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);
+                    const bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);
 
                     return { left, right, top, bottom, x: left + right, y: top + bottom };
                 }
@@ -2718,15 +2835,12 @@ this.primevue.virtualscroller = (function (vue) {
                 }
             },
             setContentPosition(pos) {
-                if (this.content) {
+                if (this.content && !this.appendOnly) {
                     const both = this.isBoth();
                     const horizontal = this.isHorizontal();
                     const first = pos ? pos.first : this.first;
                     const calculateTranslateVal = (_first, _size) => _first * _size;
-
-                    const setTransform = (_x = 0, _y = 0) => {
-                        this.contentStyle = { ...this.contentStyle, ...{ transform: `translate3d(${_x}px, ${_y}px, 0)` } };
-                    };
+                    const setTransform = (_x = 0, _y = 0) => (this.contentStyle = { ...this.contentStyle, ...{ transform: `translate3d(${_x}px, ${_y}px, 0)` } });
 
                     if (both) {
                         setTransform(calculateTranslateVal(first.cols, this.itemSize[1]), calculateTranslateVal(first.rows, this.itemSize[0]));
@@ -2775,33 +2889,39 @@ this.primevue.virtualscroller = (function (vue) {
                 if (both) {
                     const isScrollDown = this.lastScrollPos.top <= scrollTop;
                     const isScrollRight = this.lastScrollPos.left <= scrollLeft;
-                    const currentIndex = { rows: calculateCurrentIndex(scrollTop, this.itemSize[0]), cols: calculateCurrentIndex(scrollLeft, this.itemSize[1]) };
-                    const triggerIndex = {
-                        rows: calculateTriggerIndex(currentIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),
-                        cols: calculateTriggerIndex(currentIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight)
-                    };
 
-                    newFirst = {
-                        rows: calculateFirst(currentIndex.rows, triggerIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),
-                        cols: calculateFirst(currentIndex.cols, triggerIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight)
-                    };
-                    newLast = {
-                        rows: calculateLast(currentIndex.rows, newFirst.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0]),
-                        cols: calculateLast(currentIndex.cols, newFirst.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], true)
-                    };
+                    if (!this.appendOnly || (this.appendOnly && (isScrollDown || isScrollRight))) {
+                        const currentIndex = { rows: calculateCurrentIndex(scrollTop, this.itemSize[0]), cols: calculateCurrentIndex(scrollLeft, this.itemSize[1]) };
+                        const triggerIndex = {
+                            rows: calculateTriggerIndex(currentIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),
+                            cols: calculateTriggerIndex(currentIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight)
+                        };
+
+                        newFirst = {
+                            rows: calculateFirst(currentIndex.rows, triggerIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),
+                            cols: calculateFirst(currentIndex.cols, triggerIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight)
+                        };
+                        newLast = {
+                            rows: calculateLast(currentIndex.rows, newFirst.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0]),
+                            cols: calculateLast(currentIndex.cols, newFirst.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], true)
+                        };
 
-                    isRangeChanged = newFirst.rows !== this.first.rows || newLast.rows !== this.last.rows || newFirst.cols !== this.first.cols || newLast.cols !== this.last.cols;
-                    newScrollPos = { top: scrollTop, left: scrollLeft };
+                        isRangeChanged = newFirst.rows !== this.first.rows || newLast.rows !== this.last.rows || newFirst.cols !== this.first.cols || newLast.cols !== this.last.cols || this.isRangeChanged;
+                        newScrollPos = { top: scrollTop, left: scrollLeft };
+                    }
                 } else {
                     const scrollPos = horizontal ? scrollLeft : scrollTop;
                     const isScrollDownOrRight = this.lastScrollPos <= scrollPos;
-                    const currentIndex = calculateCurrentIndex(scrollPos, this.itemSize);
-                    const triggerIndex = calculateTriggerIndex(currentIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);
 
-                    newFirst = calculateFirst(currentIndex, triggerIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);
-                    newLast = calculateLast(currentIndex, newFirst, this.last, this.numItemsInViewport, this.d_numToleratedItems);
-                    isRangeChanged = newFirst !== this.first || newLast !== this.last;
-                    newScrollPos = scrollPos;
+                    if (!this.appendOnly || (this.appendOnly && isScrollDownOrRight)) {
+                        const currentIndex = calculateCurrentIndex(scrollPos, this.itemSize);
+                        const triggerIndex = calculateTriggerIndex(currentIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);
+
+                        newFirst = calculateFirst(currentIndex, triggerIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);
+                        newLast = calculateLast(currentIndex, newFirst, this.last, this.numItemsInViewport, this.d_numToleratedItems);
+                        isRangeChanged = newFirst !== this.first || newLast !== this.last || this.isRangeChanged;
+                        newScrollPos = scrollPos;
+                    }
                 }
 
                 return {
@@ -2825,21 +2945,29 @@ this.primevue.virtualscroller = (function (vue) {
 
                     this.$emit('scroll-index-change', newState);
 
-                    if (this.lazy) {
-                        this.$emit('lazy-load', newState);
+                    if (this.lazy && this.isPageChanged(first)) {
+                        const lazyLoadState = {
+                            first: this.step ? Math.min(this.getPageByFirst(first) * this.step, this.items.length - this.step) : first,
+                            last: Math.min(this.step ? (this.getPageByFirst(first) + 1) * this.step : last, this.items.length)
+                        };
+                        const isLazyStateChanged = this.lazyLoadState.first !== lazyLoadState.first || this.lazyLoadState.last !== lazyLoadState.last;
+
+                        isLazyStateChanged && this.$emit('lazy-load', lazyLoadState);
+                        this.lazyLoadState = lazyLoadState;
                     }
                 }
             },
             onScroll(event) {
                 this.$emit('scroll', event);
 
-                if (this.delay) {
+                if (this.delay && this.isPageChanged()) {
                     if (this.scrollTimeout) {
                         clearTimeout(this.scrollTimeout);
                     }
 
                     if (!this.d_loading && this.showLoader) {
-                        const { isRangeChanged: changed } = this.onScrollPositionChange(event);
+                        const { isRangeChanged } = this.onScrollPositionChange(event);
+                        const changed = isRangeChanged || (this.step ? this.isPageChanged() : false);
 
                         changed && (this.d_loading = true);
                     }
@@ -2847,14 +2975,56 @@ this.primevue.virtualscroller = (function (vue) {
                     this.scrollTimeout = setTimeout(() => {
                         this.onScrollChange(event);
 
-                        if (this.d_loading && this.showLoader && !this.lazy) {
+                        if (this.d_loading && this.showLoader && (!this.lazy || this.loading === undefined)) {
                             this.d_loading = false;
+                            this.page = this.getPageByFirst();
                         }
                     }, this.delay);
                 } else {
                     this.onScrollChange(event);
                 }
             },
+            onResize() {
+                if (this.resizeTimeout) {
+                    clearTimeout(this.resizeTimeout);
+                }
+
+                this.resizeTimeout = setTimeout(() => {
+                    if (utils.DomHandler.isVisible(this.element)) {
+                        const both = this.isBoth();
+                        const vertical = this.isVertical();
+                        const horizontal = this.isHorizontal();
+                        const [width, height] = [utils.DomHandler.getWidth(this.element), utils.DomHandler.getHeight(this.element)];
+                        const [isDiffWidth, isDiffHeight] = [width !== this.defaultWidth, height !== this.defaultHeight];
+                        const reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;
+
+                        if (reinit) {
+                            this.d_numToleratedItems = this.numToleratedItems;
+                            this.defaultWidth = width;
+                            this.defaultHeight = height;
+                            this.defaultContentWidth = utils.DomHandler.getWidth(this.content);
+                            this.defaultContentHeight = utils.DomHandler.getHeight(this.content);
+
+                            this.init();
+                        }
+                    }
+                }, this.resizeDelay);
+            },
+            bindResizeListener() {
+                if (!this.resizeListener) {
+                    this.resizeListener = this.onResize.bind(this);
+
+                    window.addEventListener('resize', this.resizeListener);
+                    window.addEventListener('orientationchange', this.resizeListener);
+                }
+            },
+            unbindResizeListener() {
+                if (this.resizeListener) {
+                    window.removeEventListener('resize', this.resizeListener);
+                    window.removeEventListener('orientationchange', this.resizeListener);
+                    this.resizeListener = null;
+                }
+            },
             getOptions(renderedIndex) {
                 const count = (this.items || []).length;
                 const index = this.isBoth() ? this.first.rows + renderedIndex : this.first + renderedIndex;
@@ -2881,6 +3051,15 @@ this.primevue.virtualscroller = (function (vue) {
                     ...extOptions
                 };
             },
+            getPageByFirst(first) {
+                return Math.floor(((first ?? this.first) + this.d_numToleratedItems * 4) / (this.step || 1));
+            },
+            isPageChanged(first) {
+                return this.step ? this.page !== this.getPageByFirst(first ?? this.first) : true;
+            },
+            setContentEl(el) {
+                this.content = el || this.content || utils.DomHandler.findSingle(this.element, '.p-virtualscroller-content');
+            },
             elementRef(el) {
                 this.element = el;
             },
@@ -2893,8 +3072,9 @@ this.primevue.virtualscroller = (function (vue) {
                 return [
                     'p-virtualscroller',
                     {
-                        'p-both-scroll': this.isBoth(),
-                        'p-horizontal-scroll': this.isHorizontal()
+                        'p-virtualscroller-inline': this.inline,
+                        'p-virtualscroller-both p-both-scroll': this.isBoth(),
+                        'p-virtualscroller-horizontal p-horizontal-scroll': this.isHorizontal()
                     },
                     this.class
                 ];
@@ -2916,13 +3096,10 @@ this.primevue.virtualscroller = (function (vue) {
                 ];
             },
             loadedItems() {
-                const items = this.items;
-
-                if (items && !this.d_loading) {
-                    if (this.isBoth()) {
-                        return items.slice(this.first.rows, this.last.rows).map((item) => (this.columns ? item : item.slice(this.first.cols, this.last.cols)));
-                    } else if (this.isHorizontal() && this.columns) return items;
-                    else return items.slice(this.first, this.last);
+                if (this.items && !this.d_loading) {
+                    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)));
+                    else if (this.isHorizontal() && this.columns) return this.items;
+                    else return this.items.slice(this.appendOnly ? 0 : this.first, this.last);
                 }
 
                 return [];
@@ -3051,14 +3228,14 @@ this.primevue.virtualscroller = (function (vue) {
       }
     }
 
-    var css_248z = "\n.p-virtualscroller {\n    position: relative;\n    overflow: auto;\n    contain: strict;\n    transform: translateZ(0);\n    will-change: scroll-position;\n    outline: 0 none;\n}\n.p-virtualscroller-content {\n    position: absolute;\n    top: 0;\n    left: 0;\n    contain: content;\n    min-height: 100%;\n    min-width: 100%;\n    will-change: transform;\n}\n.p-virtualscroller-spacer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 1px;\n    width: 1px;\n    transform-origin: 0 0;\n    pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n    position: sticky;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n";
+    var css_248z = "\n.p-virtualscroller {\n    position: relative;\n    overflow: auto;\n    contain: strict;\n    transform: translateZ(0);\n    will-change: scroll-position;\n    outline: 0 none;\n}\n.p-virtualscroller-content {\n    position: absolute;\n    top: 0;\n    left: 0;\n    /* contain: content; */\n    min-height: 100%;\n    min-width: 100%;\n    will-change: transform;\n}\n.p-virtualscroller-spacer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 1px;\n    width: 1px;\n    transform-origin: 0 0;\n    pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n    position: sticky;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-virtualscroller-loading-icon {\n    font-size: 2rem;\n}\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n    display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n    position: static;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
 
     return script;
 
-})(Vue);
+})(primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.confirmationeventbus = (function (utils) {
@@ -3227,18 +3404,61 @@ this.primevue.button = (function (Ripple, vue) {
             loadingIcon: {
                 type: String,
                 default: 'pi pi-spinner pi-spin'
+            },
+            link: {
+                type: Boolean,
+                default: false
+            },
+            severity: {
+                type: String,
+                default: null
+            },
+            raised: {
+                type: Boolean,
+                default: false
+            },
+            rounded: {
+                type: Boolean,
+                default: false
+            },
+            text: {
+                type: Boolean,
+                default: false
+            },
+            outlined: {
+                type: Boolean,
+                default: false
+            },
+            size: {
+                type: String,
+                default: null
+            },
+            plain: {
+                type: Boolean,
+                default: false
             }
         },
         computed: {
             buttonClass() {
-                return {
-                    'p-button p-component': true,
-                    'p-button-icon-only': this.icon && !this.label,
-                    'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
-                    'p-disabled': this.$attrs.disabled || this.loading,
-                    'p-button-loading': this.loading,
-                    'p-button-loading-label-only': this.loading && !this.icon && this.label
-                };
+                return [
+                    'p-button p-component',
+                    {
+                        'p-button-icon-only': this.icon && !this.label,
+                        'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
+                        'p-disabled': this.$attrs.disabled || this.loading,
+                        'p-button-loading': this.loading,
+                        'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                        'p-button-link': this.link,
+                        [`p-button-${this.severity}`]: this.severity,
+                        'p-button-raised': this.raised,
+                        'p-button-rounded': this.rounded,
+                        'p-button-text': this.text,
+                        'p-button-outlined': this.outlined,
+                        'p-button-sm': this.size === 'small',
+                        'p-button-lg': this.size === 'large',
+                        'p-button-plain': this.plain
+                    }
+                ];
             },
             iconStyleClass() {
                 return [
@@ -5207,7 +5427,7 @@ this.primevue.dropdown = (function (api, OverlayEventBus, Portal, Ripple, utils,
 
                 !matched && (this.focusedOptionIndex = -1);
 
-                this.$emit('update:modelValue', value);
+                this.updateModel(event, value);
             },
             onContainerClick(event) {
                 if (this.disabled || this.loading) {
@@ -6282,7 +6502,7 @@ this.primevue.dialog = (function (FocusTrap, Portal, Ripple, utils, vue) {
                 this.$emit('after-hide');
             },
             onMaskClick(event) {
-                if (this.dismissableMask && this.closable && this.modal && this.mask === event.target) {
+                if (this.dismissableMask && this.modal && this.mask === event.target) {
                     this.close();
                 }
             },
@@ -8474,8 +8694,8 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     const _hoisted_1$1 = ["id", "aria-label", "aria-disabled"];
     const _hoisted_2$1 = ["href", "onClick"];
     const _hoisted_3$1 = { class: "p-menuitem-text" };
-    const _hoisted_4 = ["href", "target"];
-    const _hoisted_5 = { class: "p-menuitem-text" };
+    const _hoisted_4$1 = ["href", "target"];
+    const _hoisted_5$1 = { class: "p-menuitem-text" };
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
@@ -8538,8 +8758,8 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                 class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
                               }, null, 2))
                             : vue.createCommentVNode("", true),
-                          vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.label()), 1)
-                        ], 10, _hoisted_4)), [
+                          vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString($options.label()), 1)
+                        ], 10, _hoisted_4$1)), [
                           [_directive_ripple]
                         ])
                   ], 64))
@@ -8919,8 +9139,16 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     };
 
     const _hoisted_1 = ["id"];
-    const _hoisted_2 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
-    const _hoisted_3 = ["id"];
+    const _hoisted_2 = {
+      key: 0,
+      class: "p-menu-start"
+    };
+    const _hoisted_3 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
+    const _hoisted_4 = ["id"];
+    const _hoisted_5 = {
+      key: 1,
+      class: "p-menu-end"
+    };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_PVMenuitem = vue.resolveComponent("PVMenuitem");
@@ -8947,6 +9175,11 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                   }, _ctx.$attrs, {
                     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
                   }), [
+                    (_ctx.$slots.start)
+                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                          vue.renderSlot(_ctx.$slots, "start")
+                        ]))
+                      : vue.createCommentVNode("", true),
                     vue.createElementVNode("ul", {
                       ref: $options.listRef,
                       id: $data.id + '_list',
@@ -8976,7 +9209,7 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                       vue.renderSlot(_ctx.$slots, "item", { item: item }, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.label(item)), 1)
                                       ])
-                                    ], 8, _hoisted_3))
+                                    ], 8, _hoisted_4))
                                   : vue.createCommentVNode("", true),
                                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.items, (child, j) => {
                                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -9021,7 +9254,12 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                 }, null, 8, ["id", "item", "template", "exact", "focusedOptionId", "onItemClick"]))
                         ], 64))
                       }), 128))
-                    ], 40, _hoisted_2)
+                    ], 40, _hoisted_3),
+                    (_ctx.$slots.end)
+                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                          vue.renderSlot(_ctx.$slots, "end")
+                        ]))
+                      : vue.createCommentVNode("", true)
                   ], 16, _hoisted_1))
                 : vue.createCommentVNode("", true)
             ]),
@@ -10030,15 +10268,24 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, Ripple, vu
 })(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.badge = (function (vue) {
+this.primevue.badge = (function (utils, vue) {
     'use strict';
 
     var script = {
         name: 'Badge',
         props: {
-            value: null,
-            severity: null,
-            size: null
+            value: {
+                type: [String, Number],
+                default: null
+            },
+            severity: {
+                type: String,
+                default: null
+            },
+            size: {
+                type: String,
+                default: null
+            }
         },
         computed: {
             containerClass() {
@@ -10048,8 +10295,8 @@ this.primevue.badge = (function (vue) {
                 return [
                     'p-badge p-component',
                     {
-                        'p-badge-no-gutter': this.value && String(this.value).length === 1,
-                        'p-badge-dot': !this.value && !this.$slots.default,
+                        'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(this.value) && String(this.value).length === 1,
+                        'p-badge-dot': utils.ObjectUtils.isEmpty(this.value) && !this.$slots.default,
                         'p-badge-lg': this.size === 'large',
                         'p-badge-xl': this.size === 'xlarge',
                         'p-badge-info': this.severity === 'info',
@@ -10076,5 +10323,5 @@ this.primevue.badge = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.utils, Vue);