From 16c0e4302466e2080d496d0b369a7cb71ffaa353 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sun, 5 Dec 2021 20:20:13 +0300
Subject: [PATCH] Update virtualscroller doc and api-gen

---
 api-generator/components/virtualscroller.js   | 67 +++++++++++++----
 .../virtualscroller/VirtualScrollerDoc.vue    | 71 +++++++++++++++----
 2 files changed, 110 insertions(+), 28 deletions(-)

diff --git a/api-generator/components/virtualscroller.js b/api-generator/components/virtualscroller.js
index 75afb734e..54c080fb8 100644
--- a/api-generator/components/virtualscroller.js
+++ b/api-generator/components/virtualscroller.js
@@ -1,4 +1,22 @@
 const VirtualScrollerProps = [
+    {
+        name: "id",
+        type: "string",
+        default: "null",
+        description: "Unique identifier of the element."
+    },
+    {
+        name: "style",
+        type: "any",
+        default: "null",
+        description: "Inline style of the component."
+    },
+    {
+        name: "class",
+        type: "string",
+        default: "null",
+        description: "Style class of the component."
+    },
     {
         name: "items",
         type: "array",
@@ -47,27 +65,50 @@ const VirtualScrollerProps = [
         default: "false",
         description: "Defines if data is loaded and interacted with in lazy manner."
     },
+    {
+        name: "disabled",
+        type: "boolean",
+        default: "false",
+        description: "If disabled, the VirtualScroller feature is eliminated and the content is displayed directly."
+    },
+    {
+        name: "loaderDisabled",
+        type: "boolean",
+        default: "false",
+        description: "Used to implement a custom loader instead of using the loader feature in the VirtualScroller."
+    },
+    {
+        name: "loading",
+        type: "boolean",
+        default: "false",
+        description: "Whether the data is loaded."
+    },
+    {
+        name: "showSpacer",
+        type: "boolean",
+        default: "true",
+        description: "Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller."
+    },
     {
         name: "showLoader",
         type: "boolean",
         default: "false",
         description: "Whether to show loader."
-    },
-    {
-        name: "style",
-        type: "any",
-        default: "null",
-        description: "Inline style of the component."
-    },
-    {
-        name: "class",
-        type: "string",
-        default: "null",
-        description: "Style class of the component."
     }
 ];
 
 const VirtualScrollerEvents = [
+    {
+        name: "scroll",
+        description: "Callback to invoke when scroll position changes.",
+        arguments: [
+            {
+                name: "event",
+                type: "any",
+                description: "Browser event."
+            }
+        ]
+    },
     {
         name: "scroll-index-change",
         description: "Callback to invoke when scroll position and item's range in view changes.",
@@ -125,4 +166,4 @@ module.exports = {
         events: VirtualScrollerEvents,
         slots: VirtualScrollerSlots
     }
-};
\ No newline at end of file
+};
diff --git a/src/views/virtualscroller/VirtualScrollerDoc.vue b/src/views/virtualscroller/VirtualScrollerDoc.vue
index 9f118e9b2..75c7c0b6b 100644
--- a/src/views/virtualscroller/VirtualScrollerDoc.vue
+++ b/src/views/virtualscroller/VirtualScrollerDoc.vue
@@ -122,6 +122,24 @@ export default {
                     </tr>
                 </thead>
                 <tbody>
+                    <tr>
+                        <td>id</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Unique identifier of the element.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>class</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the component.</td>
+                    </tr>
                     <tr>
                         <td>items</td>
                         <td>array</td>
@@ -172,24 +190,36 @@ export default {
                         <td>false</td>
                         <td>Defines if data is loaded and interacted with in lazy manner.</td>
                     </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>If disabled, the VirtualScroller feature is eliminated and the content is displayed directly.</td>
+                    </tr>
+                    <tr>
+                        <td>loaderDisabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Used to implement a custom loader instead of using the loader feature in the VirtualScroller.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the data is loaded.</td>
+                    </tr>
+                    <tr>
+                        <td>showSpacer</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller.</td>
+                    </tr>
                     <tr>
                         <td>showLoader</td>
                         <td>boolean</td>
                         <td>false</td>
                         <td>Whether to show loader.</td>
                     </tr>
-                    <tr>
-                        <td>style</td>
-                        <td>any</td>
-                        <td>null</td>
-                        <td>Inline style of the component.</td>
-                    </tr>
-                    <tr>
-                        <td>class</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Style class of the component.</td>
-                    </tr>
                 </tbody>
             </table>
         </div>
@@ -289,7 +319,18 @@ export default {
                         <td>items: An array of objects to display.<br />
                             styleClass: Style class of the component<br />
                             contentRef: Referance of the content<br />
-                            getItemOptions: Options of the items</td>
+                            getItemOptions: Options of the items<br/>
+                            loading: Whether the data is loaded<br />
+                            getLoaderOptions: Loader options of the items while the data is loading.<br />
+                            itemSize: The height/width of item according to orientation.<br/>
+                            rows: The number of the rendered rows.<br />
+                            columns: The number of the rendered columns.<br />
+                            spacerStyle: The style of spacer element.<br/>
+                            contentStyle: The style of content element.<br />
+                            vertical: Whether the orientation is vertical.<br />
+                            horizontal: Whether the orientation is horizontal.<br/>
+                            both: Whether the orientation is both.<br />
+                            </td>
                     </tr>
                     <tr>
                         <td>item</td>
@@ -1028,11 +1069,11 @@ export default {
             .virtualscroller-demo .p-horizontal-scroll .scroll-item {
                 writing-mode: vertical-lr;
             }
-            
+
             .virtualscroller-demo .custom-loading > .p-virtualscroller-loader {
                 display: block;
             }
-        
+
         </style>
 `
                 }