@asd20/ui 3.2.858 → 3.2.860

package/package.json

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

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

@@ -1,5 +1,14 @@
 <template>
-  <div :class="classes" :style="styles"><slot /></div>
+  <div>
+    <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>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -10,6 +19,11 @@ export default {
     padded: { type: Boolean, default: false },
     maxHeight: { type: String, default: '' },
   },
+  data() {
+    return {
+      showDownArrow: false, // Track whether the down arrow should be shown
+    }
+  },
   computed: {
     classes() {
       return {
@@ -24,23 +38,59 @@ export default {
       }
     },
   },
+  mounted() {
+    this.checkForOverflow()
+    window.addEventListener('resize', this.checkForOverflow)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkForOverflow)
+  },
+  methods: {
+    checkForOverflow() {
+      const viewport = this.$refs.viewport
+      // Check if content overflows the viewport
+      if (viewport.scrollHeight > viewport.clientHeight) {
+        this.showDownArrow = true
+        // console.log('Show Down Arrow:', this.showDownArrow)
+      } else {
+        this.showDownArrow = false
+        // console.log('Show Down Arrow:', this.showDownArrow)
+      }
+    },
+    handleScroll() {
+      const viewport = this.$refs.viewport
+      // Hide the down arrow if the user scrolls to the bottom
+      if (
+        viewport.scrollTop + viewport.clientHeight >=
+        viewport.scrollHeight - 5
+      ) {
+        this.showDownArrow = false
+      } else {
+        this.showDownArrow = true
+      }
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../design/_mixins.scss';
 @import '../../../design/_variables.scss';
+
 .asd20-viewport {
   flex-grow: 1;
   overflow: hidden;
   position: relative;
+
   &--scrollable {
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
+
   &--padded {
     padding: space(1);
   }
+
   &::-webkit-scrollbar {
     -webkit-appearance: none;
     width: 6px;
@@ -52,4 +102,27 @@ export default {
     margin: 3px;
   }
 }
+/* CSS-based down arrow */
+
+.arrow-wrapper {
+  position: relative; /* Ensure arrow-wrapper stays relative to the viewport */
+  width: 100%; /* Takes up full width of the viewport */
+  height: 0; /* No height is required here */
+  margin-bottom: space(1);
+}
+.down-arrow {
+  position: absolute;
+  bottom: -1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid rgba(0, 0, 0, 0.7); /* Arrow color */
+  cursor: pointer;
+  z-index: 10;
+  transition: opacity 0.3s ease;
+  opacity: 0.7;
+}
 </style>

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

@@ -112,6 +112,8 @@ export default {
           {
             mousewheel: {
               releaseOnEdges: true,
+              sensitivity: 0.5,
+              forceToAxis: true,
             },
             controller: {
               control: this.controlled,
@@ -128,6 +130,15 @@ export default {
         )
       )
 
+      // Delay horizontal scrolling and prioritize vertical scrolling
+      this.swiper.on('touchMove', event => {
+        const { deltaX, deltaY } = event // Track horizontal and vertical scroll movements
+        if (Math.abs(deltaY) > Math.abs(deltaX)) {
+          // If the vertical scroll is stronger, prevent horizontal scrolling
+          event.preventDefault()
+        }
+      })
+
       this.swiper.on('slideChange', this.onSlideChange)
 
       this.$emit('update:swiper', this.swiper)

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

@@ -8,6 +8,7 @@
     :headline="title"
     :icon="icon"
     :column-width="640"
+    ref="listComponent"
   >
     <template v-for="category in categorizedFileItems">
       <asd20-list-category :key="category.name" :label="category.name" />
@@ -47,11 +48,42 @@ export default {
     loadedFiles: [],
   }),
 
+  watch: {
+    files: {
+      handler() {
+        this.$nextTick(() => {
+          // console.log('Change in Files detected:', this.files)
+          this.checkForOverflow() // Ensure overflow check happens after file changes
+          this.handleResize() // Ensure column resize happens after file changes
+        })
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+
   methods: {
-    // async loadFiles() {
-    //   let { data } = await axios.get(this.url)
-    //   this.loadedFiles = data.value
-    // },
+    // Expose the checkForOverflow method from the asd20viewport component
+    // Expose the handleResize method from the asd20list component
+    checkForOverflow() {
+      // console.log('attempting to run checkForOverFlow from fileList component')
+
+      // Access the Asd20Viewport component through Asd20List
+      const listComponent = this.$refs.listComponent
+      if (listComponent && listComponent.$refs.viewport) {
+        // console.log('Calling checkForOverflow on Asd20Viewport')
+        listComponent.$refs.viewport.checkForOverflow() // This should call the method in Asd20Viewport
+      } else {
+        // console.log('Viewport ref not available')
+      }
+    },
+    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
+    },
   },
 
   computed: {

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

@@ -11,6 +11,7 @@
     :max-height="maxHeight"
     :multi-column="multiColumn"
     :column-width="640"
+    ref="listComponent"
   >
     <template v-for="category in categorizedLinkItems">
       <asd20-list-category :key="category.name" :label="category.name" />
@@ -62,21 +63,34 @@ export default {
       return !!this.links.find(l => !!l.imageUrl)
     },
   },
-}
-</script>
+  watch: {
+    // Watch for changes in files
+    links: {
+      handler() {
+        this.$nextTick(() => {
+          // console.log('Change in Links detected:', this.links)
+          this.checkForOverflow()
+        })
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
 
-<style lang="scss" scoped>
-@import '../../../design/_variables.scss';
-@import '../../../design/_mixins.scss';
+  methods: {
+    // Expose the checkForOverflow method from the viewport component
+    checkForOverflow() {
+      // console.log('attempting to run checkForOverFlow from linkList component')
 
-.asd20-link-list.separated {
-  &::v-deep .asd20-list-item:not(:first-child) {
-    // border-top: 1px solid rgba(128, 128, 128, 0.125) !important;
-    // border-top: 1px solid rgba(128, 128, 128, 0.125) !important;
-  }
-  &::v-deep .asd20-list-category + .asd20-list-item {
-    // border-top: none !important;
-    // border-top: 1px solid rgba(128, 128, 128, 0.125) !important;
-  }
+      // Access the Asd20Viewport component through Asd20List
+      const listComponent = this.$refs.listComponent
+      if (listComponent && listComponent.$refs.viewport) {
+        // console.log('Calling checkForOverflow on Asd20Viewport')
+        listComponent.$refs.viewport.checkForOverflow() // This should call the method in Asd20Viewport
+      } else {
+        // console.log('Viewport ref not available')
+      }
+    },
+  },
 }
-</style>
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="asd20-list" :class="classes">
+  <div class="asd20-list" :class="classes" ref="listComponent">
     <div class="asd20-list__header" v-if="$slots.header || headline">
       <asd20-icon v-if="icon" :name="icon" :size="iconSize" />
       <component
@@ -9,7 +9,7 @@
       ></component>
       <slot name="header" />
     </div>
-    <asd20-viewport scrollable :max-height="maxHeight">
+    <asd20-viewport ref="viewport" scrollable :max-height="maxHeight">
       <div class="asd20-list__items" :style="styles">
         <template v-for="(item, index) in items">
           <asd20-list-category
@@ -91,6 +91,11 @@ export default {
       this.columns = Math.round(this.$el.offsetWidth / this.columnWidth)
       // console.log(this.$el.offsetWidth, this.columnWidth, this.columns)
     },
+    checkForOverflow() {
+      if (this.$refs.viewport) {
+        this.$refs.viewport.checkForOverflow()
+      }
+    },
   },
 }
 </script>

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

@@ -8,6 +8,7 @@
       :headline="headline || title"
       :icon="icon"
       :column-width="640"
+      ref="listComponent"
     >
       <asd20-list-item
         v-for="(person, index) in mappedPeople"
@@ -54,6 +55,18 @@ export default {
     // loadedPeople: [],
     selectedPerson: null,
   }),
+  watch: {
+    files: {
+      handler() {
+        this.$nextTick(() => {
+          // console.log('Change in Files detected:', this.files)
+          this.checkForOverflow() // Ensure overflow check happens after file changes
+        })
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
 
   methods: {
     // async loadPeople() {
@@ -74,6 +87,19 @@ export default {
         biography: p.biography,
       }
     },
+    // Expose the checkForOverflow method from the viewport component
+    checkForOverflow() {
+      // console.log('attempting to run checkForOverFlow from fileList component')
+
+      // Access the Asd20Viewport component through Asd20List
+      const listComponent = this.$refs.listComponent
+      if (listComponent && listComponent.$refs.viewport) {
+        // console.log('Calling checkForOverflow on Asd20Viewport')
+        listComponent.$refs.viewport.checkForOverflow() // This should call the method in Asd20Viewport
+      } else {
+        // console.log('Viewport ref not available')
+      }
+    },
   },
 
   computed: {

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

@@ -8,14 +8,7 @@
         v-if="group"
         :group="group"
       />
-      <asd20-people-list
-        class="relatedPeople"
-        v-if="peopleFeedProps && people.length > 0 && !noPeople"
-        :people="people"
-        v-bind="peopleFeedProps"
-        :multi-column="full"
-        max-height="400px"
-      />
+
       <asd20-link-list
         v-if="relatedPages"
         class="relatedPages"
@@ -24,14 +17,7 @@
         :multi-column="full"
         max-height="400px"
       />
-      <!-- <asd20-link-list
-        v-if="relatedLinks.length > 5"
-        class="related-links-wide"
-        :links="relatedLinks"
-        v-bind="relatedLinksProps"
-        :multi-column="full"
-        max-height="1500px"
-      /> -->
+
       <asd20-link-list
         v-if="relatedLinks"
         class="relatedLinks"
@@ -41,15 +27,32 @@
         max-height="400px"
       />
 
-      <!-- <intersect v-if="eventsFeedProps" @enter="$emit('events-in-view')">
-      <asd20-event-list
-        v-bind="eventsFeedProps"
-        :events="events"
-        hide-past-events
+      <asd20-people-list
+        class="relatedPeople"
+        v-if="peopleFeedProps && people.length > 0 && !noPeople"
+        :people="people"
+        v-bind="peopleFeedProps"
+        :multi-column="full"
+        max-height="400px"
       />
-    </intersect> -->
+      <!-- <asd20-link-list
+        v-if="relatedLinks.length > 5"
+        class="related-links-wide"
+        :links="relatedLinks"
+        v-bind="relatedLinksProps"
+        :multi-column="full"
+        max-height="1500px"
+      /> -->
+
+      <!-- <intersect v-if="eventsFeedProps" @enter="$emit('events-in-view')">
+        <asd20-event-list
+          v-bind="eventsFeedProps"
+          :events="events"
+          hide-past-events
+        />
+      </intersect> -->
 
-      <intersect v-if="filesFeedProps" @enter="$emit('files-in-view')">
+      <intersect v-if="filesFeedProps" @enter="handleFilesInView">
         <asd20-file-list
           v-if="filesFeedProps && !noFiles"
           class="relatedFiles"
@@ -116,6 +119,12 @@ export default {
     noFiles: { type: Boolean, default: false },
     noPeople: { type: Boolean, default: false },
   },
+
+  methods: {
+    handleFilesInView() {
+      this.$emit('files-in-view')
+    },
+  },
 }
 </script>
 
@@ -178,9 +187,9 @@ export default {
     .widgets-wrapper {
       --minimum-column-width: 450px;
       --gutter: #{space(1)};
-      &::v-deep .asd20-person-list {
-        max-width: 50vw;
-      }
+      // &::v-deep .asd20-person-list {
+      //   max-width: 50vw;
+      // }
     }
 
     // .relatedDepartment,

package/src/mixins/mockPageMixin.js

@@ -25,14 +25,14 @@ export default {
         selectedLanguageCode: 'en',
         isAuthenticated: true,
         relatedLinks: [].concat(
-          Array(3).fill({
+          Array(6).fill({
             category: 'External',
             source: '',
             url: 'https://external/communications/factsheetsandfaqs-assessment',
             title: 'Colorado State Assessment Process',
             description: 'Assessment information for the state of Colorado.',
           }),
-          Array(3).fill({
+          Array(5).fill({
             path: '/internal-page',
             title: 'Ridiculus Tortor Amet',
             metaDescription: