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: enum prop

Browse source
This commit is contained in:
luoxiao 2023-10-16 21:15:43 +08:00
parent 087391f0f7
commit 4fed1310a4
12 changed files with 105 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/src/components/site_header.rs
View file

@ -17,7 +17,7 @@ pub fn SiteHeader() -> impl IntoView {
"Melt UI"
</span>
<Button
variant=ButtonVariant::TEXT
variant=ButtonVariant::Text
on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
}

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

@ -10,13 +10,13 @@ pub fn AlertPage() -> impl IntoView {
<h1>"Alert"</h1>
<Demo>
<Space vertical=true>
<Alert variant=AlertVariant::SUCCESS title="title">
<Alert variant=AlertVariant::Success title="title">
"success"
</Alert>
<Alert variant=AlertVariant::WARNING title="title">
<Alert variant=AlertVariant::Warning title="title">
"warning"
</Alert>
<Alert variant=AlertVariant::ERROR title="title">
<Alert variant=AlertVariant::Error title="title">
"error"
</Alert>
</Space>
@ -24,9 +24,9 @@ pub fn AlertPage() -> impl IntoView {
slot
html=highlight_str!(
r#"
<Alert variant=AlertVariant::SUCCESS title="title">"success"</Alert>
<Alert variant=AlertVariant::WARNING title="title">"warning"</Alert>
<Alert variant=AlertVariant::ERROR title="title">"error"</Alert>
<Alert variant=AlertVariant::Success title="title">"success"</Alert>
<Alert variant=AlertVariant::Warning title="title">"warning"</Alert>
<Alert variant=AlertVariant::Error title="title">"error"</Alert>
"#,
"rust"
)

60
demo/src/pages/button/mod.rs
View file

@ -10,26 +10,26 @@ pub fn ButtonPage() -> impl IntoView {
<h1>"Button"</h1>
<Demo>
<Space>
<Button variant=ButtonVariant::PRIMARY>"PRIMARY"</Button>
<Button variant=ButtonVariant::SOLID>"SOLID"</Button>
<Button variant=ButtonVariant::TEXT>"TEXT"</Button>
<Button variant=ButtonVariant::LINK>"LINK"</Button>
<Button variant=ButtonVariant::Primary>"Primary"</Button>
<Button variant=ButtonVariant::Solid>"Solid"</Button>
<Button variant=ButtonVariant::Text>"Text"</Button>
<Button variant=ButtonVariant::Link>"Link"</Button>
</Space>
<DemoCode
slot
html=highlight_str!(
r#"
<Button variant=ButtonVariant::PRIMARY>
"PRIMARY"
<Button variant=ButtonVariant::Primary>
"Primary"
</Button>
<Button variant=ButtonVariant::SOLID>
"SOLID"
<Button variant=ButtonVariant::Solid>
"Solid"
</Button>
<Button variant=ButtonVariant::TEXT>
"TEXT"
<Button variant=ButtonVariant::Text>
"Text"
</Button>
<Button variant=ButtonVariant::LINK>
"LINK"
<Button variant=ButtonVariant::Link>
"Link"
</Button>
"#,
"rust"
@ -42,26 +42,26 @@ pub fn ButtonPage() -> impl IntoView {
<h3>"color"</h3>
<Demo>
<Space>
<Button color=ButtonColor::PRIMARY>"PRIMARY Color"</Button>
<Button color=ButtonColor::SUCCESS>"SUCCESS Color"</Button>
<Button color=ButtonColor::WARNING>"WARNING Color"</Button>
<Button color=ButtonColor::ERROR>"ERROR Color"</Button>
<Button color=ButtonColor::Primary>"Primary Color"</Button>
<Button color=ButtonColor::Success>"Success Color"</Button>
<Button color=ButtonColor::Warning>"Warning Color"</Button>
<Button color=ButtonColor::Error>"Error Color"</Button>
</Space>
<DemoCode
slot
html=highlight_str!(
r#"
<Button color=ButtonColor::PRIMARY>
"PRIMARY Color"
<Button color=ButtonColor::Primary>
"Primary Color"
</Button>
<Button color=ButtonColor::SUCCESS>
"SUCCESS Color"
<Button color=ButtonColor::Success>
"Success Color"
</Button>
<Button color=ButtonColor::WARNING>
"WARNING Color"
<Button color=ButtonColor::Warning>
"Warning Color"
</Button>
<Button color=ButtonColor::ERROR>
"ERROR Color"
<Button color=ButtonColor::Error>
"Error Color"
</Button>
"#,
"rust"
@ -74,11 +74,11 @@ pub fn ButtonPage() -> impl IntoView {
<h3>"icon"</h3>
<Demo>
<Space>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
"Error Color Icon"
</Button>
<Button
color=ButtonColor::ERROR
color=ButtonColor::Error
icon=icondata::AiIcon::AiCloseOutlined
round=true
/>
@ -87,10 +87,10 @@ pub fn ButtonPage() -> impl IntoView {
slot
html=highlight_str!(
r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon"
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
"Error Color Icon"
</Button>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
<Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
"#,
"rust"

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

@ -25,9 +25,9 @@ pub fn ComponentsPage() -> impl IntoView {
selected
});
view! {
<Layout position=LayoutPosition::ABSOLUTE>
<Layout position=LayoutPosition::Absolute>
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::ABSOLUTE style="top: 54px;">
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 54px;">
<LayoutSider>
<Menu value=selected>
{

4
demo/src/pages/home.rs
View file

@ -11,7 +11,7 @@ pub fn Home() -> impl IntoView {
}
view! {
<Layout
position=LayoutPosition::ABSOLUTE
position=LayoutPosition::Absolute
style="display: flex; align-items: center; justify-content: center; flex-direction: column;"
>
<h1 style="font-size: 80px; line-height: 1;margin: 0 0 18px;">"Melt UI"</h1>
@ -22,7 +22,7 @@ pub fn Home() -> impl IntoView {
navigate("/components/menu", Default::default());
}>"Read the docs"</Button>
<Button
variant=ButtonVariant::TEXT
variant=ButtonVariant::Text
on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
}

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

@ -12,7 +12,7 @@ pub fn InputPage() -> impl IntoView {
<Demo>
<Space vertical=true>
<Input value/>
<Input value variant=InputVariant::PASSWORD/>
<Input value variant=InputVariant::Password/>
</Space>
<DemoCode
slot
@ -22,7 +22,7 @@ pub fn InputPage() -> impl IntoView {
view! {
<Input value/>
<Input value variant=InputVariant::PASSWORD />
<Input value variant=InputVariant::Password />
}
"#,
"rust"

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

@ -57,12 +57,12 @@ pub fn SpacePage() -> impl IntoView {
</Demo>
<h3>"gap"</h3>
<Demo>
<Space gap=SpaceGap::LARGE>
<Space gap=SpaceGap::Large>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<Space gap=SpaceGap::TUPLE(36, 36)>
<Space gap=SpaceGap::WH(36, 36)>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
@ -71,12 +71,12 @@ pub fn SpacePage() -> impl IntoView {
slot
html=highlight_str!(
r#"
<Space gap=SpaceGap::LARGE>
<Space gap=SpaceGap::Large>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<Space gap=SpaceGap::TUPLE(36, 36)>
<Space gap=SpaceGap::WH(36, 36)>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>

30
src/alert/mod.rs
View file

@ -7,31 +7,31 @@ pub use theme::AlertTheme;
#[derive(Clone)]
pub enum AlertVariant {
SUCCESS,
WARNING,
ERROR,
Success,
Warning,
Error,
}
impl AlertVariant {
pub fn theme_icon_color(&self, theme: &Theme) -> String {
match self {
AlertVariant::SUCCESS => theme.common.color_success.clone(),
AlertVariant::WARNING => theme.common.color_warning.clone(),
AlertVariant::ERROR => theme.common.color_error.clone(),
AlertVariant::Success => theme.common.color_success.clone(),
AlertVariant::Warning => theme.common.color_warning.clone(),
AlertVariant::Error => theme.common.color_error.clone(),
}
}
pub fn theme_background_color(&self, theme: &Theme) -> String {
match self {
AlertVariant::SUCCESS => theme.alert.success_background_color.clone(),
AlertVariant::WARNING => theme.alert.warning_background_color.clone(),
AlertVariant::ERROR => theme.alert.error_background_color.clone(),
AlertVariant::Success => theme.alert.success_background_color.clone(),
AlertVariant::Warning => theme.alert.warning_background_color.clone(),
AlertVariant::Error => theme.alert.error_background_color.clone(),
}
}
pub fn theme_border_color(&self, theme: &Theme) -> String {
match self {
AlertVariant::SUCCESS => theme.alert.success_border_color.clone(),
AlertVariant::WARNING => theme.alert.warning_border_color.clone(),
AlertVariant::ERROR => theme.alert.error_border_color.clone(),
AlertVariant::Success => theme.alert.success_border_color.clone(),
AlertVariant::Warning => theme.alert.warning_border_color.clone(),
AlertVariant::Error => theme.alert.error_border_color.clone(),
}
}
}
@ -72,9 +72,9 @@ pub fn Alert(
});
let icon = create_memo(move |_| {
match variant.get() {
AlertVariant::SUCCESS => AiIcon::AiCheckCircleFilled,
AlertVariant::WARNING => AiIcon::AiExclamationCircleFilled,
AlertVariant::ERROR => AiIcon::AiCloseCircleFilled,
AlertVariant::Success => AiIcon::AiCheckCircleFilled,
AlertVariant::Warning => AiIcon::AiExclamationCircleFilled,
AlertVariant::Error => AiIcon::AiCloseCircleFilled,
}
.into()
});

46
src/button/mod.rs
View file

@ -7,45 +7,45 @@ pub use theme::ButtonTheme;
#[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonVariant {
#[default]
PRIMARY,
SOLID,
TEXT,
LINK,
Primary,
Solid,
Text,
Link,
}
#[derive(Default, Clone)]
pub enum ButtonColor {
#[default]
PRIMARY,
SUCCESS,
WARNING,
ERROR,
Primary,
Success,
Warning,
Error,
}
impl ButtonColor {
pub fn theme_color(&self, theme: &Theme) -> String {
match self {
ButtonColor::PRIMARY => theme.common.color_primary.clone(),
ButtonColor::SUCCESS => theme.common.color_success.clone(),
ButtonColor::WARNING => theme.common.color_warning.clone(),
ButtonColor::ERROR => theme.common.color_error.clone(),
ButtonColor::Primary => theme.common.color_primary.clone(),
ButtonColor::Success => theme.common.color_success.clone(),
ButtonColor::Warning => theme.common.color_warning.clone(),
ButtonColor::Error => theme.common.color_error.clone(),
}
}
pub fn theme_color_hover(&self, theme: &Theme) -> String {
match self {
ButtonColor::PRIMARY => theme.common.color_primary_hover.clone(),
ButtonColor::SUCCESS => theme.common.color_success_hover.clone(),
ButtonColor::WARNING => theme.common.color_warning_hover.clone(),
ButtonColor::ERROR => theme.common.color_error_hover.clone(),
ButtonColor::Primary => theme.common.color_primary_hover.clone(),
ButtonColor::Success => theme.common.color_success_hover.clone(),
ButtonColor::Warning => theme.common.color_warning_hover.clone(),
ButtonColor::Error => theme.common.color_error_hover.clone(),
}
}
pub fn theme_color_active(&self, theme: &Theme) -> String {
match self {
ButtonColor::PRIMARY => theme.common.color_primary_active.clone(),
ButtonColor::SUCCESS => theme.common.color_success_active.clone(),
ButtonColor::WARNING => theme.common.color_warning_active.clone(),
ButtonColor::ERROR => theme.common.color_error_active.clone(),
ButtonColor::Primary => theme.common.color_primary_active.clone(),
ButtonColor::Success => theme.common.color_success_active.clone(),
ButtonColor::Warning => theme.common.color_warning_active.clone(),
ButtonColor::Error => theme.common.color_error_active.clone(),
}
}
}
@ -69,7 +69,7 @@ pub fn Button(
let bg_color = color.get().theme_color(&theme);
let bg_color_hover = color.get().theme_color_hover(&theme);
let bg_color_active = color.get().theme_color_active(&theme);
if variant.get() == ButtonVariant::PRIMARY {
if variant.get() == ButtonVariant::Primary {
css_vars.push_str(&format!("--background-color: {bg_color};"));
css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));
@ -113,8 +113,8 @@ pub fn Button(
view! {
<button
class:melt-button=true
class=("melt-button--text", move || variant.get() == ButtonVariant::TEXT)
class=("melt-button--link", move || variant.get() == ButtonVariant::LINK)
class=("melt-button--text", move || variant.get() == ButtonVariant::Text)
class=("melt-button--link", move || variant.get() == ButtonVariant::Link)
class=("melt-button--round", move || round.get())
class=("melt-button--disabled", move || disabled.get())
style=move || format!("{}{}", css_vars.get(), style.get())

8
src/input/mod.rs
View file

@ -10,15 +10,15 @@ pub use theme::InputTheme;
#[derive(Default, Clone)]
pub enum InputVariant {
#[default]
TEXT,
PASSWORD,
Text,
Password,
}
impl InputVariant {
pub fn as_str(&self) -> &'static str {
match self {
InputVariant::TEXT => "text",
InputVariant::PASSWORD => "password",
InputVariant::Text => "text",
InputVariant::Password => "password",
}
}
}

10
src/layout/mod.rs
View file

@ -9,15 +9,15 @@ use leptos::*;
#[derive(Default, PartialEq)]
pub enum LayoutPosition {
#[default]
STATIC,
ABSOLUTE,
Static,
Absolute,
}
impl LayoutPosition {
pub fn as_str(&self) -> &str {
match self {
LayoutPosition::STATIC => "static",
LayoutPosition::ABSOLUTE => "absolute",
LayoutPosition::Static => "static",
LayoutPosition::Absolute => "absolute",
}
}
}
@ -41,7 +41,7 @@ pub fn Layout(
view! {
<div
class="melt-layout"
class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE)
class=("melt-layout--absolute-positioned", position == LayoutPosition::Absolute)
style=move || style.get()
>
{children()}

21
src/space/mod.rs
View file

@ -3,12 +3,13 @@ use leptos::*;
#[derive(Default)]
pub enum SpaceGap {
SMALL,
Small,
#[default]
MEDIUM,
LARGE,
NUMBER(u16),
TUPLE(u16, u16),
Medium,
Large,
Size(u16),
/// width and height
WH(u16, u16),
}
#[component]
@ -19,11 +20,11 @@ pub fn Space(
) -> impl IntoView {
mount_style("space", include_str!("./space.css"));
let gap = match gap {
SpaceGap::SMALL => "4px 8px".into(),
SpaceGap::MEDIUM => "8px 12px".into(),
SpaceGap::LARGE => "12px 16px".into(),
SpaceGap::NUMBER(size) => format!("{size}px {size}px"),
SpaceGap::TUPLE(x, y) => format!("{x}px {y}px"),
SpaceGap::Small => "4px 8px".into(),
SpaceGap::Medium => "8px 12px".into(),
SpaceGap::Large => "12px 16px".into(),
SpaceGap::Size(size) => format!("{size}px {size}px"),
SpaceGap::WH(width, height) => format!("{width}px {height}px"),
};
view! {