@asd20/ui-next 2.2.0 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.2.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.2.0...ui-next-v2.2.1) (2026-04-07)
+
+
+### Bug Fixes
+
+* fix file header text being dropped ([cb07594](https://github.com/academydistrict20/asd20-ui-next/commit/cb075946768dd58fb39ceed08ae406a1c36a532f))
+
 # [2.2.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.1.0...ui-next-v2.2.0) (2026-04-07)
 
 

package/package.json

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

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

@@ -3,10 +3,10 @@
     v-bind="$attrs"
     ref="listComponent"
     role="region"
-    :aria-label="title"
+    :aria-label="resolvedTitle"
     class="asd20-file-list"
     :max-height="maxHeight"
-    :headline="title"
+    :headline="resolvedTitle"
     :icon="icon"
     :column-width="640"
   >
@@ -19,7 +19,6 @@
           v-model="searchQuery"
           class="asd20-file-list__search"
           :placeholder="searchPlaceholder"
-          :extra="resultSummary"
           :id-tag="searchIdTag"
         />
       </div>
@@ -142,6 +141,7 @@ export default {
   props: {
     files: { type: Array, default: () => [] },
     title: { type: String, default: '' },
+    headline: { type: String, default: '' },
     icon: { type: String, default: '' },
     url: { type: String, default: '' },
     groupByOwner: { type: Boolean, default: false },
@@ -166,6 +166,10 @@ export default {
   }),
 
   computed: {
+    resolvedTitle() {
+      return this.title || this.headline
+    },
+
     computedFiles() {
       return (this.files || []).concat(this.loadedFiles)
     },
@@ -230,13 +234,6 @@ export default {
       return this.filteredFiles.slice(0, this.effectiveVisibleCount)
     },
 
-    paginatedFiles() {
-      if (!this.paginate) return this.visibleFiles
-
-      const startIndex = (this.currentPage - 1) * this.resolvedPageSize
-      return this.filteredFiles.slice(startIndex, startIndex + this.resolvedPageSize)
-    },
-
     canShowMore() {
       return (
         !!this.initialVisibleCount &&
@@ -261,16 +258,6 @@ export default {
         : 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 ''
 
@@ -306,7 +293,7 @@ export default {
     },
 
     searchIdTag() {
-      return normalizeSearchText(this.title).replace(/\s+/g, '-')
+      return normalizeSearchText(this.resolvedTitle).replace(/\s+/g, '-')
     },
 
     emptyStateMessage() {
@@ -344,7 +331,7 @@ export default {
       return `Showing ${this.filteredFilesCount} files.`
     },
 
-    categorizedFileItems() {
+    groupedFileItems() {
       if (this.groupByDate) {
         return this.fileItemsGroupedByDate
       } else if (this.groupByOwner) {
@@ -357,8 +344,41 @@ export default {
       return this.fileItemsGroupedByCategory
     },
 
+    paginatedGroupEntries() {
+      const entries = this.groupedFileItems.flatMap(group =>
+        group.items.map(item => ({
+          name: group.name,
+          item,
+        }))
+      )
+
+      if (!this.paginate) return entries
+
+      const startIndex = (this.currentPage - 1) * this.resolvedPageSize
+      return entries.slice(startIndex, startIndex + this.resolvedPageSize)
+    },
+
+    categorizedFileItems() {
+      if (!this.paginate) return this.groupedFileItems
+
+      return this.paginatedGroupEntries.reduce((groups, entry) => {
+        const existingGroup = groups.find(group => group.name === entry.name)
+
+        if (existingGroup) {
+          existingGroup.items.push(entry.item)
+          return groups
+        }
+
+        groups.push({
+          name: entry.name,
+          items: [entry.item],
+        })
+        return groups
+      }, [])
+    },
+
     fileItemsGroupedByCategory() {
-      return this.paginatedFiles
+      return this.visibleFiles
         .reduce((a, c) => {
           let categories =
             c.categories && c.categories.length > 0
@@ -373,21 +393,19 @@ export default {
         .map(c => {
           return {
             name: c,
-            items: mapFilesToListItems(
-              this.paginatedFiles
-                .map(f => ({
-                  ...f,
-                  categories:
-                    f.categories && f.categories.length > 0
-                      ? f.categories
-                      : ['Uncategorized'],
-                }))
-                .filter(f => f.categories.indexOf(c) > -1)
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles
+                  .map(f => ({
+                    ...f,
+                    categories:
+                      f.categories && f.categories.length > 0
+                        ? f.categories
+                        : ['Uncategorized'],
+                  }))
+                  .filter(f => f.categories.indexOf(c) > -1)
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -399,7 +417,7 @@ export default {
     },
 
     fileItemsGroupedByCategoryDescending() {
-      return this.paginatedFiles
+      return this.visibleFiles
         .reduce((a, c) => {
           let categories =
             c.categories && c.categories.length > 0
@@ -414,21 +432,19 @@ export default {
         .map(c => {
           return {
             name: c,
-            items: mapFilesToListItems(
-              this.paginatedFiles
-                .map(f => ({
-                  ...f,
-                  categories:
-                    f.categories && f.categories.length > 0
-                      ? f.categories
-                      : ['Uncategorized'],
-                }))
-                .filter(f => f.categories.indexOf(c) > -1)
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles
+                  .map(f => ({
+                    ...f,
+                    categories:
+                      f.categories && f.categories.length > 0
+                        ? f.categories
+                        : ['Uncategorized'],
+                  }))
+                  .filter(f => f.categories.indexOf(c) > -1)
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -440,7 +456,7 @@ export default {
     },
 
     fileItemsGroupedByTag() {
-      return this.paginatedFiles
+      return this.visibleFiles
         .reduce((a, t) => {
           let tags = t.tags && t.tags.length > 0 ? t.tags : ['Untagged']
           for (const tag of tags) {
@@ -452,18 +468,16 @@ export default {
         .map(t => {
           return {
             name: t,
-            items: mapFilesToListItems(
-              this.paginatedFiles
-                .map(f => ({
-                  ...f,
-                  tags: f.tags && f.tags.length > 0 ? f.tags : ['Untagged'],
-                }))
-                .filter(f => f.tags.indexOf(t) > -1)
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles
+                  .map(f => ({
+                    ...f,
+                    tags: f.tags && f.tags.length > 0 ? f.tags : ['Untagged'],
+                  }))
+                  .filter(f => f.tags.indexOf(t) > -1)
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -475,7 +489,7 @@ export default {
     },
 
     fileItemsGroupedByDate() {
-      return this.paginatedFiles
+      return this.visibleFiles
         .reduce((a, c) => {
           let date = new Date(c.lastModifiedDateTime).toLocaleDateString()
           if (a.indexOf(date) === -1) a.push(date)
@@ -485,15 +499,13 @@ export default {
           return {
             name: d,
             unix: new Date(d).valueOf(),
-            items: mapFilesToListItems(
-              this.paginatedFiles.filter(
-                f => new Date(f.lastModifiedDateTime).toLocaleDateString() === d
-              )
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles.filter(
+                  f => new Date(f.lastModifiedDateTime).toLocaleDateString() === d
+                )
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -508,7 +520,9 @@ export default {
     fileItemsGroupedByOwner() {
       return [
         {
-          items: mapFilesToListItems(this.paginatedFiles).map(t => ({
+          items: this.sortMappedFileItems(
+            mapFilesToListItems(this.visibleFiles)
+          ).map(t => ({
             ...t,
             bordered: false,
             alignTop: false,
@@ -584,6 +598,13 @@ export default {
       const haystack = this.getFileSearchTokens(file)
       return this.searchTerms.every(term => haystack.includes(term))
     },
+    sortMappedFileItems(items = []) {
+      return [...items].sort((a, b) => {
+        const left = String(a.label || '').toLowerCase()
+        const right = String(b.label || '').toLowerCase()
+        return left.localeCompare(right)
+      })
+    },
     // Expose the checkForOverflow method from the asd20viewport component
     // Expose the handleResize method from the asd20list component
     checkForOverflow() {

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

@@ -17,11 +17,51 @@
           :name="icon"
           :size="iconSize"
         />
-        <component
-          :is="headlineTag"
+        <h1
+          v-if="headlineTag === 'h1'"
           class="asd20-list__headline"
           v-html="headline"
-        ></component>
+        ></h1>
+        <h2
+          v-else-if="headlineTag === 'h2'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h2>
+        <h3
+          v-else-if="headlineTag === 'h3'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h3>
+        <h4
+          v-else-if="headlineTag === 'h4'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h4>
+        <h5
+          v-else-if="headlineTag === 'h5'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h5>
+        <h6
+          v-else-if="headlineTag === 'h6'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h6>
+        <p
+          v-else-if="headlineTag === 'p'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></p>
+        <span
+          v-else-if="headlineTag === 'span'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></span>
+        <div
+          v-else
+          class="asd20-list__headline"
+          v-html="headline"
+        ></div>
       </div>
       <slot name="header" />
     </div>

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

@@ -17,11 +17,51 @@
           :name="icon"
           :size="iconSize"
         />
-        <component
-          :is="headlineTag"
+        <h1
+          v-if="headlineTag === 'h1'"
           class="asd20-list__headline"
           v-html="headline"
-        ></component>
+        ></h1>
+        <h2
+          v-else-if="headlineTag === 'h2'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h2>
+        <h3
+          v-else-if="headlineTag === 'h3'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h3>
+        <h4
+          v-else-if="headlineTag === 'h4'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h4>
+        <h5
+          v-else-if="headlineTag === 'h5'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h5>
+        <h6
+          v-else-if="headlineTag === 'h6'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h6>
+        <p
+          v-else-if="headlineTag === 'p'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></p>
+        <span
+          v-else-if="headlineTag === 'span'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></span>
+        <div
+          v-else
+          class="asd20-list__headline"
+          v-html="headline"
+        ></div>
       </div>
       <slot name="header" />
     </div>