From 9e6a1220d529df34086eb42de0cd8f11243f9d12 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Fri, 24 May 2024 10:05:54 +0800 Subject: [PATCH] feat: ConfigProvider CSSVars --- demo/src/app.rs | 2 +- demo/src/pages/components.rs | 13 ++++----- .../docs/{theme => config_provider}/mod.md | 28 +++++++++---------- demo_markdown/src/lib.rs | 2 +- thaw/src/config_provider/mod.rs | 22 ++++++++++++++- 5 files changed, 42 insertions(+), 25 deletions(-) rename demo_markdown/docs/{theme => config_provider}/mod.md (50%) diff --git a/demo/src/app.rs b/demo/src/app.rs index fd2a8d9..06a9ffb 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -59,6 +59,7 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { + @@ -86,7 +87,6 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { - diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index af96c43..3474c4c 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -106,7 +106,7 @@ impl IntoView for MenuItemOption { pub(crate) fn gen_menu_data() -> Vec { 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 { 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 { label: "Scrollbar".into(), }], }, - MenuGroupOption { - label: "Config Components".into(), - children: vec![MenuItemOption { - value: "theme".into(), - label: "Theme".into(), - }], - }, MenuGroupOption { label: "Mobile Components".into(), children: vec![ diff --git a/demo_markdown/docs/theme/mod.md b/demo_markdown/docs/config_provider/mod.md similarity index 50% rename from demo_markdown/docs/theme/mod.md rename to demo_markdown/docs/config_provider/mod.md index c6239c0..48040f7 100644 --- a/demo_markdown/docs/theme/mod.md +++ b/demo_markdown/docs/config_provider/mod.md @@ -1,47 +1,47 @@ -# Theme +# ConfigProvider -### ThemeProvider +### Theme ```rust demo -let theme = create_rw_signal(Theme::light()); +let theme = RwSignal::new(Theme::light()); view! { - + - + } ``` ### 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 Props +### ConfigProvider Props | Name | Type | Default | Description | | ----- | ------------------------- | -------------------- | ----------- | diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index c1a78ee..b92064d 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -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" diff --git a/thaw/src/config_provider/mod.rs b/thaw/src/config_provider/mod.rs index 44bf67d..c6ffa8b 100644 --- a/thaw/src/config_provider/mod.rs +++ b/thaw/src/config_provider/mod.rs @@ -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! { @@ -47,6 +60,13 @@ pub fn ConfigProvider( pub struct ConfigInjection { pub theme: RwSignal, pub dir: RwSignal>, + id: String, +} + +impl ConfigInjection { + pub fn id(&self) -> &String { + &self.id + } } #[derive(Clone)]