This commit is contained in:
pbao9
2026-02-05 11:10:19 +07:00
parent 1ac1c883c3
commit 979323c36b
10 changed files with 164 additions and 118 deletions
@@ -1,8 +1,15 @@
@php
$tag = 'button';
$href = null;
$buttonType = $type;
if ($route) {
if ($type === 'delete' || $confirm) {
$tag = 'button';
$buttonType = 'button';
$attributes = $attributes->merge([
'onclick' => "confirmDelete('$confirmUrl', '$confirmName')",
]);
} elseif ($route) {
$href = route($route, $params);
$tag = 'a';
} elseif ($url) {
@@ -13,7 +20,7 @@
$tag = 'a';
}
$baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-lg px-3 py-2 rounded-pill';
$baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 px-3 py-2 rounded-pill';
$variants = [
'primary' => 'bg-primary',
@@ -34,24 +41,24 @@
'icon' => 'h-10',
];
$variantClass = $variants[$variant] ?? $variants['primary'];
$sizeClass = $sizes[$size] ?? $sizes['default'];
$variantClass = $variants[$variant ?? 'primary'] ?? $variants['primary'];
$sizeClass = $sizes[$size ?? 'md'] ?? $sizes['default'];
$classes = "{$baseClasses} {$variantClass} {$sizeClass}";
@endphp
@if($tag === 'a')
<a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
@endif
{{ $slot }}
</a>
@else
<button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
@endif
{{ $slot }}
</button>
@endif
@if($tag === 'a')
<a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
@endif
{{ $slot }}
</a>
@else
<button type="{{ $buttonType }}" {{ $attributes->merge(['class' => $classes]) }}>
@if($icon)
<i data-lucide="{{ $icon }}" class="mr-2" style="height: 15px; width: 15px"></i>
@endif
{{ $slot }}
</button>
@endif
@@ -0,0 +1,52 @@
<!-- Generic Delete Confirmation Modal -->
<div class="modal micromodal-slide" id="deleteConfirmationModal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container modal--sm" role="dialog" aria-modal="true" aria-labelledby="deleteConfirmationModalLabel">
<header class="modal__header bg-primary text-white">
<h6 class="modal__title" id="deleteConfirmationModalLabel">
<i data-lucide="trash-2" class="w-15px h-15px me-2"></i>
Confirm Delete
</h6>
<button class="modal__close" aria-label="Close modal" data-micromodal-close>
<i data-lucide="x"></i>
</button>
</header>
<main class="modal__content">
<div class="text-center">
<i data-lucide="alert-triangle" class="text-warning mb-3" style="width: 48px; height: 48px;"></i>
<h6 class="mb-2">Are you sure?</h6>
<p class="text-muted small mb-1">Delete item:</p>
<p class="fw-bold mb-2"><span id="confirmDeleteItemName"></span></p>
<p class="text-danger small mb-0">This action cannot be undone!</p>
</div>
</main>
<footer class="modal__footer">
<x-button-crm type="button" variant="secondary" size="sm" icon="x" data-micromodal-close>Cancel</x-button-crm>
<form id="confirmDeleteForm" method="POST" class="d-inline">
@csrf
@method('DELETE')
<x-button-crm type="submit" variant="danger" size="sm" icon="trash-2">Confirm Delete</x-button-crm>
</form>
</footer>
</div>
</div>
</div>
@push('custom-scripts')
<script>
window.confirmDelete = function(url, name) {
const nameElement = document.getElementById('confirmDeleteItemName');
const formElement = document.getElementById('confirmDeleteForm');
if (nameElement && formElement) {
nameElement.textContent = name;
formElement.action = url;
if (typeof ModalManager !== 'undefined') {
ModalManager.show('deleteConfirmationModal');
} else {
MicroModal.show('deleteConfirmationModal');
}
}
};
</script>
@endpush