adata-ui 0.3.64 → 0.3.66

package/src/components/Header/ProfileMobile.vue

@@ -1,308 +1,308 @@
-<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>
-            <div v-show="item.opened" class="mobile-table-item__children">
-              <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>
-      </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: [Number, String],
-      default: 0
-    },
-    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;
-        line-height: 20px;
-      }
-    }
-    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;
-          line-height: 20px;
-        }
-      }
-    }
-    &__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>
+<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>
+            <div v-show="item.opened" class="mobile-table-item__children">
+              <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>
+      </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: [Number, String],
+      default: 0
+    },
+    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;
+        line-height: 20px;
+      }
+    }
+    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;
+          line-height: 20px;
+        }
+      }
+    }
+    &__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>