@asd20/ui-next 2.33.3 → 2.34.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.34.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.3...ui-next-v2.34.0) (2026-10-28)
+
+
+### Features
+
+* support checkbox groups for school transfer records ([9596d21](https://github.com/academydistrict20/asd20-ui-next/commit/9596d21fea018afec4c03de64471549cb77e9487))
+
 ## [2.33.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.2...ui-next-v2.33.3) (2026-10-27)
 
 

package/package.json

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

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

@@ -149,6 +149,32 @@
       </label>
     </fieldset>
 
+    <fieldset
+      v-else-if="field.type === 'checkbox-group'"
+      :id="inputId"
+      class="asd20-public-form-field__choices"
+      tabindex="-1"
+      :aria-describedby="describedBy"
+      :aria-invalid="hasErrors ? 'true' : undefined"
+    >
+      <legend>{{ displayLabel }}</legend>
+      <label
+        v-for="option in field.options"
+        :key="option.value"
+        :for="`${inputId}-${option.value}`"
+      >
+        <input
+          :id="`${inputId}-${option.value}`"
+          :name="inputId"
+          type="checkbox"
+          :value="option.value"
+          :checked="Array.isArray(modelValue) && modelValue.includes(option.value)"
+          @change="toggleChoice(option.value, $event.target.checked)"
+        />
+        <span>{{ option.label }}</span>
+      </label>
+    </fieldset>
+
     <asd20-checkbox
       v-else-if="field.type === 'checkbox'"
       :id="inputId"
@@ -276,6 +302,12 @@ export default {
     },
   },
   methods: {
+    toggleChoice(value, checked) {
+      const selected = Array.isArray(this.modelValue) ? this.modelValue : []
+      this.$emit('update:modelValue', checked
+        ? [...selected.filter(choice => choice !== value), value]
+        : selected.filter(choice => choice !== value))
+    },
     addFiles(event) {
       const addedFiles = Array.from(event.target.files || [])
       if (addedFiles.length) {
@@ -407,7 +439,8 @@ export default {
     align-items: flex-start;
   }
 
-  &__choices input[type='radio'] {
+  &__choices input[type='radio'],
+  &__choices input[type='checkbox'] {
     flex: 0 0 auto;
     margin: 0;
   }

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

@@ -410,7 +410,7 @@ export default {
       for (const field of this.formDefinition.fields) {
         if (!isPublicFormFieldVisible(field, this.values)) {
           this.values[field.name] =
-            field.type === 'checkbox' ? false : field.type === 'file' ? [] : ''
+            field.type === 'checkbox' ? false : ['file', 'checkbox-group'].includes(field.type) ? [] : ''
         }
       }
       if (this.validationAttempted) this.validate(false)

package/src/helpers/publicFormDefinition.js

@@ -7,6 +7,7 @@ export const SUPPORTED_PUBLIC_FORM_FIELD_TYPES = Object.freeze([
   'select',
   'radio',
   'checkbox',
+  'checkbox-group',
   'file',
 ])
 
@@ -48,7 +49,7 @@ function optionalBoolean(value, label) {
 }
 
 function normalizeOptions(field) {
-  if (!['select', 'radio'].includes(field.type)) return undefined
+  if (!['select', 'radio', 'checkbox-group'].includes(field.type)) return undefined
   if (
     !Array.isArray(field.options) ||
     !field.options.length ||
@@ -184,17 +185,19 @@ function normalizeConditions(conditions) {
   return conditions.map(normalizeCondition)
 }
 
+function matchesCondition(condition, values) {
+  const value = values[condition.fieldName]
+  return Array.isArray(value)
+    ? value.some(choice => condition.values.includes(choice))
+    : condition.values.includes(String(value || '').trim())
+}
+
 export function isPublicFormFieldVisible(field, values) {
-  return (
-    !field.visibleWhen ||
-    field.visibleWhen.values.includes(String(values[field.visibleWhen.fieldName] || '').trim())
-  )
+  return !field.visibleWhen || matchesCondition(field.visibleWhen, values)
 }
 
 export function isPublicFormFieldRequired(field, values) {
-  const required = field.required || field.requiredWhen?.some(condition =>
-    condition.values.includes(String(values[condition.fieldName] || '').trim())
-  )
+  const required = field.required || field.requiredWhen?.some(condition => matchesCondition(condition, values))
   const uploaded = field.requiredUnlessUploaded &&
     Array.isArray(values[field.requiredUnlessUploaded]) &&
     values[field.requiredUnlessUploaded].length > 0
@@ -268,8 +271,8 @@ export function normalizePublicFormDefinition(definition) {
       )
       if (
         !dependency ||
-        dependency === field ||
-        !['radio', 'select'].includes(dependency.type) ||
+        fields.indexOf(dependency) >= fields.indexOf(field) ||
+        !['radio', 'select', 'checkbox-group'].includes(dependency.type) ||
         condition.values.some(
           value => !dependency.options.some(option => option.value === value)
         )
@@ -369,7 +372,7 @@ export function createPublicFormValues(definition) {
   return Object.fromEntries(
     definition.fields.map(field => [
       field.name,
-      field.type === 'file' ? [] : field.type === 'checkbox' ? false : '',
+      ['file', 'checkbox-group'].includes(field.type) ? [] : field.type === 'checkbox' ? false : '',
     ])
   )
 }
@@ -403,9 +406,9 @@ export function validatePublicFormValues(definition, sourceValues = {}) {
   const values = {}
 
   for (const field of definition.fields) {
-    if (!isPublicFormFieldVisible(field, sourceValues)) {
+    if (!isPublicFormFieldVisible(field, values)) {
       values[field.name] =
-        field.type === 'file' ? [] : field.type === 'checkbox' ? false : ''
+        ['file', 'checkbox-group'].includes(field.type) ? [] : field.type === 'checkbox' ? false : ''
       continue
     }
     const required = isPublicFormFieldRequired(field, sourceValues)
@@ -433,6 +436,21 @@ export function validatePublicFormValues(definition, sourceValues = {}) {
           'Upload up to 5 PDF documents, 5 MB each and 10 MB total.'
         )
       }
+    } else if (field.type === 'checkbox-group') {
+      const selected = rawValue == null ? [] : rawValue
+      const allowed = new Set((field.options || []).map(option => option.value))
+      if (
+        !Array.isArray(selected) ||
+        selected.length > allowed.size ||
+        selected.some(choice => typeof choice !== 'string' || !allowed.has(choice)) ||
+        new Set(selected).size !== selected.length
+      ) {
+        values[field.name] = []
+        fieldErrors.push(`Select valid choices for ${field.label.toLowerCase()}.`)
+      } else {
+        values[field.name] = [...selected]
+        if (required && !selected.length) fieldErrors.push(`${field.label} is required.`)
+      }
     } else if (field.type === 'checkbox') {
       const value = rawValue === true
       values[field.name] = value