From 3b6377a10d3ef5c6bc8e202f6915c501d575f910 Mon Sep 17 00:00:00 2001 From: sfisol Date: Mon, 23 Dec 2024 13:33:54 +0100 Subject: [PATCH] `css` attribute in `dom!` macro now accepts `&Css` (referenced) for convenience --- CHANGES.md | 6 + crates/vertigo/src/dom/attr_value.rs | 6 + demo/app/src/app/counters/mod.rs | 26 ++--- .../src/app/counters/simple_counter/mod.rs | 28 ++--- demo/app/src/app/game_of_life/component.rs | 42 +++---- demo/app/src/app/github_explorer/component.rs | 24 ++-- demo/app/src/app/sudoku/component/mod.rs | 110 +++++++++++------- 7 files changed, 134 insertions(+), 108 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 4032765a..bc5b1f91 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,6 +1,12 @@ +## Unreleased + +### Added + +* `css` attribute in `dom!` macro now accepts `&Css` (referenced) for convenience + ## 0.6.1 - 2024-12-18 ### Added diff --git a/crates/vertigo/src/dom/attr_value.rs b/crates/vertigo/src/dom/attr_value.rs index 0adbf5af..a2d01201 100644 --- a/crates/vertigo/src/dom/attr_value.rs +++ b/crates/vertigo/src/dom/attr_value.rs @@ -72,3 +72,9 @@ impl From> for CssAttrValue { CssAttrValue::Computed(value) } } + +impl From<&Css> for CssAttrValue { + fn from(value: &Css) -> Self { + CssAttrValue::Css(value.clone()) + } +} diff --git a/demo/app/src/app/counters/mod.rs b/demo/app/src/app/counters/mod.rs index 64875a56..12862c1e 100644 --- a/demo/app/src/app/counters/mod.rs +++ b/demo/app/src/app/counters/mod.rs @@ -1,4 +1,4 @@ -use vertigo::{Computed, Value, dom, include_static, css, component}; +use vertigo::{component, css, dom, include_static, Computed, Value}; mod simple_counter; use simple_counter::SimpleCounter; @@ -40,13 +40,11 @@ impl State { counter2, counter3, counter4, - sum + sum, } } } - - #[component] fn Sum(sum: Computed) { dom! { @@ -60,31 +58,27 @@ fn Sum(sum: Computed) { pub fn CountersDemo(state: State) { let path = include_static!("./counter.webp"); - let center_css = css!(" + let center_base = css! {" border: 1px solid black; padding: 1px; margin: 0 auto; display: block; cursor: pointer; - box-shadow: 4px 4px 4px #444, 8px 8px 4px #666, 12px 12px 4px #888; transition: all .2s ease-in-out; + "}; + + let center_css = center_base.clone().extend(css! {" + box-shadow: 4px 4px 4px #444, 8px 8px 4px #666, 12px 12px 4px #888; + :hover { transform: scale(1.1); } - "); - - let center_css2 = css!(" - border: 1px solid black; - padding: 1px; - margin: 0 auto; - display: block; - - cursor: pointer; + "}); + let center_css2 = center_base.push_str(" box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5), 8px 8px 4px rgba(0, 0, 0, 0.4), 12px 12px 4px rgba(0, 0, 0, 0.3); - transition: all .2s ease-in-out; :hover { transform: scale(1.5); box-shadow: 54px 54px 14px rgba(0, 0, 0, 0.3), 58px 58px 14px rgba(0, 0, 0, 0.2), 62px 62px 14px rgba(0, 0, 0, 0.1); diff --git a/demo/app/src/app/counters/simple_counter/mod.rs b/demo/app/src/app/counters/simple_counter/mod.rs index 0c84432f..6dd2b0a4 100644 --- a/demo/app/src/app/counters/simple_counter/mod.rs +++ b/demo/app/src/app/counters/simple_counter/mod.rs @@ -1,47 +1,47 @@ -use vertigo::{Value, transaction, Computed, component}; use vertigo::{bind, css, dom}; +use vertigo::{component, transaction, Computed, Value}; #[component] /// Shows counter with label pub fn SimpleCounter(label: Computed, value: Value) { let click_up = bind!(value, || { - transaction(|context|{ + transaction(|context| { value.set(value.get(context) + 1); }); }); let click_down = bind!(value, || { - transaction(|context|{ + transaction(|context| { value.set(value.get(context) - 1); }); }); - let css_wrapper = css!(" + let css_wrapper = css! {" border: 1px solid black; margin: 5px 0; - "); + "}; - let css_box = || css!(" + let css_box = css! {" margin: 5px; - "); + "}; - let css_button = || css_box().push_str(" + let css_button = css_box.clone().extend(css! {" display: block; cursor: pointer; - "); + "}); - let css_wrapper_buttons = css!(" + let css_wrapper_buttons = css! {" display: flex; - "); + "}; dom! {
-
+
{label} " = " {value}
- - + +
} diff --git a/demo/app/src/app/game_of_life/component.rs b/demo/app/src/app/game_of_life/component.rs index 568f7535..80cc21a0 100644 --- a/demo/app/src/app/game_of_life/component.rs +++ b/demo/app/src/app/game_of_life/component.rs @@ -1,21 +1,21 @@ use std::rc::Rc; -use vertigo::{css, Value, bind, DomNode, dom, transaction, DomElement, dom_element}; +use vertigo::{bind, css, dom, dom_element, transaction, DomElement, DomNode, Value}; pub use super::State; pub struct GameOfLife { - pub state: State + pub state: State, } impl GameOfLife { pub fn mount(&self) -> DomNode { let matrix = &self.state.matrix; - let css_wrapper = css!(" + let css_wrapper = css! {" border: 1px solid black; padding: 10px; margin: 10px; background-color: #e0e0e0; - "); + "}; dom! {
@@ -32,15 +32,9 @@ impl GameOfLife { } fn render_header(state: &State) -> DomNode { - let year = state.year.map(|item| { - item.to_string() - }); - let delay = state.delay.map(|item| { - item.to_string() - }); - let new_delay = state.new_delay.map(|item| { - item.to_string() - }); + let year = state.year.map(|item| item.to_string()); + let delay = state.delay.map(|item| item.to_string()); + let new_delay = state.new_delay.map(|item| item.to_string()); let on_toggle_timer = { let state = state.clone(); @@ -68,15 +62,15 @@ impl GameOfLife { state.new_delay.set(new_value.parse().unwrap_or_default()); }); - let flex_menu = css!(" + let flex_menu = css! {" display: flex; gap: 40px; margin-bottom: 5px; - "); + "}; - let css_button = || css!(" + let css_button = css! {" cursor: pointer; - "); + "}; dom! {
@@ -87,10 +81,10 @@ impl GameOfLife { "Year = " { year }
- - +
@@ -98,7 +92,7 @@ impl GameOfLife {
"Set delay: " - " " + " "
} @@ -117,11 +111,11 @@ impl GameOfLife { } fn render_row(matrix: &[Value]) -> DomElement { - let css_row = css!(" + let css_row = css! {" display: flex; flex-direction: row; height: 10px; - "); + "}; let wrapper = dom_element! {
@@ -137,12 +131,12 @@ impl GameOfLife { fn render_cell(cell: &Value) -> DomNode { let css_cell = |is_active: bool| { let color = if is_active { "black" } else { "white" }; - css!(" + css! {" width: 10px; height: 10px; cursor: pointer; background-color: { color }; - ") + "} }; let css_computed = cell.map(css_cell); diff --git a/demo/app/src/app/github_explorer/component.rs b/demo/app/src/app/github_explorer/component.rs index 0f2543f6..d49fedb8 100644 --- a/demo/app/src/app/github_explorer/component.rs +++ b/demo/app/src/app/github_explorer/component.rs @@ -1,9 +1,9 @@ -use vertigo::{css, Resource, bind, dom, Computed, transaction, DomNode}; +use vertigo::{bind, css, dom, transaction, Computed, DomNode, Resource}; use super::State; pub struct GitHubExplorer { - pub state: State + pub state: State, } impl GitHubExplorer { @@ -23,27 +23,27 @@ impl GitHubExplorer { }); }); - let wrapper = css!(" + let wrapper = css! {" border: 1px solid black; margin: 20px 0; padding: 10px; - "); + "}; - let input_css = css!(" + let input_css = css! {" margin-left: 10px; - "); + "}; - let button_css = || css!(" + let button_css = css! {" margin: 0 10px; cursor: pointer; - "); + "}; dom! {
"Enter author/repo tuple: " - -
+ +
{ self.render_commit() } @@ -69,13 +69,13 @@ impl GitHubExplorer { }); commit_message.render_value(|message| { - let text_css = css!(" + let text_css = css! {" width: 600px; height: 300px; border: 1px solid black; padding: 5px; margin: 10px; - "); + "}; dom! {
diff --git a/demo/app/src/app/sudoku/component/mod.rs b/demo/app/src/app/sudoku/component/mod.rs index 2839f7da..1c427063 100644 --- a/demo/app/src/app/sudoku/component/mod.rs +++ b/demo/app/src/app/sudoku/component/mod.rs @@ -1,4 +1,4 @@ -use vertigo::{css, bind, dom, component, DomNode}; +use vertigo::{bind, component, css, dom, DomNode}; use super::state::{sudoku_square::SudokuSquare, tree_box::TreeBoxIndex, Cell, SudokuState}; @@ -7,9 +7,9 @@ pub mod render_cell_value; #[component] pub fn Sudoku(state: SudokuState) { - let wrapper_css = css!(" + let wrapper_css = css! {" display: flex; - "); + "}; dom! {
@@ -21,21 +21,52 @@ pub fn Sudoku(state: SudokuState) { #[component] pub fn MainRender(sudoku: SudokuState) { - let (group_width, group_height, view1) = render_group(sudoku.grid.get_from(TreeBoxIndex::First , TreeBoxIndex::First )); - let (_, _, view2) = render_group(sudoku.grid.get_from(TreeBoxIndex::First , TreeBoxIndex::Middle)); - let (_, _, view3) = render_group(sudoku.grid.get_from(TreeBoxIndex::First , TreeBoxIndex::Last )); - let (_, _, view4) = render_group(sudoku.grid.get_from(TreeBoxIndex::Middle, TreeBoxIndex::First )); - let (_, _, view5) = render_group(sudoku.grid.get_from(TreeBoxIndex::Middle, TreeBoxIndex::Middle)); - let (_, _, view6) = render_group(sudoku.grid.get_from(TreeBoxIndex::Middle, TreeBoxIndex::Last )); - let (_, _, view7) = render_group(sudoku.grid.get_from(TreeBoxIndex::Last , TreeBoxIndex::First )); - let (_, _, view8) = render_group(sudoku.grid.get_from(TreeBoxIndex::Last , TreeBoxIndex::Middle)); - let (_, _, view9) = render_group(sudoku.grid.get_from(TreeBoxIndex::Last , TreeBoxIndex::Last )); + let (group_width, group_height, view1) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::First, TreeBoxIndex::First), + ); + let (_, _, view2) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::First, TreeBoxIndex::Middle), + ); + let (_, _, view3) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::First, TreeBoxIndex::Last), + ); + let (_, _, view4) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::Middle, TreeBoxIndex::First), + ); + let (_, _, view5) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::Middle, TreeBoxIndex::Middle), + ); + let (_, _, view6) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::Middle, TreeBoxIndex::Last), + ); + let (_, _, view7) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::Last, TreeBoxIndex::First), + ); + let (_, _, view8) = render_group( + sudoku + .grid + .get_from(TreeBoxIndex::Last, TreeBoxIndex::Middle), + ); + let (_, _, view9) = render_group(sudoku.grid.get_from(TreeBoxIndex::Last, TreeBoxIndex::Last)); let width = 3 * group_width + 2 * 2; let height = 3 * group_height + 2 * 2; - let out_css = css!( - " + let out_css = css! {" display: grid; grid-template-columns: 1fr 1fr 1fr; flex-shrink: 0; @@ -45,14 +76,12 @@ pub fn MainRender(sudoku: SudokuState) { border: 2px solid blue; user-select: none; - " - ); + "}; - - let css_center = css!(" + let css_center = css! {" display: flex; justify-content: center; - "); + "}; dom! {
@@ -72,23 +101,23 @@ pub fn MainRender(sudoku: SudokuState) { } fn render_group(group: &SudokuSquare) -> (u32, u32, DomNode) { - let (cell_width, cell_height, view1) = render_cell(group.get_from(TreeBoxIndex::First , TreeBoxIndex::First )); - let (_, _, view2) = render_cell(group.get_from(TreeBoxIndex::First , TreeBoxIndex::Middle)); - let (_, _, view3) = render_cell(group.get_from(TreeBoxIndex::First , TreeBoxIndex::Last )); - let (_, _, view4) = render_cell(group.get_from(TreeBoxIndex::Middle, TreeBoxIndex::First )); + let (cell_width, cell_height, view1) = + render_cell(group.get_from(TreeBoxIndex::First, TreeBoxIndex::First)); + let (_, _, view2) = render_cell(group.get_from(TreeBoxIndex::First, TreeBoxIndex::Middle)); + let (_, _, view3) = render_cell(group.get_from(TreeBoxIndex::First, TreeBoxIndex::Last)); + let (_, _, view4) = render_cell(group.get_from(TreeBoxIndex::Middle, TreeBoxIndex::First)); let (_, _, view5) = render_cell(group.get_from(TreeBoxIndex::Middle, TreeBoxIndex::Middle)); - let (_, _, view6) = render_cell(group.get_from(TreeBoxIndex::Middle, TreeBoxIndex::Last )); - let (_, _, view7) = render_cell(group.get_from(TreeBoxIndex::Last , TreeBoxIndex::First )); - let (_, _, view8) = render_cell(group.get_from(TreeBoxIndex::Last , TreeBoxIndex::Middle)); - let (_, _, view9) = render_cell(group.get_from(TreeBoxIndex::Last , TreeBoxIndex::Last )); + let (_, _, view6) = render_cell(group.get_from(TreeBoxIndex::Middle, TreeBoxIndex::Last)); + let (_, _, view7) = render_cell(group.get_from(TreeBoxIndex::Last, TreeBoxIndex::First)); + let (_, _, view8) = render_cell(group.get_from(TreeBoxIndex::Last, TreeBoxIndex::Middle)); + let (_, _, view9) = render_cell(group.get_from(TreeBoxIndex::Last, TreeBoxIndex::Last)); let border = 1; let width = 2 * border + 3 * cell_width; let height = 2 * border + 3 * cell_height; - let out_css = css!( - " + let out_css = css! {" border: {border}px solid black; width: {width}px; @@ -97,8 +126,7 @@ fn render_group(group: &SudokuSquare) -> (u32, u32, DomNode) { display: grid; grid-template-columns: 1fr 1fr 1fr; flex-shrink: 0; - " - ); + "}; let group = dom! {
@@ -138,13 +166,11 @@ fn render_cell(item: &Cell) -> (u32, u32, DomNode) { } }); - let css_wrapper = css!( - " + let css_wrapper = css! {" border: {border}px solid green; width: {cell_width}px; height: {cell_height}px; - " - ); + "}; let dom = dom! {
@@ -173,25 +199,25 @@ fn ExamplesRender(sudoku: SudokuState) { sudoku.example3(); }); - let css_sudoku_example = css!(" + let css_sudoku_example = css! {" border: 1px solid black; padding: 10px; flex-shrink: 1; display: flex; flex-direction: column; margin-right: 10px; - "); + "}; - let css_sudoku_example_button = css!(" + let css_sudoku_example_button = css! {" margin: 5px; cursor: pointer; - "); + "}; dom! {
- - - + + +
}