adata-ui 2.1.17 → 2.1.19

package/components/navigation/footer/ui/a-footer-accordion.vue

@@ -1,118 +1,118 @@
-<script setup lang="ts">
-import { useMediaQuery } from '@vueuse/core'
-
-interface Item {
-  title: string
-  link: string
-}
-
-interface Props {
-  label: string
-  link: string
-  content: Item[]
-}
-
-const props = defineProps<Props>()
-
-const isDesktop = useMediaQuery('(max-width: 1024px)')
-
-const open = ref(false)
-function toFinalValues(el: HTMLDivElement) {
-  el.style.height = el.scrollHeight + 'px'
-  el.style.opacity = '1'
-}
-
-function onAfterEnter(el: HTMLDivElement) {
-  el.style.height = ''
-}
-
-const filterCheck = computed(() => {
-  if (open.value) {
-    return open.value
-  }
-  else {
-    return open.value = !isDesktop.value
-  }
-})
-</script>
-
-<template>
-  <div class="flex flex-col gap-2 items-start">
-    <div class="flex gap-2 justify-between w-full">
-      <nuxt-link
-        class="text-sm font-semibold lg:pb-3 lg:pr-4 lg:border-b-[0.5px] lg:border-white cursor-default"
-        :class="{ 'cursor-pointer': link }"
-        :to="link?.replace(/\/$/, '')"
-      >
-        {{ label }}
-      </nuxt-link>
-
-      <div class="transition-all lg:hidden cursor-pointer">
-        <a-icon-chevron-down
-          v-if="content.length"
-          filled
-          :font-controlled="false"
-          class="size-6 transition-all"
-          :class="{ 'rotate-180': open }"
-          @click="open = !open"
-        />
-      </div>
-    </div>
-
-    <transition
-      name="accordion"
-      @enter="toFinalValues"
-      @after-enter="onAfterEnter"
-      @before-leave="toFinalValues"
-    >
-      <div
-        v-if="filterCheck"
-        class="flex gap-3 lg:gap-6 flex-col lg:flex-row"
-      >
-        <div
-          v-for="(subItem, subIdx) in content"
-          :key="subIdx"
-          class="flex flex-col gap-3 lg:gap-2"
-        >
-          <div
-            v-for="(link, idx) in subItem"
-            :key="idx"
-            class="flex gap-2 items-center"
-          >
-            <nuxt-link
-              class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
-              :to="link.link?.replace(/\/$/, '')"
-            >
-              {{ link.title }}
-            </nuxt-link>
-
-            <div
-              v-if="link.isNew"
-              class="text-[9px] font-bold px-1 py-[2px] rounded-sm bg-white/20"
-            >
-              NEW
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.accordion-enter-active,
-.accordion-leave-active {
-  overflow: hidden;
-  transition: height 0.3s ease,
-  opacity 0.3s ease,
-  margin 0.3s ease;
-
-}
-
-.accordion-enter-from,
-.accordion-leave-to {
-  height: 0 !important;
-  opacity: 0 !important;
-  margin: 0 !important;
-}
-</style>
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+interface Item {
+  title: string
+  link: string
+}
+
+interface Props {
+  label: string
+  link: string
+  content: Item[]
+}
+
+const props = defineProps<Props>()
+
+const isDesktop = useMediaQuery('(max-width: 1024px)')
+
+const open = ref(false)
+function toFinalValues(el: HTMLDivElement) {
+  el.style.height = el.scrollHeight + 'px'
+  el.style.opacity = '1'
+}
+
+function onAfterEnter(el: HTMLDivElement) {
+  el.style.height = ''
+}
+
+const filterCheck = computed(() => {
+  if (open.value) {
+    return open.value
+  }
+  else {
+    return open.value = !isDesktop.value
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-start">
+    <div class="flex gap-2 justify-between w-full">
+      <nuxt-link
+        class="text-sm font-semibold lg:pb-3 lg:pr-4 lg:border-b-[0.5px] lg:border-white cursor-default"
+        :class="{ 'cursor-pointer': link }"
+        :to="link?.replace(/\/$/, '')"
+      >
+        {{ label }}
+      </nuxt-link>
+
+      <div class="transition-all lg:hidden cursor-pointer">
+        <a-icon-chevron-down
+          v-if="content.length"
+          filled
+          :font-controlled="false"
+          class="size-6 transition-all"
+          :class="{ 'rotate-180': open }"
+          @click="open = !open"
+        />
+      </div>
+    </div>
+
+    <transition
+      name="accordion"
+      @enter="toFinalValues"
+      @after-enter="onAfterEnter"
+      @before-leave="toFinalValues"
+    >
+      <div
+        v-if="filterCheck"
+        class="flex gap-3 lg:gap-6 flex-col lg:flex-row"
+      >
+        <div
+          v-for="(subItem, subIdx) in content"
+          :key="subIdx"
+          class="flex flex-col gap-3 lg:gap-2"
+        >
+          <div
+            v-for="(link, idx) in subItem"
+            :key="idx"
+            class="flex gap-2 items-center"
+          >
+            <nuxt-link
+              class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
+              :to="link.link?.replace(/\/$/, '')"
+            >
+              {{ link.title }}
+            </nuxt-link>
+
+            <div
+              v-if="link.isNew"
+              class="text-[9px] font-bold px-1 py-[2px] rounded-sm bg-white/20"
+            >
+              NEW
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  overflow: hidden;
+  transition: height 0.3s ease,
+  opacity 0.3s ease,
+  margin 0.3s ease;
+
+}
+
+.accordion-enter-from,
+.accordion-leave-to {
+  height: 0 !important;
+  opacity: 0 !important;
+  margin: 0 !important;
+}
+</style>

package/components/navigation/header/AHeader.vue

@@ -1,217 +1,217 @@
-<script lang="ts" setup>
-import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
-import AColorMode from '#adata-ui/components/features/color-mode/AColorMode.client.vue'
-import LangSwitcher from '#adata-ui/components/features/lang-switcher/lang-switcher.vue'
-import AChangeVersion from '#adata-ui/components/features/сhange-version/AChangeVersion.vue'
-import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
-import TopHeader from '#adata-ui/components/navigation/header/TopHeader.vue'
-import { useContacts, useCurrentModule } from '#adata-ui/composables/projectState'
-import AdataLogo from '#adata-ui/icons/adata-logo.vue'
-import Arrow from '#adata-ui/icons/chevron/chevron-down.vue'
-import Logo from '#adata-ui/icons/logo.vue'
-import { buildLocalizedUrl, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
-import HeaderLink from './HeaderLink.vue'
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-defineOptions({ name: 'AHeader' })
-
-const props = withDefaults(defineProps<Props>(), {
-  limitRemaining: 0,
-  daysRemaining: 0,
-  balance: 0,
-  rate: 'Базовый',
-  showLogIn: true,
-  mobileHeaderType: 'default',
-  module: 'pk',
-})
-
-const emit = defineEmits(['logout', 'search', 'login'])
-
-interface Props {
-  replenish?: string
-  hasNotification?: boolean
-  email: string | undefined
-  rate: string
-  daysRemaining: number
-  limitRemaining: number
-  balance: number
-  isAuthenticated: boolean
-  showLogIn?: boolean
-  mobileHeaderType?: 'search' | 'default'
-  module?: ProjectKeys
-  oldVersion?: string
-}
-
-const { t } = useI18n()
-const { locale } = useI18n()
-
-useCurrentModule().value = props.module
-const appConfig = useAppConfig()
-const { myLayer }: any = useAppConfig()
-const urls = useUrls()
-
-const langIsOn = appConfig.myLayer.langIsOn
-const contacts = ref(useContacts())
-const { loginModal } = useIdModals()
-
-function goAuth() {
-  if (myLayer.authMode !== 'local') {
-    if (window) {
-      emit('login')
-      let fullPath = encodeURIComponent(window.location.toString())
-      if (fullPath.includes('basic-info')) {
-        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
-      }
-
-      navigateToLocalizedPage({
-        locale,
-        projectUrl: urls.login,
-        path: `/?url=${fullPath}`,
-        target: '_self',
-      })
-    }
-  }
-  else {
-    loginModal.value = true
-  }
-}
-
-function goToAnotherModule() {
-  location.href = buildLocalizedUrl(locale.value, urls.landing, '')
-}
-
-async function fetchContacts() {
-  try {
-    const response = await fetch(
-      'https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department',
-    )
-    const { data } = await response.json()
-    contacts.value = data
-  }
-  catch (e) {
-    console.error(e.message)
-  }
-}
-
-onBeforeMount(() => {
-  fetchContacts()
-})
-</script>
-
-<template>
-  <div>
-    <top-header
-      :days-remaining="daysRemaining"
-      :is-authenticated="isAuthenticated"
-      :module-name="module"
-      :limit-remaining="limitRemaining"
-    />
-    <header
-      class="relative h-16 border-b border-deepblue-900/10 bg-white dark:border-gray-200/10 dark:bg-gray-900"
-    >
-      <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
-        <!--        Desktop hidden -->
-        <section
-          id="mobile-header"
-          class="grow lg:hidden"
-        >
-          <div
-            v-if="mobileHeaderType === 'default'"
-            class="flex justify-center"
-          >
-            <div
-              class="text-deepblue dark:text-[#E3E5E8]"
-              @click="goToAnotherModule"
-            >
-              <span class="visually-hidden"> Сервисы Adata.kz</span>
-
-              <adata-logo
-                :font-controlled="false"
-                filled
-              />
-            </div>
-          </div>
-          <div
-            v-else-if="mobileHeaderType === 'search'"
-            class="flex w-full items-center gap-2 bg-white dark:bg-gray-900 lg:hidden"
-          >
-            <logo
-              class="dark:text-gray-200"
-              @click="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')"
-            >
-              <a-icon-search />
-              <span class="body-400">Найти</span>
-            </button>
-          </div>
-        </section>
-        <div class="lg:hidden">
-          <lang-switcher
-            v-if="langIsOn || module === 'fea'"
-            class="lg:hidden"
-          />
-        </div>
-        <!-- Mobile hidden -->
-        <nav class="hidden items-center gap-4 lg:flex" itemscope itemtype="https://schema.org/SiteNavigationElement" role="list">
-          <nuxt-link-locale
-            aria-label="Adata-logo"
-            :to="buildLocalizedUrl(locale, urls.landing)"
-            class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
-            @click="goToAnotherModule"
-          >
-            <adata-logo
-              :font-controlled="false"
-              filled
-            />
-          </nuxt-link-locale>
-          <header-link />
-        </nav>
-        <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
-          <!-- Mobile hidden -->
-          <div class="hidden items-center gap-4 lg:flex">
-            <a-change-version
-              v-if="oldVersion"
-              :url="oldVersion"
-            />
-            <a-color-mode />
-            <lang-switcher v-if="langIsOn || module === 'fea'" />
-          </div>
-
-          <a-dropdown
-            v-show="isAuthenticated"
-            placement="right"
-          >
-            <template #default="{ onExpand, expanded }">
-              <div
-                class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex"
-                @click.stop="onExpand"
-              >
-                <span>{{ email }}</span>
-                <arrow :class="{ 'rotate-180': expanded }" />
-              </div>
-            </template>
-            <template #content>
-              <profile-menu
-                :balance="balance"
-                :days-remaining="daysRemaining"
-                :limit-remaining="limitRemaining"
-                :rate="rate"
-                :replenish="replenish"
-                @logout="$emit('logout')"
-              />
-            </template>
-          </a-dropdown>
-          <a-button-login
-            v-show="!isAuthenticated && showLogIn"
-            @click="goAuth"
-          />
-        </div>
-      </div>
-    </header>
-  </div>
-</template>
-
-<style scoped></style>
+<script lang="ts" setup>
+import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
+import AColorMode from '#adata-ui/components/features/color-mode/AColorMode.client.vue'
+import LangSwitcher from '#adata-ui/components/features/lang-switcher/lang-switcher.vue'
+import AChangeVersion from '#adata-ui/components/features/сhange-version/AChangeVersion.vue'
+import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
+import TopHeader from '#adata-ui/components/navigation/header/TopHeader.vue'
+import { useContacts, useCurrentModule } from '#adata-ui/composables/projectState'
+import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+import Arrow from '#adata-ui/icons/chevron/chevron-down.vue'
+import Logo from '#adata-ui/icons/logo.vue'
+import { buildLocalizedUrl, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import HeaderLink from './HeaderLink.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+defineOptions({ name: 'AHeader' })
+
+const props = withDefaults(defineProps<Props>(), {
+  limitRemaining: 0,
+  daysRemaining: 0,
+  balance: 0,
+  rate: 'Базовый',
+  showLogIn: true,
+  mobileHeaderType: 'default',
+  module: 'pk',
+})
+
+const emit = defineEmits(['logout', 'search', 'login'])
+
+interface Props {
+  replenish?: string
+  hasNotification?: boolean
+  email: string | undefined
+  rate: string
+  daysRemaining: number
+  limitRemaining: number
+  balance: number
+  isAuthenticated: boolean
+  showLogIn?: boolean
+  mobileHeaderType?: 'search' | 'default'
+  module?: ProjectKeys
+  oldVersion?: string
+}
+
+const { t } = useI18n()
+const { locale } = useI18n()
+
+useCurrentModule().value = props.module
+const appConfig = useAppConfig()
+const { myLayer }: any = useAppConfig()
+const urls = useUrls()
+
+const langIsOn = appConfig.myLayer.langIsOn
+const contacts = ref(useContacts())
+const { loginModal } = useIdModals()
+
+function goAuth() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      emit('login')
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
+
+      navigateToLocalizedPage({
+        locale,
+        projectUrl: urls.login,
+        path: `/?url=${fullPath}`,
+        target: '_self',
+      })
+    }
+  }
+  else {
+    loginModal.value = true
+  }
+}
+
+function goToAnotherModule() {
+  location.href = buildLocalizedUrl(locale.value, urls.landing, '')
+}
+
+async function fetchContacts() {
+  try {
+    const response = await fetch(
+      'https://pk-api.adata.kz/api/v1/data/counterparty/contacts/sales-department',
+    )
+    const { data } = await response.json()
+    contacts.value = data
+  }
+  catch (e) {
+    console.error(e.message)
+  }
+}
+
+onBeforeMount(() => {
+  fetchContacts()
+})
+</script>
+
+<template>
+  <div>
+    <top-header
+      :days-remaining="daysRemaining"
+      :is-authenticated="isAuthenticated"
+      :module-name="module"
+      :limit-remaining="limitRemaining"
+    />
+    <header
+      class="relative h-16 border-b border-deepblue-900/10 bg-white dark:border-gray-200/10 dark:bg-gray-900"
+    >
+      <div class="a-container mobile-padding flex h-full items-center justify-between gap-2">
+        <!--        Desktop hidden -->
+        <section
+          id="mobile-header"
+          class="grow lg:hidden"
+        >
+          <div
+            v-if="mobileHeaderType === 'default'"
+            class="flex justify-center"
+          >
+            <div
+              class="text-deepblue dark:text-[#E3E5E8]"
+              @click="goToAnotherModule"
+            >
+              <span class="visually-hidden"> Сервисы Adata.kz</span>
+
+              <adata-logo
+                :font-controlled="false"
+                filled
+              />
+            </div>
+          </div>
+          <div
+            v-else-if="mobileHeaderType === 'search'"
+            class="flex w-full items-center gap-2 bg-white dark:bg-gray-900 lg:hidden"
+          >
+            <logo
+              class="dark:text-gray-200"
+              @click="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')"
+            >
+              <a-icon-search />
+              <span class="body-400">Найти</span>
+            </button>
+          </div>
+        </section>
+        <div class="lg:hidden">
+          <lang-switcher
+            v-if="langIsOn || module === 'fea'"
+            class="lg:hidden"
+          />
+        </div>
+        <!-- Mobile hidden -->
+        <nav class="hidden items-center gap-4 lg:flex" itemscope itemtype="https://schema.org/SiteNavigationElement" role="list">
+          <nuxt-link-locale
+            aria-label="Adata-logo"
+            :to="buildLocalizedUrl(locale, urls.landing)"
+            class="text-deepblue cursor-pointer dark:text-[#E3E5E8]"
+            @click="goToAnotherModule"
+          >
+            <adata-logo
+              :font-controlled="false"
+              filled
+            />
+          </nuxt-link-locale>
+          <header-link />
+        </nav>
+        <div class="text-deepblue hidden items-center gap-4 dark:text-[#E3E5E8] lg:flex">
+          <!-- Mobile hidden -->
+          <div class="hidden items-center gap-4 lg:flex">
+            <a-change-version
+              v-if="oldVersion"
+              :url="oldVersion"
+            />
+            <a-color-mode />
+            <lang-switcher v-if="langIsOn || module === 'fea'" />
+          </div>
+
+          <a-dropdown
+            v-show="isAuthenticated"
+            placement="right"
+          >
+            <template #default="{ onExpand, expanded }">
+              <div
+                class="hidden cursor-pointer items-center gap-2 text-sm font-semibold lg:flex"
+                @click.stop="onExpand"
+              >
+                <span>{{ email }}</span>
+                <arrow :class="{ 'rotate-180': expanded }" />
+              </div>
+            </template>
+            <template #content>
+              <profile-menu
+                :balance="balance"
+                :days-remaining="daysRemaining"
+                :limit-remaining="limitRemaining"
+                :rate="rate"
+                :replenish="replenish"
+                @logout="$emit('logout')"
+              />
+            </template>
+          </a-dropdown>
+          <a-button-login
+            v-show="!isAuthenticated && showLogIn"
+            @click="goAuth"
+          />
+        </div>
+      </div>
+    </header>
+  </div>
+</template>
+
+<style scoped></style>