input-switch.blade.php 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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. {{-- Input Switch --}}
  7. <input type="checkbox" id="{{ $id }}" name="{{ $name }}"
  8. {{ $attributes->merge(['class' => $makeItemClass(), 'value' => 'true']) }}>
  9. @overwrite
  10. {{-- Add plugin initialization and configuration code --}}
  11. @push('js')
  12. <script>
  13. $(() => {
  14. let usrCfg = @json($config);
  15. $('#{{ $id }}').bootstrapSwitch(usrCfg);
  16. // Workaround to ensure correct state setup on initialization.
  17. $('#{{ $id }}').bootstrapSwitch('state', usrCfg.state ?? false);
  18. // Add support to auto select the previous submitted value in case of
  19. // validation errors.
  20. @if($errors->any() && $enableOldSupport)
  21. let oldState = @json((bool)$getOldValue($errorKey));
  22. $('#{{ $id }}').bootstrapSwitch('state', oldState);
  23. @endif
  24. })
  25. </script>
  26. @endpush
  27. {{-- Setup the height/font of the plugin when using sm/lg sizes --}}
  28. {{-- NOTE: this may change with newer plugin versions --}}
  29. @once
  30. @push('css')
  31. <style type="text/css">
  32. {{-- MD (default) size setup --}}
  33. .input-group .bootstrap-switch-handle-on,
  34. .input-group .bootstrap-switch-handle-off {
  35. height: 2.25rem !important;
  36. }
  37. {{-- LG size setup --}}
  38. .input-group-lg .bootstrap-switch-handle-on,
  39. .input-group-lg .bootstrap-switch-handle-off {
  40. height: 2.875rem !important;
  41. font-size: 1.25rem !important;
  42. }
  43. {{-- SM size setup --}}
  44. .input-group-sm .bootstrap-switch-handle-on,
  45. .input-group-sm .bootstrap-switch-handle-off {
  46. height: 1.8125rem !important;
  47. font-size: .875rem !important;
  48. }
  49. {{-- Custom invalid style setup --}}
  50. .adminlte-invalid-iswgroup > .bootstrap-switch-wrapper,
  51. .adminlte-invalid-iswgroup > .input-group-prepend > *,
  52. .adminlte-invalid-iswgroup > .input-group-append > * {
  53. box-shadow: 0 .25rem 0.5rem rgba(255,0,0,.25);
  54. }
  55. </style>
  56. @endpush
  57. @endonce