select2.blade.php 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. @extends('adminlte::components.form.input-group-component')
  2. {{-- Set errors bag internallly --}}
  3. @php($setErrorsBag($errors ?? null))
  4. {{-- Set input group item section --}}
  5. @section('input_group_item')
  6. {{-- Select --}}
  7. <select id="{{ $id }}" name="{{ $name }}"
  8. {{ $attributes->merge(['class' => $makeItemClass()]) }}>
  9. {{ $slot }}
  10. </select>
  11. @overwrite
  12. {{-- Add plugin initialization and configuration code --}}
  13. @push('js')
  14. <script>
  15. $(() => {
  16. $('#{{ $id }}').select2( @json($config) );
  17. // Add support to auto select old submitted values in case of
  18. // validation errors.
  19. @if($errors->any() && $enableOldSupport)
  20. let oldOptions = @json(collect($getOldValue($errorKey)));
  21. $('#{{ $id }} option').each(function()
  22. {
  23. let value = $(this).val() || $(this).text();
  24. $(this).prop('selected', oldOptions.includes(value));
  25. });
  26. $('#{{ $id }}').trigger('change');
  27. @endif
  28. })
  29. </script>
  30. @endpush
  31. {{-- CSS workarounds for the Select2 plugin --}}
  32. {{-- NOTE: this may change with newer plugin versions --}}
  33. @once
  34. @push('css')
  35. <style type="text/css">
  36. {{-- SM size setup --}}
  37. .input-group-sm .select2-selection--single {
  38. height: calc(1.8125rem + 2px) !important
  39. }
  40. .input-group-sm .select2-selection--single .select2-selection__rendered,
  41. .input-group-sm .select2-selection--single .select2-selection__placeholder {
  42. font-size: .875rem !important;
  43. line-height: 2.125;
  44. }
  45. .input-group-sm .select2-selection--multiple {
  46. min-height: calc(1.8125rem + 2px) !important
  47. }
  48. .input-group-sm .select2-selection--multiple .select2-selection__rendered {
  49. font-size: .875rem !important;
  50. line-height: normal;
  51. }
  52. {{-- LG size setup --}}
  53. .input-group-lg .select2-selection--single {
  54. height: calc(2.875rem + 2px) !important;
  55. }
  56. .input-group-lg .select2-selection--single .select2-selection__rendered,
  57. .input-group-lg .select2-selection--single .select2-selection__placeholder {
  58. font-size: 1.25rem !important;
  59. line-height: 2.25;
  60. }
  61. .input-group-lg .select2-selection--multiple {
  62. min-height: calc(2.875rem + 2px) !important
  63. }
  64. .input-group-lg .select2-selection--multiple .select2-selection__rendered {
  65. font-size: 1.25rem !important;
  66. line-height: 1.7;
  67. }
  68. {{-- Enhance the plugin to support readonly attribute --}}
  69. select[readonly].select2-hidden-accessible + .select2-container {
  70. pointer-events: none;
  71. touch-action: none;
  72. }
  73. select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
  74. background: #e9ecef;
  75. box-shadow: none;
  76. }
  77. select[readonly].select2-hidden-accessible + .select2-container .select2-search__field {
  78. display: none;
  79. }
  80. </style>
  81. @endpush
  82. @endonce