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

Pref/231219 (#54)

Browse source 
* demo: AutoComplete add Prefix and Suffix

* pref: cargo clippy

* pref: fmt
This commit is contained in:
luoxiaozero 2023-12-19 16:26:51 +08:00 • committed by GitHub
parent 6c9e0c397f
commit 7ac738fb2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 106 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
demo/src/pages/auto_complete/mod.rs
View file

@ -78,6 +78,42 @@ pub fn AutoCompletePage() -> impl IntoView {
</DemoCode>
</Demo>
<h2>"Prefix & Suffix"</h2>
<Demo>
<Space vertical=true>
<AutoComplete value options>
<AutoCompletePrefix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
</AutoCompletePrefix>
</AutoComplete>
<AutoComplete value options>
<AutoCompleteSuffix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
</AutoCompleteSuffix>
</AutoComplete>
</Space>
<DemoCode slot>
{highlight_str!(
r#"
<Space vertical=true>
<AutoComplete value options>
<AutoCompletePrefix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
</AutoCompletePrefix>
</AutoComplete>
<AutoComplete value options>
<AutoCompleteSuffix slot>
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
</AutoCompleteSuffix>
</AutoComplete>
</Space>
"#,
"rust"
)}
</DemoCode>
</Demo>
<h3>"AutoComplete Props"</h3>
<Table single_column=true>
<thead>
@ -161,6 +197,32 @@ pub fn AutoCompletePage() -> impl IntoView {
</tr>
</tbody>
</Table>
<h3>"AutoComplete Slots"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"AutoCompletePrefix"</td>
<td>
<Text code=true>"None"</Text>
</td>
<td>"AutoCompletePrefix content."</td>
</tr>
<tr>
<td>"AutoCompleteSuffix"</td>
<td>
<Text code=true>"None"</Text>
</td>
<td>"AutoCompleteSuffix content."</td>
</tr>
</tbody>
</Table>
<h3>"AutoComplete Ref"</h3>
<Table single_column=true>
<thead>

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

@ -8,7 +8,7 @@ pub fn SliderPage() -> impl IntoView {
let value = create_rw_signal(0.0);
let stepped_value = create_rw_signal(0.0);
let labeled_value = create_rw_signal(0.0);
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Slider"</h1>

3
src/alert/mod.rs
View file

@ -92,7 +92,8 @@ pub fn Alert(
class=ssr_class
use:dyn_classes=class
class:thaw-alert=true
style=move || css_vars.get()>
style=move || css_vars.get()
>
<Icon icon class="thaw-alert__icon"/>
<div>

36
src/auto_complete/mod.rs
View file

@ -129,7 +129,13 @@ pub fn AutoComplete(
let ssr_class = ssr_class(&class);
view! {
<Binder target_ref=auto_complete_ref>
<div class=ssr_class use:dyn_classes=class class:thaw-auto-complete=true ref=auto_complete_ref on:keydown=on_keydown>
<div
class=ssr_class
use:dyn_classes=class
class:thaw-auto-complete=true
ref=auto_complete_ref
on:keydown=on_keydown
>
<Input
value
placeholder
@ -141,22 +147,22 @@ pub fn AutoComplete(
comp_ref=input_ref
>
<InputPrefix if_=auto_complete_prefix.is_some() slot>
{
if let Some(auto_complete_prefix) = auto_complete_prefix {
Some((auto_complete_prefix.children)())
} else {
None
}
}
{if let Some(auto_complete_prefix) = auto_complete_prefix {
Some((auto_complete_prefix.children)())
} else {
None
}}
</InputPrefix>
<InputSuffix if_=auto_complete_suffix.is_some() slot>
{
if let Some(auto_complete_suffix) = auto_complete_suffix {
Some((auto_complete_suffix.children)())
} else {
None
}
}
{if let Some(auto_complete_suffix) = auto_complete_suffix {
Some((auto_complete_suffix.children)())
} else {
None
}}
</InputSuffix>
</Input>
</div>

7
src/avatar/mod.rs
View file

@ -37,7 +37,12 @@ pub fn Avatar(
let ssr_class = ssr_class(&class);
view! {
<span class=ssr_class use:dyn_classes=class class:thaw-avatar=true style=move || css_vars.get()>
<span
class=ssr_class
use:dyn_classes=class
class:thaw-avatar=true
style=move || css_vars.get()
>
{move || {
let src = src.get();
(!src.is_empty()).then(|| view! { <img src=src/> })

2
src/button/mod.rs
View file

@ -221,7 +221,7 @@ pub fn Button(
};
callback.call(event);
};
let ssr_class = ssr_class(&class);
view! {
<button

4
src/input/mod.rs
View file

@ -131,7 +131,7 @@ pub fn Input(
class=("thaw-input--invalid", move || invalid.get())
style=move || css_vars.get()
>
{if let Some(prefix) = input_prefix.map(|prefix| prefix.if_.then(|| prefix)).flatten() {
{if let Some(prefix) = input_prefix.and_then(|prefix| prefix.if_.then_some(prefix)) {
view! { <div class="thaw-input__prefix">{(prefix.children)()}</div> }.into()
} else {
None
@ -153,7 +153,7 @@ pub fn Input(
ref=input_ref
/>
{if let Some(suffix) = input_suffix.map(|suffix| suffix.if_.then(|| suffix)).flatten() {
{if let Some(suffix) = input_suffix.and_then(|suffix| suffix.if_.then_some(suffix)) {
view! { <div class="thaw-input__suffix">{(suffix.children)()}</div> }.into()
} else {
None

13
src/slider/mod.rs
View file

@ -111,11 +111,7 @@ pub fn Slider(
on_cleanup(move || on_mouse_move.remove());
view! {
<div
class="thaw-slider"
style=move || css_vars.get()
on:click=on_mouse_click
>
<div 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"
@ -128,11 +124,8 @@ pub fn Slider(
<div
on:mousedown=on_mouse_down
class="thaw-slider-handle"
style=move || {
format!("left: {}%", percentage.get())
}
>
</div>
style=move || { format!("left: {}%", percentage.get()) }
></div>
</div>
}
}

13
src/slider/slider_label.rs
View file

@ -3,21 +3,18 @@ use leptos::*;
use crate::utils::mount_style;
#[component]
pub fn SliderLabel(
#[prop(into)] value: MaybeSignal<f64>,
children: Children,
) -> impl IntoView {
pub fn SliderLabel(#[prop(into)] value: MaybeSignal<f64>, children: Children) -> impl IntoView {
mount_style("slider-label", include_str!("./slider_label.css"));
view! {
<div
class:thaw-slider-label=true
style=move || {
format!("left: calc(calc({} / var(--thaw-slider-max)) * 100%)", value.get())
}>
format!("left: calc(calc({} / var(--thaw-slider-max)) * 100%)", value.get())
}
>
{children()}
</div>
}
}

8
src/utils/dyn_classes.rs
View file

@ -23,15 +23,13 @@ pub fn dyn_classes(el: HtmlElement<AnyElement>, classes_signal: MaybeSignal<Stri
}
pub fn ssr_class(class: &MaybeSignal<String>) -> String {
let ssr_class;
cfg_if! {
if #[cfg(feature = "ssr")] {
use leptos::SignalGetUntracked;
ssr_class = class.get_untracked();
class.get_untracked()
} else {
let _ = class;
ssr_class = String::new();
String::new()
}
};
ssr_class
}
}