input.blade.php 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <div class="row mb-2">
  2. <label for="{{ $name }}" class="col-form-label @if(!($right ?? null)) col-md-4 text-md-end @endif">
  3. {{ $title ?? '' }}
  4. @isset($required)
  5. <sup>*</sup>
  6. @endisset
  7. </label>
  8. <div class="@if(!($right ?? null)) col-md-8 @endif">
  9. <div class="input-group">
  10. <input type="{{ $type ?? 'text' }}" name="{{ $name }}" id="{{ $name }}"
  11. class="@if(($type ?? 'text') === 'range') form-range @else form-control @endif @error($name) is-invalid @enderror "
  12. @disabled($disabled ?? null) @required($required ?? null)
  13. @isset($min) min="{{ $min }}" @endisset
  14. @isset($max) max="{{ $max }}" @endisset
  15. @isset($style) style="{{ $style }}" @endisset
  16. @isset($pattern) pattern="{{ $pattern }}" @endisset
  17. placeholder="{{ $placeholder ?? ''}}"
  18. @isset($multiple) multiple="multiple" @endisset
  19. @isset($datalist) list="dl-{{ $name }}" @endisset
  20. value="{{ old($name, $value ?? '') }}" autocomplete="off">
  21. @isset($datalist)
  22. <datalist id="dl-{{ $name }}">
  23. @foreach($datalist as $s)
  24. <option value="{{ $s }}"></option>
  25. @endforeach
  26. </datalist>
  27. @endisset
  28. @isset($button)
  29. <button class="btn btn-outline-info" type="button"
  30. id="{{ $button }}">{{ $buttonText ?? 'Имя' }}</button>
  31. @endisset
  32. </div>
  33. @if(($type ?? 'text') === 'range')
  34. <label for="{{$name}}" class="form-label fs-6 text-center w-100"><span
  35. id="rangeValue_{{$name}}">{{$value ?? ''}}</span></label>
  36. @endif
  37. @error($name)
  38. <div class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></div>
  39. @enderror
  40. </div>
  41. </div>
  42. @push('scripts')
  43. <script type="module">
  44. console.log($('#rangeValue_{{ $name }}'))
  45. $('[id="{{ $name }}"]').on('input', function () {
  46. $('[id="rangeValue_{{ $name }}"]').text($(this).val());
  47. });
  48. </script>
  49. @endpush