Merge pull request #10 from thaw-ui/feat/leptos-v0.5.2

Feat/leptos v0.5.2

Cargo.toml

@@ -13,8 +13,8 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.1", features = ["csr"] }
+leptos = { version = "0.5.2", features = ["csr"] }
-web-sys = { version = "0.3.62", features = [
+web-sys = { version = "0.3.63", features = [
     "DomRect",
     "File",
     "FileList",
@@ -34,6 +34,7 @@ icondata = { version = "0.1.0", features = [
 ] }
 icondata_core = "0.0.2"
 uuid = { version = "1.5.0", features = ["v4"] }
+cfg-if = "1.0.0"
 
 [workspace]
 members = ["demo"]

demo/Cargo.toml

@@ -7,14 +7,14 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.1", features = ["csr"] }
+leptos = { version = "0.5.2", features = ["csr"] }
 thaw = { path = "../" }
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
     "AiGithubOutlined",
 ] }
-leptos_router = { version = "0.5.1", features = ["csr"] }
+leptos_router = { version = "0.5.2", features = ["csr"] }
 leptos_devtools = "0.0.1"
 prisms = { git = "https://github.com/luoxiaozero/prisms", rev = "16d4d34b93fc20578ebf03137d54ecc7eafa4d4b" }
 

src/auto_complete/mod.rs

@@ -1,12 +1,6 @@
 mod theme;
 
-use crate::{
+use crate::{mount_style, teleport::Teleport, use_theme, utils::StoredMaybeSignal, Input, Theme};
-    mount_style,
-    teleport::Teleport,
-    use_theme,
-    utils::{maybe_rw_signal::MaybeRwSignal, StoredMaybeSignal},
-    Input, Theme,
-};
 use leptos::*;
 pub use theme::AutoCompleteTheme;
 
@@ -18,7 +12,7 @@ pub struct AutoCompleteOption {
 
 #[component]
 pub fn AutoComplete(
-    #[prop(optional, into)] value: MaybeRwSignal<String>,
+    #[prop(optional, into)] value: RwSignal<String>,
     #[prop(optional, into)] placeholder: MaybeSignal<String>,
     #[prop(optional, into)] options: MaybeSignal<Vec<AutoCompleteOption>>,
     #[prop(optional, into)] clear_after_select: MaybeSignal<bool>,

src/button/mod.rs

@@ -95,12 +95,12 @@ pub fn Button(
                     "--thaw-background-color-active: {};",
                     theme.button.color_text_active
                 ));
-                css_vars.push_str(&format!("--thaw-ripple-color: #0000;"));
+                css_vars.push_str("--thaw-ripple-color: #0000;");
             } else {
                 css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
                 css_vars.push_str("--thaw-border-color: #555a;");
                 css_vars.push_str("--thaw-border-color-hover: #555;");
-                css_vars.push_str(&format!("--thaw-ripple-color: #0000;"));
+                css_vars.push_str("--thaw-ripple-color: #0000;");
             }
         });
 

src/checkbox/checkbox_group.rs

@@ -1,29 +1,19 @@
-use crate::utils::maybe_rw_signal::MaybeRwSignal;
 use leptos::*;
 use std::collections::HashSet;
 
 #[component]
 pub fn CheckboxGroup(
-    #[prop(optional, into)] value: MaybeRwSignal<HashSet<String>>,
+    #[prop(optional, into)] value: RwSignal<HashSet<String>>,
     children: Children,
 ) -> impl IntoView {
-    let injection_key = CheckboxGroupInjectionKey::new(value.into());
+    provide_context(CheckboxGroupInjection(value));
-    provide_context(injection_key);
 
     children()
 }
 
 #[derive(Clone)]
-pub struct CheckboxGroupInjectionKey {
+pub(crate) struct CheckboxGroupInjection(pub RwSignal<HashSet<String>>);
-    pub value: RwSignal<HashSet<String>>,
-}
 
-impl CheckboxGroupInjectionKey {
+pub(crate) fn use_checkbox_group() -> CheckboxGroupInjection {
-    pub fn new(value: RwSignal<HashSet<String>>) -> Self {
+    expect_context()
-        Self { value }
-    }
-}
-
-pub fn use_checkbox_group() -> CheckboxGroupInjectionKey {
-    expect_context::<CheckboxGroupInjectionKey>()
 }

src/checkbox/checkbox_item.rs

@@ -11,13 +11,13 @@ pub fn CheckboxItem(
 ) -> impl IntoView {
     let checkbox_group = use_checkbox_group();
     let checked = checkbox_group
-        .value
+        .0
         .with_untracked(|checkbox_group| checkbox_group.contains(&key));
     let checked = create_rw_signal(checked);
     let item_key = store_value(key);
 
     _ = checked.watch(move |checked| {
-        checkbox_group.value.update(move |checkbox_group| {
+        checkbox_group.0.update(move |checkbox_group| {
             if *checked {
                 checkbox_group.insert(item_key.get_value());
             } else {

src/checkbox/mod.rs

@@ -1,13 +1,7 @@
 mod checkbox_group;
 mod checkbox_item;
 
-use crate::{
+use crate::{components::*, icon::*, theme::use_theme, utils::mount_style::mount_style, Theme};
-    components::*,
-    icon::*,
-    theme::use_theme,
-    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
-    Theme,
-};
 pub use checkbox_group::CheckboxGroup;
 pub use checkbox_item::CheckboxItem;
 use icondata::AiIcon;
@@ -15,7 +9,7 @@ use leptos::*;
 
 #[component]
 pub fn Checkbox(
-    #[prop(optional, into)] value: MaybeRwSignal<bool>,
+    #[prop(optional, into)] value: RwSignal<bool>,
     children: Children,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -41,7 +35,7 @@ pub fn Checkbox(
         >
             <input class="thaw-checkbox__input" type="checkbox"/>
             <div class="thaw-checkbox__dot">
-                <If cond=value.clone_into()>
+                <If cond=value>
                     <Then slot>
                         <Icon icon=Icon::from(AiIcon::AiCheckOutlined) style="color: white"/>
                     </Then>

src/color_picker/mod.rs

@@ -1,16 +1,14 @@
 mod color;
 mod theme;
 
-use crate::{
+use crate::{mount_style, teleport::Teleport, use_theme, Theme};
-    mount_style, teleport::Teleport, use_theme, utils::maybe_rw_signal::MaybeRwSignal, Theme,
-};
 pub use color::*;
 use leptos::*;
 use leptos::{leptos_dom::helpers::WindowListenerHandle, wasm_bindgen::__rt::IntoJsResult};
 pub use theme::ColorPickerTheme;
 
 #[component]
-pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal<RGBA>) -> impl IntoView {
+pub fn ColorPicker(#[prop(optional, into)] value: RwSignal<RGBA>) -> impl IntoView {
     mount_style("color-picker", include_str!("./color-picker.css"));
     let theme = use_theme(Theme::light);
     let popover_css_vars = create_memo(move |_| {

src/grid/mod.rs

@@ -10,7 +10,7 @@ pub fn Grid(
     #[prop(optional, into)] y_gap: MaybeSignal<i32>,
     children: Children,
 ) -> impl IntoView {
-    let grid_injection_key = GridInjectionKey::new(x_gap);
+    let grid_injection_key = GridInjection::new(x_gap);
     provide_context(grid_injection_key);
 
     let style = create_memo(move |_| {
@@ -31,16 +31,16 @@ pub fn Grid(
 }
 
 #[derive(Clone)]
-pub struct GridInjectionKey {
+pub(crate) struct GridInjection {
     x_gap: MaybeSignal<i32>,
 }
 
-impl GridInjectionKey {
+impl GridInjection {
     pub fn new(x_gap: MaybeSignal<i32>) -> Self {
         Self { x_gap }
     }
 }
 
-pub fn use_grid() -> GridInjectionKey {
+pub(crate) fn use_grid() -> GridInjection {
-    expect_context::<GridInjectionKey>()
+    expect_context()
 }

src/input/mod.rs

@@ -2,7 +2,7 @@ mod theme;
 
 use crate::{
     theme::{use_theme, Theme},
-    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
+    utils::mount_style::mount_style,
 };
 use leptos::*;
 pub use theme::InputTheme;
@@ -30,7 +30,7 @@ pub struct InputSuffix {
 
 #[component]
 pub fn Input(
-    #[prop(optional, into)] value: MaybeRwSignal<String>,
+    #[prop(optional, into)] value: RwSignal<String>,
     #[prop(optional, into)] allow_value: Option<Callback<String, bool>>,
     #[prop(optional, into)] variant: MaybeSignal<InputVariant>,
     #[prop(optional, into)] placeholder: MaybeSignal<String>,

src/input_number/mod.rs

@@ -1,14 +1,12 @@
 use crate::utils::StoredMaybeSignal;
-use crate::{
+use crate::{AiIcon, Button, ButtonVariant, Icon, Input, InputSuffix};
-    utils::maybe_rw_signal::MaybeRwSignal, AiIcon, Button, ButtonVariant, Icon, Input, InputSuffix,
-};
 use leptos::*;
 use std::ops::{Add, Sub};
 use std::str::FromStr;
 
 #[component]
 pub fn InputNumber<T>(
-    #[prop(optional, into)] value: MaybeRwSignal<T>,
+    #[prop(optional, into)] value: RwSignal<T>,
     #[prop(optional, into)] placeholder: MaybeSignal<String>,
     #[prop(into)] step: MaybeSignal<T>,
 ) -> impl IntoView

src/loading_bar/loading_bar_provider.rs

@@ -19,6 +19,7 @@ pub fn LoadingBarProvider(children: Children) -> impl IntoView {
 pub struct LoadingBarInjection {
     loading_bar_ref: ComponentRef<LoadingBarRef>,
 }
+
 impl Copy for LoadingBarInjection {}
 
 impl LoadingBarInjection {

src/loading_bar/mod.rs

@@ -52,7 +52,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
                 .style("transition", "none")
                 .style("max-width", "0");
             _ = loading_bar_ref.offset_width();
-            loading_bar_ref
+            _ = loading_bar_ref
                 .style("transition", "max-width 4s linear")
                 .style("max-width", "80%");
         }
@@ -66,7 +66,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
     };
     let finish = Callback::new(move |_| {
         if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
-            loading_bar_ref
+            _ = loading_bar_ref
                 .style("background-color", "var(--thaw-background-color)")
                 .style("transition", "max-width 0.5s linear")
                 .style("max-width", "100%");
@@ -83,7 +83,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
                     .style("max-width", "0");
                 _ = loading_bar_ref.offset_width();
             }
-            loading_bar_ref
+            _ = loading_bar_ref
                 .style("background-color", "var(--thaw-background-color-error)")
                 .style("transition", "max-width 0.5s linear")
                 .style("max-width", "100%");
@@ -99,7 +99,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
     view! {
         <div
             class="thaw-loading-bar-container"
-            style=move || (!loading.get()).then(|| "display: none;")
+            style=move || (!loading.get()).then_some("display: none;")
         >
             <div
                 class="thaw-loading-bar"

src/menu/menu_item.rs

@@ -1,4 +1,4 @@
-use super::{use_menu, MenuInjectionKey};
+use super::use_menu;
 use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
 
@@ -12,7 +12,10 @@ pub fn MenuItem(
     let menu = use_menu();
     let click_key = key.clone();
     let on_click = move |_| {
-        menu.set(MenuInjectionKey::new(click_key.get()));
+        let click_key = click_key.get();
+        if menu.0.with(|key| key != &click_key) {
+            menu.0.set(click_key);
+        }
     };
 
     let css_vars = create_memo(move |_| {
@@ -33,7 +36,7 @@ pub fn MenuItem(
         <div class="thaw-menu-item">
             <div
                 class="thaw-menu-item__content"
-                class=("thaw-menu-item__content--selected", move || menu.get().value == key.get())
+                class=("thaw-menu-item__content--selected", move || menu.0.get() == key.get())
                 on:click=on_click
                 style=move || css_vars.get()
             >

src/menu/mod.rs

@@ -2,48 +2,20 @@ mod menu_group;
 mod menu_item;
 mod theme;
 
-use crate::utils::maybe_rw_signal::MaybeRwSignal;
 use leptos::*;
 pub use menu_group::MenuGroup;
 pub use menu_item::*;
 pub use theme::MenuTheme;
 
 #[component]
-pub fn Menu(
+pub fn Menu(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
-    #[prop(optional, into)] value: MaybeRwSignal<String>,
+    provide_context(MenuInjection(value));
-    children: Children,
-) -> impl IntoView {
-    let menu_injection_key = create_rw_signal(MenuInjectionKey::new(value.get_untracked()));
-    create_effect(move |_| {
-        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));
-        }
-    });
-
-    create_effect(move |_| {
-        let selected_key = value.get_untracked();
-        let key = menu_injection_key.get();
-        if selected_key != key.value {
-            value.set(key.value);
-        }
-    });
-    provide_context(menu_injection_key);
     view! { <div class="thaw-menu">{children()}</div> }
 }
 
 #[derive(Clone)]
-pub struct MenuInjectionKey {
+pub(crate) struct MenuInjection(pub RwSignal<String>);
-    value: String,
-}
 
-impl MenuInjectionKey {
+pub(crate) fn use_menu() -> MenuInjection {
-    pub fn new(value: String) -> Self {
+    expect_context()
-        Self { value }
-    }
-}
-
-pub fn use_menu() -> RwSignal<MenuInjectionKey> {
-    expect_context::<RwSignal<MenuInjectionKey>>()
 }

src/message/message.rs

@@ -1,54 +0,0 @@
-use crate::{theme::use_theme, Icon, Theme};
-use icondata::*;
-use leptos::*;
-
-#[derive(Default, Clone)]
-pub enum MessageVariant {
-    #[default]
-    Success,
-    Warning,
-    Error,
-}
-
-impl MessageVariant {
-    fn icon(&self) -> Icon {
-        match self {
-            MessageVariant::Success => icondata::Icon::Ai(AiCloseCircleFilled),
-            MessageVariant::Warning => icondata::Icon::Ai(AiExclamationCircleFilled),
-            MessageVariant::Error => icondata::Icon::Ai(AiCheckCircleFilled),
-        }
-    }
-    fn theme_color(&self, theme: &Theme) -> String {
-        match self {
-            MessageVariant::Success => theme.common.color_success.clone(),
-            MessageVariant::Warning => theme.common.color_warning.clone(),
-            MessageVariant::Error => theme.common.color_error.clone(),
-        }
-    }
-}
-
-#[component]
-pub(crate) fn Message(variant: MessageVariant, content: String) -> impl IntoView {
-    let theme = use_theme(Theme::light);
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-background-color: {}",
-                theme.message.background_color
-            ))
-        });
-        css_vars
-    });
-    let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
-    view! {
-        <div class="thaw-message-wrapper">
-            <div class="thaw-message" style=move || css_vars.get()>
-                <div class="thaw-message__icon">
-                    <Icon icon=variant.icon() style/>
-                </div>
-                <div class="thaw-message__content">{content}</div>
-            </div>
-        </div>
-    }
-}

src/message/message_environment.rs

@@ -1,4 +1,4 @@
-use super::{message::Message, message_provider::MessageType};
+use super::{message_provider::MessageType, Message};
 use leptos::*;
 use uuid::Uuid;
 

src/message/message_provider.rs

@@ -1,6 +1,6 @@
 use std::time::Duration;
 
-use super::{message::MessageVariant, message_environment::MessageEnvironment};
+use super::{message_environment::MessageEnvironment, MessageVariant};
 use crate::{mount_style, teleport::Teleport};
 use leptos::*;
 use uuid::Uuid;

src/message/mod.rs

@@ -1,8 +1,60 @@
-mod message;
 mod message_environment;
 mod message_provider;
 mod theme;
 
-pub use message::*;
+use crate::{theme::use_theme, Icon, Theme};
+use icondata::*;
+use leptos::*;
 pub use message_provider::*;
 pub use theme::MessageTheme;
+
+#[derive(Default, Clone)]
+pub enum MessageVariant {
+    #[default]
+    Success,
+    Warning,
+    Error,
+}
+
+impl MessageVariant {
+    fn icon(&self) -> Icon {
+        match self {
+            MessageVariant::Success => icondata::Icon::Ai(AiCloseCircleFilled),
+            MessageVariant::Warning => icondata::Icon::Ai(AiExclamationCircleFilled),
+            MessageVariant::Error => icondata::Icon::Ai(AiCheckCircleFilled),
+        }
+    }
+    fn theme_color(&self, theme: &Theme) -> String {
+        match self {
+            MessageVariant::Success => theme.common.color_success.clone(),
+            MessageVariant::Warning => theme.common.color_warning.clone(),
+            MessageVariant::Error => theme.common.color_error.clone(),
+        }
+    }
+}
+
+#[component]
+pub(crate) fn Message(variant: MessageVariant, content: String) -> impl IntoView {
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--thaw-background-color: {}",
+                theme.message.background_color
+            ))
+        });
+        css_vars
+    });
+    let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
+    view! {
+        <div class="thaw-message-wrapper">
+            <div class="thaw-message" style=move || css_vars.get()>
+                <div class="thaw-message__icon">
+                    <Icon icon=variant.icon() style/>
+                </div>
+                <div class="thaw-message__content">{content}</div>
+            </div>
+        </div>
+    }
+}

src/mobile/tabbar/mod.rs

@@ -1,18 +1,14 @@
 mod tabbar_item;
 mod theme;
 
-use crate::{
+use crate::{use_theme, utils::mount_style::mount_style, Theme};
-    use_theme,
-    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
-    Theme,
-};
 use leptos::*;
 pub use tabbar_item::*;
 pub use theme::TabbarTheme;
 
 #[component]
 pub fn Tabbar(
-    #[prop(optional, into)] value: MaybeRwSignal<String>,
+    #[prop(optional, into)] value: RwSignal<String>,
     children: Children,
 ) -> impl IntoView {
     mount_style("tabbar", include_str!("./tabbar.css"));
@@ -25,24 +21,7 @@ pub fn Tabbar(
             )
         })
     });
-
+    provide_context(TabbarInjection(value));
-    let tabbar_injection_key = create_rw_signal(TabbarInjectionKey::new(value.get()));
-    create_effect(move |_| {
-        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));
-        }
-    });
-
-    create_effect(move |_| {
-        let selected_key = value.get_untracked();
-        let key = tabbar_injection_key.get();
-        if selected_key != key.value {
-            value.set(key.value);
-        }
-    });
-    provide_context(tabbar_injection_key);
     view! {
         <div class="thaw-tabbar" style=move || css_vars.get()>
             {children()}
@@ -51,16 +30,8 @@ pub fn Tabbar(
 }
 
 #[derive(Clone)]
-pub struct TabbarInjectionKey {
+pub(crate) struct TabbarInjection(pub RwSignal<String>);
-    value: String,
-}
 
-impl TabbarInjectionKey {
+pub(crate) fn use_tabbar() -> TabbarInjection {
-    pub fn new(value: String) -> Self {
+    expect_context()
-        Self { value }
-    }
-}
-
-pub fn use_tabbar() -> RwSignal<TabbarInjectionKey> {
-    use_context::<RwSignal<TabbarInjectionKey>>().expect("TabbarInjectionKey not exist")
 }

src/mobile/tabbar/tabbar_item.rs

@@ -1,4 +1,4 @@
-use super::{use_tabbar, TabbarInjectionKey};
+use super::use_tabbar;
 use crate::components::*;
 use crate::utils::StoredMaybeSignal;
 use crate::{icon::*, theme::use_theme, utils::mount_style::mount_style, Theme};
@@ -15,7 +15,10 @@ pub fn TabbarItem(
     let tabbar = use_tabbar();
     let key: StoredMaybeSignal<_> = key.into();
     let on_click = move |_| {
-        tabbar.set(TabbarInjectionKey::new(key.get()));
+        let click_key = key.get();
+        if tabbar.0.with(|key| key != &click_key) {
+            tabbar.0.set(click_key);
+        }
     };
 
     let css_vars = create_memo(move |_| {
@@ -30,7 +33,7 @@ pub fn TabbarItem(
     view! {
         <div
             class="thaw-tabbar-item"
-            class=("thaw-tabbar-item--selected", move || tabbar.get().value == key.get())
+            class=("thaw-tabbar-item--selected", move || tabbar.0.get() == key.get())
             on:click=on_click
             style=move || css_vars.get()
         >

src/mobile/toast/mod.rs

@@ -1,7 +1,6 @@
 use crate::utils::mount_style::mount_style;
-use leptos::*;
+use cfg_if::cfg_if;
 use std::time::Duration;
-use web_sys::Element;
 
 pub struct ToastOptions {
     pub message: String,
@@ -10,26 +9,20 @@ pub struct ToastOptions {
 
 pub fn show_toast(options: ToastOptions) {
     mount_style("toast", include_str!("./toast.css"));
-
+    cfg_if! { if #[cfg(target_arch = "wasm32")] {
-    let parent = Element::from(document().body().expect("body element not to exist"));
+        use leptos::{leptos_dom::Mountable, *};
-    let children = view! { <div class="thaw-toast">{options.message}</div> };
+        let mount = document().body().expect("body element not to exist");
-    let node = children.into_view();
+        let children = view! { <div class="thaw-toast">{options.message}</div> };
-
+        let node = children.into_view();
-    #[cfg(target_arch = "wasm32")]
-    {
-        use leptos::leptos_dom::Mountable;
         let node = node.get_mountable_node();
-        parent.append_child(&node).unwrap();
+        _  = mount.append_child(&node);
         set_timeout(
             move || {
-                _ = parent.remove_child(&node);
+                _ = mount.remove_child(&node);
             },
             options.duration,
         );
-    }
+    } else {
-    #[cfg(not(target_arch = "wasm32"))]
+        _ = options;
-    {
+    }}
-        _ = parent;
-        _ = node;
-    }
 }

src/radio/mod.rs

@@ -1,15 +1,8 @@
-use crate::{
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
-    theme::use_theme,
-    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
-    Theme,
-};
 use leptos::*;
 
 #[component]
-pub fn Radio(
+pub fn Radio(#[prop(optional, into)] value: RwSignal<bool>, children: Children) -> impl IntoView {
-    #[prop(optional, into)] value: MaybeRwSignal<bool>,
-    children: Children,
-) -> impl IntoView {
     let theme = use_theme(Theme::light);
     mount_style("radio", include_str!("./radio.css"));
 

src/select/mod.rs

@@ -1,11 +1,6 @@
 mod theme;
 
-use crate::{
+use crate::{teleport::Teleport, theme::use_theme, utils::mount_style::mount_style, Theme};
-    teleport::Teleport,
-    theme::use_theme,
-    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
-    Theme,
-};
 use leptos::wasm_bindgen::__rt::IntoJsResult;
 use leptos::*;
 use std::hash::Hash;
@@ -19,7 +14,7 @@ pub struct SelectOption<T> {
 
 #[component]
 pub fn Select<T>(
-    #[prop(optional, into)] value: MaybeRwSignal<Option<T>>,
+    #[prop(optional, into)] value: RwSignal<Option<T>>,
     #[prop(optional, into)] options: MaybeSignal<Vec<SelectOption<T>>>,
 ) -> impl IntoView
 where

src/slider/mod.rs

@@ -1,16 +1,12 @@
 mod theme;
 
-use crate::{
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
-    theme::use_theme,
-    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
-    Theme,
-};
 use leptos::*;
 pub use theme::SliderTheme;
 
 #[component]
 pub fn Slider(
-    #[prop(optional, into)] value: MaybeRwSignal<f64>,
+    #[prop(optional, into)] value: RwSignal<f64>,
     #[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
 ) -> impl IntoView {
     mount_style("slider", include_str!("./slider.css"));

src/switch/mod.rs

@@ -1,11 +1,11 @@
 mod theme;
 
-use crate::{mount_style, theme::use_theme, utils::maybe_rw_signal::MaybeRwSignal, Theme};
+use crate::{mount_style, theme::use_theme, Theme};
 use leptos::*;
 pub use theme::SwitchTheme;
 
 #[component]
-pub fn Switch(#[prop(optional, into)] value: MaybeRwSignal<bool>) -> impl IntoView {
+pub fn Switch(#[prop(optional, into)] value: RwSignal<bool>) -> impl IntoView {
     mount_style("switch", include_str!("./switch.css"));
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {

src/tabs/mod.rs

@@ -1,24 +1,16 @@
 mod tab;
-use std::ops::Deref;
 
-use crate::{
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
-    theme::use_theme,
-    utils::{maybe_rw_signal::MaybeRwSignal, mount_style::mount_style},
-    Theme,
-};
 use leptos::*;
 
 pub use tab::*;
 
 #[component]
-pub fn Tabs(
+pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
-    #[prop(optional, into)] value: MaybeRwSignal<String>,
-    children: Children,
-) -> impl IntoView {
     mount_style("tabs", include_str!("./tabs.css"));
     let tab_options_vec = create_rw_signal(vec![]);
-    provide_context(TabsInjectionKey {
+    provide_context(TabsInjection {
-        active_key: *value.deref(),
+        active_key: value,
         tab_options_vec,
     });
     let theme = use_theme(Theme::light);
@@ -114,12 +106,12 @@ pub(crate) struct TabsLabelLine {
 }
 
 #[derive(Clone)]
-pub struct TabsInjectionKey {
+pub(crate) struct TabsInjection {
     active_key: RwSignal<String>,
     tab_options_vec: RwSignal<Vec<TabOption>>,
 }
 
-impl TabsInjectionKey {
+impl TabsInjection {
     pub fn get_key(&self) -> String {
         self.active_key.get()
     }
@@ -131,6 +123,6 @@ impl TabsInjectionKey {
     }
 }
 
-pub fn use_tabs() -> TabsInjectionKey {
+pub(crate) fn use_tabs() -> TabsInjection {
-    use_context::<TabsInjectionKey>().expect("TabsInjectionKey not exist")
+    expect_context()
 }

src/teleport/mod.rs

@@ -1,34 +1,30 @@
+use cfg_if::cfg_if;
 use leptos::*;
-use web_sys::Element;
-
 /// https://github.com/solidjs/solid/blob/main/packages/solid/web/src/index.ts#L56
 #[component]
-pub fn Teleport(#[prop(optional)] to: Option<&'static str>, children: Children) -> impl IntoView {
+pub fn Teleport(
-    let parent = if let Some(to) = to {
+    #[prop(into, optional)] mount: Option<web_sys::Element>,
-        document()
+    children: Children,
-            .query_selector(to)
+) -> impl IntoView {
-            .expect("element not to exist")
+    cfg_if! { if #[cfg(target_arch = "wasm32")] {
-            .expect("element not to exist")
+        use leptos::{
-    } else {
+            wasm_bindgen::JsCast,
-        Element::from(document().body().expect("body element not to exist"))
+            leptos_dom::Mountable
-    };
+        };
-
+        let mount = mount.unwrap_or_else(|| {
-    #[cfg(target_arch = "wasm32")]
+            document()
-    {
+                .body()
-        use leptos::leptos_dom::Mountable;
+                .expect("body element not to exist")
+                .unchecked_into()
+        });
         let node = children().into_view();
         let node = node.get_mountable_node();
-        parent.append_child(&node).unwrap();
+        _  = mount.append_child(&node);
         on_cleanup(move || {
-            _ = parent.remove_child(&node);
+            _ = mount.remove_child(&node);
         });
-    }
+    } else {
-
+        _ = mount;
-    #[cfg(not(target_arch = "wasm32"))]
-    {
-        _ = parent;
         _ = children;
-    }
+    }}
-
-    view! { <></> }
 }

src/utils/maybe_rw_signal.rs

@@ -1,44 +0,0 @@
-use leptos::RwSignal;
-use std::ops::Deref;
-
-pub struct MaybeRwSignal<T: Default + 'static>(RwSignal<T>);
-
-impl<T: Default> MaybeRwSignal<T> {
-    pub fn clone_into(&self) -> RwSignal<T> {
-        self.0
-    }
-}
-
-impl<T: Default> Default for MaybeRwSignal<T> {
-    fn default() -> Self {
-        Self(RwSignal::new(Default::default()))
-    }
-}
-
-impl<T: Default> Clone for MaybeRwSignal<T> {
-    fn clone(&self) -> Self {
-        *self
-    }
-}
-
-impl<T: Default> Copy for MaybeRwSignal<T> {}
-
-impl<T: Default> Deref for MaybeRwSignal<T> {
-    type Target = RwSignal<T>;
-
-    fn deref(&self) -> &Self::Target {
-        &self.0
-    }
-}
-
-impl<T: Default> From<RwSignal<T>> for MaybeRwSignal<T> {
-    fn from(value: RwSignal<T>) -> Self {
-        Self(value)
-    }
-}
-
-impl<T: Default> From<MaybeRwSignal<T>> for RwSignal<T> {
-    fn from(value: MaybeRwSignal<T>) -> Self {
-        value.0
-    }
-}

src/utils/mod.rs

@@ -1,10 +1,9 @@
 // mod callback;
 mod component_ref;
-pub mod maybe_rw_signal;
-mod maybe_signal_store;
 pub mod mount_style;
 pub mod signal;
+mod stored_maybe_signal;
 
 // pub use callback::AsyncCallback;
 pub use component_ref::ComponentRef;
-pub use maybe_signal_store::*;
+pub use stored_maybe_signal::*;

src/wave/mod.rs

@@ -37,6 +37,12 @@ pub fn Wave(#[prop(optional)] comp_ref: ComponentRef<WaveRef>) -> impl IntoView
         }
     });
     comp_ref.load(WaveRef { play });
+    on_cleanup(move || {
+        if let Some(handle) = animation_timeout_handle.get() {
+            handle.clear();
+            animation_timeout_handle.set(None);
+        }
+    });
     view! {
         <div
             class="thaw-wave"