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

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
 }

package/components/navigation/footer/AFooter.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
 import AdataLogo from '#adata-ui/icons/adata-logo.vue'
 import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
-import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
+import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
 import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
 import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
-import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
 import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
-import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
 import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
 import { AIconExpandWindow, AIconLocation, AIconMail, AIconPhone } from '#components'
-import { useUrls } from '#adata-ui/composables/useUrls'
 
 const year = new Date().getFullYear()
 const { t, locale } = useI18n()
@@ -20,33 +20,33 @@ const socialMedia = [
   {
     icon: LinkedinIcon,
     link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
-    name: 'Linkedin'
+    name: 'Linkedin',
   },
   {
     icon: YouTubeIcon,
     link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
-    name: 'YouTube'
+    name: 'YouTube',
   },
   {
     icon: InstagramIcon,
     link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
-    name: 'Instagram'
+    name: 'Instagram',
   },
   {
     icon: TelegramIcon,
     link: 'https://t.me/adatakz_official',
-    name: 'Telegram'
+    name: 'Telegram',
   },
   {
     icon: FaceBookIcon,
     link: 'https://www.facebook.com/adata.kz',
-    name: 'Facebook'
+    name: 'Facebook',
   },
   {
     icon: TikTokIcon,
     link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
-    name: 'Tiktok'
-  }
+    name: 'Tiktok',
+  },
 ]
 
 const mainLinks = computed(() => ({
@@ -74,27 +74,27 @@ const mainLinks = computed(() => ({
         {
           title: t('footer.zakupki.title'),
           link: urls.zakupki + PAGES.tender.main,
-          isNew: true
-        }
+          isNew: true,
+        },
       ],
       [
         {
           title: t('footer.compliance.title'),
           link: buildLocalizedUrl(locale.value, urls.compliance, PAGES.compliance.l),
-          isNew: true
+          isNew: true,
         },
         {
           title: t('header.products.edo.label'),
           link: urls.edo_docs,
-          isNew: true
+          isNew: true,
         },
         {
           title: t('footer.fea.title'),
           link: buildLocalizedUrl(locale.value, urls.tnved, PAGES.fea.main),
-          isNew: true
+          isNew: true,
         },
-      ]
-    ]
+      ],
+    ],
   },
   useful: {
     title: t('footer.useful'),
@@ -123,11 +123,11 @@ const mainLinks = computed(() => ({
         },
         {
           title: t('footer.info.onlineServices'),
-          link: buildLocalizedUrl(locale.value, urls.pk, PAGES.services + '/taxpayer'),
+          link: buildLocalizedUrl(locale.value, urls.pk, `${PAGES.services}/taxpayer`),
         },
-      ]
-    ]
-  }
+      ],
+    ],
+  },
 }))
 
 const contactLinks = computed(() => ({
@@ -161,16 +161,15 @@ const contactLinks = computed(() => ({
     },
   ],
 }))
-
 </script>
 
 <template>
   <footer
     id="footer"
-    class="bg-deepblue-900 dark:bg-gray-900 py-4 lg:py-5 rounded-t-3xl"
+    class="rounded-t-2xl bg-deepblue-900 py-4 dark:bg-gray-900 lg:py-5"
   >
-    <div class="a-container mobile-padding py-5 text-white flex flex-col lg:flex-row justify-between gap-8">
-      <div class="flex flex-col gap-8 justify-between">
+    <div class="a-container mobile-padding flex flex-col justify-between gap-8 py-5 text-white lg:flex-row">
+      <div class="flex flex-col justify-between gap-8">
         <div class="flex flex-col gap-4">
           <adata-logo
             filled
@@ -178,11 +177,11 @@ const contactLinks = computed(() => ({
             class="shrink-0"
           />
 
-          <p class="text-sm">
+          <p class="text-body-md">
             {{ t('footer.subtitle') }}
           </p>
 
-          <div class="hidden lg:flex gap-8">
+          <div class="hidden gap-8 lg:flex">
             <nuxt-link
               v-for="(social, idx) in socialMedia"
               :key="idx"
@@ -201,13 +200,13 @@ const contactLinks = computed(() => ({
           </div>
         </div>
 
-        <p class="hidden lg:block text-[10px]">
+        <p class="hidden text-body-sm lg:block">
           {{ year }} © {{ t('footer.LLP') }} "Alldata"
         </p>
       </div>
 
-      <div class="flex gap-6 lg:gap-[75px] flex-col lg:flex-row">
-        <div class="flex gap-[18px] lg:gap-[75px] flex-col lg:flex-row">
+      <div class="flex flex-col gap-6 lg:flex-row lg:gap-[75px]">
+        <div class="flex flex-col gap-[18px] lg:flex-row lg:gap-[75px]">
           <div
             v-for="(item, idx) in mainLinks"
             :key="idx"
@@ -219,10 +218,10 @@ const contactLinks = computed(() => ({
             />
           </div>
         </div>
-        <!--noindex-->
-        <div class="flex flex-col gap-2 items-start" data-nosnippet>
+        <!-- noindex -->
+        <div class="flex flex-col items-start gap-2" data-nosnippet>
           <nuxt-link
-            class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
+            class="cursor-pointer border-b-[0.5px] border-white pb-3 pr-4 text-body-md-strong"
             :to="contactLinks.link?.replace(/\/$/, '')"
           >
             {{ contactLinks.title }}
@@ -232,10 +231,10 @@ const contactLinks = computed(() => ({
             <div
               v-for="(link, idx) in contactLinks.items"
               :key="idx"
-              class="flex gap-2 items-center"
+              class="flex items-center gap-2"
             >
               <nuxt-link
-                class="text-xs font-medium flex gap-2 items-center cursor-pointer"
+                class="flex cursor-pointer items-center gap-2 text-body-sm-medium"
                 :class="link.class"
                 :to="link.link?.replace(/\/$/, '')"
               >
@@ -256,10 +255,10 @@ const contactLinks = computed(() => ({
             </div>
           </div>
         </div>
-        <!--/noindex-->
+        <!-- /noindex -->
       </div>
 
-      <div class="lg:hidden flex gap-8 flex-wrap">
+      <div class="flex flex-wrap gap-8 lg:hidden">
         <nuxt-link
           v-for="(social, idx) in socialMedia"
           :key="idx"
@@ -276,7 +275,7 @@ const contactLinks = computed(() => ({
         </nuxt-link>
       </div>
 
-      <p class="lg:hidden text-[10px]">
+      <p class="text-body-sm lg:hidden">
         {{ year }} © {{ t('footer.LLP') }} "Alldata"
       </p>
     </div>

package/components/navigation/footer/ui/a-footer-accordion.vue

@@ -18,7 +18,7 @@ const isDesktop = useMediaQuery('(max-width: 1024px)')
 
 const open = ref(false)
 function toFinalValues(el: HTMLDivElement) {
-  el.style.height = el.scrollHeight + 'px'
+  el.style.height = `${el.scrollHeight}px`
   el.style.opacity = '1'
 }
 
@@ -37,17 +37,17 @@ const filterCheck = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 items-start">
-    <div class="flex gap-2 justify-between w-full">
+  <div class="flex flex-col items-start gap-2">
+    <div class="flex w-full justify-between gap-2">
       <nuxt-link
-        class="text-sm font-semibold lg:pb-3 lg:pr-4 lg:border-b-[0.5px] lg:border-white cursor-default"
+        class="cursor-default text-body-md-strong lg:border-b-[0.5px] lg:border-white lg:pb-3 lg:pr-4"
         :class="{ 'cursor-pointer': link }"
         :to="link?.replace(/\/$/, '')"
       >
         {{ label }}
       </nuxt-link>
 
-      <div class="transition-all lg:hidden cursor-pointer">
+      <div class="cursor-pointer transition-all lg:hidden">
         <a-icon-chevron-down
           v-if="content.length"
           filled
@@ -67,7 +67,7 @@ const filterCheck = computed(() => {
     >
       <div
         v-if="filterCheck"
-        class="flex gap-3 lg:gap-6 flex-col lg:flex-row"
+        class="flex flex-col gap-3 lg:flex-row lg:gap-6"
       >
         <div
           v-for="(subItem, subIdx) in content"
@@ -77,10 +77,10 @@ const filterCheck = computed(() => {
           <div
             v-for="(link, idx) in subItem"
             :key="idx"
-            class="flex gap-2 items-center"
+            class="flex items-center gap-2"
           >
             <nuxt-link
-              class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
+              class="flex cursor-pointer items-center gap-2 text-body-sm lg:font-medium"
               :to="link.link?.replace(/\/$/, '')"
             >
               {{ link.title }}
@@ -88,7 +88,7 @@ const filterCheck = computed(() => {
 
             <div
               v-if="link.isNew"
-              class="text-[9px] font-bold px-1 py-[2px] rounded-sm bg-white/20"
+              class="rounded-xs bg-white/20 px-1 py-[2px] text-body-sm font-bold"
             >
               NEW
             </div>

package/components/navigation/header/AHeader.vue

@@ -46,7 +46,7 @@ interface Props {
   oldVersion?: string
 }
 
-const { locale } = useI18n()
+const { locale, t } = useI18n()
 
 useCurrentModule().value = props.module
 const { myLayer }: any = useAppConfig()
@@ -56,8 +56,6 @@ 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)
 
@@ -119,19 +117,15 @@ onMounted(() => {
         >
           <div
             v-if="mobileHeaderType === 'default'"
-            class="flex justify-center"
+            class="text-deepblue dark:text-[#E3E5E8]"
+            @click="goToAnotherModule"
           >
-            <div
-              class="text-deepblue dark:text-[#E3E5E8]"
-              @click="goToAnotherModule"
-            >
-              <span class="visually-hidden"> Сервисы Adata.kz</span>
+            <span class="visually-hidden"> Сервисы Adata.kz</span>
 
-              <adata-logo
-                :font-controlled="false"
-                filled
-              />
-            </div>
+            <adata-logo
+              :font-controlled="false"
+              filled
+            />
           </div>
           <div
             v-else-if="mobileHeaderType === 'search'"
@@ -142,18 +136,18 @@ onMounted(() => {
               @click="goToAnotherModule"
             />
             <button
-              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"
+              class="flex w-full items-center gap-2 rounded-full border border-gray-300/50 bg-white/30 px-4 py-1.5 backdrop-blur-sm dark:border-gray-600/50 dark:bg-white/5 dark:text-gray-300"
               @click="$emit('search')"
             >
               <a-icon-search class="text-gray-400 dark:text-gray-500" />
-              <span class="body-400 text-gray-500 dark:text-gray-400">Найти</span>
+              <span class="text-body-md text-gray-500 dark:text-gray-400">{{ t('header.search') }}</span>
             </button>
           </div>
         </section>
-        <div class="lg:hidden">
+        <div class="flex items-center gap-1 lg:hidden">
+          <a-color-mode />
           <lang-switcher
             v-if="langIsOn || module === 'fea'"
-            class="lg:hidden"
             is-mobile
           />
         </div>
@@ -203,7 +197,7 @@ onMounted(() => {
             <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="hidden h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-body-md-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'"