radix_leptos_primitives/components/

alert_dialog.rs

use crate::utils::{merge_classes, generate_id};
use leptos::callback::Callback;
use leptos::children::Children;
use leptos::prelude::*;

/// AlertDialog component - Modal alert dialogs for user confirmations
///
/// The AlertDialog component provides accessible modal dialogs for critical user actions
/// like confirmations, warnings, and important information display.
///
/// # Features
/// - Accessible modal dialog with proper ARIA attributes
/// - Focus management and keyboard navigation
/// - Multiple variants (default, destructive, warning)
/// - Customizable actions and content
/// - Backdrop click handling
/// - Escape key handling
///
/// # Example
///
/// ```rust,no_run
/// use leptos::prelude::*;
/// use radix_leptos_primitives::*;
///
/// #[component]
/// fn MyComponent() -> impl IntoView {
///     let (show_dialog, set_show_dialog) = create_signal(false);
///
///     view! {
///         <Button on_click=move |_| set_show_dialog.set(true)>
///             "Delete Item"
///         </Button>
///         
///         <AlertDialog
///             open=show_dialog
///             onopen_change=move |open| set_show_dialog.set(open)
///             variant=AlertDialogVariant::Destructive
///         >
///             <AlertDialogTitle>"Delete Item"</AlertDialogTitle>
///             <AlertDialogDescription>
///                 "Are you sure you want to delete this item? This action cannot be undone."
///             </AlertDialogDescription>
///             <AlertDialogFooter>
///                 <Button variant=ButtonVariant::Outline on_click=move |_| set_show_dialog.set(false)>
///                     "Cancel"
///                 </Button>
///                 <Button variant=ButtonVariant::Destructive on_click=move |_| {
///                     // Delete logic here
///                     set_show_dialog.set(false);
///                 }>
///                     "Delete"
///                 </Button>
///             </AlertDialogFooter>
///         </AlertDialog>
///     }
/// }
/// ```

#[derive(Debug, Clone, Copy, PartialEq)]
pub enum AlertDialogVariant {
    Default,
    Destructive,
    Warning,
}

impl AlertDialogVariant {
    pub fn as_str(&self) -> &'static str {
        match self {
            AlertDialogVariant::Default => "default",
            AlertDialogVariant::Destructive => "destructive",
            AlertDialogVariant::Warning => "warning",
        }
    }
}

/// AlertDialog root component
#[component]
pub fn AlertDialog(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] open: Option<bool>,
    #[prop(optional)] variant: Option<AlertDialogVariant>,
    #[prop(optional)] onopen_change: Option<Callback<bool>>,
) -> impl IntoView {
    let open = open.unwrap_or(false);
    let variant = variant.unwrap_or(AlertDialogVariant::Default);
    let onopen_change = onopen_change.unwrap_or_else(|| Callback::new(|_| {}));

    let class = merge_classes(vec!["alert-dialog", variant.as_str()]);
}

/// AlertDialog title component
#[component]
pub fn AlertDialogTitle(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
) -> impl IntoView {
    let class = merge_classes(vec!["alert-dialog-title", class.as_deref().unwrap_or("")]);

    view! {
        <h2
            id="alert-dialog-title"
            class=class
            style=style
        >
            {children.map(|c| c())}
        </h2>
    }
}

/// AlertDialog description component
#[component]
pub fn AlertDialogDescription(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
) -> impl IntoView {
    let class =
        merge_classes(vec!["alert-dialog-description", class.as_deref().unwrap_or("")]);

    view! {
        <p
            id="alert-dialog-description"
            class=class
            style=style
        >
            {children.map(|c| c())}
        </p>
    }
}

/// AlertDialog footer component
#[component]
pub fn AlertDialogFooter(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
) -> impl IntoView {
    let class = merge_classes(vec!["alert-dialog-footer", class.as_deref().unwrap_or("")]);

    view! {
        <div
            class=class
            style=style
        >
            {children.map(|c| c())}
        </div>
    }
}

/// AlertDialog action component
#[component]
pub fn AlertDialogAction(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] on_click: Option<Callback<()>>,
) -> impl IntoView {
    let on_click = on_click.unwrap_or_else(|| Callback::new(|_| {}));

    let class = merge_classes(vec!["alert-dialog-action", class.as_deref().unwrap_or("")]);

    view! {
        <button
            class=class
            style=style
            on:click=move |_| on_click.run(())
        >
            {children.map(|c| c())}
        </button>
    }
}

/// AlertDialog cancel component
#[component]
pub fn AlertDialogCancel(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] on_click: Option<Callback<()>>,
) -> impl IntoView {
    let on_click = on_click.unwrap_or_else(|| Callback::new(|_| {}));

    let class = merge_classes(vec!["alert-dialog-cancel", class.as_deref().unwrap_or("")]);

    view! {
        <button
            class=class
            style=style
            on:click=move |_| on_click.run(())
        >
            {children.map(|c| c())}
        </button>
    }
}

// Helper function to merge CSS classes

#[cfg(test)]
mod tests {
    use proptest::prelude::*;

    #[test]
    fn test_alert_dialog_component_creation() {}

    #[test]
    fn test_alert_dialog_with_variant_component_creation() {}

    proptest! {
        #[test]
        fn test_alert_dialog_props(___class in ".*", ___style in ".*") {

        }

        #[test]
        fn test_alert_dialogopen_state(__open: bool, ___variant_index in 0..3usize) {

        }

        #[test]
        fn test_alert_dialog_variants(___variant_index in 0..3usize) {

        }

        #[test]
        fn test_alert_dialog_title_props(___class in ".*", ___style in ".*") {

        }

        #[test]
        fn test_alert_dialog_description_props(___class in ".*", ___style in ".*") {

        }

        #[test]
        fn test_alert_dialog_footer_props(___class in ".*", ___style in ".*") {

        }

        #[test]
        fn test_alert_dialog_action_props(___class in ".*", ___style in ".*") {

        }

        #[test]
        fn test_alert_dialog_cancel_props(___class in ".*", ___style in ".*") {

        }
    }
}