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
//! 
//!
//! [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!();
//! # }
//! ```
//!
//! ## features
//!
//! ### `yew-router`
//!
//! _Not_ enabled by default.
//!
//! Will enable the vdom function [`yew_utils::vdom::yew_link(to: impl yew_router::Routable)`](vdom::yew_link). It is /not/ enabled by default.
//!
//! ### `mui-css`
//!
//! _Not_ enabled by default.
//!
//! This expects that you load the mui-css CSS and JS, e.g.:
//!
//! ```html
//! <head>
//! <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
//! <script src="https://cdn.muicss.com/mui-0.10.3/js/mui.js"></script>
//! </head>
//! ```
//!
//! Will replace the [`yew_utils::components::drop_down::DropDown`](components::drop_down::DropDown) component with a version that is styled with [mui-css](https://www.muicss.com/), in particular see [mui-css dropdowns](https://www.muicss.com/docs/v1/css-js/dropdowns).
// https://www.muicss.com/