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

feat: adds Tooltip component

Browse source
This commit is contained in:
luoxiao 2024-08-14 17:40:06 +08:00 • committed by luoxiaozero
parent 61284d57fc
commit 5aac76c558
9 changed files with 290 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demo/src/app.rs
View file

@ -107,6 +107,9 @@ fn TheRouter() -> impl IntoView {
<Route path=path!("/textarea") view=TextareaMdPage/> <Route path=path!("/textarea") view=TextareaMdPage/>
<Route path=path!("/time-picker") view=TimePickerMdPage/> <Route path=path!("/time-picker") view=TimePickerMdPage/>
<Route path=path!("/toast") view=ToastMdPage /> <Route path=path!("/toast") view=ToastMdPage />
<Route path=path!("/tooltip") view=TooltipMdPage />
</ParentRoute>
<ParentRoute path=path!("/components") view=ComponentsPage>
<Route path=path!("/upload") view=UploadMdPage/> <Route path=path!("/upload") view=UploadMdPage/>
</ParentRoute> </ParentRoute>
</Routes> </Routes>

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

@ -250,8 +250,8 @@ fn gen_search_all_options() -> Vec<AutoCompleteOption> {
.into_iter() .into_iter()
.flat_map(|group| { .flat_map(|group| {
group.children.into_iter().map(|item| AutoCompleteOption { group.children.into_iter().map(|item| AutoCompleteOption {
value: item.value, value: item.value.to_string(),
label: item.label, label: item.label.to_string(),
}) })
}) })
.collect() .collect()

212
demo/src/pages/components.rs
View file

@ -86,225 +86,229 @@ pub fn ComponentsPage() -> impl IntoView {
} }
pub(crate) struct NavGroupOption { pub(crate) struct NavGroupOption {
pub label: String, pub label: &'static str,
pub children: Vec<NavItemOption>, pub children: Vec<NavItemOption>,
} }
pub(crate) struct NavItemOption { pub(crate) struct NavItemOption {
pub label: String, pub label: &'static str,
pub value: String, pub value: &'static str,
} }
pub(crate) fn gen_nav_data() -> Vec<NavGroupOption> { pub(crate) fn gen_nav_data() -> Vec<NavGroupOption> {
vec![ vec![
NavGroupOption { NavGroupOption {
label: "Getting Started".into(), label: "Getting Started",
children: vec![ children: vec![
NavItemOption { NavItemOption {
value: "/guide/installation".into(), value: "/guide/installation",
label: "Installation".into(), label: "Installation",
}, },
NavItemOption { NavItemOption {
value: "/guide/server-sider-rendering".into(), value: "/guide/server-sider-rendering",
label: "Server Sider Rendering".into(), label: "Server Sider Rendering",
}, },
], ],
}, },
// NavGroupOption { // NavGroupOption {
// label: "Development".into(), // label: "Development",
// children: vec![ // children: vec![
// NavItemOption { // NavItemOption {
// value: "/guide/development/components".into(), // value: "/guide/development/components",
// label: "Components".into(), // label: "Components",
// }, // },
// ], // ],
// }, // },
NavGroupOption { NavGroupOption {
label: "Components".into(), label: "Components",
children: vec![ children: vec![
NavItemOption { NavItemOption {
value: "/components/accordion".into(), value: "/components/accordion",
label: "Accordion".into(), label: "Accordion",
}, },
NavItemOption { NavItemOption {
value: "/components/anchor".into(), value: "/components/anchor",
label: "Anchor".into(), label: "Anchor",
}, },
NavItemOption { NavItemOption {
value: "/components/auto-complete".into(), value: "/components/auto-complete",
label: "Auto Complete".into(), label: "Auto Complete",
}, },
NavItemOption { NavItemOption {
value: "/components/avatar".into(), value: "/components/avatar",
label: "Avatar".into(), label: "Avatar",
}, },
NavItemOption { NavItemOption {
value: "/components/back-top".into(), value: "/components/back-top",
label: "Back Top".into(), label: "Back Top",
}, },
NavItemOption { NavItemOption {
value: "/components/badge".into(), value: "/components/badge",
label: "Badge".into(), label: "Badge",
}, },
NavItemOption { NavItemOption {
value: "/components/breadcrumb".into(), value: "/components/breadcrumb",
label: "Breadcrumb".into(), label: "Breadcrumb",
}, },
NavItemOption { NavItemOption {
value: "/components/button".into(), value: "/components/button",
label: "Button".into(), label: "Button",
}, },
NavItemOption { NavItemOption {
value: "/components/calendar".into(), value: "/components/calendar",
label: "Calendar".into(), label: "Calendar",
}, },
NavItemOption { NavItemOption {
value: "/components/card".into(), value: "/components/card",
label: "Card".into(), label: "Card",
}, },
NavItemOption { NavItemOption {
value: "/components/checkbox".into(), value: "/components/checkbox",
label: "Checkbox".into(), label: "Checkbox",
}, },
NavItemOption { NavItemOption {
value: "/components/color-picker".into(), value: "/components/color-picker",
label: "Color Picker".into(), label: "Color Picker",
}, },
NavItemOption { NavItemOption {
value: "/components/combobox".into(), value: "/components/combobox",
label: "Combobox".into(), label: "Combobox",
}, },
NavItemOption { NavItemOption {
value: "/components/config-provider".into(), value: "/components/config-provider",
label: "Config Provider".into(), label: "Config Provider",
}, },
NavItemOption { NavItemOption {
value: "/components/date-picker".into(), value: "/components/date-picker",
label: "Date Picker".into(), label: "Date Picker",
}, },
NavItemOption { NavItemOption {
value: "/components/dialog".into(), value: "/components/dialog",
label: "Dialog".into(), label: "Dialog",
}, },
NavItemOption { NavItemOption {
value: "/components/divider".into(), value: "/components/divider",
label: "Divider".into(), label: "Divider",
}, },
NavItemOption { NavItemOption {
value: "/components/drawer".into(), value: "/components/drawer",
label: "Drawer".into(), label: "Drawer",
}, },
NavItemOption { NavItemOption {
value: "/components/grid".into(), value: "/components/grid",
label: "Grid".into(), label: "Grid",
}, },
NavItemOption { NavItemOption {
value: "/components/icon".into(), value: "/components/icon",
label: "Icon".into(), label: "Icon",
}, },
NavItemOption { NavItemOption {
value: "/components/image".into(), value: "/components/image",
label: "Image".into(), label: "Image",
}, },
NavItemOption { NavItemOption {
value: "/components/input".into(), value: "/components/input",
label: "Input".into(), label: "Input",
}, },
NavItemOption { NavItemOption {
value: "/components/layout".into(), value: "/components/layout",
label: "Layout".into(), label: "Layout",
}, },
NavItemOption { NavItemOption {
value: "/components/loading-bar".into(), value: "/components/loading-bar",
label: "Loading Bar".into(), label: "Loading Bar",
}, },
NavItemOption { NavItemOption {
value: "/components/menu".into(), value: "/components/menu",
label: "Menu".into(), label: "Menu",
}, },
NavItemOption { NavItemOption {
value: "/components/message-bar".into(), value: "/components/message-bar",
label: "Message Bar".into(), label: "Message Bar",
}, },
NavItemOption { NavItemOption {
value: "/components/nav".into(), value: "/components/nav",
label: "Nav".into(), label: "Nav",
}, },
NavItemOption { NavItemOption {
value: "/components/pagination".into(), value: "/components/pagination",
label: "Pagination".into(), label: "Pagination",
}, },
NavItemOption { NavItemOption {
value: "/components/popover".into(), value: "/components/popover",
label: "Popover".into(), label: "Popover",
}, },
NavItemOption { NavItemOption {
value: "/components/progress-bar".into(), value: "/components/progress-bar",
label: "ProgressBar".into(), label: "ProgressBar",
}, },
NavItemOption { NavItemOption {
value: "/components/radio".into(), value: "/components/radio",
label: "Radio".into(), label: "Radio",
}, },
NavItemOption { NavItemOption {
value: "/components/scrollbar".into(), value: "/components/scrollbar",
label: "Scrollbar".into(), label: "Scrollbar",
}, },
NavItemOption { NavItemOption {
value: "/components/skeleton".into(), value: "/components/skeleton",
label: "Skeleton".into(), label: "Skeleton",
}, },
NavItemOption { NavItemOption {
value: "/components/slider".into(), value: "/components/slider",
label: "Slider".into(), label: "Slider",
}, },
NavItemOption { NavItemOption {
value: "/components/space".into(), value: "/components/space",
label: "Space".into(), label: "Space",
}, },
NavItemOption { NavItemOption {
value: "/components/spin-button".into(), value: "/components/spin-button",
label: "Spin Button".into(), label: "Spin Button",
}, },
NavItemOption { NavItemOption {
value: "/components/spinner".into(), value: "/components/spinner",
label: "Spinner".into(), label: "Spinner",
}, },
NavItemOption { NavItemOption {
value: "/components/switch".into(), value: "/components/switch",
label: "Switch".into(), label: "Switch",
}, },
NavItemOption { NavItemOption {
value: "/components/tab-list".into(), value: "/components/tab-list",
label: "Tab List".into(), label: "Tab List",
}, },
NavItemOption { NavItemOption {
value: "/components/table".into(), value: "/components/table",
label: "Table".into(), label: "Table",
}, },
NavItemOption { NavItemOption {
value: "/components/tag".into(), value: "/components/tag",
label: "Tag".into(), label: "Tag",
}, },
NavItemOption { NavItemOption {
value: "/components/text".into(), value: "/components/text",
label: "Text".into(), label: "Text",
}, },
NavItemOption { NavItemOption {
value: "/components/textarea".into(), value: "/components/textarea",
label: "Textarea".into(), label: "Textarea",
}, },
NavItemOption { NavItemOption {
value: "/components/time-picker".into(), value: "/components/time-picker",
label: "Time Picker".into(), label: "Time Picker",
}, },
NavItemOption { NavItemOption {
value: "/components/toast".into(), value: "/components/toast",
label: "Toast".into(), label: "Toast",
}, },
NavItemOption { NavItemOption {
value: "/components/upload".into(), value: "/components/tooltip",
label: "Upload".into(), label: "Tooltip",
},
NavItemOption {
value: "/components/upload",
label: "Upload",
}, },
], ],
}, },

1
demo_markdown/src/lib.rs
View file

@ -69,6 +69,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"TextareaMdPage" => "../../thaw/src/textarea/docs/mod.md", "TextareaMdPage" => "../../thaw/src/textarea/docs/mod.md",
"TimePickerMdPage" => "../../thaw/src/time_picker/docs/mod.md", "TimePickerMdPage" => "../../thaw/src/time_picker/docs/mod.md",
"ToastMdPage" => "../../thaw/src/toast/docs/mod.md", "ToastMdPage" => "../../thaw/src/toast/docs/mod.md",
"TooltipMdPage" => "../../thaw/src/tooltip/docs/mod.md",
"UploadMdPage" => "../../thaw/src/upload/docs/mod.md" "UploadMdPage" => "../../thaw/src/upload/docs/mod.md"
}; };

2
thaw/src/lib.rs
View file

@ -46,6 +46,7 @@ mod textarea;
mod theme; mod theme;
mod time_picker; mod time_picker;
mod toast; mod toast;
mod tooltip;
mod upload; mod upload;
pub use accordion::*; pub use accordion::*;
@ -96,4 +97,5 @@ pub use thaw_utils::{ComponentRef, SignalWatch};
pub use theme::*; pub use theme::*;
pub use time_picker::*; pub use time_picker::*;
pub use toast::*; pub use toast::*;
pub use tooltip::*;
pub use upload::*; pub use upload::*;

11
thaw/src/tooltip/docs/mod.md Normal file
View file

@ -0,0 +1,11 @@
# Tooltip
```rust demo
view! {
<Tooltip content="Example tooltip">
<Button>
"Example"
</Button>
</Tooltip>
}
```

3
thaw/src/tooltip/mod.rs Normal file
View file

@ -0,0 +1,3 @@
mod tooltip;
pub use tooltip::*;

0
thaw/src/tooltip/tooltip.css Normal file
View file

160
thaw/src/tooltip/tooltip.rs Normal file
View file

@ -0,0 +1,160 @@
use crate::ConfigInjection;
use leptos::{html, leptos_dom::helpers::TimeoutHandle, prelude::*};
use std::time::Duration;
use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
use thaw_utils::{class_list, mount_style};
#[slot]
pub struct TooltipContent {
#[prop(optional, into)]
class: MaybeProp<String>,
children: Children,
}
#[component]
pub fn Tooltip(
#[prop(optional, into)] class: MaybeProp<String>,
#[prop(optional)] tooltip_content: Option<TooltipContent>,
/// The text of the tooltip.
#[prop(optional, into)]
content: MaybeProp<String>,
/// Configure the positioning of the tooltip
#[prop(optional)]
position: TooltipPosition,
/// The tooltip's visual appearance.
#[prop(optional, into)]
appearance: MaybeProp<TooltipAppearance>,
children: Children,
) -> impl IntoView {
mount_style("tooltip", include_str!("./tooltip.css"));
let config_provider = ConfigInjection::expect_context();
let content_ref = NodeRef::<html::Div>::new();
let tooltip_ref = NodeRef::<html::Div>::new();
let is_show_content = RwSignal::new(false);
let content_handle = StoredValue::new(None::<TimeoutHandle>);
let on_mouse_enter = move |_| {
content_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.clear();
}
});
is_show_content.set(true);
};
let on_mouse_leave = move |_| {
content_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.clear();
}
*handle = set_timeout_with_handle(
move || {
is_show_content.set(false);
},
Duration::from_millis(100),
)
.ok();
});
};
Owner::on_cleanup(move || {
content_handle.update_value(|handle| {
if let Some(handle) = handle.take() {
handle.clear();
}
});
});
view! {
<Binder target_ref=tooltip_ref>
<div
class=class_list!["thaw-tooltip", class]
node_ref=tooltip_ref
on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave
>
{children()}
</div>
<Follower slot show=is_show_content placement=position>
<CSSTransition
node_ref=content_ref
name="tooltip-transition"
appear=is_show_content.get_untracked()
show=is_show_content
let:display
>
<div
class=class_list![
"thaw-config-provider thaw-tooltip-content",
move || appearance.get().map(|a| format!("thaw-tooltip-content--{}", a.as_str()))
]
data-thaw-id=config_provider.id().clone()
style=move || display.get().unwrap_or_default()
role="tooltip"
node_ref=content_ref
on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave
>
{
move || {
content.get()
}
}
<div class="thaw-tooltip-content__angle"></div>
</div>
</CSSTransition>
</Follower>
</Binder>
}
}
#[derive(Clone)]
pub enum TooltipAppearance {
Normal,
Inverted,
}
impl TooltipAppearance {
pub fn as_str(&self) -> &'static str {
match self {
Self::Normal => "normal",
Self::Inverted => "inverted",
}
}
}
#[derive(Default)]
pub enum TooltipPosition {
#[default]
Top,
Bottom,
Left,
Right,
TopStart,
TopEnd,
LeftStart,
LeftEnd,
RightStart,
RightEnd,
BottomStart,
BottomEnd,
}
impl From<TooltipPosition> for FollowerPlacement {
fn from(value: TooltipPosition) -> Self {
match value {
TooltipPosition::Top => Self::Top,
TooltipPosition::Bottom => Self::Bottom,
TooltipPosition::Left => Self::Left,
TooltipPosition::Right => Self::Right,
TooltipPosition::TopStart => Self::TopStart,
TooltipPosition::TopEnd => Self::TopEnd,
TooltipPosition::LeftStart => Self::LeftStart,
TooltipPosition::LeftEnd => Self::LeftEnd,
TooltipPosition::RightStart => Self::RightStart,
TooltipPosition::RightEnd => Self::RightEnd,
TooltipPosition::BottomStart => Self::BottomStart,
TooltipPosition::BottomEnd => Self::BottomEnd,
}
}
}