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

package/components/navigation/header/NavCard.vue

@@ -1,41 +1,41 @@
-<script setup lang="ts">
-import type {NavChild, NavChildItem} from '#adata-ui/components/navigation/header/types'
-
-defineProps<{
-  item: NavChildItem
-  size: 'lg' | 'sm',
-  someHovered: boolean
-}>()
-const hover = ref(false)
-</script>
-
-<template>
-  <nuxt-link-locale
-    :to="item.to"
-    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-gray-50 p-4 dark:bg-gray-800  transition-all dark:hover:bg-gray-800"
-    :class="{'opacity-30': !hover && someHovered}"
-    @mouseenter="hover = true"
-    @mouseleave="hover = false"
-  >
-    <div class="normal-case">
-      <h4
-        class="mb-2 font-semibold text-deepblue-900 dark:text-[#E3E5E8]"
-        :class="{'heading-04' : size==='lg', 'heading-05' : size === 'sm'}"
-      >
-        {{ item.title }}
-      </h4>
-      <p class="text-gray-600 dark:text-gray-300 body-400">
-        {{ item.subtitle ? item.subtitle : '' }}
-      </p>
-    </div>
-    <div
-      class="flex items-center justify-center self-end rounded-md bg-gradient-blue  dark:text-gray-900 text-white"
-      :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
-    >
-      <component
-        :is="item.icon"
-        :class="{'h-5 w-5' : size==='sm', 'h-11 w-11' : size==='lg'}"
-      />
-    </div>
-  </nuxt-link-locale>
-</template>
+<script setup lang="ts">
+import type {NavChild, NavChildItem} from '#adata-ui/components/navigation/header/types'
+
+defineProps<{
+  item: NavChildItem
+  size: 'lg' | 'sm',
+  someHovered: boolean
+}>()
+const hover = ref(false)
+</script>
+
+<template>
+  <nuxt-link-locale
+    :to="item.to"
+    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-gray-50 p-4 dark:bg-gray-800  transition-all dark:hover:bg-gray-800"
+    :class="{'opacity-30': !hover && someHovered}"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false"
+  >
+    <div class="normal-case">
+      <h4
+        class="mb-2 font-semibold text-deepblue-900 dark:text-[#E3E5E8]"
+        :class="{'heading-04' : size==='lg', 'heading-05' : size === 'sm'}"
+      >
+        {{ item.title }}
+      </h4>
+      <p class="text-gray-600 dark:text-gray-300 body-400">
+        {{ item.subtitle ? item.subtitle : '' }}
+      </p>
+    </div>
+    <div
+      class="flex items-center justify-center self-end rounded-lg bg-gradient-blue  dark:text-gray-900 text-white"
+      :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
+    >
+      <component
+        :is="item.icon"
+        :class="{'h-5 w-5' : size==='sm', 'h-11 w-11' : size==='lg'}"
+      />
+    </div>
+  </nuxt-link-locale>
+</template>

package/components/navigation/header/NavList.vue

@@ -1,72 +1,131 @@
-<script setup lang="ts">
-import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
-
-interface NavList {
-  title: string
-  to: string
-  icon?: Component
-}
-
-const props = defineProps<{
-  id: string
-  icon?: Component
-  title: string
-  link: string
-  badge?: boolean
-  to?: string
-  navList: NavList[]
-  currentModule: boolean
-}>()
-
-const { isActiveService } = useActiveNavigation()
-
-function isActive(itemPath: string) {
-  if (!props.currentModule) return false
-  return isActiveService(itemPath)
-}
-</script>
-
-<template>
-  <section class="group/section overflow-hidden flex flex-col ">
-    <div class="mb-3 flex items-start justify-between gap-2">
-      <nuxt-link-locale
-        :to="link"
-        class="group/title flex min-w-0 items-center gap-2 text-base font-semibold text-deepblue-900 transition-colors hover:text-blue-700 dark:text-gray-100 dark:hover:text-blue-500"
-      >
-        <span
-          class="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-500 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover/title:bg-blue-500">
-          <component
-            :is="icon"
-            class="size-4"
-          />
-        </span>
-        <span class="block truncate normal-case">{{ title }}</span>
-      </nuxt-link-locale>
-    </div>
-
-    <ul class="grid gap-1">
-      <li
-        v-for="item in navList"
-        :key="item.title"
-      >
-        <nuxt-link-locale
-          v-if="item.to"
-          :to="item.to"
-          itemprop="name"
-          class="group/item flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-200/10"
-          :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
-        >
-          <a-icon-chevron-right class="size-[14px] shrink-0 text-gray-300 group-hover/item:text-blue-500 dark:group-hover/item:text-blue-700" />
-          <span
-            class="min-w-0 text-sm normal-case transition-colors group-hover/item:text-deepblue-900 group-hover/item:font-semibold dark:group-hover/item:text-gray-100"
-            :class="isActive(item.to)
-              ? 'text-blue-700 dark:text-blue-500'
-              : 'text-gray-600 dark:text-gray-300'"
-          >{{ item.title }}</span>
-        </nuxt-link-locale>
-      </li>
-    </ul>
-
-    <slot name="bottom" />
-  </section>
-</template>
+<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
+  link: string
+  badge?: boolean
+  to: string
+  navList: NavList[]
+  currentModule: boolean
+}>()
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+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 }"
+  >
+    <nuxt-link-locale class="flex items-center gap-2 pl-[10px] hover:text-blue-700 dark:hover:text-blue-500" :to="link">
+      <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>
+    </nuxt-link-locale>
+    <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-blue-100 dark:hover:bg-gray-200/10 text-gray-600 dark:text-gray-200 hover:text-blue-700 dark:hover:text-blue-500"
+        :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
+      >
+        <div class="rounded-lg p-1" :class="{ 'bg-gradient-blue-dark ': isDark, 'bg-gradient-blue-light': !isDark }">
+          <component
+            :is="item.icon"
+            class="size-[18px] text-white dark:text-gray-900"
+          />
+        </div>
+        <nuxt-link-locale
+          v-if="item.to"
+          :to="item.to"
+          itemprop="name"
+          class="inline-block normal-case w-full cursor-pointer align-middle text-sm font-semibold text-inherit hover:text-inherit"
+        >
+          {{ 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>
+
+<style scoped lang="scss">
+.bg-gradient-blue-dark {
+  background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
+}
+
+.bg-gradient-blue-light {
+  background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
+}
+</style>

package/components/navigation/header/NotificationsMenu.vue

@@ -1,50 +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-md bg-white p-4 dark:bg-gray-900">
-    <div class="flex items-center justify-between">
-      <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-sm 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>
+<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

@@ -1,100 +1,146 @@
-<script setup lang="ts">
-import NavList from '#adata-ui/components/navigation/header/NavList.vue'
-import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
-import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import AIconArrowRight from '#adata-ui/icons/arrow/arrow-right.vue'
-import AIconDownloadRounded from '#adata-ui/icons/download-rounded.vue'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-
-defineProps<{ url?: string }>()
-defineEmits(['outerClick', 'mouseOver'])
-
-const urls = useUrls()
-const { t, locale } = useI18n()
-const modules = useHeaderNavigationLinks()
-const { isActiveModule } = useActiveNavigation()
-
-const COLUMN_KEYS = [['edo'], ['pk'], ['compliance', 'fines'], ['tenders', 'analytics'], ['fea', 'work']]
-const catalogColumns = computed(() =>
-  COLUMN_KEYS.map(keys =>
-    keys
-      .map(key => modules.value.find(module => module.key === key))
-      .filter((module): module is NonNullable<typeof module> => module !== undefined),
-  ),
-)
-
-function handleExportClick() {
-  navigateToLocalizedPage({
-    locale: locale.value,
-    projectUrl: urls.pk,
-    path: PAGES.pk.unload,
-  })
-}
-</script>
-
-<template>
-  <div class="capitalize">
-    <div class="relative bg-white dark:bg-gray-950">
-      <div class="a-container max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain py-8">
-        <div class="flex justify-between gap-5">
-          <div class="grid min-w-0 flex-1 grid-cols-5 gap-3">
-            <div
-              v-for="(column, index) in catalogColumns"
-              :key="index"
-              class="flex flex-col gap-[22px]"
-              :class="index > 0 ? 'border-l border-gray-100 pl-3 dark:border-gray-800' : ''"
-            >
-              <nav-list
-                v-for="module in column"
-                :id="module.key"
-                :key="module.key"
-                :current-module="isActiveModule(module)"
-                :title="module.name"
-                :link="module.link"
-                :nav-list="module.items"
-                :to="module.to"
-                :icon="module.icon"
-                :badge="module.is_new"
-                :data-test-id="module.data_attribute"
-              >
-                <template
-                  v-if="module.key === 'edo'"
-                  #bottom
-                >
-                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
-                    <div class="flex items-center gap-3">
-                      <span class="rounded-[10px] bg-white p-[10px] dark:bg-gray-950">
-                        <a-icon-download-rounded class="size-5 text-blue-700 dark:text-blue-500" />
-                      </span>
-                      <span class="font-semibold text-white dark:text-gray-950">
-                        {{ t('header.products.exportCard.title') }}
-                      </span>
-                    </div>
-
-                    <div class="text-xs text-white dark:text-gray-950">
-                      {{ t('header.products.exportCard.subTitle') }}
-                    </div>
-
-                    <a-button-v2
-                      view="soft"
-                      class="!h-9 w-fit !bg-white text-blue-700 dark:!bg-gray-950 dark:text-blue-500"
-                      size="sm"
-                      :icon="AIconArrowRight"
-                      icon-right
-                      @click="handleExportClick"
-                    >
-                      <span class="text-sm">
-                        {{ t('header.products.exportCard.receive') }}
-                      </span>
-                    </a-button-v2>
-                  </div>
-                </template>
-              </nav-list>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+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 pageUrl = useRequestURL()
+const filteredItems = useHeaderNavigationLinks()
+
+function isCurrentModule(currentModule: string) {
+  if (currentModule === 'fines') return 'avto'
+  if (currentModule === 'analytics') return 'analytics'
+  if (currentModule === 'compliance') return 'ac'
+  if (currentModule === 'fea') return 'tnved'
+  if (currentModule === 'tenders') return 'zakupki'
+
+  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,3)"
+                  :id="module.key"
+                  :key="module.key"
+                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
+                  :title="module.name"
+                  :link="module.link"
+                  :nav-list="module.items"
+                  :to="module.to"
+                  :icon="module.icon"
+                  :badge="module.is_new"
+                  :data-test-id="module.data_attribute"
+                />
+              </div>
+              <div class="flex flex-col gap-5 w-[290px] pl-[10px]">
+                <nav-list
+                  v-for="module in filteredItems.slice(3,5)"
+                  :id="module.key"
+                  :key="module.key"
+                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
+                  :title="module.name"
+                  :link="module.link"
+                  :nav-list="module.items"
+                  :to="module.to"
+                  :icon="module.icon"
+                  :badge="module.is_new"
+                  :data-test-id="module.data_attribute"
+                />
+              </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"
+                  :link="module.link"
+                  :nav-list="module.items"
+                  :to="module.to"
+                  :icon="module.icon"
+                  :badge="module.is_new"
+                  :data-test-id="module.data_attribute"
+                />
+              </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>