adata-ui 0.2.9 → 0.3.3

package/package.json

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

package/src/components/Header/Header.vue

@@ -13,9 +13,14 @@
     <div class="header" :class="{ bordered: isBordered }">
       <div class="container">
         <div class="header__left">
-          <a class="logo" :href="main[mode]">
+          <a
+              class="logo"
+              :href="main[mode]"
+              onclick="return false;"
+              @click="goToAnotherModule(main[mode])"
+          >
             <svg
-                class="adata-logo"
+                class="adata-logo desktop"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 166 48"
             >
@@ -26,6 +31,10 @@
                   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>
             </svg>
+            <svg class="adata-logo mobile" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M11.3883 7.06335H11.3145C11.2829 7.43668 11.2054 7.80519 11.0836 8.16135L9.64099 12.44H13.0335L11.6098 8.20455C11.4947 7.83247 11.4204 7.45002 11.3883 7.06335Z" fill="#2C3E50"/>
+              <path d="M20.6552 0.200012H2.48111C1.8786 0.200012 1.30077 0.427581 0.874734 0.83266C0.448697 1.23774 0.209351 1.78714 0.209351 2.36001V19.64C0.209351 20.2129 0.448697 20.7623 0.874734 21.1674C1.30077 21.5724 1.8786 21.8 2.48111 21.8H20.6552C21.2577 21.8 21.8355 21.5724 22.2616 21.1674C22.6876 20.7623 22.9269 20.2129 22.9269 19.64V2.36001C22.9269 1.78714 22.6876 1.23774 22.2616 0.83266C21.8355 0.427581 21.2577 0.200012 20.6552 0.200012ZM14.6596 17.417L13.7131 14.6126H8.99916L8.06585 17.417H4.83427L9.65987 4.81702H13.2L17.9139 17.417H14.6596Z" fill="#2C3E50"/>
+            </svg>
           </a>
           <div class="menu" v-show="headerItems.length > 0">
             <a
@@ -34,11 +43,28 @@
                 class="menu__wrapper menu__items"
                 :class="{ active: item.key === activeTabKey }"
                 :href="item[mode]"
+                @click="goToAnotherModule(item[mode])"
+                onclick="return false;"
             >
               {{ item.name }}
             </a>
           </div>
-          <slot name="mobileSearch"></slot>
+          <div v-show="hasSearchField" class="mobile-search">
+            <div @click="$emit('search')" class="search-input">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14 13.9995L10.5967 10.596" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="7" cy="7" r="5" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Найти
+            </div>
+            <a v-show="hasFavourites" :href="favouriteUrl" target="_blank">
+              <div @click="$emit('')" class="favorite-btn">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M3 2.5V14.0057C3 14.4167 3.46826 14.6521 3.79816 14.4071L7.70184 11.5072C7.87886 11.3757 8.12114 11.3757 8.29816 11.5072L12.2018 14.4071C12.5317 14.6521 13 14.4167 13 14.0057V2.5C13 2.22386 12.7761 2 12.5 2H3.5C3.22386 2 3 2.22386 3 2.5Z" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+            </a>
+          </div>
         </div>
         <div class="header__right" v-show="!noAuth">
           <Profile
@@ -423,16 +449,6 @@
                   <span>Выход</span>
                 </button>
               </div>
-              <!--              <div class="menu-mobile__info-footer">-->
-              <!--                <div class="menu-mobile__info-footer-item" v-show="requestCount === 0 || requestCount">-->
-              <!--                  <span class="menu-mobile__info-footer-title">Суточный лимит запросов:</span>-->
-              <!--                  <span class="menu-mobile__info-footer-circle">{{ requestCount }}</span>-->
-              <!--                </div>-->
-              <!--                <div class="menu-mobile__info-footer-item" v-show="daysRemaining === 0 || daysRemaining">-->
-              <!--                  <span class="menu-mobile__info-footer-title">Остаток дней:</span>-->
-              <!--                  <span class="menu-mobile__info-footer-circle">{{ daysRemaining }}</span>-->
-              <!--                </div>-->
-              <!--              </div>-->
             </div>
           </div>
         </div>
@@ -521,12 +537,21 @@ export default {
     },
     balance: {
       type: Number,
-      default: 0,
+      default: 0
     },
+    hasFavourites: {
+      type: Boolean,
+      default: false
+    },
+    hasSearchField: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
       isActiveMenu: false,
+      favouriteUrl: "/profile/favorites",
       main: {
         dev: "https://adtdev.kz",
         prod: "https://adata.kz",
@@ -589,6 +614,12 @@ export default {
     this.notificationShow()
   },
   methods: {
+    goToAnotherModule(url) {
+      if(!location.href.includes(url)) {
+        this.$emit("changeModule");
+      }
+      window.open(url, "_self");
+    },
     goAuth() {
       const fullPath = encodeURIComponent(window.location.toString());
       if (window) {
@@ -711,6 +742,9 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    @media (max-width: 1025px) {
+      gap: 12px;
+    }
   }
 
   &__right {
@@ -721,6 +755,9 @@ export default {
   &__left {
     display: flex;
     align-items: center;
+    @media (max-width: 1025px) {
+      width: 100%;
+    }
 
     .menu {
       display: flex;
@@ -771,6 +808,9 @@ export default {
     .logo {
       display: block;
       margin-right: 20px;
+      @media (max-width: 1025px) {
+        margin-right: 10px;
+      }
 
       svg {
         width: 90px;
@@ -785,6 +825,18 @@ export default {
         &:hover {
           fill: #71757a;
         }
+        &.desktop {
+          @media (max-width: 1025px) {
+            display: none;
+          }
+        }
+        &.mobile {
+          display: none;
+          @media (max-width: 1025px) {
+            display: block;
+            width: auto;
+          }
+        }
       }
     }
   }
@@ -1064,4 +1116,43 @@ export default {
   }
 }
 
+.mobile-search {
+  display: none;
+  height: 32px;
+  max-height: 32px;
+  @media (max-width: 1025px) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+  .search-input {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(189, 199, 206, 0.2);
+    height: 100%;
+    border-radius: 2px;
+    width: 100%;
+    padding: 0 14px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 20px;
+    cursor: pointer;
+  }
+  .favorite-btn {
+    background: rgba(189, 199, 206, 0.2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    height: 100%;
+    border-radius: 2px;
+    cursor: pointer;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
 </style>

package/src/components/Header/Profile.vue

@@ -256,7 +256,7 @@ export default {
     },
     handleClick(url, name) {
       if (!name.includes("Текущий")) {
-        window.open(url, "_self");
+        window.open(url, name === 'Избранные' ? '_blank' : '_self');
       }
     },
     rotateItem(index) {

package/src/components/Header/ProfileMobile.vue

@@ -55,7 +55,13 @@
           </div>
           <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>
+              <a
+                  v-for="(elem, id) in item.children" :key="'elem' + id"
+                  :href="elem[mode]"
+                  :target="elem.name === 'Избранные' ? '_blank' : '_self'"
+              >
+                {{ elem.name }}
+              </a>
             </div>
           </SlideToggle>
         </div>

package/src/components/index.js

@@ -1,4 +1,3 @@
-import Vue from "vue";
 import ACheckbox from "./Checkbox/ACheckbox";
 import ACheckboxMenu from "./CheckboxMenu/CheckboxMenu";
 import AButton from "./Button/AButton";
@@ -18,7 +17,7 @@ import AInternalServerError from "./ErrorPages/InternalServerError";
 import ANotFound from "./ErrorPages/NotFound";
 import AUnavailable from "./ErrorPages/Unavailable";
 
-const Components = {
+export default {
   ACheckbox,
   AButton,
   ATextField,
@@ -39,8 +38,5 @@ const Components = {
   AUnavailable,
 };
 
-Object.keys(Components).forEach((name) => {
-  Vue.component(name, Components[name]);
-});
 
-export default Components;
+