@asd20/ui-next 2.25.1 → 2.25.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.25.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.25.2...ui-next-v2.25.3) (2026-09-25)
+
+
+### Bug Fixes
+
+* add typo-tolerant serches and common aliases to search ([49f86a1](https://github.com/academydistrict20/asd20-ui-next/commit/49f86a104c8f33b3c2e53ebee696b95dbef43014))
+
+## [2.25.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.25.1...ui-next-v2.25.2) (2026-09-23)
+
+
+### Bug Fixes
+
+* refine public form presentation ([0e8d038](https://github.com/academydistrict20/asd20-ui-next/commit/0e8d0388783f522d65adeb6fb03f5c6a19c15456))
+
 ## [2.25.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.25.0...ui-next-v2.25.1) (2026-09-23)
 
 

package/package.json

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

package/src/components/molecules/Asd20PublicFormField/index.vue

@@ -8,7 +8,7 @@
       :required="field.required"
       :minlength="field.minLength"
       :maxlength="field.maxLength"
-      :show-character-count="showCharacterCount"
+      :show-character-count="false"
       :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
       :aria-describedby="describedBy"
@@ -26,7 +26,7 @@
       :minlength="field.minLength"
       :maxlength="field.maxLength"
       :max="dateMaximum"
-      :show-character-count="showCharacterCount"
+      :show-character-count="false"
       :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
       :aria-describedby="describedBy"
@@ -97,13 +97,22 @@
       @update:modelValue="$emit('update:modelValue', $event)"
     />
 
-    <p
-      v-if="field.helpText"
-      :id="helpId"
-      class="asd20-public-form-field__help"
+    <div
+      v-if="field.helpText || hasCharacterCount"
+      class="asd20-public-form-field__guidance"
     >
-      {{ field.helpText }}
-    </p>
+      <p
+        v-if="field.helpText"
+        :id="helpId"
+        class="asd20-public-form-field__help"
+      >
+        {{ field.helpText }}
+      </p>
+      <span
+        v-if="hasCharacterCount"
+        class="asd20-public-form-field__character-count"
+      >{{ characterCountText }}</span>
+    </div>
     <ul
       v-if="hasErrors"
       :id="errorId"
@@ -174,6 +183,19 @@ export default {
     hasErrors() {
       return this.errors.length > 0
     },
+    hasCharacterCount() {
+      return (
+        this.showCharacterCount &&
+        Number.isInteger(this.field.maxLength) &&
+        this.field.maxLength > 0 &&
+        typeof this.modelValue === 'string'
+      )
+    },
+    characterCountText() {
+      return this.hasCharacterCount
+        ? `${this.modelValue.length}/${this.field.maxLength}`
+        : ''
+    },
     describedBy() {
       return (
         [
@@ -226,15 +248,55 @@ export default {
   }
 
   &__help,
+  &__character-count,
   &__errors {
     color: var(--website-card__reverse-background-color);
     font-size: 0.75rem;
     margin: space(0.125) 0 0;
   }
 
+  &__guidance {
+    align-items: flex-end;
+    display: flex;
+    gap: space(0.25);
+    justify-content: space-between;
+  }
+
+  &__help {
+    flex: 1 1 auto;
+  }
+
+  &__character-count {
+    flex: 0 0 auto;
+    margin-left: auto;
+    white-space: nowrap;
+  }
+
   &__errors {
     color: asd20-swatch('emergency', -1);
     padding-left: space(1);
   }
+
+  & :deep(.asd20-checkbox.asd20-checkbox__checkbox) {
+    align-items: flex-start;
+    gap: space(0.25);
+
+    input {
+      flex: 0 0 auto;
+      margin: 0.2rem 0 0;
+      opacity: 1;
+      position: static;
+    }
+
+    label {
+      align-items: flex-start;
+      flex: 1 1 auto;
+      padding: 0;
+
+      span {
+        margin-right: 0;
+      }
+    }
+  }
 }
 </style>

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

@@ -34,7 +34,11 @@
         role="status"
         aria-live="polite"
       >
-        {{ formDefinition.successMessage }}
+        <p>{{ formDefinition.successMessage }}</p>
+        <template v-if="formDefinition.successDetails">
+          <hr />
+          <p>{{ formDefinition.successDetails }}</p>
+        </template>
       </div>
 
       <form
@@ -236,7 +240,7 @@ export default {
       return this.formDefinition?.title || 'Public Form'
     },
     showPristineValidationErrors() {
-      return this.formDefinition?.id !== 'accessibility-issue'
+      return false
     },
     errorEntries() {
       if (!this.formDefinition) return []
@@ -330,7 +334,7 @@ export default {
       return `${this.instanceId}-${name}`
     },
     shouldShowCharacterCount(field) {
-      return this.formDefinition.id !== 'accessibility-issue' || field.name === 'issue'
+      return field.showCharacterCount === true
     },
     updateValue(name, value) {
       this.values[name] = value
@@ -459,8 +463,7 @@ export default {
   }
 
   &__error-summary,
-  &__feedback,
-  &__success {
+  &__feedback {
     font-weight: 600;
     margin: space(0.5) 0;
   }
@@ -476,7 +479,12 @@ export default {
 
   &__success {
     font-size: 1.1rem;
-    text-align: center;
+    margin: space(0.5) 0;
+    text-align: left;
+
+    p {
+      margin: space(0.5) 0;
+    }
   }
 
   &__fallback {

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

@@ -2917,11 +2917,9 @@ export default {
         this.skipKeywordWatcher = true
         this.keywords = this.limitWords(text, 4)
         await this.searchPages({ keepAnswersTab: false, runId })
-        this.searchFilesWithGroupOwners({ runId })
-          .then(() =>
-            this.selectBestKeywordTabAfterContactResults({ runId, text })
-          )
-          .catch(() => {})
+        const supportingSearchPromise = this.searchFilesWithGroupOwners({
+          runId,
+        }).catch(() => [])
         if (!this.isCurrentSearchRun(runId)) return
         this.currentTab = 'Pages'
         this.syncSearchState({ text, mode, tab: 'Pages' })
@@ -2929,6 +2927,10 @@ export default {
 
         // Log keyword-only search analytics
         const keywordAnalyticsPages = this.getAnalyticsPages()
+        await supportingSearchPromise
+        if (!this.isCurrentSearchRun(runId)) return
+        this.selectBestKeywordTabAfterContactResults({ runId, text })
+        const resultCounts = this.getKeywordAnalyticsResultCounts()
         const keywordLogPages = keywordAnalyticsPages
           .slice(0, 10)
           .map(p => ({ title: p.title || '', url: p.url || '' }))
@@ -2936,7 +2938,7 @@ export default {
           question: text,
           searchType: 'keyword_only',
           keywords: this.keywords || text,
-          hadResults: keywordAnalyticsPages.length > 0,
+          hadResults: resultCounts.total > 0,
           relatedPages: keywordLogPages,
           organizationId:
             this.organization && this.organization.id
@@ -3572,6 +3574,21 @@ export default {
       )
     },
 
+    getKeywordAnalyticsResultCounts() {
+      const pages = this.getAnalyticsPages().length
+      const files = Array.isArray(this.currentFiles)
+        ? this.currentFiles.length
+        : 0
+      const contacts = Number(this.contactResultCount) || 0
+
+      return {
+        pages,
+        files,
+        contacts,
+        total: pages + files + contacts,
+      }
+    },
+
     limitWords(text, maxWords = 4) {
       return (text || '')
         .trim()

package/src/helpers/publicFormDefinition.js

@@ -40,6 +40,12 @@ function optionalMaxDate(value, type) {
   throw new Error('Maximum date is invalid.')
 }
 
+function optionalBoolean(value, label) {
+  if (value == null) return false
+  if (typeof value !== 'boolean') throw new Error(`${label} is invalid.`)
+  return value
+}
+
 function normalizeOptions(field) {
   if (!['select', 'radio'].includes(field.type)) return undefined
   if (
@@ -89,6 +95,10 @@ function normalizeField(field) {
     maxLength: optionalLength(field.maxLength, 'Maximum length'),
     maxDate: optionalMaxDate(field.maxDate, type),
     autocomplete: boundedText(field.autocomplete, 'Autocomplete value', 100),
+    showCharacterCount: optionalBoolean(
+      field.showCharacterCount,
+      'Character-count visibility'
+    ),
     options: undefined,
   }
 
@@ -99,6 +109,13 @@ function normalizeField(field) {
   ) {
     throw new Error(`${normalized.label} has invalid length limits.`)
   }
+  if (
+    normalized.showCharacterCount &&
+    (!['text', 'email', 'tel', 'textarea'].includes(type) ||
+      normalized.maxLength == null)
+  ) {
+    throw new Error(`${normalized.label} has an invalid character count.`)
+  }
 
   normalized.options = normalizeOptions({
     ...field,
@@ -170,6 +187,11 @@ export function normalizePublicFormDefinition(definition) {
       1000,
       true
     ),
+    successDetails: boundedText(
+      definition.successDetails,
+      'Success details',
+      2000
+    ),
     fallbackContact: normalizedFallback,
     fields,
   }

package/src/helpers/queryFiles.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 
 import { hasSearchProxyRuntime, resolveSearchProxyUrl } from './searchProxyUrl'
 import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+import { buildTypoTolerantSearchQuery } from './searchQuery'
 
 /**
  * Creates a Azure Search payload
@@ -13,13 +14,7 @@ function searchPayload(state) {
   let query = '*'
 
   if (state.enableFuzzySearch) {
-    // Search both by exact phrase and by fuzzy search of event name
-    query = state.keywords.trim()
-      ? `"${state.keywords.trim()}" OR name:${state.keywords
-          .trim()
-          .split(' ')
-          .join('* OR name:')}*`
-      : '*'
+    query = buildTypoTolerantSearchQuery(state.keywords, 'name')
   } else {
     query = state.keywords.trim()
   }

package/src/helpers/queryMessages.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 
 import { hasSearchProxyRuntime, resolveSearchProxyUrl } from './searchProxyUrl'
 import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+import { buildTypoTolerantSearchQuery } from './searchQuery'
 
 /**
  * Creates a Azure Search payload
@@ -43,13 +44,7 @@ function searchPayload(state) {
   }
 
   if (state.enableFuzzySearch) {
-    // Search both by exact phrase and by fuzzy search of event name
-    query = state.keywords.trim()
-      ? `"${state.keywords.trim()}" OR title:${state.keywords
-          .trim()
-          .split(' ')
-          .join('* OR title:')}*`
-      : '*'
+    query = buildTypoTolerantSearchQuery(state.keywords, 'title')
   } else {
     query = state.keywords.trim()
   }

package/src/helpers/queryPages.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 
 import { hasSearchProxyRuntime, resolveSearchProxyUrl } from './searchProxyUrl'
 import { resolveRuntimeConfigValue } from './runtimeConfig'
+import { buildTypoTolerantSearchQuery } from './searchQuery'
 
 export const NO_PAGE_RESULTS_FALLBACKS = [
   {
@@ -56,13 +57,7 @@ function searchPayload(state) {
   let query = '*'
 
   if (state.enableFuzzySearch) {
-    // Search both by exact phrase and by fuzzy search of event name
-    query = state.keywords.trim()
-      ? `"${state.keywords.trim()}" OR title:${state.keywords
-          .trim()
-          .split(' ')
-          .join('* OR title:')}*`
-      : '*'
+    query = buildTypoTolerantSearchQuery(state.keywords, 'title')
   } else {
     query = state.keywords.trim()
   }

package/src/helpers/searchQuery.js

@@ -0,0 +1,70 @@
+const MIN_FUZZY_TOKEN_LENGTH = 5
+
+const SEARCH_ALIASES = Object.freeze({
+  childfind: ['child find'],
+  dresscode: ['dress code'],
+  foodmenu: ['food menu', 'lunch menu'],
+  hoco: ['homecoming'],
+  landsharks: ['land sharks'],
+  merch: ['merchandise', 'spirit wear'],
+  powderpuff: ['powder puff'],
+  printshop: ['print shop'],
+  studenthub: ['student hub'],
+})
+
+function escapePhrase(value) {
+  return value.replace(/"/g, '\\"')
+}
+
+function searchTokens(value) {
+  return Array.from(
+    new Set(
+      String(value || '')
+        .split(/\s+/)
+        .map(token => token.replace(/[^a-z0-9-]/gi, '').trim())
+        .filter(Boolean)
+    )
+  )
+}
+
+function prefixClause(tokens, field = '') {
+  if (!tokens.length) return ''
+  const prefix = field ? `${field}:` : ''
+  return tokens.map(token => `${prefix}${token}*`).join(' AND ')
+}
+
+function fuzzyClause(tokens) {
+  if (!tokens.some(token => token.length >= MIN_FUZZY_TOKEN_LENGTH)) return ''
+  return tokens
+    .map(token =>
+      token.length >= MIN_FUZZY_TOKEN_LENGTH ? `${token}~1` : token
+    )
+    .join(' AND ')
+}
+
+export function buildTypoTolerantSearchQuery(keywords, field = '') {
+  const trimmed = String(keywords || '').trim()
+  if (!trimmed) return '*'
+
+  const tokens = searchTokens(trimmed)
+  if (!tokens.length) return `"${escapePhrase(trimmed)}"`
+
+  const clauses = [
+    `"${escapePhrase(trimmed)}"`,
+    prefixClause(tokens, field),
+    prefixClause(tokens),
+    fuzzyClause(tokens),
+  ]
+  const aliases = SEARCH_ALIASES[trimmed.toLowerCase()] || []
+
+  aliases.forEach(alias => {
+    const aliasTokens = searchTokens(alias)
+    clauses.push(`"${escapePhrase(alias)}"`)
+    clauses.push(prefixClause(aliasTokens, field))
+    clauses.push(prefixClause(aliasTokens))
+  })
+
+  return Array.from(new Set(clauses.filter(Boolean)))
+    .map(clause => (clause.includes(' AND ') ? `(${clause})` : clause))
+    .join(' OR ')
+}