From 99ea5b620fde0c9d2ddae5264ea9e346e32b601c Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sun, 15 Oct 2023 15:43:02 +0800
Subject: [PATCH] feat: menu prop type

---
 README.md                    |   2 +
 demo/src/pages/components.rs | 169 ++++++++++++++++++++++++++++++-----
 src/menu/menu_group.rs       |   2 +-
 src/menu/menu_item.rs        |   9 +-
 4 files changed, 153 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 7428a66..cb87bd8 100644
--- a/README.md
+++ b/README.md
@@ -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)
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index 8f64c36..22382b4 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -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(),
+                },
+            ],
+        },
+    ]
+}
diff --git a/src/menu/menu_group.rs b/src/menu/menu_group.rs
index f74d43b..813052a 100644
--- a/src/menu/menu_group.rs
+++ b/src/menu/menu_group.rs
@@ -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 |_| {
diff --git a/src/menu/menu_item.rs b/src/menu/menu_item.rs
index 6319b75..c033783 100644
--- a/src/menu/menu_item.rs
+++ b/src/menu/menu_item.rs
@@ -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()}