@asd20/ui-next 2.0.16 → 2.0.17

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [2.0.17](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.16...ui-next-v2.0.17) (2026-04-02)
+
 ## [2.0.16](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.15...ui-next-v2.0.16) (2026-04-01)
 
 

package/package.json

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

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

@@ -2,7 +2,7 @@
   <component
     :is="tag"
     v-bind="rootAttrs"
-    @click="forwardEvent('click', $event)"
+    @click="handleClick"
     @mouseup="forwardEvent('mouseup', $event)"
     @keyup="forwardEvent('keyup', $event)"
     @focusin="forwardEvent('focusin', $event)"
@@ -25,7 +25,10 @@
 <script>
 import Asd20Badge from '../Asd20Badge'
 import Asd20Icon from '../Asd20Icon'
-import { shouldOpenInNewWindow } from '../../../helpers/linkPolicy'
+import {
+  navigateInternalHref,
+  shouldOpenInNewWindow,
+} from '../../../helpers/linkPolicy'
 
 export default {
   name: 'Asd20Button',
@@ -111,6 +114,13 @@ export default {
     },
   },
   methods: {
+    handleClick(event) {
+      navigateInternalHref(this, event, this.link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+      this.forwardEvent('click', event)
+    },
     forwardEvent(name, event) {
       this.$emit(name, event)
     },

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

@@ -4,6 +4,7 @@
     class="asd20-district-logo"
     aria-label="Academy District 20 Home - We educate and inspire students to thrive."
     alt="The Academy District 20 logo."
+    @click="onClick"
   >
     <svg viewBox="0 0 460.94 62.52">
       <path
@@ -30,12 +31,22 @@
 </template>
 
 <script>
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
+
 export default {
   name: 'Asd20DistrictLogo',
   props: {
     link: { type: String, default: '/' },
     tagline: { type: Boolean, default: false },
   },
+  methods: {
+    onClick(event) {
+      navigateInternalHref(this, event, this.link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -8,6 +8,7 @@
         ? `${abbreviatedTitle} ${subtitle}, An Academy District 20 School`
         : `${abbreviatedTitle} ${subtitle}`
     "
+    @click="onClick"
   >
     <figure class="asd20-logo__image">
       <img
@@ -40,6 +41,8 @@
 </template>
 
 <script>
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
+
 export default {
   name: 'Asd20Logo',
   props: {
@@ -90,6 +93,14 @@ export default {
       return this.title.trim()
     },
   },
+  methods: {
+    onClick(event) {
+      navigateInternalHref(this, event, this.link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -35,6 +35,7 @@
           :href="detailLink"
           :target="detailLinkTarget"
           :rel="detailLinkRel"
+          @click="onDetailLinkClick"
         >
           {{ detailLinkLabel }}
         </a>
@@ -98,6 +99,7 @@ import Asd20Button from '../Asd20Button'
 import Asd20Icon from '../Asd20Icon'
 import Asd20RichBodyContent from '../Asd20RichBodyContent'
 import {
+  navigateInternalHref,
   resolveCurrentHostname,
   shouldOpenInNewWindow,
   shouldShowExternalIcon,
@@ -176,7 +178,14 @@ export default {
     },
   },
 
-  methods: {},
+  methods: {
+    onDetailLinkClick(event) {
+      navigateInternalHref(this, event, this.detailLink, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -2,6 +2,7 @@
   <div
     v-if="renderNodes.length"
     class="asd20-rich-body-content"
+    @click="onContentClick"
   >
     <template v-for="(node, index) in renderNodes">
       <div
@@ -37,6 +38,7 @@
 <script>
 import Asd20BodyAccordion from '../../molecules/Asd20BodyAccordion'
 import Asd20TableauEmbed from '../../molecules/Asd20TableauEmbed'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 
 const BODY_BLOCK_PLACEHOLDER_PATTERN =
   /<div\b(?=[^>]*\bdata-cc-block=(['"])([^'"]+)\1)(?=[^>]*\bdata-block-id=(['"])([^'"]+)\3)[^>]*><\/div>/gi
@@ -145,6 +147,19 @@ export default {
   mounted() {
     this.hasMounted = true
   },
+
+  methods: {
+    onContentClick(event) {
+      const anchor = event.target?.closest?.('a')
+
+      if (!anchor || !this.$el?.contains(anchor)) return
+
+      navigateInternalHref(this, event, anchor.getAttribute('href'), {
+        target: anchor.getAttribute('target'),
+        download: anchor.hasAttribute('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -54,6 +54,7 @@
             :href="link"
             :title="title"
             :tabindex="disableFocus ? -1 : 0"
+            @click="onLinkClick"
           ></a>
         </div>
         <div
@@ -178,6 +179,7 @@
             :href="link ? link : ''"
             :title="title"
             :tabindex="disableFocus ? -1 : 0"
+            @click="onLinkClick"
             v-html="linkLabel"
           ></a>
         </p>
@@ -256,6 +258,7 @@
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Tag from '../../atoms/Asd20Tag'
 import lazyImage from '../../../directives/lazy-image'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 import truncate from 'lodash/truncate'
 
 export default {
@@ -379,6 +382,14 @@ export default {
       return plain.slice(0, 65) + '...'
     },
   },
+  methods: {
+    onLinkClick(event) {
+      navigateInternalHref(this, event, this.link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -28,6 +28,7 @@
           v-if="detailLinkUrl"
           :tabindex="focusDisabled ? '-1' : undefined"
           :href="detailLinkUrl"
+          @click="onDetailLinkClick"
         >
           {{ detailLinkLabel || detailLinkUrl }}
         </a>
@@ -63,6 +64,7 @@
 <script>
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 
 export default {
   name: 'Asd20Notification',
@@ -126,6 +128,14 @@ export default {
       }
     },
   },
+  methods: {
+    onDetailLinkClick(event) {
+      navigateInternalHref(this, event, this.detailLinkUrl, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -33,6 +33,7 @@
         <a
           v-if="websiteLogoProps"
           :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
+          @click="onLogoClick($event, websiteLogoProps.logoLink)"
         >
           <img
             :src="
@@ -44,6 +45,7 @@
         <a
           v-if="websiteLogoProps2"
           :href="websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''"
+          @click="onLogoClick($event, websiteLogoProps2.logoLink)"
         >
           <img
             :src="
@@ -173,6 +175,7 @@ import Asd20SocialMenu from '../../../components/molecules/Asd20SocialMenu'
 import Asd20Logo from '../../../components/atoms/Asd20Logo'
 import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import organizationAddress from '../../../data/organization-address.json'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 import {
   organizationLevel,
   organizationName,
@@ -265,6 +268,14 @@ export default {
       return null
     },
   },
+  methods: {
+    onLogoClick(event, link) {
+      navigateInternalHref(this, event, link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -67,6 +67,7 @@
           <a
             v-if="detailLink && !isDetailPage"
             :href="detailLink"
+            @click="onDetailLinkClick"
           >
             {{ detailLinkLabel }}
           </a>
@@ -104,6 +105,7 @@
 <script>
 import scrollTrack from '../../../directives/scroll-track'
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 import Asd20Button from '../../atoms/Asd20Button'
 
 export default {
@@ -181,6 +183,12 @@ export default {
         }
       }
     },
+    onDetailLinkClick(event) {
+      navigateInternalHref(this, event, this.detailLink, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
   },
 }
 </script>

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

@@ -23,6 +23,7 @@
       <a
         v-if="detailLink && !isDetailPage"
         :href="detailLink"
+        @click="onDetailLinkClick"
       >
         {{ detailLinkLabel }}
       </a>
@@ -73,6 +74,7 @@
 <script>
 import scrollTrack from '../../../directives/scroll-track'
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 import Asd20Button from '../../atoms/Asd20Button'
 
 export default {
@@ -105,6 +107,14 @@ export default {
       )
     },
   },
+  methods: {
+    onDetailLinkClick(event) {
+      navigateInternalHref(this, event, this.detailLink, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -120,6 +120,7 @@
                 :href="item.url"
                 :target="getTarget(item.url)"
                 :rel="getRel(item.url)"
+                @click="onItemClick($event, item.url)"
               >
                 <span class="asd20-site-menu__item-label">{{ item.title }}</span>
                 <!-- Keep this icon mounted so current-host checks do not introduce hydration mismatches. -->
@@ -147,6 +148,7 @@
 import Asd20Icon from '../../atoms/Asd20Icon'
 import FocusTrap from '../../utils/FocusTrap'
 import {
+  navigateInternalHref,
   resolveCurrentHostname,
   shouldOpenInNewWindow,
   shouldShowExternalIcon,
@@ -326,6 +328,17 @@ export default {
         ? 'noopener noreferrer'
         : undefined
     },
+    onItemClick(event, url) {
+      const handled = navigateInternalHref(this, event, url, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+
+      if (handled) {
+        this.activeSectionIndex = -1
+        this.dismiss()
+      }
+    },
     shouldShowItemExternalIcon(url) {
       return shouldShowExternalIcon(url, this.currentHostname)
     },

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

@@ -28,6 +28,7 @@
           <a
             v-if="websiteLogoProps"
             :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
+            @click="onLogoClick($event, websiteLogoProps.logoLink)"
           >
             <img
               class="optionalLogo"
@@ -42,6 +43,7 @@
           <a
             v-if="websiteLogoProps2"
             :href="websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''"
+            @click="onLogoClick($event, websiteLogoProps2.logoLink)"
           >
             <img
               class="optionalLogo"
@@ -167,6 +169,7 @@ import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
 import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 // import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
 import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 
 
 // Mixins
@@ -200,6 +203,14 @@ export default {
       )
     },
   },
+  methods: {
+    onLogoClick(event, link) {
+      navigateInternalHref(this, event, link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

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

@@ -233,6 +233,7 @@ export default {
       )
 
       return sortedCategories.map(c => ({
+        id: `tab-${kebabCase(c)}`,
         label: c,
         hash: `#tab-${kebabCase(c)}`,
         active: this.tab === `#tab-${kebabCase(c)}`,
@@ -308,31 +309,38 @@ export default {
   // },
 
   created() {
-    if (
-      typeof window !== 'undefined' &&
-      window.location.hash.indexOf('#tab-') > -1
-    ) {
-      this.tab = window.location.hash
-      console.log('#tab-check=', window.location.hash)
-    } else {
-      if (typeof window !== 'undefined' && this.tabsList.length) {
-        window.location.hash = this.tabsList[0].hash
-        this.tab = window.location.hash
-        console.log('forced tab =', this.tabsList[0].hash)
-      }
-    }
+    if (typeof window === 'undefined' || !this.tabsList.length) return
+
+    const activeHash = this.tabsList.some(t => t.hash === window.location.hash)
+      ? window.location.hash
+      : this.tabsList[0].hash
+
+    this.tab = activeHash
   },
   mounted() {
-    window.focus(this.tab)
+    this.syncBrowserHash(this.tab)
   },
   methods: {
     onTabClick(tab) {
-      window.location.hash = tab.hash
       this.tab = tab.hash
+      this.syncBrowserHash(tab.hash)
     },
     isResetTab(label) {
       return /\breset\b/i.test(label)
     },
+    syncBrowserHash(hash) {
+      if (typeof window === 'undefined' || !hash) return
+
+      const currentUrl = new URL(window.location.href)
+      if (currentUrl.hash === hash) return
+
+      currentUrl.hash = hash
+      window.history.replaceState(
+        window.history.state,
+        '',
+        `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`
+      )
+    },
   },
 }
 </script>

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

@@ -41,6 +41,7 @@
           <a
             v-if="websiteLogoProps && showLogo"
             :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
+            @click="onLogoClick($event, websiteLogoProps.logoLink)"
           >
             <img
               class="optionalLogo"
@@ -60,6 +61,7 @@
             :href="
               websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
             "
+            @click="onLogoClick($event, websiteLogoProps2.logoLink)"
           >
             <img
               class="optionalLogo"
@@ -192,6 +194,7 @@ import Asd20OrganizationPicker from '../../../components/organisms/Asd20Organiza
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
 import Asd20AiSearch from '../../organisms/Asd20AiSearch'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 
 // Helpers
 import _get from 'lodash/get'
@@ -304,6 +307,12 @@ export default {
     handleResize() {
       this.showLogo = window.innerWidth >= 1350
     },
+    onLogoClick(event, link) {
+      navigateInternalHref(this, event, link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
   },
 }
 </script>

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

@@ -41,6 +41,7 @@
           <a
             v-if="websiteLogoProps"
             :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
+            @click="onLogoClick($event, websiteLogoProps.logoLink)"
           >
             <img
               class="optionalLogo"
@@ -57,6 +58,7 @@
             :href="
               websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
             "
+            @click="onLogoClick($event, websiteLogoProps2.logoLink)"
           >
             <img
               class="optionalLogo"
@@ -194,6 +196,7 @@ import Asd20OrganizationPicker from '../../../components/organisms/Asd20Organiza
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
 import Asd20AiSearch from '../../organisms/Asd20AiSearch'
+import { navigateInternalHref } from '../../../helpers/linkPolicy'
 
 // Helpers
 
@@ -263,6 +266,14 @@ export default {
       this.$emit('events-in-view')
     }
   },
+  methods: {
+    onLogoClick(event, link) {
+      navigateInternalHref(this, event, link, {
+        target: event.currentTarget?.getAttribute?.('target'),
+        download: event.currentTarget?.hasAttribute?.('download'),
+      })
+    },
+  },
 }
 </script>
 

package/src/helpers/linkPolicy.js

@@ -1,5 +1,7 @@
 const ASD20_ROOT_DOMAIN = 'asd20.org'
 const DEFAULT_BASE_URL = `https://${ASD20_ROOT_DOMAIN}`
+const NON_ROUTER_PROTOCOL_PATTERN = /^(mailto:|tel:|javascript:|data:|blob:)/i
+const FILE_LIKE_PATH_PATTERN = /\/[^/?#]+\.[a-z0-9]{1,8}$/i
 
 export function normalizeHostname(hostname, { treatWwwAsLocal = true } = {}) {
   if (!hostname) return ''
@@ -44,6 +46,59 @@ export function parseAbsoluteHttpUrl(href) {
   }
 }
 
+export function resolveCurrentUrl(_vm, options = {}) {
+  if (typeof window !== 'undefined' && window.location) {
+    return window.location.href
+  }
+
+  if (options.currentUrl) return options.currentUrl
+  if (options.currentOrigin) return options.currentOrigin
+
+  return DEFAULT_BASE_URL
+}
+
+export function resolveCurrentOrigin(_vm, options = {}) {
+  if (typeof window !== 'undefined' && window.location) {
+    return window.location.origin
+  }
+
+  try {
+    return new URL(resolveCurrentUrl(_vm, options), DEFAULT_BASE_URL).origin
+  } catch (error) {
+    return DEFAULT_BASE_URL
+  }
+}
+
+export function isHashOnlyHref(href) {
+  if (!href || typeof href !== 'string') return false
+  return href.trim().startsWith('#')
+}
+
+export function parseNavigableUrl(href, currentUrl = DEFAULT_BASE_URL) {
+  if (!href || typeof href !== 'string') return null
+
+  const trimmed = href.trim()
+  if (
+    !trimmed ||
+    isHashOnlyHref(trimmed) ||
+    NON_ROUTER_PROTOCOL_PATTERN.test(trimmed)
+  ) {
+    return null
+  }
+
+  try {
+    return new URL(trimmed, currentUrl)
+  } catch (error) {
+    return null
+  }
+}
+
+export function isFileLikeHref(href, currentUrl = DEFAULT_BASE_URL) {
+  const url = parseNavigableUrl(href, currentUrl)
+  if (!url) return false
+  return FILE_LIKE_PATH_PATTERN.test(url.pathname)
+}
+
 export function shouldOpenInNewWindow(href, options) {
   const url = parseAbsoluteHttpUrl(href)
   if (!url) return false
@@ -73,3 +128,73 @@ export function shouldShowExternalIcon(href, currentHostname, options) {
 
   return targetHostname !== normalizedCurrentHostname
 }
+
+export function shouldHandleClientRoutingEvent(event) {
+  if (!event) return true
+  if (event.defaultPrevented) return false
+  if (typeof event.button === 'number' && event.button !== 0) return false
+
+  return !event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey
+}
+
+export function shouldUseClientRouter(href, options = {}) {
+  const currentUrl = options.currentUrl || resolveCurrentUrl(null, options)
+  const {
+    router,
+    target,
+    download = false,
+    currentOrigin = options.currentOrigin || new URL(currentUrl).origin,
+  } = options
+
+  if (!router || download) return false
+
+  if (href && typeof href === 'object') {
+    return !target || target.toLowerCase() === '_self'
+  }
+
+  if (target && target.toLowerCase() !== '_self') return false
+
+  const url = parseNavigableUrl(href, currentUrl)
+  if (!url) return false
+  if (url.origin !== currentOrigin) return false
+  if (isFileLikeHref(href, currentUrl)) return false
+
+  return true
+}
+
+export function buildRouterLocationFromHref(href, currentUrl = DEFAULT_BASE_URL) {
+  if (href && typeof href === 'object') return href
+
+  const url = parseNavigableUrl(href, currentUrl)
+  if (!url) return null
+
+  return `${url.pathname}${url.search}${url.hash}` || '/'
+}
+
+export function navigateInternalHref(vm, event, href, options = {}) {
+  const router = options.router || vm?.$router
+  const currentUrl = options.currentUrl || resolveCurrentUrl(vm, options)
+  const target = options.target
+  const download = options.download || false
+
+  if (
+    !shouldUseClientRouter(href, {
+      ...options,
+      router,
+      currentUrl,
+      target,
+      download,
+    })
+  ) {
+    return false
+  }
+
+  if (!shouldHandleClientRoutingEvent(event)) return false
+
+  const location = buildRouterLocationFromHref(href, currentUrl)
+  if (!location) return false
+
+  event.preventDefault()
+  router.push(location)
+  return true
+}