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

refactor: auto_complete

Browse source
This commit is contained in:
luoxiao 2024-06-14 17:23:02 +08:00
parent f999e252e4
commit c5cc6337b7
9 changed files with 186 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -149,6 +149,7 @@ pub fn SiteHeader() -> impl IntoView {
<AutoCompletePrefix slot> <AutoCompletePrefix slot>
<Icon icon=icondata::AiSearchOutlined style="font-size: 18px; color: var(--thaw-placeholder-color);"/> <Icon icon=icondata::AiSearchOutlined style="font-size: 18px; color: var(--thaw-placeholder-color);"/>
</AutoCompletePrefix> </AutoCompletePrefix>
<p title="#TODO"></p>
</AutoComplete> </AutoComplete>
<Popover placement=PopoverPlacement::BottomEnd class="demo-header__menu-popover-mobile"> <Popover placement=PopoverPlacement::BottomEnd class="demo-header__menu-popover-mobile">
<PopoverTrigger slot class="demo-header__menu-mobile"> <PopoverTrigger slot class="demo-header__menu-mobile">

21
demo_markdown/docs/auto_complete/mod.md
View file

@ -1,23 +1,30 @@
# Auto Complete # Auto Complete
```rust demo ```rust demo
let value = create_rw_signal(String::new()); let value = RwSignal::new(String::new());
let options = create_memo(move |_| { let options = Memo::<Vec<_>>::new(move |_| {
let prefix = value let prefix = value
.get() .get()
.split_once('@') .split_once('@')
.map_or(value.get(), |v| v.0.to_string()); .map_or(value.get(), |v| v.0.to_string());
vec!["@gmail.com", "@163.com"] vec!["@gmail.com", "@163.com"]
.into_iter() .into_iter()
.map(|suffix| AutoCompleteOption { .map(|suffix| (format!("{prefix}{suffix}"), format!("{prefix}{suffix}")))
label: format!("{prefix}{suffix}"),
value: format!("{prefix}{suffix}"),
})
.collect() .collect()
}); });
view! { view! {
<AutoComplete value options placeholder="Email"/> <AutoComplete value placeholder="Email">
<For
each=move || options.get()
key=|option| option.0.clone()
let:option
>
<AutoCompleteOption2 key=option.0>
{option.1}
</AutoCompleteOption2>
</For>
</AutoComplete>
} }
``` ```

64
thaw/src/auto_complete/auto-complete.css
View file

@ -1,13 +1,27 @@
.thaw-auto-complete__menu { .thaw-auto-complete {
display: inline-flex;
}
.thaw-auto-complete > .thaw-input {
min-width: 250px;
}
div.thaw-auto-complete__listbox {
width: 100%; width: 100%;
row-gap: var(--spacingHorizontalXXS);
display: flex;
flex-direction: column;
min-width: 160px;
/* max-height: 80vh; */
max-height: 200px; max-height: 200px;
padding: 5px; background-color: var(--colorNeutralBackground1);
background-color: var(--thaw-background-color); padding: var(--spacingHorizontalXS);
border-radius: 3px; outline: 1px solid var(--colorTransparentStroke);
border-radius: var(--borderRadiusMedium);
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), box-shadow: var(--shadow16);
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); overflow-y: auto;
overflow: auto;
} }
.thaw-auto-complete__menu-item { .thaw-auto-complete__menu-item {
padding: 6px 5px; padding: 6px 5px;
@ -19,7 +33,7 @@
background-color: var(--thaw-background-color-hover); background-color: var(--thaw-background-color-hover);
} }
.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-active { .thaw-auto-complete__listbox.fade-in-scale-up-transition-leave-active {
transform-origin: inherit; transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1),
@ -27,7 +41,7 @@
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-active { .thaw-auto-complete__listbox.fade-in-scale-up-transition-enter-active {
transform-origin: inherit; transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1),
@ -35,14 +49,38 @@
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-from, .thaw-auto-complete__listbox.fade-in-scale-up-transition-enter-from,
.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-to { .thaw-auto-complete__listbox.fade-in-scale-up-transition-leave-to {
opacity: 0; opacity: 0;
transform: scale(0.9); transform: scale(0.9);
} }
.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-from, .thaw-auto-complete__listbox.fade-in-scale-up-transition-leave-from,
.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-to { .thaw-auto-complete__listbox.fade-in-scale-up-transition-enter-to {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
.thaw-auto-complete-option {
column-gap: var(--spacingHorizontalXS);
position: relative;
display: flex;
align-items: center;
padding: var(--spacingVerticalSNudge) var(--spacingHorizontalS);
line-height: var(--lineHeightBase300);
font-size: var(--fontSizeBase300);
font-family: var(--fontFamilyBase);
color: var(--colorNeutralForeground1);
border-radius: var(--borderRadiusMedium);
cursor: pointer;
}
.thaw-auto-complete-option:hover {
color: var(--colorNeutralForeground1Hover);
background-color: var(--colorNeutralBackground1Hover);
}
.thaw-auto-complete-option:active {
color: var(--colorNeutralForeground1Pressed);
background-color: var(--colorNeutralBackground1Pressed);
}

20
thaw/src/auto_complete/auto_complete_option.rs Normal file
View file

@ -0,0 +1,20 @@
use leptos::*;
use super::AutoCompleteInjection;
#[component]
pub fn AutoCompleteOption2(key: String, children: Children) -> impl IntoView {
let auto_complete = AutoCompleteInjection::use_();
let is_selected = Memo::new(move |_| {
auto_complete.is_selected(&key)
});
view! {
<div
class="thaw-auto-complete-option"
role="option"
aria-selected=move || if is_selected.get() { "true" } else { "false" }
>
{children()}
</div>
}
}

167
thaw/src/auto_complete/mod.rs
View file

@ -1,10 +1,12 @@
mod theme; mod auto_complete_option;
pub use theme::AutoCompleteTheme; pub use auto_complete_option::AutoCompleteOption2;
use crate::{use_theme, ComponentRef, Input, InputPrefix, InputRef, InputSuffix, Theme}; use crate::{ComponentRef, ConfigInjection, Input, InputPrefix, InputRef, InputSuffix};
use leptos::*; use leptos::*;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth}; use thaw_components::{
Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth, OptionComp,
};
use thaw_utils::{class_list, mount_style, Model, OptionalProp, StoredMaybeSignal}; use thaw_utils::{class_list, mount_style, Model, OptionalProp, StoredMaybeSignal};
#[derive(Clone, PartialEq)] #[derive(Clone, PartialEq)]
@ -39,24 +41,10 @@ pub fn AutoComplete(
#[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>, #[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
#[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>, #[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>, #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("auto-complete", include_str!("./auto-complete.css")); mount_style("auto-complete", include_str!("./auto-complete.css"));
let theme = use_theme(Theme::light); let config_provider = ConfigInjection::use_();
let menu_css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--thaw-background-color: {};",
theme.select.menu_background_color
));
css_vars.push_str(&format!(
"--thaw-background-color-hover: {};",
theme.select.menu_background_color_hover
));
});
css_vars
});
let input_ref = ComponentRef::<InputRef>::new(); let input_ref = ComponentRef::<InputRef>::new();
let default_index = if allow_free_input { None } else { Some(0) }; let default_index = if allow_free_input { None } else { Some(0) };
@ -201,6 +189,7 @@ pub fn AutoComplete(
placement=FollowerPlacement::BottomStart placement=FollowerPlacement::BottomStart
width=FollowerWidth::Target width=FollowerWidth::Target
> >
<Provider value=AutoCompleteInjection(value)>
<CSSTransition <CSSTransition
node_ref=menu_ref node_ref=menu_ref
name="fade-in-scale-up-transition" name="fade-in-scale-up-transition"
@ -209,80 +198,92 @@ pub fn AutoComplete(
let:display let:display
> >
<div <div
class="thaw-auto-complete__menu" class="thaw-config-provider thaw-auto-complete__listbox"
style=move || { style=move || display.get()
display data-thaw-id=config_provider.id().clone()
.get()
.map(|d| d.to_string())
.unwrap_or_else(|| menu_css_vars.get())
}
ref=menu_ref ref=menu_ref
role="listbox"
> >
{move || { // {move || {
options // options
.get() // .get()
.into_iter() // .into_iter()
.enumerate() // .enumerate()
.map(|(index, v)| { // .map(|(index, v)| {
let AutoCompleteOption { value: option_value, label } = v; // let AutoCompleteOption { value: option_value, label } = v;
let menu_item_ref = create_node_ref::<html::Div>(); // let menu_item_ref = create_node_ref::<html::Div>();
let on_click = move |_| { // let on_click = move |_| {
select_value(option_value.clone()); // select_value(option_value.clone());
}; // };
let on_mouseenter = move |_| { // let on_mouseenter = move |_| {
select_option_index.set(Some(index)); // select_option_index.set(Some(index));
}; // };
let on_mousedown = move |ev: ev::MouseEvent| { // let on_mousedown = move |ev: ev::MouseEvent| {
ev.prevent_default(); // ev.prevent_default();
}; // };
create_effect(move |_| { // create_effect(move |_| {
if Some(index) == select_option_index.get() { // if Some(index) == select_option_index.get() {
if !is_show_menu.get() { // if !is_show_menu.get() {
return; // return;
} // }
if let Some(menu_item_ref) = menu_item_ref.get() { // if let Some(menu_item_ref) = menu_item_ref.get() {
let menu_ref = menu_ref.get().unwrap(); // let menu_ref = menu_ref.get().unwrap();
let menu_rect = menu_ref.get_bounding_client_rect(); // let menu_rect = menu_ref.get_bounding_client_rect();
let item_rect = menu_item_ref.get_bounding_client_rect(); // let item_rect = menu_item_ref.get_bounding_client_rect();
if item_rect.y() < menu_rect.y() { // if item_rect.y() < menu_rect.y() {
menu_item_ref.scroll_into_view_with_bool(true); // menu_item_ref.scroll_into_view_with_bool(true);
} else if item_rect.y() + item_rect.height() // } else if item_rect.y() + item_rect.height()
> menu_rect.y() + menu_rect.height() // > menu_rect.y() + menu_rect.height()
{ // {
menu_item_ref.scroll_into_view_with_bool(false); // menu_item_ref.scroll_into_view_with_bool(false);
} // }
} // }
} // }
}); // });
view! { // view! {
<div // <div
class="thaw-auto-complete__menu-item" // class="thaw-auto-complete__menu-item"
class=( // class=(
"thaw-auto-complete__menu-item--selected", // "thaw-auto-complete__menu-item--selected",
move || Some(index) == select_option_index.get(), // move || Some(index) == select_option_index.get(),
) // )
on:click=on_click
on:mousedown=on_mousedown
on:mouseenter=on_mouseenter
ref=menu_item_ref
>
{label}
</div>
}
})
.collect_view()
}}
// on:click=on_click
// on:mousedown=on_mousedown
// on:mouseenter=on_mouseenter
// ref=menu_item_ref
// >
// {label}
// </div>
// }
// })
// .collect_view()
// }}
<OptionComp value=children let:children>
{children()}
</OptionComp>
</div> </div>
</CSSTransition> </CSSTransition>
</Provider>
</Follower> </Follower>
</Binder> </Binder>
} }
} }
#[derive(Clone)]
pub(crate) struct AutoCompleteInjection(pub Model<String>);
impl AutoCompleteInjection {
pub fn use_() -> Self {
expect_context()
}
pub fn is_selected(&self, key: &String) -> bool {
self.0.with(|value| value == key)
}
}
#[derive(Clone)] #[derive(Clone)]
pub struct AutoCompleteRef { pub struct AutoCompleteRef {
input_ref: ComponentRef<InputRef>, input_ref: ComponentRef<InputRef>,

23
thaw/src/auto_complete/theme.rs
View file

@ -1,23 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct AutoCompleteTheme {
pub menu_background_color: String,
pub menu_background_color_hover: String,
}
impl ThemeMethod for AutoCompleteTheme {
fn light() -> Self {
Self {
menu_background_color: "#fff".into(),
menu_background_color_hover: "#f3f5f6".into(),
}
}
fn dark() -> Self {
Self {
menu_background_color: "#48484e".into(),
menu_background_color_hover: "#ffffff17".into(),
}
}
}

1
thaw/src/popover/mod.rs
View file

@ -1,6 +1,5 @@
use crate::ConfigInjection; use crate::ConfigInjection;
use leptos::{leptos_dom::helpers::TimeoutHandle, *}; use leptos::{leptos_dom::helpers::TimeoutHandle, *};
use palette::bool_mask::BoolMask;
use std::time::Duration; use std::time::Duration;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement}; use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{add_event_listener, class_list, mount_style}; use thaw_utils::{add_event_listener, class_list, mount_style};

2
thaw/src/theme/common.rs
View file

@ -58,6 +58,7 @@ pub struct CommonTheme {
pub spacing_horizontal_m: String, pub spacing_horizontal_m: String,
pub spacing_horizontal_l: String, pub spacing_horizontal_l: String,
pub spacing_vertical_none: String, pub spacing_vertical_none: String,
pub spacing_vertical_s_nudge: String,
pub spacing_vertical_s: String, pub spacing_vertical_s: String,
pub spacing_vertical_m_nudge: String, pub spacing_vertical_m_nudge: String,
pub spacing_vertical_m: String, pub spacing_vertical_m: String,
@ -139,6 +140,7 @@ impl CommonTheme {
spacing_horizontal_m: "12px".into(), spacing_horizontal_m: "12px".into(),
spacing_horizontal_l: "16px".into(), spacing_horizontal_l: "16px".into(),
spacing_vertical_none: "0".into(), spacing_vertical_none: "0".into(),
spacing_vertical_s_nudge: "6px".into(),
spacing_vertical_s: "8px".into(), spacing_vertical_s: "8px".into(),
spacing_vertical_m_nudge: "10px".into(), spacing_vertical_m_nudge: "10px".into(),
spacing_vertical_m: "12px".into(), spacing_vertical_m: "12px".into(),

9
thaw/src/theme/mod.rs
View file

@ -4,9 +4,9 @@ mod common;
use self::common::CommonTheme; use self::common::CommonTheme;
use crate::{ use crate::{
mobile::{NavBarTheme, TabbarTheme}, mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, CalendarTheme, ColorPickerTheme, AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, ColorPickerTheme, DatePickerTheme,
DatePickerTheme, InputTheme, MessageTheme, ProgressTheme, ScrollbarTheme, InputTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme,
SelectTheme, TimePickerTheme, UploadTheme, UploadTheme,
}; };
pub use color::ColorTheme; pub use color::ColorTheme;
use leptos::*; use leptos::*;
@ -28,7 +28,6 @@ pub struct Theme {
pub upload: UploadTheme, pub upload: UploadTheme,
pub nav_bar: NavBarTheme, pub nav_bar: NavBarTheme,
pub tabbar: TabbarTheme, pub tabbar: TabbarTheme,
pub auto_complete: AutoCompleteTheme,
pub color_picker: ColorPickerTheme, pub color_picker: ColorPickerTheme,
pub progress: ProgressTheme, pub progress: ProgressTheme,
pub calendar: CalendarTheme, pub calendar: CalendarTheme,
@ -52,7 +51,6 @@ impl Theme {
upload: UploadTheme::light(), upload: UploadTheme::light(),
nav_bar: NavBarTheme::light(), nav_bar: NavBarTheme::light(),
tabbar: TabbarTheme::light(), tabbar: TabbarTheme::light(),
auto_complete: AutoCompleteTheme::light(),
color_picker: ColorPickerTheme::light(), color_picker: ColorPickerTheme::light(),
progress: ProgressTheme::light(), progress: ProgressTheme::light(),
calendar: CalendarTheme::light(), calendar: CalendarTheme::light(),
@ -75,7 +73,6 @@ impl Theme {
upload: UploadTheme::dark(), upload: UploadTheme::dark(),
nav_bar: NavBarTheme::dark(), nav_bar: NavBarTheme::dark(),
tabbar: TabbarTheme::dark(), tabbar: TabbarTheme::dark(),
auto_complete: AutoCompleteTheme::dark(),
color_picker: ColorPickerTheme::dark(), color_picker: ColorPickerTheme::dark(),
progress: ProgressTheme::dark(), progress: ProgressTheme::dark(),
calendar: CalendarTheme::dark(), calendar: CalendarTheme::dark(),