adata-ui 2.1.40-beta.8 → 2.1.40

package/components/navigation/header/AHeader.vue

@@ -1,243 +1,237 @@
-<script lang="ts" setup>
-import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
-import AColorMode from '#adata-ui/components/features/color-mode/AColorMode.client.vue'
-import ADropdownV2 from '#adata-ui/components/features/dropdown/ADropdownV2.vue'
-import LangSwitcher from '#adata-ui/components/features/lang-switcher/lang-switcher.vue'
-import AChangeVersion from '#adata-ui/components/features/сhange-version/AChangeVersion.vue'
-import HeaderUsage from '#adata-ui/components/navigation/header/HeaderUsage.vue'
-import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
-import SystemNotification from '#adata-ui/components/navigation/header/SystemNotification.vue'
-import { useContacts, useCurrentModule } from '#adata-ui/composables/projectState'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import AdataLogo from '#adata-ui/icons/adata-logo.vue'
-import Logo from '#adata-ui/icons/logo.vue'
-import { buildLocalizedUrl, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
-import { useElementBounding } from '@vueuse/core'
-import HeaderLink from './HeaderLink.vue'
-
-defineOptions({ name: 'AHeader' })
-
-const props = withDefaults(defineProps<Props>(), {
-  limitRemaining: 0,
-  daysRemaining: 0,
-  maxLimit: 0,
-  balance: 0,
-  rate: 'Базовый',
-  showLogIn: true,
-  mobileHeaderType: 'default',
-  module: 'pk',
-})
-
-const emit = defineEmits(['logout', 'search', 'login'])
-
-interface Props {
-  replenish?: string
-  hasNotification?: boolean
-  email: string | undefined
-  rate?: string
-  daysRemaining?: number
-  limitRemaining?: number
-  maxLimit?: number
-  balance?: number
-  isAuthenticated: boolean
-  showLogIn?: boolean
-  mobileHeaderType?: 'search' | 'default'
-  module?: ProjectKeys
-  oldVersion?: string
-}
-
-const { locale } = useI18n()
-
-useCurrentModule().value = props.module
-const { myLayer }: any = useAppConfig()
-const urls = useUrls()
-
-const langIsOn = myLayer.langIsOn
-const contacts = useContacts()
-const { loginModal } = useIdModals()
-
-// Anchor the navigation mega-menu to the actual bottom of the header bar so it
-// stays aligned even when the system-notification banner is shown above it.
-const headerRef = ref<HTMLElement | null>(null)
-const { bottom: headerBottom } = useElementBounding(headerRef)
-
-function goAuth() {
-  if (myLayer.authMode !== 'local') {
-    if (window) {
-      emit('login')
-      let fullPath = encodeURIComponent(window.location.toString())
-      if (fullPath.includes('basic-info')) {
-        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
-      }
-
-      navigateToLocalizedPage({
-        locale,
-        projectUrl: urls.login,
-        path: `/?url=${fullPath}`,
-        target: '_self',
-      })
-    }
-  }
-  else {
-    loginModal.value = true
-  }
-}
-
-function goToAnotherModule() {
-  location.href = buildLocalizedUrl(locale.value, urls.landing, '')
-}
-
-async function fetchContacts() {
-  try {
-    const { data } = await $fetch<{ data: unknown }>(
-      'https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department',
-    )
-    contacts.value = data
-  }
-  catch (e) {
-    console.error(e instanceof Error ? e.message : e)
-  }
-}
-
-onMounted(() => {
-  fetchContacts()
-})
-</script>
-
-<template>
-  <div>
-    <system-notification />
-    <header
-      ref="headerRef"
-      class="relative h-16 border-b border-deepblue-900/10 bg-gray-50/20 backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30"
-    >
-      <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
-        <!--        Desktop hidden -->
-        <section
-          id="mobile-header"
-          class="grow lg:hidden"
-        >
-          <div
-            v-if="mobileHeaderType === 'default'"
-            class="flex justify-center"
-          >
-            <div
-              class="text-deepblue dark:text-[#E3E5E8]"
-              @click="goToAnotherModule"
-            >
-              <span class="visually-hidden"> Сервисы Adata.kz</span>
-
-              <adata-logo
-                :font-controlled="false"
-                filled
-              />
-            </div>
-          </div>
-          <div
-            v-else-if="mobileHeaderType === 'search'"
-            class="flex w-full items-center gap-2 lg:hidden"
-          >
-            <logo
-              class="dark:text-gray-200"
-              @click="goToAnotherModule"
-            />
-            <button
-              class="flex w-full items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-1.5 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
-              @click="$emit('search')"
-            >
-              <a-icon-search class="text-gray-400 dark:text-gray-500" />
-              <span class="body-400 text-gray-500 dark:text-gray-400">Найти</span>
-            </button>
-          </div>
-        </section>
-        <div class="lg:hidden">
-          <lang-switcher
-            v-if="langIsOn || module === 'fea'"
-            class="lg:hidden"
-            is-mobile
-          />
-        </div>
-        <!-- Mobile hidden -->
-        <nav
-          class="hidden items-center gap-4 lg:flex"
-          itemscope
-          itemtype="https://schema.org/SiteNavigationElement"
-          role="list"
-        >
-          <nuxt-link-locale
-            aria-label="Adata-logo"
-            :to="buildLocalizedUrl(locale, urls.landing)"
-            class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
-            data-test-id="header-main-adata-logo"
-            @click="goToAnotherModule"
-          >
-            <adata-logo
-              :font-controlled="false"
-              filled
-            />
-          </nuxt-link-locale>
-          <header-link :menu-top="headerBottom || 64" />
-        </nav>
-        <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
-          <header-usage
-            v-if="isAuthenticated"
-            :limit-remaining="limitRemaining"
-            :max-limit="maxLimit"
-            :days-remaining="daysRemaining"
-          />
-
-          <!-- Mobile hidden -->
-          <div class="hidden items-center gap-2 lg:flex">
-            <a-change-version
-              v-if="oldVersion"
-              :url="oldVersion"
-            />
-            <a-color-mode />
-            <lang-switcher v-if="langIsOn || module === 'fea'" />
-          </div>
-
-          <a-dropdown-v2
-            v-show="isAuthenticated"
-            placement="bottom-end"
-          >
-            <template #default="{ toggle, isOpen }">
-              <button
-                type="button"
-                class="hidden h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
-                :class="isOpen
-                  ? 'bg-deepblue-900/10 text-deepblue-900 dark:bg-white/15 dark:text-white'
-                  : 'text-gray-900 dark:text-gray-100'"
-                data-test-id="header-email-text"
-                :aria-label="email"
-                @click.stop="toggle"
-              >
-                <span>{{ email }}</span>
-                <a-icon-chevron-down
-                  class="shrink-0 transition-transform duration-200"
-                  :class="{ 'rotate-180': isOpen }"
-                />
-              </button>
-            </template>
-            <template #content>
-              <profile-menu
-                :email="email"
-                :balance="balance"
-                :days-remaining="daysRemaining"
-                :limit-remaining="limitRemaining"
-                :rate="rate"
-                :replenish="replenish"
-                @logout="$emit('logout')"
-              />
-            </template>
-          </a-dropdown-v2>
-          <a-button-login
-            v-show="!isAuthenticated && showLogIn"
-            @click="goAuth"
-          />
-        </div>
-      </div>
-    </header>
-  </div>
-</template>
-
-<style scoped></style>
+<script lang="ts" setup>
+import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
+import AColorMode from '#adata-ui/components/features/color-mode/AColorMode.client.vue'
+import ADropdownV2 from '#adata-ui/components/features/dropdown/ADropdownV2.vue'
+import LangSwitcher from '#adata-ui/components/features/lang-switcher/lang-switcher.vue'
+import AChangeVersion from '#adata-ui/components/features/сhange-version/AChangeVersion.vue'
+import HeaderUsage from '#adata-ui/components/navigation/header/HeaderUsage.vue'
+import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
+import SystemNotification from '#adata-ui/components/navigation/header/SystemNotification.vue'
+import { useContacts, useCurrentModule } from '#adata-ui/composables/projectState'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+import Logo from '#adata-ui/icons/logo.vue'
+import { buildLocalizedUrl, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import { useElementBounding } from '@vueuse/core'
+import HeaderLink from './HeaderLink.vue'
+
+defineOptions({ name: 'AHeader' })
+
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  maxLimit: 0,
+  balance: 0,
+  rate: 'Базовый',
+  showLogIn: true,
+  mobileHeaderType: 'default',
+  module: 'pk',
+})
+
+const emit = defineEmits(['logout', 'search', 'login'])
+
+interface Props {
+  replenish?: string
+  hasNotification?: boolean
+  email: string | undefined
+  rate?: string
+  daysRemaining?: number
+  limitRemaining?: number
+  maxLimit?: number
+  balance?: number
+  isAuthenticated: boolean
+  showLogIn?: boolean
+  mobileHeaderType?: 'search' | 'default'
+  module?: ProjectKeys
+  oldVersion?: string
+}
+
+const { locale, t } = useI18n()
+
+useCurrentModule().value = props.module
+const { myLayer }: any = useAppConfig()
+const urls = useUrls()
+
+const langIsOn = myLayer.langIsOn
+const contacts = useContacts()
+const { loginModal } = useIdModals()
+
+const headerRef = ref<HTMLElement | null>(null)
+const { bottom: headerBottom } = useElementBounding(headerRef)
+
+function goAuth() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      emit('login')
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
+
+      navigateToLocalizedPage({
+        locale,
+        projectUrl: urls.login,
+        path: `/?url=${fullPath}`,
+        target: '_self',
+      })
+    }
+  }
+  else {
+    loginModal.value = true
+  }
+}
+
+function goToAnotherModule() {
+  location.href = buildLocalizedUrl(locale.value, urls.landing, '')
+}
+
+async function fetchContacts() {
+  try {
+    const { data } = await $fetch<{ data: unknown }>(
+      'https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department',
+    )
+    contacts.value = data
+  }
+  catch (e) {
+    console.error(e instanceof Error ? e.message : e)
+  }
+}
+
+onMounted(() => {
+  fetchContacts()
+})
+</script>
+
+<template>
+  <div>
+    <system-notification />
+    <header
+      ref="headerRef"
+      class="relative h-16 border-b border-deepblue-900/10 bg-gray-50/20 backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30"
+    >
+      <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
+        <!--        Desktop hidden -->
+        <section
+          id="mobile-header"
+          class="grow lg:hidden"
+        >
+          <div
+            v-if="mobileHeaderType === 'default'"
+            class="text-deepblue dark:text-[#E3E5E8]"
+            @click="goToAnotherModule"
+          >
+            <span class="visually-hidden"> Сервисы Adata.kz</span>
+
+            <adata-logo
+              :font-controlled="false"
+              filled
+            />
+          </div>
+          <div
+            v-else-if="mobileHeaderType === 'search'"
+            class="flex w-full items-center gap-2 lg:hidden"
+          >
+            <logo
+              class="dark:text-gray-200"
+              @click="goToAnotherModule"
+            />
+            <button
+              class="flex w-full items-center gap-2 rounded-full border border-gray-300/50 bg-white/30 px-4 py-1.5 backdrop-blur-sm dark:border-gray-600/50 dark:bg-white/5 dark:text-gray-300"
+              @click="$emit('search')"
+            >
+              <a-icon-search class="text-gray-400 dark:text-gray-500" />
+              <span class="text-body-md text-gray-500 dark:text-gray-400">{{ t('header.search') }}</span>
+            </button>
+          </div>
+        </section>
+        <div class="flex items-center gap-1 lg:hidden">
+          <a-color-mode />
+          <lang-switcher
+            v-if="langIsOn || module === 'fea'"
+            is-mobile
+          />
+        </div>
+        <!-- Mobile hidden -->
+        <nav
+          class="hidden items-center gap-4 lg:flex"
+          itemscope
+          itemtype="https://schema.org/SiteNavigationElement"
+          role="list"
+        >
+          <nuxt-link-locale
+            aria-label="Adata-logo"
+            :to="buildLocalizedUrl(locale, urls.landing)"
+            class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
+            data-test-id="header-main-adata-logo"
+            @click="goToAnotherModule"
+          >
+            <adata-logo
+              :font-controlled="false"
+              filled
+            />
+          </nuxt-link-locale>
+          <header-link :menu-top="headerBottom || 64" />
+        </nav>
+        <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
+          <header-usage
+            v-if="isAuthenticated"
+            :limit-remaining="limitRemaining"
+            :max-limit="maxLimit"
+            :days-remaining="daysRemaining"
+          />
+
+          <!-- Mobile hidden -->
+          <div class="hidden items-center gap-2 lg:flex">
+            <a-change-version
+              v-if="oldVersion"
+              :url="oldVersion"
+            />
+            <a-color-mode />
+            <lang-switcher v-if="langIsOn || module === 'fea'" />
+          </div>
+
+          <a-dropdown-v2
+            v-show="isAuthenticated"
+            placement="bottom-end"
+          >
+            <template #default="{ toggle, isOpen }">
+              <button
+                type="button"
+                class="hidden h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-body-md-medium transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
+                :class="isOpen
+                  ? 'bg-deepblue-900/10 text-deepblue-900 dark:bg-white/15 dark:text-white'
+                  : 'text-gray-900 dark:text-gray-100'"
+                data-test-id="header-email-text"
+                :aria-label="email"
+                @click.stop="toggle"
+              >
+                <span>{{ email }}</span>
+                <a-icon-chevron-down
+                  class="shrink-0 transition-transform duration-200"
+                  :class="{ 'rotate-180': isOpen }"
+                />
+              </button>
+            </template>
+            <template #content>
+              <profile-menu
+                :email="email"
+                :balance="balance"
+                :days-remaining="daysRemaining"
+                :limit-remaining="limitRemaining"
+                :rate="rate"
+                :replenish="replenish"
+                @logout="$emit('logout')"
+              />
+            </template>
+          </a-dropdown-v2>
+          <a-button-login
+            v-show="!isAuthenticated && showLogIn"
+            @click="goAuth"
+          />
+        </div>
+      </div>
+    </header>
+  </div>
+</template>
+
+<style scoped></style>