feat: change prop

demo/src/pages/components.rs

@@ -29,7 +29,7 @@ pub fn ComponentsPage() -> impl IntoView {
             <SiteHeader/>
             <Layout has_sider=true position=LayoutPosition::ABSOLUTE style="top: 54px;">
                 <LayoutSider>
-                    <Menu selected>
+                    <Menu value=selected>
                         <MenuGroup label="Common Components">
                             <MenuItem key="menu" label="Menu"/>
                             <MenuItem key="slider" label="Slider"/>

demo/src/pages/menu/mod.rs

@@ -5,12 +5,12 @@ use prisms::highlight_str;
 
 #[component]
 pub fn MenuPage() -> impl IntoView {
-    let selected = create_rw_signal(String::from("o"));
+    let value = create_rw_signal(String::from("o"));
     view! {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Menu"</h1>
             <Demo>
-                <Menu selected>
+                <Menu value>
                     <MenuItem key="a" label="and"/>
                     <MenuItem key="o" label="or"/>
                 </Menu>
@@ -18,9 +18,9 @@ pub fn MenuPage() -> impl IntoView {
                     slot
                     html=highlight_str!(
                         r#"
-                    let selected = create_rw_signal(String::from("o"));
+                    let value = create_rw_signal(String::from("o"));
                             
-                    <Menu selected>
+                    <Menu value>
                         <MenuItem key="a" label="and"/>
                         <MenuItem key="o" label="or"/>
                     </Menu>

demo/src/pages/tabbar/mod.rs

@@ -18,9 +18,9 @@ pub fn TabbarPage() -> impl IntoView {
                         slot
                         html=highlight_str!(
                             r#"
-                        let selected = create_rw_signal(String::from("o"));
+                        let value = create_rw_signal(String::from("o"));
                                 
-                        <Tabbar selected>
+                        <Tabbar value>
                             <TabbarItem name="a">
                                 "and"
                             </TabbarItem>
@@ -49,10 +49,10 @@ pub fn TabbarPage() -> impl IntoView {
 
 #[component]
 pub fn TabbarDemoPage() -> impl IntoView {
-    let selected = create_rw_signal(String::from("o"));
+    let value = create_rw_signal(String::from("o"));
     view! {
         <div style="height: 100vh; background: #f5f5f5">
-            {move || selected.get()} <Tabbar selected>
+            {move || value.get()} <Tabbar value>
                 <TabbarItem name="a">"and"</TabbarItem>
                 <TabbarItem name="i">"if"</TabbarItem>
                 <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>

demo/src/pages/tabs/mod.rs

@@ -5,12 +5,12 @@ use prisms::highlight_str;
 
 #[component]
 pub fn TabsPage() -> impl IntoView {
-    let active_key = create_rw_signal("apple");
+    let value = create_rw_signal("apple");
     view! {
         <div style="width: 896px; margin: 0 auto;">
-            <h1>"Tabs"</h1>
+            <h1>"Tabs2"</h1>
             <Demo>
-                <Tabs active_key>
+                <Tabs value>
                     <Tab key="apple" label="Apple">
                         "apple"
                     </Tab>
@@ -22,8 +22,8 @@ pub fn TabsPage() -> impl IntoView {
                     slot
                     html=highlight_str!(
                         r#"
-                    let active_key = create_rw_signal("apple");
+                    let value = create_rw_signal("apple");
-                    <Tabs active_key>
+                    <Tabs value>
                         <Tab key="apple" label="Apple">
                             "apple"
                         </Tab>

src/input/mod.rs

@@ -2,7 +2,7 @@ mod theme;
 
 use crate::{
     theme::{use_theme, Theme},
-    utils::mount_style::mount_style,
+    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
 };
 use leptos::*;
 pub use theme::InputTheme;
@@ -25,7 +25,7 @@ impl InputVariant {
 
 #[component]
 pub fn Input(
-    #[prop(into)] value: RwSignal<String>,
+    #[prop(optional, into)] value: MaybeRwSignal<String>,
     #[prop(optional, into)] variant: MaybeSignal<InputVariant>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);

src/menu/mod.rs

@@ -10,12 +10,12 @@ pub use theme::MenuTheme;
 
 #[component]
 pub fn Menu(
-    #[prop(optional, into)] selected: MaybeRwSignal<String>,
+    #[prop(optional, into)] value: MaybeRwSignal<String>,
     children: Children,
 ) -> impl IntoView {
-    let menu_injection_key = create_rw_signal(MenuInjectionKey::new(selected.get_untracked()));
+    let menu_injection_key = create_rw_signal(MenuInjectionKey::new(value.get_untracked()));
     create_effect(move |_| {
-        let selected_key = selected.get();
+        let selected_key = value.get();
         let key = menu_injection_key.get_untracked();
         if selected_key != key.value {
             menu_injection_key.set(MenuInjectionKey::new(selected_key));
@@ -23,10 +23,10 @@ pub fn Menu(
     });
 
     create_effect(move |_| {
-        let selected_key = selected.get_untracked();
+        let selected_key = value.get_untracked();
         let key = menu_injection_key.get();
         if selected_key != key.value {
-            selected.set(key.value);
+            value.set(key.value);
         }
     });
     provide_context(menu_injection_key);

src/mobile/tabbar/mod.rs

@@ -1,17 +1,20 @@
 mod tabbar_item;
 
-use crate::utils::mount_style::mount_style;
+use crate::utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style};
 use leptos::*;
 
 pub use tabbar_item::*;
 
 #[component]
-pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> impl IntoView {
+pub fn Tabbar(
+    #[prop(optional, into)] value: MaybeRwSignal<String>,
+    children: Children,
+) -> impl IntoView {
     mount_style("tabbar", include_str!("./tabbar.css"));
 
-    let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(selected.get()));
+    let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(value.get()));
     create_effect(move |_| {
-        let selected_key = selected.get();
+        let selected_key = value.get();
         let key = tabbar_injection_key.get_untracked();
         if selected_key != key.value {
             tabbar_injection_key.set(TabbarInjectionKey::new(selected_key));
@@ -19,10 +22,10 @@ pub fn Tabbar(#[prop(into)] selected: RwSignal<String>, children: Children) -> i
     });
 
     create_effect(move |_| {
-        let selected_key = selected.get_untracked();
+        let selected_key = value.get_untracked();
         let key = tabbar_injection_key.get();
         if selected_key != key.value {
-            selected.set(key.value);
+            value.set(key.value);
         }
     });
     provide_context(tabbar_injection_key);

src/slider/mod.rs

@@ -1,10 +1,14 @@
-use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
+use crate::{
+    theme::use_theme,
+    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
+    Theme,
+};
 use leptos::*;
 use wasm_bindgen::JsCast;
 
 #[component]
 pub fn Slider(
-    #[prop(into)] value: RwSignal<f64>,
+    #[prop(optional, into)] value: MaybeRwSignal<f64>,
     #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);

src/tabs/mod.rs

@@ -1,15 +1,24 @@
 mod tab;
-use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
+use std::ops::Deref;
+
+use crate::{
+    theme::use_theme,
+    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
+    Theme,
+};
 use leptos::*;
 
 pub use tab::*;
 
 #[component]
-pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl IntoView {
+pub fn Tabs(
+    #[prop(optional, into)] value: MaybeRwSignal<&'static str>,
+    children: Children,
+) -> impl IntoView {
     mount_style("tabs", include_str!("./tabs.css"));
     let tab_options_vec = create_rw_signal(vec![]);
     provide_context(TabsInjectionKey {
-        active_key: active_key.clone(),
+        active_key: value.deref().clone(),
         tab_options_vec: tab_options_vec.clone(),
     });
     let theme = use_theme(Theme::light);
@@ -48,7 +57,7 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
                             let Some(label_list) = label_list_ref.get() else {
                                 return;
                             };
-                            if options.key == active_key.get() {
+                            if options.key == value.get() {
                                 request_animation_frame(move || {
                                     let list_rect = label_list.get_bounding_client_rect();
                                     let rect = label.get_bounding_client_rect();
@@ -67,10 +76,10 @@ pub fn Tabs(active_key: RwSignal<&'static str>, children: Children) -> impl Into
                                 class="melt-tabs__label"
                                 class=(
                                     "melt-tabs__label--active",
-                                    move || options.key == active_key.get(),
+                                    move || options.key == value.get(),
                                 )
 
-                                on:click=move |_| active_key.set(options.key)
+                                on:click=move |_| value.set(options.key)
                                 ref=label_ref
                             >
                                 {options.label}