dwui 0.10.0

UI Component library built on the DWIND style crate!
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

use crate::theme::prelude::*;
use dominator::{html, Dom};
use dwind::prelude::*;
use futures_signals::signal::SignalExt;
use futures_signals::signal_vec::SignalVecExt;
use futures_signals_component_macro::component;

/// A breadcrumb trail.
///
/// Renders a `<nav aria-label="Breadcrumb">` with one link per
/// `(label, href)` entry; the final entry is marked `aria-current="page"`
/// and rendered as plain text.
#[component(render_fn = breadcrumbs)]
struct Breadcrumbs {
    #[signal_vec]
    #[default(vec![])]
    items: (String, String),
}

pub fn breadcrumbs(props: BreadcrumbsProps) -> Dom {
    let BreadcrumbsProps { items, apply } = props;

    let items = items.to_signal_cloned().broadcast();

    html!("nav", {
        .attr("aria-label", "Breadcrumb")
        .child_signal(items.signal_cloned().map(|items| {
            let count = items.len();

            Some(html!("ol", {
                .dwclass!("flex flex-row flex-wrap align-items-center gap-2 p-0 m-0")
                .style("list-style", "none")
                .children(items.into_iter().enumerate().flat_map(|(index, (label, href))| {
                    let is_last = index + 1 == count;

                    let mut nodes = vec![];

                    if index > 0 {
                        nodes.push(html!("li", {
                            .attr("aria-hidden", "true")
                            .dwclass!("select-none dwui-text-on-primary-500 is(.light *):dwui-text-on-primary-500 text-sm")
                            .text("/")
                        }));
                    }

                    nodes.push(html!("li", {
                        .dwclass!("text-sm")
                        .apply(move |b| {
                            if is_last {
                                b.child(html!("span", {
                                    .attr("aria-current", "page")
                                    .dwclass!("dwui-text-on-primary-100 is(.light *):dwui-text-on-primary-900 font-medium")
                                    .text(&label)
                                }))
                            } else {
                                b.child(html!("a", {
                                    .attr("href", &href)
                                    .dwclass!("dwui-text-on-primary-400 hover:dwui-text-primary-300 is(.light *):dwui-text-on-primary-600 is(.light *):hover:dwui-text-primary-700")
                                    .dwclass!("transition-colors dwui-focusable")
                                    .style("text-decoration", "none")
                                    .text(&label)
                                }))
                            }
                        })
                    }));

                    nodes
                }).collect::<Vec<_>>())
            }))
        }))
        .apply_if(apply.is_some(), |b| b.apply(apply.unwrap()))
    })
}