adata-ui 2.1.19 → 2.1.21

package/components/navigation/header/ProfileMenu.vue

@@ -1,194 +1,194 @@
-<script setup lang="ts">
-import IconLogout from '#adata-ui/icons/logout.vue'
-import { useMediaQuery } from '@vueuse/core'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-
-const isLargeScreen = useMediaQuery('(min-width: 1024px)')
-
-interface Props {
-  rate: string
-  daysRemaining: number
-  limitRemaining: number
-  balance: number
-  replenish?: string
-  oldVersion?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  daysRemaining: 0,
-  limitRemaining: 0
-})
-
-defineEmits(['logout'])
-
-const { t } = useI18n()
-
-const { locale } = useI18n()
-
-// const { topUpSidePanel } = usePayment()
-
-const items = useHeaderMenuLinks()
-
-const { topUpSidePanel, rateId } = usePayment()
-
-const onReplenish = () => {
-  // if (myLayer.authMode === 'locale') {
-  //   topUpSidePanel.value = true
-  //   return
-  // }
-  rateId.value = ''
-  topUpSidePanel.value = true
-}
-</script>
-
-<template>
-  <div class="max-w-full lg:w-[300px]">
-    <!--    desktop  -->
-    <div
-      class="gradient-bg hidden px-4 py-4 text-white dark:text-gray-900 lg:block lg:rounded-t-[0.5rem] lg:px-8 lg:dark:text-white"
-    >
-      <div class="hidden text-sm lg:block">
-        {{ t('header.profile.tariff') }}
-      </div>
-      <div class="flex items-center justify-between gap-4 lg:mt-2">
-        <div class="flex items-center justify-between lg:w-full">
-          <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
-          <a-status-badge
-            type="success"
-            class="!px-3 font-semibold text-white"
-            size="sm"
-          >
-            {{ t('header.profile.connected') }}
-          </a-status-badge>
-        </div>
-        <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString('RU-ru') }} ₸</span>
-      </div>
-      <div class="mt-2 hidden items-center justify-between lg:flex lg:flex-col">
-        <div class="items-center justify-between lg:flex lg:w-full text-xs">
-          {{ t('header.profile.currentBalance') }}
-          <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString('RU-ru') }} ₸</span>
-        </div>
-        <a-button
-          size="sm"
-          class="w-full mt-4"
-          view="outline"
-          variant="ghost"
-          @click="onReplenish"
-        >
-          <a-icon-plus-circle />
-          {{ t('header.profile.addBalance') }}
-        </a-button>
-      </div>
-    </div>
-    <!--    mobile  -->
-    <div class="gradient-bg px-4 py-4 text-white dark:text-gray-900 lg:hidden">
-      <div class="flex justify-between gap-4 lg:mt-2">
-        <div class="flex flex-col items-center">
-          <div class="font-semibold">
-            {{ rate }}
-          </div>
-          <a-status-badge
-            type="success"
-            class="!px-3 font-semibold text-white dark:text-gray-900"
-            size="sm"
-          >
-            {{ t('header.profile.connected') }}
-          </a-status-badge>
-        </div>
-        <div class="flex min-w-[90px] flex-col">
-          <div class="font-semibold">
-            {{ t('header.profile.balance') }}
-          </div>
-          <div class="flex gap-1">
-            <a-status-badge
-              size="sm"
-              class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
-              type="gray"
-            >
-              {{ balance.toLocaleString('RU-ru') }} ₸
-            </a-status-badge>
-            <button
-              class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
-              @click="onReplenish"
-            >
-              <a-icon-plus
-                width="16px"
-                height="16px"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
-      <div class="mb-2 flex justify-between gap-2 lg:hidden">
-        <a-status-badge
-          size="sm"
-          class="w-full py-[6px] font-semibold"
-          :class="daysRemaining > 1 ? '': 'h-auto'"
-        >
-          <span>
-            {{ t('header.profile.requests') }}
-          </span>
-          {{ limitRemaining }}
-        </a-status-badge>
-        <a-status-badge
-          size="sm"
-          class="w-full py-[6px] font-semibold"
-          :class="daysRemaining > 1 ? '': 'flex flex-col h-fit'"
-        >
-          <span>
-            {{ t('header.profile.daysLeft') }}
-          </span>
-          {{ daysRemaining }}
-        </a-status-badge>
-      </div>
-      <div class="grid grid-cols-2 gap-2 lg:flex lg:flex-col">
-        <nuxt-link-locale
-          v-for="item in items"
-          :key="item.title"
-          class="hover:text-blue-700 dark:hover:text-blue-500 flex flex-col lg:flex-row lg:gap-3 items-center rounded-[6px] bg-gray-50 lg:bg-white lg:dark:bg-[#232324] lg:hover:bg-blue-100 py-[10px] text-center text-sm hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-[#161617] active:dark:bg-[#E3E5E8] active:dark:text-gray-900 lg:px-4  lg:dark:hover:bg-gray-900"
-          :to="item.to"
-          target="_blank"
-        >
-          <component
-            :is="item.icon"
-            class="h-[24px] w-[24px]"
-          />
-          <span class="dark:text-[#E3E5E8] text-[#2C3E50]">{{ item.title }}</span>
-        </nuxt-link-locale>
-      </div>
-      <div class="mt-2">
-        <a-change-version
-          v-if="oldVersion"
-          :url="oldVersion"
-        />
-      </div>
-      <div
-        v-if="!isLargeScreen"
-        class="my-4 flex items-center justify-between text-sm"
-      >
-        <span>
-          {{ t('header.profile.colorScheme') }}
-        </span>
-        <a-color-mode />
-      </div>
-
-      <div
-        class="flex items-center justify-center lg:justify-start gap-3 pb-2 pt-4 px-4 cursor-pointer text-red-500 hover:text-red-700 border-t"
-        @click="$emit('logout')"
-      >
-        <icon-logout class="h-5 w-5" />
-        <span>
-          {{ t('header.profile.logout') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-.gradient-bg {
-  background: linear-gradient(236.46deg, #479fff -2.39%, #0070eb 79.1%);
-}
-</style>
+<script setup lang="ts">
+import IconLogout from '#adata-ui/icons/logout.vue'
+import { useMediaQuery } from '@vueuse/core'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+
+interface Props {
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  replenish?: string
+  oldVersion?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  daysRemaining: 0,
+  limitRemaining: 0
+})
+
+defineEmits(['logout'])
+
+const { t } = useI18n()
+
+const { locale } = useI18n()
+
+// const { topUpSidePanel } = usePayment()
+
+const items = useHeaderMenuLinks()
+
+const { topUpSidePanel, rateId } = usePayment()
+
+const onReplenish = () => {
+  // if (myLayer.authMode === 'locale') {
+  //   topUpSidePanel.value = true
+  //   return
+  // }
+  rateId.value = ''
+  topUpSidePanel.value = true
+}
+</script>
+
+<template>
+  <div class="max-w-full lg:w-[300px]">
+    <!--    desktop  -->
+    <div
+      class="gradient-bg hidden px-4 py-4 text-white dark:text-gray-900 lg:block lg:rounded-t-[0.5rem] lg:px-8 lg:dark:text-white"
+    >
+      <div class="hidden text-sm lg:block">
+        {{ t('header.profile.tariff') }}
+      </div>
+      <div class="flex items-center justify-between gap-4 lg:mt-2">
+        <div class="flex items-center justify-between lg:w-full">
+          <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
+          <a-status-badge
+            type="success"
+            class="!px-3 font-semibold text-white"
+            size="sm"
+          >
+            {{ t('header.profile.connected') }}
+          </a-status-badge>
+        </div>
+        <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString('RU-ru') }} ₸</span>
+      </div>
+      <div class="mt-2 hidden items-center justify-between lg:flex lg:flex-col">
+        <div class="items-center justify-between lg:flex lg:w-full text-xs">
+          {{ t('header.profile.currentBalance') }}
+          <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString('RU-ru') }} ₸</span>
+        </div>
+        <a-button
+          size="sm"
+          class="w-full mt-4"
+          view="outline"
+          variant="ghost"
+          @click="onReplenish"
+        >
+          <a-icon-plus-circle />
+          {{ t('header.profile.addBalance') }}
+        </a-button>
+      </div>
+    </div>
+    <!--    mobile  -->
+    <div class="gradient-bg px-4 py-4 text-white dark:text-gray-900 lg:hidden">
+      <div class="flex justify-between gap-4 lg:mt-2">
+        <div class="flex flex-col items-center">
+          <div class="font-semibold">
+            {{ rate }}
+          </div>
+          <a-status-badge
+            type="success"
+            class="!px-3 font-semibold text-white dark:text-gray-900"
+            size="sm"
+          >
+            {{ t('header.profile.connected') }}
+          </a-status-badge>
+        </div>
+        <div class="flex min-w-[90px] flex-col">
+          <div class="font-semibold">
+            {{ t('header.profile.balance') }}
+          </div>
+          <div class="flex gap-1">
+            <a-status-badge
+              size="sm"
+              class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
+              type="gray"
+            >
+              {{ balance.toLocaleString('RU-ru') }} ₸
+            </a-status-badge>
+            <button
+              class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
+              @click="onReplenish"
+            >
+              <a-icon-plus
+                width="16px"
+                height="16px"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
+      <div class="mb-2 flex justify-between gap-2 lg:hidden">
+        <a-status-badge
+          size="sm"
+          class="w-full py-[6px] font-semibold"
+          :class="daysRemaining > 1 ? '': 'h-auto'"
+        >
+          <span>
+            {{ t('header.profile.requests') }}
+          </span>
+          {{ limitRemaining }}
+        </a-status-badge>
+        <a-status-badge
+          size="sm"
+          class="w-full py-[6px] font-semibold"
+          :class="daysRemaining > 1 ? '': 'flex flex-col h-fit'"
+        >
+          <span>
+            {{ t('header.profile.daysLeft') }}
+          </span>
+          {{ daysRemaining }}
+        </a-status-badge>
+      </div>
+      <div class="grid grid-cols-2 gap-2 lg:flex lg:flex-col">
+        <nuxt-link-locale
+          v-for="item in items"
+          :key="item.title"
+          class="hover:text-blue-700 dark:hover:text-blue-500 flex flex-col lg:flex-row lg:gap-3 items-center rounded-[6px] bg-gray-50 lg:bg-white lg:dark:bg-[#232324] lg:hover:bg-blue-100 py-[10px] text-center text-sm hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-[#161617] active:dark:bg-[#E3E5E8] active:dark:text-gray-900 lg:px-4  lg:dark:hover:bg-gray-900"
+          :to="item.to"
+          target="_blank"
+        >
+          <component
+            :is="item.icon"
+            class="h-[24px] w-[24px]"
+          />
+          <span class="dark:text-[#E3E5E8] text-[#2C3E50]">{{ item.title }}</span>
+        </nuxt-link-locale>
+      </div>
+      <div class="mt-2">
+        <a-change-version
+          v-if="oldVersion"
+          :url="oldVersion"
+        />
+      </div>
+      <div
+        v-if="!isLargeScreen"
+        class="my-4 flex items-center justify-between text-sm"
+      >
+        <span>
+          {{ t('header.profile.colorScheme') }}
+        </span>
+        <a-color-mode />
+      </div>
+
+      <div
+        class="flex items-center justify-center lg:justify-start gap-3 pb-2 pt-4 px-4 cursor-pointer text-red-500 hover:text-red-700 border-t"
+        @click="$emit('logout')"
+      >
+        <icon-logout class="h-5 w-5" />
+        <span>
+          {{ t('header.profile.logout') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.gradient-bg {
+  background: linear-gradient(236.46deg, #479fff -2.39%, #0070eb 79.1%);
+}
+</style>