beet_design 0.0.8

Design system and components for beet rsx
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

use crate::prelude::*;


#[derive(Default)]
pub enum TextFieldVariant {
	#[default]
	Outlined,
	Filled,
	Text,
}

impl TextFieldVariant {
	/// for use with `bt-c-textfield--<variant>`
	pub fn class_suffix(&self) -> &'static str {
		match self {
			TextFieldVariant::Outlined => "outlined",
			TextFieldVariant::Filled => "filled",
			TextFieldVariant::Text => "text",
		}
	}
}



/// A styled text field
#[template]
pub fn TextField(
	#[field(default)] variant: TextFieldVariant,
	#[field(flatten=BaseHtmlAttributes)] mut attrs: InputHtmlAttributes,
) -> impl Bundle {
	attrs.push_class(format!(
		"bt-c-input bt-c-input--{}",
		variant.class_suffix()
	));

	rsx! {
		<div class="bt-c-input__container">
			<slot/>
			<input {attrs}>
		</div>
		<style src="./input.css" />
	}
}


/// A styled text area
#[template]
pub fn TextArea(
	#[field(default)] variant: TextFieldVariant,
	#[field(flatten=BaseHtmlAttributes)]
	#[field(flatten=InputHtmlAttributes)]
	attrs: TextAreaHtmlAttributes,
) -> impl Bundle {
	let mut attrs = attrs;
	attrs.push_class(format!(
		"bt-c-input bt-c-input--{}",
		variant.class_suffix()
	));

	// apply the initial value as well as setting the attribute,
	// required for before-wasm visibility
	let value = attrs.input_attrs.value.as_ref().map(|v| v.get());
	rsx! {
		<div class="bt-c-input__container">
			<slot />
			<textarea {attrs}>
				{value}
			</textarea>
		</div>
		<style src="./input.css" />
	}
}