Feature/pagination

book-examples/leptos/Cargo.toml

@@ -19,22 +19,31 @@ log.workspace = true
 radix-leptos-icons = { workspace = true, optional = true }
 shadcn-ui-leptos-alert = { path = "../../packages/leptos/alert" , optional = true }
 shadcn-ui-leptos-badge = { path = "../../packages/leptos/badge", optional = true }
+shadcn-ui-leptos-breadcrumb = { path = "../../packages/leptos/breadcrumb", 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-pagination = { path = "../../packages/leptos/pagination", optional = true}
 
 [features]
 default = [
     "alert",
     "badge",
+    "breadcrumb",
     "button",
     "card",
+    "pagination",
 ]
 alert = [
     "dep:lucide-leptos",
     "dep:radix-leptos-icons",
     "dep:shadcn-ui-leptos-alert",
 ]
 badge = ["dep:shadcn-ui-leptos-badge"]
+breadcrumb = [
+    "dep:lucide-leptos",
+    "dep:radix-leptos-icons",
+    "dep:shadcn-ui-leptos-breadcrumb",
+]
 button = [
     "dep:lucide-leptos",
     "dep:radix-leptos-icons",
@@ -45,3 +54,4 @@ card = [
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
 ]
+pagination = ["dep:shadcn-ui-leptos-pagination"]

book-examples/leptos/src/default.rs

@@ -2,13 +2,22 @@ mod components;
 
 #[cfg(feature = "alert")]
 mod alert;
+
 #[cfg(feature = "badge")]
 mod badge;
+
+#[cfg(feature = "breadcrumb")]
+mod breadcrumb;
+
 #[cfg(feature = "button")]
 mod button;
+
 #[cfg(feature = "card")]
 mod card;
 
+#[cfg(feature = "pagination")]
+mod pagination;
+
 use leptos::prelude::*;
 use leptos_router::{
     components::{Outlet, ParentRoute},
@@ -22,6 +31,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::alert::AlertRoutes, ())
         },
+        #[cfg(feature = "breadcrumb")]
+        {
+            component_view(self::breadcrumb::BreadcrumbRoutes, ())
+        },
         #[cfg(feature = "badge")]
         {
             component_view(self::badge::BadgeRoutes, ())
@@ -34,6 +47,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "pagination")]
+        {
+            component_view(self::pagination::PaginationRoutes, ())
+        },
     );
 
     view! {

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

@@ -0,0 +1,28 @@
+#[allow(clippy::module_inception)]
+mod breadcrumb;
+mod breadcrumb_dropdown;
+mod breadcrumb_ellipsis;
+mod breadcrumb_link;
+mod breadcrumb_responsive;
+mod breadcrumb_separator;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn BreadcrumbRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/breadcrumb") view=Outlet>
+            <Route path=path!("/") view=breadcrumb::BreadcrumbDemo />
+            <Route path=path!("/dropdown") view=breadcrumb_dropdown::BreadcrumbDropdownDemo />
+            <Route path=path!("/ellipsis") view=breadcrumb_ellipsis::BreadcrumbEllipsisDemo/>
+            <Route path=path!("/link") view=breadcrumb_link::BreadcrumbLinkDemo/>
+            <Route path=path!("/responsive") view=breadcrumb_responsive::BreadcrumbResponsiveDemo/>
+            <Route path=path!("/separator") view=breadcrumb_separator::BreadcrumbSeparatorDemo/>
+        </ParentRoute>
+    }
+    .into_inner()
+}

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

@@ -0,0 +1,44 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::breadcrumb::{
+    Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
+    BreadcrumbSeparator,
+};
+
+#[component]
+pub fn BreadcrumbDemo() -> impl IntoView {
+    view! {
+        <Breadcrumb>
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <BreadcrumbLink href="#/">"Home"</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    // TODO
+                    // <DropdownMenu>
+                    //     <DropdownMenuTrigger class="flex items-center gap-1">
+                    //         <BreadcrumbEllipsis class="h-4 w-4" />
+                    //         <span class="sr-only">{"Toggle menu"}</span>
+                    //     </DropdownMenuTrigger>
+                    //     <DropdownMenuContent align="start">
+                    //         <DropdownMenuItem>{"Documentation"}</DropdownMenuItem>
+                    //         <DropdownMenuItem>{"Themes"}</DropdownMenuItem>
+                    //         <DropdownMenuItem>{"GitHub"}</DropdownMenuItem>
+                    //     </DropdownMenuContent>
+                    // </DropdownMenu>
+                    <BreadcrumbEllipsis class="h-4 w-4" />
+                    <span class="sr-only">"Toggle menu"</span>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbLink href="#/docs/components">"Components"</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbPage>"Breadcrumb"</BreadcrumbPage>
+                </BreadcrumbItem>
+            </BreadcrumbList>
+        </Breadcrumb>
+    }
+}

book-examples/leptos/src/default/breadcrumb/breadcrumb_dropdown.rs

@@ -0,0 +1,44 @@
+use leptos::prelude::*;
+use lucide_leptos::{ChevronDown, Slash};
+
+use crate::default::components::ui::breadcrumb::{
+    Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
+};
+
+#[component]
+pub fn BreadcrumbDropdownDemo() -> impl IntoView {
+    view! {
+        <Breadcrumb>
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <BreadcrumbLink href="#/">"Home"</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator>
+                    <Slash />
+                </BreadcrumbSeparator>
+                <BreadcrumbItem>
+                // TODO
+                    // <DropdownMenu>
+                    //     <DropdownMenuTrigger class="flex items-center gap-1">
+                    //         {"Components"}
+                    //         <ChevronDown class="h-4 w-4" />
+                    //     </DropdownMenuTrigger>
+                    //     <DropdownMenuContent align="start">
+                    //         <DropdownMenuItem>{"Documentation"}</DropdownMenuItem>
+                    //         <DropdownMenuItem>{"Themes"}</DropdownMenuItem>
+                    //         <DropdownMenuItem>{"GitHub"}</DropdownMenuItem>
+                    //     </DropdownMenuContent>
+                    // </DropdownMenu>
+                    "Components"
+                    <ChevronDown size=16 />
+                </BreadcrumbItem>
+                <BreadcrumbSeparator>
+                    <Slash />
+                </BreadcrumbSeparator>
+                <BreadcrumbItem>
+                    <BreadcrumbPage>"Breadcrumb"</BreadcrumbPage>
+                </BreadcrumbItem>
+            </BreadcrumbList>
+        </Breadcrumb>
+    }
+}

book-examples/leptos/src/default/breadcrumb/breadcrumb_ellipsis.rs

@@ -0,0 +1,45 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::breadcrumb::{
+    Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbLinkChildProps,
+    BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
+};
+
+#[component]
+pub fn BreadcrumbEllipsisDemo() -> impl IntoView {
+    view! {
+        <Breadcrumb>
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <BreadcrumbLink
+                        as_child={Callback::new(|BreadcrumbLinkChildProps {class, ..}| {
+                            view! {
+                                <a class={class} href="#/">"Home"</a>
+                            }
+                            .into_any()
+                        })}
+                    />
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbEllipsis />
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbLink
+                        as_child={Callback::new(|BreadcrumbLinkChildProps {class, ..}| {
+                            view! {
+                                <a class={class} href="#/docs/components">"Components"</a>
+                            }
+                            .into_any()
+                        })}
+                    />
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbPage>{"Breadcrumb"}</BreadcrumbPage>
+                </BreadcrumbItem>
+            </BreadcrumbList>
+        </Breadcrumb>
+    }
+}