dwui 0.9.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

use dominator::{html, Dom};
use dwind::flexbox_and_grid::*;
use dwind::sizing::*;
use dwind::typography::*;
use futures_signals::signal::{option, SignalExt};
use futures_signals_component_macro::component;

#[derive(Clone, Copy, Eq, PartialEq)]
pub enum TextSize {
    Base,
    Large,
    ExtraLarge,
}

/// Semantic heading level; controls the rendered `<h1>`-`<h6>` tag so that
/// documents keep a meaningful outline for assistive technology
#[derive(Clone, Copy, Eq, PartialEq)]
pub enum HeadingLevel {
    H1,
    H2,
    H3,
    H4,
    H5,
    H6,
}

impl HeadingLevel {
    fn tag_name(self) -> &'static str {
        match self {
            HeadingLevel::H1 => "h1",
            HeadingLevel::H2 => "h2",
            HeadingLevel::H3 => "h3",
            HeadingLevel::H4 => "h4",
            HeadingLevel::H5 => "h5",
            HeadingLevel::H6 => "h6",
        }
    }
}

/// Creates a heading component
///
/// # Example
/// ```rust,no_run
/// # use dominator::{html, text};
/// # use futures_signals::signal::always;
/// # use crate::dwui::prelude::*;
/// # use crate::dwui::heading;
/// html!("div", {
///     .child(heading!({
///         .apply(|b| b)
///         .content(text("Hi there"))
///         .content_signal(always(text("Hello there!")))
///         .text_size(TextSize::Large)
///         .text_size_signal(always(TextSize::Large))
///         .level(HeadingLevel::H2)
///     }))
/// });
/// ```
#[component(render_fn = heading)]
struct Heading {
    #[signal]
    content: Dom,

    #[signal]
    #[default(TextSize::ExtraLarge)]
    text_size: TextSize,

    #[default(HeadingLevel::H1)]
    level: HeadingLevel,
}

pub fn heading(props: HeadingProps) -> Dom {
    let HeadingProps {
        content,
        text_size: size,
        level,
        apply,
    } = props;

    let size = size.broadcast();
    html!("div", {
        .apply_if(apply.is_some(), |b| b.apply(apply.unwrap()))
        .dwclass!("w-auto font-semibold h-12 align-items-center flex")
        .child(html!(level.tag_name(), {
            .dwclass_signal!("text-base", size.signal().eq(TextSize::Base))
            .dwclass_signal!("text-l", size.signal().eq(TextSize::Large))
            .dwclass_signal!("text-xl", size.signal().eq(TextSize::ExtraLarge))
            .dwclass!("w-auto font-semibold")
            .child_signal(option(content))
        }))
    })
}