adata-ui 0.1.96 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.96",
+  "version": "0.2.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/Button/AButton.vue

@@ -81,6 +81,10 @@ export default {
   font-size: 14px;
   font-weight: 500;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   @media screen and (max-width: 560px) {
     width: 100%;
     text-align: center;

package/src/components/Header/Header.vue

@@ -41,14 +41,13 @@
           <slot name="mobileSearch"></slot>
         </div>
         <div class="header__right" v-show="!noAuth">
-          <slot name="chooseCountry"></slot>
           <Profile
               :mode="mode"
               :activeTabKey="activeTabKey"
               :isAuthenticated="isAuthenticated"
               :email="email"
               :loginUrl="loginUrl"
-              :rate="rateCodes[rate]"
+              :rate="rate"
               :balance="this.thousandSeparator(balance)"
               @showBalanceModal="
               (val) => {
@@ -95,7 +94,7 @@
           <div class="empty-space" @click="changeValue"></div>
           <div class="menu-wrapper">
             <div class="menu-wrapper__top">
-              <div  class="mobile-table-head">
+              <div class="mobile-table-head">
                 <button
                     @click.prevent="goAuth"
                     class="sign"
@@ -112,14 +111,26 @@
                   <span>Войти</span>
                 </button>
                 <div v-else class="menu-wrapper__top-left">
-                  <div class="svg-wrapper">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <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"/>
-                    </svg>
-                  </div>
                   <div class="text-wrapper">
-                    <p>{{ email }}</p>
-                    <p>Тариф {{ rateCodes[rate] }}</p>
+                    <p>{{ email }}
+                      <span @click.stop="changeValue">
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M1.99902 1.99957L13.9996 14.0002" stroke="#2C3E50" stroke-linecap="round"/>
+                          <path d="M14 1.99957L1.9994 14.0002" stroke="#2C3E50" stroke-linecap="round"/>
+                        </svg>
+                      </span>
+                    </p>
+                    <p>Тариф {{ rate }}
+                      <span @click.stop.prevent="isActiveMenu = true">
+                      Перейти
+                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect width="24" height="24" rx="12" transform="matrix(-1 0 0 1 24 0)" fill="#007AFF" fill-opacity="0.12"/>
+                        <path d="M14.0005 8.00311L18.0005 12.0096L14.0005 16.0031" stroke="#007AFF" stroke-width="1.2" stroke-miterlimit="10"
+                              stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M18 12L6 12" stroke="#007AFF" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </span>
+                    </p>
                   </div>
                 </div>
                 <div v-if="!isAuthenticated" class="menu-wrapper__top-right" @click.stop="changeValue">
@@ -144,11 +155,6 @@
                     ></path>
                   </svg>
                 </div>
-                <div v-else class="menu-wrapper__top-right" @click.stop.prevent="isActiveMenu = true">
-                  <svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1 15.5L7 8L1 0.500001" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-                </div>
               </div>
               <div class="menu__link">
                 <a
@@ -407,9 +413,12 @@
               <div v-show="isAuthenticated" class="menu_mobile-footer">
                 <button class="sign" @click="$emit('logout')">
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M16.5 15L19.5 12L16.5 9" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                    <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"/>
-                    <path d="M19 12H8" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M16.5 15L19.5 12L16.5 9" stroke="white" stroke-miterlimit="10" stroke-linecap="round"
+                          stroke-linejoin="round"/>
+                    <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"/>
+                    <path d="M19 12H8" stroke="white" stroke-miterlimit="10" stroke-linecap="round"
+                          stroke-linejoin="round"/>
                   </svg>
                   <span>Выход</span>
                 </button>
@@ -429,19 +438,19 @@
         </div>
       </MobileToggle>
       <MobileToggle v-slot="{ animationClass }">
-          <ProfileMobile
-              v-show="isActiveMenu"
-              :rate="rateCodes[rate]"
-              :class="animationClass"
-              :email="email"
-              :mode="mode"
-              :balance="thousandSeparator(balance)"
-              :activeTabKey="activeTabKey"
-              :daysLeft="daysRemaining"
-              @changeValue="changeValue"
-              @close="isActiveMenu = false"
-              @logout="$emit('logout')"
-          />
+        <ProfileMobile
+            v-show="isActiveMenu"
+            :rate="rate"
+            :class="animationClass"
+            :email="email"
+            :mode="mode"
+            :balance="thousandSeparator(balance)"
+            :activeTabKey="activeTabKey"
+            :daysLeft="daysRemaining"
+            @changeValue="changeValue"
+            @close="isActiveMenu = false"
+            @logout="$emit('logout')"
+        />
       </MobileToggle>
     </div>
   </header>
@@ -463,9 +472,7 @@ export default {
   props: {
     rate: {
       type: String,
-      validator: function (value) {
-        return ['basic', 'basic_plus', 'adata_pro', 'adata', 'vip'].indexOf(value) !== -1
-      }
+      default: ""
     },
     mode: {
       type: String,
@@ -520,13 +527,6 @@ export default {
   data() {
     return {
       isActiveMenu: false,
-      rateCodes: {
-        basic: 'Базовый',
-        basic_plus: 'Базовый+',
-        adata: 'Adata',
-        adata_pro: 'Adata Pro',
-        vip: 'VIP'
-      },
       main: {
         dev: "https://adtdev.kz",
         prod: "https://adata.kz",
@@ -792,15 +792,19 @@ export default {
     display: none;
     grid-template-columns: 10% 90%;
     z-index: 1000000;
-    position: absolute!important;
+    position: absolute !important;
+
     .empty-space {
       background: rgba(0, 0, 0, 0.40);
     }
+
     &::-webkit-scrollbar {
       width: 4px;
+
       &-thumb {
         background: #c4c4c4;
       }
+
       &-track {
         background: #fff;
       }
@@ -829,7 +833,7 @@ export default {
 
     @media (max-width: 1025px) {
       display: grid;
-      background: transparent!important;
+      background: transparent !important;
       .mobile-table-head {
         display: flex;
         justify-content: space-between;
@@ -847,8 +851,8 @@ export default {
         color: #2c3e50;
         display: block;
 
-        &:last-child {
-          border-bottom: 1px solid #9da3ac4c;
+        &:first-child {
+          border-top: none;
         }
 
         &.active-burger-tab {
@@ -861,6 +865,7 @@ export default {
         justify-content: center;
       }
     }
+
     .menu-wrapper {
       height: 100%;
       display: flex;
@@ -868,11 +873,14 @@ export default {
       justify-content: space-between;
       box-shadow: -6px 4px 12px rgb(157 163 172 / 40%);
       background: #fff;
+
       &__top {
         &-left {
           display: flex;
           gap: 8px;
           align-items: center;
+          width: 100%;
+
           .svg-wrapper {
             width: 32px;
             height: 32px;
@@ -881,24 +889,50 @@ export default {
             justify-content: center;
             align-items: center;
             border-radius: 50%;
+
             svg {
               width: 24px;
               height: 24px;
             }
           }
+
           .text-wrapper {
+            width: 100%;
             p {
               font-size: 14px;
               font-weight: 500;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
               &:first-child {
-                margin-bottom: 4px;
+                border-bottom: 0.5px solid rgba(157, 163, 172, 0.5);
+                padding-bottom: 12px;
+                margin-bottom: 12px;
+                span {
+                  cursor: pointer;
+                  svg {
+                    width: 16px;
+                    height: 16px;
+                  }
+                }
               }
+
               &:nth-child(2) {
+                color: #007AFF;
+                font-size: 12px;
                 font-weight: 600;
+                span {
+                  display: flex;
+                  align-items: center;
+                  gap: 8px;
+                  cursor: pointer;
+                }
               }
             }
           }
         }
+
         &-right {
           display: flex;
           align-items: center;
@@ -907,6 +941,7 @@ export default {
         }
       }
     }
+
     &-footer {
       width: 100%;
       background: #007AFF;
@@ -915,6 +950,7 @@ export default {
       margin-top: auto;
       position: relative;
       z-index: 1000000;
+
       button.sign {
         span {
           color: #fff;
@@ -924,7 +960,7 @@ export default {
   }
 
   .menu-wrapper__bottom {
-    margin: 20px 0 0;
+    margin: 80px 0 0;
 
     &-header {
       background: rgba(189, 199, 206, 0.2);
@@ -960,9 +996,11 @@ export default {
       display: flex;
       align-items: center;
       gap: 8px;
+
       &:first-child {
         justify-content: flex-start;
       }
+
       &:nth-child(2), &:nth-child(3) {
         justify-content: flex-end;
         width: 60px;;

package/src/components/Header/ProfileMobile.vue

@@ -53,7 +53,7 @@
               </svg>
             </div>
           </div>
-          <SlideToggle v-slot="{ animationClass }">
+          <SlideToggle>
             <div v-show="item.opened" class="mobile-table-item__children">
               <a v-for="(elem, id) in item.children" :key="'elem' + id" :href="elem[mode]">{{ elem.name }}</a>
             </div>
@@ -105,7 +105,7 @@ export default {
     },
     daysLeft: {
       type: Number,
-      default: ""
+      default: 0
     },
     mode: {
       type: String,
@@ -192,6 +192,7 @@ export default {
         color: #fff;
         padding: 2px 8px;
         border-radius: 100px;
+        line-height: 20px;
       }
     }
     a.button {
@@ -226,6 +227,7 @@ export default {
           background: #ECEFF1;
           border-radius: 100px;
           padding: 2px 8px;
+          line-height: 20px;
         }
       }
     }