classcard-ui 0.2.426 → 0.2.429

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.426",
+  "version": "0.2.429",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CAnchorTabs/CAnchorTabs.vue

@@ -51,9 +51,8 @@
           </a>
         </nav>
       </div>
-      <!-- Dummy data to demonstrate scrolling -->
-      <div id="accounts" class="h-40 bg-indigo-400"></div>
-      <div id="members" class="h-60 bg-red-500"></div>
+      <!-- <div id="mobile-app" style="height: 20rem; background-color: red"></div>
+      <div id="preferences" style="height: 40rem; background-color: blue"></div> -->
       <slot></slot>
     </div>
   </div>
@@ -77,15 +76,37 @@ export default {
   },
   data() {
     return {
+      // tabs: [
+      //   { name: "mobile-app", text: "Mobile app" },
+      //   { name: "preferences", text: "Preferences" },
+      // ],
       activeTab: this.initialTab,
     };
   },
   methods: {
+    scrollIfNeeded(element, container) {
+      if (element.offsetTop < container.scrollTop) {
+        container.scrollTop = element.offsetTop;
+      } else {
+        const offsetBottom = element.offsetTop + element.offsetHeight;
+        const scrollBottom = container.scrollTop + container.offsetHeight;
+        if (offsetBottom > scrollBottom) {
+          container.scrollTop = offsetBottom - container.offsetHeight;
+        }
+      }
+    },
     switchTab(name) {
       this.activeTab = name;
-      document.querySelector(`#${name}`).scrollIntoView({
-        behavior: "smooth",
-      });
+      // document.getElementById(`${name}`).scrollIntoView({
+      //   behavior: "smooth",
+      //   block: "nearest",
+      //   inline: "start",
+      // });
+
+      this.scrollIfNeeded(
+        document.getElementById(`${name}`),
+        document.getElementById("container")
+      );
     },
     switchTabForMobile(index) {
       var selectedOption = this.tabs[index];