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: optimize Text component

Browse source
This commit is contained in:
luoxiao 2024-07-12 10:06:43 +08:00
parent f4838a8168
commit 5e6f9ec287
7 changed files with 41 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
demo_markdown/docs/tag/mod.md
View file

@ -2,12 +2,7 @@
```rust demo
view! {
<Space>
<Tag>"default"</Tag>
<Tag variant=TagVariant::Success>"success"</Tag>
<Tag variant=TagVariant::Warning>"warning"</Tag>
<Tag variant=TagVariant::Error>"error"</Tag>
</Space>
<Tag>"default"</Tag>
}
```
@ -25,12 +20,7 @@ let success = move |_: SendWrapper<ev::MouseEvent>| {
};
view! {
<Space>
<Tag closable=true on_close=success>"Default"</Tag>
<Tag closable=true on_close=success variant=TagVariant::Success>"Success"</Tag>
<Tag closable=true on_close=success variant=TagVariant::Warning>"Warning"</Tag>
<Tag closable=true on_close=success variant=TagVariant::Error>"Error"</Tag>
</Space>
<Tag closable=true on_close=success>"Default"</Tag>
}
```

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

@ -4,7 +4,7 @@
view! {
<Space>
<Text>"text"</Text>
<Text code=true>"code"</Text>
<Text tag=TextTag::Code>"code"</Text>
<Caption1>"Caption1"</Caption1>
<Caption1Strong>"Caption1Strong"</Caption1Strong>
<Body1>"Body1"</Body1>

2
demo_markdown/src/markdown/mod.rs
View file

@ -146,7 +146,7 @@ fn iter_nodes<'a>(
NodeValue::Code(node_code) => {
let code = node_code.literal.clone();
quote!(
<Text code=true>
<Text tag=TextTag::Code>
#code
</Text>
)

10
thaw/src/tag/mod.rs
View file

@ -2,18 +2,8 @@ use leptos::{either::Either, ev, prelude::*};
use send_wrapper::SendWrapper;
use thaw_utils::{class_list, mount_style, OptionalProp};
#[derive(Clone, Copy, Default, PartialEq, Eq, Hash)]
pub enum TagVariant {
#[default]
Default,
Success,
Warning,
Error,
}
#[component]
pub fn Tag(
#[prop(optional, into)] variant: MaybeSignal<TagVariant>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] closable: MaybeSignal<bool>,
#[prop(optional, into)] on_close: Option<Callback<SendWrapper<ev::MouseEvent>>>,

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

@ -51,86 +51,93 @@ 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,
) -> impl IntoView {
mount_style("text", include_str!("./text.css"));
let class = class_list!["thaw-text", class];
let style = move || style.get().unwrap_or_default();
match tag {
TextTag::B => view! {
<b class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<b class=class style=style>
{children()}
</b>
}
.into_any(),
TextTag::Code => view! {
<code class=class style=style>
{children()}
</code>
}
.into_any(),
TextTag::Em => view! {
<em class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<em class=class style=style>
{children()}
</em>
}
.into_any(),
TextTag::H1 => view! {
<h1 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<h1 class=class style=style>
{children()}
</h1>
}
.into_any(),
TextTag::H2 => view! {
<h2 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<h2 class=class style=style>
{children()}
</h2>
}
.into_any(),
TextTag::H3 => view! {
<h3 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<h3 class=class style=style>
{children()}
</h3>
}
.into_any(),
TextTag::H4 => view! {
<h4 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<h4 class=class style=style>
{children()}
</h4>
}
.into_any(),
TextTag::H5 => view! {
<h5 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<h5 class=class style=style>
{children()}
</h5>
}
.into_any(),
TextTag::H6 => view! {
<h6 class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<h6 class=class style=style>
{children()}
</h6>
}
.into_any(),
TextTag::I => view! {
<i class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<i class=class style=style>
{children()}
</i>
}
.into_any(),
TextTag::P => view! {
<p class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<p class=class style=style>
{children()}
</p>
}
.into_any(),
TextTag::Pre => view! {
<pre class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<pre class=class style=style>
{children()}
</pre>
}
.into_any(),
TextTag::Span => view! {
<span class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<span class=class style=style>
{children()}
</span>
}
.into_any(),
TextTag::Strong => view! {
<strong class=class_list!["thaw-text", class] style=move || style.get().unwrap_or_default()>
<strong class=class style=style>
{children()}
</strong>
}
@ -138,9 +145,10 @@ pub fn Text(
}
}
#[derive(Default)]
#[derive(Default, PartialEq)]
pub enum TextTag {
B,
Code,
Em,
H1,
H2,

9
thaw/src/text/text.css
View file

@ -11,6 +11,15 @@
font-family: var(--fontFamilyBase);
}
code.thaw-text {
padding: 1px 4px;
margin: 0 3px 0 3px;
background-color: var(--colorNeutralBackground4);
color: var(--colorNeutralForeground1);
font-family: var(--fontFamilyMonospace);
border-radius: var(--borderRadiusMedium);
}
.thaw-caption-1 {
line-height: var(--lineHeightBase200);
font-weight: var(--fontWeightRegular);

6
thaw/src/theme/common.rs
View file

@ -3,6 +3,8 @@ use thaw_macro::WriteCSSVars;
#[derive(Clone, WriteCSSVars)]
pub struct CommonTheme {
pub font_family_base: String,
pub font_family_monospace: String,
pub font_family_numeric: String,
pub font_size_base_100: String,
pub font_size_base_200: String,
@ -67,7 +69,9 @@ impl CommonTheme {
pub fn new() -> Self {
Self {
font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
font_family_monospace: "Consolas, 'Courier New', Courier, monospace".into(),
font_family_numeric: "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
font_size_base_100: "10px".into(),
font_size_base_200: "12px".into(),
font_size_base_300: "14px".into(),