adata-ui 2.1.40-beta.4 → 2.1.40-beta.6

package/components/modals/ConnectingTariffModal.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
-
 const props = withDefaults(
   defineProps<{
-    tariff: string
+    tariff?: string
     deleteFromDom?: boolean
 
   }>(),
@@ -24,42 +22,37 @@ function confirm() {
 function cancel() {
   isOpen.value = false
 }
-
-if (props.deleteFromDom) {
-  handleElementPosition('connecting-tariff')
-}
+// `deleteFromDom` сохранён для совместимости API; ручной z-index в AModalV2 не нужен.
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="connecting-tariff"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
-        {{ t('modals.connecting.title') }}
-      </p>
-      <a-ill-turn-on-tariff class="w-full"/>
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-turn-on-tariff />
       <p class="body-400 whitespace-pre-wrap text-center">
         {{ t('modals.connecting.questions') }}
       </p>
     </div>
 
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex w-full gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button block @click="confirm">
+        </a-button-v2>
+        <a-button-v2 block @click="confirm">
           {{ t('reuse.yes') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/Insufficient-funds-modal.vue

@@ -1,20 +1,8 @@
 <script setup lang="ts">
 import type { UserInfo } from '~/api/modules/user/types'
-import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
-
-const props = withDefaults(defineProps<Props>(), {
-  deleteFromDom: false,
-})
-
-const emit = defineEmits<{
-  (e: 'next'): void
-}>()
 
 const { t } = useI18n()
 
-interface Props {
-  deleteFromDom?: boolean
-}
 const { topUpSidePanel } = usePayment()
 
 const isOpen = defineModel<boolean>({ default: false })
@@ -27,49 +15,46 @@ function confirm() {
 function cancel() {
   isOpen.value = false
 }
-
-if (props.deleteFromDom) {
-  handleElementPosition('insufficient-funds')
-}
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="insufficient-funds"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
+    <div class="flex flex-col gap-4 px-6 py-4">
+      <a-ill-empty-wallet class="self-center" />
+      <p class="text-center text-[18px] font-semibold">
         {{ t('modals.low_balance.title') }}
       </p>
-      <a-ill-empty-wallet class="self-center" />
-      <div class="m-[0_-32px] flex flex-col bg-green-500 py-1.5">
-        <p class="body-600 text-center  text-white ">
+      <p class="text-center">
+        {{ t('modals.low_balance.questions') }}
+      </p>
+      <div class="flex flex-col rounded-xl border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
+        <p class="body-600 text-center text-blue-700 dark:text-blue-300">
           {{ t('modals.low_balance.current_balance') }}
         </p>
-        <p class="body-600 text-center text-xl text-white ">
+        <p class="body-600 text-center text-xl text-blue-700 dark:text-blue-300">
           {{ userInfo?.balance ? userInfo?.balance.toLocaleString('ru-RU') : 0 }}₸
         </p>
       </div>
-      <p class="text-center">
-        {{ t('modals.low_balance.questions') }}
-      </p>
     </div>
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button block @click="confirm">
+        </a-button-v2>
+        <a-button-v2 block @click="confirm">
           {{ t('modals.buttons.topUp') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/LimitReachedModal.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { t } = useI18n()
@@ -16,11 +15,13 @@ function goTariffs() {
 <template>
   <a-modal v-model="isOpen" :title="t('modals.limit.title')">
     <div class="flex flex-col items-center gap-5 text-center text-sm">
-      <a-ill-empty-wallet></a-ill-empty-wallet>
+      <a-ill-empty-wallet />
       <div>{{ t('modals.limit.content') }}</div>
     </div>
     <template #footer>
-      <a-button @click="goTariffs" block>{{ t('modals.buttons.goTariffs') }}</a-button>
+      <a-button block @click="goTariffs">
+        {{ t('modals.buttons.goTariffs') }}
+      </a-button>
     </template>
   </a-modal>
 </template>

package/components/modals/NoAccessModal.vue

@@ -5,33 +5,31 @@ const { t } = useI18n()
 
 const isOpen = useNoAccessModal()
 
-const onClose = () => {
+function onClose() {
   isOpen.value = false
 }
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="no-access-modal"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
-        {{ t('modals.no_access.title') }}
-      </p>
-      <a-ill-door class="w-full" />
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-door />
       <p class="body-400 whitespace-pre-wrap text-center">
         {{ t('modals.no_access.info') }}
       </p>
     </div>
     <template #footer>
-      <a-button
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="onClose"
       >
         {{ t('modals.buttons.close') }}
-      </a-button>
+      </a-button-v2>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>

package/components/modals/PaymentMethodModal.vue

@@ -66,7 +66,7 @@ if (props.deleteFromDom) {
         :name="`${item.name}`"
         side="right"
         :value="item.id"
-        class="flex items-center justify-between	gap-2 bg-gray-50 p-[10px_16px] rounded-md dark:bg-[#393D40]"
+        class="flex items-center justify-between	gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
       >
         <div class="flex w-full items-center gap-2">
           <component :is="item.img" />

package/components/modals/ReportBugConfirmModal.vue

@@ -3,28 +3,30 @@ const { t } = useI18n()
 
 const isOpen = defineModel<boolean>({ required: true })
 </script>
+
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
     width="424px"
   >
-    <template #header>
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-ok />
       <p class="heading-02 text-center font-bold">
         {{ t('modals.report_bug.confirmed') }}
       </p>
-    </template>
-    <div class="flex flex-col gap-5 items-center">
-      <a-ill-ok />
-      <p class="text-sm text-center">
+      <p class="body-400 text-center">
         {{ t('modals.report_bug.gratitude') }}
       </p>
-      <a-button
+    </div>
+    <template #footer>
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="isOpen = false"
       >
         {{ t('actions.close') }}
-      </a-button>
-    </div>
-  </a-modal>
+      </a-button-v2>
+    </template>
+  </a-modal-v2>
 </template>

package/components/modals/ReportBugModal.vue

@@ -18,7 +18,7 @@ const env = myLayer.mode
 
 const mask = new Mask({ mask: '# (###) ### ## ##' })
 
-const isOpen = defineModel<boolean>()
+const isOpen = defineModel<boolean>({ default: false })
 const form: any = reactive({
   name: '',
   email: '',
@@ -35,6 +35,7 @@ const scheme = z.object({
 })
 
 const submitted = ref(false)
+const sending = ref(false)
 
 const { validation, getError } = useUIValidation(
   scheme,
@@ -58,6 +59,7 @@ watch(phone, () => {
 async function send() {
   submitted.value = true
   if (validation.value) return
+  sending.value = true
   try {
     await $fetch<any>(`https://users.${env}.kz/api/v1/message/error`, {
       method: 'POST',
@@ -79,86 +81,90 @@ async function send() {
     form.comment = ''
     phone.value = ''
     submitted.value = false
+    sending.value = false
     emit('close')
   }
 }
 </script>
 
 <template>
-  <a-modal v-model="isOpen" data-test-id="report-form-modal">
+  <a-modal-v2 v-model="isOpen" width="424px">
     <template #header>
-      <p class="heading-02 text-center" data-test-id="report-form-title">
+      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100" data-test-id="report-form-title">
         {{ t('modals.report_bug.title') }}
-      </p>
+      </h2>
     </template>
-    <div class="flex flex-col gap-5">
-      <div class="flex flex-col items-center justify-center gap-5">
-        <a-ill-stop-sign class="size-[185px]" />
+
+    <div class="flex flex-col gap-5 px-6 py-4">
+      <div class="flex flex-col items-center justify-center gap-4">
+        <a-ill-stop-sign class="size-[140px]" />
         <slot name="title">
           <p class="label-400 text-center">
             {{ name }}
           </p>
         </slot>
       </div>
-      <div class="flex flex-col gap-2">
-        <a-input-standard
+
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="form.name"
           required
-          :data-test-id="'report-form-name-input'"
           :label="t('modals.report_bug.labels.name')"
           :error="getError('name')"
+          data-test-id="report-form-name-input"
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.email"
           required
-          :data-test-id="'report-form-email-input'"
+          type="email"
           :label="t('modals.report_bug.labels.email')"
           :error="getError('email')"
+          data-test-id="report-form-email-input"
         />
-        <a-input-standard
+        <a-input-v2
           v-model="phone"
-          v-maska
           required
-          data-maska="8 (###) ### ## ##"
+          type="tel"
           clearable
-          :data-test-id="'report-form-phone-input'"
+          mask="8 (###) ### ## ##"
           :label="t('modals.report_bug.labels.phone')"
           :error="getError('phone_number')"
+          data-test-id="report-form-phone-input"
+        />
+        <a-textarea-v2
+          v-model="form.comment"
+          required
+          :rows="4"
+          resize="none"
+          :label="t('modals.report_bug.labels.comment')"
+          :error="getError('comment')"
+          data-test-id="report-form-comment-textarea"
         />
-        <div>
-          <a-textarea
-            v-model="form.comment"
-            required
-            :data-test-id="'report-form-comment-textarea'"
-            :label="t('modals.report_bug.labels.comment')"
-            size="md"
-            :error="getError('comment')"
-            class="min-h-[120px]"
-            :resizeable="false"
-          />
-        </div>
       </div>
     </div>
+
     <template #footer>
-      <div class="flex w-full gap-2">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
-          class="w-full"
+          color="blue"
+          block
           data-test-id="report-form-close-button"
           @click="emit('close')"
         >
           {{ t('actions.close') }}
-        </a-button>
-        <a-button
-          class="w-full"
+        </a-button-v2>
+        <a-button-v2
+          block
+          :loading="sending"
           data-test-id="report-form-submit-button"
           @click="send"
         >
           {{ t('actions.send') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped></style>

package/components/modals/Resend.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { useUrls } from '#adata-ui/composables/useUrls'
 
 const emit = defineEmits<{
@@ -17,33 +16,33 @@ function runTimer() {
   const intervalId = setInterval(() => {
     if (timer.value <= 0) {
       isResend.value = true
-      clearInterval(intervalId);
-      return;
+      clearInterval(intervalId)
+      return
     }
-    timer.value--;
-  }, 1000);
+    timer.value--
+  }, 1000)
 }
 
 onMounted(() => resend())
 
-const resend = () => {
+function resend() {
   isResend.value = false
   runTimer()
   emit('resend')
 }
-const goToMain = () => {
+function goToMain() {
   if (route.query.url) {
     document.location.replace(route.query.url)
-  } else {
+  }
+  else {
     document.location.replace(landing)
   }
   emit('close')
-
 }
 </script>
 
 <template>
-  <div class="flex flex-col justify-center items-center gap-5">
+  <div class="flex flex-col items-center justify-center gap-5">
     <p class="heading-02">
       {{ $t('login.modal.title') }}
     </p>

package/components/modals/SubmitApplicationModal.vue

@@ -57,65 +57,68 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="submit-application"
-    :prevent-close="true"
+    width="424px"
+    persistent
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center heading-02">
+    <div class="flex flex-col gap-5 px-6 py-4">
+      <p class="heading-02 text-center">
         {{ t('modals.submit_application_modal.title') }}
       </p>
       <a-ill-mail class="w-full" />
-      <div class="flex flex-col gap-2">
-        <a-input-standard
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="form.name"
+          required
           :label="t('modals.submit_application_modal.labels.name')"
           :error="getError('name')"
-          required
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.email"
+          required
+          type="email"
           :label="t('modals.submit_application_modal.labels.email')"
           :error="getError('email')"
-          required
         />
-        <a-input-standard
+        <a-input-v2
           v-model="form.phone"
-          v-maska
+          required
+          type="tel"
+          clearable
+          mask="8 (###) ###-##-##"
           :label="t('modals.submit_application_modal.labels.phone')"
-          data-maska="8 (###) ###-##-##"
           :error="getError('phone')"
-          clearable
-          required
         />
-        <a-textarea
+        <a-textarea-v2
           v-model="form.comment"
+          required
+          :rows="4"
+          resize="none"
           :label="t('modals.submit_application_modal.labels.comment')"
           :error="getError('comment')"
-          resizeable="none"
-          required
         />
       </div>
     </div>
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('reuse.close') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           block
           @click="send"
         >
           {{ t('reuse.send') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>