@asd20/ui-next 2.0.28 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+# [2.1.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.29...ui-next-v2.1.0) (2026-04-06)
+
+
+### Features
+
+* revise file list template and componets to add search ([661b500](https://github.com/academydistrict20/asd20-ui-next/commit/661b500259a263285b37adf497156417fe983430))
+
+## [2.0.29](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.28...ui-next-v2.0.29) (2026-04-06)
+
 ## [2.0.28](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.27...ui-next-v2.0.28) (2026-04-03)
 
 

package/package.json

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

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

@@ -39,6 +39,7 @@
 import Asd20BodyAccordion from '../../molecules/Asd20BodyAccordion'
 import Asd20TableauEmbed from '../../molecules/Asd20TableauEmbed'
 import { navigateInternalHref } from '../../../helpers/linkPolicy'
+import { applyRichListColumnExceptions } from '../../../helpers/richBodyListColumns'
 
 const BODY_BLOCK_PLACEHOLDER_PATTERN =
   /<div\b(?=[^>]*\bdata-cc-block=(['"])([^'"]+)\1)(?=[^>]*\bdata-block-id=(['"])([^'"]+)\3)[^>]*><\/div>/gi
@@ -146,9 +147,17 @@ export default {
 
   mounted() {
     this.hasMounted = true
+    this.applyListColumnExceptions()
+  },
+
+  updated() {
+    this.applyListColumnExceptions()
   },
 
   methods: {
+    applyListColumnExceptions() {
+      applyRichListColumnExceptions(this.$el)
+    },
     onContentClick(event) {
       const anchor = event.target?.closest?.('a')
 

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

@@ -10,6 +10,20 @@
     :icon="icon"
     :column-width="640"
   >
+    <template #header>
+      <div
+        v-if="searchable"
+        class="asd20-file-list__toolbar"
+      >
+        <asd20-search-field
+          v-model="searchQuery"
+          class="asd20-file-list__search"
+          :placeholder="searchPlaceholder"
+          :extra="resultSummary"
+          :id-tag="searchIdTag"
+        />
+      </div>
+    </template>
     <div
       v-for="category in categorizedFileItems"
       :key="category.name"
@@ -22,6 +36,36 @@
         v-bind="item"
       />
     </div>
+    <div
+      v-if="!categorizedFileItems.length"
+      class="asd20-file-list__empty"
+    >
+      {{ emptyStateMessage }}
+    </div>
+    <template #footer>
+      <div
+        v-if="shouldShowFooter"
+        class="asd20-file-list__footer"
+      >
+        <div class="asd20-file-list__footer-summary">
+          {{ footerSummary }}
+        </div>
+        <div class="asd20-file-list__footer-actions">
+          <asd20-button
+            v-if="canShowMore"
+            :label="showMoreLabel"
+            text-only
+            @click="showMore"
+          />
+          <asd20-button
+            v-if="canShowAll"
+            label="Show all"
+            text-only
+            @click="showAll"
+          />
+        </div>
+      </div>
+    </template>
   </asd20-list>
 </template>
 
@@ -30,10 +74,25 @@ import Asd20List from '../../../components/organisms/Asd20WidgetList'
 import mapFilesToListItems from '../../../helpers/mapFilesToListItems'
 import Asd20ListItem from '../../../components/molecules/Asd20ListItem'
 import Asd20ListCategory from '../../../components/molecules/Asd20ListCategory'
+import Asd20SearchField from '../../../components/molecules/Asd20SearchField'
+
+function normalizeSearchText(value = '') {
+  return String(value || '')
+    .toLowerCase()
+    .replace(/\.[a-z0-9]+$/i, '')
+    .replace(/[^a-z0-9]+/g, ' ')
+    .trim()
+}
+
 export default {
   name: 'Asd20FileList',
 
-  components: { Asd20List, Asd20ListItem, Asd20ListCategory },
+  components: {
+    Asd20List,
+    Asd20ListItem,
+    Asd20ListCategory,
+    Asd20SearchField,
+  },
 
   props: {
     files: { type: Array, default: () => [] },
@@ -46,10 +105,16 @@ export default {
     groupByTag: { type: Boolean, default: false },
     groupByDate: { type: Boolean, default: false },
     maxHeight: { type: String, default: '320px' },
+    searchable: { type: Boolean, default: false },
+    searchPlaceholder: { type: String, default: 'Search files' },
+    initialVisibleCount: { type: Number, default: 0 },
+    visibleCountStep: { type: Number, default: 50 },
   },
 
   data: () => ({
     loadedFiles: [],
+    searchQuery: '',
+    visibleCount: 0,
   }),
 
   computed: {
@@ -57,6 +122,125 @@ export default {
       return (this.files || []).concat(this.loadedFiles)
     },
 
+    normalizedSearchQuery() {
+      return normalizeSearchText(this.searchQuery)
+    },
+
+    searchTerms() {
+      return this.normalizedSearchQuery
+        ? this.normalizedSearchQuery.split(/\s+/).filter(Boolean)
+        : []
+    },
+
+    filteredFiles() {
+      if (!this.searchTerms.length) return this.computedFiles
+
+      return this.computedFiles.filter(file => this.matchesSearch(file))
+    },
+
+    totalFilesCount() {
+      return this.computedFiles.length
+    },
+
+    filteredFilesCount() {
+      return this.filteredFiles.length
+    },
+
+    hasActiveSearch() {
+      return this.searchTerms.length > 0
+    },
+
+    effectiveVisibleCount() {
+      if (!this.initialVisibleCount) return this.filteredFilesCount
+      if (!this.visibleCount) return this.initialVisibleCount
+
+      return this.visibleCount
+    },
+
+    visibleFiles() {
+      if (!this.initialVisibleCount) return this.filteredFiles
+
+      return this.filteredFiles.slice(0, this.effectiveVisibleCount)
+    },
+
+    canShowMore() {
+      return (
+        !!this.initialVisibleCount &&
+        this.visibleFiles.length < this.filteredFilesCount
+      )
+    },
+
+    canShowAll() {
+      return this.canShowMore && this.filteredFilesCount > this.nextVisibleCount
+    },
+
+    nextVisibleCount() {
+      return Math.min(
+        this.filteredFilesCount,
+        this.effectiveVisibleCount + this.resolvedVisibleCountStep
+      )
+    },
+
+    resolvedVisibleCountStep() {
+      return this.visibleCountStep > 0
+        ? this.visibleCountStep
+        : this.initialVisibleCount || 50
+    },
+
+    resultSummary() {
+      if (!this.searchable) return ''
+      if (!this.totalFilesCount) return '0 files'
+      if (this.hasActiveSearch) {
+        return `${this.filteredFilesCount} of ${this.totalFilesCount}`
+      }
+
+      return `${this.totalFilesCount} files`
+    },
+
+    footerSummary() {
+      if (!this.totalFilesCount) return ''
+
+      if (this.canShowMore) {
+        return `Showing ${this.visibleFiles.length} of ${this.filteredFilesCount} files`
+      }
+
+      if (this.hasActiveSearch) {
+        return `${this.filteredFilesCount} matching files`
+      }
+
+      return `Showing all ${this.filteredFilesCount} files`
+    },
+
+    hasLargeResultSet() {
+      return (
+        !!this.initialVisibleCount &&
+        this.filteredFilesCount > this.initialVisibleCount
+      )
+    },
+
+    shouldShowFooter() {
+      return (
+        this.totalFilesCount > 0 &&
+        (this.canShowMore || this.hasActiveSearch || this.hasLargeResultSet)
+      )
+    },
+
+    showMoreLabel() {
+      const increment = this.nextVisibleCount - this.visibleFiles.length
+      return `Show ${increment} more`
+    },
+
+    searchIdTag() {
+      return normalizeSearchText(this.title).replace(/\s+/g, '-')
+    },
+
+    emptyStateMessage() {
+      if (!this.totalFilesCount) return 'No files available.'
+      if (this.hasActiveSearch) return 'No files match your search.'
+
+      return 'No files available.'
+    },
+
     categorizedFileItems() {
       if (this.groupByDate) {
         return this.fileItemsGroupedByDate
@@ -71,7 +255,7 @@ export default {
     },
 
     fileItemsGroupedByCategory() {
-      return this.computedFiles
+      return this.visibleFiles
         .reduce((a, c) => {
           let categories =
             c.categories && c.categories.length > 0
@@ -87,7 +271,7 @@ export default {
           return {
             name: c,
             items: mapFilesToListItems(
-              this.computedFiles
+              this.visibleFiles
                 .map(f => ({
                   ...f,
                   categories:
@@ -112,7 +296,7 @@ export default {
     },
 
     fileItemsGroupedByCategoryDescending() {
-      return this.computedFiles
+      return this.visibleFiles
         .reduce((a, c) => {
           let categories =
             c.categories && c.categories.length > 0
@@ -128,7 +312,7 @@ export default {
           return {
             name: c,
             items: mapFilesToListItems(
-              this.computedFiles
+              this.visibleFiles
                 .map(f => ({
                   ...f,
                   categories:
@@ -153,7 +337,7 @@ export default {
     },
 
     fileItemsGroupedByTag() {
-      return this.computedFiles
+      return this.visibleFiles
         .reduce((a, t) => {
           let tags = t.tags && t.tags.length > 0 ? t.tags : ['Untagged']
           for (const tag of tags) {
@@ -166,7 +350,7 @@ export default {
           return {
             name: t,
             items: mapFilesToListItems(
-              this.computedFiles
+              this.visibleFiles
                 .map(f => ({
                   ...f,
                   tags: f.tags && f.tags.length > 0 ? f.tags : ['Untagged'],
@@ -188,7 +372,7 @@ export default {
     },
 
     fileItemsGroupedByDate() {
-      return this.computedFiles
+      return this.visibleFiles
         .reduce((a, c) => {
           let date = new Date(c.lastModifiedDateTime).toLocaleDateString()
           if (a.indexOf(date) === -1) a.push(date)
@@ -199,7 +383,7 @@ export default {
             name: d,
             unix: new Date(d).valueOf(),
             items: mapFilesToListItems(
-              this.computedFiles.filter(
+              this.visibleFiles.filter(
                 f => new Date(f.lastModifiedDateTime).toLocaleDateString() === d
               )
             )
@@ -221,7 +405,7 @@ export default {
     fileItemsGroupedByOwner() {
       return [
         {
-          items: mapFilesToListItems(this.computedFiles).map(t => ({
+          items: mapFilesToListItems(this.visibleFiles).map(t => ({
             ...t,
             bordered: false,
             alignTop: false,
@@ -236,6 +420,7 @@ export default {
   watch: {
     files: {
       handler() {
+        this.resetVisibleCount()
         this.$nextTick(() => {
           // console.log('Change in Files detected:', this.files)
           this.checkForOverflow() // Ensure overflow check happens after file changes
@@ -245,13 +430,48 @@ export default {
       deep: true,
       immediate: true,
     },
+    searchQuery() {
+      this.resetVisibleCount()
+    },
   },
 
   mounted() {
+    this.resetVisibleCount()
     if (this.url) this.loadFiles()
   },
 
   methods: {
+    resetVisibleCount() {
+      this.visibleCount = this.initialVisibleCount > 0
+        ? this.initialVisibleCount
+        : 0
+    },
+    showMore() {
+      this.visibleCount = this.nextVisibleCount
+    },
+    showAll() {
+      this.visibleCount = this.filteredFilesCount
+    },
+    getFileSearchTokens(file = {}) {
+      return [
+        file.name,
+        file.filename,
+        file.description,
+        file.slug,
+        file.createdBy,
+        file.lastModifiedBy,
+        ...(Array.isArray(file.categories) ? file.categories : []),
+        ...(Array.isArray(file.owners) ? file.owners : []),
+        ...(Array.isArray(file.tags) ? file.tags : []),
+      ]
+        .map(normalizeSearchText)
+        .filter(Boolean)
+        .join(' ')
+    },
+    matchesSearch(file) {
+      const haystack = this.getFileSearchTokens(file)
+      return this.searchTerms.every(term => haystack.includes(term))
+    },
     // Expose the checkForOverflow method from the asd20viewport component
     // Expose the handleResize method from the asd20list component
     checkForOverflow() {
@@ -280,6 +500,33 @@ export default {
 <style lang="scss" scoped>
 @use '../../../design/component-stack' as *;
 
+.asd20-file-list__toolbar {
+  display: flex;
+  align-items: center;
+  gap: space(0.25);
+}
+
+.asd20-file-list__search {
+  min-width: min(20rem, 100%);
+  margin-left: auto;
+
+  :deep(.asd20-icon) {
+    margin-left: space(0.5);
+  }
+
+  :deep(input) {
+    border: 2px solid var(--color__accent);
+    border-radius: var(--website-shape__radius-s);
+    font-family: var(--website-typography__font-family-headlines);
+    font-size: 1rem;
+    min-height: 40px;
+  }
+
+  :deep(.asd20-search-field__extra) {
+    padding: 0 space(0.5) 0 space(0.75);
+  }
+}
+
 .asd20-file-list__category-group {
   display: contents;
 }
@@ -289,4 +536,53 @@ export default {
     margin-top: space(0.5);
   }
 }
+
+.asd20-file-list__empty {
+  width: 100%;
+  padding: space(0.75) 0;
+  color: var(--color__primary);
+}
+
+.asd20-file-list__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: space(0.5);
+  padding-top: space(0.75);
+}
+
+.asd20-file-list__footer-summary {
+  color: var(--color__primary);
+  font-size: 0.875rem;
+}
+
+.asd20-file-list__footer-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: space(0.5);
+}
+
+@media (max-width: 767px) {
+  .asd20-file-list__toolbar {
+    display: block;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .asd20-file-list__search {
+    min-width: 100%;
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-file-list__search {
+    margin: space(0.5) space(0.5);
+
+    :deep(.asd20-icon) {
+      margin-left: 0;
+    }
+  }
+}
 </style>

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

@@ -8,16 +8,21 @@
       v-if="$slots.header || headline"
       class="asd20-list__header"
     >
-      <asd20-icon
-        v-if="icon"
-        :name="icon"
-        :size="iconSize"
-      />
-      <component
-        :is="headlineTag"
-        class="asd20-list__headline"
-        v-html="headline"
-      ></component>
+      <div
+        v-if="icon || headline"
+        class="asd20-list__headline-group"
+      >
+        <asd20-icon
+          v-if="icon"
+          :name="icon"
+          :size="iconSize"
+        />
+        <component
+          :is="headlineTag"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></component>
+      </div>
       <slot name="header" />
     </div>
     <asd20-viewport
@@ -123,7 +128,17 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: space(0.5);
+  gap: space(0.5);
+}
+
+.asd20-list__headline-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+
   .asd20-icon {
     margin-right: space(0.5);
     --line-color: var(--website-icon__line-color);
@@ -154,6 +169,18 @@ export default {
   }
 }
 
+@media (max-width: 767px) {
+  .asd20-list__header {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .asd20-list__headline-group {
+    width: 100%;
+  }
+}
+
 /* @media (min-width: 767px) {*/
 /*   .asd20-list--multi-column {*/
 /*     &::v-deep .asd20-list-item {*/

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

@@ -8,16 +8,21 @@
       v-if="$slots.header || headline"
       class="asd20-list__header"
     >
-      <asd20-icon
-        v-if="icon"
-        :name="icon"
-        :size="iconSize"
-      />
-      <component
-        :is="headlineTag"
-        class="asd20-list__headline"
-        v-html="headline"
-      ></component>
+      <div
+        v-if="icon || headline"
+        class="asd20-list__headline-group"
+      >
+        <asd20-icon
+          v-if="icon"
+          :name="icon"
+          :size="iconSize"
+        />
+        <component
+          :is="headlineTag"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></component>
+      </div>
       <slot name="header" />
     </div>
     <asd20-viewport
@@ -128,7 +133,17 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: space(0.5);
+  gap: space(0.5);
+}
+
+.asd20-list__headline-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+
   .asd20-icon {
     margin-right: space(0.5);
     --line-color: var(--website-icon__line-color);
@@ -159,6 +174,18 @@ export default {
   }
 }
 
+@media (max-width: 767px) {
+  .asd20-list__header {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .asd20-list__headline-group {
+    width: 100%;
+  }
+}
+
 /* @media (min-width: 767px) {*/
 /*   .asd20-list--multi-column {*/
 /*     &::v-deep .asd20-list-item {*/

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

@@ -79,6 +79,10 @@
       :files="files"
       v-bind="filesFeedProps"
       :multi-column="true"
+      searchable
+      :initial-visible-count="50"
+      :visible-count-step="50"
+      search-placeholder="Search files"
       max-height="auto"
       @files-in-view="$emit('files-in-view')"
     />

package/src/design/_typography.scss

@@ -140,6 +140,13 @@
     flex-basis: 40%;
   }
 
+  .asd20-messaging .asd20-rich-list--single-column {
+    > li:first-child:nth-last-child(n+20),
+    > li:first-child:nth-last-child(n+20) ~ li {
+      flex-basis: 100%;
+    }
+  }
+
   h1,
   h2,
   h3,

package/src/helpers/richBodyListColumns.js

@@ -0,0 +1,48 @@
+export const SINGLE_COLUMN_RICH_LIST_CLASS = 'asd20-rich-list--single-column'
+export const MULTI_COLUMN_LIST_ITEM_THRESHOLD = 20
+export const SIGNIFICANT_LIST_ITEM_TEXT_THRESHOLD = 120
+
+const COMPLEX_DIRECT_CHILD_SELECTOR =
+  'ul, ol, dl, blockquote, pre, table, figure, h1, h2, h3, h4, h5, h6'
+
+function isDomElement(value) {
+  return typeof Element !== 'undefined' && value instanceof Element
+}
+
+function normalizeTextContent(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+export function isSignificantRichListItem(listItem) {
+  if (!isDomElement(listItem)) return false
+
+  if (listItem.querySelector(COMPLEX_DIRECT_CHILD_SELECTOR)) return true
+  if (listItem.children.length > 1) return true
+  if (listItem.querySelectorAll('br').length >= 2) return true
+
+  const textContent = normalizeTextContent(listItem.textContent || '')
+  return textContent.length >= SIGNIFICANT_LIST_ITEM_TEXT_THRESHOLD
+}
+
+export function shouldPreventRichListColumns(listElement) {
+  if (!isDomElement(listElement)) return false
+
+  const listItems = Array.from(listElement.children).filter(
+    child => child.tagName === 'LI'
+  )
+
+  if (listItems.length < MULTI_COLUMN_LIST_ITEM_THRESHOLD) return false
+
+  return listItems.some(isSignificantRichListItem)
+}
+
+export function applyRichListColumnExceptions(rootElement) {
+  if (!isDomElement(rootElement)) return
+
+  rootElement.querySelectorAll('ul, ol').forEach(list => {
+    list.classList.toggle(
+      SINGLE_COLUMN_RICH_LIST_CLASS,
+      shouldPreventRichListColumns(list)
+    )
+  })
+}