SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: improve Svelte components and enhance user experience

Browse Source 
- 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.
This commit is contained in:
killer-cf
2025-11-12 16:36:29 -03:00
parent 94f4b23a39
commit 11eef4aa2a
39 changed files with 15729 additions and 15486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
apps/web/src/lib/components/ErrorModal.svelte
View File

@@ -1,82 +1,73 @@
<script lang="ts">
import { AlertCircle, X } from "lucide-svelte";
interface Props {
open: boolean;
title?: string;
message: string;
details?: string;
onClose: () => void;
}
import { AlertCircle, X } from 'lucide-svelte';
let {
open = $bindable(false),
title = "Erro",
message,
details,
onClose,
}: Props = $props();
interface Props {
open: boolean;
title?: string;
message: string;
details?: string;
onClose: () => void;
}
let modalRef: HTMLDialogElement;
let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();
function handleClose() {
open = false;
onClose();
}
let modalRef: HTMLDialogElement;
$effect(() => {
if (open && modalRef) {
modalRef.showModal();
} else if (!open && modalRef) {
modalRef.close();
}
});
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="flex items-center justify-between px-6 py-4 border-b border-base-300">
<h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
<AlertCircle class="w-5 h-5" strokeWidth={2} />
{title}
</h2>
<button
type="button"
class="btn btn-ghost btn-sm btn-circle"
onclick={handleClose}
aria-label="Fechar"
>
<X class="w-5 h-5" />
</button>
</div>
<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 rounded-lg p-4 mb-4">
<p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
</div>
{/if}
</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>
<!-- 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>
<form method="dialog" class="modal-backdrop">
<button type="button" onclick={handleClose}>fechar</button>
</form>
</dialog>
{/if}