adata-ui 0.1.85 → 0.1.88
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/adata-ui.common.js +49 -24
- package/dist/adata-ui.common.js.map +1 -1
- package/dist/adata-ui.css +1 -1
- package/dist/adata-ui.umd.js +49 -24
- package/dist/adata-ui.umd.js.map +1 -1
- package/dist/adata-ui.umd.min.js +1 -1
- package/dist/adata-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/_text_field.scss +57 -23
- package/src/components/PasswordField/PasswordField.vue +6 -1
- package/src/components/SearchTextField/SearchTextField.stories.js +44 -0
- package/src/components/SearchTextField/SearchTextField.vue +6 -1
- package/src/components/TextArea/TextArea.vue +16 -6
- package/src/components/TextField/TextField.vue +6 -1
package/package.json
CHANGED
|
@@ -56,13 +56,14 @@
|
|
|
56
56
|
&__field {
|
|
57
57
|
position: relative;
|
|
58
58
|
overflow: hidden;
|
|
59
|
-
@media(max-width: 1025px) {
|
|
59
|
+
@media (max-width: 1025px) {
|
|
60
60
|
width: 100%;
|
|
61
61
|
display: flex;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
&__input,
|
|
65
|
+
&__input,
|
|
66
|
+
&__textarea textarea {
|
|
66
67
|
background: #ffffff;
|
|
67
68
|
border: 0.5px solid #c4c4c4;
|
|
68
69
|
box-sizing: border-box;
|
|
@@ -70,10 +71,10 @@
|
|
|
70
71
|
width: 100%;
|
|
71
72
|
height: 40px;
|
|
72
73
|
font-size: 14px;
|
|
73
|
-
color: #
|
|
74
|
+
color: #1a2030;
|
|
74
75
|
padding: 19px 40px 5px 16px;
|
|
75
76
|
transition: 0.3s all;
|
|
76
|
-
@media(max-width: 1025px) {
|
|
77
|
+
@media (max-width: 1025px) {
|
|
77
78
|
padding: 19px 36px 7px 12px;
|
|
78
79
|
height: 40px;
|
|
79
80
|
font-size: 12px;
|
|
@@ -85,28 +86,58 @@
|
|
|
85
86
|
&:not(:-webkit-autofill):valid ~ #{$self}__label {
|
|
86
87
|
top: 12px;
|
|
87
88
|
font-size: 10px;
|
|
88
|
-
color: #
|
|
89
|
+
color: #71757a;
|
|
89
90
|
text-overflow: inherit;
|
|
90
91
|
width: 100%;
|
|
91
|
-
@media(max-width: 1025px) {
|
|
92
|
+
@media (max-width: 1025px) {
|
|
92
93
|
font-size: 8px;
|
|
93
94
|
}
|
|
94
95
|
}
|
|
95
96
|
&:hover {
|
|
96
|
-
border: 0.5px solid #
|
|
97
|
+
border: 0.5px solid #2c3e50;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
&:focus {
|
|
100
|
-
border: 0.5px solid #
|
|
101
|
+
border: 0.5px solid #2c3e50;
|
|
101
102
|
}
|
|
102
103
|
|
|
103
104
|
&::placeholder {
|
|
104
105
|
font-size: 12px;
|
|
105
106
|
}
|
|
107
|
+
}
|
|
106
108
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
+
&__textarea {
|
|
110
|
+
border: 0.5px solid #c4c4c4;
|
|
111
|
+
height: 120px;
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: column;
|
|
114
|
+
justify-content: flex-end;
|
|
115
|
+
position: relative;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
&--error {
|
|
118
|
+
border: none;
|
|
119
|
+
border: 0.5px solid #ff2e43;
|
|
109
120
|
background: #ff2e431f;
|
|
121
|
+
textarea {
|
|
122
|
+
background: transparent;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
&:focus,
|
|
126
|
+
&:hover {
|
|
127
|
+
border: 0.5px solid #2c3e50;
|
|
128
|
+
}
|
|
129
|
+
textarea {
|
|
130
|
+
border: none;
|
|
131
|
+
height: 92px;
|
|
132
|
+
padding: 0 40px 5px 16px;
|
|
133
|
+
resize: none;
|
|
134
|
+
&:focus,
|
|
135
|
+
&:hover {
|
|
136
|
+
border: none;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
.adt-text-block__label {
|
|
140
|
+
top: 20px;
|
|
110
141
|
}
|
|
111
142
|
}
|
|
112
143
|
|
|
@@ -120,21 +151,16 @@
|
|
|
120
151
|
overflow: hidden;
|
|
121
152
|
line-height: 40px;
|
|
122
153
|
transition: 0.3s;
|
|
123
|
-
color: #
|
|
154
|
+
color: #71757a;
|
|
124
155
|
font-size: 14px;
|
|
125
|
-
@media(max-width: 1025px) {
|
|
156
|
+
@media (max-width: 1025px) {
|
|
126
157
|
left: 12px;
|
|
127
158
|
font-size: 14px;
|
|
128
159
|
line-height: 16px;
|
|
129
|
-
color: #
|
|
160
|
+
color: #71757a;
|
|
130
161
|
}
|
|
131
162
|
}
|
|
132
163
|
|
|
133
|
-
&__textarea {
|
|
134
|
-
min-height: 120px;
|
|
135
|
-
resize: none;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
164
|
&__textarea + label {
|
|
139
165
|
top: 20px;
|
|
140
166
|
}
|
|
@@ -159,7 +185,7 @@
|
|
|
159
185
|
}
|
|
160
186
|
|
|
161
187
|
&__required {
|
|
162
|
-
color: #
|
|
188
|
+
color: #ff2e43;
|
|
163
189
|
}
|
|
164
190
|
|
|
165
191
|
&__options {
|
|
@@ -171,9 +197,8 @@
|
|
|
171
197
|
z-index: 1000;
|
|
172
198
|
border-radius: 2px;
|
|
173
199
|
padding: 8px 0;
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
200
|
+
max-height: 250px;
|
|
201
|
+
overflow: auto;
|
|
177
202
|
|
|
178
203
|
#searchVariant {
|
|
179
204
|
background: #eef0f5;
|
|
@@ -188,7 +213,7 @@
|
|
|
188
213
|
color: #71757a;
|
|
189
214
|
transition: 0.3s all;
|
|
190
215
|
cursor: pointer;
|
|
191
|
-
@media(max-width: 1025px) {
|
|
216
|
+
@media (max-width: 1025px) {
|
|
192
217
|
font-size: 12px;
|
|
193
218
|
}
|
|
194
219
|
|
|
@@ -196,5 +221,14 @@
|
|
|
196
221
|
background: #eef0f5;
|
|
197
222
|
}
|
|
198
223
|
}
|
|
224
|
+
&::-webkit-scrollbar {
|
|
225
|
+
width: 4px;
|
|
226
|
+
&-thumb {
|
|
227
|
+
background: #c4c4c4;
|
|
228
|
+
}
|
|
229
|
+
&-track {
|
|
230
|
+
background: #fff;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
199
233
|
}
|
|
200
234
|
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<div class="adt-text-block">
|
|
3
3
|
<div class="adt-text-block__field">
|
|
4
4
|
<input
|
|
5
|
+
:id="id"
|
|
5
6
|
ref="input"
|
|
6
7
|
:type="type"
|
|
7
8
|
:value="value"
|
|
@@ -10,7 +11,7 @@
|
|
|
10
11
|
class="adt-text-block__input"
|
|
11
12
|
:class="{ error: !!errorText }"
|
|
12
13
|
/>
|
|
13
|
-
<label class="adt-text-block__label">{{ label }}</label>
|
|
14
|
+
<label :for="id" class="adt-text-block__label">{{ label }}</label>
|
|
14
15
|
<div v-if="showPassword" @click="showPassword = false" class="adt-text-block__icon desktop">
|
|
15
16
|
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.992 511.992" id="openedEye">
|
|
16
17
|
<path
|
|
@@ -47,6 +48,10 @@ import '../../assets/style.scss';
|
|
|
47
48
|
export default {
|
|
48
49
|
name: "PasswordField",
|
|
49
50
|
props: {
|
|
51
|
+
id: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: ""
|
|
54
|
+
},
|
|
50
55
|
errorText: {
|
|
51
56
|
type: String,
|
|
52
57
|
default: ""
|
|
@@ -25,6 +25,50 @@ WithIcon.args = {
|
|
|
25
25
|
id: 1,
|
|
26
26
|
name: "a"
|
|
27
27
|
},
|
|
28
|
+
{
|
|
29
|
+
id: 2,
|
|
30
|
+
name: "b"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
id: 2,
|
|
34
|
+
name: "b"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
id: 2,
|
|
38
|
+
name: "b"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
id: 2,
|
|
42
|
+
name: "b"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
id: 2,
|
|
46
|
+
name: "b"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
id: 2,
|
|
50
|
+
name: "b"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: 2,
|
|
54
|
+
name: "b"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 2,
|
|
58
|
+
name: "b"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
id: 2,
|
|
62
|
+
name: "b"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
id: 2,
|
|
66
|
+
name: "b"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
id: 2,
|
|
70
|
+
name: "b"
|
|
71
|
+
},
|
|
28
72
|
{
|
|
29
73
|
id: 2,
|
|
30
74
|
name: "b"
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
>
|
|
7
7
|
<div :class="['adt-text-block__field', { error: !!errorText }]">
|
|
8
8
|
<input
|
|
9
|
+
:id="id"
|
|
9
10
|
ref="input"
|
|
10
11
|
:type="type"
|
|
11
12
|
:value="value"
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
class="adt-text-block__input"
|
|
20
21
|
:class="{ error: !!errorText }"
|
|
21
22
|
/>
|
|
22
|
-
<label class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
|
|
23
|
+
<label :for="id" class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
|
|
23
24
|
{{ label }}
|
|
24
25
|
</label>
|
|
25
26
|
<div
|
|
@@ -101,6 +102,10 @@ export default {
|
|
|
101
102
|
clickOutside: vClickOutside.directive,
|
|
102
103
|
},
|
|
103
104
|
props: {
|
|
105
|
+
id: {
|
|
106
|
+
type: String,
|
|
107
|
+
default: ""
|
|
108
|
+
},
|
|
104
109
|
errorText: {
|
|
105
110
|
type: String,
|
|
106
111
|
default: "",
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="adt-text-
|
|
3
|
-
<div
|
|
2
|
+
<div class="adt-text-block__wrapper">
|
|
3
|
+
<div
|
|
4
|
+
class="adt-text-block__textarea"
|
|
5
|
+
:class="{ 'adt-text-block__textarea--error': !!errorText }"
|
|
6
|
+
>
|
|
4
7
|
<textarea
|
|
8
|
+
:id="id"
|
|
5
9
|
ref="textarea"
|
|
6
10
|
:type="type"
|
|
7
11
|
:value="value"
|
|
@@ -9,10 +13,12 @@
|
|
|
9
13
|
required
|
|
10
14
|
@input="$emit('input', $event.target.value)"
|
|
11
15
|
@keyup.enter="enterPressed"
|
|
12
|
-
class="adt-text-block__textarea"
|
|
13
|
-
:class="{ error: !!errorText }"
|
|
14
16
|
/>
|
|
15
|
-
<label
|
|
17
|
+
<label
|
|
18
|
+
:for="id"
|
|
19
|
+
class="adt-text-block__label"
|
|
20
|
+
:class="{ 'adt-text-block--ellipsis': isEllipsis }"
|
|
21
|
+
>
|
|
16
22
|
{{ label }}
|
|
17
23
|
<span v-if="required" class="adt-text-block__required">*</span>
|
|
18
24
|
</label>
|
|
@@ -67,6 +73,10 @@ import "../../assets/style.scss";
|
|
|
67
73
|
export default {
|
|
68
74
|
name: "TextArea",
|
|
69
75
|
props: {
|
|
76
|
+
id: {
|
|
77
|
+
type: String,
|
|
78
|
+
default: ""
|
|
79
|
+
},
|
|
70
80
|
errorText: {
|
|
71
81
|
type: String,
|
|
72
82
|
default: "",
|
|
@@ -98,7 +108,7 @@ export default {
|
|
|
98
108
|
isEllipsis: {
|
|
99
109
|
type: Boolean,
|
|
100
110
|
default: false,
|
|
101
|
-
}
|
|
111
|
+
},
|
|
102
112
|
},
|
|
103
113
|
data() {
|
|
104
114
|
return {
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<div class="adt-text-block">
|
|
3
3
|
<div :class="['adt-text-block__field', { error: !!errorText }]">
|
|
4
4
|
<input
|
|
5
|
+
:id="id"
|
|
5
6
|
ref="input"
|
|
6
7
|
:type="type"
|
|
7
8
|
:value="value"
|
|
@@ -12,7 +13,7 @@
|
|
|
12
13
|
class="adt-text-block__input"
|
|
13
14
|
:class="{ error: !!errorText }"
|
|
14
15
|
/>
|
|
15
|
-
<label class="adt-text-block__label">
|
|
16
|
+
<label :for="id" class="adt-text-block__label">
|
|
16
17
|
{{ label }}
|
|
17
18
|
<span v-if="required" class="adt-text-block__required">*</span>
|
|
18
19
|
</label>
|
|
@@ -67,6 +68,10 @@ import "../../assets/style.scss";
|
|
|
67
68
|
export default {
|
|
68
69
|
name: "TextField",
|
|
69
70
|
props: {
|
|
71
|
+
id: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: ""
|
|
74
|
+
},
|
|
70
75
|
errorText: {
|
|
71
76
|
type: String,
|
|
72
77
|
default: "",
|