adata-ui 2.1.40-beta.13 → 2.1.40-beta.15

package/components/elements/digit-badge/ADigitBadge.vue

@@ -30,7 +30,7 @@ const classes = computed(() =>
     props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
     'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
     sizeSwitchValues[props.size],
-    props.value && props.value.toString().length > 2 ? 'w-auto' : '',
+    props.value && props.value.toString().length > 1 ? 'w-auto' : '',
   ])
 
 export type StateType = {
@@ -70,8 +70,8 @@ const typeSwitchValues: ViewType = {
 }
 
 const sizeSwitchValues: SizeSwitchValues = {
-  sm: 'w-4 h-4 px-1 text-[9.5px]',
-  md: 'w-5 h-5 px-1 text-[10px]',
+  sm: 'w-4 h-4 px-1 text-body-sm',
+  md: 'w-5 h-5 px-1 text-body-sm',
   lg: 'px-2 w-6 h-6 text-body-sm font-semibold',
 }
 </script>

package/components/elements/segmented/ASegmentedV2.vue

@@ -64,14 +64,14 @@ const CHIP_CLASS: Record<Color, Record<View | 'selected', string>> = {
 }
 
 const DOT_CLASS: Record<Color, Record<View, string>> = {
-  gray: { outline: 'bg-[#4A5565] dark:bg-gray-400', solid: 'bg-[#4A5565] dark:bg-gray-400' },
+  gray: { outline: 'bg-[#6A7282] dark:bg-gray-300', solid: 'bg-[#6A7282] dark:bg-gray-300' },
   blue: { outline: 'bg-[#068DFF] dark:bg-blue-400', solid: 'bg-[#068DFF] dark:bg-blue-400' },
   green: { outline: 'bg-[#00A63E] dark:bg-green-400', solid: 'bg-[#00A63E] dark:bg-green-400' },
   yellow: { outline: 'bg-[#E17100] dark:bg-orange-400', solid: 'bg-[#E17100] dark:bg-orange-400' },
   red: { outline: 'bg-[#E7000B] dark:bg-red-400', solid: 'bg-[#E7000B] dark:bg-red-400' },
 }
 
-const DOT_SELECTED_CLASS = 'bg-white dark:bg-gray-100'
+const DOT_SELECTED_CLASS = 'bg-white'
 
 function dotColorName(option: Option): Color {
   return option.color ?? props.color

package/components/elements/status-badge/AStatusBadge.vue

@@ -1,31 +1,36 @@
 <script lang="ts" setup>
-import {twMerge} from '#adata-ui/utils/twMerge';
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent'
+type BadgeSize = 'xs' | 'sm' | 'lg'
 
-defineOptions({ name: 'AStatusBadge' })
+type StateType = {
+  [key in BadgeType]?: string
+}
+
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+}
 
 interface Props {
-  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-  view?: 'default' | 'inverted' | 'transparent'
-  size?:  'xs' | 'sm' | 'lg'
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+  point?: boolean
   customClasses?: string
 }
 
+defineOptions({ name: 'AStatusBadge' })
+
 const props = withDefaults(defineProps<Props>(), {
   type: 'primary',
   view: 'default',
   size: 'lg',
-  customClasses: ''
+  point: false,
+  customClasses: '',
 })
 
-const classes = computed(() =>
-  [
-    'text-body-md rounded-sm select-none inline-flex gap-[5.5px] justify-center items-center border',
-    typeSwitchValues[props.view][props.type],
-    props.size === 'xs'? 'px-4 py-[2px] text-body-sm font-bold' : '',
-    props.size === 'sm'? 'text-body-sm font-semibold px-4 py-[2px] h-6' : '',
-    props.size === 'lg'? 'px-4 py-[7.5px] font-semibold' : '',
-  ])
-
 const typeSwitchValues: ViewType = {
   default: {
     primary: 'bg-[#068DFF] text-white border-transparent dark:bg-[#068DFF]/30 dark:text-blue-100',
@@ -33,45 +38,68 @@ const typeSwitchValues: ViewType = {
     danger: 'bg-[#E7000B] text-white border-transparent dark:bg-[#E7000B]/30 dark:text-red-100',
     warning: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100',
     gray: 'bg-[#4A5565] text-white border-transparent dark:bg-[#4A5565]/30 dark:text-gray-100',
-    orange: 'bg-[#E17100] text-white border-transparent dark:bg-[#E17100]/30 dark:text-orange-100'
   },
   inverted: {
     primary: 'bg-[#F0F8FF] text-[#068DFF] border-transparent dark:bg-[#068DFF]/10 dark:text-blue-400',
-    success: 'bg-[#DCFCE7] text-[#00A63E] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
-    danger: 'bg-[#FFE2E2] text-[#E7000B] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
-    warning: 'bg-[#FEF3C6] text-[#E17100] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
-    gray: 'bg-[#F3F4F6] text-[#4A5565] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
-    orange: 'bg-[#FEF3C6] text-[#E17100] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400'
+    success: 'bg-[#DCFCE7] text-[#008236] border-transparent dark:bg-[#00A63E]/10 dark:text-green-400',
+    danger: 'bg-[#FFE2E2] text-[#C10007] border-transparent dark:bg-[#E7000B]/10 dark:text-red-400',
+    warning: 'bg-[#FEF3C6] text-[#9A5800] border-transparent dark:bg-[#E17100]/10 dark:text-orange-400',
+    gray: 'bg-[#F3F4F6] text-[#364153] border-transparent dark:bg-[#4A5565]/10 dark:text-gray-300',
   },
   transparent: {
-    primary: 'bg-white border-[#B3DCFF] text-[#068DFF] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
-    success: 'bg-white border-[#7BF1A8] text-[#00A63E] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
-    danger: 'bg-white border-[#FFA2A2] text-[#E7000B] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
-    warning: 'bg-white border-[#FFD230] text-[#E17100] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
-    gray: 'bg-white border-[#D1D5DC] text-[#4A5565] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
-    orange: 'bg-white border-[#FFD230] text-[#E17100] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400'
-  }
+    primary: 'bg-white border-[#B3DCFF] text-[#0066BD] dark:bg-transparent dark:border-[#068DFF]/50 dark:text-blue-400',
+    success: 'bg-white border-[#7BF1A8] text-[#008236] dark:bg-transparent dark:border-[#00A63E]/50 dark:text-green-400',
+    danger: 'bg-white border-[#FFA2A2] text-[#C10007] dark:bg-transparent dark:border-[#E7000B]/50 dark:text-red-400',
+    warning: 'bg-white border-[#FFD230] text-[#9A5800] dark:bg-transparent dark:border-[#E17100]/50 dark:text-orange-400',
+    gray: 'bg-white border-[#D1D5DC] text-[#364153] dark:bg-transparent dark:border-[#4A5565]/50 dark:text-gray-300',
+  },
 }
 
-
-
-
-type StateType = {
-  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string
+const pointSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-white',
+    success: 'bg-white',
+    danger: 'bg-white',
+    warning: 'bg-white',
+    gray: 'bg-white',
+  },
+  inverted: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
+  transparent: {
+    primary: 'bg-[#068DFF] dark:bg-blue-400',
+    success: 'bg-[#00A63E] dark:bg-green-400',
+    danger: 'bg-[#E7000B] dark:bg-red-400',
+    warning: 'bg-[#E17100] dark:bg-orange-400',
+    gray: 'bg-[#6A7282] dark:bg-gray-300',
+  },
 }
 
-type ViewType = {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-};
-
-
+const classes = computed(() =>
+  [
+    'text-body-md rounded-sm select-none inline-flex gap-[5.5px] justify-center items-center border',
+    typeSwitchValues[props.view][props.type],
+    props.size === 'xs' ? 'px-4 py-[2px] text-body-sm font-bold' : '',
+    props.size === 'sm' ? 'text-body-sm font-semibold px-4 py-[2px] h-6' : '',
+    props.size === 'lg' ? 'px-4 py-[7.5px] font-semibold' : '',
+  ])
 
+const pointClasses = computed(() =>
+  [
+    'w-1.5 h-1.5 rounded-full shrink-0',
+    pointSwitchValues[props.view][props.type],
+  ])
 </script>
+
 <template>
   <div :class="[[classes], customClasses]">
-    <slot name="point"/>
+    <slot name="point">
+      <span v-if="point" :class="pointClasses" />
+    </slot>
     <slot />
   </div>
 </template>

package/components/elements/tree-select/components/ATreeSelectNode.vue

@@ -50,8 +50,8 @@ function onSelectToggle() {
       <a-checkbox-v2
         v-if="type === 'checkbox'"
         size="lg"
-        side="left"
-        class="flex w-full items-center justify-between text-left"
+        side="right"
+        class="flex w-full items-center text-left"
         :model-value="node.state === 'checked'"
         :intermediate="node.state === 'indeterminate'"
         :disabled="isDisabled"

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

@@ -122,11 +122,12 @@ watch(isOpen, async (value) => {
         <button
           type="button"
           class="rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          data-test-id="kaspi-qr-back-button"
           @click="onBack"
         >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
+        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100" data-test-id="kaspi-qr-title">
           {{ t('payment.kaspi.title') }}
         </p>
       </div>
@@ -137,7 +138,7 @@ watch(isOpen, async (value) => {
         {{ t('payment.kaspi.description') }}
       </p>
 
-      <div class="flex flex-col items-center gap-5 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
+      <div class="flex flex-col items-center gap-5 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900" data-test-id="kaspi-qr-payment-block">
         <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">
@@ -165,6 +166,7 @@ watch(isOpen, async (value) => {
         view="outline"
         color="gray"
         size="lg"
+        data-test-id="kaspi-qr-change-payment-method-button"
         block
         @click="onBack"
       >

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

@@ -18,8 +18,8 @@ const { t } = useI18n()
 
 const selected = ref<IBank>('kaspi')
 const cards = [
-  { id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi },
-  { id: 'other', name: 'payment.method.other', img: AIconPaymentCard },
+  { id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi, dataTestId: 'payment-method-kaspi-button' },
+  { id: 'other', name: 'payment.method.other', img: AIconPaymentCard, dataTestId: 'payment-method-other-bank-button' },
 ] as const
 
 const formattedSum = computed(() => Math.round(props.sum).toLocaleString('ru-RU'))
@@ -41,12 +41,14 @@ function onBack() {
   <a-side-panel
     v-model="isOpen"
     width="484px"
+    data-test-id="payment-method-modal"
   >
     <template #header>
       <div class="flex items-center gap-2">
         <button
           type="button"
           class="rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          data-test-id="payment-method-back-button"
           @click="onBack"
         >
           <a-icon-chevron-left class="size-6" />
@@ -75,6 +77,7 @@ function onBack() {
           :key="item.id"
           type="button"
           class="flex items-center gap-3 rounded-xl border p-4 text-left transition-colors"
+          :data-test-id="item.dataTestId"
           :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'"
@@ -111,6 +114,7 @@ function onBack() {
       <div class="flex flex-col gap-2">
         <a-button-v2
           size="lg"
+          data-test-id="payment-method-submit-button"
           block
           @click="confirm"
         >
@@ -120,6 +124,7 @@ function onBack() {
           view="outline"
           color="gray"
           size="lg"
+          data-test-id="payment-method-close-button"
           block
           @click="cancel"
         >

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

@@ -11,10 +11,10 @@ const money = ref<number | string>(0)
 const errorAlert = ref(false)
 
 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 ₸' },
+  { id: 1, value: 2000, label: '2 000 ₸', dataTestId: 'topup-balance-amount-2000-button' },
+  { id: 2, value: 5000, label: '5 000 ₸', dataTestId: 'topup-balance-amount-5000-button' },
+  { id: 3, value: 10000, label: '10 000 ₸', dataTestId: 'topup-balance-amount-10000-button' },
+  { id: 4, value: 20000, label: '20 000 ₸', dataTestId: 'topup-balance-amount-20000-button' },
 ]
 
 const amount = computed(() => Number(money.value) || 0)
@@ -45,6 +45,7 @@ function handlePayment() {
   <a-side-panel
     v-model="isOpen"
     width="484px"
+    data-test-id="topup-balance-modal"
   >
     <template #header>
       <div class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
@@ -67,6 +68,7 @@ function handlePayment() {
           type="number"
           size="md"
           clearable
+          data-test-id="topup-topup-balance-amount-input"
           :error="errorAlert ? t('modals.replenish_modal.error') : undefined"
         />
 
@@ -76,6 +78,7 @@ function handlePayment() {
             :key="item.id"
             type="button"
             class="rounded-lg border px-3 py-2.5 text-sm font-semibold transition-colors"
+            :data-test-id="item.dataTestId"
             :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'"
@@ -91,6 +94,7 @@ function handlePayment() {
       <div class="flex flex-col gap-2">
         <a-button-v2
           size="lg"
+          data-test-id="topup-balance-submit-button"
           block
           :disabled="!filterMoney"
           @click="handlePayment"
@@ -101,6 +105,7 @@ function handlePayment() {
           view="outline"
           color="gray"
           size="lg"
+          data-test-id="topup-balance-back-button"
           block
           @click="onClose"
         >

package/components/overlays/side-panel/ASidePanel.vue

@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<{
   headerClass?: string
   bodyClass?: string
   footerClass?: string
+  dataTestId?: string
 }>(), {
   idName: "vsp-container",
   side: "right",
@@ -36,7 +37,8 @@ const props = withDefaults(defineProps<{
   overlayOpacity: 0.5,
   overlayDuration: 500,
   panelColor: "bg-white dark:bg-gray-900",
-  panelDuration: 300
+  panelDuration: 300,
+  dataTestId: undefined,
 })
 
 defineEmits<{
@@ -219,6 +221,7 @@ const touchend = () => {
             class="vsp fixed flex flex-col"
             :class="[`vsp--${panelSide}-side`, $attrs.class, roundedClass, panelColor]"
             :style="panelStyles"
+            :data-test-id="dataTestId"
           >
             <div
               class="w-full flex justify-center items-center mt-1 lg:hidden"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.40-beta.13",
+  "version": "2.1.40-beta.15",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

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

@@ -1,76 +0,0 @@
-<script lang="ts" setup>
-import { twMerge } from '#adata-ui/utils/twMerge'
-
-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()
-
-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>