Add more book examples

DanielleHuisman · DanielleHuisman · commit ca6e8de873da · 2024-08-29T20:56:21.000+02:00
diff --git a/book-examples/Cargo.toml b/book-examples/Cargo.toml
@@ -19,5 +19,10 @@ log.workspace = true
 tailwind_fuse = "0.3.1"
 
 [features]
-default = ["placement"]
+default = ["arrow", "flip", "placement", "shift", "size", "virtual"]
+arrow = []
+flip = []
 placement = []
+shift = []
+size = []
+virtual = []
diff --git a/book-examples/src/app.rs b/book-examples/src/app.rs
@@ -11,6 +11,27 @@ pub fn App() -> impl IntoView {
             <PlacementDemo />
         });
     }
+    #[cfg(feature = "shift")]
+    {
+        use crate::shift::ShiftDemo;
+        views.push(view! {
+            <ShiftDemo />
+        });
+    }
+    #[cfg(feature = "flip")]
+    {
+        use crate::flip::FlipDemo;
+        views.push(view! {
+            <FlipDemo />
+        });
+    }
+    #[cfg(feature = "size")]
+    {
+        use crate::size::SizeDemo;
+        views.push(view! {
+            <SizeDemo />
+        });
+    }
 
     views.into_view()
 }
diff --git a/book-examples/src/components/chrome.rs b/book-examples/src/components/chrome.rs
@@ -34,7 +34,7 @@ pub fn Chrome(
         Signal::derive(move || matches!(scrollable.get(), Scrollable::Y | Scrollable::Both));
     let is_scrollable = Signal::derive(move || scrollable_x.get() || scrollable_y.get());
 
-    Effect::new_isomorphic(move |_| {
+    Effect::new(move |_| {
         if let Some(scrollable) = scrollable_ref.get() {
             if scrollable_y.get() {
                 scrollable.set_scroll_top(
@@ -95,8 +95,8 @@ pub fn Chrome(
                         <div
                             class={scrollable_x.get().then_some("w-[180vw] md:w-[75rem] lg:w-[90rem]")}
                             style:height={match scrollable_y.get() {
-                                true => scroll_height.get(),
-                                false => 1
+                                true => format!("{}px", scroll_height.get()),
+                                false => "1px".into(),
                             }}
                         />
                     </Show>
@@ -107,8 +107,8 @@ pub fn Chrome(
                         <div
                             class={scrollable_x.get().then_some("w-[180vw] md:w-[75rem] lg:w-[90rem]")}
                             style:height={match scrollable_y.get() {
-                                true => scroll_height.get(),
-                                false => 1
+                                true => format!("{}px", scroll_height.get()),
+                                false => "1px".into(),
                             }}
                         />
                     </Show>
diff --git a/book-examples/src/components/floating.rs b/book-examples/src/components/floating.rs
@@ -6,14 +6,16 @@ use leptos::{
     html::{AnyElement, Div},
     *,
 };
+use tailwind_fuse::tw_merge;
 
 #[component]
 pub fn Floating<CF, CIV, RF, RIV>(
-    content: CF,
+    #[prop(into, optional)] class: MaybeProp<String>,
     #[prop(into, optional)] strategy: MaybeProp<Strategy>,
     #[prop(into, optional)] placement: MaybeProp<Placement>,
     #[prop(into, optional)] middleware: MaybeProp<MiddlewareVec>,
     #[prop(default = false.into(), into)] arrow: MaybeSignal<bool>,
+    content: CF,
     reference: RF,
 ) -> impl IntoView
 where
@@ -43,7 +45,14 @@ where
 
         <div
             node_ref=floating_ref
-            class="z-10 grid place-items-center bg-rose-500 text-base font-semibold text-gray-50"
+            class=move || {
+                let class = class.get();
+
+                tw_merge!(
+                    "z-10 grid place-items-center bg-rose-500 text-base font-semibold text-gray-50",
+                    class
+                )
+            }
             // TODO: style
             style:position=move || floating_styles.get().style_position()
             style:top=move || floating_styles.get().style_top()
diff --git a/book-examples/src/components/grid_item.rs b/book-examples/src/components/grid_item.rs
@@ -6,7 +6,7 @@ pub fn GridItem<F, IV>(
     #[prop(into)] title: MaybeSignal<String>,
     #[prop(into)] description: MaybeSignal<String>,
     chrome: F,
-    #[prop(into)] demo_link: MaybeSignal<String>,
+    // #[prop(into)] demo_link: MaybeSignal<String>,
     #[prop(default = false.into(), into)] hidden: MaybeSignal<bool>,
 ) -> impl IntoView
 where
@@ -27,14 +27,14 @@ where
             <div class="relative items-center rounded-lg bg-gray-800 shadow-md lg:h-auto">
                 {chrome()}
             </div>
-            <a
-                class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50"
-                href=demo_link
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                CodeSandbox
-            </a>
+            // <a
+            //     class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50"
+            //     href=demo_link
+            //     target="_blank"
+            //     rel="noopener noreferrer"
+            // >
+            //     CodeSandbox
+            // </a>
         </div>
     }
 }
diff --git a/book-examples/src/flip.rs b/book-examples/src/flip.rs
@@ -0,0 +1,63 @@
+use floating_ui_leptos::{
+    DetectOverflowOptions, Flip, FlipOptions, MiddlewareVec, Offset, OffsetOptions, Placement,
+    RootBoundary,
+};
+use leptos::{html::Div, *};
+
+use crate::{
+    components::{Chrome, Floating, GridItem, Reference, Scrollable},
+    utils::rem_to_px,
+};
+
+#[component]
+pub fn FlipDemo() -> impl IntoView {
+    let boundary_ref: NodeRef<Div> = NodeRef::new();
+
+    Effect::new(move |_| {
+        if let Some(boundary) = boundary_ref.get() {
+            boundary
+                .first_element_child()
+                .expect("First element child should exist.")
+                .set_scroll_top(rem_to_px(275.0 / 16.0) as i32);
+        }
+    });
+
+    view! {
+        <GridItem
+            title="Flip"
+            description="Changes the placement of your floating element to keep it in view."
+            chrome=move || view! {
+                <div ref={boundary_ref} class="relative overflow-hidden">
+                    <Chrome
+                        label="Scroll down"
+                        scrollable=Scrollable::Y
+                        center=true
+                        shadow=false
+                    >
+                        <Floating
+                            placement=Placement::Top
+                            middleware={
+                                let middleware: MiddlewareVec = vec![
+                                    Box::new(Offset::new(OffsetOptions::Value(5.0))),
+                                    Box::new(Flip::new(FlipOptions::default().detect_overflow(
+                                        DetectOverflowOptions::default().root_boundary(RootBoundary::Document)
+                                    ))),
+                                ];
+
+                                middleware
+                            }
+                            content=move || view! {
+                                <span class="text-sm font-bold">
+                                    Tooltip
+                                </span>
+                            }
+                            reference=move |node_ref| view! {
+                                <Reference node_ref=node_ref />
+                            }
+                        />
+                    </Chrome>
+                </div>
+            }
+        />
+    }
+}
diff --git a/book-examples/src/main.rs b/book-examples/src/main.rs
@@ -1,8 +1,15 @@
 mod app;
 mod components;
+mod utils;
 
+#[cfg(feature = "flip")]
+mod flip;
 #[cfg(feature = "placement")]
 mod placement;
+#[cfg(feature = "shift")]
+mod shift;
+#[cfg(feature = "size")]
+mod size;
 
 use crate::app::App;
 
diff --git a/book-examples/src/placement.rs b/book-examples/src/placement.rs
@@ -21,7 +21,6 @@ pub fn PlacementDemo() -> impl IntoView {
         <GridItem
             title="Placement"
             description="Places your floating element relative to another element."
-            demo_link="https://codesandbox.io/s/lively-waterfall-rbc1pi?file=/src/index.js"
             chrome=move || view! {
                 <Chrome
                     label="Click the dots"
@@ -139,6 +138,11 @@ pub fn PlacementDemo() -> impl IntoView {
                         }
                     />
                     <Floating
+                        placement=placement
+                        middleware={
+                            let middleware: MiddlewareVec = vec![Box::new(Offset::new(OffsetOptions::Value(5.0)))];
+                            middleware
+                        }
                         content=move || view! {
                             <div
                                 class="text-center text-sm font-bold"
@@ -153,11 +157,6 @@ pub fn PlacementDemo() -> impl IntoView {
                         reference=move |node_ref| view! {
                             <Reference node_ref=node_ref />
                         }
-                        placement=placement
-                        middleware={
-                            let middleware: MiddlewareVec = vec![Box::new(Offset::new(OffsetOptions::Value(5.0)))];
-                            middleware
-                        }
                     />
                 </Chrome>
             }
diff --git a/book-examples/src/shift.rs b/book-examples/src/shift.rs
@@ -0,0 +1,75 @@
+use floating_ui_leptos::{
+    Boundary, DetectOverflowOptions, MiddlewareVec, Offset, OffsetOptions, Padding,
+    PartialSideObject, Placement, RootBoundary, Shift, ShiftOptions,
+};
+use leptos::{html::Div, *};
+
+use crate::{
+    components::{Chrome, Floating, GridItem, Reference, Scrollable},
+    utils::rem_to_px,
+};
+
+#[component]
+pub fn ShiftDemo() -> impl IntoView {
+    let boundary_ref: NodeRef<Div> = NodeRef::new();
+
+    Effect::new(move |_| {
+        if let Some(boundary) = boundary_ref.get() {
+            boundary
+                .first_element_child()
+                .expect("First element child should exist.")
+                .set_scroll_top(rem_to_px(200.0 / 16.0) as i32);
+        }
+    });
+
+    view! {
+        <GridItem
+            title="Shift"
+            description="Shifts your floating element to keep it in view."
+            chrome=move || view! {
+                <div ref={boundary_ref} class="relative overflow-hidden">
+                    <Chrome
+                        label="Scroll the container"
+                        scrollable=Scrollable::Y
+                        relative=false
+                        shadow=false
+                    >
+                        <Floating
+                            placement=Placement::Right
+                            middleware=MaybeProp::derive(move || {
+                                let mut detect_overflow_options =  DetectOverflowOptions::default()
+                                    .root_boundary(RootBoundary::Document)
+                                    .padding(Padding::PerSide(PartialSideObject {
+                                        top: Some(rem_to_px(54.0 / 16.0)),
+                                        right: None,
+                                        bottom: Some(rem_to_px(5.0 / 16.0)),
+                                        left: None
+                                    }));
+
+                                if let Some(boundary) = boundary_ref.get() {
+                                    let boundary: &web_sys::Element = &boundary;
+                                    detect_overflow_options = detect_overflow_options.boundary(Boundary::Element(boundary.clone()));
+                                }
+
+                                let middleware: MiddlewareVec = vec![
+                                    Box::new(Offset::new(OffsetOptions::Value(5.0))),
+                                    Box::new(Shift::new(ShiftOptions::default().detect_overflow(detect_overflow_options))),
+                                ];
+
+                                Some(middleware)
+                            })
+                            content=move || view! {
+                                <div class="grid h-48 w-20 place-items-center text-sm font-bold">
+                                    Popover
+                                </div>
+                            }
+                            reference=move |node_ref| view! {
+                                <Reference node_ref=node_ref class="ml-[5%] sm:ml-[33%]" />
+                            }
+                        />
+                    </Chrome>
+                </div>
+            }
+        />
+    }
+}
diff --git a/book-examples/src/size.rs b/book-examples/src/size.rs
@@ -0,0 +1,49 @@
+use floating_ui_leptos::{
+    DetectOverflowOptions, MiddlewareVec, Offset, OffsetOptions, Padding, RootBoundary, Size,
+    SizeOptions,
+};
+use leptos::*;
+
+use crate::components::{Chrome, Floating, GridItem, Reference, Scrollable};
+
+#[component]
+pub fn SizeDemo() -> impl IntoView {
+    view! {
+        <GridItem
+            title="Size"
+            description="Changes the size of your floating element to keep it in view."
+            chrome=move || view! {
+                <Chrome
+                    label="Scroll the container"
+                    scrollable=Scrollable::Y
+                    center=true
+                    shadow=false
+                >
+                    <Floating
+                        class="h-[300px] overflow-hidden max-h-0"
+                        middleware={
+                            let middleware: MiddlewareVec = vec![
+                                Box::new(Offset::new(OffsetOptions::Value(5.0))),
+                                Box::new(Size::new(SizeOptions::default().detect_overflow(
+                                    DetectOverflowOptions::default()
+                                        .root_boundary(RootBoundary::Document)
+                                        .padding(Padding::All(8.0))
+                                ))),
+                            ];
+
+                            middleware
+                        }
+                        content=move || view! {
+                            <div class="grid items-center text-sm font-bold">
+                                Dropdown
+                            </div>
+                        }
+                        reference=move |node_ref| view! {
+                            <Reference node_ref=node_ref />
+                        }
+                    />
+                </Chrome>
+            }
+        />
+    }
+}
diff --git a/book-examples/src/utils.rs b/book-examples/src/utils.rs
@@ -0,0 +1,3 @@
+mod rem_to_px;
+
+pub use rem_to_px::*;
diff --git a/book-examples/src/utils/rem_to_px.rs b/book-examples/src/utils/rem_to_px.rs
@@ -0,0 +1,19 @@
+use leptos::{document, window};
+
+pub fn rem_to_px(value: f64) -> f64 {
+    document()
+        .document_element()
+        .map(|document_element| {
+            value
+                * window()
+                    .get_computed_style(&document_element)
+                    .expect("Valid element.")
+                    .expect("Element should have computed style.")
+                    .get_property_value("font-size")
+                    .expect("Computed style should have font size.")
+                    .replace("px", "")
+                    .parse::<f64>()
+                    .expect("Font size should be a float.")
+        })
+        .unwrap_or(value * 16.0)
+}
diff --git a/book/src/introduction.md b/book/src/introduction.md
diff --git a/packages/dom/src/utils/get_bounding_client_rect.rs b/packages/dom/src/utils/get_bounding_client_rect.rs
diff --git a/packages/leptos/src/lib.rs b/packages/leptos/src/lib.rs
