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

package/components/navigation/header/NavList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PAGES } from '#adata-ui/shared/constans/pages'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 
 interface NavList {
   title: string
@@ -13,119 +13,60 @@ const props = defineProps<{
   title: string
   link: string
   badge?: boolean
-  to: string
+  to?: string
   navList: NavList[]
   currentModule: boolean
 }>()
 
-const colorMode = useColorMode()
-
-const isDark = computed(() => colorMode.value === 'dark')
+const { isActiveService } = useActiveNavigation()
 
 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
+  return isActiveService(itemPath)
 }
 </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"
+  <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"
       >
-        NEW
-      </a-status-badge>
-    </nuxt-link-locale>
-    <ul class="flex flex-col gap-2">
+        <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"
-        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"
+          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) }"
         >
-          {{ item.title }}
+          <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>
-        <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>
+    <slot name="bottom" />
+  </section>
+</template>

package/components/navigation/header/NotificationsMenu.vue

@@ -14,9 +14,8 @@ defineProps<{
 }>()
 </script>
 <template>
-  <div class="flex w-[423px] flex-col gap-4 rounded-lg bg-white p-4 dark:bg-gray-900">
+  <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">{{ $t('header.notifications.title') }}</h4>-->
       <h4 class="heading-04">Уведомления</h4>
       <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
     </div>
@@ -26,7 +25,7 @@ defineProps<{
       <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"
+        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 />

package/components/navigation/header/ProductMenu.vue

@@ -1,146 +1,100 @@
 <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: ''
-  }
-)
+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 pageUrl = useRequestURL()
-const filteredItems = useHeaderNavigationLinks()
+const urls = useUrls()
+const { t, locale } = useI18n()
+const modules = useHeaderNavigationLinks()
+const { isActiveModule } = useActiveNavigation()
 
-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'
+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),
+  ),
+)
 
-  return currentModule
+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">
-      <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 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>
-            <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>
   </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>