adata-ui 0.3.99 → 2.0.1

package/components/navigation/footer/ui/footer-acccordion.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import {useAdaptive} from "#adata-ui/composables/useAdaptive";
+
+interface Item {
+  title: string
+  link: string
+}
+
+interface Props {
+  label: string
+  link: string
+  content: Item[]
+}
+
+defineProps<Props>()
+
+const { t } = useI18n()
+
+const device = useAdaptive()
+const open = ref(false)
+function toFinalValues(el: HTMLDivElement) {
+  el.style.height = el.scrollHeight + 'px'
+  el.style.opacity = '1'
+}
+
+function onAfterEnter(el: HTMLDivElement) {
+  el.style.height = ''
+}
+
+const filterCheck = computed(()=>{
+  if (open.value){
+    return open.value
+  } else {
+    return open.value = !device.value.isMobile
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col ">
+    <div
+      class="flex gap-2 justify-between "
+    >
+      <nuxt-link-locale class="text-sm" :to="link">
+        {{ label }}
+      </nuxt-link-locale>
+
+
+      <div
+        class="transition-all lg:hidden cursor-pointer"
+        :class="{'rotate-180': open}"
+        @click="open =!open"
+      >
+        <a-icon-chevron-down
+          v-if="content.length"
+          filled
+          :font-controlled="false"
+          class="w-6 h-6  "
+        />
+      </div>
+    </div>
+    <transition
+      name="accordion"
+      @enter="toFinalValues"
+      @after-enter="onAfterEnter"
+      @before-leave="toFinalValues"
+    >
+      <div
+        v-if="filterCheck"
+        class="mt-2 flex flex-col gap-2"
+      >
+        <nuxt-link-locale
+          v-for="(item,idx) in content"
+          :key="idx"
+          class="text-xs"
+          :to="item.link.replace(/\/$/, '')"
+        >
+          {{ t(item.title) }}
+        </nuxt-link-locale>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  overflow: hidden;
+  transition: height 0.3s ease,
+  opacity 0.3s ease,
+  margin 0.3s ease;
+
+}
+
+.accordion-enter-from,
+.accordion-leave-to {
+  height: 0 !important;
+  opacity: 0 !important;
+  margin: 0 !important;
+}
+
+</style>
+
+<!--          <div-->
+<!--            class="text-sm font-semibold-->
+<!--                   cursor-pointer"-->
+<!--          >-->
+<!--            {{ link.title }}-->
+<!--          </div>-->
+<!--          <div class="flex flex-col gap-2">-->
+<!--            <nuxt-link-->
+<!--              v-for="(item,idx) in link.items"-->
+<!--              :key="idx"-->
+<!--              class="text-xs"-->
+<!--              :to="item.link"-->
+<!--            >-->
+<!--              {{ item.title }}-->
+<!--            </nuxt-link>-->
+<!--          </div>-->

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+interface Item {
+  title: string
+  link: string
+}
+
+interface Props {
+  label: string
+  link: string
+  content: Item[]
+}
+
+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'
+  el.style.opacity = '1'
+}
+
+function onAfterEnter(el: HTMLDivElement) {
+  el.style.height = ''
+}
+
+const filterCheck = computed(() => {
+  if (open.value) {
+    return open.value
+  }
+  else {
+    return open.value = !isDesktop.value
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-start">
+    <div class="flex gap-2 justify-between w-full">
+      <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-pointer': link }"
+        :to="link?.replace(/\/$/, '')"
+      >
+        {{ t(label) }}
+      </nuxt-link>
+
+      <div class="transition-all lg:hidden cursor-pointer">
+        <a-icon-chevron-down
+          v-if="content.length"
+          filled
+          :font-controlled="false"
+          class="size-6 transition-all"
+          :class="{ 'rotate-180': open }"
+          @click="open = !open"
+        />
+      </div>
+    </div>
+
+    <transition
+      name="accordion"
+      @enter="toFinalValues"
+      @after-enter="onAfterEnter"
+      @before-leave="toFinalValues"
+    >
+      <div
+        v-if="filterCheck"
+        class="flex gap-3 lg:gap-6 flex-col lg:flex-row"
+      >
+        <div
+          v-for="(subItem, subIdx) in content"
+          :key="subIdx"
+          class="flex flex-col gap-3 lg:gap-2"
+        >
+          <div
+            v-for="(link, idx) in subItem"
+            :key="idx"
+            class="flex gap-2 items-center"
+          >
+            <nuxt-link
+              class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
+              :to="link.link?.replace(/\/$/, '')"
+            >
+              {{ t(link.title) }}
+            </nuxt-link>
+
+            <div
+              v-if="link.isNew"
+              class="text-[9px] font-bold px-1 py-[2px] rounded-sm bg-white/20"
+            >
+              NEW
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  overflow: hidden;
+  transition: height 0.3s ease,
+  opacity 0.3s ease,
+  margin 0.3s ease;
+
+}
+
+.accordion-enter-from,
+.accordion-leave-to {
+  height: 0 !important;
+  opacity: 0 !important;
+  margin: 0 !important;
+}
+</style>

package/components/navigation/header/AHeader.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+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 { useContacts, useCurrentModule } from '#adata-ui/composables/projectState'
+import { navigateToLocalizedPage, buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+
+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,
+  mobileHeaderType: 'default',
+  module: 'pk'
+})
+
+const emit = defineEmits(['logout', 'search', 'login'])
+
+const { t } = useI18n()
+const { locale } = useI18n()
+
+useCurrentModule().value = props.module
+const appConfig = useAppConfig()
+const { myLayer }: any = useAppConfig()
+
+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', '')
+    }
+
+    navigateToLocalizedPage({
+      locale,
+      projectUrl: myLayer.loginUrl.slice(0, -1),
+      path: `/?url=${fullPath}`,
+      target: '_self'
+    })
+  }
+}
+
+const goToAnotherModule = () => {
+  location.href = buildLocalizedUrl(locale.value, myLayer.landingUrl, '')
+}
+
+const fetchContacts = async () => {
+  try {
+    const response = await fetch(
+      '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)
+  }
+}
+
+onBeforeMount(() => {
+  fetchContacts()
+})
+</script>
+
+<template>
+  <div>
+    <top-header
+      :days-remaining="daysRemaining"
+      :is-authenticated="isAuthenticated"
+      :module-name="module"
+      :limit-remaining="limitRemaining"
+    />
+    <header
+      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-->
+        <section id="mobile-header" class="grow lg:hidden">
+          <div v-if="mobileHeaderType === 'default'" class="flex justify-center">
+            <nuxt-link class="text-deepblue dark:text-[#E3E5E8]" @click="goToAnotherModule">
+              <span class="visually-hidden"> Сервисы Adata.kz</span>
+
+              <adata-logo :font-controlled="false" filled />
+            </nuxt-link>
+          </div>
+          <div
+            v-else-if="mobileHeaderType === 'search'"
+            class="flex w-full items-center gap-2 bg-white dark:bg-gray-900 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"
+              @click="$emit('search')"
+            >
+              <a-icon-search />
+              <span class="body-400">Найти</span>
+            </button>
+          </div>
+        </section>
+        <div class="lg:hidden">
+          <lang-switcher v-if="langIsOn || module === 'fea'" class="lg:hidden" />
+        </div>
+        <!--Mobile hidden-->
+        <nav class="hidden items-center gap-4 lg:flex">
+          <nuxt-link-locale
+            aria-label="Adata-logo"
+            :to="buildLocalizedUrl(locale, myLayer.landingUrl)"
+            class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
+            @click="goToAnotherModule"
+          >
+            <adata-logo :font-controlled="false" filled />
+          </nuxt-link-locale>
+          <header-link />
+        </nav>
+        <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
+          <!--Mobile hidden-->
+          <div class="hidden items-center gap-4 lg:flex">
+            <a-change-version v-if="oldVersion" :url="oldVersion" />
+            <a-color-mode />
+            <lang-switcher v-if="langIsOn || module === 'fea'" />
+          </div>
+
+          <a-dropdown placement="right" v-show="isAuthenticated">
+            <template #default="{ onExpand, expanded }">
+              <div
+                class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex"
+                @click.stop="onExpand"
+              >
+                <span>{{ email }}</span>
+                <arrow :class="{ 'rotate-180': expanded }" />
+              </div>
+            </template>
+            <template #content>
+              <profile-menu
+                :balance="balance"
+                :days-remaining="daysRemaining"
+                :limit-remaining="limitRemaining"
+                :rate="rate"
+                :replenish="replenish"
+                @logout="$emit('logout')"
+              />
+            </template>
+          </a-dropdown>
+          <div
+            v-show="!isAuthenticated && showLogIn"
+            class="hidden cursor-pointer items-center gap-2 font-semibold lg:flex"
+            @click="goAuth"
+          >
+            <icon-logout class="lg:h-4 lg:w-4" />
+            <span class="hidden lg:inline-block">
+              {{ t('header.login') }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </header>
+  </div>
+</template>
+
+<style scoped></style>

package/components/navigation/header/AlmatyContacts.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="h-[272px]">
+    <h2 class="heading-02 mb-4">
+      {{ t('header.contacts.almaty.title') }}
+    </h2>
+    <div class="flex gap-10">
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="item in AlmatyItems.slice(0,3)"
+          class="flex flex-col gap-2 "
+        >
+          <div class="heading-04">
+            {{ t(item.title) }}
+          </div>
+          <a
+            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
+            :href="item.to"
+          >
+            <component
+              :is="item.icon"
+              class="shrink-0"
+            />
+            <div class=" body-400">
+              {{ t(item.subtitle) }}
+            </div>
+          </a>
+        </div>
+      </div>
+      <div class="flex flex-col gap-2 2xl:gap-4">
+        <div class="flex flex-col gap-4 h-full justify-between">
+          <div class="flex flex-col gap-2 ">
+            <div class="heading-04">
+              {{ t('header.contacts.almaty.contactUs.title') }}
+            </div>
+            <div class="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] max-w-[484px] gap-x-8 gap-y-2">
+              <a
+                v-for="link in newContacts"
+                :key="link.subtitle"
+                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                :href="link.to"
+                :target="link.icon === Whatsapp ? '_blank' : '_self'"
+              >
+                <component :is="link.icon" />
+                <div class="body-400 line-clamp-1">
+                  {{ link.subtitle }}
+                </div>
+              </a>
+            </div>
+          </div>
+          <div class="flex flex-col gap-2 ">
+            <div class="heading-04 whitespace-nowrap">
+              {{ t('header.contacts.almaty.support.title') }}
+            </div>
+            <div class="flex flex-col lg:gap-y-5">
+              <a
+                v-for="link in technicalSupport"
+                :key="link.subtitle"
+                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                :href="link.to"
+                target="_blank"
+              >
+                <div class="body-400 line-clamp-1 text-blue-600">
+                  {{ t(link.subtitle) }}
+                </div>
+                <component
+                  :is="link.icon"
+                  class="stroke-blue-600"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+<!--      Here is the financial department-->
+<!--      <div class="flex flex-col gap-2 self-end">-->
+<!--        <div class="heading-04 whitespace-nowrap">-->
+<!--          {{ t('header.contacts.almaty.financeDep.title') }}-->
+<!--        </div>-->
+<!--        <nuxt-link-->
+<!--          class="flex gap-1 items-center"-->
+<!--          to="https://api.whatsapp.com/send?phone=77713954561"-->
+<!--          target="_blank"-->
+<!--        >-->
+<!--          <div class="body-400 line-clamp-1 text-blue-600">-->
+<!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }}-->
+<!--          </div>-->
+<!--          <a-icon-expand-window class="stroke-blue-600"/>-->
+<!--        </nuxt-link>-->
+<!--      </div>-->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import Location from "#adata-ui/icons/location.vue";
+import Mail from "#adata-ui/icons/mail.vue";
+import Clock from "#adata-ui/icons/clock.vue";
+import Whatsapp from "#adata-ui/icons/whatsapp.vue";
+import Phone from "#adata-ui/icons/phone.vue";
+import ExpandWindow from "#adata-ui/icons/expand-window.vue";
+import {useContacts} from "#adata-ui/composables/projectState";
+
+const {t} = useI18n()
+const contacts = ref(useContacts())
+const AlmatyItems = [
+  {
+    title: 'header.contacts.almaty.adress.title',
+    subtitle: 'header.contacts.almaty.adress.subtitle',
+    icon: Location,
+    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72'
+  },
+  {
+    title: 'header.contacts.almaty.email.title',
+    subtitle: 'info@adata.kz',
+    icon: Mail,
+    to: 'mailto:info@adata.kz'
+  },
+  {
+    title: 'header.contacts.almaty.schedule.title',
+    subtitle: 'header.contacts.almaty.schedule.subtitle',
+    icon: Clock,
+  },
+]
+
+const technicalSupport = [
+  {
+    subtitle: 'header.contacts.almaty.support.linkTitle',
+    icon: ExpandWindow,
+    to: "https://api.whatsapp.com/send/?phone=77712289041"
+  }
+]
+
+const newContacts = computed(()=> contacts.value.map(item => ({
+  subtitle: item.contact,
+  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
+  to: item.platform_code === 'telephone' ? `tel:${item.contact}`
+    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/[^0-9]/g, '')}`
+})))
+</script>
+
+<style scoped>
+</style>

package/components/navigation/header/AstanaContacts.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="h-[272px]">
+    <h2 class="heading-02 mb-4">
+      {{ t('header.contacts.astana.title') }}
+    </h2>
+    <div class="grid grid-cols-2 gap-5 ">
+      <div class="xl:grid grid-cols-2 grid-rows-3 flex flex-wrap gap-4 ">
+        <div v-for="(item, index) in AstanaItems" class="flex flex-col gap-2 " :class="{'col-span-2':index===0 }">
+          <div class="heading-04">
+            {{ t(item.title) }}
+          </div>
+          <a
+            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
+            :href="item?.to"
+            :target="item.icon === Whatsapp ? '_blank' : '_self'"
+          >
+            <component :is="item.icon"/>
+            <div class=" body-400">
+              {{ t(item.subtitle) }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import Location from "#adata-ui/icons/location.vue";
+import Mail from "#adata-ui/icons/mail.vue";
+import Clock from "#adata-ui/icons/clock.vue";
+import Whatsapp from "#adata-ui/icons/whatsapp.vue";
+
+const {t} = useI18n()
+const AstanaItems = [
+  {
+    title: 'header.contacts.astana.adress.title',
+    subtitle: 'header.contacts.astana.adress.subtitle',
+    icon: Location,
+    to: 'https://yandex.kz/maps/ru/org/adata_consulting/214484722242/?ll=71.429573%2C51.131319&z=20.56'
+  },
+  {
+    title: 'header.contacts.astana.email.title',
+    subtitle: 'info@adata-c.kz',
+    icon: Mail,
+    to: 'mailto:info@adata-c.kz'
+  },
+  {
+    title: 'header.contacts.astana.schedule.title',
+    subtitle: 'header.contacts.astana.schedule.subtitle',
+    icon: Clock,
+  },
+  {
+    title: 'header.contacts.astana.sellDep.title',
+    subtitle: '+7 700 744 00 10',
+    icon: Whatsapp,
+    to: "https://api.whatsapp.com/send/?phone=77007440010"
+  },
+]
+</script>
+
+<style scoped>
+
+</style>