feat: variant replace type_

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

View file

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

View file

@ -10,25 +10,25 @@ pub fn ButtonPage() -> impl IntoView {
<h1>"Button"</h1>
<Demo>
<Space>
<Button type_=ButtonType::PRIMARY>"PRIMARY"</Button>
<Button type_=ButtonType::SOLID>"SOLID"</Button>
<Button type_=ButtonType::TEXT>"TEXT"</Button>
<Button type_=ButtonType::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 type_=ButtonType::PRIMARY>
<Button variant=ButtonVariant::PRIMARY>
"PRIMARY"
</Button>
<Button type_=ButtonType::SOLID>
<Button variant=ButtonVariant::SOLID>
"SOLID"
</Button>
<Button type_=ButtonType::TEXT>
<Button variant=ButtonVariant::TEXT>
"TEXT"
</Button>
<Button type_=ButtonType::LINK>
<Button variant=ButtonVariant::LINK>
"LINK"
</Button>
"#,

View file

@ -22,7 +22,7 @@ pub fn Home() -> impl IntoView {
navigate("/components/menu", Default::default());
}>"Read the docs"</Button>
<Button
type_=ButtonType::TEXT
variant=ButtonVariant::TEXT
on:click=move |_| {
_ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
}

View file

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

View file

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

View file

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