feat: drawer adds mount prop

Author: luoxiaozero

demo_markdown/docs/drawer/mod.md

@@ -22,6 +22,21 @@ view! {
 }
 ```
 
+### Customize display area
+
+```rust demo
+let show = create_rw_signal(false);
+
+view! {
+    <div style="position: relative; height: 200px; background-color: #0078ff88;">
+        <Button on_click=move |_| show.set(true)>"Open"</Button>
+        <Drawer show mount=DrawerMount::None>
+            "Current position"
+        </Drawer>
+    </div>
+}
+```
+
 ### Drawer Props
 
 | Name      | Type                           | Default                  | Desciption                                |
@@ -32,4 +47,6 @@ view! {
 | placement | `MaybeSignal<DrawerPlacement>` | `DrawerPlacement::Right` | Drawer placement.                         |
 | width     | `MaybeSignal<String>`          | `520px`                  | Drawer width.                             |
 | height    | `MaybeSignal<String>`          | `260px`                  | Drawer height.                            |
+| z_index   | `MaybeSignal<i16>`             | `2000`                   | z-index of the drawer.                    |
+| mount     | `DrawerMount`                  | `DrawerMount::Body`      | Container node of the drawer.             |
 | children  | `Children`                     |                          | Drawer content.                           |

thaw/src/drawer/mod.rs

@@ -12,7 +12,8 @@ pub fn Drawer(
     #[prop(optional, into)] placement: MaybeSignal<DrawerPlacement>,
     #[prop(default = MaybeSignal::Static("520px".to_string()), into)] width: MaybeSignal<String>,
     #[prop(default = MaybeSignal::Static("260px".to_string()), into)] height: MaybeSignal<String>,
-    #[prop(default = MaybeSignal::Static("2000".to_string()), into)] z_index: MaybeSignal<String>,
+    #[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>,
+    #[prop(optional, into)] mount: DrawerMount,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     children: Children,
 ) -> impl IntoView {
@@ -24,8 +25,17 @@ pub fn Drawer(
         css_vars
     });
 
-    view! {
-        <Teleport>
+    #[component]
+    fn DrawerInnr(
+        show: Model<bool>,
+        title: OptionalProp<MaybeSignal<String>>,
+        placement: MaybeSignal<DrawerPlacement>,
+        z_index: MaybeSignal<i16>,
+        class: OptionalProp<MaybeSignal<String>>,
+        css_vars: Memo<String>,
+        children: Children,
+    ) -> impl IntoView {
+        view! {
             <div
                 class="thaw-drawer-container"
                 style=move || if show.get() { format!("z-index: {}", z_index.get()) } else { "display: none".to_string() }
@@ -42,7 +52,18 @@ pub fn Drawer(
                     <Card title>{children()}</Card>
                 </div>
             </div>
-        </Teleport>
+        }
+    }
+
+    match mount {
+        DrawerMount::None => view! {
+            <DrawerInnr show title placement z_index class css_vars children />
+        },
+        DrawerMount::Body => view! {
+            <Teleport>
+                <DrawerInnr show title placement z_index class css_vars children />
+            </Teleport>
+        },
     }
 }
 
@@ -65,3 +86,10 @@ impl DrawerPlacement {
         }
     }
 }
+
+#[derive(Default)]
+pub enum DrawerMount {
+    None,
+    #[default]
+    Body,
+}