From d6b33de06a575879ef8428ff07cf6fa376855e6f Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 5 Mar 2025 14:15:43 +0800 Subject: [PATCH 01/28] feat: update leptos to v0.8.0-alpha --- Cargo.toml | 12 ++++++--- demo/Cargo.toml | 2 +- examples/island/Cargo.toml | 2 +- examples/ssr_axum/Cargo.toml | 2 +- thaw/Cargo.toml | 4 +-- thaw_components/Cargo.toml | 2 +- thaw_utils/Cargo.toml | 4 +-- thaw_utils/src/dom/ssr_mount_style.rs | 35 +++++++++++++++++++++------ 8 files changed, 43 insertions(+), 20 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 3946e0b5..d8ff5565 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -19,7 +19,11 @@ thaw_components = { version = "0.3.1", path = "./thaw_components" } thaw_macro = { version = "0.1.0", path = "./thaw_macro" } thaw_utils = { version = "0.1.1", 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 = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8" } +leptos_meta = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8" } +leptos_router = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8" } +reactive_stores = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8" } + +# web +wasm-bindgen = { version = "0.2.100" } \ No newline at end of file diff --git a/demo/Cargo.toml b/demo/Cargo.toml index 514f0d0a..6b6d22c2 100644 --- 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/examples/island/Cargo.toml b/examples/island/Cargo.toml index b93e5277..dda25657 100644 --- a/examples/island/Cargo.toml +++ b/examples/island/Cargo.toml @@ -16,7 +16,7 @@ leptos_router = { version = "0.7.7" } tokio = { version = "1", features = ["rt-multi-thread"], optional = true } tower = { version = "0.4", optional = true } tower-http = { version = "0.5", features = ["fs"], optional = true } -wasm-bindgen = "0.2.95" +wasm-bindgen = "0.2.100" thiserror = "1" tracing = { version = "0.1", optional = true } http = "1" diff --git a/examples/ssr_axum/Cargo.toml b/examples/ssr_axum/Cargo.toml index f83c2281..dccad809 100644 --- a/examples/ssr_axum/Cargo.toml +++ b/examples/ssr_axum/Cargo.toml @@ -16,7 +16,7 @@ leptos_router = { version = "0.7.7" } tokio = { version = "1", features = ["rt-multi-thread"], optional = true } tower = { version = "0.5.0", optional = true } tower-http = { version = "0.5", features = ["fs"], optional = true } -wasm-bindgen = "0.2.95" +wasm-bindgen = "0.2.100" thiserror = "1" tracing = { version = "0.1", optional = true } http = "1" diff --git a/thaw/Cargo.toml b/thaw/Cargo.toml index 3be09485..a67f577b 100644 --- a/thaw/Cargo.toml +++ b/thaw/Cargo.toml @@ -19,7 +19,7 @@ leptos = { workspace = true } thaw_components = { workspace = true } thaw_macro = { workspace = true } thaw_utils = { workspace = true } -web-sys = { version = "0.3.70", features = [ +web-sys = { version = "0.3.72", features = [ "DomRect", "File", "FileList", @@ -29,7 +29,7 @@ web-sys = { version = "0.3.70", features = [ "TreeWalker", "NodeFilter", ] } -wasm-bindgen = "0.2.95" +wasm-bindgen = { workspace = true } icondata_core = "0.1.0" icondata_ai = "0.0.10" uuid = { version = "1.10.0", features = ["v4", "js"] } diff --git a/thaw_components/Cargo.toml b/thaw_components/Cargo.toml index 9047ac16..453563c5 100644 --- a/thaw_components/Cargo.toml +++ b/thaw_components/Cargo.toml @@ -15,7 +15,7 @@ rust-version.workspace = true [dependencies] leptos = { workspace = true } thaw_utils = { workspace = true } -web-sys = { version = "0.3.70", features = ["DomRect"] } +web-sys = { version = "0.3.72", features = ["DomRect"] } cfg-if = "1.0.0" uuid = { version = "1.10.0", features = ["v4", "js"] } send_wrapper = "0.6" diff --git a/thaw_utils/Cargo.toml b/thaw_utils/Cargo.toml index 1247eb8b..997ec380 100644 --- a/thaw_utils/Cargo.toml +++ b/thaw_utils/Cargo.toml @@ -16,8 +16,8 @@ rust-version.workspace = true leptos = { workspace = true } leptos_meta = { workspace = true, optional = true } reactive_stores = { workspace = true } -web-sys = "0.3.70" -wasm-bindgen = "0.2.95" +web-sys = "0.3.72" +wasm-bindgen = { workspace = true } cfg-if = "1.0.0" chrono = "0.4.38" send_wrapper = "0.6" diff --git a/thaw_utils/src/dom/ssr_mount_style.rs b/thaw_utils/src/dom/ssr_mount_style.rs index 1eb180c3..44e2220b 100644 --- a/thaw_utils/src/dom/ssr_mount_style.rs +++ b/thaw_utils/src/dom/ssr_mount_style.rs @@ -1,11 +1,14 @@ use leptos::{ - attr::Attribute, + attr::{any_attribute::AnyAttribute, Attribute}, context::{Provider, ProviderProps}, prelude::*, tachys::{ hydration::Cursor, renderer::types, - view::{any_view::AnyViewState, Position, PositionState}, + view::{ + any_view::{AnyViewState, AnyViewWithAttrs}, + Position, PositionState, + }, }, }; use std::collections::HashMap; @@ -92,18 +95,19 @@ impl Render for SSRMountStyle { } impl AddAnyAttr for SSRMountStyle { - type Output = Self; + type Output = AnyViewWithAttrs; - fn add_any_attr(self, _attr: NewAttr) -> Self::Output + fn add_any_attr(self, attr: NewAttr) -> Self::Output where Self::Output: RenderHtml, { - self + self.children.add_any_attr(attr) } } impl RenderHtml for SSRMountStyle { type AsyncOutput = Self; + type Owned = Self; const MIN_LENGTH: usize = 0; @@ -125,9 +129,10 @@ impl RenderHtml for SSRMountStyle { position: &mut Position, escape: bool, mark_branches: bool, + extra_attrs: Vec, ) { self.children - .to_html_with_buf(buf, position, escape, mark_branches); + .to_html_with_buf(buf, position, escape, mark_branches, extra_attrs); let head_loc = buf .find("") @@ -145,11 +150,17 @@ impl RenderHtml for SSRMountStyle { position: &mut Position, escape: bool, mark_branches: bool, + extra_attrs: Vec, ) where Self: Sized, { - self.children - .to_html_async_with_buf::(buf, position, escape, mark_branches); + self.children.to_html_async_with_buf::( + buf, + position, + escape, + mark_branches, + extra_attrs, + ); buf.with_buf(|buf| { let head_loc = buf @@ -170,6 +181,10 @@ impl RenderHtml for SSRMountStyle { let state = self.children.hydrate::(cursor, position); SSRMountStyleState { state } } + + fn into_owned(self) -> Self::Owned { + self + } } impl Mountable for SSRMountStyleState { @@ -184,4 +199,8 @@ impl Mountable for SSRMountStyleState { fn insert_before_this(&self, child: &mut dyn Mountable) -> bool { self.state.insert_before_this(child) } + + fn elements(&self) -> Vec { + self.state.elements() + } } From e4900b5c41fdb1c186e0d5c7cbd9920da487c429 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 5 Mar 2025 22:23:45 +0800 Subject: [PATCH 02/28] feat: Theme is changed to use getset --- demo/src/components/demo.rs | 9 +- .../docs/_guide/theme/customize_theme.md | 6 +- thaw/Cargo.toml | 1 + thaw/src/config_provider/docs/mod.md | 6 +- thaw/src/theme/color.rs | 262 +++++++++--------- thaw/src/theme/common.rs | 130 ++++----- 6 files changed, 214 insertions(+), 200 deletions(-) diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs index 0f57eee5..f4864af7 100644 --- 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_markdown/docs/_guide/theme/customize_theme.md b/demo_markdown/docs/_guide/theme/customize_theme.md index aabc8996..83e0fd1d 100644 --- 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()); }); }; diff --git a/thaw/Cargo.toml b/thaw/Cargo.toml index a67f577b..675eee6a 100644 --- a/thaw/Cargo.toml +++ b/thaw/Cargo.toml @@ -39,6 +39,7 @@ palette = "0.7.6" num-traits = "0.2.19" send_wrapper = "0.6" slotmap = "1.0" +getset = "0.1.5" [features] csr = ["leptos/csr", "thaw_components/csr", "thaw_utils/csr"] diff --git a/thaw/src/config_provider/docs/mod.md b/thaw/src/config_provider/docs/mod.md index 5e339ba1..5cf5812e 100644 --- a/thaw/src/config_provider/docs/mod.md +++ b/thaw/src/config_provider/docs/mod.md @@ -23,9 +23,9 @@ view! { 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()); }); }; diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs index 8ab3f9ff..128f6ed7 100644 --- a/thaw/src/theme/color.rs +++ b/thaw/src/theme/color.rs @@ -1,135 +1,137 @@ +use getset::{Getters, Setters}; use std::collections::HashMap; - use thaw_macro::WriteCSSVars; -#[derive(Clone, WriteCSSVars)] +#[derive(Clone, WriteCSSVars, Getters, Setters)] +#[getset(get = "pub", set = "pub")] pub struct ColorTheme { - pub color_scheme: String, - - pub color_neutral_background_static: String, - pub color_neutral_background_inverted: String, - pub color_neutral_background_disabled: String, - pub color_neutral_background_1: String, - pub color_neutral_background_1_hover: String, - pub color_neutral_background_1_pressed: String, - pub color_neutral_background_3: String, - pub color_neutral_background_3_hover: String, - pub color_neutral_background_3_pressed: String, - pub color_neutral_background_4: String, - pub color_neutral_background_4_hover: String, - pub color_neutral_background_4_pressed: String, - pub color_neutral_background_5: String, - pub color_neutral_background_6: String, - - pub color_neutral_foreground_static_inverted: String, - pub color_neutral_foreground_disabled: String, - pub color_neutral_foreground_1: String, - pub color_neutral_foreground_1_hover: String, - pub color_neutral_foreground_1_pressed: String, - pub color_neutral_foreground_2: String, - pub color_neutral_foreground_2_hover: String, - pub color_neutral_foreground_2_pressed: String, - pub color_neutral_foreground_2_brand_hover: String, - pub color_neutral_foreground_2_brand_pressed: String, - pub color_neutral_foreground_2_brand_selected: String, - pub color_neutral_foreground_3: String, - pub color_neutral_foreground_4: String, - pub color_neutral_foreground_on_brand: String, - pub color_neutral_foreground_inverted: String, - - pub color_neutral_stroke_disabled: String, - pub color_neutral_stroke_1: String, - pub color_neutral_stroke_1_hover: String, - pub color_neutral_stroke_1_pressed: String, - pub color_neutral_stroke_2: String, - pub color_neutral_stroke_accessible: String, - pub color_neutral_stroke_accessible_hover: String, - pub color_neutral_stroke_accessible_pressed: String, - - pub color_neutral_shadow_ambient: String, - pub color_neutral_shadow_key: String, - - pub color_neutral_stencil_1: String, - pub color_neutral_stencil_2: String, - - pub color_compound_brand_foreground_1: String, - pub color_compound_brand_foreground_1_hover: String, - pub color_compound_brand_foreground_1_pressed: String, - pub color_compound_brand_background: String, - pub color_compound_brand_background_hover: String, - pub color_compound_brand_background_pressed: String, - pub color_compound_brand_stroke: String, - pub color_compound_brand_stroke_pressed: String, - - pub color_brand_background: String, - pub color_brand_background_hover: String, - pub color_brand_background_pressed: String, - pub color_brand_background_2: String, - pub color_brand_foreground_1: String, - pub color_brand_foreground_2: String, - pub color_brand_stroke_1: String, - pub color_brand_stroke_2: String, - pub color_brand_stroke_2_contrast: String, - pub color_brand_foreground_link: String, - pub color_brand_foreground_link_hover: String, - pub color_brand_foreground_link_pressed: String, - - pub color_stroke_focus_2: String, - - pub color_palette_red_background_1: String, - pub color_palette_red_background_3: String, - pub color_palette_red_foreground_1: String, - pub color_palette_red_foreground_3: String, - pub color_palette_red_border_1: String, - pub color_palette_red_border_2: String, - pub color_palette_green_background_1: String, - pub color_palette_green_background_3: String, - pub color_palette_green_foreground_1: String, - pub color_palette_green_foreground_3: String, - pub color_palette_green_border_1: String, - pub color_palette_green_border_2: String, - pub color_palette_yellow_background_1: String, - pub color_palette_yellow_background_3: String, - pub color_palette_yellow_foreground_1: String, - pub color_palette_yellow_foreground_2: String, - pub color_palette_yellow_border_1: String, - - pub color_palette_dark_orange_background_1: String, - pub color_palette_dark_orange_background_3: String, - pub color_palette_dark_orange_foreground_1: String, - pub color_palette_dark_orange_foreground_3: String, - pub color_palette_dark_orange_border_1: String, - - pub color_status_success_background_1: String, - pub color_status_success_foreground_1: String, - pub color_status_success_border_1: String, - pub color_status_warning_background_1: String, - pub color_status_warning_foreground_3: String, - pub color_status_warning_border_1: String, - pub color_status_danger_background_1: String, - pub color_status_danger_foreground_1: String, - pub color_status_danger_border_1: String, - - pub color_subtle_background: String, - pub color_subtle_background_hover: String, - pub color_subtle_background_pressed: String, - pub color_transparent_background: String, - pub color_transparent_background_hover: String, - pub color_transparent_background_pressed: String, - pub color_transparent_stroke: String, - - pub shadow4: String, - pub shadow8: String, - pub shadow16: String, - pub shadow64: String, + color_scheme: String, + + color_neutral_background_static: String, + color_neutral_background_inverted: String, + color_neutral_background_disabled: String, + color_neutral_background_1: String, + color_neutral_background_1_hover: String, + color_neutral_background_1_pressed: String, + color_neutral_background_3: String, + color_neutral_background_3_hover: String, + color_neutral_background_3_pressed: String, + color_neutral_background_4: String, + color_neutral_background_4_hover: String, + color_neutral_background_4_pressed: String, + color_neutral_background_5: String, + color_neutral_background_6: String, + + color_neutral_foreground_static_inverted: String, + color_neutral_foreground_disabled: String, + color_neutral_foreground_1: String, + color_neutral_foreground_1_hover: String, + color_neutral_foreground_1_pressed: String, + color_neutral_foreground_2: String, + color_neutral_foreground_2_hover: String, + color_neutral_foreground_2_pressed: String, + color_neutral_foreground_2_brand_hover: String, + color_neutral_foreground_2_brand_pressed: String, + color_neutral_foreground_2_brand_selected: String, + color_neutral_foreground_3: String, + color_neutral_foreground_4: String, + color_neutral_foreground_on_brand: String, + color_neutral_foreground_inverted: String, + + color_neutral_stroke_disabled: String, + color_neutral_stroke_1: String, + color_neutral_stroke_1_hover: String, + color_neutral_stroke_1_pressed: String, + color_neutral_stroke_2: String, + color_neutral_stroke_accessible: String, + color_neutral_stroke_accessible_hover: String, + color_neutral_stroke_accessible_pressed: String, + + color_neutral_shadow_ambient: String, + color_neutral_shadow_key: String, + + color_neutral_stencil_1: String, + color_neutral_stencil_2: String, + + color_compound_brand_foreground_1: String, + color_compound_brand_foreground_1_hover: String, + color_compound_brand_foreground_1_pressed: String, + color_compound_brand_background: String, + color_compound_brand_background_hover: String, + color_compound_brand_background_pressed: String, + color_compound_brand_stroke: String, + color_compound_brand_stroke_pressed: String, + + color_brand_background: String, + color_brand_background_hover: String, + color_brand_background_pressed: String, + color_brand_background_2: String, + color_brand_foreground_1: String, + color_brand_foreground_2: String, + color_brand_stroke_1: String, + color_brand_stroke_2: String, + color_brand_stroke_2_contrast: String, + color_brand_foreground_link: String, + color_brand_foreground_link_hover: String, + color_brand_foreground_link_pressed: String, + + color_stroke_focus_2: String, + + color_palette_red_background_1: String, + color_palette_red_background_3: String, + color_palette_red_foreground_1: String, + color_palette_red_foreground_3: String, + color_palette_red_border_1: String, + color_palette_red_border_2: String, + color_palette_green_background_1: String, + color_palette_green_background_3: String, + color_palette_green_foreground_1: String, + color_palette_green_foreground_3: String, + color_palette_green_border_1: String, + color_palette_green_border_2: String, + color_palette_yellow_background_1: String, + color_palette_yellow_background_3: String, + color_palette_yellow_foreground_1: String, + color_palette_yellow_foreground_2: String, + color_palette_yellow_border_1: String, + + color_palette_dark_orange_background_1: String, + color_palette_dark_orange_background_3: String, + color_palette_dark_orange_foreground_1: String, + color_palette_dark_orange_foreground_3: String, + color_palette_dark_orange_border_1: String, + + color_status_success_background_1: String, + color_status_success_foreground_1: String, + color_status_success_border_1: String, + color_status_warning_background_1: String, + color_status_warning_foreground_3: String, + color_status_warning_border_1: String, + color_status_danger_background_1: String, + color_status_danger_foreground_1: String, + color_status_danger_border_1: String, + + color_subtle_background: String, + color_subtle_background_hover: String, + color_subtle_background_pressed: String, + color_transparent_background: String, + color_transparent_background_hover: String, + color_transparent_background_pressed: String, + color_transparent_stroke: String, + + shadow4: String, + shadow8: String, + shadow16: String, + shadow64: String, } impl ColorTheme { - - fn validate_palette(brand_colors: &HashMap) { + fn validate_palette(brand_colors: &HashMap) { for v in 1..=16 { - let variant = v*10; - brand_colors.get(&variant).unwrap_or_else(|| panic!("Missing variant {} in brand color palette", variant)); + let variant = v * 10; + brand_colors + .get(&variant) + .unwrap_or_else(|| panic!("Missing variant {} in brand color palette", variant)); } } pub fn custom_light(brand_colors: &HashMap) -> Self { @@ -152,12 +154,14 @@ impl ColorTheme { theme.color_compound_brand_background_pressed = brand_colors.get(&60).unwrap().to_string(); theme.color_compound_brand_foreground_1 = brand_colors.get(&80).unwrap().to_string(); theme.color_compound_brand_foreground_1_hover = brand_colors.get(&70).unwrap().to_string(); - theme.color_compound_brand_foreground_1_pressed = brand_colors.get(&60).unwrap().to_string(); + theme.color_compound_brand_foreground_1_pressed = + brand_colors.get(&60).unwrap().to_string(); theme.color_compound_brand_stroke = brand_colors.get(&80).unwrap().to_string(); theme.color_compound_brand_stroke_pressed = brand_colors.get(&60).unwrap().to_string(); theme.color_neutral_foreground_2_brand_hover = brand_colors.get(&80).unwrap().to_string(); theme.color_neutral_foreground_2_brand_pressed = brand_colors.get(&70).unwrap().to_string(); - theme.color_neutral_foreground_2_brand_selected = brand_colors.get(&80).unwrap().to_string(); + theme.color_neutral_foreground_2_brand_selected = + brand_colors.get(&80).unwrap().to_string(); theme } @@ -181,12 +185,14 @@ impl ColorTheme { theme.color_compound_brand_background_pressed = brand_colors.get(&90).unwrap().to_string(); theme.color_compound_brand_foreground_1 = brand_colors.get(&100).unwrap().to_string(); theme.color_compound_brand_foreground_1_hover = brand_colors.get(&110).unwrap().to_string(); - theme.color_compound_brand_foreground_1_pressed = brand_colors.get(&90).unwrap().to_string(); + theme.color_compound_brand_foreground_1_pressed = + brand_colors.get(&90).unwrap().to_string(); theme.color_compound_brand_stroke = brand_colors.get(&100).unwrap().to_string(); theme.color_compound_brand_stroke_pressed = brand_colors.get(&90).unwrap().to_string(); theme.color_neutral_foreground_2_brand_hover = brand_colors.get(&100).unwrap().to_string(); theme.color_neutral_foreground_2_brand_pressed = brand_colors.get(&90).unwrap().to_string(); - theme.color_neutral_foreground_2_brand_selected = brand_colors.get(&100).unwrap().to_string(); + theme.color_neutral_foreground_2_brand_selected = + brand_colors.get(&100).unwrap().to_string(); theme } diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs index 025d9447..11857212 100644 --- a/thaw/src/theme/common.rs +++ b/thaw/src/theme/common.rs @@ -1,70 +1,72 @@ +use getset::{Getters, Setters}; use thaw_macro::WriteCSSVars; -#[derive(Clone, WriteCSSVars)] +#[derive(Clone, WriteCSSVars, Getters, Setters)] +#[getset(get = "pub", set = "pub")] pub struct CommonTheme { - pub font_family_base: String, - pub font_family_monospace: String, - pub font_family_numeric: String, - - pub font_size_base_100: String, - pub font_size_base_200: String, - pub font_size_base_300: String, - pub font_size_base_400: String, - pub font_size_base_500: String, - pub font_size_base_600: String, - pub font_size_base_700: String, - pub font_size_base_800: String, - pub font_size_base_900: String, - pub font_size_base_1000: String, - - pub line_height_base_200: String, - pub line_height_base_300: String, - pub line_height_base_400: String, - pub line_height_base_500: String, - - pub font_weight_regular: String, - pub font_weight_semibold: String, - pub font_weight_bold: String, - - pub stroke_width_thin: String, - pub stroke_width_thick: String, - pub stroke_width_thicker: String, - pub stroke_width_thickest: String, - - pub border_radius_none: String, - pub border_radius_small: String, - pub border_radius_medium: String, - pub border_radius_large: String, - pub border_radius_x_large: String, - pub border_radius_circular: String, - - pub spacing_horizontal_x_x_s: String, - pub spacing_horizontal_x_s: String, - pub spacing_horizontal_s_nudge: String, - pub spacing_horizontal_s: String, - pub spacing_horizontal_m_nudge: String, - pub spacing_horizontal_m: String, - pub spacing_horizontal_l: String, - pub spacing_horizontal_x_x_l: String, - pub spacing_vertical_none: String, - pub spacing_vertical_x_x_s: String, - pub spacing_vertical_x_s: String, - pub spacing_vertical_s_nudge: String, - pub spacing_vertical_s: String, - pub spacing_vertical_m_nudge: String, - pub spacing_vertical_m: String, - pub spacing_vertical_l: String, - pub spacing_vertical_x_x_l: String, - - pub duration_ultra_fast: String, - pub duration_faster: String, - pub duration_normal: String, - pub duration_gentle: String, - pub duration_slow: String, - pub curve_accelerate_mid: String, - pub curve_decelerate_max: String, - pub curve_decelerate_mid: String, - pub curve_easy_ease: String, + font_family_base: String, + font_family_monospace: String, + font_family_numeric: String, + + font_size_base_100: String, + font_size_base_200: String, + font_size_base_300: String, + font_size_base_400: String, + font_size_base_500: String, + font_size_base_600: String, + font_size_base_700: String, + font_size_base_800: String, + font_size_base_900: String, + font_size_base_1000: String, + + line_height_base_200: String, + line_height_base_300: String, + line_height_base_400: String, + line_height_base_500: String, + + font_weight_regular: String, + font_weight_semibold: String, + font_weight_bold: String, + + stroke_width_thin: String, + stroke_width_thick: String, + stroke_width_thicker: String, + stroke_width_thickest: String, + + border_radius_none: String, + border_radius_small: String, + border_radius_medium: String, + border_radius_large: String, + border_radius_x_large: String, + border_radius_circular: String, + + spacing_horizontal_x_x_s: String, + spacing_horizontal_x_s: String, + spacing_horizontal_s_nudge: String, + spacing_horizontal_s: String, + spacing_horizontal_m_nudge: String, + spacing_horizontal_m: String, + spacing_horizontal_l: String, + spacing_horizontal_x_x_l: String, + spacing_vertical_none: String, + spacing_vertical_x_x_s: String, + spacing_vertical_x_s: String, + spacing_vertical_s_nudge: String, + spacing_vertical_s: String, + spacing_vertical_m_nudge: String, + spacing_vertical_m: String, + spacing_vertical_l: String, + spacing_vertical_x_x_l: String, + + duration_ultra_fast: String, + duration_faster: String, + duration_normal: String, + duration_gentle: String, + duration_slow: String, + curve_accelerate_mid: String, + curve_decelerate_max: String, + curve_decelerate_mid: String, + curve_easy_ease: String, } impl CommonTheme { From bb19e28c677f2c69b05cd4d0d4c72cee9ccefe11 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 5 Mar 2025 23:01:45 +0800 Subject: [PATCH 03/28] feat: RatingColor adds Marigold attribute --- thaw/src/rating/docs/mod.md | 5 +++-- thaw/src/rating/docs/rating_display.md | 1 + thaw/src/rating/rating/rating.css | 10 ++++++++++ thaw/src/rating/rating/types.rs | 4 ++-- thaw/src/theme/color.rs | 9 +++++++++ 5 files changed, 25 insertions(+), 4 deletions(-) diff --git a/thaw/src/rating/docs/mod.md b/thaw/src/rating/docs/mod.md index 8e4a1799..e22c450d 100644 --- a/thaw/src/rating/docs/mod.md +++ b/thaw/src/rating/docs/mod.md @@ -48,8 +48,9 @@ view! { ```rust demo view! { - - + + + } ``` diff --git a/thaw/src/rating/docs/rating_display.md b/thaw/src/rating/docs/rating_display.md index ebe4d63c..0fb76c4e 100644 --- a/thaw/src/rating/docs/rating_display.md +++ b/thaw/src/rating/docs/rating_display.md @@ -44,6 +44,7 @@ view! { + } ``` diff --git a/thaw/src/rating/rating/rating.css b/thaw/src/rating/rating/rating.css index b921ba56..6fdb4e26 100644 --- a/thaw/src/rating/rating/rating.css +++ b/thaw/src/rating/rating/rating.css @@ -99,6 +99,11 @@ color: var(--colorBrandForeground1); } +.thaw-rating-item--marigold .thaw-rating-item__unselected-icon, +.thaw-rating-item--marigold .thaw-rating-item__selected-icon { + color: var(--colorPaletteMarigoldBorderActive); +} + .thaw-rating-item--filled .thaw-rating-item__unselected-icon { stroke: var(--colorTransparentStroke); color: var(--colorNeutralBackground6); @@ -109,6 +114,11 @@ color: var(--colorBrandBackground2); } +.thaw-rating-item--filled.thaw-rating-item--marigold + .thaw-rating-item__unselected-icon { + color: var(--colorPaletteMarigoldBackground2); +} + .thaw-rating-item--half .thaw-rating-item__unselected-icon { margin-left: -50%; left: 50%; diff --git a/thaw/src/rating/rating/types.rs b/thaw/src/rating/rating/types.rs index 05e8c0f4..36ea39c0 100644 --- a/thaw/src/rating/rating/types.rs +++ b/thaw/src/rating/rating/types.rs @@ -24,7 +24,7 @@ impl RatingInjection { #[derive(Default, Clone)] pub enum RatingColor { Brand, - // TODO v0.5 Marigold, + Marigold, #[default] Neutral, } @@ -33,7 +33,7 @@ impl RatingColor { pub fn as_str(&self) -> &'static str { match self { Self::Brand => "brand", - // RatingColor::Marigold => "marigold", + Self::Marigold => "marigold", Self::Neutral => "neutral", } } diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs index 128f6ed7..a906c3b0 100644 --- a/thaw/src/theme/color.rs +++ b/thaw/src/theme/color.rs @@ -95,6 +95,9 @@ pub struct ColorTheme { color_palette_yellow_foreground_2: String, color_palette_yellow_border_1: String, + color_palette_marigold_background_2: String, + color_palette_marigold_border_active: String, + color_palette_dark_orange_background_1: String, color_palette_dark_orange_background_3: String, color_palette_dark_orange_foreground_1: String, @@ -289,6 +292,9 @@ impl ColorTheme { color_palette_yellow_foreground_2: "#817400".into(), color_palette_yellow_border_1: "#fef7b2".into(), + color_palette_marigold_background_2: "#f9e2ae".into(), + color_palette_marigold_border_active: "#eaa300".into(), + color_palette_dark_orange_background_1: "#fdf6f3".into(), color_palette_dark_orange_background_3: "#da3b01".into(), color_palette_dark_orange_foreground_1: "#c43501".into(), @@ -413,6 +419,9 @@ impl ColorTheme { color_palette_yellow_foreground_2: "#fef7b2".into(), color_palette_yellow_border_1: "#fde300".into(), + color_palette_marigold_background_2: "#835b00".into(), + color_palette_marigold_border_active: "#f2c661".into(), + color_palette_dark_orange_background_1: "#411200".into(), color_palette_dark_orange_background_3: "#da3b01".into(), color_palette_dark_orange_foreground_1: "#e9835e".into(), From de2c83964d791ca9ecc459b0bcb54ecb3763fb9c Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 6 Mar 2025 15:07:06 +0800 Subject: [PATCH 04/28] feat: update ci.yml --- .github/workflows/ci.yml | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c23e5b43..088e2ed7 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -67,14 +67,10 @@ jobs: toolchain: stable target: wasm32-unknown-unknown override: true - - name: Install Trunk - uses: jetli/trunk-action@v0.4.0 - with: - version: "latest" - 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 +87,10 @@ jobs: toolchain: nightly target: wasm32-unknown-unknown override: true - - name: Install Trunk - uses: jetli/trunk-action@v0.4.0 - with: - version: "latest" - 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 From 603bbb47c7f729b2610be8981ae88e2513e6b60d Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 6 Mar 2025 15:59:48 +0800 Subject: [PATCH 05/28] feat: adds Swatinem/rust-cache@v2 --- .github/workflows/ci.yml | 5 +++++ .github/workflows/demo.yml | 1 + 2 files changed, 6 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 088e2ed7..4ee7bec8 100644 --- 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,6 +69,7 @@ jobs: toolchain: stable target: wasm32-unknown-unknown override: true + - uses: Swatinem/rust-cache@v2 - name: Install Cargo BInstall uses: cargo-bins/cargo-binstall@main - name: Install Cargo Leptos @@ -87,6 +90,7 @@ jobs: toolchain: nightly target: wasm32-unknown-unknown override: true + - uses: Swatinem/rust-cache@v2 - name: Install Cargo BInstall uses: cargo-bins/cargo-binstall@main - name: Install Cargo Leptos @@ -108,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 index 337750ac..2826fd5a 100644 --- 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: From 98f06b6ad54f7f8082ae6b52bc13e31022d7840d Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 6 Mar 2025 23:12:47 +0800 Subject: [PATCH 06/28] feat: Update ssr_axum dependency --- CHANGELOG.md | 2 +- examples/ssr_axum/Cargo.toml | 24 +++++++++++++++--------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e954b3f9..2369ae1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -63,4 +63,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/examples/ssr_axum/Cargo.toml b/examples/ssr_axum/Cargo.toml index dccad809..d756466b 100644 --- a/examples/ssr_axum/Cargo.toml +++ b/examples/ssr_axum/Cargo.toml @@ -7,21 +7,27 @@ edition = "2021" crate-type = ["cdylib", "rlib"] [dependencies] -axum = { version = "0.7.5", optional = true } -console_error_panic_hook = "0.1" -leptos = { version = "0.7.7" } -leptos_axum = { version = "0.7.7", optional = true } -leptos_meta = { version = "0.7.7" } -leptos_router = { version = "0.7.7" } -tokio = { version = "1", features = ["rt-multi-thread"], optional = true } +http = "1" tower = { version = "0.5.0", optional = true } tower-http = { version = "0.5", features = ["fs"], optional = true } +axum = { version = "0.8.1", optional = true } + +tokio = { version = "1", features = ["rt-multi-thread"], optional = true } + +console_log = "1" +console_error_panic_hook = "0.1" + +leptos = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8" } +leptos_axum = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8", optional = true } +leptos_meta = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8" } +leptos_router = { git = "https://github.com/leptos-rs/leptos", branch = "leptos_0.8" } + wasm-bindgen = "0.2.100" + thiserror = "1" tracing = { version = "0.1", optional = true } -http = "1" -console_log = "1" log = "0.4" + demo = { path = "../../demo", default-features = false } thaw = { path = "../../thaw" } From e48da46fb7d7e29b460c7ef1fc993b5212cc37fd Mon Sep 17 00:00:00 2001 From: luoxiao Date: Sat, 8 Mar 2025 16:46:41 +0800 Subject: [PATCH 07/28] feat: Position of style elements --- demo/index.html | 1 + demo/src/app.rs | 1 + demo/src/pages/components.rs | 5 ++++ .../docs/_guide/server_sider_rendering.md | 9 +++++++ .../_guide/theme/style_element_position.md | 14 +++++++++++ demo_markdown/src/lib.rs | 1 + thaw/src/tooltip/docs/mod.md | 20 ++++++++++++++++ thaw_utils/src/dom/mount_style.rs | 24 ++++++++++++++++--- 8 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 demo_markdown/docs/_guide/theme/style_element_position.md diff --git a/demo/index.html b/demo/index.html index a1879b17..928ed3e3 100644 --- a/demo/index.html +++ b/demo/index.html @@ -10,6 +10,7 @@ href="/favicon.ico" type="image/x-icon" /> + impl IntoView { + diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 026b0406..ceb4acae 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -155,6 +155,11 @@ pub(crate) fn gen_nav_data() -> Vec { 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/FAQs", diff --git a/demo_markdown/docs/_guide/server_sider_rendering.md b/demo_markdown/docs/_guide/server_sider_rendering.md index 4e41c407..e6439511 100644 --- a/demo_markdown/docs/_guide/server_sider_rendering.md +++ b/demo_markdown/docs/_guide/server_sider_rendering.md @@ -32,6 +32,15 @@ For [start-actix](https://github.com/leptos-rs/start-actix), it is in the [src/m ## Features + + +

"Prerequisite"

+

+ "The following configuration is only suitable for enabling one of SSR and Hydrate at the same time. If you want to enable both SSR and Hydrate, please refer to the configuration of cargo-leptos section below." +

+ + + To enable the ssr mode, the following configurations are required: ```toml diff --git a/demo_markdown/docs/_guide/theme/style_element_position.md b/demo_markdown/docs/_guide/theme/style_element_position.md new file mode 100644 index 00000000..b0017752 --- /dev/null +++ b/demo_markdown/docs/_guide/theme/style_element_position.md @@ -0,0 +1,14 @@ +# Style Element Position + +Sometimes you want to control where the style element should be inserted. + +You can create a element inside head element, then thaw-ui's style will be inserted right before it. + +```html + + + + + + +``` diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index ce4dfe3d..c8f8494b 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -24,6 +24,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt "InstallationMdPage" => "../docs/_guide/installation.md", "ServerSiderRenderingMdPage" => "../docs/_guide/server_sider_rendering.md", "CustomizeThemeMdPage" => "../docs/_guide/theme/customize_theme.md", + "StyleElementPositionMdPage" => "../docs/_guide/theme/style_element_position.md", "FAQsMdPage" => "../docs/_guide/FAQs.md", "AccordionMdPage" => "../../thaw/src/accordion/docs/mod.md", "AnchorMdPage" => "../../thaw/src/anchor/docs/mod.md", diff --git a/thaw/src/tooltip/docs/mod.md b/thaw/src/tooltip/docs/mod.md index cdad45c6..89e0b125 100644 --- a/thaw/src/tooltip/docs/mod.md +++ b/thaw/src/tooltip/docs/mod.md @@ -1,5 +1,25 @@ # Tooltip +```rust +/// Prerequisite +/// Tooltip can only contain one child. +view!{ + // ✅ + + + + // ✅ + + + + // 🙅 + + + + +} +``` + ```rust demo view! { diff --git a/thaw_utils/src/dom/mount_style.rs b/thaw_utils/src/dom/mount_style.rs index ef836427..8f57606c 100644 --- a/thaw_utils/src/dom/mount_style.rs +++ b/thaw_utils/src/dom/mount_style.rs @@ -34,7 +34,16 @@ pub fn mount_style(id: &str, content: &'static str) { .expect("create style element error"); _ = style.set_attribute("id", &id); style.set_text_content(Some(content)); - _ = head.prepend_with_node_1(&style); + + let thaw_meta = head + .query_selector(&format!(r#"meta[name="thaw-ui-style"]"#)) + .expect(r#"query meta[name="thaw-ui-style"] element error"#); + + if let Some(thaw_meta) = thaw_meta { + let _ = head.insert_before(&style, Some(&thaw_meta)); + } else { + let _ = head.prepend_with_node_1(&style); + } } } } @@ -68,8 +77,17 @@ pub fn mount_dynamic_style String + Send + Sync + 'static>(id: String let style = document() .create_element("style") .expect("create style element error"); - _ = style.set_attribute("id", &id); - _ = head.prepend_with_node_1(&style); + let _ = style.set_attribute("id", &id); + + let thaw_meta = head + .query_selector(&format!(r#"meta[name="thaw-ui-style"]"#)) + .expect(r#"query meta[name="thaw-ui-style"] element error"#); + + if let Some(thaw_meta) = thaw_meta { + let _ = head.insert_before(&style, Some(&thaw_meta)); + } else { + let _ = head.prepend_with_node_1(&style); + } style }); From 3ec66a5fb92b9f2e7f9f5ae574506539ab08996f Mon Sep 17 00:00:00 2001 From: Georg Vienna Date: Wed, 12 Mar 2025 03:13:49 +0100 Subject: [PATCH 08/28] feat: generify menu and menu item (#390) --- demo/src/components/site_header.rs | 31 ++++++++++++++++++------------ thaw/src/menu/docs/mod.md | 15 ++++++++------- thaw/src/menu/menu_item.rs | 7 +++---- thaw/src/menu/mod.rs | 10 +++++----- 4 files changed, 35 insertions(+), 28 deletions(-) diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index f0274a44..3bf951c5 100644 --- 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 { 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/VwtS7b8c", ); } - _ => navigate_signal.get()(&value, Default::default()), + HeaderAction::Navigate(value) => navigate_signal.get()(&value, Default::default()), } > @@ -195,13 +202,13 @@ pub fn SiteHeader() -> impl IntoView { attr:style="font-size: 22px; padding: 0px 6px;" /> - {theme_name} - + value=HeaderAction::ChangeTheme>{theme_name}> + value=HeaderAction::Github icon=icondata::AiGithubOutlined> "Github" - - + > + value=HeaderAction::Discord icon=icondata::BiDiscordAlt> "Discord" - + > { use crate::pages::{gen_nav_data, NavGroupOption, NavItemOption}; gen_nav_data() @@ -216,7 +223,7 @@ pub fn SiteHeader() -> impl IntoView { .into_iter() .map(|item| { let NavItemOption { label, value, .. } = item; - view! { {label} } + view! { value=HeaderAction::Navigate(value)>{label}> } }) .collect_view()} } diff --git a/thaw/src/menu/docs/mod.md b/thaw/src/menu/docs/mod.md index a05d1759..cc5bad25 100644 --- a/thaw/src/menu/docs/mod.md +++ b/thaw/src/menu/docs/mod.md @@ -3,12 +3,13 @@ ```rust demo let toaster = ToasterInjection::expect_context(); -let on_select = move |key: String| { +let on_select = move |key: &str| { leptos::logging::warn!("{}", key); + let key = key.to_owned(); toaster.dispatch_toast(move || view! { - "key" + {key} }, Default::default()); @@ -41,7 +42,7 @@ view! { ```rust demo use leptos_meta::Style; -let on_select = move |value| leptos::logging::warn!("{}", value); +let on_select = move |value: &str| leptos::logging::warn!("{}", value); view! {