@asd20/ui-next 2.0.8 → 2.0.10

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.0.10](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.9...ui-next-v2.0.10) (2026-03-30)
+
+
+### Bug Fixes
+
+* fix(media-section): wrap async child imports with defineAsyncComponent to prevent Promise text render ([65aa8f1](https://github.com/academydistrict20/asd20-ui-next/commit/65aa8f1b8b7db731d565a8996618d482fd59bc47))
+
+## [2.0.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.8...ui-next-v2.0.9) (2026-03-30)
+
 ## [2.0.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.7...ui-next-v2.0.8) (2026-03-30)
 
 

package/package.json

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

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

@@ -24,13 +24,17 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
+
 export default {
   name: 'Asd20MediaSection',
   components: {
-    Asd20ImageGallery: () =>
-      import('../../../components/organisms/Asd20ImageGallery'),
-    Asd20VideosSection: () =>
-      import('../../../components/organisms/Asd20VideosSection'),
+    Asd20ImageGallery: defineAsyncComponent(() =>
+      import('../../../components/organisms/Asd20ImageGallery')
+    ),
+    Asd20VideosSection: defineAsyncComponent(() =>
+      import('../../../components/organisms/Asd20VideosSection')
+    ),
   },
   props: {
     images: { type: Array, default: () => [] },

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

@@ -94,8 +94,8 @@
     ></asd20-feeds-section> -->
 
     <asd20-media-section
-      v-if="(combinedMessageImages.length > 1 || combinedMessageVideos.length) && !primaryDetailMessages[0].bodyHtml.includes('<img')"
-      :images="combinedMessageImages || []"
+      v-if="shouldShowArticleMediaSection"
+      :images="articleGalleryImages || []"
       :videos="combinedMessageVideos || []"
     >
     </asd20-media-section>

package/src/mixins/pageTemplateMixin.js

@@ -1,5 +1,31 @@
 import responsiveBreakpointMixin from './responsiveBreakpointMixin'
 
+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],
 
@@ -212,6 +238,24 @@ 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 >= 3 ||
+        this.combinedMessageVideos.length > 0
+      )
+    },
+
     combinedMessageVideos() {
       return (this.messages || []).reduce((a, m) => {
         const videos = m.videos || []