adata-ui 3.0.2 → 3.1.0

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

@@ -0,0 +1,48 @@
+<script setup>
+import { ref, shallowRef, useI18n, onBeforeUnmount, watch, useAppConfig, useSwitchLocalePath } from "#imports";
+import { onClickOutside } from "@vueuse/core";
+const langSwitcher = ref(null);
+const switchLocalePath = useSwitchLocalePath();
+const { locale, locales, t } = useI18n();
+const isOpen = ref(false);
+onClickOutside(langSwitcher, () => {
+  isOpen.value = false;
+});
+</script>
+
+<template>
+  <div
+    ref="langSwitcher"
+    class="relative"
+  >
+
+    <button
+      class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
+      @click="isOpen = true"
+    >
+      {{ t(`lang.${locale}.short`) }}
+    </button>
+    <div
+      v-show="isOpen"
+      :class="['absolute z-20 bg-white shadow rounded-md p-2 right-0 lg:right-auto lg:left-0 left-auto flex flex-col dark:bg-gray-900']"
+    >
+      <nuxt-link
+        v-for="loc in locales"
+        :class="[
+  'text-sm cursor-pointer px-4 py-2.5 flex justify-between',
+  { 'text-primary bg-deepblue-500/5': locale === loc.code }
+]"
+        :to="switchLocalePath(loc?.code || loc)"
+        @click="isOpen = false"
+      >
+        {{ t(`lang.${loc?.code || loc}.long`) }}
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.shadow {
+  box-shadow: 0 1px 8px 0 rgba(139, 146, 156, 0.3019607843);
+}
+</style>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from "#imports";
+defineProps({
+  item: { type: Object, required: true },
+  someHovered: { type: Boolean, required: true }
+});
+const hover = ref(false);
+</script>
+
+<template>
+  <nuxt-link
+    :to="item.to"
+    :class="{ 'opacity-30': !hover && someHovered }"
+    class="flex items-center gap-4 px-2.5 py-2 hover:bg-gray-50 rounded-lg dark:hover:bg-gray-800 normal-case transition-all "
+    @mouseenter="hover = true"
+    @mouseleave="hover = false"
+  >
+    <div class="min-w-8 h-8 rounded-lg flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
+      <component
+        :is="item.icon"
+        class="h-5 w-5"
+      />
+    </div>
+    <span class="text-sm text-deepblue-900 dark:text-[#E3E5E8]">{{ item.title }}</span>
+  </nuxt-link>
+</template>

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

@@ -0,0 +1,7 @@
+import type { NavChildItem } from '~/src/runtime/components/header/types';
+type __VLS_Props = {
+    item: NavChildItem;
+    someHovered: 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/NavCard.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from "#imports";
+defineProps({
+  item: { type: null, required: true },
+  size: { type: String, required: true },
+  someHovered: { type: Boolean, required: true }
+});
+const hover = ref(false);
+</script>
+
+<template>
+  <nuxt-link
+    :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>
+</template>

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

@@ -0,0 +1,8 @@
+import type { NavChildItem } from '#adata-ui/components/navigation/header/types';
+type __VLS_Props = {
+    item: NavChildItem;
+    size: 'lg' | 'sm';
+    someHovered: 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/NavList.vue

@@ -0,0 +1,101 @@
+<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 },
+  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"
+    :class="{ 'rounded-md bg-gray-50 p-2 dark:bg-gray-800': currentModule }"
+  >
+    <div
+      class="flex items-center gap-2 pl-[10px]"
+    >
+      <p class="text-sm font-semibold dark:text-white">
+        {{ title }}
+      </p>
+      <adt-tag
+        v-if="badge"
+        type="primary"
+        class="w-fit"
+        size="xs"
+        view="inverted"
+      >
+        NEW
+      </adt-tag>
+    </div>
+    <ul class="flex flex-col gap-2">
+      <li
+        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
+            :is="item.icon"
+            class="size-[18px] text-white dark:text-gray-900"
+          />
+        </div>
+        <nuxt-link
+          v-if="item.to"
+          :to="item.to"
+          class="inline-block normal-case w-full cursor-pointer align-middle text-sm font-semibold text-gray-600 dark:text-gray-200"
+          exact-active-class="text-blue-700 dark:text-blue-500"
+        >
+          {{ item.title }}
+        </nuxt-link>
+        <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>

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

@@ -0,0 +1,17 @@
+import type { Component } from '@nuxt/schema';
+interface NavList {
+    title: string;
+    to: string;
+    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

@@ -0,0 +1,369 @@
+<script setup>
+import { PAGES } from "../../shared/constants/pages";
+import NavList from "./NavList.vue";
+import CardGallery from "./CardGallery.vue";
+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";
+import IUsers from "#icons/users/users.vue";
+import IGlobe from "#icons/globe.vue";
+import IScale from "#icons/scale.vue";
+import ILinkChanin from "#icons/link-chain.vue";
+import IBlock from "#icons/block.vue";
+import IDollar from "#icons/currency/dollar.vue";
+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/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";
+import IArrowGraphUp from "#icons/arrow/arrow-graph-up.vue";
+import IClipboardText from "#icons/clipboard-text.vue";
+import IMedal from "#icons/medal.vue";
+import ICompany from "#icons/company.vue";
+import IHandshake from "#icons/handshake.vue";
+import ISviazi from "#icons/sviazi.vue";
+import ICalculator from "#icons/calculator.vue";
+import IId from "#icons/document/id.vue";
+import IProfile from "#icons/document/profile.vue";
+const props = defineProps({
+  animation: { type: String, required: false, default: "next" },
+  index: { type: Number, required: false, default: 0 },
+  url: { type: String, required: false, default: "" }
+});
+const { t } = useI18n();
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
+const pageUrl = useRequestURL();
+defineEmits(["outerClick", "mouseOver"]);
+const filteredItems = [
+  {
+    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`
+      }
+    ]
+  },
+  {
+    key: "pk",
+    name: t("header.products.counterparties.label"),
+    icon: IUsersThree,
+    to: `https://pk.${mode}.kz`,
+    items: [
+      {
+        title: t("header.products.counterparties.items.counterparty.title"),
+        subtitle: t("header.products.counterparties.items.counterparty.subtitle"),
+        icon: ISearch,
+        to: `https://pk.${mode}.kz` + PAGES.pk.main
+      },
+      {
+        title: t("header.products.counterparties.items.unloading.title"),
+        subtitle: t("header.products.counterparties.items.unloading.subtitle"),
+        icon: IArrowCircleDown,
+        to: `https://pk.${mode}.kz` + PAGES.pk.unload
+      },
+      {
+        title: t("header.products.counterparties.items.wholesale.title"),
+        subtitle: t("header.products.counterparties.items.wholesale.subtitle"),
+        icon: IUsers,
+        to: `https://pk.${mode}.kz` + PAGES.pk.employees
+      },
+      {
+        title: t("header.products.counterparties.items.foreign.title"),
+        subtitle: t("header.products.counterparties.items.foreign.subtitle"),
+        icon: IGlobe,
+        to: `https://pk.${mode}.kz` + PAGES.pk.foreign
+      },
+      {
+        title: t("header.products.counterparties.items.compare.title"),
+        icon: IScale,
+        to: `https://pk.${mode}.kz` + PAGES.pk.compare
+      },
+      {
+        title: t("header.products.counterparties.items.networks.title"),
+        icon: ILinkChanin,
+        to: `https://pk.${mode}.kz` + PAGES.pk.connections
+      },
+      {
+        title: t("header.products.counterparties.items.sanction.title"),
+        icon: IBlock,
+        to: `https://pk.${mode}.kz` + PAGES.pk.sanctions
+      },
+      {
+        title: t("header.products.counterparties.items.offshore.title"),
+        icon: IDollar,
+        to: `https://pk.${mode}.kz` + PAGES.pk.offshore
+      }
+    ]
+  },
+  {
+    key: "work",
+    name: t("header.products.jobs.label"),
+    icon: IWorkBag,
+    items: [
+      {
+        title: t("header.products.jobs.items.vacancies.title"),
+        icon: IWorkBag,
+        subtitle: t("header.products.jobs.items.vacancies.subtitle"),
+        to: `https://work.${mode}.kz` + PAGES.work.vacancy
+      },
+      {
+        title: t("header.products.jobs.items.resume.title"),
+        subtitle: t("header.products.jobs.items.resume.subtitle"),
+        icon: IHdocument,
+        to: `https://work.${mode}.kz` + PAGES.work.summary
+      }
+    ]
+  },
+  {
+    key: "tenders",
+    name: t("header.products.tenders.label"),
+    icon: IReceipt,
+    to: `https://tender.${mode}.kz`,
+    items: [
+      {
+        title: t("header.products.tenders.items.tenders.title"),
+        subtitle: t("header.products.tenders.items.tenders.subtitle"),
+        icon: ISearch,
+        to: `https://tender.${mode}.kz` + PAGES.tender.main
+      },
+      {
+        title: t("header.products.tenders.items.procurement.title"),
+        subtitle: t("header.products.tenders.items.procurement.subtitle"),
+        icon: IHcheck,
+        to: `https://tender.${mode}.kz` + PAGES.tender.plans
+      },
+      {
+        title: t("header.products.tenders.items.contracts.title"),
+        subtitle: t("header.products.tenders.items.contracts.subtitle"),
+        icon: IFile,
+        to: `https://tender.${mode}.kz` + PAGES.tender.contracts
+      }
+    ]
+  },
+  {
+    key: "fines",
+    name: t("header.products.fines.label"),
+    icon: ICar,
+    items: [
+      {
+        title: t("header.products.fines.items.fines.title"),
+        subtitle: t("header.products.fines.items.fines.subtitle"),
+        icon: ICheckCircle,
+        to: `https://avto.${mode}.kz` + PAGES.fines.main
+      },
+      {
+        title: t("header.products.fines.items.auto.title"),
+        subtitle: t("header.products.fines.items.auto.subtitle"),
+        icon: ICar,
+        to: `https://avto.${mode}.kz` + PAGES.fines.avto
+      },
+      {
+        title: t("header.products.fines.items.wholesaleAuto.title"),
+        subtitle: t("header.products.fines.items.wholesaleAuto.subtitle"),
+        icon: ITruck,
+        to: `https://avto.${mode}.kz` + PAGES.fines.bulk
+      }
+    ]
+  },
+  {
+    key: "analytics",
+    name: t("header.products.analytics.label"),
+    icon: IArrowGraphUp,
+    items: [
+      {
+        title: t("header.products.analytics.items.procurement.title"),
+        subtitle: t("header.products.analytics.items.procurement.subtitle"),
+        icon: IClipboardText,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.analysis
+      },
+      {
+        title: t("header.products.analytics.items.activity.title"),
+        subtitle: t("header.products.analytics.items.activity.subtitle"),
+        icon: IArrowGraphUp,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.index
+      },
+      {
+        title: t("header.products.analytics.items.rate.title"),
+        subtitle: t("header.products.analytics.items.rate.subtitle"),
+        icon: IMedal,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.rating
+      },
+      {
+        title: t("header.products.analytics.items.subjects.title"),
+        subtitle: t("header.products.analytics.items.subjects.subtitle"),
+        icon: ICompany,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.business
+      }
+    ]
+  },
+  {
+    key: "fea",
+    name: t("header.products.fea.label"),
+    icon: IGlobe,
+    items: [
+      {
+        title: t("header.products.fea.items.i.t"),
+        subtitle: t("header.products.fea.items.i.st"),
+        icon: IHandshake,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.t
+      },
+      {
+        title: t("header.products.fea.items.o.t"),
+        subtitle: t("header.products.fea.items.o.st"),
+        icon: ISviazi,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.o
+      },
+      {
+        title: t("header.products.fea.items.cp.t"),
+        subtitle: t("header.products.fea.items.cp.st"),
+        icon: ITruck,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.cp
+      },
+      {
+        title: t("header.products.fea.items.ca.t"),
+        subtitle: t("header.products.fea.items.ca.st"),
+        icon: ICalculator,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.ca
+      },
+      {
+        title: t("header.products.fea.items.tr.t"),
+        subtitle: t("header.products.fea.items.tr.st"),
+        icon: IGlobe,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.tr
+      }
+    ]
+  },
+  {
+    key: "compliance",
+    name: t("header.products.compliance.label"),
+    icon: IId,
+    items: [
+      {
+        title: t("header.products.compliance.items.l.t"),
+        subtitle: t("header.products.compliance.items.l.st"),
+        icon: IProfile,
+        to: `https://ac.${mode}.kz/compliance`
+      }
+    ]
+  }
+];
+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>
+  <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, 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"
+                  :icon="module.icon"
+                />
+              </div>
+              <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"
+                  :icon="module.icon"
+                />
+              </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"
+                  :nav-list="module.items"
+                  :to="module.to"
+                  :icon="module.icon"
+                  badge
+                />
+              </div>
+            </div>
+            <card-gallery class="hidden xl:block" />
+          </div>
+        </div>
+      </transition>
+      <button
+        class="absolute right-8 top-4"
+        @click="$emit('outerClick')"
+      >
+        <i-x-mark
+          width="32"
+          height="32"
+        />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.next-enter-from,
+.next-leave-to {
+  opacity: 0;
+  transform: translateX(30%);
+  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(-30%);
+}
+
+.prev-enter-from,
+.prev-leave-to {
+  position: absolute;
+  opacity: 0;
+  transform: translateX(-30%);
+}
+
+.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(30%);
+}
+</style>

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    animation?: string;
+    index?: number;
+    url?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    index: number;
+    animation: string;
+    url: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;