Feature/label

Cargo.toml

@@ -26,6 +26,7 @@ leptos_router = "0.7.0-rc2"
 leptos-node-ref = "0.0.3"
 leptos-struct-component = "0.0.3"
 leptos-style = "0.0.3"
+#leptos-style = { git = "https://github.com/israelsilvabarbara/leptos-utils.git" , branch = "feature/IntoAttributeValue"}
 log = "0.4.21"
 lucide-leptos = "1.0.0"
 lucide-yew = "1.0.0"

book-examples/leptos/Cargo.toml

@@ -21,13 +21,19 @@ shadcn-ui-leptos-alert = { path = "../../packages/leptos/alert" , optional = tru
 shadcn-ui-leptos-badge = { path = "../../packages/leptos/badge", optional = true }
 shadcn-ui-leptos-button = { path = "../../packages/leptos/button", optional = true }
 shadcn-ui-leptos-card = { path = "../../packages/leptos/card", optional = true }
+shadcn-ui-leptos-label = { path = "../../packages/leptos/label", optional = true }
+
+
+[dev-dependencies]
+web-sys = "0.3"
 
 [features]
 default = [
     "alert",
     "badge",
     "button",
     "card",
+    "label",
 ]
 alert = [
     "dep:lucide-leptos",
@@ -45,3 +51,4 @@ card = [
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
 ]
+label = ["dep:shadcn-ui-leptos-label"]

book-examples/leptos/src/default.rs

@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "label")]
+mod label;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "label")]
+        {
+            component_view(self::label::LabelRoutes, ())
+        },
     );
 
     view! {

book-examples/leptos/src/default/components/ui.rs

@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::default as badge;
 pub use shadcn_ui_leptos_button::default as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::default as card;
+#[cfg(feature = "label")]
+pub use shadcn_ui_leptos_label::default as label;

book-examples/leptos/src/default/label.rs

@@ -0,0 +1,18 @@
+#[allow(clippy::module_inception)]
+mod label;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn LabelRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/label") view=Outlet>
+            <Route path=path!("/") view=label::LabelDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}

book-examples/leptos/src/default/label/label.rs

@@ -0,0 +1,19 @@
+use crate::default::components::ui::label::Label;
+use leptos::prelude::*;
+
+#[component]
+pub fn LabelDemo() -> impl IntoView {
+    view! {
+        <div>
+            <div class="flex items-center space-x-2">
+                // TODO
+                // <Checkbox id="terms" />
+                <Label
+                    r#for="terms"
+                >
+                    "I agree to the terms and conditions"
+                </Label>
+            </div>
+        </div>
+    }
+}

book-examples/leptos/src/new_york.rs

@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "label")]
+mod label;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn NewYork() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "label")]
+        {
+            component_view(self::label::LabelRoutes, ())
+        },
     );
 
     view! {

book-examples/leptos/src/new_york/components/ui.rs

@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::new_york as badge;
 pub use shadcn_ui_leptos_button::new_york as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::new_york as card;
+#[cfg(feature = "label")]
+pub use shadcn_ui_leptos_label::new_york as label;

book-examples/leptos/src/new_york/label.rs

@@ -0,0 +1,18 @@
+#[allow(clippy::module_inception)]
+mod label;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn LabelRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/label") view=Outlet>
+            <Route path=path!("/") view=label::LabelDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}

book-examples/leptos/src/new_york/label/label.rs

@@ -0,0 +1,16 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::label::Label;
+
+#[component]
+pub fn LabelDemo() -> impl IntoView {
+    view! {
+        <div>
+            <div class="flex items-center space-x-2">
+                // TODO
+                // <Checkbox id="terms" />
+                <Label r#for="terms">{"Accept terms and conditions"}</Label>
+            </div>
+        </div>
+    }
+}

packages/leptos/label/Cargo.toml

@@ -0,0 +1,19 @@
+[package]
+name = "shadcn-ui-leptos-label"
+description = "Leptos port of shadcn/ui Label."
+homepage = "https://shadcn-ui.rustforweb.org/components/label.html"
+publish = false
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+radix-leptos-label = { git = "https://github.com/RustForWeb/radix" }
+tailwind_fuse.workspace = true
+leptos.workspace = true
+leptos-style.workspace = true
+leptos-node-ref.workspace = true
+shadcn-ui-leptos-utils = { path = "../utils" }

packages/leptos/label/README.md

@@ -0,0 +1,21 @@
+<p align="center">
+    <a href="../../../logo.svg">
+        <img src="../../../logo.svg" width="300" height="200" alt="Rust shadcn/ui Logo">
+    </a>
+</p>
+
+<h1 align="center">shadcn-ui-leptos-label</h1>
+
+Renders an accessible label associated with controls.
+
+[Rust shadcn/ui](https://github.com/RustForWeb/shadcn-ui) is a Rust port of [shadcn/ui](https://ui.shadcn.com/).
+
+## Documentation
+
+See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/) for documentation.
+
+## Rust For Web
+
+The Rust shadcn/ui project is part of [Rust For Web](https://github.com/RustForWeb).
+
+[Rust For Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source.

packages/leptos/label/src/default.rs

@@ -0,0 +1,30 @@
+use leptos::{ev::MouseEvent, prelude::*};
+use leptos_style::Style;
+use radix_leptos_label::Label as LabelPrimitive;
+use shadcn_ui_leptos_utils::handlers::MaybeCallback;
+use tailwind_fuse::*;
+
+#[component]
+pub fn Label(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    // node_ref needs to be implemented into LabelPrimitive. Or implement IntoProperty,
+    //#[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] r#for: MaybeProp<String>,
+    #[prop(into, optional)] on_mouse_down: MaybeCallback<MouseEvent>,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <LabelPrimitive
+            attr:class=move || tw_merge!("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", class.get())
+            attr:style=style.get().to_string()
+            attr:id=id.get()
+            attr:r#for=r#for.get()
+            on_mouse_down=on_mouse_down
+        >
+            {children.map(|children| children())}
+        </LabelPrimitive>
+    }
+}

packages/leptos/label/src/lib.rs

@@ -0,0 +1,8 @@
+//! Leptos port of [shadcn/ui Label](https://ui.shadcn.com/docs/components/label).
+//!
+//! Renders an accessible label associated with controls.
+//!
+//! See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/components/label.html) for more documenation.
+
+pub mod default;
+pub mod new_york;

packages/leptos/label/src/new_york.rs

@@ -0,0 +1,30 @@
+use leptos::{ev::MouseEvent, prelude::*};
+use leptos_style::Style;
+use radix_leptos_label::Label as LabelPrimitive;
+use shadcn_ui_leptos_utils::handlers::MaybeCallback;
+use tailwind_fuse::*;
+
+#[component]
+pub fn Label(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    // node_ref needs to be implemented into LabelPrimitive. Or implement IntoProperty,
+    //#[prop(into, optional)] node_ref: AnyNodeRef,
+    #[prop(into, optional)] r#for: MaybeProp<String>,
+    #[prop(into, optional)] on_mouse_down: MaybeCallback<MouseEvent>,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
+    view! {
+        <LabelPrimitive
+            attr:class=move || tw_merge!("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", class.get())
+            attr:style=style.get().to_string()
+            attr:id=id.get()
+            attr:r#for=r#for.get()
+            on_mouse_down=on_mouse_down
+        >
+            {children.map(|children| children())}
+        </LabelPrimitive>
+    }
+}

packages/leptos/utils/src/lib.rs

@@ -6,3 +6,69 @@
 
 pub mod default;
 pub mod new_york;
+
+pub mod handlers {
+    use leptos::prelude::{Callable, Callback};
+
+    // Define an enum to handle both cases
+    #[derive(Default)]
+    pub enum MaybeCallback<T: 'static> {
+        Some(Callback<T>),
+        #[default]
+        None,
+    }
+
+    // Implement a convenience trait for conversion from Option
+    impl<T> From<Option<Callback<T>>> for MaybeCallback<T> {
+        fn from(option: Option<Callback<T>>) -> Self {
+            match option {
+                Some(callback) => MaybeCallback::Some(callback),
+                None => MaybeCallback::None,
+            }
+        }
+    }
+
+    // Implement a convenience trait for direct Callback
+    impl<T> From<Callback<T>> for MaybeCallback<T> {
+        fn from(callback: Callback<T>) -> Self {
+            MaybeCallback::Some(callback)
+        }
+    }
+
+    impl<T> From<MaybeCallback<T>> for Callback<T> {
+        fn from(val: MaybeCallback<T>) -> Self {
+            match val {
+                MaybeCallback::Some(callback) => callback,
+                MaybeCallback::None => Callback::new(move |_| {}),
+            }
+        }
+    }
+
+    // Define the function to accept MaybeCallback
+    pub fn generate_handler<T>(callback: impl Into<MaybeCallback<T>>) -> impl FnMut(T)
+    where
+        T: 'static,
+    {
+        let callback = callback.into();
+        move |event: T| {
+            if let MaybeCallback::Some(ref callback) = callback {
+                callback.run(event);
+            }
+        }
+    }
+
+    pub struct Handler;
+
+    impl Handler {
+        pub fn from<T>(callback: MaybeCallback<T>) -> impl FnMut(T)
+        where
+            T: 'static,
+        {
+            move |event: T| {
+                if let MaybeCallback::Some(callback) = callback {
+                    callback.run(event);
+                }
+            }
+        }
+    }
+}