adata-ui 2.1.18 → 2.1.20

package/components/navigation/header/NavList.vue

@@ -1,131 +1,131 @@
-<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>
+<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,51 +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>
+<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,143 +1,143 @@
-<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-new'
-  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"
-                />
-              </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"
-                />
-              </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"
-                />
-              </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>
+<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-new'
+  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"
+                />
+              </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"
+                />
+              </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"
+                />
+              </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>