adata-ui 2.1.41-beta.7 → 2.1.41-beta.9

package/components/modals/ReplenishModal.vue

@@ -1,132 +1,132 @@
-<script setup lang="ts">
-import { useReplenishModal } from '#adata-ui/composables/modalsState'
-
-const { t } = useI18n()
-
-const props = withDefaults(
-  defineProps<{
-    isChangeOpened?: boolean
-  }>(),
-  {
-    isChangeOpened: false
-  }
-)
-const isOpen = useReplenishModal()
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'next', sum: number): void
-}>()
-const money = ref(0)
-const errorAlert = ref(false)
-
-const handlePayment = () => {
-  if (money.value <= 1000000) {
-    emit('next', money.value)
-    errorAlert.value = false
-  } else {
-    errorAlert.value = true
-  }
-}
-const filterMoney = computed(() => {
-  return money.value >= 1
-})
-
-const sumArr = ref([
-  {
-    id: 1,
-    value: 1000,
-    label: '1 000 ₸'
-  },
-  {
-    id: 2,
-    value: 5000,
-    label: '5 000 ₸'
-  },
-  {
-    id: 3,
-    value: 10000,
-    label: '10 000 ₸'
-  },
-  {
-    id: 4,
-    value: 20000,
-    label: '20 000 ₸'
-  }
-])
-const onClick = (value: number) => {
-  money.value = value
-}
-
-watch(
-  () => props.isChangeOpened,
-  (open: boolean) => {
-    if (!open) {
-      money.value = 0
-      errorAlert.value = false
-    }
-  }
-)
-</script>
-
-<template>
-  <a-modal
-    v-model="isOpen"
-    :title="t('modals.replenish_modal.title')"
-  >
-    <div class="flex flex-col items-center justify-center gap-5">
-      <a-ill-bill class="max-h-[120px] max-w-[120px]" />
-      <p class="text-body-md-strong">
-        {{ t('modals.replenish_modal.info') }}
-      </p>
-      <a-input-standard
-        v-model="money"
-        :label="`${t('modals.replenish_modal.enter_sum')}`"
-        type="number"
-        pattern="[0-9]*"
-        clearable
-      />
-      <a-alert
-        v-if="errorAlert"
-        color="red"
-      >
-        {{ t('modals.replenish_modal.error') }}
-      </a-alert>
-      <div class="flex w-full items-center justify-between">
-        <a-chips
-          v-for="item in sumArr"
-          :key="item.id"
-          view="standard"
-          size="lg"
-          :class="[
-            money === item.value
-              ? 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover'
-              : ''
-          ]"
-          @click.stop="onClick(item.value)"
-        >
-          <span>{{ item.label }}</span>
-        </a-chips>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex w-full gap-2">
-        <a-button
-          view="outline"
-          class="w-full"
-          @click="$emit('close')"
-        >
-          {{ t('modals.buttons.back') }}
-        </a-button>
-        <a-button
-          class="w-full"
-          :disabled="!filterMoney"
-          @click="handlePayment"
-        >
-          {{ t('modals.buttons.topUp') }}
-        </a-button>
-      </div>
-    </template>
-  </a-modal>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { useReplenishModal } from '#adata-ui/composables/modalsState'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    isChangeOpened?: boolean
+  }>(),
+  {
+    isChangeOpened: false
+  }
+)
+const isOpen = useReplenishModal()
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'next', sum: number): void
+}>()
+const money = ref(0)
+const errorAlert = ref(false)
+
+const handlePayment = () => {
+  if (money.value <= 1000000) {
+    emit('next', money.value)
+    errorAlert.value = false
+  } else {
+    errorAlert.value = true
+  }
+}
+const filterMoney = computed(() => {
+  return money.value >= 1
+})
+
+const sumArr = ref([
+  {
+    id: 1,
+    value: 1000,
+    label: '1 000 ₸'
+  },
+  {
+    id: 2,
+    value: 5000,
+    label: '5 000 ₸'
+  },
+  {
+    id: 3,
+    value: 10000,
+    label: '10 000 ₸'
+  },
+  {
+    id: 4,
+    value: 20000,
+    label: '20 000 ₸'
+  }
+])
+const onClick = (value: number) => {
+  money.value = value
+}
+
+watch(
+  () => props.isChangeOpened,
+  (open: boolean) => {
+    if (!open) {
+      money.value = 0
+      errorAlert.value = false
+    }
+  }
+)
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    :title="t('modals.replenish_modal.title')"
+  >
+    <div class="flex flex-col items-center justify-center gap-5">
+      <a-ill-bill class="max-h-[120px] max-w-[120px]" />
+      <p class="text-body-md-strong">
+        {{ t('modals.replenish_modal.info') }}
+      </p>
+      <a-input-standard
+        v-model="money"
+        :label="`${t('modals.replenish_modal.enter_sum')}`"
+        type="number"
+        pattern="[0-9]*"
+        clearable
+      />
+      <a-alert
+        v-if="errorAlert"
+        color="red"
+      >
+        {{ t('modals.replenish_modal.error') }}
+      </a-alert>
+      <div class="flex w-full items-center justify-between">
+        <a-chips
+          v-for="item in sumArr"
+          :key="item.id"
+          view="standard"
+          size="lg"
+          :class="[
+            money === item.value
+              ? 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover'
+              : ''
+          ]"
+          @click.stop="onClick(item.value)"
+        >
+          <span>{{ item.label }}</span>
+        </a-chips>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex w-full gap-2">
+        <a-button
+          view="outline"
+          class="w-full"
+          @click="$emit('close')"
+        >
+          {{ t('modals.buttons.back') }}
+        </a-button>
+        <a-button
+          class="w-full"
+          :disabled="!filterMoney"
+          @click="handlePayment"
+        >
+          {{ t('modals.buttons.topUp') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped></style>

package/components/modals/ReportBugConfirmModal.vue

@@ -1,32 +1,32 @@
-<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="text-h2 text-center">
-        {{ t('modals.report_bug.confirmed') }}
-      </p>
-      <p class="text-body-md 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-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="text-h2 text-center">
+        {{ t('modals.report_bug.confirmed') }}
+      </p>
+      <p class="text-body-md 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>

package/components/modals/ReportBugModal.vue

@@ -1,172 +1,172 @@
-<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-body-lg-strong text-primary" 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-mail-active class="size-[140px]" />
-        <slot name="title">
-          <p class="text-body-md 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="6"
-          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>({ 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-body-lg-strong text-primary" 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-mail-active class="size-[140px]" />
+        <slot name="title">
+          <p class="text-body-md 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="6"
+          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>