adata-ui 2.1.0 → 2.1.2

package/components/navigation/bottom-navigation/ABottomNavigation.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts" generic="T extends NavigationItem">
+import Avatar from '#adata-ui/icons/avatar.vue'
+import IconLogout from '#adata-ui/icons/logout.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
 
-import Avatar from "#adata-ui/icons/avatar.vue";
-import IconLogout from "#adata-ui/icons/logout.vue";
-
-const {t} = useI18n()
-const appConfig = useAppConfig()
-const loginUrl = appConfig.myLayer.loginUrl
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  balance: 0,
+  rate: 'Базовый',
+  showLogIn: true,
+})
+const emit = defineEmits(['update:modelValue', 'logout'])
+const { t } = useI18n()
+const { myLayer } = useAppConfig()
+const urls = useUrls()
 
 interface Props {
   grow?: boolean
@@ -22,34 +30,31 @@ interface Props {
   showLogIn?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  limitRemaining: 0,
-  daysRemaining: 0,
-  balance: 0,
-  rate: 'Базовый',
-  showLogIn: true
-})
-const emit = defineEmits(['update:modelValue', 'logout'])
+const { loginModal } = useIdModals()
 
-const goAuth = () => {
-  if (window) {
-    let fullPath = encodeURIComponent(window.location.toString())
-    if (fullPath.includes('basic-info')) {
-      fullPath = fullPath.replace('%2Fcounterparty/main', '').replace('%2Fbasic-info', '')
+function goAuth() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty/main', '').replace('%2Fbasic-info', '')
+      }
+      window.location.href = `${urls.login}?url=${fullPath}`
     }
-    window.location.href = `${loginUrl}?url=${fullPath}`
+  }
+  else {
+    loginModal.value = true
   }
 }
-const onClick = (value: string) => {
+function onClick(value: string) {
   if (value === props.modelValue) value = ''
   emit('update:modelValue', value)
 }
 
-const login: string = 'header.login';
-const profile: string = 'modals.mobile_navigation.type_profile';
-
-
+const login: string = 'header.login'
+const profile: string = 'modals.mobile_navigation.type_profile'
 </script>
+
 <template>
   <header class="w-full border-t border-[#9DA3AC80] bg-white dark:bg-gray-900">
     <div class="grid w-full grid-cols-3 justify-items-center">
@@ -65,7 +70,7 @@ const profile: string = 'modals.mobile_navigation.type_profile';
             <template v-if="Object.prototype.hasOwnProperty.call(item, 'icon')">
               <component
                 :is="item.icon"
-                class="h-6 w-6"
+                class="size-6"
               />
             </template>
             {{ t(item.label) }}
@@ -73,12 +78,12 @@ const profile: string = 'modals.mobile_navigation.type_profile';
         </button>
         <button
           v-show="isAuthenticated"
-          @click="onClick('profile')"
           class="h-16 w-auto min-w-16 max-w-[168px]"
+          @click="onClick('profile')"
         >
           <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
             <avatar
-              class="bg-gray outline-blue h-6 w-6 rounded-full"
+              class="bg-gray outline-blue size-6 rounded-full"
             />
             {{ t(profile) }}
           </span>
@@ -89,7 +94,7 @@ const profile: string = 'modals.mobile_navigation.type_profile';
           @click="goAuth"
         >
           <span class="flex flex-col items-center justify-center text-[10px] leading-5 lg:text-sm">
-            <icon-logout class="lg:h-6 lg:w-6" />
+            <icon-logout class="lg:size-6" />
             {{ t(login) }}
           </span>
         </button>

package/components/navigation/footer/AFooter.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 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 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 LinkedinIcon from '#adata-ui/icons/linkedin.vue'
-import FooterAccordion from './ui/footer-acccordion.vue'
-import { PAGES } from '#adata-ui/shared/constans/pages'
+import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
 import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import { useFooterInfoLinks, useFooterNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { AIconExpandWindow, AIconLocation, AIconMail, AIconPhone } from '#components'
+import { useUrls } from '#adata-ui/composables/useUrls'
 
-const { myLayer }: any = useAppConfig()
-const { t, locale } = useI18n()
 const year = new Date().getFullYear()
+const { t, locale } = useI18n()
+const urls = useUrls()
 
 const socialMedia = [
   {
@@ -48,35 +49,212 @@ const socialMedia = [
   }
 ]
 
-const info = useFooterInfoLinks()
+const mainLinks = computed(() => ({
+  services: {
+    title: t('footer.services'),
+    link: buildLocalizedUrl(locale.value, urls.landing, PAGES.allServices),
+    items: [
+      [
+        {
+          title: t('footer.counterparties.title'),
+          link: buildLocalizedUrl(locale.value, urls.pk, ''),
+        },
+        {
+          title: t('footer.fines.title'),
+          link: buildLocalizedUrl(locale.value, urls.avto, PAGES.fines.main),
+        },
+        {
+          title: t('footer.work.title'),
+          link: urls.work + PAGES.work.vacancy,
+        },
+        {
+          title: t('footer.analytics.title'),
+          link: buildLocalizedUrl(locale.value, urls.analyticsNew, PAGES.analytics.main),
+        },
+        {
+          title: t('footer.tenders.title'),
+          link: urls.tender + PAGES.tender.main,
+        }
+      ],
+      [
+        {
+          title: t('footer.compliance.title'),
+          link: urls.compliance + PAGES.compliance.l,
+          isNew: true
+        },
+        {
+          title: t('header.products.edo.label'),
+          link: urls.edo + PAGES.edo.l,
+          isNew: true
+        },
+        {
+          title: t('footer.fea.title'),
+          link: buildLocalizedUrl(locale.value, urls.tnved, PAGES.fea.main),
+          isNew: true
+        },
+      ]
+    ]
+  },
+  useful: {
+    title: t('footer.useful'),
+    link: buildLocalizedUrl(locale.value, urls.landing, PAGES.usefulMain),
+    items: [
+      [
+        {
+          title: t('footer.info.api'),
+          link: buildLocalizedUrl(locale.value, urls.landing, PAGES.apiDescription),
+        },
+        {
+          title: t('footer.info.userAgreement'),
+          link: buildLocalizedUrl(locale.value, urls.landing, PAGES.userAgreement),
+        },
+        {
+          title: t('footer.info.privacyPolicy'),
+          link: buildLocalizedUrl(locale.value, urls.landing, PAGES.privacy),
+        },
+        {
+          title: t('footer.info.vacancy'),
+          link: buildLocalizedUrl(locale.value, urls.landing, PAGES.vacancy),
+        },
+        {
+          title: t('footer.info.counterparty'),
+          link: buildLocalizedUrl(locale.value, urls.pk, PAGES.pk.counterparty),
+        },
+      ]
+    ]
+  }
+}))
+
+const contactLinks = computed(() => ({
+  title: t('footer.contacts.title'),
+  link: buildLocalizedUrl(locale.value, urls.landing, PAGES.contacts),
+  items: [
+    {
+      title: t('footer.contacts.address'),
+      link: 'https://go.2gis.com/30j2f',
+      startIcon: AIconLocation,
+      endIcon: null,
+    },
+    {
+      title: '+7 (747) 120 34 67',
+      link: 'tel:+77471203467',
+      startIcon: AIconPhone,
+      endIcon: null,
+    },
+    {
+      title: 'info@adata.kz',
+      link: 'mailto:info@adata.kz',
+      startIcon: AIconMail,
+      endIcon: null,
+    },
+    {
+      title: t('footer.contacts.goToChat'),
+      link: 'https://api.whatsapp.com/send?phone=77712289041',
+      startIcon: null,
+      endIcon: AIconExpandWindow,
+      class: 'font-bold',
+    },
+  ],
+}))
 
-const links = useFooterNavigationLinks()
 </script>
 
 <template>
-  <div
+  <footer
     id="footer"
-    class="bg-deepblue-900 dark:bg-gray-900 lg:pt-10"
+    class="bg-deepblue-900 dark:bg-gray-900 py-4 lg:py-5 rounded-t-3xl"
   >
-    <div class="a-container mobile-padding py-5 text-white">
-      <adata-logo
-        filled
-        :font-controlled="false"
-        class="mb-8 h-[26px] w-[92px] lg:hidden"
-      />
-      <div class="grid gap-5 lg:grid-cols-5 lg:gap-10 xl:grid-cols-6">
-        <div
-          v-for="(link, key) in links"
-          :key="key"
-        >
-          <footer-accordion
-            :content="link.items"
-            :label="t(link.title)"
-            :link="link.link.replace(/\/$/, '')"
+    <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="flex flex-col gap-4">
+          <adata-logo
+            filled
+            :font-controlled="false"
+            class="shrink-0"
           />
+
+          <p class="text-sm">
+            {{ t('footer.subtitle') }}
+          </p>
+
+          <div class="hidden lg:flex gap-8">
+            <nuxt-link
+              v-for="(social, idx) in socialMedia"
+              :key="idx"
+              target="_blank"
+              :to="social.link"
+              :aria-label="social.name"
+            >
+              <span class="visually-hidden"> {{ social.name }}</span>
+              <component
+                :is="social.icon"
+                filled
+                :font-controlled="false"
+                class="social-icon size-7"
+              />
+            </nuxt-link>
+          </div>
         </div>
+
+        <p class="hidden lg:block text-[10px]">
+          {{ year }} © {{ t('footer.LLP') }} "Alldata"
+        </p>
       </div>
-      <div class="flex grow justify-end gap-8 py-5">
+
+      <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
+            v-for="(item, idx) in mainLinks"
+            :key="idx"
+          >
+            <a-footer-accordion
+              :label="item.title"
+              :link="item?.link?.replace(/\/$/, '')"
+              :content="item.items"
+            />
+          </div>
+        </div>
+        <!--noindex-->
+        <div class="flex flex-col gap-2 items-start" data-nosnippet>
+          <nuxt-link
+            class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
+            :to="contactLinks.link?.replace(/\/$/, '')"
+          >
+            {{ contactLinks.title }}
+          </nuxt-link>
+
+          <div class="flex flex-col gap-3 lg:gap-2">
+            <div
+              v-for="(link, idx) in contactLinks.items"
+              :key="idx"
+              class="flex gap-2 items-center"
+            >
+              <nuxt-link
+                class="text-xs font-medium flex gap-2 items-center cursor-pointer"
+                :class="link.class"
+                :to="link.link?.replace(/\/$/, '')"
+              >
+                <component
+                  :is="link.startIcon"
+                  v-if="link.startIcon"
+                  class="size-4 shrink-0"
+                />
+
+                <p>{{ link.title }}</p>
+
+                <component
+                  :is="link.endIcon"
+                  v-if="link.endIcon"
+                  class="size-4 shrink-0"
+                />
+              </nuxt-link>
+            </div>
+          </div>
+        </div>
+        <!--/noindex-->
+      </div>
+
+      <div class="lg:hidden flex gap-8 flex-wrap">
         <nuxt-link
           v-for="(social, idx) in socialMedia"
           :key="idx"
@@ -88,39 +266,14 @@ const links = useFooterNavigationLinks()
             :is="social.icon"
             filled
             :font-controlled="false"
-            class="social-icon h-[28px] w-[28px]"
+            class="social-icon size-7"
           />
         </nuxt-link>
       </div>
+
+      <p class="lg:hidden text-[10px]">
+        {{ year }} © {{ t('footer.LLP') }} "Alldata"
+      </p>
     </div>
-    <div class="relative">
-      <div class="a-container mobile-padding py-5">
-        <div
-          class="flex flex-col gap-10 text-xs text-white before:absolute before:left-0 before:top-0 before:h-[0.5px] before:w-full before:bg-white lg:flex-row lg:items-center lg:gap-5"
-        >
-          <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
-            <nuxt-link-locale
-              v-for="(item, idx) in info"
-              :key="idx"
-              target="_blank"
-              class="text-[10px]"
-              :to="item.link"
-            >
-              {{ t(item.title) }}
-            </nuxt-link-locale>
-          </div>
-          <div class="flex justify-center lg:grow lg:items-center lg:justify-end lg:gap-4">
-            <div class="flex flex-col gap-1">
-              <span>{{ year }} © {{ t('footer.LLP') }} "Alldata"</span>
-            </div>
-            <adata-logo
-              filled
-              :font-controlled="false"
-              class="hidden h-[26px] w-[92px] lg:block"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  </footer>
 </template>

package/components/navigation/footer/ui/{new-footer-accordion.vue → a-footer-accordion.vue}

@@ -16,8 +16,6 @@ const props = defineProps<Props>()
 
 const isDesktop = useMediaQuery('(max-width: 1024px)')
 
-const { t } = useI18n()
-
 const open = ref(false)
 function toFinalValues(el: HTMLDivElement) {
   el.style.height = el.scrollHeight + 'px'
@@ -46,7 +44,7 @@ const filterCheck = computed(() => {
         :class="{ 'cursor-pointer': link }"
         :to="link?.replace(/\/$/, '')"
       >
-        {{ t(label) }}
+        {{ label }}
       </nuxt-link>
 
       <div class="transition-all lg:hidden cursor-pointer">
@@ -85,7 +83,7 @@ const filterCheck = computed(() => {
               class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
               :to="link.link?.replace(/\/$/, '')"
             >
-              {{ t(link.title) }}
+              {{ link.title }}
             </nuxt-link>
 
             <div

package/components/navigation/header/AHeader.vue

@@ -1,86 +1,94 @@
 <script lang="ts" setup>
-import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
 import AColorMode from '#adata-ui/components/features/color-mode/AColorMode.client.vue'
-import Arrow from '#adata-ui/icons/chevron/chevron-down.vue'
-import HeaderLink from './HeaderLink.vue'
-import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
-import IconLogout from '#adata-ui/icons/logout.vue'
-import TopHeader from '#adata-ui/components/navigation/header/TopHeader.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 Logo from '#adata-ui/icons/logo.vue'
-import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
+import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
+import TopHeader from '#adata-ui/components/navigation/header/TopHeader.vue'
 import { useContacts, useCurrentModule } from '#adata-ui/composables/projectState'
-import { navigateToLocalizedPage, buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+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 HeaderLink from './HeaderLink.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
 
 defineOptions({ name: 'AHeader' })
 
-interface Props {
-  replenish?: string
-  hasNotification?: boolean
-  email?: string | undefined
-  rate?: string
-  daysRemaining?: number
-  limitRemaining?: number
-  balance?: number
-  isAuthenticated?: boolean
-  showLogIn?: boolean
-  mobileHeaderType?: 'search' | 'default'
-  module?: ProjectKeys
-  oldVersion?: string
-}
-
 const props = withDefaults(defineProps<Props>(), {
   limitRemaining: 0,
   daysRemaining: 0,
   balance: 0,
   rate: 'Базовый',
   showLogIn: true,
-  isAuthenticated: false,
   mobileHeaderType: 'default',
-  module: 'pk'
+  module: 'pk',
 })
 
 const emit = defineEmits(['logout', 'search', 'login'])
 
+interface Props {
+  replenish?: string
+  hasNotification?: boolean
+  email: string | undefined
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  isAuthenticated: boolean
+  showLogIn?: boolean
+  mobileHeaderType?: 'search' | 'default'
+  module?: ProjectKeys
+  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 goAuth = () => {
-  if (window) {
-    emit('login')
-    let fullPath = encodeURIComponent(window.location.toString())
-    if (fullPath.includes('basic-info')) {
-      fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
-    }
+const { loginModal } = useIdModals()
 
-    navigateToLocalizedPage({
-      locale,
-      projectUrl: myLayer.loginUrl.slice(0, -1),
-      path: `/?url=${fullPath}`,
-      target: '_self'
-    })
+function goAuth() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      emit('login')
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
+
+      navigateToLocalizedPage({
+        locale,
+        projectUrl: urls.login,
+        path: `/?url=${fullPath}`,
+        target: '_self',
+      })
+    }
+  }
+  else {
+    loginModal.value = true
   }
 }
 
-const goToAnotherModule = () => {
-  location.href = buildLocalizedUrl(locale.value, myLayer.landingUrl, '')
+function goToAnotherModule() {
+  location.href = buildLocalizedUrl(locale.value, urls.landing, '')
 }
 
-const fetchContacts = async () => {
+async function fetchContacts() {
   try {
     const response = await fetch(
-      'https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department'
+      'https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department',
     )
     const { data } = await response.json()
     contacts.value = data
-  } catch (e) {
+  }
+  catch (e) {
     console.error(e.message)
   }
 }
@@ -102,7 +110,7 @@ onBeforeMount(() => {
       class="relative h-16 border-b border-deepblue-900/10 bg-white dark:border-gray-200/10 dark:bg-gray-900"
     >
       <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
-        <!--        Desktop hidden-->
+        <!--        Desktop hidden -->
         <section
           id="mobile-header"
           class="grow lg:hidden"
@@ -111,7 +119,7 @@ onBeforeMount(() => {
             v-if="mobileHeaderType === 'default'"
             class="flex justify-center"
           >
-            <nuxt-link
+            <div
               class="text-deepblue dark:text-[#E3E5E8]"
               @click="goToAnotherModule"
             >
@@ -121,7 +129,7 @@ onBeforeMount(() => {
                 :font-controlled="false"
                 filled
               />
-            </nuxt-link>
+            </div>
           </div>
           <div
             v-else-if="mobileHeaderType === 'search'"
@@ -146,11 +154,11 @@ onBeforeMount(() => {
             class="lg:hidden"
           />
         </div>
-        <!--Mobile hidden-->
-        <nav class="hidden items-center gap-4 lg:flex">
+        <!-- Mobile hidden -->
+        <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, myLayer.landingUrl)"
+            :to="buildLocalizedUrl(locale, urls.landing)"
             class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
             @click="goToAnotherModule"
           >
@@ -162,7 +170,7 @@ onBeforeMount(() => {
           <header-link />
         </nav>
         <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
-          <!--Mobile hidden-->
+          <!-- Mobile hidden -->
           <div class="hidden items-center gap-4 lg:flex">
             <a-change-version
               v-if="oldVersion"