adata-ui 2.1.38 → 2.1.40-beta

package/components/navigation/header/HeaderLink.vue

@@ -1,286 +1,260 @@
 <script setup lang="ts">
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
-
-import { PAGES } from '#adata-ui/shared/constans/pages'
-import ProductMenu from '#adata-ui/components/navigation/header/ProductMenu.vue'
-
+import type { Component } from 'vue'
 import ContactMenu from '#adata-ui/components/navigation/header/ContactMenu.vue'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import ProductMenu from '#adata-ui/components/navigation/header/ProductMenu.vue'
 import { useUrls } from '#adata-ui/composables/useUrls'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 
-const { landing, pk } = useUrls()
+withDefaults(defineProps<{ menuTop?: number }>(), {
+  menuTop: 64,
+})
+
+const { landing } = useUrls()
 const { t, locale } = useI18n()
 
-const navs: any = [
-  {
-    label: 'header.navs.products',
-    to: landing + PAGES.totalServices,
-    data_attribute: 'header-products-and-solutions-button',
-  },
-  {
-    label: 'header.navs.contacts',
-    to: landing + PAGES.contacts,
-    data_attribute: 'header-contacts-button',
-  },
-  {
-    label: 'header.navs.tariffs',
-    to: landing + PAGES.tariffs,
-    data_attribute: 'header-tariffs-button',
-  },
-  // {
-  //   label: 'header.navs.api',
-  //   to: landing + PAGES.api
-  // },
+interface HeaderNav {
+  label: string
+  dataAttribute: string
+  menu?: Component
+}
+
+const navs: HeaderNav[] = [
+  { label: 'header.navs.products', dataAttribute: 'header-products-and-solutions-button', menu: ProductMenu },
+  { label: 'header.navs.contacts', dataAttribute: 'header-contacts-button', menu: ContactMenu },
+  { label: 'header.navs.tariffs', dataAttribute: 'header-tariffs-button' },
 ]
 
-// const pageUrl = useRequestURL()
-// if (pageUrl.hostname.startsWith('pk')) {
-//   navs.push(
-//     {
-//       label: 'header.navs.services',
-//       to: pk + PAGES.services + '/kgd'
-//     }
-//   )
-// }
+const OPEN_DELAY = 500 // hover dwell before opening, so a pass-through doesn't trigger it
+const SWITCH_DELAY = 80 // snappier when moving between items with the menu already open
 
 const menu = ref<HTMLElement | null>(null)
-const isBodyAlreadyLocked = ref<boolean>(false)
-const currentIndex = ref(0)
-const forward = ref(true)
 const show = ref(false)
-const isMenuLocked = ref(false)
-const animation = ref('slide-fade')
-const currentMenu = shallowRef(null)
-const delayTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+const locked = ref(false) // a click pins the menu; hover can no longer close it
+const currentIndex = ref(0)
+const swapName = ref('swap-fade') // panel transition: directional slide on switch, fade on fresh open
+const hoverTimer = ref<ReturnType<typeof setTimeout> | null>(null)
 
-const currentMenuToShow = (index) => {
-  switch (index) {
-    case 0:
-      return ProductMenu
-    case 1:
-      return ContactMenu
-    case 2:
-      return null
-  }
-}
-const toggleMenu = (index: number) => {
-  if (index === 2) {
-    const pageUrl = useRequestURL()
+const currentMenu = computed(() => navs[currentIndex.value]?.menu ?? null)
 
-    let code = ''
+function isActive(index: number) {
+  return show.value && currentIndex.value === index
+}
 
-    if (pageUrl.hostname.includes('pk')) code = '?code=pk'
-    if (pageUrl.hostname.includes('avto')) code = '?code=auto'
-    if (pageUrl.hostname.includes('tnved')) code = '?code=ved'
-    if (pageUrl.hostname.includes('analytics')) code = '?code=analytics'
-    if (pageUrl.hostname.includes('ac')) code = '?code=compliance'
-    if (pageUrl.hostname.includes('zakupki')) code = '?code=procurement'
-    if (pageUrl.hostname.includes('edo')) code = '?code=edo'
+// Open `index`'s panel. Slide toward the direction of travel when switching
+// between already-open panels; fade (no sideways shift) on a fresh open.
+function openMenu(index: number) {
+  swapName.value = show.value && index !== currentIndex.value
+    ? (index > currentIndex.value ? 'slide-next' : 'slide-prev')
+    : 'swap-fade'
+  currentIndex.value = index
+  show.value = true
+}
 
-    navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.tariffs + code, target: '_blank' })
-  }
-  // else if (index === 3) {
-  //   navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.api, target: '_blank' })
-  // }
-  // else if (index === 4) {
-  //   navigateToLocalizedPage({ locale, projectUrl: pk, path: PAGES.services + '/kgd', target: '_blank' })
-  // }
-  else {
-    currentMenu.value = currentMenuToShow(index)
-    const prev = currentIndex.value
-    if (prev < index) {
-      forward.value = false
-    } else if (prev > index) {
-      forward.value = true
-    }
-    animation.value = forward.value ? ' prev' : 'next'
-    if (!show.value) animation.value = 'slide-fade'
-    currentIndex.value = index
-    show.value = true
-  }
+function closeMenu() {
+  show.value = false
+  locked.value = false
 }
-const closeMenu = (forceClose = false) => {
-  if (isMenuLocked.value && !forceClose) {
-    return
-  } else {
-    animation.value = 'slide-fade'
-    show.value = false
 
-    setTimeout(() => {
-      isMenuLocked.value = false
-      currentMenu.value = null
-    }, 200)
+function goToTariffs() {
+  const host = useRequestURL().hostname
+  const codeMap: Record<string, string> = {
+    pk: 'pk',
+    avto: 'auto',
+    tnved: 'ved',
+    analytics: 'analytics',
+    ac: 'compliance',
+    zakupki: 'procurement',
+    edo: 'edo',
   }
+  const key = Object.keys(codeMap).find(item => host.includes(item))
+  const code = key ? `?code=${codeMap[key]}` : ''
+  navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.tariffs + code, target: '_blank' })
 }
-const onMenuMouseEnter = (index: number) => {
-  if (![2, 3, 4].includes(index)) {
-    if (show.value === false) {
-      delayTimer.value = setTimeout(() => {
-        toggleMenu(index)
-      }, 600)
-    } else {
-      delayTimer.value = setTimeout(() => {
-        toggleMenu(index)
-      }, 100)
-    }
-  } else show.value = false
-}
-const onMenuMouseLeave = () => {
-  if (delayTimer.value) {
-    clearTimeout(delayTimer.value)
-    delayTimer.value = null
+
+// Click pins the menu open; items without a menu (Tariffs) navigate instead.
+function toggleMenu(index: number) {
+  const nav = navs[index]
+  if (!nav?.menu) {
+    goToTariffs()
+    return
   }
-}
-const lockMenu = () => {
-  isMenuLocked.value = true
-}
-const toggleBodyScroll = (el: HTMLBodyElement | HTMLDivElement, lock: boolean) => {
-  if (lock) {
-    setTimeout(() => {
-      disableBodyScroll(el, { reserveScrollBarGap: true })
-    }, 0)
+  if (show.value && currentIndex.value === index) {
+    closeMenu()
     return
   }
-  enableBodyScroll(el)
+  openMenu(index)
+  locked.value = true
 }
 
-onBeforeUnmount(() => {
-  if (show.value) toggleBodyScroll(menu.value, false)
-})
-
-watch(
-  () => [show.value, menu.value],
-  (newVal, oldVal) => {
-    const wasShown = oldVal ? oldVal[0] : false
-    const [isShown, menuEl] = newVal
-    const isOpening = isShown
-    const isClosing = wasShown && !isShown
-
-    if (!menuEl) return
-    if (isOpening) isBodyAlreadyLocked.value = !!document.body.style.overflow
+function clearHoverTimer() {
+  if (hoverTimer.value) {
+    clearTimeout(hoverTimer.value)
+    hoverTimer.value = null
+  }
+}
 
-    if (isShown) {
-      toggleBodyScroll(menuEl, true)
-      return
-    }
+// Hover opens menu items; hovering Tariffs dismisses an unpinned menu.
+function scheduleOpen(index: number) {
+  clearHoverTimer()
+  hoverTimer.value = setTimeout(() => {
+    if (navs[index]?.menu) openMenu(index)
+    else if (show.value && !locked.value) closeMenu()
+  }, show.value ? SWITCH_DELAY : OPEN_DELAY)
+}
 
-    if (!isClosing || isBodyAlreadyLocked.value) return
+// Overlay closes on click regardless of the pin; on hover only while unpinned.
+function onOverlayHover() {
+  if (!locked.value) closeMenu()
+}
 
-    setTimeout(() => {
-      if (menuEl) toggleBodyScroll(menuEl, false)
-    }, 100)
+// Lock body scroll while the mega-menu is open. `scrollbar-gutter: stable` is set
+// globally, so we don't reserve the gap to avoid a double-compensated page shift.
+// The panel is mounted via v-if, so wait a tick for the ref on open.
+watch(show, async (open) => {
+  if (open) {
+    await nextTick()
+    if (menu.value) disableBodyScroll(menu.value, { reserveScrollBarGap: false })
+  }
+  else if (menu.value) {
+    enableBodyScroll(menu.value)
   }
-)
+})
+
+onBeforeUnmount(() => {
+  clearHoverTimer()
+  if (menu.value) enableBodyScroll(menu.value)
+})
 </script>
 
 <template>
   <div class="relative">
-    <ul>
+    <ul class="flex items-center">
       <li
         v-for="(nav, index) in navs"
         :key="nav.label"
-        class="group inline-block border-r border-[#2C3E501A] px-2 last-of-type:border-none dark:border-[#E3E5E81A]"
-        :data-test-id="nav.data_attribute"
-        @click="lockMenu"
+        class="relative after:absolute after:right-0 after:top-1/2 after:h-6 after:w-px after:-translate-y-1/2 after:bg-gray-300 last:after:hidden dark:after:bg-gray-700"
+        :data-test-id="nav.dataAttribute"
         role="listitem"
       >
-        <div
-          class="relative cursor-pointer font-bold uppercase text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-600"
-          @mouseenter="onMenuMouseEnter(index)"
+        <button
+          type="button"
+          class="group relative cursor-pointer px-3 py-2 font-bold uppercase tracking-tight transition-colors duration-150"
+          :class="isActive(index)
+            ? 'text-blue-700 dark:text-blue-400'
+            : 'text-deepblue-900 hover:text-blue-700 dark:text-gray-200 dark:hover:text-blue-400'"
+          @mouseenter="scheduleOpen(index)"
+          @mouseleave="clearHoverTimer"
           @click="toggleMenu(index)"
-          @mouseleave="onMenuMouseLeave"
         >
           {{ t(nav.label) }}
-        </div>
+          <span
+            class="absolute inset-x-3 -bottom-0.5 h-0.5 origin-left rounded-full bg-blue-600 transition-transform duration-200 dark:bg-blue-400"
+            :class="isActive(index) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
+          />
+        </button>
       </li>
     </ul>
-    <div
-      v-show="show"
-      ref="menu"
-      class="top-[104px] fixed left-0 z-20 h-full w-full"
-    >
-      <div class="h-full w-full">
-        <transition :name="animation">
-          <keep-alive>
-            <component
-              :is="currentMenu"
-              v-show="show"
-              :animation="forward ? 'next' : 'prev'"
-              :index="currentIndex"
-              :url="buildLocalizedUrl(locale, landing, PAGES.contacts)"
-              @outer-click="closeMenu(true)"
-              @mouse-over="closeMenu"
-            />
-          </keep-alive>
-        </transition>
+
+    <!-- One transition drives the whole panel's open/close (appear + disappear). -->
+    <transition name="menu">
+      <div
+        v-if="show"
+        ref="menu"
+        class="fixed inset-x-0 z-20"
+        :style="{ top: `${menuTop}px`, height: `calc(100dvh - ${menuTop}px)` }"
+      >
+        <!-- Full-page dimmed blur backdrop behind the panel. -->
         <div
-          v-show="show"
-          class="absolute left-[-25%] h-full w-[150%] bg-[#E3E5E833] backdrop-blur transition"
-          @click="closeMenu(true)"
-          @mouseover="closeMenu(false)"
+          class="absolute inset-0 bg-gray-900/30 backdrop-blur dark:bg-black/50"
+          @click="closeMenu"
+          @mouseover="onOverlayHover"
         />
+
+        <!-- Panel on top; slides left/right when switching between menu items. -->
+        <transition
+          :name="swapName"
+          mode="out-in"
+        >
+          <component
+            :is="currentMenu"
+            :key="currentIndex"
+            class="relative"
+            :url="buildLocalizedUrl(locale, landing, PAGES.contacts)"
+          />
+        </transition>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
 <style scoped lang="scss">
-$percent: 30%;
-.next-enter-from,
-.next-leave-to {
-  opacity: 0;
-  transform: translateX($percent);
-  position: absolute;
-}
+$ease: cubic-bezier(0.22, 1, 0.36, 1);
+$shift: 24px;
 
-.next-enter-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+// Whole menu: open and close (vertical fade, no horizontal motion).
+.menu-enter-active,
+.menu-leave-active {
+  transition:
+    opacity 0.25s $ease,
+    transform 0.25s $ease;
 }
 
-.next-leave-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+.menu-enter-from,
+.menu-leave-to {
   opacity: 0;
-  transform: translateX(-$percent);
+  transform: translateY(-12px);
 }
 
-// Backwards transition
-
-.prev-enter-from,
-.prev-leave-to {
-  position: absolute;
-
-  opacity: 0;
-  transform: translateX(-$percent);
+// Switching panels: slide toward the direction of travel (out-in, so no overlap).
+.slide-next-enter-active,
+.slide-next-leave-active,
+.slide-prev-enter-active,
+.slide-prev-leave-active,
+.swap-fade-enter-active,
+.swap-fade-leave-active {
+  transition:
+    opacity 0.2s $ease,
+    transform 0.2s $ease;
 }
 
-.prev-enter-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+.slide-next-enter-from {
+  opacity: 0;
+  transform: translateX($shift);
 }
 
-.prev-leave-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+.slide-next-leave-to {
   opacity: 0;
-  transform: translateX($percent);
+  transform: translateX(-$shift);
 }
 
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-  transition: all 0.2s ease-in-out;
+.slide-prev-enter-from {
+  opacity: 0;
+  transform: translateX(-$shift);
 }
 
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(-12px);
+.slide-prev-leave-to {
   opacity: 0;
+  transform: translateX($shift);
 }
 
-.slide-change-enter-active,
-.slide-change-leave-active {
-  transition: all 0.2s ease-in-out;
+// Fresh open (no switch): fade only, so the panel never slides sideways.
+.swap-fade-enter-from,
+.swap-fade-leave-to {
+  opacity: 0;
 }
 
-.slide-change-enter-from,
-.slide-change-leave-to {
-  opacity: 0;
+@media (prefers-reduced-motion: reduce) {
+  .menu-enter-active,
+  .menu-leave-active,
+  .slide-next-enter-active,
+  .slide-next-leave-active,
+  .slide-prev-enter-active,
+  .slide-prev-leave-active,
+  .swap-fade-enter-active,
+  .swap-fade-leave-active {
+    transition: none;
+  }
 }
 </style>

package/components/navigation/header/HeaderUsage.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import Calendar from '#adata-ui/icons/calendar.vue'
+import Gauge from '#adata-ui/icons/gauge.vue'
+
+defineOptions({ name: 'HeaderUsage' })
+
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  maxLimit: 300,
+  daysRemaining: 0,
+})
+
+interface Props {
+  limitRemaining?: number
+  maxLimit?: number
+  daysRemaining?: number
+}
+
+// Bar fill represents the remaining quota: full bar = plenty of requests left.
+const percent = computed(() => {
+  if (props.maxLimit <= 0) return 0
+  const ratio = (props.limitRemaining / props.maxLimit) * 100
+  return Math.min(100, Math.max(0, ratio))
+})
+
+// Animate the fill from 0 on mount and on every value change.
+const displayPercent = ref(0)
+onMounted(() => {
+  displayPercent.value = percent.value
+})
+watch(percent, (value) => {
+  displayPercent.value = value
+})
+
+const isLow = computed(() => percent.value < 20)
+
+const barColorClass = computed(() =>
+  isLow.value
+    ? 'bg-red-500 dark:bg-red-400'
+    : 'bg-blue-600 dark:bg-blue-500',
+)
+
+const valueColorClass = computed(() =>
+  isLow.value ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100',
+)
+</script>
+
+<template>
+  <client-only>
+    <div
+      class="inline-flex items-center gap-2.5"
+      data-test-id="header-usage"
+    >
+      <a-tooltip-v2
+        class="shrink-0 items-center gap-2.5"
+        placement="bottom"
+        arrow
+        :z-index="10001"
+        content-class="py-0.5"
+      >
+        <gauge class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <div class="h-1.5 w-20 rounded-full bg-deepblue-900/30 dark:bg-white/30">
+          <div
+            class="usage-bar h-full rounded-full"
+            :class="barColorClass"
+            :style="{ width: `${displayPercent}%` }"
+          />
+        </div>
+
+        <span
+          class="text-sm tabular-nums leading-none"
+          data-test-id="header-usage-requests"
+        >
+          <span
+            class="font-bold transition-colors duration-300"
+            :class="valueColorClass"
+          >{{ limitRemaining }}</span><span class="font-medium text-gray-600 dark:text-gray-300">/{{ maxLimit }}</span>
+        </span>
+
+        <template #content>
+          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
+            Лимит запросов: {{ limitRemaining }}
+          </span>
+        </template>
+      </a-tooltip-v2>
+
+      <span class="h-4 w-px shrink-0 bg-deepblue-900/15 dark:bg-white/15" />
+
+      <a-tooltip-v2
+        class="shrink-0"
+        placement="bottom"
+        arrow
+        :z-index="10001"
+        content-class="py-0.5"
+      >
+        <div
+          class="flex shrink-0 items-center gap-1.5"
+          data-test-id="header-usage-days"
+        >
+          <calendar class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
+          <span class="text-sm font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
+        </div>
+
+        <template #content>
+          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
+            Остаток дней: {{ daysRemaining }}
+          </span>
+        </template>
+      </a-tooltip-v2>
+    </div>
+  </client-only>
+</template>
+
+<style scoped>
+.usage-bar {
+  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .usage-bar {
+    transition: none;
+  }
+}
+</style>