adata-ui 2.1.40-beta.18 → 2.1.40-beta.19

package/components/navigation/footer/AFooter.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
 import AdataLogo from '#adata-ui/icons/adata-logo.vue'
 import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
-import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
+import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
 import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
 import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
-import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
 import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
-import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
 import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
 import { AIconExpandWindow, AIconLocation, AIconMail, AIconPhone } from '#components'
-import { useUrls } from '#adata-ui/composables/useUrls'
 
 const year = new Date().getFullYear()
 const { t, locale } = useI18n()
@@ -20,33 +20,33 @@ const socialMedia = [
   {
     icon: LinkedinIcon,
     link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
-    name: 'Linkedin'
+    name: 'Linkedin',
   },
   {
     icon: YouTubeIcon,
     link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
-    name: 'YouTube'
+    name: 'YouTube',
   },
   {
     icon: InstagramIcon,
     link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
-    name: 'Instagram'
+    name: 'Instagram',
   },
   {
     icon: TelegramIcon,
     link: 'https://t.me/adatakz_official',
-    name: 'Telegram'
+    name: 'Telegram',
   },
   {
     icon: FaceBookIcon,
     link: 'https://www.facebook.com/adata.kz',
-    name: 'Facebook'
+    name: 'Facebook',
   },
   {
     icon: TikTokIcon,
     link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
-    name: 'Tiktok'
-  }
+    name: 'Tiktok',
+  },
 ]
 
 const mainLinks = computed(() => ({
@@ -74,27 +74,27 @@ const mainLinks = computed(() => ({
         {
           title: t('footer.zakupki.title'),
           link: urls.zakupki + PAGES.tender.main,
-          isNew: true
-        }
+          isNew: true,
+        },
       ],
       [
         {
           title: t('footer.compliance.title'),
           link: buildLocalizedUrl(locale.value, urls.compliance, PAGES.compliance.l),
-          isNew: true
+          isNew: true,
         },
         {
           title: t('header.products.edo.label'),
           link: urls.edo_docs,
-          isNew: true
+          isNew: true,
         },
         {
           title: t('footer.fea.title'),
           link: buildLocalizedUrl(locale.value, urls.tnved, PAGES.fea.main),
-          isNew: true
+          isNew: true,
         },
-      ]
-    ]
+      ],
+    ],
   },
   useful: {
     title: t('footer.useful'),
@@ -123,11 +123,11 @@ const mainLinks = computed(() => ({
         },
         {
           title: t('footer.info.onlineServices'),
-          link: buildLocalizedUrl(locale.value, urls.pk, PAGES.services + '/taxpayer'),
+          link: buildLocalizedUrl(locale.value, urls.pk, `${PAGES.services}/taxpayer`),
         },
-      ]
-    ]
-  }
+      ],
+    ],
+  },
 }))
 
 const contactLinks = computed(() => ({
@@ -161,16 +161,15 @@ const contactLinks = computed(() => ({
     },
   ],
 }))
-
 </script>
 
 <template>
   <footer
     id="footer"
-    class="bg-deepblue-900 dark:bg-gray-900 py-4 lg:py-5 rounded-t-3xl"
+    class="rounded-t-2xl bg-deepblue-900 py-4 dark:bg-gray-900 lg:py-5"
   >
-    <div class="a-container mobile-padding py-5 text-white flex flex-col lg:flex-row justify-between gap-8">
-      <div class="flex flex-col gap-8 justify-between">
+    <div class="a-container mobile-padding flex flex-col justify-between gap-8 py-5 text-white lg:flex-row">
+      <div class="flex flex-col justify-between gap-8">
         <div class="flex flex-col gap-4">
           <adata-logo
             filled
@@ -178,11 +177,11 @@ const contactLinks = computed(() => ({
             class="shrink-0"
           />
 
-          <p class="text-sm">
+          <p class="text-body-md">
             {{ t('footer.subtitle') }}
           </p>
 
-          <div class="hidden lg:flex gap-8">
+          <div class="hidden gap-8 lg:flex">
             <nuxt-link
               v-for="(social, idx) in socialMedia"
               :key="idx"
@@ -201,13 +200,13 @@ const contactLinks = computed(() => ({
           </div>
         </div>
 
-        <p class="hidden lg:block text-[10px]">
+        <p class="hidden text-body-sm lg:block">
           {{ year }} © {{ t('footer.LLP') }} "Alldata"
         </p>
       </div>
 
-      <div class="flex gap-6 lg:gap-[75px] flex-col lg:flex-row">
-        <div class="flex gap-[18px] lg:gap-[75px] flex-col lg:flex-row">
+      <div class="flex flex-col gap-6 lg:flex-row lg:gap-[75px]">
+        <div class="flex flex-col gap-[18px] lg:flex-row lg:gap-[75px]">
           <div
             v-for="(item, idx) in mainLinks"
             :key="idx"
@@ -219,10 +218,10 @@ const contactLinks = computed(() => ({
             />
           </div>
         </div>
-        <!--noindex-->
-        <div class="flex flex-col gap-2 items-start" data-nosnippet>
+        <!-- noindex -->
+        <div class="flex flex-col items-start gap-2" data-nosnippet>
           <nuxt-link
-            class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
+            class="cursor-pointer border-b-[0.5px] border-white pb-3 pr-4 text-body-md-strong"
             :to="contactLinks.link?.replace(/\/$/, '')"
           >
             {{ contactLinks.title }}
@@ -232,10 +231,10 @@ const contactLinks = computed(() => ({
             <div
               v-for="(link, idx) in contactLinks.items"
               :key="idx"
-              class="flex gap-2 items-center"
+              class="flex items-center gap-2"
             >
               <nuxt-link
-                class="text-xs font-medium flex gap-2 items-center cursor-pointer"
+                class="flex cursor-pointer items-center gap-2 text-body-sm-medium"
                 :class="link.class"
                 :to="link.link?.replace(/\/$/, '')"
               >
@@ -256,10 +255,10 @@ const contactLinks = computed(() => ({
             </div>
           </div>
         </div>
-        <!--/noindex-->
+        <!-- /noindex -->
       </div>
 
-      <div class="lg:hidden flex gap-8 flex-wrap">
+      <div class="flex flex-wrap gap-8 lg:hidden">
         <nuxt-link
           v-for="(social, idx) in socialMedia"
           :key="idx"
@@ -276,7 +275,7 @@ const contactLinks = computed(() => ({
         </nuxt-link>
       </div>
 
-      <p class="lg:hidden text-[10px]">
+      <p class="text-body-sm lg:hidden">
         {{ year }} © {{ t('footer.LLP') }} "Alldata"
       </p>
     </div>

package/components/navigation/footer/ui/a-footer-accordion.vue

@@ -18,7 +18,7 @@ const isDesktop = useMediaQuery('(max-width: 1024px)')
 
 const open = ref(false)
 function toFinalValues(el: HTMLDivElement) {
-  el.style.height = el.scrollHeight + 'px'
+  el.style.height = `${el.scrollHeight}px`
   el.style.opacity = '1'
 }
 
@@ -37,17 +37,17 @@ const filterCheck = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 items-start">
-    <div class="flex gap-2 justify-between w-full">
+  <div class="flex flex-col items-start gap-2">
+    <div class="flex w-full justify-between gap-2">
       <nuxt-link
-        class="text-sm font-semibold lg:pb-3 lg:pr-4 lg:border-b-[0.5px] lg:border-white cursor-default"
+        class="cursor-default text-body-md-strong lg:border-b-[0.5px] lg:border-white lg:pb-3 lg:pr-4"
         :class="{ 'cursor-pointer': link }"
         :to="link?.replace(/\/$/, '')"
       >
         {{ label }}
       </nuxt-link>
 
-      <div class="transition-all lg:hidden cursor-pointer">
+      <div class="cursor-pointer transition-all lg:hidden">
         <a-icon-chevron-down
           v-if="content.length"
           filled
@@ -67,7 +67,7 @@ const filterCheck = computed(() => {
     >
       <div
         v-if="filterCheck"
-        class="flex gap-3 lg:gap-6 flex-col lg:flex-row"
+        class="flex flex-col gap-3 lg:flex-row lg:gap-6"
       >
         <div
           v-for="(subItem, subIdx) in content"
@@ -77,10 +77,10 @@ const filterCheck = computed(() => {
           <div
             v-for="(link, idx) in subItem"
             :key="idx"
-            class="flex gap-2 items-center"
+            class="flex items-center gap-2"
           >
             <nuxt-link
-              class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
+              class="flex cursor-pointer items-center gap-2 text-body-sm lg:font-medium"
               :to="link.link?.replace(/\/$/, '')"
             >
               {{ link.title }}
@@ -88,7 +88,7 @@ const filterCheck = computed(() => {
 
             <div
               v-if="link.isNew"
-              class="text-[9px] font-bold px-1 py-[2px] rounded-sm bg-white/20"
+              class="rounded-xs bg-white/20 px-1 py-[2px] text-body-sm font-bold"
             >
               NEW
             </div>

package/components/navigation/header/AHeader.vue

@@ -1,23 +1,26 @@
 <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 TopHeader from '#adata-ui/components/navigation/header/TopHeader.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 Arrow from '#adata-ui/icons/chevron/chevron-down.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'
-import { useUrls } from '#adata-ui/composables/useUrls'
 
 defineOptions({ name: 'AHeader' })
 
 const props = withDefaults(defineProps<Props>(), {
   limitRemaining: 0,
   daysRemaining: 0,
+  maxLimit: 0,
   balance: 0,
   rate: 'Базовый',
   showLogIn: true,
@@ -31,10 +34,11 @@ interface Props {
   replenish?: string
   hasNotification?: boolean
   email: string | undefined
-  rate: string
-  daysRemaining: number
-  limitRemaining: number
-  balance: number
+  rate?: string
+  daysRemaining?: number
+  limitRemaining?: number
+  maxLimit?: number
+  balance?: number
   isAuthenticated: boolean
   showLogIn?: boolean
   mobileHeaderType?: 'search' | 'default'
@@ -42,18 +46,19 @@ interface Props {
   oldVersion?: string
 }
 
-const { t } = useI18n()
-const { locale } = useI18n()
+const { locale, t } = useI18n()
 
 useCurrentModule().value = props.module
-const appConfig = useAppConfig()
 const { myLayer }: any = useAppConfig()
 const urls = useUrls()
 
-const langIsOn = appConfig.myLayer.langIsOn
-const contacts = ref(useContacts())
+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) {
@@ -82,14 +87,13 @@ function goToAnotherModule() {
 
 async function fetchContacts() {
   try {
-    const response = await fetch(
+    const { data } = await $fetch<{ data: unknown }>(
       'https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department',
     )
-    const { data } = await response.json()
     contacts.value = data
   }
   catch (e) {
-    console.error(e.message)
+    console.error(e instanceof Error ? e.message : e)
   }
 }
 
@@ -100,14 +104,10 @@ onMounted(() => {
 
 <template>
   <div>
-    <top-header
-      :days-remaining="daysRemaining"
-      :is-authenticated="isAuthenticated"
-      :module-name="module"
-      :limit-remaining="limitRemaining"
-    />
+    <system-notification />
     <header
-      class="relative h-16 border-b border-deepblue-900/10 bg-white dark:border-gray-200/10 dark:bg-gray-900"
+      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 -->
@@ -117,46 +117,47 @@ onMounted(() => {
         >
           <div
             v-if="mobileHeaderType === 'default'"
-            class="flex justify-center"
+            class="text-deepblue dark:text-[#E3E5E8]"
+            @click="goToAnotherModule"
           >
-            <div
-              class="text-deepblue dark:text-[#E3E5E8]"
-              @click="goToAnotherModule"
-            >
-              <span class="visually-hidden"> Сервисы Adata.kz</span>
+            <span class="visually-hidden"> Сервисы Adata.kz</span>
 
-              <adata-logo
-                :font-controlled="false"
-                filled
-              />
-            </div>
+            <adata-logo
+              :font-controlled="false"
+              filled
+            />
           </div>
           <div
             v-else-if="mobileHeaderType === 'search'"
-            class="flex w-full items-center gap-2 bg-white dark:bg-gray-900 lg:hidden"
+            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 bg-gray-50 px-4 py-1.5 dark:bg-gray-800 dark:text-gray-500"
+              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 />
-              <span class="body-400">Найти</span>
+              <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="lg:hidden">
+        <div class="flex items-center gap-1 lg:hidden">
+          <a-color-mode />
           <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">
+        <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)"
@@ -169,11 +170,18 @@ onMounted(() => {
               filled
             />
           </nuxt-link-locale>
-          <header-link />
+          <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-4 lg:flex">
+          <div class="hidden items-center gap-2 lg:flex">
             <a-change-version
               v-if="oldVersion"
               :url="oldVersion"
@@ -182,22 +190,31 @@ onMounted(() => {
             <lang-switcher v-if="langIsOn || module === 'fea'" />
           </div>
 
-          <a-dropdown
+          <a-dropdown-v2
             v-show="isAuthenticated"
-            placement="right"
+            placement="bottom-end"
           >
-            <template #default="{ onExpand, expanded }">
-              <div
-                class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex"
+            <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"
-                @click.stop="onExpand"
+                :aria-label="email"
+                @click.stop="toggle"
               >
                 <span>{{ email }}</span>
-                <arrow :class="{ 'rotate-180': expanded }" />
-              </div>
+                <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"
@@ -206,7 +223,7 @@ onMounted(() => {
                 @logout="$emit('logout')"
               />
             </template>
-          </a-dropdown>
+          </a-dropdown-v2>
           <a-button-login
             v-show="!isAuthenticated && showLogIn"
             @click="goAuth"