adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: variant replace type_

Browse source
This commit is contained in:
luoxiao 2023-10-08 14:01:24 +08:00
parent 867e8f693d
commit 63197db239
6 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
gh-pages/src/components/site_header.rs
View file

@ -17,7 +17,7 @@ pub fn SiteHeader() -> impl IntoView {
"Melt UI" "Melt UI"
</span> </span>
<Button <Button
type_=ButtonType::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");
} }

16
gh-pages/src/pages/button/mod.rs
View file

@ -10,25 +10,25 @@ pub fn ButtonPage() -> impl IntoView {
<h1>"Button"</h1> <h1>"Button"</h1>
<Demo> <Demo>
<Space> <Space>
<Button type_=ButtonType::PRIMARY>"PRIMARY"</Button> <Button variant=ButtonVariant::PRIMARY>"PRIMARY"</Button>
<Button type_=ButtonType::SOLID>"SOLID"</Button> <Button variant=ButtonVariant::SOLID>"SOLID"</Button>
<Button type_=ButtonType::TEXT>"TEXT"</Button> <Button variant=ButtonVariant::TEXT>"TEXT"</Button>
<Button type_=ButtonType::LINK>"LINK"</Button> <Button variant=ButtonVariant::LINK>"LINK"</Button>
</Space> </Space>
<DemoCode <DemoCode
slot slot
html=highlight_str!( html=highlight_str!(
r#" r#"
<Button type_=ButtonType::PRIMARY> <Button variant=ButtonVariant::PRIMARY>
"PRIMARY" "PRIMARY"
</Button> </Button>
<Button type_=ButtonType::SOLID> <Button variant=ButtonVariant::SOLID>
"SOLID" "SOLID"
</Button> </Button>
<Button type_=ButtonType::TEXT> <Button variant=ButtonVariant::TEXT>
"TEXT" "TEXT"
</Button> </Button>
<Button type_=ButtonType::LINK> <Button variant=ButtonVariant::LINK>
"LINK" "LINK"
</Button> </Button>
"#, "#,

2
gh-pages/src/pages/home.rs
View file

@ -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
type_=ButtonType::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
gh-pages/src/pages/input/mod.rs
View file

@ -11,7 +11,7 @@ pub fn InputPage() -> impl IntoView {
<h1>"Input"</h1> <h1>"Input"</h1>
<Demo> <Demo>
<Input value/> <Input value/>
<Input value type_=InputType::PASSWORD/> <Input value variant=InputVariant::PASSWORD/>
<DemoCode <DemoCode
slot slot
html=highlight_str!( html=highlight_str!(
@ -19,7 +19,7 @@ pub fn InputPage() -> impl IntoView {
let value = create_rw_signal(String::from("o")); let value = create_rw_signal(String::from("o"));
<Input value/> <Input value/>
<Input value type_=InputType::PASSWORD /> <Input value variant=InputVariant::PASSWORD />
"#, "#,
"rust" "rust"
) )

10
src/button/mod.rs
View file

@ -5,7 +5,7 @@ use leptos::*;
pub use theme::ButtonTheme; pub use theme::ButtonTheme;
#[derive(Default, PartialEq, Clone, Copy)] #[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonType { pub enum ButtonVariant {
#[default] #[default]
PRIMARY, PRIMARY,
SOLID, SOLID,
@ -53,7 +53,7 @@ impl ButtonColor {
#[component] #[component]
pub fn Button( pub fn Button(
#[prop(optional, into)] style: MaybeSignal<String>, #[prop(optional, into)] style: MaybeSignal<String>,
#[prop(optional, into)] type_: MaybeSignal<ButtonType>, #[prop(optional, into)] variant: MaybeSignal<ButtonVariant>,
#[prop(optional, into)] color: MaybeSignal<ButtonColor>, #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] round: MaybeSignal<bool>, #[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] icon: Option<Icon>, #[prop(optional, into)] icon: Option<Icon>,
@ -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 type_.get() == ButtonType::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 || type_.get() == ButtonType::TEXT) class=("melt-button--text", move || variant.get() == ButtonVariant::TEXT)
class=("melt-button--link", move || type_.get() == ButtonType::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())

12
src/input/mod.rs
View file

@ -8,17 +8,17 @@ use leptos::*;
pub use theme::InputTheme; pub use theme::InputTheme;
#[derive(Default, Clone)] #[derive(Default, Clone)]
pub enum InputType { pub enum InputVariant {
#[default] #[default]
TEXT, TEXT,
PASSWORD, PASSWORD,
} }
impl InputType { impl InputVariant {
pub fn as_str(&self) -> &'static str { pub fn as_str(&self) -> &'static str {
match self { match self {
InputType::TEXT => "text", InputVariant::TEXT => "text",
InputType::PASSWORD => "password", InputVariant::PASSWORD => "password",
} }
} }
} }
@ -26,7 +26,7 @@ impl InputType {
#[component] #[component]
pub fn Input( pub fn Input(
#[prop(into)] value: RwSignal<String>, #[prop(into)] value: RwSignal<String>,
#[prop(optional, into)] type_: MaybeSignal<InputType>, #[prop(optional, into)] variant: MaybeSignal<InputVariant>,
) -> impl IntoView { ) -> impl IntoView {
let theme = use_theme(Theme::light); let theme = use_theme(Theme::light);
mount_style("input", include_str!("./input.css")); mount_style("input", include_str!("./input.css"));
@ -50,7 +50,7 @@ pub fn Input(
view! { view! {
<div class:melt-input=true style=move || css_vars.get()> <div class:melt-input=true style=move || css_vars.get()>
<input <input
type=move || type_.get().as_str() type=move || variant.get().as_str()
prop:value=move || value.get() prop:value=move || value.get()
ref=input_ref ref=input_ref
class="melt-input__input-el" class="melt-input__input-el"