thaw/demo/src/pages/components.rs

345 lines
11 KiB
Rust
Raw Normal View History

2023-06-18 19:40:23 +08:00
use crate::components::SiteHeader;
2023-06-13 12:43:15 +08:00
use leptos::*;
use leptos_meta::Style;
2023-06-13 12:43:15 +08:00
use leptos_router::{use_location, use_navigate, Outlet};
2023-11-05 16:03:58 +08:00
use thaw::*;
2023-06-13 12:43:15 +08:00
#[component]
2023-08-29 09:11:22 +08:00
pub fn ComponentsPage() -> impl IntoView {
let navigate = use_navigate();
let loaction = use_location();
2023-06-13 12:43:15 +08:00
let select_name = create_rw_signal(String::new());
create_effect(move |_| {
let mut pathname = loaction.pathname.get();
let name = if pathname.starts_with("/components/") {
pathname.drain(12..).collect()
2023-10-11 21:12:45 +08:00
} else {
String::new()
};
select_name.set(name);
2023-06-13 12:43:15 +08:00
});
_ = select_name.watch(move |name| {
let pathname = loaction.pathname.get_untracked();
if !pathname.eq(&format!("/components/{name}")) {
navigate(&format!("/components/{name}"), Default::default());
2023-06-13 12:43:15 +08:00
}
});
2023-08-29 09:11:22 +08:00
view! {
<Style>
"
.demo-components__component {
width: 896px;
margin: 0 auto;
}
.demo-components__toc {
width: 190px;
margin: 12px 2px 12px 12px;
}
.demo-components__toc > .thaw-anchor {
position: sticky;
top: 36px;
}
.demo-md-table-box {
overflow: auto;
}
@media screen and (max-width: 1200px) {
.demo-components__toc,
.demo-components__sider {
display: none;
}
.demo-components__component {
width: 100%;
}
}
"
</Style>
2023-10-16 21:15:43 +08:00
<Layout position=LayoutPosition::Absolute>
2023-10-08 09:28:13 +08:00
<SiteHeader/>
2023-11-02 21:29:45 +08:00
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
2024-05-11 17:47:33 +08:00
<div class="demo-components__sider">
2024-05-11 15:53:37 +08:00
<NavDrawer selected_value=select_name>
2023-11-20 21:00:13 +08:00
{gen_menu_data().into_view()}
2024-05-11 17:47:33 +08:00
<NavDrawerFooter slot>
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::AiGithubOutlined
style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
/>
</NavDrawerFooter>
2024-05-11 15:53:37 +08:00
</NavDrawer>
2024-05-11 17:47:33 +08:00
</div>
<Layout content_style="padding: 8px 12px 28px; display: flex;" class="doc-content">
2023-10-08 09:28:13 +08:00
<Outlet/>
2023-06-18 19:40:23 +08:00
</Layout>
</Layout>
</Layout>
2023-06-13 12:43:15 +08:00
}
}
2023-10-15 15:43:02 +08:00
2023-11-08 17:27:01 +08:00
pub(crate) struct MenuGroupOption {
pub label: String,
pub children: Vec<MenuItemOption>,
2023-10-15 15:43:02 +08:00
}
impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
2024-05-11 15:53:37 +08:00
let children_len = children.len();
2023-10-15 15:43:02 +08:00
view! {
2024-05-11 15:53:37 +08:00
<Text>
{format!("{label} ({children_len})")}
</Text>
{children.into_iter().map(|v| v.into_view()).collect_view()}
}.into_view()
2023-10-15 15:43:02 +08:00
}
}
2023-11-08 17:27:01 +08:00
pub(crate) struct MenuItemOption {
pub label: String,
pub value: String,
2023-10-15 15:43:02 +08:00
}
impl IntoView for MenuItemOption {
fn into_view(self) -> View {
let Self { label, value } = self;
2024-05-11 15:53:37 +08:00
// key=value label
view! { <NavItem value>{label}</NavItem> }
2023-10-15 15:43:02 +08:00
}
}
2023-11-08 17:27:01 +08:00
pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
2023-10-15 15:43:02 +08:00
vec![
MenuGroupOption {
label: "Common Components".into(),
2023-10-16 15:10:55 +08:00
children: vec![
MenuItemOption {
value: "avatar".into(),
label: "Avatar".into(),
},
MenuItemOption {
value: "button".into(),
label: "Button".into(),
},
2023-10-16 22:04:34 +08:00
MenuItemOption {
value: "card".into(),
label: "Card".into(),
},
MenuItemOption {
value: "collapse".into(),
label: "Collapse".into(),
},
2023-10-17 11:11:39 +08:00
MenuItemOption {
value: "divider".into(),
label: "Divider".into(),
},
2023-10-18 23:49:27 +08:00
MenuItemOption {
value: "icon".into(),
label: "Icon".into(),
},
2023-10-21 17:37:53 +08:00
MenuItemOption {
value: "tag".into(),
label: "Tag".into(),
},
2023-11-20 21:00:13 +08:00
MenuItemOption {
value: "typography".into(),
label: "Typography".into(),
},
2023-10-16 15:10:55 +08:00
],
2023-10-15 15:43:02 +08:00
},
MenuGroupOption {
label: "Data Input Components".into(),
children: vec![
MenuItemOption {
value: "auto-complete".into(),
label: "Auto Complete".into(),
},
MenuItemOption {
value: "color-picker".into(),
label: "Color Picker".into(),
},
MenuItemOption {
value: "checkbox".into(),
label: "Checkbox".into(),
},
MenuItemOption {
value: "date-picker".into(),
label: "Date Picker".into(),
},
2023-10-15 15:43:02 +08:00
MenuItemOption {
value: "input".into(),
label: "Input".into(),
},
2023-10-18 16:12:13 +08:00
MenuItemOption {
value: "input-number".into(),
label: "Input Number".into(),
2023-10-18 16:12:13 +08:00
},
2023-10-19 22:31:14 +08:00
MenuItemOption {
value: "radio".into(),
label: "Radio".into(),
},
2023-10-15 15:43:02 +08:00
MenuItemOption {
value: "select".into(),
label: "Select".into(),
},
MenuItemOption {
value: "slider".into(),
label: "Slider".into(),
},
MenuItemOption {
value: "switch".into(),
label: "Switch".into(),
},
MenuItemOption {
value: "time-picker".into(),
label: "Time Picker".into(),
},
2023-10-22 22:48:17 +08:00
MenuItemOption {
value: "upload".into(),
label: "Upload".into(),
},
2023-10-15 15:43:02 +08:00
],
},
MenuGroupOption {
label: "Data Display Components".into(),
children: vec![
MenuItemOption {
value: "calendar".into(),
label: "Calendar".into(),
},
2023-10-15 15:43:02 +08:00
MenuItemOption {
value: "image".into(),
label: "Image".into(),
},
MenuItemOption {
value: "table".into(),
label: "Table".into(),
},
],
},
MenuGroupOption {
label: "Navigation Components".into(),
children: vec![
MenuItemOption {
value: "anchor".into(),
label: "Anchor".into(),
},
MenuItemOption {
value: "back-top".into(),
label: "Back Top".into(),
},
2023-11-07 17:43:28 +08:00
MenuItemOption {
value: "breadcrumb".into(),
label: "Breadcrumb".into(),
},
2023-11-07 11:02:48 +08:00
MenuItemOption {
value: "loading-bar".into(),
label: "Loading Bar".into(),
},
2023-10-15 15:43:02 +08:00
MenuItemOption {
value: "menu".into(),
label: "Menu".into(),
},
MenuItemOption {
value: "tabs".into(),
label: "Tabs".into(),
},
],
},
MenuGroupOption {
label: "Feedback Components".into(),
children: vec![
MenuItemOption {
value: "alert".into(),
label: "Alert".into(),
},
2023-10-16 20:56:14 +08:00
MenuItemOption {
value: "badge".into(),
label: "Badge".into(),
},
MenuItemOption {
value: "drawer".into(),
label: "Drawer".into(),
},
2023-10-19 17:16:57 +08:00
MenuItemOption {
value: "message".into(),
label: "Message".into(),
},
2023-10-15 15:43:02 +08:00
MenuItemOption {
value: "modal".into(),
label: "Modal".into(),
},
MenuItemOption {
value: "popover".into(),
label: "Popover".into(),
},
2023-11-15 17:50:16 +08:00
MenuItemOption {
value: "progress".into(),
label: "Progress".into(),
},
MenuItemOption {
value: "spinner".into(),
label: "Spinner".into(),
},
MenuItemOption {
value: "skeleton".into(),
label: "Skeleton".into(),
},
2023-10-15 15:43:02 +08:00
],
},
MenuGroupOption {
label: "Layout Components".into(),
children: vec![
2023-11-08 22:35:00 +08:00
MenuItemOption {
value: "layout".into(),
label: "Layout".into(),
},
2023-10-15 15:43:02 +08:00
MenuItemOption {
value: "grid".into(),
label: "Grid".into(),
},
MenuItemOption {
value: "space".into(),
label: "Space".into(),
},
],
},
MenuGroupOption {
label: "Utility Components".into(),
children: vec![MenuItemOption {
value: "scrollbar".into(),
label: "Scrollbar".into(),
}],
},
2023-11-17 23:12:31 +08:00
MenuGroupOption {
label: "Config Components".into(),
children: vec![MenuItemOption {
value: "theme".into(),
label: "Theme".into(),
}],
},
2023-10-15 15:43:02 +08:00
MenuGroupOption {
label: "Mobile Components".into(),
children: vec![
MenuItemOption {
value: "nav-bar".into(),
label: "Nav Bar".into(),
},
MenuItemOption {
value: "tabbar".into(),
label: "Tabbar".into(),
},
MenuItemOption {
value: "toast".into(),
label: "Toast".into(),
},
],
},
]
}