Overview

• File: src/components/UI/SimpleAlert.svelte SimpleAlert is a modal dialog component designed for confirmations, alerts, and user interactions. It provides a consistent interface for displaying messages with customizable actions and styling.

Props

Basic Configuration

export let title: string = "";           // Modal title
export let open = true;                  // Visibility control
export let dangerous = false;            // Danger mode styling
export let busy = false;                 // Loading state
export let force = true;                 // Force mode
export let busyText = "";               // Loading state text

Button Configuration

// Primary Button
export let showPrimaryButton = true;
export let primaryButtonText = "Ok";
export let primaryFn: () => any;         // Primary action handler

// Secondary Button
export let secondaryButtonText = "Cancel";
export let showwSecondaryButton = true;
export let secondaryFn = () => open = false;

Component Structure

1. Modal Overlay

<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity">
  <!-- Backdrop with animation -->
</div>

2. Modal Content

<div class="relative bg-white rounded-lg">
  <!-- Close Button -->
  <!-- Icon and Title -->
  <!-- Content Slot -->
  <!-- Action Buttons -->
</div>

Animations

Transition Effects

import { fade } from "svelte/transition";
import { cubicIn, cubicOut, elasticInOut } from "svelte/easing";

// Overlay Animation
in:fade={{duration: 300, easing: cubicIn}}
out:fade={{duration: 200, easing: elasticInOut}}

// Content Animation
in:fade={{duration: 300, easing: cubicOut}}
out:fade={{duration: 200, easing: cubicIn}}

Action Handling

Primary Action

async function exec() {
  if (!busy && primaryFn) {
    let toastId;
    if (busyText) toastId = toast.loading(busyText);

    try {
      if (await primaryFn()) return;
    } finally {
      if (toastId) toast.dismiss(toastId);
    }
  }
  open = false;
}

Styling

Button Variants

.primary {
  @apply bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500;
}

.dangerous {
  @apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
}

Layout Classes

• Responsive design with Tailwind CSS
• Mobile-first approach
• Flexible width handling

Usage Examples

1. Basic Alert

<SimpleAlert title="Information">
  <p>This is a basic alert message.</p>
</SimpleAlert>

2. Confirmation Dialog

<SimpleAlert
  title="Confirm Action"
  primaryButtonText="Confirm"
  secondaryButtonText="Cancel"
  {primaryFn}
>
  <p>Are you sure you want to proceed?</p>
</SimpleAlert>

3. Dangerous Action

<SimpleAlert
  title="Delete Item"
  dangerous={true}
  primaryButtonText="Delete"
  busyText="Deleting..."
  primaryFn={() => handleDelete()}
>
  <p>This action cannot be undone.</p>
</SimpleAlert>

Events

Event Dispatcher

const dispatch = createEventDispatcher();

// Emitted Events
dispatch("close");  // When close button is clicked