@asd20/ui-next 2.0.27 → 2.0.29

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.0.29](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.28...ui-next-v2.0.29) (2026-04-06)
+
+## [2.0.28](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.27...ui-next-v2.0.28) (2026-04-03)
+
+
+### Bug Fixes
+
+* reinstall send an email functionality ([202c86b](https://github.com/academydistrict20/asd20-ui-next/commit/202c86b028e15121d83484de3fa280770448c46b))
+
 ## [2.0.27](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.26...ui-next-v2.0.27) (2026-04-03)
 
 ## [2.0.26](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.25...ui-next-v2.0.26) (2026-04-03)

package/package.json

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

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

@@ -39,6 +39,7 @@
 import Asd20BodyAccordion from '../../molecules/Asd20BodyAccordion'
 import Asd20TableauEmbed from '../../molecules/Asd20TableauEmbed'
 import { navigateInternalHref } from '../../../helpers/linkPolicy'
+import { applyRichListColumnExceptions } from '../../../helpers/richBodyListColumns'
 
 const BODY_BLOCK_PLACEHOLDER_PATTERN =
   /<div\b(?=[^>]*\bdata-cc-block=(['"])([^'"]+)\1)(?=[^>]*\bdata-block-id=(['"])([^'"]+)\3)[^>]*><\/div>/gi
@@ -146,9 +147,17 @@ export default {
 
   mounted() {
     this.hasMounted = true
+    this.applyListColumnExceptions()
+  },
+
+  updated() {
+    this.applyListColumnExceptions()
   },
 
   methods: {
+    applyListColumnExceptions() {
+      applyRichListColumnExceptions(this.$el)
+    },
     onContentClick(event) {
       const anchor = event.target?.closest?.('a')
 

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

@@ -62,6 +62,7 @@ import Asd20Viewport from '../../atoms/Asd20Viewport'
 import Asd20Spinner from '../../atoms/Asd20Spinner'
 import Asd20Button from '../../atoms/Asd20Button'
 import Recaptcha from '../../utils/Recaptcha'
+import sendEmail from '../../../helpers/sendEmail.js'
 
 export default {
   name: 'Asd20ComposeEmailModal',
@@ -102,6 +103,31 @@ export default {
     },
   },
   methods: {
+    resolveRuntimeConfig() {
+      const runtimeConfig =
+        this.$config ||
+        this.$?.appContext?.config?.globalProperties?.$config ||
+        {}
+
+      if (
+        runtimeConfig.public &&
+        typeof runtimeConfig.public === 'object' &&
+        !Array.isArray(runtimeConfig.public)
+      ) {
+        return runtimeConfig.public
+      }
+
+      return runtimeConfig
+    },
+    resolveSendEmailEndpoint() {
+      const runtimeConfig = this.resolveRuntimeConfig()
+
+      return (
+        runtimeConfig.sendEmailEndpoint ||
+        runtimeConfig.azureSendEmailEndpoint ||
+        null
+      )
+    },
     validateEmailAddress({ value, validationErrors }) {
       const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
       const regex = RegExp(pattern)
@@ -124,13 +150,39 @@ export default {
       if (response) this.sendEmail()
     },
     async sendEmail() {
-      if (!this.isValid || !this.$sendEmail) return
+      if (!this.isValid) return
+
+      const endpoint = this.resolveSendEmailEndpoint()
+      const sendEmailClient =
+        this.$sendEmail ||
+        (endpoint
+          ? async (message) => await sendEmail(message, endpoint)
+          : null)
+
+      if (!sendEmailClient) {
+        console.error('Send email endpoint is not configured.')
+        alert(
+          'Email sending is not configured for this environment. Please try again later.'
+        )
+        return
+      }
+
       this.sending = true
-      await this.$sendEmail(
-        Object.assign({}, this.emailMessage, { recipientId: this.recipientId })
-      )
-      this.sending = false
-      this.$emit('dismiss')
+      try {
+        await sendEmailClient(
+          Object.assign({}, this.emailMessage, {
+            recipientId: this.recipientId,
+          })
+        )
+        this.$emit('dismiss')
+      } catch (error) {
+        console.error('Email send failed:', error?.message || error)
+        alert(
+          'Something went wrong while sending your email. Please try again later.'
+        )
+      } finally {
+        this.sending = false
+      }
     },
   },
 }

package/src/design/_typography.scss

@@ -140,6 +140,13 @@
     flex-basis: 40%;
   }
 
+  .asd20-messaging .asd20-rich-list--single-column {
+    > li:first-child:nth-last-child(n+20),
+    > li:first-child:nth-last-child(n+20) ~ li {
+      flex-basis: 100%;
+    }
+  }
+
   h1,
   h2,
   h3,

package/src/helpers/richBodyListColumns.js

@@ -0,0 +1,48 @@
+export const SINGLE_COLUMN_RICH_LIST_CLASS = 'asd20-rich-list--single-column'
+export const MULTI_COLUMN_LIST_ITEM_THRESHOLD = 20
+export const SIGNIFICANT_LIST_ITEM_TEXT_THRESHOLD = 120
+
+const COMPLEX_DIRECT_CHILD_SELECTOR =
+  'ul, ol, dl, blockquote, pre, table, figure, h1, h2, h3, h4, h5, h6'
+
+function isDomElement(value) {
+  return typeof Element !== 'undefined' && value instanceof Element
+}
+
+function normalizeTextContent(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+export function isSignificantRichListItem(listItem) {
+  if (!isDomElement(listItem)) return false
+
+  if (listItem.querySelector(COMPLEX_DIRECT_CHILD_SELECTOR)) return true
+  if (listItem.children.length > 1) return true
+  if (listItem.querySelectorAll('br').length >= 2) return true
+
+  const textContent = normalizeTextContent(listItem.textContent || '')
+  return textContent.length >= SIGNIFICANT_LIST_ITEM_TEXT_THRESHOLD
+}
+
+export function shouldPreventRichListColumns(listElement) {
+  if (!isDomElement(listElement)) return false
+
+  const listItems = Array.from(listElement.children).filter(
+    child => child.tagName === 'LI'
+  )
+
+  if (listItems.length < MULTI_COLUMN_LIST_ITEM_THRESHOLD) return false
+
+  return listItems.some(isSignificantRichListItem)
+}
+
+export function applyRichListColumnExceptions(rootElement) {
+  if (!isDomElement(rootElement)) return
+
+  rootElement.querySelectorAll('ul, ol').forEach(list => {
+    list.classList.toggle(
+      SINGLE_COLUMN_RICH_LIST_CLASS,
+      shouldPreventRichListColumns(list)
+    )
+  })
+}