adata-ui 2.1.40-beta.9 → 2.1.40

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

@@ -1,133 +1,119 @@
-<script setup lang="ts">
-import ASidePanel from "#adata-ui/components/overlays/side-panel/ASidePanel.vue";
-
-const emit = defineEmits<{
-  (e: 'next', sum: number): void
-}>()
-
-const isOpen = defineModel({ default: false })
-
-const { t } = useI18n()
-
-const money = ref(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 filterMoney = computed(() => {
-  return money.value >= 1
-})
-
-function onSelectAmount(value: number) {
-  money.value = value
-  errorAlert.value = false
-}
-
-function onClose() {
-  isOpen.value = false
-  errorAlert.value = false
-}
-
-function handlePayment() {
-  if (money.value <= 1000000) {
-    emit('next', money.value)
-    errorAlert.value = false
-  } else {
-    errorAlert.value = true
-  }
-}
-</script>
-
-<template>
-  <a-side-panel
-    v-model="isOpen"
-    width="484px"
-  >
-    <template #header>
-      <div class="text-xl font-semibold">
-        {{ t('payment.topUp.title') }}
-      </div>
-    </template>
-
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4 ">
-        <a-ill-bill class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
-          {{ t('payment.topUp.info') }}
-        </p>
-      </div>
-
-      <div class="flex flex-col gap-4">
-        <a-input-standard
-          v-model="money"
-          :label="`${t('payment.topUp.enterAmount')}`"
-          type="number"
-          pattern="[0-9]*"
-          clearable
-        />
-        <a-alert
-          v-if="errorAlert"
-          color="red"
-        >
-          {{ t('modals.replenish_modal.error') }}
-        </a-alert>
-        <div class="flex gap-4">
-          <a-chips
-            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'
-                : '',
-            ]"
-            @click.stop="onSelectAmount(item.value)"
-          >
-            <span>{{ item.label }}</span>
-          </a-chips>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <a-button
-          :disabled="!filterMoney"
-          @click="handlePayment"
-        >
-          {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
-          view="outline"
-          @click="onClose"
-        >
-          {{ t('actions.back') }}
-        </a-button>
-      </div>
-    </div>
-  </a-side-panel>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'next', sum: number): void
+}>()
+
+const isOpen = defineModel({ default: false })
+
+const { t } = useI18n()
+
+const money = ref<number | string>(0)
+const errorAlert = ref(false)
+
+const sumArr = [
+  { 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)
+const filterMoney = computed(() => amount.value >= 1)
+
+function onSelectAmount(value: number) {
+  money.value = value
+  errorAlert.value = false
+}
+
+function onClose() {
+  isOpen.value = false
+  errorAlert.value = false
+}
+
+function handlePayment() {
+  if (amount.value <= 1000000) {
+    emit('next', amount.value)
+    errorAlert.value = false
+  }
+  else {
+    errorAlert.value = true
+  }
+}
+</script>
+
+<template>
+  <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">
+        {{ t('payment.topUp.title') }}
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-center gap-4 rounded-xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
+        <a-ill-bill class="size-[120px]" />
+        <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-3">
+        <a-input-v2
+          v-model="money"
+          :label="t('payment.topUp.enterAmount')"
+          type="number"
+          size="md"
+          clearable
+          data-test-id="topup-topup-balance-amount-input"
+          :error="errorAlert ? t('modals.replenish_modal.error') : undefined"
+        />
+
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <button
+            v-for="item in sumArr"
+            :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'"
+            @click.stop="onSelectAmount(item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
+          data-test-id="topup-balance-submit-button"
+          block
+          :disabled="!filterMoney"
+          @click="handlePayment"
+        >
+          {{ t('actions.topUp') }}
+        </a-button-v2>
+        <a-button-v2
+          view="outline"
+          color="gray"
+          size="lg"
+          data-test-id="topup-balance-back-button"
+          block
+          @click="onClose"
+        >
+          {{ t('actions.back') }}
+        </a-button-v2>
+      </div>
+    </template>
+  </a-side-panel>
+</template>
+
+<style scoped></style>

package/components/features/pk-mobile-services/APkMobileServices.vue

@@ -1,136 +1,136 @@
-<script setup lang="ts">
-import { usePkServicesLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
-import { NuxtLinkLocale } from '#components'
-
-const services = usePkServicesLinks()
-const { isActiveService } = useActiveNavigation()
-
-const blockStyles = [
-  'first-border-gradient',
-  'second-border-gradient',
-  'third-border-gradient',
-  'fourth-border-gradient',
-  'fifth-border-gradient',
-  'sixth-border-gradient',
-  'seventh-border-gradient',
-  'eighth-border-gradient',
-  'ninth-border-gradient',
-]
-</script>
-
-<template>
-  <div class="grid grid-cols-3">
-    <component
-      v-for="(service, index) in services"
-      :key="index"
-      :is="isActiveService(service.to) ? 'div' : NuxtLinkLocale"
-      :to="isActiveService(service.to) ? '' : service.to"
-      :class="['flex flex-col items-center gap-2 p-2', blockStyles[index]]"
-    >
-      <div
-        class="size-10 p-2 rounded-lg"
-        :class="[
-          'bg-deepblue-900/5 dark:bg-gray-200/5',
-          {'!bg-blue-700 text-white dark:!bg-blue-500 ': isActiveService(service.to)}
-        ]"
-      >
-        <component
-          :is="service.icon"
-          class="size-6 shrink-0"
-        />
-      </div>
-      <p class="text-xs text-center">
-        {{ service.title }}
-      </p>
-    </component>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.first-border-gradient {
-  border-width: 0 1px 1px 0;
-  border-style: solid;
-  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
-  border-image-slice: 1;
-}
-.second-border-gradient {
-  border-width: 0 1px 1px 1px;
-  border-style: solid;
-  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
-  border-image-slice: 1;
-}
-.third-border-gradient {
-  border-width: 0 0 1px 1px;
-  border-style: solid;
-  border-image-source: linear-gradient(218.84deg, #FFFFFF 41.56%, #F4F5F6 98.73%);
-  border-image-slice: 1;
-}
-.fourth-border-gradient {
-  border-width: 1px 1px 1px 0;
-  border-style: solid;
-  border-image-source: linear-gradient(125.34deg, #FFFFFF 7.49%, #F4F5F6 86.67%);
-  border-image-slice: 1;
-}
-.fifth-border-gradient {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--Bg-tertiary-bg, #F4F5F6);
-  border-image-slice: 1;
-}
-.sixth-border-gradient {
-  border-width: 1px 0 1px 1px;
-  border-style: solid;
-  border-image-source: linear-gradient(261.06deg, #FFFFFF -6.98%, #F4F5F6 99.74%);
-  border-image-slice: 1;
-}
-.seventh-border-gradient {
-  border-width: 1px 1px 0 0;
-  border-style: solid;
-  border-image-source: linear-gradient(58.51deg, #FFFFFF 35.88%, #F4F5F6 85.8%);
-  border-image-slice: 1;
-}
-.eighth-border-gradient {
-  border-width: 1px 1px 0 1px;
-  border-style: solid;
-  border-image-source: linear-gradient(0deg, #FFFFFF 0%, #F4F5F6 100%);
-  border-image-slice: 1;
-}
-.ninth-border-gradient {
-  border-width: 1px 0 0 1px;
-  border-style: solid;
-  border-image-source: linear-gradient(41.08deg, #FFFFFF 6.74%, #F4F5F6 63.33%, #FEFEFE 91.03%);
-  border-image-slice: 1;
-}
-
-.dark {
-  .first-border-gradient {
-    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
-  }
-  .second-border-gradient {
-    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
-  }
-  .third-border-gradient {
-    border-image-source: linear-gradient(218.84deg, #26282b 41.56%, #393d40 98.73%);
-  }
-  .fourth-border-gradient {
-    border-image-source: linear-gradient(125.34deg, #26282b 7.49%, #393d40 86.67%);
-  }
-  .fifth-border-gradient {
-    border-color: #393d40;
-  }
-  .sixth-border-gradient {
-    border-image-source: linear-gradient(261.06deg, #26282b -6.98%, #393d40 99.74%);
-  }
-  .seventh-border-gradient {
-    border-image-source: linear-gradient(58.51deg, #26282b 35.88%, #393d40 85.8%);
-  }
-  .eighth-border-gradient {
-    border-image-source: linear-gradient(0deg, #26282b 0%, #393d40 100%);
-  }
-  .ninth-border-gradient {
-    border-image-source: linear-gradient(41.08deg, #26282b 6.74%, #393d40 63.33%, #26282b 91.03%);
-  }
-}
-</style>
-
+<script setup lang="ts">
+import { usePkServicesLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
+import { NuxtLinkLocale } from '#components'
+
+const services = usePkServicesLinks()
+const { isActiveService } = useActiveNavigation()
+
+const blockStyles = [
+  'first-border-gradient',
+  'second-border-gradient',
+  'third-border-gradient',
+  'fourth-border-gradient',
+  'fifth-border-gradient',
+  'sixth-border-gradient',
+  'seventh-border-gradient',
+  'eighth-border-gradient',
+  'ninth-border-gradient',
+]
+</script>
+
+<template>
+  <div class="grid grid-cols-3">
+    <component
+      v-for="(service, index) in services"
+      :key="index"
+      :is="isActiveService(service.to) ? 'div' : NuxtLinkLocale"
+      :to="isActiveService(service.to) ? '' : service.to"
+      :class="['flex flex-col items-center gap-2 p-2', blockStyles[index]]"
+    >
+      <div
+        class="size-10 p-2 rounded-md"
+        :class="[
+          'bg-deepblue-900/5 dark:bg-gray-200/5',
+          {'!bg-blue-700 text-white dark:!bg-blue-500 ': isActiveService(service.to)}
+        ]"
+      >
+        <component
+          :is="service.icon"
+          class="size-6 shrink-0"
+        />
+      </div>
+      <p class="text-xs text-center">
+        {{ service.title }}
+      </p>
+    </component>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.first-border-gradient {
+  border-width: 0 1px 1px 0;
+  border-style: solid;
+  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
+  border-image-slice: 1;
+}
+.second-border-gradient {
+  border-width: 0 1px 1px 1px;
+  border-style: solid;
+  border-image-source: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 100%);
+  border-image-slice: 1;
+}
+.third-border-gradient {
+  border-width: 0 0 1px 1px;
+  border-style: solid;
+  border-image-source: linear-gradient(218.84deg, #FFFFFF 41.56%, #F4F5F6 98.73%);
+  border-image-slice: 1;
+}
+.fourth-border-gradient {
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+  border-image-source: linear-gradient(125.34deg, #FFFFFF 7.49%, #F4F5F6 86.67%);
+  border-image-slice: 1;
+}
+.fifth-border-gradient {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--Bg-tertiary-bg, #F4F5F6);
+  border-image-slice: 1;
+}
+.sixth-border-gradient {
+  border-width: 1px 0 1px 1px;
+  border-style: solid;
+  border-image-source: linear-gradient(261.06deg, #FFFFFF -6.98%, #F4F5F6 99.74%);
+  border-image-slice: 1;
+}
+.seventh-border-gradient {
+  border-width: 1px 1px 0 0;
+  border-style: solid;
+  border-image-source: linear-gradient(58.51deg, #FFFFFF 35.88%, #F4F5F6 85.8%);
+  border-image-slice: 1;
+}
+.eighth-border-gradient {
+  border-width: 1px 1px 0 1px;
+  border-style: solid;
+  border-image-source: linear-gradient(0deg, #FFFFFF 0%, #F4F5F6 100%);
+  border-image-slice: 1;
+}
+.ninth-border-gradient {
+  border-width: 1px 0 0 1px;
+  border-style: solid;
+  border-image-source: linear-gradient(41.08deg, #FFFFFF 6.74%, #F4F5F6 63.33%, #FEFEFE 91.03%);
+  border-image-slice: 1;
+}
+
+.dark {
+  .first-border-gradient {
+    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
+  }
+  .second-border-gradient {
+    border-image-source: linear-gradient(180deg, #26282b 0%, #393d40 100%);
+  }
+  .third-border-gradient {
+    border-image-source: linear-gradient(218.84deg, #26282b 41.56%, #393d40 98.73%);
+  }
+  .fourth-border-gradient {
+    border-image-source: linear-gradient(125.34deg, #26282b 7.49%, #393d40 86.67%);
+  }
+  .fifth-border-gradient {
+    border-color: #393d40;
+  }
+  .sixth-border-gradient {
+    border-image-source: linear-gradient(261.06deg, #26282b -6.98%, #393d40 99.74%);
+  }
+  .seventh-border-gradient {
+    border-image-source: linear-gradient(58.51deg, #26282b 35.88%, #393d40 85.8%);
+  }
+  .eighth-border-gradient {
+    border-image-source: linear-gradient(0deg, #26282b 0%, #393d40 100%);
+  }
+  .ninth-border-gradient {
+    border-image-source: linear-gradient(41.08deg, #26282b 6.74%, #393d40 63.33%, #26282b 91.03%);
+  }
+}
+</style>
+

package/components/features//321/201hange-version/AChangeVersion.vue

@@ -1,20 +1,20 @@
-<script lang="ts" setup>
-defineProps<{
-  url: string
-}>()
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <nuxt-link
-    :to="url"
-    target="_blank"
-    class="flex cursor-pointer items-center justify-center gap-1 rounded-md bg-blue-700/10 px-3 py-2 text-blue-700 transition-colors duration-150 hover:bg-blue-700/15 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
-  >
-    <span class="body-400">{{ t('header.oldVersion') }}</span>
-    <a-icon-arrow-bottom-left-on-square class="rotate-180" />
-  </nuxt-link>
-</template>
-
-<style scoped></style>
+<script lang="ts" setup>
+defineProps<{
+  url: string
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <nuxt-link
+    :to="url"
+    target="_blank"
+    class="flex cursor-pointer items-center justify-center gap-1 rounded-sm bg-blue-700/10 px-3 py-2 text-blue-700 transition-colors duration-150 hover:bg-blue-700/15 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
+  >
+    <span class="text-body-md">{{ t('header.oldVersion') }}</span>
+    <a-icon-arrow-bottom-left-on-square class="rotate-180" />
+  </nuxt-link>
+</template>
+
+<style scoped></style>

package/components/forms/README.md

@@ -1 +1 @@
-# inputs
+# inputs