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] [build]
target = "index.html" target = "index.html"
# public_url = "/thaw/" # public_url = "/thaw/"
# release = true release = true
# filehash = false # filehash = false
[watch] [watch]

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

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

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

@ -77,7 +77,7 @@ pub fn ComponentsPage() -> impl IntoView {
} }
</NavDrawer> </NavDrawer>
</div> </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/> <Outlet/>
</Layout> </Layout>
</Layout> </Layout>

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

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

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

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

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

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

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

@ -26,13 +26,13 @@ view!{
```rust demo ```rust demo
use send_wrapper::SendWrapper; use send_wrapper::SendWrapper;
let message = use_message(); // let message = use_message();
let custom_request = move |file_list: SendWrapper<FileList>| { let custom_request = move |file_list: SendWrapper<FileList>| {
message.create( // message.create(
format!("Number of uploaded files: {}", file_list.length()), // format!("Number of uploaded files: {}", file_list.length()),
MessageVariant::Success, // MessageVariant::Success,
Default::default(), // Default::default(),
); // );
}; };
view! { 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 { pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
let value = key.clone(); let value = key.clone();
let auto_complete = AutoCompleteInjection::use_(); 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! { view! {
<div <div

2
thaw/src/lib.rs
View file

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

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

@ -1,5 +1,5 @@
use leptos::prelude::*; use leptos::prelude::*;
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp}; use thaw_utils::{class_list, mount_style, OptionalMaybeSignal};
#[derive(Default)] #[derive(Default)]
pub enum SpaceGap { pub enum SpaceGap {
@ -18,8 +18,8 @@ pub fn Space(
#[prop(optional)] vertical: bool, #[prop(optional)] vertical: bool,
#[prop(optional, into)] align: OptionalMaybeSignal<SpaceAlign>, #[prop(optional, into)] align: OptionalMaybeSignal<SpaceAlign>,
#[prop(optional, into)] justify: OptionalMaybeSignal<SpaceJustify>, #[prop(optional, into)] justify: OptionalMaybeSignal<SpaceJustify>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>, #[prop(optional, into)] class: MaybeProp<String>,
children: Children, children: ChildrenFragment,
) -> impl IntoView { ) -> impl IntoView {
mount_style("space", include_str!("./space.css")); mount_style("space", include_str!("./space.css"));
let gap = match gap { let gap = match gap {
@ -30,27 +30,25 @@ pub fn Space(
SpaceGap::WH(width, height) => format!("{width}px {height}px"), 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! { {children()
// <div .nodes
// class=class_list!["thaw-space", class.map(| c | move || c.get())] .into_iter()
// style:gap=gap .map(|node| {
// style:align-items=move || align.get().map(|a| a.as_str()) view! { <div class="thaw-space__item">{node}</div> }
// style:justify-content=move || justify.get().map(|j| j.as_str()) })
// style:flex-direction=if vertical { "column" } else { "row" } .collect_view()}
// >
// // {children() </div>
// // .nodes }
// // .into_iter()
// // .map(|node| {
// // view! { <div class="thaw-space__item">{node}</div> }
// // })
// // .collect::<Vec<_>>()}
// </div>
// }
} }
#[derive(Clone)] #[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 leptos::{either::Either, ev, prelude::*};
use send_wrapper::SendWrapper; use send_wrapper::SendWrapper;
use thaw_utils::{class_list, mount_style, OptionalProp}; 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 leptos::{ev, html::ElementType, prelude::*};
use std::{ops::Deref, time::Duration}; use std::{ops::Deref, time::Duration};
use tachys::view::any_view::AnyView;
use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame}; use thaw_utils::{add_event_listener, EventListenerHandle, NextFrame};
use web_sys::wasm_bindgen::JsCast; use web_sys::wasm_bindgen::JsCast;
@ -196,7 +195,7 @@ where
}; };
let name = name.clone(); let name = name.clone();
RenderEffect::new(move |prev: Option<bool>| { let _ = RenderEffect::new(move |prev: Option<bool>| {
let show = show.get(); let show = show.get();
let prev = if let Some(prev) = prev { let prev = if let Some(prev) = prev {
prev prev

6
thaw_utils/src/class_list.rs
View file

@ -33,7 +33,7 @@ impl ClassList {
}); });
} }
#[cfg(not(feature = "ssr"))] #[cfg(not(feature = "ssr"))]
RenderEffect::new(move |old_name| { let _ = RenderEffect::new(move |old_name| {
let name = f(); let name = f();
if let Some(old_name) = old_name { if let Some(old_name) = old_name {
if old_name != name { if old_name != name {
@ -60,7 +60,7 @@ impl ClassList {
} }
} }
#[cfg(not(feature = "ssr"))] #[cfg(not(feature = "ssr"))]
RenderEffect::new(move |old_name| { let _ = RenderEffect::new(move |old_name| {
let name = f(); let name = f();
if let Some(old_name) = old_name { if let Some(old_name) = old_name {
if old_name != name { if old_name != name {
@ -99,7 +99,7 @@ impl ClassList {
}); });
} }
#[cfg(not(feature = "ssr"))] #[cfg(not(feature = "ssr"))]
RenderEffect::new(move |old| { let _ = RenderEffect::new(move |old| {
let name = name.clone(); let name = name.clone();
let new = f(); let new = f();
if old.is_none() { 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() { if is_lock.get() {
let head = document().head().expect("head no exist"); let head = document().head().expect("head no exist");
let style = document() let style = document()