🧑‍💻 Improve Flex components for content layout

src/base/component/flex/item.rs

@@ -7,6 +7,7 @@ pub struct Item {
     weight       : Weight,
     renderable   : Renderable,
     classes      : OptionClasses,
+    item_wide    : flex::ItemWide,
     item_grow    : flex::ItemGrow,
     item_shrink  : flex::ItemShrink,
     item_size    : flex::ItemSize,
@@ -36,7 +37,8 @@ impl ComponentTrait for Item {
         self.alter_classes(
             ClassesOp::Prepend,
             [
-                "flex-item__container".to_owned(),
+                String::from("flex__item"),
+                self.wide().to_string(),
                 self.grow().to_string(),
                 self.shrink().to_string(),
                 self.size().to_string(),
@@ -48,17 +50,22 @@ impl ComponentTrait for Item {
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        let order = match self.weight() {
-            0 => None,
-            _ => Some(concat_string!("order: ", self.weight().to_string(), ";")),
-        };
-        PrepareMarkup::With(html! {
-            div id=[self.id()] class=[self.classes().get()] style=[order] {
-                div class="flex-item__content" {
-                    (self.components().render(cx))
+        let output = self.components().render(cx);
+        if !output.is_empty() {
+            let order = match self.weight() {
+                0 => None,
+                _ => Some(concat_string!("order: ", self.weight().to_string(), ";")),
+            };
+            PrepareMarkup::With(html! {
+                div id=[self.id()] class=[self.classes().get()] style=[order] {
+                    div class="flex__content" {
+                        (output)
+                    }
                 }
-            }
-        })
+            })
+        } else {
+            PrepareMarkup::None
+        }
     }
 }
 
@@ -67,6 +74,12 @@ impl Item {
         Item::default().add_component(component)
     }
 
+    pub fn full(component: impl ComponentTrait) -> Self {
+        Item::default()
+            .with_wide(flex::ItemWide::Full)
+            .add_component(component)
+    }
+
     // Item BUILDER.
 
     #[fn_builder]
@@ -87,6 +100,12 @@ impl Item {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_wide(&mut self, wide: flex::ItemWide) -> &mut Self {
+        self.item_wide = wide;
+        self
+    }
+
     #[fn_builder]
     pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self {
         self.item_grow = grow;
@@ -100,6 +119,8 @@ impl Item {
     }
 
     #[fn_builder]
+    // Ensures the item occupies the exact specified width, neither growing nor shrinking,
+    // regardless of the available space in the container or the size of other items.
     pub fn alter_size(&mut self, size: flex::ItemSize) -> &mut Self {
         self.item_size = size;
         self
@@ -131,6 +152,10 @@ impl Item {
 
     // Item GETTERS.
 
+    pub fn wide(&self) -> &flex::ItemWide {
+        &self.item_wide
+    }
+
     pub fn grow(&self) -> &flex::ItemGrow {
         &self.item_grow
     }