adata-ui 0.3.91 → 3.0.0

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 (106) hide show
  1. package/README.md +84 -7
  2. package/dist/module.d.mts +8 -0
  3. package/dist/module.json +9 -0
  4. package/dist/module.mjs +16 -0
  5. package/dist/runtime/plugin.d.ts +2 -0
  6. package/dist/runtime/plugin.js +4 -0
  7. package/dist/runtime/server/tsconfig.json +3 -0
  8. package/dist/types.d.mts +3 -0
  9. package/package.json +55 -76
  10. package/babel.config.js +0 -5
  11. package/dist/adata-ui.common.js +0 -10489
  12. package/dist/adata-ui.common.js.map +0 -1
  13. package/dist/adata-ui.css +0 -1
  14. package/dist/adata-ui.umd.js +0 -10499
  15. package/dist/adata-ui.umd.js.map +0 -1
  16. package/dist/adata-ui.umd.min.js +0 -7
  17. package/dist/adata-ui.umd.min.js.map +0 -1
  18. package/dist/demo.html +0 -10
  19. package/dist/img/facebook.797d820f.svg +0 -4
  20. package/dist/img/instagram.8a77381c.svg +0 -6
  21. package/dist/img/logo-desktop-main.4d169395.svg +0 -8
  22. package/dist/img/logo-mobile-main.397bce24.svg +0 -4
  23. package/dist/img/logo-white-desktop.7d0e3481.svg +0 -8
  24. package/dist/img/telegram.be0d1008.svg +0 -4
  25. package/dist/img/tiktok.eaeb39cb.svg +0 -4
  26. package/dist/img/up-down.e2b28f72.svg +0 -3
  27. package/dist/img/youtube.125aace6.svg +0 -5
  28. package/package-lock.json +0 -27138
  29. package/public/favicon.ico +0 -0
  30. package/public/index.html +0 -17
  31. package/public/logo.svg +0 -4
  32. package/src/App.vue +0 -28
  33. package/src/assets/_text_field.scss +0 -225
  34. package/src/assets/facebook.svg +0 -4
  35. package/src/assets/instagram.svg +0 -6
  36. package/src/assets/logo-desktop-main.svg +0 -8
  37. package/src/assets/logo-desktop.svg +0 -9
  38. package/src/assets/logo-desktop.webp +0 -0
  39. package/src/assets/logo-mobile-main.svg +0 -4
  40. package/src/assets/logo-mobile.svg +0 -9
  41. package/src/assets/logo-mobile.webp +0 -0
  42. package/src/assets/logo-white-desktop.svg +0 -8
  43. package/src/assets/style.scss +0 -1
  44. package/src/assets/telegram.svg +0 -4
  45. package/src/assets/tiktok.svg +0 -4
  46. package/src/assets/up-down.svg +0 -3
  47. package/src/assets/youtube.svg +0 -5
  48. package/src/components/Alert/Alert.stories.js +0 -17
  49. package/src/components/Alert/Alert.vue +0 -63
  50. package/src/components/BottomNavigationBar/ABottomNavigationBar.vue +0 -160
  51. package/src/components/BottomNavigationBar/BottomNavigationBar.stories.js +0 -25
  52. package/src/components/Button/AButton.vue +0 -231
  53. package/src/components/Button/Button.stories.js +0 -23
  54. package/src/components/Checkbox/ACheckbox.vue +0 -114
  55. package/src/components/Checkbox/Checkbox.stories.js +0 -15
  56. package/src/components/CheckboxMenu/CheckboxMenu.stories.js +0 -24
  57. package/src/components/CheckboxMenu/CheckboxMenu.vue +0 -108
  58. package/src/components/ErrorPages/BadGateway.vue +0 -224
  59. package/src/components/ErrorPages/Forbidden.vue +0 -468
  60. package/src/components/ErrorPages/InternalServerError.vue +0 -275
  61. package/src/components/ErrorPages/NotFound.vue +0 -995
  62. package/src/components/ErrorPages/Unavailable.vue +0 -3705
  63. package/src/components/Footer/Footer.stories.js +0 -20
  64. package/src/components/Footer/Footer.vue +0 -292
  65. package/src/components/Header/ChildLinks.vue +0 -144
  66. package/src/components/Header/Header.stories.js +0 -56
  67. package/src/components/Header/Header.vue +0 -1308
  68. package/src/components/Header/InfoHeader.vue +0 -319
  69. package/src/components/Header/Profile.vue +0 -670
  70. package/src/components/Header/ProfileMenu.vue +0 -293
  71. package/src/components/Header/ProfileMobile.vue +0 -308
  72. package/src/components/Header/ProfileOld.vue +0 -781
  73. package/src/components/InternalServerError/InternalServerError.stories.js +0 -17
  74. package/src/components/InternalServerError/InternalServerError.vue +0 -262
  75. package/src/components/Introduction.stories.mdx +0 -7
  76. package/src/components/Loader/Loader.stories.js +0 -25
  77. package/src/components/Loader/Loader.vue +0 -325
  78. package/src/components/MailTo/MailTo.stories.js +0 -15
  79. package/src/components/MailTo/MailTo.vue +0 -258
  80. package/src/components/NavIcon/ANavIcon.vue +0 -50
  81. package/src/components/NavIcon/NavIcon.stories.js +0 -15
  82. package/src/components/PasswordField/PasswordField.stories.js +0 -16
  83. package/src/components/PasswordField/PasswordField.vue +0 -77
  84. package/src/components/SearchTextField/SearchTextField.stories.js +0 -78
  85. package/src/components/SearchTextField/SearchTextField.vue +0 -230
  86. package/src/components/ServiceSlider/AServiceSlider.vue +0 -793
  87. package/src/components/ServiceSlider/ServiceSlider.stories.js +0 -20
  88. package/src/components/Table/ATable.vue +0 -117
  89. package/src/components/Table/Table.stories.js +0 -15
  90. package/src/components/TextArea/TextArea.stories.js +0 -17
  91. package/src/components/TextArea/TextArea.vue +0 -116
  92. package/src/components/TextError/TextError.stories.js +0 -15
  93. package/src/components/TextError/TextError.vue +0 -57
  94. package/src/components/TextField/TextField.stories.js +0 -17
  95. package/src/components/TextField/TextField.vue +0 -107
  96. package/src/components/index.js +0 -54
  97. package/src/components/newComponents/FooterNew/FooterBottom.vue +0 -153
  98. package/src/components/newComponents/FooterNew/FooterItem.vue +0 -114
  99. package/src/components/newComponents/FooterNew/FooterNew.stories.js +0 -20
  100. package/src/components/newComponents/FooterNew/FooterNew.vue +0 -39
  101. package/src/components/newComponents/FooterNew/FooterTop.vue +0 -321
  102. package/src/components/transitions/SlideToggle.vue +0 -55
  103. package/src/components/transitions/VerticalMobileToggle.vue +0 -75
  104. package/src/configs/icons.js +0 -112
  105. package/src/configs/profileDropDown.js +0 -134
  106. package/src/main.js +0 -12
@@ -1,293 +0,0 @@
1
- <template>
2
- <div class="profile-menu">
3
- <div class="profile-menu__header">
4
- <div class="tariff">
5
- <div class="tariff__label">
6
- Тариф
7
- </div>
8
- <div class="tariff__value">
9
- <div class="tariff__text">
10
- {{ rate || "Базовый" }}
11
- </div>
12
- <div class="tariff__badge">
13
- Подключен
14
- </div>
15
- </div>
16
- </div>
17
-
18
- <div class="balance">
19
- <div class="balance__wrapper">
20
- <div class="balance__title">Текущий баланс:</div>
21
- <div class="balance__badge">{{ balance || 0 }} ₸</div>
22
- </div>
23
- <a-button size="extra_sm" variant="blue_outlined" :url="links.balance[mode]">Пополнить</a-button>
24
- </div>
25
- </div>
26
-
27
- <div class="profile-menu__main">
28
- <div class="profile-links">
29
- <a :href="links.profile[mode]" onclick="`return false`" class="profile-link">
30
- <div class="profile-link__icon">
31
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
32
- <circle cx="12" cy="7.5" r="4.5" stroke="#2C3E50" stroke-width="2"/>
33
- <path
34
- d="M20 21C20 21.5523 20.4477 22 21 22C21.5523 22 22 21.5523 22 21H20ZM2 21C2 21.5523 2.44772 22 3 22C3.55228 22 4 21.5523 4 21H2ZM12 13C16.4183 13 20 16.5817 20 21H22C22 15.4772 17.5228 11 12 11V13ZM4 21C4 16.5817 7.58172 13 12 13V11C6.47715 11 2 15.4772 2 21H4Z"
35
- fill="#2C3E50"/>
36
- </svg>
37
- </div>
38
- <div class="profile-link__text">Личный кабинет</div>
39
- </a>
40
- <a :href="links.tenders[mode]" onclick="`return false`" class="profile-link">
41
- <div class="profile-link__icon">
42
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
43
- <path
44
- d="M20.083 15.2001L21.285 15.9211C21.3591 15.9655 21.4205 16.0283 21.4631 16.1035C21.5058 16.1787 21.5282 16.2636 21.5282 16.3501C21.5282 16.4365 21.5058 16.5214 21.4631 16.5966C21.4205 16.6718 21.3591 16.7347 21.285 16.7791L12.515 22.0411C12.3594 22.1345 12.1814 22.1839 12 22.1839C11.8185 22.1839 11.6405 22.1345 11.485 22.0411L2.71498 16.7791C2.64082 16.7347 2.57944 16.6718 2.53682 16.5966C2.4942 16.5214 2.4718 16.4365 2.4718 16.3501C2.4718 16.2636 2.4942 16.1787 2.53682 16.1035C2.57944 16.0283 2.64082 15.9655 2.71498 15.9211L3.91698 15.2001L12 20.0501L20.083 15.2001ZM20.083 10.5001L21.285 11.2211C21.3591 11.2655 21.4205 11.3283 21.4631 11.4035C21.5058 11.4787 21.5282 11.5636 21.5282 11.6501C21.5282 11.7365 21.5058 11.8214 21.4631 11.8966C21.4205 11.9718 21.3591 12.0347 21.285 12.0791L12 17.6501L2.71498 12.0791C2.64082 12.0347 2.57944 11.9718 2.53682 11.8966C2.4942 11.8214 2.4718 11.7365 2.4718 11.6501C2.4718 11.5636 2.4942 11.4787 2.53682 11.4035C2.57944 11.3283 2.64082 11.2655 2.71498 11.2211L3.91698 10.5001L12 15.3501L20.083 10.5001ZM12.514 1.30907L21.285 6.57107C21.3591 6.61546 21.4205 6.67832 21.4631 6.75351C21.5058 6.82869 21.5282 6.91364 21.5282 7.00007C21.5282 7.0865 21.5058 7.17145 21.4631 7.24663C21.4205 7.32182 21.3591 7.38468 21.285 7.42907L12 13.0001L2.71498 7.42907C2.64082 7.38468 2.57944 7.32182 2.53682 7.24663C2.4942 7.17145 2.4718 7.0865 2.4718 7.00007C2.4718 6.91364 2.4942 6.82869 2.53682 6.75351C2.57944 6.67832 2.64082 6.61546 2.71498 6.57107L11.485 1.30907C11.6405 1.21563 11.8185 1.16626 12 1.16626C12.1814 1.16626 12.3594 1.21563 12.515 1.30907H12.514ZM12 3.33207L5.88698 7.00007L12 10.6681L18.113 7.00007L12 3.33207Z"
45
- fill="#2C3E50"/>
46
- </svg>
47
- </div>
48
- <div class="profile-link__text">Тендеры Шаблоны</div>
49
- </a>
50
- <a :href="links.work[mode]" onclick="`return false`" class="profile-link">
51
- <div class="profile-link__icon">
52
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
53
- <path d="M7 5V2C7 1.73478 7.10536 1.48043 7.29289 1.29289C7.48043 1.10536 7.73478 1 8 1H16C16.2652 1 16.5196 1.10536 16.7071 1.29289C16.8946 1.48043 17 1.73478 17 2V5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V6C2 5.73478 2.10536 5.48043 2.29289 5.29289C2.48043 5.10536 2.73478 5 3 5H7ZM20 13H4V19H20V13ZM20 7H4V11H7V9H9V11H15V9H17V11H20V7ZM9 3V5H15V3H9Z" fill="#2C3E50"/>
54
- </svg>
55
- </div>
56
- <div class="profile-link__text">Профиль Работа</div>
57
- </a>
58
- <a :href="links.favourites[mode] + `${tab ? '?tab=' + tab : ''}`" onclick="`return false`" class="profile-link" target="_blank">
59
- <div class="profile-link__icon">
60
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
61
- <path d="M5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V22.143C20.0001 22.2324 19.9763 22.3202 19.9309 22.3973C19.8855 22.4743 19.8204 22.5378 19.7421 22.5811C19.6639 22.6244 19.5755 22.6459 19.4861 22.6434C19.3968 22.641 19.3097 22.6146 19.234 22.567L12 18.03L4.766 22.566C4.69037 22.6135 4.60339 22.6399 4.5141 22.6424C4.42482 22.6449 4.33649 22.6235 4.2583 22.5803C4.1801 22.5371 4.11491 22.4738 4.06948 22.3969C4.02406 22.32 4.00007 22.2323 4 22.143V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2ZM18 4H6V19.432L12 15.671L18 19.432V4Z" fill="#2C3E50"/>
62
- </svg>
63
- </div>
64
- <div class="profile-link__text">Избранные</div>
65
- </a>
66
- <a :href="links.views[mode]" onclick="`return false`" class="profile-link">
67
- <div class="profile-link__icon">
68
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
69
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
70
- <path d="M4.50049 12.75C4.50049 11.1183 4.98434 9.52325 5.89086 8.16655C6.79738 6.80984 8.08586 5.75242 9.59335 5.12799C11.1008 4.50357 12.7596 4.34019 14.36 4.65852C15.9603 4.97685 17.4303 5.76259 18.5841 6.91637C19.7379 8.07015 20.5236 9.54016 20.842 11.1405C21.1603 12.7408 20.9969 14.3996 20.3725 15.9071C19.7481 17.4146 18.6906 18.7031 17.3339 19.6096C15.9772 20.5161 14.3822 21 12.7505 21" stroke="#2C3E50" stroke-width="2" stroke-linecap="round"/>
71
- <path d="M13.5005 9V12.75L9.00049 16.5" stroke="#2C3E50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
72
- <path d="M2 11L4.5 14L7 11" stroke="#2C3E50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
73
- </svg>
74
- </svg>
75
- </div>
76
- <div class="profile-link__text">История просмотров</div>
77
- </a>
78
- </div>
79
-
80
- <div class="exit" @click="$emit('logout')">
81
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
82
- <path d="M4 18H6V20H18V4H6V6H4V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V21C20 21.2652 19.8946 21.5196 19.7071 21.7071C19.5196 21.8946 19.2652 22 19 22H5C4.73478 22 4.48043 21.8946 4.29289 21.7071C4.10536 21.5196 4 21.2652 4 21V18ZM6 11H13V13H6V16L1 12L6 8V11Z" fill="white"/>
83
- </svg>
84
- <div class="exit__text">Выход</div>
85
- </div>
86
- </div>
87
- </div>
88
- </template>
89
-
90
- <script>
91
- export default {
92
- props: {
93
- mode: {
94
- type: String,
95
- required: true,
96
- },
97
- rate: {
98
- type: String,
99
- required: true
100
- },
101
- balance: {
102
- type: String,
103
- required: true
104
- },
105
- tab: {
106
- type: String,
107
- default: ""
108
- }
109
- },
110
- data() {
111
- return {
112
- links: {
113
- balance: {
114
- 'prod': 'https://adata.kz/profile?modal=show',
115
- 'dev': 'https://adtdev.kz/profile?modal=show',
116
- 'staging': 'https://adada.kz/profile?modal=show',
117
- },
118
- profile: {
119
- 'prod': 'https://adata.kz/profile',
120
- 'dev': 'https://adtdev.kz/profile',
121
- 'staging': 'https://adada.kz/profile',
122
- },
123
- tenders: {
124
- 'prod': 'https://tender.adata.kz/profile/search-profile',
125
- 'dev': 'https://tender.adtdev.kz/profile/search-profile',
126
- 'staging': 'https://tender.adada.kz/profile/search-profile',
127
- },
128
- work: {
129
- 'prod': 'https://work.adata.kz/profile/account',
130
- 'dev': 'https://work.adtdev.kz/profile/account' ,
131
- 'staging': 'https://work.adada.kz/profile/account',
132
- },
133
- favourites: {
134
- 'prod': 'https://adata.kz/favourites',
135
- 'dev': 'https://adtdev.kz/favourites' ,
136
- 'staging': 'https://adada.kz/favourites',
137
- },
138
- views: {
139
- 'prod': 'https://adata.kz/profile/views',
140
- 'dev': 'https://adtdev.kz/profile/views' ,
141
- 'staging': 'https://adada.kz/profile/views',
142
- },
143
- }
144
- }
145
- }
146
- }
147
- </script>
148
-
149
- <style lang="scss">
150
- .profile-menu {
151
- width: 400px;
152
- background: #fff;
153
- box-shadow: 0 4px 8px rgba(157, 163, 172, 0.4);
154
- border-radius: 2px;
155
-
156
- &__header {
157
- padding: 16px 16px 16px 32px;
158
- background: rgba(189, 199, 206, 0.3);
159
- }
160
-
161
- &__main {
162
- background: #fff;
163
- padding: 16px;
164
- }
165
- }
166
-
167
- .tariff {
168
- display: flex;
169
- flex-direction: column;
170
- gap: 4px;
171
- margin-bottom: 16px;
172
-
173
- &__label {
174
- font-weight: 500;
175
- font-size: 14px;
176
- color: #71757A;
177
- }
178
-
179
- &__value {
180
- display: flex;
181
- align-items: center;
182
- gap: 16px;
183
- font-weight: 600;
184
- font-size: 16px;
185
- color: #2C3E50;
186
- }
187
-
188
- &__badge {
189
- padding: 4px;
190
- background: #4CAF50;
191
- border: 0.5px solid #4CAF50;
192
- border-radius: 2px;
193
-
194
- font-weight: 400;
195
- font-size: 10px;
196
- color: #FFFFFF;
197
- }
198
- }
199
-
200
- .balance {
201
- display: flex;
202
- justify-content: space-between;
203
- align-items: center;
204
-
205
- &__wrapper {
206
- display: flex;
207
- align-items: center;
208
- gap: 8px;
209
- }
210
-
211
- &__title {
212
- font-weight: 400;
213
- font-size: 12px;
214
- color: #2C3E50;
215
- }
216
-
217
- &__badge {
218
- padding: 4px 10px;
219
- background: #007AFF;
220
- border-radius: 100px;
221
- font-weight: 400;
222
- font-size: 12px;
223
- color: #FFFFFF;
224
- }
225
- }
226
-
227
- .profile-links {
228
- display: flex;
229
- flex-direction: column;
230
- }
231
-
232
- .profile-link {
233
- display: flex;
234
- align-items: center;
235
- gap: 18px;
236
- padding: 10px 16px;
237
- border-radius: 2px;
238
- transition: .3s;
239
-
240
- font-weight: 500;
241
- font-size: 14px;
242
- color: #2C3E50;
243
-
244
- &:hover {
245
- background: rgba(0, 122, 255, 0.12);
246
- }
247
- }
248
-
249
- .exit {
250
- display: flex;
251
- align-items: center;
252
- justify-content: flex-start;
253
- margin-top: 16px;
254
- padding-left: 16px;
255
- background: #007AFF;
256
- height: 40px;
257
- border-radius: 0 0 2px 2px;
258
- cursor: pointer;
259
- gap: 10px;
260
-
261
- font-weight: 500;
262
- font-size: 14px;
263
- line-height: 20px;
264
- color: #fff;
265
-
266
- &:hover {
267
- background: #9da3ac;
268
- color: #fff;
269
- }
270
-
271
- &:hover svg {
272
- stroke: #fff;
273
- background: #9da3ac;
274
- }
275
-
276
- svg {
277
- margin-right: 8px;
278
- background: #007AFF;
279
- fill: none !important;
280
- transition: all 0s;
281
- }
282
-
283
- &:active {
284
- background: #0055bb;
285
- color: #fff;
286
- }
287
-
288
- &:active svg {
289
- stroke: #fff;
290
- background: #0055bb;
291
- }
292
- }
293
- </style>
@@ -1,308 +0,0 @@
1
- <template>
2
- <div class="menu_mobile">
3
- <div @click="$emit('changeValue')" class="empty-space"></div>
4
- <div class="menu-wrapper">
5
- <div class="mobile-table-head">
6
- <div class="mobile-table-head-left" @click.stop="$emit('close')">
7
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
8
- <path d="M9.9996 8.00317L5.9996 12.0097L9.99958 16.0032" stroke="#007AFF" stroke-width="1.2"
9
- stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
10
- <path d="M6 12L18 12" stroke="#007AFF" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round"
11
- stroke-linejoin="round"/>
12
- </svg>
13
- <span>{{ email }}</span>
14
- </div>
15
- </div>
16
- <div class="mobile-table-body">
17
- <p>Тариф {{ rate }}</p>
18
- <p>Суточный лимит запросов: <span>{{ +limitRemaining }}</span></p>
19
- <p>Остаток дней по тарифу: <span>{{ daysLeft }}</span></p>
20
- <a :href="profileDropDown[0][mode] || '/'" class="button">Увеличить лимит запросов</a>
21
- </div>
22
- <div class="mobile-table-item">
23
- <p class="mobile-table-item__title">
24
- Платежи
25
- </p>
26
- <div class="mobile-table-item__text">
27
- <p>Текущий баланс: <span>{{ balance + " ₸" }}</span></p>
28
- <a
29
- :href="profileDropDown[1][mode]"
30
- onclick="return false"
31
- @click="showModal(profileDropDown[1][mode])"
32
- class="button"
33
- >
34
- Пополнить
35
- </a>
36
- </div>
37
- <a :href="profileDropDown[2][mode]" class="p">История платежей</a>
38
- </div>
39
- <div class="mobile-table-item">
40
- <p class="mobile-table-item__title">
41
- Профиль пользователя
42
- </p>
43
- <div
44
- v-for="(item, id) in profileDropDown.filter(el => el.children)"
45
- :key="'child' + id"
46
- class="mobile-table-item__text wrapped"
47
- >
48
- <div @click="openOneCloseOthers(id)" class="wrapped__text" :class="{'active': item.opened}">
49
- <p>{{ item.name }}</p>
50
- <div class="svg-wrapper" :class="{'rotated': item.opened}">
51
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
52
- <path d="M4.5 9L12 15L19.5 9" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
53
- </svg>
54
- </div>
55
- </div>
56
- <SlideToggle>
57
- <div v-show="item.opened" class="mobile-table-item__children">
58
- <a
59
- v-for="(elem, id) in item.children" :key="'elem' + id"
60
- :href="elem[mode]"
61
- :target="elem.name === 'Избранные' ? '_blank' : '_self'"
62
- >
63
- {{ elem.name }}
64
- </a>
65
- </div>
66
- </SlideToggle>
67
- </div>
68
- </div>
69
- <div class="mobile-table-item">
70
- <p class="mobile-table-item__title">
71
- Общие настройки
72
- </p>
73
- <a :href="profileDropDown[3][mode]" class="p">Личная информация</a>
74
- </div>
75
- <div class="menu_mobile-footer">
76
- <button class="sign" @click="$emit('logout')">
77
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
78
- <path d="M16.5 15L19.5 12L16.5 9" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
79
- <path d="M15 16.875L15 19.5L4.5 19.5L4.5 4.5L15 4.5L15 6.5625" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
80
- <path d="M19 12H8" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
81
- </svg>
82
- <span>Выход</span>
83
- </button>
84
- </div>
85
- </div>
86
- </div>
87
- </template>
88
-
89
- <script>
90
- import {profileDropDown} from "../../configs/profileDropDown";
91
- import SlideToggle from "../transitions/SlideToggle";
92
-
93
- export default {
94
- name: "ProfileMobile",
95
- props: {
96
- email: {
97
- type: String,
98
- required: true
99
- },
100
- balance: {
101
- type: [Number, String],
102
- default: ""
103
- },
104
- rate: {
105
- type: String,
106
- default: 'Базовый'
107
- },
108
- limitRemaining: {
109
- type: Number,
110
- default: 0
111
- },
112
- daysLeft: {
113
- type: [Number, String],
114
- default: 0
115
- },
116
- mode: {
117
- type: String,
118
- required: true
119
- },
120
- activeTabKey: {
121
- type: String,
122
- default: ""
123
- }
124
- },
125
- components: {
126
- SlideToggle
127
- },
128
- data() {
129
- return {
130
- profileDropDown
131
- }
132
- },
133
- mounted() {
134
- const item = this.activeTabKey ? this.profileDropDown.find(el => el.key && el.key.includes(this.activeTabKey)) : null;
135
- if(item) this.$set(item, 'opened', true);
136
- },
137
- methods: {
138
- openOneCloseOthers(id) {
139
- const array = this.profileDropDown.filter(el => el.children);
140
- array.forEach((el, idx) => {
141
- if(id === idx) this.$set(el, 'opened', !el.opened);
142
- else this.$set(el, 'opened', false);
143
- })
144
- },
145
- async showModal(url) {
146
- if (window.location.href.includes(url)) {
147
- this.$emit("setIsReplenishModal", true);
148
- this.setShowModal(true);
149
- } else {
150
- await window.open(url + "&modal=show", "_blank");
151
- }
152
- }
153
- }
154
- }
155
- </script>
156
-
157
- <style lang="scss" scoped>
158
- .rotated {
159
- svg {
160
- transform: rotate(180deg);
161
- }
162
- }
163
-
164
- .empty-space {
165
- background: none!important;
166
- }
167
-
168
- .mobile-table-head-left {
169
- display: flex;
170
- align-items: center;
171
- gap: 8px;
172
- svg {
173
- background: rgba(0, 122, 255, 0.12);
174
- border-radius: 50%;
175
- width: 24px;
176
- height: 24px;
177
- }
178
- }
179
-
180
- .mobile-table {
181
- &-body {
182
- background: rgba(236, 239, 241, 0.6);
183
- border-bottom: 0.5px solid rgba(157, 163, 172, 0.5);
184
- padding: 12px 20px;
185
- p, a.p {
186
- display: flex;
187
- justify-content: space-between;
188
- align-items: center;
189
- color: #2C3E50;
190
- font-size: 12px;
191
- margin-bottom: 8px;
192
- &:first-child {
193
- font-weight: 600;
194
- font-size: 14px;
195
- }
196
- span {
197
- background: #007AFF;
198
- color: #fff;
199
- padding: 2px 8px;
200
- border-radius: 100px;
201
- line-height: 20px;
202
- }
203
- }
204
- a.button {
205
- border: none;
206
- background: transparent;
207
- display: flex;
208
- justify-content: center;
209
- align-items: center;
210
- color: #007AFF;
211
- font-size: 14px;
212
- font-weight: 600;
213
- margin: 20px auto 0;
214
- }
215
- }
216
- &-item {
217
- padding: 12px 20px;
218
- border-bottom: 0.5px solid rgba(157, 163, 172, 0.5);
219
- p, a.p {
220
- &.mobile-table-item__title {
221
- color: #71757A;
222
- font-size: 12px;
223
- font-weight: 400;
224
- margin-bottom: 12px;
225
- }
226
- &:not(.mobile-table-item__title) {
227
- font-size: 14px;
228
- font-weight: 400;
229
- color: #2C3E50;
230
- span {
231
- color: #698096;
232
- font-weight: 500;
233
- background: #ECEFF1;
234
- border-radius: 100px;
235
- padding: 2px 8px;
236
- line-height: 20px;
237
- }
238
- }
239
- }
240
- &__text {
241
- display: flex;
242
- justify-content: space-between;
243
- font-size: 14px;
244
- font-weight: 400;
245
- margin-bottom: 12px;
246
- flex-wrap: wrap;
247
- align-items: center;
248
- color: #2C3E50;
249
- row-gap: 12px;
250
- a.button {
251
- background: transparent;
252
- border: none;
253
- color: #007AFF;
254
- font-size: 14px;
255
- font-weight: 600;
256
- }
257
- &.wrapped {
258
- flex-wrap: wrap;
259
- align-items: center;
260
- margin-bottom: 0;
261
- .wrapped__text {
262
- display: flex;
263
- justify-content: space-between;
264
- align-items: center;
265
- padding: 10px 20px;
266
- width: 100%;
267
- &.active {
268
- background: #E5E5E5;
269
- border-left: 3px solid #007aff;
270
- margin-top: 12px;
271
- }
272
- }
273
- .mobile-table-item__children {
274
- padding: 0 20px 0 36px;
275
- display: flex;
276
- flex-direction: column;
277
- width: 100%;
278
- gap: 16px;
279
- margin-bottom: 12px;
280
- a {
281
- font-size: 14px;
282
- color: #2C3E50;
283
- font-weight: 400;
284
- text-decoration: none;
285
- &:visited, &:active {
286
- color: #2C3E50;
287
- }
288
- }
289
- }
290
- }
291
- &:last-child {
292
- margin-bottom: 0;
293
- }
294
- }
295
- &:nth-child(4) {
296
- padding: 12px 0;
297
- .mobile-table-item__title {
298
- padding: 0 20px;
299
- margin-bottom: 0;
300
- }
301
- }
302
- &:nth-child(5) {
303
- padding-bottom: 36px;
304
- border-bottom: none;
305
- }
306
- }
307
- }
308
- </style>