feat: add table component

gh-pages/src/app.rs

@@ -22,6 +22,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/tabs" view=TabsPage/>
                     <Route path="/select" view=SelectPage/>
                     <Route path="/space" view=SpacePage/>
+                    <Route path="/table" view=TablePage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

gh-pages/src/pages/components.rs

@@ -47,6 +47,7 @@ pub fn ComponentsPage() -> impl IntoView {
                             <MenuItem key="tabs" label="Tabs"/>
                             <MenuItem key="select" label="Select"/>
                             <MenuItem key="space" label="Space"/>
+                            <MenuItem key="table" label="Table"/>
                         </MenuGroup>
                         <MenuGroup label="Mobile Components">
                             <MenuItem key="tabbar" label="Tabbar"/>

gh-pages/src/pages/mod.rs

@@ -12,6 +12,7 @@ mod select;
 mod slider;
 mod space;
 mod tabbar;
+mod table;
 mod tabs;
 mod toast;
 
@@ -29,5 +30,6 @@ pub use select::*;
 pub use slider::*;
 pub use space::*;
 pub use tabbar::*;
+pub use table::*;
 pub use tabs::*;
 pub use toast::*;

gh-pages/src/pages/table/mod.rs

@@ -0,0 +1,93 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use melt_ui::*;
+use prisms::highlight_str;
+
+#[component]
+pub fn TablePage() -> impl IntoView {
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Table"</h1>
+            <Demo>
+                <Table>
+                    <thead>
+                        <tr>
+                            <th>"tag"</th>
+                            <th>"count"</th>
+                            <th>"date"</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>"div"</td>
+                            <td>"2"</td>
+                            <td>"2023-10-08"</td>
+                        </tr>
+                        <tr>
+                            <td>"span"</td>
+                            <td>"2"</td>
+                            <td>"2023-10-08"</td>
+                        </tr>
+                    </tbody>
+                </Table>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                        <Table>
+                            <thead>
+                                <tr>
+                                    <th>"tag"</th>
+                                    <th>"count"</th>
+                                    <th>"date"</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>"div"</td>
+                                    <td>"2"</td>
+                                    <td>"2023-10-08"</td>
+                                </tr>
+                                <tr>
+                                    <td>"span"</td>
+                                    <td>"2"</td>
+                                    <td>"2023-10-08"</td>
+                                </tr>
+                            </tbody>
+                        </Table>
+                        "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"Table 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>"single_row"</td>
+                        <td>"MaybeSignal<bool>"</td>
+                        <td>"true"</td>
+                        <td>""</td>
+                    </tr>
+                    <tr>
+                        <td>"single_column"</td>
+                        <td>"MaybeSignal<bool>"</td>
+                        <td>"false"</td>
+                        <td>""</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    }
+}

src/table/mod.rs

@@ -1,8 +1,49 @@
-use crate::utils::mount_style::mount_style;
+mod theme;
+
+use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
 use leptos::*;
+pub use theme::TableTheme;
 
 #[component]
-pub fn Table(children: Children) -> impl IntoView {
+pub fn Table(
+    #[prop(optional, into)] style: MaybeSignal<String>,
+    #[prop(default=true.into(), into)] single_row: MaybeSignal<bool>,
+    #[prop(optional, into)] single_column: MaybeSignal<bool>,
+    children: Children,
+) -> impl IntoView {
     mount_style("table", include_str!("./table.css"));
-    view! { <table class="melt-table">{children()}</table> }
+    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!(
+                "--background-color: {};",
+                theme.table.background_color.clone()
+            ));
+            css_vars.push_str(&format!(
+                "--background-color-striped: {};",
+                theme.table.background_color_striped.clone()
+            ));
+            css_vars.push_str(&format!(
+                "--border-color: {};",
+                theme.table.border_color.clone()
+            ));
+            css_vars.push_str(&format!(
+                "--border-radius: {};",
+                theme.common.border_radius.clone()
+            ));
+        });
+
+        css_vars
+    });
+    view! {
+        <table
+            class="melt-table"
+            class=("melt-table--single-row", move || single_row.get())
+            class=("melt-table--single-column", move || single_column.get())
+            style=move || format!("{}{}", css_vars.get(), style.get())
+        >
+            {children()}
+        </table>
+    }
 }

src/table/table.css

@@ -1,16 +1,39 @@
 .melt-table {
     width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
 }
 
 .melt-table th {
     text-align: inherit;
+    background-color: var(--background-color-striped);
 }
 
 .melt-table td,
 .melt-table th {
-    padding: 10px 12px;
+    padding: 12px;
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
 }
 
-.melt-table thead {
+.melt-table.melt-table--single-row td,
-    border-bottom: 1px solid #888;
+.melt-table.melt-table--single-row th {
+    border-right: none;
+}
+.melt-table.melt-table--single-column td {
+    border-bottom: none;
+}
+.melt-table td:last-child,
+.melt-table th:last-child {
+    border-right: none;
+}
+
+.melt-table tbody tr:last-child td {
+    border-bottom: none;
+}
+.melt-table tr {
+    border-bottom: 1px solid var(--border-color);
 }

src/table/theme.rs

@@ -0,0 +1,26 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct TableTheme {
+    pub background_color: String,
+    pub background_color_striped: String,
+    pub border_color: String,
+}
+
+impl ThemeMethod for TableTheme {
+    fn light() -> Self {
+        Self {
+            background_color: "#fff".into(),
+            background_color_striped: "#fafafc".into(),
+            border_color: "#efeff5".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            background_color: "#fff".into(),
+            background_color_striped: "#fafafc".into(),
+            border_color: "#efeff5".into(),
+        }
+    }
+}

src/theme/mod.rs

@@ -2,7 +2,7 @@ mod common;
 use leptos::*;
 
 use self::common::CommonTheme;
-use crate::{ButtonTheme, InputTheme, MenuTheme};
+use crate::{ButtonTheme, InputTheme, MenuTheme, TableTheme};
 
 pub trait ThemeMethod {
     fn light() -> Self;
@@ -15,6 +15,7 @@ pub struct Theme {
     pub button: ButtonTheme,
     pub input: InputTheme,
     pub menu: MenuTheme,
+    pub table: TableTheme,
 }
 
 impl Theme {
@@ -24,6 +25,7 @@ impl Theme {
             button: ButtonTheme::light(),
             input: InputTheme::light(),
             menu: MenuTheme::light(),
+            table: TableTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -32,6 +34,7 @@ impl Theme {
             button: ButtonTheme::dark(),
             input: InputTheme::dark(),
             menu: MenuTheme::dark(),
+            table: TableTheme::dark(),
         }
     }
 }
@@ -41,8 +44,9 @@ impl ThemeMethod for Theme {
         Self {
             common: CommonTheme::light(),
             button: ButtonTheme::light(),
-            input: InputTheme::dark(),
+            input: InputTheme::light(),
-            menu: MenuTheme::dark(),
+            menu: MenuTheme::light(),
+            table: TableTheme::light(),
         }
     }
     fn dark() -> Self {
@@ -51,6 +55,7 @@ impl ThemeMethod for Theme {
             button: ButtonTheme::dark(),
             input: InputTheme::dark(),
             menu: MenuTheme::dark(),
+            table: TableTheme::dark(),
         }
     }
 }