radix_leptos_primitives/components/

separator.rs

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

/// Separator component - Visual dividers with orientation support
#[component]
pub fn Separator(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] orientation: Option<SeparatorOrientation>,
    #[prop(optional)] decorative: Option<bool>,
    #[prop(optional)] thickness: Option<SeparatorThickness>,
    #[prop(optional)] color: Option<String>,
) -> impl IntoView {
    let orientation = orientation.unwrap_or_default();
    let decorative = decorative.unwrap_or(true);
    let thickness = thickness.unwrap_or_default();
    let color = color.unwrap_or_default();

    let class = merge_classes(vec!["separator", orientation.to_class(), thickness.to_class()]);
    let aria_orientation = orientation.to_aria_orientation();

    view! {
        <div
            class=class
            style=style
            role=if decorative { "none" } else { "separator" }
            aria-orientation=aria_orientation
            data-thickness=thickness.to_string()
            data-color=color
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Separator Line component
#[component]
pub fn SeparatorLine(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] orientation: Option<SeparatorOrientation>,
    #[prop(optional)] thickness: Option<SeparatorThickness>,
    #[prop(optional)] color: Option<String>,
) -> impl IntoView {
    let orientation = orientation.unwrap_or_default();
    let thickness = thickness.unwrap_or_default();
    let color = color.unwrap_or_default();

    let class = merge_classes(
        [
            "separator-line",
            orientation.to_class(),
            thickness.to_class(),
            class.as_deref().unwrap_or(""),
        ]
        .to_vec(),
    );

    let aria_orientation = orientation.to_aria_orientation();

    view! {
        <hr
            class=class
            style=style
            role="separator"
            aria-orientation=aria_orientation
            data-thickness=thickness.to_string()
            data-color=color
        />
    }
}

/// Separator Text component
#[component]
pub fn SeparatorText(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] text: Option<String>,
    #[prop(optional)] orientation: Option<SeparatorOrientation>,
) -> impl IntoView {
    let text = text.unwrap_or_default();
    let orientation = orientation.unwrap_or_default();

    let class = merge_classes(
        [
            "separator-text",
            orientation.to_class(),
            class.as_deref().unwrap_or(""),
        ]
        .to_vec(),
    );

    view! {
        <div
            class=class
            style=style
            role="separator"
            aria-label=text
            data-orientation=orientation.to_string()
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Separator Orientation enum
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum SeparatorOrientation {
    #[default]
    Horizontal,
    Vertical,
}

impl SeparatorOrientation {
    pub fn to_class(&self) -> &'static str {
        match self {
            SeparatorOrientation::Horizontal => "orientation-horizontal",
            SeparatorOrientation::Vertical => "orientation-vertical",
        }
    }

    pub fn to_string(&self) -> &'static str {
        match self {
            SeparatorOrientation::Horizontal => "horizontal",
            SeparatorOrientation::Vertical => "vertical",
        }
    }

    pub fn to_aria_orientation(&self) -> &'static str {
        match self {
            SeparatorOrientation::Horizontal => "horizontal",
            SeparatorOrientation::Vertical => "vertical",
        }
    }
}

/// Separator Thickness enum
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub enum SeparatorThickness {
    #[default]
    Thin,
    Medium,
    Thick,
    Custom(f64),
}

impl SeparatorThickness {
    pub fn to_class(&self) -> &'static str {
        match self {
            SeparatorThickness::Thin => "thickness-thin",
            SeparatorThickness::Medium => "thickness-medium",
            SeparatorThickness::Thick => "thickness-thick",
            SeparatorThickness::Custom(_) => "thickness-custom",
        }
    }

    pub fn to_string(&self) -> String {
        match self {
            SeparatorThickness::Thin => "thin".to_string(),
            SeparatorThickness::Medium => "medium".to_string(),
            SeparatorThickness::Thick => "thick".to_string(),
            SeparatorThickness::Custom(thickness) => format!("custom-{}", thickness),
        }
    }
}

/// Separator Group component
#[component]
pub fn SeparatorGroup(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] spacing: Option<SeparatorSpacing>,
    #[prop(optional)] orientation: Option<SeparatorOrientation>,
) -> impl IntoView {
    let spacing = spacing.unwrap_or_default();
    let orientation = orientation.unwrap_or_default();

    let class = merge_classes(
        [
            "separator-group",
            spacing.to_class(),
            orientation.to_class(),
            class.as_deref().unwrap_or(""),
        ]
        .to_vec(),
    );

    view! {
        <div
            class=class
            style=style
            role="group"
            aria-label="Separator group"
            data-spacing=spacing.to_string()
            data-orientation=orientation.to_string()
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Separator Spacing enum
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum SeparatorSpacing {
    #[default]
    Tight,
    Normal,
    Loose,
}

impl SeparatorSpacing {
    pub fn to_class(&self) -> &'static str {
        match self {
            SeparatorSpacing::Tight => "spacing-tight",
            SeparatorSpacing::Normal => "spacing-normal",
            SeparatorSpacing::Loose => "spacing-loose",
        }
    }

    pub fn to_string(&self) -> &'static str {
        match self {
            SeparatorSpacing::Tight => "tight",
            SeparatorSpacing::Normal => "normal",
            SeparatorSpacing::Loose => "loose",
        }
    }
}

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

    wasm_bindgen_test_configure!(run_in_browser);

    // Unit Tests
    #[test]
    fn test_separator_creation() {}
    #[test]
    fn test_separator_with_class() {}
    #[test]
    fn test_separator_with_style() {}
    #[test]
    fn test_separator_orientation() {}
    #[test]
    fn test_separator_decorative() {}
    #[test]
    fn test_separator_thickness() {}
    #[test]
    fn test_separator_color() {}

    // Separator Line tests
    #[test]
    fn test_separator_line_creation() {}
    #[test]
    fn test_separator_line_with_class() {}
    #[test]
    fn test_separator_line_orientation() {}
    #[test]
    fn test_separator_line_thickness() {}
    #[test]
    fn test_separator_line_color() {}

    // Separator Text tests
    #[test]
    fn test_separator_text_creation() {}
    #[test]
    fn test_separator_text_with_class() {}
    #[test]
    fn test_separator_text_text() {}
    #[test]
    fn test_separator_text_orientation() {}

    // Separator Orientation tests
    #[test]
    fn test_separator_orientation_default() {}
    #[test]
    fn test_separator_orientation_horizontal() {}
    #[test]
    fn test_separator_orientation_vertical() {}

    // Separator Thickness tests
    #[test]
    fn test_separator_thickness_default() {}
    #[test]
    fn test_separator_thickness_thin() {}
    #[test]
    fn test_separator_thickness_medium() {}
    #[test]
    fn test_separator_thickness_thick() {}
    #[test]
    fn test_separator_thickness_custom() {}

    // Separator Group tests
    #[test]
    fn test_separator_group_creation() {}
    #[test]
    fn test_separator_group_with_class() {}
    #[test]
    fn test_separator_group_spacing() {}
    #[test]
    fn test_separator_group_orientation() {}

    // Separator Spacing tests
    #[test]
    fn test_separator_spacing_default() {}
    #[test]
    fn test_separator_spacing_tight() {}
    #[test]
    fn test_separator_spacing_normal() {}
    #[test]
    fn test_separator_spacing_loose() {}

    // Helper function tests
    #[test]
    fn test_merge_classes_empty() {}
    #[test]
    fn test_merge_classes_single() {}
    #[test]
    fn test_merge_classes_multiple() {}
    #[test]
    fn test_merge_classes_with_empty() {}

    // Property-based Tests
    #[test]
    fn test_separator_property_based() {
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }

    #[test]
    fn test_separator_thickness_validation() {
        proptest!(|(____thickness in 1.0..20.0f64)| {

        });
    }

    #[test]
    fn test_separator_orientation_validation() {
        proptest!(|(____orientation in ".*")| {

        });
    }

    // Integration Tests
    #[test]
    fn test_separator_accessibility() {}
    #[test]
    fn test_separator_orientation_behavior() {}
    #[test]
    fn test_separator_thickness_rendering() {}
    #[test]
    fn test_separator_group_layout() {}
    #[test]
    fn test_separator_responsive_behavior() {}

    // Performance Tests
    #[test]
    fn test_separator_large_groups() {}
    #[test]
    fn test_separator_render_performance() {}
    #[test]
    fn test_separator_memory_usage() {}
    #[test]
    fn test_separator_layout_performance() {}
}