mod(container): support layout direction handling for child elements

src/container.zig

@@ -141,10 +141,62 @@ pub fn Container(comptime Event: type) type {
         pub fn handle(this: *@This(), event: Event) ?Event {
             switch (event) {
                 .init => log.debug(".init event", .{}),
-                .resize => |size| {
+                .resize => |size| resize: {
+                    log.debug("Event .resize: {{ .anchor = {{ .col = {d}, .row = {d} }}, .cols = {d}, .rows = {d} }}", .{
+                        size.anchor.col,
+                        size.anchor.row,
+                        size.cols,
+                        size.rows,
+                    });
                     this.size = size;
+
+                    if (this.elements.items.len == 0)
+                        break :resize;
+
+                    const len: u16 = @truncate(this.elements.items.len);
+                    const element_cols = @divTrunc(size.cols, len);
+                    const element_rows = @divTrunc(size.rows, len);
+                    var offset: u16 = 0;
                     for (this.elements.items) |*element| {
-                        const element_size: Size = size;
+                        var element_size: Size = undefined;
+                        switch (this.properties.layout.direction) {
+                            .horizontal => {
+                                var overflow = size.cols % len;
+                                // adjust size according to the containing elements
+                                var cols = element_cols;
+                                if (overflow > 0) {
+                                    overflow -|= 1;
+                                    cols += 1;
+                                }
+                                element_size = .{
+                                    .anchor = .{
+                                        .col = size.anchor.col + offset,
+                                        .row = size.anchor.row,
+                                    },
+                                    .cols = cols,
+                                    .rows = size.rows,
+                                };
+                                offset += cols;
+                            },
+                            .vertical => {
+                                var overflow = size.rows % len;
+                                // adjust size according to the containing elements
+                                var rows = element_rows;
+                                if (overflow > 0) {
+                                    overflow -|= 1;
+                                    rows += 1;
+                                }
+                                element_size = .{
+                                    .anchor = .{
+                                        .col = size.anchor.col,
+                                        .row = size.anchor.row + offset,
+                                    },
+                                    .cols = size.cols,
+                                    .rows = rows,
+                                };
+                                offset += rows;
+                            },
+                        }
                         // TODO; adjust size according to the layout of the `Container`
                         if (element.handle(.{ .resize = element_size })) |e| {
                             _ = e;

src/zterm.zig

@@ -1,6 +1,14 @@
+const container = @import("container.zig");
+
 pub const App = @import("app.zig").App;
 pub const Renderer = @import("render.zig");
 
+// Container Configurations
+pub const Border = container.Border;
+pub const Rectangle = container.Rectangle;
+pub const Scroll = container.Scroll;
+pub const Layout = container.Layout;
+
 pub const Cell = @import("cell.zig");
 pub const Color = @import("color.zig").Color;
 pub const Key = @import("key.zig");