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: menu prop type

Browse source
This commit is contained in:
luoxiao 2023-10-15 15:43:02 +08:00
parent 9380cdfad6
commit 99ea5b620f
4 changed files with 153 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -2,6 +2,8 @@
An easy to use leptos component library
**The 0.0.x release does not consider API compatibility at this time**
## Resources
[Pigment](https://github.com/kobaltedev/pigment)

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

@ -30,30 +30,9 @@ pub fn ComponentsPage() -> impl IntoView {
<Layout has_sider=true position=LayoutPosition::ABSOLUTE style="top: 54px;">
<LayoutSider>
<Menu value=selected>
<MenuGroup label="Common Components">
<MenuItem key="menu" label="Menu"/>
<MenuItem key="image" label="Image"/>
<MenuItem key="modal" label="Modal"/>
<MenuItem key="button" label="Button"/>
<MenuItem key="tabs" label="Tabs"/>
<MenuItem key="space" label="Space"/>
<MenuItem key="table" label="Table"/>
<MenuItem key="alert" label="Alert"/>
<MenuItem key="grid" label="Grid"/>
</MenuGroup>
<MenuGroup label="Data Input Components">
<MenuItem key="auto-complete" label="Auto Complete"/>
<MenuItem key="color-picker" label="Color Picker"/>
<MenuItem key="checkbox" label="Checkbox"/>
<MenuItem key="input" label="Input"/>
<MenuItem key="select" label="Select"/>
<MenuItem key="slider" label="Slider"/>
</MenuGroup>
<MenuGroup label="Mobile Components">
<MenuItem key="tabbar" label="Tabbar"/>
<MenuItem key="nav-bar" label="Nav Bar"/>
<MenuItem key="toast" label="Toast"/>
</MenuGroup>
{
gen_menu_data().into_view()
}
</Menu>
</LayoutSider>
<Layout style="padding: 8px 12px 28px; overflow-y: auto;">
@ -63,3 +42,145 @@ pub fn ComponentsPage() -> impl IntoView {
</Layout>
}
}
struct MenuGroupOption {
label: String,
children: Vec<MenuItemOption>,
}
impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
view! {
<MenuGroup label>
{
children.into_iter().map(|v| v.into_view()).collect_view()
}
</MenuGroup>
}
}
}
struct MenuItemOption {
label: String,
value: String,
}
impl IntoView for MenuItemOption {
fn into_view(self) -> View {
let Self { label, value } = self;
view! {
<MenuItem key=value label/>
}
}
}
fn gen_menu_data() -> Vec<MenuGroupOption> {
vec![
MenuGroupOption {
label: "Common Components".into(),
children: vec![MenuItemOption {
value: "button".into(),
label: "Button".into(),
}],
},
MenuGroupOption {
label: "Data Input Components".into(),
children: vec![
MenuItemOption {
value: "auto-complete".into(),
label: "Auto Complete".into(),
},
MenuItemOption {
value: "color-picker".into(),
label: "Color Picker".into(),
},
MenuItemOption {
value: "checkbox".into(),
label: "Checkbox".into(),
},
MenuItemOption {
value: "input".into(),
label: "Input".into(),
},
MenuItemOption {
value: "select".into(),
label: "Select".into(),
},
MenuItemOption {
value: "slider".into(),
label: "Slider".into(),
},
],
},
MenuGroupOption {
label: "Data Display Components".into(),
children: vec![
MenuItemOption {
value: "image".into(),
label: "Image".into(),
},
MenuItemOption {
value: "table".into(),
label: "Table".into(),
},
],
},
MenuGroupOption {
label: "Navigation Components".into(),
children: vec![
MenuItemOption {
value: "menu".into(),
label: "Menu".into(),
},
MenuItemOption {
value: "tabs".into(),
label: "Tabs".into(),
},
],
},
MenuGroupOption {
label: "Feedback Components".into(),
children: vec![
MenuItemOption {
value: "alert".into(),
label: "Alert".into(),
},
MenuItemOption {
value: "modal".into(),
label: "Modal".into(),
},
],
},
MenuGroupOption {
label: "Layout Components".into(),
children: vec![
MenuItemOption {
value: "grid".into(),
label: "Grid".into(),
},
MenuItemOption {
value: "space".into(),
label: "Space".into(),
},
],
},
MenuGroupOption {
label: "Mobile Components".into(),
children: vec![
MenuItemOption {
value: "nav-bar".into(),
label: "Nav Bar".into(),
},
MenuItemOption {
value: "tabbar".into(),
label: "Tabbar".into(),
},
MenuItemOption {
value: "toast".into(),
label: "Toast".into(),
},
],
},
]
}

2
src/menu/menu_group.rs
View file

@ -2,7 +2,7 @@ use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
use leptos::*;
#[component]
pub fn MenuGroup(label: &'static str, children: Children) -> impl IntoView {
pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoView {
mount_style("menu-group", include_str!("./menu-group.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {

9
src/menu/menu_item.rs
View file

@ -4,14 +4,15 @@ use leptos::*;
#[component]
pub fn MenuItem(
#[prop(into)] key: MaybeSignal<&'static str>,
#[prop(into)] key: MaybeSignal<String>,
#[prop(into)] label: MaybeSignal<String>,
) -> impl IntoView {
mount_style("menu-item", include_str!("./menu-item.css"));
let theme = use_theme(Theme::light);
let menu = use_menu();
let onclick_select = move |_| {
menu.set(MenuInjectionKey::new(key.get().to_string()));
let click_key = key.clone();
let on_click = move |_| {
menu.set(MenuInjectionKey::new(click_key.get()));
};
let css_vars = create_memo(move |_| {
@ -32,7 +33,7 @@ pub fn MenuItem(
<div
class="melt-menu-item__content"
class=("melt-menu-item__content--selected", move || menu.get().value == key.get())
on:click=onclick_select
on:click=on_click
style=move || css_vars.get()
>
{move || label.get()}