@asd20/ui-next 1.0.10 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [1.0.11](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.10...ui-next-v1.0.11) (2026-03-26)
+
 ## [1.0.10](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.9...ui-next-v1.0.10) (2026-03-26)
 
 ## [1.0.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.8...ui-next-v1.0.9) (2026-03-23)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": false,
   "description": "ASD20 UI component library migration workspace.",
   "license": "MIT",

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

@@ -23,18 +23,6 @@ export default {
     zoomed: { type: Boolean, default: false },
     emptyNav: { type: Boolean, default: false },
   },
-
-  computed: {
-    hidden() {
-      return (this.$store && this.$store.state && this.$store.state.scrolling) || false
-    },
-    classes() {
-      return {
-        'action-menu__fab--hidden': this.hidden,
-        'action-menu__fab--open': this.open,
-      }
-    },
-  },
 }
 </script>
 

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

@@ -79,6 +79,15 @@
           :active="expanded"
           :inline="true"
           :show-contacts="false"
+          :pages="pages"
+          :files="files"
+          :groups="groups"
+          :include-district-results="includeDistrictResults"
+          :search-language-code="searchLanguageCode"
+          :query-pages-handler="queryPagesHandler"
+          :query-files-handler="queryFilesHandler"
+          :query-groups-handler="queryGroupsHandler"
+          :query-ai-site-handler="queryAiSiteHandler"
           :organization="organization"
           :organization-options="organizationOptions"
           :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
@@ -110,6 +119,15 @@ export default {
     Asd20Button,
   },
   props: {
+    pages: { type: Array, default: () => [] },
+    files: { type: Array, default: () => [] },
+    groups: { type: Array, default: () => [] },
+    includeDistrictResults: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
     organization: { type: Object, default: () => ({}) },
     organizationOptions: { type: Array, default: () => [] },
     aiSearchFeedbackFormUrl: { type: String, default: '' },

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

@@ -199,28 +199,6 @@ export default {
     websiteLogoProps2: { type: Object, default: null },
   },
   computed: {
-    collapsed() {
-      if (typeof window === 'undefined') return false
-      const storeState = this.$store && this.$store.state
-      if (!storeState) return false
-      return (
-        storeState.scrollPosition > window.innerHeight &&
-        storeState.scrollVerticalDirection !== -1
-      )
-    },
-    condensed() {
-      if (typeof window === 'undefined') return false
-      const storeState = this.$store && this.$store.state
-      if (!storeState) return false
-      return storeState.scrollPosition > window.innerHeight / 4
-    },
-    classes() {
-      return {
-        'page-header--fullscreen': this.fullscreen,
-        'page-header--collapsed': this.collapsed,
-        'page-header--condensed': this.condensed,
-      }
-    },
     administrator() {
       if (
         !this.organization ||

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

@@ -677,6 +677,11 @@ export default {
     inline: { type: Boolean, default: false },
     showTabBar: { type: Boolean, default: true },
     showContacts: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
     organization: {
       type: Object,
       default: () => ({ title: 'Academy District 20' }),
@@ -1218,7 +1223,61 @@ export default {
         : null
     },
 
+    getSearchLanguageCode() {
+      if (
+        typeof this.searchLanguageCode === 'string' &&
+        this.searchLanguageCode.trim()
+      ) {
+        return this.searchLanguageCode.trim()
+      }
+
+      const searchStore = this.getSearchStore()
+      const storeLanguageCode =
+        searchStore &&
+        searchStore.state &&
+        searchStore.state.search &&
+        searchStore.state.search.languageCode
+
+      return typeof storeLanguageCode === 'string' && storeLanguageCode.trim()
+        ? storeLanguageCode.trim()
+        : 'en'
+    },
+
+    setSearchResults({ pages, files, groups } = {}) {
+      if (pages !== undefined) this.resolvedPages = pages
+      if (files !== undefined) this.resolvedFiles = files
+      if (groups !== undefined) this.resolvedGroups = groups
+    },
+
+    async querySearchCollectionWithFallback({
+      handler,
+      storeAction,
+      payload,
+      target,
+    }) {
+      if (typeof handler === 'function') {
+        const result = await handler(payload)
+        if (Array.isArray(result)) {
+          this[target] = result
+          return result
+        }
+        return Array.isArray(this[target]) ? this[target] : []
+      }
+
+      const searchStore = this.getSearchStore()
+      if (searchStore) {
+        await searchStore.dispatch(storeAction, payload)
+        return Array.isArray(this[target]) ? this[target] : []
+      }
+
+      return Array.isArray(this[target]) ? this[target] : []
+    },
+
     async queryAiSiteWithFallback(payload) {
+      if (typeof this.queryAiSiteHandler === 'function') {
+        return this.queryAiSiteHandler(payload)
+      }
+
       const searchStore = this.getSearchStore()
       if (searchStore) {
         return searchStore.dispatch('search/queryAiSite', payload)
@@ -1565,15 +1624,7 @@ export default {
       const pages = Array.isArray(snapshot.pages) ? snapshot.pages : []
       const files = Array.isArray(snapshot.files) ? snapshot.files : []
       const groups = Array.isArray(snapshot.groups) ? snapshot.groups : []
-
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        await Promise.all([
-          searchStore.dispatch('search/setPages', pages),
-          searchStore.dispatch('search/setFiles', files),
-          searchStore.dispatch('search/setGroups', groups),
-        ])
-      }
+      this.setSearchResults({ pages, files, groups })
 
       if (!skipTabUpdate) {
         const preferredTab = SEARCH_ROUTE_TABS.has(targetState.tab)
@@ -2362,15 +2413,7 @@ export default {
         this.aiTranscript = []
         this.anchoredUserTurnId = null
       }
-
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        await Promise.all([
-          searchStore.dispatch('search/setPages', []),
-          searchStore.dispatch('search/setFiles', []),
-          searchStore.dispatch('search/setGroups', []),
-        ])
-      }
+      this.setSearchResults({ pages: [], files: [], groups: [] })
     },
 
     async clearInput() {
@@ -2399,55 +2442,58 @@ export default {
     },
 
     async searchPages(options = {}) {
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        const keepAnswersTab = options.keepAnswersTab || this.keywordsFromAi
-        const searchInput = {
-          keywords: this.keywords,
-          question: this.searchQuestion || this.inputText,
-        }
-
-        this.searchingPages = true
-        await searchStore.dispatch('search/queryPages', searchInput)
-        this.searchingPages = false
-
-        if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
-          this.currentTab = 'Pages'
-          this.scrollResultsToTop()
-        }
+      const keepAnswersTab = options.keepAnswersTab || this.keywordsFromAi
+      const searchInput = {
+        keywords: this.keywords,
+        question: this.searchQuestion || this.inputText,
+      }
+
+      this.searchingPages = true
+      await this.querySearchCollectionWithFallback({
+        handler: this.queryPagesHandler,
+        storeAction: 'search/queryPages',
+        payload: searchInput,
+        target: 'resolvedPages',
+      })
+      this.searchingPages = false
 
-        this.keywordsFromAi = false
+      if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
+        this.currentTab = 'Pages'
+        this.scrollResultsToTop()
+      }
 
-        if (!keepAnswersTab) {
-          this.aiAnswer = null
-          this.aiSources = []
-          this.aiKeywordsDisplayAnswer = ''
-          this.aiKeywordsDisplayPages = ''
-        }
+      this.keywordsFromAi = false
 
-        this.persistSearchCacheSnapshot()
+      if (!keepAnswersTab) {
+        this.aiAnswer = null
+        this.aiSources = []
+        this.aiKeywordsDisplayAnswer = ''
+        this.aiKeywordsDisplayPages = ''
       }
+
+      this.persistSearchCacheSnapshot()
     },
 
     async searchFiles(options = {}) {
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        const searchInput = {
-          keywords: this.keywords,
-          question: this.searchQuestion || this.inputText,
-        }
-        const owners = Array.isArray(options.owners) ? options.owners : []
-        if (owners.length > 0) searchInput.owners = owners
-
-        this.searchingFiles = true
-        await searchStore.dispatch('search/queryFiles', searchInput)
-        this.searchingFiles = false
-        this.persistSearchCacheSnapshot()
-      }
+      const searchInput = {
+        keywords: this.keywords,
+        question: this.searchQuestion || this.inputText,
+      }
+      const owners = Array.isArray(options.owners) ? options.owners : []
+      if (owners.length > 0) searchInput.owners = owners
+
+      this.searchingFiles = true
+      await this.querySearchCollectionWithFallback({
+        handler: this.queryFilesHandler,
+        storeAction: 'search/queryFiles',
+        payload: searchInput,
+        target: 'resolvedFiles',
+      })
+      this.searchingFiles = false
+      this.persistSearchCacheSnapshot()
     },
 
     async searchFilesWithGroupOwners() {
-      if (!this.getSearchStore()) return
       const groupsPromise = this.searchGroups()
       await this.searchFiles()
       const ownerFilters = await groupsPromise
@@ -2457,28 +2503,28 @@ export default {
     },
 
     async searchGroups() {
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        const searchInput = {
-          keywords: this.keywords,
-          question: this.searchQuestion || this.inputText,
-        }
-        await searchStore.dispatch('search/queryGroups', searchInput)
-        this.persistSearchCacheSnapshot()
-        return Array.from(
-          new Set(
-            (this.resolvedGroups || [])
-              .map(group => (group && group.title ? group.title.trim() : ''))
-              .filter(Boolean)
-          )
+      const searchInput = {
+        keywords: this.keywords,
+        question: this.searchQuestion || this.inputText,
+      }
+      await this.querySearchCollectionWithFallback({
+        handler: this.queryGroupsHandler,
+        storeAction: 'search/queryGroups',
+        payload: searchInput,
+        target: 'resolvedGroups',
+      })
+      this.persistSearchCacheSnapshot()
+      return Array.from(
+        new Set(
+          (this.resolvedGroups || [])
+            .map(group => (group && group.title ? group.title.trim() : ''))
+            .filter(Boolean)
         )
-      }
-      return []
+      )
     },
 
     async onSubmitInput() {
       if (this.searchingAi) return
-      const searchStore = this.getSearchStore()
       const text = (this.inputText || '').trim()
       if (!text) {
         this.suppressAutoRestore = true
@@ -2533,7 +2579,7 @@ export default {
             this.organization && this.organization.title
               ? this.organization.title
               : null,
-          languageCode: searchStore ? searchStore.state.search.languageCode : 'en',
+          languageCode: this.getSearchLanguageCode(),
           isFollowup: false,
           functionsEndpoint:
             this.$config && this.$config.functionsEndpoint
@@ -2590,7 +2636,6 @@ export default {
         typeof question === 'string' ? question.trim() : ''
       if (!normalizedQuestion) return
       if (this.searchingAi) return
-      const searchStore = this.getSearchStore()
       if (
         this.activeAiQuestionKey &&
         this.activeAiQuestionKey === normalizedQuestion
@@ -2788,7 +2833,7 @@ export default {
             this.organization && this.organization.title
               ? this.organization.title
               : null,
-          languageCode: searchStore ? searchStore.state.search.languageCode : 'en',
+          languageCode: this.getSearchLanguageCode(),
           isFollowup: isFollowUpQuestion,
           functionsEndpoint:
             this.$config && this.$config.functionsEndpoint

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

@@ -55,8 +55,18 @@
             <client-only>
               <Asd20AiSearch
                 class="ai-search"
+                :pages="searchPages"
+                :files="searchFiles"
+                :groups="searchGroups"
+                :include-district-results="includeDistrictResults"
+                :search-language-code="searchLanguageCode"
+                :query-pages-handler="queryPagesHandler"
+                :query-files-handler="queryFilesHandler"
+                :query-groups-handler="queryGroupsHandler"
+                :query-ai-site-handler="queryAiSiteHandler"
                 :organization="organization"
                 :organization-options="organizationOptions"
+                :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
               />
             </client-only>
 
@@ -206,6 +216,16 @@ export default {
   mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
+    searchPages: { type: Array, default: () => [] },
+    searchFiles: { type: Array, default: () => [] },
+    searchGroups: { type: Array, default: () => [] },
+    includeDistrictResults: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
   data: () => ({
     factoids: [

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

@@ -97,8 +97,18 @@
             <client-only>
               <Asd20AiSearch
                 class="ai-search"
+                :pages="searchPages"
+                :files="searchFiles"
+                :groups="searchGroups"
+                :include-district-results="includeDistrictResults"
+                :search-language-code="searchLanguageCode"
+                :query-pages-handler="queryPagesHandler"
+                :query-files-handler="queryFilesHandler"
+                :query-groups-handler="queryGroupsHandler"
+                :query-ai-site-handler="queryAiSiteHandler"
                 :organization="organization"
                 :organization-options="organizationOptions"
+                :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
               />
             </client-only>
             <client-only>
@@ -218,6 +228,16 @@ export default {
   mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
+    searchPages: { type: Array, default: () => [] },
+    searchFiles: { type: Array, default: () => [] },
+    searchGroups: { type: Array, default: () => [] },
+    includeDistrictResults: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
 
   data: () => ({

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

@@ -96,8 +96,18 @@
             <client-only>
               <Asd20AiSearch
                 class="ai-search"
+                :pages="searchPages"
+                :files="searchFiles"
+                :groups="searchGroups"
+                :include-district-results="includeDistrictResults"
+                :search-language-code="searchLanguageCode"
+                :query-pages-handler="queryPagesHandler"
+                :query-files-handler="queryFilesHandler"
+                :query-groups-handler="queryGroupsHandler"
+                :query-ai-site-handler="queryAiSiteHandler"
                 :organization="organization"
                 :organization-options="organizationOptions"
+                :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
               />
             </client-only>
 
@@ -221,6 +231,16 @@ export default {
   mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
+    searchPages: { type: Array, default: () => [] },
+    searchFiles: { type: Array, default: () => [] },
+    searchGroups: { type: Array, default: () => [] },
+    includeDistrictResults: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
   computed: {
     blockEvent() {

package/src/mixins/globalPropMixinFactory.js

@@ -1,37 +1,80 @@
 // pass a variable, the prop options as it would be defined in vue, and optionally the store module, which will become a module named for convenience in the store.
 
+function hyphenate(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function resolvePropDefault(propOptions = {}) {
+  const defaultValue = propOptions.default
+  if (typeof defaultValue === 'function' && propOptions.type !== Function) {
+    return defaultValue()
+  }
+  return defaultValue
+}
+
+function hasIncomingProp(vm, propName) {
+  const rawProps = vm && vm.$ && vm.$.vnode && vm.$.vnode.props
+  if (!rawProps) return false
+
+  return (
+    Object.prototype.hasOwnProperty.call(rawProps, propName) ||
+    Object.prototype.hasOwnProperty.call(rawProps, hyphenate(propName))
+  )
+}
+
 export default function(variableName, propOptions, storeModuleName) {
   const pascalCaseName = variableName[0].toUpperCase() + variableName.slice(1)
   const resolvedName = `resolved${pascalCaseName}`
+  const localStateName = `local${pascalCaseName}`
   let mixin = { props: {}, computed: {}, methods: {} }
   mixin.props[variableName] = propOptions
+  mixin.data = function() {
+    return {
+      [localStateName]: resolvePropDefault(propOptions),
+    }
+  }
   // Returns a computed alias that resolves from the store when available,
   // otherwise falling back to the local prop value.
   mixin.computed[resolvedName] = {
     get() {
+      if (hasIncomingProp(this, variableName)) {
+        return this[variableName]
+      }
+
       try {
-        return storeModuleName
+        const storeValue = storeModuleName
           ? this.$store['state'][storeModuleName][variableName]
           : this.$store.state[variableName]
+        return storeValue !== undefined ? storeValue : this[localStateName]
       } catch {
-        return this[variableName]
+        return this[localStateName]
       }
     },
     // emit an update event and value and call method to set value in store.
     set(value) {
       this.$emit(`update:${variableName}`, value)
+
+      if (hasIncomingProp(this, variableName)) {
+        return
+      }
+
       try {
-        this[`set${pascalCaseName}`](value)
+        if (this[`set${pascalCaseName}`](value)) return
       } catch {
         // throw away
       }
+
+      this[localStateName] = value
     },
   }
   mixin.methods[`set${pascalCaseName}`] = function(value) {
+    if (!this.$store || typeof this.$store.dispatch !== 'function') return false
+
     this.$store.dispatch(
       `${storeModuleName ? storeModuleName + '/' : ''}set${pascalCaseName}`,
       value
     )
+    return true
   }
   return mixin
 }

package/src/mixins/hasLoaderMixin.js

@@ -1,7 +1,21 @@
+function hasIncomingProp(vm, propName) {
+  const rawProps = vm && vm.$ && vm.$.vnode && vm.$.vnode.props
+  if (!rawProps) return false
+
+  return (
+    Object.prototype.hasOwnProperty.call(rawProps, propName) ||
+    Object.prototype.hasOwnProperty.call(rawProps, 'is-loading')
+  )
+}
+
 export default function(variableName, storeModuleName) {
   let mixin = { props: {}, computed: {} }
   mixin.props.isLoading = { type: Boolean, default: false }
   mixin.computed[`_${variableName}`] = function() {
+    if (hasIncomingProp(this, 'isLoading')) {
+      return this.isLoading
+    }
+
     if (
       storeModuleName &&
       this.$store &&