diff --git a/demo/Trunk.toml b/demo/Trunk.toml index 9ccd33e..328d218 100644 --- a/demo/Trunk.toml +++ b/demo/Trunk.toml @@ -2,12 +2,10 @@ target = "index.html" public_url = "/thaw/" # release = true +filehash = false [watch] -watch = [ - "../src", - "./src" -] +watch = ["../src", "./src"] [serve] address = "127.0.0.1" diff --git a/demo/index.html b/demo/index.html index af64a68..76d19a2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -13,6 +13,7 @@ + diff --git a/demo/src/assets/404.html b/demo/src/assets/404.html new file mode 100644 index 0000000..a96962d --- /dev/null +++ b/demo/src/assets/404.html @@ -0,0 +1,30 @@ + + + + + + + Thaw UI + + + + + + + + + + diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index abef5ba..1233539 100644 --- a/demo/src/components/site_header.rs +++ b/demo/src/components/site_header.rs @@ -7,7 +7,7 @@ pub fn SiteHeader() -> impl IntoView { let theme = use_rw_theme(); let theme_name = create_memo(move |_| { theme.with(|theme| { - if theme.name == "light".to_string() { + if theme.name == *"light" { "Dark" } else { "Light" @@ -46,10 +46,7 @@ pub fn SiteHeader() -> impl IntoView { match_value(pattern, value.split_at(1).1.to_string()) } search_all_options.with_value(|options| { - let search_value = search_value - .to_lowercase() - .replace(" ", "") - .replace("-", ""); + let search_value = search_value.to_lowercase().replace([' ', '-'], ""); let search_value = if search_value.len() > 20 { search_value.split_at(20).0 } else { @@ -58,11 +55,7 @@ pub fn SiteHeader() -> impl IntoView { options .iter() .filter(|option| { - let label = option - .label - .to_lowercase() - .replace(" ", "") - .replace("-", ""); + let label = option.label.to_lowercase().replace([' ', '-'], ""); match_value(search_value, label) }) .cloned() @@ -140,24 +133,18 @@ fn gen_search_all_options() -> Vec { use crate::pages::{gen_guide_menu_data, gen_menu_data}; let mut options: Vec<_> = gen_menu_data() .into_iter() - .map(|group| { + .flat_map(|group| { group.children.into_iter().map(|item| AutoCompleteOption { value: format!("/components/{}", item.value), label: item.label, }) }) - .flatten() .collect(); - options.extend( - gen_guide_menu_data() - .into_iter() - .map(|group| { - group.children.into_iter().map(|item| AutoCompleteOption { - value: format!("/guide/{}", item.value), - label: item.label, - }) - }) - .flatten(), - ); + options.extend(gen_guide_menu_data().into_iter().flat_map(|group| { + group.children.into_iter().map(|item| AutoCompleteOption { + value: format!("/guide/{}", item.value), + label: item.label, + }) + })); options } diff --git a/demo/src/pages/alert/mod.rs b/demo/src/pages/alert/mod.rs index c6c8c76..deed410 100644 --- a/demo/src/pages/alert/mod.rs +++ b/demo/src/pages/alert/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn AlertPage() -> impl IntoView { diff --git a/demo/src/pages/auto_complete/mod.rs b/demo/src/pages/auto_complete/mod.rs index f398945..ae79132 100644 --- a/demo/src/pages/auto_complete/mod.rs +++ b/demo/src/pages/auto_complete/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn AutoCompletePage() -> impl IntoView { diff --git a/demo/src/pages/layout/mod.rs b/demo/src/pages/layout/mod.rs index 784271e..946a28b 100644 --- a/demo/src/pages/layout/mod.rs +++ b/demo/src/pages/layout/mod.rs @@ -94,43 +94,6 @@ pub fn LayoutPage() -> impl IntoView { -

"Layout Props"

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"Name""Type""Default""Description"
"style""MaybeSignal"r#""""#"Layout's style."
"position""LayoutPosition""LayoutPosition::Static""static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."
"has_sider""MaybeSignal""false""Whether the component has sider inside. If so it must be true."
"children""Children""Layout's content."

"LayoutHeader, LayoutSider Props"

diff --git a/demo/src/pages/loading_bar/mod.rs b/demo/src/pages/loading_bar/mod.rs index acbf671..1b0d6d9 100644 --- a/demo/src/pages/loading_bar/mod.rs +++ b/demo/src/pages/loading_bar/mod.rs @@ -69,17 +69,17 @@ pub fn LoadingBarPage() -> impl IntoView { - + - + - + diff --git a/demo/src/pages/progress/mod.rs b/demo/src/pages/progress/mod.rs index 9d7eb10..2437e1b 100644 --- a/demo/src/pages/progress/mod.rs +++ b/demo/src/pages/progress/mod.rs @@ -14,9 +14,9 @@ pub fn ProgressPage() -> impl IntoView { - - - + + + - - - - + + + + diff --git a/demo/src/pages/radio/mod.rs b/demo/src/pages/radio/mod.rs index 1967907..893a787 100644 --- a/demo/src/pages/radio/mod.rs +++ b/demo/src/pages/radio/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn RadioPage() -> impl IntoView { @@ -30,6 +30,31 @@ pub fn RadioPage() -> impl IntoView { "" +

"Radio Props"

+
"start""fn(&self)""fn(&self)" "Callback function for loading bar to start loading."
"finish""fn(&self)""fn(&self)" "The callback function when the loading bar finishes loading."
"error""fn(&self)""fn(&self)" "Callback function for loading bar error."
"Percentage value."
"variant""MaybeSignal""ProgressVariant::Primary""Progress variant.""color""MaybeSignal""ProgressColor::Primary""Progress color."
"show_indicator"
+ + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"value""RwSignal""false""Checked value."
"children""Children""Radio's content."
} } diff --git a/demo/src/pages/select/mod.rs b/demo/src/pages/select/mod.rs index c999e2c..7f3215b 100644 --- a/demo/src/pages/select/mod.rs +++ b/demo/src/pages/select/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn SelectPage() -> impl IntoView { @@ -35,6 +35,31 @@ pub fn SelectPage() -> impl IntoView { "" +

"Select Props"

+ + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"value""RwSignal>""None""Checked value."
"options""MaybeSignal>>""vec![]""Options that can be selected."
} } diff --git a/demo/src/pages/skeleton/mod.rs b/demo/src/pages/skeleton/mod.rs index 92b36f1..486fda7 100644 --- a/demo/src/pages/skeleton/mod.rs +++ b/demo/src/pages/skeleton/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn SkeletonPage() -> impl IntoView { @@ -25,6 +25,43 @@ pub fn SkeletonPage() -> impl IntoView { "" +

"Skeleton Props"

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"repeat""MaybeSignal""1""Repeat frequency."
"text""MaybeSignal""false""Text skeleton."
"width""Option>""None""Skeleton width."
"height""Option>""None""Text skeleton."
} } diff --git a/demo/src/pages/slider/mod.rs b/demo/src/pages/slider/mod.rs index 324a722..af29e2b 100644 --- a/demo/src/pages/slider/mod.rs +++ b/demo/src/pages/slider/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn SliderPage() -> impl IntoView { @@ -27,6 +27,31 @@ pub fn SliderPage() -> impl IntoView { "" +

"Slider Props"

+ + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"value""RwSignal""0""Value of the slider."
"max""MaybeSignal""100""Max value of the slider."
} } diff --git a/demo/src/pages/space/mod.rs b/demo/src/pages/space/mod.rs index 53d846b..73874c1 100644 --- a/demo/src/pages/space/mod.rs +++ b/demo/src/pages/space/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn SpacePage() -> impl IntoView { @@ -89,6 +89,37 @@ pub fn SpacePage() -> impl IntoView { "" +

"Space Props"

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"gap""SpaceGap""SpaceGap::Medium""Space's gap."
"vertical""MaybeSignal""false""Whether to lay out vertically."
"children""Children""Space's content."
} } diff --git a/demo/src/pages/switch/mod.rs b/demo/src/pages/switch/mod.rs index 7050b06..74e34bf 100644 --- a/demo/src/pages/switch/mod.rs +++ b/demo/src/pages/switch/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn SwitchPage() -> impl IntoView { @@ -27,6 +27,25 @@ pub fn SwitchPage() -> impl IntoView { "" +

"Swith Props"

+ + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"value""RwSignal""false""Swith's value."
} } diff --git a/demo/src/pages/tabbar/mod.rs b/demo/src/pages/tabbar/mod.rs index 358da96..38da076 100644 --- a/demo/src/pages/tabbar/mod.rs +++ b/demo/src/pages/tabbar/mod.rs @@ -3,8 +3,8 @@ use crate::{ pages::MobilePage, }; use leptos::*; -use thaw::mobile::*; use prisms::highlight_str; +use thaw::{mobile::*, Table}; #[component] pub fn TabbarPage() -> impl IntoView { @@ -39,6 +39,62 @@ pub fn TabbarPage() -> impl IntoView { "" +

"Tabbar Props"

+ + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"value""RwSignal"r#""""#"Tabbar's value."
"children""Children""Tabbar's content."
+

"TabbarItem Props"

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"key""MaybeSignal"r#""""#"The indentifier of the tabbar item."
"icon""Option""None""TabbarItem's icon."
"children""Children""TabbarItem's content."
diff --git a/demo/src/pages/table/mod.rs b/demo/src/pages/table/mod.rs index 80f0908..567a458 100644 --- a/demo/src/pages/table/mod.rs +++ b/demo/src/pages/table/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn TablePage() -> impl IntoView { @@ -86,6 +86,18 @@ pub fn TablePage() -> impl IntoView { "false" "" + + "style" + "MaybeSignal" + r#""""# + "Table's style." + + + "children" + "Children" + + "Table's content." +
diff --git a/demo/src/pages/tabs/mod.rs b/demo/src/pages/tabs/mod.rs index 8084d07..3217c57 100644 --- a/demo/src/pages/tabs/mod.rs +++ b/demo/src/pages/tabs/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn TabsPage() -> impl IntoView { @@ -39,6 +39,62 @@ pub fn TabsPage() -> impl IntoView { "" +

"Tabs Props"

+ + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"value""RwSignal"r#""""#"Tabs value."
"children""Children""Tabs content."
+

"Tab Props"

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"key""String""The indentifier of the tab."
"label""String""The label of the tab."
"children""Children""Tab's content."
} } diff --git a/demo/src/pages/tag/mod.rs b/demo/src/pages/tag/mod.rs index ed0aa94..568f44d 100644 --- a/demo/src/pages/tag/mod.rs +++ b/demo/src/pages/tag/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn TagPage() -> impl IntoView { @@ -49,6 +49,31 @@ pub fn TagPage() -> impl IntoView { "" +

"Tag Props"

+ + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"variant""MaybeSignal""TagVariant::Default""Tag's variant."
"children""Children""Tag's content."
} } diff --git a/demo/src/pages/toast/mod.rs b/demo/src/pages/toast/mod.rs index 81baeac..d8db637 100644 --- a/demo/src/pages/toast/mod.rs +++ b/demo/src/pages/toast/mod.rs @@ -3,10 +3,10 @@ use crate::{ pages::MobilePage, }; use leptos::*; -use thaw::mobile::*; -use thaw::*; use prisms::highlight_str; use std::time::Duration; +use thaw::mobile::*; +use thaw::*; #[component] pub fn ToastPage() -> impl IntoView { @@ -36,6 +36,45 @@ pub fn ToastPage() -> impl IntoView { "" +

"Toast Methods"

+ + + + + + + + + + + + + + + +
"Name""Type""Description"
"show_toast""fn(options: ToastOptions))""Show toast."
+

"ToastOptions Properties"

+ + + + + + + + + + + + + + + + + + + + +
"Name""Type""Description"
"message""String""message."
"duration""std::time::Duration""show duration."
diff --git a/demo/src/pages/upload/mod.rs b/demo/src/pages/upload/mod.rs index dd79e42..e1b058c 100644 --- a/demo/src/pages/upload/mod.rs +++ b/demo/src/pages/upload/mod.rs @@ -1,7 +1,7 @@ use crate::components::{Demo, DemoCode}; use leptos::*; -use thaw::*; use prisms::highlight_str; +use thaw::*; #[component] pub fn UploadPage() -> impl IntoView { @@ -83,6 +83,62 @@ pub fn UploadPage() -> impl IntoView { "" +

"Upload Props"

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"accept""MaybeSignal"r#""""#"The accept type of upload."
"multiple""MaybeSignal""false""Allow multiple files to be selected."
"custom_request""Option>"r#""""#"Customize upload request."
"children""Children""Upload's content."
+

"UploadDragger Props"

+ + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"children""Children""UploadDragger's content."
} } diff --git a/src/progress/mod.rs b/src/progress/mod.rs index 7a09c10..8095637 100644 --- a/src/progress/mod.rs +++ b/src/progress/mod.rs @@ -23,7 +23,7 @@ impl ProgressIndicatorPlacement { } #[derive(Default, Clone)] -pub enum ProgressVariant { +pub enum ProgressColor { #[default] Primary, Success, @@ -31,7 +31,7 @@ pub enum ProgressVariant { Error, } -impl ProgressVariant { +impl ProgressColor { fn theme_background_color(&self, theme: &Theme) -> String { match self { Self::Primary => theme.common.color_primary.clone(), @@ -45,7 +45,7 @@ impl ProgressVariant { #[component] pub fn Progress( #[prop(into, optional)] percentage: MaybeSignal, - #[prop(into, optional)] variant: MaybeSignal, + #[prop(into, optional)] color: MaybeSignal, #[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal, #[prop(into, optional)] indicator_placement: MaybeSignal, ) -> impl IntoView { @@ -60,7 +60,7 @@ pub fn Progress( )); css_vars.push_str(&format!( "--thaw-inner-background-color: {};", - variant.get().theme_background_color(theme) + color.get().theme_background_color(theme) )); }); css_vars