@asd20/ui-next 1.0.10 → 2.0.0

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

@@ -126,7 +126,6 @@
 
 <script>
 import Asd20Messaging from '../../atoms/Asd20Messaging'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20SecondaryHeader',
@@ -220,9 +219,9 @@ export default {
     // Initial set
     this.scheduleParallaxUpdate()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownParallax()
-  }),
+  },
   methods: {
     teardownParallax() {
       this.disableParallax()

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

@@ -86,7 +86,6 @@ import Asd20Navbar from '../../../components/organisms/Asd20Navbar'
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
 // import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20SiteNavigation',
@@ -136,9 +135,9 @@ export default {
     this.isLoaded = true
     window.addEventListener('resize', this.handleResize)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
-  }),
+  },
   methods: {
     onKeyboardToggleEvent(event) {
       this.keyboardToggleEvent = event

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

@@ -558,7 +558,6 @@ import queryAiSite from '../../../helpers/queryAiSite'
 
 // Mixins
 import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 const DISTRICT_ORG_ID = '26eaf390-d8ab-11e9-a3a8-5de5bba4f125'
 const SEARCH_ROUTE_QUERY_KEYS = {
@@ -677,6 +676,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' }),
@@ -1188,9 +1192,9 @@ export default {
     }
   },
 
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownSearchLifecycle()
-  }),
+  },
 
   methods: {
     teardownSearchLifecycle() {
@@ -1218,7 +1222,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 +1623,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 +2412,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 +2441,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 +2502,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 +2578,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 +2635,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 +2832,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/organisms/Asd20SwiperFeed/index.vue

@@ -29,7 +29,7 @@
             <asd20-card
               v-bind="card"
               :card-type="cardType"
-              seperate-image
+              separate-image
               @click="$emit('select', card)"
               @keydown.tab.exact="nextCard"
               @keydown.tab.shift="prevCard"

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

@@ -33,7 +33,6 @@
 
 <script>
 import Asd20Tab from '../../../components/molecules/Asd20Tab'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 export default {
   name: 'Asd20TabBar',
 
@@ -69,11 +68,11 @@ export default {
       window.addEventListener('resize', this.onResize, { passive: true })
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof window !== 'undefined') {
       window.removeEventListener('resize', this.onResize)
     }
-  }),
+  },
 
   methods: {
     onScroll() {

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

@@ -151,7 +151,6 @@
 
 <script>
 import scrollTrack from '../../../directives/scroll-track'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 // import Asd20Button from '../../atoms/Asd20Button'
 
 export default {
@@ -202,9 +201,9 @@ export default {
     this.checkIsMobile()
     window.addEventListener('resize', this.checkIsMobile)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownResizeListener()
-  }),
+  },
   methods: {
     teardownResizeListener() {
       window.removeEventListener('resize', this.checkIsMobile)

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

@@ -48,9 +48,9 @@
       <slot name="toolbar-start"></slot>
       <asd20-search-field
         v-if="searchable"
-        :value="keywords"
+        :model-value="keywords"
         :placeholder="searchPlaceholder"
-        @input="$emit('update:keywords', $event)"
+        @update:modelValue="$emit('update:keywords', $event)"
       />
       <asd20-button
         v-if="
@@ -80,9 +80,9 @@
       <slot name="tabs" />
     </asd20-tab-bar>
 
-    <mq-layout
+    <div
+      v-if="isDesktopMq"
       class="asd20-app-template__desktop-layout"
-      mq="lg+"
     >
       <div
         v-if="$slots.sidebar"
@@ -117,10 +117,10 @@
         </client-only>
         <slot />
       </div>
-    </mq-layout>
+    </div>
 
-    <mq-layout
-      :mq="['sm', 'md']"
+    <div
+      v-if="isMobileMq"
       class="asd20-app-template__mobile-layout"
     >
       <asd20-modal
@@ -146,7 +146,7 @@
       <div class="asd20-app-template__main">
         <slot />
       </div>
-    </mq-layout>
+    </div>
     <client-only>
       <asd20-notification-group
         :notifications="activeNotificationsByType.floating"
@@ -160,6 +160,7 @@
 
 <script>
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
+import { matchesMqQuery } from '../../../utils/responsive-mq'
 import Asd20AppHeader from '../../organisms/Asd20AppHeader'
 import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Icon from '../../atoms/Asd20Icon'
@@ -168,7 +169,6 @@ import Asd20SearchField from '../../molecules/Asd20SearchField'
 import Asd20TabBar from '../../organisms/Asd20TabBar'
 import Asd20Badge from '../../atoms/Asd20Badge'
 import Asd20NotificationGroup from '../../organisms/Asd20NotificationGroup'
-import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20AppTemplate',
@@ -181,7 +181,6 @@ export default {
     Asd20TabBar,
     Asd20Badge,
     Asd20NotificationGroup,
-    MqLayout,
   },
   mixins: [responsiveBreakpointMixin],
 
@@ -212,6 +211,14 @@ export default {
     sidebarOpen: false,
     zoomed: false,
   }),
+  computed: {
+    isDesktopMq() {
+      return matchesMqQuery(this.mq, 'lg+')
+    },
+    isMobileMq() {
+      return matchesMqQuery(this.mq, ['sm', 'md'])
+    },
+  },
   mounted() {
     this.zoomed = window.innerHeight <= 500
     window.addEventListener('resize', this.handleResize)

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

@@ -85,16 +85,16 @@
         </h2>
         <!-- <div class="search-header">
           <asd20-search-field
-            :value="keywords"
-            @input="$emit('update:keywords', $event)"
+            :model-value="keywords"
+            @update:modelValue="$emit('update:keywords', $event)"
             medium
           />
           <asd20-multiselect-input
             label="Categories"
             :taggable="false"
-            :value="selectedCategories"
+            :model-value="selectedCategories"
             :items="categoryOptions"
-            @input="$emit('update:selected-categories', $event)"
+            @update:modelValue="$emit('update:selected-categories', $event)"
             :hideLabel="true"
             placeholder="Filter by Category"
           />

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

@@ -85,18 +85,18 @@
         </h2>
         <div class="search-header">
           <asd20-search-field
-            :value="keywords"
+            :model-value="keywords"
             medium
-            @input="$emit('update:keywords', $event)"
+            @update:modelValue="$emit('update:keywords', $event)"
           />
           <asd20-multiselect-input
             label="Categories"
             :taggable="false"
-            :value="selectedCategories"
+            :model-value="selectedCategories"
             :items="categoryOptions"
             :hide-label="true"
             placeholder="Filter by Category"
-            @input="$emit('update:selected-categories', $event)"
+            @update:modelValue="$emit('update:selected-categories', $event)"
           />
         </div>
 
@@ -159,7 +159,7 @@
               :key="index"
               v-bind="card"
               zoom
-              seperate-image
+              separate-image
             ></asd20-card>
           </div>
           <div

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

@@ -96,19 +96,19 @@
           </h2>
           <div class="search-header">
             <asd20-search-field
-              :value="keywords"
+              :model-value="keywords"
               medium
-              @input="$emit('update:keywords', $event)"
+              @update:modelValue="$emit('update:keywords', $event)"
             />
             <asd20-multiselect-input
               label="Categories"
               :taggable="false"
-              :value="selectedCategories"
+              :model-value="selectedCategories"
               :items="categoryOptions"
               :hide-label="true"
               placeholder="Filter by Category"
               autocomplete="off"
-              @input="onCategorySelect"
+              @update:modelValue="onCategorySelect"
             />
           </div>
           <div v-if="cards.length < 1">

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

@@ -103,16 +103,16 @@
         </div>
         <div class="search-header">
           <asd20-search-field
-            :value="keywords"
+            :model-value="keywords"
             medium
-            @input="$emit('update:keywords', $event)"
+            @update:modelValue="$emit('update:keywords', $event)"
           />
           <!-- <asd20-multiselect-input
             label="Categories"
             :taggable="false"
-            :value="selectedCategories"
+            :model-value="selectedCategories"
             :items="categoryOptions"
-            @input="$emit('update:selected-categories', $event)"
+            @update:modelValue="$emit('update:selected-categories', $event)"
           /> -->
         </div>
 

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/Asd20SalaryCalculatorTemplate/index.vue

@@ -95,7 +95,6 @@
         class="years-selector"
         label="Years of Experience"
         icon="calendar"
-        :value="years"
         :items="yearsOfExperience"
       />
       <p class="selectionHeading">
@@ -106,7 +105,6 @@
         class="education-selector"
         label="Education Level"
         icon="school"
-        :value="educationLevel"
         :items="educationLevelOptions"
       />
       <asd20-button

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: () => ({