feat: Tag adds align and justify prop (#139)

thaw-ui · Mar 17, 2024 · dc1f984 · dc1f984
1 parent 12273fc
commit dc1f984
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 1 deletion.
diff --git a/demo_markdown/docs/space/mod.md b/demo_markdown/docs/space/mod.md
@@ -39,11 +39,61 @@ view! {
 }
 ```
 
+### Align
+
+```rust demo
+view! {
+    <Space vertical=true>
+        <Space align=SpaceAlign::Start>
+            <Button style="height: 60px">"Start"</Button>
+            <Button style="height: 40px">"Start"</Button>
+            <Button>"Start"</Button>
+        </Space>
+        <Space align=SpaceAlign::Center>
+            <Button style="height: 60px">"Center"</Button>
+            <Button style="height: 40px">"Center"</Button>
+            <Button>"Center"</Button>
+        </Space>
+        <Space align=SpaceAlign::End>
+            <Button style="height: 60px">"End"</Button>
+            <Button style="height: 40px">"End"</Button>
+            <Button>"End"</Button>
+        </Space>
+    </Space>
+}
+```
+
+### Justify
+
+```rust demo
+view! {
+    <Space vertical=true>
+        <Space justify=SpaceJustify::SpaceAround>
+            <Button>"SpaceAround"</Button>
+            <Button>"SpaceAround"</Button>
+            <Button>"SpaceAround"</Button>
+        </Space>
+        <Space justify=SpaceJustify::Center>
+            <Button>"Center"</Button>
+            <Button>"Center"</Button>
+            <Button>"Center"</Button>
+        </Space>
+        <Space justify=SpaceJustify::End>
+            <Button>"End"</Button>
+            <Button>"End"</Button>
+            <Button>"End"</Button>
+        </Space>
+    </Space>
+}
+```
+
 ### Space Props
 
 | Name     | Type                                | Default              | Description                              |
 | -------- | ----------------------------------- | -------------------- | ---------------------------------------- |
 | class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the space element. |
 | vertical | `bool`                              | `false`              | Whether to lay out vertically.           |
 | gap      | `SpaceGap`                          | `SpaceGap::Medium`   | Space's gap.                             |
+| align    | `OptionalMaybeSignal<SpaceAlign>`   | `None`               | Vertical arrangement.                    |
+| justify  | `OptionalMaybeSignal<SpaceJustify>` | `None`               | Horizontal arrangement.                  |
 | children | `Children`                          |                      | Space's content.                         |
diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs
@@ -1,4 +1,4 @@
-use crate::utils::{class_list::class_list, mount_style, OptionalProp};
+use crate::utils::{class_list::class_list, mount_style, OptionalMaybeSignal, OptionalProp};
 use leptos::*;
 
 #[derive(Default)]
@@ -16,6 +16,8 @@ pub enum SpaceGap {
 pub fn Space(
     #[prop(optional)] gap: SpaceGap,
     #[prop(optional)] vertical: bool,
+    #[prop(optional, into)] align: OptionalMaybeSignal<SpaceAlign>,
+    #[prop(optional, into)] justify: OptionalMaybeSignal<SpaceJustify>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     children: Children,
 ) -> impl IntoView {
@@ -32,6 +34,8 @@ pub fn Space(
         <div
             class=class_list!["thaw-space", class.map(| c | move || c.get())]
             style:gap=gap
+            style:align-items=move || align.get().map(|a| a.as_str())
+            style:justify-content=move || justify.get().map(|j| j.as_str())
             style:flex-direction=if vertical { "column" } else { "row" }
         >
 
@@ -46,3 +50,55 @@ pub fn Space(
         </div>
     }
 }
+
+#[derive(Clone)]
+pub enum SpaceAlign {
+    FlexStart,
+    FlexEnd,
+    Start,
+    End,
+    Center,
+    Baseline,
+    Stretch,
+}
+
+impl SpaceAlign {
+    fn as_str(&self) -> &'static str {
+        match self {
+            Self::FlexStart => "flex-start",
+            Self::FlexEnd => "flex-end",
+            Self::Start => "start",
+            Self::End => "end",
+            Self::Center => "center",
+            Self::Baseline => "baseline",
+            Self::Stretch => "stretch",
+        }
+    }
+}
+
+#[derive(Clone)]
+pub enum SpaceJustify {
+    FlexStart,
+    FlexEnd,
+    Start,
+    End,
+    Center,
+    SpaceAround,
+    SpaceBetween,
+    SpaceEvenly,
+}
+
+impl SpaceJustify {
+    fn as_str(&self) -> &'static str {
+        match self {
+            Self::FlexStart => "flex-start",
+            Self::FlexEnd => "flex-end",
+            Self::Start => "start",
+            Self::End => "end",
+            Self::Center => "center",
+            Self::SpaceAround => "space-around",
+            Self::SpaceBetween => "space-between",
+            Self::SpaceEvenly => "space-evenly",
+        }
+    }
+}