adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

package/components/modals/ReportBugConfirmModal.vue

@@ -1,32 +1,30 @@
-<script setup lang="ts">
-const { t } = useI18n()
-
-const isOpen = defineModel<boolean>({ required: true })
-</script>
-
-<template>
-  <a-modal-v2
-    v-model="isOpen"
-    width="424px"
-  >
-    <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>
-      <p class="body-400 text-center">
-        {{ t('modals.report_bug.gratitude') }}
-      </p>
-    </div>
-    <template #footer>
-      <a-button-v2
-        view="outline"
-        color="blue"
-        block
-        @click="isOpen = false"
-      >
-        {{ t('actions.close') }}
-      </a-button-v2>
-    </template>
-  </a-modal-v2>
-</template>
+<script setup lang="ts">
+const { t } = useI18n()
+
+const isOpen = defineModel<boolean>({ required: true })
+</script>
+<template>
+  <a-modal
+    v-model="isOpen"
+    width="424px"
+  >
+    <template #header>
+      <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">
+        {{ t('modals.report_bug.gratitude') }}
+      </p>
+      <a-button
+        view="outline"
+        block
+        @click="isOpen = false"
+      >
+        {{ t('actions.close') }}
+      </a-button>
+    </div>
+  </a-modal>
+</template>

package/components/modals/ReportBugModal.vue

@@ -1,172 +1,164 @@
-<script setup lang="ts">
-import { Mask } from 'maska'
-import * as z from 'zod'
-import { useUIValidation } from '#adata-ui/composables/useUIValidation'
-
-const props = defineProps<{
-  name?: string
-  email?: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'send'): void
-}>()
-const { t } = useI18n()
-const { myLayer } = useAppConfig()
-const env = myLayer.mode
-
-const mask = new Mask({ mask: '# (###) ### ## ##' })
-
-const isOpen = defineModel<boolean>({ default: false })
-const form: any = reactive({
-  name: '',
-  email: '',
-  phone_number: '',
-  comment: ''
-})
-const phone = ref(form.phone_number)
-
-const scheme = z.object({
-  email: z.string().nonempty(t('modals.report_bug.validation.required')).email(t('modals.submit_application_modal.rules.email')),
-  phone_number: z.string().nonempty(t('modals.report_bug.validation.required')).min(17, t('modals.report_bug.validation.phone', { n: 10 })),
-  comment: z.string().nonempty(t('modals.report_bug.validation.required')),
-})
-
-const submitted = ref(false)
-const sending = ref(false)
-
-const { validation, getError } = useUIValidation(
-  scheme,
-  () => ({
-    ...form,
-    phone_number: phone.value,
-  }),
-  submitted,
-)
-
-onMounted(() => {
-  if (props.email) {
-    form.email = props.email
-  }
-})
-
-watch(phone, () => {
-  form.phone_number = mask.unmasked(phone.value)
-})
-
-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',
-      params: {
-        sender_name: form.name,
-        email: form.email,
-        phone_number: phone.value,
-        message: form.comment,
-        subject: props.name,
-        link: window.location.href
-      }
-    })
-    emit('send')
-  } catch (e) {
-    console.error(e.message)
-  } finally {
-    form.name = ''
-    form.phone_number = ''
-    form.comment = ''
-    phone.value = ''
-    submitted.value = false
-    sending.value = false
-    emit('close')
-  }
-}
-</script>
-
-<template>
-  <a-modal-v2
-    v-model="isOpen"
-    width="424px"
-    data-test-id="report-form-modal"
-  >
-    <template #header>
-      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100" data-test-id="report-form-title">
-        {{ t('modals.report_bug.title') }}
-      </h2>
-    </template>
-
-    <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-3">
-        <a-input-v2
-          v-model="form.name"
-          :label="t('modals.report_bug.labels.name')"
-          :error="getError('name')"
-          data-test-id="report-form-name-input"
-        />
-        <a-input-v2
-          v-model="form.email"
-          required
-          type="email"
-          :label="t('modals.report_bug.labels.email')"
-          :error="getError('email')"
-          data-test-id="report-form-email-input"
-        />
-        <a-input-v2
-          v-model="phone"
-          required
-          type="tel"
-          clearable
-          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>
-    </div>
-
-    <template #footer>
-      <div class="flex gap-2">
-        <a-button-v2
-          view="outline"
-          color="blue"
-          block
-          data-test-id="report-form-close-button"
-          @click="emit('close')"
-        >
-          {{ t('actions.close') }}
-        </a-button-v2>
-        <a-button-v2
-          block
-          :loading="sending"
-          data-test-id="report-form-submit-button"
-          @click="send"
-        >
-          {{ t('actions.send') }}
-        </a-button-v2>
-      </div>
-    </template>
-  </a-modal-v2>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { Mask } from 'maska'
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = defineProps<{
+  name?: string
+  email?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'send'): void
+}>()
+const { t } = useI18n()
+const { myLayer } = useAppConfig()
+const env = myLayer.mode
+
+const mask = new Mask({ mask: '# (###) ### ## ##' })
+
+const isOpen = defineModel<boolean>()
+const form: any = reactive({
+  name: '',
+  email: '',
+  phone_number: '',
+  comment: ''
+})
+const phone = ref(form.phone_number)
+
+const scheme = z.object({
+  name: z.string().nonempty(t('modals.report_bug.validation.required')),
+  email: z.string().nonempty(t('modals.report_bug.validation.required')).email(t('modals.submit_application_modal.rules.email')),
+  phone_number: z.string().nonempty(t('modals.report_bug.validation.required')).min(17, t('modals.report_bug.validation.phone', { n: 10 })),
+  comment: z.string().nonempty(t('modals.report_bug.validation.required')),
+})
+
+const submitted = ref(false)
+
+const { validation, getError } = useUIValidation(
+  scheme,
+  () => ({
+    ...form,
+    phone_number: phone.value,
+  }),
+  submitted,
+)
+
+onMounted(() => {
+  if (props.email) {
+    form.email = props.email
+  }
+})
+
+watch(phone, () => {
+  form.phone_number = mask.unmasked(phone.value)
+})
+
+async function send() {
+  submitted.value = true
+  if (validation.value) return
+  try {
+    await $fetch<any>(`https://users.${env}.kz/api/v1/message/error`, {
+      method: 'POST',
+      params: {
+        sender_name: form.name,
+        email: form.email,
+        phone_number: phone.value,
+        message: form.comment,
+        subject: props.name,
+        link: window.location.href
+      }
+    })
+    emit('send')
+  } catch (e) {
+    console.error(e.message)
+  } finally {
+    form.name = ''
+    form.phone_number = ''
+    form.comment = ''
+    phone.value = ''
+    submitted.value = false
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <a-modal v-model="isOpen" data-test-id="report-form-modal">
+    <template #header>
+      <p class="heading-02 text-center" data-test-id="report-form-title">
+        {{ t('modals.report_bug.title') }}
+      </p>
+    </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]" />
+        <slot name="title">
+          <p class="label-400 text-center">
+            {{ name }}
+          </p>
+        </slot>
+      </div>
+      <div class="flex flex-col gap-2">
+        <a-input-standard
+          v-model="form.name"
+          required
+          :data-test-id="'report-form-name-input'"
+          :label="t('modals.report_bug.labels.name')"
+          :error="getError('name')"
+        />
+        <a-input-standard
+          v-model="form.email"
+          required
+          :data-test-id="'report-form-email-input'"
+          :label="t('modals.report_bug.labels.email')"
+          :error="getError('email')"
+        />
+        <a-input-standard
+          v-model="phone"
+          v-maska
+          required
+          data-maska="8 (###) ### ## ##"
+          clearable
+          :data-test-id="'report-form-phone-input'"
+          :label="t('modals.report_bug.labels.phone')"
+          :error="getError('phone_number')"
+        />
+        <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
+          view="outline"
+          class="w-full"
+          data-test-id="report-form-close-button"
+          @click="emit('close')"
+        >
+          {{ t('actions.close') }}
+        </a-button>
+        <a-button
+          class="w-full"
+          data-test-id="report-form-submit-button"
+          @click="send"
+        >
+          {{ t('actions.send') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped></style>

package/components/modals/Resend.vue

@@ -1,81 +1,82 @@
-<script setup lang="ts">
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const emit = defineEmits<{
-  (e: 'resend'): void
-  (e: 'close'): void
-}>()
-
-const timer = ref(120)
-const isResend = ref(false)
-const route = useRoute()
-const { landing } = useUrls()
-
-function runTimer() {
-  timer.value = 120
-  const intervalId = setInterval(() => {
-    if (timer.value <= 0) {
-      isResend.value = true
-      clearInterval(intervalId)
-      return
-    }
-    timer.value--
-  }, 1000)
-}
-
-onMounted(() => resend())
-
-function resend() {
-  isResend.value = false
-  runTimer()
-  emit('resend')
-}
-function goToMain() {
-  if (route.query.url) {
-    document.location.replace(route.query.url)
-  }
-  else {
-    document.location.replace(landing)
-  }
-  emit('close')
-}
-</script>
-
-<template>
-  <div class="flex flex-col items-center justify-center gap-5">
-    <p class="heading-02">
-      {{ $t('login.modal.title') }}
-    </p>
-    <a-ill-mail />
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle1') }}
-    </p>
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle2') }}
-    </p>
-    <p
-      v-if="!isResend"
-      class="heading-02"
-    >
-      {{ timer }} {{ $t('login.modal.seconds') }}
-    </p>
-    <a-button
-      v-else
-      class="w-full"
-      view="outline"
-      @click="resend"
-    >
-      {{ $t('login.modal.resend') }}
-    </a-button>
-    <a-button
-      class="w-full"
-      @click="goToMain"
-    >
-      {{ $t('login.modal.back') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const emit = defineEmits<{
+  (e: 'resend'): void
+  (e: 'close'): void
+}>()
+
+const timer = ref(120)
+const isResend = ref(false)
+const route = useRoute()
+const { landing } = useUrls()
+
+function runTimer() {
+  timer.value = 120
+  const intervalId = setInterval(() => {
+    if (timer.value <= 0) {
+      isResend.value = true
+      clearInterval(intervalId);
+      return;
+    }
+    timer.value--;
+  }, 1000);
+}
+
+onMounted(() => resend())
+
+const resend = () => {
+  isResend.value = false
+  runTimer()
+  emit('resend')
+}
+const goToMain = () => {
+  if (route.query.url) {
+    document.location.replace(route.query.url)
+  } else {
+    document.location.replace(landing)
+  }
+  emit('close')
+
+}
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center gap-5">
+    <p class="heading-02">
+      {{ $t('login.modal.title') }}
+    </p>
+    <a-ill-mail />
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle1') }}
+    </p>
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle2') }}
+    </p>
+    <p
+      v-if="!isResend"
+      class="heading-02"
+    >
+      {{ timer }} {{ $t('login.modal.seconds') }}
+    </p>
+    <a-button
+      v-else
+      class="w-full"
+      view="outline"
+      @click="resend"
+    >
+      {{ $t('login.modal.resend') }}
+    </a-button>
+    <a-button
+      class="w-full"
+      @click="goToMain"
+    >
+      {{ $t('login.modal.back') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>