adata-ui 2.1.0 → 2.1.2

package/components/elements/feature-description/AFeatureDescription.vue

@@ -68,12 +68,12 @@ onUnmounted(() => clearTimer())
         <component
           :is="item.icon"
           class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
-          :class="selected === idx ? 'text-white dark:text-gray-900' : 'text-gray-600 dark:text-gray-200'"
+          :class="selected === idx ? 'text-white dark:text-gray-900' : 'text-gray-600 dark:text-[#9DA3AC]'"
         />
       </div>
       <p
-        class="font-semibold text-xl transition-colors duration-300 ease-in-out"
-        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-gray-200'"
+        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
+        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-[#9DA3AC]'"
       >
         {{ item.title }}
       </p>
@@ -88,7 +88,7 @@ onUnmounted(() => clearTimer())
       <div
         v-if="selected === idx"
       >
-        <p class="text-sm pt-3">
+        <p class="text-xs lg:text-sm pt-3">
           {{ item.description }}
         </p>
       </div>

package/components/elements/illustrations/noAccess.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type LocalizedNavigationParams, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import { useUrls } from '#adata-ui/composables/useUrls'
 
 interface Props {
   illClass?: string
@@ -14,11 +15,19 @@ interface Props {
 const props = defineProps<Props>()
 
 const appConfig = useAppConfig()
-const loginUrl = appConfig.myLayer.loginUrl
+const { login } = useUrls()
+const authMode = appConfig.myLayer.authMode
 const device = useAdaptive()
 const { t, locale } = useI18n()
 
+const { loginModal } = useIdModals()
+
 function goAuth() {
+  if (authMode === 'local') {
+    loginModal.value = true
+    return
+  }
+
   if (window) {
     if (props.to) {
       navigateToLocalizedPage(props.to)
@@ -26,7 +35,7 @@ function goAuth() {
       const fullPath = encodeURIComponent(window.location.toString())
       navigateToLocalizedPage({
         locale,
-        projectUrl: loginUrl.slice(0, -1),
+        projectUrl: login,
         path: `/?url=${fullPath}`,
         target: '_self'
       })

package/components/elements/photos-animation/APhotosAnimation.vue

@@ -17,10 +17,12 @@ const getAnimationClass = (index: number) => {
 
 <template>
   <div class="relative size-full">
-    <nuxt-img
+    <img
       v-for="(photo, index) in photos"
       :key="index"
       :src="photo.src"
+      :alt="photo.src"
+      loading="lazy"
       :class="['photo', getAnimationClass(index), photo.classes]"
     />
   </div>

package/components/elements/select/ASelect.vue

@@ -6,10 +6,13 @@ import { onClickOutside, useToggle } from '@vueuse/core'
 import { isEqual } from 'lodash-es'
 import type { Ref } from 'vue'
 
+import { useFloating, offset, flip, shift, size as floatingSize, autoUpdate } from '@floating-ui/vue'
+
 type Props = {
   label: string
   required?: boolean
   options: T[]
+  hideOverflow?: boolean
   keyToShow?: string
   getOnlyKey?: boolean
   keyToSelect?: string
@@ -39,6 +42,7 @@ type Emits = {
 
 const props = withDefaults(defineProps<Props>(), {
   required: false,
+  hideOverflow: false,
   getOnlyKey: false,
   keyToShow: 'name',
   keyToSelect: 'id',
@@ -61,6 +65,32 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits<Emits>()
 
+
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement: 'bottom-start',
+  strategy: 'absolute',
+  middleware: [
+    offset(6),
+    flip({ fallbackPlacements: ['top-start'] }),
+    shift({ padding: 8 }),
+    floatingSize({
+      apply({ availableHeight, elements, rects }) {
+        const el = elements.floating as HTMLElement
+        el.style.width = `${rects.reference.width}px`
+        el.style.maxHeight = `${Math.max(140, Math.min(availableHeight, 320))}px`
+        el.style.overflowY = props.hideOverflow ? 'hidden' : 'auto'
+      },
+    }),
+  ],
+})
+
+let cleanup: (() => void) | null = null
+
+
+
 const modelValue = defineModel<T | T[] | null | any>({ required: true })
 const search = defineModel<T | null | any>('search')
 const isOpen = defineModel<T | null | any>('open', {
@@ -77,9 +107,14 @@ const disabledStyles =
   'disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500'
 
 const componentOptions = computed(() =>
-  props.options.filter((item: T) =>
-    item[props.searchKey as keyof T].toLowerCase().includes(searchValue.value.toLowerCase())
-  )
+  props.options.filter((item: T) => {
+    if (Array.isArray(props.searchKey) && props.searchKey.length === 2) {
+      return item[props.searchKey[0] as keyof T].toLowerCase().includes(searchValue.value.toLowerCase()) ||
+        item[props.searchKey[1] as keyof T].toLowerCase().includes(searchValue.value.toLowerCase())
+    } else {
+      return item[props.searchKey as keyof T].toLowerCase().includes(searchValue.value.toLowerCase())
+    }
+  })
 )
 
 onClickOutside(wrapper, () => {
@@ -230,10 +265,21 @@ onUpdated(() => (countedVisibleItems.value = countOfVisibleItems.value))
 defineExpose({
   onClear
 })
+watch(() => isOpen.value, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  } else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+
+onUnmounted(() => cleanup?.())
 </script>
 <template>
   <div ref="wrapper" class="relative w-full rounded-md text-sm">
     <button
+      ref="reference"
       :class="[
         clearable ? 'pr-16' : 'pr-9',
         {
@@ -245,7 +291,7 @@ defineExpose({
         buttonBg,
       ]"
       :disabled="disabled"
-      class="hover:border-blue focus-visible:outline-blue relative flex h-8 w-full items-center gap-2 rounded-md border border-solid py-1.5 pl-4 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:hover:border-blue-700"
+      class="hover:border-blue-700 focus-visible:outline-blue relative flex h-8 w-full items-center gap-2 rounded-md border border-solid py-1.5 pl-4 focus-visible:shadow-[0_0_0_4px#1B64B3] dark:hover:border-blue-500"
       @click="toggleOpen()"
     >
       <span
@@ -257,7 +303,7 @@ defineExpose({
       </span>
       <component :is="startIcon" v-if="startIcon" />
 
-      <span :class="{ 'py-1': size === 'md' }" class="w-full text-start">
+      <span :class="{ 'py-1': size === 'md' }" class=" w-full text-start">
         <span v-if="valueToShow">
           <span v-if="!multiple" class="line-clamp-1 text-deepblue-900 dark:text-gray-200">
             <slot name="single-selected" :value="valueToShow">{{ valueToShow[keyToShow] }}</slot>
@@ -305,10 +351,16 @@ defineExpose({
       </span>
     </button>
     <transition>
-      <div
-        v-if="isOpen"
-        class="absolute z-20 mt-1 w-full rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
-      >
+        <div
+          v-if="isOpen"
+          ref="floating"
+          class="z-[10000] rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
+          :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+        >
         <slot :options="options" name="options">
           <ul class="select m-2 max-h-[250px] overflow-y-auto overflow-x-hidden">
             <li v-if="searchFromOut" class="p-1">
@@ -385,5 +437,9 @@ defineExpose({
   &::-webkit-scrollbar-thumb {
     background: #888;
   }
+  button {
+    user-select: text !important;
+    cursor: pointer;
+  }
 }
 </style>

package/components/features/lang-switcher/lang-switcher.vue

@@ -16,6 +16,12 @@ onClickOutside(langSwitcher,() => {
 
 const { t } = useI18n()
 
+function onClick(loc: any) {
+  if ((loc?.code || loc) === locale.value) return
+
+  isOpen.value = false
+  window.location.assign(switchLocalePath(loc?.code || loc))
+}
 </script>
 
 <template>
@@ -27,6 +33,7 @@ const { t } = useI18n()
     <button
       class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
       @click="isOpen = true"
+      aria-hidden="true"
     >
       {{ t(`lang.${locale}.short`) }}
     </button>
@@ -41,7 +48,7 @@ const { t } = useI18n()
           {'text-primary bg-deepblue-500/5': locale === loc.code}
         ]"
         :to="switchLocalePath(loc?.code || loc)"
-        @click="isOpen=false"
+        @click.prevent="onClick(loc)"
       >
         {{ t(`lang.${loc?.code || loc}.long`) }}
       </nuxt-link>

package/components/features/payment/banner/BasicPlusLimitBanner.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+
+const props = defineProps<{
+  balance: number
+}>()
+
+const { $toast } = useNuxtApp()
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const accessToken = useCookie('accessToken')
+
+const { topUpSidePanel } = usePayment()
+
+const userApiURL = commonAuth.userApiURL
+
+const isLoading = ref(false)
+
+async function updateUserRate() {
+  try {
+    isLoading.value = true
+    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      body: {
+        rate_code: 'basic_plus',
+      },
+    })
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onUpdate() {
+  if (props.balance >= 1000) {
+    updateUserRate()
+  }
+  else {
+    topUpSidePanel.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div>
+      <p class="mb-2 font-semibold">
+        {{ t('modals.id.banners.basicPlusLimit.title') }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banners.basicPlusLimit.subtitle"
+        tag="p"
+        class="text-sm text-gray-600 dark:text-gray-200"
+      >
+        <template #topUp>
+          <button
+            class="font-semibold text-blue-700 dark:text-blue-500"
+            @click="topUpSidePanel = true"
+          >
+            {{ t('modals.id.banners.basicPlusLimit.topUp') }}
+          </button>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onUpdate"
+      :loading="isLoading"
+    >
+      {{ t('actions.update') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>

package/components/features/payment/banner/PaymentBanner.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import {removeTrailingSlash} from "#adata-ui/components/utils/removeTrailingSlash";
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const props = defineProps<{
+  balance?: number
+}>()
+
+const { $toast } = useNuxtApp()
+
+const { t, locale } = useI18n()
+const accessToken = useCookie('accessToken')
+
+const { topUpSidePanel } = usePayment()
+const { commonAuth } = useAppConfig()
+
+const { landing } = useUrls()
+const userApiURL = commonAuth.userApiURL
+
+const isLoading = ref(false)
+
+async function updateUserRate() {
+  try {
+    isLoading.value = true
+    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      body: {
+        rate_code: 'basic_plus',
+      },
+    })
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onBuy() {
+  if (props.balance && props.balance >= 1000) {
+    updateUserRate()
+  }
+  else {
+    topUpSidePanel.value = true
+  }
+}
+
+</script>
+
+<template>
+  <div class="gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div>
+      <p class="mb-2 font-semibold">
+        {{ t('payment.banner.title') }}
+      </p>
+      <i18n-t
+        keypath="payment.banner.subtitle"
+        tag="p"
+        class="text-sm text-gray-600 dark:text-gray-200"
+      >
+        <template #tariffs>
+          <nuxt-link
+            class="font-semibold text-blue-700 dark:text-blue-500"
+            :to="buildLocalizedUrl(locale, landing, '/tariffs')"
+          >
+            {{ t('payment.banner.tariffs') }}
+          </nuxt-link>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onBuy"
+    >
+      {{ t('actions.buy') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>

package/components/features/payment/process/PaymentKaspiQrSidePanel.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { toCanvas } from 'qrcode'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+
+const props = defineProps<{
+  requestUrl: string
+  requestId: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'back', type: 'kaspi'): void
+  (e:  'updateUserRate'): void
+}>()
+
+const isOpen = defineModel({ default: false })
+
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const accessToken = useCookie('accessToken')
+const colorMode = useColorMode()
+
+const userApiURL = commonAuth.userApiURL
+
+const paymentSuccess = ref(false)
+let intervalId: NodeJS.Timeout | null = null
+
+function onBack() {
+  emit('back', 'kaspi')
+}
+
+async function checkPayment() {
+  try {
+    const { data } = await $fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/invoice-status`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      params: {
+        request_id: props.requestId,
+        initial: 0,
+      },
+    })
+
+    if (data.status === 'completed') {
+      paymentSuccess.value = true
+    }
+  }
+  catch (e) {
+    console.error(e)
+  }
+}
+
+watch(isOpen, async (value) => {
+  if (!value) {
+    if (intervalId) {
+      clearInterval(intervalId)
+    }
+    return
+  }
+
+  await nextTick()
+
+  const canvas = document.getElementById('kaspiQr') as HTMLCanvasElement | null
+  if (!canvas) return
+
+  toCanvas(
+    canvas,
+    props.requestUrl,
+    {
+      errorCorrectionLevel: 'H',
+      width: 300,
+      margin: 0,
+      color: {
+        dark: colorMode.value === 'dark' ? '#FFFFFF' : '#000000', // квадраты
+        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF' // фон
+      }
+    },
+    (error) => {
+
+      if (error) {
+        console.error(error)
+        return
+      }
+
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return
+
+      const logo = new Image()
+      logo.src = '/kaspi/logo.svg'
+      logo.onload = () => {
+        const size = canvas.width * 0.2
+        const x = (canvas.width - size) / 2
+        const y = (canvas.height - size) / 2
+
+        ctx.fillStyle = colorMode.value === 'dark' ? '#000000' : '#fff'
+        ctx.fillRect(x - 6, y - 6, size + 12, size + 12)
+
+        ctx.drawImage(logo, x, y, size, size)
+      }
+    })
+
+  intervalId = setInterval(() => {
+    if (paymentSuccess.value && intervalId) {
+      clearInterval(intervalId)
+      emit('updateUserRate')
+      return
+    }
+    checkPayment()
+  }, 1000)
+})
+
+</script>
+
+<template>
+  <a-side-panel v-model="isOpen" width="484px">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <button @click="onBack">
+          <a-icon-chevron-left class="size-6" />
+        </button>
+        <p class="text-xl font-semibold">
+          {{ t('payment.kaspi.title') }}
+        </p>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-center text-center text-black dark:text-white">
+        <p class="mb-4 font-semibold text-sm">
+          {{ t('payment.kaspi.description') }}
+        </p>
+
+        <div class="flex gap-3 items-center">
+          <a-icon-kaspi-qr class="size-16" />
+          <span class="font-bold text-[44px]">
+          {{ t('payment.kaspi.qr') }}
+          </span>
+        </div>
+
+        <p class="mt-5 font-bold text-2xl">{{ t('payment.kaspi.scan') }}</p>
+
+        <canvas class="mt-5" id="kaspiQr"></canvas>
+
+        <p class="mt-10 text-lg">{{ t('payment.kaspi.adata') }}</p>
+      </div>
+
+      <a-button @click="onBack" view="outline">
+        {{ t('payment.kaspi.changeMethod') }}
+      </a-button>
+    </div>
+  </a-side-panel>
+</template>
+
+<style scoped>
+
+</style>