adata-ui 3.0.2 → 3.1.0

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

@@ -0,0 +1,56 @@
+<script setup>
+import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui";
+import IChevronDown from "#icons/arrow/chevron-down.vue";
+import { ref } from "#imports";
+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 profileMenuOpen = ref(false);
+defineEmits(["logout"]);
+</script>
+
+<template>
+  <dropdown-menu-root v-model:open="profileMenuOpen">
+    <dropdown-menu-trigger>
+      <div
+        v-show="isAuthenticated"
+        class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex"
+        @click.stop="profileMenuOpen = true"
+      >
+        <span class="whitespace-nowrap">{{ email }}</span>
+        <i-chevron-down :class="{ 'rotate-180': profileMenuOpen }" />
+      </div>
+    </dropdown-menu-trigger>
+    <dropdown-menu-portal>
+      <dropdown-menu-content
+        side="bottom"
+        align="end"
+        :side-offset="20"
+        class="shadow-md"
+      >
+        <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;
+}"
+        />
+      </dropdown-menu-content>
+    </dropdown-menu-portal>
+  </dropdown-menu-root>
+</template>

package/dist/runtime/components/header/ProfileMenu.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;

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

@@ -0,0 +1,228 @@
+<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-[300px]">
+    <!--    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 class="flex items-center justify-between lg:w-full">
+          <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 lg:flex-col">
+        <div class="items-center justify-between lg:flex lg:w-full 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"
+          class="w-full mt-4"
+          view="outline"
+          variant="ghost"
+          @click="onReplenish"
+        >
+          <i-plus />
+          {{ 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 lg:flex lg:flex-col">
+        <nuxt-link
+          v-for="item in items"
+          :key="item.title"
+          class="hover:text-blue-700 dark:hover:text-blue-500 flex flex-col lg:flex-row lg:gap-3 items-center rounded-[6px] bg-gray-50 lg:bg-white lg:dark:bg-[#232324] lg:hover:bg-blue-100 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: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>
+      <div
+        class="flex items-center justify-center lg:justify-start gap-3 pb-2 pt-4 px-4 cursor-pointer text-red-500 hover:text-red-700 border-t border-gray-200"
+        @click="$emit('logout')"
+      >
+        <i-logout class="h-5 w-5" />
+        <span>
+          {{ t("header.profile.logout") }}
+        </span>
+      </div>
+    </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;

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

@@ -0,0 +1,152 @@
+<script setup>
+import { computed, onBeforeMount, ref } from "vue";
+import AStatusBadge from "../Tag.vue";
+import { useCookie } from "#app";
+import Usd from "#icons/currency/usd.vue";
+import Eur from "#icons/currency/eur.vue";
+import Rub from "#icons/currency/rub.vue";
+import Yuan from "#icons/currency/yuan.vue";
+import XMark from "#icons/x-mark.vue";
+import Down from "#icons/currency/down.vue";
+import { useI18n, useAppConfig } from "#imports";
+const { t } = useI18n();
+const props = defineProps({
+  daysRemaining: { type: Number, required: true },
+  limitRemaining: { type: Number, required: true },
+  moduleName: { type: String, required: false, default: "counterparty" },
+  isAuthenticated: { type: Boolean, required: true }
+});
+const currencies = ref([]);
+const systemMessage = ref(null);
+const isOpenNotification = ref(false);
+const message = useCookie("message");
+const appConfig = useAppConfig();
+const env = appConfig.adataUI.mode;
+const mode = computed(() => {
+  if (props.moduleName === "pk") {
+    return "counterparty";
+  } else {
+    return props.moduleName;
+  }
+});
+const fetchCurrencies = async () => {
+  try {
+    const response = await fetch(`https://users.adata.kz/api/v1/information/currency`);
+    const { data } = await response.json();
+    if (data.currencies) {
+      currencies.value = data.currencies;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+const Symbols = {
+  USD: Usd,
+  EUR: Eur,
+  RUB: Rub,
+  CNY: Yuan
+};
+const computedClass = (state) => state === "UP" ? "text-green-400 rotate-180" : "text-red-400";
+const fetchNotification = async () => {
+  try {
+    if (message.value === void 0) {
+      const link = `https://users.${env}.kz/api/v1/system-messages/active-list/?module_name=${mode.value}`;
+      const response = await fetch(link);
+      const { data } = await response.json();
+      if (data.details.length) {
+        systemMessage.value = data.details[0].message;
+        isOpenNotification.value = true;
+      }
+    }
+  } catch (e) {
+    console.error(e.message);
+  }
+};
+onBeforeMount(() => {
+  fetchNotification();
+  fetchCurrencies();
+});
+const closeMessage = () => {
+  message.value = false;
+  isOpenNotification.value = false;
+};
+</script>
+
+<template>
+  <div
+    class="min-h-[40px]"
+    :class="[isOpenNotification && systemMessage ? '' : 'hidden lg:block']"
+  >
+    <transition name="fade">
+      <div
+        v-if="isOpenNotification && systemMessage"
+        class="bg-[#FFF5E6] px-2 py-3 text-[#FCA204] dark:bg-[#161617] md:px-0"
+      >
+        <div class="a-container flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <i-info-circle
+              class="max-h-[16px] w-full max-w-[16px] stroke-orange-500 dark:stroke-orange-500"
+            />
+            <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
+          </div>
+          <x-mark
+            class="max-h-[16px] w-full max-w-[16px] cursor-pointer stroke-orange-500"
+            @click="closeMessage"
+          />
+        </div>
+      </div>
+    </transition>
+    <div
+      v-if="!isOpenNotification || !systemMessage"
+      class="hidden min-h-10 bg-gray-50 dark:bg-gray-950 lg:block"
+    >
+      <div class="a-container flex justify-between py-2 text-sm">
+        <div class="flex items-center">
+          <div
+            v-for="currency in currencies"
+            :key="currency.currency"
+            class="mr-4 flex gap-2"
+          >
+            <div class="flex items-center dark:text-white">
+              <component
+                :is="Symbols[currency.currency]"
+                class="mr-2 size-4 rounded-sm border border-solid border-[#E0E3E6] dark:border-[#2B2B2C]"
+              />
+              {{ currency.buy }}
+              <div :class="computedClass(currency.sell_state)">
+                <down />
+              </div>
+            </div>
+            <div class="flex items-center dark:text-white">
+              {{ currency.sell }}
+              <div :class="computedClass(currency.sell_state)">
+                <down />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="isAuthenticated"
+          class="flex items-center gap-5"
+        >
+          <div v-if="limitRemaining != null || limitRemaining != void 0">
+            <span class="mr-2 text-xs">{{ t("header.top.requestLimit") }}</span>
+            <a-status-badge size="sm">
+              {{ limitRemaining }}
+            </a-status-badge>
+          </div>
+          <div v-if="daysRemaining">
+            <span class="mr-2 text-xs">{{ t("header.top.daysLeft") }}</span>
+            <a-status-badge size="sm">
+              {{ limitRemaining }}
+            </a-status-badge>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,.fade-leave-active{transition:.1s ease}.fade-enter,.fade-leave-to{opacity:0;top:0}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    daysRemaining: number;
+    limitRemaining: number;
+    moduleName?: string;
+    isAuthenticated: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    moduleName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/header/types.d.ts

@@ -0,0 +1,19 @@
+export type NavChild = {
+    key: string;
+    name: string;
+    items: NavChildItem[];
+};
+export type NavChildItem = {
+    title: string;
+    subtitle?: string;
+    icon?: any;
+    to: string;
+};
+export type NavLink = {
+    label: string;
+    to: string;
+    items?: NavChild[];
+    options?: any;
+    icon?: any;
+};
+export type ProjectKeys = 'counterparty' | 'pk' | 'work' | 'tenders' | 'fines' | 'analytics' | 'fea' | 'compliance';

package/dist/runtime/components/header-mobile/HeaderMobile.vue

@@ -0,0 +1,53 @@
+<script setup>
+import IAdata from "#icons/logo/adata.vue";
+import ILogo from "#icons/logo/logo.vue";
+import ISearch from "#icons/search.vue";
+const props = defineProps({
+  mobileHeaderType: { type: String, required: true },
+  langIsOn: { type: Boolean, required: true },
+  module: { type: String, required: true }
+});
+const emit = defineEmits(["goToAnotherModule", "search"]);
+</script>
+
+<template>
+  <section
+    id="mobile-header"
+    class="grow lg:hidden"
+  >
+    <div
+      v-if="mobileHeaderType === 'default'"
+      class="flex justify-between"
+    >
+      <div>
+        <slot name="burger" />
+      </div>
+      <nuxt-link
+        class="text-deepblue dark:text-[#E3E5E8]"
+        @click="emit('goToAnotherModule')"
+      >
+        <i-adata
+          :font-controlled="false"
+          filled
+        />
+      </nuxt-link>
+      <div />
+    </div>
+    <div
+      v-else-if="mobileHeaderType === 'search'"
+      class="flex w-full items-center gap-2 bg-white dark:bg-gray-900 lg:hidden"
+    >
+      <i-logo
+        class="dark:text-gray-200"
+        @click="emit('goToAnotherModule')"
+      />
+      <button
+        class="flex w-full items-center gap-2 rounded bg-gray-50 px-4 py-1.5 dark:bg-gray-800 dark:text-gray-500"
+        @click="emit('search')"
+      >
+        <i-search />
+        <span class="body-400">Найти</span>
+      </button>
+    </div>
+  </section>
+</template>

package/dist/runtime/components/header-mobile/HeaderMobile.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    mobileHeaderType: 'default' | 'search';
+    langIsOn: boolean;
+    module: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    burger?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/mobile-navigation/BottomNavigation.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { useAppConfig, useI18n } from "#imports";
+const props = defineProps({
+  items: { type: Array, required: true },
+  hasNotification: { type: Boolean, required: false },
+  isAuthenticated: { type: Boolean, required: true }
+});
+const activeModel = defineModel({ type: String, ...{ default: "" } });
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
+const { t } = useI18n();
+function pushItem(value) {
+  if (value === activeModel.value) value = "";
+  activeModel.value = value;
+}
+function pushProfile() {
+  if (props.isAuthenticated) {
+    pushItem("profile");
+  } else {
+    const fullPath = encodeURIComponent(window.location.toString());
+    location.href = `https://id.${mode}.kz/?url=${fullPath}`;
+  }
+}
+</script>
+
+<template>
+  <div class="sticky bottom-0 z-100 lg:hidden">
+    <div class="w-full border-t border-gray-500/50 bg-white dark:bg-gray-900">
+      <div class="grid w-full grid-flow-col auto-cols-fr items-center">
+        <slot>
+          <button
+            v-for="item in items"
+            :key="item"
+            class="h-16 w-full flex flex-col justify-center items-center"
+            @click="pushItem(item.value)"
+          >
+            <component
+              :is="item.icon"
+              class="size-6 shrink-0"
+            />
+            <span class="text-[10px] leading-5">{{ t(item.label) }}</span>
+          </button>
+        </slot>
+        <slot
+          name="notifications"
+          :items="items"
+        />
+        <button
+          class="h-16 w-full flex flex-col justify-center items-center"
+          @click="pushProfile"
+        >
+          <template v-if="isAuthenticated">
+            <i-avatar class="shrink-0" />
+            <span class="text-[10px] leading-5 mt-1">
+              {{ t("modals.mobile_navigation.type_profile") }}
+            </span>
+          </template>
+          <template v-else>
+            <i-navigation-logout class="shrink-0" />
+            <span class="text-[10px] leading-5 mt-1">
+              {{ t("header.login") }}
+            </span>
+          </template>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/mobile-navigation/BottomNavigation.vue.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    items: T[];
+    hasNotification?: boolean;
+    isAuthenticated: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare var __VLS_1: {}, __VLS_7: {
+    items: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    notifications?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};