adata-ui 0.3.98 → 2.0.0

package/src/components/Header/ProfileOld.vue

@@ -1,781 +0,0 @@
-<template>
-  <div class="profile" :class="{ active: active }">
-    <div v-click-outside="() => { active = false; }">
-      <div class="profile__inner">
-        <div class="profile__item" @click="active = !active">
-          <div v-show="isAuthenticated" class="profile__item-link">
-            <span class="desktop">{{ email }}</span>
-            <svg
-                width="18"
-                height="18"
-                fill="#25476AFF"
-                class="desktop arrow-svg"
-                :class="{ rotate: active }"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-            >
-              <path fill="none" d="M0 0h16v16H0z"></path>
-              <path
-                  fill="none"
-                  d="M3 6.5L8 10l5-3.5"
-                  stroke="#2C3E50"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-              ></path>
-            </svg>
-          </div>
-          <button
-              @click.prevent="goAuth"
-              class="sign"
-              v-show="!isAuthenticated"
-          >
-            <svg
-                width="18"
-                height="18"
-                fill="#25476AFF"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 16 16"
-                class="desktop"
-            >
-              <path fill="#fff" d="M0 0h16v16H0z" stroke="none"></path>
-              <path
-                  d="M8 10l2-2.054L8.077 6"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-              ></path>
-              <path
-                  d="M6 4.1V2h8v12H6v-1.65M9 8H2"
-                  stroke-miterlimit="10"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-              ></path>
-            </svg>
-            <span class="sign_text">Вход</span>
-          </button>
-        </div>
-      </div>
-      <SlideToggle v-slot="{ animationClass }">
-        <div
-            class="profile-menu"
-            v-show="active"
-            :class="animationClass"
-        >
-          <div class="profile-menu__inner">
-            <div class="profile-menu__items">
-              <div v-for="(elem, index) in profileDropDown" :key="index">
-                <a
-                    :href="elem[mode]"
-                    :class="
-                    elem.link
-                      ? 'profile-menu__balance-link'
-                      : 'profile-menu__links'
-                  "
-                    class="gray-text"
-                    v-if="elem[mode]"
-                    @click="preventLink(elem.disabled, $event)"
-                    onclick="`return false`"
-                >
-                  <div :class="{'rate-item': index === 0}">
-                    <span v-show="index === 0" class="rate">
-                      Тариф {{ rate }}
-                    </span> {{ elem.name }} <span v-show="index === 1" class="balance">{{ balance || 0 }} ₸</span>
-                  </div>
-                  <span
-                      v-show="elem.link"
-                      @click="showModal(elem[mode], elem.name)"
-                      class="profile-menu__balance"
-                  >
-                    {{ elem.link }}
-                  </span>
-                </a>
-                <div
-                    v-if="elem.children"
-                    @click="rotateItem(index)"
-                    class="gray-text profile-menu__item"
-                >
-                  <div :class="{ active: elem.opened }" class="profile-menu__item__children">
-                    {{ elem.name }}
-                    <span v-if="elem.children.length > 0">
-                      <svg
-                          width="12"
-                          height="8"
-                          viewBox="0 0 12 8"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                          :class="{ rotated: elem.opened }"
-                      >
-                        <path
-                            d="M1 1.5L6 6.5L11 1.5"
-                            stroke="#69797D"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                  <SlideToggle
-                      v-slot="{ animationClass }"
-                      :class="animationClass"
-                  >
-                    <div v-if="elem.opened">
-                      <template v-for="(child, idx) in elem.children">
-                        <div
-                            class="profile-menu__item__child"
-                            :key="idx + 'link'"
-                            v-if="child[mode]"
-                            @click="handleClick(child[mode], child.name)"
-                        >
-                          <span>
-                            {{ child.name }}
-                          </span>
-                        </div>
-                      </template>
-                    </div>
-                  </SlideToggle>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </SlideToggle>
-    </div>
-  </div>
-</template>
-
-<script>
-import { profileDropDown } from "../../configs/profileDropDown";
-import SlideToggle from "../transitions/SlideToggle";
-import vClickOutside from "v-click-outside";
-
-export default {
-  directives: {
-    clickOutside: vClickOutside.directive,
-  },
-  props: {
-    mode: {
-      type: String,
-      required: true,
-      validator: function (value) {
-        return ["prod", "dev", "staging"].indexOf(value) !== -1;
-      },
-    },
-    isAuthenticated: {
-      type: Boolean,
-      default: false,
-    },
-    email: {
-      type: String,
-      default: "",
-    },
-    loginUrl: {
-      type: String,
-      default: "",
-      required: true,
-    },
-    activeTabKey: {
-      type: String,
-      default: "",
-      required: true,
-    },
-    rate: {
-      type: String,
-      default: ""
-    },
-    balance: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  components: {
-    SlideToggle,
-  },
-  data() {
-    return {
-      profileDropDown,
-      active: false,
-      chosenElem: {
-        children: [],
-      },
-    };
-  },
-  mounted() {
-    const item = this.activeTabKey ? this.profileDropDown.find(el => el.key && el.key.includes(this.activeTabKey)) : null;
-    if(item && window && window.innerWidth > 850) {
-      this.chosenElem = item;
-      this.chosenElem.opened = true;
-    }
-  },
-  computed: {
-    someMobileOpened() {
-      return this.profileDropDown.filter(
-          (el) => el.opened && el.children.length > 0
-      );
-    },
-  },
-  methods: {
-    setShowModal(bool) {
-      this.$emit("setShowModal", bool);
-    },
-    logout() {
-      this.$emit("logout");
-    },
-    preventLink(disabled, e) {
-      if (disabled) {
-        e.preventDefault();
-      }
-    },
-    async showModal(url, name) {
-      if (name.includes("Текущий")) {
-        if (window.location.href.includes(url)) {
-          this.$emit("setIsReplenishModal", true);
-          this.setShowModal(true);
-        } else {
-          await window.open(url + "&modal=show", "_self");
-        }
-      }
-    },
-    handleClick(url, name) {
-      if (!name.includes("Текущий")) {
-        window.open(url, name === 'Избранные' ? '_blank' : '_self');
-      }
-    },
-    rotateItem(index) {
-      this.chosenElem = this.profileDropDown[index];
-      const array = this.profileDropDown;
-      array.forEach((el, idx) => {
-        if (index === idx) {
-          this.$set(el, 'opened', !el.opened);
-        } else this.$set(el, 'opened', false)
-      });
-    },
-    goAuth() {
-      const fullPath = encodeURIComponent(window.location.toString());
-      if (window) {
-        window.location.href = `${this.loginUrl}?url=${fullPath}`;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-a {
-  text-decoration: none;
-  background-color: transparent;
-}
-
-svg {
-  transition: all 0.3s linear;
-}
-
-svg.rotated {
-  transform: rotate(180deg);
-}
-
-.gray-text {
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 400;
-  color: #2c3e50;
-  padding: 10px 16px;
-  cursor: pointer;
-}
-
-.profile {
-  position: relative;
-
-  &__inner {
-    padding: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  &__item {
-    font-size: 14px;
-    font-weight: 600;
-    margin: 0;
-    padding: 8px 0;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &-link {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-
-      &:first-child {
-        @media (max-width: 1025px) {
-          display: none;
-        }
-      }
-
-      &:nth-child(2) {
-        display: none;
-        @media (max-width: 1025px) {
-          display: flex;
-        }
-      }
-    }
-
-    span {
-      white-space: nowrap;
-      margin: 0 7px;
-    }
-
-    .arrow-svg {
-      transition: all 0.3s;
-      vertical-align: middle;
-      width: 16px;
-      height: 16px;
-      transform: rotate(0deg);
-
-      &.rotate {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .profile-menu {
-    width: 368px;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 100%;
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #959cb140;
-    border-radius: 2px;
-    z-index: 10000;
-    @media (max-width: 1025px) {
-      display: none;
-    }
-
-    &__items {
-      font-size: 12px;
-      line-height: 14px;
-      font-weight: 400;
-      color: #2c3e50;
-      cursor: pointer;
-
-      span.balance {
-        padding: 2px 8px;
-        color: #698096;
-        background: #ECEFF1;
-        border-radius: 100px;
-      }
-
-      .rate-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        color: #007aff;
-        font-size: 14px;
-        font-weight: 600;
-        span.rate {
-          color: #2C3E50;
-          font-size: 12px;
-        }
-      }
-
-      div:not(:last-child) > a > .gray-text {
-        border-bottom: 0.5px solid #bdc7ce;
-      }
-
-      div:not(:last-child) > .gray-text {
-        border-bottom: 0.5px solid #bdc7ce;
-
-        & + div {
-          padding: 10px 16px;
-        }
-      }
-
-      div
-      > .gray-text:not(.profile-menu__balance-link):not(.profile-menu__links) {
-        padding: 0;
-
-        a {
-          color: #2c3e50;
-
-          &:visited {
-            color: #2c3e50;
-          }
-        }
-      }
-    }
-
-    &__item__child {
-      padding: 0 16px 0 32px;
-      height: 40px;
-      display: flex;
-      border-top: 0.5px solid #bdc7ce;
-      align-items: center;
-
-      &:hover {
-        background: #2c3e500c;
-      }
-
-      span {
-        display: flex;
-        align-items: center;
-
-        svg {
-          margin-right: 5px;
-
-          path {
-            fill: #2c3e500c !important;
-          }
-        }
-      }
-    }
-
-    &__item__children {
-      padding: 0 16px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 40px;
-
-      &:hover {
-        background: #2c3e500c;
-      }
-
-      &.active {
-        background: #ECEFF1;
-        border-left: 3px solid #007aff;
-      }
-    }
-
-    &__balance-link {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 40px;
-      padding: 0 16px;
-
-      &:hover {
-        background: #2c3e500d;
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #eef0f5;
-      }
-    }
-
-    &__balance {
-      font-size: 14px;
-      font-weight: 600;
-      color: #007aff;
-      white-space: nowrap;
-    }
-
-    &__links {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      height: 40px;
-      padding: 0 16px;
-
-      &:hover {
-        background: linear-gradient(0deg, rgba(236, 239, 241, 0.5), rgba(236, 239, 241, 0.5)), #FFFFFF;
-      }
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #eef0f5;
-      }
-    }
-  }
-}
-
-.exit {
-  background: #007AFF;
-  height: 40px;
-  border-radius: 0 0 2px 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  &:hover {
-    background: #9da3ac;
-    color: #fff;
-  }
-
-  &:hover svg {
-    stroke: #fff;
-    background: #9da3ac;
-  }
-
-  svg {
-    margin-right: 8px;
-    background: #007AFF;
-    fill: none !important;
-    stroke: #fff;
-    transition: all 0s;
-  }
-
-  &:active {
-    background: #0055bb;
-    color: #fff;
-  }
-
-  &:active svg {
-    stroke: #fff;
-    background: #0055bb;
-  }
-
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 16px;
-  color: #fff;
-}
-
-.sign {
-  height: 40px;
-  background: transparent;
-  border: none;
-  border-radius: 0 0 2px 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  &:hover {
-    svg {
-      stroke: #71757a !important;
-    }
-
-    span {
-      color: #71757a;
-    }
-  }
-
-  &:active {
-    svg {
-      stroke: #9da3ac !important;
-    }
-
-    span {
-      color: #9da3ac;
-    }
-  }
-
-  svg {
-    margin-right: 8px;
-    fill: none !important;
-    stroke: #2c3e50 !important;
-    @media (max-width: 1025px) {
-      stroke: none !important;
-      margin-right: 24px;
-    }
-  }
-
-  span {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 16px;
-    color: #2c3e50;
-    margin: 0 0;
-  }
-}
-
-.requests {
-  &__link {
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 400;
-    padding: 12px;
-    color: var(--newColor);
-    white-space: nowrap;
-    margin: 0 6px 0 0;
-    @media (max-width: 1025px) {
-      display: none;
-    }
-
-    svg {
-      vertical-align: middle;
-      width: 20px;
-      height: 20px;
-      margin-right: 4px;
-      margin-bottom: 2px;
-    }
-
-    span {
-      color: #2c3e50;
-      font-weight: 600;
-    }
-  }
-}
-
-.user {
-  display: none;
-  @media (max-width: 1025px) {
-    width: 24px;
-    height: 24px;
-    margin-right: 24px;
-    display: flex;
-  }
-}
-
-.exit-mobile {
-  display: none;
-  @media (max-width: 1025px) {
-    display: block;
-    width: 24px;
-    height: 24px;
-    margin-right: 12px;
-  }
-}
-
-.mobile-table {
-  display: none;
-  @media (max-width: 1025px) {
-    display: block;
-  }
-
-  &-head {
-    padding: 0 16px;
-    background: #f4f4f4;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 40px;
-
-    p {
-      font-weight: 600;
-      font-size: 17px;
-      line-height: 19px;
-      color: #2c3e50;
-    }
-
-    svg {
-      width: 18px;
-      height: 18px;
-      @media (max-width: 1025px) {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    &-chosen {
-      position: relative;
-
-      & > div {
-        position: absolute;
-      }
-
-      p {
-        text-align: center;
-        width: 100%;
-      }
-    }
-  }
-}
-
-.profile-menu-mobile {
-  height: 100%;
-
-  .bb > a,
-  .bb > a:visited {
-    color: #000;
-  }
-
-  &__inner {
-    display: flex;
-    flex-direction: column;
-    height: 72%;
-  }
-
-  &__links,
-  &__item {
-    padding: 0 16px;
-    height: 52px;
-    border: 1px solid #9da3ac;
-    border-bottom: none;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-  }
-
-  &__balance-link {
-    padding: 0 16px;
-    height: 52px;
-    border: 1px solid #9da3ac;
-    border-bottom: none;
-    font-size: 14px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__balance {
-    color: #1e88e5;
-    font-size: 16px;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-
-    &-items {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      &__upper-text {
-        font-weight: normal;
-        font-size: 10px;
-        line-height: 14px;
-        color: #69797d;
-        margin-bottom: 4px;
-      }
-
-      &__bot-text {
-        font-weight: 600;
-        font-size: 12px;
-        line-height: 16px;
-        color: #2c3e50;
-      }
-    }
-  }
-}
-
-.exit-mob {
-  background: #ffcd33;
-  border-radius: 2px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 16px;
-  color: #2c3e50;
-  margin: 16px 16px 0;
-
-  svg {
-    margin-right: 8px;
-    fill: none !important;
-  }
-}
-
-.bb {
-  &:last-child {
-    border-bottom: 1px solid #9da3ac;
-  }
-}
-
-.button-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.sign_text {
-  @media (max-width: 1025px) {
-    display: none;
-  }
-}
-</style>