@asd20/ui-next 2.29.1 → 2.30.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.30.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.29.1...ui-next-v2.30.0) (2026-10-06)
+
+
+### Features
+
+* refactor student records request workflow; reduce to a single form ([1dda060](https://github.com/academydistrict20/asd20-ui-next/commit/1dda06043264a5e9ca0dd7f5b012a51b4cae52ec))
+
 ## [2.29.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.29.0...ui-next-v2.29.1) (2026-10-05)
 
 

package/package.json

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

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

@@ -1,7 +1,33 @@
 <template>
   <div class="asd20-public-form-field">
+    <div
+      v-if="field.type === 'file'"
+      class="asd20-public-form-field__upload"
+    >
+      <label :for="inputId">{{ displayLabel }}</label>
+      <input
+        :id="inputId"
+        type="file"
+        accept=".pdf,application/pdf"
+        multiple
+        :required="field.required"
+        :aria-describedby="describedBy"
+        :aria-invalid="hasErrors ? 'true' : undefined"
+        @change="
+          $emit('update:modelValue', Array.from($event.target.files || []))
+        "
+      />
+      <ul v-if="modelValue.length">
+        <li
+          v-for="(file, index) in modelValue"
+          :key="index"
+        >
+          {{ file.name }}
+        </li>
+      </ul>
+    </div>
     <asd20-text-area-input
-      v-if="field.type === 'textarea'"
+      v-else-if="field.type === 'textarea'"
       :id="inputId"
       :model-value="modelValue"
       :label="displayLabel"
@@ -81,7 +107,13 @@
           :required="field.required"
           @change="$emit('update:modelValue', option.value)"
         />
-        <span>{{ option.label }}</span>
+        <span>
+          {{ option.label }}
+          <span
+            v-if="option.description"
+            class="asd20-public-form-field__option-description"
+          >{{ option.description }}</span>
+        </span>
       </label>
     </fieldset>
 
@@ -151,7 +183,7 @@ export default {
   components: { Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
   props: {
     field: { type: Object, required: true },
-    modelValue: { type: [String, Boolean], default: '' },
+    modelValue: { type: [String, Boolean, Array], default: '' },
     errors: { type: Array, default: () => [] },
     inputId: { type: String, required: true },
     showCharacterCount: { type: Boolean, default: true },
@@ -214,6 +246,11 @@ export default {
 @use '../../../design/component-stack' as *;
 
 .asd20-public-form-field {
+  &__option-description {
+    display: block;
+    font-weight: normal;
+    margin-top: 0.25rem;
+  }
   // Public intake controls must stay legible on every school theme. Limit the
   // neutral overrides to this wrapper so other site components keep their colors.
   --color__accent: #3d3d3d;

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

@@ -54,13 +54,21 @@
           class="asd20-public-form-modal__introduction"
         >
           <template v-if="inlineIntroductionParts">
-            {{ inlineIntroductionParts.before }}<a :href="formDefinition.introductionLink.href">{{ formDefinition.introductionLink.label }}</a>{{ inlineIntroductionParts.after }}
+            {{ inlineIntroductionParts.before
+            }}<a :href="formDefinition.introductionLink.href">{{
+              formDefinition.introductionLink.label
+            }}</a>{{ inlineIntroductionParts.after }}
           </template>
           <template v-else>
             {{ formDefinition.introduction }}
           </template>
         </p>
-        <p v-if="formDefinition.introductionLink && !formDefinition.introductionLink.inline">
+        <p
+          v-if="
+            formDefinition.introductionLink &&
+              !formDefinition.introductionLink.inline
+          "
+        >
           <a :href="formDefinition.introductionLink.href">
             {{ formDefinition.introductionLink.label }}
           </a>
@@ -88,7 +96,7 @@
         </div>
 
         <asd20-public-form-field
-          v-for="field in formDefinition.fields"
+          v-for="field in visibleFields"
           :key="field.name"
           :class="{
             'asd20-public-form-modal__requester-choice':
@@ -199,6 +207,9 @@ import Asd20PublicFormField from '../../molecules/Asd20PublicFormField'
 import Recaptcha from '../../utils/Recaptcha'
 import {
   createPublicFormValues,
+  isPublicFormFieldVisible,
+  isPublicFormFieldRequired,
+  serializePublicFormValues,
   normalizePublicFormDefinition,
   validatePublicFormValues,
 } from '../../../helpers/publicFormDefinition'
@@ -255,6 +266,14 @@ export default {
     }
   },
   computed: {
+    visibleFields() {
+      return (this.formDefinition?.fields || [])
+        .filter(field => isPublicFormFieldVisible(field, this.values))
+        .map(field => ({
+          ...field,
+          required: isPublicFormFieldRequired(field, this.values),
+        }))
+    },
     modalTitle() {
       return this.formDefinition?.title || 'Public Form'
     },
@@ -288,7 +307,9 @@ export default {
     },
     hasFallbackContact() {
       const fallback = this.formDefinition?.fallbackContact
-      return Boolean(fallback?.instructions || fallback?.email || fallback?.phone)
+      return Boolean(
+        fallback?.instructions || fallback?.email || fallback?.phone
+      )
     },
     showFallbackContact() {
       return this.submissionFailed && this.hasFallbackContact
@@ -377,6 +398,12 @@ export default {
     },
     updateValue(name, value) {
       this.values[name] = value
+      for (const field of this.formDefinition.fields) {
+        if (!isPublicFormFieldVisible(field, this.values)) {
+          this.values[field.name] =
+            field.type === 'checkbox' ? false : field.type === 'file' ? [] : ''
+        }
+      }
       if (this.validationAttempted) this.validate(false)
     },
     validate(focusSummary = true) {
@@ -424,6 +451,12 @@ export default {
       if (status === 429) {
         return 'Too many submissions were received recently. Please wait and try again, or use the contact options listed.'
       }
+      if (
+        status === 502 &&
+        typeof serverMessage === 'string' &&
+        serverMessage.trim()
+      )
+        return serverMessage
       if (status === 502) {
         return 'The form could not be delivered right now. Please try again later or use the contact options listed.'
       }
@@ -440,7 +473,9 @@ export default {
     async submitForm(captchaToken = '') {
       if (this.sending || !this.validate()) return
       if (this.captchaEnabled && !captchaToken) {
-        this.showFeedback('Verification is required before submitting this form.')
+        this.showFeedback(
+          'Verification is required before submitting this form.'
+        )
         return
       }
 
@@ -449,7 +484,10 @@ export default {
       this.submissionFailed = false
       try {
         const payload = {
-          ...this.values,
+          ...(await serializePublicFormValues(
+            this.formDefinition,
+            this.values
+          )),
           website: this.honeypot,
           captchaToken,
         }

package/src/helpers/publicFormDefinition.js

@@ -7,6 +7,7 @@ export const SUPPORTED_PUBLIC_FORM_FIELD_TYPES = Object.freeze([
   'select',
   'radio',
   'checkbox',
+  'file',
 ])
 
 const FIELD_NAME_PATTERN = /^[A-Za-z][A-Za-z0-9_]*$/
@@ -65,7 +66,12 @@ function normalizeOptions(field) {
     if (seen.has(value))
       throw new Error(`${field.label} has duplicate choices.`)
     seen.add(value)
-    return { label, value }
+    const description = boundedText(
+      option?.description,
+      'Option description',
+      1000
+    )
+    return description ? { label, value, description } : { label, value }
   })
 }
 
@@ -100,6 +106,11 @@ function normalizeField(field) {
       'Character-count visibility'
     ),
     options: undefined,
+    visibleWhen: normalizeCondition(field.visibleWhen),
+    requiredWhen:
+      field.requiredWhen == null
+        ? undefined
+        : normalizeConditions(field.requiredWhen),
   }
 
   if (
@@ -122,9 +133,103 @@ function normalizeField(field) {
     type,
     label: normalized.label,
   })
+  if (type === 'file') {
+    if (
+      field.accept !== 'application/pdf' ||
+      field.maxFiles !== 5 ||
+      field.maxFileBytes !== 5 * 1024 * 1024 ||
+      field.maxTotalFileBytes !== 10 * 1024 * 1024
+    ) {
+      throw new Error('The public form has invalid upload limits.')
+    }
+    Object.assign(normalized, {
+      accept: field.accept,
+      maxFiles: field.maxFiles,
+      maxFileBytes: field.maxFileBytes,
+      maxTotalFileBytes: field.maxTotalFileBytes,
+    })
+  }
   return normalized
 }
 
+function normalizeCondition(condition) {
+  if (condition == null) return undefined
+  if (
+    !condition ||
+    typeof condition !== 'object' ||
+    Array.isArray(condition) ||
+    !FIELD_NAME_PATTERN.test(condition.fieldName) ||
+    !Array.isArray(condition.values) ||
+    !condition.values.length ||
+    condition.values.length > MAX_OPTIONS ||
+    condition.values.some(
+      value => typeof value !== 'string' || !OPTION_VALUE_PATTERN.test(value)
+    )
+  ) {
+    throw new Error('The public form has an invalid field condition.')
+  }
+  return { fieldName: condition.fieldName, values: [...condition.values] }
+}
+
+function normalizeConditions(conditions) {
+  if (
+    !Array.isArray(conditions) ||
+    !conditions.length ||
+    conditions.length > MAX_FIELDS ||
+    conditions.some(condition => condition == null)
+  ) {
+    throw new Error('The public form has invalid required conditions.')
+  }
+  return conditions.map(normalizeCondition)
+}
+
+export function isPublicFormFieldVisible(field, values) {
+  return (
+    !field.visibleWhen ||
+    field.visibleWhen.values.includes(String(values[field.visibleWhen.fieldName] || '').trim())
+  )
+}
+
+export function isPublicFormFieldRequired(field, values) {
+  return (
+    field.required ||
+    field.requiredWhen?.some(condition =>
+      condition.values.includes(String(values[condition.fieldName] || '').trim())
+    ) ||
+    false
+  )
+}
+
+export async function serializePublicFormValues(definition, values) {
+  const result = { ...values }
+  for (const field of definition.fields.filter(
+    field => field.type === 'file'
+  )) {
+    result[field.name] = await Promise.all(
+      (values[field.name] || []).map(
+        file =>
+          new Promise((resolve, reject) => {
+            const reader = new FileReader()
+            reader.onload = () =>
+              resolve({
+                name: file.name,
+                contentType: 'application/pdf',
+                contentBase64: String(reader.result).split(',')[1],
+              })
+            reader.onerror = () =>
+              reject(
+                new Error(
+                  'A supporting document could not be read. Select the document again.'
+                )
+              )
+            reader.readAsDataURL(file)
+          })
+      )
+    )
+  }
+  return result
+}
+
 export function normalizePublicFormDefinition(definition) {
   if (
     !definition ||
@@ -146,6 +251,26 @@ export function normalizePublicFormDefinition(definition) {
   if (names.size !== fields.length)
     throw new Error('The public form contains duplicate field names.')
 
+  for (const field of fields) {
+    for (const condition of [
+      field.visibleWhen,
+      ...(field.requiredWhen || []),
+    ].filter(Boolean)) {
+      const dependency = fields.find(
+        candidate => candidate.name === condition.fieldName
+      )
+      if (
+        !dependency ||
+        dependency === field ||
+        !['radio', 'select'].includes(dependency.type) ||
+        condition.values.some(
+          value => !dependency.options.some(option => option.value === value)
+        )
+      ) {
+        throw new Error('The public form has an invalid condition reference.')
+      }
+    }
+  }
   const version = Number(definition.version)
   if (!Number.isInteger(version) || version < 1)
     throw new Error('The public form version is invalid.')
@@ -169,7 +294,8 @@ export function normalizePublicFormDefinition(definition) {
   }
 
   const id = boundedText(definition.id, 'Form ID', 100, true)
-  if (!FORM_ID_PATTERN.test(id)) throw new Error('The public form ID is invalid.')
+  if (!FORM_ID_PATTERN.test(id))
+    throw new Error('The public form ID is invalid.')
 
   const introduction = boundedText(
     definition.introduction,
@@ -202,7 +328,9 @@ export function normalizePublicFormDefinition(definition) {
       (!introduction.includes(label) ||
         introduction.indexOf(label) !== introduction.lastIndexOf(label))
     ) {
-      throw new Error('The inline introduction link label must appear once in the introduction.')
+      throw new Error(
+        'The inline introduction link label must appear once in the introduction.'
+      )
     }
     introductionLink = inline ? { label, href, inline: true } : { label, href }
   }
@@ -234,7 +362,7 @@ export function createPublicFormValues(definition) {
   return Object.fromEntries(
     definition.fields.map(field => [
       field.name,
-      field.type === 'checkbox' ? false : '',
+      field.type === 'file' ? [] : field.type === 'checkbox' ? false : '',
     ])
   )
 }
@@ -268,21 +396,47 @@ export function validatePublicFormValues(definition, sourceValues = {}) {
   const values = {}
 
   for (const field of definition.fields) {
+    if (!isPublicFormFieldVisible(field, sourceValues)) {
+      values[field.name] =
+        field.type === 'file' ? [] : field.type === 'checkbox' ? false : ''
+      continue
+    }
+    const required = isPublicFormFieldRequired(field, sourceValues)
     const rawValue = sourceValues[field.name]
     const fieldErrors = []
 
-    if (field.type === 'checkbox') {
+    if (field.type === 'file') {
+      const files = rawValue || []
+      values[field.name] = files
+      if (
+        !Array.isArray(files) ||
+        files.length > field.maxFiles ||
+        files.some(
+          file =>
+            !(file instanceof File) ||
+            !/\.pdf$/i.test(file.name) ||
+            (file.type && file.type !== 'application/pdf') ||
+            file.size > field.maxFileBytes ||
+            file.size === 0
+        ) ||
+        files.reduce((size, file) => size + file.size, 0) >
+          field.maxTotalFileBytes
+      ) {
+        fieldErrors.push(
+          'Upload up to 5 PDF documents, 5 MB each and 10 MB total.'
+        )
+      }
+    } else if (field.type === 'checkbox') {
       const value = rawValue === true
       values[field.name] = value
-      if (field.required && !value)
-        fieldErrors.push(`${field.label} is required.`)
+      if (required && !value) fieldErrors.push(`${field.label} is required.`)
     } else {
       const hasInvalidType = rawValue != null && typeof rawValue !== 'string'
       const value = typeof rawValue === 'string' ? rawValue.trim() : ''
       values[field.name] = field.type === 'email' ? value.toLowerCase() : value
 
       if (hasInvalidType) fieldErrors.push(`${field.label} must be text.`)
-      else if (field.required && !value)
+      else if (required && !value)
         fieldErrors.push(`${field.label} is required.`)
       if (value && field.minLength != null && value.length < field.minLength) {
         fieldErrors.push(