adata-ui 2.1.40-beta.1 → 2.1.40-beta.10

package/components/modals/ReportBugConfirmModal.vue

@@ -3,28 +3,30 @@ const { t } = useI18n()
 
 const isOpen = defineModel<boolean>({ required: true })
 </script>
+
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
     width="424px"
   >
-    <template #header>
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-ok />
       <p class="heading-02 text-center font-bold">
         {{ t('modals.report_bug.confirmed') }}
       </p>
-    </template>
-    <div class="flex flex-col gap-5 items-center">
-      <a-ill-ok />
-      <p class="text-sm text-center">
+      <p class="body-400 text-center">
         {{ t('modals.report_bug.gratitude') }}
       </p>
-      <a-button
+    </div>
+    <template #footer>
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="isOpen = false"
       >
         {{ t('actions.close') }}
-      </a-button>
-    </div>
-  </a-modal>
+      </a-button-v2>
+    </template>
+  </a-modal-v2>
 </template>

package/components/modals/ReportBugModal.vue

@@ -18,7 +18,7 @@ const env = myLayer.mode
 
 const mask = new Mask({ mask: '# (###) ### ## ##' })
 
-const isOpen = defineModel<boolean>()
+const isOpen = defineModel<boolean>({ default: false })
 const form: any = reactive({
   name: '',
   email: '',
@@ -35,6 +35,7 @@ const scheme = z.object({
 })
 
 const submitted = ref(false)
+const sending = ref(false)
 
 const { validation, getError } = useUIValidation(
   scheme,
@@ -58,6 +59,7 @@ watch(phone, () => {
 async function send() {
   submitted.value = true
   if (validation.value) return
+  sending.value = true
   try {
     await $fetch<any>(`https://users.${env}.kz/api/v1/message/error`, {
       method: 'POST',
@@ -79,86 +81,90 @@ async function send() {
     form.comment = ''
     phone.value = ''
     submitted.value = false
+    sending.value = false
     emit('close')
   }
 }
 </script>
 
 <template>
-  <a-modal v-model="isOpen" data-test-id="report-form-modal">
+  <a-modal-v2 v-model="isOpen" width="424px">
     <template #header>
-      <p class="heading-02 text-center" data-test-id="report-form-title">
+      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100" data-test-id="report-form-title">
         {{ t('modals.report_bug.title') }}
-      </p>
+      </h2>
     </template>
-    <div class="flex flex-col gap-5">
-      <div class="flex flex-col items-center justify-center gap-5">
-        <a-ill-stop-sign class="size-[185px]" />
+
+    <div class="flex flex-col gap-5 px-6 py-4">
+      <div class="flex flex-col items-center justify-center gap-4">
+        <a-ill-stop-sign class="size-[140px]" />
         <slot name="title">
           <p class="label-400 text-center">
             {{ name }}
           </p>
         </slot>
       </div>
-      <div class="flex flex-col gap-2">
-        <a-input-standard
+
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="form.name"
           required
-          :data-test-id="'report-form-name-input'"
           :label="t('modals.report_bug.labels.name')"
           :error="getError('name')"
+          data-test-id="report-form-name-input"
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.email"
           required
-          :data-test-id="'report-form-email-input'"
+          type="email"
           :label="t('modals.report_bug.labels.email')"
           :error="getError('email')"
+          data-test-id="report-form-email-input"
         />
-        <a-input-standard
+        <a-input-v2
           v-model="phone"
-          v-maska
           required
-          data-maska="8 (###) ### ## ##"
+          type="tel"
           clearable
-          :data-test-id="'report-form-phone-input'"
+          mask="8 (###) ### ## ##"
           :label="t('modals.report_bug.labels.phone')"
           :error="getError('phone_number')"
+          data-test-id="report-form-phone-input"
+        />
+        <a-textarea-v2
+          v-model="form.comment"
+          required
+          :rows="4"
+          resize="none"
+          :label="t('modals.report_bug.labels.comment')"
+          :error="getError('comment')"
+          data-test-id="report-form-comment-textarea"
         />
-        <div>
-          <a-textarea
-            v-model="form.comment"
-            required
-            :data-test-id="'report-form-comment-textarea'"
-            :label="t('modals.report_bug.labels.comment')"
-            size="md"
-            :error="getError('comment')"
-            class="min-h-[120px]"
-            :resizeable="false"
-          />
-        </div>
       </div>
     </div>
+
     <template #footer>
-      <div class="flex w-full gap-2">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
-          class="w-full"
+          color="blue"
+          block
           data-test-id="report-form-close-button"
           @click="emit('close')"
         >
           {{ t('actions.close') }}
-        </a-button>
-        <a-button
-          class="w-full"
+        </a-button-v2>
+        <a-button-v2
+          block
+          :loading="sending"
           data-test-id="report-form-submit-button"
           @click="send"
         >
           {{ t('actions.send') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped></style>

package/components/modals/Resend.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { useUrls } from '#adata-ui/composables/useUrls'
 
 const emit = defineEmits<{
@@ -17,33 +16,33 @@ function runTimer() {
   const intervalId = setInterval(() => {
     if (timer.value <= 0) {
       isResend.value = true
-      clearInterval(intervalId);
-      return;
+      clearInterval(intervalId)
+      return
     }
-    timer.value--;
-  }, 1000);
+    timer.value--
+  }, 1000)
 }
 
 onMounted(() => resend())
 
-const resend = () => {
+function resend() {
   isResend.value = false
   runTimer()
   emit('resend')
 }
-const goToMain = () => {
+function goToMain() {
   if (route.query.url) {
     document.location.replace(route.query.url)
-  } else {
+  }
+  else {
     document.location.replace(landing)
   }
   emit('close')
-
 }
 </script>
 
 <template>
-  <div class="flex flex-col justify-center items-center gap-5">
+  <div class="flex flex-col items-center justify-center gap-5">
     <p class="heading-02">
       {{ $t('login.modal.title') }}
     </p>

package/components/modals/SubmitApplicationModal.vue

@@ -57,65 +57,68 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="submit-application"
-    :prevent-close="true"
+    width="424px"
+    persistent
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center heading-02">
+    <div class="flex flex-col gap-5 px-6 py-4">
+      <p class="heading-02 text-center">
         {{ t('modals.submit_application_modal.title') }}
       </p>
       <a-ill-mail class="w-full" />
-      <div class="flex flex-col gap-2">
-        <a-input-standard
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="form.name"
+          required
           :label="t('modals.submit_application_modal.labels.name')"
           :error="getError('name')"
-          required
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.email"
+          required
+          type="email"
           :label="t('modals.submit_application_modal.labels.email')"
           :error="getError('email')"
-          required
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.phone"
-          v-maska
+          required
+          type="tel"
+          clearable
+          mask="8 (###) ###-##-##"
           :label="t('modals.submit_application_modal.labels.phone')"
-          data-maska="8 (###) ###-##-##"
           :error="getError('phone')"
-          clearable
-          required
         />
-        <a-textarea
+        <a-textarea-v2
           v-model="form.comment"
+          required
+          :rows="4"
+          resize="none"
           :label="t('modals.submit_application_modal.labels.comment')"
           :error="getError('comment')"
-          resizeable="none"
-          required
         />
       </div>
     </div>
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('reuse.close') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           block
           @click="send"
         >
           {{ t('reuse.send') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
@@ -40,17 +41,11 @@ async function loginUser() {
     },
   })
   const { data: cookiesData } = await response.json()
-  if (cookiesData) {
+  if (cookiesData?.access_token) {
     const { access_token, expire_in } = cookiesData
-    const hostname = location.hostname.split('.').reverse()
     useCookie('autoLogout').value = true
 
-    useCookie('accessToken', {
-      maxAge: expire_in,
-      domain: `.${hostname[1]}.${hostname[0]}`,
-      path: '/',
-      secure: true,
-    }).value = access_token
+    await writeAccessTokenCookie(access_token, expire_in)
   }
 }
 

package/components/modals/id/IdLoginModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
 import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
 import * as z from 'zod'
 import { useUrls } from '#adata-ui/composables/useUrls'
@@ -127,17 +128,11 @@ async function submit() {
           },
         })
         const { data: cookiesData } = await response.json()
-        if (cookiesData) {
+        if (cookiesData?.access_token) {
           const { access_token, expire_in } = cookiesData
-          const hostname = location.hostname.split('.').reverse()
           useCookie('autoLogout').value = true
 
-          useCookie('accessToken', {
-            maxAge: expire_in,
-            domain: COOKIE_DOMAIN,
-            path: '/',
-            secure: true,
-          }).value = access_token
+          await writeAccessTokenCookie(access_token, expire_in)
         }
         $toast.success(t('reuse.successfully'))
 

package/components/modals/id/IdModals.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import IdAutoLogoutModal from '#adata-ui/components/modals/id/IdAutoLogoutModal.vue'
 import IdConfirmAccountOtpModal from '#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'
 import IdConfirmSuccessfulModal from '#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'
 import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'
@@ -9,7 +9,8 @@ import IdRecoveryModal from '#adata-ui/components/modals/id/IdRecoveryModal.vue'
 import IdRegistrationModal from '#adata-ui/components/modals/id/IdRegistrationModal.vue'
 import IdResetPasswordOtpModal from '#adata-ui/components/modals/id/IdResetPasswordOtpModal.vue'
 import IdTwoFactorModal from '#adata-ui/components/modals/id/IdTwoFactorModal.vue'
-import IdAutoLogoutModal from '#adata-ui/components/modals/id/IdAutoLogoutModal.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
 
 const emit = defineEmits<{
   (e: 'closed', value: boolean): void
@@ -35,6 +36,10 @@ const authApiURL = commonAuth.authApiURL
 const accessToken = useCookie('accessToken')
 const isAuthenticated = computed(() => !!accessToken.value)
 
+// one-shot флаг: обмен по auth-сессии перезагружает страницу максимум один раз,
+// иначе нечитаемая кука accessToken зацикливает reload
+const AUTH_RELOAD_FLAG = 'auth-exchange-reloaded'
+
 onMounted(async () => {
   const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
     method: 'GET',
@@ -46,17 +51,25 @@ onMounted(async () => {
   const { data: cookiesData } = await response.json()
   if (cookiesData?.access_token && !accessToken.value) {
     const { access_token, expire_in } = cookiesData
-    const hostname = location.hostname.split('.').reverse()
     useCookie('autoLogout').value = true
 
-    useCookie('accessToken', {
-      maxAge: expire_in,
-      domain: `.${hostname[1]}.${hostname[0]}`,
-      path: '/',
-      secure: true,
-    }).value = access_token
+    const persisted = await writeAccessTokenCookie(access_token, expire_in)
 
-    window.location.reload()
+    if (persisted && !sessionStorage.getItem(AUTH_RELOAD_FLAG)) {
+      sessionStorage.setItem(AUTH_RELOAD_FLAG, '1')
+      window.location.reload()
+    }
+    else {
+      sessionStorage.removeItem(AUTH_RELOAD_FLAG)
+      console.warn(
+        persisted
+          ? '[auth] accessToken cookie is erased between page loads (SSR resetTokens?), reload skipped to avoid a loop'
+          : '[auth] accessToken cookie was not persisted (domain/secure/maxAge rejected by browser), reload skipped',
+      )
+    }
+  }
+  else {
+    sessionStorage.removeItem(AUTH_RELOAD_FLAG)
   }
 })
 

package/components/modals/id/IdTwoFactorModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
 import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { $toast } = useNuxtApp()
@@ -54,15 +55,9 @@ async function onConfirm() {
     const { data: cookiesData } = await response.json()
     if (cookiesData?.access_token) {
       const { access_token, expire_in } = cookiesData
-      const hostname = location.hostname.split('.').reverse()
       useCookie('autoLogout').value = true
 
-      useCookie('accessToken', {
-        maxAge: expire_in,
-        domain: `.${hostname[1]}.${hostname[0]}`,
-        path: '/',
-        secure: true,
-      }).value = access_token
+      await writeAccessTokenCookie(access_token, expire_in)
     }
     $toast.success(t('login.successfully'))
     twoFactorModal.value = false

package/components/navigation/header/AHeader.vue

@@ -109,7 +109,7 @@ onMounted(() => {
     <system-notification />
     <header
       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"
+      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 -->
@@ -135,18 +135,18 @@ onMounted(() => {
           </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-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 />
-              <span class="body-400">Найти</span>
+              <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>

package/components/navigation/header/HeaderLink.vue

@@ -22,18 +22,18 @@ interface HeaderNav {
 
 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.contacts', dataAttribute: 'header-contacts-button' },
   { label: 'header.navs.tariffs', dataAttribute: 'header-tariffs-button' },
 ]
 
-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 OPEN_DELAY = 500
+const SWITCH_DELAY = 80
 
 const menu = ref<HTMLElement | null>(null)
 const show = ref(false)
-const locked = ref(false) // a click pins the menu; hover can no longer close it
+const locked = ref(false)
 const currentIndex = ref(0)
-const swapName = ref('swap-fade') // panel transition: directional slide on switch, fade on fresh open
+const swapName = ref('swap-fade')
 const hoverTimer = ref<ReturnType<typeof setTimeout> | null>(null)
 
 const currentMenu = computed(() => navs[currentIndex.value]?.menu ?? null)
@@ -42,8 +42,6 @@ function isActive(index: number) {
   return show.value && currentIndex.value === index
 }
 
-// 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')
@@ -57,6 +55,10 @@ function closeMenu() {
   locked.value = false
 }
 
+function goToContacts() {
+  navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.contacts, target: '_blank' })
+}
+
 function goToTariffs() {
   const host = useRequestURL().hostname
   const codeMap: Record<string, string> = {
@@ -73,11 +75,15 @@ function goToTariffs() {
   navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.tariffs + code, target: '_blank' })
 }
 
-// Click pins the menu open; items without a menu (Tariffs) navigate instead.
 function toggleMenu(index: number) {
   const nav = navs[index]
   if (!nav?.menu) {
-    goToTariffs()
+    if (index === 1) {
+      goToContacts()
+    }
+    else if (index === 2) {
+      goToTariffs()
+    }
     return
   }
   if (show.value && currentIndex.value === index) {
@@ -95,7 +101,6 @@ function clearHoverTimer() {
   }
 }
 
-// Hover opens menu items; hovering Tariffs dismisses an unpinned menu.
 function scheduleOpen(index: number) {
   clearHoverTimer()
   hoverTimer.value = setTimeout(() => {
@@ -104,14 +109,10 @@ function scheduleOpen(index: number) {
   }, show.value ? SWITCH_DELAY : OPEN_DELAY)
 }
 
-// Overlay closes on click regardless of the pin; on hover only while unpinned.
 function onOverlayHover() {
   if (!locked.value) closeMenu()
 }
 
-// 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()
@@ -157,7 +158,6 @@ onBeforeUnmount(() => {
       </li>
     </ul>
 
-    <!-- One transition drives the whole panel's open/close (appear + disappear). -->
     <transition name="menu">
       <div
         v-if="show"
@@ -165,14 +165,12 @@ onBeforeUnmount(() => {
         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
           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"
@@ -181,7 +179,6 @@ onBeforeUnmount(() => {
             :is="currentMenu"
             :key="currentIndex"
             class="relative"
-            :url="buildLocalizedUrl(locale, landing, PAGES.contacts)"
           />
         </transition>
       </div>
@@ -193,7 +190,6 @@ onBeforeUnmount(() => {
 $ease: cubic-bezier(0.22, 1, 0.36, 1);
 $shift: 24px;
 
-// Whole menu: open and close (vertical fade, no horizontal motion).
 .menu-enter-active,
 .menu-leave-active {
   transition:
@@ -207,7 +203,6 @@ $shift: 24px;
   transform: translateY(-12px);
 }
 
-// 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,
@@ -239,7 +234,6 @@ $shift: 24px;
   transform: translateX($shift);
 }
 
-// Fresh open (no switch): fade only, so the panel never slides sideways.
 .swap-fade-enter-from,
 .swap-fade-leave-to {
   opacity: 0;