From 16833178f15c2a7106e567d861b1ebfa19409f39 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 28 Feb 2023 10:33:00 +0000
Subject: [PATCH 1/2] DataTable CSS and responsive structure improvements
 (#3684)

* DataTable CSS and responsive structure improvements

Fixed #3682 and #3683

* Update DataTable.vue
---
 components/datatable/DataTable.d.ts           |  16 +-
 components/datatable/DataTable.vue            | 183 ++++------
 components/datatable/TableBody.vue            |  20 +-
 .../virtualscroller/VirtualScroller.d.ts      |  25 ++
 .../virtualscroller/VirtualScroller.vue       | 316 ++++++++++++++----
 5 files changed, 348 insertions(+), 212 deletions(-)

diff --git a/components/datatable/DataTable.d.ts b/components/datatable/DataTable.d.ts
index f4281f2f3..7590f1206 100755
--- a/components/datatable/DataTable.d.ts
+++ b/components/datatable/DataTable.d.ts
@@ -39,8 +39,6 @@ export declare type DataTableStateStorageType = 'session' | 'local' | undefined;
 
 export declare type DataTableEditModeType = 'cell' | 'row' | undefined;
 
-export declare type DataTableScrollDirectionType = 'vertical' | 'horizontal' | 'both' | undefined;
-
 export declare type DataTableScrollHeightType = 'flex' | string | undefined;
 
 export declare type DataTableResponsiveLayoutType = 'stack' | 'scroll' | undefined;
@@ -663,10 +661,6 @@ export interface DataTableProps {
      * @see DataTableExportFunctionOptions
      */
     exportFunction?(options: DataTableExportFunctionOptions): any;
-    /**
-     * Whether the cell widths scale according to their content or not. Does not apply to scrollable tables.
-     */
-    autoLayout?: boolean | undefined;
     /**
      * When enabled, columns can be resized using drag and drop.
      */
@@ -752,12 +746,6 @@ export interface DataTableProps {
      * @see DataTableScrollHeightType
      */
     scrollHeight?: DataTableScrollHeightType;
-    /**
-     * Orientation of the scrolling, options are 'vertical', 'horizontal' and 'both'.
-     * @see DataTableScrollDirectionType
-     * Default value is 'vertical'.
-     */
-    scrollDirection?: DataTableScrollDirectionType;
     /**
      * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
      * Note: Currently only vertical orientation mode is supported.
@@ -769,9 +757,9 @@ export interface DataTableProps {
      */
     frozenValue?: any[] | undefined;
     /**
-     * Defines the responsive mode, valid options are 'stack' and 'scroll'.
+     * Defines the responsive mode, valid options are 'stack' and 'scroll'. Default value is 'scroll'.
      * @see DataTableResponsiveLayoutType
-     * Default value is 'stack'.
+     * @deprecated since version 3.24.0
      */
     responsiveLayout?: DataTableResponsiveLayoutType;
     /**
diff --git a/components/datatable/DataTable.vue b/components/datatable/DataTable.vue
index e54de07da..ca3154854 100755
--- a/components/datatable/DataTable.vue
+++ b/components/datatable/DataTable.vue
@@ -29,9 +29,21 @@
             </template>
         </DTPaginator>
         <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }">
-            <DTVirtualScroller ref="virtualScroller" v-bind="virtualScrollerOptions" :items="processedData" :columns="columns" :style="{ height: scrollHeight }" :disabled="virtualScrollerDisabled" loaderDisabled :showSpacer="false">
+            <DTVirtualScroller
+                ref="virtualScroller"
+                v-bind="virtualScrollerOptions"
+                :items="processedData"
+                :columns="columns"
+                :style="{ height: scrollHeight !== 'flex' ? scrollHeight : undefined }"
+                :scrollHeight="scrollHeight !== 'flex' ? undefined : '100%'"
+                :disabled="virtualScrollerDisabled"
+                loaderDisabled
+                inline
+                autoSize
+                :showSpacer="false"
+            >
                 <template #content="slotProps">
-                    <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]" v-bind="tableProps">
+                    <table ref="table" role="table" :class="tableStyleClass" :style="[tableStyle, slotProps.spacerStyle]" v-bind="tableProps">
                         <DTTableHeader
                             :columnGroup="headerColumnGroup"
                             :columns="slotProps.columns"
@@ -171,6 +183,7 @@
                             :editingMeta="d_editingMeta"
                             @editing-meta-change="onEditingMetaChange"
                         />
+                        <tbody v-if="hasSpacerStyle(slotProps.spacerStyle)" :style="{ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }" class="p-datatable-virtualscroller-spacer"></tbody>
                         <DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" />
                     </table>
                 </template>
@@ -401,10 +414,6 @@ export default {
             type: Function,
             default: null
         },
-        autoLayout: {
-            type: Boolean,
-            default: false
-        },
         resizableColumns: {
             type: Boolean,
             default: false
@@ -473,10 +482,6 @@ export default {
             type: Boolean,
             default: false
         },
-        scrollDirection: {
-            type: String,
-            default: 'vertical'
-        },
         virtualScrollerOptions: {
             type: Object,
             default: null
@@ -491,7 +496,7 @@ export default {
         },
         responsiveLayout: {
             type: String,
-            default: 'stack'
+            default: 'scroll'
         },
         breakpoint: {
             type: String,
@@ -1462,15 +1467,16 @@ export default {
             this.createStyleElement();
 
             let innerHTML = '';
+            let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
 
             widths.forEach((width, index) => {
                 let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-                let style = this.scrollable ? `flex: 1 1 ${colWidth}px !important` : `width: ${colWidth}px !important`;
+                let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
 
                 innerHTML += `
-                    .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                    .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                    ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                    ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                    ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                         ${style}
                     }
                 `;
@@ -1902,14 +1908,15 @@ export default {
                     this.createStyleElement();
 
                     let innerHTML = '';
+                    let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
 
                     widths.forEach((width, index) => {
-                        let style = this.scrollable ? `flex: 1 1 ${width}px !important` : `width: ${width}px !important`;
+                        let style = `width: ${width}px !important; max-width: ${width}px !important`;
 
                         innerHTML += `
-                            .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                            .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                            .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                            ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                            ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                            ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                                 ${style}
                             }
                         `;
@@ -2034,31 +2041,34 @@ export default {
                 this.responsiveStyleElement.type = 'text/css';
                 document.head.appendChild(this.responsiveStyleElement);
 
+                let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
+                let selector = `.p-datatable[${this.attributeSelector}] > ${tableSelector}`;
+                let gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`;
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
-    .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th,
-    .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td {
+    ${selector} > .p-datatable-thead > tr > th,
+    ${selector} > .p-datatable-tfoot > tr > td {
         display: none !important;
     }
 
-    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td {
+    ${selector} > .p-datatable-tbody > tr > td {
         display: flex;
         width: 100% !important;
         align-items: center;
         justify-content: space-between;
     }
 
-    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:not(:last-child) {
+    ${selector} > .p-datatable-tbody > tr > td:not(:last-child) {
         border: 0 none;
     }
 
-    .p-datatable[${this.attributeSelector}].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    ${gridLinesSelector} > .p-datatable-tbody > tr > td:last-child {
         border-top: 0;
         border-right: 0;
         border-left: 0;
     }
 
-    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td > .p-column-title {
+    ${selector} > .p-datatable-tbody > tr > td > .p-column-title {
         display: block;
     }
 }
@@ -2109,6 +2119,9 @@ export default {
         },
         getVirtualScrollerRef() {
             return this.$refs.virtualScroller;
+        },
+        hasSpacerStyle(style) {
+            return ObjectUtils.isNotEmpty(style);
         }
     },
     computed: {
@@ -2117,13 +2130,9 @@ export default {
                 'p-datatable p-component',
                 {
                     'p-datatable-hoverable-rows': this.rowHover || this.selectionMode,
-                    'p-datatable-auto-layout': this.autoLayout,
                     'p-datatable-resizable': this.resizableColumns,
                     'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
                     'p-datatable-scrollable': this.scrollable,
-                    'p-datatable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
-                    'p-datatable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
-                    'p-datatable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
                     'p-datatable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
                     'p-datatable-responsive-stack': this.responsiveLayout === 'stack',
                     'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll',
@@ -2134,6 +2143,17 @@ export default {
                 }
             ];
         },
+        tableStyleClass() {
+            return [
+                'p-datatable-table',
+                {
+                    'p-datatable-scrollable-table': this.scrollable,
+                    'p-datatable-resizable-table': this.resizableColumns,
+                    'p-datatable-resizable-table-fit': this.resizableColumns && this.columnResizeMode === 'fit'
+                },
+                this.tableClass
+            ];
+        },
         columns() {
             let children = this.getChildren();
 
@@ -2266,10 +2286,13 @@ export default {
     position: relative;
 }
 
-.p-datatable table {
-    border-collapse: collapse;
-    min-width: 100%;
-    table-layout: fixed;
+.p-datatable > .p-datatable-wrapper {
+    overflow: auto;
+}
+
+.p-datatable-table {
+    border-spacing: 0px;
+    width: 100%;
 }
 
 .p-datatable .p-sortable-column {
@@ -2289,59 +2312,27 @@ export default {
     justify-content: center;
 }
 
-.p-datatable-responsive-scroll > .p-datatable-wrapper {
-    overflow-x: auto;
-}
-
-.p-datatable-responsive-scroll > .p-datatable-wrapper > table,
-.p-datatable-auto-layout > .p-datatable-wrapper > table {
-    table-layout: auto;
-}
-
 .p-datatable-hoverable-rows .p-selectable-row {
     cursor: pointer;
 }
 
 /* Scrollable */
-.p-datatable-scrollable .p-datatable-wrapper {
+.p-datatable-scrollable > .p-datatable-wrapper {
     position: relative;
-    overflow: auto;
 }
 
-.p-datatable-scrollable .p-datatable-thead,
-.p-datatable-scrollable .p-datatable-tbody,
-.p-datatable-scrollable .p-datatable-tfoot {
-    display: block;
-}
-
-.p-datatable-scrollable .p-datatable-thead > tr,
-.p-datatable-scrollable .p-datatable-tbody > tr,
-.p-datatable-scrollable .p-datatable-tfoot > tr {
-    display: flex;
-    flex-wrap: nowrap;
-    width: 100%;
-}
-
-.p-datatable-scrollable .p-datatable-thead > tr > th,
-.p-datatable-scrollable .p-datatable-tbody > tr > td,
-.p-datatable-scrollable .p-datatable-tfoot > tr > td {
-    display: flex;
-    flex: 1 1 0;
-    align-items: center;
-}
-
-.p-datatable-scrollable .p-datatable-thead {
+.p-datatable-scrollable-table > .p-datatable-thead {
     position: sticky;
     top: 0;
     z-index: 1;
 }
 
-.p-datatable-scrollable .p-datatable-frozen-tbody {
+.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
     position: sticky;
     z-index: 1;
 }
 
-.p-datatable-scrollable .p-datatable-tfoot {
+.p-datatable-scrollable-table > .p-datatable-tfoot {
     position: sticky;
     bottom: 0;
     z-index: 1;
@@ -2356,72 +2347,38 @@ export default {
     z-index: 1;
 }
 
-.p-datatable-scrollable-both .p-datatable-thead > tr > th,
-.p-datatable-scrollable-both .p-datatable-tbody > tr > td,
-.p-datatable-scrollable-both .p-datatable-tfoot > tr > td,
-.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th .p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,
-.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {
-    flex: 1 0 auto;
-}
-
 .p-datatable-flex-scrollable {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 
-.p-datatable-flex-scrollable .p-datatable-wrapper {
+.p-datatable-flex-scrollable > .p-datatable-wrapper {
     display: flex;
     flex-direction: column;
     flex: 1;
     height: 100%;
 }
 
-.p-datatable-scrollable .p-rowgroup-header {
+.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
     position: sticky;
     z-index: 1;
 }
 
-.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,
-.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {
-    display: table;
-    border-collapse: collapse;
-    width: 100%;
-    table-layout: fixed;
-}
-
-.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,
-.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {
-    display: table-row;
-}
-
-.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,
-.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {
-    display: table-cell;
-}
-
-.p-datatable-scrollable .p-virtualscroller > .p-datatable-table {
-    display: inline-block; /* For Safari */
-}
-
 /* Resizable */
-.p-datatable-resizable > .p-datatable-wrapper {
-    overflow-x: auto;
-}
-
-.p-datatable-resizable .p-datatable-thead > tr > th,
-.p-datatable-resizable .p-datatable-tfoot > tr > td,
-.p-datatable-resizable .p-datatable-tbody > tr > td {
+.p-datatable-resizable-table > .p-datatable-thead > tr > th,
+.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
+.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
     overflow: hidden;
     white-space: nowrap;
 }
 
-.p-datatable-resizable .p-resizable-column:not(.p-frozen-column) {
+.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
     background-clip: padding-box;
     position: relative;
 }
 
-.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
     display: none;
 }
 
@@ -2560,7 +2517,11 @@ export default {
 }
 
 /* VirtualScroller */
-.p-datatable .p-virtualscroller-loading {
+.p-datatable-virtualscroller-spacer {
+    display: flex;
+}
+
+.p-datatable .p-virtualscroller .p-virtualscroller-loading {
     transform: none !important;
     min-height: 0;
     position: sticky;
diff --git a/components/datatable/TableBody.vue b/components/datatable/TableBody.vue
index 927faff0b..7e52290cd 100755
--- a/components/datatable/TableBody.vue
+++ b/components/datatable/TableBody.vue
@@ -67,7 +67,9 @@
                     </td>
                 </tr>
                 <tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" class="p-rowgroup-footer" role="row">
-                    <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
+                    <td :colspan="columnsLength - 1">
+                        <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
+                    </td>
                 </tr>
             </template>
         </template>
@@ -238,13 +240,6 @@ export default {
             isARowSelected: false
         };
     },
-    watch: {
-        virtualScrollerContentProps(newValue, oldValue) {
-            if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical') && this.getVirtualScrollerProp('itemSize', oldValue) !== this.getVirtualScrollerProp('itemSize', newValue)) {
-                this.updateVirtualScrollerPosition();
-            }
-        }
-    },
     mounted() {
         if (this.frozenRow) {
             this.updateFrozenRowStickyPosition();
@@ -253,10 +248,6 @@ export default {
         if (this.scrollable && this.rowGroupMode === 'subheader') {
             this.updateFrozenRowGroupHeaderStickyPosition();
         }
-
-        if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical')) {
-            this.updateVirtualScrollerPosition();
-        }
     },
     updated() {
         if (this.frozenRow) {
@@ -538,11 +529,6 @@ export default {
 
             this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
         },
-        updateVirtualScrollerPosition() {
-            const tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
-
-            this.$el.style.top = (this.$el.style.top || 0) + tableHeaderHeight + 'px';
-        },
         getVirtualScrollerProp(option, options) {
             options = options || this.virtualScrollerContentProps;
 
diff --git a/components/virtualscroller/VirtualScroller.d.ts b/components/virtualscroller/VirtualScroller.d.ts
index 1b1cbcfcc..2fa448fd8 100644
--- a/components/virtualscroller/VirtualScroller.d.ts
+++ b/components/virtualscroller/VirtualScroller.d.ts
@@ -128,6 +128,11 @@ export interface VirtualScrollerProps {
      * Default value is 0.
      */
     delay?: number | undefined;
+    /**
+     * Delay after window's resize finishes.
+     * @defaultValue 10
+     */
+    resizeDelay?: number | undefined;
     /**
      * Defines if data is loaded and interacted with in lazy manner.
      */
@@ -163,6 +168,26 @@ export interface VirtualScrollerProps {
      * Default value is 0.
      */
     tabindex?: number | string | undefined;
+    /**
+     * When enabled, positions the content as inline.
+     * @defaultValue false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Used to specify how many items to load in each load method in lazy mode.
+     * @defaultValue 0
+     */
+    step?: number | undefined;
+    /**
+     * Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash.
+     * @defaultValue false
+     */
+    appendOnly?: boolean | undefined;
+    /**
+     * Whether to dynamically change the height or width of scrollable container.
+     * @defaultValue false
+     */
+    autoSize?: boolean | undefined;
 }
 
 export interface VirtualScrollerSlots {
diff --git a/components/virtualscroller/VirtualScroller.vue b/components/virtualscroller/VirtualScroller.vue
index 93efe8ac2..89a3d5e85 100644
--- a/components/virtualscroller/VirtualScroller.vue
+++ b/components/virtualscroller/VirtualScroller.vue
@@ -42,6 +42,8 @@
 </template>
 
 <script>
+import { DomHandler } from 'primevue/utils';
+
 export default {
     name: 'VirtualScroller',
     emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
@@ -74,6 +76,10 @@ export default {
             type: Number,
             default: 0
         },
+        resizeDelay: {
+            type: Number,
+            default: 10
+        },
         lazy: {
             type: Boolean,
             default: false
@@ -105,12 +111,29 @@ export default {
         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,
@@ -124,6 +147,15 @@ export default {
     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;
@@ -134,22 +166,59 @@ export default {
         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 (DomHandler.isVisible(this.element)) {
+                this.setContentEl(this.content);
+                this.init();
+                this.bindResizeListener();
+
+                this.defaultWidth = DomHandler.getWidth(this.element);
+                this.defaultHeight = DomHandler.getHeight(this.element);
+                this.defaultContentWidth = DomHandler.getWidth(this.content);
+                this.defaultContentHeight = 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';
@@ -161,31 +230,34 @@ export default {
             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) {
@@ -238,8 +310,7 @@ export default {
             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]) };
@@ -282,7 +353,7 @@ export default {
             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);
@@ -297,23 +368,55 @@ export default {
             }
 
             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);
+                });
+            }
+        },
+        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();
+
+                        this.content.style.minHeight = this.content.style.minWidth = 'auto';
+                        this.content.style.position = 'relative';
+                        this.element.style.contain = 'none';
+
+                        const [contentWidth, contentHeight] = [DomHandler.getWidth(this.content), DomHandler.getHeight(this.content)];
+
+                        contentWidth !== this.defaultContentWidth && (this.element.style.width = '');
+                        contentHeight !== this.defaultContentHeight && (this.element.style.height = '');
+
+                        const [width, height] = [DomHandler.getWidth(this.element), 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) {
-            if (this.items) {
-                return Math.min(isCols ? (this.columns || this.items[0]).length : this.items.length, last);
-            }
-
-            return 0;
+            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 };
             }
@@ -355,15 +458,12 @@ export default {
             }
         },
         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]));
@@ -412,33 +512,39 @@ export default {
             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)
+                    };
 
-                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 };
+                    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 || 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 {
@@ -462,21 +568,29 @@ export default {
 
                 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);
                 }
@@ -484,14 +598,56 @@ export default {
                 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 (DomHandler.isVisible(this.element)) {
+                    const both = this.isBoth();
+                    const vertical = this.isVertical();
+                    const horizontal = this.isHorizontal();
+                    const [width, height] = [DomHandler.getWidth(this.element), 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 = DomHandler.getWidth(this.content);
+                        this.defaultContentHeight = 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;
@@ -518,6 +674,15 @@ export default {
                 ...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 || DomHandler.findSingle(this.element, '.p-virtualscroller-content');
+        },
         elementRef(el) {
             this.element = el;
         },
@@ -530,8 +695,9 @@ export default {
             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
             ];
@@ -553,13 +719,10 @@ export default {
             ];
         },
         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 [];
@@ -597,7 +760,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    contain: content;
+    /* contain: content; */
     min-height: 100%;
     min-width: 100%;
     will-change: transform;
@@ -626,4 +789,17 @@ export default {
     align-items: center;
     justify-content: center;
 }
+
+.p-virtualscroller-loading-icon {
+    font-size: 2rem;
+}
+
+.p-virtualscroller-horizontal > .p-virtualscroller-content {
+    display: flex;
+}
+
+/* Inline */
+.p-virtualscroller-inline .p-virtualscroller-content {
+    position: static;
+}
 </style>

From b6c73b2a26b2db70923f6dae47fd7b46cd38ad53 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 28 Feb 2023 10:51:46 +0000
Subject: [PATCH 2/2] Update .eslintrc.js

---
 .eslintrc.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 4307a0c61..985964755 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -7,7 +7,12 @@ module.exports = {
     extends: ['plugin:nuxt/recommended', 'plugin:vue/vue3-essential', 'prettier'],
     parserOptions: {
         parser: '@babel/eslint-parser',
-        requireConfigFile: false
+        requireConfigFile: false,
+        babelOptions: {
+            parserOpts: {
+                plugins: ['typescript']
+            }
+        }
     },
     plugins: ['prettier'],
     ignorePatterns: ['**/public/**'],