adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: text adds style prop

Browse source
This commit is contained in:
luoxiao 2024-06-03 16:31:32 +08:00
parent 01df9dfe20
commit bacda05edc
6 changed files with 102 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/app.rs
View file

@ -85,8 +85,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/table" view=TableMdPage/>
<Route path="/tabs" view=TabsMdPage/>
<Route path="/tag" view=TagMdPage/>
<Route path="/text" view=TextMdPage/>
<Route path="/time-picker" view=TimePickerMdPage/>
<Route path="/typography" view=TypographyMdPage/>
<Route path="/upload" view=UploadMdPage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>

45
demo/src/pages/components.rs
View file

@ -75,10 +75,9 @@ pub(crate) struct MenuGroupOption {
impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
let children_len = children.len();
view! {
<Caption1Strong>
{format!("{label} ({children_len})")}
<Caption1Strong style="margin-inline-start: 10px">
{label}
</Caption1Strong>
{children.into_iter().map(|v| v.into_view()).collect_view()}
}
@ -169,18 +168,13 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Tag".into(),
},
MenuItemOption {
value: "/components/typography".into(),
label: "Typography".into(),
value: "/components/text".into(),
label: "Text".into(),
},
MenuItemOption {
value: "/components/spin-button".into(),
label: "Spin Button".into(),
},
],
},
MenuGroupOption {
label: "Data Input Components".into(),
children: vec![
MenuItemOption {
value: "/components/auto-complete".into(),
label: "Auto Complete".into(),
@ -225,11 +219,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/upload".into(),
label: "Upload".into(),
},
],
},
MenuGroupOption {
label: "Data Display Components".into(),
children: vec![
MenuItemOption {
value: "/components/calendar".into(),
label: "Calendar".into(),
@ -242,11 +231,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/table".into(),
label: "Table".into(),
},
],
},
MenuGroupOption {
label: "Navigation Components".into(),
children: vec![
MenuItemOption {
value: "/components/anchor".into(),
label: "Anchor".into(),
@ -267,11 +251,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/tabs".into(),
label: "Tabs".into(),
},
],
},
MenuGroupOption {
label: "Feedback Components".into(),
children: vec![
MenuItemOption {
value: "/components/alert".into(),
label: "Alert".into(),
@ -308,11 +287,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/skeleton".into(),
label: "Skeleton".into(),
},
],
},
MenuGroupOption {
label: "Layout Components".into(),
children: vec![
MenuItemOption {
value: "/components/layout".into(),
label: "Layout".into(),
@ -325,15 +299,12 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/space".into(),
label: "Space".into(),
},
MenuItemOption {
value: "/components/scrollbar".into(),
label: "Scrollbar".into(),
},
],
},
MenuGroupOption {
label: "Utility Components".into(),
children: vec![MenuItemOption {
value: "/components/scrollbar".into(),
label: "Scrollbar".into(),
}],
},
MenuGroupOption {
label: "Mobile Components".into(),
children: vec![

2
demo_markdown/docs/card/mod.md
View file

@ -5,7 +5,7 @@ view! {
<Card>
<CardHeader>
<Body1>
<b>"Header"</b>"2022-02-22"
<b>"Header"</b>" 2022-02-22"
</Body1>
<CardHeaderDescription slot>
<Caption1>"Description"</Caption1>

3
demo_markdown/docs/typography/mod.md → demo_markdown/docs/text/mod.md
View file

@ -5,6 +5,9 @@ view! {
<Space>
<Text>"text"</Text>
<Text code=true>"code"</Text>
<Caption1>"Caption1"</Caption1>
<Caption1Strong>"Caption1Strong"</Caption1Strong>
<Body1>"Body1"</Body1>
</Space>
}
```

2
demo_markdown/src/lib.rs
View file

@ -68,7 +68,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"TabsMdPage" => "../docs/tabs/mod.md",
"TagMdPage" => "../docs/tag/mod.md",
"TimePickerMdPage" => "../docs/time_picker/mod.md",
"TypographyMdPage" => "../docs/typography/mod.md",
"TextMdPage" => "../docs/text/mod.md",
"UploadMdPage" => "../docs/upload/mod.md"
};

108
thaw/src/text/mod.rs
View file

@ -4,45 +4,52 @@ use thaw_utils::{class_list, mount_style};
#[component]
pub fn Caption1(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
children: Children,
) -> impl IntoView {
let class = Signal::derive(move || format!("thaw-caption-1 {:?}", class.get()));
let class =
Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
view! {
<Text tag children class/>
<Text tag children class style/>
}
}
#[component]
pub fn Caption1Strong(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
children: Children,
) -> impl IntoView {
let class = Signal::derive(move || format!("thaw-caption-1-strong {:?}", class.get()));
let class = Signal::derive(move || {
format!("thaw-caption-1-strong {}", class.get().unwrap_or_default())
});
view! {
<Text tag children class/>
<Text tag children class style/>
}
}
#[component]
pub fn Body1(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
children: Children,
) -> impl IntoView {
let class = Signal::derive(move || format!("thaw-body-1 {:?}", class.get()));
let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
view! {
<Text tag children class/>
<Text tag children class style/>
}
}
#[component]
pub fn Text(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional)] tag: TextTag,
#[prop(optional)] code: bool,
children: Children,
@ -50,23 +57,84 @@ pub fn Text(
mount_style("text", include_str!("./text.css"));
match tag {
TextTag::B => todo!(),
TextTag::Em => todo!(),
TextTag::H1 => todo!(),
TextTag::H2 => todo!(),
TextTag::H3 => todo!(),
TextTag::H4 => todo!(),
TextTag::H5 => todo!(),
TextTag::H6 => todo!(),
TextTag::I => todo!(),
TextTag::P => todo!(),
TextTag::Pre => todo!(),
TextTag::B => view! {
<b class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</b>
}
.into_view(),
TextTag::Em => view! {
<em class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</em>
}
.into_view(),
TextTag::H1 => view! {
<h1 class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</h1>
}
.into_view(),
TextTag::H2 => view! {
<h2 class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</h2>
}
.into_view(),
TextTag::H3 => view! {
<h3 class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</h3>
}
.into_view(),
TextTag::H4 => view! {
<h4 class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</h4>
}
.into_view(),
TextTag::H5 => view! {
<h5 class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</h5>
}
.into_view(),
TextTag::H6 => view! {
<h6 class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</h6>
}
.into_view(),
TextTag::I => view! {
<i class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</i>
}
.into_view(),
TextTag::P => view! {
<p class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</p>
}
.into_view(),
TextTag::Pre => view! {
<pre class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</pre>
}
.into_view(),
TextTag::Span => view! {
<span class=class_list!["thaw-text", class]>
<span class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</span>
},
TextTag::Strong => todo!(),
}
.into_view(),
TextTag::Strong => view! {
<strong class=class_list!["thaw-text", class] style=move || style.get()>
{children()}
</strong>
}
.into_view(),
}
}