killer-cf
11eef4aa2a
- Updated various Svelte components to improve code readability and maintainability. - Standardized button classes across components for a consistent user interface. - Enhanced error handling and user feedback in modals and forms. - Cleaned up unnecessary imports and optimized component structure for better performance.
74 lines
1.7 KiB
Svelte
74 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { AlertCircle, X } from 'lucide-svelte';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
title?: string;
|
|
message: string;
|
|
details?: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();
|
|
|
|
let modalRef: HTMLDialogElement;
|
|
|
|
function handleClose() {
|
|
open = false;
|
|
onClose();
|
|
}
|
|
|
|
$effect(() => {
|
|
if (open && modalRef) {
|
|
modalRef.showModal();
|
|
} else if (!open && modalRef) {
|
|
modalRef.close();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if open}
|
|
<dialog
|
|
bind:this={modalRef}
|
|
class="modal"
|
|
onclick={(e) => e.target === e.currentTarget && handleClose()}
|
|
>
|
|
<div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
|
|
<!-- Header -->
|
|
<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
|
|
<h2 id="modal-title" class="text-error flex items-center gap-2 text-xl font-bold">
|
|
<AlertCircle class="h-5 w-5" strokeWidth={2} />
|
|
{title}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-circle"
|
|
onclick={handleClose}
|
|
aria-label="Fechar"
|
|
>
|
|
<X class="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="px-6 py-6">
|
|
<p class="text-base-content mb-4">{message}</p>
|
|
{#if details}
|
|
<div class="bg-base-200 mb-4 rounded-lg p-4">
|
|
<p class="text-base-content/70 text-sm whitespace-pre-line">{details}</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="modal-action px-6 pb-6">
|
|
<button class="btn btn-primary" onclick={handleClose}> Fechar </button>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button type="button" onclick={handleClose}>fechar</button>
|
|
</form>
|
|
</dialog>
|
|
{/if}
|