adata-ui 2.1.39 → 2.1.40-beta.1

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,21 @@ interface Props {
   oldVersion?: string
 }
 
-const { t } = useI18n()
 const { locale } = 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()
 
+// 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) {
@@ -82,14 +89,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 +106,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/30 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 -->
@@ -156,7 +158,12 @@ onMounted(() => {
           />
         </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 +176,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 +196,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-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"
-                @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 +229,7 @@ onMounted(() => {
                 @logout="$emit('logout')"
               />
             </template>
-          </a-dropdown>
+          </a-dropdown-v2>
           <a-button-login
             v-show="!isAuthenticated && showLogIn"
             @click="goAuth"

package/components/navigation/header/AlmatyContacts.vue

@@ -104,7 +104,7 @@ import ExpandWindow from "#adata-ui/icons/expand-window.vue";
 import {useContacts} from "#adata-ui/composables/projectState";
 
 const {t} = useI18n()
-const contacts = ref(useContacts())
+const contacts = useContacts()
 const AlmatyItems = computed(() => ([
   {
     title: t('header.contacts.almaty.adress.title'),

package/components/navigation/header/CardGallery.vue

@@ -150,12 +150,12 @@ onUnmounted(() => clearTimer())
         </nuxt-link-locale>
       </div>
     </transition>
-    <div class="absolute xl:bottom-4 w-full">
+    <div class="absolute bottom-4 w-full">
       <div class="flex justify-center items-center gap-6">
         <div
           v-for="(item, index) in items"
           :key="index"
-          class="relative bg-white/50 dark:bg-gray-900/50 rounded-full overflow-hidden cursor-pointer h-2 w-2"
+          class="relative bg-white/50 dark:bg-gray-900/50 rounded-full overflow-hidden cursor-pointer h-2 w-2 transition-[width] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
           :class="{ 'w-[52px]': currentIndex === index }"
           @click="setCurrentIndex(index)"
         >
@@ -188,7 +188,9 @@ onUnmounted(() => clearTimer())
   top: 0;
   left: 0;
   width: 100%;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .slide-left-enter-from {

package/components/navigation/header/ContactMenu.vue

@@ -1,19 +1,8 @@
 <script setup lang="ts">
-import AlmatyContacts from "#adata-ui/components/navigation/header/AlmatyContacts.vue";
-import AstanaContacts from "#adata-ui/components/navigation/header/AstanaContacts.vue";
+import AlmatyContacts from '#adata-ui/components/navigation/header/AlmatyContacts.vue'
+import AstanaContacts from '#adata-ui/components/navigation/header/AstanaContacts.vue'
 
-const props = withDefaults(
-  defineProps<{
-    animation?: string
-    index?: number
-    url?: string
-  }>(),
-  {
-    animation: 'previous',
-    index: 2,
-    url:''
-  }
-)
+defineProps<{ url?: string }>()
 defineEmits(['outerClick', 'mouseOver'])
 
 const { t } = useI18n()
@@ -21,94 +10,39 @@ const activeTab = ref(0)
 const options = [
   {
     key: 0,
-    name: 'ТОО "Alldata"'
+    name: 'ТОО "Alldata"',
   },
   {
     key: 1,
-    name: ' ТОО «ADATA Consulting»'
+    name: ' ТОО «ADATA Consulting»',
   },
 ]
-
 </script>
 
 <template>
-  <div class=" normal-case ">
+  <div class="normal-case">
     <div class="bg-white dark:bg-gray-950">
-      <transition :name="animation">
-        <div
-          :key="index"
-          class="a-container"
-        >
-          <div class="pt-2 mb-8  flex justify-between">
-            <a-pill-tabs
-              v-model="activeTab"
-              class="gap-2"
-              view="mobile"
-              :options="options"
-              size="lg"
-            />
-            <nuxt-link :to="url">
-              <a-button variant="gray">
-                {{ t('header.contacts.toContacts') }}
-                <a-icon-arrow-top-right-on-square />
-              </a-button>
-            </nuxt-link>
-          </div>
-          <div>
-            <almaty-contacts v-show="activeTab===0" />
-            <astana-contacts v-show="activeTab===1" />
-          </div>
+      <div class="a-container">
+        <div class="mb-8 flex justify-between pt-2">
+          <a-pill-tabs
+            v-model="activeTab"
+            class="gap-2"
+            view="mobile"
+            :options="options"
+            size="lg"
+          />
+          <nuxt-link :to="url">
+            <a-button variant="gray">
+              {{ t('header.contacts.toContacts') }}
+              <a-icon-arrow-top-right-on-square />
+            </a-button>
+          </nuxt-link>
+        </div>
+        <div>
+          <almaty-contacts v-show="activeTab === 0" />
+          <astana-contacts v-show="activeTab === 1" />
         </div>
-      </transition>
-      <button
-        class="absolute right-8 top-4"
-        @click="$emit('outerClick')"
-      >
-        <a-icon-x-mark
-          width="32"
-          height="32"
-        />
-      </button>
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-$percent: 30%;
-.next-enter-from,
-.next-leave-to {
-  opacity: 0;
-  transform: translateX($percent);
-  position: absolute;
-}
-
-.next-enter-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.next-leave-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  opacity: 0;
-  transform: translateX(-$percent);
-}
-
-// Backwards transition
-
-.prev-enter-from,
-.prev-leave-to {
-  position: absolute;
-
-  opacity: 0;
-  transform: translateX(-$percent);
-}
-
-.prev-enter-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.prev-leave-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  opacity: 0;
-  transform: translateX($percent);
-}
-</style>