thaw-ui · lizidev · Aug 12, 2025 · Mar 5, 2025 · Mar 5, 2025 · Mar 5, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -27,6 +27,7 @@ jobs:
                   toolchain: stable
                   target: wasm32-unknown-unknown
                   override: true
+            - uses: Swatinem/rust-cache@v2
             - name: Install Trunk
               uses: jetli/trunk-action@v0.4.0
               with:
@@ -47,6 +48,7 @@ jobs:
                   toolchain: nightly
                   target: wasm32-unknown-unknown
                   override: true
+            - uses: Swatinem/rust-cache@v2
             - name: Install Trunk
               uses: jetli/trunk-action@v0.4.0
               with:
@@ -67,14 +69,11 @@ jobs:
                   toolchain: stable
                   target: wasm32-unknown-unknown
                   override: true
-            - name: Install Trunk
-              uses: jetli/trunk-action@v0.4.0
-              with:
-                  version: "latest"
+            - uses: Swatinem/rust-cache@v2
             - name: Install Cargo BInstall
               uses: cargo-bins/cargo-binstall@main
             - name: Install Cargo Leptos
-              run: cargo binstall cargo-leptos -y
+              run: cargo binstall cargo-leptos --locked --no-confirm
             - name: Build
               run: |
                   cd ./examples/ssr_axum
@@ -91,14 +90,11 @@ jobs:
                   toolchain: nightly
                   target: wasm32-unknown-unknown
                   override: true
-            - name: Install Trunk
-              uses: jetli/trunk-action@v0.4.0
-              with:
-                  version: "latest"
+            - uses: Swatinem/rust-cache@v2
             - name: Install Cargo BInstall
               uses: cargo-bins/cargo-binstall@main
             - name: Install Cargo Leptos
-              run: cargo binstall cargo-leptos -y
+              run: cargo binstall cargo-leptos --locked --no-confirm
             - name: Build
               run: |
                   cd ./examples/ssr_axum
@@ -116,6 +112,7 @@ jobs:
                   toolchain: stable
                   target: wasm32-unknown-unknown
                   override: true
+            - uses: Swatinem/rust-cache@v2
             - name: cargo test
               run: |
                   cd thaw_utils

diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml
@@ -31,6 +31,7 @@ jobs:
                   toolchain: stable
                   target: wasm32-unknown-unknown
                   override: true
+            - uses: Swatinem/rust-cache@v2
             - name: Install Trunk
               uses: jetli/trunk-action@v0.4.0
               with:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,29 @@
+## [0.5.0-beta](https://github.com/thaw-ui/thaw/compare/v0.5.0-alpha...v0.5.0-beta) (2025-05-04)
+
+### Bug Fixs
+
+* The arrow position of the InfoLabel component.
+
+### Breaking Changes
+
+* Update leptos to v0.8.0.
+
+## [0.5.0-alpha](https://github.com/thaw-ui/thaw/compare/v0.4.5...v0.5.0-alpha) (2025-03-30)
+
+### Features
+
+* Adds `Tree` component, closes [#392](https://github.com/thaw-ui/thaw/pull/392).
+* `Menu` is changed to a generic component, closes [#390](https://github.com/thaw-ui/thaw/pull/390).
+
+### Breaking Changes
+
+* Update leptos to v0.8.0-beta.
+* Theme is changed to use getset.
+* RatingColor adds Marigold prop.
+* InputType adds Number prop.
+* The icon prop of `Icon` is changed to icondata_core::Icon type.
+* The value prop of `MenuItem` is changed to generic type.
+
 ## [0.4.8](https://github.com/thaw-ui/thaw/compare/v0.4.7...v0.4.8) (2025-08-03)
 
 ### Features
@@ -94,4 +120,4 @@
 
 ### 0.1.0-beta2 - 0.4.0-rc (2023-11-14 - 2024-12-09)
 
-See [0.1 - 0.4 changelog](./changelog/CHANGELOG-0.1-0.4.md)
+See [0.1 - 0.4 changelog](./changelogs/CHANGELOG-0.1-0.4.md)
diff --git a/Cargo.toml b/Cargo.toml
@@ -14,12 +14,16 @@ exclude = ["examples"]
 rust-version = "1.79"
 
 [workspace.dependencies]
-thaw = { version = "0.4.8", path = "./thaw" }
-thaw_components = { version = "0.3.2", path = "./thaw_components" }
+thaw = { version = "0.5.0-beta", path = "./thaw" }
+thaw_components = { version = "0.4.0-beta", path = "./thaw_components" }
 thaw_macro = { version = "0.1.0", path = "./thaw_macro" }
-thaw_utils = { version = "0.1.2", path = "./thaw_utils" }
+thaw_utils = { version = "0.2.0-beta", path = "./thaw_utils" }
 
-leptos = { version = "0.7.7" }
-leptos_meta = { version = "0.7.7" }
-leptos_router = { version = "0.7.7" }
-reactive_stores = { version = "0.1.7" }
+# leptos
+leptos = { version = "0.8.5" }
+leptos_meta = { version = "0.8.5" }
+leptos_router = { version = "0.8.5" }
+reactive_stores = { version = "0.2.5" }
+
+# web
+wasm-bindgen = { version = "0.2.100" }
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 luoxiaozero
+Copyright (c) 2023 lizidev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -20,7 +20,8 @@ You can refer to the [thaw-template](https://github.com/thaw-ui/thaw-template) r
 | Crate version                                                            | Compatible Leptos version |
 | ------------------------------------------------------------------------ | ------------------------- |
 | 0.3 / [thaw-v0.3 branch](https://github.com/thaw-ui/thaw/tree/thaw-v0.3) | 0.6                       |
-| 0.4 / main branch                                                        | 0.7                       |
+| 0.4 / [thaw-v0.4 branch](https://github.com/thaw-ui/thaw/tree/thaw-v0.4) | 0.7                       |
+| 0.5-beta / main branch                                                   | 0.8                       |
 
 ## Resources
 

diff --git a/demo/Cargo.toml b/demo/Cargo.toml
@@ -26,7 +26,7 @@ uuid = { version = "1.10.0", features = ["v4", "js"] }
 console_error_panic_hook = "0.1.7"
 console_log = "1"
 log = "0.4"
-js-sys = "0.3.70"
+js-sys = "0.3.74"
 gloo-net = { version = "0.6.0" }
 
 [features]

diff --git a/demo/index.html b/demo/index.html
@@ -10,6 +10,7 @@
             href="/favicon.ico"
             type="image/x-icon"
         />
+        <meta name="thaw-ui-style"/>
         <link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" />
         <link data-trunk rel="copy-file" href="./src/assets/favicon.ico" />
         <link

diff --git a/demo/src/app.rs b/demo/src/app.rs
@@ -58,6 +58,8 @@ fn TheRouter() -> impl IntoView {
                     <Route path=path!("/server-sider-rendering") view=ServerSiderRenderingMdPage />
                     <Route path=path!("/development/components") view=DevelopmentComponentsMdPage />
                     <Route path=path!("/customize-theme") view=CustomizeThemeMdPage />
+                    <Route path=path!("/style-element-position") view=StyleElementPositionMdPage />
+                    <Route path=path!("/internationalization") view=InternationalizationMdPage />
                     <Route path=path!("/FAQs") view=FAQsMdPage />
                 </ParentRoute>
                 <ParentRoute path=path!("/components") view=ComponentsPage>
@@ -120,6 +122,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path=path!("/time-picker") view=TimePickerMdPage />
                     <Route path=path!("/toast") view=ToastMdPage />
                     <Route path=path!("/tooltip") view=TooltipMdPage />
+                    <Route path=path!("/tree") view=TreeMdPage />
                     <Route path=path!("/upload") view=UploadMdPage />
                 </ParentRoute>
             </Routes>

diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs
@@ -20,7 +20,7 @@ pub fn Demo(
     let css_vars = Memo::new(move |_| {
         let mut css_vars = String::new();
         theme.with(|theme| {
-            if theme.color.color_scheme == "dark" {
+            if theme.color.color_scheme() == "dark" {
                 css_vars.push_str("--demo-border-color: #383f52;");
                 css_vars.push_str("--demo-background-color: #242832;");
             } else {
@@ -32,7 +32,12 @@ pub fn Demo(
     });
 
     let code_class = Memo::new(move |_| {
-        theme.with(|theme| format!("demo-demo__code color-scheme--{}", theme.color.color_scheme))
+        theme.with(|theme| {
+            format!(
+                "demo-demo__code color-scheme--{}",
+                theme.color.color_scheme()
+            )
+        })
     });
     let is_show_code = RwSignal::new(children.is_none());
 

diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
@@ -5,6 +5,14 @@ use leptos_router::hooks::use_navigate;
 // use leptos_use::{storage::use_local_storage, utils::FromToStringCodec};
 use thaw::*;
 
+#[derive(Clone)]
+enum HeaderAction {
+    ChangeTheme,
+    Github,
+    Discord,
+    Navigate(&'static str),
+}
+
 #[component]
 pub fn SiteHeader() -> impl IntoView {
     let navigate = use_navigate();
@@ -172,19 +180,18 @@ pub fn SiteHeader() -> impl IntoView {
                 </AutoComplete>
                 <Menu
                     position=MenuPosition::BottomEnd
-                    on_select=move |value: String| match value.as_str() {
-                        "Dark" => change_theme(MouseEvent::new("click").unwrap()),
-                        "Light" => change_theme(MouseEvent::new("click").unwrap()),
-                        "github" => {
+                    on_select=move |value: HeaderAction| match value {
+                        HeaderAction::ChangeTheme => change_theme(MouseEvent::new("click").unwrap()),
+                        HeaderAction::Github => {
                             _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                         }
-                        "discord" => {
+                        HeaderAction::Discord => {
                             _ = window()
                                 .open_with_url(
                                     "https://discord.gg/uMGvWBDV",
                                 );
                         }
-                        _ => navigate_signal.get()(&value, Default::default()),
+                        HeaderAction::Navigate(value) => navigate_signal.get()(&value, Default::default()),
                     }
                 >
                     <MenuTrigger slot>
@@ -195,11 +202,11 @@ pub fn SiteHeader() -> impl IntoView {
                             attr:style="font-size: 22px; padding: 0px 6px;"
                         />
                     </MenuTrigger>
-                    <MenuItem value=theme_name>{theme_name}</MenuItem>
-                    <MenuItem icon=icondata::AiGithubOutlined value="github">
+                    <MenuItem value=HeaderAction::ChangeTheme>{theme_name}</MenuItem>
+                    <MenuItem value=HeaderAction::Github icon=icondata::AiGithubOutlined>
                         "Github"
                     </MenuItem>
-                    <MenuItem icon=icondata::BiDiscordAlt value="discord">
+                    <MenuItem  value=HeaderAction::Discord icon=icondata::BiDiscordAlt>
                         "Discord"
                     </MenuItem>
                     {
@@ -216,7 +223,7 @@ pub fn SiteHeader() -> impl IntoView {
                                         .into_iter()
                                         .map(|item| {
                                             let NavItemOption { label, value, .. } = item;
-                                            view! { <MenuItem value=value>{label}</MenuItem> }
+                                            view! { <MenuItem value=HeaderAction::Navigate(value)>{label}</MenuItem> }
                                         })
                                         .collect_view()}
                                 }

diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
@@ -155,6 +155,16 @@ pub(crate) fn gen_nav_data() -> Vec<NavGroupOption> {
                     value: "/guide/customize-theme",
                     label: "Customize Theme",
                 },
+                NavItemOption {
+                    group: Some("Theme"),
+                    value: "/guide/style-element-position",
+                    label: "Style Element Position",
+                },
+                NavItemOption {
+                    group: None,
+                    value: "/guide/internationalization",
+                    label: "Internationalization",
+                },
                 NavItemOption {
                     group: None,
                     value: "/guide/FAQs",
@@ -469,6 +479,11 @@ pub(crate) fn gen_nav_data() -> Vec<NavGroupOption> {
                     value: "/components/tooltip",
                     label: "Tooltip",
                 },
+                NavItemOption {
+                    group: None,
+                    value: "/components/tree",
+                    label: "Tree",
+                },
                 NavItemOption {
                     group: None,
                     value: "/components/upload",

diff --git a/demo_markdown/Cargo.toml b/demo_markdown/Cargo.toml
@@ -14,4 +14,7 @@ quote = "1.0.36"
 comrak = "0.26.0"
 proc-macro2 = "1.0.86"
 syn = "2.0.74"
-syntect = "5.2.0"
+syntect = "5.2.0"
+
+# fix: https://github.com/jhpratt/deranged/issues/17
+deranged = "=0.4.0"
diff --git a/demo_markdown/docs/_guide/internationalization.md b/demo_markdown/docs/_guide/internationalization.md
@@ -0,0 +1,52 @@
+# Internationalization
+
+Some component, `Calendar` and `DatePicker`, can use another locale that the default. 
+
+You can use one of the provided locales:
+```rust
+use thaw::locales;
+let locale = RwSignal::new(LocaleConfig::from(locales::EnUS));
+```
+
+Or you can create your own struct that implement the `LocaleExt` trait:
+```rust
+use thaw::locales::LocaleExt;
+pub struct MyStruct;
+impl LocaleExt for MyStruct {
+    fn locale(&self) -> &Locale {todo!()}
+    fn today(&self) -> &'static str {todo!()}
+}
+let locale = RwSignal::new(LocaleConfig::from(MyStruct));
+```
+
+When you have your `RwSignal<LocaleConfig>`, you can pass it to the `ConfigProvider` via the
+`locale` props:
+```rust
+view! {
+    <ConfigProvider locale>
+        ...
+    </ConfigProvider>
+}
+```
+
+If you need to change the locale, but don't have access to the `RwSignal` you passed to the `ConfigProvider`, you can call the `LocaleConfig::use_rw_locale()` function to get a `RwSignal` of the locale.
+
+Here is a demo of it working:
+```rust demo
+use chrono::prelude::*;
+use Locale;
+let value = RwSignal::new(Local::now().date_naive());
+
+let locale = LocaleConfig::use_rw_locale();
+
+view! {
+    <Space vertical=true>
+        <Space>
+            <Button on_click=move |_| locale.set(locales::EnUS.into())>"set locale to en_US"</Button>
+            <Button on_click=move |_| locale.set(locales::FrFR.into())>"set locale to fr_FR"</Button>
+        </Space>
+        <DatePicker value/>
+        <Calendar value />
+    </Space>
+}
+```
diff --git a/demo_markdown/docs/_guide/server_sider_rendering.md b/demo_markdown/docs/_guide/server_sider_rendering.md
@@ -30,20 +30,6 @@ For [start-axum](https://github.com/leptos-rs/start-axum), it is in the [src/app
 
 For [start-actix](https://github.com/leptos-rs/start-actix), it is in the [src/main.rs](https://github.com/leptos-rs/start-actix/blob/943b1ad428072267f32217de4c62896f2bf70459/src/main.rs#L33) file.
 
-## Features
-
-To enable the ssr mode, the following configurations are required:
-
-```toml
-thaw = { ..., features = ["ssr"] }
-```
-
-To enable the hydrate mode, the following configurations are required:
-
-```toml
-thaw = { ..., features = ["hydrate"] }
-```
-
 ## cargo-leptos
 
 If you use [cargo-leptos](https://github.com/leptos-rs/cargo-leptos), Remember to add thaw to your `Cargo.toml` file in the corresponding feature, e.g.

diff --git a/demo_markdown/docs/_guide/theme/customize_theme.md b/demo_markdown/docs/_guide/theme/customize_theme.md
@@ -4,9 +4,9 @@
 let theme = RwSignal::new(Theme::light());
 let on_customize_theme = move |_| {
     theme.update(|theme| {
-        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();
+        theme.color.set_color_brand_background("#f5222d".to_string());
+        theme.color.set_color_brand_background_hover("#ff4d4f".to_string());
+        theme.color.set_color_brand_background_pressed("#cf1322".to_string());
     });
 };