diff --git a/book/src/primitives/components/separator.md b/book/src/primitives/components/separator.md index 66293d60..7201f734 100644 --- a/book/src/primitives/components/separator.md +++ b/book/src/primitives/components/separator.md @@ -25,12 +25,10 @@ files = ["src/separator.rs"] ## Features -- Supports horizontal and vertical orientations. +- Supports horizontal and vertical orientations. ## Installation -Install the component from your command line. - {{#tabs global="framework" }} {{#tab name="Leptos" }} @@ -38,9 +36,9 @@ Install the component from your command line. cargo add radix-leptos-separator ``` -- [View on crates.io](https://crates.io/crates/radix-leptos-separator) -- [View on docs.rs](https://docs.rs/radix-leptos-separator/latest/radix_leptos_separator/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/separator) +- [View on crates.io](https://crates.io/crates/radix-leptos-separator) +- [View on docs.rs](https://docs.rs/radix-leptos-separator/latest/radix_leptos_separator/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/separator) {{#endtab }} {{#tab name="Yew" }} @@ -49,17 +47,15 @@ cargo add radix-leptos-separator cargo add radix-yew-separator ``` -- [View on crates.io](https://crates.io/crates/radix-yew-separator) -- [View on docs.rs](https://docs.rs/radix-yew-separator/latest/radix_yew_separator/) -- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/separator) +- [View on crates.io](https://crates.io/crates/radix-yew-separator) +- [View on docs.rs](https://docs.rs/radix-yew-separator/latest/radix_yew_separator/) +- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/separator) {{#endtab }} {{#endtabs }} ## Anatomy -Import the component. - {{#tabs global="framework" }} {{#tab name="Leptos" }} @@ -79,10 +75,10 @@ fn Anatomy() -> impl IntoView { {{#tab name="Yew" }} ```rust,ignore -use radix_yew_separator::*; use yew::prelude::*; +use radix_yew_separator::*; -#[component] +#[function_component] fn Anatomy() -> Html { html! { @@ -97,39 +93,41 @@ fn Anatomy() -> Html { ### Root -The separator. +The separator component. {{#tabs global="framework" }} {{#tab name="Leptos" }} -| Prop | Type | Default | -| ------------- | ------------------------ | ------------------------- | -| `as_child` | `MaybeProp` | `false` | -| `orientation` | `MaybeProp` | `Orientation::Horizontal` | -| `decorative` | `MaybeProp` | `false` | +| Prop | Type | Default | Description | +|---------------|--------------------------|---------------------------|------------------------------------------------------------------------------------------------------| +| `as_child` | `MaybeProp` | `false` | If `true`, renders only its children without the default wrapper. | +| `orientation` | `MaybeProp` | `Orientation::Horizontal` | Determines whether the separator is horizontal or vertical. | +| `decorative` | `MaybeProp` | `false` | If `true`, the separator is considered purely visual, and does not appear in the accessibility tree. | {{#endtab }} {{#tab name="Yew" }} -| Prop | Type | Default | -| ------------- | --------------------------------------------- | ------------------------- | -| `as_child` | `Option>` | - | -| `orientation` | `Orientation` | `Orientation::Horizontal` | -| `decorative` | `bool` | `false` | +| Prop | Type | Default | Description | +|---------------|-----------------------------------------------|---------------------------|------------------------------------------------------------------------------------------------------| +| `as_child` | `Option>` | - | If present, renders only its children without the default wrapper. | +| `orientation` | `Orientation` | `Orientation::Horizontal` | Determines whether the separator is horizontal or vertical. | +| `decorative` | `bool` | `false` | If `true`, the separator is considered purely visual, and does not appear in the accessibility tree. | {{#endtab }} {{#endtabs }}
-| Data attribute | Values | -| -------------------- | ---------------------------- | -| `[data-orientation]` | `"horizontal" \| "vertical"` | +**Data attributes**: + +| Data Attribute | Values | +|----------------------|--------------------------------| +| `[data-orientation]` | `"horizontal"` \| `"vertical"` | ## Accessibility -Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). +Adheres to the [separator role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). ## See Also -- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/separator) +- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/separator) diff --git a/packages/primitives/leptos/separator/Cargo.toml b/packages/primitives/leptos/separator/Cargo.toml index 2a5ba5f5..3f655041 100644 --- a/packages/primitives/leptos/separator/Cargo.toml +++ b/packages/primitives/leptos/separator/Cargo.toml @@ -2,7 +2,6 @@ name = "radix-leptos-separator" description = "Leptos port of Radix Separator." homepage = "https://radix.rustforweb.org/primitives/components/separator.html" - authors.workspace = true edition.workspace = true license.workspace = true @@ -11,3 +10,5 @@ version.workspace = true [dependencies] leptos.workspace = true +leptos-node-ref.workspace = true +radix-leptos-primitive.workspace = true \ No newline at end of file diff --git a/packages/primitives/leptos/separator/src/separator.rs b/packages/primitives/leptos/separator/src/separator.rs index de12af6f..d5841e0a 100644 --- a/packages/primitives/leptos/separator/src/separator.rs +++ b/packages/primitives/leptos/separator/src/separator.rs @@ -1,6 +1,8 @@ use std::fmt::{Display, Formatter}; - -use leptos::{html::AnyElement, *}; +use leptos::prelude::*; +use leptos::html; +use leptos_node_ref::AnyNodeRef; +use radix_leptos_primitive::Primitive; #[derive(Clone, Copy, Debug, Default, Eq, Hash, PartialEq)] pub enum Orientation { @@ -22,61 +24,53 @@ impl Display for Orientation { } } -impl IntoAttribute for Orientation { - fn into_attribute(self) -> Attribute { - Attribute::String(self.to_string().into()) +impl From<&str> for Orientation { + fn from(s: &str) -> Self { + match s.to_lowercase().as_str() { + "vertical" => Orientation::Vertical, + _ => Orientation::Horizontal, + } } +} - fn into_attribute_boxed(self: Box) -> Attribute { - self.into_attribute() +impl From for Orientation { + fn from(s: String) -> Self { + Self::from(s.as_str()) } } #[component] +#[allow(non_snake_case)] pub fn Separator( #[prop(into, optional)] orientation: MaybeProp, #[prop(into, optional)] decorative: MaybeProp, #[prop(into, optional)] as_child: MaybeProp, - #[prop(optional)] node_ref: NodeRef, - #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, + #[prop(into, optional)] node_ref: AnyNodeRef, + #[prop(into, optional)] class: MaybeProp, + // if as_child=true, there will be no attribute passthrough to the children, + // but we opt for this design so we can allow children to be optional. #[prop(optional)] children: Option, ) -> impl IntoView { let children = StoredValue::new(children); - let orientation = Signal::derive(move || orientation.get().unwrap_or_default()); - let aria_orientation = Signal::derive(move || match orientation.get() { - Orientation::Horizontal => None, - Orientation::Vertical => Some("vertical".to_string()), - }); let decorative = Signal::derive(move || decorative.get().unwrap_or_default()); - - let mut attrs = attrs.clone(); - attrs.extend([ - ("data-orientation", orientation.into_attribute()), - ( - "aria-orientation", - (match decorative.get() { - true => aria_orientation.get(), - false => None, - }) - .into_attribute(), - ), - ( - "role", - (match decorative.get() { - true => "none", - false => "separator", - }) - .into_attribute(), - ), - ]); - view! { Some("vertical".to_string()), + Orientation::Horizontal => None, + } + } else { + None + } + } + attr:role=move || if decorative.get() { "none" } else { "separator" } > {children.with_value(|children| children.as_ref().map(|children| children()))} diff --git a/stories/leptos/src/primitives.rs b/stories/leptos/src/primitives.rs index 4af00626..43a1e6cd 100644 --- a/stories/leptos/src/primitives.rs +++ b/stories/leptos/src/primitives.rs @@ -12,7 +12,7 @@ pub mod label; // pub mod portal; // pub mod presence; // pub mod progress; -// pub mod separator; +pub mod separator; // pub mod slot; // pub mod switch; // pub mod toggle; diff --git a/stories/leptos/src/primitives/separator.rs b/stories/leptos/src/primitives/separator.rs index 536431ee..5242e2e0 100644 --- a/stories/leptos/src/primitives/separator.rs +++ b/stories/leptos/src/primitives/separator.rs @@ -1,4 +1,4 @@ -use leptos::*; +use leptos::prelude::*; use radix_leptos_separator::*; use tailwind_fuse::*;