dioxus-element-plug 0.1.5

Element UI components for Dioxus applications with pure Rust styling system
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

//! # Dioxus Element Plug
//!
//! Element UI components for Dioxus applications with pure Rust styling system.
//!
//! This crate provides a set of UI components styled with the popular Element UI theme-chalk design,
//! designed specifically for use with the Dioxus framework. All styling is generated in pure Rust
//! for zero runtime overhead and maximum performance.
//!
//! ## Features
//!
//! - 🎨 **Pure Rust styling** - Zero runtime overhead with compile-time CSS generation
//! - 🦀 **Rust-native components** - Type-safe components built for Dioxus
//! - 📦 **Ready to use** - Components work out of the box with proper styling
//! - 🎯 **Consistent API** - Intuitive props and events matching Dioxus patterns
//! - 📱 **Responsive design** - Mobile-friendly components with flexible grid system
//! - 🔥 **Tree-shaking friendly** - Only include styles for components you use
//! - âš¡ **Zero dependencies** - No SCSS compilation required at runtime
//!
//! ## Usage
//!
//! ### Basic Usage with Pure Rust Styling
//!
//! ```rust,ignore
//! use dioxus::prelude::*;
//! use dioxus_element_plug::prelude::*;
//! use dioxus_element_plug::style_system::CompleteStyleManager;
//!
//! fn App() -> Element {
//!     // Generate styles for specific components
//!     let styles = CompleteStyleManager::new()
//!         .generate_styles_for_components(&["button", "input", "alert"]);
//!
//!     rsx! {
//!         style { "{styles}" }
//!         
//!         div {
//!             Button {
//!                 variant: ButtonVariant::Primary,
//!                 "Click me!"
//!             }
//!             
//!             Input {
//!                 placeholder: "Enter text...",
//!                 size: Some(InputSize::Medium),
//!             }
//!         }
//!     }
//! }
//! ```
//!
//! ### Generate Complete Stylesheet
//!
//! ```rust,ignore
//! use dioxus::prelude::*;
//! use dioxus_element_plug::prelude::*;
//!
//! fn App() -> Element {
//!     // Generate complete Element Plus styles
//!     let complete_styles = CompleteStyleManager::new()
//!         .generate_complete_styles();
//!
//!     rsx! {
//!         style { "{complete_styles}" }
//!         
//!         // Use any Element Plus component
//!         Button {
//!             variant: ButtonVariant::Primary,
//!             "Primary Button"
//!         }
//!         
//!         Alert {
//!             title: "Success!".to_string(),
//!             alert_type: AlertType::Success,
//!         }
//!     }
//! }
//! ```

/// Re-export commonly used components
pub mod components;

/// Pure Rust CSS generation system - zero runtime overhead styling solution
pub mod style_system;

/// Modular Element Plus style system (SCSS to Rust converted)
pub mod styles;

/// Pure Rust styling system
/// This module provides comprehensive styling without SCSS dependencies
pub use style_system::{Theme, CompleteStyleManager, CompleteCssBuilder};

/// Theme and style re-exports from modular system
pub use crate::styles::prelude::*;

pub use components::*;

/// Prelude module for easy importing
pub mod prelude {
    pub use crate::components::button::*;
    pub use crate::components::input::*;
    pub use crate::components::layout::*;
    pub use crate::components::form::*;
    pub use crate::components::alert::*;
    pub use crate::components::card::*;
    pub use crate::components::table::*;
    pub use crate::Theme;
    pub use crate::CompleteStyleManager;
    pub use crate::CompleteCssBuilder;
    
    /// Complete Element Plus styling from modular system
    pub use crate::styles::prelude::*;
}

// Simple test module to verify the library compiles
#[cfg(test)]
mod tests {
    

    #[test]
    fn test_generated_style_constants() {
        use crate::styles::prelude::*;
        assert_eq!(COLOR_PRIMARY, "#409EFF");
        assert_eq!(COLOR_SUCCESS, "#67C23A");
        assert_eq!(COLOR_WARNING, "#E6A23C");
    }

    #[test]
    fn test_button_variants() {
        use crate::components::button::ButtonVariant;

        let primary = ButtonVariant::Primary;
        assert_eq!(primary.as_class(), "el-button--primary");

        let default = ButtonVariant::Default;
        assert_eq!(default.as_class(), "el-button");
    }

    #[test]
    fn test_input_variants() {
        use crate::components::input::InputType;

        let text = InputType::Text;
        assert_eq!(text.as_str(), "text");

        let password = InputType::Password;
        assert_eq!(password.as_str(), "password");
    }
}