adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: optimized routing

Browse source
This commit is contained in:
luoxiao 2024-08-05 14:08:46 +08:00
parent 008da2e5b1
commit 9e433c5e67
4 changed files with 123 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
demo/src/app.rs
View file

@ -3,7 +3,7 @@ use leptos::{prelude::*, reactive_graph::wrappers::write::SignalSetter};
use leptos_meta::provide_meta_context; use leptos_meta::provide_meta_context;
use leptos_router::{ use leptos_router::{
components::{ParentRoute, Route, Router, Routes}, components::{ParentRoute, Route, Router, Routes},
StaticSegment, path,
}; };
// use leptos_use::{ // use leptos_use::{
// storage::use_local_storage, // storage::use_local_storage,
@ -41,79 +41,72 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
view! { view! {
<Routes fallback=|| "404"> <Routes fallback=|| "404">
<Route path=StaticSegment("") view=Home/> <Route path=path!("/") view=Home/>
<ParentRoute path=StaticSegment("guide") view=ComponentsPage> <ParentRoute path=path!("/guide") view=ComponentsPage>
<Route path=StaticSegment("installation") view=InstallationMdPage/> <Route path=path!("/installation") view=InstallationMdPage/>
<Route path=StaticSegment("server-sider-rendering") view=ServerSiderRenderingMdPage/> <Route path=path!("/server-sider-rendering") view=ServerSiderRenderingMdPage/>
<Route path=(StaticSegment("development"), StaticSegment("components")) view=DevelopmentComponentsMdPage/> <Route path=path!("/development/components") view=DevelopmentComponentsMdPage/>
</ParentRoute> </ParentRoute>
<ParentRoute path=StaticSegment("components") view=ComponentsPage> <ParentRoute path=path!("/components") view=ComponentsPage>
// // <Route path="/tabbar" view=TabbarPage/>
// // <Route path="/nav-bar" view=NavBarPage/>
// // <Route path="/toast" view=ToastPage/>
{ {
view! { view! {
<Route path=StaticSegment("accordion") view=AccordionMdPage/> <Route path=path!("/accordion") view=AccordionMdPage/>
<Route path=StaticSegment("anchor") view=AnchorMdPage/> <Route path=path!("/anchor") view=AnchorMdPage/>
<Route path=StaticSegment("auto-complete") view=AutoCompleteMdPage/> <Route path=path!("/auto-complete") view=AutoCompleteMdPage/>
<Route path=StaticSegment("avatar") view=AvatarMdPage/> <Route path=path!("/avatar") view=AvatarMdPage/>
<Route path=StaticSegment("back-top") view=BackTopMdPage/> <Route path=path!("/back-top") view=BackTopMdPage/>
<Route path=StaticSegment("badge") view=BadgeMdPage/> <Route path=path!("/badge") view=BadgeMdPage/>
<Route path=StaticSegment("breadcrumb") view=BreadcrumbMdPage/> <Route path=path!("/breadcrumb") view=BreadcrumbMdPage/>
<Route path=StaticSegment("button") view=ButtonMdPage/> <Route path=path!("/button") view=ButtonMdPage/>
<Route path=StaticSegment("calendar") view=CalendarMdPage/> <Route path=path!("/calendar") view=CalendarMdPage/>
<Route path=StaticSegment("card") view=CardMdPage/> <Route path=path!("/card") view=CardMdPage/>
<Route path=StaticSegment("checkbox") view=CheckboxMdPage/> <Route path=path!("/checkbox") view=CheckboxMdPage/>
<Route path=StaticSegment("color-picker") view=ColorPickerMdPage/> <Route path=path!("/color-picker") view=ColorPickerMdPage/>
<Route path=StaticSegment("combobox") view=ComboboxMdPage/> <Route path=path!("/combobox") view=ComboboxMdPage/>
<Route path=StaticSegment("config-provider") view=ConfigProviderMdPage/> <Route path=path!("/config-provider") view=ConfigProviderMdPage/>
} }
} }
{ {
view! { view! {
<Route path=StaticSegment("date-picker") view=DatePickerMdPage/> <Route path=path!("date-picker") view=DatePickerMdPage/>
<Route path=StaticSegment("dialog") view=DialogMdPage/> <Route path=path!("/dialog") view=DialogMdPage/>
<Route path=StaticSegment("divider") view=DividerMdPage/> <Route path=path!("/divider") view=DividerMdPage/>
<Route path=StaticSegment("drawer") view=DrawerMdPage/> <Route path=path!("/drawer") view=DrawerMdPage/>
<Route path=StaticSegment("menu") view=MenuMdPage/> <Route path=path!("/menu") view=MenuMdPage/>
<Route path=StaticSegment("grid") view=GridMdPage/> <Route path=path!("/grid") view=GridMdPage/>
<Route path=StaticSegment("icon") view=IconMdPage/> <Route path=path!("/icon") view=IconMdPage/>
<Route path=StaticSegment("image") view=ImageMdPage/> <Route path=path!("/image") view=ImageMdPage/>
<Route path=StaticSegment("input") view=InputMdPage/> <Route path=path!("/input") view=InputMdPage/>
<Route path=StaticSegment("layout") view=LayoutMdPage/> <Route path=path!("/layout") view=LayoutMdPage/>
<Route path=StaticSegment("loading-bar") view=LoadingBarMdPage/> <Route path=path!("/loading-bar") view=LoadingBarMdPage/>
<Route path=StaticSegment("message-bar") view=MessageBarMdPage/> <Route path=path!("/message-bar") view=MessageBarMdPage/>
<Route path=StaticSegment("nav") view=NavMdPage/> <Route path=path!("/nav") view=NavMdPage/>
<Route path=StaticSegment("pagination") view=PaginationMdPage/> <Route path=path!("/pagination") view=PaginationMdPage/>
<Route path=StaticSegment("popover") view=PopoverMdPage/> <Route path=path!("/popover") view=PopoverMdPage/>
<Route path=StaticSegment("progress-bar") view=ProgressBarMdPage/> <Route path=path!("/progress-bar") view=ProgressBarMdPage/>
} }
} }
{ {
view! { view! {
<Route path=StaticSegment("radio") view=RadioMdPage/> <Route path=path!("/radio") view=RadioMdPage/>
<Route path=StaticSegment("scrollbar") view=ScrollbarMdPage/> <Route path=path!("/scrollbar") view=ScrollbarMdPage/>
<Route path=StaticSegment("skeleton") view=SkeletonMdPage/> <Route path=path!("/skeleton") view=SkeletonMdPage/>
<Route path=StaticSegment("slider") view=SliderMdPage/> <Route path=path!("/slider") view=SliderMdPage/>
<Route path=StaticSegment("space") view=SpaceMdPage/> <Route path=path!("/space") view=SpaceMdPage/>
<Route path=StaticSegment("spin-button") view=SpinButtonMdPage/> <Route path=path!("/spin-button") view=SpinButtonMdPage/>
<Route path=StaticSegment("spinner") view=SpinnerMdPage/> <Route path=path!("/spinner") view=SpinnerMdPage/>
<Route path=StaticSegment("switch") view=SwitchMdPage/> <Route path=path!("/switch") view=SwitchMdPage/>
<Route path=path!("/tab-list") view=TabListMdPage/>
<Route path=path!("/table") view=TableMdPage/>
<Route path=path!("/tag") view=TagMdPage/>
<Route path=path!("/text") view=TextMdPage/>
<Route path=path!("/textarea") view=TextareaMdPage/>
<Route path=path!("/time-picker") view=TimePickerMdPage/>
<Route path=path!("/toast") view=ToastMdPage />
<Route path=path!("/upload") view=UploadMdPage/>
} }
} }
<Route path=StaticSegment("tab-list") view=TabListMdPage/>
<Route path=StaticSegment("table") view=TableMdPage/>
<Route path=StaticSegment("tag") view=TagMdPage/>
<Route path=StaticSegment("text") view=TextMdPage/>
<Route path=StaticSegment("textarea") view=TextareaMdPage/>
<Route path=StaticSegment("time-picker") view=TimePickerMdPage/>
<Route path=StaticSegment("toast") view=ToastMdPage />
<Route path=StaticSegment("upload") view=UploadMdPage/>
</ParentRoute> </ParentRoute>
// <Route path="/mobile/tabbar" view=TabbarDemoPage/>
// <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
// <Route path="/mobile/toast" view=ToastDemoPage/>
</Routes> </Routes>
} }
} }

15
demo/src/components/site_header.rs
View file

@ -166,8 +166,8 @@ pub fn SiteHeader() -> impl IntoView {
on_select=move |value : String| match value.as_str() { on_select=move |value : String| match value.as_str() {
"Dark" => change_theme(MouseEvent::new("click").unwrap()), "Dark" => change_theme(MouseEvent::new("click").unwrap()),
"Light" => change_theme(MouseEvent::new("click").unwrap()), "Light" => change_theme(MouseEvent::new("click").unwrap()),
"github" => { _ = window().open_with_url("http://github.com/thaw-ui/thaw"); },//FIXME: breaks page "github" => { _ = window().open_with_url("http://github.com/thaw-ui/thaw"); },
"discord" => { _ = window().open_with_url("https://discord.gg/YPxuprzu6M"); },//FIXME: breaks page "discord" => { _ = window().open_with_url("https://discord.gg/YPxuprzu6M"); },
_ => navigate_signal.get()(&value, Default::default()) _ => navigate_signal.get()(&value, Default::default())
} }
@ -183,16 +183,16 @@ pub fn SiteHeader() -> impl IntoView {
<MenuItem icon=icondata::AiGithubOutlined value="github">"Github"</MenuItem> <MenuItem icon=icondata::AiGithubOutlined value="github">"Github"</MenuItem>
<MenuItem icon=icondata::BiDiscordAlt value="discord">"Discord"</MenuItem> <MenuItem icon=icondata::BiDiscordAlt value="discord">"Discord"</MenuItem>
{ {
use crate::pages::{gen_menu_data, MenuGroupOption, MenuItemOption}; use crate::pages::{gen_nav_data, NavGroupOption, NavItemOption};
gen_menu_data().into_iter().map(|data| { gen_nav_data().into_iter().map(|data| {
let MenuGroupOption { label, children } = data; let NavGroupOption { label, children } = data;
view! { view! {
<Caption1Strong style="margin-inline-start: 10px; margin-top: 10px; display: block"> <Caption1Strong style="margin-inline-start: 10px; margin-top: 10px; display: block">
{label} {label}
</Caption1Strong> </Caption1Strong>
{ {
children.into_iter().map(|item| { children.into_iter().map(|item| {
let MenuItemOption { label, value } = item; let NavItemOption { label, value } = item;
view! { view! {
<MenuItem value=value>{label}</MenuItem> <MenuItem value=value>{label}</MenuItem>
} }
@ -246,8 +246,7 @@ struct AutoCompleteOption {
} }
fn gen_search_all_options() -> Vec<AutoCompleteOption> { fn gen_search_all_options() -> Vec<AutoCompleteOption> {
use crate::pages::gen_menu_data; crate::pages::gen_nav_data()
gen_menu_data()
.into_iter() .into_iter()
.flat_map(|group| { .flat_map(|group| {
group.children.into_iter().map(|item| AutoCompleteOption { group.children.into_iter().map(|item| AutoCompleteOption {

137
demo/src/pages/components.rs
View file

@ -58,15 +58,15 @@ pub fn ComponentsPage() -> impl IntoView {
<div class="demo-components__sider"> <div class="demo-components__sider">
<NavDrawer selected_value=select_name> <NavDrawer selected_value=select_name>
{ {
gen_menu_data().into_iter().map(|data| { gen_nav_data().into_iter().map(|data| {
let MenuGroupOption { label, children } = data; let NavGroupOption { label, children } = data;
view! { view! {
<Caption1Strong style="margin-inline-start: 10px; margin-top: 10px; display: inline-block"> <Caption1Strong style="margin-inline-start: 10px; margin-top: 10px; display: inline-block">
{label} {label}
</Caption1Strong> </Caption1Strong>
{ {
children.into_iter().map(|item| { children.into_iter().map(|item| {
let MenuItemOption { label, value } = item; let NavItemOption { label, value } = item;
view! { view! {
<NavItem value>{label}</NavItem> <NavItem value>{label}</NavItem>
} }
@ -85,245 +85,228 @@ pub fn ComponentsPage() -> impl IntoView {
} }
} }
pub(crate) struct MenuGroupOption { pub(crate) struct NavGroupOption {
pub label: String, pub label: String,
pub children: Vec<MenuItemOption>, pub children: Vec<NavItemOption>,
} }
pub(crate) struct MenuItemOption { pub(crate) struct NavItemOption {
pub label: String, pub label: String,
pub value: String, pub value: String,
} }
pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> { pub(crate) fn gen_nav_data() -> Vec<NavGroupOption> {
vec![ vec![
MenuGroupOption { NavGroupOption {
label: "Getting Started".into(), label: "Getting Started".into(),
children: vec![ children: vec![
MenuItemOption { NavItemOption {
value: "/guide/installation".into(), value: "/guide/installation".into(),
label: "Installation".into(), label: "Installation".into(),
}, },
MenuItemOption { NavItemOption {
value: "/guide/server-sider-rendering".into(), value: "/guide/server-sider-rendering".into(),
label: "Server Sider Rendering".into(), label: "Server Sider Rendering".into(),
}, },
], ],
}, },
// MenuGroupOption { // NavGroupOption {
// label: "Development".into(), // label: "Development".into(),
// children: vec![ // children: vec![
// MenuItemOption { // NavItemOption {
// value: "/guide/development/components".into(), // value: "/guide/development/components".into(),
// label: "Components".into(), // label: "Components".into(),
// }, // },
// ], // ],
// }, // },
MenuGroupOption { NavGroupOption {
label: "Components".into(), label: "Components".into(),
children: vec![ children: vec![
MenuItemOption { NavItemOption {
value: "/components/accordion".into(), value: "/components/accordion".into(),
label: "Accordion".into(), label: "Accordion".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/anchor".into(), value: "/components/anchor".into(),
label: "Anchor".into(), label: "Anchor".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/auto-complete".into(), value: "/components/auto-complete".into(),
label: "Auto Complete".into(), label: "Auto Complete".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/avatar".into(), value: "/components/avatar".into(),
label: "Avatar".into(), label: "Avatar".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/back-top".into(), value: "/components/back-top".into(),
label: "Back Top".into(), label: "Back Top".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/badge".into(), value: "/components/badge".into(),
label: "Badge".into(), label: "Badge".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/breadcrumb".into(), value: "/components/breadcrumb".into(),
label: "Breadcrumb".into(), label: "Breadcrumb".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/button".into(), value: "/components/button".into(),
label: "Button".into(), label: "Button".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/calendar".into(), value: "/components/calendar".into(),
label: "Calendar".into(), label: "Calendar".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/card".into(), value: "/components/card".into(),
label: "Card".into(), label: "Card".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/checkbox".into(), value: "/components/checkbox".into(),
label: "Checkbox".into(), label: "Checkbox".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/color-picker".into(), value: "/components/color-picker".into(),
label: "Color Picker".into(), label: "Color Picker".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/combobox".into(), value: "/components/combobox".into(),
label: "Combobox".into(), label: "Combobox".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/config-provider".into(), value: "/components/config-provider".into(),
label: "Config Provider".into(), label: "Config Provider".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/date-picker".into(), value: "/components/date-picker".into(),
label: "Date Picker".into(), label: "Date Picker".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/dialog".into(), value: "/components/dialog".into(),
label: "Dialog".into(), label: "Dialog".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/divider".into(), value: "/components/divider".into(),
label: "Divider".into(), label: "Divider".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/drawer".into(), value: "/components/drawer".into(),
label: "Drawer".into(), label: "Drawer".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/grid".into(), value: "/components/grid".into(),
label: "Grid".into(), label: "Grid".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/icon".into(), value: "/components/icon".into(),
label: "Icon".into(), label: "Icon".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/image".into(), value: "/components/image".into(),
label: "Image".into(), label: "Image".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/input".into(), value: "/components/input".into(),
label: "Input".into(), label: "Input".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/layout".into(), value: "/components/layout".into(),
label: "Layout".into(), label: "Layout".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/loading-bar".into(), value: "/components/loading-bar".into(),
label: "Loading Bar".into(), label: "Loading Bar".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/menu".into(), value: "/components/menu".into(),
label: "Menu".into(), label: "Menu".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/message-bar".into(), value: "/components/message-bar".into(),
label: "Message Bar".into(), label: "Message Bar".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/nav".into(), value: "/components/nav".into(),
label: "Nav".into(), label: "Nav".into(),
}, },
MenuItemOption { NavItemOption {
value: "pagination".into(), value: "/components/pagination".into(),
label: "Pagination".into(), label: "Pagination".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/popover".into(), value: "/components/popover".into(),
label: "Popover".into(), label: "Popover".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/progress-bar".into(), value: "/components/progress-bar".into(),
label: "ProgressBar".into(), label: "ProgressBar".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/radio".into(), value: "/components/radio".into(),
label: "Radio".into(), label: "Radio".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/scrollbar".into(), value: "/components/scrollbar".into(),
label: "Scrollbar".into(), label: "Scrollbar".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/skeleton".into(), value: "/components/skeleton".into(),
label: "Skeleton".into(), label: "Skeleton".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/slider".into(), value: "/components/slider".into(),
label: "Slider".into(), label: "Slider".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/space".into(), value: "/components/space".into(),
label: "Space".into(), label: "Space".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/spin-button".into(), value: "/components/spin-button".into(),
label: "Spin Button".into(), label: "Spin Button".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/spinner".into(), value: "/components/spinner".into(),
label: "Spinner".into(), label: "Spinner".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/switch".into(), value: "/components/switch".into(),
label: "Switch".into(), label: "Switch".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/tab-list".into(), value: "/components/tab-list".into(),
label: "Tab List".into(), label: "Tab List".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/table".into(), value: "/components/table".into(),
label: "Table".into(), label: "Table".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/tag".into(), value: "/components/tag".into(),
label: "Tag".into(), label: "Tag".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/text".into(), value: "/components/text".into(),
label: "Text".into(), label: "Text".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/textarea".into(), value: "/components/textarea".into(),
label: "Textarea".into(), label: "Textarea".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/time-picker".into(), value: "/components/time-picker".into(),
label: "Time Picker".into(), label: "Time Picker".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/toast".into(), value: "/components/toast".into(),
label: "Toast".into(), label: "Toast".into(),
}, },
MenuItemOption { NavItemOption {
value: "/components/upload".into(), value: "/components/upload".into(),
label: "Upload".into(), label: "Upload".into(),
}, },
], ],
}, },
// MenuGroupOption {
// label: "Mobile Components".into(),
// children: vec![
// MenuItemOption {
// value: "/components/nav-bar".into(),
// label: "Nav Bar".into(),
// },
// MenuItemOption {
// value: "/components/tabbar".into(),
// label: "Tabbar".into(),
// },
// MenuItemOption {
// value: "/components/toast".into(),
// label: "Toast".into(),
// },
// ],
// },
] ]
} }

8
thaw/src/icon/mod.rs
View file

@ -80,7 +80,7 @@ pub fn Icon(
icon_data.set(Some(icon.data.to_string())); icon_data.set(Some(icon.data.to_string()));
}); });
let svg = view! { view! {
<svg <svg
class=class_list!["thaw-icon", class.map(|c| move || c.get())] class=class_list!["thaw-icon", class.map(|c| move || c.get())]
style=move || take_signal(icon_style).unwrap_or_default() style=move || take_signal(icon_style).unwrap_or_default()
@ -94,12 +94,10 @@ pub fn Icon(
stroke-width=move || take(icon_stroke_width) stroke-width=move || take(icon_stroke_width)
stroke=move || take(icon_stroke) stroke=move || take(icon_stroke)
fill=move || take(icon_fill) fill=move || take(icon_fill)
// inner_html=move || take(icon_data) inner_html=move || take(icon_data)
on:click=on_click on:click=on_click
></svg> ></svg>
}; }
svg.inner_html(move || take(icon_data))
} }
fn take_signal(signal: RwSignal<Option<MaybeSignal<String>>>) -> Option<String> { fn take_signal(signal: RwSignal<Option<MaybeSignal<String>>>) -> Option<String> {