@asd20/ui-next 2.33.2 → 2.34.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Bug Fixes
+
+* limit size of videos in body content; exclude videos and images already in body content from media section ([aba90ce](https://github.com/academydistrict20/asd20-ui-next/commit/aba90ceec4c244a8317cc544972fa753615da982))
+
 ## [2.33.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.1...ui-next-v2.33.2) (2026-10-26)
 
 ## [2.33.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.0...ui-next-v2.33.1) (2026-10-26)

package/package.json

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

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -231,8 +231,9 @@ export default {
   }
 
   :deep(.asd20-message-video) {
-    max-width: 100%;
-    margin: 0.75rem 0;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0.75rem auto;
   }
 
   :deep(.asd20-message-video__description) {

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/Asd20MediaSection/index.vue

@@ -1,22 +1,22 @@
 <template>
   <section
-    v-show="images.length || videos.length"
+    v-if="showImageGallery || remainingMedia.videos.length"
     class="asd20-media-section"
     role="complementary"
   >
     <slot name="before" />
 
     <asd20-image-gallery
-      v-if="allowSingleImageGallery ? images.length > 0 : images.length > 1"
+      v-if="showImageGallery"
       title="Images"
-      :images="images"
+      :images="galleryImages"
     >
     </asd20-image-gallery>
 
     <asd20-videos-section
-      v-if="videos.length > 0"
+      v-if="remainingMedia.videos.length > 0"
       title="Videos"
-      :videos="videos"
+      :videos="remainingMedia.videos"
     >
     </asd20-videos-section>
     <slot />
@@ -25,6 +25,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import excludeBodyMedia from '../../../helpers/excludeBodyMedia'
 
 export default {
   name: 'Asd20MediaSection',
@@ -40,6 +41,26 @@ export default {
     allowSingleImageGallery: { type: Boolean, default: false },
     images: { type: Array, default: () => [] },
     videos: { type: Array, default: () => [] },
+    // Include only messages whose bodies are displayed on this page.
+    bodyMessages: { type: Array, default: () => [] },
+  },
+  computed: {
+    remainingMedia() {
+      return excludeBodyMedia({
+        images: this.images,
+        videos: this.videos,
+        bodyMessages: this.bodyMessages,
+      })
+    },
+    galleryImages() {
+      return this.remainingMedia.images.filter(image => !image.isCover)
+    },
+    showImageGallery() {
+      // Preserve galleries that have one image left after body duplicates
+      // are removed, while retaining the existing single-image opt-in.
+      return this.galleryImages.length > 0 &&
+        (this.allowSingleImageGallery || this.images.length > 1)
+    },
   },
 }
 </script>

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/components/templates/Asd20ArticleDigestCompactTemplate/index.vue

@@ -210,6 +210,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleDigestTemplate/index.vue

@@ -211,6 +211,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleListTemplate/index.vue

@@ -230,6 +230,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleTemplate/index.vue

@@ -95,9 +95,10 @@
     ></asd20-feeds-section> -->
 
     <asd20-media-section
-      v-if="shouldShowArticleMediaSection"
+      v-if="combinedMessageImages.length || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       allow-single-image-gallery
-      :images="articleGalleryImages || []"
+      :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >
     </asd20-media-section>

package/src/components/templates/Asd20CampusDetailTemplate/index.vue

@@ -89,6 +89,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ClubsTemplate/index.vue

@@ -222,6 +222,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -95,6 +95,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailImageFullTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20FileListPageTemplate/index.vue

@@ -90,6 +90,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20GroupFeatureTemplate/index.vue

@@ -91,6 +91,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessagesGroup, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -276,6 +276,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue

@@ -95,6 +95,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -96,6 +96,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/components/templates/Asd20WayfindingTemplate/index.vue

@@ -93,6 +93,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/helpers/excludeBodyMedia.js

@@ -0,0 +1,96 @@
+import { parseFragment } from 'parse5'
+import { buildRichBodyRenderModel } from '../components/atoms/Asd20RichBodyContent/messageDocumentRenderer'
+
+const STORAGE_HOST = 'asd20websitestorage.blob.core.windows.net'
+const RELATIVE_ORIGIN = 'https://ui-next.invalid'
+
+function resourceKey(value) {
+  if (typeof value !== 'string' || !value.trim()) return ''
+  try {
+    const url = new URL(value.trim(), RELATIVE_ORIGIN)
+    if (!['http:', 'https:'].includes(url.protocol)) return ''
+    url.hash = ''
+    // The website media proxy and blob origin serve the same stored files.
+    if (url.pathname.startsWith('/_media/')) {
+      return `storage:${url.pathname.slice('/_media'.length)}${url.search}`
+    }
+    if (url.hostname === STORAGE_HOST) {
+      return `storage:${url.pathname}${url.search}`
+    }
+    return url.href
+  } catch {
+    return ''
+  }
+}
+
+function videoKey(value) {
+  const key = resourceKey(value)
+  if (!key || key.startsWith('storage:')) return key
+  const url = new URL(key)
+  const host = url.hostname.replace(/^www\./, '')
+  if (['youtube.com', 'youtube-nocookie.com', 'youtu.be'].includes(host)) {
+    const id = host === 'youtu.be'
+      ? url.pathname.split('/')[1]
+      : url.searchParams.get('v') || url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/)?.[1]
+    if (id) return `youtube:${id}`
+  }
+  if (['vimeo.com', 'player.vimeo.com'].includes(host)) {
+    const id = url.pathname.match(/^\/(?:video\/)?(\d+)(?:\/|$)/)?.[1]
+    if (id) return `vimeo:${id}`
+  }
+  if (host === 'live.myvrspot.com' && url.searchParams.get('v')) {
+    return `myvrspot:${url.searchParams.get('v')}`
+  }
+  return key
+}
+
+function addSource(sources, value, normalize) {
+  const key = normalize(value)
+  if (key) sources.add(key)
+}
+
+function collectHtmlMedia(html, sources) {
+  const visit = node => {
+    const attrs = Object.fromEntries((node.attrs || []).map(attr => [attr.name, attr.value]))
+    if (node.tagName === 'img') {
+      addSource(sources.images, attrs.src, resourceKey)
+    }
+    if (['iframe', 'video'].includes(node.tagName) ||
+        (node.tagName === 'source' && node.parentNode?.tagName === 'video')) {
+      addSource(sources.videos, attrs.src, videoKey)
+    }
+    for (const child of node.childNodes || []) visit(child)
+  }
+  visit(parseFragment(html || ''))
+}
+
+export default function excludeBodyMedia({ images = [], videos = [], bodyMessages = [] } = {}) {
+  const sources = { images: new Set(), videos: new Set() }
+  for (const message of bodyMessages) {
+    if (!message) continue
+    // Use the renderer's selected content, including its HTML fallback for
+    // invalid/unsupported JSON, rather than inspecting stale saved sidecars.
+    const model = buildRichBodyRenderModel({
+      bodyContent: message.bodyContent || message.bodyHtml || '',
+      bodyJson: message.bodyJson,
+    })
+    for (const node of model.nodes) {
+      if (node.html) collectHtmlMedia(node.html, sources)
+      if (node.type === 'accordion') {
+        for (const item of node.block.items || []) {
+          if (item.contentType !== 'tableau') collectHtmlMedia(item.bodyHtml, sources)
+        }
+      }
+    }
+  }
+
+  return {
+    images: images.filter(image => image && ![
+      image.url,
+      ...(image.files || []).map(file => file?.url),
+    ].some(url => sources.images.has(resourceKey(url)))),
+    videos: videos.filter(video => video && ![
+      video.embedUrl, video.watchUrl, video.url,
+    ].some(url => sources.videos.has(videoKey(url)))),
+  }
+}

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

package/src/mixins/pageTemplateMixin.js

@@ -1,32 +1,6 @@
 import responsiveBreakpointMixin from './responsiveBreakpointMixin'
 import { buildBreadcrumbLinks } from '../helpers/breadcrumbLinks'
 
-function getMessageBodyHtml(message) {
-  return (message && (message.bodyContent || message.bodyHtml)) || ''
-}
-
-function getImageUrls(image) {
-  const urls = []
-  const files = (image && image.files) || []
-  if (image && image.url) urls.push(image.url)
-  files.forEach(file => {
-    if (file && file.url) urls.push(file.url)
-  })
-  return urls
-}
-
-function normalizeHtmlValue(value) {
-  return String(value || '').replace(/&/g, '&')
-}
-
-function imageAppearsInBody(image, bodyHtml) {
-  if (!bodyHtml) return false
-  const normalizedBodyHtml = normalizeHtmlValue(bodyHtml)
-  return getImageUrls(image).some(url =>
-    normalizedBodyHtml.includes(normalizeHtmlValue(url))
-  )
-}
-
 export default {
   mixins: [responsiveBreakpointMixin],
 
@@ -270,24 +244,6 @@ export default {
       }, [])
     },
 
-    articleGalleryImages() {
-      const messageBodies = (this.primaryDetailMessages || [])
-        .map(getMessageBodyHtml)
-        .filter(Boolean)
-
-      return this.combinedMessageImages.filter(image => {
-        if (!image || image.isCover) return false
-        return !messageBodies.some(bodyHtml => imageAppearsInBody(image, bodyHtml))
-      })
-    },
-
-    shouldShowArticleMediaSection() {
-      return (
-        this.articleGalleryImages.length > 0 ||
-        this.combinedMessageVideos.length > 0
-      )
-    },
-
     combinedMessageVideos() {
       return (this.messages || []).reduce((a, m) => {
         const videos = m.videos || []