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

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: '',
@@ -28,13 +28,13 @@ const form: any = reactive({
 const phone = ref(form.phone_number)
 
 const scheme = z.object({
-  name: z.string().nonempty(t('modals.report_bug.validation.required')),
   email: z.string().nonempty(t('modals.report_bug.validation.required')).email(t('modals.submit_application_modal.rules.email')),
   phone_number: z.string().nonempty(t('modals.report_bug.validation.required')).min(17, t('modals.report_bug.validation.phone', { n: 10 })),
   comment: z.string().nonempty(t('modals.report_bug.validation.required')),
 })
 
 const submitted = ref(false)
+const sending = ref(false)
 
 const { validation, getError } = useUIValidation(
   scheme,
@@ -58,6 +58,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 +80,93 @@ 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"
+    data-test-id="report-form-modal"
+  >
     <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="6"
+          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/IdBanner.vue

@@ -9,15 +9,15 @@ function onRegister() {
 </script>
 
 <template>
-  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
     <div>
-      <p class="mb-2 font-semibold">
+      <p class="mb-2 text-h5">
         {{ t('modals.id.banners.auth.title') }}
       </p>
       <i18n-t
         keypath="modals.id.banners.auth.subtitle"
         tag="p"
-        class="text-sm text-gray-600 dark:text-gray-200"
+        class="text-body-md text-gray-600 dark:text-gray-200"
       >
         <template #register>
           <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">

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/IdRecoveryModal.vue

@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
 
 <template>
   <form
-    class="flex flex-col items-stretch gap-5 rounded-lg text-center"
+    class="flex flex-col items-stretch gap-5 rounded-md text-center"
     novalidate
     @submit.prevent="onSubmit"
   >

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/bottom-navigation/ABottomNavigation.vue

@@ -56,7 +56,7 @@ const profile: string = 'modals.mobile_navigation.type_profile'
 </script>
 
 <template>
-  <header class="w-full border-t border-[#9DA3AC80] bg-white dark:bg-gray-900">
+  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-deepblue-900/10 bg-gray-50/20 shadow-lg backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30">
     <div class="grid w-full grid-cols-3 justify-items-center">
       <slot>
         <button

package/components/navigation/breadcrumbs/ABreadcrumbs.vue

@@ -1,67 +1,128 @@
 <script lang="ts" setup>
 import type { Crumb } from './types'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
-defineProps<{
+const props = defineProps<{
   links: Crumb[]
   customClasses?: string
+  collapsible?: boolean
 }>()
 
 const { t } = useI18n()
+
+const expanded = ref(false)
+
+type Item = { kind: 'crumb', crumb: Crumb, position: number } | { kind: 'ellipsis' }
+
+const items = computed<Item[]>(() => {
+  const toItem = (crumb: Crumb, position: number): Item => ({ kind: 'crumb', crumb, position })
+
+  if (!props.collapsible || expanded.value || props.links.length <= 3) {
+    return props.links.map(toItem)
+  }
+
+  const last = props.links.length
+  return [
+    toItem(props.links[0], 0),
+    { kind: 'ellipsis' },
+    toItem(props.links[last - 2], last - 2),
+    toItem(props.links[last - 1], last - 1),
+  ]
+})
 </script>
+
 <template>
-  <div class="">
+  <div>
     <ul
-      class="flex gap-1"
+      class="flex items-center gap-2"
       itemscope
       itemtype="https://schema.org/BreadcrumbList"
     >
-      <li
-        v-for="(breadcrumbItem, idx) in links"
-        :key="idx"
-        :class="
-          twMerge(
-            'flex items-center text-xs text-gray-500 underline-offset-2 last-of-type:text-deepblue-900 hover:underline dark:last-of-type:text-gray-200',
-            customClasses
-          )
-        "
-        itemprop="itemListElement"
-        itemscope
-        itemtype="https://schema.org/ListItem"
+      <template
+        v-for="(item, idx) in items"
+        :key="item.kind === 'crumb' ? item.position : 'ellipsis'"
       >
-        <meta
-          itemprop="position"
-          :content="`${idx}`"
-        >
-        <slot
-          name="icon"
-          :breadcrumb-item="breadcrumbItem"
-          :index="idx"
+        <li
+          v-if="item.kind === 'ellipsis'"
+          class="flex items-center gap-2"
         >
-          <span v-if="idx !== 0">
-            <a-icon-chevron-right />
+          <span class="text-[#CAD5E2] dark:text-gray-600">
+            <a-icon-chevron-right class="size-4" />
           </span>
-        </slot>
-        <nuxt-link-locale
-          v-if="breadcrumbItem.to"
-          class="pl-1"
-          :to="breadcrumbItem.to"
-          rel="noopener noreferrer"
-          itemprop="item"
-          :data-test-id="breadcrumbItem?.dataTestId"
-        >
-          <span itemprop="name">
-            {{ t(breadcrumbItem.label) }}
-          </span>
-        </nuxt-link-locale>
-        <span
+          <button
+            type="button"
+            class="flex size-[18px] items-center justify-center rounded text-[#62748E] transition-colors hover:text-deepblue-900 dark:text-gray-400 dark:hover:text-gray-200"
+            :aria-label="t('actions.showMore')"
+            @click="expanded = true"
+          >
+            <a-icon-horizontal-more class="size-4" />
+          </button>
+        </li>
+        <li
           v-else
-          class="pl-1"
-          itemprop="name"
+          :class="
+            twMerge(
+              'flex items-center gap-2 text-body-md text-[#62748E] underline-offset-2 last-of-type:font-semibold last-of-type:text-deepblue-900 hover:underline dark:text-gray-400 dark:last-of-type:text-gray-200',
+              customClasses,
+            )
+          "
+          itemprop="itemListElement"
+          itemscope
+          itemtype="https://schema.org/ListItem"
         >
-          {{ t(breadcrumbItem.label) }}
-        </span>
-      </li>
+          <meta
+            itemprop="position"
+            :content="`${item.position}`"
+          >
+          <slot
+            name="icon"
+            :breadcrumb-item="item.crumb"
+            :index="idx"
+          >
+            <span
+              v-if="idx !== 0"
+              class="text-[#CAD5E2] dark:text-gray-600"
+            >
+              <a-icon-chevron-right class="size-4" />
+            </span>
+          </slot>
+          <nuxt-link-locale
+            v-if="item.crumb.to"
+            class="flex items-center"
+            :to="item.crumb.to"
+            rel="noopener noreferrer"
+            itemprop="item"
+            :data-test-id="item.crumb?.dataTestId"
+            :aria-label="item.crumb.icon ? t(item.crumb.label) : undefined"
+          >
+            <component
+              :is="item.crumb.icon"
+              v-if="item.crumb.icon"
+              class="size-[18px]"
+            />
+            <span
+              itemprop="name"
+              :class="item.crumb.icon ? 'sr-only' : ''"
+            >
+              {{ t(item.crumb.label) }}
+            </span>
+          </nuxt-link-locale>
+          <span
+            v-else
+            class="flex items-center"
+            itemprop="name"
+          >
+            <component
+              :is="item.crumb.icon"
+              v-if="item.crumb.icon"
+              class="size-[18px]"
+            />
+            <span :class="item.crumb.icon ? 'sr-only' : ''">
+              {{ t(item.crumb.label) }}
+            </span>
+          </span>
+        </li>
+      </template>
     </ul>
   </div>
 </template>

package/components/navigation/breadcrumbs/types.ts

@@ -1,5 +1,8 @@
+import type { Component } from 'vue'
+
 export interface Crumb {
   label: string
   to: string
   dataTestId?: string
+  icon?: Component
 }