@asd20/ui-next 2.23.0 → 2.23.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/package.json +1 -1
  3. package/src/components/molecules/Asd20TextAreaInput/index.vue +21 -2
  4. package/src/components/molecules/Asd20TextInput/index.vue +21 -2
  5. package/src/components/organisms/Asd20AppHeader/index.vue +83 -52
  6. package/src/components/organisms/Asd20ComposeEmailModal/index.vue +1 -1
  7. package/src/mixins/inputComponentMixin.js +5 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.23.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.1...ui-next-v2.23.2) (2026-09-10)
4
+
5
+ ## [2.23.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.0...ui-next-v2.23.1) (2026-09-09)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * revise api contract for send email help text ([7cb7247](https://github.com/academydistrict20/asd20-ui-next/commit/7cb7247a133fc24f0dc9fbd4e56125bf2b38042e))
11
+ * revise send email subject heading and field colors; revise help text ([8fa8bf3](https://github.com/academydistrict20/asd20-ui-next/commit/8fa8bf379e577d562ba5fba35e60c07a6285bbee))
12
+
3
13
  # [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
14
 
5
15
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asd20/ui-next",
3
- "version": "2.23.0",
3
+ "version": "2.23.2",
4
4
  "private": false,
5
5
  "description": "ASD20 UI component library for Vue 3.",
6
6
  "license": "MIT",
package/src/components/molecules/Asd20TextAreaInput/index.vue CHANGED
@@ -26,8 +26,16 @@
26
26
  <div
27
27
  v-if="computedHelpText"
28
28
  class="asd20-text-area-input__help-text"
29
- v-html="computedHelpText"
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;
package/src/components/molecules/Asd20TextInput/index.vue CHANGED
@@ -22,8 +22,16 @@
22
22
  <div
23
23
  v-if="computedHelpText"
24
24
  class="asd20-text-input__help-text"
25
- v-html="computedHelpText"
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;
package/src/components/organisms/Asd20AppHeader/index.vue CHANGED
@@ -1,31 +1,33 @@
1
1
  <template>
2
- <header class="asd20-app-header">
3
- <div class="asd20-app-header__title">
4
- <asd20-button
5
- class="back-button"
6
- icon="chevron"
7
- :icon-angle="-90"
8
- size="xs"
9
- :label="backLabel"
10
- transparent
11
- horizontal
12
- text-only
13
- :link="backLink"
14
- ></asd20-button>
15
- <div class="icon-and-title">
16
- <asd20-icon
17
- v-if="icon"
18
- :name="icon"
19
- size="md"
20
- />
21
- <h1>{{ title }}</h1>
2
+ <div class="asd20-app-header-shell">
3
+ <asd20-button
4
+ class="back-button"
5
+ icon="chevron"
6
+ :icon-angle="-90"
7
+ size="xs"
8
+ :label="backLabel"
9
+ transparent
10
+ horizontal
11
+ text-only
12
+ :link="backLink"
13
+ />
14
+ <header class="asd20-app-header">
15
+ <div class="asd20-app-header__title">
16
+ <div class="icon-and-title">
17
+ <asd20-icon
18
+ v-if="icon"
19
+ :name="icon"
20
+ size="md"
21
+ />
22
+ <h1>{{ title }}</h1>
23
+ </div>
24
+ <asd20-district-logo link="https://www.asd20.org" />
22
25
  </div>
23
- </div>
24
26
 
25
- <asd20-district-logo link="https://www.asd20.org" />
26
- <!-- <span class="version" v-if="version" v-html="version"></span> -->
27
- <slot />
28
- </header>
27
+ <!-- <span class="version" v-if="version" v-html="version"></span> -->
28
+ <slot />
29
+ </header>
30
+ </div>
29
31
  </template>
30
32
 
31
33
  <script>
@@ -48,6 +50,35 @@ export default {
48
50
 
49
51
  <style lang="scss" scoped>
50
52
  @use '../../../design/component-stack' as *;
53
+
54
+ .asd20-app-header-shell {
55
+ display: flex;
56
+ flex-direction: column;
57
+ flex-shrink: 0;
58
+ min-width: 0;
59
+ background: var(--color__primary);
60
+ color: white;
61
+ .back-button {
62
+ box-sizing: border-box;
63
+ max-width: 100%;
64
+ min-width: 0;
65
+ margin: 0 0 0 0.25rem;
66
+ padding: 0.75rem;
67
+ font-size: 0.875rem !important;
68
+ font-weight: bold;
69
+ & :deep(.asd20-icon) {
70
+ color: white;
71
+ margin-right: 0.25rem;
72
+ }
73
+ & :deep(.asd20-button__label) {
74
+ min-width: 0;
75
+ overflow: hidden;
76
+ text-overflow: ellipsis;
77
+ white-space: nowrap;
78
+ }
79
+ }
80
+ }
81
+
51
82
  .asd20-app-header {
52
83
  position: relative;
53
84
  z-index: 100;
@@ -58,19 +89,27 @@ export default {
58
89
  color: white;
59
90
  flex-wrap: nowrap;
60
91
  border-bottom: 1px solid var(--color__tertiary);
92
+
61
93
  &__title {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: space-between;
97
+ width: 100%;
98
+ min-width: 0;
99
+ padding: 0 0.5rem 0.5rem 0rem;
100
+
62
101
  .icon-and-title {
63
102
  display: flex;
64
103
  align-items: center;
65
- flex-shrink: 0;
66
- padding-bottom: 0.5rem;
104
+ flex: 1 1 auto;
105
+ min-width: 0;
67
106
  padding-right: 0.5rem;
107
+
68
108
  h1 {
69
109
  margin: 0;
70
110
  font-size: 1.2rem;
71
111
  color: var(--color__on-primary);
72
- flex-grow: 1;
73
- width: 100%;
112
+ min-width: 0;
74
113
  /* border-bottom: 1px solid var(--color__tertiary);*/
75
114
  display: flex;
76
115
  align-items: center;
@@ -84,12 +123,15 @@ export default {
84
123
  }
85
124
 
86
125
  .asd20-district-logo {
87
- position: absolute;
88
- right: 0;
126
+ position: static;
127
+ flex: 0 1 10rem;
128
+ min-width: 7.5rem;
129
+ max-width: 10rem;
89
130
  margin-left: auto;
90
- margin-right: space(1);
91
- height: 1.5rem;
92
- padding: 0.75rem 0 0 0;
131
+ margin-right: 0;
132
+ margin-top: 0.15rem;
133
+ padding: 0;
134
+
93
135
  & :deep(svg) {
94
136
  fill: #fff;
95
137
  .district {
@@ -112,34 +154,23 @@ export default {
112
154
  /* order: 2;*/
113
155
  /* }*/
114
156
 
115
- .back-button {
116
- /* width: 100vw;*/
117
- background: var(--color__primary);
118
- /* flex-grow: 1;*/
119
- margin: 0;
120
- order: 0;
121
- font-size: 0.875rem !important;
122
- font-weight: bold;
123
- padding: space(0.5) space(0.5) space(0.5) space(0.5);
124
- color: var(--color__on-primary);
125
- /* margin-bottom: space(-0.5);*/
126
- & :deep(.asd20-icon) {
127
- --line-color: var(--color__on-primary) !important;
128
- }
129
- }
130
157
  }
158
+
131
159
  @media (min-width: 768px) {
132
160
  .asd20-app-header {
133
161
  align-items: flex-end;
162
+
134
163
  &__title {
164
+ padding: 0 1rem 0.5rem 0.5rem;
135
165
  .icon-and-title h1 {
136
166
  font-size: 1.5rem;
137
167
  }
138
168
  }
169
+
139
170
  .asd20-district-logo {
140
- position:block;
141
- padding: 0 0 0.25rem 0;
142
- height: space(1.5);
171
+ flex-basis: 20rem;
172
+ max-width: 20rem;
173
+ margin-top: 0;
143
174
  }
144
175
  }
145
176
  }
package/src/components/organisms/Asd20ComposeEmailModal/index.vue CHANGED
@@ -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
  />
package/src/mixins/inputComponentMixin.js CHANGED
@@ -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