Migration 0.21

Cargo.toml

@@ -2,7 +2,7 @@
 name = "ybc"
 version = "0.4.0"
 description = "A Yew component library based on the Bulma CSS framework."
-authors = ["Anthony Dodd <[email protected]>"]
+authors = ["Anthony Dodd <[email protected]>", "Konstantin Pupkov <[email protected]>"]
 edition = "2021"
 license = "MIT/Apache-2.0"
 repository = "https://github.com/thedodd/ybc"
@@ -13,11 +13,12 @@ keywords = ["wasm", "web", "bulma", "sass", "yew"]
 [dependencies]
 derive_more = { version = "0.99.17", default-features = false, features = ["display"] }
 web-sys = { version = "0.3.61", features = ["Element", "File", "HtmlCollection", "HtmlSelectElement"] }
-yew = { version = "0.20.0", features = ["csr"] }
-yew-agent = "0.2.0"
-yew-router = { version = "0.17.0", optional = true }
-wasm-bindgen = "0.2.84"
+yew = { version = "0.21.0", features = ["csr"] }
+yew-agent = "0.3.0"
+yew-router = { version = "0.18.0", optional = true }
+wasm-bindgen = "0.2"
 serde = { version = "1.0.152", features = ["derive"] }
+gloo-console = "0.3.0"
 
 [features]
 default = ["router"]

README.md

@@ -61,7 +61,7 @@ ybc = "*"
 
 ### add bulma
 #### add bulma css (no customizations)
-This project works perfectly well if you just include the Bulma CSS in your HTML, [as described here](https://bulma.io/documentation/overview/start/). The following link in your HTML head should do the trick: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>`.
+This project works perfectly well if you just include the Bulma CSS in your HTML, [as described here](https://bulma.io/documentation/overview/start/). The following link in your HTML head should do the trick: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@latest/css/bulma.min.css"/>`.
 
 #### add bulma sass (allows customization & themes)
 However, if you want to customize Bulma to match your style guidelines, then you will need to have a copy of the Bulma SASS locally, and then import Bulma after you've defined your customizations, [as described here](https://bulma.io/documentation/customize/).

examples/basic/Cargo.toml

@@ -6,10 +6,10 @@ edition = "2018"
 
 [dependencies]
 console_error_panic_hook = "0.1"
-gloo-console = "0.2"
+gloo-console = "0.3"
 wasm-bindgen = "0.2"
-ybc = { path = "../../" }
-yew = "0.20"
+ybc = { path = "../.." }
+yew = "0.21"
 
 [features]
 default = []

examples/basic/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>Trunk | Yew | YBC</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@latest/css/bulma.min.css"/>
 
     <link data-trunk rel="scss" href="src/index.scss"/>
     <link data-trunk rel="scss" data-inline href="src/inline-scss.scss"/>

examples/basic/src/main.rs

@@ -1,14 +1,20 @@
 #![recursion_limit = "1024"]
 
+use std::rc::Rc;
 use console_error_panic_hook::set_once as set_panic_hook;
 use wasm_bindgen::prelude::*;
 use ybc::TileCtx::{Ancestor, Child, Parent};
 use yew::prelude::*;
 
+
+use ybc::{ NavBurgerCloserState};
+
 #[function_component(App)]
 pub fn app() -> Html {
+    let state = Rc::new(NavBurgerCloserState { total_clicks: 0 });
     html! {
         <>
+        <ContextProvider<Rc<NavBurgerCloserState>> context={state}>
         <ybc::Navbar
             classes={classes!("is-success")}
             padded=true
@@ -31,13 +37,14 @@ pub fn app() -> Html {
                     </ybc::ButtonAnchor>
                 </ybc::NavbarItem>
                 <ybc::NavbarItem>
-                    <ybc::ButtonAnchor classes={classes!("is-black", "is-outlined")} rel={String::from("noopener noreferrer")} target={String::from("_blank")} href="https://github.com/thedodd/ybc">
+                    <ybc::ButtonAnchor classes={classes!("is-black", "is-outlined")} rel={String::from("noopener noreferrer")} target={String::from("_blank")} href="https://github.com/goodidea-kp/ybc">
                         {"YBC"}
                     </ybc::ButtonAnchor>
                 </ybc::NavbarItem>
                 </>
             }}
         />
+        </ContextProvider<Rc<NavBurgerCloserState>>>
 
         <ybc::Hero
             classes={classes!("is-light")}
@@ -65,6 +72,12 @@ pub fn app() -> Html {
                             <ybc::Tile ctx={Child} classes={classes!("notification", "is-success")}>
                                 <ybc::Subtitle size={ybc::HeaderSize::Is3} classes={classes!("has-text-white")}>{"YBC"}</ybc::Subtitle>
                                 <p>{"A Yew component library based on the Bulma CSS framework."}</p>
+                                <ModalCloserProvider id="id0">
+                                       <MyModal1/>
+                                </ModalCloserProvider>
+                                <ModalCloserProvider id="id2">
+                                    <MyModal2/>
+                                </ModalCloserProvider>
                             </ybc::Tile>
                         </ybc::Tile>
                     </ybc::Tile>
@@ -97,3 +110,94 @@ fn main() {
 
     yew::Renderer::<App>::new().render();
 }
+
+
+use ybc::ModalCloserProvider;
+use ybc::ModalCloserContext;
+
+
+#[function_component]
+pub fn MyModal1() -> Html {
+    let msg_ctx = use_context::<ModalCloserContext>().unwrap();
+    let onclick = {
+        Callback::from(move |e:MouseEvent| msg_ctx.dispatch( "id0-close".to_string().parse().unwrap()))
+    };
+    let on_click_cb = Callback::from(move |e: AttrValue| {
+        gloo_console::log!("Button clicked!");
+    });
+    html! {
+            <ybc::ModalCard
+                classes={classes!("")}
+                id={String::from("id0")}
+                title={"Modal"}
+                trigger={html!{
+                    <ybc::Button classes={classes!("is-success")}>
+                        {"Open Modal"}
+                    </ybc::Button>
+                }}
+         // on_clicked={on_click_cb}
+                body={
+                    html!{
+                    <ybc::Content>
+                        <p classes="has-text-green">{"This is the body of the modal."}</p>
+                    </ybc::Content>
+                    }
+                }
+                footer={html!(
+                      <>
+                        <ybc::Button classes={classes!("is-success")}>
+                            {"Save changes"}
+                        </ybc::Button>
+                        <ybc::Button classes={classes!("is-danger")} onclick={onclick}>
+                            {"Close"}
+                        </ybc::Button>
+                    </>
+                )}
+            />
+    }
+}
+
+#[function_component]
+pub fn MyModal2() -> Html {
+    let msg_ctx = use_context::<ModalCloserContext>().unwrap();
+    let onclick = {
+        Callback::from(move |e:MouseEvent| msg_ctx.dispatch( "id2-close".to_string().parse().unwrap()))
+    };
+    let msg_ctx2 = use_context::<ModalCloserContext>().unwrap();
+    let onsave = {
+        Callback::from(move |e:MouseEvent| msg_ctx2.dispatch( "id2-close".to_string().parse().unwrap()))
+    };
+    let on_click_cb = Callback::from(move |e: AttrValue| {
+        gloo_console::log!("Button clicked!");
+    });
+    html! {
+            <ybc::ModalCard
+                classes={classes!("")}
+                id={String::from("id2")}
+                title={"Modal2"}
+                trigger={html!{
+                    <ybc::Button classes={classes!("is-danger")}>
+                        {"Open Modal"}
+                    </ybc::Button>
+                }}
+                // on_clicked={on_click_cb}
+                body={
+                    html!{
+                    <ybc::Content>
+                        <p classes="has-text-green">{"This is the body of the modal2."}</p>
+                    </ybc::Content>
+                    }
+                }
+                footer={html!(
+                      <>
+                        <ybc::Button classes={classes!("is-success")} onclick={onsave}>
+                            {"Save changes"}
+                        </ybc::Button>
+                        <ybc::Button classes={classes!("is-danger")} onclick={onclick}>
+                            {"Close"}
+                        </ybc::Button>
+                    </>
+                )}
+            />
+    }
+}

src/components/dropdown.rs

@@ -61,7 +61,10 @@ impl Component for Dropdown {
             class.push("is-hoverable");
             Callback::noop()
         } else {
-            ctx.link().callback(|_| DropdownMsg::Open)
+            ctx.link().callback(|event: MouseEvent| {
+                event.prevent_default();
+                DropdownMsg::Open
+            })
         };
         let overlay = if self.is_menu_active {
             class.push("is-active");