adata-ui 0.1.98 → 0.2.3
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/README.md +7 -7
- package/babel.config.js +5 -5
- package/dist/adata-ui.common.js +88 -88
- package/dist/adata-ui.common.js.map +1 -1
- package/dist/adata-ui.css +1 -1
- package/dist/adata-ui.umd.js +88 -88
- 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/public/index.html +17 -17
- package/src/components/Header/Header.vue +98 -47
- package/src/components/Header/Profile.vue +4 -1
- package/src/components/Header/ProfileMobile.vue +5 -3
- package/src/components/MailTo/MailTo.vue +6 -3
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
|
-
<link rel="icon" href="<%= BASE_URL %>logo.svg">
|
|
8
|
-
<title>Adata UI</title>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<noscript>
|
|
12
|
-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
13
|
-
</noscript>
|
|
14
|
-
<div id="app"></div>
|
|
15
|
-
<!-- built files will be auto injected -->
|
|
16
|
-
</body>
|
|
17
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
|
+
<link rel="icon" href="<%= BASE_URL %>logo.svg">
|
|
8
|
+
<title>Adata UI</title>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<noscript>
|
|
12
|
+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
13
|
+
</noscript>
|
|
14
|
+
<div id="app"></div>
|
|
15
|
+
<!-- built files will be auto injected -->
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
|
@@ -41,14 +41,13 @@
|
|
|
41
41
|
<slot name="mobileSearch"></slot>
|
|
42
42
|
</div>
|
|
43
43
|
<div class="header__right" v-show="!noAuth">
|
|
44
|
-
<slot name="chooseCountry"></slot>
|
|
45
44
|
<Profile
|
|
46
45
|
:mode="mode"
|
|
47
46
|
:activeTabKey="activeTabKey"
|
|
48
47
|
:isAuthenticated="isAuthenticated"
|
|
49
48
|
:email="email"
|
|
50
49
|
:loginUrl="loginUrl"
|
|
51
|
-
:rate="
|
|
50
|
+
:rate="rate"
|
|
52
51
|
:balance="this.thousandSeparator(balance)"
|
|
53
52
|
@showBalanceModal="
|
|
54
53
|
(val) => {
|
|
@@ -95,7 +94,7 @@
|
|
|
95
94
|
<div class="empty-space" @click="changeValue"></div>
|
|
96
95
|
<div class="menu-wrapper">
|
|
97
96
|
<div class="menu-wrapper__top">
|
|
98
|
-
<div
|
|
97
|
+
<div class="mobile-table-head">
|
|
99
98
|
<button
|
|
100
99
|
@click.prevent="goAuth"
|
|
101
100
|
class="sign"
|
|
@@ -112,14 +111,26 @@
|
|
|
112
111
|
<span>Войти</span>
|
|
113
112
|
</button>
|
|
114
113
|
<div v-else class="menu-wrapper__top-left">
|
|
115
|
-
<div class="svg-wrapper">
|
|
116
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
117
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 9C8 6.79086 9.79086 5 12 5C14.2091 5 16 6.79086 16 9C16 11.2091 14.2091 13 12 13C9.79086 13 8 11.2091 8 9ZM14.8148 13.133C16.134 12.2329 17 10.7176 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 10.7176 7.86603 12.2329 9.18525 13.133C6.22569 13.741 4 16.3606 4 19.5H5C5 16.4624 7.46243 14 10.5 14H12H13.5C16.5376 14 19 16.4624 19 19.5H20C20 16.3606 17.7743 13.741 14.8148 13.133Z" fill="#2C3E50"/>
|
|
118
|
-
</svg>
|
|
119
|
-
</div>
|
|
120
114
|
<div class="text-wrapper">
|
|
121
|
-
<p>{{ email }}
|
|
122
|
-
|
|
115
|
+
<p>{{ email }}
|
|
116
|
+
<span @click.stop="changeValue">
|
|
117
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
118
|
+
<path d="M1.99902 1.99957L13.9996 14.0002" stroke="#2C3E50" stroke-linecap="round"/>
|
|
119
|
+
<path d="M14 1.99957L1.9994 14.0002" stroke="#2C3E50" stroke-linecap="round"/>
|
|
120
|
+
</svg>
|
|
121
|
+
</span>
|
|
122
|
+
</p>
|
|
123
|
+
<p>Тариф {{ rate }}
|
|
124
|
+
<span @click.stop.prevent="isActiveMenu = true">
|
|
125
|
+
Перейти
|
|
126
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
127
|
+
<rect width="24" height="24" rx="12" transform="matrix(-1 0 0 1 24 0)" fill="#007AFF" fill-opacity="0.12"/>
|
|
128
|
+
<path d="M14.0005 8.00311L18.0005 12.0096L14.0005 16.0031" stroke="#007AFF" stroke-width="1.2" stroke-miterlimit="10"
|
|
129
|
+
stroke-linecap="round" stroke-linejoin="round"/>
|
|
130
|
+
<path d="M18 12L6 12" stroke="#007AFF" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
131
|
+
</svg>
|
|
132
|
+
</span>
|
|
133
|
+
</p>
|
|
123
134
|
</div>
|
|
124
135
|
</div>
|
|
125
136
|
<div v-if="!isAuthenticated" class="menu-wrapper__top-right" @click.stop="changeValue">
|
|
@@ -144,11 +155,6 @@
|
|
|
144
155
|
></path>
|
|
145
156
|
</svg>
|
|
146
157
|
</div>
|
|
147
|
-
<div v-else class="menu-wrapper__top-right" @click.stop.prevent="isActiveMenu = true">
|
|
148
|
-
<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
149
|
-
<path d="M1 15.5L7 8L1 0.500001" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
|
|
150
|
-
</svg>
|
|
151
|
-
</div>
|
|
152
158
|
</div>
|
|
153
159
|
<div class="menu__link">
|
|
154
160
|
<a
|
|
@@ -407,9 +413,12 @@
|
|
|
407
413
|
<div v-show="isAuthenticated" class="menu_mobile-footer">
|
|
408
414
|
<button class="sign" @click="$emit('logout')">
|
|
409
415
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
410
|
-
<path d="M16.5 15L19.5 12L16.5 9" stroke="white" stroke-miterlimit="10" stroke-linecap="round"
|
|
411
|
-
|
|
412
|
-
<path d="
|
|
416
|
+
<path d="M16.5 15L19.5 12L16.5 9" stroke="white" stroke-miterlimit="10" stroke-linecap="round"
|
|
417
|
+
stroke-linejoin="round"/>
|
|
418
|
+
<path d="M15 16.875L15 19.5L4.5 19.5L4.5 4.5L15 4.5L15 6.5625" stroke="white" stroke-miterlimit="10"
|
|
419
|
+
stroke-linecap="round" stroke-linejoin="round"/>
|
|
420
|
+
<path d="M19 12H8" stroke="white" stroke-miterlimit="10" stroke-linecap="round"
|
|
421
|
+
stroke-linejoin="round"/>
|
|
413
422
|
</svg>
|
|
414
423
|
<span>Выход</span>
|
|
415
424
|
</button>
|
|
@@ -429,19 +438,19 @@
|
|
|
429
438
|
</div>
|
|
430
439
|
</MobileToggle>
|
|
431
440
|
<MobileToggle v-slot="{ animationClass }">
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
441
|
+
<ProfileMobile
|
|
442
|
+
v-show="isActiveMenu"
|
|
443
|
+
:rate="rate"
|
|
444
|
+
:class="animationClass"
|
|
445
|
+
:email="email"
|
|
446
|
+
:mode="mode"
|
|
447
|
+
:balance="thousandSeparator(balance)"
|
|
448
|
+
:activeTabKey="activeTabKey"
|
|
449
|
+
:daysLeft="daysRemaining"
|
|
450
|
+
@changeValue="changeValue"
|
|
451
|
+
@close="isActiveMenu = false"
|
|
452
|
+
@logout="$emit('logout')"
|
|
453
|
+
/>
|
|
445
454
|
</MobileToggle>
|
|
446
455
|
</div>
|
|
447
456
|
</header>
|
|
@@ -463,9 +472,7 @@ export default {
|
|
|
463
472
|
props: {
|
|
464
473
|
rate: {
|
|
465
474
|
type: String,
|
|
466
|
-
|
|
467
|
-
return ['basic', 'basic_plus', 'adata_pro', 'adata', 'vip'].indexOf(value) !== -1
|
|
468
|
-
}
|
|
475
|
+
default: ""
|
|
469
476
|
},
|
|
470
477
|
mode: {
|
|
471
478
|
type: String,
|
|
@@ -520,13 +527,6 @@ export default {
|
|
|
520
527
|
data() {
|
|
521
528
|
return {
|
|
522
529
|
isActiveMenu: false,
|
|
523
|
-
rateCodes: {
|
|
524
|
-
basic: 'Базовый',
|
|
525
|
-
basic_plus: 'Базовый+',
|
|
526
|
-
adata: 'Adata',
|
|
527
|
-
adata_pro: 'Adata Pro',
|
|
528
|
-
vip: 'VIP'
|
|
529
|
-
},
|
|
530
530
|
main: {
|
|
531
531
|
dev: "https://adtdev.kz",
|
|
532
532
|
prod: "https://adata.kz",
|
|
@@ -792,15 +792,19 @@ export default {
|
|
|
792
792
|
display: none;
|
|
793
793
|
grid-template-columns: 10% 90%;
|
|
794
794
|
z-index: 1000000;
|
|
795
|
-
position: absolute!important;
|
|
795
|
+
position: absolute !important;
|
|
796
|
+
|
|
796
797
|
.empty-space {
|
|
797
798
|
background: rgba(0, 0, 0, 0.40);
|
|
798
799
|
}
|
|
800
|
+
|
|
799
801
|
&::-webkit-scrollbar {
|
|
800
802
|
width: 4px;
|
|
803
|
+
|
|
801
804
|
&-thumb {
|
|
802
805
|
background: #c4c4c4;
|
|
803
806
|
}
|
|
807
|
+
|
|
804
808
|
&-track {
|
|
805
809
|
background: #fff;
|
|
806
810
|
}
|
|
@@ -829,7 +833,7 @@ export default {
|
|
|
829
833
|
|
|
830
834
|
@media (max-width: 1025px) {
|
|
831
835
|
display: grid;
|
|
832
|
-
background: transparent!important;
|
|
836
|
+
background: transparent !important;
|
|
833
837
|
.mobile-table-head {
|
|
834
838
|
display: flex;
|
|
835
839
|
justify-content: space-between;
|
|
@@ -847,8 +851,8 @@ export default {
|
|
|
847
851
|
color: #2c3e50;
|
|
848
852
|
display: block;
|
|
849
853
|
|
|
850
|
-
&:
|
|
851
|
-
border-
|
|
854
|
+
&:first-child {
|
|
855
|
+
border-top: none;
|
|
852
856
|
}
|
|
853
857
|
|
|
854
858
|
&.active-burger-tab {
|
|
@@ -861,6 +865,7 @@ export default {
|
|
|
861
865
|
justify-content: center;
|
|
862
866
|
}
|
|
863
867
|
}
|
|
868
|
+
|
|
864
869
|
.menu-wrapper {
|
|
865
870
|
height: 100%;
|
|
866
871
|
display: flex;
|
|
@@ -868,11 +873,17 @@ export default {
|
|
|
868
873
|
justify-content: space-between;
|
|
869
874
|
box-shadow: -6px 4px 12px rgb(157 163 172 / 40%);
|
|
870
875
|
background: #fff;
|
|
876
|
+
@media (max-width: 1025px) {
|
|
877
|
+
justify-content: flex-start;
|
|
878
|
+
}
|
|
879
|
+
|
|
871
880
|
&__top {
|
|
872
881
|
&-left {
|
|
873
882
|
display: flex;
|
|
874
883
|
gap: 8px;
|
|
875
884
|
align-items: center;
|
|
885
|
+
width: 100%;
|
|
886
|
+
|
|
876
887
|
.svg-wrapper {
|
|
877
888
|
width: 32px;
|
|
878
889
|
height: 32px;
|
|
@@ -881,24 +892,51 @@ export default {
|
|
|
881
892
|
justify-content: center;
|
|
882
893
|
align-items: center;
|
|
883
894
|
border-radius: 50%;
|
|
895
|
+
|
|
884
896
|
svg {
|
|
885
897
|
width: 24px;
|
|
886
898
|
height: 24px;
|
|
887
899
|
}
|
|
888
900
|
}
|
|
901
|
+
|
|
889
902
|
.text-wrapper {
|
|
903
|
+
width: 100%;
|
|
890
904
|
p {
|
|
891
905
|
font-size: 14px;
|
|
892
906
|
font-weight: 500;
|
|
907
|
+
display: flex;
|
|
908
|
+
justify-content: space-between;
|
|
909
|
+
align-items: center;
|
|
910
|
+
|
|
893
911
|
&:first-child {
|
|
894
|
-
|
|
912
|
+
border-bottom: 0.5px solid rgba(157, 163, 172, 0.5);
|
|
913
|
+
padding-bottom: 12px;
|
|
914
|
+
margin-bottom: 12px;
|
|
915
|
+
span {
|
|
916
|
+
cursor: pointer;
|
|
917
|
+
svg {
|
|
918
|
+
width: 16px;
|
|
919
|
+
height: 16px;
|
|
920
|
+
}
|
|
921
|
+
}
|
|
895
922
|
}
|
|
923
|
+
|
|
896
924
|
&:nth-child(2) {
|
|
925
|
+
color: #007AFF;
|
|
926
|
+
font-size: 12px;
|
|
897
927
|
font-weight: 600;
|
|
928
|
+
span {
|
|
929
|
+
display: flex;
|
|
930
|
+
align-items: center;
|
|
931
|
+
gap: 8px;
|
|
932
|
+
cursor: pointer;
|
|
933
|
+
font-weight: 400;
|
|
934
|
+
}
|
|
898
935
|
}
|
|
899
936
|
}
|
|
900
937
|
}
|
|
901
938
|
}
|
|
939
|
+
|
|
902
940
|
&-right {
|
|
903
941
|
display: flex;
|
|
904
942
|
align-items: center;
|
|
@@ -907,6 +945,7 @@ export default {
|
|
|
907
945
|
}
|
|
908
946
|
}
|
|
909
947
|
}
|
|
948
|
+
|
|
910
949
|
&-footer {
|
|
911
950
|
width: 100%;
|
|
912
951
|
background: #007AFF;
|
|
@@ -915,6 +954,10 @@ export default {
|
|
|
915
954
|
margin-top: auto;
|
|
916
955
|
position: relative;
|
|
917
956
|
z-index: 1000000;
|
|
957
|
+
@media (max-width: 1025px) {
|
|
958
|
+
height: 40px;
|
|
959
|
+
}
|
|
960
|
+
|
|
918
961
|
button.sign {
|
|
919
962
|
span {
|
|
920
963
|
color: #fff;
|
|
@@ -924,7 +967,10 @@ export default {
|
|
|
924
967
|
}
|
|
925
968
|
|
|
926
969
|
.menu-wrapper__bottom {
|
|
927
|
-
margin:
|
|
970
|
+
margin: 80px 0 0;
|
|
971
|
+
@media (max-width: 1025px) {
|
|
972
|
+
margin: 0;
|
|
973
|
+
}
|
|
928
974
|
|
|
929
975
|
&-header {
|
|
930
976
|
background: rgba(189, 199, 206, 0.2);
|
|
@@ -948,6 +994,9 @@ export default {
|
|
|
948
994
|
justify-content: space-between;
|
|
949
995
|
gap: 12px;
|
|
950
996
|
margin-bottom: 36px;
|
|
997
|
+
@media (max-width: 1025px) {
|
|
998
|
+
margin-bottom: 0;
|
|
999
|
+
}
|
|
951
1000
|
}
|
|
952
1001
|
|
|
953
1002
|
&-row {
|
|
@@ -960,9 +1009,11 @@ export default {
|
|
|
960
1009
|
display: flex;
|
|
961
1010
|
align-items: center;
|
|
962
1011
|
gap: 8px;
|
|
1012
|
+
|
|
963
1013
|
&:first-child {
|
|
964
1014
|
justify-content: flex-start;
|
|
965
1015
|
}
|
|
1016
|
+
|
|
966
1017
|
&:nth-child(2), &:nth-child(3) {
|
|
967
1018
|
justify-content: flex-end;
|
|
968
1019
|
width: 60px;;
|
|
@@ -264,7 +264,6 @@ export default {
|
|
|
264
264
|
const array = this.profileDropDown;
|
|
265
265
|
array.forEach((el, idx) => {
|
|
266
266
|
if (index === idx) {
|
|
267
|
-
console.log(!el.opened);
|
|
268
267
|
this.$set(el, 'opened', !el.opened);
|
|
269
268
|
} else this.$set(el, 'opened', false)
|
|
270
269
|
});
|
|
@@ -672,6 +671,10 @@ svg.rotated {
|
|
|
672
671
|
svg {
|
|
673
672
|
width: 18px;
|
|
674
673
|
height: 18px;
|
|
674
|
+
@media (max-width: 1025px) {
|
|
675
|
+
width: 24px;
|
|
676
|
+
height: 24px;
|
|
677
|
+
}
|
|
675
678
|
}
|
|
676
679
|
|
|
677
680
|
&-chosen {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
</svg>
|
|
54
54
|
</div>
|
|
55
55
|
</div>
|
|
56
|
-
<SlideToggle
|
|
56
|
+
<SlideToggle>
|
|
57
57
|
<div v-show="item.opened" class="mobile-table-item__children">
|
|
58
58
|
<a v-for="(elem, id) in item.children" :key="'elem' + id" :href="elem[mode]">{{ elem.name }}</a>
|
|
59
59
|
</div>
|
|
@@ -104,8 +104,8 @@ export default {
|
|
|
104
104
|
default: 0
|
|
105
105
|
},
|
|
106
106
|
daysLeft: {
|
|
107
|
-
type: Number,
|
|
108
|
-
default:
|
|
107
|
+
type: [Number, String],
|
|
108
|
+
default: 0
|
|
109
109
|
},
|
|
110
110
|
mode: {
|
|
111
111
|
type: String,
|
|
@@ -192,6 +192,7 @@ export default {
|
|
|
192
192
|
color: #fff;
|
|
193
193
|
padding: 2px 8px;
|
|
194
194
|
border-radius: 100px;
|
|
195
|
+
line-height: 20px;
|
|
195
196
|
}
|
|
196
197
|
}
|
|
197
198
|
a.button {
|
|
@@ -226,6 +227,7 @@ export default {
|
|
|
226
227
|
background: #ECEFF1;
|
|
227
228
|
border-radius: 100px;
|
|
228
229
|
padding: 2px 8px;
|
|
230
|
+
line-height: 20px;
|
|
229
231
|
}
|
|
230
232
|
}
|
|
231
233
|
}
|
|
@@ -132,7 +132,6 @@ export default {
|
|
|
132
132
|
if (!this.email.length || !regex.test(this.email)) {
|
|
133
133
|
this.emailError = "Введите валидный email";
|
|
134
134
|
this.isLoading = false;
|
|
135
|
-
return;
|
|
136
135
|
} else {
|
|
137
136
|
this.emailError = "";
|
|
138
137
|
}
|
|
@@ -140,12 +139,13 @@ export default {
|
|
|
140
139
|
if (this.message.length < 20) {
|
|
141
140
|
this.messageError = "Введите больше чем 20 символов";
|
|
142
141
|
this.isLoading = false;
|
|
143
|
-
return;
|
|
144
142
|
} else {
|
|
145
143
|
this.messageError = "";
|
|
146
144
|
}
|
|
147
145
|
|
|
148
|
-
this.
|
|
146
|
+
if(this.email.length && regex.test(this.email) && this.message.length >= 20) {
|
|
147
|
+
this.requestSupport();
|
|
148
|
+
}
|
|
149
149
|
},
|
|
150
150
|
async requestSupport() {
|
|
151
151
|
const requestBody = {
|
|
@@ -170,6 +170,9 @@ export default {
|
|
|
170
170
|
const result = await response.json();
|
|
171
171
|
this.isLoading = false;
|
|
172
172
|
if (result.success) {
|
|
173
|
+
this.phoneNumber = "";
|
|
174
|
+
this.sender_name = "";
|
|
175
|
+
this.message = "";
|
|
173
176
|
this.$emit("success", result);
|
|
174
177
|
}
|
|
175
178
|
} catch (e) {
|