@asd20/ui-next 2.0.24 → 2.0.26

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.0.26](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.25...ui-next-v2.0.26) (2026-04-03)
+
+## [2.0.25](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.24...ui-next-v2.0.25) (2026-04-03)
+
+
+### Bug Fixes
+
+* allow article list and digest pages to process more than one category selection ([5ebf88a](https://github.com/academydistrict20/asd20-ui-next/commit/5ebf88a9d51d44de3976df3951ccf925cec1f269))
+
 ## [2.0.24](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.23...ui-next-v2.0.24) (2026-04-03)
 
 

package/package.json

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

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

@@ -291,6 +291,7 @@ $input-reversed-text-color: var(--color__accent-t100);
   & :deep(.multiselect__input:focus),
   & :deep(.multiselect__single:focus) {
     border-color: var(--color__accent);
+    border-radius: 0.2rem;
     @include asd20-focus;
   }
   & :deep(.multiselect__tags) {
@@ -308,7 +309,8 @@ $input-reversed-text-color: var(--color__accent-t100);
     color: var(--website-page__background-color);
     font-weight: normal;
     background: var(--background-color);
-    border-radius: 0;
+    border-radius: 0.25rem;
+    padding-left: 0.25rem;
   }
   & :deep(.multiselect__tag-icon) {
     font-weight: bold;
@@ -368,6 +370,15 @@ $input-reversed-text-color: var(--color__accent-t100);
     background: var(--color__accent);
     color: var(--website-page__background-color);
   }
+  & :deep(.multiselect__option--highlight:after),
+  & :deep(.multiselect__option--selected:after),
+  & :deep(.multiselect__option--selected.multiselect__option--highlight:after) {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1.2;
+  }
   & :deep(.multiselect__option),
   & :deep(.option__title) {
     color: var(--website-page__title-color);

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

@@ -90,7 +90,7 @@
             :items="categoryOptions"
             :hide-label="true"
             placeholder="Filter by Category"
-            @update:modelValue="$emit('update:selected-categories', $event)"
+            @update:modelValue="onCategorySelect"
           />
         </div>
 
@@ -282,6 +282,7 @@ import Intersect from '../../../components/utils/Intersect'
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import categoryFilterQuerySyncMixin from '../../../mixins/categoryFilterQuerySyncMixin'
 
 // Helpers
 import mapMessageToCard from '../../../helpers/mapMessageToCard'
@@ -304,7 +305,7 @@ export default {
     Intersect,
     Asd20MediaSection,
   },
-  mixins: [pageTemplateMixin],
+  mixins: [pageTemplateMixin, categoryFilterQuerySyncMixin],
 
   props: {
     keywords: { type: String, default: '' },

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

@@ -299,6 +299,7 @@ import Intersect from '../../../components/utils/Intersect'
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+import categoryFilterQuerySyncMixin from '../../../mixins/categoryFilterQuerySyncMixin'
 
 // Helpers
 import mapMessageToCard from '../../../helpers/mapMessageToCard'
@@ -322,7 +323,7 @@ export default {
     Intersect,
     Asd20MediaSection,
   },
-  mixins: [pageTemplateMixin],
+  mixins: [pageTemplateMixin, categoryFilterQuerySyncMixin],
   props: {
     keywords: { type: String, default: '' },
     selectedCategories: { type: Array, default: () => [] },
@@ -332,7 +333,6 @@ export default {
       numberToShow: 25,
       counter: 1,
       counter2: 25,
-      currentCategory: null,
     }
   },
   computed: {
@@ -367,57 +367,8 @@ export default {
         this.reset() // Reset page data when categories change
       }
     },
-    categoryOptions(newOptions) {
-      // Ensure $route and $route.query are defined before accessing query.category
-      if (this.$route && this.$route.query) {
-        const categoryFromQuery = this.$route.query.category
-        if (categoryFromQuery && newOptions.length) {
-          this.setCategoryFromUrl(categoryFromQuery) // Set category from URL when options are ready
-        }
-      }
-    },
   },
   methods: {
-    setCategoryFromUrl(category) {
-      // Avoid re-processing if the category is already set
-      if (this.currentCategory !== category) {
-        const matchingCategory = this.categoryOptions.find(
-          opt => opt === category
-        )
-        if (matchingCategory) {
-          this.currentCategory = category // Update the current category
-          this.$emit('update:selected-categories', [
-            { name: matchingCategory, id: matchingCategory },
-          ])
-        }
-      }
-    },
-    onCategorySelect(selected) {
-      // Ensure $router and $route are defined before using them
-      if (this.$router && this.$route) {
-        if (selected.length > 0) {
-          const selectedCategory = selected[0].id
-
-          // Only update if the selection has changed
-          if (this.currentCategory !== selectedCategory) {
-            this.currentCategory = selectedCategory // Track the selected category
-            this.$emit('update:selected-categories', selected) // Update selected categories
-            this.$router.replace({
-              query: { ...this.$route.query, category: selectedCategory },
-            })
-          }
-        } else {
-          // Handle clearing the selection
-          this.currentCategory = null // Reset current category
-          this.$emit('update:selected-categories', []) // Clear selected categories
-
-          // Remove the 'category' parameter entirely from the URL
-          const { ...remainingQuery } = this.$route.query || {} // Ensure $route.query is defined
-          delete remainingQuery.category
-          this.$router.replace({ query: remainingQuery }) // Update the URL without the category
-        }
-      }
-    },
     nextSet() {
       if (
         Math.ceil(this.counter2 / this.numberToShow) <

package/src/components/utils/Multiselect.vue

@@ -33,6 +33,7 @@
       </div>
 
       <input
+        v-show="showSearchInput"
         :id="id"
         ref="searchInput"
         :value="search"
@@ -203,6 +204,9 @@ export default {
     showPlaceholder() {
       return !this.search && !this.selectedOptions.length && !this.isOpen
     },
+    showSearchInput() {
+      return this.isOpen || !!this.search
+    },
     placeholderText() {
       return this.placeholder || 'Select options'
     },
@@ -479,7 +483,7 @@ export default {
   width: auto;
   min-height: 1.25rem;
   margin: 0;
-  padding: 0;
+  padding: 0 0 0 0.25rem;
   border: 0;
   outline: 0;
   background: transparent;

package/src/mixins/categoryFilterQuerySyncMixin.js

@@ -0,0 +1,170 @@
+function asArray(value) {
+  if (Array.isArray(value)) return value
+  if (value === null || value === undefined || value === '') return []
+  return [value]
+}
+
+function uniqueValues(values) {
+  return [...new Set(values)]
+}
+
+export default {
+  mounted() {
+    this.syncCategoriesFromRoute()
+  },
+  watch: {
+    categoryOptions(newOptions) {
+      if (Array.isArray(newOptions) && newOptions.length) {
+        this.syncCategoriesFromRoute()
+      }
+    },
+  },
+  methods: {
+    normalizeCategoryQueryValues(value) {
+      return uniqueValues(
+        asArray(value)
+          .flatMap(entry => String(entry).split(','))
+          .map(entry => entry.trim())
+          .filter(Boolean)
+      )
+    },
+    normalizeCategorySelection(selection) {
+      return asArray(selection)
+        .map(item => {
+          const id =
+            item && typeof item === 'object'
+              ? item.id ?? item.name ?? item.title
+              : item
+
+          if (id === null || id === undefined || id === '') {
+            return null
+          }
+
+          const label =
+            item && typeof item === 'object'
+              ? item.name ?? item.title ?? id
+              : id
+
+          return {
+            id,
+            name: label,
+          }
+        })
+        .filter(Boolean)
+    },
+    getCategoryQueryValues(query = this.$route && this.$route.query) {
+      if (!query) return []
+
+      if (Object.prototype.hasOwnProperty.call(query, 'categories')) {
+        return this.normalizeCategoryQueryValues(query.categories)
+      }
+
+      if (Object.prototype.hasOwnProperty.call(query, 'category')) {
+        return this.normalizeCategoryQueryValues(query.category)
+      }
+
+      return []
+    },
+    buildSelectionFromCategoryQuery() {
+      const queryValues = this.getCategoryQueryValues()
+
+      if (!queryValues.length || !Array.isArray(this.categoryOptions)) {
+        return []
+      }
+
+      const optionLookup = new Map(
+        this.categoryOptions.map(option => [String(option), String(option)])
+      )
+
+      return queryValues
+        .filter(value => optionLookup.has(String(value)))
+        .map(value => {
+          const option = optionLookup.get(String(value))
+          return {
+            id: option,
+            name: option,
+          }
+        })
+    },
+    hasSameCategorySelection(left, right) {
+      const leftIds = this.normalizeCategorySelection(left).map(item => String(item.id))
+      const rightIds = this.normalizeCategorySelection(right).map(item => String(item.id))
+
+      return (
+        leftIds.length === rightIds.length &&
+        leftIds.every((id, index) => id === rightIds[index])
+      )
+    },
+    syncCategoriesFromRoute() {
+      const routeSelection = this.buildSelectionFromCategoryQuery()
+
+      if (!routeSelection.length) return
+      if (this.hasSameCategorySelection(routeSelection, this.selectedCategories)) {
+        return
+      }
+
+      this.$emit('update:selected-categories', routeSelection)
+    },
+    categoryQueryMatchesSelection(selection) {
+      const normalizedSelection = this.normalizeCategorySelection(selection)
+      const selectionIds = normalizedSelection.map(item => String(item.id))
+      const query = (this.$route && this.$route.query) || {}
+      const queryIds = this.getCategoryQueryValues(query)
+
+      if (
+        selectionIds.length !== queryIds.length ||
+        selectionIds.some((id, index) => id !== queryIds[index])
+      ) {
+        return false
+      }
+
+      const hasCategory = Object.prototype.hasOwnProperty.call(query, 'category')
+      const hasCategories = Object.prototype.hasOwnProperty.call(query, 'categories')
+
+      if (!selectionIds.length) {
+        return !hasCategory && !hasCategories
+      }
+
+      if (String(query.category) !== selectionIds[0]) {
+        return false
+      }
+
+      if (selectionIds.length === 1) {
+        return !hasCategories
+      }
+
+      const categoryQueryValues = this.normalizeCategoryQueryValues(query.categories)
+
+      return (
+        categoryQueryValues.length === selectionIds.length &&
+        categoryQueryValues.every((id, index) => id === selectionIds[index])
+      )
+    },
+    updateCategoryQuery(selection) {
+      if (!this.$router || !this.$route) return
+      if (this.categoryQueryMatchesSelection(selection)) return
+
+      const normalizedSelection = this.normalizeCategorySelection(selection)
+      const nextQuery = { ...(this.$route.query || {}) }
+      const selectionIds = normalizedSelection.map(item => item.id)
+
+      delete nextQuery.category
+      delete nextQuery.categories
+
+      if (selectionIds.length === 1) {
+        nextQuery.category = selectionIds[0]
+      } else if (selectionIds.length > 1) {
+        nextQuery.category = selectionIds[0]
+        nextQuery.categories = selectionIds
+      }
+
+      this.$router.replace({ query: nextQuery })
+    },
+    onCategorySelect(selection) {
+      const normalizedSelection = this.normalizeCategorySelection(selection)
+
+      this.$emit('update:selected-categories', normalizedSelection)
+      this.updateCategoryQuery(normalizedSelection)
+    },
+  },
+}