@asd20/ui-next 2.21.1 → 2.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.21.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.1...ui-next-v2.21.2) (2026-08-12)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * constrain single message images to message container ([18a1065](https://github.com/academydistrict20/asd20-ui-next/commit/18a1065ab9295e377c2ae9e879fe8ef557d0d396))
9
+
3
10
  ## [2.21.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.0...ui-next-v2.21.1) (2026-08-12)
4
11
 
5
12
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asd20/ui-next",
3
- "version": "2.21.1",
3
+ "version": "2.21.2",
4
4
  "private": false,
5
5
  "description": "ASD20 UI component library for Vue 3.",
6
6
  "license": "MIT",
@@ -158,6 +158,15 @@ export default {
158
158
  margin-bottom: 0;
159
159
  }
160
160
 
161
+ :deep(.asd20-message-image) {
162
+ box-sizing: border-box;
163
+ display: block;
164
+ max-width: 100%;
165
+ height: auto;
166
+ margin: 1rem auto;
167
+ object-fit: contain;
168
+ }
169
+
161
170
  :deep(.asd20-message-image-gallery) {
162
171
  box-sizing: border-box;
163
172
  max-width: 100%;
@@ -771,8 +771,8 @@ function renderTable(node) {
771
771
  )}</tbody></table></div>`
772
772
  }
773
773
 
774
- function renderImage(attrs) {
775
- return `<img${attribute('src', attrs.src)}${attribute(
774
+ function renderImage(attrs, className = '') {
775
+ return `<img${attribute('class', className)}${attribute('src', attrs.src)}${attribute(
776
776
  'alt',
777
777
  attrs.alt,
778
778
  true
@@ -811,11 +811,11 @@ function renderStandardNode(node) {
811
811
  }
812
812
  if (node.type === 'listItem') return `<li>${renderChildren(node)}</li>`
813
813
  if (node.type === 'image') {
814
- return renderImage(node.attrs)
814
+ return renderImage(node.attrs, 'asd20-message-image')
815
815
  }
816
816
  if (node.type === 'imageGallery') {
817
817
  return `<figure class="asd20-message-image-gallery" data-cc-node="image-gallery"><div class="asd20-message-image-gallery__images" data-cc-gallery-images="">${node.attrs.images
818
- .map(renderImage)
818
+ .map(image => renderImage(image))
819
819
  .join('')}</div></figure>`
820
820
  }
821
821
  if (node.type === 'videoEmbed') {