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

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

@ -12,15 +12,15 @@ pub struct DemoCode {
pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView { pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
mount_style("demo", prisms::prism_css!()); mount_style("demo", prisms::prism_css!());
view! { 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;"> <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>
<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;"> <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> <Code>
<pre style="margin: 0" inner_html=demo_code.html> <pre style="margin: 0" inner_html=demo_code.html>
{ (demo_code.children)() } {(demo_code.children)()}
</pre> </pre>
</Code> </Code>
</div> </div>
} }
} }

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

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

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

@ -10,20 +10,15 @@ pub fn ButtonPage() -> impl IntoView {
<h1>"Button"</h1> <h1>"Button"</h1>
<Demo> <Demo>
<Space> <Space>
<Button type_=ButtonType::PRIMARY> <Button type_=ButtonType::PRIMARY>"PRIMARY"</Button>
"PRIMARY" <Button type_=ButtonType::SOLID>"SOLID"</Button>
</Button> <Button type_=ButtonType::TEXT>"TEXT"</Button>
<Button type_=ButtonType::SOLID> <Button type_=ButtonType::LINK>"LINK"</Button>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
"LINK"
</Button>
</Space> </Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode
slot
html=highlight_str!(
r#"
<Button type_=ButtonType::PRIMARY> <Button type_=ButtonType::PRIMARY>
"PRIMARY" "PRIMARY"
</Button> </Button>
@ -36,27 +31,26 @@ pub fn ButtonPage() -> impl IntoView {
<Button type_=ButtonType::LINK> <Button type_=ButtonType::LINK>
"LINK" "LINK"
</Button> </Button>
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"color"</h3> <h3>"color"</h3>
<Demo> <Demo>
<Space> <Space>
<Button color=ButtonColor::PRIMARY> <Button color=ButtonColor::PRIMARY>"PRIMARY Color"</Button>
"PRIMARY Color" <Button color=ButtonColor::SUCCESS>"SUCCESS Color"</Button>
</Button> <Button color=ButtonColor::WARNING>"WARNING Color"</Button>
<Button color=ButtonColor::SUCCESS> <Button color=ButtonColor::ERROR>"ERROR Color"</Button>
"SUCCESS Color"
</Button>
<Button color=ButtonColor::WARNING>
"WARNING Color"
</Button>
<Button color=ButtonColor::ERROR>
"ERROR Color"
</Button>
</Space> </Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode
slot
html=highlight_str!(
r#"
<Button color=ButtonColor::PRIMARY> <Button color=ButtonColor::PRIMARY>
"PRIMARY Color" "PRIMARY Color"
</Button> </Button>
@ -69,7 +63,11 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR> <Button color=ButtonColor::ERROR>
"ERROR Color" "ERROR Color"
</Button> </Button>
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
@ -79,30 +77,47 @@ pub fn ButtonPage() -> impl IntoView {
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon" "ERROR Color Icon"
</Button> </Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true> <Button
</Button> color=ButtonColor::ERROR
icon=icondata::AiIcon::AiCloseOutlined
round=true
/>
</Space> </Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode
slot
html=highlight_str!(
r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon" "ERROR Color Icon"
</Button> </Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button> </Button>
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<LoadingButton /> <LoadingButton/>
<h3>"style"</h3> <h3>"style"</h3>
<Demo> <Demo>
<Space> <Space>
<Button style="background: blue;">"style blue"</Button> <Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button> <Button style="width: 40px; height: 20px">"size"</Button>
</Space> </Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode
slot
html=highlight_str!(
r#"
<Button style="background: blue;">"style blue"</Button> <Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button> <Button style="width: 40px; height: 20px">"size"</Button>
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
@ -133,7 +148,10 @@ pub fn LoadingButton() -> impl IntoView {
"Click Me" "Click Me"
</Button> </Button>
</Space> </Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode
slot
html=highlight_str!(
r#"
let loading = create_rw_signal(false); let loading = create_rw_signal(false);
let on_click = move |_| { let on_click = move |_| {
loading.set(true); loading.set(true);
@ -154,7 +172,11 @@ pub fn LoadingButton() -> impl IntoView {
</Button> </Button>
</Space> </Space>
} }
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </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;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Checkbox"</h1> <h1>"Checkbox"</h1>
<Demo> <Demo>
<Checkbox checked> <Checkbox checked>"Click"</Checkbox>
"Click" <DemoCode
</Checkbox> slot
<DemoCode slot html=highlight_str!(r#" html=highlight_str!(
r#"
let checked = create_rw_signal(false); let checked = create_rw_signal(false);
view! { view! {
@ -24,21 +25,26 @@ pub fn CheckboxPage() -> impl IntoView {
"Click" "Click"
</Checkbox> </Checkbox>
} }
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"group"</h3> <h3>"group"</h3>
<Demo> <Demo>
<CheckboxGroup value> <CheckboxGroup value>
<CheckboxItem label="apple" key="a" /> <CheckboxItem label="apple" key="a"/>
<CheckboxItem label="b" key="b" /> <CheckboxItem label="b" key="b"/>
<CheckboxItem label="c" key="c" /> <CheckboxItem label="c" key="c"/>
</CheckboxGroup> </CheckboxGroup>
<div style="margin-top: 1rem"> <div style="margin-top: 1rem">"value: " {move || format!("{:?}", value.get())}</div>
"value: " { move || format!("{:?}", value.get()) } <DemoCode
</div> slot
<DemoCode slot html=highlight_str!(r#" html=highlight_str!(
r#"
let value = create_rw_signal(HashSet::new()); let value = create_rw_signal(HashSet::new());
view! { view! {
@ -48,7 +54,11 @@ pub fn CheckboxPage() -> impl IntoView {
<CheckboxItem label="c" key="c" /> <CheckboxItem label="c" key="c" />
</CheckboxGroup> </CheckboxGroup>
} }
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>

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

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

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

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

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

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

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

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

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="a" label="and"/>
<MenuItem key="o" label="or"/> <MenuItem key="o" label="or"/>
</Menu> </Menu>
<DemoCode slot html=highlight_str!(r#" <DemoCode
slot
html=highlight_str!(
r#"
let selected = create_rw_signal(String::from("o")); let selected = create_rw_signal(String::from("o"));
<Menu selected> <Menu selected>
<MenuItem key="a" label="and"/> <MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/> <MenuItem key="o" label="or"/>
</Menu> </Menu>
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>

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

@ -4,7 +4,10 @@ use leptos::*;
pub fn MobilePage(path: &'static str) -> impl IntoView { pub fn MobilePage(path: &'static str) -> impl IntoView {
view! { view! {
<div style="height: 100vh; width: 400px; text-align: center"> <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> </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;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Modal"</h1> <h1>"Modal"</h1>
<Demo> <Demo>
<Button on:click=move |_| show.set(true)> <Button on:click=move |_| show.set(true)>"Open Modal"</Button>
"Open Modal"
</Button>
<Modal title="title" show> <Modal title="title" show>
"hello" "hello"
</Modal> </Modal>
<DemoCode slot html=highlight_str!(r#" <DemoCode
slot
html=highlight_str!(
r#"
let show = create_rw_signal(false); let show = create_rw_signal(false);
<Button on:click=move |_| show.set(true)> <Button on:click=move |_| show.set(true)>
@ -25,7 +26,11 @@ pub fn ModalPage() -> impl IntoView {
<Modal title="title" show> <Modal title="title" show>
"hello" "hello"
</Modal> </Modal>
"#, "rust")> "#,
"rust"
)
>
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

37
src/button/mod.rs
View file

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

42
src/card/mod.rs
View file

@ -36,37 +36,29 @@ pub fn Card(
view! { view! {
<div class="melt-card"> <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> <Then slot>
<div class="melt-card__header"> <div class="melt-card__header">
<div class="melt-card__header-content"> <div class="melt-card__header-content">
<OptionComp value=header.clone() let:header> <OptionComp value=header.clone() let:header>
<Fallback slot> <Fallback slot>{title.get()}</Fallback>
{ title.get() } {(header.children)()}
</Fallback>
{ (header.children)() }
</OptionComp>
</div>
<OptionComp value=header_extra.clone() let:header_extra>
<div class="melt-card__header-extra">
{ (header_extra.children)() }
</div>
</OptionComp> </OptionComp>
</div> </div>
</Then> <OptionComp value=header_extra.clone() let:header_extra>
</If> <div class="melt-card__header-extra">{(header_extra.children)()}</div>
<div class="melt-card__content"> </OptionComp>
{ children() } </div>
</div> </Then>
</If>
<div class="melt-card__content">{children()}</div>
<OptionComp value=card_footer let:footer> <OptionComp value=card_footer let:footer>
<If cond=footer.if_ > <If cond=footer.if_>
<Then slot> <Then slot>
<div class="melt-card__footer"> <div class="melt-card__footer">{(footer.children)()}</div>
{ (footer.children)() }
</div>
</Then> </Then>
</If> </If>
</OptionComp> </OptionComp>
</div> </div>
} }
} }

6
src/checkbox/checkbox_item.rs
View file

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

14
src/checkbox/mod.rs
View file

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

6
src/code/mod.rs
View file

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

8
src/image/mod.rs
View file

@ -30,7 +30,11 @@ pub fn Image(
style style
}; };
view! { view! {
<img
<img src=move || src.get() alt=move || alt.get() style=style object_fit=move || object_fit.get()/> 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! { view! {
<div class:melt-input=true style=move || css_vars.get()> <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> </div>
} }
} }

2
src/layout/layout_header.rs
View file

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

8
src/layout/mod.rs
View file

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

4
src/menu/menu_group.rs
View file

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

9
src/menu/menu_item.rs
View file

@ -29,8 +29,13 @@ pub fn MenuItem(
}); });
view! { view! {
<div class="melt-menu-item"> <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()> <div
{ move || label.get() } 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>
</div> </div>
} }

6
src/menu/mod.rs
View file

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

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

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

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

@ -25,13 +25,16 @@ pub fn TabbarItem(
}); });
view! { 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> <OptionComp value=icon let:icon>
<Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/> <Icon icon=icon width="22px" height="22px" class="melt-tabbar-item__icon"/>
</OptionComp> </OptionComp>
<div class="melt-tabbar-item__content"> <div class="melt-tabbar-item__content">{children()}</div>
{ children() }
</div>
</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")); mount_style("toast", include_str!("./toast.css"));
let parent = Element::from(document().body().expect("body element not to exist")); let parent = Element::from(document().body().expect("body element not to exist"));
let children = view! { let children = view! { <div class="melt-toast">{options.message}</div> };
<div class="melt-toast">
{ options.message }
</div>
};
let node = children.into_view(); let node = children.into_view();
#[cfg(all(target_arch = "wasm32"))] #[cfg(all(target_arch = "wasm32"))]

13
src/modal/mod.rs
View file

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

14
src/progress/mod.rs
View file

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

39
src/select/mod.rs
View file

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

15
src/slider/mod.rs
View file

@ -68,9 +68,20 @@ pub fn Slider(
view! { view! {
<div class="melt-slider" style=move || css_vars.get()> <div class="melt-slider" style=move || css_vars.get()>
<div class="melt-slider-rail" ref=rail_ref> <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>
<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>
</div> </div>
} }

24
src/space/mod.rs
View file

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

6
src/table/mod.rs
View file

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

67
src/tabs/mod.rs
View file

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

2
src/teleport/mod.rs
View file

@ -26,5 +26,5 @@ pub fn Teleport(#[prop(optional)] to: Option<&'static str>, children: Children)
_ = children; _ = children;
} }
view! { <></> } view! { <></> }
} }

2
src/wave/mod.rs
View file

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