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

Feat/class param continued (#55)

Browse source 
* Add class param to components

* Add class param to all components

* Add class param to all components

* fix: Failed to run the SSR mode

* style: cargo fmt and leptosfmt

---------

Co-authored-by: Cristobal Andrada <kandrelczyk@gmail.com>
Co-authored-by: luoxiao <luoxiaozero@163.com>
This commit is contained in:
kandrelczyk 2023-12-20 06:44:30 +01:00 • committed by GitHub
parent 1f074d4222
commit 46af07746c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 539 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
demo/src/pages/badge/mod.rs
View file

@ -107,6 +107,12 @@ pub fn BadgePage() -> impl IntoView {
<td></td>
<td>"Badge's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the badge element."</td>
</tr>
</tbody>
</Table>
</div>

12
demo/src/pages/breadcrumb/mod.rs
View file

@ -86,6 +86,12 @@ pub fn BreadcrumbPage() -> impl IntoView {
<td></td>
<td>"Breadcrumb's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the breadcrumb element."</td>
</tr>
</tbody>
</Table>
<h3>"BreadcrumbItem Props"</h3>
@ -105,6 +111,12 @@ pub fn BreadcrumbPage() -> impl IntoView {
<td></td>
<td>"BreadcrumbItem's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the breadcrumb link element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/calendar/mod.rs
View file

@ -50,6 +50,12 @@ pub fn CalendarPage() -> impl IntoView {
</td>
<td></td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the calendar element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/card/mod.rs
View file

@ -84,6 +84,12 @@ pub fn CardPage() -> impl IntoView {
<td></td>
<td>"Card's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the card element."</td>
</tr>
</tbody>
</Table>
<h3>"Card Slots"</h3>

6
demo/src/pages/checkbox/mod.rs
View file

@ -106,6 +106,12 @@ pub fn CheckboxPage() -> impl IntoView {
<td></td>
<td>"CheckboxGroup's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the checkbox element."</td>
</tr>
</tbody>
</Table>
<h3>"CheckboxItem Props"</h3>

6
demo/src/pages/color_picker/mod.rs
View file

@ -44,6 +44,12 @@ pub fn ColorPickerPage() -> impl IntoView {
<td>"RwSignal<RGBA>"</td>
<td>"Value of the picker."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the color picker element."</td>
</tr>
</tbody>
</Table>
</div>

19
demo/src/pages/divider/mod.rs
View file

@ -23,6 +23,25 @@ pub fn DividerPage() -> impl IntoView {
</DemoCode>
</Demo>
<h3>"Divider 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>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the divider element."</td>
</tr>
</tbody>
</Table>
</div>
}
}

37
demo/src/pages/grid/mod.rs
View file

@ -142,6 +142,43 @@ pub fn GridPage() -> impl IntoView {
<td>"0"</td>
<td>"Vertical gap."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the grid element."</td>
</tr>
</tbody>
</Table>
<h3>"GridItem 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>"column"</td>
<td>"MaybeSignal<u16>"</td>
<td>"1"</td>
<td>"Number of columns this grid item will occupy."</td>
</tr>
<tr>
<td>"offset"</td>
<td>"MaybeSignal<u16>"</td>
<td>"0"</td>
<td>"Horizontal offset."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the grid item element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/image/mod.rs
View file

@ -70,6 +70,12 @@ pub fn ImagePage() -> impl IntoView {
<td>"Default::default()"</td>
<td>"Object-fit type of the image in the container."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the image element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/input/mod.rs
View file

@ -213,6 +213,12 @@ pub fn InputPage() -> impl IntoView {
<td>"None"</td>
<td>"Callback triggered when the input is blurred."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the input element."</td>
</tr>
</tbody>
</Table>
<h3>"Input Slots"</h3>

6
demo/src/pages/input_number/mod.rs
View file

@ -108,6 +108,12 @@ pub fn InputNumberPage() -> impl IntoView {
<td>"false"</td>
<td>"Whether the input is invalid."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the input element."</td>
</tr>
</tbody>
</Table>
<h3>"T impl"</h3>

22
demo/src/pages/menu/mod.rs
View file

@ -15,9 +15,7 @@ pub fn MenuPage() -> impl IntoView {
<MenuItem key="o" label="or"/>
</Menu>
<DemoCode slot>
{highlight_str!(
r#"
{highlight_str!( r#"
let value = create_rw_signal(String::from("o"));
<Menu value>
@ -53,6 +51,12 @@ pub fn MenuPage() -> impl IntoView {
<td></td>
<td>"Menu's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the menu element."</td>
</tr>
</tbody>
</Table>
<h3>"MenuGroup Props"</h3>
@ -78,6 +82,12 @@ pub fn MenuPage() -> impl IntoView {
<td></td>
<td>"MenuGroup's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the menu group element."</td>
</tr>
</tbody>
</Table>
<h3>"MenuItem Props"</h3>
@ -103,6 +113,12 @@ pub fn MenuPage() -> impl IntoView {
<td>"Default::default()"</td>
<td>"The indentifier of the menu item."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the menu item element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/nav_bar/mod.rs
View file

@ -89,6 +89,12 @@ pub fn NavBarPage() -> impl IntoView {
<td>"Default::default()"</td>
<td>"NavBar right click."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the NavBar element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/radio/mod.rs
View file

@ -51,6 +51,12 @@ pub fn RadioPage() -> impl IntoView {
<td></td>
<td>"Radio's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the radio element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/select/mod.rs
View file

@ -56,6 +56,12 @@ pub fn SelectPage() -> impl IntoView {
<td>"vec![]"</td>
<td>"Options that can be selected."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the select element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/slider/mod.rs
View file

@ -114,6 +114,12 @@ pub fn SliderPage() -> impl IntoView {
<td></td>
<td>"Slider labels."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the slider element."</td>
</tr>
</tbody>
</Table>
<h3>"SliderLabel Props"</h3>

6
demo/src/pages/space/mod.rs
View file

@ -112,6 +112,12 @@ pub fn SpacePage() -> impl IntoView {
<td></td>
<td>"Space's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the space element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/switch/mod.rs
View file

@ -42,6 +42,12 @@ pub fn SwitchPage() -> impl IntoView {
<td>"false"</td>
<td>"Swith's value."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the switch element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/table/mod.rs
View file

@ -96,6 +96,12 @@ pub fn TablePage() -> impl IntoView {
<td></td>
<td>"Table's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the table element."</td>
</tr>
</tbody>
</Table>
</div>

12
demo/src/pages/tabs/mod.rs
View file

@ -69,6 +69,12 @@ pub fn TabsPage() -> impl IntoView {
<td></td>
<td>"Tabs content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the tabs element."</td>
</tr>
</tbody>
</Table>
<h3>"Tab Props"</h3>
@ -106,6 +112,12 @@ pub fn TabsPage() -> impl IntoView {
<td></td>
<td>"Tab's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the tab element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/tag/mod.rs
View file

@ -62,6 +62,12 @@ pub fn TagPage() -> impl IntoView {
<td></td>
<td>"Tag's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the tag element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/time_picker/mod.rs
View file

@ -47,6 +47,12 @@ pub fn TimePickerPage() -> impl IntoView {
<td></td>
<td></td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the time picker element."</td>
</tr>
</tbody>
</Table>
</div>

6
demo/src/pages/typography/mod.rs
View file

@ -60,6 +60,12 @@ pub fn TypographyPage() -> impl IntoView {
<td></td>
<td>"Text's content."</td>
</tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the text element."</td>
</tr>
</tbody>
</Table>
</div>

1
src/badge/badge.css
View file

@ -6,6 +6,7 @@
position: absolute;
color: var(--thaw-font-color);
background-color: var(--thaw-background-color);
z-index: 10;
}
.thaw-badge__sup--value {
top: -9px;

13
src/badge/mod.rs
View file

@ -1,4 +1,11 @@
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
#[derive(Default, Clone)]
@ -25,6 +32,7 @@ pub fn Badge(
#[prop(default = MaybeSignal::Static(u32::MAX), into)] max: MaybeSignal<u32>,
#[prop(optional, into)] variant: MaybeSignal<BadgeVariant>,
#[prop(optional, into)] dot: MaybeSignal<bool>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -51,9 +59,12 @@ pub fn Badge(
value.to_string()
}
});
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-badge" style=move || css_vars.get()>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-badge__sup"
class=("thaw-badge__sup--value", move || !dot.get() && !value.get().is_empty())
class=("thaw-badge__sup--dot", move || dot.get())

14
src/breadcrumb/breadcrumb_item.rs
View file

@ -1,12 +1,22 @@
use super::use_breadcrumb_separator;
use leptos::*;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::utils::ssr_class;
#[component]
pub fn BreadcrumbItem(children: Children) -> impl IntoView {
pub fn BreadcrumbItem(
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
let breadcrumb_separator = use_breadcrumb_separator();
let ssr_class = ssr_class(&class);
view! {
<li class="thaw-breadcrumb-item">
<span class="thaw-breadcrumb-item__link">{children()}</span>
<span class=ssr_class use:dyn_classes=class class="thaw-breadcrumb-item__link">
{children()}
</span>
<span class="thaw-breadcrumb-item__separator">
{move || breadcrumb_separator.0.get()}
</span>

16
src/breadcrumb/mod.rs
View file

@ -1,7 +1,12 @@
mod breadcrumb_item;
mod theme;
use crate::{use_theme, utils::mount_style, Theme};
use crate::utils::dyn_classes;
use crate::{
use_theme,
utils::{mount_style, ssr_class},
Theme,
};
pub use breadcrumb_item::BreadcrumbItem;
use leptos::*;
pub use theme::BreadcrumbTheme;
@ -9,6 +14,7 @@ pub use theme::BreadcrumbTheme;
#[component]
pub fn Breadcrumb(
#[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal<String>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("breadcrumb", include_str!("./breadcrumb.css"));
@ -31,9 +37,15 @@ pub fn Breadcrumb(
});
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<Provider value=BreadcrumbSeparatorInjection(separator)>
<nav class="thaw-breadcrumb" style=move || css_vars.get()>
<nav
class=ssr_class
use:dyn_classes=class
class="thaw-breadcrumb"
style=move || css_vars.get()
>
<ul>{children()}</ul>
</nav>
</Provider>

17
src/calendar/mod.rs
View file

@ -1,9 +1,11 @@
mod theme;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
chrono::{Datelike, Days, Local, NaiveDate},
use_theme,
utils::mount_style,
utils::{mount_style, ssr_class},
Button, ButtonGroup, ButtonVariant, Theme,
};
use chrono::{Month, Months};
@ -13,7 +15,10 @@ use std::ops::Deref;
pub use theme::CalendarTheme;
#[component]
pub fn Calendar(#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>) -> impl IntoView {
pub fn Calendar(
#[prop(optional, into)] class: MaybeSignal<String>,
#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>,
) -> impl IntoView {
mount_style("calendar", include_str!("./calendar.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
@ -112,8 +117,14 @@ pub fn Calendar(#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>) -> i
*date = *date + Months::new(1);
});
};
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-calendar" style=move || css_vars.get()>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-calendar"
style=move || css_vars.get()
>
<div class="thaw-calendar__header">
<span class="thaw-calendar__header-title">

2
src/card/card.css
View file

@ -4,6 +4,7 @@
border: 1px solid var(--thaw-border-color);
border-radius: 3px;
overflow: hidden;
background-color: var(--thaw-background-color); /* moving here so that applying padding to card element works correctly */
}
.thaw-card__header {
font-weight: 600;
@ -21,7 +22,6 @@
.thaw-card__content,
.thaw-card__footer {
padding: 12px 28px;
background-color: var(--thaw-background-color);
}
.thaw-card__header {
padding: 20px 28px;

13
src/card/mod.rs
View file

@ -1,4 +1,11 @@
use crate::{components::*, use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
components::*,
use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
#[derive(Clone)]
@ -25,6 +32,7 @@ pub fn Card(
#[prop(optional, into)] title: MaybeSignal<String>,
#[prop(optional)] card_header: Option<CardHeader>,
#[prop(optional)] card_header_extra: Option<CardHeaderExtra>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
#[prop(optional)] card_footer: Option<CardFooter>,
) -> impl IntoView {
@ -51,8 +59,9 @@ pub fn Card(
let header = store_value(card_header);
let header_extra = store_value(card_header_extra);
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-card" style=move || css_vars.get()>
<div class=ssr_class use:dyn_classes=class class="thaw-card" style=move || css_vars.get()>
<If cond=is_header>
<Then slot>
<div class="thaw-card__header">

7
src/checkbox/checkbox_item.rs
View file

@ -7,6 +7,7 @@ use leptos::*;
#[component]
pub fn CheckboxItem(
#[prop(optional, into)] label: Option<String>,
#[prop(optional, into)] class: MaybeSignal<String>,
#[prop(into)] key: String,
) -> impl IntoView {
let checkbox_group = use_checkbox_group();
@ -32,5 +33,9 @@ pub fn CheckboxItem(
item_key.get_value()
};
view! { <Checkbox value=checked>{label}</Checkbox> }
view! {
<Checkbox class value=checked>
{label}
</Checkbox>
}
}

14
src/checkbox/mod.rs
View file

@ -1,7 +1,15 @@
mod checkbox_group;
mod checkbox_item;
use crate::{components::*, icon::*, theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
components::*,
icon::*,
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
pub use checkbox_group::CheckboxGroup;
pub use checkbox_item::CheckboxItem;
use icondata::AiIcon;
@ -10,6 +18,7 @@ use leptos::*;
#[component]
pub fn Checkbox(
#[prop(optional, into)] value: RwSignal<bool>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -26,8 +35,11 @@ pub fn Checkbox(
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<div
class=ssr_class
use:dyn_classes=class
class:thaw-checkbox=true
class=("thaw-checkbox--checked", move || value.get())
style=move || css_vars.get()

21
src/color_picker/mod.rs
View file

@ -2,14 +2,22 @@ mod color;
mod theme;
use crate::components::{Binder, Follower, FollowerPlacement};
use crate::{use_theme, utils::mount_style, Theme};
use crate::utils::dyn_classes;
use crate::{
use_theme,
utils::{mount_style, ssr_class},
Theme,
};
pub use color::*;
use leptos::leptos_dom::helpers::WindowListenerHandle;
use leptos::*;
pub use theme::ColorPickerTheme;
#[component]
pub fn ColorPicker(#[prop(optional, into)] value: RwSignal<RGBA>) -> impl IntoView {
pub fn ColorPicker(
#[prop(optional, into)] value: RwSignal<RGBA>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
mount_style("color-picker", include_str!("./color-picker.css"));
let theme = use_theme(Theme::light);
let popover_css_vars = create_memo(move |_| {
@ -90,9 +98,16 @@ pub fn ColorPicker(#[prop(optional, into)] value: RwSignal<RGBA>) -> impl IntoVi
on_cleanup(move || timer.remove());
}
let ssr_class = ssr_class(&class);
view! {
<Binder target_ref=trigger_ref>
<div class="thaw-color-picker-trigger" on:click=show_popover ref=trigger_ref>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-color-picker-trigger"
on:click=show_popover
ref=trigger_ref
>
<div class="thaw-color-picker-trigger__content" style=move || style.get()>
{move || label.get()}
</div>

9
src/divider/mod.rs
View file

@ -1,12 +1,15 @@
use leptos::*;
use crate::utils::mount_style;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::utils::{mount_style, ssr_class};
#[component]
pub fn Divider() -> impl IntoView {
pub fn Divider(#[prop(optional, into)] class: MaybeSignal<String>) -> impl IntoView {
mount_style("divider", include_str!("./divider.css"));
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-divider">
<div class=ssr_class use:dyn_classes=class class="thaw-divider">
<div class="thaw-divider__line"></div>
</div>
}

8
src/grid/grid_item.rs
View file

@ -1,10 +1,15 @@
use super::use_grid;
use leptos::*;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::utils::ssr_class;
#[component]
pub fn GridItem(
#[prop(default = MaybeSignal::Static(1u16), into)] column: MaybeSignal<u16>,
#[prop(optional, into)] offset: MaybeSignal<u16>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
let grid = use_grid();
@ -32,8 +37,9 @@ pub fn GridItem(
style
});
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-grid-item" style=move || style.get()>
<div class=ssr_class use:dyn_classes=class class="thaw-grid-item" style=move || style.get()>
{children()}
</div>
}

7
src/grid/mod.rs
View file

@ -1,5 +1,8 @@
mod grid_item;
use crate::utils::dyn_classes;
use crate::utils::ssr_class;
pub use grid_item::*;
use leptos::*;
@ -8,6 +11,7 @@ pub fn Grid(
#[prop(default = MaybeSignal::Static(1u16), into)] cols: MaybeSignal<u16>,
#[prop(optional, into)] x_gap: MaybeSignal<u16>,
#[prop(optional, into)] y_gap: MaybeSignal<u16>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
let style = create_memo(move |_| {
@ -20,9 +24,10 @@ pub fn Grid(
style
});
let ssr_class = ssr_class(&class);
view! {
<Provider value=GridInjection::new(x_gap)>
<div class="thaw-grid" style=move || style.get()>
<div class=ssr_class use:dyn_classes=class class="thaw-grid" style=move || style.get()>
{children()}
</div>
</Provider>

9
src/image/mod.rs
View file

@ -1,5 +1,9 @@
use leptos::*;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::utils::ssr_class;
#[component]
pub fn Image(
#[prop(optional, into)] src: MaybeSignal<String>,
@ -8,6 +12,7 @@ pub fn Image(
#[prop(optional, into)] height: MaybeSignal<String>,
#[prop(optional, into)] border_radius: MaybeSignal<String>,
#[prop(optional, into)] object_fit: MaybeSignal<String>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
let style = move || {
let mut style = String::new();
@ -29,8 +34,12 @@ pub fn Image(
style
};
let ssr_class = ssr_class(&class);
view! {
<img
class=ssr_class
use:dyn_classes=class
src=move || src.get()
alt=move || alt.get()
style=style

9
src/input/mod.rs
View file

@ -1,8 +1,10 @@
mod theme;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::{use_theme, Theme},
utils::{mount_style, ComponentRef},
utils::{mount_style, ssr_class, ComponentRef},
};
use leptos::*;
pub use theme::InputTheme;
@ -50,6 +52,7 @@ pub fn Input(
#[prop(optional)] input_prefix: Option<InputPrefix>,
#[prop(optional)] input_suffix: Option<InputSuffix>,
#[prop(optional)] comp_ref: ComponentRef<InputRef>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
mount_style("input", include_str!("./input.css"));
@ -123,8 +126,12 @@ pub fn Input(
input_ref.on_load(move |_| {
comp_ref.load(InputRef { input_ref });
});
let ssr_class = ssr_class(&class);
view! {
<div
class=ssr_class
use:dyn_classes=class
class="thaw-input"
class=("thaw-input--focus", move || is_focus.get())
class=("thaw-input--disabled", move || disabled.get())

3
src/input_number/mod.rs
View file

@ -11,6 +11,7 @@ pub fn InputNumber<T>(
#[prop(into)] step: MaybeSignal<T>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] invalid: MaybeSignal<bool>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView
where
T: Add<Output = T> + Sub<Output = T>,
@ -46,7 +47,7 @@ where
value.set(value.get_untracked() - step.get_untracked());
});
view! {
<Input value=input_value allow_value placeholder disabled invalid>
<Input class value=input_value allow_value placeholder disabled invalid>
<InputSuffix slot>
<Button disabled variant=ButtonVariant::Link on_click=sub>
<Icon icon=Icon::from(AiIcon::AiMinusOutlined) style="font-size: 18px"/>

22
src/menu/menu_group.rs
View file

@ -1,8 +1,18 @@
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
#[component]
pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoView {
pub fn MenuGroup(
#[prop(into)] label: String,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("menu-group", include_str!("./menu-group.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
@ -12,8 +22,14 @@ pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoVi
});
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-menu-group" style=move || css_vars.get()>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-menu-group"
style=move || css_vars.get()
>
{label}
</div>
{children()}

13
src/menu/menu_item.rs
View file

@ -1,11 +1,19 @@
use super::use_menu;
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
#[component]
pub fn MenuItem(
#[prop(into)] key: MaybeSignal<String>,
#[prop(into)] label: MaybeSignal<String>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
mount_style("menu-item", include_str!("./menu-item.css"));
let theme = use_theme(Theme::light);
@ -32,9 +40,12 @@ pub fn MenuItem(
});
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-menu-item">
<div
class=ssr_class
use:dyn_classes=class
class="thaw-menu-item__content"
class=("thaw-menu-item__content--selected", move || menu.0.get() == key.get())
on:click=on_click

14
src/menu/mod.rs
View file

@ -2,16 +2,26 @@ mod menu_group;
mod menu_item;
mod theme;
use crate::utils::dyn_classes;
use crate::utils::ssr_class;
use leptos::*;
pub use menu_group::MenuGroup;
pub use menu_item::*;
pub use theme::MenuTheme;
#[component]
pub fn Menu(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
pub fn Menu(
#[prop(optional, into)] value: RwSignal<String>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
let ssr_class = ssr_class(&class);
view! {
<Provider value=MenuInjection(value)>
<div class="thaw-menu">{children()}</div>
<div class=ssr_class use:dyn_classes=class class="thaw-menu">
{children()}
</div>
</Provider>
}
}

13
src/mobile/nav_bar/mod.rs
View file

@ -1,10 +1,12 @@
mod theme;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
components::*,
icon::*,
use_theme,
utils::{mount_style, StoredMaybeSignal},
utils::{mount_style, ssr_class, StoredMaybeSignal},
Theme,
};
use leptos::*;
@ -18,6 +20,7 @@ pub fn NavBar(
#[prop(optional, into)] on_click_left: Option<Callback<ev::MouseEvent>>,
#[prop(optional, into)] right_text: MaybeSignal<String>,
#[prop(optional, into)] on_click_right: Option<Callback<ev::MouseEvent>>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
mount_style("nav-bar", include_str!("./nav-bar.css"));
let theme = use_theme(Theme::light);
@ -45,8 +48,14 @@ pub fn NavBar(
}
};
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-nav-bar" style=move || css_vars.get()>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-nav-bar"
style=move || css_vars.get()
>
<If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
<Then slot>
<div class="thaw-nav-bar__left" on:click=on_click_left>

17
src/radio/mod.rs
View file

@ -1,8 +1,18 @@
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
#[component]
pub fn Radio(#[prop(optional, into)] value: RwSignal<bool>, children: Children) -> impl IntoView {
pub fn Radio(
#[prop(optional, into)] value: RwSignal<bool>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
let theme = use_theme(Theme::light);
mount_style("radio", include_str!("./radio.css"));
@ -16,8 +26,11 @@ pub fn Radio(#[prop(optional, into)] value: RwSignal<bool>, children: Children)
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<div
class=ssr_class
use:dyn_classes=class
class="thaw-radio"
class=("thaw-radio--checked", move || value.get())
style=move || css_vars.get()

7
src/select/mod.rs
View file

@ -1,9 +1,10 @@
mod theme;
use crate::utils::dyn_classes;
use crate::{
components::{Binder, Follower, FollowerPlacement, FollowerWidth},
theme::use_theme,
utils::mount_style,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
@ -20,6 +21,7 @@ pub struct SelectOption<T> {
pub fn Select<T>(
#[prop(optional, into)] value: RwSignal<Option<T>>,
#[prop(optional, into)] options: MaybeSignal<Vec<SelectOption<T>>>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView
where
T: Eq + Hash + Clone + 'static,
@ -106,9 +108,12 @@ where
.map_or(String::new(), |v| v.label.clone()),
None => String::new(),
});
let ssr_class = ssr_class(&class);
view! {
<Binder target_ref=trigger_ref>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-select"
ref=trigger_ref
on:click=show_menu

20
src/slider/mod.rs
View file

@ -1,7 +1,14 @@
mod slider_label;
mod theme;
use crate::{components::OptionComp, theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
components::OptionComp,
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
use web_sys::DomRect;
@ -13,6 +20,7 @@ pub fn Slider(
#[prop(optional, into)] value: RwSignal<f64>,
#[prop(default = MaybeSignal::Static(100f64), into)] max: MaybeSignal<f64>,
#[prop(optional, into)] step: MaybeSignal<f64>,
#[prop(optional, into)] class: MaybeSignal<String>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
mount_style("slider", include_str!("./slider.css"));
@ -110,8 +118,15 @@ pub fn Slider(
});
on_cleanup(move || on_mouse_move.remove());
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-slider" style=move || css_vars.get() on:click=on_mouse_click>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-slider"
style=move || css_vars.get()
on:click=on_mouse_click
>
<div class="thaw-slider-rail" ref=rail_ref>
<div
class="thaw-slider-rail__fill"
@ -126,6 +141,7 @@ pub fn Slider(
class="thaw-slider-handle"
style=move || { format!("left: {}%", percentage.get()) }
></div>
</div>
}
}

8
src/space/mod.rs
View file

@ -1,4 +1,6 @@
use crate::utils::mount_style;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::utils::{mount_style, ssr_class};
use leptos::*;
#[derive(Default)]
@ -16,6 +18,7 @@ pub enum SpaceGap {
pub fn Space(
#[prop(optional)] gap: SpaceGap,
#[prop(optional)] vertical: bool,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("space", include_str!("./space.css"));
@ -27,8 +30,11 @@ pub fn Space(
SpaceGap::WH(width, height) => format!("{width}px {height}px"),
};
let ssr_class = ssr_class(&class);
view! {
<div
class=ssr_class
use:dyn_classes=class
class="thaw-space"
style:gap=gap
style:flex-direction=if vertical { "column" } else { "row" }

16
src/switch/mod.rs
View file

@ -1,11 +1,20 @@
mod theme;
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
pub use theme::SwitchTheme;
#[component]
pub fn Switch(#[prop(optional, into)] value: RwSignal<bool>) -> impl IntoView {
pub fn Switch(
#[prop(optional, into)] value: RwSignal<bool>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
mount_style("switch", include_str!("./switch.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
@ -22,8 +31,11 @@ pub fn Switch(#[prop(optional, into)] value: RwSignal<bool>) -> impl IntoView {
});
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<div
class=ssr_class
use:dyn_classes=class
class="thaw-switch"
class=("thaw-switch--active", move || value.get())
style=move || css_vars.get()

12
src/table/mod.rs
View file

@ -1,6 +1,12 @@
mod theme;
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
pub use theme::TableTheme;
@ -8,6 +14,7 @@ pub use theme::TableTheme;
pub fn Table(
#[prop(optional, into)] style: MaybeSignal<String>,
#[prop(default=true.into(), into)] single_row: MaybeSignal<bool>,
#[prop(optional, into)] class: MaybeSignal<String>,
#[prop(optional, into)] single_column: MaybeSignal<bool>,
children: Children,
) -> impl IntoView {
@ -36,8 +43,11 @@ pub fn Table(
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<table
class=ssr_class
use:dyn_classes=class
class="thaw-table"
class=("thaw-table--single-row", move || single_row.get())
class=("thaw-table--single-column", move || single_column.get())

20
src/tabs/mod.rs
View file

@ -1,12 +1,22 @@
mod tab;
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
pub use tab::*;
#[component]
pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children) -> impl IntoView {
pub fn Tabs(
#[prop(optional, into)] value: RwSignal<String>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("tabs", include_str!("./tabs.css"));
let tab_options_vec = create_rw_signal(vec![]);
@ -15,7 +25,7 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
active_key: value,
tab_options_vec,
}>
<TabsInner value tab_options_vec children/>
<TabsInner class value tab_options_vec children/>
</Provider>
}
}
@ -24,6 +34,7 @@ pub fn Tabs(#[prop(optional, into)] value: RwSignal<String>, children: Children)
fn TabsInner(
value: RwSignal<String>,
tab_options_vec: RwSignal<Vec<TabOption>>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("tabs", include_str!("./tabs.css"));
@ -50,8 +61,9 @@ fn TabsInner(
let label_list_ref = create_node_ref::<html::Div>();
let children = children();
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-tabs" style=move || css_vars.get()>
<div class=ssr_class use:dyn_classes=class class="thaw-tabs" style=move || css_vars.get()>
<div class="thaw-tabs__label-list" ref=label_list_ref>
<For
each=move || tab_options_vec.get()

13
src/tabs/tab.rs
View file

@ -1,5 +1,7 @@
use super::use_tabs;
use crate::utils::mount_style;
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::utils::{mount_style, ssr_class};
use leptos::*;
#[derive(Clone)]
@ -12,6 +14,7 @@ pub(crate) struct TabOption {
pub fn Tab(
#[prop(into)] key: String,
#[prop(into)] label: String,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("tab", include_str!("./tab.css"));
@ -20,8 +23,14 @@ pub fn Tab(
key: key.clone(),
label,
});
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-tab" class=("thaw-tab--hidden", move || key != tabs.get_key())>
<div
class=ssr_class
use:dyn_classes=class
class="thaw-tab"
class=("thaw-tab--hidden", move || key != tabs.get_key())
>
{children()}
</div>
}

12
src/tag/mod.rs
View file

@ -1,6 +1,12 @@
mod theme;
use crate::{theme::use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
theme::use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
pub use theme::TagTheme;
@ -43,6 +49,7 @@ impl TagVariant {
#[component]
pub fn Tag(
#[prop(optional, into)] variant: MaybeSignal<TagVariant>,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("tag", include_str!("./tag.css"));
@ -66,8 +73,9 @@ pub fn Tag(
});
css_vars
});
let ssr_class = ssr_class(&class);
view! {
<div class="thaw-tag" style=move || css_vars.get()>
<div class=ssr_class use:dyn_classes=class class="thaw-tag" style=move || css_vars.get()>
<span class="thaw-tag__content">{children()}</span>
</div>
}

7
src/time_picker/mod.rs
View file

@ -11,7 +11,10 @@ use leptos::*;
pub use theme::TimePickerTheme;
#[component]
pub fn TimePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveTime>>) -> impl IntoView {
pub fn TimePicker(
#[prop(optional, into)] value: RwSignal<Option<NaiveTime>>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
mount_style("time-picker", include_str!("./time-picker.css"));
let time_picker_ref = create_node_ref::<html::Div>();
let panel_ref = ComponentRef::<PanelRef>::default();
@ -70,7 +73,7 @@ pub fn TimePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveTime>>) ->
view! {
<Binder target_ref=time_picker_ref>
<div ref=time_picker_ref>
<Input value=show_time_text on_focus=open_panel on_blur=on_input_blur>
<Input class value=show_time_text on_focus=open_panel on_blur=on_input_blur>
<InputSuffix slot>
<Icon
icon=Icon::from(AiIcon::AiClockCircleOutlined)

29
src/typography/text.rs
View file

@ -1,8 +1,18 @@
use crate::{use_theme, utils::mount_style, Theme};
#[cfg(not(feature = "ssr"))]
use crate::utils::dyn_classes;
use crate::{
use_theme,
utils::{mount_style, ssr_class},
Theme,
};
use leptos::*;
#[component]
pub fn Text(#[prop(optional)] code: bool, children: Children) -> impl IntoView {
pub fn Text(
#[prop(optional)] code: bool,
#[prop(optional, into)] class: MaybeSignal<String>,
children: Children,
) -> impl IntoView {
mount_style("text", include_str!("./text.css"));
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
@ -16,14 +26,25 @@ pub fn Text(#[prop(optional)] code: bool, children: Children) -> impl IntoView {
css_vars
});
let ssr_class = ssr_class(&class);
if code {
view! {
<code class="thaw-text thaw-text--code" style=move || css_vars.get()>
<code
class=ssr_class
use:dyn_classes=class
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()
view! {
<span class=ssr_class use:dyn_classes=class class="thaw-text">
{children()}
</span>
}
.into_any()
}
}