diff --git a/demo/Cargo.toml b/demo/Cargo.toml index 26db529..fcdca8e 100644 --- a/demo/Cargo.toml +++ b/demo/Cargo.toml @@ -12,6 +12,7 @@ thaw = { path = "../" } icondata = { version = "0.1.0", features = [ "AiCloseOutlined", "AiCheckOutlined", + "AiGithubOutlined", ] } leptos_router = { version = "0.5.1", features = ["csr"] } leptos_devtools = "0.0.1" diff --git a/demo/gh-pages b/demo/gh-pages deleted file mode 160000 index faaa4df..0000000 --- a/demo/gh-pages +++ /dev/null @@ -1 +0,0 @@ -Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b diff --git a/demo/src/app.rs b/demo/src/app.rs index c61b815..f33f870 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -43,6 +43,10 @@ fn TheRouter() -> impl IntoView { + + + + diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs index 7fbfa76..abef5ba 100644 --- a/demo/src/components/site_header.rs +++ b/demo/src/components/site_header.rs @@ -26,6 +26,53 @@ pub fn SiteHeader() -> impl IntoView { format!("height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid {}", theme.common.border_color) }) }); + let search_value = create_rw_signal(String::new()); + let search_all_options = store_value(gen_search_all_options()); + let search_options = create_memo(move |_| { + let search_value = search_value.get(); + if search_value.is_empty() { + return vec![]; + } + fn match_value(pattern: &str, value: String) -> bool { + if pattern.is_empty() { + return true; + } + if value.is_empty() { + return false; + } + if pattern.chars().next() == value.chars().next() { + return match_value(pattern.split_at(1).1, value.split_at(1).1.to_string()); + } + 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 = if search_value.len() > 20 { + search_value.split_at(20).0 + } else { + &search_value + }; + options + .iter() + .filter(|option| { + let label = option + .label + .to_lowercase() + .replace(" ", "") + .replace("-", ""); + match_value(search_value, label) + }) + .cloned() + .collect() + }) + }); + let on_search_select = move |path: String| { + let navigate = use_navigate(); + navigate(&path, Default::default()); + }; view! { @@ -42,6 +89,31 @@ pub fn SiteHeader() -> impl IntoView { + + + } } + +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| { + 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 +} diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 426bcea..50e0b63 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -6,30 +6,31 @@ use thaw::*; #[component] pub fn ComponentsPage() -> impl IntoView { let navigate = use_navigate(); - let selected = create_rw_signal({ - let loaction = use_location(); - let mut pathname = loaction.pathname.get_untracked(); + let loaction = use_location(); - if pathname.starts_with("/thaw/components/") { + let select_name = create_rw_signal(String::new()); + create_effect(move |_| { + let mut pathname = loaction.pathname.get(); + let name = if pathname.starts_with("/thaw/components/") { pathname.drain(17..).collect() } else { String::new() - } + }; + select_name.set(name); }); - create_effect(move |value| { - let selected = selected.get(); - if value.is_some() { - navigate(&format!("/components/{selected}"), Default::default()); + _ = select_name.watch(move |name| { + let pathname = loaction.pathname.get_untracked(); + if !pathname.starts_with(&format!("/thaw/components/{name}")) { + navigate(&format!("/components/{name}"), Default::default()); } - selected }); view! { - + { gen_menu_data().into_view() } @@ -43,9 +44,9 @@ pub fn ComponentsPage() -> impl IntoView { } } -struct MenuGroupOption { - label: String, - children: Vec, +pub(crate) struct MenuGroupOption { + pub label: String, + pub children: Vec, } impl IntoView for MenuGroupOption { @@ -61,9 +62,9 @@ impl IntoView for MenuGroupOption { } } -struct MenuItemOption { - label: String, - value: String, +pub(crate) struct MenuItemOption { + pub label: String, + pub value: String, } impl IntoView for MenuItemOption { @@ -75,7 +76,7 @@ impl IntoView for MenuItemOption { } } -fn gen_menu_data() -> Vec { +pub(crate) fn gen_menu_data() -> Vec { vec![ MenuGroupOption { label: "Common Components".into(), diff --git a/demo/src/pages/guide/installation.rs b/demo/src/pages/guide/installation.rs new file mode 100644 index 0000000..d202b36 --- /dev/null +++ b/demo/src/pages/guide/installation.rs @@ -0,0 +1,22 @@ +use crate::components::{Demo, DemoCode}; +use leptos::*; + +#[component] +pub fn InstallationPage() -> impl IntoView { + view! { +
+

"Installation"

+

"Installation thaw"

+ + "" + + + "" + + +
+ } +} diff --git a/demo/src/pages/guide/mod.rs b/demo/src/pages/guide/mod.rs new file mode 100644 index 0000000..a2b011d --- /dev/null +++ b/demo/src/pages/guide/mod.rs @@ -0,0 +1,97 @@ +mod installation; +mod usage; + +use crate::components::SiteHeader; +pub use installation::*; +use leptos::*; +use leptos_router::{use_location, use_navigate, Outlet}; +use thaw::*; +pub use usage::*; + +#[component] +pub fn GuidePage() -> impl IntoView { + let navigate = use_navigate(); + let selected = create_rw_signal({ + let loaction = use_location(); + let mut pathname = loaction.pathname.get_untracked(); + + if pathname.starts_with("/thaw/guide/") { + pathname.drain(12..).collect() + } else { + String::new() + } + }); + + create_effect(move |value| { + let selected = selected.get(); + if value.is_some() { + navigate(&format!("/guide/{selected}"), Default::default()); + } + selected + }); + view! { + + + + + + { + gen_guide_menu_data().into_view() + } + + + + + + + + } +} + +pub(crate) struct MenuGroupOption { + pub label: String, + pub children: Vec, +} + +impl IntoView for MenuGroupOption { + fn into_view(self) -> View { + let Self { label, children } = self; + view! { + + { + children.into_iter().map(|v| v.into_view()).collect_view() + } + + } + } +} + +pub(crate) struct MenuItemOption { + pub label: String, + pub value: String, +} + +impl IntoView for MenuItemOption { + fn into_view(self) -> View { + let Self { label, value } = self; + view! { + + } + } +} + +pub(crate) fn gen_guide_menu_data() -> Vec { + vec![MenuGroupOption { + label: "Getting Started".into(), + children: vec![ + MenuItemOption { + value: "installation".into(), + label: "Installation".into(), + }, + MenuItemOption { + value: "usage".into(), + label: "Usage".into(), + }, + ], + }] +} diff --git a/demo/src/pages/guide/usage.rs b/demo/src/pages/guide/usage.rs new file mode 100644 index 0000000..3b54ddf --- /dev/null +++ b/demo/src/pages/guide/usage.rs @@ -0,0 +1,58 @@ +use crate::components::{Demo, DemoCode}; +use leptos::*; +use prisms::highlight_str; + +#[component] +pub fn UsagePage() -> impl IntoView { + view! { +
+

"Usage"

+

"You just need to import thaw and use it."

+ + "" + + + "" + + +

"A small example:"

+ + "" + impl IntoView { + view! { + + } + } + "#, + "rust" + ) + > + + "" + + +
+ } +} diff --git a/demo/src/pages/home.rs b/demo/src/pages/home.rs index 010510d..5bc7575 100644 --- a/demo/src/pages/home.rs +++ b/demo/src/pages/home.rs @@ -20,7 +20,7 @@ pub fn Home() -> impl IntoView {