adata-ui 0.1.4 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -15,6 +15,7 @@
     "core-js": "^3.6.5",
     "node-sass": "^5.0.0",
     "user": "0.0.0",
+    "v-click-outside": "^3.1.2",
     "vue": "^2.6.11",
     "vue-the-mask": "^0.11.1"
   },

package/src/App.vue

@@ -1,23 +1,23 @@
-<template>
-  <div id="app">
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'App',
-  components: {}
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<template>
+  <div id="app">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  components: {}
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/src/components/Alert/Alert.vue

@@ -1,22 +1,22 @@
 <template>
   <div :class="['note', {'note--error': error}]">
-    <svg class="note-svg" v-if="!error" fill="none"
-         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-      <circle cx="8" cy="8" r="6.5" stroke="#007AFF"></circle>
-      <path
-          d="M9.661 11.137l-.111.457c-.336.132-.604.233-.803.302-.2.07-.432.104-.696.104-.406 0-.722-.1-.947-.297a.961.961 0 01-.338-.755c0-.117.008-.239.025-.363.017-.123.045-.263.082-.419l.419-1.483c.037-.142.069-.277.094-.404.026-.126.038-.243.038-.348 0-.189-.039-.321-.117-.396-.078-.074-.227-.112-.448-.112-.108 0-.22.017-.333.051a4.649 4.649 0 00-.294.096l.112-.457c.275-.112.537-.207.788-.287.251-.08.489-.12.713-.12.403 0 .714.098.933.293a.97.97 0 01.327.76c0 .064-.007.177-.022.34a2.277 2.277 0 01-.084.447l-.417 1.478a3.921 3.921 0 00-.133.752c0 .196.044.33.132.401.088.071.24.107.456.107.102 0 .217-.018.345-.054.128-.035.221-.066.28-.093zm.106-6.203a.865.865 0 01-.292.658.994.994 0 01-.703.272 1 1 0 01-.706-.272.863.863 0 01-.295-.658c0-.257.098-.477.295-.66A1 1 0 018.772 4a.99.99 0 01.703.274.873.873 0 01.292.66z"
-          fill="#007AFF"
-      ></path>
-    </svg>
-    <svg class="note-svg" v-else fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="note-error-svg">
-      <circle cx="8" cy="8" r="6.5" stroke="#e60000"></circle>
-      <path
-          d="M9.661 11.137l-.111.457c-.336.132-.604.233-.803.302-.2.07-.432.104-.696.104-.406 0-.722-.1-.947-.297a.961.961 0 01-.338-.755c0-.117.008-.239.025-.363.017-.123.045-.263.082-.419l.419-1.483c.037-.142.069-.277.094-.404.026-.126.038-.243.038-.348 0-.189-.039-.321-.117-.396-.078-.074-.227-.112-.448-.112-.108 0-.22.017-.333.051a4.649 4.649 0 00-.294.096l.112-.457c.275-.112.537-.207.788-.287.251-.08.489-.12.713-.12.403 0 .714.098.933.293a.97.97 0 01.327.76c0 .064-.007.177-.022.34a2.277 2.277 0 01-.084.447l-.417 1.478a3.921 3.921 0 00-.133.752c0 .196.044.33.132.401.088.071.24.107.456.107.102 0 .217-.018.345-.054.128-.035.221-.066.28-.093zm.106-6.203a.865.865 0 01-.292.658.994.994 0 01-.703.272 1 1 0 01-.706-.272.863.863 0 01-.295-.658c0-.257.098-.477.295-.66A1 1 0 018.772 4a.99.99 0 01.703.274.873.873 0 01.292.66z"
-          fill="#e60000"></path>
-    </svg>
-    <span class="text">
-      <slot></slot>
-    </span>
+    <div class="note-svg">
+      <svg  v-if="!error" fill="none" width="14" height="14"
+           xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <circle cx="8" cy="8" r="6.5" stroke="#007AFF"></circle>
+        <path
+            d="M9.661 11.137l-.111.457c-.336.132-.604.233-.803.302-.2.07-.432.104-.696.104-.406 0-.722-.1-.947-.297a.961.961 0 01-.338-.755c0-.117.008-.239.025-.363.017-.123.045-.263.082-.419l.419-1.483c.037-.142.069-.277.094-.404.026-.126.038-.243.038-.348 0-.189-.039-.321-.117-.396-.078-.074-.227-.112-.448-.112-.108 0-.22.017-.333.051a4.649 4.649 0 00-.294.096l.112-.457c.275-.112.537-.207.788-.287.251-.08.489-.12.713-.12.403 0 .714.098.933.293a.97.97 0 01.327.76c0 .064-.007.177-.022.34a2.277 2.277 0 01-.084.447l-.417 1.478a3.921 3.921 0 00-.133.752c0 .196.044.33.132.401.088.071.24.107.456.107.102 0 .217-.018.345-.054.128-.035.221-.066.28-.093zm.106-6.203a.865.865 0 01-.292.658.994.994 0 01-.703.272 1 1 0 01-.706-.272.863.863 0 01-.295-.658c0-.257.098-.477.295-.66A1 1 0 018.772 4a.99.99 0 01.703.274.873.873 0 01.292.66z"
+            fill="#007AFF"
+        ></path>
+      </svg>
+      <svg width="14" height="14" v-else fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="note-error-svg">
+        <circle cx="8" cy="8" r="6.5" stroke="#e60000"></circle>
+        <path
+            d="M9.661 11.137l-.111.457c-.336.132-.604.233-.803.302-.2.07-.432.104-.696.104-.406 0-.722-.1-.947-.297a.961.961 0 01-.338-.755c0-.117.008-.239.025-.363.017-.123.045-.263.082-.419l.419-1.483c.037-.142.069-.277.094-.404.026-.126.038-.243.038-.348 0-.189-.039-.321-.117-.396-.078-.074-.227-.112-.448-.112-.108 0-.22.017-.333.051a4.649 4.649 0 00-.294.096l.112-.457c.275-.112.537-.207.788-.287.251-.08.489-.12.713-.12.403 0 .714.098.933.293a.97.97 0 01.327.76c0 .064-.007.177-.022.34a2.277 2.277 0 01-.084.447l-.417 1.478a3.921 3.921 0 00-.133.752c0 .196.044.33.132.401.088.071.24.107.456.107.102 0 .217-.018.345-.054.128-.035.221-.066.28-.093zm.106-6.203a.865.865 0 01-.292.658.994.994 0 01-.703.272 1 1 0 01-.706-.272.863.863 0 01-.295-.658c0-.257.098-.477.295-.66A1 1 0 018.772 4a.99.99 0 01.703.274.873.873 0 01.292.66z"
+            fill="#e60000"></path>
+      </svg>
+    </div>
+    <slot></slot>
   </div>
 </template>
 <script>
@@ -29,7 +29,7 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .note {
   font-weight: 400;
   font-style: italic;
@@ -56,8 +56,8 @@ export default {
   }
   &-svg {
     margin-right: 8px;
-    width: 16px;
-    height: 16px;
+    display: flex;
+    align-items: center;
   }
 }
 </style>

package/src/components/Button/BaseButton.vue

@@ -87,7 +87,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 .btn {
   cursor: pointer;

package/src/components/Footer/Footer.vue

@@ -55,8 +55,8 @@
 
 <script>
 export default {
+  name: "Footer",
   props: {
-    name: "Footer",
     hasBottomMenu: {
       type: Boolean,
       default: false
@@ -64,7 +64,7 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 ul, li {
   list-style: none;
   text-decoration: none;

package/src/components/Header/Header.stories.js

@@ -0,0 +1,55 @@
+import Header from './Header.vue'
+import {action} from "@storybook/addon-actions";
+
+export default {
+    title: 'Header',
+    component: Header,
+    template: '<Header></Header>'
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { Header },
+    props: Object.keys(argTypes),
+    template: '<Header @menuOpen="openMenu' +
+        '" @showBalanceModal="showBalance"' +
+        ' @setShowModal="showModal"' +
+        ' @logout="logoutClick"' +
+        ' @setIsReplenishModal="setReplenishModal" v-bind="$props"' +
+        '></Header>',
+    methods: {
+        openMenu(val) {
+            console.log(val);
+        },
+        showBalance(val) {
+            console.log(val);
+        },
+        showModal(val) {
+            console.log(val);
+        },
+        logoutClick() {
+            console.log("logout");
+        },
+        setReplenishModal(val) {
+            console.log(val);
+        },
+    }
+});
+
+export const MainHeader = Template.bind({});
+
+export const devHeader = Template.bind({});
+devHeader.args = {
+    isDev: true
+}
+
+export const headerAuthenticated = Template.bind({});
+headerAuthenticated.args = {
+    isDev: true,
+    isAuthenticated: true,
+    requestCount: 1000,
+    daysRemaining: "остаток дней: 29",
+    email: "sboranbayeva@gmail.com",
+    loginUrl: "https://id.adtdev.kz/auth/signin?url=https://pk.adata.kz/auth",
+    activeTabKey: 'counterparty',
+    balance: 1954900
+}

package/src/components/Header/Header.vue

@@ -1,82 +1,46 @@
 <template>
-  <header class="header">
+  <header class="a-header">
     <div class="container">
-      <div class="header__inner">
-        <div class="header__left">
-          <NuxtLink class="logo" to="/">
-            <BaseIcon class="adata-logo">logo</BaseIcon>
-          </NuxtLink>
-          <div class="right mobile">
-            <div class="right-mobile">
-              <div v-if="currentCountry === 'kz' && checkRuRate" class="country-button-arrow"
-                   @click="isGeoOpen = !isGeoOpen">
-                <BaseIcon class="ic-18">kz</BaseIcon>
-              </div>
-              <div v-if="currentCountry === 'ru' && checkRuRate" class="country-button-arrow"
-                   @click="isGeoOpen = !isGeoOpen">
-                <BaseIcon class="ic-18">ru</BaseIcon>
-              </div>
-              <MobileToggle v-slot:default="{ animationClass }">
-                <div class="geo__filters" :class="animationClass" v-show="isGeoOpen">
-                  <slot>
-                    <div class="geo-button">
-                      <div class="geo-button-text">
-                        Выбор страны
-                      </div>
-                      <div class="geo-button-arrow" @click="isGeoOpen = false">
-                        <BaseIcon class="ic-18">cross</BaseIcon>
-                      </div>
-                    </div>
-                    <div class="country-button" @click="selectCountry('kz')">
-                      <div class="country-button-arrow" @click="isGeoOpen = false">
-                        <BaseIcon class="ic-18">kz</BaseIcon>
-                      </div>
-                      <div class="country-button-text">
-                        Казахстан
-                      </div>
-                    </div>
-                    <div class="country-button" @click="selectCountry('ru')">
-                      <div class="country-button-arrow" @click="isGeoOpen = false">
-                        <BaseIcon class="ic-18">ru</BaseIcon>
-                      </div>
-                      <div class="country-button-text">
-                        Россия
-                      </div>
-                    </div>
-                  </slot>
-                </div>
-              </MobileToggle>
-              <Profile v-bind:profileDropDown="profileDropDown"/>
-            </div>
-            <svg @click="changeValue">
-              <use
-                  :xlink:href="require('@/assets/icons/sprite.svg') + '#icon_hamburger'"
-              />
-            </svg>
-          </div>
-          <div class="menu desktop" v-if="subheaderItems.length > 0">
-            <div
-                v-for="(item, index) in subheaderItems"
-                :key="index"
-                class="menu__wrapper"
-            >
-              <nuxt-link
-                  class="menu__items"
-                  :class="{active: isMain && item.name === 'Контрагенты'}"
-                  active-class="active"
-                  :to="item.url"
-                  v-if="isExternalLink(item.url)"
-              >
-                {{ item.name }}
-              </nuxt-link>
-              <a :href="item.url" class="menu__items" v-else>
-                {{ item.name }}
-              </a>
-            </div>
+      <div class="a-header__left">
+        <a class="logo" :href="toAdtdev('https://adata.kz')">
+          <svg class="adata-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 48">
+            <path d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"></path>
+            <path 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>
+        </a>
+        <div class="menu" v-if="subheaderItems.length > 0">
+          <div v-for="(item, index) in subheaderItems"
+               :key="index"
+               class="menu__wrapper menu__items"
+               :class="{active: locationUrl.includes(item.url)}"
+               @click="handleClick(item.url)"
+          >
+            {{ item.name }}
           </div>
         </div>
-        <div class="header__right desktop">
-          <Profile v-bind:profileDropDown="profileDropDown"/>
+      </div>
+      <div class="a-header__right">
+        <slot name="chooseCountry"></slot>
+        <slot name="profile"></slot>
+        <Profile
+            v-bind:profileDropDown="profileDropDown"
+            :isDev="isDev"
+            :isAuthenticated="isAuthenticated"
+            :requestCount="requestCount"
+            :daysRemaining="daysRemaining"
+            :email="email"
+            :loginUrl="loginUrl"
+            @showBalanceModal="(val) => { $emit('showBalanceModal', val) }"
+            @setShowModal="(val) => { $emit('setShowModal', val) }"
+            @logout="$emit('logout')"
+            @setIsReplenishModal="(val) => { $emit('setIsReplenishModal', val) }"
+        />
+        <div class="menu_mobile--switcher" @click="changeValue">
+          <!-- icon_hamburger -->
+          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4h20v2H2V4zm0 14h20v2H2v-2zm0-7h20v2H2v-2z"
+                  fill="#2C3E50"></path>
+          </svg>
         </div>
       </div>
     </div>
@@ -86,50 +50,266 @@
           :class="animationClass"
           v-show="subheaderItems.length > 0 && isOpen"
       >
-        <div class="mobile-table-head">
-          <svg @click.stop="changeValue">
-            <use :xlink:href="require('@/assets/icons/sprite.svg') + '#close_hamburger'"></use>
+        <div @click.stop="changeValue" class="mobile-table-head">
+          <!-- close_hamburger -->
+          <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.414 18.142L18.556 4l1.415 1.414L5.828 19.556l-1.414-1.414z"
+                  fill="#2C3E50"></path>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.414 4l14.142 14.142-1.414 1.414L4 5.414 5.414 4z"
+                  fill="#2C3E50"></path>
           </svg>
         </div>
-        <div class="bb">
-          <div
-              v-for="(item, index) in subheaderItems"
-              :key="index"
-              class="menu_mobile-wrapper"
-          >
-            <div
-                @click="goToPage(item.url)"
-                class="menu_mobile-accordion"
-                :class="{'active-burger-tab': isActiveTab(item.url)}"
-            >
-              <span class="menu_mobile-items">
-                    {{ item.name }}
-              </span>
-            </div>
-          </div>
+        <div
+            v-for="(item, index) in subheaderItems"
+            :key="index"
+            class="menu_mobile-wrapper"
+            :class="{'active-burger-tab': locationUrl.includes(item.url)}"
+            @click="handleClick(item.url)"
+        >
+          {{ item.name }}
         </div>
       </div>
     </MobileToggle>
-    <SubHeader :list="subheaderItems" class="desktop"/>
-    <SubHeaderMobile :list="subheaderItems" class="mobile" v-if="isProfilePage || isFinesPage"/>
-    <Navbar :options="searchDetailSidebar" :type_id="1" v-if="isCompanyPage && isMobile" class="mobile"/>
-    <Navbar :options="searchDetailSidebarRU" :type_id="1" v-if="isRussianPage && isMobile " class="mobile"/>
-    <Navbar :options="individualNavbarItems" :type_id="2" v-if="isIndividualPage && isMobile" class="mobile"/>
   </header>
 </template>
 
 <script>
+import Profile from "./Profile";
+import { menuList } from "../../configs/navigationBarConfig";
+import { profileDropDown } from "../../configs/profileDropDown"
+import MobileToggle from "../transitions/VerticalMobileToggle";
+
 export default {
-  name: "Header",
+  components: {
+    Profile,
+    MobileToggle,
+  },
   props: {
-    isMobile: {
+    isDev: {
       type: Boolean,
       default: false
+    },
+    isAuthenticated: {
+      type: Boolean,
+      default: false
+    },
+    requestCount: {
+      type: Number,
+      default: null
+    },
+    daysRemaining: {
+      type: String,
+      default: null
+    },
+    email: {
+      type: String,
+      default: ""
+    },
+    loginUrl: {
+      type: String,
+      default: "",
+      required: true
+    },
+    activeTabKey: {
+      type: String,
+      default: 'counterparty'
+    },
+    balance: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      profileDropDown,
+      subheaderItems: [],
+      isOpen: false
+    };
+  },
+  mounted() {
+    this.setBalance(this.balance);
+    this.subheaderItems = menuList;
+  },
+  computed: {
+    locationUrl() {
+      return window.location.href;
+    }
+  },
+  methods: {
+    changeValue() {
+      this.isOpen = !this.isOpen
+      this.$emit('menuOpen', this.isOpen)
+    },
+    toAdtdev(url) {
+      return this.isDev ? url.replace("adata", "adtdev") : url;
+    },
+    setBalance(balance) {
+      if (balance !== 0) {
+        this.profileDropDown[2].name = 'Текущий баланс: ' + this.thousandSeparator(balance) + ' ₸';
+      }
+    },
+    thousandSeparator(val) {
+      return val ?  val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "): '';
+    },
+    handleClick(url) {
+      window.open(this.toAdtdev(url), "_self");
+    }
+  },
+  watch: {
+    balance(newBalance) {
+      this.setBalance(newBalance);
     }
   }
-}
+};
 </script>
 
-<style scoped>
+<style lang="scss">
+* {
+  font-family: "Open Sans", sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 1180px;
+  width: 100%;
+  padding: 0 20px;
+  margin: 0 auto;
+}
+
+.a-header {
+  width: 100%;
+  background: #ffffff;
+  max-height: 62px;
+  height: 62px;
+  display: flex;
+  align-items: center;
+  @media (max-width: 1025px) {
+    border-bottom: 1px solid #2C3E5026;
+    height: 40px;
+  }
+
+  & > .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+
+    .menu {
+      display: flex;
+      align-items: center;
+      @media (max-width: 1025px) {
+        display: none;
+      }
+
+      &__items {
+        margin-right: 8px;
+        align-items: center;
+        padding: 20px 8px 20px 0;
+        transition: text-shadow 0.3s;
+        display: block;
+        font-weight: bold;
+        font-size: 16px;
+        line-height: 22px;
+        text-transform: uppercase;
+        color: #71757a;
+        position: relative;
+
+        &::after {
+          content: "";
+          position: absolute;
+          right: -1px;
+          top: 50%;
+          transform: translateY(-50%);
+          height: 22px;
+          width: 1px;
+          background-color: #e5e5e5;
+        }
+
+        &.active {
+          font-weight: bold;
+          font-size: 16px;
+          line-height: 22px;
+          text-transform: uppercase;
+          color: #2c3e50;
+        }
+
+        &:hover {
+          color: #9DA3AC;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .logo {
+      display: block;
+      margin-right: 20px;
+
+      svg {
+        width: 90px;
+        height: 26px;
+        display: block;
+        fill: #2c3e50;
+        @media(max-width: 1025px) {
+          width: 77px;
+          height: 24px;
+        }
+
+        &:hover {
+          fill: #71757a;
+        }
+      }
+    }
+  }
+
+  .menu_mobile {
+    display: none;
+
+    &--switcher {
+      display: none;
+    }
+
+    @media (max-width: 1025px) {
+      display: block;
+      .mobile-table-head {
+        padding: 11px 16px;
+        display: flex;
+        justify-content: flex-end;
+        background: #2c3e500d;
+      }
+      &-wrapper {
+        border-top: 1px solid #9DA3AC4C;
+        padding: 14px 16px;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 22px;
+        color: #2c3e50;
+
+        &:last-child {
+          border-bottom: 1px solid #9DA3AC4C;
+        }
+
+        &.active-burger-tab {
+          background: #2c3e500d;
+        }
+      }
+      &--switcher {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
 
-</style>
+</style>