Skip to content

Commit 3b6377a

Browse files
sfisolsfisol
committed
css attribute in dom! macro now accepts &Css (referenced) for convenience
1 parent c31d31f commit 3b6377a

File tree

7 files changed

+134
-108
lines changed

7 files changed

+134
-108
lines changed

‎CHANGES.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<!-- markdownlint-configure-file { "no-duplicate-heading": { "siblings_only": true } } -->
22

33
<!-- markdownlint-disable-next-line first-line-h1 -->
4+
## Unreleased
5+
6+
### Added
7+
8+
* `css` attribute in `dom!` macro now accepts `&Css` (referenced) for convenience
9+
410
## 0.6.1 - 2024-12-18
511

612
### Added

‎crates/vertigo/src/dom/attr_value.rs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,9 @@ impl From<Computed<Css>> for CssAttrValue {
7272
CssAttrValue::Computed(value)
7373
}
7474
}
75+
76+
impl From<&Css> for CssAttrValue {
77+
fn from(value: &Css) -> Self {
78+
CssAttrValue::Css(value.clone())
79+
}
80+
}

‎demo/app/src/app/counters/mod.rs

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
use vertigo::{Computed, Value, dom, include_static, css, component};
1+
use vertigo::{component, css, dom, include_static, Computed, Value};
22

33
mod simple_counter;
44
use simple_counter::SimpleCounter;
@@ -40,13 +40,11 @@ impl State {
4040
counter2,
4141
counter3,
4242
counter4,
43-
sum
43+
sum,
4444
}
4545
}
4646
}
4747

48-
49-
5048
#[component]
5149
fn Sum(sum: Computed<u32>) {
5250
dom! {
@@ -60,31 +58,27 @@ fn Sum(sum: Computed<u32>) {
6058
pub fn CountersDemo(state: State) {
6159
let path = include_static!("./counter.webp");
6260

63-
let center_css = css!("
61+
let center_base = css! {"
6462
border: 1px solid black;
6563
padding: 1px;
6664
margin: 0 auto;
6765
display: block;
6866
6967
cursor: pointer;
70-
box-shadow: 4px 4px 4px #444, 8px 8px 4px #666, 12px 12px 4px #888;
7168
7269
transition: all .2s ease-in-out;
70+
"};
71+
72+
let center_css = center_base.clone().extend(css! {"
73+
box-shadow: 4px 4px 4px #444, 8px 8px 4px #666, 12px 12px 4px #888;
74+
7375
:hover {
7476
transform: scale(1.1);
7577
}
76-
");
77-
78-
let center_css2 = css!("
79-
border: 1px solid black;
80-
padding: 1px;
81-
margin: 0 auto;
82-
display: block;
83-
84-
cursor: pointer;
78+
"});
8579

80+
let center_css2 = center_base.push_str("
8681
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);
87-
transition: all .2s ease-in-out;
8882
:hover {
8983
transform: scale(1.5);
9084
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);

‎demo/app/src/app/counters/simple_counter/mod.rs

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
1-
use vertigo::{Value, transaction, Computed, component};
21
use vertigo::{bind, css, dom};
2+
use vertigo::{component, transaction, Computed, Value};
33

44
#[component]
55
/// Shows counter with label
66
pub fn SimpleCounter(label: Computed<String>, value: Value<u32>) {
77
let click_up = bind!(value, || {
8-
transaction(|context|{
8+
transaction(|context| {
99
value.set(value.get(context) + 1);
1010
});
1111
});
1212

1313
let click_down = bind!(value, || {
14-
transaction(|context|{
14+
transaction(|context| {
1515
value.set(value.get(context) - 1);
1616
});
1717
});
1818

19-
let css_wrapper = css!("
19+
let css_wrapper = css! {"
2020
border: 1px solid black;
2121
margin: 5px 0;
22-
");
22+
"};
2323

24-
let css_box = || css!("
24+
let css_box = css! {"
2525
margin: 5px;
26-
");
26+
"};
2727

28-
let css_button = || css_box().push_str("
28+
let css_button = css_box.clone().extend(css! {"
2929
display: block;
3030
cursor: pointer;
31-
");
31+
"});
3232

33-
let css_wrapper_buttons = css!("
33+
let css_wrapper_buttons = css! {"
3434
display: flex;
35-
");
35+
"};
3636

3737
dom! {
3838
<div css={css_wrapper}>
39-
<div css={css_box()}>
39+
<div css={css_box}>
4040
{label} " = " {value}
4141
</div>
4242
<div css={css_wrapper_buttons}>
43-
<button css={css_button()} on_click={click_up}>"up"</button>
44-
<button css={css_button()} on_click={click_down}>"down"</button>
43+
<button css={&css_button} on_click={click_up}>"up"</button>
44+
<button css={css_button} on_click={click_down}>"down"</button>
4545
</div>
4646
</div>
4747
}

‎demo/app/src/app/game_of_life/component.rs

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
use std::rc::Rc;
2-
use vertigo::{css, Value, bind, DomNode, dom, transaction, DomElement, dom_element};
2+
use vertigo::{bind, css, dom, dom_element, transaction, DomElement, DomNode, Value};
33

44
pub use super::State;
55

66
pub struct GameOfLife {
7-
pub state: State
7+
pub state: State,
88
}
99

1010
impl GameOfLife {
1111
pub fn mount(&self) -> DomNode {
1212
let matrix = &self.state.matrix;
13-
let css_wrapper = css!("
13+
let css_wrapper = css! {"
1414
border: 1px solid black;
1515
padding: 10px;
1616
margin: 10px;
1717
background-color: #e0e0e0;
18-
");
18+
"};
1919

2020
dom! {
2121
<div css={css_wrapper}>
@@ -32,15 +32,9 @@ impl GameOfLife {
3232
}
3333

3434
fn render_header(state: &State) -> DomNode {
35-
let year = state.year.map(|item| {
36-
item.to_string()
37-
});
38-
let delay = state.delay.map(|item| {
39-
item.to_string()
40-
});
41-
let new_delay = state.new_delay.map(|item| {
42-
item.to_string()
43-
});
35+
let year = state.year.map(|item| item.to_string());
36+
let delay = state.delay.map(|item| item.to_string());
37+
let new_delay = state.new_delay.map(|item| item.to_string());
4438

4539
let on_toggle_timer = {
4640
let state = state.clone();
@@ -68,15 +62,15 @@ impl GameOfLife {
6862
state.new_delay.set(new_value.parse().unwrap_or_default());
6963
});
7064

71-
let flex_menu = css!("
65+
let flex_menu = css! {"
7266
display: flex;
7367
gap: 40px;
7468
margin-bottom: 5px;
75-
");
69+
"};
7670

77-
let css_button = || css!("
71+
let css_button = css! {"
7872
cursor: pointer;
79-
");
73+
"};
8074

8175
dom! {
8276
<div css={flex_menu}>
@@ -87,18 +81,18 @@ impl GameOfLife {
8781
"Year = " { year }
8882
</div>
8983
<div>
90-
<button css={css_button()} on_click={on_toggle_timer}>
84+
<button css={&css_button} on_click={on_toggle_timer}>
9185
{button_label}
9286
</button>
93-
<button css={css_button()} on_click={state.randomize()}>"Random"</button>
87+
<button css={&css_button} on_click={state.randomize()}>"Random"</button>
9488
</div>
9589
<div>
9690
<div>
9791
"delay = " {delay}
9892
</div>
9993
"Set delay: "
10094
<input value={new_delay} on_input={on_input} />
101-
" " <button css={css_button()} on_click={state.accept_new_delay()}>"Set"</button>
95+
" " <button css={css_button} on_click={state.accept_new_delay()}>"Set"</button>
10296
</div>
10397
</div>
10498
}
@@ -117,11 +111,11 @@ impl GameOfLife {
117111
}
118112

119113
fn render_row(matrix: &[Value<bool>]) -> DomElement {
120-
let css_row = css!("
114+
let css_row = css! {"
121115
display: flex;
122116
flex-direction: row;
123117
height: 10px;
124-
");
118+
"};
125119

126120
let wrapper = dom_element! {
127121
<div css={css_row} />
@@ -137,12 +131,12 @@ impl GameOfLife {
137131
fn render_cell(cell: &Value<bool>) -> DomNode {
138132
let css_cell = |is_active: bool| {
139133
let color = if is_active { "black" } else { "white" };
140-
css!("
134+
css! {"
141135
width: 10px;
142136
height: 10px;
143137
cursor: pointer;
144138
background-color: { color };
145-
")
139+
"}
146140
};
147141

148142
let css_computed = cell.map(css_cell);

‎demo/app/src/app/github_explorer/component.rs

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
use vertigo::{css, Resource, bind, dom, Computed, transaction, DomNode};
1+
use vertigo::{bind, css, dom, transaction, Computed, DomNode, Resource};
22

33
use super::State;
44

55
pub struct GitHubExplorer {
6-
pub state: State
6+
pub state: State,
77
}
88

99
impl GitHubExplorer {
@@ -23,27 +23,27 @@ impl GitHubExplorer {
2323
});
2424
});
2525

26-
let wrapper = css!("
26+
let wrapper = css! {"
2727
border: 1px solid black;
2828
margin: 20px 0;
2929
padding: 10px;
30-
");
30+
"};
3131

32-
let input_css = css!("
32+
let input_css = css! {"
3333
margin-left: 10px;
34-
");
34+
"};
3535

36-
let button_css = || css!("
36+
let button_css = css! {"
3737
margin: 0 10px;
3838
cursor: pointer;
39-
");
39+
"};
4040

4141
dom! {
4242
<div css={wrapper}>
4343
"Enter author/repo tuple: "
4444
<input css={input_css} value={state.repo_input.to_computed()} on_input={on_input_callback} />
45-
<button css={button_css()} on_click={on_show}>"Fetch"</button>
46-
<div css={button_css()}>
45+
<button css={&button_css} on_click={on_show}>"Fetch"</button>
46+
<div css={button_css}>
4747
<text computed={&state.repo_shown} />
4848
</div>
4949
{ self.render_commit() }
@@ -69,13 +69,13 @@ impl GitHubExplorer {
6969
});
7070

7171
commit_message.render_value(|message| {
72-
let text_css = css!("
72+
let text_css = css! {"
7373
width: 600px;
7474
height: 300px;
7575
border: 1px solid black;
7676
padding: 5px;
7777
margin: 10px;
78-
");
78+
"};
7979

8080
dom! {
8181
<div css={text_css}>

0 commit comments

Comments
 (0)