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

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

@@ -1,183 +1,186 @@
-<script lang="ts" setup>
-import * as z from 'zod'
-import { useUIValidation } from '#adata-ui/composables/useUIValidation'
-import MessageSquare from '#adata-ui/icons/message/message-square.vue'
-import AInputV2 from '#adata-ui/components/forms/input/AInputV2.vue'
-import ATextareaV2 from '#adata-ui/components/forms/input/textarea/ATextareaV2.vue'
-import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
-
-const props = withDefaults(defineProps<{
-  userInfo: any
-  title?: string
-  subtitle?: string
-}>(), {
-  title: undefined,
-  subtitle: undefined,
-})
-
-const emit = defineEmits(['submit'])
-
-const { t } = useI18n()
-
-const isLoading = defineModel< null | any>('isLoading', { default: false })
-const isModalOpen = defineModel< null | any>('isModalOpen', { default: false })
-
-const fullName = ref<string>('')
-const phone = ref<string>('')
-const mail = ref<string>('')
-const comment = ref<string>('')
-
-const submitted = ref(false)
-
-const scheme = 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 })),
-  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 { validation, getError } = useUIValidation(
-  scheme,
-  () => ({
-    fullName: fullName.value,
-    phone: phone.value,
-    mail: mail.value,
-    comment: comment.value,
-  }),
-  submitted,
-)
-
-const send = () => {
-  submitted.value = true
-  if (validation.value) return;
-
-  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
-  submitted.value = false
-  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="feedback-v2">
-    <!-- осознанно константный: промо-градиент brand-50/100 и shadow-brand-600/10 — константно-яркая промо-карточка, не флипается в тёмной теме -->
-    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-brand-100 bg-linear-to-br from-brand-50 to-brand-100 p-4 md:gap-10 md:p-12 lg:grid-cols-2">
-      <div>
-        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-100 bg-main px-3 py-1.5 text-body-md text-brand">
-          <message-square class="size-3.5" />
-          {{ t('forms.feedback.value') }}
-        </div>
-
-        <h2 class="text-h2 md:text-display-sm">
-          {{ title ?? t('forms.feedback.title') }}
-        </h2>
-        <p class="mt-3 max-w-[448px] text-body-sm text-quaternary md:text-body-lg">
-          {{ subtitle ?? t('forms.feedback.subtitle') }}
-        </p>
-
-        <div class="mt-6 flex flex-col gap-3">
-          <slot name="contacts" />
-        </div>
-      </div>
-
-      <div class="rounded-[24px] border border-default bg-main p-4 shadow-xl shadow-brand-600/10 md:p-7">
-        <form
-          class="flex flex-col gap-3"
-          @submit.prevent="send"
-        >
-          <a-input-v2
-            v-model="fullName"
-            variant="gray"
-            size="md"
-            required
-            :label="t('forms.demo.n')"
-            :error="getError('fullName')"
-            :disabled="isLoading"
-          />
-          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-            <a-input-v2
-              v-model="phone"
-              type="tel"
-              variant="gray"
-              size="md"
-              required
-              mask="8 (###) ###-##-##"
-              :label="t('forms.feedback.phone')"
-              :error="getError('phone')"
-              :disabled="isLoading"
-            />
-            <a-input-v2
-              v-model="mail"
-              type="email"
-              variant="gray"
-              size="md"
-              required
-              :label="t('forms.feedback.email')"
-              :error="getError('mail')"
-              :disabled="isLoading"
-            />
-          </div>
-          <a-textarea-v2
-            v-model="comment"
-            variant="gray"
-            size="md"
-            :rows="4"
-            resize="none"
-            :label="t('forms.feedback.comment')"
-            :error="getError('comment')"
-            :disabled="isLoading"
-            required
-          />
-          <a-button-v2
-            type="submit"
-            size="lg"
-            block
-            class="mt-1"
-            :loading="isLoading"
-          >
-            {{ t('forms.feedback.send') }}
-          </a-button-v2>
-          <p class="mt-1 text-center text-body-sm text-disabled">
-            {{ t('forms.feedback.consent') }}
-            <span class="text-brand">
-              {{ t('forms.feedback.consentAccent') }}
-            </span>
-          </p>
-        </form>
-      </div>
-    </div>
-  </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="max-w-[352px] text-center text-body-md">
-        {{ 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'
+import MessageSquare from '#adata-ui/icons/message/message-square.vue'
+import AInputV2 from '#adata-ui/components/forms/input/AInputV2.vue'
+import ATextareaV2 from '#adata-ui/components/forms/input/textarea/ATextareaV2.vue'
+import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+
+const props = withDefaults(defineProps<{
+  userInfo: any
+  title?: string
+  subtitle?: string
+}>(), {
+  title: undefined,
+  subtitle: undefined,
+})
+
+const emit = defineEmits(['submit'])
+const { locale } = useI18n()
+const { t } = useI18n()
+const { landing } = useUrls()
+const isLoading = defineModel<null | any>('isLoading', { default: false })
+const isModalOpen = defineModel<null | any>('isModalOpen', { default: false })
+const fullName = ref<string>('')
+const phone = ref<string>('')
+const mail = ref<string>('')
+const comment = ref<string>('')
+const submitted = ref(false)
+
+const scheme = 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 })),
+  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 { validation, getError } = useUIValidation(
+  scheme,
+  () => ({
+    fullName: fullName.value,
+    phone: phone.value,
+    mail: mail.value,
+    comment: comment.value,
+  }),
+  submitted,
+)
+
+const send = () => {
+  submitted.value = true
+  if (validation.value) return;
+
+  emit('submit', { sender_name: fullName.value, phone_number: phone.value, email: mail.value, message: comment.value })
+  submitted.value = false
+  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="feedback-v2">
+    <!-- градиент промо-карточки — осознанный литерал (§05 аудита), но флипается в тёмной теме -->
+    <div class="grid grid-cols-1 items-center gap-8 rounded-[28px] border border-default bg-linear-to-br from-[#f0f8ff] via-[#eef4ff] to-[#f0f8ff] p-4 md:gap-10 md:p-12 lg:grid-cols-2 dark:from-[#1a2231] dark:via-[#15191f] dark:to-[#121316]">
+      <div>
+        <div class="mb-4 inline-flex items-center gap-2 rounded-full border border-default bg-main h-8 px-3 text-body-md text-brand">
+          <message-square class="size-3.5" />
+          {{ t('forms.feedback.value') }}
+        </div>
+
+        <h2 class="text-h2 md:text-display-sm">
+          {{ title ?? t('forms.feedback.title') }}
+        </h2>
+        <p class="mt-3 max-w-[448px] text-body-sm text-quaternary md:text-body-lg">
+          {{ subtitle ?? t('forms.feedback.subtitle') }}
+        </p>
+
+        <div class="mt-6 flex flex-col gap-3">
+          <slot name="contacts" />
+        </div>
+      </div>
+
+      <div class="rounded-[24px] border border-default bg-main p-4 shadow-xl shadow-brand-600/10 md:p-7">
+        <form
+          class="flex flex-col gap-3"
+          @submit.prevent="send"
+        >
+          <a-input-v2
+            v-model="fullName"
+            variant="gray"
+            size="md"
+            required
+            :label="t('forms.demo.n')"
+            :error="getError('fullName')"
+            :disabled="isLoading"
+          />
+          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <a-input-v2
+              v-model="phone"
+              type="tel"
+              variant="gray"
+              size="md"
+              required
+              mask="8 (###) ###-##-##"
+              :label="t('forms.feedback.phone')"
+              :error="getError('phone')"
+              :disabled="isLoading"
+            />
+            <a-input-v2
+              v-model="mail"
+              type="email"
+              variant="gray"
+              size="md"
+              required
+              :label="t('forms.feedback.email')"
+              :error="getError('mail')"
+              :disabled="isLoading"
+            />
+          </div>
+          <a-textarea-v2
+            v-model="comment"
+            variant="gray"
+            size="md"
+            :rows="4"
+            resize="none"
+            :label="t('forms.feedback.comment')"
+            :error="getError('comment')"
+            :disabled="isLoading"
+            required
+          />
+          <a-button-v2
+            type="submit"
+            size="lg"
+            block
+            class="mt-1"
+            :loading="isLoading"
+          >
+            {{ t('forms.feedback.send') }}
+          </a-button-v2>
+          <p class="mt-1 text-center text-body-sm text-disabled">
+            {{ t('forms.feedback.consent') }}
+            <nuxt-link-locale
+              class="cursor-pointer text-brand"
+              :to="buildLocalizedUrl(locale, landing, PAGES.privacy)"
+              target="_blank"
+            >
+              {{ t('forms.feedback.consentAccent') }}
+            </nuxt-link-locale>
+          </p>
+        </form>
+      </div>
+    </div>
+  </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="max-w-[352px] text-center text-body-md">
+        {{ 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>