Merge pull request #7 from thaw-ui/feat/demo

Feat/demo

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"

demo/gh-pages

@@ -1 +0,0 @@
-Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

demo/src/app.rs

@@ -43,6 +43,10 @@ fn TheRouter() -> impl IntoView {
         <Router base="/thaw" set_is_routing>
             <Routes base="/thaw".to_string()>
                 <Route path="/" view=Home/>
+                <Route path="/guide" view=GuidePage>
+                    <Route path="/installation" view=InstallationPage/>
+                    <Route path="/usage" view=UsagePage/>
+                </Route>
                 <Route path="/components" view=ComponentsPage>
                     <Route path="/menu" view=MenuPage/>
                     <Route path="/slider" view=SliderPage/>

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! {
         <LayoutHeader style>
             <Space>
@@ -42,6 +89,31 @@ pub fn SiteHeader() -> impl IntoView {
                 </div>
             </Space>
             <Space>
+                <AutoComplete
+                    value=search_value
+                    placeholder="Search"
+                    options=search_options
+                    clear_after_select=true
+                    on_select=on_search_select
+                />
+                <Button
+                    variant=ButtonVariant::Text
+                    on:click=move |_| {
+                        let navigate = use_navigate();
+                        navigate("/guide/installation", Default::default());
+                    }
+                >
+                    "Guide"
+                </Button>
+                <Button
+                    variant=ButtonVariant::Text
+                    on:click=move |_| {
+                        let navigate = use_navigate();
+                        navigate("/components/button", Default::default());
+                    }
+                >
+                    "Components"
+                </Button>
                 <Button
                     variant=ButtonVariant::Text
                     on:click=on_theme
@@ -50,15 +122,42 @@ pub fn SiteHeader() -> impl IntoView {
                 </Button>
                 <Button
                     variant=ButtonVariant::Text
+                    icon=icondata::AiIcon::AiGithubOutlined
+                    round=true
+                    style="font-size: 22px; padding: 0px 6px;"
                     on:click=move |_| {
                         _ = window().open_with_url("http://github.com/thaw-ui/thaw");
                     }
                 >
-
-                    "Github"
                 </Button>
             </Space>
 
         </LayoutHeader>
     }
 }
+
+fn gen_search_all_options() -> Vec<AutoCompleteOption> {
+    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
+}

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 loaction = use_location();
-        let mut pathname = loaction.pathname.get_untracked();
 
-        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| {
+    _ = select_name.watch(move |name| {
-        let selected = selected.get();
+        let pathname = loaction.pathname.get_untracked();
-        if value.is_some() {
+        if !pathname.starts_with(&format!("/thaw/components/{name}")) {
-            navigate(&format!("/components/{selected}"), Default::default());
+            navigate(&format!("/components/{name}"), Default::default());
         }
-        selected
     });
     view! {
         <Layout position=LayoutPosition::Absolute>
             <SiteHeader/>
             <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
                 <LayoutSider>
-                    <Menu value=selected>
+                    <Menu value=select_name>
                         {
                             gen_menu_data().into_view()
                         }
@@ -43,9 +44,9 @@ pub fn ComponentsPage() -> impl IntoView {
     }
 }
 
-struct MenuGroupOption {
+pub(crate) struct MenuGroupOption {
-    label: String,
+    pub label: String,
-    children: Vec<MenuItemOption>,
+    pub children: Vec<MenuItemOption>,
 }
 
 impl IntoView for MenuGroupOption {
@@ -61,9 +62,9 @@ impl IntoView for MenuGroupOption {
     }
 }
 
-struct MenuItemOption {
+pub(crate) struct MenuItemOption {
-    label: String,
+    pub label: String,
-    value: String,
+    pub value: String,
 }
 
 impl IntoView for MenuItemOption {
@@ -75,7 +76,7 @@ impl IntoView for MenuItemOption {
     }
 }
 
-fn gen_menu_data() -> Vec<MenuGroupOption> {
+pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
     vec![
         MenuGroupOption {
             label: "Common Components".into(),

demo/src/pages/guide/installation.rs

@@ -0,0 +1,22 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+
+#[component]
+pub fn InstallationPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Installation"</h1>
+            <p>"Installation thaw"</p>
+            <Demo>
+            ""
+            <DemoCode
+                slot
+                html="cargo add thaw"
+            >
+
+                ""
+            </DemoCode>
+        </Demo>
+        </div>
+    }
+}

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! {
+        <Layout position=LayoutPosition::Absolute>
+            <SiteHeader/>
+            <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
+                <LayoutSider>
+                    <Menu value=selected>
+                        {
+                            gen_guide_menu_data().into_view()
+                        }
+                    </Menu>
+                </LayoutSider>
+                <Layout style="padding: 8px 12px 28px; overflow-y: auto;">
+                    <Outlet/>
+                </Layout>
+            </Layout>
+        </Layout>
+    }
+}
+
+pub(crate) struct MenuGroupOption {
+    pub label: String,
+    pub children: Vec<MenuItemOption>,
+}
+
+impl IntoView for MenuGroupOption {
+    fn into_view(self) -> View {
+        let Self { label, children } = self;
+        view! {
+            <MenuGroup label=label>
+                {
+                    children.into_iter().map(|v| v.into_view()).collect_view()
+                }
+            </MenuGroup>
+        }
+    }
+}
+
+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! {
+            <MenuItem key=value label/>
+        }
+    }
+}
+
+pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
+    vec![MenuGroupOption {
+        label: "Getting Started".into(),
+        children: vec![
+            MenuItemOption {
+                value: "installation".into(),
+                label: "Installation".into(),
+            },
+            MenuItemOption {
+                value: "usage".into(),
+                label: "Usage".into(),
+            },
+        ],
+    }]
+}

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! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Usage"</h1>
+            <p>"You just need to import thaw and use it."</p>
+            <Demo>
+                ""
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        // Import all
+                        use thaw::*;
+                        // Import on Demand
+                        use thaw::{Button, ButtonVariant};
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <p>"A small example:"</p>
+            <Demo>
+                ""
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        use leptos::*;
+                        use thaw::*;
+                        
+                        fn main() {
+                            mount_to_body(App)
+                        }
+                        #[component]
+                        pub fn App() -> impl IntoView {
+                            view! {
+                                <Button variant=ButtonVariant::Primary>"Primary"</Button>
+                            }
+                        }
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/home.rs

@@ -20,7 +20,7 @@ pub fn Home() -> impl IntoView {
             <Space>
                 <Button on_click=move |_| {
                     let navigate = use_navigate();
-                    navigate("/components/menu", Default::default());
+                    navigate("/components/button", Default::default());
                 }>"Read the docs"</Button>
                 <Button
                     variant=ButtonVariant::Text

demo/src/pages/mod.rs

@@ -10,6 +10,7 @@ mod color_picker;
 mod components;
 mod divider;
 mod grid;
+mod guide;
 mod home;
 mod icon;
 mod image;
@@ -46,6 +47,7 @@ pub use color_picker::*;
 pub use components::*;
 pub use divider::*;
 pub use grid::*;
+pub use guide::*;
 pub use home::*;
 pub use icon::*;
 pub use image::*;

src/auto_complete/auto-complete.css

@@ -8,6 +8,7 @@
     box-sizing: border-box;
     box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
         0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    overflow: auto;
     z-index: 2000;
 }
 .thaw-auto-complete__menu-item {

src/auto_complete/mod.rs

@@ -1,7 +1,11 @@
 mod theme;
 
 use crate::{
-    mount_style, teleport::Teleport, use_theme, utils::maybe_rw_signal::MaybeRwSignal, Input, Theme,
+    mount_style,
+    teleport::Teleport,
+    use_theme,
+    utils::{maybe_rw_signal::MaybeRwSignal, StoredMaybeSignal},
+    Input, Theme,
 };
 use leptos::*;
 pub use theme::AutoCompleteTheme;
@@ -17,6 +21,8 @@ pub fn AutoComplete(
     #[prop(optional, into)] value: MaybeRwSignal<String>,
     #[prop(optional, into)] placeholder: MaybeSignal<String>,
     #[prop(optional, into)] options: MaybeSignal<Vec<AutoCompleteOption>>,
+    #[prop(optional, into)] clear_after_select: MaybeSignal<bool>,
+    #[prop(optional, into)] on_select: Option<Callback<String>>,
 ) -> impl IntoView {
     mount_style("auto-complete", include_str!("./auto-complete.css"));
     let theme = use_theme(Theme::light);
@@ -38,6 +44,7 @@ pub fn AutoComplete(
     let is_show_menu = create_rw_signal(false);
     let auto_complete_ref = create_node_ref::<html::Div>();
     let auto_complete_menu_ref = create_node_ref::<html::Div>();
+    let options = StoredMaybeSignal::from(options);
     let show_menu = move || {
         is_show_menu.set(true);
         let rect = auto_complete_ref
@@ -96,7 +103,14 @@ pub fn AutoComplete(
                         .map(|v| {
                             let AutoCompleteOption { value: option_value, label } = v;
                             let on_click = move |_| {
-                                value.set(option_value.clone());
+                                if clear_after_select.get_untracked() {
+                                    value.set(String::new());
+                                } else {
+                                    value.set(option_value.clone());
+                                }
+                                if let Some(on_select) = on_select {
+                                    on_select.call(option_value.clone());
+                                }
                                 is_show_menu.set(false);
                             };
                             let on_mousedown = move |ev: ev::MouseEvent| {