adata-ui 0.1.50 → 0.1.53

package/src/components/Header/InfoHeader.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="info">
+    <transition name="fade">
+      <div class="info-notification" v-if="isOpenNotification">
+        <div class="container">
+          <div class="info-notification__wrapper">
+            <div class="info-notification__content">
+              <svg id="note-svg" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8" cy="8" r="6" stroke="white"/>
+                <path d="M9.6613 11.1367L9.54952 11.5936C9.21418 11.726 8.94631 11.8267 8.74685 11.896C8.54716 11.9654 8.31514 12 8.05079 12C7.64483 12 7.32906 11.9006 7.10386 11.703C6.87865 11.5047 6.76601 11.2534 6.76601 10.9485C6.76601 10.8305 6.77418 10.7091 6.79117 10.5854C6.80831 10.4616 6.83556 10.3222 6.87284 10.1663L7.29192 8.68297C7.32921 8.54094 7.3609 8.40636 7.38628 8.27909C7.41202 8.15261 7.42442 8.03624 7.42442 7.93149C7.42442 7.74206 7.3852 7.60956 7.30712 7.53507C7.22904 7.46079 7.08005 7.42307 6.85886 7.42307C6.75052 7.42307 6.63917 7.44042 6.52567 7.47398C6.41167 7.50768 6.31423 7.54023 6.23242 7.57049L6.34449 7.11319C6.61902 7.00141 6.88144 6.90569 7.13246 6.82625C7.38348 6.74659 7.62066 6.70672 7.84501 6.70672C8.24818 6.70672 8.55928 6.80416 8.77775 6.99904C8.99622 7.19406 9.10542 7.44688 9.10542 7.75841C9.10542 7.82287 9.09825 7.93644 9.08283 8.09877C9.06777 8.26145 9.03974 8.41051 8.99887 8.5461L8.58158 10.0235C8.54738 10.1421 8.51662 10.2778 8.48988 10.4304C8.46227 10.5821 8.44908 10.6979 8.44908 10.7757C8.44908 10.9718 8.49282 11.1058 8.5805 11.177C8.66884 11.2482 8.82098 11.2836 9.03709 11.2836C9.13854 11.2836 9.25398 11.2656 9.38225 11.2302C9.51016 11.1949 9.60344 11.1638 9.6613 11.1367ZM9.76713 4.93424C9.76713 5.19164 9.67012 5.41147 9.47517 5.59223C9.28072 5.77363 9.04641 5.8644 8.7723 5.8644C8.49733 5.8644 8.26245 5.77363 8.06577 5.59223C7.86946 5.4114 7.77109 5.19164 7.77109 4.93424C7.77109 4.67734 7.86946 4.45716 8.06577 4.27411C8.26209 4.09134 8.4974 4 8.7723 4C9.04634 4 9.28072 4.09156 9.47517 4.27411C9.67026 4.45716 9.76713 4.67742 9.76713 4.93424Z" fill="white"/>
+              </svg>
+              <span>{{systemMessage}}</span>
+            </div>
+            <div class="info-notification__close" @click="closeNotification">
+              <svg id="close-notification" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2.99902 2.99951L12.9997 13.0002" stroke="white" stroke-linecap="round"/>
+                <path d="M13 2.99951L2.99934 13.0002" stroke="white" stroke-linecap="round"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <div class="info-header" v-if="!isOpenNotification">
+      <div class="container">
+        <div class="info-header__list">
+          <div class="info-header__item">
+            <template v-if="currencies" >
+              <div v-for="(currency, index) in currencies" :key="index" class="info-header__item-elem">
+                <img v-if="currency.currency === 'USD'" src="@/assets/icons/dollor.svg" alt=""/>
+                <img v-if="currency.currency === 'EUR'" src="@/assets/icons/euro.svg" alt=""/>
+                <img v-if="currency.currency === 'RUB'" src="@/assets/icons/ruble.svg" alt=""/>
+                <div class="info-header__inner-item">
+                  <span class="info-header__result">{{ currency.sell }}</span>
+                  <img v-if="currency.sell_state === 'DOWN'" src="@/assets/icons/arrow-down.svg" alt=""/>
+                  <img v-else src="@/assets/icons/arrow-up.svg" alt=""/>
+                </div>
+                <div class="info-header__inner-item">
+                  <span class="info-header__result">{{ currency.buy }}</span>
+                  <img v-if="currency.buy_state === 'DOWN'" src="@/assets/icons/arrow-down.svg" alt=""/>
+                  <img v-else src="@/assets/icons/arrow-up.svg" alt=""/>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div v-if="isAuthenticated" class="info-header__item">
+            <div class="info-header__item-elem">
+              <div class="info-header__inner-item">
+                <span class="info-header__title">Cуточный лимит запросов:</span>
+                <span class="info-header__result info-header__result_circled">{{ requestCount }}</span>
+              </div>
+              <div class="divider"></div>
+              <div class="info-header__inner-item">
+                <span class="info-header__title">остаток дней:</span>
+                <span class="info-header__result info-header__result_circled">{{ daysRemaining }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "InfoHeader",
+  props: {
+    requestCount: {
+      type: [String, Number],
+      default: null
+    },
+    daysRemaining: {
+      type: [String, Number],
+      default: null
+    },
+    isAuthenticated: {
+      type: Boolean,
+      default: false
+    },
+    isOpenNotification: {
+      type: Boolean,
+      default: false
+    },
+    weather: {
+      type: Array,
+      default: () => []
+    },
+    currencies: {
+      type: Array,
+      default: () => []
+    },
+    systemMessage:{
+      type: String,
+      default: ''
+    },
+  },
+  methods: {
+    closeNotification() {
+      this.$emit("closeNotification", this.isOpenNotification)
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.info {
+  position: relative;
+  @media (min-width: 1025px) {
+    height: 30px;
+  }
+  &-notification {
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+    top: 0;
+    color: #FFFFFF;
+    background: #007AFF;
+    padding: 7px 0;
+    font-size: 14px;
+    @media(max-width: 1025px) {
+      position: relative;
+      height: 30px;
+    }
+    &__wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &__content {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    &__close {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+  &-header {
+    background: #FFFFFF;
+    padding: 7px 0;
+    border-bottom: 0.5px solid rgba(189, 199, 206, 0.5);
+    @media (max-width: 1025px) {
+      display: none;
+    }
+    &__title {
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 14px;
+      color: #2C3E50;
+    }
+    &__result {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      color: #2C3E50;
+      &_circled {
+        color: #ffffff;
+        padding: 4px 12px;
+        background: #007AFF;
+        border-radius: 100px;
+      }
+    }
+    &__list {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &__item {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      &-elem {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+      }
+    }
+    &__inner-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+    }
+    .last-header-item {
+      .info-header__inner-item:nth-child(2) {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .divider {
+    background: #2C3E50;
+    width: 1px;
+    height: 10px;
+    margin: 0 10px;
+    transform: rotate(20deg);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  top: -30px;
+}
+</style>

package/src/components/Header/Profile.vue

@@ -2,12 +2,6 @@
   <div class="profile" :class="{ active: active }">
     <div v-click-outside="() => {active = false}">
       <div class="profile__inner">
-        <div class="requests__link" v-if="requestCount !== null && isAuthenticated">
-          Суточный лимит запросов:
-          <span>
-              {{ requestCount }} {{ (daysRemaining === null || daysRemaining === '-') ? '' : `(${daysRemaining})` }}
-            </span>
-        </div>
         <div class="profile__item" @click="active = !active">
           <div v-show="isAuthenticated" class="profile__item-link">
             <span class="desktop">{{ email }}</span>
@@ -256,14 +250,6 @@ export default {
       type: Boolean,
       default: false
     },
-    requestCount: {
-      type: Number,
-      default: null
-    },
-    daysRemaining: {
-      type: String,
-      default: null
-    },
     email: {
       type: String,
       default: ""

package/src/components/Table/ATable.vue

@@ -0,0 +1,117 @@
+<template>
+  <table class="a-table">
+    <thead>
+      <tr>
+        <th v-for="(col, i) in cols" :key="i">{{ col.name }}</th>
+      </tr>
+    </thead>
+    <tbody v-for="(row, i) in rows" :key="i">
+      <tr>
+        <td v-for="col in cols" :key="col.key" :data-label="`${col.name}`">
+          <slot :name="'key-' + col.key" :row="row">
+            {{ row[col.key] || defaultEmpty }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    cols: {
+      type: Array,
+      default: () => [],
+    },
+    rows: {
+      type: Array,
+      default: () => [],
+    },
+    defaultEmpty: {
+      type: [String, Number],
+      default: "Нет данных",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.a-table {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  @media screen and (max-width: 850px) {
+    border: 0;
+  }
+
+  thead {
+    background: rgba(189, 199, 206, 0.3);
+
+    @media screen and (max-width: 850px) {
+      display: none;
+    }
+
+    tr {
+      display: flex;
+
+      th {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+        padding: 20px 16px;
+        font-size: 12px;
+        font-weight: normal;
+        word-break: break-word;
+
+        @media screen and (max-width: 850px) {
+          justify-content: flex-start;
+        }
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      display: flex;
+      border-bottom: 1px solid #ccc;
+
+      @media screen and (max-width: 850px) {
+        flex-direction: column;
+        margin: 10px;
+        padding: 10px 0;
+        border: 0;
+        background: rgba(189, 199, 206, 0.3);
+      }
+
+      td {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+        padding: 20px 16px;
+        word-break: break-word;
+        font-size: 12px;
+        font-weight: normal;
+        text-align: left;
+
+        @media screen and (max-width: 850px) {
+          flex-direction: column;
+          row-gap: 4px;
+          justify-content: flex-start;
+          padding: 8px 16px;
+        }
+
+        &:before {
+          @media screen and (max-width: 850px) {
+            content: attr(data-label);
+            display: flex;
+            align-items: left;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Table/Table.stories.js

@@ -0,0 +1,15 @@
+import ATable from "./ATable.vue";
+
+export default {
+  title: "Table",
+  component: ATable,
+  template: "<a-table></a-table>",
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { ATable },
+  props: Object.keys(argTypes),
+  template: "<a-table v-bind='$props'></a-header>",
+});
+
+export const BaseTable = Template.bind({});

package/src/components/index.js

@@ -1,4 +1,5 @@
 import Vue from "vue";
+import ACheckbox from "./Checkbox/ACheckbox";
 import AButton from "./Button/AButton";
 import ATextField from "./TextField/TextField";
 import APasswordField from "./PasswordField/PasswordField";
@@ -7,8 +8,10 @@ import AHeader from "./Header/Header";
 import AFooter from "./Footer/Footer";
 import ASearchTextField from "./SearchTextField/SearchTextField";
 import AMailTo from "./MailTo/MailTo";
+import ATable from "./Table/ATable";
 
 const Components = {
+  ACheckbox,
   AButton,
   ATextField,
   APasswordField,
@@ -17,6 +20,7 @@ const Components = {
   AFooter,
   ASearchTextField,
   AMailTo,
+  ATable,
 };
 
 Object.keys(Components).forEach((name) => {

package/src/configs/profileDropDown.js

@@ -54,6 +54,13 @@ export const profileDropDown = [
                 dev: "https://pk.adtdev.kz/profile/browsing-history",
                 staging: "https://pk.adada.kz/profile/browsing-history",
                 prod: "https://pk.adata.kz/profile/browsing-history"
+            },
+            {
+                id: 10,
+                name: "Мои отчеты",
+                dev: "https://pk.adtdev.kz/profile/my-reports",
+                staging: "https://pk.adada.kz/profile/my-reports",
+                prod: "https://pk.adata.kz/profile/my-reports"
             }
         ],
         disabled: false