adata-ui 0.1.78 → 0.1.81
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 +610 -1809
- package/dist/adata-ui.common.js.map +1 -1
- package/dist/adata-ui.css +1 -1
- package/dist/adata-ui.umd.js +610 -1809
- 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/components/Header/Header.stories.js +2 -2
- package/src/components/Header/Header.vue +483 -181
- package/src/components/Header/Profile.vue +141 -424
- package/src/components/Header/ProfileMobile.vue +300 -0
- package/src/components/Loader/Loader.stories.js +2 -2
- package/src/components/SearchMultiCategory/SearchMultiCategory.stories.js +16 -0
- package/src/components/SearchMultiCategory/SearchMultiCategory.vue +75 -0
- package/src/components/index.js +2 -0
- package/src/configs/profileDropDown.js +15 -12
|
@@ -1,104 +1,54 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="profile" :class="{ active: active }">
|
|
3
|
-
<div
|
|
4
|
-
v-click-outside="
|
|
5
|
-
() => {
|
|
6
|
-
active = false;
|
|
7
|
-
}
|
|
8
|
-
"
|
|
9
|
-
>
|
|
3
|
+
<div v-click-outside="() => { active = false; }">
|
|
10
4
|
<div class="profile__inner">
|
|
11
5
|
<div class="profile__item" @click="active = !active">
|
|
12
6
|
<div v-show="isAuthenticated" class="profile__item-link">
|
|
13
7
|
<span class="desktop">{{ email }}</span>
|
|
14
8
|
<svg
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
9
|
+
width="18"
|
|
10
|
+
height="18"
|
|
11
|
+
fill="#25476AFF"
|
|
12
|
+
class="desktop arrow-svg"
|
|
13
|
+
:class="{ rotate: active }"
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
viewBox="0 0 16 16"
|
|
22
16
|
>
|
|
23
17
|
<path fill="none" d="M0 0h16v16H0z"></path>
|
|
24
18
|
<path
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
></path>
|
|
31
|
-
</svg>
|
|
32
|
-
</div>
|
|
33
|
-
<div v-show="isAuthenticated" class="profile__item-link">
|
|
34
|
-
<svg
|
|
35
|
-
width="18"
|
|
36
|
-
height="18"
|
|
37
|
-
fill="#25476AFF"
|
|
38
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
39
|
-
viewBox="0 0 24 24"
|
|
40
|
-
class="user"
|
|
41
|
-
>
|
|
42
|
-
<path
|
|
43
|
-
fill-rule="evenodd"
|
|
44
|
-
clip-rule="evenodd"
|
|
45
|
-
d="M15.5 8a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1.023 4.344a5 5 0 10-4.954 0C5.757 13.417 3 16.874 3 20.974V21h1.543v-.026c0-4.106 3.339-7.435 7.457-7.435 4.119 0 7.457 3.329 7.457 7.435V21H21v-.026c0-4.1-2.757-7.557-6.523-8.63z"
|
|
46
|
-
fill="#2C3E50"
|
|
19
|
+
fill="none"
|
|
20
|
+
d="M3 6.5L8 10l5-3.5"
|
|
21
|
+
stroke="#2C3E50"
|
|
22
|
+
stroke-linecap="round"
|
|
23
|
+
stroke-linejoin="round"
|
|
47
24
|
></path>
|
|
48
25
|
</svg>
|
|
49
26
|
</div>
|
|
50
27
|
<button
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
28
|
+
@click.prevent="goAuth"
|
|
29
|
+
class="sign"
|
|
30
|
+
v-show="!isAuthenticated"
|
|
54
31
|
>
|
|
55
32
|
<svg
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
33
|
+
width="18"
|
|
34
|
+
height="18"
|
|
35
|
+
fill="#25476AFF"
|
|
36
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
37
|
+
viewBox="0 0 16 16"
|
|
38
|
+
class="desktop"
|
|
62
39
|
>
|
|
63
40
|
<path fill="#fff" d="M0 0h16v16H0z" stroke="none"></path>
|
|
64
41
|
<path
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
></path>
|
|
70
|
-
<path
|
|
71
|
-
d="M6 4.1V2h8v12H6v-1.65M9 8H2"
|
|
72
|
-
stroke-miterlimit="10"
|
|
73
|
-
stroke-linecap="round"
|
|
74
|
-
stroke-linejoin="round"
|
|
75
|
-
></path>
|
|
76
|
-
</svg>
|
|
77
|
-
<svg
|
|
78
|
-
width="18"
|
|
79
|
-
height="18"
|
|
80
|
-
fill="#25476AFF"
|
|
81
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
82
|
-
viewBox="0 0 24 24"
|
|
83
|
-
class="user"
|
|
84
|
-
>
|
|
85
|
-
<path
|
|
86
|
-
fill-rule="evenodd"
|
|
87
|
-
clip-rule="evenodd"
|
|
88
|
-
d="M13 7.94L17.06 12 13 16.06 11.94 15l3-3-3-3L13 7.94z"
|
|
89
|
-
fill="#2C3E50"
|
|
90
|
-
></path>
|
|
91
|
-
<path
|
|
92
|
-
fill-rule="evenodd"
|
|
93
|
-
clip-rule="evenodd"
|
|
94
|
-
d="M8.25 2.25h13.5v19.5H8.25v-4.5h1.5v3h10.5V3.75H9.75v3h-1.5v-4.5z"
|
|
95
|
-
fill="#2C3E50"
|
|
42
|
+
d="M8 10l2-2.054L8.077 6"
|
|
43
|
+
stroke-miterlimit="10"
|
|
44
|
+
stroke-linecap="round"
|
|
45
|
+
stroke-linejoin="round"
|
|
96
46
|
></path>
|
|
97
47
|
<path
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
48
|
+
d="M6 4.1V2h8v12H6v-1.65M9 8H2"
|
|
49
|
+
stroke-miterlimit="10"
|
|
50
|
+
stroke-linecap="round"
|
|
51
|
+
stroke-linejoin="round"
|
|
102
52
|
></path>
|
|
103
53
|
</svg>
|
|
104
54
|
<span class="sign_text">Вход</span>
|
|
@@ -107,85 +57,82 @@
|
|
|
107
57
|
</div>
|
|
108
58
|
<SlideToggle v-slot="{ animationClass }">
|
|
109
59
|
<div
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
60
|
+
class="profile-menu"
|
|
61
|
+
v-if="isAuthenticated"
|
|
62
|
+
v-show="active"
|
|
63
|
+
:class="animationClass"
|
|
114
64
|
>
|
|
115
65
|
<div class="profile-menu__inner">
|
|
116
|
-
<div class="profile-menu__items"
|
|
117
|
-
<div v-for="(elem, index) in
|
|
66
|
+
<div class="profile-menu__items">
|
|
67
|
+
<div v-for="(elem, index) in profileDropDown" :key="index">
|
|
118
68
|
<a
|
|
119
|
-
|
|
120
|
-
|
|
69
|
+
:href="elem[mode]"
|
|
70
|
+
:class="
|
|
121
71
|
elem.link
|
|
122
72
|
? 'profile-menu__balance-link'
|
|
123
73
|
: 'profile-menu__links'
|
|
124
74
|
"
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
75
|
+
class="gray-text"
|
|
76
|
+
v-if="elem[mode]"
|
|
77
|
+
@click="preventLink(elem.disabled, $event)"
|
|
78
|
+
onclick="`return false`"
|
|
129
79
|
>
|
|
130
|
-
<div>
|
|
131
|
-
|
|
80
|
+
<div :class="{'rate-item': index === 0}">
|
|
81
|
+
<span v-show="index === 0" class="rate">
|
|
82
|
+
Тариф {{ rate }}
|
|
83
|
+
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
|
+
<path d="M1 5.44444L4.69231 9L13 1" stroke="#007AFF" stroke-width="2" stroke-miterlimit="10"
|
|
85
|
+
stroke-linecap="round" stroke-linejoin="round"/>
|
|
86
|
+
</svg>
|
|
87
|
+
</span> {{ elem.name }} <span v-show="index === 1" class="balance">{{ balance || 0 }} ₸</span>
|
|
132
88
|
</div>
|
|
133
89
|
<span
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
90
|
+
v-show="elem.link"
|
|
91
|
+
@click="showModal(elem[mode], elem.name)"
|
|
92
|
+
class="profile-menu__balance"
|
|
137
93
|
>
|
|
138
94
|
{{ elem.link }}
|
|
139
95
|
</span>
|
|
140
96
|
</a>
|
|
141
97
|
<div
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
98
|
+
v-if="elem.children"
|
|
99
|
+
@click="rotateItem(index)"
|
|
100
|
+
class="gray-text profile-menu__item"
|
|
145
101
|
>
|
|
146
|
-
<div class="profile-menu__item__children">
|
|
102
|
+
<div :class="{ active: elem.opened }" class="profile-menu__item__children">
|
|
147
103
|
{{ elem.name }}
|
|
148
104
|
<span v-if="elem.children.length > 0">
|
|
149
105
|
<svg
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
106
|
+
width="12"
|
|
107
|
+
height="8"
|
|
108
|
+
viewBox="0 0 12 8"
|
|
109
|
+
fill="none"
|
|
110
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
111
|
+
:class="{ rotated: elem.opened }"
|
|
156
112
|
>
|
|
157
113
|
<path
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
114
|
+
d="M1 1.5L6 6.5L11 1.5"
|
|
115
|
+
stroke="#69797D"
|
|
116
|
+
stroke-width="2"
|
|
117
|
+
stroke-linecap="round"
|
|
118
|
+
stroke-linejoin="round"
|
|
163
119
|
/>
|
|
164
120
|
</svg>
|
|
165
121
|
</span>
|
|
166
122
|
</div>
|
|
167
123
|
<SlideToggle
|
|
168
|
-
|
|
169
|
-
|
|
124
|
+
v-slot="{ animationClass }"
|
|
125
|
+
:class="animationClass"
|
|
170
126
|
>
|
|
171
127
|
<div v-if="elem.opened">
|
|
172
128
|
<template v-for="(child, idx) in elem.children">
|
|
173
129
|
<div
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
130
|
+
class="profile-menu__item__child"
|
|
131
|
+
:key="idx + 'link'"
|
|
132
|
+
v-if="child[mode]"
|
|
133
|
+
@click="handleClick(child[mode], child.name)"
|
|
178
134
|
>
|
|
179
135
|
<span>
|
|
180
|
-
<svg
|
|
181
|
-
width="4"
|
|
182
|
-
height="4"
|
|
183
|
-
viewBox="0 0 4 4"
|
|
184
|
-
fill="none"
|
|
185
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
186
|
-
>
|
|
187
|
-
<circle cx="2" cy="2" r="2" fill="#2C3E50" />
|
|
188
|
-
</svg>
|
|
189
136
|
{{ child.name }}
|
|
190
137
|
</span>
|
|
191
138
|
</div>
|
|
@@ -197,17 +144,17 @@
|
|
|
197
144
|
</div>
|
|
198
145
|
<div class="exit" @click="logout">
|
|
199
146
|
<svg
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
147
|
+
width="18"
|
|
148
|
+
height="18"
|
|
149
|
+
fill="#25476AFF"
|
|
150
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
151
|
+
viewBox="0 0 16 16"
|
|
205
152
|
>
|
|
206
153
|
<path
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
154
|
+
d="M11 10l2-2.054L11.077 6M10 11.9V14H2V2h8v1.65M12 8H5"
|
|
155
|
+
stroke-miterlimit="10"
|
|
156
|
+
stroke-linecap="round"
|
|
157
|
+
stroke-linejoin="round"
|
|
211
158
|
></path>
|
|
212
159
|
</svg>
|
|
213
160
|
Выход
|
|
@@ -215,257 +162,14 @@
|
|
|
215
162
|
</div>
|
|
216
163
|
</div>
|
|
217
164
|
</SlideToggle>
|
|
218
|
-
<MobileToggle v-slot="{ animationClass }">
|
|
219
|
-
<div
|
|
220
|
-
v-show="isAuthenticated && active"
|
|
221
|
-
class="mobile-table"
|
|
222
|
-
:class="animationClass"
|
|
223
|
-
>
|
|
224
|
-
<div class="mobile-table-head">
|
|
225
|
-
<p>Профиль пользователя</p>
|
|
226
|
-
<!-- close_hamburger-->
|
|
227
|
-
<svg
|
|
228
|
-
@click.stop="active = !active"
|
|
229
|
-
fill="none"
|
|
230
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
231
|
-
viewBox="0 0 24 24"
|
|
232
|
-
id="close_hamburger"
|
|
233
|
-
>
|
|
234
|
-
<path
|
|
235
|
-
fill-rule="evenodd"
|
|
236
|
-
clip-rule="evenodd"
|
|
237
|
-
d="M4.414 18.142L18.556 4l1.415 1.414L5.828 19.556l-1.414-1.414z"
|
|
238
|
-
fill="#2C3E50"
|
|
239
|
-
></path>
|
|
240
|
-
<path
|
|
241
|
-
fill-rule="evenodd"
|
|
242
|
-
clip-rule="evenodd"
|
|
243
|
-
d="M5.414 4l14.142 14.142-1.414 1.414L4 5.414 5.414 4z"
|
|
244
|
-
fill="#2C3E50"
|
|
245
|
-
></path>
|
|
246
|
-
</svg>
|
|
247
|
-
</div>
|
|
248
|
-
<div class="profile-menu-mobile">
|
|
249
|
-
<div class="profile-menu-mobile__inner">
|
|
250
|
-
<div
|
|
251
|
-
class="profile-menu-mobile__items"
|
|
252
|
-
v-if="listDropDown.length > 0"
|
|
253
|
-
>
|
|
254
|
-
<div
|
|
255
|
-
v-for="(elem, index) in listDropDown"
|
|
256
|
-
:key="index"
|
|
257
|
-
class="bb"
|
|
258
|
-
>
|
|
259
|
-
<div
|
|
260
|
-
@click="handleClick(elem[mode], elem.name)"
|
|
261
|
-
v-if="elem[mode]"
|
|
262
|
-
:class="
|
|
263
|
-
elem.link
|
|
264
|
-
? 'profile-menu-mobile__balance-link'
|
|
265
|
-
: 'profile-menu-mobile__links'
|
|
266
|
-
"
|
|
267
|
-
>
|
|
268
|
-
<div v-if="!elem.link" class="button-inner">
|
|
269
|
-
<div>{{ elem.name }}</div>
|
|
270
|
-
<!-- arrow_right -->
|
|
271
|
-
<svg
|
|
272
|
-
width="18"
|
|
273
|
-
height="18"
|
|
274
|
-
fill="none"
|
|
275
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
276
|
-
viewBox="0 0 10 18"
|
|
277
|
-
v-show="!elem.withoutArray"
|
|
278
|
-
>
|
|
279
|
-
<path
|
|
280
|
-
fill-rule="evenodd"
|
|
281
|
-
clip-rule="evenodd"
|
|
282
|
-
d="M2.108.59L9.318 9l-7.21 8.41L.59 16.108 6.683 9 .59 1.892 2.108.59z"
|
|
283
|
-
fill="#2C3E50"
|
|
284
|
-
></path>
|
|
285
|
-
</svg>
|
|
286
|
-
</div>
|
|
287
|
-
<div
|
|
288
|
-
v-if="elem.link"
|
|
289
|
-
class="profile-menu-mobile__balance-items"
|
|
290
|
-
>
|
|
291
|
-
<div
|
|
292
|
-
class="profile-menu-mobile__balance-items__upper-text"
|
|
293
|
-
>
|
|
294
|
-
{{ elem.name.substr(0, 15) }}
|
|
295
|
-
</div>
|
|
296
|
-
<div class="profile-menu-mobile__balance__bot-text">
|
|
297
|
-
{{ elem.name.substr(15) }}
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
<span
|
|
301
|
-
v-if="elem.link"
|
|
302
|
-
@click="$emit('showBalanceModal', true)"
|
|
303
|
-
class="profile-menu-mobile__balance"
|
|
304
|
-
>
|
|
305
|
-
{{ elem.link }}
|
|
306
|
-
</span>
|
|
307
|
-
</div>
|
|
308
|
-
<div
|
|
309
|
-
v-if="elem.children"
|
|
310
|
-
@click="rotateItem(index)"
|
|
311
|
-
class="profile-menu-mobile__links"
|
|
312
|
-
>
|
|
313
|
-
<div class="button-inner">
|
|
314
|
-
<div>{{ elem.name }}</div>
|
|
315
|
-
<!-- arrow_right -->
|
|
316
|
-
<svg
|
|
317
|
-
width="18"
|
|
318
|
-
height="18"
|
|
319
|
-
fill="none"
|
|
320
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
321
|
-
viewBox="0 0 10 18"
|
|
322
|
-
>
|
|
323
|
-
<path
|
|
324
|
-
fill-rule="evenodd"
|
|
325
|
-
clip-rule="evenodd"
|
|
326
|
-
d="M2.108.59L9.318 9l-7.21 8.41L.59 16.108 6.683 9 .59 1.892 2.108.59z"
|
|
327
|
-
fill="#2C3E50"
|
|
328
|
-
></path>
|
|
329
|
-
</svg>
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
</div>
|
|
333
|
-
</div>
|
|
334
|
-
</div>
|
|
335
|
-
<div class="exit-mob" @click="logout">
|
|
336
|
-
<!-- exit-black-->
|
|
337
|
-
<svg
|
|
338
|
-
width="18"
|
|
339
|
-
height="18"
|
|
340
|
-
fill="#25476AFF"
|
|
341
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
342
|
-
viewBox="0 0 24 24"
|
|
343
|
-
class="arrow-svg"
|
|
344
|
-
>
|
|
345
|
-
<path
|
|
346
|
-
fill-rule="evenodd"
|
|
347
|
-
clip-rule="evenodd"
|
|
348
|
-
d="M17.7501 7.93933L21.8108 12L17.7501 16.0607L16.6895 15L19.6895 12L16.6895 8.99999L17.7501 7.93933Z"
|
|
349
|
-
fill="#2C3E50"
|
|
350
|
-
></path>
|
|
351
|
-
<path
|
|
352
|
-
fill-rule="evenodd"
|
|
353
|
-
clip-rule="evenodd"
|
|
354
|
-
d="M15.5 2.25H2V21.75H15.5V17.25H14V20.25H3.5V3.75H14V6.75H15.5V2.25Z"
|
|
355
|
-
fill="#2C3E50"
|
|
356
|
-
></path>
|
|
357
|
-
<path
|
|
358
|
-
fill-rule="evenodd"
|
|
359
|
-
clip-rule="evenodd"
|
|
360
|
-
d="M7 11.25L20.5 11.25L20.5 12.75L7 12.75L7 11.25Z"
|
|
361
|
-
fill="#2C3E50"
|
|
362
|
-
></path>
|
|
363
|
-
</svg>
|
|
364
|
-
Выход
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
</div>
|
|
368
|
-
</MobileToggle>
|
|
369
|
-
<MobileToggle v-slot="{ animationClass }">
|
|
370
|
-
<div
|
|
371
|
-
v-show="
|
|
372
|
-
someMobileOpened.length > 0 &&
|
|
373
|
-
chosenElem &&
|
|
374
|
-
chosenElem.children.length > 0
|
|
375
|
-
"
|
|
376
|
-
:class="animationClass"
|
|
377
|
-
class="mobile-table"
|
|
378
|
-
>
|
|
379
|
-
<div class="mobile-table-head mobile-table-head-chosen">
|
|
380
|
-
<div @click="chosenElem.opened = false">
|
|
381
|
-
<!-- arrow_right -->
|
|
382
|
-
<svg
|
|
383
|
-
width="18"
|
|
384
|
-
height="18"
|
|
385
|
-
fill="none"
|
|
386
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
387
|
-
class="rotated"
|
|
388
|
-
viewBox="0 0 10 18"
|
|
389
|
-
>
|
|
390
|
-
<path
|
|
391
|
-
fill-rule="evenodd"
|
|
392
|
-
clip-rule="evenodd"
|
|
393
|
-
d="M2.108.59L9.318 9l-7.21 8.41L.59 16.108 6.683 9 .59 1.892 2.108.59z"
|
|
394
|
-
fill="#2C3E50"
|
|
395
|
-
></path>
|
|
396
|
-
</svg>
|
|
397
|
-
</div>
|
|
398
|
-
<p>{{ chosenElem.name }}</p>
|
|
399
|
-
</div>
|
|
400
|
-
<div class="profile-menu-mobile">
|
|
401
|
-
<div class="profile-menu-mobile__inner">
|
|
402
|
-
<div
|
|
403
|
-
class="profile-menu-mobile__items"
|
|
404
|
-
v-if="chosenElem.children.length > 0"
|
|
405
|
-
>
|
|
406
|
-
<div
|
|
407
|
-
v-for="(elem, index) in chosenElem.children"
|
|
408
|
-
:key="index"
|
|
409
|
-
class="bb"
|
|
410
|
-
>
|
|
411
|
-
<div
|
|
412
|
-
@click="handleClick(elem[mode], elem.name)"
|
|
413
|
-
v-if="elem[mode]"
|
|
414
|
-
:class="
|
|
415
|
-
elem.link
|
|
416
|
-
? 'profile-menu-mobile__balance-link'
|
|
417
|
-
: 'profile-menu-mobile__links'
|
|
418
|
-
"
|
|
419
|
-
>
|
|
420
|
-
<div class="button-inner">
|
|
421
|
-
<div>{{ elem.name }}</div>
|
|
422
|
-
</div>
|
|
423
|
-
</div>
|
|
424
|
-
</div>
|
|
425
|
-
</div>
|
|
426
|
-
</div>
|
|
427
|
-
<div class="exit-mob" @click="logout">
|
|
428
|
-
<!-- exit-black-->
|
|
429
|
-
<svg
|
|
430
|
-
width="18"
|
|
431
|
-
height="18"
|
|
432
|
-
fill="#25476AFF"
|
|
433
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
434
|
-
viewBox="0 0 24 24"
|
|
435
|
-
class="arrow-svg"
|
|
436
|
-
>
|
|
437
|
-
<path
|
|
438
|
-
fill-rule="evenodd"
|
|
439
|
-
clip-rule="evenodd"
|
|
440
|
-
d="M17.7501 7.93933L21.8108 12L17.7501 16.0607L16.6895 15L19.6895 12L16.6895 8.99999L17.7501 7.93933Z"
|
|
441
|
-
fill="#2C3E50"
|
|
442
|
-
></path>
|
|
443
|
-
<path
|
|
444
|
-
fill-rule="evenodd"
|
|
445
|
-
clip-rule="evenodd"
|
|
446
|
-
d="M15.5 2.25H2V21.75H15.5V17.25H14V20.25H3.5V3.75H14V6.75H15.5V2.25Z"
|
|
447
|
-
fill="#2C3E50"
|
|
448
|
-
></path>
|
|
449
|
-
<path
|
|
450
|
-
fill-rule="evenodd"
|
|
451
|
-
clip-rule="evenodd"
|
|
452
|
-
d="M7 11.25L20.5 11.25L20.5 12.75L7 12.75L7 11.25Z"
|
|
453
|
-
fill="#2C3E50"
|
|
454
|
-
></path>
|
|
455
|
-
</svg>
|
|
456
|
-
Выход
|
|
457
|
-
</div>
|
|
458
|
-
</div>
|
|
459
|
-
</div>
|
|
460
|
-
</MobileToggle>
|
|
461
165
|
</div>
|
|
462
166
|
</div>
|
|
463
167
|
</template>
|
|
464
168
|
|
|
465
169
|
<script>
|
|
170
|
+
import { profileDropDown } from "../../configs/profileDropDown";
|
|
466
171
|
import SlideToggle from "../transitions/SlideToggle";
|
|
467
172
|
import vClickOutside from "v-click-outside";
|
|
468
|
-
import MobileToggle from "../transitions/VerticalMobileToggle";
|
|
469
173
|
|
|
470
174
|
export default {
|
|
471
175
|
directives: {
|
|
@@ -479,10 +183,6 @@ export default {
|
|
|
479
183
|
return ["prod", "dev", "staging"].indexOf(value) !== -1;
|
|
480
184
|
},
|
|
481
185
|
},
|
|
482
|
-
profileDropDown: {
|
|
483
|
-
type: Array,
|
|
484
|
-
required: true,
|
|
485
|
-
},
|
|
486
186
|
isAuthenticated: {
|
|
487
187
|
type: Boolean,
|
|
488
188
|
default: false,
|
|
@@ -501,51 +201,38 @@ export default {
|
|
|
501
201
|
default: "",
|
|
502
202
|
required: true,
|
|
503
203
|
},
|
|
204
|
+
rate: {
|
|
205
|
+
type: String,
|
|
206
|
+
default: ""
|
|
207
|
+
},
|
|
208
|
+
balance: {
|
|
209
|
+
type: [Number, String],
|
|
210
|
+
default: 0
|
|
211
|
+
}
|
|
504
212
|
},
|
|
505
213
|
components: {
|
|
506
214
|
SlideToggle,
|
|
507
|
-
MobileToggle,
|
|
508
215
|
},
|
|
509
216
|
data() {
|
|
510
217
|
return {
|
|
218
|
+
profileDropDown,
|
|
511
219
|
active: false,
|
|
512
|
-
listDropDown: [],
|
|
513
220
|
chosenElem: {
|
|
514
221
|
children: [],
|
|
515
222
|
},
|
|
516
223
|
};
|
|
517
224
|
},
|
|
518
225
|
mounted() {
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
this.activeTabKey === "counterparty" &&
|
|
524
|
-
window &&
|
|
525
|
-
window.innerWidth > 850
|
|
526
|
-
) {
|
|
527
|
-
this.chosenElem = this.listDropDown.find(
|
|
528
|
-
(el) => el.name === "Контрагенты"
|
|
529
|
-
);
|
|
530
|
-
} else if (
|
|
531
|
-
this.activeTabKey === "tenders" &&
|
|
532
|
-
window &&
|
|
533
|
-
window.innerWidth > 850
|
|
534
|
-
) {
|
|
535
|
-
this.chosenElem = this.listDropDown.find((el) => el.name === "Тендеры");
|
|
536
|
-
} else if (
|
|
537
|
-
this.activeTabKey === "work" &&
|
|
538
|
-
window &&
|
|
539
|
-
window.innerWidth > 850
|
|
540
|
-
) {
|
|
541
|
-
this.chosenElem = this.listDropDown.find((el) => el.name === "Работа");
|
|
226
|
+
const item = this.activeTabKey ? this.profileDropDown.find(el => el.key && el.key.includes(this.activeTabKey)) : null;
|
|
227
|
+
if(item && window && window.innerWidth > 850) {
|
|
228
|
+
this.chosenElem = item;
|
|
229
|
+
this.chosenElem.opened = true;
|
|
542
230
|
}
|
|
543
|
-
this.chosenElem.opened = true;
|
|
544
231
|
},
|
|
545
232
|
computed: {
|
|
546
233
|
someMobileOpened() {
|
|
547
|
-
return this.
|
|
548
|
-
|
|
234
|
+
return this.profileDropDown.filter(
|
|
235
|
+
(el) => el.opened && el.children.length > 0
|
|
549
236
|
);
|
|
550
237
|
},
|
|
551
238
|
},
|
|
@@ -574,17 +261,17 @@ export default {
|
|
|
574
261
|
handleClick(url, name) {
|
|
575
262
|
if (!name.includes("Текущий")) {
|
|
576
263
|
window.open(url, "_self");
|
|
577
|
-
// this.active = false;
|
|
578
|
-
// if (this.chosenElem) this.chosenElem.opened = false;
|
|
579
264
|
}
|
|
580
265
|
},
|
|
581
266
|
rotateItem(index) {
|
|
582
|
-
this.chosenElem = this.
|
|
583
|
-
this
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
267
|
+
this.chosenElem = this.profileDropDown[index];
|
|
268
|
+
const array = this.profileDropDown;
|
|
269
|
+
array.forEach((el, idx) => {
|
|
270
|
+
if (index === idx) {
|
|
271
|
+
console.log(!el.opened);
|
|
272
|
+
this.$set(el, 'opened', !el.opened);
|
|
273
|
+
} else this.$set(el, 'opened', false)
|
|
274
|
+
});
|
|
588
275
|
},
|
|
589
276
|
goAuth() {
|
|
590
277
|
const fullPath = encodeURIComponent(window.location.toString());
|
|
@@ -640,11 +327,13 @@ svg.rotated {
|
|
|
640
327
|
display: flex;
|
|
641
328
|
align-items: center;
|
|
642
329
|
font-size: 14px;
|
|
330
|
+
|
|
643
331
|
&:first-child {
|
|
644
332
|
@media (max-width: 1025px) {
|
|
645
333
|
display: none;
|
|
646
334
|
}
|
|
647
335
|
}
|
|
336
|
+
|
|
648
337
|
&:nth-child(2) {
|
|
649
338
|
display: none;
|
|
650
339
|
@media (max-width: 1025px) {
|
|
@@ -692,6 +381,27 @@ svg.rotated {
|
|
|
692
381
|
color: #2c3e50;
|
|
693
382
|
cursor: pointer;
|
|
694
383
|
|
|
384
|
+
span.balance {
|
|
385
|
+
padding: 2px 8px;
|
|
386
|
+
color: #698096;
|
|
387
|
+
background: #ECEFF1;
|
|
388
|
+
border-radius: 100px;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.rate-item {
|
|
392
|
+
display: flex;
|
|
393
|
+
justify-content: space-between;
|
|
394
|
+
align-items: center;
|
|
395
|
+
width: 100%;
|
|
396
|
+
color: #007aff;
|
|
397
|
+
font-size: 14px;
|
|
398
|
+
font-weight: 600;
|
|
399
|
+
span.rate {
|
|
400
|
+
color: #2C3E50;
|
|
401
|
+
font-size: 12px;
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
|
|
695
405
|
div:not(:last-child) > a > .gray-text {
|
|
696
406
|
border-bottom: 0.5px solid #bdc7ce;
|
|
697
407
|
}
|
|
@@ -705,7 +415,7 @@ svg.rotated {
|
|
|
705
415
|
}
|
|
706
416
|
|
|
707
417
|
div
|
|
708
|
-
|
|
418
|
+
> .gray-text:not(.profile-menu__balance-link):not(.profile-menu__links) {
|
|
709
419
|
padding: 0;
|
|
710
420
|
|
|
711
421
|
a {
|
|
@@ -749,9 +459,15 @@ svg.rotated {
|
|
|
749
459
|
justify-content: space-between;
|
|
750
460
|
align-items: center;
|
|
751
461
|
height: 40px;
|
|
462
|
+
|
|
752
463
|
&:hover {
|
|
753
464
|
background: #2c3e500c;
|
|
754
465
|
}
|
|
466
|
+
|
|
467
|
+
&.active {
|
|
468
|
+
background: #ECEFF1;
|
|
469
|
+
border-left: 3px solid #007aff;
|
|
470
|
+
}
|
|
755
471
|
}
|
|
756
472
|
|
|
757
473
|
&__balance-link {
|
|
@@ -772,6 +488,7 @@ svg.rotated {
|
|
|
772
488
|
|
|
773
489
|
&__balance {
|
|
774
490
|
font-size: 14px;
|
|
491
|
+
font-weight: 600;
|
|
775
492
|
color: #007aff;
|
|
776
493
|
white-space: nowrap;
|
|
777
494
|
}
|
|
@@ -784,7 +501,7 @@ svg.rotated {
|
|
|
784
501
|
padding: 0 16px;
|
|
785
502
|
|
|
786
503
|
&:hover {
|
|
787
|
-
background: #
|
|
504
|
+
background: linear-gradient(0deg, rgba(236, 239, 241, 0.5), rgba(236, 239, 241, 0.5)), #FFFFFF;
|
|
788
505
|
}
|
|
789
506
|
|
|
790
507
|
&:not(:last-child) {
|
|
@@ -795,7 +512,7 @@ svg.rotated {
|
|
|
795
512
|
}
|
|
796
513
|
|
|
797
514
|
.exit {
|
|
798
|
-
background: #
|
|
515
|
+
background: #007AFF;
|
|
799
516
|
height: 40px;
|
|
800
517
|
border-radius: 0 0 2px 2px;
|
|
801
518
|
display: flex;
|
|
@@ -815,7 +532,7 @@ svg.rotated {
|
|
|
815
532
|
|
|
816
533
|
svg {
|
|
817
534
|
margin-right: 8px;
|
|
818
|
-
background: #
|
|
535
|
+
background: #007AFF;
|
|
819
536
|
fill: none !important;
|
|
820
537
|
stroke: #fff;
|
|
821
538
|
transition: all 0s;
|