adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ConfigProvider CSSVars

Browse source
This commit is contained in:
luoxiao 2024-05-24 10:05:54 +08:00
parent 643a54185c
commit 9e6a1220d5
5 changed files with 42 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/app.rs
View file

@ -59,6 +59,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/card" view=CardMdPage/>
<Route path="/checkbox" view=CheckboxMdPage/>
<Route path="/color-picker" view=ColorPickerMdPage/>
<Route path="/config-provider" view=ConfigProviderMdPage/>
<Route path="/date-picker" view=DatePickerMdPage/>
<Route path="/divider" view=DividerMdPage/>
<Route path="/drawer" view=DrawerMdPage/>
@ -86,7 +87,6 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/table" view=TableMdPage/>
<Route path="/tabs" view=TabsMdPage/>
<Route path="/tag" view=TagMdPage/>
<Route path="/theme" view=ThemeMdPage/>
<Route path="/time-picker" view=TimePickerMdPage/>
<Route path="/typography" view=TypographyMdPage/>
<Route path="/upload" view=UploadMdPage/>

13
demo/src/pages/components.rs
View file

@ -106,7 +106,7 @@ impl IntoView for MenuItemOption {
pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
vec![
MenuGroupOption {
label: "Common Components".into(),
label: "Components".into(),
children: vec![
MenuItemOption {
value: "accordion".into(),
@ -124,6 +124,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "card".into(),
label: "Card".into(),
},
MenuItemOption {
value: "config-provider".into(),
label: "Config Provider".into(),
},
MenuItemOption {
value: "divider".into(),
label: "Divider".into(),
@ -310,13 +314,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Scrollbar".into(),
}],
},
MenuGroupOption {
label: "Config Components".into(),
children: vec![MenuItemOption {
value: "theme".into(),
label: "Theme".into(),
}],
},
MenuGroupOption {
label: "Mobile Components".into(),
children: vec![

28
demo_markdown/docs/theme/mod.md → demo_markdown/docs/config_provider/mod.md
View file

@ -1,47 +1,47 @@
# Theme
# ConfigProvider
### ThemeProvider
### Theme
```rust demo
let theme = create_rw_signal(Theme::light());
let theme = RwSignal::new(Theme::light());
view! {
<ThemeProvider theme>
<ConfigProvider theme>
<Card>
<Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
</Space>
</Card>
</ThemeProvider>
</ConfigProvider>
}
```
### Customize Theme
```rust demo
let theme = create_rw_signal(Theme::light());
let theme = RwSignal::new(Theme::light());
let on_customize_theme = move |_| {
theme.update(|theme| {
theme.common.color_primary = "#f5222d".to_string();
theme.common.color_primary_hover = "#ff4d4f".to_string();
theme.common.color_primary_active = "#cf1322".to_string();
theme.color.color_brand_background = "#f5222d".to_string();
theme.color.color_brand_background_hover = "#ff4d4f".to_string();
theme.color.color_brand_background_pressed = "#cf1322".to_string();
});
};
view! {
<ThemeProvider theme>
<ConfigProvider theme>
<Card>
<Space>
<Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button on_click=on_customize_theme>"Customize Theme"</Button>
<Button appearance=ButtonAppearance::Primary on_click=move |_| theme.set(Theme::light())>"Light"</Button>
<Button appearance=ButtonAppearance::Primary on_click=on_customize_theme>"Customize Theme"</Button>
</Space>
</Card>
</ThemeProvider>
</ConfigProvider>
}
```
### ThemeProvider Props
### ConfigProvider Props
| Name | Type | Default | Description |
| ----- | ------------------------- | -------------------- | ----------- |

2
demo_markdown/src/lib.rs
View file

@ -41,6 +41,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"CardMdPage" => "../docs/card/mod.md",
"CheckboxMdPage" => "../docs/checkbox/mod.md",
"ColorPickerMdPage" => "../docs/color_picker/mod.md",
"ConfigProviderMdPage" => "../docs/config_provider/mod.md",
"DatePickerMdPage" => "../docs/date_picker/mod.md",
"DividerMdPage" => "../docs/divider/mod.md",
"DrawerMdPage" => "../docs/drawer/mod.md",
@ -68,7 +69,6 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"TableMdPage" => "../docs/table/mod.md",
"TabsMdPage" => "../docs/tabs/mod.md",
"TagMdPage" => "../docs/tag/mod.md",
"ThemeMdPage" => "../docs/theme/mod.md",
"TimePickerMdPage" => "../docs/time_picker/mod.md",
"TypographyMdPage" => "../docs/typography/mod.md",
"UploadMdPage" => "../docs/upload/mod.md"

22
thaw/src/config_provider/mod.rs
View file

@ -16,6 +16,7 @@ pub fn ConfigProvider(
let theme = theme.unwrap_or_else(|| RwSignal::new(Theme::light()));
let id = StoredValue::new(uuid::Uuid::new_v4().to_string());
mount_dynamic_style(id.get_value(), move || {
let mut css_vars = String::new();
theme.with(|theme| {
@ -28,7 +29,19 @@ pub fn ConfigProvider(
)
});
let config_injection = ConfigInjection { theme, dir };
on_cleanup(move || {
if let Ok(Some(style)) =
document().query_selector(&format!("head style[data-thaw-id=\"{}\"]", id.get_value()))
{
style.remove();
}
});
let config_injection = ConfigInjection {
theme,
dir,
id: id.get_value(),
};
view! {
<Provider value=config_injection>
@ -47,6 +60,13 @@ pub fn ConfigProvider(
pub struct ConfigInjection {
pub theme: RwSignal<Theme>,
pub dir: RwSignal<Option<ConfigDirection>>,
id: String,
}
impl ConfigInjection {
pub fn id(&self) -> &String {
&self.id
}
}
#[derive(Clone)]