adata-ui 2.1.40-beta.1 → 2.1.40-beta.11

package/components/navigation/header/NavList.vue

@@ -27,19 +27,14 @@ function isActive(itemPath: string) {
 </script>
 
 <template>
-  <section
-    class="group/section overflow-hidden rounded-xl border p-3 shadow-sm transition-colors"
-    :class="currentModule
-      ? 'border-blue-700/20 bg-blue-50 hover:border-blue-700/40 dark:border-blue-500/20 dark:bg-blue-500/5 dark:hover:border-blue-500/40'
-      : 'border-gray-200 bg-white hover:border-blue-700/40 dark:border-gray-800 dark:bg-gray-950 dark:hover:border-blue-500/40'"
-  >
+  <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-sm font-bold text-deepblue-900 transition-colors hover:text-blue-700 dark:text-gray-100 dark:hover:text-blue-500"
+        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-lg bg-blue-700/10 text-blue-700 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500">
+          class="flex size-8 shrink-0 items-center justify-center rounded-lg 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"
@@ -47,15 +42,6 @@ function isActive(itemPath: string) {
         </span>
         <span class="block truncate normal-case">{{ title }}</span>
       </nuxt-link-locale>
-
-      <div class="flex shrink-0 items-center gap-1">
-        <span
-          v-if="badge"
-          class="rounded-full bg-blue-700/10 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-blue-700 dark:bg-blue-500/10 dark:text-blue-500"
-        >NEW</span>
-        <a-icon-arrow-side-up
-          class="size-4 text-gray-500 transition-colors group-hover/section:text-blue-700 dark:group-hover/section:text-blue-500"/>
-      </div>
     </div>
 
     <ul class="grid gap-1">
@@ -67,24 +53,12 @@ function isActive(itemPath: string) {
           v-if="item.to"
           :to="item.to"
           itemprop="name"
-          class="group/item flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-blue-100 dark:hover:bg-gray-200/10"
+          class="group/item flex items-center gap-2 rounded-lg 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="flex size-7 shrink-0 items-center justify-center rounded-md transition-colors group-hover/item:bg-blue-700/10 group-hover/item:text-blue-700 dark:group-hover/item:text-blue-500"
-            :class="{
-                'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500': isActive(item.to),
-                'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300': !isActive(item.to),
-                // 'bg-white text-gray-600 dark:bg-white dark:text-gray-300': currentModule,
-            }"
-          >
-            <component
-              :is="item.icon"
-              class="size-[14px]"
-            />
-          </span>
-          <span
-            class="truncate text-sm font-semibold normal-case transition-colors group-hover/item:text-deepblue-900 dark:group-hover/item:text-gray-100"
+            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'"
@@ -92,5 +66,7 @@ function isActive(itemPath: string) {
         </nuxt-link-locale>
       </li>
     </ul>
+
+    <slot name="bottom" />
   </section>
 </template>

package/components/navigation/header/ProductMenu.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import CardGallery from '#adata-ui/components/navigation/header/CardGallery.vue'
 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 { t } = useI18n()
+const urls = useUrls()
+const { t, locale } = useI18n()
 const modules = useHeaderNavigationLinks()
 const { isActiveModule } = useActiveNavigation()
 
-// Fixed EDO promo card on the left (like edo-editor); EDO is excluded from the catalog grid below.
-const edoModule = computed(() => modules.value.find(module => module.key === 'edo') ?? null)
-
-const COLUMN_KEYS = [['pk', 'fines', 'work'], ['fea', 'tenders'], ['compliance', 'analytics']]
+const COLUMN_KEYS = [['edo'], ['pk'], ['compliance', 'fines'], ['tenders', 'analytics'], ['fea', 'work']]
 const catalogColumns = computed(() =>
   COLUMN_KEYS.map(keys =>
     keys
@@ -22,6 +23,14 @@ const catalogColumns = computed(() =>
       .filter((module): module is NonNullable<typeof module> => module !== undefined),
   ),
 )
+
+function handleExportClick() {
+  navigateToLocalizedPage({
+    locale: locale.value,
+    projectUrl: urls.pk,
+    path: PAGES.pk.unload,
+  })
+}
 </script>
 
 <template>
@@ -29,52 +38,12 @@ const catalogColumns = computed(() =>
     <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">
-          <!-- Left sidebar: EDO promo card (edo-editor style) + promo carousel. -->
-          <aside class="flex w-[320px] shrink-0 flex-col gap-5">
-            <nuxt-link-locale
-              v-if="edoModule"
-              :to="edoModule.link"
-              class="group block overflow-hidden rounded-xl border border-blue-700/20  p-4 shadow-sm transition-colors hover:border-blue-700/40 hover:bg-blue-100 dark:border-blue-500/20  dark:hover:border-blue-500/40 dark:hover:bg-blue-500/10"
-              :data-test-id="edoModule.data_attribute"
-            >
-              <div class="flex items-start gap-3">
-                <div
-                  class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-700 text-white shadow-sm">
-                  <component
-                    :is="edoModule.icon"
-                    class="size-5"
-                  />
-                </div>
-                <div class="min-w-0">
-                  <div class="flex items-center justify-between gap-2">
-                    <h3 class="text-base font-bold normal-case text-deepblue-900 dark:text-gray-100">
-                      {{ edoModule.name }}
-                    </h3>
-                    <div class="flex items-center gap-1 justify-end">
-                      <span
-                        v-if="edoModule.is_new"
-                        class="rounded-full bg-blue-700/10 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-blue-700 dark:bg-blue-500/10 dark:text-blue-500"
-                      >NEW</span>
-                      <a-icon-arrow-side-up
-                        class="size-4 text-gray-500 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-blue-700 dark:text-gray-400 dark:group-hover:text-blue-500"/>
-                    </div>
-                  </div>
-                  <p class="mt-1 text-sm normal-case leading-snug text-gray-600 dark:text-gray-300">
-                    {{ t('header.products.edo.heroSubtitle') }}
-                  </p>
-                </div>
-              </div>
-            </nuxt-link-locale>
-
-            <card-gallery class="hidden lg:block"/>
-          </aside>
-
-          <!-- Catalog grid: products as bordered section cards (EDO lives in the hero). -->
-          <div class="grid min-w-0 flex-1 grid-cols-3 gap-3">
+          <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-3"
+              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"
@@ -88,7 +57,40 @@ const catalogColumns = computed(() =>
                 :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-xl 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>

package/components/navigation/pill-tabs/APillTabsV2.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+type CountColor = 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'neutral'
+
+export interface PillTab {
+  key: string
+  name: string
+  count?: number
+  countColor?: CountColor
+  disabled?: boolean
+  hideCount?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options: PillTab[]
+  showCount?: boolean
+  ariaLabel?: string
+  block?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md'
+  scrollIntoView?: boolean
+}>(), {
+  showCount: false,
+  block: false,
+  disabled: false,
+  size: 'sm',
+  scrollIntoView: false,
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+
+const listRef = ref<HTMLElement | null>(null)
+
+const SIZE_CLASS: Record<'sm' | 'md', string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+}
+
+const COUNT_COLOR_CLASS: Record<CountColor, string> = {
+  gray: 'bg-gray-200/70 text-gray-600 dark:bg-white/[0.08] dark:text-gray-300',
+  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+  green: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+  neutral: 'bg-gray-100 text-gray-500 dark:bg-white/[0.06] dark:text-gray-400',
+}
+
+const { t, te } = useI18n()
+
+function localize(label: string) {
+  return te(label) ? t(label) : label
+}
+
+function isDisabled(option: PillTab) {
+  return props.disabled || option.disabled === true
+}
+
+function select(option: PillTab) {
+  if (isDisabled(option)) return
+  emit('update:modelValue', option.key)
+}
+
+function scrollActiveIntoView() {
+  if (!props.scrollIntoView) return
+  nextTick(() => {
+    const active = listRef.value?.querySelector<HTMLElement>('[aria-selected="true"]')
+    active?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+  })
+}
+
+watch(() => props.modelValue, scrollActiveIntoView)
+onMounted(scrollActiveIntoView)
+</script>
+
+<template>
+  <div
+    class="pill-tabs-v2 min-w-0 max-w-full rounded-xl border border-gray-200 bg-gray-50 p-1 dark:border-white/10 dark:bg-white/[0.03]"
+    :class="[
+      block ? 'w-full' : 'w-fit',
+      disabled ? 'pill-tabs-v2--disabled opacity-60' : '',
+    ]"
+    :aria-disabled="disabled || undefined"
+  >
+    <div
+      ref="listRef"
+      role="tablist"
+      :aria-label="ariaLabel"
+      class="pill-tabs-v2__list flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
+    >
+      <button
+        v-for="option in options"
+        :key="option.key"
+        type="button"
+        role="tab"
+        :aria-selected="modelValue === option.key"
+        :aria-disabled="isDisabled(option) || undefined"
+        :disabled="isDisabled(option)"
+        :tabindex="modelValue === option.key ? 0 : -1"
+        class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 font-medium transition-colors duration-150"
+        :class="[
+          SIZE_CLASS[size],
+          isDisabled(option)
+            ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
+            : modelValue === option.key
+              ? 'bg-white text-deepblue-900 shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
+              : 'text-gray-700 hover:bg-white/70 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.06] dark:hover:text-gray-100',
+          block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
+        ]"
+        @click="select(option)"
+      >
+        <slot name="option" :option="option">
+          <span>{{ localize(option.name) }}</span>
+
+          <span
+            v-if="showCount && !option.hideCount"
+            class="inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-semibold leading-5"
+            :class="COUNT_COLOR_CLASS[option.countColor ?? 'gray']"
+          >
+            {{ option.count }}
+          </span>
+        </slot>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pill-tabs-v2__list {
+  scrollbar-width: none;
+}
+.pill-tabs-v2__list::-webkit-scrollbar {
+  display: none;
+}
+</style>