2023-06-18 19:40:23 +08:00
|
|
|
use leptos::*;
|
|
|
|
use leptos_router::use_navigate;
|
2023-11-05 16:03:58 +08:00
|
|
|
use thaw::*;
|
2023-06-18 19:40:23 +08:00
|
|
|
|
|
|
|
#[component]
|
2023-08-29 09:11:22 +08:00
|
|
|
pub fn SiteHeader() -> impl IntoView {
|
2023-10-24 21:49:36 +08:00
|
|
|
let theme = use_rw_theme();
|
2023-10-26 23:24:16 +08:00
|
|
|
let theme_name = create_memo(move |_| {
|
|
|
|
theme.with(|theme| {
|
2023-11-16 12:33:04 +08:00
|
|
|
if theme.name == *"light" {
|
2023-10-26 23:24:16 +08:00
|
|
|
"Dark"
|
|
|
|
} else {
|
|
|
|
"Light"
|
|
|
|
}
|
|
|
|
})
|
|
|
|
});
|
2023-10-24 21:49:36 +08:00
|
|
|
let on_theme = move |_| {
|
2023-10-26 23:24:16 +08:00
|
|
|
if theme_name.get_untracked() == "Light" {
|
2023-10-24 21:49:36 +08:00
|
|
|
theme.set(Theme::light())
|
|
|
|
} else {
|
|
|
|
theme.set(Theme::dark())
|
|
|
|
}
|
|
|
|
};
|
2023-10-26 16:53:51 +08:00
|
|
|
let style = create_memo(move |_| {
|
|
|
|
theme.with(|theme| {
|
2023-11-02 21:29:45 +08:00
|
|
|
format!("height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid {}", theme.common.border_color)
|
2023-10-26 16:53:51 +08:00
|
|
|
})
|
|
|
|
});
|
2023-11-08 17:27:01 +08:00
|
|
|
let search_value = create_rw_signal(String::new());
|
|
|
|
let search_all_options = store_value(gen_search_all_options());
|
|
|
|
let search_options = create_memo(move |_| {
|
|
|
|
let search_value = search_value.get();
|
|
|
|
if search_value.is_empty() {
|
|
|
|
return vec![];
|
|
|
|
}
|
|
|
|
fn match_value(pattern: &str, value: String) -> bool {
|
|
|
|
if pattern.is_empty() {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if value.is_empty() {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if pattern.chars().next() == value.chars().next() {
|
|
|
|
return match_value(pattern.split_at(1).1, value.split_at(1).1.to_string());
|
|
|
|
}
|
|
|
|
match_value(pattern, value.split_at(1).1.to_string())
|
|
|
|
}
|
|
|
|
search_all_options.with_value(|options| {
|
2023-11-16 12:33:04 +08:00
|
|
|
let search_value = search_value.to_lowercase().replace([' ', '-'], "");
|
2023-11-08 17:27:01 +08:00
|
|
|
let search_value = if search_value.len() > 20 {
|
|
|
|
search_value.split_at(20).0
|
|
|
|
} else {
|
|
|
|
&search_value
|
|
|
|
};
|
|
|
|
options
|
|
|
|
.iter()
|
|
|
|
.filter(|option| {
|
2023-11-16 12:33:04 +08:00
|
|
|
let label = option.label.to_lowercase().replace([' ', '-'], "");
|
2023-11-08 17:27:01 +08:00
|
|
|
match_value(search_value, label)
|
|
|
|
})
|
|
|
|
.cloned()
|
|
|
|
.collect()
|
|
|
|
})
|
|
|
|
});
|
2023-11-08 21:53:49 +08:00
|
|
|
let on_search_select = move |path: String| {
|
|
|
|
let navigate = use_navigate();
|
|
|
|
navigate(&path, Default::default());
|
|
|
|
};
|
2023-12-15 00:57:23 +08:00
|
|
|
let auto_complete_ref = create_component_ref::<AutoCompleteRef>();
|
|
|
|
let handle = window_event_listener(ev::keydown, move |event| {
|
|
|
|
let key = event.key();
|
|
|
|
if key == *"/" {
|
|
|
|
if let Some(auto_complete_ref) = auto_complete_ref.get_untracked() {
|
|
|
|
event.prevent_default();
|
|
|
|
auto_complete_ref.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
on_cleanup(move || handle.remove());
|
2023-08-29 09:11:22 +08:00
|
|
|
view! {
|
2023-10-26 16:53:51 +08:00
|
|
|
<LayoutHeader style>
|
2023-11-02 21:29:45 +08:00
|
|
|
<Space>
|
2023-11-05 16:03:58 +08:00
|
|
|
<img src="/thaw/logo.svg" style="width: 36px"/>
|
2023-11-02 21:29:45 +08:00
|
|
|
<div
|
|
|
|
style="cursor: pointer; display: flex; align-items: center; height: 100%; font-weight: 600; font-size: 20px"
|
|
|
|
on:click=move |_| {
|
|
|
|
let navigate = use_navigate();
|
|
|
|
navigate("/", Default::default());
|
|
|
|
}
|
|
|
|
>
|
2023-10-08 09:28:13 +08:00
|
|
|
|
2023-11-05 16:03:58 +08:00
|
|
|
"Thaw UI"
|
2023-11-02 21:29:45 +08:00
|
|
|
</div>
|
|
|
|
</Space>
|
2023-10-24 21:49:36 +08:00
|
|
|
<Space>
|
2023-11-08 21:53:49 +08:00
|
|
|
<AutoComplete
|
|
|
|
value=search_value
|
2023-12-15 00:57:23 +08:00
|
|
|
placeholder="Type '/' to search"
|
2023-11-08 21:53:49 +08:00
|
|
|
options=search_options
|
|
|
|
clear_after_select=true
|
|
|
|
on_select=on_search_select
|
2023-12-15 00:57:23 +08:00
|
|
|
comp_ref=auto_complete_ref
|
|
|
|
>
|
|
|
|
<AutoCompletePrefix slot>
|
|
|
|
<Icon icon=icondata::Icon::from(icondata::AiIcon::AiSearchOutlined) style="font-size: 18px; color: var(--thaw-placeholder-color);"/>
|
|
|
|
</AutoCompletePrefix>
|
|
|
|
</AutoComplete>
|
2023-11-08 11:02:38 +08:00
|
|
|
<Button
|
|
|
|
variant=ButtonVariant::Text
|
2023-11-24 10:04:54 +08:00
|
|
|
on_click=move |_| {
|
2023-11-08 11:02:38 +08:00
|
|
|
let navigate = use_navigate();
|
|
|
|
navigate("/guide/installation", Default::default());
|
|
|
|
}
|
|
|
|
>
|
2023-11-24 10:04:54 +08:00
|
|
|
|
2023-11-08 11:02:38 +08:00
|
|
|
"Guide"
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
variant=ButtonVariant::Text
|
2023-11-24 10:04:54 +08:00
|
|
|
on_click=move |_| {
|
2023-11-08 11:02:38 +08:00
|
|
|
let navigate = use_navigate();
|
|
|
|
navigate("/components/button", Default::default());
|
|
|
|
}
|
|
|
|
>
|
2023-11-24 10:04:54 +08:00
|
|
|
|
2023-11-08 11:02:38 +08:00
|
|
|
"Components"
|
|
|
|
</Button>
|
2023-11-24 10:04:54 +08:00
|
|
|
<Button variant=ButtonVariant::Text on_click=on_theme>
|
2023-10-24 21:49:36 +08:00
|
|
|
{move || theme_name.get()}
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
variant=ButtonVariant::Text
|
2023-11-08 11:02:38 +08:00
|
|
|
icon=icondata::AiIcon::AiGithubOutlined
|
|
|
|
round=true
|
|
|
|
style="font-size: 22px; padding: 0px 6px;"
|
2023-12-11 15:44:22 +08:00
|
|
|
on_click=move |_| {
|
2023-11-05 16:03:58 +08:00
|
|
|
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
|
2023-10-24 21:49:36 +08:00
|
|
|
}
|
2023-11-24 10:04:54 +08:00
|
|
|
/>
|
|
|
|
|
2023-10-24 21:49:36 +08:00
|
|
|
</Space>
|
2023-10-08 09:28:13 +08:00
|
|
|
|
2023-06-18 19:40:23 +08:00
|
|
|
</LayoutHeader>
|
|
|
|
}
|
|
|
|
}
|
2023-11-08 17:27:01 +08:00
|
|
|
|
|
|
|
fn gen_search_all_options() -> Vec<AutoCompleteOption> {
|
|
|
|
use crate::pages::{gen_guide_menu_data, gen_menu_data};
|
|
|
|
let mut options: Vec<_> = gen_menu_data()
|
|
|
|
.into_iter()
|
2023-11-16 12:33:04 +08:00
|
|
|
.flat_map(|group| {
|
2023-11-08 17:27:01 +08:00
|
|
|
group.children.into_iter().map(|item| AutoCompleteOption {
|
|
|
|
value: format!("/components/{}", item.value),
|
|
|
|
label: item.label,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.collect();
|
2023-11-16 12:33:04 +08:00
|
|
|
options.extend(gen_guide_menu_data().into_iter().flat_map(|group| {
|
|
|
|
group.children.into_iter().map(|item| AutoCompleteOption {
|
|
|
|
value: format!("/guide/{}", item.value),
|
|
|
|
label: item.label,
|
|
|
|
})
|
|
|
|
}));
|
2023-11-08 17:27:01 +08:00
|
|
|
options
|
|
|
|
}
|