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

feat(leptos-v0.7): demo

Browse source
This commit is contained in:
luoxiao 2024-07-08 14:40:17 +08:00 • committed by luoxiaozero
parent 27e4e7ebfd
commit d1909554c4
14 changed files with 151 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/Trunk.toml
View file

@ -1,7 +1,7 @@
[build]
target = "index.html"
# public_url = "/thaw/"
# release = true
release = true
# filehash = false
[watch]

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

@ -7,26 +7,26 @@ use thaw::*;
#[component]
pub fn SiteHeader() -> impl IntoView {
// let theme = Theme::use_rw_theme();
// let theme_name = Memo::new(move |_| {
// theme.with(|theme| {
// if theme.name == *"light" {
// "Dark".to_string()
// } else {
// "Light".to_string()
// }
// })
// });
// // let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme");
// let change_theme = Callback::new(move |_| {
// if theme_name.get_untracked() == "Light" {
// theme.set(Theme::light());
// // write_theme.set("light".to_string());
// } else {
// theme.set(Theme::dark());
// // write_theme.set("dark".to_string());
// }
// });
let theme = Theme::use_rw_theme();
let theme_name = Memo::new(move |_| {
theme.with(|theme| {
if theme.name == *"light" {
"Dark".to_string()
} else {
"Light".to_string()
}
})
});
// let (_, write_theme, _) = use_local_storage::<String, FromToStringCodec>("theme");
let change_theme = Callback::new(move |_| {
if theme_name.get_untracked() == "Light" {
theme.set(Theme::light());
// write_theme.set("light".to_string());
} else {
theme.set(Theme::dark());
// write_theme.set("dark".to_string());
}
});
let search_value = RwSignal::new(String::new());
let search_all_options = StoredValue::new(gen_search_all_options());
@ -130,86 +130,85 @@ pub fn SiteHeader() -> impl IntoView {
}
"
</Style>
<LayoutHeader attr:class="demo-header">
"123"
// <Space on:click=move |_| {
// let navigate = use_navigate();
// navigate("/", Default::default());
// }>
// <img src="/logo.svg" style="width: 36px"/>
// <div class="demo-name">"Thaw UI"</div>
// </Space>
// <Space>
// <AutoComplete
// value=search_value
// placeholder="Type '/' to search"
// clear_after_select=true
// blur_after_select=true
// on_select=on_search_select
// comp_ref=auto_complete_ref
// >
// <For each=move || search_options.get() key=|option| option.label.clone() let:option>
// <AutoCompleteOption key=option.value>{option.label}</AutoCompleteOption>
// </For>
// <AutoCompletePrefix slot>
// <Icon
// icon=icondata::AiSearchOutlined
// style="font-size: 18px; color: var(--thaw-placeholder-color);"
// />
// </AutoCompletePrefix>
// </AutoComplete>
// <Popover
// placement=PopoverPlacement::BottomEnd
// class="demo-header__menu-popover-mobile"
// >
// <PopoverTrigger slot class="demo-header__menu-mobile">
// <Button
// appearance=ButtonAppearance::Subtle
// icon=icondata::AiUnorderedListOutlined
// attr:style="font-size: 22px; padding: 0px 6px;"
// />
// </PopoverTrigger>
// <div style="height: 70vh; overflow: auto;">// <Menu value=menu_value>
// // <MenuItem key=theme_name label=theme_name />
// // <MenuItem key="github" label="Github" />
// // {
// // use crate::pages::{gen_guide_menu_data, gen_menu_data};
// // vec![
// // gen_guide_menu_data().into_view(),
// // gen_menu_data().into_view(),
// // ]
// // }
// // </Menu>
// </div>
// </Popover>
// <Space class="demo-header__right-btn" align=SpaceAlign::Center>
// <Button
// appearance=ButtonAppearance::Subtle
// on_click=Callback::new(move |_| change_theme.call(()))
// >
// {move || theme_name.get()}
// </Button>
// <SwitchVersion/>
// <Button
// appearance=ButtonAppearance::Subtle
// icon=icondata::BiDiscordAlt
// attr:style="font-size: 22px; padding: 0px 6px;"
// on_click=move |_| {
// _ = window().open_with_url("https://discord.gg/YPxuprzu6M");
// }
// />
<LayoutHeader attr:class=("demo-header", true)>
<Space on:click=move |_| {
let navigate = use_navigate();
navigate("/", Default::default());
}>
<img src="/logo.svg" style="width: 36px"/>
<div class="demo-name">"Thaw UI"</div>
</Space>
<Space>
<AutoComplete
value=search_value
placeholder="Type '/' to search"
clear_after_select=true
blur_after_select=true
on_select=on_search_select
comp_ref=auto_complete_ref
>
<For each=move || search_options.get() key=|option| option.label.clone() let:option>
<AutoCompleteOption key=option.value>{option.label}</AutoCompleteOption>
</For>
<AutoCompletePrefix slot>
<Icon
icon=icondata::AiSearchOutlined
style="font-size: 18px; color: var(--thaw-placeholder-color);"
/>
</AutoCompletePrefix>
</AutoComplete>
<Popover
placement=PopoverPlacement::BottomEnd
class="demo-header__menu-popover-mobile"
>
<PopoverTrigger slot class="demo-header__menu-mobile">
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::AiUnorderedListOutlined
attr:style="font-size: 22px; padding: 0px 6px;"
/>
</PopoverTrigger>
<div style="height: 70vh; overflow: auto;">// <Menu value=menu_value>
// <MenuItem key=theme_name label=theme_name />
// <MenuItem key="github" label="Github" />
// {
// use crate::pages::{gen_guide_menu_data, gen_menu_data};
// vec![
// gen_guide_menu_data().into_view(),
// gen_menu_data().into_view(),
// ]
// }
// </Menu>
</div>
</Popover>
<Space class="demo-header__right-btn" align=SpaceAlign::Center>
<Button
appearance=ButtonAppearance::Subtle
on_click=Callback::new(move |_| change_theme.call(()))
>
{move || theme_name.get()}
</Button>
<SwitchVersion/>
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::BiDiscordAlt
attr:style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("https://discord.gg/YPxuprzu6M");
}
/>
// <Button
// appearance=ButtonAppearance::Subtle
// icon=icondata::AiGithubOutlined
// attr:style="font-size: 22px; padding: 0px 6px;"
// on_click=move |_| {
// _ = window().open_with_url("http://github.com/thaw-ui/thaw");
// }
// />
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::AiGithubOutlined
attr:style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}
/>
// </Space>
// </Space>
</Space>
</Space>
</LayoutHeader>
}

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

@ -77,7 +77,7 @@ pub fn ComponentsPage() -> impl IntoView {
}
</NavDrawer>
</div>
<Layout content_style="padding: 8px 12px 28px; display: flex;" attr:class="doc-content">
<Layout content_style="padding: 8px 12px 28px; display: flex;" attr:class=("doc-content", true)>
<Outlet/>
</Layout>
</Layout>

4
demo_markdown/docs/button/mod.md
View file

@ -138,9 +138,7 @@ view! {
```rust demo
view! {
<Space vertical=true>
<Button block=true>"Primary"</Button>
</Space>
<Button block=true>"Primary"</Button>
}
```

8
demo_markdown/docs/input/mod.md
View file

@ -42,9 +42,7 @@ view! {
let value = RwSignal::new(String::from("o"));
view! {
<Space vertical=true>
<Input value disabled=true/>
</Space>
<Input value disabled=true/>
}
```
@ -62,9 +60,7 @@ view! {
let value = RwSignal::new(String::from("o"));
view! {
<Space vertical=true>
<Input value invalid=true/>
</Space>
<Input value invalid=true/>
}
```

8
demo_markdown/docs/textarea/mod.md
View file

@ -4,9 +4,7 @@
let value = RwSignal::new(String::from("o"));
view! {
<Space vertical=true>
<Textarea value placeholder="Textarea"/>
</Space>
<Textarea value placeholder="Textarea"/>
}
```
@ -16,9 +14,7 @@ view! {
let value = RwSignal::new(String::from("o"));
view! {
<Space vertical=true>
<Textarea value disabled=true/>
</Space>
<Textarea value disabled=true/>
}
```

12
demo_markdown/docs/upload/mod.md
View file

@ -26,13 +26,13 @@ view!{
```rust demo
use send_wrapper::SendWrapper;
let message = use_message();
// let message = use_message();
let custom_request = move |file_list: SendWrapper<FileList>| {
message.create(
format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success,
Default::default(),
);
// message.create(
// format!("Number of uploaded files: {}", file_list.length()),
// MessageVariant::Success,
// Default::default(),
// );
};
view! {

2
thaw/src/auto_complete/auto_complete_option.rs
View file

@ -5,7 +5,7 @@ use leptos::prelude::*;
pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
let value = key.clone();
let auto_complete = AutoCompleteInjection::use_();
let is_selected = Memo::new(move |_| auto_complete.is_selected(&key));
// let is_selected = Memo::new(move |_| auto_complete.is_selected(&key));
view! {
<div

2
thaw/src/lib.rs
View file

@ -23,7 +23,6 @@ mod image;
mod input;
mod layout;
mod loading_bar;
mod message;
mod message_bar;
mod nav;
mod popover;
@ -71,7 +70,6 @@ pub use image::*;
pub use input::*;
pub use layout::*;
pub use loading_bar::*;
pub use message::*;
pub use message_bar::*;
pub use nav::*;
pub use popover::*;

57
thaw/src/space/mod.rs
View file

@ -1,5 +1,5 @@
use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal};
#[derive(Default)]
pub enum SpaceGap {
@ -18,8 +18,8 @@ pub fn Space(
#[prop(optional)] vertical: bool,
#[prop(optional, into)] align: OptionalMaybeSignal<SpaceAlign>,
#[prop(optional, into)] justify: OptionalMaybeSignal<SpaceJustify>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children,
#[prop(optional, into)] class: MaybeProp<String>,
children: ChildrenFragment,
) -> impl IntoView {
mount_style("space", include_str!("./space.css"));
let gap = match gap {
@ -30,27 +30,25 @@ pub fn Space(
SpaceGap::WH(width, height) => format!("{width}px {height}px"),
};
children()
view! {
<div
class=class_list!["thaw-space", class]
style:gap=gap
style:align-items=move || align.get().map(|a| a.as_str()).unwrap_or_default()
style:justify-content=move || justify.get().map(|j| j.as_str()).unwrap_or_default()
style:flex-direction=if vertical { "column" } else { "row" }
>
// view! {
// <div
// class=class_list!["thaw-space", class.map(| c | move || c.get())]
// style:gap=gap
// style:align-items=move || align.get().map(|a| a.as_str())
// style:justify-content=move || justify.get().map(|j| j.as_str())
// style:flex-direction=if vertical { "column" } else { "row" }
// >
{children()
.nodes
.into_iter()
.map(|node| {
view! { <div class="thaw-space__item">{node}</div> }
})
.collect_view()}
// // {children()
// // .nodes
// // .into_iter()
// // .map(|node| {
// // view! { <div class="thaw-space__item">{node}</div> }
// // })
// // .collect::<Vec<_>>()}
// </div>
// }
</div>
}
}
#[derive(Clone)]
@ -104,3 +102,18 @@ impl SpaceJustify {
}
}
}
#[cfg(test)]
mod test {
fn main() {
use leptos::prelude::*;
use super::Space;
view! {
<Space>
<p></p>
<p></p>
</Space>
};
}
}

1
thaw/src/tag/mod.rs
View file

@ -1,4 +1,3 @@
use crate::Icon;
use leptos::{either::Either, ev, prelude::*};
use send_wrapper::SendWrapper;
use thaw_utils::{class_list, mount_style, OptionalProp};

3
thaw_components/src/css_transition/mod.rs
View file

@ -1,6 +1,5 @@
use leptos::{ev, html::ElementType, prelude::*};
use std::{ops::Deref, time::Duration};
use tachys::view::any_view::AnyView;
use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame};
use web_sys::wasm_bindgen::JsCast;
@ -196,7 +195,7 @@ where
};
let name = name.clone();
RenderEffect::new(move |prev: Option<bool>| {
let _ = RenderEffect::new(move |prev: Option<bool>| {
let show = show.get();
let prev = if let Some(prev) = prev {
prev

6
thaw_utils/src/class_list.rs
View file

@ -33,7 +33,7 @@ impl ClassList {
});
}
#[cfg(not(feature = "ssr"))]
RenderEffect::new(move |old_name| {
let _ = RenderEffect::new(move |old_name| {
let name = f();
if let Some(old_name) = old_name {
if old_name != name {
@ -60,7 +60,7 @@ impl ClassList {
}
}
#[cfg(not(feature = "ssr"))]
RenderEffect::new(move |old_name| {
let _ = RenderEffect::new(move |old_name| {
let name = f();
if let Some(old_name) = old_name {
if old_name != name {
@ -99,7 +99,7 @@ impl ClassList {
});
}
#[cfg(not(feature = "ssr"))]
RenderEffect::new(move |old| {
let _ = RenderEffect::new(move |old| {
let name = name.clone();
let new = f();
if old.is_none() {

2
thaw_utils/src/hooks/use_lock_html_scroll.rs
View file

@ -19,7 +19,7 @@ pub fn use_lock_html_scroll(is_lock: MaybeSignal<bool>) {
});
};
RenderEffect::new(move |_| {
let _ = RenderEffect::new(move |_| {
if is_lock.get() {
let head = document().head().expect("head no exist");
let style = document()