adata-ui 0.1.77 → 0.1.80

package/src/components/Header/ProfileMobile.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="menu_mobile">
+    <div @click="$emit('changeValue')" class="empty-space"></div>
+    <div class="menu-wrapper">
+      <div class="mobile-table-head">
+        <div class="mobile-table-head-left" @click.stop="$emit('close')">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9.9996 8.00317L5.9996 12.0097L9.99958 16.0032" stroke="#007AFF" stroke-width="1.2"
+                  stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M6 12L18 12" stroke="#007AFF" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="round"
+                  stroke-linejoin="round"/>
+          </svg>
+          <span>{{ email }}</span>
+        </div>
+      </div>
+      <div class="mobile-table-body">
+        <p>Тариф {{ rate }}</p>
+        <p>Суточный лимит запросов: <span>{{ +limitRemaining }}</span></p>
+        <p>Остаток дней по тарифу: <span>{{ daysLeft }}</span></p>
+        <a :href="profileDropDown[0][mode] || '/'" class="button">Увеличить лимит запросов</a>
+      </div>
+      <div class="mobile-table-item">
+        <p class="mobile-table-item__title">
+          Платежи
+        </p>
+        <div class="mobile-table-item__text">
+          <p>Текущий баланс: <span>{{ balance + " ₸" }}</span></p>
+          <a
+              :href="profileDropDown[1][mode]"
+              onclick="return false"
+              @click="showModal(profileDropDown[1][mode])"
+              class="button"
+          >
+            Пополнить
+          </a>
+        </div>
+        <a :href="profileDropDown[2][mode]" class="p">История платежей</a>
+      </div>
+      <div class="mobile-table-item">
+        <p class="mobile-table-item__title">
+          Профиль пользователя
+        </p>
+        <div
+            v-for="(item, id) in profileDropDown.filter(el => el.children)"
+            :key="'child' + id"
+            class="mobile-table-item__text wrapped"
+        >
+          <div @click="openOneCloseOthers(id)" class="wrapped__text" :class="{'active': item.opened}">
+            <p>{{ item.name }}</p>
+            <div class="svg-wrapper" :class="{'rotated': item.opened}">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4.5 9L12 15L19.5 9" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+          </div>
+          <SlideToggle v-slot="{ animationClass }">
+            <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>
+          </SlideToggle>
+        </div>
+      </div>
+      <div class="mobile-table-item">
+        <p class="mobile-table-item__title">
+          Общие настройки
+        </p>
+        <a :href="profileDropDown[3][mode]" class="p">Личная информация</a>
+      </div>
+      <div 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"/>
+          </svg>
+          <span>Выход</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {profileDropDown} from "../../configs/profileDropDown";
+import SlideToggle from "../transitions/SlideToggle";
+
+export default {
+  name: "ProfileMobile",
+  props: {
+    email: {
+      type: String,
+      required: true
+    },
+    balance: {
+      type: [Number, String],
+      default: ""
+    },
+    rate: {
+      type: String,
+      default: 'Базовый'
+    },
+    limitRemaining: {
+      type: Number,
+      default: 0
+    },
+    daysLeft: {
+      type: String,
+      defailt: ""
+    },
+    mode: {
+      type: String,
+      required: true
+    },
+    activeTabKey: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {
+    SlideToggle
+  },
+  data() {
+    return {
+      profileDropDown
+    }
+  },
+  mounted() {
+    const item = this.activeTabKey ? this.profileDropDown.find(el => el.key && el.key.includes(this.activeTabKey)) : null;
+    if(item) this.$set(item, 'opened', true);
+  },
+  methods: {
+    openOneCloseOthers(id) {
+      const array = this.profileDropDown.filter(el => el.children);
+      array.forEach((el, idx) => {
+        if(id === idx) this.$set(el, 'opened', !el.opened);
+        else this.$set(el, 'opened', false);
+      })
+    },
+    async showModal(url) {
+        if (window.location.href.includes(url)) {
+          this.$emit("setIsReplenishModal", true);
+          this.setShowModal(true);
+        } else {
+          await window.open(url + "&modal=show", "_blank");
+        }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rotated {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+
+.empty-space {
+  background: none!important;
+}
+
+.mobile-table-head-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  svg {
+    background: rgba(0, 122, 255, 0.12);
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.mobile-table {
+  &-body {
+    background: rgba(236, 239, 241, 0.6);
+    border-bottom: 0.5px solid rgba(157, 163, 172, 0.5);
+    padding: 12px 20px;
+    p, a.p {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #2C3E50;
+      font-size: 12px;
+      margin-bottom: 8px;
+      &:first-child {
+        font-weight: 600;
+        font-size: 14px;
+      }
+      span {
+        background: #007AFF;
+        color: #fff;
+        padding: 2px 8px;
+        border-radius: 100px;
+      }
+    }
+    a.button {
+       border: none;
+       background: transparent;
+       display: flex;
+       justify-content: center;
+       align-items: center;
+       color: #007AFF;
+       font-size: 14px;
+       font-weight: 600;
+       margin: 20px auto 0;
+    }
+  }
+  &-item {
+    padding: 12px 20px;
+    border-bottom: 0.5px solid rgba(157, 163, 172, 0.5);
+    p, a.p {
+      &.mobile-table-item__title {
+        color: #71757A;
+        font-size: 12px;
+        font-weight: 400;
+        margin-bottom: 12px;
+      }
+      &:not(.mobile-table-item__title) {
+        font-size: 14px;
+        font-weight: 400;
+        color: #2C3E50;
+        span {
+          color: #698096;
+          font-weight: 500;
+          background: #ECEFF1;
+          border-radius: 100px;
+          padding: 2px 8px;
+        }
+      }
+    }
+    &__text {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      font-weight: 400;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+      color: #2C3E50;
+      row-gap: 12px;
+      a.button {
+        background: transparent;
+        border: none;
+        color: #007AFF;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      &.wrapped {
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: 0;
+        .wrapped__text {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 10px 20px;
+          width: 100%;
+          &.active {
+            background: #E5E5E5;
+            border-left: 3px solid #007aff;
+            margin-top: 12px;
+          }
+        }
+        .mobile-table-item__children {
+          padding: 0 20px 0 36px;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          gap: 16px;
+          margin-bottom: 12px;
+          a {
+            font-size: 14px;
+            color: #2C3E50;
+            font-weight: 400;
+            text-decoration: none;
+            &:visited, &:active {
+              color: #2C3E50;
+            }
+          }
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    &:nth-child(4) {
+      padding: 12px 0;
+      .mobile-table-item__title {
+        padding: 0 20px;
+        margin-bottom: 0;
+      }
+    }
+    &:nth-child(5) {
+      padding-bottom: 36px;
+      border-bottom: none;
+    }
+  }
+}
+</style>

package/src/components/Loader/Loader.stories.js

@@ -3,13 +3,13 @@ import Loader from './Loader.vue'
 export default {
     title: 'Loader',
     component: Loader,
-    template: '<loader />'
+    template: '<a-loader />'
 }
 
 const Template = (args, { argTypes }) => ({
     components: { Loader },
     props: Object.keys(argTypes),
-    template: '<loader />',
+    template: '<a-loader />',
 })
 
 export const Simple = Template.bind({})

package/src/components/MailTo/MailTo.vue

@@ -65,7 +65,7 @@
     </div>
     <h2 class="mail__title">Интересует больше данных?</h2>
     <p class="mail__text">
-      Мы обязательно ответим вам <br />
+      Мы обязательно ответим Вам <br />
       в кратчайшие сроки.
     </p>
     <form class="mail__form" novalidate>
@@ -182,6 +182,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
 .mail {
   padding: 50px 0px;
   @media (max-width: 560px) {
@@ -210,8 +215,8 @@ export default {
       top: 50%;
       left: 50%;
       z-index: 1;
-      width: 80px;
-      height: 80px;
+      width: 100px;
+      height: 100px;
       transform: translate(-50%, -50%);
       background: rgba(189, 199, 206, 0.15);
       border-radius: 100%;
@@ -222,6 +227,8 @@ export default {
     width: 120px;
     height: 120px;
     object-fit: contain;
+    position: relative;
+    z-index: 2;
   }
   &__text {
     font-size: 16px;

package/src/components/SearchMultiCategory/SearchMultiCategory.stories.js

@@ -0,0 +1,16 @@
+import APasswordField from "./SearchMultiCategory.vue";
+
+export default {
+    title: 'PasswordField',
+    component: APasswordField,
+    template: "<a-password-field label='Example'></a-password-field>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { APasswordField },
+    props: Object.keys(argTypes),
+    template: '<a-password-field v-bind="$props"></a-password-field>'
+})
+
+export const BasePasswordField = Template.bind({});
+BasePasswordField.args = {label: 'Password'}

package/src/components/SearchMultiCategory/SearchMultiCategory.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="adt-text-block">
+    <div class="adt-text-block__field">
+      <input
+        ref="input"
+        :type="type"
+        :value="value"
+        required
+        @input="$emit('input', $event.target.value)"
+        class="adt-text-block__input"
+        :class="{ error: !!errorText }"
+      />
+      <label class="adt-text-block__label">{{ label }}</label>
+      <div v-if="showPassword" @click="showPassword = false" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.992 511.992" id="openedEye">
+          <path
+              d="M510.096 249.937c-4.032-5.867-100.928-143.275-254.101-143.275-131.435 0-248.555 136.619-253.483 142.443-3.349 3.968-3.349 9.792 0 13.781C7.44 268.71 124.56 405.329 255.995 405.329S504.549 268.71 509.477 262.886c3.094-3.669 3.371-8.981.619-12.949zM255.995 383.996c-105.365 0-205.547-100.48-230.997-128 25.408-27.541 125.483-128 230.997-128 123.285 0 210.304 100.331 231.552 127.424-24.534 26.645-125.291 128.576-231.552 128.576z"></path>
+          <path
+              d="M255.995 170.662c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333 85.333-38.272 85.333-85.333-38.272-85.333-85.333-85.333zm0 149.334c-35.285 0-64-28.715-64-64s28.715-64 64-64 64 28.715 64 64-28.715 64-64 64z"></path>
+        </svg>
+      </div>
+      <div v-else @click="showPassword = true" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" id="closedEye">
+          <path
+              d="M316.332 195.662c-4.16-4.16-10.923-4.16-15.083 0s-4.16 10.944 0 15.083c12.075 12.075 18.752 28.139 18.752 45.248 0 35.285-28.715 64-64 64-17.109 0-33.173-6.656-45.248-18.752-4.16-4.16-10.923-4.16-15.083 0-4.16 4.139-4.16 10.923 0 15.083 16.085 16.128 37.525 25.003 60.331 25.003 47.061 0 85.333-38.272 85.333-85.333 0-22.807-8.874-44.247-25.002-60.332zm-45.462-23.531c-4.843-.853-9.792-1.472-14.869-1.472-47.061 0-85.333 38.272-85.333 85.333 0 5.077.619 10.027 1.493 14.869.917 5.163 5.419 8.811 10.475 8.811.619 0 1.237-.043 1.877-.171 5.781-1.024 9.664-6.571 8.64-12.352-.661-3.627-1.152-7.317-1.152-11.157 0-35.285 28.715-64 64-64 3.84 0 7.531.491 11.157 1.131 5.675 1.152 11.328-2.859 12.352-8.64 1.024-5.781-2.858-11.328-8.64-12.352z"></path>
+          <path
+              d="M509.462 249.102c-2.411-2.859-60.117-70.208-139.712-111.445-5.163-2.709-11.669-.661-14.379 4.587-2.709 5.227-.661 11.669 4.587 14.379 61.312 31.744 110.293 81.28 127.04 99.371-25.429 27.541-125.504 128-230.997 128-35.797 0-71.872-8.64-107.264-25.707-5.248-2.581-11.669-.341-14.229 4.971-2.581 5.291-.341 11.669 4.971 14.229 38.293 18.496 77.504 27.84 116.523 27.84 131.435 0 248.555-136.619 253.483-142.443 3.369-3.969 3.348-9.793-.023-13.782zM325.996 118.947c-24.277-8.171-47.829-12.288-69.995-12.288-131.435 0-248.555 136.619-253.483 142.443-3.115 3.669-3.371 9.003-.597 12.992 1.472 2.112 36.736 52.181 97.856 92.779a10.48 10.48 0 005.888 1.792c3.435 0 6.827-1.664 8.875-4.8 3.264-4.885 1.92-11.52-2.987-14.763-44.885-29.845-75.605-65.877-87.104-80.533 24.555-26.667 125.291-128.576 231.552-128.576 19.861 0 41.131 3.755 63.189 11.157 5.589 2.005 11.648-1.088 13.504-6.699 1.878-5.589-1.109-11.626-6.698-13.504z"></path>
+          <path
+              d="M444.865 67.128c-4.16-4.16-10.923-4.16-15.083 0L67.116 429.795c-4.16 4.16-4.16 10.923 0 15.083a10.716 10.716 0 007.552 3.115c2.731 0 5.461-1.045 7.531-3.115L444.865 82.211c4.16-4.16 4.16-10.923 0-15.083z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="adt-text-block__error" v-if="!!errorText">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon__attention">
+        <path d="M8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4H8.5ZM7.5 9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9H7.5ZM7.5 4V9H8.5V4H7.5Z" fill="#FF2E43"/>
+        <path d="M8.5 11C8.5 10.7239 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.7239 7.5 11H8.5ZM7.5 11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5H7.5ZM7.5 11V11.5H8.5V11H7.5Z" fill="#FF2E43"/>
+        <circle cx="8" cy="8" r="7" stroke="#FF2E43"/>
+      </svg>
+      {{ errorText }}
+    </div>
+  </div>
+</template>
+
+<script>
+import '../../assets/style.scss';
+
+export default {
+  name: "PasswordField",
+  props: {
+    errorText: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, null],
+      required: true,
+    }
+  },
+  data() {
+    return {
+      showPassword: false
+    }
+  },
+  computed: {
+    type() {
+      return this.showPassword ? "text" : "password";
+    }
+  }
+}
+</script>
+

package/src/components/index.js

@@ -11,6 +11,7 @@ import AFooter from "./Footer/Footer";
 import ASearchTextField from "./SearchTextField/SearchTextField";
 import AMailTo from "./MailTo/MailTo";
 import ATable from "./Table/ATable";
+import ALoader from "./Loader/Loader";
 
 const Components = {
   ACheckbox,
@@ -24,6 +25,7 @@ const Components = {
   ASearchTextField,
   AMailTo,
   ATable,
+  ALoader,
   ACheckboxMenu
 };
 

package/src/configs/profileDropDown.js

@@ -1,15 +1,6 @@
 export const profileDropDown = [
     {
         id: 1,
-        name: "Общие настройки",
-        dev: "https://adtdev.kz/profile?tab=general",
-        staging: "https://adada.kz/profile?tab=general",
-        prod: "https://adata.kz/profile?tab=general",
-        disabled: false,
-        withoutArray: true
-    },
-    {
-        id: 2,
         name: "Увеличить лимит запросов",
         dev: "https://adtdev.kz/profile?tab=tariffs",
         staging: "https://adada.kz/profile?tab=tariffs",
@@ -18,8 +9,8 @@ export const profileDropDown = [
         withoutArray: true
     },
     {
-        id: 3,
-        name: "Текущий баланс: 0 ₸",
+        id: 2,
+        name: "Текущий баланс: ",
         dev: "https://adtdev.kz/profile?tab=tariffs",
         staging: "https://adada.kz/profile?tab=tariffs",
         prod: "https://adata.kz/profile?tab=tariffs",
@@ -28,7 +19,7 @@ export const profileDropDown = [
         withoutArray: true
     },
     {
-        id: 4,
+        id: 3,
         name: "Историй платежей",
         dev: "https://adtdev.kz/profile?tab=payments",
         staging: "https://adada.kz/profile?tab=payments",
@@ -36,10 +27,20 @@ export const profileDropDown = [
         disabled: false,
         withoutArray: true
     },
+    {
+        id: 4,
+        name: "Общие настройки",
+        dev: "https://adtdev.kz/profile?tab=general",
+        staging: "https://adada.kz/profile?tab=general",
+        prod: "https://adata.kz/profile?tab=general",
+        disabled: false,
+        withoutArray: true
+    },
     {
         id: 5,
         name: "Контрагенты",
         opened: false,
+        key: 'counterparty',
         children: [
             {
                 id: 8,
@@ -69,6 +70,7 @@ export const profileDropDown = [
         id: 6,
         name: "Работа",
         opened: false,
+        key: 'work',
         children: [
             {
                 id: 10,
@@ -103,6 +105,7 @@ export const profileDropDown = [
         id: 7,
         name: "Тендеры",
         opened: false,
+        key: 'tenders',
         children: [
             {
                 id: 17,