adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

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-white p-8 dark:bg-gray-900 sm:gap-8 sm:rounded-[20px]">
-    <div class="flex flex-col gap-2">
-      <h2 class="heading-01">
-        {{ formType === 'feedback' ? t('forms.feedback.title') : t('forms.demo.t') }}
-      </h2>
-      <p class="body-400 text-gray-600 dark:text-gray-200">
-        {{ 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-gray-50 dark:bg-gray-800"
-          :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-gray-50 dark:bg-gray-800"
-          :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-gray-50 dark:bg-gray-800"
-          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-[18px] font-semibold">
-        {{ t('forms.feedback.modalTitle') }}
-      </h4>
-      <p class="body-400 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>

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

@@ -0,0 +1,183 @@
+<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>