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

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

Browse source 
Feat/demo
This commit is contained in:
luoxiaozero 2023-11-08 21:56:17 +08:00 • committed by GitHub
commit b1753545f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 322 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/Cargo.toml
View file

@ -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"

1
demo/gh-pages

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

4
demo/src/app.rs
View file

@ -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/>

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

@ -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
}

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

@ -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 mut pathname = loaction.pathname.get_untracked();
let loaction = use_location();
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| {
let selected = selected.get();
if value.is_some() {
navigate(&format!("/components/{selected}"), Default::default());
_ = select_name.watch(move |name| {
let pathname = loaction.pathname.get_untracked();
if !pathname.starts_with(&format!("/thaw/components/{name}")) {
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 {
label: String,
children: Vec<MenuItemOption>,
pub(crate) struct MenuGroupOption {
pub label: String,
pub children: Vec<MenuItemOption>,
}
impl IntoView for MenuGroupOption {
@ -61,9 +62,9 @@ impl IntoView for MenuGroupOption {
}
}
struct MenuItemOption {
label: String,
value: String,
pub(crate) struct MenuItemOption {
pub label: 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(),

22
demo/src/pages/guide/installation.rs Normal file
View file

@ -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>
}
}

97
demo/src/pages/guide/mod.rs Normal file
View file

@ -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(),
},
],
}]
}

58
demo/src/pages/guide/usage.rs Normal file
View file

@ -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>
}
}

2
demo/src/pages/home.rs
View file

@ -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

2
demo/src/pages/mod.rs
View file

@ -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::*;

1
src/auto_complete/auto-complete.css
View file

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

18
src/auto_complete/mod.rs
View file

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