first commit
This commit is contained in:
63
resources/views/components/button/basic.blade.php
Normal file
63
resources/views/components/button/basic.blade.php
Normal file
@ -0,0 +1,63 @@
|
||||
@props([
|
||||
'type' => 'button', // Tipo de botón: button, submit, reset (solo para botones)
|
||||
'href' => null, // URL si es un enlace
|
||||
'route' => null, // URL si es un enlace
|
||||
'target' => '_self', // Target del enlace (_self, _blank, etc.)
|
||||
'label' => '', // Texto del botón
|
||||
'size' => 'md', // Tamaño: xs, sm, md, lg, xl
|
||||
'variant' => 'primary', // Color del botón (primary, secondary, success, danger, warning, info, dark)
|
||||
'labelStyle' => false, // Usa `btn-label-*`
|
||||
'outline' => false, // Habilitar estilo outline
|
||||
'textStyle' => false, // Habilitar estilo de texto
|
||||
'rounded' => false, // Habilitar bordes redondeados
|
||||
'block' => false, // Convertir en botón de ancho completo
|
||||
'waves' => true, // Habilitar efecto Vuexy (waves-effect)
|
||||
'icon' => '', // Clases del ícono (ej: 'ti ti-home')
|
||||
'iconOnly' => false, // Botón solo con ícono
|
||||
'iconPosition' => 'left', // Posición del ícono: left, right
|
||||
'active' => false, // Activar estado de botón
|
||||
'disabled' => false, // Deshabilitar botón
|
||||
'attributes' => new \Illuminate\View\ComponentAttributeBag([]), // Atributos adicionales
|
||||
])
|
||||
|
||||
@php
|
||||
// Generar clases dinámicas
|
||||
$classes = [
|
||||
'btn',
|
||||
$labelStyle ? "btn-label-$variant" : '',
|
||||
$outline ? "btn-outline-$variant" : '',
|
||||
$textStyle ? "btn-text-$variant" : '',
|
||||
$labelStyle || $outline || $textStyle ? '' : "btn-$variant",
|
||||
$rounded ? 'rounded-pill' : '',
|
||||
$block ? 'd-block w-100' : '',
|
||||
$waves ? 'waves-effect' : '',
|
||||
$size !== 'md' ? "btn-$size" : '',
|
||||
$active ? 'active' : '',
|
||||
$disabled ? 'disabled' : '',
|
||||
$iconOnly ? 'btn-icon' : '',
|
||||
];
|
||||
@endphp
|
||||
|
||||
@if ($href || $route)
|
||||
{{-- Si es un enlace --}}
|
||||
<a {{ $attributes->merge(['class' => implode(' ', array_filter($classes)), 'href' => ($href?? route($route)), 'target' => $target]) }}>
|
||||
@if ($icon && $iconPosition === 'left')
|
||||
<i class="{{ $icon }} {{ $label ? 'me-2' : '' }}"></i>
|
||||
@endif
|
||||
{{ $label }}
|
||||
@if ($icon && $iconPosition === 'right')
|
||||
<i class="{{ $icon }} {{ $label ? 'ms-2' : '' }}"></i>
|
||||
@endif
|
||||
</a>
|
||||
@else
|
||||
{{-- Si es un botón --}}
|
||||
<button type="{{ $type }}" {{ $attributes->merge(['class' => implode(' ', array_filter($classes))]) }}>
|
||||
@if ($icon && $iconPosition === 'left')
|
||||
<i class="{{ $icon }} {{ $label ? 'me-2' : '' }}"></i>
|
||||
@endif
|
||||
{{ $label }}
|
||||
@if ($icon && $iconPosition === 'right')
|
||||
<i class="{{ $icon }} {{ $label ? 'ms-2' : '' }}"></i>
|
||||
@endif
|
||||
</button>
|
||||
@endif
|
||||
46
resources/views/components/button/group.blade.php
Normal file
46
resources/views/components/button/group.blade.php
Normal file
@ -0,0 +1,46 @@
|
||||
@props([
|
||||
'buttons' => [], // Lista de botones en formato de array
|
||||
'toolbar' => false, // Si es un grupo de botones estilo "toolbar"
|
||||
'nesting' => false, // Si hay un grupo anidado con dropdown
|
||||
'class' => '', // Clases adicionales
|
||||
])
|
||||
|
||||
@php
|
||||
// Determinar si es un toolbar o un grupo simple
|
||||
$groupClass = $toolbar ? 'btn-toolbar' : 'btn-group';
|
||||
@endphp
|
||||
|
||||
<div class="{{ $groupClass }} {{ $class }}" role="group" aria-label="Button group">
|
||||
@foreach($buttons as $button)
|
||||
@if(isset($button['dropdown']))
|
||||
{{-- Botón con dropdown anidado --}}
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop{{ $loop->index }}" type="button" class="btn {{ $button['variant'] ?? 'btn-outline-secondary' }} dropdown-toggle waves-effect" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
@if(isset($button['icon'])) <i class="{{ $button['icon'] }} ti-md"></i> @endif
|
||||
<span class="d-none d-sm-block">{{ $button['label'] ?? 'Dropdown' }}</span>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop{{ $loop->index }}">
|
||||
@foreach($button['dropdown'] as $dropdownItem)
|
||||
<a class="dropdown-item waves-effect" href="{{ $dropdownItem['href'] ?? 'javascript:void(0);' }}">
|
||||
{{ $dropdownItem['label'] }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
{{-- Botón normal o ancla --}}
|
||||
@if(isset($button['href']))
|
||||
<a href="{{ route($button['href']) }}" class="btn {{ $button['variant'] ?? 'btn-outline-secondary' }} waves-effect">
|
||||
@if(isset($button['icon'])) <i class="{{ $button['icon'] }} ti-md"></i> @endif
|
||||
{{ $button['label'] }}
|
||||
</a>
|
||||
@else
|
||||
<button type="{{ $button['type'] ?? 'button' }}" class="btn {{ $button['variant'] ?? 'btn-outline-secondary' }} waves-effect"
|
||||
{{ $button['disabled'] ?? false ? 'disabled' : '' }}>
|
||||
@if(isset($button['icon'])) <i class="{{ $button['icon'] }} ti-md"></i> @endif
|
||||
{{ $button['label'] }}
|
||||
</button>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
30
resources/views/components/button/index-off-canvas.blade.php
Normal file
30
resources/views/components/button/index-off-canvas.blade.php
Normal file
@ -0,0 +1,30 @@
|
||||
@php
|
||||
use Illuminate\Support\Str;
|
||||
@endphp
|
||||
|
||||
@props([
|
||||
'label' => '',
|
||||
'tagName' => '',
|
||||
'icon' => 'ti ti-pencil-plus',
|
||||
])
|
||||
|
||||
@php
|
||||
$tagOffcanvas = ucfirst(Str::camel($tagName));
|
||||
$helperTag = Str::kebab($tagName);
|
||||
|
||||
$ariaControls = "'offcanvas{$tagOffcanvas}";
|
||||
$dataBsToggle = 'offcanvas';
|
||||
$dataBsTarget = "#offcanvas{$tagOffcanvas}";
|
||||
$onclick = "window.formHelpers['{$helperTag}'].reloadOffcanvas('create')";
|
||||
@endphp
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary waves-effect waves-light"
|
||||
tabindex="0"
|
||||
aria-controls='{{ $ariaControls }}'
|
||||
data-bs-toggle="{{ $dataBsToggle }}"
|
||||
data-bs-target="{{ $dataBsTarget }}"
|
||||
onclick="{!! $onclick !!}">
|
||||
<span class="ti-xs {{ $icon }} me-2"></span>{{ ucfirst($label) }}
|
||||
</button>
|
||||
@ -0,0 +1,18 @@
|
||||
@props([
|
||||
'tagName' => '',
|
||||
'mode' => 'create',
|
||||
])
|
||||
|
||||
@php
|
||||
$helperTag = Str::kebab($tagName);
|
||||
|
||||
$onclick = "window.formHelpers['{$helperTag}'].reloadOffcanvas('reset')";
|
||||
@endphp
|
||||
|
||||
<div class="pt-3">
|
||||
<button type="submit" class="btn btn-submit waves-effect waves mr-3 mb-3"></button>
|
||||
<button type="reset" class="btn btn-reset mr-3 mb-3" onclick="{{ $onclick }}" data-bs-dismiss="offcanvas" aria-label="Close">Cancelar</button>
|
||||
</div>
|
||||
@if($mode == 'delete')
|
||||
<x-vuexy-admin::form.checkbox model="confirmDeletion" label="Confirmar eliminación" parentClass="confirm-deletion" data-always-enabled switch switch-type="square" color="danger" size="lg" with-icon />
|
||||
@endif
|
||||
Reference in New Issue
Block a user