borbad.s5l.ru/vue/app/shared/FormValidator/index.pug

.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'
      ) ⚠️ Пожалуйста, исправьте ошибки в форме