refactor: image

demo_markdown/docs/image/mod.md

@@ -7,6 +7,17 @@ view! {
 }
 ```
 
+### Shape
+
+```rust demo
+view! {
+    <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px"/>
+    <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px" shape=ImageShape::Circular/>
+    <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="200px" height="200px" shape=ImageShape::Rounded/>
+}
+```
+
+
 ### Image Props
 
 | Name | Type | Default | Desciption |

thaw/src/image/image.css

@@ -0,0 +1,38 @@
+.thaw-image {
+    display: inline-block;
+    box-sizing: border-box;
+    border-color: var(--colorNeutralStroke1);
+    border-radius: var(--borderRadiusNone);
+}
+
+.thaw-image--rounded {
+    border-radius: var(--borderRadiusMedium);
+}
+
+.thaw-image--circular {
+    border-radius: var(--borderRadiusCircular);
+}
+
+.thaw-image--block {
+    width: 100%;
+}
+
+.thaw-image-fit-none {
+    object-fit: none;
+}
+.thaw-image-fit-contain {
+    object-fit: contain;
+}
+.thaw-image-fit-cover {
+    object-fit: cover;
+}
+.thaw-image-fit-fill {
+    object-fit: fill;
+}
+.thaw-image-fit-scale-down {
+    object-fit: scale-down;
+}
+
+.thaw-image--shadow {
+    box-shadow: var(--shadow4);
+}

thaw/src/image/mod.rs

@@ -1,44 +1,86 @@
 use leptos::*;
-use thaw_utils::OptionalProp;
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn Image(
-    #[prop(optional, into)] src: OptionalProp<MaybeSignal<String>>,
+    /// path to the image you want to display
-    #[prop(optional, into)] alt: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)]
-    #[prop(optional, into)] width: MaybeSignal<String>,
+    src: MaybeProp<String>,
-    #[prop(optional, into)] height: MaybeSignal<String>,
+    /// description of the image, which isn't mandatory but is incredibly useful for accessibility
-    #[prop(optional, into)] border_radius: MaybeSignal<String>,
+    #[prop(optional, into)]
-    #[prop(optional, into)] object_fit: OptionalProp<MaybeSignal<String>>,
+    alt: MaybeProp<String>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] width: MaybeProp<String>,
+    #[prop(optional, into)] height: MaybeProp<String>,
+    /// An image can appear square, circular, or rounded.
+    #[prop(optional, into)]
+    shape: MaybeSignal<ImageShape>,
+    /// An image can set how it should be resized to fit its container.
+    #[prop(optional, into)]
+    block: MaybeSignal<bool>,
+    /// An image can appear elevated with shadow.
+    #[prop(optional, into)]
+    shadow: MaybeSignal<bool>,
+    /// An image can set how it should be resized to fit its container.
+    #[prop(optional, into)]
+    fit: MaybeSignal<ImageFit>,
+    #[prop(optional, into)] class: MaybeProp<String>,
 ) -> impl IntoView {
-    let style = move || {
+    mount_style("image", include_str!("./image.css"));
-        let mut style = String::new();
-
-        let width = width.get();
-        if !width.is_empty() {
-            style.push_str(&format!("width: {width};"))
-        }
-
-        let height = height.get();
-        if !height.is_empty() {
-            style.push_str(&format!("height: {height};"))
-        }
-
-        let border_radius = border_radius.get();
-        if !border_radius.is_empty() {
-            style.push_str(&format!("border-radius: {border_radius};"))
-        }
-
-        style
-    };
 
     view! {
         <img
-            class=class.map(|c| move || c.get())
+            class=class_list![
-            src=src.map(|s| move || s.get())
+                "thaw-image",
-            alt=alt.map(|a| move || a.get())
+                ("thaw-image--block", move || block.get()),
-            style=style
+                ("thaw-image--shadow", move || shadow.get()),
-            object_fit=object_fit.map(|o| move || o.get())
+                move || format!("thaw-image--{}", shape.get().as_str()),
+                move || format!("thaw-image--fit-{}", fit.get().as_str()),
+                class
+            ]
+            src=move || src.get()
+            alt=move || alt.get()
+            width=move || width.get()
+            height=move || height.get()
         />
     }
 }
+
+#[derive(Default, Clone)]
+pub enum ImageShape {
+    Circular,
+    Rounded,
+    #[default]
+    Square,
+}
+
+impl ImageShape {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            ImageShape::Circular => "circular",
+            ImageShape::Rounded => "rounded",
+            ImageShape::Square => "square",
+        }
+    }
+}
+
+#[derive(Default, Clone)]
+pub enum ImageFit {
+    None,
+    Contain,
+    Cover,
+    #[default]
+    Fill,
+    ScaleDown,
+}
+
+impl ImageFit {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            ImageFit::None => "none",
+            ImageFit::Contain => "contain",
+            ImageFit::Cover => "cover",
+            ImageFit::Fill => "fill",
+            ImageFit::ScaleDown => "scale-down",
+        }
+    }
+}