You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.3 KiB
40 lines
1.3 KiB
@props([
|
|
'mask' => null,
|
|
'state' => null,
|
|
])
|
|
|
|
<div class="mt-1 rounded-md shadow-sm">
|
|
<input
|
|
{{ $attributes }}
|
|
type="text"
|
|
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5
|
|
@if ($state === false) border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red @endif"
|
|
/>
|
|
</div>
|
|
|
|
@if ($mask)
|
|
@push('scripts')
|
|
<script>
|
|
new Cleave('#{{ $attributes->get('id') }}', {
|
|
@if ($mask === 'date')
|
|
date: true,
|
|
datePattern: ['d', 'm', 'Y']
|
|
@elseif ($mask === 'postcode')
|
|
delimiter: '-',
|
|
blocks: [5, 3],
|
|
numericOnly: true,
|
|
@elseif ($mask === 'phone')
|
|
phone: true,
|
|
phoneRegionCode: 'BR'
|
|
@elseif ($mask === 'currency')
|
|
delimiter: '.',
|
|
numeralDecimalMark: ',',
|
|
numeral: true,
|
|
numeralPositiveOnly: true,
|
|
numeralThousandsGroupStyle: 'none',
|
|
numeralDecimalScale: 0,
|
|
@endif
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endif
|