adata-ui 0.1.30 → 0.1.33
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 +82 -121
- package/dist/adata-ui.common.js.map +1 -1
- package/dist/adata-ui.css +1 -1
- package/dist/adata-ui.umd.js +82 -121
- package/dist/adata-ui.umd.js.map +1 -1
- package/dist/adata-ui.umd.min.js +2 -2
- package/dist/adata-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/_text_field.scss +8 -6
- package/src/components/Alert/Alert.vue +1 -1
- package/src/components/Button/{BaseButton.vue → AButton.vue} +40 -74
- package/src/components/Button/Button.stories.js +1 -1
- package/src/components/Footer/Footer.vue +49 -22
- package/src/components/SearchTextField/SearchTextField.vue +14 -42
- package/src/components/TextField/TextField.stories.js +2 -2
- package/src/components/TextField/TextField.vue +7 -11
- package/src/components/index.js +1 -1
package/package.json
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
font-size: 10px;
|
|
46
46
|
line-height: 14px;
|
|
47
47
|
color: #ff2e43;
|
|
48
|
-
margin-top:
|
|
48
|
+
margin-top: 8px;
|
|
49
49
|
display: flex;
|
|
50
50
|
align-items: center;
|
|
51
51
|
svg {
|
|
@@ -111,6 +111,7 @@
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
&.error {
|
|
114
|
+
border: 1px solid #FF2E43;
|
|
114
115
|
background: #ff2e431f;
|
|
115
116
|
}
|
|
116
117
|
}
|
|
@@ -126,10 +127,10 @@
|
|
|
126
127
|
line-height: 40px;
|
|
127
128
|
transition: 0.3s;
|
|
128
129
|
color: #71757A;
|
|
129
|
-
font-size:
|
|
130
|
+
font-size: 14px;
|
|
130
131
|
@media(max-width: 1025px) {
|
|
131
132
|
left: 12px;
|
|
132
|
-
font-size:
|
|
133
|
+
font-size: 14px;
|
|
133
134
|
line-height: 16px;
|
|
134
135
|
color: #71757A;
|
|
135
136
|
}
|
|
@@ -171,7 +172,7 @@
|
|
|
171
172
|
}
|
|
172
173
|
|
|
173
174
|
&__required {
|
|
174
|
-
color: #
|
|
175
|
+
color: #FF2E43;
|
|
175
176
|
}
|
|
176
177
|
|
|
177
178
|
&__options {
|
|
@@ -183,7 +184,7 @@
|
|
|
183
184
|
z-index: 1000;
|
|
184
185
|
border-radius: 2px;
|
|
185
186
|
border: 1px solid #71757A;
|
|
186
|
-
padding:
|
|
187
|
+
padding: 8px 0;
|
|
187
188
|
@media(max-width: 1025px) {
|
|
188
189
|
overflow: auto;
|
|
189
190
|
}
|
|
@@ -202,7 +203,7 @@
|
|
|
202
203
|
transition: 0.3s all;
|
|
203
204
|
cursor: pointer;
|
|
204
205
|
@media(max-width: 1025px) {
|
|
205
|
-
font-size:
|
|
206
|
+
font-size: 12px;
|
|
206
207
|
}
|
|
207
208
|
|
|
208
209
|
&:hover {
|
|
@@ -262,6 +263,7 @@
|
|
|
262
263
|
}
|
|
263
264
|
|
|
264
265
|
&.error {
|
|
266
|
+
border: 1px solid #FF2E43;
|
|
265
267
|
background: #ff2e431f;
|
|
266
268
|
}
|
|
267
269
|
}
|
|
@@ -2,15 +2,13 @@
|
|
|
2
2
|
<component
|
|
3
3
|
:class="[
|
|
4
4
|
'btn',
|
|
5
|
-
{
|
|
6
|
-
`
|
|
7
|
-
`size size-${size}`,
|
|
8
|
-
`size-fz-${fontSize}`,
|
|
5
|
+
`btn_${variant}`,
|
|
6
|
+
`size_${size}`,
|
|
9
7
|
]"
|
|
10
8
|
v-bind="$attrs"
|
|
11
9
|
v-on="$listeners"
|
|
12
|
-
:is="url ? '
|
|
13
|
-
:
|
|
10
|
+
:is="url ? 'button' : 'button'"
|
|
11
|
+
:href="url"
|
|
14
12
|
:event="event ? 'click' : ''"
|
|
15
13
|
>
|
|
16
14
|
<slot></slot>
|
|
@@ -20,7 +18,7 @@
|
|
|
20
18
|
|
|
21
19
|
<script>
|
|
22
20
|
export default {
|
|
23
|
-
name: "
|
|
21
|
+
name: "AButton",
|
|
24
22
|
props: {
|
|
25
23
|
variant: {
|
|
26
24
|
type: String,
|
|
@@ -31,20 +29,10 @@ export default {
|
|
|
31
29
|
'white',
|
|
32
30
|
'grey',
|
|
33
31
|
'yellow',
|
|
34
|
-
'
|
|
35
|
-
'
|
|
36
|
-
'
|
|
37
|
-
'
|
|
38
|
-
].includes(value)
|
|
39
|
-
);
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
fontSize: {
|
|
43
|
-
type: String,
|
|
44
|
-
validator: function (value) {
|
|
45
|
-
return (
|
|
46
|
-
[
|
|
47
|
-
'sm',
|
|
32
|
+
'red',
|
|
33
|
+
'green',
|
|
34
|
+
'blue_outlined',
|
|
35
|
+
'blue'
|
|
48
36
|
].includes(value)
|
|
49
37
|
);
|
|
50
38
|
},
|
|
@@ -57,28 +45,18 @@ export default {
|
|
|
57
45
|
[
|
|
58
46
|
'sm',
|
|
59
47
|
'md',
|
|
60
|
-
'
|
|
61
|
-
'lg',
|
|
48
|
+
'extra_sm',
|
|
62
49
|
].includes(value)
|
|
63
50
|
);
|
|
64
51
|
},
|
|
65
52
|
},
|
|
66
|
-
tag: {
|
|
67
|
-
type: String,
|
|
68
|
-
default: "button",
|
|
69
|
-
},
|
|
70
53
|
url: {
|
|
71
|
-
type:
|
|
72
|
-
default: false
|
|
54
|
+
type: String,
|
|
73
55
|
},
|
|
74
56
|
event: {
|
|
75
57
|
type: Boolean,
|
|
76
58
|
default: true
|
|
77
59
|
},
|
|
78
|
-
fullwidth: {
|
|
79
|
-
type: Boolean,
|
|
80
|
-
default: false
|
|
81
|
-
},
|
|
82
60
|
disabled: {
|
|
83
61
|
type: Boolean,
|
|
84
62
|
default: false
|
|
@@ -92,13 +70,15 @@ export default {
|
|
|
92
70
|
.btn {
|
|
93
71
|
cursor: pointer;
|
|
94
72
|
border: none;
|
|
73
|
+
border-radius: 2px;
|
|
74
|
+
font-size: 14px;
|
|
95
75
|
|
|
96
|
-
|
|
97
|
-
|
|
76
|
+
@media screen and (max-width: 560px) {
|
|
77
|
+
width: 100%;
|
|
98
78
|
}
|
|
99
79
|
|
|
100
|
-
|
|
101
|
-
|
|
80
|
+
svg {
|
|
81
|
+
margin-right: 8px;
|
|
102
82
|
}
|
|
103
83
|
|
|
104
84
|
&:disabled {
|
|
@@ -106,39 +86,21 @@ export default {
|
|
|
106
86
|
}
|
|
107
87
|
|
|
108
88
|
&.size {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
padding: 6px 16px;
|
|
113
|
-
font-size: 12px;
|
|
114
|
-
line-height: 18px;
|
|
89
|
+
&_extra_sm {
|
|
90
|
+
padding: 2px 16px;
|
|
91
|
+
line-height: 20px;
|
|
115
92
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
font-size: 14px;
|
|
120
|
-
line-height: 24px;
|
|
121
|
-
|
|
122
|
-
&-short {
|
|
123
|
-
padding: 8px 16px;
|
|
124
|
-
font-size: 14px;
|
|
125
|
-
line-height: 24px;
|
|
126
|
-
}
|
|
93
|
+
&_sm {
|
|
94
|
+
padding: 6px 20px;
|
|
95
|
+
line-height: 20px;
|
|
127
96
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
padding: 8px 40px;
|
|
131
|
-
font-size: 14px;
|
|
97
|
+
&_md {
|
|
98
|
+
padding: 8px 30px;
|
|
132
99
|
line-height: 24px;
|
|
133
100
|
}
|
|
134
|
-
|
|
135
|
-
&-fz-sm {
|
|
136
|
-
font-size: 12px;
|
|
137
|
-
line-height: 20px;
|
|
138
|
-
}
|
|
139
101
|
}
|
|
140
102
|
|
|
141
|
-
|
|
103
|
+
&_grey {
|
|
142
104
|
color: var(--newGray);
|
|
143
105
|
border: 1px solid #9da3ac;
|
|
144
106
|
background: #fff;
|
|
@@ -165,23 +127,23 @@ export default {
|
|
|
165
127
|
}
|
|
166
128
|
}
|
|
167
129
|
|
|
168
|
-
|
|
169
|
-
background: #
|
|
130
|
+
&_yellow {
|
|
131
|
+
background: linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);
|
|
170
132
|
color: #333333;
|
|
171
133
|
|
|
172
134
|
&:hover {
|
|
173
|
-
background:
|
|
135
|
+
background: linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);
|
|
174
136
|
}
|
|
175
137
|
|
|
176
138
|
&:active {
|
|
177
|
-
background: #
|
|
139
|
+
background: linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);
|
|
178
140
|
}
|
|
179
141
|
}
|
|
180
142
|
|
|
181
|
-
|
|
143
|
+
&_red {
|
|
182
144
|
border: 1px solid #FF2E43;
|
|
183
145
|
color: #FF2E43;
|
|
184
|
-
|
|
146
|
+
background-color: transparent;
|
|
185
147
|
&:hover {
|
|
186
148
|
background: #FF2E43;
|
|
187
149
|
color: #fff;
|
|
@@ -193,7 +155,7 @@ export default {
|
|
|
193
155
|
}
|
|
194
156
|
}
|
|
195
157
|
|
|
196
|
-
|
|
158
|
+
&_green {
|
|
197
159
|
background: #00B92D;
|
|
198
160
|
color: #fff;
|
|
199
161
|
|
|
@@ -206,9 +168,10 @@ export default {
|
|
|
206
168
|
}
|
|
207
169
|
}
|
|
208
170
|
|
|
209
|
-
|
|
171
|
+
&_blue_outlined {
|
|
210
172
|
border: 1px solid #007AFF;
|
|
211
173
|
color: #007AFF;
|
|
174
|
+
background-color: transparent;
|
|
212
175
|
|
|
213
176
|
&:hover {
|
|
214
177
|
background: #007AFF;
|
|
@@ -221,7 +184,7 @@ export default {
|
|
|
221
184
|
}
|
|
222
185
|
}
|
|
223
186
|
|
|
224
|
-
|
|
187
|
+
&_blue {
|
|
225
188
|
background: #1E88E5;
|
|
226
189
|
color: #FFF;
|
|
227
190
|
|
|
@@ -236,6 +199,9 @@ export default {
|
|
|
236
199
|
}
|
|
237
200
|
}
|
|
238
201
|
|
|
239
|
-
box-sizing: border-box;
|
|
202
|
+
box-sizing: border-box !important;
|
|
203
|
+
-webkit-box-sizing: border-box !important;
|
|
204
|
+
-moz-box-sizing: border-box !important;
|
|
205
|
+
-ms-box-sizing: border-box !important;
|
|
240
206
|
}
|
|
241
207
|
</style>
|
|
@@ -3,50 +3,69 @@
|
|
|
3
3
|
<div class="a-footer__top">
|
|
4
4
|
<div class="nav">
|
|
5
5
|
<a class="logo adata-logo" href="https://adata.kz">
|
|
6
|
-
<svg fill="#2C3E50" xmlns="http://www.w3.org/2000/svg"
|
|
7
|
-
|
|
8
|
-
<path
|
|
6
|
+
<svg fill="#2C3E50" xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
viewBox="0 0 166 48" version="1.1">
|
|
8
|
+
<path
|
|
9
|
+
d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"></path>
|
|
10
|
+
<path
|
|
11
|
+
d="M44.905 0H4.99a5.091 5.091 0 00-3.528 1.406A4.71 4.71 0 000 4.8v38.4a4.71 4.71 0 001.461 3.394A5.091 5.091 0 004.99 48h39.916a5.091 5.091 0 003.528-1.406 4.71 4.71 0 001.462-3.394V4.8a4.71 4.71 0 00-1.462-3.394A5.091 5.091 0 0044.905 0zM31.737 38.26l-2.079-6.232H19.305l-2.05 6.232h-7.097l10.598-28h7.776l10.353 28h-7.148z"></path>
|
|
9
12
|
</svg>
|
|
10
13
|
</a>
|
|
11
14
|
<div class="social">
|
|
12
|
-
<a target="_blank" rel="nofollow"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
<a target="_blank" rel="nofollow"
|
|
16
|
+
href="https://www.facebook.com/adata.kz">
|
|
17
|
+
<svg fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
18
|
+
viewBox="0 0 16 16" class="social__icon">
|
|
19
|
+
<path
|
|
20
|
+
d="M13.6562 0H2.34375C1.05151 0 0 1.05151 0 2.34375V13.6562C0 14.9485 1.05151 16 2.34375 16H7.0625V10.3438H5.1875V7.53125H7.0625V5.625C7.0625 4.0741 8.3241 2.8125 9.875 2.8125H12.7188V5.625H9.875V7.53125H12.7188L12.25 10.3438H9.875V16H13.6562C14.9485 16 16 14.9485 16 13.6562V2.34375C16 1.05151 14.9485 0 13.6562 0Z"
|
|
21
|
+
fill="#2C3E50"></path>
|
|
15
22
|
</svg>
|
|
16
23
|
</a>
|
|
17
|
-
<a target="_blank" rel="nofollow"
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
<a target="_blank" rel="nofollow"
|
|
25
|
+
href="https://www.instagram.com/adata.kz/?igshid=253i4qxg3els">
|
|
26
|
+
<svg fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
27
|
+
viewBox="0 0 16 16" class="social__icon">
|
|
28
|
+
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
29
|
+
d="M3.01562 0.0166016C1.35877 0.0166016 0.015625 1.35975 0.015625 3.0166V13.001C0.015625 14.6578 1.35877 16.001 3.01562 16.001H13C14.6569 16.001 16 14.6578 16 13.001V3.0166C16 1.35975 14.6569 0.0166016 13 0.0166016H3.01562ZM14.3891 3.20021C14.3891 3.6416 14.0313 3.99943 13.5899 3.99943C13.1485 3.99943 12.7906 3.6416 12.7906 3.20021C12.7906 2.75881 13.1485 2.40099 13.5899 2.40099C14.0313 2.40099 14.3891 2.75881 14.3891 3.20021ZM8.01132 11.5982C9.99761 11.5982 11.6078 9.98805 11.6078 8.00176C11.6078 6.01548 9.99761 4.40528 8.01132 4.40528C6.02504 4.40528 4.41484 6.01548 4.41484 8.00176C4.41484 9.98805 6.02504 11.5982 8.01132 11.5982ZM8.01132 12.7971C10.6597 12.7971 12.8066 10.6501 12.8066 8.00176C12.8066 5.35339 10.6597 3.20645 8.01132 3.20645C5.36295 3.20645 3.21601 5.35339 3.21601 8.00176C3.21601 10.6501 5.36295 12.7971 8.01132 12.7971Z"
|
|
30
|
+
fill="#2C3E50"></path>
|
|
20
31
|
</svg>
|
|
21
32
|
</a>
|
|
22
|
-
<a target="_blank" rel="nofollow"
|
|
23
|
-
|
|
24
|
-
|
|
33
|
+
<a target="_blank" rel="nofollow"
|
|
34
|
+
href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/about">
|
|
35
|
+
<svg fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
36
|
+
viewBox="0 0 16 16" class="social__icon">
|
|
37
|
+
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
38
|
+
d="M2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2ZM13.7528 4.98132C13.6144 4.46732 13.2092 4.06205 12.6952 3.92367C11.7561 3.66667 7.99997 3.66667 7.99997 3.66667C7.99997 3.66667 4.24381 3.66667 3.30477 3.91378C2.80066 4.05217 2.3855 4.46732 2.24712 4.98132C2 5.92036 2 7.86764 2 7.86764C2 7.86764 2 9.82479 2.24712 10.7539C2.3855 11.268 2.79077 11.6732 3.30477 11.8116C4.2537 12.0686 7.99997 12.0686 7.99997 12.0686C7.99997 12.0686 11.7561 12.0686 12.6952 11.8215C13.2092 11.6831 13.6144 11.2778 13.7528 10.7638C13.9999 9.82479 13.9999 7.87752 13.9999 7.87752C13.9999 7.87752 14.0098 5.92036 13.7528 4.98132ZM6.80392 9.59801L9.92747 7.799L6.80392 6V9.59801Z"
|
|
39
|
+
fill="#2C3E50"></path>
|
|
25
40
|
</svg>
|
|
26
41
|
</a>
|
|
27
|
-
<a target="_blank" rel="nofollow"
|
|
28
|
-
|
|
29
|
-
|
|
42
|
+
<a target="_blank" rel="nofollow"
|
|
43
|
+
href="https://www.tiktok.com/@adata.kz?lang=ru-RU">
|
|
44
|
+
<svg fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
viewBox="0 0 16 16" class="social__icon">
|
|
46
|
+
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
47
|
+
d="M2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2ZM8.27136 9.89447C8.27136 10.8688 7.54987 11.506 6.65988 11.506C5.76988 11.506 5.04839 10.7845 5.04839 9.89447C5.04839 9.0988 5.7895 8.37096 6.68689 8.40404C6.86305 8.40404 7.06987 8.44599 7.15006 8.47436V6.62331C5.55588 6.30091 3.14893 7.62001 3.14893 9.89447C3.14893 11.506 4.38899 13.3333 6.65988 13.3333C8.93076 13.3333 10.1985 11.506 10.1985 9.89447V6.23373C10.5643 6.52374 11.6152 7.04631 12.8511 7.04631V5.229C11.406 5.25812 10.0956 3.98482 10.204 2.66667H8.27136V9.89447Z"
|
|
48
|
+
fill="#2C3E50"></path>
|
|
30
49
|
</svg>
|
|
31
50
|
</a>
|
|
32
51
|
</div>
|
|
33
52
|
<a href="https://adata.kz/tariffs" class="nav__item nav__link">
|
|
34
|
-
|
|
53
|
+
Тарифы
|
|
35
54
|
</a>
|
|
36
55
|
<a href="https://adata.kz/about" class="nav__item nav__link">
|
|
37
|
-
|
|
56
|
+
О сервисе
|
|
38
57
|
</a>
|
|
39
58
|
<a href="https://adata.kz/apiInfo" class="nav__item nav__link">
|
|
40
|
-
|
|
59
|
+
Описание API
|
|
41
60
|
</a>
|
|
42
61
|
<a href="https://adata.kz/user-agreements" class="nav__item nav__link">
|
|
43
|
-
|
|
62
|
+
Пользовательское соглашение
|
|
44
63
|
</a>
|
|
45
64
|
<a href="https://adata.kz/vacancy" class="nav__item nav__link">
|
|
46
|
-
|
|
65
|
+
Вакансии
|
|
47
66
|
</a>
|
|
48
67
|
<a href="https://adata.kz/contacts" class="nav__item nav__link">
|
|
49
|
-
|
|
68
|
+
Контакты
|
|
50
69
|
</a>
|
|
51
70
|
</div>
|
|
52
71
|
</div>
|
|
@@ -93,6 +112,7 @@ a {
|
|
|
93
112
|
padding-bottom: 60px;
|
|
94
113
|
}
|
|
95
114
|
}
|
|
115
|
+
|
|
96
116
|
&__top {
|
|
97
117
|
display: flex;
|
|
98
118
|
justify-content: space-between;
|
|
@@ -108,9 +128,11 @@ a {
|
|
|
108
128
|
.adata-logo {
|
|
109
129
|
display: none;
|
|
110
130
|
@media(max-width: 1025px) {
|
|
111
|
-
|
|
131
|
+
display: flex;
|
|
132
|
+
svg {
|
|
112
133
|
width: 77px;
|
|
113
134
|
height: 24px;
|
|
135
|
+
}
|
|
114
136
|
}
|
|
115
137
|
}
|
|
116
138
|
|
|
@@ -153,24 +175,28 @@ a {
|
|
|
153
175
|
margin-left: 0;
|
|
154
176
|
order: 0;
|
|
155
177
|
}
|
|
178
|
+
|
|
156
179
|
a {
|
|
157
180
|
display: flex;
|
|
158
181
|
align-items: center;
|
|
159
182
|
line-height: 19px;
|
|
160
183
|
text-decoration-line: none;
|
|
161
184
|
color: #007aff;
|
|
185
|
+
|
|
162
186
|
.social__icon {
|
|
163
187
|
margin: 2px 10px 2px 2px;
|
|
164
188
|
@media (max-width: 1025px) {
|
|
165
189
|
margin: 0 8px 0 0;
|
|
166
190
|
}
|
|
167
191
|
}
|
|
192
|
+
|
|
168
193
|
@media(max-width: 1025px) {
|
|
169
194
|
margin-left: 0;
|
|
170
195
|
&:not(:first-child) {
|
|
171
196
|
margin-left: 8px;
|
|
172
197
|
}
|
|
173
198
|
}
|
|
199
|
+
|
|
174
200
|
&:hover {
|
|
175
201
|
text-decoration: underline;
|
|
176
202
|
}
|
|
@@ -214,6 +240,7 @@ a {
|
|
|
214
240
|
border: none;
|
|
215
241
|
border-top: 1px solid #bdc7ce;
|
|
216
242
|
}
|
|
243
|
+
|
|
217
244
|
span {
|
|
218
245
|
font-size: 10px;
|
|
219
246
|
line-height: 12px;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
class="adt-text-block"
|
|
2
|
+
<div class="adt-text-block"
|
|
4
3
|
v-click-outside="onOutsideClick"
|
|
5
4
|
@keydown.down.up.prevent="onUpOrDownClicked"
|
|
6
5
|
>
|
|
7
|
-
<div class="adt-text-block__field">
|
|
6
|
+
<div :class="['adt-text-block__field', { error: !!errorText }]">
|
|
8
7
|
<input
|
|
9
8
|
v-if="!mask"
|
|
10
9
|
ref="input"
|
|
@@ -16,11 +15,8 @@
|
|
|
16
15
|
@keyup.enter="enterPressed"
|
|
17
16
|
@focus="showAutocomplete = true"
|
|
18
17
|
@click="$emit('showVTour')"
|
|
19
|
-
|
|
20
|
-
{
|
|
21
|
-
{'adt-text-block__input-mob-filter' : forMobileFilter},
|
|
22
|
-
{'adt-text-block__input': !forMobileFilter}
|
|
23
|
-
]"
|
|
18
|
+
class="adt-text-block__input"
|
|
19
|
+
:class="{ error: !!errorText }"
|
|
24
20
|
/>
|
|
25
21
|
<TheMask
|
|
26
22
|
v-else
|
|
@@ -38,35 +34,23 @@
|
|
|
38
34
|
:class="{ error: !!errorText }"
|
|
39
35
|
|
|
40
36
|
/>
|
|
41
|
-
<label
|
|
42
|
-
:class="{
|
|
43
|
-
'adt-text-block__label-red' : !forMobileFilter && getIsError,
|
|
44
|
-
'adt-text-block__label' : !forMobileFilter && !getIsError,
|
|
45
|
-
'adt-text-block__label-mob-filter' : forMobileFilter,
|
|
46
|
-
}"
|
|
47
|
-
>
|
|
37
|
+
<label class="adt-text-block__label">
|
|
48
38
|
{{ label }}
|
|
49
39
|
</label>
|
|
50
|
-
<div class="
|
|
51
|
-
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="magnifier">
|
|
52
|
-
<path d="M13.95 13.95L10 10" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
|
|
53
|
-
</path>
|
|
54
|
-
<circle cx="6.5" cy="6.5" r="4.5" stroke="#2C3E50"></circle>
|
|
55
|
-
</svg>
|
|
56
|
-
</div>
|
|
57
|
-
<div class="adt-text-block__icon adt-text-block__magnifier" v-if="isWithIcon" @click="$emit('input', '')">
|
|
58
|
-
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="magnifier">
|
|
59
|
-
<path d="M13.95 13.95L10 10" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
|
|
60
|
-
</path>
|
|
61
|
-
<circle cx="6.5" cy="6.5" r="4.5" stroke="#2C3E50"></circle>
|
|
62
|
-
</svg>
|
|
63
|
-
</div>
|
|
64
|
-
<div class="adt-text-block__icon" v-if="clearable && value && value.length > 0" @click="$emit('input', '')">
|
|
40
|
+
<div class="adt-text-block__icon" v-if="clearable && value" @click="$emit('input', '')">
|
|
65
41
|
<svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="clearIcon">
|
|
66
42
|
<path d="M2 2l12 12m0-12L2 14" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
67
43
|
</svg>
|
|
68
44
|
</div>
|
|
69
45
|
</div>
|
|
46
|
+
<div class="adt-text-block__error" v-if="!!errorText">
|
|
47
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon__attention">
|
|
48
|
+
<path d="M8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4H8.5ZM7.5 9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9H7.5ZM7.5 4V9H8.5V4H7.5Z" fill="#FF2E43"/>
|
|
49
|
+
<path d="M8.5 11C8.5 10.7239 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.7239 7.5 11H8.5ZM7.5 11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5H7.5ZM7.5 11V11.5H8.5V11H7.5Z" fill="#FF2E43"/>
|
|
50
|
+
<circle cx="8" cy="8" r="7" stroke="#FF2E43"/>
|
|
51
|
+
</svg>
|
|
52
|
+
{{ errorText }}
|
|
53
|
+
</div>
|
|
70
54
|
<div class="adt-text-block__options search-options" v-show="options && options.length > 0 && showAutocomplete">
|
|
71
55
|
<PerfectScrollbar>
|
|
72
56
|
<div class="search-options__wrapper">
|
|
@@ -131,14 +115,6 @@ export default {
|
|
|
131
115
|
type: Boolean,
|
|
132
116
|
default: false
|
|
133
117
|
},
|
|
134
|
-
magnifierMob: {
|
|
135
|
-
type: Boolean,
|
|
136
|
-
default: false
|
|
137
|
-
},
|
|
138
|
-
forMobileFilter: {
|
|
139
|
-
type: Boolean,
|
|
140
|
-
default: false
|
|
141
|
-
},
|
|
142
118
|
isTypeRequired: {
|
|
143
119
|
type: Boolean,
|
|
144
120
|
default: false
|
|
@@ -155,10 +131,6 @@ export default {
|
|
|
155
131
|
type: Boolean,
|
|
156
132
|
default: false
|
|
157
133
|
},
|
|
158
|
-
getIsError: {
|
|
159
|
-
type: Boolean,
|
|
160
|
-
default: false
|
|
161
|
-
}
|
|
162
134
|
},
|
|
163
135
|
components: {
|
|
164
136
|
PerfectScrollbar,
|
|
@@ -10,10 +10,10 @@ export default {
|
|
|
10
10
|
const Template = (args, { argTypes }) => ({
|
|
11
11
|
components: { ATextField },
|
|
12
12
|
props: Object.keys(argTypes),
|
|
13
|
-
template: '<a-text-field v-bind="$props" @
|
|
13
|
+
template: '<a-text-field v-bind="$props" @enter="enterPressed"></a-text-field>',
|
|
14
14
|
methods: {
|
|
15
15
|
enterPressed(){
|
|
16
|
-
console.log('
|
|
16
|
+
console.log('test')
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
})
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="adt-text-block">
|
|
3
|
-
<div class="adt-text-block__field">
|
|
3
|
+
<div :class="['adt-text-block__field', { error: !!errorText }]">
|
|
4
4
|
<input
|
|
5
5
|
v-if="!mask"
|
|
6
6
|
ref="input"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
:placeholder="placeholder"
|
|
10
10
|
required
|
|
11
11
|
@input="$emit('input', $event.target.value)"
|
|
12
|
-
@keyup.enter="
|
|
12
|
+
@keyup.enter="$emit('enter')"
|
|
13
13
|
class="adt-text-block__input"
|
|
14
14
|
:class="{ error: !!errorText }"
|
|
15
15
|
/>
|
|
@@ -28,8 +28,10 @@
|
|
|
28
28
|
class="adt-text-block__input"
|
|
29
29
|
:class="{ error: !!errorText }"
|
|
30
30
|
/>
|
|
31
|
-
<label class="adt-text-block__label">
|
|
32
|
-
|
|
31
|
+
<label class="adt-text-block__label">
|
|
32
|
+
{{ label }}
|
|
33
|
+
<span v-if="required" class="adt-text-block__required">*</span>
|
|
34
|
+
</label>
|
|
33
35
|
<div class="adt-text-block__icon desktop" v-if="clearable && value && value.length > 0"
|
|
34
36
|
@click="$emit('input', '')">
|
|
35
37
|
<svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="clearIcon">
|
|
@@ -100,11 +102,5 @@ export default {
|
|
|
100
102
|
return this.showPlaceholder ? this.placeholder : ""
|
|
101
103
|
}
|
|
102
104
|
},
|
|
103
|
-
methods: {
|
|
104
|
-
enterPressed() {
|
|
105
|
-
this.$emit('enterPressed')
|
|
106
|
-
},
|
|
107
|
-
|
|
108
|
-
}
|
|
109
105
|
}
|
|
110
|
-
</script>
|
|
106
|
+
</script>
|
package/src/components/index.js
CHANGED