From d13928e97dd3a02f73e32d34b9bb07e6be53ec25 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 16 Nov 2023 09:06:24 +0800
Subject: [PATCH 1/4] feat: The variant property of the progress component is
 changed to color

---
 demo/src/pages/progress/mod.rs | 20 ++++++++++----------
 src/progress/mod.rs            |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

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 {
                     <Progress percentage show_indicator=false/>
                     <Progress percentage />
                     <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
-                    <Progress percentage variant=ProgressVariant::Success/>
-                    <Progress percentage variant=ProgressVariant::Warning/>
-                    <Progress percentage variant=ProgressVariant::Error/>
+                    <Progress percentage color=ProgressColor::Success/>
+                    <Progress percentage color=ProgressColor::Warning/>
+                    <Progress percentage color=ProgressColor::Error/>
                     <Space>
                         <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
                             "-10%"
@@ -37,9 +37,9 @@ pub fn ProgressPage() -> impl IntoView {
                             <Progress percentage show_indicator=false/>
                             <Progress percentage />
                             <Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
-                            <Progress percentage variant=ProgressVariant::Success/>
-                            <Progress percentage variant=ProgressVariant::Warning/>
-                            <Progress percentage variant=ProgressVariant::Error/>
+                            <Progress percentage color=ProgressColor::Success/>
+                            <Progress percentage color=ProgressColor::Warning/>
+                            <Progress percentage color=ProgressColor::Error/>
                             <Space>
                                 <Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
                                     "-10%"
@@ -76,10 +76,10 @@ pub fn ProgressPage() -> impl IntoView {
                         <td>"Percentage value."</td>
                     </tr>
                     <tr>
-                        <td>"variant"</td>
-                        <td>"MaybeSignal<ProgressVariant>"</td>
-                        <td>"ProgressVariant::Primary"</td>
-                        <td>"Progress variant."</td>
+                        <td>"color"</td>
+                        <td>"MaybeSignal<ProgressColor>"</td>
+                        <td>"ProgressColor::Primary"</td>
+                        <td>"Progress color."</td>
                     </tr>
                     <tr>
                         <td>"show_indicator"</td>
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<f32>,
-    #[prop(into, optional)] variant: MaybeSignal<ProgressVariant>,
+    #[prop(into, optional)] color: MaybeSignal<ProgressColor>,
     #[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal<bool>,
     #[prop(into, optional)] indicator_placement: MaybeSignal<ProgressIndicatorPlacement>,
 ) -> 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

From abbaebbfe5b5abb40a30e5000959ab252773ab11 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 16 Nov 2023 10:26:32 +0800
Subject: [PATCH 2/4] docs: add props

---
 demo/src/pages/layout/mod.rs      | 37 --------------------
 demo/src/pages/loading_bar/mod.rs |  6 ++--
 demo/src/pages/radio/mod.rs       | 27 +++++++++++++-
 demo/src/pages/select/mod.rs      | 27 +++++++++++++-
 demo/src/pages/skeleton/mod.rs    | 39 ++++++++++++++++++++-
 demo/src/pages/slider/mod.rs      | 27 +++++++++++++-
 demo/src/pages/space/mod.rs       | 33 +++++++++++++++++-
 demo/src/pages/switch/mod.rs      | 21 ++++++++++-
 demo/src/pages/tabbar/mod.rs      | 58 ++++++++++++++++++++++++++++++-
 demo/src/pages/table/mod.rs       | 14 +++++++-
 demo/src/pages/tabs/mod.rs        | 58 ++++++++++++++++++++++++++++++-
 demo/src/pages/tag/mod.rs         | 27 +++++++++++++-
 demo/src/pages/toast/mod.rs       | 43 +++++++++++++++++++++--
 demo/src/pages/upload/mod.rs      | 58 ++++++++++++++++++++++++++++++-
 14 files changed, 422 insertions(+), 53 deletions(-)

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 {
                     </tr>
                 </tbody>
             </Table>
-            <h3>"Layout Props"</h3>
-            <Table single_column=true>
-                <thead>
-                    <tr>
-                        <th>"Name"</th>
-                        <th>"Type"</th>
-                        <th>"Default"</th>
-                        <th>"Description"</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>"style"</td>
-                        <td>"MaybeSignal<String>"</td>
-                        <td>r#""""#</td>
-                        <td>"Layout's style."</td>
-                    </tr>
-                    <tr>
-                        <td>"position"</td>
-                        <td>"LayoutPosition"</td>
-                        <td>"LayoutPosition::Static"</td>
-                        <td>"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."</td>
-                    </tr>
-                    <tr>
-                        <td>"has_sider"</td>
-                        <td>"MaybeSignal<bool>"</td>
-                        <td>"false"</td>
-                        <td>"Whether the component has sider inside. If so it must be true."</td>
-                    </tr>
-                    <tr>
-                        <td>"children"</td>
-                        <td>"Children"</td>
-                        <td></td>
-                        <td>"Layout's content."</td>
-                    </tr>
-                </tbody>
-            </Table>
             <h3>"LayoutHeader, LayoutSider Props"</h3>
             <Table single_column=true>
                 <thead>
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 {
                 <tbody>
                     <tr>
                         <td>"start"</td>
-                        <th>"fn(&self)"</th>
+                        <td>"fn(&self)"</td>
                         <td>"Callback function for loading bar to start loading."</td>
                     </tr>
                     <tr>
                         <td>"finish"</td>
-                        <th>"fn(&self)"</th>
+                        <td>"fn(&self)"</td>
                         <td>"The callback function when the loading bar finishes loading."</td>
                     </tr>
                     <tr>
                         <td>"error"</td>
-                        <th>"fn(&self)"</th>
+                        <td>"fn(&self)"</td>
                         <td>"Callback function for loading bar error."</td>
                     </tr>
                 </tbody>
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Radio Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"value"</td>
+                        <td>"RwSignal<bool>"</td>
+                        <td>"false"</td>
+                        <td>"Checked value."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"Radio's content."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Select Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"value"</td>
+                        <td>"RwSignal<Option<T>>"</td>
+                        <td>"None"</td>
+                        <td>"Checked value."</td>
+                    </tr>
+                    <tr>
+                        <td>"options"</td>
+                        <td>"MaybeSignal<Vec<SelectOption<T>>>"</td>
+                        <td>"vec![]"</td>
+                        <td>"Options that can be selected."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Skeleton Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"repeat"</td>
+                        <td>"MaybeSignal<u32>"</td>
+                        <td>"1"</td>
+                        <td>"Repeat frequency."</td>
+                    </tr>
+                    <tr>
+                        <td>"text"</td>
+                        <td>"MaybeSignal<bool>"</td>
+                        <td>"false"</td>
+                        <td>"Text skeleton."</td>
+                    </tr>
+                    <tr>
+                        <td>"width"</td>
+                        <td>"Option<MaybeSignal<String>>"</td>
+                        <td>"None"</td>
+                        <td>"Skeleton width."</td>
+                    </tr>
+                    <tr>
+                        <td>"height"</td>
+                        <td>"Option<MaybeSignal<String>>"</td>
+                        <td>"None"</td>
+                        <td>"Text skeleton."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Slider Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"value"</td>
+                        <td>"RwSignal<f64>"</td>
+                        <td>"0"</td>
+                        <td>"Value of the slider."</td>
+                    </tr>
+                    <tr>
+                        <td>"max"</td>
+                        <td>"MaybeSignal<f64>"</td>
+                        <td>"100"</td>
+                        <td>"Max value of the slider."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Space Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"gap"</td>
+                        <td>"SpaceGap"</td>
+                        <td>"SpaceGap::Medium"</td>
+                        <td>"Space's gap."</td>
+                    </tr>
+                    <tr>
+                        <td>"vertical"</td>
+                        <td>"MaybeSignal<f64>"</td>
+                        <td>"false"</td>
+                        <td>"Whether to lay out vertically."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"Space's content."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Swith Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"value"</td>
+                        <td>"RwSignal<bool>"</td>
+                        <td>"false"</td>
+                        <td>"Swith's value."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                         ""
                     </DemoCode>
                 </Demo>
+                <h3>"Tabbar Props"</h3>
+                <Table single_column=true>
+                    <thead>
+                        <tr>
+                            <th>"Name"</th>
+                            <th>"Type"</th>
+                            <th>"Default"</th>
+                            <th>"Description"</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>"value"</td>
+                            <td>"RwSignal<String>"</td>
+                            <td>r#""""#</td>
+                            <td>"Tabbar's value."</td>
+                        </tr>
+                        <tr>
+                            <td>"children"</td>
+                            <td>"Children"</td>
+                            <td></td>
+                            <td>"Tabbar's content."</td>
+                        </tr>
+                    </tbody>
+                </Table>
+                <h3>"TabbarItem Props"</h3>
+                <Table single_column=true>
+                    <thead>
+                        <tr>
+                            <th>"Name"</th>
+                            <th>"Type"</th>
+                            <th>"Default"</th>
+                            <th>"Description"</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>"key"</td>
+                            <td>"MaybeSignal<String>"</td>
+                            <td>r#""""#</td>
+                            <td>"The indentifier of the tabbar item."</td>
+                        </tr>
+                        <tr>
+                            <td>"icon"</td>
+                            <td>"Option<Icon>"</td>
+                            <td>"None"</td>
+                            <td>"TabbarItem's icon."</td>
+                        </tr>
+                        <tr>
+                            <td>"children"</td>
+                            <td>"Children"</td>
+                            <td></td>
+                            <td>"TabbarItem's content."</td>
+                        </tr>
+                    </tbody>
+                </Table>
             </div>
             <div>
                 <MobilePage path="/thaw?path=/mobile/tabbar"/>
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 {
                         <td>"false"</td>
                         <td>""</td>
                     </tr>
+                    <tr>
+                        <td>"style"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>r#""""#</td>
+                        <td>"Table's style."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"Table's content."</td>
+                    </tr>
                 </tbody>
             </Table>
         </div>
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Tabs Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"value"</td>
+                        <td>"RwSignal<String>"</td>
+                        <td>r#""""#</td>
+                        <td>"Tabs value."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"Tabs content."</td>
+                    </tr>
+                </tbody>
+            </Table>
+            <h3>"Tab Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"key"</td>
+                        <td>"String"</td>
+                        <td></td>
+                        <td>"The indentifier of the tab."</td>
+                    </tr>
+                    <tr>
+                        <td>"label"</td>
+                        <td>"String"</td>
+                        <td></td>
+                        <td>"The label of the tab."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"Tab's content."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Tag Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"variant"</td>
+                        <td>"MaybeSignal<TagVariant>"</td>
+                        <td>"TagVariant::Default"</td>
+                        <td>"Tag's variant."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"Tag's content."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }
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 {
                         ""
                     </DemoCode>
                 </Demo>
+                <h3>"Toast Methods"</h3>
+                <Table single_column=true>
+                    <thead>
+                        <tr>
+                            <th>"Name"</th>
+                            <th>"Type"</th>
+                            <th>"Description"</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>"show_toast"</td>
+                            <td>"fn(options: ToastOptions))"</td>
+                            <td>"Show toast."</td>
+                        </tr>
+                    </tbody>
+                </Table>
+                <h3>"ToastOptions Properties"</h3>
+                <Table single_column=true>
+                    <thead>
+                        <tr>
+                            <th>"Name"</th>
+                            <th>"Type"</th>
+                            <th>"Description"</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>"message"</td>
+                            <td>"String"</td>
+                            <td>"message."</td>
+                        </tr>
+                        <tr>
+                            <td>"duration"</td>
+                            <td>"std::time::Duration"</td>
+                            <td>"show duration."</td>
+                        </tr>
+                    </tbody>
+                </Table>
             </div>
             <div>
                 <MobilePage path="/thaw?path=/mobile/toast"/>
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 {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"Upload Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"accept"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>r#""""#</td>
+                        <td>"The accept type of upload."</td>
+                    </tr>
+                    <tr>
+                        <td>"multiple"</td>
+                        <td>"MaybeSignal<bool>"</td>
+                        <td>"false"</td>
+                        <td>"Allow multiple files to be selected."</td>
+                    </tr>
+                    <tr>
+                        <td>"custom_request"</td>
+                        <td>"Option<Callback<FileList, ()>>"</td>
+                        <td>r#""""#</td>
+                        <td>"Customize upload request."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"Upload's content."</td>
+                    </tr>
+                </tbody>
+            </Table>
+            <h3>"UploadDragger Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"children"</td>
+                        <td>"Children"</td>
+                        <td></td>
+                        <td>"UploadDragger's content."</td>
+                    </tr>
+                </tbody>
+            </Table>
         </div>
     }
 }

From 5c9104d453470c12694be4bf6973e1cc19d6427d Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 16 Nov 2023 12:33:04 +0800
Subject: [PATCH 3/4] pref: fmt and clippy

---
 demo/src/components/site_header.rs  | 33 +++++++++--------------------
 demo/src/pages/alert/mod.rs         |  2 +-
 demo/src/pages/auto_complete/mod.rs |  2 +-
 3 files changed, 12 insertions(+), 25 deletions(-)

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<AutoCompleteOption> {
     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 {

From 6ad4eec992033b813b9aae4f7062a600f2f31813 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 16 Nov 2023 14:58:37 +0800
Subject: [PATCH 4/4] gh-pages: page redirection

---
 demo/Trunk.toml          |  6 ++----
 demo/index.html          |  1 +
 demo/src/assets/404.html | 30 ++++++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 demo/src/assets/404.html

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 @@
         <link data-trunk rel="css" href="./src/assets/css/index.css" />
         <link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" />
         <link data-trunk rel="copy-file" href="./src/assets/favicon.ico" />
+        <link data-trunk rel="copy-file" href="./src/assets/404.html" />
         <link data-trunk rel="copy-file" href="../logo.svg" />
     </head>
     <body></body>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Thaw UI</title>
+        <link
+            rel="shortcut icon"
+            href="/thaw/favicon.ico"
+            type="image/x-icon"
+        />
+        <link rel="stylesheet" href="/thaw/index.css" />
+
+        <link
+            rel="preload"
+            href="/thaw/demo_bg.wasm"
+            as="fetch"
+            type="application/wasm"
+            crossorigin=""
+        />
+        <link rel="modulepreload" href="/thaw/demo.js" />
+    </head>
+    <body>
+        <script type="module">
+            import init from "/thaw/demo.js";
+            init("/thaw/demo_bg.wasm");
+        </script>
+    </body>
+</html>