@asd20/ui-next 2.23.0 → 2.23.1
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 +8 -0
- package/package.json +1 -1
- package/src/components/molecules/Asd20TextAreaInput/index.vue +21 -2
- package/src/components/molecules/Asd20TextInput/index.vue +21 -2
- package/src/components/organisms/Asd20ComposeEmailModal/index.vue +1 -1
- package/src/mixins/inputComponentMixin.js +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.23.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.0...ui-next-v2.23.1) (2026-09-09)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* revise api contract for send email help text ([7cb7247](https://github.com/academydistrict20/asd20-ui-next/commit/7cb7247a133fc24f0dc9fbd4e56125bf2b38042e))
|
|
9
|
+
* revise send email subject heading and field colors; revise help text ([8fa8bf3](https://github.com/academydistrict20/asd20-ui-next/commit/8fa8bf379e577d562ba5fba35e60c07a6285bbee))
|
|
10
|
+
|
|
3
11
|
# [2.23.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.4...ui-next-v2.23.0) (2026-09-08)
|
|
4
12
|
|
|
5
13
|
|
package/package.json
CHANGED
|
@@ -26,8 +26,16 @@
|
|
|
26
26
|
<div
|
|
27
27
|
v-if="computedHelpText"
|
|
28
28
|
class="asd20-text-area-input__help-text"
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
>
|
|
30
|
+
<span
|
|
31
|
+
v-if="helpText"
|
|
32
|
+
v-html="helpText"
|
|
33
|
+
/>
|
|
34
|
+
<span
|
|
35
|
+
v-if="maxLength !== null"
|
|
36
|
+
class="asd20-text-area-input__character-count"
|
|
37
|
+
>{{ characterCountText }}</span>
|
|
38
|
+
</div>
|
|
31
39
|
<div
|
|
32
40
|
v-for="(v, index) in validationErrors"
|
|
33
41
|
:key="index"
|
|
@@ -136,11 +144,22 @@ $input-focus-color: var(--color__accent-t50);
|
|
|
136
144
|
}
|
|
137
145
|
|
|
138
146
|
&__help-text {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: baseline;
|
|
149
|
+
justify-content: space-between;
|
|
150
|
+
gap: space(0.25);
|
|
151
|
+
width: 100%;
|
|
139
152
|
color: var(--website-card__reverse-background-color);
|
|
140
153
|
font-size: 0.75rem;
|
|
141
154
|
margin-top: space(0.125);
|
|
142
155
|
}
|
|
143
156
|
|
|
157
|
+
&__character-count {
|
|
158
|
+
margin-left: auto;
|
|
159
|
+
text-align: right;
|
|
160
|
+
white-space: nowrap;
|
|
161
|
+
}
|
|
162
|
+
|
|
144
163
|
&__validation-error {
|
|
145
164
|
color: var(--color__danger-s20);
|
|
146
165
|
font-size: 0.75rem;
|
|
@@ -22,8 +22,16 @@
|
|
|
22
22
|
<div
|
|
23
23
|
v-if="computedHelpText"
|
|
24
24
|
class="asd20-text-input__help-text"
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
>
|
|
26
|
+
<span
|
|
27
|
+
v-if="helpText"
|
|
28
|
+
v-html="helpText"
|
|
29
|
+
/>
|
|
30
|
+
<span
|
|
31
|
+
v-if="maxLength !== null"
|
|
32
|
+
class="asd20-text-input__character-count"
|
|
33
|
+
>{{ characterCountText }}</span>
|
|
34
|
+
</div>
|
|
27
35
|
<div
|
|
28
36
|
v-for="(v, index) in validationErrors"
|
|
29
37
|
:key="index"
|
|
@@ -129,11 +137,22 @@ $input-focus-color: var(--color__accent-t50);
|
|
|
129
137
|
}
|
|
130
138
|
|
|
131
139
|
&__help-text {
|
|
140
|
+
display: flex;
|
|
141
|
+
align-items: baseline;
|
|
142
|
+
justify-content: space-between;
|
|
143
|
+
gap: space(0.25);
|
|
144
|
+
width: 100%;
|
|
132
145
|
color: var(--website-card__reverse-background-color);
|
|
133
146
|
font-size: 0.75rem;
|
|
134
147
|
margin-top: space(0.125);
|
|
135
148
|
}
|
|
136
149
|
|
|
150
|
+
&__character-count {
|
|
151
|
+
margin-left: auto;
|
|
152
|
+
text-align: right;
|
|
153
|
+
white-space: nowrap;
|
|
154
|
+
}
|
|
155
|
+
|
|
137
156
|
&__validation-error {
|
|
138
157
|
color: var(--color__danger-s20);
|
|
139
158
|
font-size: 0.75rem;
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
v-model="emailMessage.subject"
|
|
31
31
|
label="Subject"
|
|
32
32
|
maxlength="200"
|
|
33
|
-
required
|
|
34
33
|
aria-required="true"
|
|
35
34
|
@validated="validationErrors.subject = $event"
|
|
36
35
|
/>
|
|
@@ -39,6 +38,7 @@
|
|
|
39
38
|
v-model="emailMessage.messageBody"
|
|
40
39
|
label="Message"
|
|
41
40
|
help-text="All fields are required."
|
|
41
|
+
maxlength="8000"
|
|
42
42
|
aria-required="true"
|
|
43
43
|
@validated="validationErrors.messageBody = $event"
|
|
44
44
|
/>
|
|
@@ -119,13 +119,14 @@ export default {
|
|
|
119
119
|
|
|
120
120
|
computedHelpText() {
|
|
121
121
|
if (this.maxLength !== null) {
|
|
122
|
-
return (
|
|
123
|
-
this.helpText +
|
|
124
|
-
`${(this.resolvedValue || '').length}/${this.maxLength} characters.`
|
|
125
|
-
)
|
|
122
|
+
return [this.helpText, this.characterCountText].filter(Boolean).join(' ')
|
|
126
123
|
}
|
|
127
124
|
return this.helpText
|
|
128
125
|
},
|
|
126
|
+
characterCountText() {
|
|
127
|
+
if (this.maxLength === null) return ''
|
|
128
|
+
return `${(this.resolvedValue || '').length}/${this.maxLength}`
|
|
129
|
+
},
|
|
129
130
|
maxLength() {
|
|
130
131
|
if (!Object.prototype.hasOwnProperty.call(this.$attrs, 'maxlength')) {
|
|
131
132
|
return null
|