Update Separator to Leptos 0.7

Cargo.toml

@@ -22,6 +22,7 @@ members = [
     "packages/primitives/leptos/id",
     "packages/primitives/leptos/label",
     "packages/primitives/leptos/primitive",
+    "packages/primitives/leptos/separator",
     "packages/primitives/leptos/use-controllable-state",
     "packages/primitives/leptos/use-escape-keydown",
     "packages/primitives/leptos/use-previous",

book-examples/leptos/primitives/Cargo.toml

@@ -20,7 +20,7 @@ radix-leptos-aspect-ratio = { path = "../../../packages/primitives/leptos/aspect
 # radix-leptos-icons = { path = "../../../packages/icons/leptos", optional = true }
 radix-leptos-label = { path = "../../../packages/primitives/leptos/label", optional = true }
 # radix-leptos-progress = { path = "../../../packages/primitives/leptos/progress", optional = true }
-# radix-leptos-separator = { path = "../../../packages/primitives/leptos/separator", optional = true }
+radix-leptos-separator = { path = "../../../packages/primitives/leptos/separator", optional = true }
 # radix-leptos-switch = { path = "../../../packages/primitives/leptos/switch", optional = true }
 # radix-leptos-toggle = { path = "../../../packages/primitives/leptos/toggle", optional = true }
 
@@ -40,12 +40,11 @@ avatar = []
 checkbox = []
 label = ["dep:radix-leptos-label"]
 progress = []
-separator = []
+separator = ["dep:radix-leptos-separator"]
 switch = []
 toggle = []
 # avatar = ["dep:radix-leptos-avatar"]
 # checkbox = ["dep:radix-leptos-checkbox", "dep:radix-leptos-icons"]
 # progress = ["dep:radix-leptos-progress"]
-# separator = ["dep:radix-leptos-separator"]
 # switch = ["dep:radix-leptos-switch"]
 # toggle = ["dep:radix-leptos-toggle", "dep:radix-leptos-icons"]

book-examples/leptos/primitives/src/main.rs

@@ -10,8 +10,8 @@ mod aspect_ratio;
 mod label;
 // #[cfg(feature = "progress")]
 // mod progress;
-// #[cfg(feature = "separator")]
-// mod separator;
+#[cfg(feature = "separator")]
+mod separator;
 // #[cfg(feature = "switch")]
 // mod switch;
 // #[cfg(feature = "toggle")]

book-examples/leptos/primitives/src/separator.rs

@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use radix_leptos_separator::*;
 
 #[component]

packages/primitives/leptos/separator/Cargo.toml

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

packages/primitives/leptos/separator/src/separator.rs

@@ -1,6 +1,8 @@
 use std::fmt::{Display, Formatter};
 
-use leptos::{html::AnyElement, *};
+use leptos::{html, prelude::*};
+use leptos_node_ref::AnyNodeRef;
+use radix_leptos_primitive::Primitive;
 
 #[derive(Clone, Copy, Debug, Default, Eq, Hash, PartialEq)]
 pub enum Orientation {
@@ -22,61 +24,36 @@ impl Display for Orientation {
     }
 }
 
-impl IntoAttribute for Orientation {
-    fn into_attribute(self) -> Attribute {
-        Attribute::String(self.to_string().into())
-    }
-
-    fn into_attribute_boxed(self: Box<Self>) -> Attribute {
-        self.into_attribute()
-    }
-}
-
 #[component]
 pub fn Separator(
     #[prop(into, optional)] orientation: MaybeProp<Orientation>,
     #[prop(into, optional)] decorative: MaybeProp<bool>,
     #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
     #[prop(optional)] children: Option<ChildrenFn>,
 ) -> 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! {
         <Primitive
             element=html::div
             as_child=as_child
             node_ref=node_ref
-            attrs=attrs
+            attr:data-orientation=move || orientation.get().to_string()
+            attr:aria-orientation=move || {
+                if decorative.get() {
+                    None
+                } else {
+                    match orientation.get() {
+                        Orientation::Vertical => Some("vertical".to_owned()),
+                        Orientation::Horizontal => None,
+                    }
+                }
+            }
+            attr:role=move || if decorative.get() { "none" } else { "separator" }
         >
             {children.with_value(|children| children.as_ref().map(|children| children()))}
         </Primitive>

stories/leptos/Cargo.toml

@@ -30,7 +30,7 @@ radix-leptos-label = { path = "../../packages/primitives/leptos/label" }
 # ] }
 # radix-leptos-presence = { path = "../../packages/primitives/leptos/presence" }
 # radix-leptos-progress = { path = "../../packages/primitives/leptos/progress" }
-# radix-leptos-separator = { path = "../../packages/primitives/leptos/separator" }
+radix-leptos-separator = { path = "../../packages/primitives/leptos/separator" }
 # radix-leptos-switch = { path = "../../packages/primitives/leptos/switch" }
 # radix-leptos-toggle = { path = "../../packages/primitives/leptos/toggle" }
 radix-leptos-visually-hidden = { path = "../../packages/primitives/leptos/visually-hidden" }

stories/leptos/src/app.rs

@@ -4,7 +4,7 @@ use leptos_router::{
     path,
 };
 
-use crate::primitives::{accessible_icon, arrow, aspect_ratio, label, visually_hidden};
+use crate::primitives::{accessible_icon, arrow, aspect_ratio, label, separator, visually_hidden};
 
 #[component]
 fn NavLink<H>(href: H, children: Children) -> impl IntoView
@@ -160,13 +160,13 @@ pub fn App() -> impl IntoView {
                     //         <li><NavLink href="/progress/chromatic">Chromatic</NavLink></li>
                     //     </ul>
                     // </li>
-                    // <li>
-                    //     Separator
+                    <li>
+                        Separator
 
-                    //     <ul class="list-none m-0 ms-4 p-0">
-                    //         <li><NavLink href="/separator/styled">Styled</NavLink></li>
-                    //     </ul>
-                    // </li>
+                        <ul class="list-none m-0 ms-4 p-0">
+                            <li><NavLink href="/separator/styled">Styled</NavLink></li>
+                        </ul>
+                    </li>
                     // <li>
                     //     Slot
 
@@ -267,7 +267,7 @@ pub fn App() -> impl IntoView {
                     // <Route path="/progress/styled" view=progress::Styled />
                     // <Route path="/progress/chromatic" view=progress::Chromatic />
 
-                    // <Route path="/separator/styled" view=separator::Styled />
+                    <Route path=path!("/separator/styled") view=separator::Styled />
 
                     // <Route path="/slot/without-slottable" view=slot::WithoutSlottable />
                     // <Route path="/slot/with-slottable" view=slot::WithSlottable />

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;

stories/leptos/src/primitives/separator.rs

@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use radix_leptos_separator::*;
 use tailwind_fuse::*;