diff --git a/gh-pages/src/app.rs b/gh-pages/src/app.rs index ac000f4..0ddcd5f 100644 --- a/gh-pages/src/app.rs +++ b/gh-pages/src/app.rs @@ -22,6 +22,7 @@ pub fn App() -> impl IntoView { + diff --git a/gh-pages/src/pages/components.rs b/gh-pages/src/pages/components.rs index f59ef19..b719e39 100644 --- a/gh-pages/src/pages/components.rs +++ b/gh-pages/src/pages/components.rs @@ -47,6 +47,7 @@ pub fn ComponentsPage() -> impl IntoView { + diff --git a/gh-pages/src/pages/mod.rs b/gh-pages/src/pages/mod.rs index 704fa28..8abd527 100644 --- a/gh-pages/src/pages/mod.rs +++ b/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::*; diff --git a/gh-pages/src/pages/table/mod.rs b/gh-pages/src/pages/table/mod.rs new file mode 100644 index 0000000..478f428 --- /dev/null +++ b/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! { +
+

"Table"

+ + + + + + + + + + + + + + + + + + + + + +
"tag""count""date"
"div""2""2023-10-08"
"span""2""2023-10-08"
+ + + + "tag" + "count" + "date" + + + + + "div" + "2" + "2023-10-08" + + + "span" + "2" + "2023-10-08" + + + + "#, + "rust" + ) + > + + "" + + +

"Table Props"

+ + + + + + + + + + + + + + + + + + + + + + + +
"Name""Type""Default""Description"
"single_row""MaybeSignal""true"""
"single_column""MaybeSignal""false"""
+
+ } +} diff --git a/src/table/mod.rs b/src/table/mod.rs index 0493fa3..dacd140 100644 --- a/src/table/mod.rs +++ b/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, + #[prop(default=true.into(), into)] single_row: MaybeSignal, + #[prop(optional, into)] single_column: MaybeSignal, + children: Children, +) -> impl IntoView { mount_style("table", include_str!("./table.css")); - view! { {children()}
} + 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! { + + {children()} +
+ } } diff --git a/src/table/table.css b/src/table/table.css index 8ba55f4..eded8f3 100644 --- a/src/table/table.css +++ b/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 { - border-bottom: 1px solid #888; -} \ No newline at end of file +.melt-table.melt-table--single-row td, +.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); +} diff --git a/src/table/theme.rs b/src/table/theme.rs new file mode 100644 index 0000000..6413f24 --- /dev/null +++ b/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(), + } + } +} diff --git a/src/theme/mod.rs b/src/theme/mod.rs index d6fbf6a..f910b1b 100644 --- a/src/theme/mod.rs +++ b/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(), - menu: MenuTheme::dark(), + input: InputTheme::light(), + 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(), } } }