From 82e6f680183cd6f834b755f464da15c30f42bc7e Mon Sep 17 00:00:00 2001 From: luoxiao Date: Tue, 2 Jul 2024 17:20:58 +0800 Subject: [PATCH] feat: adds Toast component --- demo/src/app.rs | 1 + demo/src/pages/components.rs | 4 +++ demo_markdown/docs/toast/mod.md | 9 +++++++ demo_markdown/src/lib.rs | 1 + thaw/src/lib.rs | 2 ++ thaw/src/toast/mod.rs | 7 ++++++ thaw/src/toast/toast.rs | 8 ++++++ thaw/src/toast/toast_body.rs | 20 +++++++++++++++ thaw/src/toast/toast_footer.rs | 6 +++++ thaw/src/toast/toast_title.rs | 31 ++++++++++++++++++++++++ thaw/src/toast/toaster.css | 43 +++++++++++++++++++++++++++++++++ thaw/src/toast/toaster.rs | 10 ++++++++ 12 files changed, 142 insertions(+) create mode 100644 demo_markdown/docs/toast/mod.md create mode 100644 thaw/src/toast/mod.rs create mode 100644 thaw/src/toast/toast.rs create mode 100644 thaw/src/toast/toast_body.rs create mode 100644 thaw/src/toast/toast_footer.rs create mode 100644 thaw/src/toast/toast_title.rs create mode 100644 thaw/src/toast/toaster.css create mode 100644 thaw/src/toast/toaster.rs diff --git a/demo/src/app.rs b/demo/src/app.rs index 839fe0b..38818b1 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -93,6 +93,7 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { + // diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 4728548..e53a6e6 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -307,6 +307,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/time-picker".into(), label: "Time Picker".into(), }, + MenuItemOption { + value: "/components/toast".into(), + label: "Toast".into(), + }, MenuItemOption { value: "/components/upload".into(), label: "Upload".into(), diff --git a/demo_markdown/docs/toast/mod.md b/demo_markdown/docs/toast/mod.md new file mode 100644 index 0000000..d77d29b --- /dev/null +++ b/demo_markdown/docs/toast/mod.md @@ -0,0 +1,9 @@ +# Toast + +```rust +view! { + + +} + +``` \ No newline at end of file diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index 59fac85..f2e1252 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -72,6 +72,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt "TextareaMdPage" => "../docs/textarea/mod.md", "TimePickerMdPage" => "../docs/time_picker/mod.md", "TextMdPage" => "../docs/text/mod.md", + "ToastMdPage" => "../docs/toast/mod.md", "UploadMdPage" => "../docs/upload/mod.md" }; diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs index 3a99e67..b146f1b 100644 --- a/thaw/src/lib.rs +++ b/thaw/src/lib.rs @@ -43,6 +43,7 @@ mod text; mod textarea; mod theme; mod time_picker; +mod toast; mod upload; pub use accordion::*; @@ -91,4 +92,5 @@ pub use textarea::*; pub use thaw_utils::{create_component_ref, ComponentRef, SignalWatch}; pub use theme::*; pub use time_picker::*; +pub use toast::*; pub use upload::*; diff --git a/thaw/src/toast/mod.rs b/thaw/src/toast/mod.rs new file mode 100644 index 0000000..4baa1df --- /dev/null +++ b/thaw/src/toast/mod.rs @@ -0,0 +1,7 @@ +mod toast; +mod toast_title; +mod toaster; +mod toast_body; +mod toast_footer; + +pub use toast_title::*; diff --git a/thaw/src/toast/toast.rs b/thaw/src/toast/toast.rs new file mode 100644 index 0000000..3bf9735 --- /dev/null +++ b/thaw/src/toast/toast.rs @@ -0,0 +1,8 @@ +use leptos::*; + +#[component] +pub fn Toast(id: String) -> impl IntoView { + view! { + + } +} diff --git a/thaw/src/toast/toast_body.rs b/thaw/src/toast/toast_body.rs new file mode 100644 index 0000000..412faf4 --- /dev/null +++ b/thaw/src/toast/toast_body.rs @@ -0,0 +1,20 @@ +use leptos::*; +use thaw_components::OptionComp; + +#[component] +pub fn ToastBody( + #[prop(optional)] toast_body_subtitle: Option, + children: Children, +) -> impl IntoView { + view! { + {children()} + + {(subtitle.children)()} + + } +} + +#[slot] +pub struct ToastBodySubtitle { + children: Children, +} diff --git a/thaw/src/toast/toast_footer.rs b/thaw/src/toast/toast_footer.rs new file mode 100644 index 0000000..076c0fd --- /dev/null +++ b/thaw/src/toast/toast_footer.rs @@ -0,0 +1,6 @@ +use leptos::*; + +#[component] +pub fn ToastFooter(children: Children) -> impl IntoView { + children() +} diff --git a/thaw/src/toast/toast_title.rs b/thaw/src/toast/toast_title.rs new file mode 100644 index 0000000..4ea3755 --- /dev/null +++ b/thaw/src/toast/toast_title.rs @@ -0,0 +1,31 @@ +use leptos::*; +use thaw_components::OptionComp; + +#[component] +pub fn ToastTitle( + #[prop(optional)] toast_title_media: Option, + children: Children, + #[prop(optional)] toast_title_action: Option, +) -> impl IntoView { + view! { +
+ +
+ {children()} + + {(action.children)()} + + } +} + +#[slot] +pub struct ToastTitleMedia { + children: Children, +} + +#[slot] +pub struct ToastTitleAction { + children: Children, +} diff --git a/thaw/src/toast/toaster.css b/thaw/src/toast/toaster.css new file mode 100644 index 0000000..972920f --- /dev/null +++ b/thaw/src/toast/toaster.css @@ -0,0 +1,43 @@ +.thaw-toast { + display: grid; + grid-template-columns: auto 1fr auto; + padding: 12px; + border-radius: var(--borderRadiusMedium); + border: 1px solid var(--colorTransparentStroke); + box-shadow: var(--shadow8); + font-size: var(--fontSizeBase300); + line-height: 20px; + font-weight: var(--fontWeightSemibold); + color: var(--colorNeutralForeground1); + background-color: var(--colorNeutralBackground1); +} + +.thaw-toast-title__media { + display: flex; + padding-top: 2px; + grid-column-end: 2; + padding-right: 8px; + font-size: 16px; + color: var(--colorNeutralForeground1); + color: var(--colorNeutralForeground2); +} + +.thaw-toast-title__media > svg { + display: inline; + line-height: 0; +} + +.thaw-toast-title { + display: flex; + grid-column-end: 3; + color: var(--colorNeutralForeground1); + word-break: break-word; +} + +.thaw-toast-title__action { + display: flex; + align-items: start; + padding-left: 12px; + grid-column-end: -1; + color: var(--colorBrandForeground1); +} diff --git a/thaw/src/toast/toaster.rs b/thaw/src/toast/toaster.rs new file mode 100644 index 0000000..b668d83 --- /dev/null +++ b/thaw/src/toast/toaster.rs @@ -0,0 +1,10 @@ +use leptos::*; +use thaw_utils::mount_style; + +#[component] +pub fn Toaster(toaster_id: String) -> impl IntoView { + mount_style("toaster", include_str!("./toaster.css")); + view! { + + } +}