Merge pull request #24 from thaw-ui/feat/text

feat: add text component

demo/src/app.rs

@@ -75,6 +75,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/layout" view=LayoutPage/>
                 <Route path="/progress" view=ProgressPage/>
                 <Route path="/theme" view=ThemePage/>
+                <Route path="/typography" view=TypographyPage/>
             </Route>
             <Route path="/mobile/tabbar" view=TabbarDemoPage/>
             <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -31,9 +31,9 @@ pub fn ComponentsPage() -> impl IntoView {
             <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
                 <LayoutSider>
                     <Menu value=select_name>
-                        {
-                            gen_menu_data().into_view()
-                        }
+
+                        {gen_menu_data().into_view()}
+
                     </Menu>
                 </LayoutSider>
                 <Layout style="padding: 8px 12px 28px; overflow-y: auto;">
@@ -53,10 +53,13 @@ impl IntoView for MenuGroupOption {
     fn into_view(self) -> View {
         let Self { label, children } = self;
         view! {
-            <MenuGroup label=format!("{label} ({})", children.len())>
-                {
-                    children.into_iter().map(|v| v.into_view()).collect_view()
-                }
+            <MenuGroup label=format!(
+                "{label} ({})",
+                children.len(),
+            )>
+
+                {children.into_iter().map(|v| v.into_view()).collect_view()}
+
             </MenuGroup>
         }
     }
@@ -70,9 +73,7 @@ pub(crate) struct MenuItemOption {
 impl IntoView for MenuItemOption {
     fn into_view(self) -> View {
         let Self { label, value } = self;
-        view! {
-            <MenuItem key=value label/>
-        }
+        view! { <MenuItem key=value label/> }
     }
 }
 
@@ -105,6 +106,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "tag".into(),
                     label: "Tag".into(),
                 },
+                MenuItemOption {
+                    value: "typography".into(),
+                    label: "Typography".into(),
+                },
             ],
         },
         MenuGroupOption {

demo/src/pages/mod.rs

@@ -36,6 +36,7 @@ mod tabs;
 mod tag;
 mod theme;
 mod toast;
+mod typography;
 mod upload;
 
 pub use alert::*;
@@ -76,4 +77,5 @@ pub use tabs::*;
 pub use tag::*;
 pub use theme::*;
 pub use toast::*;
+pub use typography::*;
 pub use upload::*;

demo/src/pages/typography/mod.rs

@@ -0,0 +1,69 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+use thaw::*;
+
+#[component]
+pub fn TypographyPage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Typography"</h1>
+            <Demo>
+                <Space>
+                    <Text>"text"</Text>
+                    <Text code=true>"code"</Text>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Space>
+                        <Text>
+                            "text"
+                        </Text>
+                        <Text code=true>
+                            "code"
+                        </Text>
+                    </Space>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"Text Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"code"</td>
+                        <td>
+                            <Text code=true>"bool"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"false"</Text>
+                        </td>
+                        <td>"Use the code tag and style."</td>
+                    </tr>
+                    <tr>
+                        <td>"children"</td>
+                        <td>
+                            <Text code=true>"Children"</Text>
+                        </td>
+                        <td></td>
+                        <td>"Text's content."</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    }
+}

src/lib.rs

@@ -33,6 +33,7 @@ mod table;
 mod tabs;
 mod tag;
 mod theme;
+mod typography;
 mod upload;
 mod utils;
 
@@ -69,5 +70,6 @@ pub use table::*;
 pub use tabs::*;
 pub use tag::*;
 pub use theme::*;
+pub use typography::*;
 pub use upload::*;
 pub use utils::SignalWatch;

src/theme/mod.rs

@@ -6,7 +6,7 @@ use crate::{
     utils::Provider,
     AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme,
     InputTheme, MenuTheme, MessageTheme, ProgressTheme, SelectTheme, SkeletionTheme, SliderTheme,
-    SwitchTheme, TableTheme, TagTheme, UploadTheme,
+    SwitchTheme, TableTheme, TagTheme, TypographyTheme, UploadTheme,
 };
 use leptos::*;
 
@@ -38,6 +38,7 @@ pub struct Theme {
     pub color_picker: ColorPickerTheme,
     pub breadcrumb: BreadcrumbTheme,
     pub progress: ProgressTheme,
+    pub typograph: TypographyTheme,
 }
 
 impl Theme {
@@ -64,6 +65,7 @@ impl Theme {
             color_picker: ColorPickerTheme::light(),
             breadcrumb: BreadcrumbTheme::light(),
             progress: ProgressTheme::light(),
+            typograph: TypographyTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -89,6 +91,7 @@ impl Theme {
             color_picker: ColorPickerTheme::dark(),
             breadcrumb: BreadcrumbTheme::dark(),
             progress: ProgressTheme::dark(),
+            typograph: TypographyTheme::dark(),
         }
     }
 }

src/typography/mod.rs

@@ -0,0 +1,5 @@
+mod text;
+mod theme;
+
+pub use text::*;
+pub use theme::TypographyTheme;

src/typography/text.css

@@ -0,0 +1,9 @@
+.thaw-text--code {
+    padding: 0.2em 0.35em;
+    font-size: 0.93em;
+    line-height: 1.4;
+    background-color: var(--thaw-background-color);
+    border: 1px solid #0000;
+    border-radius: 2px;
+    box-sizing: border-box;
+}

src/typography/text.rs

@@ -0,0 +1,30 @@
+use crate::{use_theme, utils::mount_style, Theme};
+use leptos::*;
+
+#[component]
+pub fn Text(#[prop(optional)] code: bool, children: Children) -> impl IntoView {
+    mount_style("text", include_str!("./text.css"));
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--thaw-background-color: {}",
+                theme.typograph.code_background_color
+            ));
+        });
+        css_vars
+    });
+
+    if code {
+        return view! {
+            <code class="thaw-text thaw-text--code" style=move || css_vars.get()>
+                {children()}
+            </code>
+        }
+        .into_any();
+    } else {
+        view! { <span class="thaw-text">{children()}</span> }
+        .into_any()
+    }
+}

src/typography/theme.rs

@@ -0,0 +1,20 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct TypographyTheme {
+    pub code_background_color: String,
+}
+
+impl ThemeMethod for TypographyTheme {
+    fn light() -> Self {
+        Self {
+            code_background_color: "#f4f4f8".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            code_background_color: "#ffffff1f".into(),
+        }
+    }
+}