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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

use crate::theme::layers;
use crate::theme::prelude::*;
use dominator::{clone, events, html, with_node, Dom};
use dwind::prelude::*;
use futures_signals::signal::{Mutable, SignalExt};
use futures_signals_component_macro::component;
use std::sync::Arc;
use web_sys::wasm_bindgen::JsCast;

#[derive(Copy, Clone, Eq, PartialEq)]
pub enum PopoverPosition {
    BottomStart,
    BottomEnd,
    TopStart,
    TopEnd,
}

/// A generic anchored overlay panel.
///
/// Wraps the `anchor` content; while `open` is set, the panel renders beside
/// it (positioned like the tooltip, relative to the anchor's box). Escape and
/// clicks outside the wrapper invoke `on_close` — the open state itself stays
/// controlled by the caller.
#[component(render_fn = popover)]
struct Popover {
    #[signal]
    #[default(None)]
    anchor: Option<Dom>,

    #[signal]
    #[default(None)]
    content: Option<Dom>,

    #[signal]
    #[default(false)]
    open: bool,

    #[default(Box::new(|| {}))]
    on_close: dyn Fn() -> () + 'static,

    #[signal]
    #[default(PopoverPosition::BottomStart)]
    position: PopoverPosition,

    #[signal]
    #[default("Popover".to_string())]
    aria_label: String,
}

pub fn popover(props: PopoverProps) -> Dom {
    let PopoverProps {
        anchor,
        content,
        open,
        on_close,
        position,
        aria_label,
        apply,
    } = props;

    let on_close = Arc::new(on_close);
    let open = open.broadcast();
    let position = position.broadcast();
    let is_open = Mutable::new(false);

    html!("span", {
        .dwclass!("inline-block")
        .style("position", "relative")
        .future(open.signal().for_each(clone!(is_open => move |v| {
            is_open.set(v);
            async {}
        })))
        .global_event(clone!(on_close, is_open => move |e: events::KeyDown| {
            if is_open.get() && e.key() == "Escape" {
                (on_close)();
            }
        }))
        .with_node!(wrapper => {
            // A click anywhere outside the wrapper closes the popover
            .global_event(clone!(on_close, is_open => move |e: events::Click| {
                if !is_open.get() {
                    return;
                }

                let outside = e
                    .target()
                    .and_then(|t| t.dyn_into::<web_sys::Node>().ok())
                    .map(|node| !wrapper.contains(Some(&node)))
                    .unwrap_or(true);

                if outside {
                    (on_close)();
                }
            }))
        })
        .child_signal(anchor)
        .child(html!("div", {
            .attr_signal("aria-label", aria_label)
            .visible_signal(open.signal())
            .dwclass!("rounded-lg border shadow-lg p-2")
            .dwclass!("dwui-bg-void-800 dwui-border-void-700 dwui-text-on-primary-200")
            .dwclass!("is(.light *):dwui-bg-void-50 is(.light *):dwui-border-void-200 is(.light *):dwui-text-on-primary-800")
            .style("position", "absolute")
            .style("z-index", layers::OVERLAY)
            .style("width", "max-content")
            .style("animation", "dwui-modal-in 150ms ease-out")
            .style_signal("top", position.signal().map(|p| match p {
                PopoverPosition::BottomStart | PopoverPosition::BottomEnd => Some("calc(100% + 0.375rem)"),
                _ => None,
            }))
            .style_signal("bottom", position.signal().map(|p| match p {
                PopoverPosition::TopStart | PopoverPosition::TopEnd => Some("calc(100% + 0.375rem)"),
                _ => None,
            }))
            .style_signal("left", position.signal().map(|p| match p {
                PopoverPosition::BottomStart | PopoverPosition::TopStart => Some("0"),
                _ => None,
            }))
            .style_signal("right", position.signal().map(|p| match p {
                PopoverPosition::BottomEnd | PopoverPosition::TopEnd => Some("0"),
                _ => None,
            }))
            .child_signal(content)
        }))
        .apply_if(apply.is_some(), |b| b.apply(apply.unwrap()))
    })
}