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

//! [Yew](https://yew.rs/) is a great framework for building WebAssembly
//! frontends with Rust. It's not exactly batteries included, however, and does
//! rely quite a bit on macros. This crate is not an official companion crate,
//! it just assembles a bunch of utilities and components I find convenient.
//!
//! ## yew_utils::vdom
//!
//! The `html!{}` macro can be convenient but it lacks code completion and
//! typing start/end tags can get old. `yew_utils::vdom` allows creating yew
//! nodes with simple Rust function calls.
//!
//! ```no_run
//! use yew::prelude::*;
//! use yew_utils::vdom::*;
//! use gloo_utils::window;
//! #[function_component(App)]
//! fn app() -> Html {
//!   div()
//!       .append(h1().text("yew-utils vdom example"))
//!       .append(
//!           form().append_all([
//!               label()
//!                   .attr("style", "font-weight: bold;")
//!                   .text("a button: "),
//!               button().text("click").onclick(|_| {
//!                   window().alert_with_message("hello").unwrap();
//!               }),
//!           ]),
//!       )
//!       .append(comp::<OtherComponent>())
//!       .into()
//! }
//!
//! #[function_component(OtherComponent)]
//! pub fn other_component() -> Html {
//!     text("hello from other component").into()
//! }
//! ```
//!
//! ## yew_utils::components
//!
//! A set of component. I'll likely add more over time. Currently it includes:
//!
//! ### [DropDown](yew_utils::components::DropDown)
//! ```no_run
//! use yew_utils::components::drop_down::{DropDown,DropDownProps};
//! use yew_utils::vdom::*;
//! use yew::prelude::*;
//!
//! # #[function_component(Example)]
//! # fn example() -> Html {
//! comp_with::<DropDown<&'static str>>(DropDownProps {
//!     initial: "item 1",
//!     options: vec!["item 1", "item 2", "item 3"],
//!     selection_changed: Callback::from(move |sel: &'static str| {
//!         gloo_utils::window()
//!             .alert_with_message(&format!("got selection: {sel:?}"))
//!             .unwrap();
//!     }),
//! })
//! # .into()
//! # }
//! ```
//!
//! ### [Table](yew_utils::components::Table)
//!
//! ```no_run
//! use yew_utils::components::table::Table;
//! use yew_utils::vdom::*;
//! use yew::prelude::*;
//!
//! # #[function_component(Example)]
//! # fn example() -> Html {
//! let columns = Children::new(
//!     ["col1", "col2"].map(|ea| text(ea).to_vnode()).to_vec(),
//! );
//!
//! let data = 0..5;
//! let rows = data
//!     .into_iter()
//!     .map(|data| {
//!         tr().key(data.to_string())
//!             .append_all([
//!                 td().text(data.to_string()),
//!                 td().text(format!("{data} (col2)")),
//!             ])
//!             .to_vnode()
//!     })
//!     .collect::<Vec<_>>();
//!
//! let table = Table::render(columns, yew::Children::new(rows));
//! # todo!();
//! # }
//! ```

pub mod components;
pub mod vdom;