feat: leptos-v0.7

thaw/Cargo.toml

@@ -33,6 +33,7 @@ cfg-if = "1.0.0"
 chrono = "0.4.35"
 palette = "0.7.5"
 num-traits = "0.2.18"
+send_wrapper = "0.6"
 
 [features]
 csr = ["leptos/csr", "thaw_components/csr", "thaw_utils/csr"]

thaw/src/accordion/accordion_item.rs

@@ -59,7 +59,7 @@ pub fn AccordionItem(
                 <div
                     class="thaw-accordion-panel"
                     node_ref=panel_ref
-                    style=("display: none", display.with(|d| d.is_none()))
+                    // style=("display: none", display.with(|d| d.is_none()))
                 >
                     {children()}
                 </div>

thaw/src/anchor/anchor_link.rs

@@ -1,4 +1,4 @@
-use crate::use_anchor;
+use super::AnchorInjection;
 use leptos::{html, prelude::*};
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, OptionalProp, StoredMaybeSignal};
@@ -10,7 +10,7 @@ pub fn AnchorLink(
     #[prop(into)] href: String,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
-    let anchor = use_anchor();
+    let anchor = AnchorInjection::use_();
 
     let title: StoredMaybeSignal<_> = title.into();
     let title_ref = NodeRef::<html::A>::new();
@@ -39,20 +39,15 @@ pub fn AnchorLink(
                 });
             });
 
-            Effect::new(|_| {
+            Effect::new(move |_| {
                 let Some(title_el) = title_ref.get() else {
                     return;
                 };
-                let _ = watch(
+
-                    move || is_active.get(),
+                if is_active.get() {
-                    move |is_active, _, _| {
+                    let title_rect = title_el.get_bounding_client_rect();
-                        if *is_active {
+                    anchor.update_background_position(title_rect);
-                            let title_rect = title_el.get_bounding_client_rect();
+                }
-                            anchor.update_background_position(title_rect);
-                        }
-                    },
-                    true,
-                );
             });
         }
     }

thaw/src/anchor/mod.rs

@@ -121,6 +121,10 @@ pub(crate) struct AnchorInjection {
 impl Copy for AnchorInjection {}
 
 impl AnchorInjection {
+    pub fn use_() -> Self {
+        expect_context()
+    }
+
     fn new(
         anchor_ref: NodeRef<html::Div>,
         bar_ref: NodeRef<html::Div>,
@@ -170,10 +174,6 @@ impl AnchorInjection {
     }
 }
 
-pub(crate) fn use_anchor() -> AnchorInjection {
-    expect_context()
-}
-
 struct LinkInfo {
     top: f64,
     id: String,

thaw/src/back_top/mod.rs

@@ -21,13 +21,12 @@ pub fn BackTop(
     let is_show_back_top = RwSignal::new(false);
     let scroll_top = RwSignal::new(0);
 
-    let _ = watch(
+    Effect::new(move |prev| {
-        move || scroll_top.get(),
+        scroll_top.track();
-        move |scroll_top, _, _| {
+        if prev.is_some() {
-            is_show_back_top.set(scroll_top > &visibility_height.get());
+            is_show_back_top.set(scroll_top.get() > visibility_height.get_untracked());
-        },
+        }
-        false,
+    });
-    );
 
     let scroll_to_top = StoredValue::new(None::<Callback<()>>);
     let scroll_handle = StoredValue::new(None::<EventListenerHandle>);
@@ -42,7 +41,7 @@ pub fn BackTop(
                 .unwrap_or_else(|| document().document_element().unwrap());
 
             {
-                let scroll_el = scroll_el.clone();
+                let scroll_el = send_wrapper::SendWrapper::new(scroll_el.clone());
                 scroll_to_top.set_value(Some(Callback::new(move |_| {
                     scroll_el.scroll_to_with_scroll_to_options(
                         web_sys::ScrollToOptions::new()

thaw/src/button/mod.rs

@@ -4,6 +4,7 @@ pub use button_group::ButtonGroup;
 
 use crate::icon::Icon;
 use leptos::{ev, prelude::*};
+use send_wrapper::SendWrapper;
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
 
@@ -65,7 +66,6 @@ impl ButtonSize {
 
 #[component]
 pub fn Button(
-    #[prop(optional, into)] style: Option<MaybeSignal<String>>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     #[prop(optional, into)] appearance: MaybeSignal<ButtonAppearance>,
     #[prop(optional, into)] shape: MaybeSignal<ButtonShape>,
@@ -74,7 +74,7 @@ pub fn Button(
     #[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
     #[prop(optional, into)] disabled_focusable: MaybeSignal<bool>,
-    #[prop(optional, into)] on_click: Option<Callback<ev::MouseEvent>>,
+    #[prop(optional, into)] on_click: Option<Callback<SendWrapper<ev::MouseEvent>>>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     mount_style("button", include_str!("./button.css"));
@@ -91,7 +91,7 @@ pub fn Button(
         let Some(callback) = on_click.as_ref() else {
             return;
         };
-        callback.call(e);
+        callback.call(SendWrapper::new(e));
     };
 
     view! {
@@ -107,7 +107,6 @@ pub fn Button(
                 class.map(| c | move || c.get())
             ]
 
-            style=move || style.as_ref().map(|s| s.get())
             disabled=move || disabled.get().then_some("")
             aria-disabled=move || disabled_focusable.get().then_some("true")
             on:click=on_click

thaw/src/combobox/combobox_option.rs

@@ -23,7 +23,7 @@ pub fn ComboboxOption(
     view! {
         <div
             role="option"
-            aria-selected="true"
+            // aria_selected="true"
             class=class_list![
                 "thaw-combobox-option",
                 ("thaw-combobox-option--selected", move || value.with_value(|value| combobox.is_selected(&value)))

thaw/src/date_picker/panel/mod.rs

@@ -82,13 +82,13 @@ pub fn Panel(
                         PanelVariant::Date => {
                             view! {
                                 <DatePanel value=selected_date show_date close_panel panel_variant/>
-                            }
+                            }.into_any()
                         }
                         PanelVariant::Month => {
-                            view! { <MonthPanel date_panel_show_date=show_date panel_variant/> }
+                            view! { <MonthPanel date_panel_show_date=show_date panel_variant/> }.into_any()
                         }
                         PanelVariant::Year => {
-                            view! { <YearPanel date_panel_show_date=show_date panel_variant/> }
+                            view! { <YearPanel date_panel_show_date=show_date panel_variant/> }.into_any()
                         }
                     }
                 }}

thaw/src/dialog/dialog_surface.rs

@@ -19,7 +19,7 @@ pub fn DialogSurface(children: Children) -> impl IntoView {
                 class="thaw-dialog-surface"
                 node_ref=surface_ref
                 role="dialog"
-                aria-modal="true"
+                // aria-modal="true"
                 style:display=move || display.get().map(|_| "none")
             >
                 {children()}

thaw/src/divider/mod.rs

@@ -13,7 +13,7 @@ pub fn Divider(
     view! {
         <div
             class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class.map(| c | move || c.get())]
-            aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
+            // aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
             role="separator"
         >
             <OptionComp value=children let:children>

thaw/src/drawer/overlay_drawer.rs

@@ -104,7 +104,7 @@ pub fn OverlayDrawer(
                             }
                             node_ref=drawer_ref
                             role="dialog"
-                            aria-modal="true"
+                            // aria-modal="true"
                         >
                             {children()}
                         </div>

thaw/src/layout/mod.rs

@@ -27,7 +27,6 @@ impl LayoutPosition {
 #[component]
 pub fn Layout(
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
-    #[prop(optional, into)] style: OptionalProp<MaybeSignal<String>>,
     #[prop(optional, into)] content_class: OptionalProp<MaybeSignal<String>>,
     #[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
     #[prop(optional)] position: LayoutPosition,
@@ -46,7 +45,6 @@ pub fn Layout(
     view! {
         <div
             class=class_list![gen_class(position), class.map(| c | move || c.get())]
-            style=move || style.as_ref().map(|s| s.get())
         >
             <Scrollbar
                 content_class

thaw/src/progress_bar/progress_bar.rs

@@ -22,9 +22,9 @@ pub fn ProgressBar(
                 move || format!("thaw-progress-bar--{}", color.get().as_str())
             ]
             role="progressbar"
-            aria_valuemax=move || max.get()
+            // aria_valuemax=move || max.get()
-            aria-valuemin="0"
+            // aria-valuemin="0"
-            aria-valuenow=move || value.get()
+            // aria-valuenow=move || value.get()
         >
             <div class="thaw-progress-bar__bar" style=style>
             </div>

thaw/src/progress_bar/progress_circle.rs

@@ -42,9 +42,9 @@ pub fn ProgressCircle(
         <div
             class=class_list!["thaw-progress-circle", class.map(| c | move || c.get())]
             role="progressbar"
-            aria-valuemax="100"
+            // aria-valuemax="100"
-            aria-valuemin="0"
+            // aria-valuemin="0"
-            aria-valuenow=move || value.get()
+            // aria-valuenow=move || value.get()
             style=("--thaw-size", move || size.get())
         >
 

thaw/src/spin_button/mod.rs

@@ -2,7 +2,7 @@ use leptos::prelude::*;
 use num_traits::Bounded;
 use std::ops::{Add, Sub};
 use std::str::FromStr;
-use thaw_utils::{mount_style, Model, StoredMaybeSignal};
+use thaw_utils::{mount_style, with, Model, StoredMaybeSignal};
 
 #[component]
 pub fn SpinButton<T>(
@@ -60,7 +60,7 @@ where
             <input
                 autocomplete="off"
                 role="spinbutton"
-                aria-valuenow=move || value.get().to_string()
+                // aria-valuenow=move || value.get().to_string()
                 type="text"
                 disabled=move || disabled.get()
                 value=initialization_value