chore(deps): update aspect-ratio to leptos 0.7

packages/primitives/leptos/aspect-ratio/Cargo.toml

@@ -12,3 +12,7 @@ version.workspace = true
 [dependencies]
 leptos.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+leptos-node-ref = { workspace = true }
+
+[features]
+debug = []

packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs

@@ -1,41 +1,79 @@
-use leptos::{html::AnyElement, *};
+use leptos::{prelude::*, attr::{Attribute, AttributeValue}, html};
 use radix_leptos_primitive::Primitive;
+use leptos_node_ref::AnyNodeRef;
+
+const DEFAULT_RATIO: f64 = 1.0;
+
+/* -------------------------------------------------------------------------------------------------
+ * AspectRatio
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME: &'static str = "AspectRatio";
 
 #[component]
+#[allow(non_snake_case)]
 pub fn AspectRatio(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    children: ChildrenFn,
+    /// Children passed to the AspectRatio component
+    children: TypedChildrenFn<impl IntoView + 'static>,
+
+    /// Change the default rendered element for the one passed as a child
+    #[prop(into, optional, default = false.into())]
+    as_child: MaybeProp<bool>,
+
+    /// The desired ratio when rendering the content (e.g., 16/9). Defaults to 1.0 if not specified.
+    #[prop(into, optional, default = DEFAULT_RATIO.into())]
+    ratio: MaybeProp<f64>,
+
+    /// Reference to the underlying DOM node
+    #[prop(into, optional)]
+    node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    let ratio = Signal::derive(move || ratio.get().unwrap_or(1.0));
+    // calculates the percent-based padding for the aspect ratio
+    let padding_bottom = Signal::derive(move || {
+        100.0
+            / ratio
+            .get()
+            .unwrap_or(DEFAULT_RATIO)
+            .clamp(f64::EPSILON, f64::MAX)
+    });
 
-    let mut attrs = attrs.clone();
-    // TODO: merge existing style
-    attrs.extend([(
-        "style",
-        // Ensures children expand in ratio
-        "position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;".into_attribute(),
-    )]);
+    #[cfg(debug_assertions)]
+    Effect::new(move |_| {
+        leptos::logging::log!("[{NAME}] ratio: {:?}", ratio.get());
+        leptos::logging::log!("[{NAME}] as_child: {:?}", as_child.get());
+        leptos::logging::log!("[{NAME}] node_ref: {:?}", node_ref.get());
+    });
 
     view! {
+        // ensures inner element is contained
         <div
-            // Ensures inner element is contained
             style:position="relative"
-            // Ensures padding bottom trick maths works
+            // ensures padding bottom trick works
             style:width="100%"
-            style:padding-bottom=move || format!("{}%", 100.0 / ratio.get())
+            style:padding-bottom=move || format!("{}%", padding_bottom.get())
             data-radix-aspect-ratio-wrapper=""
         >
             <Primitive
+                // ensures children expand to fill the ratio
                 element=html::div
                 as_child=as_child
                 node_ref=node_ref
-                attrs=attrs
-            >
-                {children()}
-            </Primitive>
+                children=children
+                style:position="absolute"
+                style:top="0"
+                style:right="0"
+                style:bottom="0"
+                style:left="0"
+            />
         </div>
     }
 }
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive re-exports
+ * -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use AspectRatio as Root;
+}