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: option component

Browse source
This commit is contained in:
luoxiao 2023-06-09 22:24:39 +08:00
parent 1978bb19d0
commit 4e0b338a65
6 changed files with 49 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Cargo.toml
View file

@ -13,11 +13,17 @@ license = "MIT"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
leptos = { version = "0.3.0", features = ["stable"] }
leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = [
"stable",
] }
stylers = "0.3.1"
web-sys = { version = "0.3.62", features = ["DomRect"] }
leptos_dom = { version = "0.3.0" }
leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined", "AiLeftOutlined"] }
leptos_dom = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71" }
leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "4fe4417", features = [
"AiCloseOutlined",
"AiCheckOutlined",
"AiLeftOutlined",
] }
wasm-bindgen = "0.2.85"
[workspace]

8
examples/basic/Cargo.toml
View file

@ -6,9 +6,11 @@ edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
leptos = { version = "0.3.0", features = ["stable"] }
leptos = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = [
"stable",
] }
melt-ui = { path = "../../" }
leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
leptos_router = { version = "0.3.0", features = ["csr"] }
leptos_icons = { git = "https://github.com/luoxiaozero/leptos-icons.git", rev = "4fe4417", features = ["AiCloseOutlined", "AiCheckOutlined"] }
leptos_router = { git = "https://github.com/leptos-rs/leptos.git", rev = "3d75c71", features = ["csr"] }
regex = "1.8.2"

16
src/button/mod.rs
View file

@ -41,8 +41,8 @@ pub fn Button(
#[prop(optional, into)] type_: MaybeSignal<ButtonType>,
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] icon: Option<IconData>,
#[prop(optional)] children: Option<Children>,
#[prop(optional, into)] icon: Option<Icon>,
#[prop(optional)] children: Option<ChildrenFn>,
) -> impl IntoView {
let theme = use_theme(cx, Theme::light);
let css_vars = create_memo(cx, move |_| {
@ -78,14 +78,12 @@ pub fn Button(
class=("melt-button--round", move || round.get())
style=move || format!("{}{}", css_vars.get(), style.get())
>
<OptionComp value=icon view=move |cx, icon| {
view!{cx,
<OptionComp value=icon bind:icon>
<Icon icon=icon style=icon_style/>
}
}/>
<OptionComp value=children view=|cx, children| {
children(cx).into_view(cx)
}/>
</OptionComp>
<OptionComp value=children bind:children>
{ children(cx) }
</OptionComp>
</button>
}
}

21
src/card/mod.rs
View file

@ -21,20 +21,18 @@ pub fn Card(
cx, class=class_name,
<div class="melt-card__header">
<div class="melt-card__header-content">
<OptionComp value=header view=|cx, header| {
header(cx).into_view(cx)
}>
<OptionComp value=header bind:header>
<Fallback slot>
{ title.get() }
</Fallback>
{ header(cx) }
</OptionComp>
</div>
<OptionComp value=header_extra view=move |cx, header_extra| {
view! {
cx, class=class_name,
<OptionComp value=header_extra bind:header_extra>
<div class="melt-card__header-extra">
{ header_extra(cx) }
</div>
}
}/>
</OptionComp>
</div>
}.into()
} else {
@ -44,14 +42,11 @@ pub fn Card(
<div class="melt-card__content">
{ children(cx) }
</div>
<OptionComp value=footer view=move |cx, footer| {
view! {
cx, class=class_name,
<OptionComp value=footer bind:footer>
<div class="melt-card__footer">
{ footer(cx) }
</div>
}
}/>
</OptionComp>
</div>
}
}

15
src/components/option_comp.rs
View file

@ -1,20 +1,21 @@
use leptos::*;
use super::Fallback;
#[component]
pub fn OptionComp<T, VF, IV>(
pub fn OptionComp<T, CF, IV>(
cx: Scope,
value: Option<T>,
view: VF,
#[prop(optional)] children: Option<Children>,
children: CF,
#[prop(optional)] fallback: Option<Fallback>,
) -> impl IntoView
where
VF: FnOnce(Scope, T) -> IV + 'static,
CF: Fn(Scope, T) -> IV + 'static,
IV: IntoView,
{
if let Some(value) = value {
view(cx, value).into_view(cx)
} else if let Some(children) = children {
children(cx).into_view(cx)
children(cx, value).into_view(cx)
} else if let Some(fallback) = fallback {
(fallback.children)(cx).into_view(cx)
} else {
().into_view(cx)
}

8
src/mobile/tabbar/tabbar_item.rs
View file

@ -9,7 +9,7 @@ use leptos_icons::*;
pub fn TabbarItem(
cx: Scope,
#[prop(into)] name: MaybeSignal<&'static str>,
#[prop(optional, into)] icon: Option<IconData>,
#[prop(optional, into)] icon: Option<Icon>,
children: Children,
) -> impl IntoView {
let class_name = mount_style("tabbar-item", || style_sheet_str!("./src/mobile/tabbar/tabbar-item.css"));
@ -29,11 +29,9 @@ pub fn TabbarItem(
view! {cx, class=class_name,
<div class="melt-tabbar-item" class=("melt-tabbar-item--selected", move || tabbar.get().value == name.get()) on:click=onclick_select style=move || css_vars.get()>
<OptionComp value=icon view=move |cx, icon| {
view!{cx,
<OptionComp value=icon bind:icon>
<Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
}
}/>
</OptionComp>
<div class="melt-tabbar-item__content">
{ children(cx) }
</div>