adata-ui 2.1.40-beta.10 → 2.1.40-beta.12

package/components/forms/toggle/AToggle.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import {Switch} from "@headlessui/vue";
-import {twMerge, twJoin} from "tailwind-merge";
-
 import type {Props} from "./types";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge';
+import {Switch} from "@headlessui/vue";
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,

package/components/forms/toggle/AToggleV2.vue

@@ -15,8 +15,8 @@ const props = withDefaults(defineProps<{
 const model = defineModel<boolean>({ default: false })
 
 const SIZE: Record<Size, { track: string, knob: string, on: string, off: string, text: string }> = {
-  sm: { track: 'h-5 w-9', knob: 'size-4', on: 'translate-x-4', off: 'translate-x-0.5', text: 'text-xs' },
-  md: { track: 'h-6 w-11', knob: 'size-5', on: 'translate-x-5', off: 'translate-x-0.5', text: 'text-sm' },
+  sm: { track: 'h-5 w-9', knob: 'size-4', on: 'translate-x-4', off: 'translate-x-0.5', text: 'text-body-sm-medium' },
+  md: { track: 'h-6 w-11', knob: 'size-5', on: 'translate-x-5', off: 'translate-x-0.5', text: 'text-body-md-medium' },
 }
 const s = computed(() => SIZE[props.size])
 
@@ -39,7 +39,7 @@ function toggle() {
   >
     <span
       v-if="label"
-      class="font-medium text-gray-600 transition-colors group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100"
+      class="text-gray-600 transition-colors group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100"
       :class="s.text"
     >
       {{ label }}

package/components/modals/AnotherDeviceModal.vue

@@ -30,7 +30,7 @@ function onToMain() {
         {{ t('modals.another_device_modal.info') }}
       </p>
       <div
-        class="body-400 flex gap-2 rounded-lg border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
+        class="body-400 flex gap-2 rounded-md border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
       >
         <a-icon-warning-triangle
           class="size-4 shrink-0"

package/components/modals/ContactsMobileModel.vue

@@ -170,7 +170,7 @@ watch(tab, (e) => {
       <nuxt-link
         to="/"
         @click="emits('pushMain')"
-        class="flex items-center gap-4 rounded-md bg-gray-50 px-4 py-3 dark:bg-gray-800"
+        class="flex items-center gap-4 rounded-sm bg-gray-50 px-4 py-3 dark:bg-gray-800"
       >
         <a-icon-menu />
         {{ t('modals.mobile_navigation.return_button') }}

package/components/modals/ContentNavigationModal.vue

@@ -1,355 +1,99 @@
 <script setup lang="ts">
+import type { Component } from 'vue'
+import { useCurrentModule } from '#adata-ui/composables/projectState'
+import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
 
-import {ref} from "vue";
-import IconSearch from "#adata-ui/icons/search.vue";
-import {PAGES} from '#adata-ui/shared/constans/pages'
-import IconScales from "#adata-ui/icons/scales/scale.vue";
-import IconLink from "#adata-ui/icons/link-chain.vue";
-import IconUsers from "#adata-ui/icons/users.vue";
-import IconGlobe from "#adata-ui/icons/globe.vue";
-import IconBlock from "#adata-ui/icons/block.vue";
-import IconDollar from "#adata-ui/icons/currency/currency-dollar.vue";
-import IconDocument from "#adata-ui/icons/hdocument.vue";
-import IconArrowCircle from "#adata-ui/icons/arrow/arrow-circle-down.vue";
-import IconWork from "#adata-ui/icons/work-bag.vue";
-import IconFile from "#adata-ui/icons/file/file.vue";
-import IconCheck from "#adata-ui/icons/hcheck.vue";
-import IconCheckCircle from "#adata-ui/icons/check/check-circle.vue";
-import IconCar from "#adata-ui/icons/car.vue";
-import IconTruck from "#adata-ui/icons/truck.vue";
-import IconArrowGraph from "#adata-ui/icons/arrow/arrow-graph-up.vue";
-import IconCompany from "#adata-ui/icons/company.vue";
-import IconMedal from "#adata-ui/icons/medal.vue";
-import IconProfile from "#adata-ui/icons/profile.vue";
-import Connections from "#adata-ui/icons/sviazi.vue";
-import {useCurrentModule} from "#adata-ui/composables/projectState";
-import IconCalc from '#adata-ui/icons/calculator.vue'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import {
-  AIconAkimat,
-  AIconCurrencyTenge,
-  AIconExcelIcon,
-  AIconFiles, AIconSearch,
-  AIconUsers,
-  AIconWarningTriangle
-} from '#components'
-import MapPinRect from '#adata-ui/icons/map/map-pin-rect.vue'
-import ChartBar from '#adata-ui/icons/chart-bar.vue'
-import Bank from '#adata-ui/icons/bank.vue'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import MapPaper from '#adata-ui/icons/map-paper.vue'
-import AiAssistant from '#adata-ui/icons/ai-assistant.vue'
-import Tasks from '#adata-ui/icons/tasks.vue'
-import HotLine from '#adata-ui/icons/hot-line.vue'
-import Sanctions from '#adata-ui/icons/sanctions.vue'
-import CheckSb from '#adata-ui/icons/check-sb.vue'
-type Emits = {
-  (e: 'pushMain'): void
+interface NavItem {
+  title: string
+  icon: Component
+  to: string
 }
-const isOpen = ref(false)
-const tab = ref(useCurrentModule().value)
-const { myLayer }: any = useAppConfig()
-const urls = useUrls()
 
-const { t, locale } = useI18n()
+interface Emits {
+  (e: 'pushMain'): void
+}
 const emits = defineEmits<Emits>()
-const mode = myLayer.mode
-
-const tabOptions = [
-  {
-    name: 'header.products.counterparties.label',
-    key: 'pk',
-  },
-  {
-    name: 'header.products.fines.label',
-    key: 'fines',
-  },
-  {
-    name: 'header.products.jobs.label',
-    key: 'work',
-  },
-  {
-    name: 'header.products.fea.label',
-    key: 'fea',
-  },
-  {
-    name: 'header.products.tenders.label',
-    key: 'tenders',
-  },
-  {
-    name: 'header.products.edo.label',
-    key: 'edo',
-  },
-  {
-    name: 'header.products.compliance.label',
-    key: 'compliance',
-  },
 
-  {
-    name: 'header.products.analytics.label',
-    key: 'analytics',
-  },
+const open = defineModel<boolean>({ default: false })
 
+const { t } = useI18n()
+const modules = useHeaderNavigationLinks()
 
+const initialKey = useCurrentModule().value
+const tab = ref<string>(
+  initialKey && modules.value.some(module => module.key === initialKey)
+    ? initialKey
+    : (modules.value[0]?.key ?? 'pk'),
+)
 
-]
-const sideLinks = <any>{
-  edo: [
-    {
-      label: 'header.products.edo.label',
-      icon: AIconFiles,
-      link: urls.edo_docs,
-    }
-  ],
-  pk: [
-    {
-      icon: IconSearch,
-      label: 'header.products.counterparties.items.counterparty.title',
-      link: urls.pk + PAGES.pk.main
-    },
-    {
-      icon: IconScales,
-      label: 'header.products.counterparties.items.compare.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.compare : urls.pk + PAGES.pk.compare
-    },
-    {
-      icon: IconLink,
-      label: 'header.products.counterparties.items.networks.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + '/search-connections/check' : urls.pk + PAGES.pk.connections
-    },
-    {
-      icon: IconUsers,
-      label: 'header.products.counterparties.items.wholesale.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.employees : urls.pk + PAGES.pk.employees
-    },
-    {
-      icon: IconGlobe,
-      label: 'header.products.counterparties.items.foreign.title',
-      link: urls.pk + PAGES.pk.foreign
-    },
-    {
-      icon: IconBlock,
-      label: 'header.products.counterparties.items.sanction.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.sanctions : urls.pk + PAGES.pk.sanctions
-    },
-    {
-      icon: IconDollar,
-      label: 'header.products.counterparties.items.offshore.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.offshore : urls.pk + PAGES.pk.offshore
-    },
-    // {
-    //   icon: IconDocument,
-    //   label: "Экспресс проверка",
-    //   link: "#"
-    // },
-    {
-      icon: IconArrowCircle,
-      label: 'header.products.counterparties.items.unloading.title',
-      link: urls.pk + PAGES.pk.unload
-    }
-  ],
-  work: [
-    {
-      icon: IconWork,
-      label: 'header.products.jobs.items.vacancies.title',
-      link: urls.work + PAGES.work.vacancy
-    },
-    {
-      icon: IconDocument,
-      label: 'header.products.jobs.items.resume.title',
-      link: urls.work + PAGES.work.summary
-    },
-  ],
-  tenders: [
-    {
-      icon: AIconUsers,
-      label: t('header.products.tenders.items.customers.title'),
-      link: urls.zakupki + PAGES.tender.customers,
-    },
-    {
-      icon: AIconAkimat,
-      label: t('header.products.tenders.items.akimat.title'),
-      link: urls.zakupki + PAGES.tender.akimat,
-    },
-    {
-      icon: AIconWarningTriangle,
-      label: 'header.products.tenders.items.tru.title',
-      link: urls.zakupki + PAGES.tender.tru
-    },
-    {
-      icon: AIconCurrencyTenge,
-      label: 'header.products.tenders.items.price.title',
-      link: urls.zakupki + PAGES.tender.price
-    },
-    {
-      icon: AIconExcelIcon,
-      label: 'header.products.tenders.items.constructor.title',
-      link: urls.zakupki + PAGES.tender.constructor
-    },
-    {
-      icon: AIconSearch,
-      label: 'header.products.tenders.items.monitoring.title',
-      link: urls.tender
-    }
-  ],
-  analytics: [
-    // {
-    //   icon: IconSearch,
-    //   label: 'header.products.analytics.items.clients.title',
-    //   link: myLayer.analyticsUrl + PAGES.analytics.clients
-    // },
-    // {
-    //   icon: IconCheck,
-    //   label: 'header.products.analytics.items.procurement.title',
-    //   link: urls.analyticsNew + PAGES.analytics.main
-    // },
-    {
-      icon: IconArrowGraph,
-      label: 'header.products.analytics.items.activity.title',
-      link: urls.analytics + PAGES.analytics.index
-    },
-    {
-      icon: IconCompany,
-      label: 'header.products.analytics.items.subjects.title',
-      link: urls.analytics + PAGES.analytics.business
-    },
-    {
-      icon: IconMedal,
-      label: 'header.products.analytics.items.rate.title',
-      link: urls.analytics + PAGES.analytics.rating
-    }
-  ],
-  fines: [
-    {
-      icon: IconCheckCircle,
-      label: 'header.products.fines.items.fines.title',
-      link: urls.avto + PAGES.fines.main
-    },
-    {
-      icon: IconCar,
-      label: 'header.products.fines.items.auto.title',
-      link: urls.avto + PAGES.fines.avto
-    },
-    // {
-    //   icon: IconTruck,
-    //   label: 'header.products.fines.items.wholesaleAuto.title',
-    //   link: myLayer.avtoUrl + PAGES.fines.bulk
-    // }
-  ],
-  fea: [
-    {
-      label: 'header.products.fea.items.i.t',
-      icon: IconSearch,
-      link: `${urls.tnved}${PAGES.fea.t}`
-    },
-    {
-      label: 'header.products.fea.items.o.t',
-      icon: Connections,
-      link: `${urls.tnved}${PAGES.fea.o}`
-    },
-    {
-      label: 'header.products.fea.items.cp.t',
-      icon: IconFile,
-      link: `${urls.tnved}${PAGES.fea.cp}`
-    },
-    {
-      label: 'header.products.fea.items.ca.t',
-      icon: IconCalc,
-      link: `${urls.tnved}${PAGES.fea.ca}`
-    },
-    {
-      label: 'header.products.fea.items.tr.t',
-      icon: IconGlobe,
-      link: `${urls.tnved}${PAGES.fea.tr}`
-    },
-    {
-      label: 'header.products.fea.items.importerMap.t',
-      icon: MapPinRect,
-      link: `${urls.tnved}${PAGES.fea.importerMap}`
-    },
-    {
-      label: 'header.products.fea.items.containers.t',
-      icon: MapPaper,
-      link: `${urls.tnved}${PAGES.fea.containers}`
-    }
-  ],
-  compliance: [
-    {
-      label: 'header.products.compliance.items.assistant.t',
-      icon: AiAssistant,
-      link: urls.compliancemain + PAGES.compliance.assistant
-    },
-    {
-      label: 'header.products.compliance.items.assignments.t',
-      icon: Tasks,
-      link: urls.compliancemain + PAGES.compliance.assignments
-    },
-    {
-      label: 'header.products.compliance.items.hotline.t',
-      icon: HotLine,
-      link: urls.compliancemain + PAGES.compliance.hotline
-    },
-    {
-      label: 'header.products.compliance.items.sanctions.t',
-      icon: Sanctions,
-      link: urls.compliancemain + PAGES.compliance.sanctions
-    },
-    {
-      label: 'header.products.compliance.items.suppliers.t',
-      icon: IconProfile,
-      link: urls.compliancemain + PAGES.compliance.suppliers
-    },
-    {
-      label: 'header.products.compliance.items.sb.t',
-      icon: CheckSb,
-      link: urls.compliancemain + PAGES.compliance.sb
-    }
-  ]
-}
-const currentLinks = ref(sideLinks[tab.value])
+const tabOptions = computed(() =>
+  modules.value.map(module => ({ key: module.key, name: module.name })),
+)
 
-watch(tab, (e) => {
-  if (e) {
-    currentLinks.value = sideLinks[e]
-  }
+const currentLinks = computed<NavItem[]>(() => {
+  const module = modules.value.find(item => item.key === tab.value)
+  return (module?.items ?? []) as NavItem[]
 })
 
+function onReturn() {
+  emits('pushMain')
+}
 </script>
 
 <template>
-  <a-modal v-model="isOpen" :title="t('modals.mobile_navigation.type_main')">
-    <div class="flex flex-col gap-5">
-      <div class="h-[1px] w-full bg-deepblue-900/5"/>
-      <div>
-        <a-pill-tabs v-model="tab" :options="tabOptions" view="gray"/>
-      </div>
-      <div class="h-[40vh] sm:h-[300px] overflow-auto no-scrollbar">
-        <nuxt-link
-          v-for="item in currentLinks"
-          :key="item.label"
-          :to="item.link"
-          class="flex items-center gap-4 px-4 py-3 bg-gray-50 dark:bg-gray-800 mb-2 rounded"
-        >
-          <div class="bg-gradient-blue p-1 rounded-lg">
-            <component
-              :is="item.icon"
-              class="w-5 h-5 text-white dark:text-gray-900"
-            />
-          </div>
-          <span>{{ t(item.label) }}</span>
-        </nuxt-link>
-      </div>
-      <div class="h-[1px] w-full bg-deepblue-900/5"/>
+  <a-modal-v2
+    v-model="open"
+    hide-close
+    content-class="bg-gray-50/60 dark:bg-gray-950/40"
+  >
+    <template #header>
+      <h2 class="w-full text-center text-base font-semibold text-gray-900 dark:text-gray-100">
+        {{ t('modals.mobile_navigation.type_main') }}
+      </h2>
+    </template>
+
+    <div class="px-4 py-3">
+      <a-pill-tabs-v2
+        v-model="tab"
+        :options="tabOptions"
+        size="md"
+        scroll-into-view
+      />
     </div>
+
+    <div class="no-scrollbar flex h-[50vh] flex-col gap-2 overflow-y-auto px-4 pb-4">
+      <nuxt-link
+        v-for="item in currentLinks"
+        :key="item.to"
+        :to="item.to"
+        class="group flex items-center gap-3 rounded-xl border border-gray-100 bg-white px-3 py-2.5 transition-colors hover:border-blue-200 hover:bg-blue-50/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-blue-500/30 dark:hover:bg-gray-800"
+      >
+        <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-500 transition-colors group-hover:bg-blue-700 group-hover:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover:bg-blue-500 dark:group-hover:text-white">
+          <component
+            :is="item.icon"
+            class="size-5"
+          />
+        </span>
+
+        <span class="min-w-0 flex-1 truncate text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+          {{ item.title }}
+        </span>
+
+        <a-icon-chevron-right class="size-4 shrink-0 text-gray-300 transition-colors group-hover:text-blue-500 dark:text-gray-600" />
+      </nuxt-link>
+    </div>
+
     <template #footer>
-      <nuxt-link to="/" @click="emits('pushMain')" class="flex items-center gap-4 px-4 py-3 bg-gray-50 rounded-md dark:bg-gray-800">
-        <a-icon-menu/>
+      <nuxt-link
+        to="/"
+        class="flex items-center justify-center gap-2 rounded-xl bg-gray-100 px-4 py-3 text-sm font-semibold text-deepblue-900 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+        @click="onReturn"
+      >
+        <a-icon-menu class="size-5" />
         {{ t('modals.mobile_navigation.return_button') }}
       </nuxt-link>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/modals/Insufficient-funds-modal.vue

@@ -30,7 +30,7 @@ function cancel() {
       <p class="text-center">
         {{ t('modals.low_balance.questions') }}
       </p>
-      <div class="flex flex-col rounded-xl border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
+      <div class="flex flex-col rounded-lg border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
         <p class="body-600 text-center text-blue-700 dark:text-blue-300">
           {{ t('modals.low_balance.current_balance') }}
         </p>

package/components/modals/PaymentMethodModal.vue

@@ -66,7 +66,7 @@ if (props.deleteFromDom) {
         :name="`${item.name}`"
         side="right"
         :value="item.id"
-        class="flex items-center justify-between	gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
+        class="flex items-center justify-between	gap-2 rounded-sm bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
       >
         <div class="flex w-full items-center gap-2">
           <component :is="item.img" />

package/components/modals/id/IdBanner.vue

@@ -9,15 +9,15 @@ function onRegister() {
 </script>
 
 <template>
-  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-md p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
     <div>
-      <p class="mb-2 font-semibold">
+      <p class="mb-2 text-h5">
         {{ t('modals.id.banners.auth.title') }}
       </p>
       <i18n-t
         keypath="modals.id.banners.auth.subtitle"
         tag="p"
-        class="text-sm text-gray-600 dark:text-gray-200"
+        class="text-body-md text-gray-600 dark:text-gray-200"
       >
         <template #register>
           <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">

package/components/modals/id/IdRecoveryModal.vue

@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
 
 <template>
   <form
-    class="flex flex-col items-stretch gap-5 rounded-lg text-center"
+    class="flex flex-col items-stretch gap-5 rounded-md text-center"
     novalidate
     @submit.prevent="onSubmit"
   >

package/components/navigation/bottom-navigation/ABottomNavigation.vue

@@ -56,7 +56,7 @@ const profile: string = 'modals.mobile_navigation.type_profile'
 </script>
 
 <template>
-  <header class="w-full border-t border-[#9DA3AC80] bg-white dark:bg-gray-900">
+  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-deepblue-900/10 bg-gray-50/20 shadow-lg backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30">
     <div class="grid w-full grid-cols-3 justify-items-center">
       <slot>
         <button