From 902da02e30a03d2570921465697bad228f61ff32 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 6 Jun 2024 10:53:04 +0800 Subject: [PATCH] refactor: table --- demo/src/pages/components.rs | 8 +-- demo_markdown/docs/table/mod.md | 50 ++++++++------ demo_markdown/src/markdown/mod.rs | 22 +++--- thaw/src/table/mod.rs | 107 ++++++++++++++++++------------ thaw/src/table/table.css | 94 ++++++++++++++++++-------- thaw/src/table/theme.rs | 26 -------- thaw/src/theme/mod.rs | 5 +- 7 files changed, 180 insertions(+), 132 deletions(-) delete mode 100644 thaw/src/table/theme.rs diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 6c19b1c..d5fb3a3 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -187,6 +187,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/tab-list".into(), label: "Tab List".into(), }, + MenuItemOption { + value: "/components/table".into(), + label: "Table".into(), + }, MenuItemOption { value: "/components/tag".into(), label: "Tag".into(), @@ -247,10 +251,6 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/image".into(), label: "Image".into(), }, - MenuItemOption { - value: "/components/table".into(), - label: "Table".into(), - }, MenuItemOption { value: "/components/anchor".into(), label: "Anchor".into(), diff --git a/demo_markdown/docs/table/mod.md b/demo_markdown/docs/table/mod.md index d658fe5..5112844 100644 --- a/demo_markdown/docs/table/mod.md +++ b/demo_markdown/docs/table/mod.md @@ -3,25 +3,37 @@ ```rust demo view! { - - - - - - - - - - - - - - - - - - - + + + "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"
} ``` diff --git a/demo_markdown/src/markdown/mod.rs b/demo_markdown/src/markdown/mod.rs index 95f8d0d..f443044 100644 --- a/demo_markdown/src/markdown/mod.rs +++ b/demo_markdown/src/markdown/mod.rs @@ -96,22 +96,22 @@ fn iter_nodes<'a>( quote!(
- - +
+ #(#header_children)* - - + + #(#children)* - +
) } NodeValue::TableRow(_) => { quote!( - + #(#children)* - + ) } NodeValue::TableCell => { @@ -122,15 +122,15 @@ fn iter_nodes<'a>( }; if is_header { quote!( - + #(#children)* - + ) } else { quote!( - + #(#children)* - + ) } } diff --git a/thaw/src/table/mod.rs b/thaw/src/table/mod.rs index 7b10127..37efef5 100644 --- a/thaw/src/table/mod.rs +++ b/thaw/src/table/mod.rs @@ -1,56 +1,81 @@ -mod theme; - -pub use theme::TableTheme; - -use crate::{theme::use_theme, Theme}; use leptos::*; -use thaw_utils::{class_list, mount_style, OptionalProp}; +use thaw_components::OptionComp; +use thaw_utils::{class_list, mount_style}; #[component] pub fn Table( - #[prop(optional, into)] style: MaybeSignal, - #[prop(default=true.into(), into)] single_row: MaybeSignal, - #[prop(optional, into)] class: OptionalProp>, - #[prop(optional, into)] single_column: MaybeSignal, + #[prop(optional, into)] style: MaybeProp, + #[prop(optional, into)] class: MaybeProp, children: Children, ) -> impl IntoView { mount_style("table", include_str!("./table.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.table.background_color - )); - css_vars.push_str(&format!( - "--thaw-background-color-striped: {};", - theme.table.background_color_striped - )); - css_vars.push_str(&format!( - "--thaw-border-color: {};", - theme.table.border_color - )); - css_vars.push_str(&format!( - "--thaw-border-radius: {};", - theme.common.border_radius - )); - }); - - css_vars - }); view! { {children()}
} } + +#[component] +pub fn TableHeader(children: Children) -> impl IntoView { + view! { + + {children()} + + } +} + +#[component] +pub fn TableHeaderCell(#[prop(optional)] children: Option) -> impl IntoView { + view! { + + + + } +} + +#[component] +pub fn TableBody(children: Children) -> impl IntoView { + view! { + + {children()} + + } +} + +#[component] +pub fn TableRow(children: Children) -> impl IntoView { + view! { + + {children()} + + } +} + +#[component] +pub fn TableCell(#[prop(optional)] children: Option) -> impl IntoView { + view! { + + + {children()} + + + } +} + +#[component] +pub fn TableCellLayout(children: Children) -> impl IntoView { + view! { +
+ {children()} +
+ } +} diff --git a/thaw/src/table/table.css b/thaw/src/table/table.css index 5aa6a87..47cbcd1 100644 --- a/thaw/src/table/table.css +++ b/thaw/src/table/table.css @@ -1,39 +1,79 @@ .thaw-table { + display: table; + table-layout: fixed; + vertical-align: middle; + border-collapse: collapse; width: 100%; - border-collapse: separate; - border-spacing: 0; - background-color: var(--thaw-background-color); - border: 1px solid var(--thaw-border-color); - border-radius: var(--thaw-border-radius); + background-color: var(--colorSubtleBackground); } -.thaw-table th { - text-align: inherit; - background-color: var(--thaw-background-color-striped); +.thaw-table-header { + display: table-row-group; } -.thaw-table td, -.thaw-table th { - padding: 12px; - border-right: 1px solid var(--thaw-border-color); - border-bottom: 1px solid var(--thaw-border-color); +.thaw-table-header-cell { + position: relative; + display: table-cell; + vertical-align: middle; + font-weight: var(--fontWeightRegular); + padding: 0px var(--spacingHorizontalS); } -.thaw-table.thaw-table--single-row td, -.thaw-table.thaw-table--single-row th { - border-right: none; -} -.thaw-table.thaw-table--single-column td { - border-bottom: none; -} -.thaw-table td:last-child, -.thaw-table th:last-child { - border-right: none; +.thaw-table-header-cell__button { + position: relative; + display: flex; + flex: 1 1 0px; + align-items: center; + gap: var(--spacingHorizontalXS); + padding: 0px; + width: 100%; + height: 100%; + min-height: 32px; + text-align: unset; + font-family: inherit; + font-size: inherit; + line-height: normal; + color: inherit; + background-color: inherit; + box-sizing: content-box; + resize: horizontal; + overflow: visible; + outline-style: none; + border: none; } -.thaw-table tbody tr:last-child td { - border-bottom: none; +.thaw-table-body { + display: table-row-group; } -.thaw-table tr { - border-bottom: 1px solid var(--thaw-border-color); + +.thaw-table-row { + display: table-row; + box-sizing: border-box; + color: var(--colorNeutralForeground1); + border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); +} + +.thaw-table-body > .thaw-table-row:hover { + color: var(--colorNeutralForeground1Hover); + background-color: var(--colorSubtleBackgroundHover); +} + +.thaw-table-body > .thaw-table-row:active { + color: var(--colorNeutralForeground1Pressed); + background-color: var(--colorSubtleBackgroundPressed); +} + +.thaw-table-cell { + position: relative; + height: 44px; + display: table-cell; + vertical-align: middle; + padding: 0px var(--spacingHorizontalS); +} + +.thaw-table-cell-layout { + display: flex; + flex: 1 1 0px; + align-items: center; + gap: var(--spacingHorizontalS); } diff --git a/thaw/src/table/theme.rs b/thaw/src/table/theme.rs deleted file mode 100644 index c1f46c6..0000000 --- a/thaw/src/table/theme.rs +++ /dev/null @@ -1,26 +0,0 @@ -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: "#18181c".into(), - background_color_striped: "#26262a".into(), - border_color: "#2d2d30".into(), - } - } -} diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index 986a5ee..aee64de 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -6,7 +6,7 @@ use crate::{ mobile::{NavBarTheme, TabbarTheme}, AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, CalendarTheme, ColorPickerTheme, DatePickerTheme, InputTheme, MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme, - SelectTheme, TableTheme, TimePickerTheme, UploadTheme, + SelectTheme, TimePickerTheme, UploadTheme, }; pub use color::ColorTheme; use leptos::*; @@ -22,7 +22,6 @@ pub struct Theme { pub common: CommonTheme, pub color: ColorTheme, pub input: InputTheme, - pub table: TableTheme, pub alert: AlertTheme, pub message: MessageTheme, pub select: SelectTheme, @@ -48,7 +47,6 @@ impl Theme { common: CommonTheme::light(), color: ColorTheme::light(), input: InputTheme::light(), - table: TableTheme::light(), alert: AlertTheme::light(), message: MessageTheme::light(), select: SelectTheme::light(), @@ -73,7 +71,6 @@ impl Theme { common: CommonTheme::dark(), color: ColorTheme::dark(), input: InputTheme::dark(), - table: TableTheme::dark(), alert: AlertTheme::dark(), message: MessageTheme::dark(), select: SelectTheme::dark(),