@asd20/ui 3.2.860 → 3.2.862

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.860",
+  "version": "3.2.862",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20Viewport/index.vue

@@ -1,9 +1,23 @@
 <template>
-  <div>
+  <!-- If outerScrollable is true, the outermost div gets the scrollable attributes -->
+  <div
+    v-if="outerScrollable"
+    :class="outerClasses"
+    :style="outerStyles"
+    ref="viewport"
+    @scroll="handleScroll"
+  >
+    <div>
+      <slot />
+    </div>
+    <div class="arrow-wrapper">
+      <div v-if="showDownArrow" class="down-arrow"></div>
+    </div>
+  </div>
+  <!-- If outerScrollable is false, the inner div gets the scrollable attributes -->
+  <div v-else>
     <div :class="classes" :style="styles" ref="viewport" @scroll="handleScroll">
       <slot />
-
-      <!-- CSS-based down arrow (conditionally displayed) -->
     </div>
     <div class="arrow-wrapper">
       <div v-if="showDownArrow" class="down-arrow"></div>
@@ -18,6 +32,7 @@ export default {
     scrollable: { type: Boolean, default: false },
     padded: { type: Boolean, default: false },
     maxHeight: { type: String, default: '' },
+    outerScrollable: { type: Boolean, default: false }, // Prop to control which div is scrollable
   },
   data() {
     return {
@@ -37,6 +52,19 @@ export default {
         'max-height': this.maxHeight ? this.maxHeight : 'auto',
       }
     },
+    outerClasses() {
+      return {
+        'asd20-viewport': true,
+        'asd20-viewport--scrollable': this.outerScrollable || this.scrollable,
+        'asd20-viewport--padded': this.padded,
+      }
+    },
+    outerStyles() {
+      return {
+        'max-height': this.maxHeight ? this.maxHeight : 'auto',
+        'overflow-y': this.outerScrollable ? 'auto' : 'hidden', // Outer div becomes scrollable when enabled
+      }
+    },
   },
   mounted() {
     this.checkForOverflow()

package/src/components/molecules/Asd20Picker/index.vue

@@ -21,7 +21,7 @@
       windowed
       :icon="modalIcon"
     >
-      <asd20-viewport scrollable>
+      <asd20-viewport scrollable outerScrollable>
         <asd20-list-item
           v-if="organization.title !== 'Academy District 20'"
           class="district-link"
@@ -293,6 +293,7 @@ export default {
 
 .asd20-picker__modal {
   border-bottom: 2px solid rgba(235, 235, 235, 0.8);
+
   .district-link {
     margin-left: space(0.5) !important;
     font-weight: bold;
@@ -305,6 +306,9 @@ export default {
     }
   }
   height: min-content;
+  &::v-deep .arrow-wrapper {
+    display: none !important;
+  }
   &::v-deep h2 {
     font-size: 1.15rem;
     margin: space(0.5) 0;

package/src/components/organisms/Asd20FileList/index.vue

@@ -78,11 +78,11 @@ export default {
       }
     },
     handleResize() {
-      // console.log('attempting to run handleResize from asd20list component')
-
       // Access the Asd20List component
       const listComponent = this.$refs.listComponent
-      listComponent.handleResize() // This should call the method in Asd20Viewport
+      if (listComponent && listComponent.handleResize) {
+        listComponent.handleResize() // Call the resize method from Asd20List
+      }
     },
   },
 

package/src/components/organisms/Asd20SiteSearch/index.vue

@@ -24,7 +24,11 @@
         />
       </div>
       <asd20-tab-bar :tabs="tabs" @tabClick="onTabClick" />
-      <asd20-viewport class="asd20-site-search__results" scrollable>
+      <asd20-viewport
+        class="asd20-site-search__results"
+        scrollable
+        outerScrollable
+      >
         <asd20-notification
           v-if="!keywords && !searchingFiles && !searchingPages"
           title="Search by Keyword"