flams_web_utils/components/
drawer.rs

1use ftml_dom::utils::css::inject_css;
2use leptos::prelude::*;
3
4use super::Header;
5
6#[derive(Copy, Clone, Default)]
7pub enum DrawerSize {
8    Small,
9    Medium,
10    #[default]
11    Wide,
12}
13
14impl DrawerSize {
15    fn css(self) -> &'static str {
16        //inject_css("flams-drawer",include_str!("./drawer.css"));
17        let (cls, csstr) = match self {
18            Self::Small => (
19                "flams-drawer-absolute-small",
20                ".flams-drawer-absolute-small {--thaw-drawer--size:20vw !important;z-index:5;}",
21            ),
22            Self::Medium => (
23                "flams-drawer-absolute-medium",
24                ".flams-drawer-absolute-medium {--thaw-drawer--size:50vw !important;z-index:5;}",
25            ),
26            Self::Wide => (
27                "flams-drawer-absolute-wide",
28                ".flams-drawer-absolute-wide {--thaw-drawer--size:80vw !important;z-index:5;}",
29            ),
30        };
31        inject_css(cls, csstr);
32        cls
33    }
34}
35
36#[component]
37pub fn Drawer(
38    lazy: bool,
39    trigger: super::Trigger,
40    #[prop(optional)] header: Option<Header>,
41    #[prop(optional)] size: DrawerSize,
42    mut children: ChildrenFnMut,
43) -> impl IntoView {
44    use thaw::{
45        Button, ButtonAppearance, DrawerBody, DrawerHeader, DrawerHeaderTitle,
46        DrawerHeaderTitleAction, DrawerPosition, OverlayDrawer,
47    };
48    //inject_css("flams-drawer", ".flams-wide-drawer { z-index:5;}");
49    let open = RwSignal::new(false);
50    view! {
51      <span on:click=move |_| open.set(true)>{(trigger.children)()}</span>
52      <OverlayDrawer class=size.css() open position=DrawerPosition::Right>
53        <DrawerHeader><DrawerHeaderTitle>
54          <DrawerHeaderTitleAction slot>
55            <Button
56              appearance=ButtonAppearance::Subtle
57              on_click=move |_| open.set(false)>
58              "x"
59            </Button>
60          </DrawerHeaderTitleAction>
61          {header.map(|h| (h.children)())}
62        </DrawerHeaderTitle></DrawerHeader>
63        <DrawerBody>{move ||
64          if !lazy || open.get() { Some(children())}
65          else { None }
66        }</DrawerBody>
67      </OverlayDrawer>
68    }
69}
flams_web_utils/components/drawer.rs

flams_web_utils/components/
drawer.rs
