From 9eda9757d3ac79fd6b9dc95b6e4cc5cd158fce4a Mon Sep 17 00:00:00 2001 From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com> Date: Sun, 7 Jan 2024 19:20:08 +0800 Subject: [PATCH] Feat/drawer (#71) * feat: add drawer component * feat: drawer style * fix(demo): nightly Callback --- demo/Cargo.toml | 8 ++++ demo/src/app.rs | 1 + demo/src/pages/components.rs | 4 ++ demo_markdown/docs/drawer/mod.md | 35 +++++++++++++++++ demo_markdown/src/lib.rs | 1 + thaw/src/drawer/drawer.css | 61 ++++++++++++++++++++++++++++++ thaw/src/drawer/mod.rs | 65 ++++++++++++++++++++++++++++++++ thaw/src/lib.rs | 2 + 8 files changed, 177 insertions(+) create mode 100644 demo_markdown/docs/drawer/mod.md create mode 100644 thaw/src/drawer/drawer.css create mode 100644 thaw/src/drawer/mod.rs diff --git a/demo/Cargo.toml b/demo/Cargo.toml index 8a3001a..2ab4f8c 100644 --- a/demo/Cargo.toml +++ b/demo/Cargo.toml @@ -34,3 +34,11 @@ hydrate = [ "thaw/hydrate", ] nightly = ["leptos/nightly", "leptos_meta/nightly", "leptos_router/nightly"] + +# https://benw.is/posts/how-i-improved-my-rust-compile-times-by-seventy-five-percent#optimization-level + +[profile.dev] +opt-level = 1 + +[profile.dev.package."*"] +opt-level = 3 \ No newline at end of file diff --git a/demo/src/app.rs b/demo/src/app.rs index 719d6ce..54598b1 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -56,6 +56,7 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { + diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 8d30d67..5215885 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -233,6 +233,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "badge".into(), label: "Badge".into(), }, + MenuItemOption { + value: "drawer".into(), + label: "Drawer".into(), + }, MenuItemOption { value: "message".into(), label: "Message".into(), diff --git a/demo_markdown/docs/drawer/mod.md b/demo_markdown/docs/drawer/mod.md new file mode 100644 index 0000000..f8e4fb7 --- /dev/null +++ b/demo_markdown/docs/drawer/mod.md @@ -0,0 +1,35 @@ +# Drawer + +```rust demo +let show = create_rw_signal(false); +let placement = create_rw_signal(DrawerPlacement::Top); + +let open = Callback::new(move |new_placement: DrawerPlacement| { + show.set(true); + placement.set(new_placement); +}); + +view! { + + + + + + + + "Hello" + +} +``` + +### Drawer Props + +| Name | Type | Default | Desciption | +| --------- | ------------------------------ | ------------------------ | ----------------------------------------- | +| class | `MaybeSignal` | `Default::default()` | Addtional classes for the drawer element. | +| show | `MaybeSignal` | | Whether to show drawer. | +| title | `MaybeSignal` | `Default::default()` | Drawer title. | +| placement | `MaybeSignal` | `DrawerPlacement::Right` | Drawer placement. | +| width | `MaybeSignal` | `520px` | Drawer width. | +| height | `MaybeSignal` | `260px` | Drawer height. | +| children | `Children` | | Drawer content. | diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index 3c02911..04c74b2 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -50,6 +50,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt include_str!("../docs/date_picker/mod.md"), ), ("DividerMdPage", include_str!("../docs/divider/mod.md")), + ("DrawerMdPage", include_str!("../docs/drawer/mod.md")), ("GridMdPage", include_str!("../docs/grid/mod.md")), ("IconMdPage", include_str!("../docs/icon/mod.md")), ("ImageMdPage", include_str!("../docs/image/mod.md")), diff --git a/thaw/src/drawer/drawer.css b/thaw/src/drawer/drawer.css new file mode 100644 index 0000000..41fd72b --- /dev/null +++ b/thaw/src/drawer/drawer.css @@ -0,0 +1,61 @@ +.thaw-drawer-container { + z-index: 2001; +} + +.thaw-drawer-mask { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background-color: #0007; + z-index: 2000; +} + +.thaw-drawer { + position: absolute; + z-index: 2002; +} + +.thaw-drawer > .thaw-card { + border-radius: 0; + height: 100%; +} + +.thaw-drawer > .thaw-card > .thaw-card__header { + border-bottom: 1px solid var(--thaw-border-color); + font-size: 16px; +} + +.thaw-drawer > .thaw-card > .thaw-card__content { + flex: 1; + padding: 20px 28px; +} + +.thaw-drawer--placement-top { + height: var(--thaw-height); + top: 0; + left: 0; + right: 0; +} + +.thaw-drawer--placement-bottom { + height: var(--thaw-height); + bottom: 0; + left: 0; + right: 0; +} + +.thaw-drawer--placement-left { + width: var(--thaw-width); + top: 0; + bottom: 0; + left: 0; +} + +.thaw-drawer--placement-right { + width: var(--thaw-width); + top: 0; + bottom: 0; + right: 0; +} diff --git a/thaw/src/drawer/mod.rs b/thaw/src/drawer/mod.rs new file mode 100644 index 0000000..2929619 --- /dev/null +++ b/thaw/src/drawer/mod.rs @@ -0,0 +1,65 @@ +use crate::{ + components::Teleport, + utils::{class_list::class_list, mount_style}, + Card, +}; +use leptos::*; + +#[component] +pub fn Drawer( + #[prop(into)] show: RwSignal, + #[prop(optional, into)] title: MaybeSignal, + #[prop(optional, into)] placement: MaybeSignal, + #[prop(default = MaybeSignal::Static("520px".to_string()), into)] width: MaybeSignal, + #[prop(default = MaybeSignal::Static("260px".to_string()), into)] height: MaybeSignal, + #[prop(optional, into)] class: MaybeSignal, + children: Children, +) -> impl IntoView { + mount_style("drawer", include_str!("./drawer.css")); + let css_vars = create_memo(move |_| { + let mut css_vars = String::new(); + css_vars.push_str(&format!("--thaw-width: {};", width.get())); + css_vars.push_str(&format!("--thaw-height: {};", height.get())); + css_vars + }); + + view! { + +
+
+
+ {children()} +
+
+ + } +} + +#[derive(Clone, Default)] +pub enum DrawerPlacement { + Top, + Bottom, + Left, + #[default] + Right, +} + +impl DrawerPlacement { + pub fn as_str(&self) -> &'static str { + match self { + Self::Top => "top", + Self::Bottom => "bottom", + Self::Left => "left", + Self::Right => "right", + } + } +} diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs index f86b994..09d938e 100644 --- a/thaw/src/lib.rs +++ b/thaw/src/lib.rs @@ -12,6 +12,7 @@ mod color_picker; mod components; mod date_picker; mod divider; +mod drawer; mod global_style; mod grid; mod icon; @@ -56,6 +57,7 @@ pub use code::*; pub use color_picker::*; pub use date_picker::*; pub use divider::*; +pub use drawer::*; pub use global_style::*; pub use grid::*; pub use icon::*;