adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: leptosfmt

Browse source
This commit is contained in:
luoxiao 2023-10-08 09:28:13 +08:00
parent 14b05d6d57
commit a355971d58
46 changed files with 491 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
gh-pages/src/app.rs
View file

@ -6,26 +6,26 @@ use leptos_router::*;
pub fn App() -> impl IntoView {
view! {
<Router base="/melt-ui">
<Routes base="/melt-ui".to_string() >
<Route path="/" view=Home />
<Routes base="/melt-ui".to_string()>
<Route path="/" view=Home/>
<Route path="/components" view=ComponentsPage>
<Route path="/menu" view=MenuPage />
<Route path="/slider" view=SliderPage />
<Route path="/tabbar" view=TabbarPage />
<Route path="/nav-bar" view=NavBarPage />
<Route path="/input" view=InputPage />
<Route path="/image" view=ImagePage />
<Route path="/modal" view=ModalPage />
<Route path="/button" view=ButtonPage />
<Route path="/checkbox" view=CheckboxPage />
<Route path="/toast" view=ToastPage />
<Route path="/tabs" view=TabsPage />
<Route path="/select" view=SelectPage />
<Route path="/space" view=SpacePage />
<Route path="/menu" view=MenuPage/>
<Route path="/slider" view=SliderPage/>
<Route path="/tabbar" view=TabbarPage/>
<Route path="/nav-bar" view=NavBarPage/>
<Route path="/input" view=InputPage/>
<Route path="/image" view=ImagePage/>
<Route path="/modal" view=ModalPage/>
<Route path="/button" view=ButtonPage/>
<Route path="/checkbox" view=CheckboxPage/>
<Route path="/toast" view=ToastPage/>
<Route path="/tabs" view=TabsPage/>
<Route path="/select" view=SelectPage/>
<Route path="/space" view=SpacePage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage />
<Route path="/mobile/nav-bar" view=NavBarDemoPage />
<Route path="/mobile/toast" view=ToastDemoPage />
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>
<Route path="/mobile/toast" view=ToastDemoPage/>
</Routes>
</Router>
}

4
gh-pages/src/components/demo.rs
View file

@ -13,12 +13,12 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
mount_style("demo", prisms::prism_css!());
view! {
<div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
{ children() }
{children()}
</div>
<div style="font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; background-color: #f9fafb; border: 1px solid #e5e8eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-width: 0;">
<Code>
<pre style="margin: 0" inner_html=demo_code.html>
{ (demo_code.children)() }
{(demo_code.children)()}
</pre>
</Code>
</div>

20
gh-pages/src/components/site_header.rs
View file

@ -5,18 +5,24 @@ use melt_ui::*;
#[component]
pub fn SiteHeader() -> impl IntoView {
view! {
<LayoutHeader
style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e5e8eb"
>
<span style="cursor: pointer" on:click=move |_| {
<LayoutHeader style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #e5e8eb">
<span
style="cursor: pointer"
on:click=move |_| {
let navigate = use_navigate();
navigate("/", Default::default());
}>
}
>
"Melt UI"
</span>
<Button type_=ButtonType::TEXT on:click=move |_| {
<Button
type_=ButtonType::TEXT
on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
}>
}
>
"Github"
</Button>
</LayoutHeader>

96
gh-pages/src/pages/button/mod.rs
View file

@ -10,20 +10,15 @@ pub fn ButtonPage() -> impl IntoView {
<h1>"Button"</h1>
<Demo>
<Space>
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
<Button type_=ButtonType::PRIMARY>"PRIMARY"</Button>
<Button type_=ButtonType::SOLID>"SOLID"</Button>
<Button type_=ButtonType::TEXT>"TEXT"</Button>
<Button type_=ButtonType::LINK>"LINK"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Button type_=ButtonType::PRIMARY>
"PRIMARY"
</Button>
@ -36,27 +31,26 @@ pub fn ButtonPage() -> impl IntoView {
<Button type_=ButtonType::LINK>
"LINK"
</Button>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
<h3>"color"</h3>
<Demo>
<Space>
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>
<Button color=ButtonColor::SUCCESS>
"SUCCESS Color"
</Button>
<Button color=ButtonColor::WARNING>
"WARNING Color"
</Button>
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
<Button color=ButtonColor::PRIMARY>"PRIMARY Color"</Button>
<Button color=ButtonColor::SUCCESS>"SUCCESS Color"</Button>
<Button color=ButtonColor::WARNING>"WARNING Color"</Button>
<Button color=ButtonColor::ERROR>"ERROR Color"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
</Button>
@ -69,7 +63,11 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
@ -79,30 +77,47 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
<Button
color=ButtonColor::ERROR
icon=icondata::AiIcon::AiCloseOutlined
round=true
/>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
<LoadingButton />
<LoadingButton/>
<h3>"style"</h3>
<Demo>
<Space>
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
@ -133,7 +148,10 @@ pub fn LoadingButton() -> impl IntoView {
"Click Me"
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let loading = create_rw_signal(false);
let on_click = move |_| {
loading.set(true);
@ -154,7 +172,11 @@ pub fn LoadingButton() -> impl IntoView {
</Button>
</Space>
}
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

36
gh-pages/src/pages/checkbox/mod.rs
View file

@ -13,10 +13,11 @@ pub fn CheckboxPage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;">
<h1>"Checkbox"</h1>
<Demo>
<Checkbox checked>
"Click"
</Checkbox>
<DemoCode slot html=highlight_str!(r#"
<Checkbox checked>"Click"</Checkbox>
<DemoCode
slot
html=highlight_str!(
r#"
let checked = create_rw_signal(false);
view! {
@ -24,21 +25,26 @@ pub fn CheckboxPage() -> impl IntoView {
"Click"
</Checkbox>
}
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
<h3>"group"</h3>
<Demo>
<CheckboxGroup value>
<CheckboxItem label="apple" key="a" />
<CheckboxItem label="b" key="b" />
<CheckboxItem label="c" key="c" />
<CheckboxItem label="apple" key="a"/>
<CheckboxItem label="b" key="b"/>
<CheckboxItem label="c" key="c"/>
</CheckboxGroup>
<div style="margin-top: 1rem">
"value: " { move || format!("{:?}", value.get()) }
</div>
<DemoCode slot html=highlight_str!(r#"
<div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div>
<DemoCode
slot
html=highlight_str!(
r#"
let value = create_rw_signal(HashSet::new());
view! {
@ -48,7 +54,11 @@ pub fn CheckboxPage() -> impl IntoView {
<CheckboxItem label="c" key="c" />
</CheckboxGroup>
}
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

30
gh-pages/src/pages/components.rs
View file

@ -32,31 +32,31 @@ pub fn ComponentsPage() -> impl IntoView {
});
view! {
<Layout position=LayoutPosition::ABSOLUTE>
<SiteHeader />
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::ABSOLUTE style="top: 54px;">
<LayoutSider>
<Menu selected>
<MenuGroup label="Common Components">
<MenuItem key="menu" label="Menu" />
<MenuItem key="slider" label="Slider" />
<MenuItem key="input" label="Input" />
<MenuItem key="image" label="Image" />
<MenuItem key="modal" label="Modal" />
<MenuItem key="button" label="Button" />
<MenuItem key="checkbox" label="Checkbox" />
<MenuItem key="tabs" label="Tabs" />
<MenuItem key="select" label="Select" />
<MenuItem key="space" label="Space" />
<MenuItem key="menu" label="Menu"/>
<MenuItem key="slider" label="Slider"/>
<MenuItem key="input" label="Input"/>
<MenuItem key="image" label="Image"/>
<MenuItem key="modal" label="Modal"/>
<MenuItem key="button" label="Button"/>
<MenuItem key="checkbox" label="Checkbox"/>
<MenuItem key="tabs" label="Tabs"/>
<MenuItem key="select" label="Select"/>
<MenuItem key="space" label="Space"/>
</MenuGroup>
<MenuGroup label="Mobile Components">
<MenuItem key="tabbar" label="Tabbar" />
<MenuItem key="nav-bar" label="Nav Bar" />
<MenuItem key="toast" label="Toast" />
<MenuItem key="tabbar" label="Tabbar"/>
<MenuItem key="nav-bar" label="Nav Bar"/>
<MenuItem key="toast" label="Toast"/>
</MenuGroup>
</Menu>
</LayoutSider>
<Layout style="padding: 8px 12px 28px; overflow-y: scroll;">
<Outlet />
<Outlet/>
</Layout>
</Layout>
</Layout>

21
gh-pages/src/pages/home.rs
View file

@ -10,21 +10,24 @@ pub fn Home() -> impl IntoView {
navigate(path, Default::default());
}
view! {
<Layout position=LayoutPosition::ABSOLUTE style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
<h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">
"Melt UI"
</h1>
<Layout
position=LayoutPosition::ABSOLUTE
style="display: flex; align-items: center; justify-content: center; flex-direction: column;"
>
<h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Melt UI"</h1>
<p>"An easy to use leptos component library"</p>
<Space>
<Button on_click=move |_| {
let navigate = use_navigate();
navigate("/components/menu", Default::default());
}>
"Read the docs"
</Button>
<Button type_=ButtonType::TEXT on:click=move |_| {
}>"Read the docs"</Button>
<Button
type_=ButtonType::TEXT
on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
}>
}
>
"Github"
</Button>
</Space>

11
gh-pages/src/pages/image/mod.rs
View file

@ -11,10 +11,17 @@ pub fn ImagePage() -> impl IntoView {
<Demo>
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
<Image width="200px" height="200px"/>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

13
gh-pages/src/pages/input/mod.rs
View file

@ -11,13 +11,20 @@ pub fn InputPage() -> impl IntoView {
<h1>"Input"</h1>
<Demo>
<Input value/>
<Input value type_=InputType::PASSWORD />
<DemoCode slot html=highlight_str!(r#"
<Input value type_=InputType::PASSWORD/>
<DemoCode
slot
html=highlight_str!(
r#"
let value = create_rw_signal(String::from("o"));
<Input value/>
<Input value type_=InputType::PASSWORD />
"#, "rust")>
"#,
"rust"
)
>
""
""
</DemoCode>

11
gh-pages/src/pages/menu/mod.rs
View file

@ -14,14 +14,21 @@ pub fn MenuPage() -> impl IntoView {
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let selected = create_rw_signal(String::from("o"));
<Menu selected>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

5
gh-pages/src/pages/mobile.rs
View file

@ -4,7 +4,10 @@ use leptos::*;
pub fn MobilePage(path: &'static str) -> impl IntoView {
view! {
<div style="height: 100vh; width: 400px; text-align: center">
<iframe src=path style="margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; border: 1px solid #eee; box-shadow: #ebedf0 0 4px 12px;"/>
<iframe
src=path
style="margin-top: 5vh; width: 350px; height: 680px; border-radius: 16px; border: 1px solid #eee; box-shadow: #ebedf0 0 4px 12px;"
></iframe>
</div>
}
}

15
gh-pages/src/pages/modal/mod.rs
View file

@ -10,13 +10,14 @@ pub fn ModalPage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;">
<h1>"Modal"</h1>
<Demo>
<Button on:click=move |_| show.set(true)>
"Open Modal"
</Button>
<Button on:click=move |_| show.set(true)>"Open Modal"</Button>
<Modal title="title" show>
"hello"
</Modal>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let show = create_rw_signal(false);
<Button on:click=move |_| show.set(true)>
@ -25,7 +26,11 @@ pub fn ModalPage() -> impl IntoView {
<Modal title="title" show>
"hello"
</Modal>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

26
gh-pages/src/pages/nav_bar/mod.rs
View file

@ -14,7 +14,10 @@ pub fn NavBarPage() -> impl IntoView {
<h1>"Navbar"</h1>
<Demo>
""
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<NavBar
title="Home"
left_arrow=true
@ -23,13 +26,17 @@ pub fn NavBarPage() -> impl IntoView {
click_left=click_left
click_right=click_right
/>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/nav-bar" />
<MobilePage path="/melt-ui?path=/mobile/nav-bar"/>
</div>
</div>
}
@ -45,10 +52,15 @@ pub fn NavBarDemoPage() -> impl IntoView {
view! {
<div style="height: 100vh; background: #f5f5f5">
<NavBar title="Home" left_arrow=true left_text="back" right_text="add" click_left=click_left click_right=click_right/>
<div style="padding-top: 50px">
{ move || click_text.get() }
</div>
<NavBar
title="Home"
left_arrow=true
left_text="back"
right_text="add"
click_left=click_left
click_right=click_right
/>
<div style="padding-top: 50px">{move || click_text.get()}</div>
</div>
}
}

11
gh-pages/src/pages/select/mod.rs
View file

@ -16,7 +16,10 @@ pub fn SelectPage() -> impl IntoView {
<h1>"Select"</h1>
<Demo>
<Select value=selected_value options/>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let selected_value = create_rw_signal(Some(String::from("apple")));
let options = vec![SelectOption {
label: String::from("apple"),
@ -24,7 +27,11 @@ pub fn SelectPage() -> impl IntoView {
}];
<Select value=selected_value options/>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

11
gh-pages/src/pages/slider/mod.rs
View file

@ -12,11 +12,18 @@ pub fn SliderPage() -> impl IntoView {
<h1>"Slider"</h1>
<Demo>
<Slider value/>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let value = create_rw_signal(0.0);
<Slider value/>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

33
gh-pages/src/pages/space/mod.rs
View file

@ -14,13 +14,20 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Space>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
@ -31,13 +38,20 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Space vertical=true>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
@ -53,7 +67,10 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
<Space gap=SpaceGap::LARGE>
<Button>"1"</Button>
<Button>"2"</Button>
@ -64,7 +81,11 @@ pub fn SpacePage() -> impl IntoView {
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

24
gh-pages/src/pages/tabbar/mod.rs
View file

@ -14,7 +14,10 @@ pub fn TabbarPage() -> impl IntoView {
<h1>"Tabbar"</h1>
<Demo>
""
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let selected = create_rw_signal(String::from("o"));
<Tabbar selected>
@ -28,13 +31,17 @@ pub fn TabbarPage() -> impl IntoView {
"or"
</TabbarItem>
</Tabbar>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/tabbar" />
<MobilePage path="/melt-ui?path=/mobile/tabbar"/>
</div>
</div>
}
@ -45,14 +52,9 @@ pub fn TabbarDemoPage() -> impl IntoView {
let selected = create_rw_signal(String::from("o"));
view! {
<div style="height: 100vh; background: #f5f5f5">
{ move || selected.get() }
<Tabbar selected>
<TabbarItem name="a">
"and"
</TabbarItem>
<TabbarItem name="i">
"if"
</TabbarItem>
{move || selected.get()} <Tabbar selected>
<TabbarItem name="a">"and"</TabbarItem>
<TabbarItem name="i">"if"</TabbarItem>
<TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
"or"
</TabbarItem>

11
gh-pages/src/pages/tabs/mod.rs
View file

@ -18,7 +18,10 @@ pub fn TabsPage() -> impl IntoView {
"pear"
</Tab>
</Tabs>
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let active_key = create_rw_signal("apple");
<Tabs active_key>
<Tab key="apple" label="Apple">
@ -28,7 +31,11 @@ pub fn TabsPage() -> impl IntoView {
"pear"
</Tab>
</Tabs>
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>

13
gh-pages/src/pages/toast/mod.rs
View file

@ -16,7 +16,10 @@ pub fn ToastPage() -> impl IntoView {
<h1>"Toast"</h1>
<Demo>
""
<DemoCode slot html=highlight_str!(r#"
<DemoCode
slot
html=highlight_str!(
r#"
let count = create_rw_signal(0u32);
let onclick = move |_| {
show_toast(ToastOptions {
@ -25,13 +28,17 @@ pub fn ToastPage() -> impl IntoView {
});
count.set(count.get_untracked() + 1);
};
"#, "rust")>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
<div>
<MobilePage path="/melt-ui?path=/mobile/toast" />
<MobilePage path="/melt-ui?path=/mobile/toast"/>
</div>
</div>
}

23
src/button/mod.rs
View file

@ -120,23 +120,26 @@ pub fn Button(
style=move || format!("{}{}", css_vars.get(), style.get())
on:click=on_click
>
{
move || {
{move || {
if loading.get() {
view! {
<Icon icon=Icon::from(AiIcon::AiLoadingOutlined) style=format!("animation: meltLoadingCircle 1s infinite linear;{icon_style}")/>
}.into()
<Icon
icon=Icon::from(AiIcon::AiLoadingOutlined)
style=format!(
"animation: meltLoadingCircle 1s infinite linear;{icon_style}"
)
/>
}
.into()
} else if let Some(icon) = icon {
view! {
<Icon icon=icon style=icon_style/>
}.into()
view! { <Icon icon=icon style=icon_style/> }.into()
} else {
None
}
}
}
}}
<OptionComp value=children let:children>
{ children() }
{children()}
</OptionComp>
</button>
}

22
src/card/mod.rs
View file

@ -36,34 +36,26 @@ pub fn Card(
view! {
<div class="melt-card">
<If cond=MaybeSignal::derive( move || is_header || !title.get().is_empty()) >
<If cond=MaybeSignal::derive(move || is_header || !title.get().is_empty())>
<Then slot>
<div class="melt-card__header">
<div class="melt-card__header-content">
<OptionComp value=header.clone() let:header>
<Fallback slot>
{ title.get() }
</Fallback>
{ (header.children)() }
<Fallback slot>{title.get()}</Fallback>
{(header.children)()}
</OptionComp>
</div>
<OptionComp value=header_extra.clone() let:header_extra>
<div class="melt-card__header-extra">
{ (header_extra.children)() }
</div>
<div class="melt-card__header-extra">{(header_extra.children)()}</div>
</OptionComp>
</div>
</Then>
</If>
<div class="melt-card__content">
{ children() }
</div>
<div class="melt-card__content">{children()}</div>
<OptionComp value=card_footer let:footer>
<If cond=footer.if_ >
<If cond=footer.if_>
<Then slot>
<div class="melt-card__footer">
{ (footer.children)() }
</div>
<div class="melt-card__footer">{(footer.children)()}</div>
</Then>
</If>
</OptionComp>

6
src/checkbox/checkbox_item.rs
View file

@ -32,9 +32,5 @@ pub fn CheckboxItem(
item_key.get_value()
};
view! {
<Checkbox checked>
{ label }
</Checkbox>
}
view! { <Checkbox checked>{label}</Checkbox> }
}

14
src/checkbox/mod.rs
View file

@ -30,9 +30,13 @@ pub fn Checkbox(
});
view! {
<div class:melt-checkbox=true class=("melt-checkbox--checked", move || checked.get()) style=move || css_vars.get()
on:click=move |_| checked.set(!checked.get_untracked())>
<input class="melt-checkbox__input" type="checkbox" />
<div
class:melt-checkbox=true
class=("melt-checkbox--checked", move || checked.get())
style=move || css_vars.get()
on:click=move |_| checked.set(!checked.get_untracked())
>
<input class="melt-checkbox__input" type="checkbox"/>
<div class="melt-checkbox__dot">
<If cond=checked.clone_into()>
<Then slot>
@ -40,9 +44,7 @@ pub fn Checkbox(
</Then>
</If>
</div>
<div class="melt-checkbox__label">
{ children() }
</div>
<div class="melt-checkbox__label">{children()}</div>
</div>
}
}

6
src/code/mod.rs
View file

@ -2,9 +2,5 @@ use leptos::*;
#[component]
pub fn Code(children: Children) -> impl IntoView {
view! {
<code class="melt-code">
{ children() }
</code>
}
view! { <code class="melt-code">{children()}</code> }
}

8
src/image/mod.rs
View file

@ -30,7 +30,11 @@ pub fn Image(
style
};
view! {
<img src=move || src.get() alt=move || alt.get() style=style object_fit=move || object_fit.get()/>
<img
src=move || src.get()
alt=move || alt.get()
style=style
object_fit=move || object_fit.get()
/>
}
}

7
src/input/mod.rs
View file

@ -49,7 +49,12 @@ pub fn Input(
});
view! {
<div class:melt-input=true style=move || css_vars.get()>
<input type=move || type_.get().as_str() prop:value=move || value.get() ref=input_ref class="melt-input__input-el"/>
<input
type=move || type_.get().as_str()
prop:value=move || value.get()
ref=input_ref
class="melt-input__input-el"
/>
</div>
}
}

2
src/layout/layout_header.rs
View file

@ -7,7 +7,7 @@ pub fn LayoutHeader(
) -> impl IntoView {
view! {
<div class="melt-layout-header" style=move || style.get()>
{ children() }
{children()}
</div>
}
}

2
src/layout/layout_sider.rs
View file

@ -9,7 +9,7 @@ pub fn LayoutSider(
mount_style("layout-sider", include_str!("./layout-sider.css"));
view! {
<div class="melt-layout-sider" style=move || style.get()>
{ children() }
{children()}
</div>
}
}

8
src/layout/mod.rs
View file

@ -39,8 +39,12 @@ pub fn Layout(
style
});
view! {
<div class="melt-layout" class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE) style=move || style.get()>
{ children() }
<div
class="melt-layout"
class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE)
style=move || style.get()
>
{children()}
</div>
}
}

4
src/menu/menu_group.rs
View file

@ -14,8 +14,8 @@ pub fn MenuGroup(label: &'static str, children: Children) -> impl IntoView {
});
view! {
<div class="melt-menu-group" style=move || css_vars.get()>
{ label }
{label}
</div>
{ children() }
{children()}
}
}

9
src/menu/menu_item.rs
View file

@ -29,8 +29,13 @@ pub fn MenuItem(
});
view! {
<div class="melt-menu-item">
<div class="melt-menu-item__content" class=("melt-menu-item__content--selected", move || menu.get().value == key.get()) on:click=onclick_select style=move || css_vars.get()>
{ move || label.get() }
<div
class="melt-menu-item__content"
class=("melt-menu-item__content--selected", move || menu.get().value == key.get())
on:click=onclick_select
style=move || css_vars.get()
>
{move || label.get()}
</div>
</div>
}

6
src/menu/mod.rs
View file

@ -30,11 +30,7 @@ pub fn Menu(
}
});
provide_context(menu_injection_key);
view! {
<div class="melt-menu">
{ children() }
</div>
}
view! { <div class="melt-menu">{children()}</div> }
}
#[derive(Clone)]

12
src/mobile/nav_bar/mod.rs
View file

@ -26,7 +26,7 @@ pub fn NavBar(
view! {
<div class="melt-nav-bar">
<If cond=MaybeSignal::derive( move || left_arrow.get() || !left_text.get().is_empty())>
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__left" on:click=onclick_left>
<If cond=left_arrow>
@ -34,17 +34,15 @@ pub fn NavBar(
<Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
</Then>
</If>
{ left_text.get() }
{left_text.get()}
</div>
</Then>
</If>
<div class="melt-nav-bar__center">
{ move || title.get() }
</div>
<If cond=MaybeSignal::derive( move || !right_text.get().is_empty())>
<div class="melt-nav-bar__center">{move || title.get()}</div>
<If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
<Then slot>
<div class="melt-nav-bar__right" on:click=onclick_right>
{ right_text.get() }
{right_text.get()}
</div>
</Then>
</If>

6
src/mobile/tabbar/mod.rs
View file

@ -26,11 +26,7 @@ pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> i
}
});
provide_context(tabbar_injection_key);
view! {
<div class="melt-tabbar">
{ children() }
</div>
}
view! { <div class="melt-tabbar">{children()}</div> }
}
#[derive(Clone)]

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

@ -25,13 +25,16 @@ pub fn TabbarItem(
});
view! {
<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()>
<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 let:icon>
<Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
</OptionComp>
<div class="melt-tabbar-item__content">
{ children() }
</div>
<div class="melt-tabbar-item__content">{children()}</div>
</div>
}
}

6
src/mobile/toast/mod.rs
View file

@ -12,11 +12,7 @@ pub fn show_toast(options: ToastOptions) {
mount_style("toast", include_str!("./toast.css"));
let parent = Element::from(document().body().expect("body element not to exist"));
let children = view! {
<div class="melt-toast">
{ options.message }
</div>
};
let children = view! { <div class="melt-toast">{options.message}</div> };
let node = children.into_view();
#[cfg(all(target_arch = "wasm32"))]

13
src/modal/mod.rs
View file

@ -21,24 +21,25 @@ pub fn Modal(
view! {
<Teleport>
<div class="melt-modal-container" style=move || if show.get() { "" } else { "display: none" }>
<div
class="melt-modal-container"
style=move || if show.get() { "" } else { "display: none" }
>
<div class="melt-modal-mask"></div>
<div class="melt-modal-body">
<Card>
<CardHeader slot>
<span class="melt-model-title">
{ title.get() }
</span>
<span class="melt-model-title">{title.get()}</span>
</CardHeader>
<CardHeaderExtra slot>
<span style="cursor: pointer;" on:click=move |_| show.set(false)>
<Icon icon=Icon::from(AiIcon::AiCloseOutlined)/>
</span>
</CardHeaderExtra>
{ children() }
{children()}
<CardFooter slot if_=modal_footer.is_some()>
<OptionComp value=modal_footer.as_ref() let:footer>
{ (footer.children)() }
{(footer.children)()}
</OptionComp>
</CardFooter>
</Card>

12
src/progress/mod.rs
View file

@ -12,10 +12,8 @@ pub fn Progress(
view! {
<div class="melt-progress">
<span class="melt-progress__tip-left">
<If cond=MaybeSignal::derive( move || !left_tip.get().is_empty())>
<Then slot>
{ left_tip.get() }
</Then>
<If cond=MaybeSignal::derive(move || !left_tip.get().is_empty())>
<Then slot>{left_tip.get()}</Then>
</If>
</span>
<span class="melt-progress__progress">
@ -24,10 +22,8 @@ pub fn Progress(
</span>
</span>
<span class="melt-progress__tip-right">
<If cond=MaybeSignal::derive( move || !right_tip.get().is_empty())>
<Then slot>
{ right_tip.get() }
</Then>
<If cond=MaybeSignal::derive(move || !right_tip.get().is_empty())>
<Then slot>{right_tip.get()}</Then>
</If>
</span>
</div>

39
src/select/mod.rs
View file

@ -85,30 +85,49 @@ where
});
view! {
<div class="melt-select" ref=trigger_ref on:click=show_popover style=move || css_vars.get()>
{
move || select_option_label.get()
}
{move || select_option_label.get()}
</div>
<Teleport>
<div class="melt-select-menu" style=move || if is_show_popover.get() { css_vars.get() } else { format!("display: none; {}", css_vars.get()) } ref=popover_ref>
<div
class="melt-select-menu"
style=move || {
if is_show_popover.get() {
css_vars.get()
} else {
format!("display: none; {}", css_vars.get())
}
}
ref=popover_ref
>
<For
each=move || options.get()
key=move |item| item.value.clone()
children=move | item| {
let item = store_value( item);
children=move |item| {
let item = store_value(item);
let onclick = move |_| {
let SelectOption { value: item_value, label: _ } = item.get_value();
value.set(Some(item_value));
is_show_popover.set(false);
};
view! {
<div class="melt-select-menu__item" class=("melt-select-menu__item-selected", move || value.get() == Some(item.get_value().value) ) on:click=onclick>
{ item.get_value().label }
<div
class="melt-select-menu__item"
class=(
"melt-select-menu__item-selected",
move || value.get() == Some(item.get_value().value),
)
on:click=onclick
>
{item.get_value().label}
</div>
}
}
>
</For>
/>
</div>
</Teleport>
}

15
src/slider/mod.rs
View file

@ -68,9 +68,20 @@ pub fn Slider(
view! {
<div class="melt-slider" style=move || css_vars.get()>
<div class="melt-slider-rail" ref=rail_ref>
<div class="melt-slider-rail__fill" style=move || format!("width: {}%", percentage.get())></div>
<div
class="melt-slider-rail__fill"
style=move || format!("width: {}%", percentage.get())
></div>
</div>
<div on:mousedown=on_mouse_down class="melt-slider-handle" style=move || format!("left: {}%; transform: translateX(-{}%)", percentage.get(), percentage.get())>
<div
on:mousedown=on_mouse_down
class="melt-slider-handle"
style=move || {
format!(
"left: {}%; transform: translateX(-{}%)", percentage.get(), percentage.get()
)
}
>
</div>
</div>
}

24
src/space/mod.rs
View file

@ -27,16 +27,20 @@ pub fn Space(
};
view! {
<div class="melt-space" style:gap={gap} style:flex-direction=if vertical { "column" } else { "row" }>
{
children().nodes.into_iter().map(|node| {
view! {
<div class="melt-space__item">
{node}
</div>
}
}).collect::<Vec<_>>()
}
<div
class="melt-space"
style:gap=gap
style:flex-direction=if vertical { "column" } else { "row" }
>
{children()
.nodes
.into_iter()
.map(|node| {
view! { <div class="melt-space__item">{node}</div> }
})
.collect::<Vec<_>>()}
</div>
}
}

6
src/table/mod.rs
View file

@ -4,9 +4,5 @@ use leptos::*;
#[component]
pub fn Table(children: Children) -> impl IntoView {
mount_style("table", include_str!("./table.css"));
view! {
<table class="melt-table">
{children()}
</table>
}
view! { <table class="melt-table">{children()}</table> }
}

39
src/tabs/mod.rs
View file

@ -36,41 +36,50 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
view! {
<div class="melt-tabs" style=move || css_vars.get()>
<div class="melt-tabs__label-list" ref=label_list_ref>
<For each=move || tab_options_vec.get() key=move |v| v.key children=move | options| {
<For
each=move || tab_options_vec.get()
key=move |v| v.key
children=move |options| {
let label_ref = create_node_ref::<html::Span>();
create_effect( move |_| {
let Some(label) = label_ref.get() else {
return;
create_effect(move |_| {
let Some(label) = label_ref.get() else { return;
};
let Some(label_list) = label_list_ref.get() else {
return;
let Some(label_list) = label_list_ref.get() else { return;
};
if options.key == active_key.get() {
request_animation_frame(move || {
let list_rect = label_list.get_bounding_client_rect();
let rect = label.get_bounding_client_rect();
label_line.set(Some(TabsLabelLine {
label_line
.set(
Some(TabsLabelLine {
width: rect.width(),
left: rect.left() - list_rect.left(),
}));
}),
);
});
}
});
view! {
<span class="melt-tabs__label" class=("melt-tabs__label--active", move || options.key == active_key.get())
<span
class="melt-tabs__label"
class=(
"melt-tabs__label--active",
move || options.key == active_key.get(),
)
on:click=move |_| active_key.set(options.key)
ref=label_ref
>
{ options.label }
{options.label}
</span>
}
}>
</For>
}
/>
<span class="melt-tabs-label__line" style=move || label_line_style.get()></span>
</div>
<div>
{ children() }
</div>
<div>{children()}</div>
</div>
}
}

4
src/tabs/tab.rs
View file

@ -14,8 +14,8 @@ pub fn Tab(key: &'static str, label: &'static str, children: Children) -> impl I
let tabs = use_tabs();
tabs.push_tab_options(TabOptions { key, label });
view! {
<div class="melt-tab" class=("melt-tab--hidden", move || key != tabs.get_key()) >
{ children() }
<div class="melt-tab" class=("melt-tab--hidden", move || key != tabs.get_key())>
{children()}
</div>
}
}

2
src/wave/mod.rs
View file

@ -22,7 +22,7 @@ pub fn Wave(children: Children) -> impl IntoView {
});
view! {
<div class="melt-wave" ref=wave_ref style=move || css_vars.get()>
{ children() }
{children()}
</div>
}
}