@asd20/ui-next 2.0.23 → 2.0.25

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* prevent double activation of multi select on mouse click ([0e8dfbd](https://github.com/academydistrict20/asd20-ui-next/commit/0e8dfbdd6ac6c20181065c47324f7e624d9f49e6))
+
 ## [2.0.23](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.22...ui-next-v2.0.23) (2026-04-03)
 
 

package/package.json

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

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

@@ -75,6 +75,22 @@ function normalizeItem(item, itemLabel, itemValue) {
   return normalized
 }
 
+function getItemKey(item, itemLabel, itemValue) {
+  const normalized = normalizeItem(item, itemLabel, itemValue)
+  return normalized[itemValue] ?? normalized[itemLabel]
+}
+
+function sameItemKey(left, right) {
+  return (
+    left === right ||
+    (left !== undefined &&
+      left !== null &&
+      right !== undefined &&
+      right !== null &&
+      String(left) === String(right))
+  )
+}
+
 const MULTISELECT_OMITTED_INPUT_ATTRS = [
   'autocomplete',
   'disabled',
@@ -101,9 +117,7 @@ export default {
   computed: {
     multiselectValue() {
       if (Array.isArray(this.resolvedValue)) {
-        return this.resolvedValue.map(item =>
-          normalizeItem(item, this.itemLabel, this.itemValue)
-        )
+        return this.resolvedValue.map(item => this.resolveSelectedItem(item))
       }
 
       if (
@@ -114,7 +128,7 @@ export default {
         return []
       }
 
-      return [normalizeItem(this.resolvedValue, this.itemLabel, this.itemValue)]
+      return [this.resolveSelectedItem(this.resolvedValue)]
     },
     multiselectItems() {
       const seen = new Set()
@@ -156,9 +170,21 @@ export default {
     emitValue(value) {
       this.$emit('update:modelValue', value)
     },
-    getItemKey(item) {
+    resolveSelectedItem(item) {
       const normalized = normalizeItem(item, this.itemLabel, this.itemValue)
-      return normalized[this.itemValue] ?? normalized[this.itemLabel]
+      const itemKey = getItemKey(normalized, this.itemLabel, this.itemValue)
+
+      return (
+        this.computedItems.find(candidate =>
+          sameItemKey(
+            getItemKey(candidate, this.itemLabel, this.itemValue),
+            itemKey
+          )
+        ) || normalized
+      )
+    },
+    getItemKey(item) {
+      return getItemKey(item, this.itemLabel, this.itemValue)
     },
     addTag(newTag) {
       const normalizedTag = normalizeItem(newTag, this.itemLabel, this.itemValue)

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

@@ -27,7 +27,7 @@
             class="multiselect__tag-icon"
             :aria-label="`Remove ${getOptionLabel(option)}`"
             @mousedown.prevent.stop="removeOption(option)"
-            @click.prevent.stop="removeOption(option)"
+            @click.prevent.stop="handleRemoveClick($event, option)"
           />
         </span>
       </div>
@@ -82,7 +82,6 @@
             role="option"
             :aria-selected="isSelected(option) ? 'true' : 'false'"
             @mousedown.prevent="toggleOption(option)"
-            @click.prevent="toggleOption(option)"
           >
             <div class="option__desc">
               <span
@@ -102,7 +101,6 @@
             role="option"
             :aria-selected="'false'"
             @mousedown.prevent="createTag"
-            @click.prevent="createTag"
           >
             <div class="option__desc">
               <span class="option__title">
@@ -384,6 +382,11 @@ export default {
       )
       this.open()
     },
+    handleRemoveClick(event, option) {
+      // Buttons need click handling for keyboard and assistive-tech activation.
+      if (event.detail !== 0) return
+      this.removeOption(option)
+    },
     moveActive(step) {
       if (!this.isOpen) {
         this.open()

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)
+    },
+  },
+}