@webitel/ui-sdk 2.0.12 → 2.0.13
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/dist/img/sprite/index.js +1 -1
- package/dist/img/sprite/tts-download.svg +5 -0
- package/dist/ui-sdk.common.js +24 -11
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +22 -9
- package/dist/ui-sdk.umd.js.map +1 -1
- package/dist/ui-sdk.umd.min.js +2 -2
- package/dist/ui-sdk.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/wt-textarea/wt-textarea.vue +27 -2
package/package.json
CHANGED
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
class="wt-textarea"
|
|
4
4
|
:class="{
|
|
5
5
|
'wt-textarea--disabled': disabled,
|
|
6
|
-
|
|
6
|
+
'wt-textarea--invalid': invalid,
|
|
7
|
+
}"
|
|
7
8
|
>
|
|
8
9
|
<wt-label
|
|
9
10
|
:for="name"
|
|
10
11
|
:disabled="disabled"
|
|
12
|
+
:invalid="invalid"
|
|
11
13
|
v-bind="labelProps"
|
|
12
14
|
>
|
|
13
15
|
<!-- @slot Custom input label -->
|
|
14
|
-
<slot name="label" v-bind="{ label }">{{
|
|
16
|
+
<slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
|
|
15
17
|
</wt-label>
|
|
16
18
|
<div class="wt-textarea__wrapper">
|
|
17
19
|
<textarea
|
|
@@ -35,12 +37,20 @@
|
|
|
35
37
|
></wt-icon-btn>
|
|
36
38
|
</div>
|
|
37
39
|
</div>
|
|
40
|
+
<wt-input-info
|
|
41
|
+
v-if="isValidation"
|
|
42
|
+
:invalid="invalid"
|
|
43
|
+
>{{ validationText }}
|
|
44
|
+
</wt-input-info>
|
|
38
45
|
</div>
|
|
39
46
|
</template>
|
|
40
47
|
|
|
41
48
|
<script>
|
|
49
|
+
import validationMixin from '../../../mixins/validationMixin/validationMixin';
|
|
50
|
+
|
|
42
51
|
export default {
|
|
43
52
|
name: 'wt-textarea',
|
|
53
|
+
mixins: [validationMixin],
|
|
44
54
|
props: {
|
|
45
55
|
/**
|
|
46
56
|
* Current textarea value (`v-model`)
|
|
@@ -95,6 +105,10 @@
|
|
|
95
105
|
keypress: (event) => this.handleKeypress(event),
|
|
96
106
|
};
|
|
97
107
|
},
|
|
108
|
+
|
|
109
|
+
requiredLabel() {
|
|
110
|
+
return this.required ? `${this.label}*` : this.label;
|
|
111
|
+
},
|
|
98
112
|
},
|
|
99
113
|
|
|
100
114
|
methods: {
|
|
@@ -139,6 +153,11 @@
|
|
|
139
153
|
.wt-textarea:focus-within & {
|
|
140
154
|
color: var(--form-label--hover-color);
|
|
141
155
|
}
|
|
156
|
+
|
|
157
|
+
.wt-textarea--invalid:hover &,
|
|
158
|
+
.wt-textarea--invalid:focus-within & {
|
|
159
|
+
color: var(--label--invalid-color);
|
|
160
|
+
}
|
|
142
161
|
}
|
|
143
162
|
|
|
144
163
|
.wt-textarea__textarea {
|
|
@@ -169,6 +188,12 @@
|
|
|
169
188
|
background: var(--form-border--disabled-color);
|
|
170
189
|
border-color: var(--form-border--disabled-color);
|
|
171
190
|
}
|
|
191
|
+
|
|
192
|
+
.wt-textarea--invalid &,
|
|
193
|
+
.wt-textarea--invalid:hover & {
|
|
194
|
+
border-color: var(--false-color);
|
|
195
|
+
outline: none; // prevent outline overlapping false color
|
|
196
|
+
}
|
|
172
197
|
}
|
|
173
198
|
|
|
174
199
|
/* make icons black */
|