comand-component-library 3.3.39 → 3.3.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.3.39",
+  "version": "3.3.41",
   "private": false,
   "type": "module",
   "scripts": {

package/src/App.vue

@@ -819,7 +819,7 @@
             <!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
 
             <!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
-            <CmdBackToTopButton/>
+            <CmdBackToTopButton />
             <!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
 
             <!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->

package/src/components/CmdBackToTopButton.vue

@@ -17,12 +17,12 @@ export default {
     data() {
         return {
             windowInnerHeight: window.innerHeight,
-            windowScrollY: window.scrollY ?? (document.querySelector(this.parentSelector)?.scrollTop ||  0),
-            scrollHeight: document.querySelector(this.parentSelector)?.scrollHeight || 0
+            windowScrollY: this.getScrollY(),
+            scrollHeight: document.querySelector(this.scrollContainer)?.scrollHeight || 0
         }
     },
     props: {
-        parentSelector: {
+        scrollContainer: {
             type: String,
             default: "body"
         },
@@ -42,13 +42,21 @@ export default {
             }
         }
     },
-    created() {
+    mounted() {
         window.addEventListener('resize', this.onViewportChange)
-        document.querySelector(this.parentSelector)?.addEventListener('scroll', this.onViewportChange)
+        if (this.scrollContainer === "body") {
+            window.addEventListener('scroll', this.onViewportChange);
+        } else {
+            document.querySelector(this.scrollContainer)?.addEventListener('scroll', this.onViewportChange);
+        }
     },
     unmounted() {
         window.removeEventListener('resize', this.onViewportChange)
-        document.querySelector(this.parentSelector)?.removeEventListener('scroll', this.onViewportChange)
+        if (this.scrollContainer === "body") {
+            window.addEventListener('scroll', this.onViewportChange);
+        } else {
+            document.querySelector(this.scrollContainer)?.removeEventListener('scroll', this.onViewportChange)
+        }
     },
     /* watch for changes */
     computed: {
@@ -57,13 +65,23 @@ export default {
         }
     },
     methods: {
+        getScrollY() {
+            if (this.scrollContainer === "body") {
+                return window.scrollY
+            }
+            return document.querySelector(this.scrollContainer)?.scrollTop || 0
+        },
         onViewportChange() {
             this.windowInnerHeight = window.innerHeight;
-            this.windowScrollY = window.scrollY ?? (document.querySelector(this.parentSelector)?.scrollTop || 0)
-            this.scrollHeight = document.querySelector(this.parentSelector)?.scrollHeight || 0
+            this.windowScrollY = this.getScrollY()
+            this.scrollHeight = document.querySelector(this.scrollContainer)?.scrollHeight || 0
         },
         onBackToTop() {
-            document.querySelector(this.parentSelector)?.scrollTo({top: 0, left: 0, behavior: 'smooth'})
+            if (this.scrollContainer === "body") {
+                window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
+            } else {
+                document.querySelector(this.scrollContainer)?.scrollTo({top: 0, left: 0, behavior: 'smooth'})
+            }
         }
     }
 }