Overview

-File: src/cai/modal.svelte

A flexible and reusable modal component that provides a customizable dialog overlay with various styling options, animations, and button configurations.

Type Definitions

interface IButton {
  text: string;          // Button text
  ghost?: boolean;       // Ghost button style
  primary?: boolean;     // Primary button style
  dangerous?: boolean;   // Dangerous action style
  handler: (_: IButton) => void;  // Click handler
}

Props

Required Props

export let open = true;      // Controls modal visibility
export let title: string = ""; // Modal title

Optional Props

export let dangerous = false;    // Danger mode styling
export let busy = false;        // Loading state
export let grayBg = false;      // Gray background option
export let padded = true;       // Content padding
export let showCloseButton = true; // Show/hide close button
export let showIcon = true;      // Show/hide status icon
export let buttons: IButton[] = []; // Action buttons
export let closeFn: () => boolean = null; // Custom close handler

Component Structure

1. Modal Overlay

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

2. Modal Container

<div class="relative text-left bg-white overflow-hidden shadow-xl">
  <!-- Close Button -->
  <!-- Header with Icon -->
  <!-- Content Slot -->
  <!-- Action Buttons -->
</div>

Styling

Button Variants

.primary {
  @apply bg-[#7ab800] hover:bg-[#8cac4c] focus:ring-indigo-500;
}

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

.ghost {
  @apply bg-transparent border-gray-500 hover:bg-gray-500 text-gray-50;
}

Layout Classes

  .bg-gray {
  background-color: #e5e5e5;
}

.padded {
  @apply px-4 pt-5 pb-4 sm:p-6 sm:pb-4;
}

Animations

1. 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: cubicIn}}
out:fade={{duration: 200, easing: cubicIn}}

Events

Event Dispatcher

const dispatch = createEventDispatcher();

// Emitted Events
dispatch("close", { src: "closeButton" });

Usage Examples

Basic Examples

<Modal title="Basic Modal">
  <p>Modal content goes here</p>
</Modal>

Modal with Actions

<Modal
  title="Confirmation"
  buttons={[
    {
      text: "Confirm",
      primary: true,
      handler: () => handleConfirm()
    },
    {
      text: "Cancel",
      ghost: true,
      handler: () => handleCancel()
    }
  ]}
>
  <p>Are you sure?</p>
</Modal>

Danger Modal

<Modal
  title="Delete Item"
  dangerous={true}
  buttons={[
    {
      text: "Delete",
      dangerous: true,
      handler: () => handleDelete()
    }
  ]}
>
  <p>This action cannot be undone.</p>
</Modal>