adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 16:44: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" "Melt UI"
</span> </span>
<Button <Button
variant=ButtonVariant::TEXT variant=ButtonVariant::Text
on:click=move |_| { on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui"); _ = 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> <h1>"Alert"</h1>
<Demo> <Demo>
<Space vertical=true> <Space vertical=true>
<Alert variant=AlertVariant::SUCCESS title="title"> <Alert variant=AlertVariant::Success title="title">
"success" "success"
</Alert> </Alert>
<Alert variant=AlertVariant::WARNING title="title"> <Alert variant=AlertVariant::Warning title="title">
"warning" "warning"
</Alert> </Alert>
<Alert variant=AlertVariant::ERROR title="title"> <Alert variant=AlertVariant::Error title="title">
"error" "error"
</Alert> </Alert>
</Space> </Space>
@ -24,9 +24,9 @@ pub fn AlertPage() -> impl IntoView {
slot slot
html=highlight_str!( html=highlight_str!(
r#" r#"
<Alert variant=AlertVariant::SUCCESS title="title">"success"</Alert> <Alert variant=AlertVariant::Success title="title">"success"</Alert>
<Alert variant=AlertVariant::WARNING title="title">"warning"</Alert> <Alert variant=AlertVariant::Warning title="title">"warning"</Alert>
<Alert variant=AlertVariant::ERROR title="title">"error"</Alert> <Alert variant=AlertVariant::Error title="title">"error"</Alert>
"#, "#,
"rust" "rust"
) )

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

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

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

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

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

@ -11,7 +11,7 @@ pub fn Home() -> impl IntoView {
} }
view! { view! {
<Layout <Layout
position=LayoutPosition::ABSOLUTE position=LayoutPosition::Absolute
style="display: flex; align-items: center; justify-content: center; flex-direction: column;" 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> <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()); navigate("/components/menu", Default::default());
}>"Read the docs"</Button> }>"Read the docs"</Button>
<Button <Button
variant=ButtonVariant::TEXT variant=ButtonVariant::Text
on:click=move |_| { on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui"); _ = 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> <Demo>
<Space vertical=true> <Space vertical=true>
<Input value/> <Input value/>
<Input value variant=InputVariant::PASSWORD/> <Input value variant=InputVariant::Password/>
</Space> </Space>
<DemoCode <DemoCode
slot slot
@ -22,7 +22,7 @@ pub fn InputPage() -> impl IntoView {
view! { view! {
<Input value/> <Input value/>
<Input value variant=InputVariant::PASSWORD /> <Input value variant=InputVariant::Password />
} }
"#, "#,
"rust" "rust"

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

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

30
src/alert/mod.rs
View file

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

46
src/button/mod.rs
View file

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

10
src/layout/mod.rs
View file

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

21
src/space/mod.rs
View file

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