From b9dcab5ec9c37aa40d541d54fc79109f12e4ebdb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 30 Nov 2020 13:28:22 +0300
Subject: [PATCH] Refactor ScrollTop and add types

---
 src/components/scrolltop/ScrollTop.d.ts | 10 ++++++++++
 src/components/scrolltop/ScrollTop.vue  | 10 +++++++---
 src/views/scrolltop/ScrollTopDemo.vue   |  2 +-
 src/views/scrolltop/ScrollTopDoc.vue    | 16 +++++++++++-----
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/scrolltop/ScrollTop.d.ts b/src/components/scrolltop/ScrollTop.d.ts
index e69de29bb..e79b2e127 100644
--- a/src/components/scrolltop/ScrollTop.d.ts
+++ b/src/components/scrolltop/ScrollTop.d.ts
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+
+declare class ScrollTo extends Vue {
+    target?: string;
+    threshold?: number;
+    icon?: boolean;
+    behavior?: boolean;
+}
+
+export default ScrollTo;
\ No newline at end of file
diff --git a/src/components/scrolltop/ScrollTop.vue b/src/components/scrolltop/ScrollTop.vue
index e48bef14b..9f627832f 100644
--- a/src/components/scrolltop/ScrollTop.vue
+++ b/src/components/scrolltop/ScrollTop.vue
@@ -21,13 +21,17 @@ export default {
             type: String,
             default: 'window'
         },
-        visiblePosition: {
+        threshold: {
             type: Number,
             default: 400
         },
         icon: {
             type: String,
             default: 'pi pi-chevron-up'
+        },
+        behavior: {
+            type: String,
+            default: 'smooth'
         }
     },
     mounted() {
@@ -47,11 +51,11 @@ export default {
             let scrollElement = this.target === 'window' ? window : this.$el.parentElement;
              scrollElement.scroll({
                 top: 0, 
-                behavior: 'smooth'
+                behavior: this.behavior
             });
         },
         checkVisibility(scrollY) {
-            if (scrollY > this.visiblePosition)
+            if (scrollY > this.threshold)
                 this.visible = true;
             else
                 this.visible = false;
diff --git a/src/views/scrolltop/ScrollTopDemo.vue b/src/views/scrolltop/ScrollTopDemo.vue
index d37cb6942..cda5aba48 100644
--- a/src/views/scrolltop/ScrollTopDemo.vue
+++ b/src/views/scrolltop/ScrollTopDemo.vue
@@ -28,7 +28,7 @@
                         Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
                         Mattis aliquam faucibus purus in massa tempor nec.
                     </p>
-                    <ScrollTop target="parent" :visiblePosition="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+                    <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
                 </ScrollPanel>
             </div>
         </div>
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index 7ccb9fa76..a1c2651b1 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -18,11 +18,11 @@ import ScrollTop from 'primevue/scrolltop';
 </code></pre>
 
 				<h5>Threshold</h5>
-				<p>When the vertical scroll position reaches a certain threshold, ScrollTop gets displays. This value is
-					defined with the <i>visiblePosition</i> property that defaults to 400.</p>
+				<p>When the vertical scroll position reaches a certain value, ScrollTop gets displayed. This value is
+					defined with the <i>threshold</i> property that defaults to 400.</p>
 <pre v-code>
 <code>
-&lt;ScrollTop :visiblePosition="400" /&gt;
+&lt;ScrollTop :threshold="200" /&gt;
 
 </code></pre>
 
@@ -56,7 +56,7 @@ import ScrollTop from 'primevue/scrolltop';
                                 <td>Target of the ScrollTop, valid values are "window" and "parent".</td>
                             </tr>
                             <tr>
-                                <td>visiblePosition</td>
+                                <td>threshold</td>
                                 <td>number</td>
                                 <td>400</td>
                                 <td>Defines the threshold value of the vertical scroll position of the target to toggle the visibility.</td>
@@ -66,6 +66,12 @@ import ScrollTop from 'primevue/scrolltop';
                                 <td>string</td>
                                 <td>pi pi-chevron-up</td>
                                 <td>Icon to display.</td>
+                            </tr>
+							<tr>
+                                <td>behavior</td>
+                                <td>string</td>
+                                <td>smooth</td>
+                                <td>Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -123,7 +129,7 @@ import ScrollTop from 'primevue/scrolltop';
 		Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
 		Mattis aliquam faucibus purus in massa tempor nec.
 	&lt;/p&gt;
-	&lt;ScrollTop target="parent" :visiblePosition="100" class="custom-scrolltop" icon="pi pi-arrow-up"/&gt;
+	&lt;ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" /&gt;
 &lt;/ScrollPanel&gt;
 </template>
 </code></pre>