dioxus_element_plug/
lib.rs

1//! # Dioxus Element Plug
2//!
3//! Element UI components for Dioxus applications with pure Rust styling system.
4//!
5//! This crate provides a set of UI components styled with the popular Element UI theme-chalk design,
6//! designed specifically for use with the Dioxus framework. All styling is generated in pure Rust
7//! for zero runtime overhead and maximum performance.
8//!
9//! ## Features
10//!
11//! - 🎨 **Pure Rust styling** - Zero runtime overhead with compile-time CSS generation
12//! - 🦀 **Rust-native components** - Type-safe components built for Dioxus
13//! - 📦 **Ready to use** - Components work out of the box with proper styling
14//! - 🎯 **Consistent API** - Intuitive props and events matching Dioxus patterns
15//! - 📱 **Responsive design** - Mobile-friendly components with flexible grid system
16//! - 🔥 **Tree-shaking friendly** - Only include styles for components you use
17//! - ⚡ **Zero dependencies** - No SCSS compilation required at runtime
18//!
19//! ## Usage
20//!
21//! ### Basic Usage with Pure Rust Styling
22//!
23//! ```rust,ignore
24//! use dioxus::prelude::*;
25//! use dioxus_element_plug::prelude::*;
26//! use dioxus_element_plug::style_system::CompleteStyleManager;
27//!
28//! fn App() -> Element {
29//!     // Generate styles for specific components
30//!     let styles = CompleteStyleManager::new()
31//!         .generate_styles_for_components(&["button", "input", "alert"]);
32//!
33//!     rsx! {
34//!         style { "{styles}" }
35//!         
36//!         div {
37//!             Button {
38//!                 variant: ButtonVariant::Primary,
39//!                 "Click me!"
40//!             }
41//!             
42//!             Input {
43//!                 placeholder: "Enter text...",
44//!                 size: Some(InputSize::Medium),
45//!             }
46//!         }
47//!     }
48//! }
49//! ```
50//!
51//! ### Generate Complete Stylesheet
52//!
53//! ```rust,ignore
54//! use dioxus::prelude::*;
55//! use dioxus_element_plug::prelude::*;
56//!
57//! fn App() -> Element {
58//!     // Generate complete Element Plus styles
59//!     let complete_styles = CompleteStyleManager::new()
60//!         .generate_complete_styles();
61//!
62//!     rsx! {
63//!         style { "{complete_styles}" }
64//!         
65//!         // Use any Element Plus component
66//!         Button {
67//!             variant: ButtonVariant::Primary,
68//!             "Primary Button"
69//!         }
70//!         
71//!         Alert {
72//!             title: "Success!".to_string(),
73//!             alert_type: AlertType::Success,
74//!         }
75//!     }
76//! }
77//! ```
78
79/// Re-export commonly used components
80pub mod components;
81
82/// Pure Rust CSS generation system - zero runtime overhead styling solution
83pub mod style_system;
84
85/// Modular Element Plus style system (SCSS to Rust converted)
86pub mod styles;
87
88/// Pure Rust styling system
89/// This module provides comprehensive styling without SCSS dependencies
90pub use style_system::{Theme, CompleteStyleManager, CompleteCssBuilder};
91
92/// Theme and style re-exports from modular system
93pub use crate::styles::prelude::*;
94
95pub use components::*;
96
97/// Prelude module for easy importing
98pub mod prelude {
99    // Core components
100    pub use crate::components::button::*;
101    pub use crate::components::input::*;
102    pub use crate::components::input_number::*;
103    pub use crate::components::layout::*;
104    pub use crate::components::form::*;
105    pub use crate::components::form_item::*;
106    pub use crate::components::alert::*;
107    pub use crate::components::card::*;
108    pub use crate::components::table::*;
109    pub use crate::components::table_column::*;
110
111    // Basic UI
112    pub use crate::components::tag::*;
113    pub use crate::components::badge::*;
114    pub use crate::components::link::*;
115    pub use crate::components::divider::*;
116    pub use crate::components::empty::*;
117    pub use crate::components::avatar::*;
118    pub use crate::components::avatar_group::*;
119    pub use crate::components::button_group::*;
120    pub use crate::components::icon::*;
121
122    // Form
123    pub use crate::components::switch::*;
124    pub use crate::components::checkbox::*;
125    pub use crate::components::radio::*;
126    pub use crate::components::select::*;
127    pub use crate::components::option::*;
128    pub use crate::components::slider::*;
129    pub use crate::components::rate::*;
130    pub use crate::components::autocomplete::*;
131    pub use crate::components::cascader::*;
132    pub use crate::components::color_picker::*;
133    pub use crate::components::date_picker::*;
134    pub use crate::components::time_picker::*;
135    pub use crate::components::time_select::*;
136    pub use crate::components::transfer::*;
137
138    // Display
139    pub use crate::components::dialog::*;
140    pub use crate::components::drawer::*;
141    pub use crate::components::collapse::*;
142    pub use crate::components::result::*;
143    pub use crate::components::image::*;
144    pub use crate::components::image_viewer::*;
145    pub use crate::components::descriptions::*;
146    pub use crate::components::calendar::*;
147    pub use crate::components::carousel::*;
148    pub use crate::components::timeline::*;
149    pub use crate::components::tree::*;
150    pub use crate::components::upload::*;
151    pub use crate::components::watermark::*;
152    pub use crate::components::progress::*;
153    pub use crate::components::skeleton::*;
154    pub use crate::components::space::*;
155
156    // Navigation
157    pub use crate::components::breadcrumb::*;
158    pub use crate::components::dropdown::*;
159    pub use crate::components::menu::*;
160    pub use crate::components::pagination::*;
161    pub use crate::components::tabs::*;
162    pub use crate::components::steps::*;
163    pub use crate::components::page_header::*;
164    pub use crate::components::affix::*;
165    pub use crate::components::anchor::*;
166    pub use crate::components::backtop::*;
167
168    // Feedback
169    pub use crate::components::loading::*;
170    pub use crate::components::message::*;
171    pub use crate::components::message_box::*;
172    pub use crate::components::notification::*;
173    pub use crate::components::tooltip::*;
174    pub use crate::components::popover::*;
175    pub use crate::components::popconfirm::*;
176    pub use crate::components::spin::*;
177    pub use crate::components::infinite_scroll::*;
178
179    // Style system
180    pub use crate::Theme;
181    pub use crate::CompleteStyleManager;
182    pub use crate::CompleteCssBuilder;
183
184    /// Complete Element Plus styling from modular system
185    pub use crate::styles::prelude::*;
186}
187
188// Simple test module to verify the library compiles
189#[cfg(test)]
190mod tests {
191    
192
193    #[test]
194    fn test_generated_style_constants() {
195        use crate::styles::prelude::*;
196        assert_eq!(COLOR_PRIMARY, "#409EFF");
197        assert_eq!(COLOR_SUCCESS, "#67C23A");
198        assert_eq!(COLOR_WARNING, "#E6A23C");
199    }
200
201    #[test]
202    fn test_button_variants() {
203        use crate::components::button::ButtonVariant;
204
205        let primary = ButtonVariant::Primary;
206        assert_eq!(primary.as_class(), "el-button--primary");
207
208        let default = ButtonVariant::Default;
209        assert_eq!(default.as_class(), "el-button");
210    }
211
212    #[test]
213    fn test_input_variants() {
214        use crate::components::input::InputType;
215
216        let text = InputType::Text;
217        assert_eq!(text.as_str(), "text");
218
219        let password = InputType::Password;
220        assert_eq!(password.as_str(), "password");
221    }
222}
dioxus_element_plug/lib.rs

dioxus_element_plug/
lib.rs
