adata-ui 2.1.40-beta.1 → 2.1.40-beta.11

package/components/elements/status-badge-v2/StatusBadgeV2.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'StatusBadgeV2', inheritAttrs: false })
+
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'inverted',
+  size: 'sm',
+})
+
+const base
+  = 'inline-flex w-fit items-center justify-center gap-1.5 rounded-full font-semibold select-none'
+
+const sizeClasses: Record<BadgeSize, string> = {
+  xs: 'px-2 py-0.5 text-[11px] leading-none',
+  sm: 'px-2.5 py-1 text-xs leading-none',
+  md: 'px-3 py-1.5 text-sm',
+  lg: 'px-4 py-2 text-base',
+}
+
+const typeClasses: Record<BadgeView, Partial<Record<BadgeType, string>>> = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:text-gray-100',
+    warning: 'bg-yellow-400 text-white dark:text-gray-900',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200/10 dark:text-gray-200',
+    orange: 'bg-orange-600 text-white dark:text-gray-100',
+  },
+  inverted: {
+    primary: 'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500',
+    success: 'bg-green-500/15 text-green-600 dark:bg-green-400/15 dark:text-green-400',
+    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400',
+    warning: 'bg-yellow-400/15 text-yellow-500 dark:bg-yellow-400/15 dark:text-yellow-400',
+    gray: 'bg-deepblue-900/10 text-gray-600 dark:bg-gray-200/10 dark:text-gray-300',
+    orange: 'bg-orange-600/10 text-orange-600 dark:text-orange-500',
+  },
+  transparent: {
+    primary: 'bg-transparent text-blue-700 dark:text-blue-500',
+    success: 'bg-transparent text-green-600 dark:text-green-400',
+    danger: 'bg-transparent text-red-500 dark:text-red-400',
+    warning: 'bg-transparent text-yellow-500 dark:text-yellow-400',
+    gray: 'bg-transparent text-gray-600 dark:text-gray-300',
+    orange: 'bg-transparent text-orange-600 dark:text-orange-500',
+  },
+}
+
+const attrs = useAttrs()
+
+// twMerge resolves Tailwind conflicts: any class passed via `class` wins over
+// the defaults below, so padding / rounded / bg / text can all be overridden.
+const classes = computed(() =>
+  twMerge(
+    base,
+    sizeClasses[props.size],
+    typeClasses[props.view][props.type],
+    attrs.class as string,
+  ),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="{ ...$attrs, class: undefined }">
+    <slot name="point" />
+    <slot />
+  </div>
+</template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { toCanvas } from 'qrcode'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { toCanvas } from 'qrcode'
 
 const props = defineProps<{
   requestUrl: string
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'back', type: 'kaspi'): void
-  (e:  'updateUserRate'): void
+  (e: 'updateUserRate'): void
 }>()
 
 const isOpen = defineModel({ default: false })
@@ -74,11 +74,10 @@ watch(isOpen, async (value) => {
       margin: 0,
       color: {
         dark: colorMode.value === 'dark' ? '#FFFFFF' : '#000000', // квадраты
-        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF' // фон
-      }
+        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF', // фон
+      },
     },
     (error) => {
-
       if (error) {
         console.error(error)
         return
@@ -99,7 +98,8 @@ watch(isOpen, async (value) => {
 
         ctx.drawImage(logo, x, y, size, size)
       }
-    })
+    },
+  )
 
   intervalId = setInterval(() => {
     if (paymentSuccess.value && intervalId) {
@@ -110,7 +110,6 @@ watch(isOpen, async (value) => {
     checkPayment()
   }, 1000)
 })
-
 </script>
 
 <template>
@@ -120,42 +119,59 @@ watch(isOpen, async (value) => {
   >
     <template #header>
       <div class="flex items-center gap-2">
-        <button @click="onBack">
+        <button
+          type="button"
+          class="rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          @click="onBack"
+        >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold">
+        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
           {{ 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') }}
+      <p class="text-center text-sm font-medium text-gray-600 dark:text-gray-300">
+        {{ t('payment.kaspi.description') }}
+      </p>
+
+      <div class="flex flex-col items-center gap-5 rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
+        <div class="flex items-center gap-3">
+          <a-icon-kaspi-qr class="size-14" />
+          <span class="text-[40px] font-bold leading-none text-deepblue-900 dark:text-white">
+            {{ t('payment.kaspi.qr') }}
           </span>
         </div>
 
-        <p class="mt-5 font-bold text-2xl">{{ t('payment.kaspi.scan') }}</p>
+        <p class="text-center text-xl font-bold text-deepblue-900 dark:text-white">
+          {{ t('payment.kaspi.scan') }}
+        </p>
 
-        <canvas class="mt-5" id="kaspiQr"></canvas>
+        <canvas
+          id="kaspiQr"
+          class="rounded-lg"
+        />
 
-        <p class="mt-10 text-lg">{{ t('payment.kaspi.adata') }}</p>
+        <p class="text-center text-base text-gray-600 dark:text-gray-300">
+          {{ t('payment.kaspi.adata') }}
+        </p>
       </div>
+    </div>
 
-      <a-button @click="onBack" view="outline">
+    <template #footer>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        @click="onBack"
+      >
         {{ t('payment.kaspi.changeMethod') }}
-      </a-button>
-    </div>
+      </a-button-v2>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -2,12 +2,12 @@
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 
 const props = defineProps<{
-    requestId: number
+  requestId: number
 }>()
 
 const emit = defineEmits<{
   (e: 'back', type: 'kaspi'): void
-  (e:  'updateUserRate'): void
+  (e: 'updateUserRate'): void
 }>()
 
 const isOpen = defineModel({ default: false })
@@ -78,35 +78,46 @@ watch(isOpen, async (value) => {
     v-model="isOpen"
     width="484px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center text-2xl font-bold whitespace-pre-wrap">
+    <div class="flex flex-col gap-6">
+      <p class="whitespace-pre-wrap text-center text-xl font-bold text-deepblue-900 dark:text-gray-100">
         {{ t('payment.redirect.title') }}
       </p>
-      <a-button block @click="goKaspi">
-        {{ t('payment.redirect.goKaspi') }}
-      </a-button>
-      <div class="flex flex-col gap-2">
-        <p class="text-center text-sm">
+
+      <div class="flex flex-col items-center gap-1 rounded-2xl bg-gray-50 p-5 text-center dark:bg-white/[0.03]">
+        <span class="text-xs text-gray-500 dark:text-gray-400">
           {{ t('payment.redirect.paymentId') }}
-        </p>
-        <p class="text-center text-xl	font-semibold">
+        </span>
+        <span class="text-2xl font-bold text-deepblue-900 dark:text-gray-100">
           {{ requestId }}
-        </p>
+        </span>
       </div>
-      <p class="text-center text-sm">
+
+      <p class="text-center text-sm text-gray-600 dark:text-gray-300">
         {{ t('payment.redirect.description') }}
       </p>
-      <a-button
-        view="outline"
-        block
-        @click="onBack"
-      >
-        {{ t('payment.redirect.changeMethod') }}
-      </a-button>
     </div>
+
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
+          block
+          @click="goKaspi"
+        >
+          {{ t('payment.redirect.goKaspi') }}
+        </a-button-v2>
+        <a-button-v2
+          view="outline"
+          color="gray"
+          size="lg"
+          block
+          @click="onBack"
+        >
+          {{ t('payment.redirect.changeMethod') }}
+        </a-button-v2>
+      </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -16,24 +16,16 @@ const isOpen = defineModel({ default: false })
 
 const { t } = useI18n()
 
-const checkbox = ref<IBank>('kaspi')
+const selected = ref<IBank>('kaspi')
 const cards = [
-  {
-    id: 'kaspi',
-    name: 'payment.method.kaspi',
-    sum: 10000,
-    img: AIconPaymentKaspi,
-  },
-  {
-    id: 'other',
-    name: 'payment.method.other',
-    sum: 10000,
-    img: AIconPaymentCard,
-  },
-]
+  { id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi },
+  { id: 'other', name: 'payment.method.other', img: AIconPaymentCard },
+] as const
+
+const formattedSum = computed(() => Math.round(props.sum).toLocaleString('ru-RU'))
 
 function confirm() {
-  emit('nextBank', checkbox.value, props.sum)
+  emit('nextBank', selected.value, props.sum)
 }
 
 function cancel() {
@@ -52,70 +44,90 @@ function onBack() {
   >
     <template #header>
       <div class="flex items-center gap-2">
-        <button @click="onBack">
+        <button
+          type="button"
+          class="rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          @click="onBack"
+        >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold">
+        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
           {{ t('payment.method.title') }}
         </p>
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4">
+      <div class="flex flex-col items-center gap-4 rounded-2xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
         <a-ill-phone-check class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
           {{ t('payment.method.description') }}
         </p>
       </div>
 
-      <div class="font-semibold">
-        {{ t('payment.method.note') }}
-      </div>
-
       <div class="flex flex-col gap-2">
-        <a-radio-button
-          v-for="(item) in cards"
+        <p class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+          {{ t('payment.method.note') }}
+        </p>
+
+        <button
+          v-for="item in cards"
           :key="item.id"
-          v-model="checkbox"
-          :name="`${item.name}`"
-          side="right"
-          size="lg"
-          :value="item.id"
-          class="flex items-center justify-between gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
+          type="button"
+          class="flex items-center gap-3 rounded-2xl border p-4 text-left transition-colors"
+          :class="selected === item.id
+            ? 'border-blue-500 bg-blue-50/60 dark:border-blue-400 dark:bg-blue-950/30'
+            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800'"
+          @click="selected = item.id"
         >
-          <div class="flex w-full items-center gap-2">
-            <component :is="item.img" />
-            <div class="flex w-full items-center justify-between">
+          <component
+            :is="item.img"
+            class="h-7 w-auto shrink-0"
+          />
+          <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+            <span class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
               {{ t(item.name) }}
-              <p class="body-600">
-                {{ Math.round(sum).toLocaleString('RU-ru') }} ₸
-              </p>
-            </div>
+            </span>
+            <span class="text-sm font-semibold text-gray-600 dark:text-gray-300">
+              {{ formattedSum }} ₸
+            </span>
           </div>
-        </a-radio-button>
+          <span
+            class="flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors"
+            :class="selected === item.id
+              ? 'border-blue-600 dark:border-blue-400'
+              : 'border-gray-300 dark:border-gray-600'"
+          >
+            <span
+              v-if="selected === item.id"
+              class="size-2.5 rounded-full bg-blue-600 dark:bg-blue-400"
+            />
+          </span>
+        </button>
       </div>
+    </div>
 
-      <div class="flex flex-col gap-2 ">
-        <a-button
-          :disabled="!checkbox"
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
           block
           @click="confirm"
         >
           {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           view="outline"
+          color="gray"
+          size="lg"
           block
           @click="cancel"
         >
           {{ t('actions.close') }}
-        </a-button>
+        </a-button-v2>
       </div>
-    </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
-import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
 import PaymentKaspiQrSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiQrSidePanel.vue'
 import PaymentKaspiRedirectSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue'
+import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
+import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 
 const { $toast } = useNuxtApp()
@@ -16,7 +16,7 @@ const {
   methodSidePanel,
   kaspiQRSidePanel,
   kaspiRedirectSidePanel,
-  payByCard
+  payByCard,
 } = usePayment()
 
 const userApiURL = commonAuth.userApiURL
@@ -132,23 +132,23 @@ async function updateUserRate() {
 
   <payment-method-side-panel
     v-model="methodSidePanel"
-    @back="onBack"
     :sum="paymentSum"
+    @back="onBack"
     @next-bank="directionsBanks"
   />
 
   <payment-kaspi-qr-side-panel
     v-model="kaspiQRSidePanel"
-    @back="onBack"
     :request-url="requestUrl"
     :request-id="requestId as number"
+    @back="onBack"
     @update-user-rate="updateUserRate"
   />
 
   <payment-kaspi-redirect-side-panel
     v-model="kaspiRedirectSidePanel"
-    @back="onBack"
     :request-id="requestId as number"
+    @back="onBack"
     @update-user-rate="updateUserRate"
   />
 </template>

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import ASidePanel from "#adata-ui/components/overlays/side-panel/ASidePanel.vue";
-
 const emit = defineEmits<{
   (e: 'next', sum: number): void
 }>()
@@ -9,35 +7,18 @@ const isOpen = defineModel({ default: false })
 
 const { t } = useI18n()
 
-const money = ref(0)
+const money = ref<number | string>(0)
 const errorAlert = ref(false)
 
-const sumArr = ref([
-  {
-    id: 1,
-    value: 2000,
-    label: '2 000 ₸',
-  },
-  {
-    id: 2,
-    value: 5000,
-    label: '5 000 ₸',
-  },
-  {
-    id: 3,
-    value: 10000,
-    label: '10 000 ₸',
-  },
-  {
-    id: 4,
-    value: 20000,
-    label: '20 000 ₸',
-  },
-])
+const sumArr = [
+  { id: 1, value: 2000, label: '2 000 ₸' },
+  { id: 2, value: 5000, label: '5 000 ₸' },
+  { id: 3, value: 10000, label: '10 000 ₸' },
+  { id: 4, value: 20000, label: '20 000 ₸' },
+]
 
-const filterMoney = computed(() => {
-  return money.value >= 1
-})
+const amount = computed(() => Number(money.value) || 0)
+const filterMoney = computed(() => amount.value >= 1)
 
 function onSelectAmount(value: number) {
   money.value = value
@@ -50,10 +31,11 @@ function onClose() {
 }
 
 function handlePayment() {
-  if (money.value <= 1000000) {
-    emit('next', money.value)
+  if (amount.value <= 1000000) {
+    emit('next', amount.value)
     errorAlert.value = false
-  } else {
+  }
+  else {
     errorAlert.value = true
   }
 }
@@ -65,69 +47,68 @@ function handlePayment() {
     width="484px"
   >
     <template #header>
-      <div class="text-xl font-semibold">
+      <div class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
         {{ t('payment.topUp.title') }}
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4 ">
+      <div class="flex flex-col items-center gap-4 rounded-2xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
         <a-ill-bill class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
           {{ t('payment.topUp.info') }}
         </p>
       </div>
 
-      <div class="flex flex-col gap-4">
-        <a-input-standard
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="money"
-          :label="`${t('payment.topUp.enterAmount')}`"
+          :label="t('payment.topUp.enterAmount')"
           type="number"
-          pattern="[0-9]*"
+          size="md"
           clearable
+          :error="errorAlert ? t('modals.replenish_modal.error') : undefined"
         />
-        <a-alert
-          v-if="errorAlert"
-          color="red"
-        >
-          {{ t('modals.replenish_modal.error') }}
-        </a-alert>
-        <div class="flex gap-4">
-          <a-chips
+
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <button
             v-for="item in sumArr"
             :key="item.id"
-            view="standard"
-            size="lg"
-            :class="[
-              money === item.value
-                ? 'bg-blue-700 text-white hover:bg-blue-700 dark:border-blue-500 dark:bg-transparent dark:text-blue-500 dark:hover:bg-transparent'
-                : '',
-            ]"
+            type="button"
+            class="rounded-xl border px-3 py-2.5 text-sm font-semibold transition-colors"
+            :class="amount === item.value
+              ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-950/40 dark:text-blue-300'
+              : 'border-gray-200 bg-white text-deepblue-900 hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800'"
             @click.stop="onSelectAmount(item.value)"
           >
-            <span>{{ item.label }}</span>
-          </a-chips>
+            {{ item.label }}
+          </button>
         </div>
       </div>
+    </div>
 
+    <template #footer>
       <div class="flex flex-col gap-2">
-        <a-button
+        <a-button-v2
+          size="lg"
+          block
           :disabled="!filterMoney"
           @click="handlePayment"
         >
           {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           view="outline"
+          color="gray"
+          size="lg"
+          block
           @click="onClose"
         >
           {{ t('actions.back') }}
-        </a-button>
+        </a-button-v2>
       </div>
-    </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>