.form-validator form(@submit='handleSubmit' novalidate) slot(name='default') //- Поле email с валидацией .form-group.mb-6(v-if='fields.email') label.block.text-sm.font-medium.mb-2(for='email' class='text-gray-700 dark:text-gray-300') Email адрес input.w-full.px-4.py-3.rounded-lg.border.transition-colors( id='email' type='email' v-model='formData.email' @input='debouncedValidate("email")' @blur='validateField("email")' :class='getFieldClasses("email")' placeholder='your@email.com' autocomplete='email' ) .validation-message.mt-2.text-sm.transition-all.duration-300( v-if='errors.email' class='text-red-500 dark:text-red-400' ) {{ errors.email }} //- Поле телефона .form-group.mb-6(v-if='fields.phone') label.block.text-sm.font-medium.mb-2(for='phone' class='text-gray-700 dark:text-gray-300') Телефон input.w-full.px-4.py-3.rounded-lg.border.transition-colors( id='phone' type='tel' v-model='formData.phone' @input='debouncedValidate("phone")' @blur='validateField("phone")' :class='getFieldClasses("phone")' placeholder='+992 XX XXX-XX-XX' autocomplete='tel' ) .validation-message.mt-2.text-sm.transition-all.duration-300( v-if='errors.phone' class='text-red-500 dark:text-red-400' ) {{ errors.phone }} //- Файловый загрузчик :cite[2]:cite[7] .form-group.mb-6(v-if='fields.file') label.block.text-sm.font-medium.mb-2(for='file' class='text-gray-700 dark:text-gray-300') Загрузить файл input.w-full.px-4.py-3.rounded-lg.border.transition-colors( id='file' type='file' @change='handleFileUpload' accept='.jpg,.jpeg,.png,.pdf' :class='getFieldClasses("file")' ) .validation-message.mt-2.text-sm.transition-all.duration-300( v-if='errors.file' class='text-red-500 dark:text-red-400' ) {{ errors.file }} .file-info.mt-2.text-sm.text-gray-600(class="dark:text-gray-400" v-if='fileInfo') {{ fileInfo }} //- Текстовое поле .form-group.mb-6(v-if='fields.message') label.block.text-sm.font-medium.mb-2(for='message' class='text-gray-700 dark:text-gray-300') Сообщение textarea.w-full.px-4.py-3.rounded-lg.border.transition-colors( id='message' rows='4' v-model='formData.message' @input='debouncedValidate("message")' @blur='validateField("message")' :class='getFieldClasses("message")' placeholder='Ваше сообщение...' ) .validation-message.mt-2.text-sm.transition-all.duration-300( v-if='errors.message' class='text-red-500 dark:text-red-400' ) {{ errors.message }} //- Кнопка отправки button.submit-btn.w-full.bg-accent.text-white.py-3.px-6.rounded-lg.font-medium.transition-all( :disabled='!isFormValid || isSubmitting' type='submit' class='hover:bg-yellow-600 focus:ring-2 focus:ring-accent focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed' ) .button-content.flex.items-center.justify-center span(v-if='!isSubmitting') Отправить span(v-else) Отправка... svg.w-4.h-4.ml-2(v-if='!isSubmitting' fill='none' stroke='currentColor' viewBox='0 0 24 24') path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3') //- Общий статус формы .form-status.mt-4.text-center .success-message.text-green-600.text-sm( class="dark:text-green-400" v-if='isSubmitted && !isSubmitting && isFormValid' ) ✅ Форма успешно отправлена! .error-message.text-red-500.text-sm( class="dark:text-red-400" v-if='Object.keys(errors).length > 0 && !isSubmitting' ) ⚠️ Пожалуйста, исправьте ошибки в форме