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
93
94
95
96
97
98
99
100
101
102
103
104

use crate::theme::prelude::*;
use crate::utils::component_id;
use dominator::{clone, events, html, Dom};
use dwind::prelude::*;
use futures_signals::signal::{Mutable, SignalExt};
use futures_signals_component_macro::component;

#[derive(Copy, Clone, Eq, PartialEq)]
pub enum TooltipPosition {
    Top,
    Bottom,
    Left,
    Right,
}

/// A hover/focus tooltip.
///
/// Wraps the `anchor` content; the tooltip text appears on mouse hover or
/// keyboard focus (focus-within), is exposed via `role="tooltip"`, and is
/// linked from the wrapper with `aria-describedby`.
#[component(render_fn = tooltip)]
struct Tooltip {
    #[signal]
    #[default(None)]
    anchor: Option<Dom>,

    #[signal]
    #[default("".to_string())]
    text: String,

    #[signal]
    #[default(TooltipPosition::Top)]
    position: TooltipPosition,
}

pub fn tooltip(props: TooltipProps) -> Dom {
    let TooltipProps {
        anchor,
        text,
        position,
        apply,
    } = props;

    let position = position.broadcast();
    let visible = Mutable::new(false);

    let tooltip_id = component_id("tooltip");

    html!("span", {
        .attr("aria-describedby", &tooltip_id)
        .dwclass!("inline-block")
        .style("position", "relative")
        .event(clone!(visible => move |_: events::MouseEnter| {
            visible.set(true);
        }))
        .event(clone!(visible => move |_: events::MouseLeave| {
            visible.set(false);
        }))
        .event(clone!(visible => move |_: events::FocusIn| {
            visible.set(true);
        }))
        .event(clone!(visible => move |_: events::FocusOut| {
            visible.set(false);
        }))
        .child_signal(anchor)
        .child(html!("span", {
            .attr("id", &tooltip_id)
            .attr("role", "tooltip")
            .dwclass!("text-sm rounded-md p-l-2 p-r-2 p-t-1 p-b-1 shadow-lg pointer-events-none")
            .dwclass!("dwui-bg-void-700 dwui-text-on-primary-50")
            .dwclass!("is(.light *):dwui-bg-void-800 is(.light *):dwui-text-on-primary-50")
            .style("position", "absolute")
            .style("z-index", "40")
            .style("width", "max-content")
            .style("max-width", "16rem")
            .style("transition", "opacity 100ms ease-out")
            .style_signal("opacity", visible.signal().map(|v| if v { "1" } else { "0" }))
            .style_signal("top", position.signal().map(|p| match p {
                TooltipPosition::Top => Some("auto"),
                TooltipPosition::Bottom => Some("calc(100% + 6px)"),
                TooltipPosition::Left | TooltipPosition::Right => Some("50%"),
            }))
            .style_signal("bottom", position.signal().map(|p| match p {
                TooltipPosition::Top => Some("calc(100% + 6px)"),
                _ => None,
            }))
            .style_signal("left", position.signal().map(|p| match p {
                TooltipPosition::Top | TooltipPosition::Bottom => Some("50%"),
                TooltipPosition::Right => Some("calc(100% + 6px)"),
                TooltipPosition::Left => None,
            }))
            .style_signal("right", position.signal().map(|p| match p {
                TooltipPosition::Left => Some("calc(100% + 6px)"),
                _ => None,
            }))
            .style_signal("transform", position.signal().map(|p| match p {
                TooltipPosition::Top | TooltipPosition::Bottom => "translateX(-50%)",
                TooltipPosition::Left | TooltipPosition::Right => "translateY(-50%)",
            }))
            .text_signal(text)
        }))
        .apply_if(apply.is_some(), |b| b.apply(apply.unwrap()))
    })
}