From 4b41dbd8ca1983e23e6548a22a4a11b4c3d57650 Mon Sep 17 00:00:00 2001 From: geoffreygarrett Date: Wed, 8 Jan 2025 18:08:08 +0200 Subject: [PATCH 1/2] Update Aspect Ratio to Leptos 0.7 --- .../src/primitives/components/aspect-ratio.md | 115 ++++++++++------ .../primitives/leptos/aspect-ratio/Cargo.toml | 3 +- .../leptos/aspect-ratio/src/aspect_ratio.rs | 130 +++++++++--------- 3 files changed, 137 insertions(+), 111 deletions(-) diff --git a/book/src/primitives/components/aspect-ratio.md b/book/src/primitives/components/aspect-ratio.md index b584eae..5272bf0 100644 --- a/book/src/primitives/components/aspect-ratio.md +++ b/book/src/primitives/components/aspect-ratio.md @@ -2,8 +2,8 @@ Displays content within a desired ratio. -{{#tabs global="framework" }} -{{#tab name="Leptos" }} +{{#tabs global="framework"}} +{{#tab name="Leptos"}} ```toml,trunk package = "radix-leptos-book-primitives" @@ -11,8 +11,8 @@ features = ["aspect-ratio"] files = ["src/aspect_ratio.rs"] ``` -{{#endtab }} -{{#tab name="Yew" }} +{{#endtab}} +{{#tab name="Yew"}} ```toml,trunk package = "radix-yew-book-primitives" @@ -20,78 +20,80 @@ features = ["aspect-ratio"] files = ["src/aspect_ratio.rs"] ``` -{{#endtab }} -{{#endtabs }} +{{#endtab}} +{{#endtabs}} ## Features -- Accepts any custom ratio. +- Accepts any custom ratio. ## Installation Install the component from your command line. -{{#tabs global="framework" }} -{{#tab name="Leptos" }} +{{#tabs global="framework"}} +{{#tab name="Leptos"}} ```shell cargo add radix-leptos-aspect-ratio ``` -- [View on crates.io](https://crates.io/crates/radix-leptos-aspect-ratio) -- [View on docs.rs](https://docs.rs/radix-leptos-aspect-ratio/latest/radix_leptos_aspect_ratio/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/aspect-ratio) +- [View on crates.io](https://crates.io/crates/radix-leptos-aspect-ratio) +- [View on docs.rs](https://docs.rs/radix-leptos-aspect-ratio/latest/radix_leptos_aspect_ratio/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/aspect-ratio) -{{#endtab }} -{{#tab name="Yew" }} +{{#endtab}} +{{#tab name="Yew"}} ```shell cargo add radix-yew-aspect-ratio ``` -- [View on crates.io](https://crates.io/crates/radix-yew-aspect-ratio) -- [View on docs.rs](https://docs.rs/radix-yew-aspect-ratio/latest/radix_yew_aspect_ratio/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/aspect-ratio) +- [View on crates.io](https://crates.io/crates/radix-yew-aspect-ratio) +- [View on docs.rs](https://docs.rs/radix-yew-aspect-ratio/latest/radix_yew_aspect_ratio/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/aspect-ratio) -{{#endtab }} -{{#endtabs }} +{{#endtab}} +{{#endtabs}} ## Anatomy -Import the component. - -{{#tabs global="framework" }} -{{#tab name="Leptos" }} +{{#tabs global="framework"}} +{{#tab name="Leptos"}} ```rust,ignore use leptos::*; -use radix_leptos_aspect_ratio::*; +use radix_leptos_aspect_ratio as AspectRatio; #[component] fn Anatomy() -> impl IntoView { view! { - + +
"Constrained within the 16:9 ratio!"
+ } } ``` -{{#endtab }} -{{#tab name="Yew" }} +{{#endtab}} +{{#tab name="Yew"}} ```rust,ignore use radix_yew_aspect_ratio::*; -use yew::prelude::::*; +use yew::prelude::*; #[function_component] fn Anatomy() -> Html { html! { - + + {"Constrained within the desired ratio!"} + } } ``` -{{#endtab }} -{{#endtabs }} +{{#endtab}} +{{#endtabs}} ## API Reference @@ -99,24 +101,47 @@ fn Anatomy() -> Html { Contains the content you want to constrain to a given ratio. -{{#tabs global="framework" }} -{{#tab name="Leptos" }} +{{#tabs global="framework"}} +{{#tab name="Leptos"}} + +| Prop | Type | Default | +|------------|-------------------|---------| +| `as_child` | `MaybeProp` | `false` | +| `ratio` | `MaybeProp` | `1.0` | +| `node_ref` | `AnyNodeRef` | - | + +### Usage + +To use the `Root` alias for the `AspectRatio` component, import it and use `AspectRatio::Root` in your view. + +```rust,ignore +use leptos::*; +use radix_leptos_aspect_ratio as AspectRatio; + +#[component] +fn Example() -> impl IntoView { + view! { + + Example Image + + } +} +``` -| Prop | Type | Default | -| ------- | ---------------- | ------- | -| `ratio` | `MaybeProp` | `1.0` | +{{#endtab}} +{{#tab name="Yew"}} -{{#endtab }} -{{#tab name="Yew" }} + -| Prop | Type | Default | -| ---------- | ----------------------------------------------- | ------- | -| `as_child` | `Option>` | - | -| `ratio` | `f64` | `1.0` | +| Prop | Type | Default | +|---------|-------|---------| +| `ratio` | `f64` | `1.0` | -{{#endtab }} -{{#endtabs }} +{{#endtab}} +{{#endtabs}} ## See Also -- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/aspect-ratio) +- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/aspect-ratio) + +``` \ No newline at end of file diff --git a/packages/primitives/leptos/aspect-ratio/Cargo.toml b/packages/primitives/leptos/aspect-ratio/Cargo.toml index 98ee8a2..23e5948 100644 --- a/packages/primitives/leptos/aspect-ratio/Cargo.toml +++ b/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.workspace = true diff --git a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs index 60b4232..2590151 100644 --- a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs +++ b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs @@ -1,80 +1,80 @@ -use leptos::prelude::*; -use leptos_style::Style; +use leptos::{prelude::*, html, attribute_interceptor::AttributeInterceptor}; +use radix_leptos_primitive::Primitive; +use leptos_node_ref::AnyNodeRef; -pub struct UseAspectRatioProps { - style: Style, -} +const DEFAULT_RATIO: f64 = 1.0; -pub struct UseAspectRatioAttrs { - style: Style, -} +/* ------------------------------------------------------------------------------------------------- + * AspectRatio + * -----------------------------------------------------------------------------------------------*/ -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"), - ]), - } -} +const NAME: &'static str = "AspectRatio"; #[component] -pub fn BaseAspectRatio( - #[prop(into, optional)] ratio: MaybeProp, - #[prop(optional)] children: Option, +#[allow(non_snake_case)] +pub fn AspectRatio( + /// Children passed to the AspectRatio component + children: TypedChildrenFn, + /// Change the default rendered element for the one passed as a child + #[prop(into, optional, default = false.into())] + as_child: MaybeProp, + /// 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, + /// 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)); + // attribute interceptor incurs this requirement + let children = StoredValue::new(children.into_inner()); - view! { -
- {children.map(|children| children())} -
- } -} + // 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) + }); -#[component] -pub fn AspectRatio( - #[prop(into, optional)] ratio: MaybeProp, - #[prop(into, optional)] style: Style, - #[prop(optional)] children: Option, -) -> impl IntoView { - let attrs = use_aspect_ratio(UseAspectRatioProps { style }); + #[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()); + leptos::logging::log!("[{NAME}] padding_bottom: {:?}", padding_bottom.get()); + }); view! { - -
- {children.map(|children| children())} + // replicate the radix react spread props + + // ensures inner element is contained +
+ + {children.with_value(|children| children())} +
- + } } -#[component] -pub fn AspectRatioAsChild( - #[prop(into, optional)] ratio: MaybeProp, - #[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! { - - {render(attrs)} - - } -} +pub use AspectRatio as Root; From 585175bf9721783faf81324f048c1571c121748e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABlle=20Huisman?= Date: Sun, 11 May 2025 19:28:28 +0200 Subject: [PATCH 2/2] Cleanup --- Cargo.lock | 13 +- .../src/primitives/components/aspect-ratio.md | 112 +++++++----------- .../primitives/leptos/aspect-ratio/Cargo.toml | 2 +- .../leptos/aspect-ratio/src/aspect_ratio.rs | 73 +++--------- 4 files changed, 64 insertions(+), 136 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 1a81180..5ee673e 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2257,16 +2257,6 @@ dependencies = [ "send_wrapper", ] -[[package]] -name = "leptos-style" -version = "0.2.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c65408961a0bd8e70f317de8973d532a0cb9ffbac910c488d97f9c5a2e4411e2" -dependencies = [ - "indexmap", - "leptos", -] - [[package]] name = "leptos-typed-fallback-show" version = "0.2.0" @@ -3093,7 +3083,8 @@ name = "radix-leptos-aspect-ratio" version = "0.0.2" dependencies = [ "leptos", - "leptos-style", + "leptos-node-ref", + "radix-leptos-primitive", ] [[package]] diff --git a/book/src/primitives/components/aspect-ratio.md b/book/src/primitives/components/aspect-ratio.md index 5272bf0..ba52a3f 100644 --- a/book/src/primitives/components/aspect-ratio.md +++ b/book/src/primitives/components/aspect-ratio.md @@ -2,8 +2,8 @@ Displays content within a desired ratio. -{{#tabs global="framework"}} -{{#tab name="Leptos"}} +{{#tabs global="framework" }} +{{#tab name="Leptos" }} ```toml,trunk package = "radix-leptos-book-primitives" @@ -11,8 +11,8 @@ features = ["aspect-ratio"] files = ["src/aspect_ratio.rs"] ``` -{{#endtab}} -{{#tab name="Yew"}} +{{#endtab }} +{{#tab name="Yew" }} ```toml,trunk package = "radix-yew-book-primitives" @@ -20,80 +20,78 @@ features = ["aspect-ratio"] files = ["src/aspect_ratio.rs"] ``` -{{#endtab}} -{{#endtabs}} +{{#endtab }} +{{#endtabs }} ## Features -- Accepts any custom ratio. +- Accepts any custom ratio. ## Installation Install the component from your command line. -{{#tabs global="framework"}} -{{#tab name="Leptos"}} +{{#tabs global="framework" }} +{{#tab name="Leptos" }} ```shell cargo add radix-leptos-aspect-ratio ``` -- [View on crates.io](https://crates.io/crates/radix-leptos-aspect-ratio) -- [View on docs.rs](https://docs.rs/radix-leptos-aspect-ratio/latest/radix_leptos_aspect_ratio/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/aspect-ratio) +- [View on crates.io](https://crates.io/crates/radix-leptos-aspect-ratio) +- [View on docs.rs](https://docs.rs/radix-leptos-aspect-ratio/latest/radix_leptos_aspect_ratio/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/aspect-ratio) -{{#endtab}} -{{#tab name="Yew"}} +{{#endtab }} +{{#tab name="Yew" }} ```shell cargo add radix-yew-aspect-ratio ``` -- [View on crates.io](https://crates.io/crates/radix-yew-aspect-ratio) -- [View on docs.rs](https://docs.rs/radix-yew-aspect-ratio/latest/radix_yew_aspect_ratio/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/aspect-ratio) +- [View on crates.io](https://crates.io/crates/radix-yew-aspect-ratio) +- [View on docs.rs](https://docs.rs/radix-yew-aspect-ratio/latest/radix_yew_aspect_ratio/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/aspect-ratio) -{{#endtab}} -{{#endtabs}} +{{#endtab }} +{{#endtabs }} ## Anatomy -{{#tabs global="framework"}} -{{#tab name="Leptos"}} +Import the component. + +{{#tabs global="framework" }} +{{#tab name="Leptos" }} ```rust,ignore use leptos::*; -use radix_leptos_aspect_ratio as AspectRatio; +use radix_leptos_aspect_ratio::*; #[component] fn Anatomy() -> impl IntoView { view! { - -
"Constrained within the 16:9 ratio!"
- + } } ``` -{{#endtab}} -{{#tab name="Yew"}} +{{#endtab }} +{{#tab name="Yew" }} ```rust,ignore use radix_yew_aspect_ratio::*; -use yew::prelude::*; +use yew::prelude::::*; #[function_component] fn Anatomy() -> Html { html! { - - {"Constrained within the desired ratio!"} - + } } ``` -{{#endtab}} -{{#endtabs}} +{{#endtab }} +{{#endtabs }} ## API Reference @@ -101,47 +99,25 @@ fn Anatomy() -> Html { Contains the content you want to constrain to a given ratio. -{{#tabs global="framework"}} -{{#tab name="Leptos"}} +{{#tabs global="framework" }} +{{#tab name="Leptos" }} | Prop | Type | Default | -|------------|-------------------|---------| +| ---------- | ----------------- | ------- | | `as_child` | `MaybeProp` | `false` | -| `ratio` | `MaybeProp` | `1.0` | -| `node_ref` | `AnyNodeRef` | - | - -### Usage - -To use the `Root` alias for the `AspectRatio` component, import it and use `AspectRatio::Root` in your view. - -```rust,ignore -use leptos::*; -use radix_leptos_aspect_ratio as AspectRatio; - -#[component] -fn Example() -> impl IntoView { - view! { - - Example Image - - } -} -``` - -{{#endtab}} -{{#tab name="Yew"}} +| `ratio` | `Signal` | `1.0` | - +{{#endtab }} +{{#tab name="Yew" }} -| Prop | Type | Default | -|---------|-------|---------| -| `ratio` | `f64` | `1.0` | +| Prop | Type | Default | +| ---------- | ----------------------------------------------- | ------- | +| `as_child` | `Option>` | - | +| `ratio` | `f64` | `1.0` | -{{#endtab}} -{{#endtabs}} +{{#endtab }} +{{#endtabs }} ## See Also -- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/aspect-ratio) - -``` \ No newline at end of file +- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/aspect-ratio) diff --git a/packages/primitives/leptos/aspect-ratio/Cargo.toml b/packages/primitives/leptos/aspect-ratio/Cargo.toml index 23e5948..a63f649 100644 --- a/packages/primitives/leptos/aspect-ratio/Cargo.toml +++ b/packages/primitives/leptos/aspect-ratio/Cargo.toml @@ -12,4 +12,4 @@ version.workspace = true [dependencies] leptos.workspace = true leptos-node-ref.workspace = true -radix-leptos-primitive.workspace = true +radix-leptos-primitive = { path = "../primitive", version = "0.0.2" } diff --git a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs index 2590151..875b5ad 100644 --- a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs +++ b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs @@ -1,72 +1,37 @@ -use leptos::{prelude::*, html, attribute_interceptor::AttributeInterceptor}; -use radix_leptos_primitive::Primitive; +use leptos::{attribute_interceptor::AttributeInterceptor, html, prelude::*}; use leptos_node_ref::AnyNodeRef; - -const DEFAULT_RATIO: f64 = 1.0; - -/* ------------------------------------------------------------------------------------------------- - * AspectRatio - * -----------------------------------------------------------------------------------------------*/ - -const NAME: &'static str = "AspectRatio"; +use radix_leptos_primitive::Primitive; #[component] -#[allow(non_snake_case)] pub fn AspectRatio( - /// Children passed to the AspectRatio component + #[prop(into, optional, default = 1.0.into())] ratio: Signal, + #[prop(into, optional)] as_child: MaybeProp, + #[prop(optional)] node_ref: AnyNodeRef, children: TypedChildrenFn, - /// Change the default rendered element for the one passed as a child - #[prop(into, optional, default = false.into())] - as_child: MaybeProp, - /// 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, - /// Reference to the underlying DOM node - #[prop(into, optional)] - node_ref: AnyNodeRef, ) -> impl IntoView { - // attribute interceptor incurs this requirement let children = StoredValue::new(children.into_inner()); - // 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) - }); - - #[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()); - leptos::logging::log!("[{NAME}] padding_bottom: {:?}", padding_bottom.get()); - }); - view! { - // replicate the radix react spread props - // ensures inner element is contained
{children.with_value(|children| children())} @@ -74,7 +39,3 @@ pub fn AspectRatio( } } - -/* -----------------------------------------------------------------------------------------------*/ - -pub use AspectRatio as Root;