yew_utils/lib.rs
1//! 
2//!
3//! [Yew](https://yew.rs/) is a great framework for building WebAssembly
4//! frontends with Rust. It's not exactly batteries included, however, and does
5//! rely quite a bit on macros. This crate is not an official companion crate,
6//! it just assembles a bunch of utilities and components I find convenient.
7//!
8//! ## yew_utils::vdom
9//!
10//! The `html!{}` macro can be convenient but it lacks code completion and
11//! typing start/end tags can get old. `yew_utils::vdom` allows creating yew
12//! nodes with simple Rust function calls.
13//!
14//! ```no_run
15//! use yew::prelude::*;
16//! use yew_utils::vdom::*;
17//! use gloo_utils::window;
18//! #[function_component(App)]
19//! fn app() -> Html {
20//! div()
21//! .append(h1().text("yew-utils vdom example"))
22//! .append(
23//! form().append_all([
24//! label()
25//! .attr("style", "font-weight: bold;")
26//! .text("a button: "),
27//! button().text("click").onclick(|_| {
28//! window().alert_with_message("hello").unwrap();
29//! }),
30//! ]),
31//! )
32//! .append(comp::<OtherComponent>())
33//! .into()
34//! }
35//!
36//! #[function_component(OtherComponent)]
37//! pub fn other_component() -> Html {
38//! text("hello from other component").into()
39//! }
40//! ```
41//!
42//! ## yew_utils::components
43//!
44//! A set of component. I'll likely add more over time. Currently it includes:
45//!
46//! ### [DropDown](yew_utils::components::DropDown)
47//! ```no_run
48//! use yew_utils::components::drop_down::{DropDown,DropDownProps};
49//! use yew_utils::vdom::*;
50//! use yew::prelude::*;
51//!
52//! # #[function_component(Example)]
53//! # fn example() -> Html {
54//! comp_with::<DropDown<&'static str>>(DropDownProps {
55//! initial: "item 1",
56//! options: vec!["item 1", "item 2", "item 3"],
57//! selection_changed: Callback::from(move |sel: &'static str| {
58//! gloo_utils::window()
59//! .alert_with_message(&format!("got selection: {sel:?}"))
60//! .unwrap();
61//! }),
62//! })
63//! # .into()
64//! # }
65//! ```
66//!
67//! ### [Table](yew_utils::components::Table)
68//!
69//! ```no_run
70//! use yew_utils::components::table::Table;
71//! use yew_utils::vdom::*;
72//! use yew::prelude::*;
73//!
74//! # #[function_component(Example)]
75//! # fn example() -> Html {
76//! let columns = Children::new(
77//! ["col1", "col2"].map(|ea| text(ea).to_vnode()).to_vec(),
78//! );
79//!
80//! let data = 0..5;
81//! let rows = data
82//! .into_iter()
83//! .map(|data| {
84//! tr().key(data.to_string())
85//! .append_all([
86//! td().text(data.to_string()),
87//! td().text(format!("{data} (col2)")),
88//! ])
89//! .to_vnode()
90//! })
91//! .collect::<Vec<_>>();
92//!
93//! let table = Table::render(columns, yew::Children::new(rows));
94//! # todo!();
95//! # }
96//! ```
97//!
98//! ## features
99//!
100//! ### `yew-router`
101//!
102//! _Not_ enabled by default.
103//!
104//! Will enable the vdom function [`yew_utils::vdom::yew_link(to: impl yew_router::Routable)`](vdom::yew_link). It is /not/ enabled by default.
105//!
106//! ### `mui-css`
107//!
108//! _Not_ enabled by default.
109//!
110//! This expects that you load the mui-css CSS and JS, e.g.:
111//!
112//! ```html
113//! <head>
114//! <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
115//! <script src="https://cdn.muicss.com/mui-0.10.3/js/mui.js"></script>
116//! </head>
117//! ```
118//!
119//! 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).
120
121// https://www.muicss.com/
122
123pub mod components;
124pub mod vdom;