adata-ui 4.0.35 → 4.0.37

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "4.0.35",
+  "version": "4.0.37",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/header/NavList.vue

@@ -1,15 +1,57 @@
 <script setup>
+import { PAGES } from "../../shared/constants/pages";
 const props = defineProps({
+  id: { type: String, required: true },
   icon: { type: Object, required: false },
   title: { type: String, required: true },
   badge: { type: Boolean, required: false },
   to: { type: String, required: true },
-  navList: { type: Array, required: true }
+  navList: { type: Array, required: true },
+  currentModule: { type: Boolean, required: true }
 });
+function isActive(itemPath) {
+  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">
+  <div
+    class="flex flex-col gap-2"
+    :class="{ 'rounded-md bg-gray-50 p-2 dark:bg-gray-800': currentModule }"
+  >
     <div
       class="flex items-center gap-2 pl-[10px]"
     >
@@ -31,6 +73,7 @@ const props = defineProps({
         v-for="item in navList"
         :key="item.title"
         class="flex items-center gap-2 px-[10px] py-[6px] w-full rounded-md hover:bg-gray-50 dark:hover:bg-gray-800"
+        :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
       >
         <div class="bg-gradient-blue p-1 rounded-lg g-white">
           <component

package/dist/runtime/components/header/NavList.vue.d.ts

@@ -5,11 +5,13 @@ interface NavList {
     icon?: Component;
 }
 type __VLS_Props = {
+    id: string;
     icon?: Component;
     title: string;
     badge?: boolean;
     to: string;
     navList: NavList[];
+    currentModule: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/header/ProductMenu.vue

@@ -2,7 +2,7 @@
 import { PAGES } from "../../shared/constants/pages";
 import NavList from "./NavList.vue";
 import CardGallery from "./CardGallery.vue";
-import { useI18n, useAppConfig } from "#imports";
+import { useI18n, useAppConfig, useRequestURL } from "#imports";
 import IUsersThree from "#icons/users/users-three.vue";
 import ISearch from "#icons/search.vue";
 import IArrowCircleDown from "#icons/arrow/arrow-circle-down.vue";
@@ -16,7 +16,8 @@ import IWorkBag from "#icons/work-bag.vue";
 import IHdocument from "#icons/document/hdocument.vue";
 import IReceipt from "#icons/receipt/receipt.vue";
 import IHcheck from "#icons/receipt/hcheck.vue";
-import IFile from "#icons/file.vue";
+import IFile from "#icons/file/file.vue";
+import IFiles from "#icons/file/files.vue";
 import ICar from "#icons/avto/car.vue";
 import ICheckCircle from "#icons/check-circle.vue";
 import ITruck from "#icons/avto/truck.vue";
@@ -37,6 +38,7 @@ const props = defineProps({
 const { t } = useI18n();
 const appConfig = useAppConfig();
 const mode = appConfig.adataUI.mode;
+const pageUrl = useRequestURL();
 defineEmits(["outerClick", "mouseOver"]);
 const filteredItems = [
   {
@@ -241,8 +243,28 @@ const filteredItems = [
         to: `https://ac.${mode}.kz/compliance`
       }
     ]
+  },
+  {
+    key: "edo",
+    name: t("header.products.edo.label"),
+    icon: IFiles,
+    items: [
+      {
+        title: t("header.products.edo.items.l.t"),
+        subtitle: t("header.products.edo.items.l.t"),
+        icon: IFiles,
+        to: `https://edo.${mode}.kz`
+      }
+    ]
   }
 ];
+function isCurrentModule(currentModule) {
+  if (currentModule === "fines") return "avto";
+  if (currentModule === "analytics") return "analytics-new";
+  if (currentModule === "compliance") return "ac";
+  if (currentModule === "fea") return "tnved";
+  return currentModule;
+}
 </script>
 
 <template>
@@ -258,7 +280,9 @@ const filteredItems = [
               <div class="flex flex-col gap-5 w-[290px]">
                 <nav-list
                   v-for="module in filteredItems.slice(0, 2)"
+                  :id="module.key"
                   :key="module.key"
+                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                   :title="module.name"
                   :nav-list="module.items"
                   :to="module.to"
@@ -268,7 +292,9 @@ const filteredItems = [
               <div class="flex flex-col gap-5 w-[290px] pl-[10px]">
                 <nav-list
                   v-for="module in filteredItems.slice(2, 5)"
+                  :id="module.key"
                   :key="module.key"
+                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                   :title="module.name"
                   :nav-list="module.items"
                   :to="module.to"
@@ -277,8 +303,10 @@ const filteredItems = [
               </div>
               <div class="flex flex-col gap-5 w-[330px] pl-[10px]">
                 <nav-list
-                  v-for="module in filteredItems.slice(5, 7)"
+                  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"
                   :nav-list="module.items"
                   :to="module.to"

package/dist/runtime/components/header/ProfileMenu.vue

@@ -1,22 +1,7 @@
 <script setup>
 import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui";
-import { PAGES } from "../../shared/constants/pages";
-import AStatusBadge from "../Tag.vue";
-import AButton from "../button/Button.vue";
-import ColorMode from "../ColorMode.vue";
-import { ref, useI18n, useAppConfig } from "#imports";
-import IPlus from "#icons/plus.vue";
-import ILogout from "#icons/navigation/logout.vue";
-import IProfile from "#icons/document/profile.vue";
-import ILock from "#icons/lock.vue";
-import IReceipt from "#icons/receipt/receipt.vue";
-import IBookmark from "#icons/bookmark.vue";
-import IFile from "#icons/file.vue";
-import IHistory from "#icons/history.vue";
-import IUsers from "#icons/users/users.vue";
-import IMessage from "#icons/message.vue";
 import IChevronDown from "#icons/arrow/chevron-down.vue";
-const isLargeScreen = true;
+import { ref } from "#imports";
 const props = defineProps({
   rate: { type: String, required: true },
   daysRemaining: { type: Number, required: false, default: 0 },
@@ -28,58 +13,8 @@ const props = defineProps({
   email: { type: String, required: false },
   showLogin: { type: Boolean, required: false }
 });
-const appConfig = useAppConfig();
-const mode = appConfig.adataUI.mode;
-defineEmits(["logout"]);
-const { t } = useI18n();
 const profileMenuOpen = ref(false);
-const items = [
-  {
-    title: t("header.profile.menu.personalInfo"),
-    icon: IProfile,
-    to: `https://${mode}.kz` + PAGES.profile.index
-  },
-  {
-    title: t("header.profile.menu.security"),
-    icon: ILock,
-    to: `https://${mode}.kz` + PAGES.profile.security
-  },
-  {
-    title: t("header.profile.menu.paymentHistory"),
-    icon: IReceipt,
-    to: `https://${mode}.kz` + PAGES.profile.paymentHistory
-  },
-  {
-    title: t("header.profile.menu.favourites"),
-    icon: IBookmark,
-    to: `https://${mode}.kz` + PAGES.profile.favourites
-  },
-  {
-    title: t("header.profile.menu.myReports"),
-    icon: IFile,
-    to: `https://${mode}.kz` + PAGES.profile.reports
-  },
-  {
-    title: t("header.profile.menu.browsingHistory"),
-    icon: IHistory,
-    to: `https://${mode}.kz` + PAGES.profile.browsingHistory
-  },
-  {
-    title: t("header.profile.menu.myGroups"),
-    icon: IUsers,
-    to: `https://${mode}.kz` + PAGES.profile.myGroups
-  },
-  {
-    title: t("header.profile.menu.notes"),
-    icon: IMessage,
-    to: `https://${mode}.kz` + PAGES.profile.notes
-  }
-];
-const onReplenish = () => {
-  if (window) {
-    window.location.href = `https://${mode}.kz/profile?popupBalance=1`;
-  }
-};
+defineEmits(["logout"]);
 </script>
 
 <template>
@@ -101,153 +36,21 @@ const onReplenish = () => {
         :side-offset="20"
         class="shadow-md"
       >
-        <div class="max-w-full lg:w-[440px]">
-          <!--    desktop  -->
-          <div
-            class="gradient-bg hidden px-4 py-4 text-white dark:text-gray-900 lg:block lg:rounded-t-[0.5rem] lg:px-8 lg:dark:text-white"
-          >
-            <div class="hidden text-sm lg:block">
-              {{ t("header.profile.tariff") }}
-            </div>
-            <div class="flex items-center justify-between gap-4 lg:mt-2">
-              <div>
-                <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
-                <a-status-badge
-                  type="success"
-                  class="!px-3 font-semibold text-white"
-                  size="sm"
-                >
-                  {{ t("header.profile.connected") }}
-                </a-status-badge>
-              </div>
-              <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString("RU-ru") }} ₸</span>
-            </div>
-            <div class="mt-2 hidden items-center justify-between lg:flex">
-              <div class="text-xs">
-                {{ t("header.profile.currentBalance") }}
-                <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString("RU-ru") }} ₸</span>
-              </div>
-              <a-button
-                size="sm"
-                view="outline"
-                variant="ghost"
-                @click="onReplenish"
-              >
-                {{ t("header.profile.addBalance") }}
-              </a-button>
-            </div>
-          </div>
-          <!--    mobile  -->
-          <div class="gradient-bg px-4 py-4 text-white dark:text-gray-900 lg:hidden">
-            <div class="flex justify-between gap-4 lg:mt-2">
-              <div class="flex flex-col items-center">
-                <div class="font-semibold">
-                  {{ rate }}
-                </div>
-                <a-status-badge
-                  type="success"
-                  class="!px-3 font-semibold text-white dark:text-gray-900"
-                  size="sm"
-                >
-                  {{ t("header.profile.connected") }}
-                </a-status-badge>
-              </div>
-              <div class="flex min-w-[90px] flex-col">
-                <div class="font-semibold">
-                  {{ t("header.profile.balance") }}
-                </div>
-                <div class="flex gap-1">
-                  <a-status-badge
-                    size="sm"
-                    class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
-                    type="gray"
-                  >
-                    {{ balance.toLocaleString("RU-ru") }} ₸
-                  </a-status-badge>
-                  <button
-                    class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
-                    @click="onReplenish"
-                  >
-                    <i-plus
-                      width="16px"
-                      height="16px"
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
-            <div class="mb-2 flex justify-between gap-2 lg:hidden">
-              <a-status-badge
-                size="sm"
-                class="w-full py-[6px] font-semibold"
-              >
-                <span>
-                  {{ t("header.profile.requests") }}
-                </span>
-                {{ limitRemaining }}
-              </a-status-badge>
-              <a-status-badge
-                size="sm"
-                class="w-full py-[6px] font-semibold"
-              >
-                <span>
-                  {{ t("header.profile.daysLeft") }}
-                </span>
-                {{ daysRemaining }}
-              </a-status-badge>
-            </div>
-            <div class="grid grid-cols-2 gap-2">
-              <nuxt-link
-                v-for="item in items"
-                :key="item.title"
-                class="flex flex-col items-center rounded-[6px] bg-gray-50 py-[10px] text-center text-sm hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-[#161617] active:dark:bg-[#E3E5E8] active:dark:text-gray-900 lg:px-4 lg:dark:bg-[#393D40] lg:dark:hover:bg-gray-900"
-                :to="item.to"
-                target="_blank"
-              >
-                <component
-                  :is="item.icon"
-                  class="h-[24px] w-[24px]"
-                />
-                <span>{{ item.title }}</span>
-              </nuxt-link>
-            </div>
-            <div class="mt-2">
-              <div
-                v-if="oldVersion"
-                :url="oldVersion"
-              />
-            </div>
-            <div
-              v-if="!isLargeScreen"
-              class="my-4 flex items-center justify-between text-sm"
-            >
-              <span>
-                {{ t("header.profile.colorScheme") }}
-              </span>
-              <color-mode />
-            </div>
-            <a-button
-              class="lg:mt-2"
-              block
-              @click="() => {
+        <adt-header-profile-menu-content
+          :email="email"
+          :is-authenticated="isAuthenticated"
+          :balance="balance"
+          :days-remaining="daysRemaining"
+          :limit-remaining="limitRemaining"
+          :rate="rate"
+          :replenish="replenish"
+          :show-login="showLogin"
+          @logout="() => {
   $emit('logout');
   profileMenuOpen = false;
 }"
-            >
-              <i-logout class="h-5 w-5" />
-              <span>
-                {{ t("header.profile.logout") }}
-              </span>
-            </a-button>
-          </div>
-        </div>
+        />
       </dropdown-menu-content>
     </dropdown-menu-portal>
   </dropdown-menu-root>
 </template>
-
-<style scoped>
-.gradient-bg{background:linear-gradient(236.46deg,#479fff -2.39%,#0070eb 79.1%)}
-</style>

package/dist/runtime/components/header/ProfileMenuContent.vue

@@ -0,0 +1,227 @@
+<script setup>
+import AStatusBadge from "../Tag.vue";
+import ColorMode from "../ColorMode.vue";
+import AButton from "../button/Button.vue";
+import { PAGES } from "../../shared/constants/pages";
+import IPlus from "#icons/plus.vue";
+import ILogout from "#icons/navigation/logout.vue";
+import { useAppConfig, useI18n } from "#imports";
+import IProfile from "#icons/document/profile.vue";
+import ILock from "#icons/lock.vue";
+import IReceipt from "#icons/receipt/receipt.vue";
+import IBookmark from "#icons/bookmark.vue";
+import IFile from "#icons/file/file.vue";
+import IHistory from "#icons/history.vue";
+import IUsers from "#icons/users/users.vue";
+import IMessage from "#icons/message.vue";
+import { useMediaQuery } from "@vueuse/core";
+const props = defineProps({
+  rate: { type: String, required: true },
+  daysRemaining: { type: Number, required: false, default: 0 },
+  limitRemaining: { type: Number, required: false, default: 0 },
+  balance: { type: Number, required: true },
+  replenish: { type: String, required: false },
+  oldVersion: { type: String, required: false },
+  isAuthenticated: { type: Boolean, required: false },
+  email: { type: String, required: false },
+  showLogin: { type: Boolean, required: false }
+});
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
+const { t } = useI18n();
+const isLargeScreen = useMediaQuery("(min-width: 1024px)");
+defineEmits(["logout"]);
+const items = [
+  {
+    title: t("header.profile.menu.personalInfo"),
+    icon: IProfile,
+    to: `https://${mode}.kz` + PAGES.profile.index
+  },
+  {
+    title: t("header.profile.menu.security"),
+    icon: ILock,
+    to: `https://${mode}.kz` + PAGES.profile.security
+  },
+  {
+    title: t("header.profile.menu.paymentHistory"),
+    icon: IReceipt,
+    to: `https://${mode}.kz` + PAGES.profile.paymentHistory
+  },
+  {
+    title: t("header.profile.menu.favourites"),
+    icon: IBookmark,
+    to: `https://${mode}.kz` + PAGES.profile.favourites
+  },
+  {
+    title: t("header.profile.menu.myReports"),
+    icon: IFile,
+    to: `https://${mode}.kz` + PAGES.profile.reports
+  },
+  {
+    title: t("header.profile.menu.browsingHistory"),
+    icon: IHistory,
+    to: `https://${mode}.kz` + PAGES.profile.browsingHistory
+  },
+  {
+    title: t("header.profile.menu.myGroups"),
+    icon: IUsers,
+    to: `https://${mode}.kz` + PAGES.profile.myGroups
+  },
+  {
+    title: t("header.profile.menu.notes"),
+    icon: IMessage,
+    to: `https://${mode}.kz` + PAGES.profile.notes
+  }
+];
+const onReplenish = () => {
+  if (window) {
+    window.location.href = `https://${mode}.kz/profile?popupBalance=1`;
+  }
+};
+</script>
+
+<template>
+  <div class="max-w-full lg:w-[440px]">
+    <!--    desktop  -->
+    <div
+      class="gradient-bg hidden px-4 py-4 text-white dark:text-gray-900 lg:block lg:rounded-t-[0.5rem] lg:px-8 lg:dark:text-white"
+    >
+      <div class="hidden text-sm lg:block">
+        {{ t("header.profile.tariff") }}
+      </div>
+      <div class="flex items-center justify-between gap-4 lg:mt-2">
+        <div>
+          <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
+          <a-status-badge
+            type="success"
+            class="!px-3 font-semibold text-white"
+            size="sm"
+          >
+            {{ t("header.profile.connected") }}
+          </a-status-badge>
+        </div>
+        <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString("RU-ru") }} ₸</span>
+      </div>
+      <div class="mt-2 hidden items-center justify-between lg:flex">
+        <div class="text-xs">
+          {{ t("header.profile.currentBalance") }}
+          <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString("RU-ru") }} ₸</span>
+        </div>
+        <a-button
+          size="sm"
+          view="outline"
+          variant="ghost"
+          @click="onReplenish"
+        >
+          {{ t("header.profile.addBalance") }}
+        </a-button>
+      </div>
+    </div>
+    <!--    mobile  -->
+    <div class="gradient-bg px-4 py-4 text-white dark:text-gray-900 lg:hidden">
+      <div class="flex justify-between gap-4 lg:mt-2">
+        <div class="flex flex-col items-center">
+          <div class="font-semibold">
+            {{ rate }}
+          </div>
+          <a-status-badge
+            type="success"
+            class="!px-3 font-semibold text-white dark:text-gray-900"
+            size="sm"
+          >
+            {{ t("header.profile.connected") }}
+          </a-status-badge>
+        </div>
+        <div class="flex min-w-[90px] flex-col">
+          <div class="font-semibold">
+            {{ t("header.profile.balance") }}
+          </div>
+          <div class="flex gap-1">
+            <a-status-badge
+              size="sm"
+              class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
+              type="gray"
+            >
+              {{ balance.toLocaleString("RU-ru") }} ₸
+            </a-status-badge>
+            <button
+              class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
+              @click="onReplenish"
+            >
+              <i-plus
+                width="16px"
+                height="16px"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
+      <div class="mb-2 flex justify-between gap-2 lg:hidden">
+        <a-status-badge
+          size="sm"
+          class="w-full py-[6px] font-semibold"
+        >
+          <span>
+            {{ t("header.profile.requests") }}
+          </span>
+          {{ limitRemaining }}
+        </a-status-badge>
+        <a-status-badge
+          size="sm"
+          class="w-full py-[6px] font-semibold"
+        >
+          <span>
+            {{ t("header.profile.daysLeft") }}
+          </span>
+          {{ daysRemaining }}
+        </a-status-badge>
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <nuxt-link
+          v-for="item in items"
+          :key="item.title"
+          class="flex flex-col items-center rounded-[6px] bg-gray-50 py-[10px] text-center text-sm hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-[#161617] active:dark:bg-[#E3E5E8] active:dark:text-gray-900 lg:px-4 lg:dark:bg-[#393D40] lg:dark:hover:bg-gray-900"
+          :to="item.to"
+          target="_blank"
+        >
+          <component
+            :is="item.icon"
+            class="h-[24px] w-[24px]"
+          />
+          <span>{{ item.title }}</span>
+        </nuxt-link>
+      </div>
+      <div class="mt-2">
+        <div
+          v-if="oldVersion"
+          :url="oldVersion"
+        />
+      </div>
+      <div
+        v-if="!isLargeScreen"
+        class="my-4 flex items-center justify-between text-sm"
+      >
+        <span>
+          {{ t("header.profile.colorScheme") }}
+        </span>
+        <color-mode />
+      </div>
+      <a-button
+        class="lg:mt-2"
+        block
+        @click="$emit('logout')"
+      >
+        <i-logout class="h-5 w-5" />
+        <span>
+          {{ t("header.profile.logout") }}
+        </span>
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gradient-bg{background:linear-gradient(236.46deg,#479fff -2.39%,#0070eb 79.1%)}
+</style>

package/dist/runtime/components/header/ProfileMenuContent.vue.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    rate: string;
+    daysRemaining?: number;
+    limitRemaining?: number;
+    balance: number;
+    replenish?: string;
+    oldVersion?: string;
+    isAuthenticated?: boolean;
+    email?: string;
+    showLogin?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    daysRemaining: number;
+    limitRemaining: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;