🚧 Working on regions layout

src/base/component/basic.rs

@@ -4,5 +4,11 @@ pub use html::Html;
 mod fluent;
 pub use fluent::Fluent;
 
+mod body;
+pub use body::Body;
+
 mod components;
 pub use components::Components;
+
+mod region;
+pub use region::Region;

src/base/component/basic/body.rs

@@ -0,0 +1,51 @@
+use crate::prelude::*;
+
+#[derive(AutoDefault)]
+pub struct Body(MixedComponents);
+
+impl ComponentTrait for Body {
+    fn new() -> Self {
+        Body::default()
+    }
+
+    fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
+        let skip_to_id = cx.body_skip_to().get().unwrap_or("content".to_owned());
+
+        PrepareMarkup::With(html! {
+            body id=[cx.body_id().get()] class=[cx.body_classes().get()] {
+                @if let Some(skip) = L10n::l("skip_to_content").using(cx.langid()) {
+                    div class="skip__to_content" {
+                        a href=(concat_string!("#", skip_to_id)) { (skip) }
+                    }
+                }
+                (self.components().render(cx))
+            }
+        })
+    }
+}
+
+impl Body {
+    pub fn with(component: impl ComponentTrait) -> Self {
+        Body::default().add_component(component)
+    }
+
+    // Body BUILDER.
+
+    #[fn_builder]
+    pub fn alter_components(&mut self, op: AnyOp) -> &mut Self {
+        self.0.alter_value(op);
+        self
+    }
+
+    #[rustfmt::skip]
+    pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
+        self.0.alter_value(AnyOp::Add(AnyComponent::with(component)));
+        self
+    }
+
+    // Body GETTERS.
+
+    pub fn components(&self) -> &MixedComponents {
+        &self.0
+    }
+}

src/base/component/basic/region.rs

@@ -0,0 +1,31 @@
+use crate::prelude::*;
+
+#[derive(AutoDefault)]
+pub struct Region(OptionId);
+
+impl ComponentTrait for Region {
+    fn new() -> Self {
+        Region::default()
+    }
+
+    fn id(&self) -> Option<String> {
+        self.0.get()
+    }
+
+    fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
+        match self.id() {
+            Some(id) => PrepareMarkup::With(cx.prepare_region(id)),
+            _ => PrepareMarkup::None,
+        }
+    }
+}
+
+impl Region {
+    // Region BUILDER.
+
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.0.alter_value(id);
+        self
+    }
+}

src/base/component/flex.rs

@@ -4,9 +4,6 @@ pub use container::Container;
 mod item;
 pub use item::Item;
 
-mod region;
-pub use region::Region;
-
 use crate::prelude::*;
 
 // *************************************************************************************************

src/base/component/flex/container.rs

@@ -4,7 +4,6 @@ use crate::prelude::*;
 pub enum ContainerType {
     #[default]
     Default,
-    Body,
     Header,
     Main,
     Section,
@@ -77,11 +76,6 @@ impl ComponentTrait for Container {
                     (output)
                 }
             }),
-            ContainerType::Body => PrepareMarkup::With(html! {
-                body id=[self.id()] class=[self.classes().get()] style=[gap] {
-                    (output)
-                }
-            }),
             ContainerType::Header => PrepareMarkup::With(html! {
                 header id=[self.id()] class=[self.classes().get()] style=[gap] {
                     (output)
@@ -112,13 +106,6 @@ impl ComponentTrait for Container {
 }
 
 impl Container {
-    pub fn body() -> Self {
-        Container {
-            container_type: ContainerType::Body,
-            ..Default::default()
-        }
-    }
-
     pub fn header() -> Self {
         Container {
             container_type: ContainerType::Header,
@@ -210,7 +197,6 @@ impl Container {
         self
     }
 
-    #[rustfmt::skip]
     pub fn add_item(mut self, item: flex::Item) -> Self {
         self.items.alter_value(AnyOp::Add(AnyComponent::with(item)));
         self

src/base/component/flex/item.rs

@@ -4,6 +4,7 @@ use crate::prelude::*;
 pub enum ItemType {
     #[default]
     Default,
+    Region,
     Wrapper,
     Bundle,
 }
@@ -57,36 +58,60 @@ impl ComponentTrait for Item {
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        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(), ";")),
-            };
-            match self.item_type() {
-                ItemType::Default => PrepareMarkup::With(html! {
-                    div id=[self.id()] class=[self.classes().get()] style=[order] {
-                        div class="flex__content" {
-                            (output)
-                        }
-                    }
-                }),
-                ItemType::Wrapper => PrepareMarkup::With(html! {
-                    div id=[self.id()] class=[self.classes().get()] style=[order] {
+        let (output, region) = match self.item_type() {
+            ItemType::Region => (
+                self.components().render(cx),
+                if let Some(id) = self.id() {
+                    cx.prepare_region(id)
+                } else {
+                    Markup::default()
+                },
+            ),
+            _ => (self.components().render(cx), Markup::default()),
+        };
+        if output.is_empty() && region.is_empty() {
+            return PrepareMarkup::None;
+        }
+        let order = match self.weight() {
+            0 => None,
+            _ => Some(concat_string!("order: ", self.weight().to_string(), ";")),
+        };
+        match self.item_type() {
+            ItemType::Default => PrepareMarkup::With(html! {
+                div id=[self.id()] class=[self.classes().get()] style=[order] {
+                    div class="flex__content" {
                         (output)
                     }
-                }),
-                ItemType::Bundle => PrepareMarkup::With(html! {
+                }
+            }),
+            ItemType::Region => PrepareMarkup::With(html! {
+                div id=[self.id()] class=[self.classes().get()] style=[order] {
+                    div class="flex__content flex__region" {
+                        (region)
+                        (output)
+                    }
+                }
+            }),
+            ItemType::Wrapper => PrepareMarkup::With(html! {
+                div id=[self.id()] class=[self.classes().get()] style=[order] {
                     (output)
-                }),
-            }
-        } else {
-            PrepareMarkup::None
+                }
+            }),
+            ItemType::Bundle => PrepareMarkup::With(html! {
+                (output)
+            }),
         }
     }
 }
 
 impl Item {
+    pub fn region() -> Self {
+        Item {
+            item_type: ItemType::Region,
+            ..Default::default()
+        }
+    }
+
     pub fn wrapper() -> Self {
         Item {
             item_type: ItemType::Wrapper,

src/base/component/flex/region.rs

@@ -1,37 +0,0 @@
-use crate::prelude::*;
-
-#[derive(AutoDefault)]
-pub struct Region(OptionId);
-
-impl ComponentTrait for Region {
-    fn new() -> Self {
-        Region::default()
-    }
-
-    fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        if let Some(name) = self.name().get() {
-            return PrepareMarkup::With(cx.prepare_region(name.as_str()));
-        }
-        PrepareMarkup::None
-    }
-}
-
-impl Region {
-    pub fn named(name: impl Into<String>) -> Self {
-        Region::new().with_name(name)
-    }
-
-    // Region BUILDER.
-
-    #[fn_builder]
-    pub fn alter_name(&mut self, name: impl Into<String>) -> &mut Self {
-        self.0.alter_value(name);
-        self
-    }
-
-    // Region GETTERS.
-
-    pub fn name(&self) -> &OptionId {
-        &self.0
-    }
-}