@asd20/ui-next 2.2.2 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.3.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.0...ui-next-v2.3.1) (2026-04-14)
+
+
+### Bug Fixes
+
+* fix gallery zoom; harden accordion clicks ([da17e1e](https://github.com/academydistrict20/asd20-ui-next/commit/da17e1e82cdaf73a0468e630810f2c79dfaf2d26))
+
+# [2.3.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.2.2...ui-next-v2.3.0) (2026-04-13)
+
+
+### Features
+
+* harden search functions for events, page, messages, etc. ([5c9893b](https://github.com/academydistrict20/asd20-ui-next/commit/5c9893b1c943ce1df54c35c97fc0d14b42c72221))
+
 ## [2.2.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.2.1...ui-next-v2.2.2) (2026-04-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

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

@@ -23,7 +23,7 @@
       <slot name="indicator">
         <div class="asd20-swipe__indicator__list">
           <span
-            v-for="n in $children.length"
+            v-for="n in slideCount"
             :key="n - 1"
             class="asd20-swipe__indicator__item"
             :style="{
@@ -43,7 +43,7 @@
       </slot>
     </div>
     <div
-      v-if="showArrows && childLen > 1"
+      v-if="showArrows && slideCount > 1"
       class="asd20-swipe__arrows"
     >
       <button
@@ -116,6 +116,7 @@ export default {
       lastDiff: 0,
       cur: 0,
       index: 0,
+      slideCount: 0,
       childLen: 0,
       leftBorder: 0,
       rightBorder: 0,
@@ -140,6 +141,7 @@ export default {
     this.init()
   },
   beforeUnmount() {
+    this.unbindEvents()
     this.clearAutoplayTimer()
   },
 
@@ -151,13 +153,15 @@ export default {
       this.wrapper = this.$refs['asd20-swipe__wrapper']
       this.container = this.$refs['asd20-swipe__container']
       this.wrapWidth = this.wrapper.clientWidth
-      this.childLen = this.$children.length
+      this.slideCount = this.getSlideElements().length
+      this.childLen = this.slideCount
 
       if (this.isLoopNeeded && this.childLen > 1) {
-        const firstChild = this.$children[0].$el.cloneNode(true)
-        const lastChild = this.$children[this.childLen - 1].$el.cloneNode(true)
+        const slideElements = this.getSlideElements()
+        const firstChild = slideElements[0].cloneNode(true)
+        const lastChild = slideElements[this.childLen - 1].cloneNode(true)
         this.container.appendChild(firstChild)
-        this.container.insertBefore(lastChild, this.$children[0].$el)
+        this.container.insertBefore(lastChild, slideElements[0])
         this.childLen += 2
         this.cur = 1
         this.diff = -this.wrapWidth
@@ -172,6 +176,9 @@ export default {
         this.autoSwipe()
       }
     },
+    getSlideElements() {
+      return Array.from(this.container?.children || [])
+    },
 
     bindEvents() {
       this.wrapper.addEventListener('touchstart', this.handleTouchStart)
@@ -182,25 +189,44 @@ export default {
         this.wrapper.addEventListener('mousemove', this.handleMouseMove)
         this.wrapper.addEventListener('mouseup', this.handleMouseUp)
       }
-      this.container.addEventListener('transitionend', () => {
-        this.dur = 0
-        if (this.isLoopNeeded) {
-          if (this.cur === 0) {
-            this.cur = this.childLen - 2
-            this.diff = -this.wrapWidth * this.cur
-          } else if (this.cur === this.childLen - 1) {
-            this.cur = 1
-            this.diff = -this.wrapWidth
-          }
-        }
-        this.index = this.isLoopNeeded ? this.cur - 1 : this.cur
-        this.$emit('change', this.index)
-        this.lastDiff = this.diff
-        this.lock = false
-        if (this.isAutoPlayNeeded) {
-          this.autoSwipe()
+      this.container.addEventListener('transitionend', this.handleTransitionEnd)
+    },
+
+    unbindEvents() {
+      if (!this.wrapper || !this.container) {
+        return
+      }
+
+      this.wrapper.removeEventListener('touchstart', this.handleTouchStart)
+      this.wrapper.removeEventListener('touchmove', this.handleTouchMove)
+      this.wrapper.removeEventListener('touchend', this.handleTouchEnd)
+      this.wrapper.removeEventListener('mousedown', this.handleMouseDown)
+      this.wrapper.removeEventListener('mousemove', this.handleMouseMove)
+      this.wrapper.removeEventListener('mouseup', this.handleMouseUp)
+      this.container.removeEventListener(
+        'transitionend',
+        this.handleTransitionEnd
+      )
+    },
+
+    handleTransitionEnd() {
+      this.dur = 0
+      if (this.isLoopNeeded) {
+        if (this.cur === 0) {
+          this.cur = this.childLen - 2
+          this.diff = -this.wrapWidth * this.cur
+        } else if (this.cur === this.childLen - 1) {
+          this.cur = 1
+          this.diff = -this.wrapWidth
         }
-      })
+      }
+      this.index = this.isLoopNeeded ? this.cur - 1 : this.cur
+      this.$emit('change', this.index)
+      this.lastDiff = this.diff
+      this.lock = false
+      if (this.isAutoPlayNeeded) {
+        this.autoSwipe()
+      }
     },
 
     handleTouchStart(event) {
@@ -264,7 +290,6 @@ export default {
     },
 
     handleMouseDown(event) {
-      console.log(event)
       if (this.lock) {
         return
       }
@@ -351,6 +376,8 @@ export default {
         this.dur = this.duration
         this.diff = -this.wrapWidth * this.cur
       }
+      this.index = this.isLoopNeeded ? this.cur - 1 : this.cur
+      this.lastDiff = this.diff
     },
     download() {
       window.open(this.imageThumbnails[this.index].url, '_blank')

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

@@ -157,6 +157,9 @@ export default {
     this.handleResize()
     window.addEventListener('resize', this.handleResize)
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
 
   methods: {
     handleResize() {

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

@@ -157,6 +157,9 @@ export default {
     this.handleResize()
     window.addEventListener('resize', this.handleResize)
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
 
   methods: {
     handleResize() {

package/src/components/templates/Asd20404Template/index.vue

@@ -86,6 +86,50 @@ import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
 
 // import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
 
+const MAX_SUGGESTED_PAGES = 10
+const NO_PAGE_RESULTS_FALLBACKS = [
+  {
+    id: 'calendar',
+    slug: 'calendar',
+    title: 'Calendar',
+    url: '/calendar',
+    isNoResultsFallback: true,
+    categories: ['App'],
+    pageTypeId: 'application',
+    metaDescription: 'View district and school calendars.',
+  },
+  {
+    id: 'directory',
+    slug: 'directory',
+    title: 'Directory',
+    url: '/directory',
+    isNoResultsFallback: true,
+    categories: ['App'],
+    pageTypeId: 'application',
+    metaDescription: 'Find staff and department contacts.',
+  },
+  {
+    id: 'school-directory',
+    slug: 'schools',
+    title: 'Schools',
+    url: '/schools',
+    isNoResultsFallback: true,
+    categories: ['App'],
+    pageTypeId: 'application',
+    metaDescription: 'Browse all Academy District 20 schools.',
+  },
+  {
+    id: 'help-desk',
+    slug: 'help-desk',
+    title: 'Help Desk',
+    url: 'https://www.asd20.org/help-desk/',
+    isNoResultsFallback: true,
+    categories: ['Support'],
+    pageTypeId: 'detail-page',
+    metaDescription: 'Get support from the Academy District 20 Help Desk.',
+  },
+]
+
 export default {
   components: {
     Asd20List,
@@ -108,6 +152,83 @@ export default {
   },
 
   methods: {
+    cloneFallbackPages() {
+      return NO_PAGE_RESULTS_FALLBACKS.map(page => ({
+        ...page,
+        categories: Array.isArray(page.categories) ? [...page.categories] : [],
+      }))
+    },
+    normalizeSearchText(value = '') {
+      return String(value)
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, ' ')
+        .trim()
+    },
+    getKeywordTokens(keywords = '') {
+      return Array.from(
+        new Set(
+          this.normalizeSearchText(keywords)
+            .split(' ')
+            .filter(token => token.length >= 3)
+        )
+      )
+    },
+    getSuggestedPageDedupKey(page = {}) {
+      const normalizedUrl = this.normalizeSearchText(page.url || '')
+
+      if (normalizedUrl) return `url:${normalizedUrl}`
+
+      const normalizedTitle = this.normalizeSearchText(page.title || '')
+      const normalizedSlug = this.normalizeSearchText(page.slug || '')
+
+      return `title:${normalizedTitle}|slug:${normalizedSlug}`
+    },
+    dedupeSuggestedPages(pages = []) {
+      const seen = new Set()
+
+      return pages.filter(page => {
+        const dedupKey = this.getSuggestedPageDedupKey(page)
+
+        if (!dedupKey || seen.has(dedupKey)) return false
+
+        seen.add(dedupKey)
+        return true
+      })
+    },
+    isRelevantSuggestedPage(page = {}, keywords = '') {
+      if (page.isNoResultsFallback) return true
+
+      const normalizedKeywords = this.normalizeSearchText(keywords)
+      const keywordTokens = this.getKeywordTokens(keywords)
+
+      if (!normalizedKeywords || keywordTokens.length === 0) return false
+
+      const haystack = this.normalizeSearchText([
+        page.title,
+        page.slug,
+        page.url,
+        page.metaDescription,
+        ...(Array.isArray(page.categories) ? page.categories : []),
+      ].join(' '))
+
+      if (!haystack) return false
+      if (haystack.includes(normalizedKeywords)) return true
+
+      return keywordTokens.some(token => haystack.includes(token))
+    },
+    sanitizeSuggestedPages(pages = [], keywords = '') {
+      const dedupedPages = this.dedupeSuggestedPages(
+        Array.isArray(pages) ? pages : []
+      )
+      const relevantPages = dedupedPages.filter(page =>
+        this.isRelevantSuggestedPage(page, keywords)
+      )
+      const resolvedPages = relevantPages.length
+        ? relevantPages
+        : this.cloneFallbackPages()
+
+      return resolvedPages.slice(0, MAX_SUGGESTED_PAGES)
+    },
     async findSuggestedPages() {
       if (typeof window !== 'undefined') {
         const keywords = window.location.pathname
@@ -115,17 +236,16 @@ export default {
           .trim()
           .toLowerCase()
         try {
-          const { pages } = await queryPages({ keywords, top: 4 })
-
-          if (Array.isArray(pages) && pages.length > 0) {
-            this.suggestedPagesListItems = mapPagesToListItems(pages)
-          } else {
-            // console.warn('No pages found or pages is not an array')
-            this.suggestedPagesListItems = []
-          }
+          const { pages } = await queryPages({ keywords, top: MAX_SUGGESTED_PAGES })
+
+          this.suggestedPagesListItems = mapPagesToListItems(
+            this.sanitizeSuggestedPages(pages, keywords)
+          )
         } catch (error) {
           console.error('Error fetching suggested pages:', error)
-          this.suggestedPagesListItems = []
+          this.suggestedPagesListItems = mapPagesToListItems(
+            this.cloneFallbackPages()
+          )
         }
       }
     },

package/src/components/templates/Asd20AppTemplate/index.vue

@@ -217,6 +217,9 @@ export default {
     this.zoomed = window.innerHeight <= 500
     window.addEventListener('resize', this.handleResize)
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     handleResize() {
       this.zoomed = window.innerHeight <= 500

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -164,6 +164,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailTemplate',
@@ -181,54 +182,12 @@ export default {
   },
   mixins: [pageTemplateMixin],
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20DetailImageFullTemplate/index.vue

@@ -156,6 +156,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailImageFullTemplate',
@@ -173,54 +174,12 @@ export default {
   },
   mixins: [pageTemplateMixin],
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -149,6 +149,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailImageTemplate',
@@ -166,54 +167,12 @@ export default {
   },
   mixins: [pageTemplateMixin],
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -149,6 +149,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import { bindInjectedAccordionInteractions } from '../../../helpers/injectedContentInteractions'
 
 export default {
   name: 'Asd20DetailTemplate',
@@ -169,54 +170,12 @@ export default {
     languageCode: { type: String, default: 'en' },
   },
   mounted() {
-    // Allow accordions to be injected into the DOM via the SuperEditor in the CommCenter
-    this.$nextTick(() => {
-      const accordionButtons = document.querySelectorAll('.accordion-button')
-
-      accordionButtons.forEach(button => {
-        button.addEventListener('click', () => {
-          const contentId = button.getAttribute('aria-controls')
-          const content = document.getElementById(contentId)
-          const expanded = button.getAttribute('aria-expanded') === 'true'
-
-          button.setAttribute('aria-expanded', !expanded)
-          button.querySelector('.toggle-icon').textContent = expanded
-            ? '+'
-            : '-'
-
-          if (!expanded) {
-            content.style.display = 'block'
-
-            // Reset maxHeight before calculating scrollHeight (force reflow)
-            content.style.maxHeight = '0'
-            content.style.padding = '0 var(--space-1, 1em)'
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = content.scrollHeight + 'px'
-              content.style.padding = 'var(--space-1, 1em)'
-            })
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px' // Set to current height for smooth transition
-
-            requestAnimationFrame(() => {
-              content.style.transition =
-                'max-height 0.4s ease, padding 0.4s ease'
-              content.style.maxHeight = '0'
-              content.style.padding = '0 var(--space-1, 1em)'
-            })
-
-            // Optionally hide the content after animation
-            setTimeout(() => {
-              if (content.style.maxHeight === '0px') {
-                content.style.display = 'none'
-              }
-            }, 400) // Match transition duration
-          }
-        })
-      })
-    })
+    this.removeInjectedAccordionInteractions = bindInjectedAccordionInteractions(
+      this.$el
+    )
+  },
+  beforeUnmount() {
+    this.removeInjectedAccordionInteractions?.()
   },
 }
 </script>

package/src/components/templates/Asd20SchoolHomeTemplate/index.vue

@@ -303,6 +303,9 @@ export default {
       this.$emit('events-in-view')
     }
   },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   methods: {
     handleResize() {
       this.showLogo = window.innerWidth >= 1350