feat: add grid component

src/grid/grid_item.rs

@@ -0,0 +1,40 @@
+use super::use_grid;
+use leptos::*;
+
+#[component]
+fn GridItem(
+    #[prop(default = MaybeSignal::Static(1u16), into)] span: MaybeSignal<u16>,
+    #[prop(optional, into)] offset: MaybeSignal<i32>,
+    children: Children,
+) -> impl IntoView {
+    let grid = use_grid();
+
+    let style = create_memo(move |_| {
+        let mut style = String::from("display: grid;");
+        let offset = offset.get();
+        let span = i32::from(span.get());
+        let x_gap = grid.x_gap.get();
+
+        if offset > 0 {
+            style.push_str(&format!(
+                "margin-left: calc((100% - {}px) / {} * {} + {}px)",
+                (span + offset - 1) * x_gap,
+                span + offset,
+                offset,
+                offset * x_gap
+            ));
+        }
+        style.push_str(&format!(
+            "grid-column: span {} / span {}",
+            span + offset,
+            span + offset
+        ));
+
+        style
+    });
+    view! {
+        <div class="melt-grid-item" style=move || style.get()>
+            {children()}
+        </div>
+    }
+}

src/grid/mod.rs

@@ -0,0 +1,46 @@
+mod grid_item;
+
+pub use grid_item::*;
+use leptos::*;
+
+#[component]
+fn Grid(
+    #[prop(default = MaybeSignal::Static(1u16), into)] cols: MaybeSignal<u16>,
+    #[prop(optional, into)] x_gap: MaybeSignal<i32>,
+    #[prop(optional, into)] y_gap: MaybeSignal<i32>,
+    children: Children,
+) -> impl IntoView {
+    let grid_injection_key = create_rw_signal(GridInjectionKey::new(x_gap));
+    provide_context(grid_injection_key);
+
+    let style = create_memo(move |_| {
+        let mut style = String::from("display: grid;");
+        style.push_str(&format!(
+            "grid-template-columns: repeat({}, minmax(0px, 1fr));",
+            cols.get()
+        ));
+        style.push_str(&format!("grid-gap: {}px ${}px;", y_gap.get(), x_gap.get()));
+        style
+    });
+
+    view! {
+        <div class="melt-grid" style=move || style.get()>
+            {children()}
+        </div>
+    }
+}
+
+#[derive(Clone)]
+pub struct GridInjectionKey {
+    x_gap: MaybeSignal<i32>,
+}
+
+impl GridInjectionKey {
+    pub fn new(x_gap: MaybeSignal<i32>) -> Self {
+        Self { x_gap }
+    }
+}
+
+pub fn use_grid() -> GridInjectionKey {
+    expect_context::<GridInjectionKey>()
+}

src/lib.rs

@@ -5,6 +5,7 @@ mod checkbox;
 mod code;
 mod color_picker;
 mod components;
+mod grid;
 mod icon;
 mod image;
 mod input;
@@ -29,6 +30,7 @@ pub use card::*;
 pub use checkbox::*;
 pub use code::*;
 pub use color_picker::*;
+pub use grid::*;
 pub use icon::*;
 pub use image::*;
 pub use input::*;

src/menu/mod.rs

@@ -45,5 +45,5 @@ impl MenuInjectionKey {
 }
 
 pub fn use_menu() -> RwSignal<MenuInjectionKey> {
-    use_context::<RwSignal<MenuInjectionKey>>().expect("MenuInjectionKey not exist")
+    expect_context::<RwSignal<MenuInjectionKey>>()
 }