@asd20/ui-next 2.24.4 → 2.25.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.25.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.4...ui-next-v2.25.0) (2026-09-21)
+
+
+### Features
+
+* support public form date limits and fallback guidance ([4ef8551](https://github.com/academydistrict20/asd20-ui-next/commit/4ef8551aaa98cf66f48395a9bf98d68f107a0486))
+
 ## [2.24.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.3...ui-next-v2.24.4) (2026-09-17)
 
 

package/package.json

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

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

@@ -25,6 +25,7 @@
       :required="field.required"
       :minlength="field.minLength"
       :maxlength="field.maxLength"
+      :max="dateMaximum"
       :show-character-count="showCharacterCount"
       :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
@@ -123,6 +124,19 @@ import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 import Asd20TextAreaInput from '../Asd20TextAreaInput'
 import Asd20TextInput from '../Asd20TextInput'
 
+function districtToday() {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'America/Denver',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).formatToParts(new Date())
+  const values = Object.fromEntries(
+    parts.map(({ type, value }) => [type, value])
+  )
+  return `${values.year}-${values.month}-${values.day}`
+}
+
 export default {
   name: 'Asd20PublicFormField',
   components: { Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
@@ -141,6 +155,11 @@ export default {
     }
   },
   computed: {
+    dateMaximum() {
+      return this.field.type === 'date' && this.field.maxDate === 'today'
+        ? districtToday()
+        : undefined
+    },
     displayLabel() {
       return this.field.required
         ? `${this.field.label} (required)`

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

@@ -102,7 +102,10 @@
           class="asd20-public-form-modal__fallback"
         >
           <p>
-            If you cannot submit this form, use one of these contact options:
+            {{
+              formDefinition.fallbackContact.instructions ||
+                'If you cannot submit this form, use one of these contact options:'
+            }}
           </p>
           <a
             v-if="formDefinition.fallbackContact.email"

package/src/helpers/publicFormDefinition.js

@@ -34,6 +34,12 @@ function optionalLength(value, label) {
   return value
 }
 
+function optionalMaxDate(value, type) {
+  if (value == null) return undefined
+  if (type === 'date' && value === 'today') return 'today'
+  throw new Error('Maximum date is invalid.')
+}
+
 function normalizeOptions(field) {
   if (!['select', 'radio'].includes(field.type)) return undefined
   if (
@@ -81,6 +87,7 @@ function normalizeField(field) {
     required: field.required === true,
     minLength: optionalLength(field.minLength, 'Minimum length'),
     maxLength: optionalLength(field.maxLength, 'Maximum length'),
+    maxDate: optionalMaxDate(field.maxDate, type),
     autocomplete: boundedText(field.autocomplete, 'Autocomplete value', 100),
     options: undefined,
   }
@@ -134,9 +141,14 @@ export function normalizePublicFormDefinition(definition) {
     }
     const email = boundedText(fallbackContact.email, 'Fallback email', 320)
     const phone = boundedText(fallbackContact.phone, 'Fallback phone', 50)
+    const instructions = boundedText(
+      fallbackContact.instructions,
+      'Fallback instructions',
+      1000
+    )
     if (email && !EMAIL_PATTERN.test(email))
       throw new Error('The public form fallback email is invalid.')
-    normalizedFallback = { email, phone }
+    normalizedFallback = { email, phone, instructions }
   }
 
   const id = boundedText(definition.id, 'Form ID', 100, true)
@@ -183,6 +195,19 @@ function validDate(value) {
   )
 }
 
+function districtToday() {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'America/Denver',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).formatToParts(new Date())
+  const values = Object.fromEntries(
+    parts.map(({ type, value }) => [type, value])
+  )
+  return `${values.year}-${values.month}-${values.day}`
+}
+
 export function validatePublicFormValues(definition, sourceValues = {}) {
   const errors = {}
   const values = {}
@@ -220,6 +245,14 @@ export function validatePublicFormValues(definition, sourceValues = {}) {
       if (value && field.type === 'date' && !validDate(value)) {
         fieldErrors.push(`Enter a valid ${field.label.toLowerCase()}.`)
       }
+      if (
+        value &&
+        field.type === 'date' &&
+        field.maxDate === 'today' &&
+        value > districtToday()
+      ) {
+        fieldErrors.push(`${field.label} cannot be in the future.`)
+      }
       if (value && ['select', 'radio'].includes(field.type)) {
         const allowedValues = new Set(
           (field.options || []).map(option => option.value)