adata-ui 2.1.38 → 2.1.40-beta

package/components/features/lang-switcher/lang-switcher.vue

@@ -1,73 +1,153 @@
 <script setup lang="ts">
-import { onClickOutside } from "@vueuse/core";
+import Check from '#adata-ui/icons/check/check.vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+
+type LocaleItem = string | { code: string }
 
 const props = withDefaults(defineProps<{
   isMobile?: boolean
 }>(), {
-  isMobile: false
+  isMobile: false,
 })
 
-const langSwitcher = ref<HTMLDivElement | null>(null)
-
 const switchLocalePath = useSwitchLocalePath()
-const { locale, locales } = useI18n()
-const availableLocales = computed(() => {
-  return (locales.value).filter(i => i.code !== locale.value)
-})
+const { t, locale, locales } = useI18n()
+
+const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
 
+const wrapper = ref<HTMLDivElement | null>(null)
+const reference = ref<HTMLButtonElement | null>(null)
+const floating = ref<HTMLDivElement | null>(null)
 const isOpen = ref(false)
 
-onClickOutside(langSwitcher,() => {
-  isOpen.value = false
+const placement = computed(() => props.isMobile ? 'bottom-end' as const : 'bottom-start' as const)
+
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement,
+  strategy: 'absolute',
+  middleware: computed(() => [
+    offset(6),
+    flip({ fallbackPlacements: props.isMobile ? ['top-end'] : ['top-start'] }),
+    shift({ padding: 8 }),
+  ]),
 })
 
-const { t } = useI18n()
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
 
-const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
+onClickOutside(wrapper, () => {
+  if (isOpen.value) isOpen.value = false
+})
 
-function onClick(loc: any) {
-  if ((loc?.code || loc) === locale.value) return
+function localeCode(loc: LocaleItem): string {
+  return typeof loc === 'string' ? loc : loc.code
+}
 
+function onSelect(loc: LocaleItem) {
   isOpen.value = false
-  window.location.assign(switchLocalePath(loc?.code || loc))
+  const code = localeCode(loc)
+  if (code === locale.value) return
+  window.location.assign(switchLocalePath(code))
 }
 </script>
 
 <template>
-  <div
-    ref="langSwitcher"
-    class="relative"
-  >
+  <div ref="wrapper" class="relative">
     <button
-      class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
-      @click="isOpen = true"
-      aria-hidden="true"
+      ref="reference"
+      type="button"
+      class="inline-flex size-8 items-center justify-center rounded-xl text-xs font-semibold text-gray-900 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:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      :class="[
+        isOpen
+          ? 'bg-blue-50 text-blue-700 ring-2 ring-blue-500/20 dark:bg-blue-900/40 dark:text-blue-300'
+          : '',
+      ]"
       :data-test-id="`header-switch-language-button${testIdSuffix}`"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="isOpen = !isOpen"
     >
       {{ t(`lang.${locale}.short`) }}
     </button>
-    <div
-      v-show="isOpen"
-      :class="['absolute z-20 bg-white shadow rounded-md p-2 right-0 lg:right-auto lg:left-0 left-auto flex flex-col dark:bg-gray-900']"
+
+    <transition
+      enter-active-class="lang-switcher__dropdown-enter-active"
+      enter-from-class="lang-switcher__dropdown-enter-from"
+      enter-to-class="lang-switcher__dropdown-enter-to"
+      leave-active-class="lang-switcher__dropdown-leave-active"
+      leave-from-class="lang-switcher__dropdown-leave-from"
+      leave-to-class="lang-switcher__dropdown-leave-to"
     >
-      <nuxt-link
-        v-for="loc in locales"
-        :data-test-id="`header-switch-${loc?.code}-language-button${testIdSuffix}`"
-        :class="[
-          'text-sm cursor-pointer px-4 py-2.5 flex justify-between',
-          {'text-primary bg-deepblue-500/5': locale === loc.code}
-        ]"
-        :to="switchLocalePath(loc?.code || loc)"
-        @click.prevent="onClick(loc)"
+      <div
+        v-if="isOpen"
+        ref="floating"
+        class="z-[10000] w-fit rounded-xl border border-gray-200 bg-white shadow-lg shadow-gray-900/10 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
       >
-        {{ t(`lang.${loc?.code || loc}.long`) }}
-      </nuxt-link>
-    </div>
+        <ul class="flex flex-col gap-1 p-1.5" role="listbox">
+          <li v-for="loc in locales" :key="localeCode(loc)" role="option" :aria-selected="localeCode(loc) === locale">
+            <nuxt-link
+              :data-test-id="`header-switch-${localeCode(loc)}-language-button${testIdSuffix}`"
+              :to="switchLocalePath(localeCode(loc))"
+              class="flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm transition-colors duration-100"
+              :class="[
+                localeCode(loc) === locale
+                  ? 'bg-blue-50 font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                  : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60',
+              ]"
+              @click.prevent="onSelect(loc)"
+            >
+              <span>{{ t(`lang.${localeCode(loc)}.long`) }}</span>
+              <check
+                v-if="localeCode(loc) === locale"
+                class="size-4 shrink-0 text-blue-600 dark:text-blue-400"
+              />
+            </nuxt-link>
+          </li>
+        </ul>
+      </div>
+    </transition>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.shadow {
-  box-shadow: 0 1px 8px 0 #8B929C4D;
+<style scoped>
+.lang-switcher__dropdown-enter-active,
+.lang-switcher__dropdown-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.lang-switcher__dropdown-enter-from,
+.lang-switcher__dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.lang-switcher__dropdown-enter-to,
+.lang-switcher__dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lang-switcher__dropdown-enter-active,
+  .lang-switcher__dropdown-leave-active {
+    transition: none;
+  }
 }
 </style>

package/components/features//321/201hange-version/AChangeVersion.vue

@@ -10,7 +10,7 @@ const { t } = useI18n()
   <nuxt-link
     :to="url"
     target="_blank"
-    class="flex cursor-pointer items-center justify-center gap-1 rounded-md bg-blue-700/10 px-3 py-2 text-blue-700"
+    class="flex cursor-pointer items-center justify-center gap-1 rounded-md bg-blue-700/10 px-3 py-2 text-blue-700 transition-colors duration-150 hover:bg-blue-700/15 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
   >
     <span class="body-400">{{ t('header.oldVersion') }}</span>
     <a-icon-arrow-bottom-left-on-square class="rotate-180" />

package/components/forms/README.md

@@ -1 +1 @@
-# inputs
+# inputs

package/components/navigation/README.md

@@ -1 +1 @@
-# breadcrumb, tabs
+# breadcrumb, tabs

package/components/navigation/footer/AFooter.vue

@@ -80,7 +80,7 @@ const mainLinks = computed(() => ({
       [
         {
           title: t('footer.compliance.title'),
-          link: urls.compliance + PAGES.compliance.l,
+          link: buildLocalizedUrl(locale.value, urls.compliance, PAGES.compliance.l),
           isNew: true
         },
         {

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>