adata-ui 2.1.23 → 2.1.25

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-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>
+<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,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>