adata-ui 0.3.98 → 2.0.0

package/components/navigation/header/NavList.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { PAGES } from '#adata-ui/shared/constans/pages'
+
+interface NavList {
+  title: string
+  to: string
+  icon?: Component
+}
+
+const props = defineProps<{
+  id: string
+  icon?: Component
+  title: string
+  badge?: boolean
+  to: string
+  navList: NavList[]
+  currentModule: boolean
+}>()
+
+function isActive(itemPath: string) {
+  if (!props.currentModule) return false
+
+  const currentUrl = window.location.href.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')
+  const section = PAGES[props.id]
+
+  const currentPath = itemPath.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')
+
+  if (currentUrl === currentPath) return true
+
+  if (currentPath.endsWith('/')) {
+    let atLeastOne = false
+
+    for (const key in section) {
+      const path = section[key]
+      if (key !== 'main') {
+        const includes = currentUrl.includes(path) || currentUrl.includes('car-result')
+        if (includes) {
+          atLeastOne = true
+          break
+        }
+      }
+    }
+
+    return !atLeastOne
+  }
+
+  if (currentPath.includes('check-car')) {
+    if (currentUrl.includes('car-result')) {
+      return true
+    }
+  }
+
+  for (const key in section) {
+    const path = section[key]
+    if (key !== 'main') {
+      const includesBoth = currentUrl.includes(path) && currentUrl.startsWith(currentPath)
+      if (includesBoth) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2"
+    :class="{ 'rounded-md bg-gray-50 p-2 dark:bg-gray-800': currentModule }"
+  >
+    <div class="flex items-center gap-2 pl-[10px]">
+      <p class="text-sm font-semibold">
+        {{ title }}
+      </p>
+      <a-status-badge
+        v-if="badge"
+        type="primary"
+        class="w-fit"
+        size="xs"
+        view="inverted"
+      >
+        NEW
+      </a-status-badge>
+    </div>
+    <ul class="flex flex-col gap-2">
+      <li
+        v-for="item in navList"
+        :key="item.title"
+        class="flex w-full items-center gap-2 rounded-md px-[10px] py-[6px] hover:bg-deepblue-900/5 dark:hover:bg-gray-200/5"
+        :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
+      >
+        <div class="bg-gradient-blue g-white rounded-lg p-1 dark:bg-gray-900">
+          <component
+            :is="item.icon"
+            class="size-[18px] text-white dark:text-gray-900"
+          />
+        </div>
+        <nuxt-link-locale
+          v-if="item.to"
+          :to="item.to"
+          class="inline-block normal-case w-full cursor-pointer align-middle text-sm font-semibold text-gray-600 dark:text-gray-200"
+        >
+          {{ item.title }}
+        </nuxt-link-locale>
+        <div
+          v-else
+          class="inline-block w-full align-middle text-sm font-semibold text-gray-600 dark:text-gray-200"
+        >
+          {{ item.title }}
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>

package/components/navigation/header/NotificationsMenu.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import iconUser from '#adata-ui/icons/user.vue'
+
+export interface Notification {
+  id: number
+  message: string
+  date: string
+  email: string
+  status: string
+}
+
+defineProps<{
+  notifications: Notification[]
+}>()
+</script>
+<template>
+  <div class="flex w-[423px] flex-col gap-4 rounded-lg bg-white p-4 dark:bg-gray-900">
+    <div class="flex items-center justify-between">
+      <!--      <h4 class="heading-04">{{ $t('header.notifications.title') }}</h4>-->
+      <h4 class="heading-04">Уведомления</h4>
+      <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
+    </div>
+    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
+
+    <ul v-if="notifications?.length" class="flex flex-col gap-2">
+      <li
+        v-for="(notification, idx) in notifications"
+        :key="idx"
+        class="flex items-center justify-between gap-2.5 rounded-md bg-gray-50 px-4 py-2 dark:bg-gray-950"
+      >
+        <div class="rounded-full bg-blue-500 p-2">
+          <icon-user />
+        </div>
+        <div class="flex flex-col items-start gap-1 break-all">
+          <p class="body-s-400">
+            {{ notification.message + ' ' }}
+            <a class="link-s-400" href="#">{{ notification.email }}</a>
+          </p>
+          <p class="text-[12px] leading-4 dark:text-gray-300">{{ notification.date }}</p>
+        </div>
+      </li>
+    </ul>
+
+    <div v-else class="flex flex-col items-center gap-4 py-8">
+      <p class="body-400">Новых уведомлений нет</p>
+    </div>
+
+    <hr class="border-deepblue-900/5 dark:border-gray-200/5" />
+    <AButton block>Посмотреть все уведомления</AButton>
+  </div>
+</template>

package/components/navigation/header/ProductMenu.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import NavCard from '#adata-ui/components/navigation/header/NavCard.vue'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import ListItem from '#adata-ui/components/navigation/header/ListItem.vue'
+import IconSearch from '#adata-ui/icons/search.vue'
+import IconUsers from '#adata-ui/icons/users.vue'
+import IconScales from '#adata-ui/icons/scales/scale.vue'
+import IconLink from '#adata-ui/icons/link-chain.vue'
+import IconArrowCircle from '#adata-ui/icons/arrow/arrow-circle-down.vue'
+import IconBlock from '#adata-ui/icons/block.vue'
+import IconDollar from '#adata-ui/icons/currency/currency-dollar.vue'
+import IconWork from '#adata-ui/icons/work-bag.vue'
+import IconDocument from '#adata-ui/icons/hdocument.vue'
+import IconCheck from '#adata-ui/icons/hcheck.vue'
+import IconCalc from '#adata-ui/icons/calculator.vue'
+import IconGlobe from '#adata-ui/icons/globe.vue'
+import IconFile from '#adata-ui/icons/file/file.vue'
+import IconCheckCircle from '#adata-ui/icons/check/check-circle.vue'
+import IconCar from '#adata-ui/icons/car.vue'
+import IconTruck from '#adata-ui/icons/truck.vue'
+import IconArrowGraph from '#adata-ui/icons/arrow/arrow-graph-up.vue'
+import IconMedal from '#adata-ui/icons/medal.vue'
+import IconHandshake from '#adata-ui/icons/handshake.vue'
+import IconClipboardText from '#adata-ui/icons/clipboard-text.vue'
+import IconUsersFocus from '#adata-ui/icons/users-focus.vue'
+import IconCompany from '#adata-ui/icons/company.vue'
+import IconProfile from '#adata-ui/icons/profile.vue'
+import Connections from '#adata-ui/icons/sviazi.vue'
+
+import { useCurrentModule } from '#adata-ui/composables/projectState'
+import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import NavList from '#adata-ui/components/navigation/header/NavList.vue'
+import CardGallery from '#adata-ui/components/navigation/header/CardGallery.vue'
+
+const props = withDefaults(
+  defineProps<{
+    animation?: string
+    index?: number
+    url?: string
+  }>(),
+  {
+    animation: 'next',
+    index: 0,
+    url: ''
+  }
+)
+
+defineEmits(['outerClick', 'mouseOver'])
+const { myLayer }: any = useAppConfig()
+const colorMode = useColorMode()
+const activeTab = ref(useCurrentModule().value)
+const localePath = useLocalePath()
+
+const { t, locale } = useI18n()
+
+const pageUrl = useRequestURL()
+
+const allImages = computed(() => {
+  if (activeTab.value === 'pk' || activeTab.value === 'counterparty') {
+    return colorMode.value === 'dark'
+      ? `/mode/dark-pk-${locale.value}.webp`
+      : `/mode/light-pk-${locale.value}.webp`
+  }
+  if (activeTab.value === 'work') {
+    return colorMode.value === 'dark'
+      ? `/mode/dark-work-${locale.value}.webp`
+      : `/mode/light-work-${locale.value}.webp`
+  }
+  if (activeTab.value === 'tenders') {
+    return colorMode.value === 'dark'
+      ? `/mode/dark-tenders-${locale.value}.webp`
+      : `/mode/light-tenders-${locale.value}.webp`
+  }
+  if (activeTab.value === 'fines') {
+    return colorMode.value === 'dark'
+      ? `/mode/dark-fines-${locale.value}.webp`
+      : `/mode/light-fines-${locale.value}.webp`
+  }
+  if (activeTab.value === 'analytics') {
+    return colorMode.value === 'dark'
+      ? `/mode/dark-analytics-${locale.value}.webp`
+      : `/mode/light-analytics-${locale.value}.webp`
+  }
+  if (activeTab.value === 'fea') {
+    return colorMode.value === 'dark'
+      ? `/mode/dark-fea-${locale.value}.webp`
+      : `/mode/light-fea-${locale.value}.webp`
+  }
+  if (activeTab.value === 'compliance') {
+    return colorMode.value === 'dark'
+      ? `/mode/dark-complience-${locale.value}.webp`
+      : `/mode/light-complience-${locale.value}.webp`
+  }
+})
+
+const filteredItems = useHeaderNavigationLinks()
+const someHovered = ref(false)
+
+function isCurrentModule(currentModule: string) {
+  if (currentModule === 'fines') return 'avto'
+  if (currentModule === 'analytics') return 'analytics-new'
+  if (currentModule === 'compliance') return 'ac'
+  if (currentModule === 'fea') return 'tnved'
+
+  return currentModule
+}
+</script>
+
+<template>
+  <div class="capitalize">
+    <div class="relative bg-white dark:bg-gray-950">
+      <transition :name="animation">
+        <div
+          :key="index"
+          class="a-container py-8"
+        >
+          <div class="flex justify-between gap-5">
+            <div class="flex gap-[10px] divide-x divide-gray-500/50">
+              <div class="flex flex-col gap-5 w-[290px]">
+                <nav-list
+                  v-for="module in filteredItems.slice(0,2)"
+                  :id="module.key"
+                  :key="module.key"
+                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
+                  :title="module.name"
+                  :nav-list="module.items"
+                  :to="module.to"
+                  :icon="module.icon"
+                />
+              </div>
+              <div class="flex flex-col gap-5 w-[290px] pl-[10px]">
+                <nav-list
+                  v-for="module in filteredItems.slice(2,5)"
+                  :id="module.key"
+                  :key="module.key"
+                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
+                  :title="module.name"
+                  :nav-list="module.items"
+                  :to="module.to"
+                  :icon="module.icon"
+                />
+              </div>
+              <div class="flex flex-col gap-5 w-[330px] pl-[10px]">
+                <nav-list
+                  v-for="module in filteredItems.slice(5,8)"
+                  :id="module.key"
+                  :key="module.key"
+                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
+                  :title="module.name"
+                  :nav-list="module.items"
+                  :to="module.to"
+                  :icon="module.icon"
+                  badge
+                />
+              </div>
+            </div>
+            <card-gallery class="hidden xl:block" />
+          </div>
+        </div>
+      </transition>
+      <button
+        class="absolute right-8 top-4"
+        @click="$emit('outerClick')"
+      >
+        <a-icon-x-mark
+          width="32"
+          height="32"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$percent: 30%;
+.next-enter-from,
+.next-leave-to {
+  opacity: 0;
+  transform: translateX($percent);
+  position: absolute;
+}
+
+.next-enter-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.next-leave-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  opacity: 0;
+  transform: translateX(-$percent);
+}
+
+// Backwards transition
+
+.prev-enter-from,
+.prev-leave-to {
+  position: absolute;
+
+  opacity: 0;
+  transform: translateX(-$percent);
+}
+
+.prev-enter-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.prev-leave-active {
+  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  opacity: 0;
+  transform: translateX($percent);
+}
+</style>

package/components/navigation/header/ProfileMenu.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import IconLogout from '#adata-ui/icons/logout.vue'
+import { useMediaQuery } from '@vueuse/core'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+
+interface Props {
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  replenish?: string
+  oldVersion?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  daysRemaining: 0,
+  limitRemaining: 0
+})
+
+defineEmits(['logout'])
+
+const { t } = useI18n()
+
+const { myLayer }: any = useAppConfig()
+const { locale } = useI18n()
+
+const items = useHeaderMenuLinks()
+
+const onReplenish = () => {
+  if (window) {
+    window.location.href =
+      buildLocalizedUrl(locale.value, myLayer.landingUrl, '/profile?popupBalance=1')
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-full lg:w-[300px]">
+    <!--    desktop  -->
+    <div
+      class="gradient-bg hidden px-4 py-4 text-white dark:text-gray-900 lg:block lg:rounded-t-[0.5rem] lg:px-8 lg:dark:text-white"
+    >
+      <div class="hidden text-sm lg:block">
+        {{ t('header.profile.tariff') }}
+      </div>
+      <div class="flex items-center justify-between gap-4 lg:mt-2">
+        <div class="flex items-center justify-between lg:w-full">
+          <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
+          <a-status-badge
+            type="success"
+            class="!px-3 font-semibold text-white"
+            size="sm"
+          >
+            {{ t('header.profile.connected') }}
+          </a-status-badge>
+        </div>
+        <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString('RU-ru') }} ₸</span>
+      </div>
+      <div class="mt-2 hidden items-center justify-between lg:flex lg:flex-col">
+        <div class="items-center justify-between lg:flex lg:w-full text-xs">
+          {{ t('header.profile.currentBalance') }}
+          <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString('RU-ru') }} ₸</span>
+        </div>
+        <a-button
+          size="sm"
+          class="w-full mt-4"
+          view="outline"
+          variant="ghost"
+          @click="onReplenish"
+        >
+          <a-icon-plus-circle />
+          {{ t('header.profile.addBalance') }}
+        </a-button>
+      </div>
+    </div>
+    <!--    mobile  -->
+    <div class="gradient-bg px-4 py-4 text-white dark:text-gray-900 lg:hidden">
+      <div class="flex justify-between gap-4 lg:mt-2">
+        <div class="flex flex-col items-center">
+          <div class="font-semibold">
+            {{ rate }}
+          </div>
+          <a-status-badge
+            type="success"
+            class="!px-3 font-semibold text-white dark:text-gray-900"
+            size="sm"
+          >
+            {{ t('header.profile.connected') }}
+          </a-status-badge>
+        </div>
+        <div class="flex min-w-[90px] flex-col">
+          <div class="font-semibold">
+            {{ t('header.profile.balance') }}
+          </div>
+          <div class="flex gap-1">
+            <a-status-badge
+              size="sm"
+              class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
+              type="gray"
+            >
+              {{ balance.toLocaleString('RU-ru') }} ₸
+            </a-status-badge>
+            <button
+              class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
+              @click="onReplenish"
+            >
+              <a-icon-plus
+                width="16px"
+                height="16px"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
+      <div class="mb-2 flex justify-between gap-2 lg:hidden">
+        <a-status-badge
+          size="sm"
+          class="w-full py-[6px] font-semibold"
+          :class="daysRemaining > 1 ? '': 'h-auto'"
+        >
+          <span>
+            {{ t('header.profile.requests') }}
+          </span>
+          {{ limitRemaining }}
+        </a-status-badge>
+        <a-status-badge
+          size="sm"
+          class="w-full py-[6px] font-semibold"
+          :class="daysRemaining > 1 ? '': 'flex flex-col h-fit'"
+        >
+          <span>
+            {{ t('header.profile.daysLeft') }}
+          </span>
+          {{ daysRemaining }}
+        </a-status-badge>
+      </div>
+      <div class="grid grid-cols-2 gap-2 lg:flex lg:flex-col">
+        <nuxt-link-locale
+          v-for="item in items"
+          :key="item.title"
+          class="hover:text-blue-700 dark:hover:text-blue-500 flex flex-col lg:flex-row lg:gap-3 items-center rounded-[6px] bg-gray-50 lg:bg-white lg:dark:bg-[#232324] lg:hover:bg-blue-100 py-[10px] text-center text-sm hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-[#161617] active:dark:bg-[#E3E5E8] active:dark:text-gray-900 lg:px-4  lg:dark:hover:bg-gray-900"
+          :to="item.to"
+          target="_blank"
+        >
+          <component
+            :is="item.icon"
+            class="h-[24px] w-[24px]"
+          />
+          <span class="dark:text-[#E3E5E8] text-[#2C3E50]">{{ item.title }}</span>
+        </nuxt-link-locale>
+      </div>
+      <div class="mt-2">
+        <a-change-version
+          v-if="oldVersion"
+          :url="oldVersion"
+        />
+      </div>
+      <div
+        v-if="!isLargeScreen"
+        class="my-4 flex items-center justify-between text-sm"
+      >
+        <span>
+          {{ t('header.profile.colorScheme') }}
+        </span>
+        <a-color-mode />
+      </div>
+
+      <div
+        class="flex items-center justify-center lg:justify-start gap-3 pb-2 pt-4 px-4 cursor-pointer text-red-500 hover:text-red-700 border-t"
+        @click="$emit('logout')"
+      >
+        <icon-logout class="h-5 w-5" />
+        <span>
+          {{ t('header.profile.logout') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.gradient-bg {
+  background: linear-gradient(236.46deg, #479fff -2.39%, #0070eb 79.1%);
+}
+</style>