adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: table

Browse source
This commit is contained in:
luoxiao 2024-06-06 10:53:04 +08:00
parent 3a097b166b
commit 902da02e30
7 changed files with 180 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
demo/src/pages/components.rs
View file

@ -187,6 +187,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
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<MenuGroupOption> {
value: "/components/image".into(),
label: "Image".into(),
},
MenuItemOption {
value: "/components/table".into(),
label: "Table".into(),
},
MenuItemOption {
value: "/components/anchor".into(),
label: "Anchor".into(),

50
demo_markdown/docs/table/mod.md
View file

@ -3,25 +3,37 @@
```rust demo
view! {
<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>
<TableHeader>
<TableRow>
<TableHeaderCell>"Tag"</TableHeaderCell>
<TableHeaderCell>"Count"</TableHeaderCell>
<TableHeaderCell>"Date"</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
<TableCellLayout>
"div"
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
"2"
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
"2023-10-08"
</TableCellLayout>
</TableCell>
</TableRow>
<TableRow>
<TableCell>"span"</TableCell>
<TableCell>"2"</TableCell>
<TableCell>"2023-10-08"</TableCell>
</TableRow>
</TableBody>
</Table>
}
```

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

@ -96,22 +96,22 @@ fn iter_nodes<'a>(
quote!(
<div class="demo-md-table-box">
<Table single_column=true>
<thead>
<Table>
<TableHeader>
#(#header_children)*
</thead>
<tbody>
</TableHeader>
<TableBody>
#(#children)*
</tbody>
</TableBody>
</Table>
</div>
)
}
NodeValue::TableRow(_) => {
quote!(
<tr>
<TableRow>
#(#children)*
</tr>
</TableRow>
)
}
NodeValue::TableCell => {
@ -122,15 +122,15 @@ fn iter_nodes<'a>(
};
if is_header {
quote!(
<th>
<TableHeaderCell>
#(#children)*
</th>
</TableHeaderCell>
)
} else {
quote!(
<td>
<TableCell>
#(#children)*
</td>
</TableCell>
)
}
}

107
thaw/src/table/mod.rs
View file

@ -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<String>,
#[prop(default=true.into(), into)] single_row: MaybeSignal<bool>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] single_column: MaybeSignal<bool>,
#[prop(optional, into)] style: MaybeProp<String>,
#[prop(optional, into)] class: MaybeProp<String>,
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! {
<table
class=class_list![
"thaw-table", ("thaw-table--single-row", move || single_row.get()),
("thaw-table--single-column", move || single_column.get()), class.map(| c | move ||
c.get())
]
style=move || format!("{}{}", css_vars.get(), style.get())
class=class_list!["thaw-table", class]
style=move || style.get()
>
{children()}
</table>
}
}
#[component]
pub fn TableHeader(children: Children) -> impl IntoView {
view! {
<thead class="thaw-table-header">
{children()}
</thead>
}
}
#[component]
pub fn TableHeaderCell(#[prop(optional)] children: Option<Children>) -> impl IntoView {
view! {
<th class="thaw-table-header-cell">
<button class="thaw-table-header-cell__button" role="presentation">
<OptionComp value=children let:children>
{children()}
</OptionComp>
</button>
</th>
}
}
#[component]
pub fn TableBody(children: Children) -> impl IntoView {
view! {
<tbody class="thaw-table-body">
{children()}
</tbody>
}
}
#[component]
pub fn TableRow(children: Children) -> impl IntoView {
view! {
<tr class="thaw-table-row">
{children()}
</tr>
}
}
#[component]
pub fn TableCell(#[prop(optional)] children: Option<Children>) -> impl IntoView {
view! {
<td class="thaw-table-cell">
<OptionComp value=children let:children>
{children()}
</OptionComp>
</td>
}
}
#[component]
pub fn TableCellLayout(children: Children) -> impl IntoView {
view! {
<div class="thaw-table-cell-layout">
{children()}
</div>
}
}

94
thaw/src/table/table.css
View file

@ -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);
}

26
thaw/src/table/theme.rs
View file

@ -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(),
}
}
}

5
thaw/src/theme/mod.rs
View file

@ -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(),