Update Aspect Ratio to Leptos 0.7

book/src/primitives/components/aspect-ratio.md

@@ -102,9 +102,10 @@ Contains the content you want to constrain to a given ratio.
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop    | Type             | Default |
-| ------- | ---------------- | ------- |
-| `ratio` | `MaybeProp<f64>` | `1.0`   |
+| Prop       | Type              | Default |
+| ---------- | ----------------- | ------- |
+| `as_child` | `MaybeProp<bool>` | `false` |
+| `ratio`    | `Signal<f64>`     | `1.0`   |
 
 {{#endtab }}
 {{#tab name="Yew" }}

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

@@ -11,4 +11,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-leptos-style.workspace = true
+leptos-node-ref.workspace = true
+radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }

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

@@ -1,80 +1,41 @@
-use leptos::prelude::*;
-use leptos_style::Style;
-
-pub struct UseAspectRatioProps {
-    style: Style,
-}
-
-pub struct UseAspectRatioAttrs {
-    style: Style,
-}
-
-pub fn use_aspect_ratio(props: UseAspectRatioProps) -> UseAspectRatioAttrs {
-    UseAspectRatioAttrs {
-        style: props.style.with_defaults([
-            // Ensures children expand in ratio.
-            ("position", "absolute"),
-            ("top", "0px"),
-            ("right", "0px"),
-            ("bottom", "0px"),
-            ("left", "0px"),
-        ]),
-    }
-}
-
-#[component]
-pub fn BaseAspectRatio(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(optional)] children: Option<Children>,
-) -> impl IntoView {
-    let ratio = Signal::derive(move || ratio.get().unwrap_or(1.0));
-
-    view! {
-        <div
-            // Ensures inner element is contained.
-            style:position="relative"
-            // Ensures padding bottom trick maths works.
-            style:width="100%"
-            style:padding-bottom=move || format!("{}%", 100.0 / ratio.get())
-            data-radix-aspect-ratio-wrapper=""
-        >
-            {children.map(|children| children())}
-        </div>
-    }
-}
+use leptos::{attribute_interceptor::AttributeInterceptor, html, prelude::*};
+use leptos_node_ref::AnyNodeRef;
+use radix_leptos_primitive::Primitive;
 
 #[component]
 pub fn AspectRatio(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(into, optional)] style: Style,
-    #[prop(optional)] children: Option<Children>,
+    #[prop(into, optional, default = 1.0.into())] ratio: Signal<f64>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(optional)] node_ref: AnyNodeRef,
+    children: TypedChildrenFn<impl IntoView + 'static>,
 ) -> impl IntoView {
-    let attrs = use_aspect_ratio(UseAspectRatioProps { style });
+    let children = StoredValue::new(children.into_inner());
 
     view! {
-        <BaseAspectRatio ratio=ratio>
-            <div style={attrs.style}>
-                {children.map(|children| children())}
+        <AttributeInterceptor let:attrs>
+            <div
+                // Ensures inner element is contained
+                style:position="relative"
+                // Ensures padding bottom trick maths works
+                style:width="100%"
+                style:padding-bottom=move || format!("{}%", 100.0 / ratio.get())
+                data-radix-aspect-ratio-wrapper=""
+            >
+                <Primitive
+                    element=html::div
+                    as_child=as_child
+                    node_ref=node_ref
+                    // Ensures children expand in ratio
+                    style:position="absolute"
+                    style:top="0px"
+                    style:right="0px"
+                    style:bottom="0px"
+                    style:left="0px"
+                    {..attrs}
+                >
+                    {children.with_value(|children| children())}
+                </Primitive>
             </div>
-        </BaseAspectRatio>
-    }
-}
-
-#[component]
-pub fn AspectRatioAsChild<R, RV>(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(into, optional)] style: Style,
-    render: R,
-) -> impl IntoView
-where
-    R: Fn(UseAspectRatioAttrs) -> RV + Send + 'static,
-    RV: IntoView + 'static,
-{
-    let attrs = use_aspect_ratio(UseAspectRatioProps { style });
-
-    view! {
-        <BaseAspectRatio ratio=ratio>
-            {render(attrs)}
-        </BaseAspectRatio>
+        </AttributeInterceptor>
     }
 }