Feat/demo site (#232)

* fix: demo site error

* fix: SwitchVersion label

* fix: BackTop demo scrollbar

demo/src/components/demo.css

@@ -34,6 +34,5 @@
     font-size: 0.875em;
     line-height: 1.714;
     padding: 1rem;
-    overflow: auto;
     background-color: var(--demo-background-color);
 }

demo/src/components/demo.rs

@@ -1,4 +1,4 @@
-use leptos::prelude::*;
+use leptos::{either::Either, prelude::*};
 use leptos_meta::Style;
 use thaw::*;
 
@@ -11,7 +11,11 @@ pub struct DemoCode {
 }
 
 #[component]
-pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -> impl IntoView {
+pub fn Demo(
+    #[prop(optional)] remove_scrollbar: bool,
+    demo_code: DemoCode,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
     let theme = Theme::use_theme(Theme::light);
     let css_vars = Memo::new(move |_| {
         let mut css_vars = String::new();
@@ -34,19 +38,37 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -
 
     let is_highlight = demo_code.is_highlight;
     let html = demo_code.text;
+    let styles = use_context::<DemoStyle>().is_none().then(|| {
+        view! {
+            <Style id="leptos-thaw-syntect-css">
+                {include_str!("./syntect-css.css")}
+            </Style>
+            <Style id="demo-demo">
+                {include_str!("./demo.css")}
+            </Style>
+        }
+    });
+    provide_context(DemoStyle);
 
     view! {
-        <Style id="leptos-thaw-syntect-css">
+        {styles}
-            {include_str!("./syntect-css.css")}
-        </Style>
-        <Style id="demo-demo">
-            {include_str!("./demo.css")}
-        </Style>
         <div class="demo-demo" style=move || css_vars.get()>
             {
                 if let Some(children) = children {
                     view! {
-                        <div class="demo-demo__view">{children()}</div>
+                        {
+                            if remove_scrollbar {
+                                Either::Left(view! {
+                                    <div class="demo-demo__view">{children()}</div>
+                                })
+                            } else {
+                                Either::Right(view! {
+                                    <Scrollbar>
+                                        <div class="demo-demo__view">{children()}</div>
+                                    </Scrollbar>
+                                })
+                            }
+                        }
                         <div class="demo-demo__toolbar" class=("demo-demo__toolbar--code", move || !is_show_code.get())>
                             <Tooltip
                                 content=MaybeSignal::derive(move || if is_show_code.get() {
@@ -72,19 +94,24 @@ pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -
                     None
                 }
             }
-            <div class=move || code_class.get() style:display=move || (!is_show_code.get()).then_some("none").unwrap_or_default()>
+            <Scrollbar>
-                {
+                <div class=move || code_class.get() style:display=move || (!is_show_code.get()).then_some("none").unwrap_or_default()>
-                    if is_highlight {
+                    {
-                        view! {
+                        if is_highlight {
-                            <Code inner_html=html />
+                            view! {
-                        }
+                                <Code inner_html=html />
-                    } else {
+                            }
-                        view! {
+                        } else {
-                            <Code text=html />
+                            view! {
+                                <Code text=html />
+                            }
                         }
                     }
-                }
+                </div>
-            </div>
+            </Scrollbar>
         </div>
     }
 }
+
+#[derive(Clone)]
+pub struct DemoStyle;

demo/src/components/switch_version.rs

@@ -14,10 +14,16 @@ pub fn SwitchVersion() -> impl IntoView {
     ];
 
     let version = RwSignal::new(None::<String>);
+    let label = RwSignal::new(String::new());
     #[cfg(any(feature = "csr", feature = "hydrate"))]
     {
         let location = window().location();
         let origin = location.origin().ok();
+        if let Some(origin) = origin.as_ref() {
+            if let Some(item) = options.iter().find(|item| item.1 == origin) {
+                label.set(item.0.to_string());
+            }
+        }
         version.set(origin);
         let _ = version.watch(move |origin| {
             if let Some(origin) = origin {
@@ -29,7 +35,7 @@ pub fn SwitchVersion() -> impl IntoView {
     }
 
     view! {
-        <Combobox selected_options=version placeholder="Switch version">
+        <Combobox value=label selected_options=version placeholder="Switch version">
             {
                 options.into_iter().map(|option| view! {
                     <ComboboxOption value=option.1 text=option.0 />

demo/src/pages/components.rs

@@ -29,10 +29,12 @@ pub fn ComponentsPage() -> impl IntoView {
             .demo-components__component {
                 width: 896px;
                 margin: 0 auto;
+                padding: 8px 12px 28px;
+                box-sizing: border-box;
             }
             .demo-components__toc {
                 width: 190px;
-                margin: 12px 2px 12px 12px;
+                margin: 12px;
             }
             .demo-components__toc > .thaw-anchor {
                 position: sticky;
@@ -47,7 +49,7 @@ pub fn ComponentsPage() -> impl IntoView {
                     display: none;
                 }
                 .demo-components__component {
-                    width: 100%;
+                    width: 100vw;
                 }
             }
             "
@@ -77,7 +79,7 @@ pub fn ComponentsPage() -> impl IntoView {
                         }
                     </NavDrawer>
                 </div>
-                <Layout content_style="padding: 8px 12px 28px; display: flex;" attr:class=("doc-content", true)>
+                <Layout content_style="display: flex" attr:class=("doc-content", true)>
                     <Outlet/>
                 </Layout>
             </Layout>

demo_markdown/src/markdown/code_block.rs

@@ -17,7 +17,7 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
         let mut is_highlight = true;
         let literal = langs
             .iter()
-            .find(|lang| lang != &&"demo")
+            .find(|lang| lang != &&"demo" && lang != &&"remove-scrollbar")
             .map(|lang| highlight_to_html(&code_block.literal, lang))
             .flatten()
             .unwrap_or_else(|| {
@@ -25,8 +25,10 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
                 code_block.literal.clone()
             });
 
+        let remove_scrollbar = langs.iter().any(|lang| lang == &"remove-scrollbar");
+
         quote! {
-            <Demo>
+            <Demo remove_scrollbar=#remove_scrollbar>
                 <#demo />
                 <DemoCode slot is_highlight=#is_highlight text=#literal>
                 </DemoCode>

thaw/src/back_top/docs/mod.md

@@ -2,7 +2,7 @@
 
 BackTop will find its first scrollable ascendant element and listen scroll event on it.
 
-```rust demo
+```rust demo remove-scrollbar
 view! {
     <BackTop />
 }
@@ -10,7 +10,7 @@ view! {
 
 ### Visibility height
 
-```rust demo
+```rust demo remove-scrollbar
 view! {
     <BackTop bottom=100 visibility_height=280>
         <div style="width: 200px; text-align: center;">
@@ -22,7 +22,7 @@ view! {
 
 ### Change position
 
-```rust demo
+```rust demo remove-scrollbar
 view! {
     <BackTop right=40 bottom=160>
         <div style="width: 200px; text-align: center;">

thaw/src/combobox/combobox.rs

@@ -285,6 +285,7 @@ impl ComboboxInjection {
         expect_context()
     }
 
+    /// value: (value, text, disabled)
     pub fn insert_option(&self, id: String, value: (String, String, MaybeSignal<bool>)) {
         self.options
             .update_value(|options| options.insert(id, value));