adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/forms/feedback-form/FeedbackForm.vue

@@ -1,177 +1,177 @@
-<script lang="ts" setup>
-import * as z from 'zod'
-import { useUIValidation } from '#adata-ui/composables/useUIValidation'
-
-const props = withDefaults(defineProps<{
-  formType?: 'get-demo' | 'feedback'
-  userInfo: any
-}>(), {
-  formType: 'feedback',
-})
-
-const emit = defineEmits(['submit'])
-
-const { t } = useI18n()
-
-const fullName = ref<string>('')
-const mail = ref<string>('')
-const phone = ref<string>('')
-const comment = ref<string>('')
-
-const isLoading = defineModel< null | any>('isLoading', { default: false })
-const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
-
-const feedbackScheme = z.object({
-  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
-  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
-  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
-})
-
-const getDemoScheme = z.object({
-  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
-  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
-  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
-})
-
-const submitted = ref(false)
-
-const feedbackValidation = useUIValidation(
-  feedbackScheme,
-  () => ({
-    phone: phone.value,
-    mail: mail.value,
-    comment: comment.value,
-  }),
-  submitted,
-)
-
-const getDemoValidation = useUIValidation(
-  getDemoScheme,
-  () => ({
-    fullName: fullName.value,
-    phone: phone.value,
-    comment: comment.value,
-  }),
-  submitted,
-)
-
-const send = () => {
-  submitted.value = true
-
-  if (props.formType === 'feedback') {
-    if (feedbackValidation.validation.value) return
-  }
-  else {
-    if (getDemoValidation.validation.value) return
-  }
-
-  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
-  fullName.value = ''
-  phone.value = ''
-  mail.value = props.userInfo?.email || ''
-  comment.value = ''
-}
-
-defineExpose({
-  reset: () => (submitted.value = false),
-})
-
-onMounted(() => {
-  mail.value = props.userInfo?.email || ''
-})
-</script>
-
-<template>
-  <section class="flex flex-col gap-4 bg-main p-8 sm:gap-8 sm:rounded-[20px]">
-    <div class="flex flex-col gap-2">
-      <h2 class="text-display-sm">
-        {{ formType === 'feedback' ? t('forms.feedback.title') : t('forms.demo.t') }}
-      </h2>
-      <p class="text-body-md text-quaternary">
-        {{ formType === 'feedback' ? t('forms.feedback.subtitle') : t('forms.demo.st') }}
-      </p>
-    </div>
-    <form
-      action=""
-      class="flex flex-col justify-between gap-2 sm:flex-row sm:gap-4"
-    >
-      <div class="flex flex-col gap-2 sm:w-1/2 sm:gap-4">
-        <a-input-standard
-          v-if="formType === 'feedback'"
-          v-model="mail"
-          type="email"
-          color-classes="bg-muted"
-          :error="feedbackValidation.getError('mail')"
-          :label="t('forms.feedback.email')"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
-        <a-input-standard
-          v-else
-          v-model="fullName"
-          :error="getDemoValidation.getError('fullName')"
-          :label="t('forms.demo.n')"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
-        <a-input-standard
-          v-model="phone"
-          v-maska
-          type="tel"
-          color-classes="bg-muted"
-          :error="formType === 'feedback' ? feedbackValidation.getError('phone') : getDemoValidation.getError('phone')"
-          :label="t('forms.feedback.phone')"
-          data-maska="8 (###) ###-##-##"
-          required
-          size="md"
-          :disabled="isLoading"
-        />
-      </div>
-      <div class="sm:w-1/2">
-        <a-textarea
-          v-model="comment"
-          :error="formType === 'feedback' ? feedbackValidation.getError('comment') : getDemoValidation.getError('comment')"
-          :label="t('forms.feedback.comment')"
-          :resizeable="false"
-          class="min-h-[72px]"
-          color-classes="bg-muted"
-          required
-          size="sm"
-          :disabled="isLoading"
-        />
-      </div>
-    </form>
-    <AButton
-      class="w-full self-end sm:w-[215px]"
-      :loading="isLoading"
-      @click="send"
-    >
-      {{ formType === 'feedback' ? t('forms.feedback.send') : t('forms.demo.b') }}
-    </AButton>
-  </section>
-
-  <a-modal-v2
-    v-model="isModalOpen"
-    width="424px"
-    @close="isModalOpen = false"
-  >
-    <div class="flex flex-col items-center gap-4 px-6 py-4">
-      <a-ill-mail />
-      <h4 class="text-h4">
-        {{ t('forms.feedback.modalTitle') }}
-      </h4>
-      <p class="text-body-md max-[352xp]">
-        {{ t('forms.feedback.modalSubtitle') }}
-      </p>
-      <a-button-v2
-        view="outline"
-        block
-        @click="isModalOpen = false"
-      >
-        {{ t('forms.feedback.close') }}
-      </a-button-v2>
-    </div>
-  </a-modal-v2>
-</template>
+<script lang="ts" setup>
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = withDefaults(defineProps<{
+  formType?: 'get-demo' | 'feedback'
+  userInfo: any
+}>(), {
+  formType: 'feedback',
+})
+
+const emit = defineEmits(['submit'])
+
+const { t } = useI18n()
+
+const fullName = ref<string>('')
+const mail = ref<string>('')
+const phone = ref<string>('')
+const comment = ref<string>('')
+
+const isLoading = defineModel< null | any>('isLoading', { default: false })
+const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
+
+const feedbackScheme = z.object({
+  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
+  mail: z.string().nonempty(t('forms.feedback.fieldRequired')).email(t('forms.feedback.emailValid')),
+  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
+})
+
+const getDemoScheme = z.object({
+  fullName: z.string().nonempty(t('forms.feedback.fieldRequired')),
+  phone: z.string().nonempty(t('forms.feedback.fieldRequired')).min(17, t('forms.feedback.phoneMinLength', { count: 10 })),
+  comment: z.string().nonempty(t('forms.feedback.fieldRequired')).min(10, t('forms.feedback.commentMinLength', { count: 10 })).max(250, t('forms.feedback.commentMaxLength', { count: 250 })),
+})
+
+const submitted = ref(false)
+
+const feedbackValidation = useUIValidation(
+  feedbackScheme,
+  () => ({
+    phone: phone.value,
+    mail: mail.value,
+    comment: comment.value,
+  }),
+  submitted,
+)
+
+const getDemoValidation = useUIValidation(
+  getDemoScheme,
+  () => ({
+    fullName: fullName.value,
+    phone: phone.value,
+    comment: comment.value,
+  }),
+  submitted,
+)
+
+const send = () => {
+  submitted.value = true
+
+  if (props.formType === 'feedback') {
+    if (feedbackValidation.validation.value) return
+  }
+  else {
+    if (getDemoValidation.validation.value) return
+  }
+
+  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
+  fullName.value = ''
+  phone.value = ''
+  mail.value = props.userInfo?.email || ''
+  comment.value = ''
+}
+
+defineExpose({
+  reset: () => (submitted.value = false),
+})
+
+onMounted(() => {
+  mail.value = props.userInfo?.email || ''
+})
+</script>
+
+<template>
+  <section class="flex flex-col gap-4 bg-main p-8 sm:gap-8 sm:rounded-[20px]">
+    <div class="flex flex-col gap-2">
+      <h2 class="text-display-sm">
+        {{ formType === 'feedback' ? t('forms.feedback.title') : t('forms.demo.t') }}
+      </h2>
+      <p class="text-body-md text-quaternary">
+        {{ formType === 'feedback' ? t('forms.feedback.subtitle') : t('forms.demo.st') }}
+      </p>
+    </div>
+    <form
+      action=""
+      class="flex flex-col justify-between gap-2 sm:flex-row sm:gap-4"
+    >
+      <div class="flex flex-col gap-2 sm:w-1/2 sm:gap-4">
+        <a-input-standard
+          v-if="formType === 'feedback'"
+          v-model="mail"
+          type="email"
+          color-classes="bg-muted"
+          :error="feedbackValidation.getError('mail')"
+          :label="t('forms.feedback.email')"
+          required
+          size="md"
+          :disabled="isLoading"
+        />
+        <a-input-standard
+          v-else
+          v-model="fullName"
+          :error="getDemoValidation.getError('fullName')"
+          :label="t('forms.demo.n')"
+          required
+          size="md"
+          :disabled="isLoading"
+        />
+        <a-input-standard
+          v-model="phone"
+          v-maska
+          type="tel"
+          color-classes="bg-muted"
+          :error="formType === 'feedback' ? feedbackValidation.getError('phone') : getDemoValidation.getError('phone')"
+          :label="t('forms.feedback.phone')"
+          data-maska="8 (###) ###-##-##"
+          required
+          size="md"
+          :disabled="isLoading"
+        />
+      </div>
+      <div class="sm:w-1/2">
+        <a-textarea
+          v-model="comment"
+          :error="formType === 'feedback' ? feedbackValidation.getError('comment') : getDemoValidation.getError('comment')"
+          :label="t('forms.feedback.comment')"
+          :resizeable="false"
+          class="min-h-[72px]"
+          color-classes="bg-muted"
+          required
+          size="sm"
+          :disabled="isLoading"
+        />
+      </div>
+    </form>
+    <AButton
+      class="w-full self-end sm:w-[215px]"
+      :loading="isLoading"
+      @click="send"
+    >
+      {{ formType === 'feedback' ? t('forms.feedback.send') : t('forms.demo.b') }}
+    </AButton>
+  </section>
+
+  <a-modal-v2
+    v-model="isModalOpen"
+    width="424px"
+    @close="isModalOpen = false"
+  >
+    <div class="flex flex-col items-center gap-4 px-6 py-4">
+      <a-ill-mail />
+      <h4 class="text-h4">
+        {{ t('forms.feedback.modalTitle') }}
+      </h4>
+      <p class="text-body-md max-[352xp]">
+        {{ t('forms.feedback.modalSubtitle') }}
+      </p>
+      <a-button-v2
+        view="outline"
+        block
+        @click="isModalOpen = false"
+      >
+        {{ t('forms.feedback.close') }}
+      </a-button-v2>
+    </div>
+  </a-modal-v2>
+</template>