adata-ui 4.0.36 → 4.0.37

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;

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

@@ -0,0 +1,78 @@
+<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-cols-4 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"
+        >
+          <i-avatar
+            v-if="isAuthenticated"
+            class="shrink-0"
+          />
+          <i-navigation-logout
+            v-else
+            class="shrink-0"
+          />
+          <span
+            v-if="isAuthenticated"
+            class="text-[10px] leading-5"
+            @click="pushProfile"
+          >
+            {{ t("modals.mobile_navigation.type_profile") }}
+          </span>
+          <span
+            v-else
+            class="text-[10px] leading-5"
+            @click="pushProfile"
+          >
+            {{ t("header.login") }}
+          </span>
+        </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;
+    };
+};

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

@@ -0,0 +1,16 @@
+<script setup>
+import { useI18n } from "#imports";
+const emits = defineEmits(["pushMain"]);
+const { t } = useI18n();
+</script>
+
+<template>
+  <nuxt-link
+    to="/"
+    class="flex items-center gap-4 px-4 py-3 bg-gray-50 rounded-md dark:bg-gray-800"
+    @click="emits('pushMain')"
+  >
+    <i-menu />
+    {{ t("modals.mobile_navigation.return_button") }}
+  </nuxt-link>
+</template>

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

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