89 lines
3.1 KiB
PHP
89 lines
3.1 KiB
PHP
|
{{--
|
||
|
|
Checkbox Component
|
||
|
|
|
||
|
|
A checkbox with authorization support, label positioning, and description.
|
||
|
|
|
||
|
|
Props:
|
||
|
|
- id: string (required) - Checkbox element ID
|
||
|
|
- label: string|null - Label text
|
||
|
|
- description: string|null - Description text below label
|
||
|
|
- error: string|null - Error message
|
||
|
|
- labelPosition: string - Label position: 'left' or 'right' (default: 'right')
|
||
|
|
- disabled: bool - Whether checkbox is disabled
|
||
|
|
- canGate: string|null - Gate/ability to check
|
||
|
|
- canResource: mixed|null - Resource to check against
|
||
|
|
- canHide: bool - Hide instead of disable when unauthorized
|
||
|
|
|
||
|
|
Usage:
|
||
|
|
<x-core-forms.checkbox
|
||
|
|
id="is_active"
|
||
|
|
label="Active"
|
||
|
|
description="Enable this feature for users"
|
||
|
|
canGate="update"
|
||
|
|
:canResource="$model"
|
||
|
|
wire:model="is_active"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{{-- Label on left --}}
|
||
|
|
<x-core-forms.checkbox
|
||
|
|
id="remember"
|
||
|
|
label="Remember me"
|
||
|
|
labelPosition="left"
|
||
|
|
wire:model="remember"
|
||
|
|
/>
|
||
|
|
--}}
|
||
|
|
|
||
|
|
@if(!$hidden)
|
||
|
|
<div {{ $attributes->only(['class', 'x-show', 'x-if', 'x-cloak'])->merge(['class' => 'space-y-1']) }}>
|
||
|
|
<div @class([
|
||
|
|
'flex items-start gap-3',
|
||
|
|
'flex-row-reverse justify-end' => $labelPosition === 'left',
|
||
|
|
])>
|
||
|
|
{{-- Checkbox --}}
|
||
|
|
<div class="flex items-center h-5">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
id="{{ $id }}"
|
||
|
|
name="{{ $id }}"
|
||
|
|
@if($disabled) disabled @endif
|
||
|
|
{{ $attributes->except(['class', 'x-show', 'x-if', 'x-cloak'])->class([
|
||
|
|
'h-4 w-4 rounded transition-colors duration-200',
|
||
|
|
'border-gray-300 dark:border-gray-600',
|
||
|
|
'text-violet-600 dark:text-violet-500',
|
||
|
|
'focus:ring-2 focus:ring-violet-500/20 focus:ring-offset-0',
|
||
|
|
'bg-white dark:bg-gray-800',
|
||
|
|
// Disabled state
|
||
|
|
'bg-gray-100 dark:bg-gray-900 cursor-not-allowed' => $disabled,
|
||
|
|
]) }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Label and description --}}
|
||
|
|
@if($label || $description)
|
||
|
|
<div class="text-sm">
|
||
|
|
@if($label)
|
||
|
|
<label for="{{ $id }}" @class([
|
||
|
|
'font-medium',
|
||
|
|
'text-gray-700 dark:text-gray-300' => !$disabled,
|
||
|
|
'text-gray-500 dark:text-gray-500 cursor-not-allowed' => $disabled,
|
||
|
|
])>
|
||
|
|
{{ $label }}
|
||
|
|
</label>
|
||
|
|
@endif
|
||
|
|
|
||
|
|
@if($description)
|
||
|
|
<p class="text-gray-500 dark:text-gray-400">{{ $description }}</p>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Error message --}}
|
||
|
|
@if($error)
|
||
|
|
<p class="text-sm text-red-600 dark:text-red-400">{{ $error }}</p>
|
||
|
|
@elseif($errors->has($id))
|
||
|
|
<p class="text-sm text-red-600 dark:text-red-400">{{ $errors->first($id) }}</p>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
@endif
|